Skip to content

Commit 04db407

Browse files
aradziearadzie
committed
feat: customize more theme colors
1 parent 56ee651 commit 04db407

File tree

9 files changed

+146
-27
lines changed

9 files changed

+146
-27
lines changed

‎packages/keybr-theme-designer/lib/design/ChartDesign.tsx

+32-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,36 @@
1+
import { Field, FieldList } from "@keybr/widget";
2+
import { prop } from "./accessors.ts";
3+
import { ChartPreview } from "./ChartPreview.tsx";
14
import { Group } from "./Group.tsx";
5+
import { ColorInput } from "./input/ColorInput.tsx";
6+
import { PreviewPane } from "./PreviewPane.tsx";
27

38
export function ChartDesign() {
4-
return <Group title="Chart Colors">TODO</Group>;
9+
return (
10+
<Group title="Chart Colors">
11+
<FieldList>
12+
<Field>
13+
<ColorInput accessor={prop["--Chart-speed__color"]} />
14+
</Field>
15+
<Field size={6}>Speed</Field>
16+
<Field>
17+
<ColorInput accessor={prop["--Chart-accuracy__color"]} />
18+
</Field>
19+
<Field size={6}>Accuracy</Field>
20+
<Field>
21+
<ColorInput accessor={prop["--Chart-complexity__color"]} />
22+
</Field>
23+
<Field size={6}>Complexity</Field>
24+
</FieldList>
25+
<FieldList>
26+
<Field>
27+
<ColorInput accessor={prop["--Chart-threshold__color"]} />
28+
</Field>
29+
<Field size={6}>Threshold</Field>
30+
</FieldList>
31+
<PreviewPane>
32+
<ChartPreview />
33+
</PreviewPane>
34+
</Group>
35+
);
536
}

‎packages/keybr-theme-designer/lib/design/ChartPreview.tsx

+18-20
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,29 @@ import { KeyDetailsChart } from "@keybr/chart";
22
import { LearningRate, LessonKey, lessonProps, Target } from "@keybr/lesson";
33
import { Letter } from "@keybr/phonetic-model";
44
import { Settings } from "@keybr/settings";
5-
import { Box, Figure } from "@keybr/widget";
5+
import { Box } from "@keybr/widget";
66

77
export function ChartPreview() {
88
const target = new Target(
99
new Settings().set(lessonProps.targetSpeed, /* 35WPM */ 175),
1010
);
1111
return (
12-
<Figure>
13-
<Box alignItems="center" justifyContent="center">
14-
<KeyDetailsChart
15-
lessonKey={
16-
new LessonKey({
17-
letter: new Letter(/* "a" */ 0x0061, 1, "A"),
18-
samples: [],
19-
timeToType: 380,
20-
bestTimeToType: 380,
21-
confidence: target.confidence(380),
22-
bestConfidence: target.confidence(380),
23-
})
24-
}
25-
learningRate={LearningRate.example(target)}
26-
width="36rem"
27-
height="15rem"
28-
/>
29-
</Box>
30-
</Figure>
12+
<Box alignItems="center" justifyContent="center">
13+
<KeyDetailsChart
14+
lessonKey={
15+
new LessonKey({
16+
letter: new Letter(/* "a" */ 0x0061, 1, "A"),
17+
samples: [],
18+
timeToType: 380,
19+
bestTimeToType: 380,
20+
confidence: target.confidence(380),
21+
bestConfidence: target.confidence(380),
22+
})
23+
}
24+
learningRate={LearningRate.example(target)}
25+
width="36rem"
26+
height="15rem"
27+
/>
28+
</Box>
3129
);
3230
}

‎packages/keybr-theme-designer/lib/design/DesignPane.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@ import { themeExt, themeFileName } from "../io/constants.ts";
1212
import { exportTheme, importTheme } from "../io/io.ts";
1313
import { customTheme, darkTheme, lightTheme } from "../themes/themes.ts";
1414
import { BackgroundImage } from "./BackgroundImage.tsx";
15+
import { ChartDesign } from "./ChartDesign.tsx";
1516
import { useCustomTheme } from "./context.ts";
1617
import * as styles from "./DesignPane.module.less";
1718
import { KeyboardDesign } from "./KeyboardDesign.tsx";
1819
import { LessonKeysDesign } from "./LessonKeysDesign.tsx";
20+
import { ProfileDesign } from "./ProfileDesign.tsx";
1921
import { SyntaxDesign } from "./SyntaxDesign.tsx";
2022
import { TextInputDesign } from "./TextInputDesign.tsx";
2123
import { WidgetsDesign } from "./WidgetsDesign.tsx";
@@ -105,6 +107,8 @@ export function DesignPane() {
105107
<BackgroundImage />
106108
<TextInputDesign />
107109
<LessonKeysDesign />
110+
<ChartDesign />
111+
<ProfileDesign />
108112
<KeyboardDesign />
109113
<SyntaxDesign />
110114
</div>

‎packages/keybr-theme-designer/lib/design/ProfileDesign.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Field, FieldList } from "@keybr/widget";
2+
import { prop } from "./accessors.ts";
3+
import { Group } from "./Group.tsx";
4+
import { ColorInput } from "./input/ColorInput.tsx";
5+
import { PreviewPane } from "./PreviewPane.tsx";
6+
import { ProfilePreview } from "./ProfilePreview.tsx";
7+
8+
export function ProfileDesign() {
9+
return (
10+
<Group title="Profile Colors">
11+
<FieldList>
12+
<Field>
13+
<ColorInput accessor={prop["--effort-color"]} />
14+
</Field>
15+
<Field size={6}>Effort</Field>
16+
</FieldList>
17+
<PreviewPane>
18+
<ProfilePreview />
19+
</PreviewPane>
20+
</Group>
21+
);
22+
}

‎packages/keybr-theme-designer/lib/design/ProfilePreview.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { EffortLegend, useEffort } from "@keybr/lesson-ui";
2+
import { Box } from "@keybr/widget";
3+
4+
export function ProfilePreview() {
5+
const effort = useEffort();
6+
return (
7+
<Box alignItems="center" justifyContent="center">
8+
<div>
9+
<EffortLegend effort={effort} />
10+
</div>
11+
</Box>
12+
);
13+
}

‎packages/keybr-theme-designer/lib/design/accessors.ts

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
import { makeAccessor } from "./input/ColorInput.tsx";
22

33
export const prop = {
4-
["--slow-key-color"]: makeAccessor("--slow-key-color"),
5-
["--fast-key-color"]: makeAccessor("--fast-key-color"),
64
["--textinput__color"]: makeAccessor("--textinput__color"),
75
["--textinput--special__color"]: makeAccessor("--textinput--special__color"),
86
["--textinput--hit__color"]: makeAccessor("--textinput--hit__color"),
97
["--textinput--miss__color"]: makeAccessor("--textinput--miss__color"),
10-
["--syntax-keyword"]: makeAccessor("--syntax-keyword"),
11-
["--syntax-number"]: makeAccessor("--syntax-number"),
12-
["--syntax-string"]: makeAccessor("--syntax-string"),
13-
["--syntax-comment"]: makeAccessor("--syntax-comment"),
8+
["--slow-key-color"]: makeAccessor("--slow-key-color"),
9+
["--fast-key-color"]: makeAccessor("--fast-key-color"),
10+
["--effort-color"]: makeAccessor("--effort-color"),
11+
["--Chart-speed__color"]: makeAccessor("--Chart-speed__color"),
12+
["--Chart-accuracy__color"]: makeAccessor("--Chart-accuracy__color"),
13+
["--Chart-complexity__color"]: makeAccessor("--Chart-complexity__color"),
14+
["--Chart-threshold__color"]: makeAccessor("--Chart-threshold__color"),
1415
["--pinky-zone-color"]: makeAccessor("--pinky-zone-color"),
1516
["--ring-zone-color"]: makeAccessor("--ring-zone-color"),
1617
["--middle-zone-color"]: makeAccessor("--middle-zone-color"),
1718
["--left-index-zone-color"]: makeAccessor("--left-index-zone-color"),
1819
["--right-index-zone-color"]: makeAccessor("--right-index-zone-color"),
1920
["--thumb-zone-color"]: makeAccessor("--thumb-zone-color"),
21+
["--syntax-keyword"]: makeAccessor("--syntax-keyword"),
22+
["--syntax-number"]: makeAccessor("--syntax-number"),
23+
["--syntax-string"]: makeAccessor("--syntax-string"),
24+
["--syntax-comment"]: makeAccessor("--syntax-comment"),
2025
} as const;

‎packages/keybr-theme-designer/lib/themes/themes.ts

+36
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ export const lightTheme = new CustomTheme()
3030
.set("--slow-key-color", Color.parse("#CC0000"))
3131
.set("--fast-key-color", Color.parse("#60D788"))
3232
.set("--effort-color", Color.parse("#6699FF"))
33+
.set("--Chart-speed__color", Color.parse("#6FB48C"))
34+
.set("--Chart-accuracy__color", Color.parse("#EF522F"))
35+
.set("--Chart-complexity__color", Color.parse("#AC71D0"))
36+
.set("--Chart-threshold__color", Color.parse("#D2649A"))
3337
.set("--pinky-zone-color", Color.parse("#8EC07C"))
3438
.set("--ring-zone-color", Color.parse("#B8BB26"))
3539
.set("--middle-zone-color", Color.parse("#FABD2F"))
@@ -68,6 +72,10 @@ export const darkTheme = new CustomTheme()
6872
.set("--slow-key-color", Color.parse("#8C1818"))
6973
.set("--fast-key-color", Color.parse("#448154"))
7074
.set("--effort-color", Color.parse("#2D4A86"))
75+
.set("--Chart-speed__color", Color.parse("#517460"))
76+
.set("--Chart-accuracy__color", Color.parse("#914331"))
77+
.set("--Chart-complexity__color", Color.parse("#705282"))
78+
.set("--Chart-threshold__color", Color.parse("#834C67"))
7179
.set("--pinky-zone-color", Color.parse("#617A58"))
7280
.set("--ring-zone-color", Color.parse("#76772D"))
7381
.set("--middle-zone-color", Color.parse("#977831"))
@@ -106,6 +114,10 @@ export const grayTheme = new CustomTheme()
106114
.set("--slow-key-color", Color.parse("#CF5F5F"))
107115
.set("--fast-key-color", Color.parse("#6FA882"))
108116
.set("--effort-color", Color.parse("#759EF0"))
117+
.set("--Chart-speed__color", Color.parse("#7DB494"))
118+
.set("--Chart-accuracy__color", Color.parse("#E36549"))
119+
.set("--Chart-complexity__color", Color.parse("#AD7ECA"))
120+
.set("--Chart-threshold__color", Color.parse("#CC749F"))
109121
.set("--pinky-zone-color", Color.parse("#95BD87"))
110122
.set("--ring-zone-color", Color.parse("#B7B942"))
111123
.set("--middle-zone-color", Color.parse("#ECBB49"))
@@ -144,6 +156,10 @@ export const yellowTheme = new CustomTheme()
144156
.set("--slow-key-color", Color.parse("#CC8B00"))
145157
.set("--fast-key-color", Color.parse("#96D760"))
146158
.set("--effort-color", Color.parse("#956EFF"))
159+
.set("--Chart-speed__color", Color.parse("#9AC381"))
160+
.set("--Chart-accuracy__color", Color.parse("#F47E40"))
161+
.set("--Chart-complexity__color", Color.parse("#C594B0"))
162+
.set("--Chart-threshold__color", Color.parse("#E08B8A"))
147163
.set("--pinky-zone-color", Color.parse("#B0CB75"))
148164
.set("--ring-zone-color", Color.parse("#CDC839"))
149165
.set("--middle-zone-color", Color.parse("#FCC940"))
@@ -182,6 +198,10 @@ export const gardenTheme = new CustomTheme()
182198
.set("--slow-key-color", Color.parse("#CC0000"))
183199
.set("--fast-key-color", Color.parse("#60D788"))
184200
.set("--effort-color", Color.parse("#6699FF"))
201+
.set("--Chart-speed__color", Color.parse("#6FB48C"))
202+
.set("--Chart-accuracy__color", Color.parse("#EF522F"))
203+
.set("--Chart-complexity__color", Color.parse("#AC71D0"))
204+
.set("--Chart-threshold__color", Color.parse("#D2649A"))
185205
.set("--pinky-zone-color", Color.parse("#8EC07C"))
186206
.set("--ring-zone-color", Color.parse("#B8BB26"))
187207
.set("--middle-zone-color", Color.parse("#FABD2F"))
@@ -220,6 +240,10 @@ export const coffeeTheme = new CustomTheme()
220240
.set("--slow-key-color", Color.parse("#CF5F5F"))
221241
.set("--fast-key-color", Color.parse("#6FA882"))
222242
.set("--effort-color", Color.parse("#759EF0"))
243+
.set("--Chart-speed__color", Color.parse("#8BBF9B"))
244+
.set("--Chart-accuracy__color", Color.parse("#F17151"))
245+
.set("--Chart-complexity__color", Color.parse("#BC8AD1"))
246+
.set("--Chart-threshold__color", Color.parse("#DA7FA6"))
223247
.set("--pinky-zone-color", Color.parse("#A4C98E"))
224248
.set("--ring-zone-color", Color.parse("#C5C549"))
225249
.set("--middle-zone-color", Color.parse("#FAC651"))
@@ -258,6 +282,10 @@ export const chocolateTheme = new CustomTheme()
258282
.set("--slow-key-color", Color.parse("#CF5F5F"))
259283
.set("--fast-key-color", Color.parse("#6FA882"))
260284
.set("--effort-color", Color.parse("#759EF0"))
285+
.set("--Chart-speed__color", Color.parse("#6C9F7D"))
286+
.set("--Chart-accuracy__color", Color.parse("#D25033"))
287+
.set("--Chart-complexity__color", Color.parse("#9D69B4"))
288+
.set("--Chart-threshold__color", Color.parse("#BB5F89"))
261289
.set("--pinky-zone-color", Color.parse("#85A871"))
262290
.set("--ring-zone-color", Color.parse("#A6A42C"))
263291
.set("--middle-zone-color", Color.parse("#DBA633"))
@@ -296,6 +324,10 @@ export const honeyTheme = new CustomTheme()
296324
.set("--slow-key-color", Color.parse("#CC8B00"))
297325
.set("--fast-key-color", Color.parse("#8CC64E"))
298326
.set("--effort-color", Color.parse("#956EFF"))
327+
.set("--Chart-speed__color", Color.parse("#9AB762"))
328+
.set("--Chart-accuracy__color", Color.parse("#F47321"))
329+
.set("--Chart-complexity__color", Color.parse("#C58892"))
330+
.set("--Chart-threshold__color", Color.parse("#E07F6C"))
299331
.set("--pinky-zone-color", Color.parse("#B0C057"))
300332
.set("--ring-zone-color", Color.parse("#CDBC1B"))
301333
.set("--middle-zone-color", Color.parse("#FCBE21"))
@@ -334,6 +366,10 @@ export const customTheme = new CustomTheme()
334366
.set("--slow-key-color", Color.parse("#CC0000"))
335367
.set("--fast-key-color", Color.parse("#60D788"))
336368
.set("--effort-color", Color.parse("#6699FF"))
369+
.set("--Chart-speed__color", Color.parse("#6FB48C"))
370+
.set("--Chart-accuracy__color", Color.parse("#EF522F"))
371+
.set("--Chart-complexity__color", Color.parse("#AC71D0"))
372+
.set("--Chart-threshold__color", Color.parse("#D2649A"))
337373
.set("--pinky-zone-color", Color.parse("#8EC07C"))
338374
.set("--ring-zone-color", Color.parse("#B8BB26"))
339375
.set("--middle-zone-color", Color.parse("#FABD2F"))

‎packages/keybr-themes/lib/themes/theme-props.ts

+4
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,10 @@ export const themePropsMap = {
8989
"--slow-key-color": colorType,
9090
"--fast-key-color": colorType,
9191
"--effort-color": colorType,
92+
"--Chart-speed__color": colorType,
93+
"--Chart-accuracy__color": colorType,
94+
"--Chart-complexity__color": colorType,
95+
"--Chart-threshold__color": colorType,
9296
"--pinky-zone-color": colorType,
9397
"--ring-zone-color": colorType,
9498
"--middle-zone-color": colorType,

‎packages/keybr-widget/lib/styles/size.less

+6
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,30 @@
3232
.size-full() {
3333
display: block !important;
3434
inline-size: 100% !important;
35+
min-inline-size: 100% !important;
3536
}
3637

3738
.width6() {
3839
inline-size: 6rem !important;
40+
min-inline-size: 6rem !important;
3941
}
4042

4143
.width10() {
4244
inline-size: 10rem !important;
45+
min-inline-size: 10rem !important;
4346
}
4447

4548
.width16() {
4649
inline-size: 16rem !important;
50+
min-inline-size: 16rem !important;
4751
}
4852

4953
.width24() {
5054
inline-size: 24rem !important;
55+
min-inline-size: 24rem !important;
5156
}
5257

5358
.width32() {
5459
inline-size: 32rem !important;
60+
min-inline-size: 32rem !important;
5561
}

0 commit comments

Comments
 (0)