mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-09 02:00:44 +08:00
highlighted text colors (#1119)
* highlighted text colors * fix document error
This commit is contained in:
pngwn
GitHub
parent
190858ffb2
commit
1032313988
@ -6,5 +6,8 @@
|
||||
"main": "src/index.ts",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"private": true
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@gradio/theme": "workspace:^0.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
const browser = typeof document !== "undefined";
|
||||
import { colors } from "@gradio/theme";
|
||||
import { getNextColor } from "./utils";
|
||||
|
||||
export let value: Array<[string, string | number]> = [];
|
||||
@ -8,14 +10,17 @@
|
||||
|
||||
let ctx: CanvasRenderingContext2D;
|
||||
|
||||
function name_to_rgba(name: string) {
|
||||
let _color_map: Record<string, { primary: string; secondary: string }> = {};
|
||||
let active = "";
|
||||
|
||||
function name_to_rgba(name: string, a: number) {
|
||||
if (!ctx) {
|
||||
var canvas = document.createElement("canvas");
|
||||
ctx = canvas.getContext("2d")!;
|
||||
}
|
||||
ctx.fillStyle = name;
|
||||
ctx.fillRect(0, 0, 1, 1);
|
||||
const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
|
||||
const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
|
||||
ctx.clearRect(0, 0, 1, 1);
|
||||
return `rgba(${r}, ${g}, ${b}, ${255 / a})`;
|
||||
}
|
||||
@ -25,6 +30,7 @@
|
||||
if (color_map === null) {
|
||||
color_map = {};
|
||||
}
|
||||
|
||||
$: {
|
||||
if (value.length > 0) {
|
||||
for (let [_, label] of value) {
|
||||
@ -44,16 +50,28 @@
|
||||
function correct_color_map() {
|
||||
for (const col in color_map) {
|
||||
const _c = color_map[col].trim();
|
||||
if (_c.startsWith("rgba")) {
|
||||
color_map[col] = color_map[col];
|
||||
if (_c in colors) {
|
||||
_color_map[col] = colors[_c];
|
||||
} else {
|
||||
color_map[col] = name_to_rgba(color_map[col]);
|
||||
_color_map[col] = {
|
||||
primary: browser ? name_to_rgba(color_map[col], 1) : color_map[col],
|
||||
secondary: browser
|
||||
? name_to_rgba(color_map[col], 0.5)
|
||||
: color_map[col]
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
correct_color_map();
|
||||
}
|
||||
|
||||
function handle_mouseover(label: string) {
|
||||
active = label;
|
||||
}
|
||||
function handle_mouseout(label: string) {
|
||||
active = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
@ -71,10 +89,14 @@
|
||||
{#if mode === "categories"}
|
||||
{#if show_legend}
|
||||
<div class="category-legend flex flex-wrap gap-1 mb-2">
|
||||
{#each Object.entries(color_map) as [category, color], i}
|
||||
{#each Object.entries(_color_map) as [category, color], i}
|
||||
<div
|
||||
class="category-label px-2 rounded text-white font-semibold"
|
||||
style={"background-color:" + color}
|
||||
on:mouseover={() => handle_mouseover(category)}
|
||||
on:focus={() => handle_mouseover(category)}
|
||||
on:mouseout={() => handle_mouseout(category)}
|
||||
on:blur={() => handle_mouseout(category)}
|
||||
class="category-label px-2 rounded-sm font-semibold cursor-pointer"
|
||||
style={"background-color:" + color.secondary}
|
||||
>
|
||||
{category}
|
||||
</div>
|
||||
@ -82,24 +104,24 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="textfield bg-white dark:bg-gray-800 rounded box-border max-w-full break-word inline-flex flex-wrap gap-1"
|
||||
class="textfield bg-white dark:bg-gray-800 rounded-sm box-border max-w-full break-word inline-flex flex-wrap gap-1"
|
||||
>
|
||||
{#each value as [text, category]}
|
||||
<span
|
||||
class="textspan bg-opacity-10 rounded inline-flex items-center px-1.5 space-x-1.5"
|
||||
style={category === null
|
||||
class="textspan bg-opacity-10 rounded-sm inline-flex items-center px-1.5 space-x-1.5 transition-colors"
|
||||
style:background-color={category === null ||
|
||||
(active && active !== category)
|
||||
? ""
|
||||
: `color: ${color_map[category]}; background-color: ${color_map[
|
||||
category
|
||||
].replace("1)", "var(--tw-bg-opacity))")}`}
|
||||
: _color_map[category].secondary}
|
||||
>
|
||||
<span class="text dark:text-white">{text}</span>
|
||||
{#if !show_legend && category !== null}
|
||||
<span
|
||||
class="inline-category text-xs text-white rounded-sm px-1"
|
||||
style={category === null
|
||||
class="inline-category text-xs text-white rounded-sm px-1 transition-colors"
|
||||
style:background-color={category === null ||
|
||||
(active && active !== category)
|
||||
? ""
|
||||
: `background-color: ${color_map[category]}`}
|
||||
: _color_map[category].primary}
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
|
||||
@ -1,36 +1,9 @@
|
||||
import { ordered_colors } from "@gradio/theme";
|
||||
|
||||
export function randInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
export const getNextColor = (index: number, alpha: number = 1): string => {
|
||||
let default_colors = [
|
||||
[255, 99, 132],
|
||||
[54, 162, 235],
|
||||
[240, 176, 26],
|
||||
[153, 102, 255],
|
||||
[75, 192, 192],
|
||||
[255, 159, 64],
|
||||
[194, 88, 74],
|
||||
[44, 102, 219],
|
||||
[44, 163, 23],
|
||||
[191, 46, 217],
|
||||
[160, 162, 162],
|
||||
[163, 151, 27]
|
||||
];
|
||||
if (index < default_colors.length) {
|
||||
var color_set = default_colors[index];
|
||||
} else {
|
||||
var color_set = [randInt(64, 196), randInt(64, 196), randInt(64, 196)];
|
||||
}
|
||||
return (
|
||||
"rgba(" +
|
||||
color_set[0] +
|
||||
", " +
|
||||
color_set[1] +
|
||||
", " +
|
||||
color_set[2] +
|
||||
", " +
|
||||
alpha +
|
||||
")"
|
||||
);
|
||||
export const getNextColor = (index: number): string => {
|
||||
return ordered_colors[index % ordered_colors.length];
|
||||
};
|
||||
|
||||
26
ui/packages/theme/src/colors.ts
Normal file
26
ui/packages/theme/src/colors.ts
Normal file
@ -0,0 +1,26 @@
|
||||
export const ordered_colors = [
|
||||
"red",
|
||||
"green",
|
||||
"blue",
|
||||
"yellow",
|
||||
"purple",
|
||||
"teal",
|
||||
"orange",
|
||||
"cyan",
|
||||
"lime",
|
||||
"pink"
|
||||
];
|
||||
|
||||
// https://play.tailwindcss.com/ZubQYya0aN
|
||||
export const colors = {
|
||||
red: { primary: "#dc2626", secondary: "#fca5a5" },
|
||||
green: { primary: "#16a34a", secondary: "#86efac" },
|
||||
blue: { primary: "#2563eb", secondary: "#93c5fd" },
|
||||
yellow: { primary: "#eab308", secondary: "#fef08a" },
|
||||
purple: { primary: "#9333ea", secondary: "#d8b4fe" },
|
||||
teal: { primary: "#0d9488", secondary: "#5eead4" },
|
||||
orange: { primary: "#ea580c", secondary: "#fdba74" },
|
||||
cyan: { primary: "#0891b2", secondary: "#7dd3fc" },
|
||||
lime: { primary: "#84cc16", secondary: "#d9f99d" },
|
||||
pink: { primary: "#db2777", secondary: "#f9a8d4" }
|
||||
};
|
||||
@ -1,2 +1,3 @@
|
||||
export { default as global } from "./global.css";
|
||||
export { default as tokens } from "./tokens.css";
|
||||
export * from "./colors";
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
["two", "+"],
|
||||
["three", "-"]
|
||||
]}
|
||||
color_map={{ "+": "limegreen", "-": "crimson" }}
|
||||
color_map={{ "+": "green", "-": "red" }}
|
||||
/>
|
||||
|
||||
<h2 class="my-2">Custom color_map without legend</h2>
|
||||
@ -47,5 +47,5 @@
|
||||
["two", "+"],
|
||||
["three", "-"]
|
||||
]}
|
||||
color_map={{ "+": "limegreen", "-": "crimson" }}
|
||||
color_map={{ "+": "orange", "-": "purple" }}
|
||||
/>
|
||||
|
||||
@ -171,7 +171,10 @@ importers:
|
||||
'@gradio/atoms': link:../atoms
|
||||
|
||||
packages/highlighted-text:
|
||||
specifiers: {}
|
||||
specifiers:
|
||||
'@gradio/theme': workspace:^0.0.1
|
||||
dependencies:
|
||||
'@gradio/theme': link:../theme
|
||||
|
||||
packages/html:
|
||||
specifiers: {}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user