Skip to content

Commit e060c8f

Browse files
nicklemmonnicklemmon
authored
Adds light/dark mode support (#933)
* Claude's first pass...isn't great * Defines semantic color tokens, starts to integrate them * Implements most dark mode values * WIP * WIP * WIP * Fixes remaining styling problems
1 parent a6b470b commit e060c8f

20 files changed

Lines changed: 176 additions & 80 deletions

‎src/components/article-card/article-card.module.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.article-card {
22
height: 100%;
33
position: relative; /* allows absolute positioning within */
4-
color: var(--outer-space);
4+
color: var(--text);
55
transition:
66
transform var(--duration) var(--easing),
77
box-shadow var(--duration) var(--easing);
@@ -16,7 +16,7 @@
1616

1717
.link {
1818
display: block; /* fixes focus styling issues */
19-
outline-color: var(--blue-ribbon);
19+
outline-color: var(--link);
2020
border: 0;
2121
}
2222

@@ -31,7 +31,7 @@
3131
margin-top: var(--spacing-sm);
3232
font-weight: 700;
3333
font-size: 0.85rem;
34-
color: var(--boulder);
34+
color: var(--text-subdued);
3535
}
3636

3737
.header {
@@ -41,18 +41,18 @@
4141
.heading.heading {
4242
font-weight: 700;
4343
font-size: 1.25rem;
44-
color: var(--outer-space);
44+
color: var(--text);
4545
}
4646

4747
.read-more {
48-
color: var(--blue-ribbon);
48+
color: var(--interactive);
4949
position: absolute;
5050
bottom: var(--spacing-md);
5151
right: var(--spacing-md);
5252
}
5353

5454
.icon {
55-
fill: var(--blue-ribbon);
55+
fill: var(--interactive);
5656
width: 1rem;
5757
height: 1rem;
5858
}

‎src/components/breakout-container/breakout-container.module.css‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
.breakout-container {
22
position: relative;
3-
background-color: var(--white);
3+
background-color: var(--surface);
44
margin: 0 auto;
5-
background-color: var(--white);
65
}
76

87
.breakout-container:after {
@@ -16,12 +15,12 @@
1615
left: 0;
1716
width: 100%;
1817
height: var(--spacing-lg);
19-
background-color: var(--white);
18+
background-color: var(--surface);
2019
z-index: var(--layer-md);
2120
box-shadow: 0 var(--spacing-sm) var(--spacing-md) rgba(0, 0, 0, 0.033);
2221
}
23-
}
2422

25-
.container {
26-
padding-bottom: 0;
23+
.container {
24+
padding-bottom: 0;
25+
}
2726
}

‎src/components/button/button.module.css‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@
55
padding: var(--spacing-md) var(--spacing-lg);
66
font-family: var(--font-family-secondary);
77

8-
border: 2px solid #000; /* black is just a placeholder to be overidden */
8+
border: 2px solid currentColor;
99
font-weight: 700;
1010
font-size: 1rem;
1111
cursor: pointer;
12-
transition: background-color var(--duration) var(--easing);
12+
transition:
13+
background-color var(--duration) var(--easing),
14+
border-color var(--duration) var(--easing);
1315
}
1416

1517
.full-width {
@@ -21,40 +23,41 @@
2123
}
2224

2325
.primary-variant {
24-
background-color: var(--blue-ribbon);
25-
color: var(--white);
26-
border-color: var(--blue-ribbon);
26+
background-color: var(--interactive);
27+
color: var(--on-interactive);
28+
border-color: var(--interactive);
2729
}
2830

2931
.primary-variant:hover {
30-
background-color: var(--blue);
32+
background-color: var(--interactive-hover);
33+
border-color: var(--interactive-hover);
3134
}
3235

3336
.primary-variant:focus-visible {
34-
outline-color: var(--blue);
37+
outline-color: var(--interactive-hover);
3538
}
3639

3740
.secondary-variant {
38-
background-color: var(--white);
39-
color: var(--blue-ribbon);
40-
border-color: var(--blue-ribbon);
41+
background-color: var(--on-interactive);
42+
color: var(--interactive);
43+
border-color: var(--interactive);
4144
}
4245

4346
.tertiary-variant {
44-
background-color: var(--white);
45-
color: var(--blue-ribbon);
47+
background-color: var(--on-interactive);
48+
color: var(--interactive);
4649
border-color: transparent;
4750
}
4851

4952
.secondary-variant:hover,
5053
.tertiary-variant:hover {
51-
background-color: var(--sea-shell);
54+
background-color: var(--on-interactive);
5255
}
5356

5457
.ghost-variant {
5558
background-color: transparent;
56-
color: var(--white);
57-
border-color: var(--white);
59+
color: var(--surface);
60+
border-color: var(--surface);
5861
}
5962

6063
.prefix-icon {

‎src/components/card/card.module.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
.card {
2-
background-color: var(--white);
2+
--card-border: color-mix(in srgb, var(--text) 20%, transparent);
3+
--card-shadow: color-mix(in srgb, var(--text) 15%, transparent);
4+
5+
background-color: var(--surface);
36
padding: var(--spacing-md);
47
border-radius: 18px;
5-
border: 1px solid var(--semi-transparent-black);
8+
border: 1px solid var(--card-border);
69
box-shadow: 0 var(--spacing-sm) var(--spacing-md) calc(-1 * var(--spacing-sm))
7-
rgba(0, 0, 0, 0.125);
10+
var(--card-shadow);
811
}

‎src/components/footer/footer.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.footer {
2-
background-color: var(--sea-shell);
3-
color: var(--outer-space);
2+
background-color: var(--surface-subdued);
3+
color: var(--text);
44
font-family: var(--font-family-secondary);
55
text-align: center;
66
flex: 1;

‎src/components/header/header.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
font-family: var(--font-family-secondary);
2222
font-weight: 700;
2323
text-transform: uppercase;
24-
color: var(--outer-space);
25-
background-color: var(--white);
24+
color: var(--text);
25+
background-color: var(--surface);
2626
border: 0;
2727
}

‎src/components/heading/heading.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.heading {
2+
color: currentColor;
3+
}

‎src/components/heading/heading.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React from 'react'
2+
import { clsx } from 'clsx'
3+
import styles from './heading.module.css'
24

35
type HeadingEl = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
46

@@ -17,7 +19,11 @@ export default function Heading({
1719
const ariaLevel = Number(as.replace(/\D/g, ''))
1820

1921
return (
20-
<Component role="heading" aria-level={ariaLevel} className={className}>
22+
<Component
23+
role="heading"
24+
aria-level={ariaLevel}
25+
className={clsx(styles['heading'], className)}
26+
>
2127
{children}
2228
</Component>
2329
)

‎src/components/hero/hero.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.hero {
7-
color: var(--white);
7+
color: var(--on-interactive);
88
z-index: 1;
99
}
1010

@@ -30,7 +30,7 @@
3030

3131
.overlay {
3232
z-index: 2;
33-
background-color: var(--blue-ribbon);
33+
background-color: var(--interactive-hover);
3434
opacity: 0.75;
3535
}
3636

@@ -49,7 +49,7 @@
4949
z-index: 4;
5050
top: -25%;
5151
left: -25%;
52-
background-color: var(--blue-ribbon);
52+
background-color: var(--interactive);
5353
width: 150%;
5454
height: 150%;
5555
border-radius: 1.5rem;

‎src/components/long-form/long-form.module.css‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.long-form {
2+
color: var(--text);
3+
}
4+
15
.long-form * + * {
26
margin-top: var(--spacing-md);
37
}
@@ -37,7 +41,7 @@
3741
bottom: 0;
3842
width: var(--spacing-lg);
3943
height: var(--spacing-xs);
40-
background-color: rgba(0, 0, 0, 0.125);
44+
background-color: var(--border);
4145
}
4246

4347
.long-form p {
@@ -47,19 +51,20 @@
4751
.long-form p,
4852
.long-form li {
4953
line-height: 1.75;
50-
color: var(--boulder);
54+
color: var(--text-subdued);
5155
}
5256

5357
.long-form p a,
5458
.long-form li a {
55-
color: var(--blue-ribbon);
59+
color: var(--interactive);
5660
padding-bottom: 1px;
5761
border-bottom: 2px solid currentColor;
5862
}
5963

6064
.long-form :not(pre) > code {
61-
color: black;
62-
background-color: rgba(0, 0, 0, 0.05);
65+
color: var(--text);
66+
border: 1px solid var(--border);
67+
background-color: var(--surface-subdued);
6368
padding: 0.125rem 0.25rem;
6469
border-radius: 3px;
6570
font-size: 0.85rem;
@@ -79,9 +84,10 @@
7984

8085
.long-form.long-form pre {
8186
display: block;
82-
border-radius: var(--border-radius);
87+
border-radius: calc(var(--border-radius) * 2);
8388
padding: var(--spacing-md);
84-
box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, 0.33);
89+
border: 1px solid var(--border);
90+
box-shadow: 0 1rem 1rem -1rem var(--shadow);
8591
overflow-x: auto;
8692
}
8793

@@ -102,18 +108,18 @@
102108
}
103109

104110
.long-form blockquote {
105-
background-color: var(--sea-shell);
111+
background-color: var(--surface-subdued);
106112
padding: var(--spacing-lg);
107-
color: var(--outer-space);
108-
border-left: 0.5vw solid var(--outer-space);
113+
color: var(--text);
114+
border-left: 0.5vw solid var(--border);
109115
}
110116

111117
.long-form blockquote p {
112118
margin: 0;
113119
}
114120

115121
.long-form blockquote * {
116-
color: var(--outer-space);
122+
color: var(--text);
117123
}
118124

119125
.long-form img {

0 commit comments

Comments
 (0)