Skip to content

Commit 671baf0

Browse files
Rich-HarrisRich-Harris
authored
deduplicate CSS tokens (#113)
* deduplicate CSS tokens * ugh
1 parent 8ebb71b commit 671baf0

File tree

3 files changed

+56
-151
lines changed

3 files changed

+56
-151
lines changed

‎apps/svelte.dev/src/app.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,19 @@
3131
}
3232
</style>
3333

34-
%sveltekit.head%
35-
</head>
36-
<body data-sveltekit-preload-data="hover">
3734
<script>
3835
const themeValue = JSON.parse(localStorage.getItem('svelte:theme'))?.current;
3936
const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
4037
? 'dark'
4138
: 'light';
4239

43-
document.body.classList.remove('light', 'dark');
44-
document.body.classList.add(themeValue ?? systemPreferredTheme);
40+
document.documentElement.classList.remove('light', 'dark');
41+
document.documentElement.classList.add(themeValue ?? systemPreferredTheme);
4542
</script>
4643

44+
%sveltekit.head%
45+
</head>
46+
<body data-sveltekit-preload-data="hover">
4747
<div style="height: 100%">%sveltekit.body%</div>
4848

4949
<script>

‎packages/site-kit/src/lib/stores/theme.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ export const theme = persisted<Theme>('svelte:theme', {
1818
theme.subscribe(($theme) => {
1919
if (!BROWSER) return;
2020

21-
document.body.classList.remove('light', 'dark');
22-
document.body.classList.add($theme.current);
21+
document.documentElement.classList.remove('light', 'dark');
22+
document.documentElement.classList.add($theme.current);
2323
});

‎packages/site-kit/src/lib/styles/tokens.css

Lines changed: 49 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/*
22
3-
!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
3+
!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
44
!you should change that for the other dark mode too
55
66
*/
77

88
:root {
9+
color-scheme: light;
10+
911
--sk-back-h: 206;
1012
--sk-selection-color: hsla(204, 100%, 63%, 0.3);
1113

@@ -30,27 +32,64 @@
3032
--sk-text-s: 1.6rem;
3133
--sk-text-xs: 1.3rem;
3234
--sk-line-max-width: 84rem;
33-
}
3435

35-
body {
3636
--sk-focus-outline: 0 0 0 2px hsla(var(--sk-theme-1-hsl), 0.6);
3737

3838
/* Base colors */
3939
--sk-theme-1: hsl(var(--sk-theme-1-hsl));
4040
--sk-theme-2: hsl(var(--sk-theme-2-hsl));
4141
--sk-theme-3: hsl(var(--sk-theme-3-hsl));
4242

43-
--sk-back-3: hsla(var(--sk-back-3-hsl), 1);
4443
--sk-back-2: hsla(var(--sk-back-2-hsl), 1);
44+
--sk-back-3: hsla(var(--sk-back-3-hsl), 1);
4545

4646
--sk-code-bg: var(--sk-back-3);
4747

4848
--sk-text-warning: hsl(var(--sk-text-warning-hsl));
49-
}
5049

51-
@media only screen and (prefers-color-scheme: dark) {
52-
:root {
53-
color-scheme: dark;
50+
--sk-back-3-hsl: 206, 64%, 98%;
51+
--sk-back-2-hsl: 0, 0%, 100%;
52+
53+
--sk-back-1: hsl(0, 0%, 100%);
54+
--sk-back-4: hsl(210, 75%, 97%);
55+
--sk-back-5: hsl(206, 20%, 80%);
56+
--sk-theme-1-hsl: 12, 93%, 43%;
57+
--sk-theme-2-hsl: 240, 8%, 44%;
58+
--sk-theme-3-hsl: 204, 100%, 63%;
59+
--sk-text-1: hsla(0, 0%, 0%, 0.95);
60+
--sk-text-2: hsla(0, 0%, 0%, 0.73);
61+
--sk-text-3: hsla(0, 0%, 0%, 0.55);
62+
--sk-text-4: hsla(0, 0%, 0%, 0.35);
63+
--sk-scrollbar: rgba(0, 0, 0, 0.3);
64+
--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
65+
66+
/* same in light mode, different in dark mode */
67+
--sk-theme-1-variant: hsl(15, 100%, 50%);
68+
--sk-theme-2-variant: hsl(240, 8%, 44%);
69+
--sk-theme-3-variant: hsl(204, 100%, 63%);
70+
71+
--sk-code-ts-bg: var(--sk-back-1);
72+
--sk-code-base: hsl(45, 7%, 35%);
73+
--sk-code-comment: hsl(0, 0%, 41%);
74+
--sk-code-keyword: hsl(204, 88%, 35%);
75+
--sk-code-function: hsl(19, 67%, 44%);
76+
--sk-code-string: hsl(41, 37%, 38%);
77+
--sk-code-number: hsl(120, 100%, 25%);
78+
--sk-code-template-string: hsl(2, 80%, 47%);
79+
--sk-code-tags: var(--sk-code-function);
80+
--sk-code-important: var(--sk-code-string);
81+
--sk-code-diff-base: hsla(0, 0%, 0%, 0.6);
82+
--sk-code-diff-inserted: hsl(120, 100%, 25%);
83+
--sk-code-diff-removed: hsl(2, 80%, 47%);
84+
85+
--sk-text-warning-hsl: 32, 95%, 44%;
86+
87+
/* used for coloured backgrounds e.g. blockquotes */
88+
--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
89+
--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
90+
91+
&.dark {
92+
color-scheme: light;
5493

5594
--sk-back-3-hsl: 0, 0%, 14%;
5695
--sk-back-2-hsl: 0, 0%, 18%;
@@ -70,13 +109,14 @@ body {
70109
--sk-scrollbar: rgba(255, 255, 255, 0.3);
71110
--sk-shadow: 0px 0px 0 1px var(--sk-back-4);
72111

112+
--sk-back-3-hsl: 0, 0%, 14%;
73113
--sk-theme-1-variant: hsl(15, 100%, 40%);
74114
--sk-theme-2-variant: hsl(240, 8%, 35%);
75115
--sk-theme-3-variant: hsl(204, 100%, 50%);
76116

77117
--sk-text-warning-hsl: 32, 67%, 56%;
78118

79-
--sk-code-ts-bg: hsl(var(--sk-back-2-hsl));
119+
--sk-code-ts-bg: var(--sk-back-2);
80120
--sk-code-base: hsl(45, 7%, 75%);
81121
--sk-code-comment: hsl(0, 0%, 55%);
82122
--sk-code-keyword: hsl(204, 88%, 65%);
@@ -90,51 +130,6 @@ body {
90130
--sk-code-diff-inserted: hsl(120, 46%, 48%);
91131
--sk-code-diff-removed: hsl(2, 64%, 70%);
92132
}
93-
94-
body.light {
95-
color-scheme: light;
96-
97-
--sk-back-3-hsl: 206, 64%, 98%;
98-
--sk-back-2-hsl: 0, 0%, 100%;
99-
100-
--sk-back-1: hsl(0, 0%, 100%);
101-
--sk-back-4: hsl(210, 75%, 97%);
102-
--sk-back-5: hsl(206, 20%, 80%);
103-
--sk-theme-1-hsl: 12, 93%, 43%;
104-
--sk-theme-2-hsl: 240, 8%, 44%;
105-
--sk-theme-3-hsl: 204, 100%, 63%;
106-
--sk-text-1: hsla(0, 0%, 0%, 0.95);
107-
--sk-text-2: hsla(0, 0%, 0%, 0.73);
108-
--sk-text-3: hsla(0, 0%, 0%, 0.55);
109-
--sk-text-4: hsla(0, 0%, 0%, 0.35);
110-
--sk-scrollbar: rgba(0, 0, 0, 0.3);
111-
--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
112-
113-
/* same in light mode, different in dark mode */
114-
--sk-theme-1-variant: hsl(15, 100%, 50%);
115-
--sk-theme-2-variant: hsl(240, 8%, 44%);
116-
--sk-theme-3-variant: hsl(204, 100%, 63%);
117-
118-
--sk-code-ts-bg: var(--sk-back-1);
119-
--sk-code-base: hsl(45, 7%, 35%);
120-
--sk-code-comment: hsl(0, 0%, 41%);
121-
--sk-code-keyword: hsl(204, 88%, 35%);
122-
--sk-code-function: hsl(19, 67%, 44%);
123-
--sk-code-string: hsl(41, 37%, 38%);
124-
--sk-code-number: hsl(120, 100%, 25%);
125-
--sk-code-template-string: hsl(2, 80%, 47%);
126-
--sk-code-tags: var(--sk-code-function);
127-
--sk-code-important: var(--sk-code-string);
128-
--sk-code-diff-base: hsla(0, 0%, 0%, 0.6);
129-
--sk-code-diff-inserted: hsl(120, 100%, 25%);
130-
--sk-code-diff-removed: hsl(2, 80%, 47%);
131-
132-
--sk-text-warning-hsl: 32, 95%, 44%;
133-
134-
/* used for coloured backgrounds e.g. blockquotes */
135-
--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
136-
--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
137-
}
138133
}
139134

140135
@media screen and (min-width: 480px) {
@@ -151,93 +146,3 @@ body {
151146
--sk-page-padding-side: 4.8rem;
152147
}
153148
}
154-
155-
@media screen and (prefers-color-scheme: light) {
156-
:root {
157-
color-scheme: light;
158-
159-
--sk-back-3-hsl: 206, 64%, 98%;
160-
--sk-back-2-hsl: 0, 0%, 100%;
161-
162-
--sk-back-1: hsl(0, 0%, 100%);
163-
--sk-back-4: hsl(210, 75%, 97%);
164-
--sk-back-5: hsl(206, 20%, 80%);
165-
--sk-theme-1-hsl: 12, 93%, 43%;
166-
--sk-theme-2-hsl: 240, 8%, 44%;
167-
--sk-theme-3-hsl: 204, 100%, 63%;
168-
--sk-text-1: hsla(0, 0%, 0%, 0.95);
169-
--sk-text-2: hsla(0, 0%, 0%, 0.73);
170-
--sk-text-3: hsla(0, 0%, 0%, 0.55);
171-
--sk-text-4: hsla(0, 0%, 0%, 0.35);
172-
--sk-scrollbar: rgba(0, 0, 0, 0.3);
173-
--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
174-
175-
/* same in light mode, different in dark mode */
176-
--sk-theme-1-variant: hsl(15, 100%, 50%);
177-
--sk-theme-2-variant: hsl(240, 8%, 44%);
178-
--sk-theme-3-variant: hsl(204, 100%, 63%);
179-
180-
--sk-code-ts-bg: var(--sk-back-1);
181-
--sk-code-base: hsl(45, 7%, 35%);
182-
--sk-code-comment: hsl(0, 0%, 41%);
183-
--sk-code-keyword: hsl(204, 88%, 35%);
184-
--sk-code-function: hsl(19, 67%, 44%);
185-
--sk-code-string: hsl(41, 37%, 38%);
186-
--sk-code-number: hsl(120, 100%, 25%);
187-
--sk-code-template-string: hsl(2, 80%, 47%);
188-
--sk-code-tags: var(--sk-code-function);
189-
--sk-code-important: var(--sk-code-string);
190-
--sk-code-diff-base: hsla(0, 0%, 0%, 0.4);
191-
--sk-code-diff-inserted: hsl(120, 100%, 25%);
192-
--sk-code-diff-removed: hsl(2, 80%, 47%);
193-
194-
--sk-text-warning-hsl: 32, 95%, 44%;
195-
196-
/* used for coloured backgrounds e.g. blockquotes */
197-
--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
198-
--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
199-
}
200-
201-
body.dark {
202-
color-scheme: dark;
203-
204-
--sk-back-3-hsl: 0, 0%, 14%;
205-
--sk-back-2-hsl: 0, 0%, 18%;
206-
207-
--sk-back-1: hsl(0, 0%, 10%);
208-
--sk-back-4: hsl(0, 0%, 22%);
209-
--sk-back-5: hsl(0, 0%, 40%);
210-
--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
211-
--sk-theme-1-hsl: 12, 94%, 62%;
212-
--sk-theme-2-hsl: 240, 8%, 44%;
213-
--sk-theme-3-hsl: 204, 100%, 63%;
214-
--sk-text-1: hsl(0, 0%, 90%);
215-
--sk-text-2: hsl(0, 0%, 80%);
216-
--sk-text-3: hsl(0, 0%, 65%);
217-
--sk-text-4: hsl(0, 0%, 45%);
218-
--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
219-
--sk-scrollbar: rgba(255, 255, 255, 0.3);
220-
--sk-shadow: 0px 0px 0 1px var(--sk-back-4);
221-
222-
--sk-back-3-hsl: 0, 0%, 14%;
223-
--sk-theme-1-variant: hsl(15, 100%, 40%);
224-
--sk-theme-2-variant: hsl(240, 8%, 35%);
225-
--sk-theme-3-variant: hsl(204, 100%, 50%);
226-
227-
--sk-text-warning-hsl: 32, 67%, 56%;
228-
229-
--sk-code-ts-bg: var(--sk-back-2);
230-
--sk-code-base: hsl(45, 7%, 75%);
231-
--sk-code-comment: hsl(0, 0%, 55%);
232-
--sk-code-keyword: hsl(204, 88%, 65%);
233-
--sk-code-function: hsl(19, 67%, 75%);
234-
--sk-code-string: hsl(41, 37%, 68%);
235-
--sk-code-number: hsl(120, 100%, 25%);
236-
--sk-code-template-string: hsl(2, 80%, 47%);
237-
--sk-code-tags: var(--sk-code-function);
238-
--sk-code-important: var(--sk-code-string);
239-
--sk-code-diff-base: hsla(0, 0%, 100%, 0.5);
240-
--sk-code-diff-inserted: hsl(120, 46%, 48%);
241-
--sk-code-diff-removed: hsl(2, 64%, 70%);
242-
}
243-
}

0 commit comments

Comments
 (0)