Skip to content

Commit 0591780

Browse files
Rich-HarrisRich-Harris
authored
Overhaul tokens (#735)
* get rid of some unused junk * modularise tokens * unused * tidy up * tidy up * group colours by purpose * organise tokens * consolidate * revert * separate background colors from borders * more border stuff * move --sk-raised tokens into buttons.css
1 parent aaff89b commit 0591780

File tree

76 files changed

+464
-492
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+464
-492
lines changed

‎apps/svelte.dev/src/lib/components/Modal.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@
6666
transform: translate(-50%, -50%);
6767
width: calc(100vw - 2rem);
6868
max-width: 56rem;
69-
background: var(--sk-back-2);
70-
color: var(--sk-text-2);
69+
background: var(--sk-bg-2);
70+
color: var(--sk-fg-2);
7171
padding: 2rem;
7272
border: none;
7373
border-radius: 0.5rem;

‎apps/svelte.dev/src/lib/components/PageControls.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
6262
.controls {
6363
max-width: calc(var(--sk-page-content-width) + 1rem);
64-
border-top: 1px solid var(--sk-back-4);
64+
border-top: 1px solid var(--sk-border-medium);
6565
padding: 1rem 0 0 0;
6666
margin: 1rem 0 0 0;
6767
text-wrap: balance;
@@ -83,7 +83,7 @@
8383
span {
8484
font: var(--sk-font-ui-medium);
8585
text-transform: uppercase;
86-
color: var(--sk-text-3);
86+
color: var(--sk-fg-3);
8787
8888
&.faded {
8989
opacity: 0.4;

‎apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
left: 0;
4343
top: 0;
4444
height: 100%;
45-
background-color: var(--sk-theme-1);
45+
background-color: var(--sk-fg-accent);
4646
transition: width 0.4s;
4747
}
4848

‎apps/svelte.dev/src/lib/components/SecondaryNav.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
align-items: center;
1717
justify-content: space-between;
1818
padding: 0.6rem var(--sk-page-padding-side);
19-
background-color: var(--sk-back-2);
20-
color: var(--sk-text-1);
19+
background-color: var(--sk-bg-2);
20+
color: var(--sk-fg-1);
2121
white-space: nowrap;
2222
flex: 0;
2323
gap: 1rem;

‎apps/svelte.dev/src/lib/components/SelectIcon.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
position: relative;
2121
2222
&:has(select:focus-visible) .raised.icon {
23-
outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6);
23+
outline: 2px solid var(--sk-fg-accent);
2424
border-radius: var(--sk-border-radius);
2525
}
2626
@@ -47,7 +47,7 @@
4747
4848
.icon {
4949
position: relative;
50-
color: var(--sk-text-3);
50+
color: var(--sk-fg-3);
5151
line-height: 1;
5252
background-size: 1.8rem;
5353
z-index: 999;

‎apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type { Adapter } from '$lib/tutorial';
1010
import type { Item, File } from 'editor';
1111

1212
const converter = new AnsiToHtml({
13-
fg: 'var(--sk-text-3)'
13+
fg: 'var(--sk-fg-3)'
1414
});
1515

1616
/** Web container singleton */

‎apps/svelte.dev/src/routes/(authed)/apps/+page.svelte

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
padding: 0 0 0 3.2rem;
157157
position: relative;
158158
margin: 1rem 0;
159-
color: var(--sk-text-2);
159+
color: var(--sk-fg-2);
160160
font: var(--sk-font-ui-medium);
161161
162162
.avatar {
@@ -181,7 +181,7 @@
181181
font: var(--sk-font-ui-medium);
182182
z-index: 2;
183183
justify-content: space-between;
184-
outline: 1rem solid var(--sk-back-1);
184+
outline: 1rem solid var(--sk-bg-1);
185185
}
186186
187187
.controls::after {
@@ -190,7 +190,7 @@
190190
width: 100%;
191191
bottom: -2rem;
192192
height: 2rem;
193-
background: linear-gradient(to bottom, var(--sk-back-1) 0%, var(--sk-back-1) 50%, transparent);
193+
background: linear-gradient(to bottom, var(--sk-bg-1) 0%, var(--sk-bg-1) 50%, transparent);
194194
}
195195
196196
.controls form {
@@ -209,7 +209,7 @@
209209
padding: 0.5rem 1rem;
210210
line-height: 1;
211211
display: flex;
212-
border: 1px solid var(--sk-back-5);
212+
border: 1px solid var(--sk-border-medium);
213213
border-radius: var(--sk-border-radius);
214214
z-index: 2;
215215
font: var(--sk-font-ui-large);
@@ -241,15 +241,15 @@
241241
}
242242
243243
h2 {
244-
color: var(--sk-text-2);
244+
color: var(--sk-fg-2);
245245
font: var(--sk-font-ui-medium);
246246
overflow: hidden;
247247
text-overflow: ellipsis;
248248
}
249249
250250
li a {
251251
display: block;
252-
background: var(--sk-back-3);
252+
background: var(--sk-bg-3);
253253
padding: 1rem 3rem 1rem 1rem;
254254
height: 100%;
255255
line-height: 1;
@@ -259,7 +259,7 @@
259259
260260
li span {
261261
font: var(--sk-font-ui-small);
262-
color: var(--sk-text-3);
262+
color: var(--sk-fg-3);
263263
}
264264
265265
li label {
@@ -275,7 +275,7 @@
275275
}
276276
277277
ul:not(.selecting) li:hover a {
278-
background-color: var(--sk-back-4);
278+
background-color: var(--sk-bg-4);
279279
}
280280
281281
ul:not(.selecting) li:hover input {

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@
215215
height: calc(100% - var(--sk-nav-height) - var(--sk-banner-height));
216216
height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-height));
217217
overflow: hidden;
218-
background-color: var(--sk-back-1);
218+
background-color: var(--sk-bg-1);
219219
box-sizing: border-box;
220220
display: flex;
221221
flex-direction: column;

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@
262262
263263
.icon {
264264
position: relative;
265-
color: var(--sk-text-3);
265+
color: var(--sk-fg-3);
266266
line-height: 1;
267267
background-size: 1.8rem;
268268
z-index: 999;
@@ -303,7 +303,7 @@
303303
304304
input {
305305
background: transparent;
306-
border: 1px solid var(--sk-back-4);
306+
border: 1px solid var(--sk-border-medium);
307307
border-radius: var(--sk-border-radius);
308308
color: currentColor;
309309
width: 0;
@@ -315,7 +315,7 @@
315315
316316
.badge {
317317
position: absolute;
318-
background: var(--sk-theme-1);
318+
background: var(--sk-fg-accent);
319319
border-radius: 50%;
320320
width: 1rem;
321321
height: 1rem;

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
left: 0;
6666
width: 100%;
6767
height: 100%;
68-
background-color: var(--sk-back-1);
68+
background-color: var(--sk-bg-1);
6969
overflow: hidden;
7070
box-sizing: border-box;
7171
display: flex;

‎apps/svelte.dev/src/routes/_home/Community.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
font: var(--sk-font-body-small);
3131
margin: 0 auto;
3232
padding: 0 var(--sk-page-padding-side);
33-
color: var(--sk-text-4);
33+
color: var(--sk-fg-4);
3434
text-align: center;
3535
3636
a {

‎apps/svelte.dev/src/routes/_home/Companies.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
text-align: center;
3838
justify-self: center;
3939
z-index: 2;
40-
filter: drop-shadow(0 0 1rem var(--sk-back-1)) drop-shadow(0 0 1rem var(--sk-back-1));
40+
filter: drop-shadow(0 0 1rem var(--sk-bg-1)) drop-shadow(0 0 1rem var(--sk-bg-1));
4141
}
4242
4343
.wing {

‎apps/svelte.dev/src/routes/_home/Hero.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,12 @@
5959
height: 200%;
6060
left: 0;
6161
top: -8rem; /* prevent cutoff on overscroll */
62-
background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
62+
background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
6363
radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
6464
}
6565
6666
:root.dark &::before {
67-
background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
67+
background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
6868
radial-gradient(
6969
64.14% 72.25% at 47.58% 31.75%,
7070
hsl(209deg 6% 47% / 52%) 0%,
@@ -104,7 +104,7 @@
104104
.cta {
105105
font: var(--sk-font-ui-medium);
106106
font-size: 2rem;
107-
color: var(--sk-theme-1);
107+
color: var(--sk-fg-accent);
108108
text-transform: uppercase;
109109
display: flex;
110110
align-items: center;

‎apps/svelte.dev/src/routes/_home/Testimonials.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,10 +167,10 @@
167167
padding: 0.25em 0.5em;
168168
line-height: 1;
169169
text-transform: uppercase;
170-
background: var(--sk-text-2);
170+
background: var(--sk-fg-2);
171171
border-radius: var(--sk-border-radius);
172172
font: var(--sk-font-ui-small);
173-
color: var(--sk-back-2);
173+
color: var(--sk-bg-2);
174174
175175
&::after {
176176
content: 'adj.';

‎apps/svelte.dev/src/routes/_home/Video.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@
172172
}
173173
174174
video:focus {
175-
outline: 1px solid var(--sk-theme-1);
175+
outline: 1px solid var(--sk-fg-accent);
176176
}
177177
178178
video::cue {
@@ -190,7 +190,7 @@
190190
left: 0;
191191
bottom: 0;
192192
height: 0.5rem;
193-
background: var(--sk-theme-1);
193+
background: var(--sk-fg-accent);
194194
transition: height 0.2s;
195195
}
196196
@@ -242,7 +242,7 @@
242242
}
243243
244244
.video-player input:focus-visible ~ img {
245-
outline: 2px solid var(--sk-theme-1);
245+
outline: 2px solid var(--sk-fg-accent);
246246
outline-offset: 2px;
247247
}
248248
</style>

‎apps/svelte.dev/src/routes/blog/+page.svelte

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
7575
h2 {
7676
display: inline-block;
77-
color: var(--sk-text-2);
77+
color: var(--sk-fg-2);
7878
font: var(--sk-font-h3);
7979
}
8080
@@ -88,14 +88,14 @@
8888
8989
h2 {
9090
font: var(--sk-font-h1);
91-
color: var(--sk-text-2);
91+
color: var(--sk-fg-2);
9292
}
9393
}
9494
9595
a {
9696
display: block;
9797
text-decoration: none;
98-
color: var(--sk-text-2);
98+
color: var(--sk-fg-2);
9999
100100
&:hover h2 {
101101
text-decoration: underline;
@@ -104,7 +104,7 @@
104104
105105
p {
106106
font: var(--sk-font-body-small);
107-
color: var(--sk-text-3);
107+
color: var(--sk-fg-3);
108108
margin: 0 0 0.5em 0;
109109
}
110110
}
@@ -130,7 +130,7 @@
130130
top: 0;
131131
font: var(--sk-font-ui-medium);
132132
text-transform: uppercase;
133-
color: var(--sk-text-4);
133+
color: var(--sk-fg-4);
134134
}
135135
}
136136
@@ -164,7 +164,7 @@
164164
a {
165165
display: block;
166166
font: var(--sk-font-body);
167-
color: var(--sk-text-2);
167+
color: var(--sk-fg-2);
168168
}
169169
}
170170
}

‎apps/svelte.dev/src/routes/blog/[slug]/+page.svelte

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
}
4848
4949
figcaption {
50-
color: var(--sk-text-4);
50+
color: var(--sk-fg-4);
5151
font: var(--sk-font-body-small);
5252
}
5353
}
@@ -61,11 +61,11 @@
6161
margin: 0 0 1em 1em;
6262
width: 16rem;
6363
z-index: 2;
64-
color: var(--sk-text-4);
64+
color: var(--sk-fg-4);
6565
font: var(--sk-font-body-small);
6666
6767
p {
68-
color: var(--sk-text-4);
68+
color: var(--sk-fg-4);
6969
font: inherit;
7070
}
7171
}
@@ -87,7 +87,7 @@
8787
position: relative;
8888
border: none;
8989
height: 1px;
90-
background: radial-gradient(circle at center, var(--sk-text-4), transparent);
90+
background: radial-gradient(circle at center, var(--sk-fg-4), transparent);
9191
margin: 7rem 0;
9292
overflow: visible;
9393
@@ -99,8 +99,8 @@
9999
left: 50%;
100100
top: 2px;
101101
transform: rotate(45deg) translate(-50%, -50%);
102-
background: var(--sk-back-1);
103-
border: 1px solid var(--sk-text-4);
102+
background: var(--sk-bg-1);
103+
border: 1px solid var(--sk-fg-4);
104104
}
105105
}
106106
}
@@ -112,7 +112,7 @@
112112
113113
.standfirst {
114114
font: var(--sk-font-body-small);
115-
color: var(--sk-text-3);
115+
color: var(--sk-fg-3);
116116
margin: 0 0 1em 0;
117117
}
118118

‎apps/svelte.dev/src/routes/docs/+page.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,14 +111,14 @@
111111
112112
.options a {
113113
display: block;
114-
color: var(--sk-text-2);
114+
color: var(--sk-fg-2);
115115
margin: 1em -1.6rem;
116116
padding: 1.6rem;
117-
background-color: var(--sk-back-1);
117+
background-color: var(--sk-bg-1);
118118
border-radius: var(--sk-border-radius);
119119
120120
&:hover {
121-
background-color: var(--sk-back-2);
121+
background-color: var(--sk-bg-2);
122122
filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
123123
text-decoration: none;
124124
-webkit-transform: var(--safari-fix);

0 commit comments

Comments
 (0)