|
19 | 19 | --clr-neutral-500: #3c3c3c; |
20 | 20 | --clr-neutral-700: #2a2a2a; |
21 | 21 | --clr-neutral-900: #1c1c1c; |
22 | | - --clr-neutral-200-light: #1c1c1c; |
23 | | - --clr-neutral-300-light: #2a2a2a; |
24 | | - --clr-neutral-500-light: #b3b3b3; |
25 | | - --clr-neutral-700-light: #e0e0e0; |
26 | | - --clr-neutral-900-light: #ffffff; |
27 | 22 |
|
28 | 23 | --clr-accent: #00b4b8; |
29 | 24 |
|
|
66 | 61 | color 0.3s ease; |
67 | 62 | } |
68 | 63 |
|
| 64 | +/*------------------------------------*\ |
| 65 | + #ACCESSIBILITY/THEMING |
| 66 | +\*------------------------------------*/ |
69 | 67 | [data-theme="light"] { |
70 | | - --bg-primary:var(--clr-neutral-900-light); |
71 | | - --bg-secondary:var(--clr-neutral-700-light); |
72 | | - --text-primary:var(--clr-neutral-200-light); |
73 | | - --text-secondary:var(--clr-neutral-300-light); |
74 | | - --text-dark:var(--clr-neutral-900-light); |
75 | | - --border-color:var(--clr-neutral-500-light); |
| 68 | + color-scheme:light; |
| 69 | + --clr-neutral-200:hsl(0,0%,10%); |
| 70 | + --clr-neutral-300:hsl(0,0%,30%); |
| 71 | + --clr-neutral-500:hsl(0,0%,85%); |
| 72 | + --clr-neutral-700:hsl(0,0%,95%); |
| 73 | + --clr-neutral-900:hsl(60,25%,98%); |
76 | 74 | } |
77 | 75 |
|
78 | 76 | /*------------------------------------*\ |
@@ -452,6 +450,7 @@ abbr { |
452 | 450 | .categories { |
453 | 451 | display: grid; |
454 | 452 | background-color: var(--bg-secondary); |
| 453 | + border: 1px solid var(--border-color); |
455 | 454 | padding: 1.25rem; |
456 | 455 | padding-bottom: 2rem; |
457 | 456 | border-radius: var(--br-lg); |
|
0 commit comments