Skip to content

Commit 31ebcf4

Browse files
aiai
committed
Start color refactoring
1 parent fb2f02e commit 31ebcf4

File tree

7 files changed

+138
-84
lines changed

7 files changed

+138
-84
lines changed

‎core/messages/navbar/en.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const navbarMessages = i18n('navbar', {
66
back: 'Back',
77
download: 'Feed Loading',
88
export: 'Export',
9-
fast: 'Fast',
9+
fast: 'Addictive',
1010
feeds: 'Manage Feeds',
1111
feedsByCategory: 'By Category',
1212
import: 'Import',
@@ -17,5 +17,5 @@ export const navbarMessages = i18n('navbar', {
1717
refresh: 'Check for new posts',
1818
refreshing: 'Post updating',
1919
settings: 'Settings',
20-
slow: 'Slow'
20+
slow: 'Healthy'
2121
})

‎web/main/colors.css

+87-54
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,68 @@
11
@import url('@evilmartians/harmony/css/index.css');
22

3+
@property --land-color {
4+
syntax: '<color>';
5+
}
6+
37
:root {
4-
--focus-color: var(--blue-500);
5-
--shadow-color: oklch(15% 0.1 265);
6-
--fire1-color: oklch(70% 0.15 65);
7-
--fire2-color: oklch(58% 0.2 29);
8-
--error-color: var(--red-600);
9-
--accent-color: oklch(71.97% 0.152 239.92);
8+
--accent-color: oklch(0.72 0.15 240);
9+
--focus-color: var(--accent-color);
10+
--fire1-color: oklch(0.7 0.15 65);
11+
--fire2-color: oklch(0.58 0.2 29);
12+
--error-color: oklch(0.6 0.2 25);
13+
14+
--flat-hover-color: oklch(from var(--land-color) calc(l + 0.02) c h);
15+
--flat-current-color: oklch(from var(--land-color) calc(l + 0.03) calc(c / 2) h);
16+
17+
--card-color: oklch(from var(--land-color) calc(l + 0.03) calc(c / 2) h);
18+
19+
--below-1-shadow:
20+
inset 0 0.3px 0.5px var(--shadow-color),
21+
inset 0 0.6px 1px var(--shadow-color),
22+
inset 0 1.2px 2px var(--shadow-color);
23+
--above-1-shadow:
24+
0 0.3px 0.5px var(--shadow-color),
25+
0 0.6px 1px var(--shadow-color),
26+
0 1.2px 2px var(--shadow-color);
27+
--above-2-shadow: TODO;
28+
29+
30+
@media (prefers-color-scheme: light) {
31+
--text-color: oklch(0.15 0 0);
32+
--secondary-text-color: oklch(50% 0 0);
33+
--hotkey-color: oklch(0.7 0 0);
34+
35+
--land-color: oklch(0.95 0 70);
36+
--shadow-color: oklch(from var(--land-color) 0.65 calc(c * 2) h / 45%);
37+
--border-color: oklch(0 0 0 / 15%);
38+
39+
--above-color: oklch(from var(--land-color) 0.96 c h);
40+
--above-secondary-color: oklch(from var(--land-color) 0.93 c h);
41+
42+
&.is-slow-theme {
43+
--land-color: oklch(0.95 0.02 70);
44+
}
45+
}
46+
47+
@media (prefers-color-scheme: dark) {
48+
--text-color: oklch(0.98 0 0);
49+
--secondary-text-color: oklch(0.6 0 0);
50+
--hotkey-color: oklch(0.5 0 0);
51+
52+
--land-color: oklch(0.25 0 70);
53+
--shadow-color: oklch(0 0 0 / 80%);
54+
55+
--above-color: oklch(from var(--land-color) 0.3 c h);
56+
--above-secondary-color: oklch(from var(--land-color) 0.3 c h);
57+
58+
&.is-slow-theme {
59+
--land-color: oklch(0.25 0.02 70);
60+
}
61+
}
1062

1163
@media (prefers-color-scheme: light) {
12-
--land-color: color-mix(in oklab, var(--neutral-100), var(--neutral-200));
13-
--text-color: var(--neutral-950);
14-
--secondary-text-color: var(--neutral-700);
15-
--hotkey-color: var(--neutral-400);
16-
--border-color: oklch(0% 0 0 / 15%);
1764
--hover-color: color-mix(in oklch, var(--neutral-50), var(--sand-50));
18-
--card-color: var(--neutral-50);
19-
--card-shadow:
20-
0 1px 5px oklch(from var(--shadow-color) l c h / 8%),
21-
0 1px 1px oklch(from var(--shadow-color) l c h / 15%);
65+
--card-shadow: var(--above-1-shadow);
2266
--card-item-above-shadow: inset 0 1px 2px oklch(from var(--shadow-color) l c h / 20%);
2367
--card-item-pressed-shadow:
2468
inset -2px 0 0 var(--land-color),
@@ -32,73 +76,66 @@
3276
--dangerous-card-hover-color: color-mix(in oklab, var(--red-100), var(--sand-100));
3377
--dangerous-text-color: var(--red-700);
3478
--button-shadow:
35-
0 0 0 1px oklch(0% 0 0 / 15%),
79+
0 0 0 1px oklch(0 0 0 / 15%),
3680
inset 0 -5px 5px oklch(from var(--shadow-color) l c h / 8%);
3781
--button-active-shadow:
3882
inset 0 1px 2px oklch(from var(--shadow-color) l c h / 15%),
3983
inset 0 2px 5px oklch(from var(--shadow-color) l c h / 15%),
40-
0 -1px oklch(0% 0 0 / 20%),
41-
0 1px oklch(100% 0 0),
84+
0 -1px oklch(0 0 0 / 20%),
85+
0 1px oklch(1 0 0),
4286
inset 0 -5px 5px oklch(from var(--shadow-color) l c h / 8%);
4387
--button-pressed-shadow:
4488
inset 0 1px 1px oklch(from var(--shadow-color) l c h / 10%),
4589
inset 0 1px 3px oklch(from var(--shadow-color) l c h / 10%),
46-
0 -1px oklch(0% 0 0 / 20%),
47-
0 1px oklch(100% 0 0),
90+
0 -1px oklch(0 0 0 / 20%),
91+
0 1px oklch(1 0 0),
4892
inset 0 -5px 5px oklch(from var(--shadow-color) l c h / 8%);
49-
--flat-hover-color: oklch(from var(--hover-color) l c h / 40%);
5093
--flat-active-shadow:
5194
inset 0 1px 2px oklch(from var(--shadow-color) l c h / 15%),
52-
0 -1px oklch(0% 0 0 / 20%);
53-
--field-color: oklch(100% 0 0);
95+
0 -1px oklch(0 0 0 / 20%);
96+
--field-color: oklch(1 0 0);
5497
--field-shadow: inset 0 1px 2px oklch(from var(--shadow-color) l c h / 8%);
5598
--link-color: var(--blue-700);
5699
--link-color-visited: var(--fuchsia-700);
57100
--inline-code-color: oklch(from var(--neutral-200) l c h / 55%);
58101
}
59102

60103
@media (prefers-color-scheme: dark) {
61-
--land-color: var(--neutral-950);
62-
--text-color: var(--neutral-50);
63-
--secondary-text-color: var(--neutral-600);
64-
--hotkey-color: var(--neutral-700);
65-
--border-color: oklch(100% 0 0 / 15%);
104+
--border-color: oklch(1 0 0 / 15%);
66105
--hover-color: color-mix(in oklch, var(--neutral-900), var(--neutral-800));
67-
--card-color: var(--neutral-900);
68-
--card-shadow: 0 1px 2px oklch(0% 0 0), inset 0 1px oklch(100% 0 0 / 10%);
69-
--card-item-above-shadow: inset 0 1px 2px oklch(0% 0 0);
106+
--card-shadow: 0 1px 2px oklch(0 0 0), inset 0 1px oklch(1 0 0 / 10%);
107+
--card-item-above-shadow: inset 0 1px 2px oklch(0 0 0);
70108
--card-item-pressed-shadow:
71109
inset -2px 0 0 var(--land-color),
72110
inset 2px 0 0 var(--land-color),
73111
5px 0 0 var(--land-color),
74112
-5px 0 0 var(--land-color),
75-
inset 0 1px 2px oklch(0% 0 0);
113+
inset 0 1px 2px oklch(0 0 0);
76114
--float-shadow:
77-
0 -1px 0 oklch(0% 0 0),
78-
0 0 5px oklch(0% 0 0 / 60%);
115+
0 -1px 0 oklch(0 0 0),
116+
0 0 5px oklch(0 0 0 / 60%);
79117
--dangerous-card-color: var(--red-900);
80118
--dangerous-card-hover-color: color-mix(in oklab, var(--red-900), var(--red-800));
81119
--dangerous-text-color: var(--red-200);
82120
--button-shadow:
83-
inset 0 0 0 1px oklch(100% 0 0 / 8%),
84-
inset 0 -5px 5px oklch(0% 0 0 / 20%),
85-
0 1px 1px oklch(0% 0 0);
121+
inset 0 0 0 1px oklch(1 0 0 / 8%),
122+
inset 0 -5px 5px oklch(0 0 0 / 20%),
123+
0 1px 1px oklch(0 0 0);
86124
--button-active-shadow:
87-
inset 0 0 1px oklch(100% 0 0 / 30%),
88-
inset 0 1px 2px oklch(0% 0 0 / 60%),
89-
inset 0 2px 5px oklch(0% 0 0 / 60%),
90-
0 1px oklch(100% 0 0 / 20%),
91-
inset 0 -5px 5px oklch(0% 0 0 / 10%);
125+
inset 0 0 1px oklch(1 0 0 / 30%),
126+
inset 0 1px 2px oklch(0 0 0 / 60%),
127+
inset 0 2px 5px oklch(0 0 0 / 60%),
128+
0 1px oklch(1 0 0 / 20%),
129+
inset 0 -5px 5px oklch(0 0 0 / 10%);
92130
--button-pressed-shadow:
93-
inset 0 0 1px oklch(100% 0 0 / 30%),
94-
inset 0 1px 1px oklch(0% 0 0 / 50%),
95-
inset 0 1px 4px oklch(0% 0 0 / 50%),
96-
0 1px oklch(100% 0 0 / 20%),
97-
inset 0 -5px 5px oklch(0% 0 0 / 20%);
98-
--flat-hover-color: oklch(from var(--hover-color) l c h / 30%);
99-
--flat-active-shadow: inset 0 1px 2px oklch(0% 0 0 / 80%);
131+
inset 0 0 1px oklch(1 0 0 / 30%),
132+
inset 0 1px 1px oklch(0 0 0 / 50%),
133+
inset 0 1px 4px oklch(0 0 0 / 50%),
134+
0 1px oklch(1 0 0 / 20%),
135+
inset 0 -5px 5px oklch(0 0 0 / 20%);
136+
--flat-active-shadow: inset 0 1px 2px oklch(0 0 0 / 80%);
100137
--field-color: color-mix(in oklch, var(--neutral-900), var(--neutral-800));
101-
--field-shadow: inset 0 1px 2px oklch(0% 0 0 / 60%);
138+
--field-shadow: inset 0 1px 2px oklch(0 0 0 / 60%);
102139
--link-color: var(--blue-400);
103140
--link-color-visited: var(--fuchsia-400);
104141
--inline-code-color: oklch(from var(--zinc-800) l c h / 60%);
@@ -107,14 +144,10 @@
107144

108145
.is-slow-theme {
109146
@media (prefers-color-scheme: light) {
110-
--land-color: color-mix(in oklab, var(--sand-100), var(--sand-200));
111-
--card-color: var(--sand-50);
112147
--hover-color: color-mix(in oklch, var(--sand-50), var(--neutral-50));
113148
}
114149

115150
@media (prefers-color-scheme: dark) {
116-
--land-color: var(--sand-950);
117-
--card-color: var(--sand-900);
118151
--hover-color: color-mix(in oklch, var(--sand-900), var(--sand-800));
119152
}
120153
}

‎web/main/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
:root {
66
color-scheme: light dark;
7+
font-size: 16px;
78

89
&.is-light-theme {
910
color-scheme: light;

‎web/ui/button.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@
148148
}
149149
150150
&:active {
151-
box-shadow: var(--flat-active-shadow);
151+
box-shadow: var(--above-2-shadow);
152152
}
153153
}
154154
}

‎web/ui/hotkey.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<style>
1212
.hotkey {
1313
position: absolute;
14-
inset-inline-end: 6px;
15-
top: 4px;
14+
inset-inline-end: 4px;
15+
top: 2px;
1616
font: var(--hotkey-font);
1717
font-variant-caps: all-small-caps;
1818
color: var(--hotkey-color);

‎web/ui/navbar/index.svelte

+37-17
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
aria-controls="navbar_submenu"
9292
aria-current={$router.route === 'slow' ? 'page' : null}
9393
aria-haspopup="menu"
94-
aria-keyshortcuts="s"
94+
aria-keyshortcuts="h"
9595
href={getURL('slow')}
9696
role="menuitem"
9797
on:click={openMenu}
@@ -100,7 +100,7 @@
100100
<div class="navbar_button">
101101
<NavbarFireplace />
102102
<span>{$t.slow}</span>
103-
<Hotkey hotkey="s" />
103+
<Hotkey hotkey="h" />
104104
</div>
105105
</div>
106106
</a>
@@ -109,7 +109,7 @@
109109
aria-controls="navbar_submenu"
110110
aria-current={$router.route === 'fast' ? 'page' : null}
111111
aria-haspopup="menu"
112-
aria-keyshortcuts="f"
112+
aria-keyshortcuts="a"
113113
href={getURL('fast')}
114114
role="menuitem"
115115
on:click={openMenu}
@@ -118,7 +118,7 @@
118118
<div class="navbar_button">
119119
<Icon path={mdiFood} />
120120
<span>{$t.fast}</span>
121-
<Hotkey hotkey="f" />
121+
<Hotkey hotkey="a" />
122122
</div>
123123
</div>
124124
</a>
@@ -154,11 +154,16 @@
154154
<style>
155155
:root {
156156
--navbar-width: 0;
157-
--navbar-item: 40px;
157+
--navbar-item: 36px;
158+
--navbar-color: var(--land-color);
159+
160+
@media (width <= 1024px) {
161+
--navbar-color: var(--above-secondary-color);
162+
}
158163
}
159164
160165
:global(:root.has-navbar) {
161-
--navbar-width: 290px;
166+
--navbar-width: 300px;
162167
--navbar-height: 56px;
163168
}
164169
@@ -175,20 +180,20 @@
175180
inset-block: unset;
176181
bottom: 0;
177182
width: 100%;
178-
background-color: var(--land-color);
179-
box-shadow: var(--float-shadow);
183+
background-color: var(--navbar-color);
184+
box-shadow: var(--above-2-shadow);
180185
}
181186
}
182187
183188
.navbar_main {
184189
display: flex;
185-
gap: var(--padding-s);
190+
gap: 4px;
186191
justify-content: stretch;
187-
padding: var(--padding-m) var(--padding-m) 0 var(--padding-m);
192+
padding: 8px 0 0 4px;
188193
189194
@media (width <= 1024px) {
190195
justify-content: space-between;
191-
padding: var(--padding-m);
196+
padding: 8px;
192197
}
193198
}
194199
@@ -213,7 +218,7 @@
213218
flex-grow: 1;
214219
flex-shrink: 1;
215220
gap: 2px;
216-
padding: var(--padding-m);
221+
padding: 8px 0 0 4px;
217222
overflow-y: auto;
218223
219224
@media (width <= 1024px) {
@@ -238,8 +243,8 @@
238243
239244
.navbar_link {
240245
position: relative;
241-
width: 50%;
242246
border-radius: var(--radius);
247+
flex-grow: 1;
243248
244249
&:first-child {
245250
border-start-end-radius: 0;
@@ -250,13 +255,14 @@
250255
margin-inline-start: -1px;
251256
border-start-start-radius: 0;
252257
border-end-start-radius: 0;
258+
border-left: 1px solid var(--border-color);
253259
}
254260
255261
& .navbar_overflow {
256262
padding: 5px;
257263
margin: -5px;
258264
overflow: hidden;
259-
background: var(--land-color);
265+
background: var(--navbar-color);
260266
}
261267
262268
&:first-child .navbar_overflow {
@@ -273,13 +279,14 @@
273279
position: relative;
274280
box-sizing: border-box;
275281
display: inline-flex;
276-
gap: var(--padding-m);
282+
gap: 6px;
277283
align-items: center;
278284
justify-content: center;
279285
width: 100%;
286+
padding-inline-start: 10px;
287+
padding-inline-end: 16px;
288+
font: var(--secondary-font);
280289
height: var(--navbar-item);
281-
padding-inline: var(--padding-l);
282-
font-weight: 600;
283290
line-height: var(--navbar-item);
284291
color: var(--text-color);
285292
text-decoration: none;
@@ -301,6 +308,19 @@
301308
border-end-start-radius: 0;
302309
}
303310
311+
&:focus-visible {
312+
outline: none;
313+
314+
& .navbar_button {
315+
z-index: 10;
316+
outline: 3px solid var(--focus-color);
317+
outline-offset: -3px;
318+
transition:
319+
outline-width 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
320+
outline-offset 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
321+
}
322+
}
323+
304324
&:hover .navbar_button,
305325
&:focus-visible .navbar_button,
306326
&:active .navbar_button {

0 commit comments

Comments
 (0)