Skip to content

Commit a4820c5

Browse files
aradziearadzie
committed
feat: gradual shades of effort in the calendar component
1 parent 2809bb4 commit a4820c5

17 files changed

+88
-148
lines changed

‎package-lock.json

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

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

+9-36
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,13 @@ export const lightTheme = new CustomTheme()
2929
.set("--textinput--miss__color", Color.parse("#FF3333"))
3030
.set("--slow-key-color", Color.parse("#CC0000"))
3131
.set("--fast-key-color", Color.parse("#60D788"))
32+
.set("--effort-color", Color.parse("#6699FF"))
3233
.set("--pinky-zone-color", Color.parse("#8EC07C"))
3334
.set("--ring-zone-color", Color.parse("#B8BB26"))
3435
.set("--middle-zone-color", Color.parse("#FABD2F"))
3536
.set("--left-index-zone-color", Color.parse("#83A698"))
3637
.set("--right-index-zone-color", Color.parse("#D3869B"))
3738
.set("--thumb-zone-color", Color.parse("#D66354"))
38-
.set("--effort-0-color", Color.parse("#D1DAF4"))
39-
.set("--effort-1-color", Color.parse("#ADC5F8"))
40-
.set("--effort-2-color", Color.parse("#8AAFFB"))
41-
.set("--effort-3-color", Color.parse("#6699FF"))
4239
.set("--syntax-keyword", Color.parse("#56A1F4"))
4340
.set("--syntax-string", Color.parse("#72B172"))
4441
.set("--syntax-number", Color.parse("#763A9E"))
@@ -70,16 +67,13 @@ export const darkTheme = new CustomTheme()
7067
.set("--textinput--miss__color", Color.parse("#9B4545"))
7168
.set("--slow-key-color", Color.parse("#8C1818"))
7269
.set("--fast-key-color", Color.parse("#448154"))
70+
.set("--effort-color", Color.parse("#2D4A86"))
7371
.set("--pinky-zone-color", Color.parse("#617A58"))
7472
.set("--ring-zone-color", Color.parse("#76772D"))
7573
.set("--middle-zone-color", Color.parse("#977831"))
7674
.set("--left-index-zone-color", Color.parse("#5B6D66"))
7775
.set("--right-index-zone-color", Color.parse("#835D67"))
7876
.set("--thumb-zone-color", Color.parse("#854B44"))
79-
.set("--effort-0-color", Color.parse("#323948"))
80-
.set("--effort-1-color", Color.parse("#303F5D"))
81-
.set("--effort-2-color", Color.parse("#2F4471"))
82-
.set("--effort-3-color", Color.parse("#2D4A86"))
8377
.set("--syntax-keyword", Color.parse("#5991CD"))
8478
.set("--syntax-string", Color.parse("#72B172"))
8579
.set("--syntax-number", Color.parse("#B281D3"))
@@ -111,16 +105,13 @@ export const grayTheme = new CustomTheme()
111105
.set("--textinput--miss__color", Color.parse("#A34729"))
112106
.set("--slow-key-color", Color.parse("#CF5F5F"))
113107
.set("--fast-key-color", Color.parse("#6FA882"))
108+
.set("--effort-color", Color.parse("#759EF0"))
114109
.set("--pinky-zone-color", Color.parse("#95BD87"))
115110
.set("--ring-zone-color", Color.parse("#B7B942"))
116111
.set("--middle-zone-color", Color.parse("#ECBB49"))
117112
.set("--left-index-zone-color", Color.parse("#8DA99D"))
118113
.set("--right-index-zone-color", Color.parse("#CD8FA0"))
119114
.set("--thumb-zone-color", Color.parse("#CF7367"))
120-
.set("--effort-0-color", Color.parse("#A4AEC2"))
121-
.set("--effort-1-color", Color.parse("#94A9D2"))
122-
.set("--effort-2-color", Color.parse("#85A3E1"))
123-
.set("--effort-3-color", Color.parse("#759EF0"))
124115
.set("--syntax-keyword", Color.parse("#56A1F4"))
125116
.set("--syntax-string", Color.parse("#72B172"))
126117
.set("--syntax-number", Color.parse("#763A9E"))
@@ -152,16 +143,13 @@ export const yellowTheme = new CustomTheme()
152143
.set("--textinput--miss__color", Color.parse("#B83D14"))
153144
.set("--slow-key-color", Color.parse("#CC8B00"))
154145
.set("--fast-key-color", Color.parse("#96D760"))
146+
.set("--effort-color", Color.parse("#956EFF"))
155147
.set("--pinky-zone-color", Color.parse("#B0CB75"))
156148
.set("--ring-zone-color", Color.parse("#CDC839"))
157149
.set("--middle-zone-color", Color.parse("#FCC940"))
158150
.set("--left-index-zone-color", Color.parse("#A8B989"))
159151
.set("--right-index-zone-color", Color.parse("#E0A38B"))
160152
.set("--thumb-zone-color", Color.parse("#E28A59"))
161-
.set("--effort-0-color", Color.parse("#E5C88C"))
162-
.set("--effort-1-color", Color.parse("#CAAAB3"))
163-
.set("--effort-2-color", Color.parse("#B08CD9"))
164-
.set("--effort-3-color", Color.parse("#956EFF"))
165153
.set("--syntax-keyword", Color.parse("#56A1F4"))
166154
.set("--syntax-string", Color.parse("#72B172"))
167155
.set("--syntax-number", Color.parse("#763A9E"))
@@ -193,16 +181,13 @@ export const gardenTheme = new CustomTheme()
193181
.set("--textinput--miss__color", Color.parse("#E49874"))
194182
.set("--slow-key-color", Color.parse("#CC0000"))
195183
.set("--fast-key-color", Color.parse("#60D788"))
184+
.set("--effort-color", Color.parse("#6699FF"))
196185
.set("--pinky-zone-color", Color.parse("#8EC07C"))
197186
.set("--ring-zone-color", Color.parse("#B8BB26"))
198187
.set("--middle-zone-color", Color.parse("#FABD2F"))
199188
.set("--left-index-zone-color", Color.parse("#83A698"))
200189
.set("--right-index-zone-color", Color.parse("#D3869B"))
201190
.set("--thumb-zone-color", Color.parse("#D66354"))
202-
.set("--effort-0-color", Color.parse("#B4CEBB"))
203-
.set("--effort-1-color", Color.parse("#9ABDD2"))
204-
.set("--effort-2-color", Color.parse("#80ABE8"))
205-
.set("--effort-3-color", Color.parse("#6699FF"))
206191
.set("--syntax-keyword", Color.parse("#56A1F4"))
207192
.set("--syntax-string", Color.parse("#72B172"))
208193
.set("--syntax-number", Color.parse("#763A9E"))
@@ -234,16 +219,13 @@ export const coffeeTheme = new CustomTheme()
234219
.set("--textinput--miss__color", Color.parse("#A34729"))
235220
.set("--slow-key-color", Color.parse("#CF5F5F"))
236221
.set("--fast-key-color", Color.parse("#6FA882"))
222+
.set("--effort-color", Color.parse("#759EF0"))
237223
.set("--pinky-zone-color", Color.parse("#A4C98E"))
238224
.set("--ring-zone-color", Color.parse("#C5C549"))
239225
.set("--middle-zone-color", Color.parse("#FAC651"))
240226
.set("--left-index-zone-color", Color.parse("#9BB4A5"))
241227
.set("--right-index-zone-color", Color.parse("#DB9AA7"))
242228
.set("--thumb-zone-color", Color.parse("#DD7E6E"))
243-
.set("--effort-0-color", Color.parse("#D9D9DD"))
244-
.set("--effort-1-color", Color.parse("#B8C5E4"))
245-
.set("--effort-2-color", Color.parse("#96B2EA"))
246-
.set("--effort-3-color", Color.parse("#759EF0"))
247229
.set("--syntax-keyword", Color.parse("#56A1F4"))
248230
.set("--syntax-string", Color.parse("#72B172"))
249231
.set("--syntax-number", Color.parse("#763A9E"))
@@ -275,16 +257,13 @@ export const chocolateTheme = new CustomTheme()
275257
.set("--textinput--miss__color", Color.parse("#A34729"))
276258
.set("--slow-key-color", Color.parse("#CF5F5F"))
277259
.set("--fast-key-color", Color.parse("#6FA882"))
260+
.set("--effort-color", Color.parse("#759EF0"))
278261
.set("--pinky-zone-color", Color.parse("#85A871"))
279262
.set("--ring-zone-color", Color.parse("#A6A42C"))
280263
.set("--middle-zone-color", Color.parse("#DBA633"))
281264
.set("--left-index-zone-color", Color.parse("#7C9487"))
282265
.set("--right-index-zone-color", Color.parse("#BC7A89"))
283266
.set("--thumb-zone-color", Color.parse("#BE5E51"))
284-
.set("--effort-0-color", Color.parse("#655F6E"))
285-
.set("--effort-1-color", Color.parse("#6B749A"))
286-
.set("--effort-2-color", Color.parse("#7089C5"))
287-
.set("--effort-3-color", Color.parse("#759EF0"))
288267
.set("--syntax-keyword", Color.parse("#56A1F4"))
289268
.set("--syntax-string", Color.parse("#72B172"))
290269
.set("--syntax-number", Color.parse("#763A9E"))
@@ -316,16 +295,13 @@ export const honeyTheme = new CustomTheme()
316295
.set("--textinput--miss__color", Color.parse("#B83D14"))
317296
.set("--slow-key-color", Color.parse("#CC8B00"))
318297
.set("--fast-key-color", Color.parse("#8CC64E"))
298+
.set("--effort-color", Color.parse("#956EFF"))
319299
.set("--pinky-zone-color", Color.parse("#B0C057"))
320300
.set("--ring-zone-color", Color.parse("#CDBC1B"))
321301
.set("--middle-zone-color", Color.parse("#FCBE21"))
322302
.set("--left-index-zone-color", Color.parse("#A8AE6A"))
323303
.set("--right-index-zone-color", Color.parse("#E0976D"))
324304
.set("--thumb-zone-color", Color.parse("#E27F3B"))
325-
.set("--effort-0-color", Color.parse("#E5AB40"))
326-
.set("--effort-1-color", Color.parse("#CA9780"))
327-
.set("--effort-2-color", Color.parse("#B082BF"))
328-
.set("--effort-3-color", Color.parse("#956EFF"))
329305
.set("--syntax-keyword", Color.parse("#56A1F4"))
330306
.set("--syntax-string", Color.parse("#72B172"))
331307
.set("--syntax-number", Color.parse("#763A9E"))
@@ -357,16 +333,13 @@ export const customTheme = new CustomTheme()
357333
.set("--textinput--miss__color", Color.parse("#A34729"))
358334
.set("--slow-key-color", Color.parse("#CC0000"))
359335
.set("--fast-key-color", Color.parse("#60D788"))
336+
.set("--effort-color", Color.parse("#6699FF"))
360337
.set("--pinky-zone-color", Color.parse("#8EC07C"))
361338
.set("--ring-zone-color", Color.parse("#B8BB26"))
362339
.set("--middle-zone-color", Color.parse("#FABD2F"))
363340
.set("--left-index-zone-color", Color.parse("#83A698"))
364341
.set("--right-index-zone-color", Color.parse("#D3869B"))
365342
.set("--thumb-zone-color", Color.parse("#D66354"))
366-
.set("--effort-0-color", Color.parse("#A0ADC6"))
367-
.set("--effort-1-color", Color.parse("#8DA6D9"))
368-
.set("--effort-2-color", Color.parse("#79A0EC"))
369-
.set("--effort-3-color", Color.parse("#6699FF"))
370343
.set("--syntax-keyword", Color.parse("#56A1F4"))
371344
.set("--syntax-string", Color.parse("#72B172"))
372345
.set("--syntax-number", Color.parse("#763A9E"))

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

-7
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,6 @@
4040
--thumb-zone-color: mix(@primary, @zone-thumb, @mix);
4141
}
4242

43-
.use-effort-colors(@primary, @effort) {
44-
--effort-0-color: mix(@primary, @effort, 75);
45-
--effort-1-color: mix(@primary, @effort, 50);
46-
--effort-2-color: mix(@primary, @effort, 25);
47-
--effort-3-color: mix(@primary, @effort, 0);
48-
}
49-
5043
.use-syntax-colors() {
5144
--syntax-keyword: #56a1f4;
5245
--syntax-string: #72b172;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@
2828
--shadow-color: #00000044;
2929
--slow-key-color: #cc0000;
3030
--fast-key-color: #60d788;
31+
--effort-color: #6699ff;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 0);
3334
.use-chart-colors(@primary, 0);
34-
.use-effort-colors(@primary, #6699ff);
3535
.use-syntax-colors();
3636
}
3737

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@
2828
--shadow-color: #00000088;
2929
--slow-key-color: #8c1818;
3030
--fast-key-color: #448154;
31+
--effort-color: #2d4a86;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 50);
3334
.use-chart-colors(@primary, 50);
34-
.use-effort-colors(@primary, #2d4a86);
3535
--syntax-keyword: #5991cd;
3636
--syntax-string: #72b172;
3737
--syntax-number: #b281d3;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ html[data-color="gray"] {
2828
--shadow-color: #00000044;
2929
--slow-key-color: #cf5f5f;
3030
--fast-key-color: #6fa882;
31+
--effort-color: #759ef0;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 20);
3334
.use-chart-colors(@primary, 20);
34-
.use-effort-colors(@primary, #759ef0);
3535
.use-syntax-colors();
3636
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ html[data-color="yellow"] {
2828
--shadow-color: #00000044;
2929
--slow-key-color: #cc8b00;
3030
--fast-key-color: #96d760;
31+
--effort-color: #956eff;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 30);
3334
.use-chart-colors(@primary, 30);
34-
.use-effort-colors(@primary, #956eff);
3535
.use-syntax-colors();
3636
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ html[data-color="garden"] {
2828
--shadow-color: #00000044;
2929
--slow-key-color: #cc0000;
3030
--fast-key-color: #60d788;
31+
--effort-color: #6699ff;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 0);
3334
.use-chart-colors(@primary, 0);
34-
.use-effort-colors(@primary, #6699ff);
3535
.use-syntax-colors();
3636
--background-image: url(../../assets/bg-garden.svg);
3737
--Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ html[data-color="coffee"] {
2828
--shadow-color: #00000044;
2929
--slow-key-color: #cf5f5f;
3030
--fast-key-color: #6fa882;
31+
--effort-color: #759ef0;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 20);
3334
.use-chart-colors(@primary, 20);
34-
.use-effort-colors(@primary, #759ef0);
3535
.use-syntax-colors();
3636
--background-image: url(../../assets/bg-coffee.svg);
3737
--Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ html[data-color="chocolate"] {
2828
--shadow-color: #00000044;
2929
--slow-key-color: #cf5f5f;
3030
--fast-key-color: #6fa882;
31+
--effort-color: #759ef0;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 20);
3334
.use-chart-colors(@primary, 20);
34-
.use-effort-colors(@primary, #759ef0);
3535
.use-syntax-colors();
3636
--background-image: url(../../assets/bg-chocolate.svg);
3737
--Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ html[data-color="honey"] {
2828
--shadow-color: #00000044;
2929
--slow-key-color: #cc8b00;
3030
--fast-key-color: #8cc64e;
31+
--effort-color: #956eff;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 30);
3334
.use-chart-colors(@primary, 30);
34-
.use-effort-colors(@primary, #956eff);
3535
.use-syntax-colors();
3636
--background-image: url(../../assets/bg-honey.svg);
3737
--Surface__box-shadow: none;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ html[data-color="custom"] {
2828
--shadow-color: #00000044;
2929
--slow-key-color: #cc0000;
3030
--fast-key-color: #60d788;
31+
--effort-color: #6699ff;
3132
.use-textinput-colors(@primary, @secondary, @error);
3233
.use-keyboard-colors(@primary, 0);
3334
.use-chart-colors(@primary, 0);
34-
.use-effort-colors(@primary, #6699ff);
3535
.use-syntax-colors();
3636
}

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -88,16 +88,13 @@ export const themePropsMap = {
8888
"--textinput--miss__color": colorType,
8989
"--slow-key-color": colorType,
9090
"--fast-key-color": colorType,
91+
"--effort-color": colorType,
9192
"--pinky-zone-color": colorType,
9293
"--ring-zone-color": colorType,
9394
"--middle-zone-color": colorType,
9495
"--left-index-zone-color": colorType,
9596
"--right-index-zone-color": colorType,
9697
"--thumb-zone-color": colorType,
97-
"--effort-0-color": colorType,
98-
"--effort-1-color": colorType,
99-
"--effort-2-color": colorType,
100-
"--effort-3-color": colorType,
10198
"--syntax-keyword": colorType,
10299
"--syntax-string": colorType,
103100
"--syntax-number": colorType,

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@
4343

4444
--Calendar-caption__background-color: var(--primary-d1);
4545
--Calendar-headerCell__background-color: var(--primary-d2);
46-
--Calendar-cell__color: var(--secondary);
47-
--Calendar-cell--z__background-color: var(--primary-l1);
46+
--Calendar-cell--background-color: var(--primary-l1);
4847

4948
--Player__background-color: var(--primary);
5049
--Player--me__background-color: var(--primary-d1);

0 commit comments

Comments
 (0)