Skip to content

Commit 8cd9ae3

Browse files
aradziearadzie
committed
feat: customize more theme colors
1 parent 698eed1 commit 8cd9ae3

19 files changed

+137
-10
lines changed

‎package-lock.json

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { BackgroundImage } from "./BackgroundImage.tsx";
1515
import { ChartDesign } from "./ChartDesign.tsx";
1616
import { useCustomTheme } from "./context.ts";
1717
import * as styles from "./DesignPane.module.less";
18+
import { InterfaceDesign } from "./InterfaceDesign.tsx";
1819
import { KeyboardDesign } from "./KeyboardDesign.tsx";
1920
import { LessonKeysDesign } from "./LessonKeysDesign.tsx";
2021
import { ProfileDesign } from "./ProfileDesign.tsx";
@@ -107,6 +108,7 @@ export function DesignPane() {
107108
<BackgroundImage />
108109
<TextInputDesign />
109110
<LessonKeysDesign />
111+
<InterfaceDesign />
110112
<ChartDesign />
111113
<ProfileDesign />
112114
<KeyboardDesign />

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

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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 { InterfacePreview } from "./InterfacePreview.tsx";
6+
import { PreviewPane } from "./PreviewPane.tsx";
7+
8+
export function InterfaceDesign() {
9+
return (
10+
<Group title="Interface Colors">
11+
<FieldList>
12+
<Field>
13+
<ColorInput accessor={prop["--Name-color"]} />
14+
</Field>
15+
<Field size={6}>Name</Field>
16+
<Field>
17+
<ColorInput accessor={prop["--Value-color"]} />
18+
</Field>
19+
<Field size={6}>Value</Field>
20+
</FieldList>
21+
<FieldList>
22+
<Field>
23+
<ColorInput accessor={prop["--Value--more__color"]} />
24+
</Field>
25+
<Field size={6}>Increased value</Field>
26+
<Field>
27+
<ColorInput accessor={prop["--Value--less__color"]} />
28+
</Field>
29+
<Field size={6}>Decreased value</Field>
30+
</FieldList>
31+
<PreviewPane>
32+
<InterfacePreview />
33+
</PreviewPane>
34+
</Group>
35+
);
36+
}

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

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useIntlNumbers } from "@keybr/intl";
2+
import { useFormatter } from "@keybr/lesson-ui";
3+
import { NameValue, Para, Value } from "@keybr/widget";
4+
5+
export function InterfacePreview() {
6+
const { formatInteger, formatPercents } = useIntlNumbers();
7+
const { formatSpeed } = useFormatter();
8+
return (
9+
<>
10+
<Para align="center">
11+
<NameValue name="Speed" value={formatSpeed(500)} />
12+
<NameValue name="Accuracy" value={formatPercents(0.9999)} />
13+
<NameValue name="Score" value={formatInteger(9999)} />
14+
</Para>
15+
<Para align="center">
16+
<NameValue
17+
name="Increased value"
18+
value={<Value value={formatSpeed(50)} delta={+10} />}
19+
/>
20+
<NameValue
21+
name="Decreased value"
22+
value={<Value value={formatSpeed(50)} delta={-10} />}
23+
/>
24+
</Para>
25+
</>
26+
);
27+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { PreviewPane } from "./PreviewPane.tsx";
77

88
export function KeyboardDesign() {
99
return (
10-
<Group title="Keyboard Zone Colors">
10+
<Group title="Keyboard Colors">
1111
<FieldList>
1212
<Field>
1313
<ColorInput accessor={prop["--pinky-zone-color"]} />

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

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ export const prop = {
88
["--slow-key-color"]: makeAccessor("--slow-key-color"),
99
["--fast-key-color"]: makeAccessor("--fast-key-color"),
1010
["--effort-color"]: makeAccessor("--effort-color"),
11+
["--Name-color"]: makeAccessor("--Name-color"),
12+
["--Value-color"]: makeAccessor("--Value-color"),
13+
["--Value--more__color"]: makeAccessor("--Value--more__color"),
14+
["--Value--less__color"]: makeAccessor("--Value--less__color"),
1115
["--Chart-speed__color"]: makeAccessor("--Chart-speed__color"),
1216
["--Chart-accuracy__color"]: makeAccessor("--Chart-accuracy__color"),
1317
["--Chart-complexity__color"]: makeAccessor("--Chart-complexity__color"),

‎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("--Name-color", Color.parse("#504C80"))
34+
.set("--Value-color", Color.parse("#141320"))
35+
.set("--Value--more__color", Color.parse("#2A7E21"))
36+
.set("--Value--less__color", Color.parse("#A1464E"))
3337
.set("--Chart-speed__color", Color.parse("#6FB48C"))
3438
.set("--Chart-accuracy__color", Color.parse("#EF522F"))
3539
.set("--Chart-complexity__color", Color.parse("#AC71D0"))
@@ -72,6 +76,10 @@ export const darkTheme = new CustomTheme()
7276
.set("--slow-key-color", Color.parse("#8C1818"))
7377
.set("--fast-key-color", Color.parse("#448154"))
7478
.set("--effort-color", Color.parse("#2D4A86"))
79+
.set("--Name-color", Color.parse("#D0CECE"))
80+
.set("--Value-color", Color.parse("#867F7F"))
81+
.set("--Value--more__color", Color.parse("#2A7E21"))
82+
.set("--Value--less__color", Color.parse("#A1464E"))
7583
.set("--Chart-speed__color", Color.parse("#517460"))
7684
.set("--Chart-accuracy__color", Color.parse("#914331"))
7785
.set("--Chart-complexity__color", Color.parse("#705282"))
@@ -114,6 +122,10 @@ export const grayTheme = new CustomTheme()
114122
.set("--slow-key-color", Color.parse("#CF5F5F"))
115123
.set("--fast-key-color", Color.parse("#6FA882"))
116124
.set("--effort-color", Color.parse("#759EF0"))
125+
.set("--Name-color", Color.parse("#595959"))
126+
.set("--Value-color", Color.parse("#0C0C0C"))
127+
.set("--Value--more__color", Color.parse("#2A7E21"))
128+
.set("--Value--less__color", Color.parse("#A1464E"))
117129
.set("--Chart-speed__color", Color.parse("#7DB494"))
118130
.set("--Chart-accuracy__color", Color.parse("#E36549"))
119131
.set("--Chart-complexity__color", Color.parse("#AD7ECA"))
@@ -156,6 +168,10 @@ export const yellowTheme = new CustomTheme()
156168
.set("--slow-key-color", Color.parse("#CC8B00"))
157169
.set("--fast-key-color", Color.parse("#96D760"))
158170
.set("--effort-color", Color.parse("#956EFF"))
171+
.set("--Name-color", Color.parse("#726627"))
172+
.set("--Value-color", Color.parse("#000000"))
173+
.set("--Value--more__color", Color.parse("#2A7E21"))
174+
.set("--Value--less__color", Color.parse("#A1464E"))
159175
.set("--Chart-speed__color", Color.parse("#9AC381"))
160176
.set("--Chart-accuracy__color", Color.parse("#F47E40"))
161177
.set("--Chart-complexity__color", Color.parse("#C594B0"))
@@ -198,6 +214,10 @@ export const gardenTheme = new CustomTheme()
198214
.set("--slow-key-color", Color.parse("#CC0000"))
199215
.set("--fast-key-color", Color.parse("#60D788"))
200216
.set("--effort-color", Color.parse("#6699FF"))
217+
.set("--Name-color", Color.parse("#5F805D"))
218+
.set("--Value-color", Color.parse("#1D271D"))
219+
.set("--Value--more__color", Color.parse("#2A7E21"))
220+
.set("--Value--less__color", Color.parse("#A1464E"))
201221
.set("--Chart-speed__color", Color.parse("#6FB48C"))
202222
.set("--Chart-accuracy__color", Color.parse("#EF522F"))
203223
.set("--Chart-complexity__color", Color.parse("#AC71D0"))
@@ -240,6 +260,10 @@ export const coffeeTheme = new CustomTheme()
240260
.set("--slow-key-color", Color.parse("#CF5F5F"))
241261
.set("--fast-key-color", Color.parse("#6FA882"))
242262
.set("--effort-color", Color.parse("#759EF0"))
263+
.set("--Name-color", Color.parse("#595959"))
264+
.set("--Value-color", Color.parse("#0C0C0C"))
265+
.set("--Value--more__color", Color.parse("#2A7E21"))
266+
.set("--Value--less__color", Color.parse("#A1464E"))
243267
.set("--Chart-speed__color", Color.parse("#8BBF9B"))
244268
.set("--Chart-accuracy__color", Color.parse("#F17151"))
245269
.set("--Chart-complexity__color", Color.parse("#BC8AD1"))
@@ -282,6 +306,10 @@ export const chocolateTheme = new CustomTheme()
282306
.set("--slow-key-color", Color.parse("#CF5F5F"))
283307
.set("--fast-key-color", Color.parse("#6FA882"))
284308
.set("--effort-color", Color.parse("#759EF0"))
309+
.set("--Name-color", Color.parse("#FFFFFF"))
310+
.set("--Value-color", Color.parse("#B6B6B6"))
311+
.set("--Value--more__color", Color.parse("#2A7E21"))
312+
.set("--Value--less__color", Color.parse("#A1464E"))
285313
.set("--Chart-speed__color", Color.parse("#6C9F7D"))
286314
.set("--Chart-accuracy__color", Color.parse("#D25033"))
287315
.set("--Chart-complexity__color", Color.parse("#9D69B4"))
@@ -324,6 +352,10 @@ export const honeyTheme = new CustomTheme()
324352
.set("--slow-key-color", Color.parse("#CC8B00"))
325353
.set("--fast-key-color", Color.parse("#8CC64E"))
326354
.set("--effort-color", Color.parse("#956EFF"))
355+
.set("--Name-color", Color.parse("#995B16"))
356+
.set("--Value-color", Color.parse("#130B03"))
357+
.set("--Value--more__color", Color.parse("#2A7E21"))
358+
.set("--Value--less__color", Color.parse("#A1464E"))
327359
.set("--Chart-speed__color", Color.parse("#9AB762"))
328360
.set("--Chart-accuracy__color", Color.parse("#F47321"))
329361
.set("--Chart-complexity__color", Color.parse("#C58892"))
@@ -366,6 +398,10 @@ export const customTheme = new CustomTheme()
366398
.set("--slow-key-color", Color.parse("#CC0000"))
367399
.set("--fast-key-color", Color.parse("#60D788"))
368400
.set("--effort-color", Color.parse("#6699FF"))
401+
.set("--Name-color", Color.parse("#595959"))
402+
.set("--Value-color", Color.parse("#0C0C0C"))
403+
.set("--Value--more__color", Color.parse("#2A7E21"))
404+
.set("--Value--less__color", Color.parse("#A1464E"))
369405
.set("--Chart-speed__color", Color.parse("#6FB48C"))
370406
.set("--Chart-accuracy__color", Color.parse("#EF522F"))
371407
.set("--Chart-complexity__color", Color.parse("#AC71D0"))

‎packages/keybr-theme-designer/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"dependencies": {
99
"@keybr/chart": "*",
1010
"@keybr/color": "*",
11+
"@keybr/intl": "*",
1112
"@keybr/keyboard": "*",
1213
"@keybr/keyboard-ui": "*",
1314
"@keybr/lesson": "*",

‎packages/keybr-themes/lib/themes/palettes.less

+7
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@
2020
--textinput--miss__color: @colors[@error];
2121
}
2222

23+
.use-interface-colors(@colors) {
24+
--Name-color: lighten(@colors[@secondary], 20);
25+
--Value-color: darken(@colors[@secondary], 10);
26+
--Value--more__color: #2a7e21;
27+
--Value--less__color: #a1464e;
28+
}
29+
2330
.use-chart-colors(@colors, @mix) {
2431
--Chart-speed__color: mix(@colors[@primary], @chart-speed, @mix);
2532
--Chart-accuracy__color: mix(@colors[@primary], @chart-accuracy, @mix);

‎packages/keybr-themes/lib/themes/theme-1-light.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@
3232
--fast-key-color: #60d788;
3333
--effort-color: #6699ff;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 0);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 0);
37+
.use-keyboard-colors(@colors, 0);
3738
.use-syntax-colors();
3839
}
3940

‎packages/keybr-themes/lib/themes/theme-2-dark.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@
3232
--fast-key-color: #448154;
3333
--effort-color: #2d4a86;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 50);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 50);
37+
.use-keyboard-colors(@colors, 50);
3738
--syntax-keyword: #5991cd;
3839
--syntax-string: #72b172;
3940
--syntax-number: #b281d3;

‎packages/keybr-themes/lib/themes/theme-3-gray.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ html[data-color="gray"] {
3232
--fast-key-color: #6fa882;
3333
--effort-color: #759ef0;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 20);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 20);
37+
.use-keyboard-colors(@colors, 20);
3738
.use-syntax-colors();
3839
}

‎packages/keybr-themes/lib/themes/theme-4-yellow.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ html[data-color="yellow"] {
3232
--fast-key-color: #96d760;
3333
--effort-color: #956eff;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 30);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 30);
37+
.use-keyboard-colors(@colors, 30);
3738
.use-syntax-colors();
3839
}

‎packages/keybr-themes/lib/themes/theme-5-garden.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ html[data-color="garden"] {
3232
--fast-key-color: #60d788;
3333
--effort-color: #6699ff;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 0);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 0);
37+
.use-keyboard-colors(@colors, 0);
3738
.use-syntax-colors();
3839
--background-image: url(../../assets/bg-garden.svg);
3940
--Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

‎packages/keybr-themes/lib/themes/theme-6-coffee.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ html[data-color="coffee"] {
3232
--fast-key-color: #6fa882;
3333
--effort-color: #759ef0;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 20);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 20);
37+
.use-keyboard-colors(@colors, 20);
3738
.use-syntax-colors();
3839
--background-image: url(../../assets/bg-coffee.svg);
3940
--Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

‎packages/keybr-themes/lib/themes/theme-7-chocolate.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ html[data-color="chocolate"] {
3232
--fast-key-color: #6fa882;
3333
--effort-color: #759ef0;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 20);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 20);
37+
.use-keyboard-colors(@colors, 20);
3738
.use-syntax-colors();
3839
--background-image: url(../../assets/bg-chocolate.svg);
3940
--Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

‎packages/keybr-themes/lib/themes/theme-8-honey.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ html[data-color="honey"] {
3232
--fast-key-color: #8cc64e;
3333
--effort-color: #956eff;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 30);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 30);
37+
.use-keyboard-colors(@colors, 30);
3738
.use-syntax-colors();
3839
--background-image: url(../../assets/bg-honey.svg);
3940
--Surface__box-shadow: none;

‎packages/keybr-themes/lib/themes/theme-99-custom.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ html[data-color="custom"] {
3232
--fast-key-color: #60d788;
3333
--effort-color: #6699ff;
3434
.use-textinput-colors(@colors);
35-
.use-keyboard-colors(@colors, 0);
35+
.use-interface-colors(@colors);
3636
.use-chart-colors(@colors, 0);
37+
.use-keyboard-colors(@colors, 0);
3738
.use-syntax-colors();
3839
}

‎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+
"--Name-color": colorType,
93+
"--Value-color": colorType,
94+
"--Value--more__color": colorType,
95+
"--Value--less__color": colorType,
9296
"--Chart-speed__color": colorType,
9397
"--Chart-accuracy__color": colorType,
9498
"--Chart-complexity__color": colorType,

0 commit comments

Comments
 (0)