Skip to content

Commit 51094bb

Browse files
Rich-HarrisRich-Harris
authored
More token tweaks (#751)
* rename border tokens * fix * get rid of --sk-bg-5 * fix border usage * fixes * move raised styles into buttons.css, add comment on usage * prettier * more
1 parent bf77603 commit 51094bb

File tree

20 files changed

+60
-67
lines changed

20 files changed

+60
-67
lines changed

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

Lines changed: 1 addition & 1 deletion
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-border-medium);
64+
border-top: 1px solid var(--sk-border);
6565
padding: 1rem 0 0 0;
6666
margin: 1rem 0 0 0;
6767
text-wrap: balance;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@
209209
padding: 0.5rem 1rem;
210210
line-height: 1;
211211
display: flex;
212-
border: 1px solid var(--sk-border-medium);
212+
border: 1px solid var(--sk-border);
213213
border-radius: var(--sk-border-radius);
214214
z-index: 2;
215215
font: var(--sk-font-ui-large);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@
303303
304304
input {
305305
background: transparent;
306-
border: 1px solid var(--sk-border-medium);
306+
border: 1px solid var(--sk-border);
307307
border-radius: var(--sk-border-radius);
308308
color: currentColor;
309309
width: 0;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -369,7 +369,7 @@
369369
/* we transform the default state, rather than the editor state, because otherwise
370370
the positioning of tooltips is wrong (doesn't take into account transforms) */
371371
transform: translate(50%, 0);
372-
border-top: 1px solid var(--sk-border-medium);
372+
border-top: 1px solid var(--sk-border);
373373
}
374374
375375
.top.offset {

‎apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
input {
7575
flex: 1;
7676
padding: 0.2rem 0.6rem;
77-
border: 1px solid var(--sk-border-medium);
77+
border: 1px solid var(--sk-border);
7878
/* TODO this should apply to all buttons/inputs? */
7979
border-radius: var(--sk-border-radius);
8080
color: var(--sk-fg-1);

‎packages/editor/src/lib/codemirror.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@
130130

131131
&.cm-panels-top,
132132
&.cm-panels-bottom {
133-
border-top: 1px solid var(--sk-border-medium);
134-
border-bottom: 1px solid var(--sk-border-medium);
133+
border-top: 1px solid var(--sk-border);
134+
border-bottom: 1px solid var(--sk-border);
135135
}
136136

137137
.cm-panel {
@@ -179,7 +179,7 @@
179179
font: inherit;
180180
background: inherit;
181181
color: var(--sk-fg-1);
182-
border: 1px solid var(--sk-border-medium);
182+
border: 1px solid var(--sk-border);
183183
border-radius: var(--sk-border-radius);
184184
margin: 0;
185185
}

‎packages/repl/src/lib/Input/ComponentSelector.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@
199199
height: 1px;
200200
bottom: 0px;
201201
left: 0;
202-
background-color: var(--sk-bg-4);
202+
background-color: var(--sk-border);
203203
}
204204
}
205205

‎packages/repl/src/lib/Output/Output.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@
157157
height: 1px;
158158
bottom: 0px;
159159
left: 0;
160-
background-color: var(--sk-bg-4);
160+
background-color: var(--sk-border);
161161
}
162162
}
163163

‎packages/repl/src/lib/Output/console/ConsoleTable.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
margin: 8px;
9797
overflow: auto;
9898
max-height: 200px;
99-
border: 1px solid var(--sk-border-medium);
99+
border: 1px solid var(--sk-border);
100100
border-radius: 2px;
101101
overscroll-behavior: none;
102102
}

‎packages/repl/src/lib/Repl.svelte

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -234,10 +234,6 @@
234234
}
235235
}
236236
237-
.divider::after {
238-
background-color: var(--sk-bg-5);
239-
}
240-
241237
[data-pane='main'] > .divider::after {
242238
height: calc(100% - var(--sk-pane-controls-height));
243239
top: var(--sk-pane-controls-height);

‎packages/site-kit/src/lib/components/Checkbox.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
border-radius: 1em;
3333
top: 0;
3434
left: 0;
35-
background: var(--sk-bg-5);
35+
background: var(--sk-bg-4);
3636
box-sizing: content-box;
3737
}
3838

‎packages/site-kit/src/lib/components/ScreenToggle.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
justify-content: center;
4242
width: 100%;
4343
height: var(--sk-pane-controls-height);
44-
border-top: 1px solid var(--sk-border-medium);
44+
border-top: 1px solid var(--sk-border);
4545
font: var(--sk-font-ui-small);
4646
z-index: 2;
4747
}

‎packages/site-kit/src/lib/components/Text.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
.code-block {
114114
position: relative;
115115
background: var(--sk-bg-2);
116-
border: 1px solid var(--sk-border-medium);
116+
border: 1px solid var(--sk-border);
117117
border-radius: var(--sk-border-radius);
118118
overflow: hidden;
119119
margin: calc(0.5 * var(--sk-line-height-body)) 0;

‎packages/site-kit/src/lib/nav/MobileMenu.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@
332332
hr {
333333
margin: 0.5rem 0;
334334
height: 1px;
335-
background: var(--sk-border-dark);
335+
background: var(--sk-border);
336336
border: none;
337337
}
338338
}

‎packages/site-kit/src/lib/nav/Nav.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
248248
outline-offset: -2px;
249249
250250
&:hover {
251-
box-shadow: inset 0 -1px 0 0 var(--sk-bg-5);
251+
box-shadow: inset 0 -1px 0 0 var(--sk-border);
252252
}
253253
254254
&[aria-current='page'] {

‎packages/site-kit/src/lib/search/SearchBox.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
336336
border: none;
337337
flex-shrink: 0;
338338
color: var(--sk-fg-1);
339-
border-bottom: 1px solid var(--sk-border-dark);
339+
border-bottom: 1px solid var(--sk-border);
340340
background: inherit;
341341
342342
&::placeholder {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
padding-left: 1rem;
1515
border-radius: 0;
1616
box-shadow: none;
17-
border-top: 1px solid var(--sk-bg-4);
17+
border-top: 1px solid var(--sk-border);
1818
}
1919

2020
.ts-block-property-details {

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

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,18 @@
1515
--sk-fg-4: hsl(0, 0%, 45%);
1616
--sk-fg-accent: hsl(12, 93%, 43%);
1717

18+
/* Background colours */
19+
--sk-bg-1: hsl(0, 0%, 100%);
20+
--sk-bg-2: hsl(0, 0%, 100%);
21+
--sk-bg-3: hsl(0, 0%, 99%);
22+
--sk-bg-4: hsl(0, 0%, 95%);
23+
--sk-bg-accent: var(--sk-fg-accent);
24+
--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
25+
26+
/* Border color — use this for all borders, except 'active' borders (e.g. current nav) which use `--sk-fg-accent` */
27+
--sk-border: hsl(0, 0%, 92%);
28+
29+
/* Syntax highlighting — these come from `createCssVariablesTheme`, but are used elsewhere as well */
1830
--shiki-color-text: var(--sk-fg-2);
1931
--shiki-token-constant: var(--shiki-color-text);
2032
--shiki-token-string: hsl(30, 100%, 30%);
@@ -26,26 +38,9 @@
2638
--shiki-token-punctuation: var(--shiki-color-text);
2739
--shiki-token-link: var(--shiki-token-keyword);
2840

29-
/* Background colours */
30-
--sk-bg-1: hsl(0, 0%, 100%);
31-
--sk-bg-2: hsl(0, 0%, 100%);
32-
--sk-bg-3: hsl(0, 0%, 99%);
33-
--sk-bg-4: hsl(0, 0%, 95%);
34-
--sk-bg-5: hsl(0, 0%, 92%);
35-
--sk-bg-accent: var(--sk-fg-accent);
36-
--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
37-
38-
/* Border colors */
39-
--sk-border-light: hsl(0, 0%, 95%);
40-
--sk-border-medium: hsl(0, 0%, 92%);
41-
--sk-border-dark: hsl(0, 0%, 86%);
42-
4341
/* Misc */
4442
--sk-scrollbar: rgba(0, 0, 0, 0.3);
4543
--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
46-
47-
/* overrides */
48-
--shiki-color-background: var(--sk-bg-2);
4944
}
5045

5146
:root.dark {
@@ -60,29 +55,24 @@
6055
--sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%);
6156
--sk-fg-accent: hsl(12, 94%, 62%);
6257

63-
--shiki-color-text: hsl(45, 7%, 75%);
64-
--shiki-token-comment: hsl(0, 0%, 55%);
65-
--shiki-token-keyword: hsl(204, 88%, 65%);
66-
--shiki-token-function: hsl(19, 67%, 75%);
67-
--shiki-token-string: hsl(41, 37%, 68%);
68-
6958
/* Background colours */
7059
--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
7160
--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
7261
--sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%);
7362
--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
74-
--sk-bg-5: hsl(var(--sk-bg-hue), 15%, 25%);
7563
--sk-bg-accent: hsl(15, 100%, 35%);
7664

77-
/* Border colours */
78-
--sk-border-light: hsl(var(--sk-bg-hue), 15%, 32%);
79-
--sk-border-medium: var(--sk-bg-5);
80-
--sk-border-dark: var(--sk-bg-3);
65+
/* Border colour */
66+
--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
67+
68+
/* Syntax highlighting */
69+
--shiki-color-text: hsl(45, 7%, 75%);
70+
--shiki-token-comment: hsl(0, 0%, 55%);
71+
--shiki-token-keyword: hsl(204, 88%, 65%);
72+
--shiki-token-function: hsl(19, 67%, 75%);
73+
--shiki-token-string: hsl(41, 37%, 68%);
8174

8275
/* Misc */
8376
--sk-scrollbar: rgba(255, 255, 255, 0.3);
8477
--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
85-
86-
/* overrides */
87-
--shiki-color-background: var(--sk-bg-3);
8878
}

‎packages/site-kit/src/lib/styles/utils/buttons.css

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
:root {
2+
--sk-raised-border: var(--sk-border);
3+
--sk-raised-highlight: hsl(0, 0%, 95%);
4+
--sk-raised-shadow: hsl(0, 0%, 86%);
5+
26
/* raised buttons */
3-
--sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium)
4-
var(--sk-border-light);
5-
--sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
6-
var(--sk-border-medium);
7-
--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium)
8-
var(--sk-border-dark);
7+
--sk-raised-color: var(--sk-raised-highlight) var(--sk-raised-border) var(--sk-raised-border)
8+
var(--sk-raised-highlight);
9+
--sk-raised-hover-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow)
10+
var(--sk-raised-border);
11+
--sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-border) var(--sk-raised-border)
12+
var(--sk-raised-shadow);
913
--sk-raised-width: 1px 2px 2px 1px;
1014
--sk-raised-active-width: 2px 1px 1px 2px;
1115

1216
&.dark {
17+
--sk-raised-highlight: hsl(var(--sk-bg-hue), 15%, 32%);
18+
--sk-raised-shadow: var(--sk-bg-3);
19+
1320
/* raised buttons */
14-
--sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
15-
var(--sk-border-medium);
16-
--sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark)
17-
var(--sk-border-light);
18-
--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light)
19-
var(--sk-border-dark);
21+
--sk-raised-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow)
22+
var(--sk-raised-border);
23+
--sk-raised-hover-color: var(--sk-raised-highlight) var(--sk-raised-shadow)
24+
var(--sk-raised-shadow) var(--sk-raised-highlight);
25+
--sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-highlight)
26+
var(--sk-raised-highlight) var(--sk-raised-shadow);
2027
}
2128
}
2229

@@ -54,7 +61,7 @@
5461
}
5562

5663
&:disabled {
57-
border-color: var(--sk-border-medium);
64+
border-color: var(--sk-raised-border);
5865
border-width: 1px;
5966
}
6067
}

‎packages/site-kit/src/lib/styles/utils/dividers.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.divider {
22
z-index: 2;
33
&::after {
4-
background-color: var(--sk-bg-5) !important;
4+
background-color: var(--sk-border) !important;
55
}
66
}

0 commit comments

Comments
 (0)