Skip to content

Commit 94958c7

Browse files
nicklemmonnicklemmon
committed
Fixes remaining styling problems
1 parent 6711abf commit 94958c7

6 files changed

Lines changed: 17 additions & 206 deletions

File tree

‎dark-mode-implementation-gaps.md‎

Lines changed: 0 additions & 142 deletions
This file was deleted.

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@
1919
z-index: var(--layer-md);
2020
box-shadow: 0 var(--spacing-sm) var(--spacing-md) rgba(0, 0, 0, 0.033);
2121
}
22+
23+
.container {
24+
padding-bottom: 0;
25+
}
2226
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
border-radius: calc(var(--border-radius) * 2);
8888
padding: var(--spacing-md);
8989
border: 1px solid var(--border);
90-
box-shadow: 0 1rem 1rem -1rem var(--shadow-color);
90+
box-shadow: 0 1rem 1rem -1rem var(--shadow);
9191
overflow-x: auto;
9292
}
9393

‎src/components/navigation/navigation.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
/* Some specificity wars here */
3333
.button.is-open .bar.bar {
3434
margin: 0;
35-
background-color: var(--text);
35+
background-color: var(--on-interactive);
3636
}
3737

3838
.button.is-open .bar-1 {

‎src/pages/_document.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ class MyDocument extends Document {
2727
<Html lang="en">
2828
<Head>
2929
<link rel="shortcut icon" href="/favicon.png" />
30+
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
31+
<meta name="theme-color" content="#131313" media="(prefers-color-scheme: dark)" />
3032
</Head>
3133

3234
{/* Global site tag (gtag.js) - Google Analytics */}

‎src/styles/color-tokens.css‎

Lines changed: 9 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
/* ==========================================================================
22
Design Tokens
33
==========================================================================
4-
4+
55
Architecture:
66
1. Primitives - Raw color values
77
2. Mode layer - Light/dark via prefers-color-scheme media query
8-
3. Island layer - Contextual overrides (default, emphasis)
9-
4. Components consume semantic tokens, agnostic to mode/island
10-
11-
Usage:
12-
<body>
13-
<section>Default island content</section>
14-
<section data-island="emphasis">Emphasis island content</section>
15-
</body>
16-
8+
3. Components consume semantic tokens, agnostic to mode
9+
1710
========================================================================== */
1811

1912
/* ==========================================================================
@@ -28,9 +21,11 @@
2821
--color-sea-shell: #f1f1f1;
2922
--color-semi-transparent-white: rgba(255, 255, 255, 0.125);
3023
--color-semi-transparent-black: rgba(0, 0, 0, 0.125);
31-
--color-shadow-color: rgba(0, 0, 0, 0.33);
24+
--color-shadow-light: rgba(0, 0, 0, 0.33);
25+
--color-shadow-dark: rgba(0, 0, 0, 0.5);
3226
--color-boulder: #575757;
3327
--color-white: #fff;
28+
--color-white-subdued: rgba(255, 255, 255, 0.7);
3429
--color-black: #131313;
3530
}
3631

@@ -55,9 +50,7 @@
5550
--link: var(--color-blue-ribbon);
5651
--link-hover: var(--color-blue);
5752

58-
--focus-ring: var(--color-blue-ribbon);
59-
60-
/** TODO: Add a shadow token **/
53+
--shadow: var(--color-shadow-light);
6154
}
6255

6356
/* ==========================================================================
@@ -72,53 +65,7 @@
7265
--surface-subdued: var(--color-outer-space);
7366

7467
--text: var(--color-white);
75-
--text-subdued: var(--color-white);
76-
--border: var(--color-semi-transparent-white);
77-
78-
--interactive: var(--color-cornflower);
79-
--interactive-hover: var(--color-blue-ribbon);
80-
--on-interactive: var(--color-white);
81-
82-
--link: var(--color-blue-ribbon);
83-
--link-hover: var(--color-blue);
84-
85-
--focus-ring: var(--color-blue-ribbon);
86-
}
87-
}
88-
89-
/* ==========================================================================
90-
Emphasis Island - Light Mode
91-
========================================================================== */
92-
93-
[data-island='emphasis'] {
94-
--surface: var(--color-outer-space);
95-
--surface-subdued: var(--color-black);
96-
97-
--text: var(--color-white);
98-
--text-subdued: var(--color-white);
99-
--border: var(--color-semi-transparent-white);
100-
101-
--interactive: var(--color-cornflower);
102-
--interactive-hover: var(--color-blue-ribbon);
103-
--on-interactive: var(--color-white);
104-
105-
--link: var(--color-blue-ribbon);
106-
--link-hover: var(--color-blue);
107-
108-
--focus-ring: var(--color-blue-ribbon);
109-
}
110-
111-
/* ==========================================================================
112-
Emphasis Island - Dark Mode
113-
========================================================================== */
114-
115-
@media (prefers-color-scheme: dark) {
116-
[data-island='emphasis'] {
117-
--surface: var(--color-outer-space);
118-
--surface-subdued: var(--color-black);
119-
120-
--text: var(--color-white);
121-
--text-subdued: var(--color-white);
68+
--text-subdued: var(--color-white-subdued);
12269
--border: var(--color-semi-transparent-white);
12370

12471
--interactive: var(--color-cornflower);
@@ -128,6 +75,6 @@
12875
--link: var(--color-blue-ribbon);
12976
--link-hover: var(--color-blue);
13077

131-
--focus-ring: var(--color-blue-ribbon);
78+
--shadow: var(--color-shadow-dark);
13279
}
13380
}

0 commit comments

Comments
 (0)