1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
import React from "react";
import { notRandomFromArray } from "@sortug/lib";
import "./sentence.css";
import type { AnalyzeRes, ColorTheme, LangToColor } from "../logic/types";
import type { POS_CODE } from "../thai/logic/thainlp";
export function ColoredText({
frags,
fn,
lang,
theme,
}: {
frags: LangToColor<unknown>[];
fn?: (s: any) => void;
lang?: string;
theme: ColorTheme;
}) {
const colors = colorPalette[theme];
console.log("coloredText", theme);
// function getStyle(frags: AnalyzeRes[], i: number) {
// const prev = frags[i - 1];
// const prevC = prev ? notRandomFromArray(prev.word, colors) : "lol";
// const color = notRandomFromArray(s, colors);
// const opacity = prev && prevC === color ? 0.8 : 1;
// const style = { color, opacity };
// return style;
// }
return (
<>
{frags.map((s, i) => {
// old code
const prev = frags[i - 1];
const prevC = prev ? notRandomFromArray(prev.colorBy, colors) : "lol";
const color = notRandomFromArray(s.colorBy, colors);
const style = !prev ? { color } : { color };
return (
<CTInner
lang={lang}
key={s.display + i}
s={s}
style={style}
fn={fn}
/>
);
})}
</>
);
}
export function CTInner({
s,
style,
fn,
lang,
}: {
s: LangToColor<unknown>;
style: any;
fn?: (s: any) => void;
lang?: string;
}) {
function handleClick(e: React.MouseEvent<HTMLSpanElement>) {
if (fn) {
e.stopPropagation();
fn(s.data);
}
}
return (
<span lang={lang} onClick={handleClick} className="word cp" style={style}>
{s.display}
</span>
);
}
export const colorPalette: Record<ColorTheme, string[]> = {
light: [
// Black Standard high contrast
"#000000",
// Charcoal Softer than pure black
"#36454F",
// Slate Grey Cool, dark grey-green
"#2F4F4F",
// Navy Blue Classic professional blue
"#000080",
// Midnight Blue Very deep, rich blue
"#191970",
// Cobalt Vivid, highly legible blue
"#0047AB",
// Teal Distinct blue-green
"#008080",
// Forest Green Nature-inspired dark green
"#006400",
// Pine Green Cooler, bluish green
"#01796F",
// Olive Drab Dark brownish-green
"#4B5320",
// Bronze Metallic brown-orange
"#CD7F32",
// Saddle Brown Robust earthy tone
"#8B4513",
// Chocolate Warm, readable orange-brown
"#D2691E",
// Burnt Sienna Reddish-orange earth tone
"#E97451",
// Firebrick Muted dark red
"#B22222",
// Crimson Vivid, alarming red
"#DC143C",
// Maroon Deep, serious red
"#800000",
// Burgundy Purple-leaning red
"#800020",
// Deep Pink High contrast magenta-pink
"#C71585",
// Dark Violet Vivid purple
"#9400D3",
// Indigo Deep blue-purple
"#4B0082",
// Purple Standard distinct purple
"#800080",
// Rebecca Purple Web-standard bluish purple
"#663399",
// Dim Gray Neutral, medium-dark gray
"#696969",
],
dark: [
// White Standard high contrast
"#FFFFFF",
// Silver Soft readable grey
"#C0C0C0",
// Cream Warm white, easier on eyes
"#FFFDD0",
// Cyan The standard terminal blue-green
"#00FFFF",
// Sky Blue Pleasant, airy blue
"#87CEEB",
// Powder Blue Very pale, soft blue
"#B0E0E6",
// Aquamarine Bright neon blue-green
"#7FFFD4",
// Mint Green Soft, pastel green
"#98FB98",
// Lime Classic high-vis terminal green
"#00FF00",
// Chartreuse Yellow-green neon
"#7FFF00",
// Gold Bright yellow-orange
"#FFD700",
// Yellow Standard high-vis yellow
"#FFFF00",
// Khaki Muted, sandy yellow
"#F0E68C",
// Wheat Soft beige/earth tone
"#F5DEB3",
// Orange Standard distinctive orange
"#FFA500",
// Coral Pinkish-orange
"#FF7F50",
// Salmon Soft reddish-pink
"#FA8072",
// Hot Pink Vivid, high-energy pink
"#FF69B4",
// Magenta Pure, digital pink-purple
"#FF00FF",
// Plum Muted, readable purple
"#DDA0DD",
// Violet Bright, distinct purple
"#EE82EE",
// Lavender Very light purple-blue
"#E6E6FA",
// Periwinkle Soft indigo-blue
"#CCCCFF",
// Thistle Desaturated light purple
"#D8BFD8",
],
};
// export const colors = [
// "#8c2c2c",
// "#000000",
// "#ffd400",
// "#1513a0",
// "#7e7e7e",
// "1eb52d",
// ];
|
