Skip to content

Commit 8d76120

Browse files
Rich-HarrisRich-Harris
authored
more css tweaks (#765)
* more css tweaks * tweak background colours * reduce fg saturation * bump --sk-fg-4 brightness to meet accessibility guidelines * use fg-2 for on-this-page * darker sidebar
1 parent bd6bcbc commit 8d76120

File tree

17 files changed

+60
-58
lines changed

17 files changed

+60
-58
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
align-items: center;
1717
justify-content: space-between;
1818
padding: 0.6rem var(--sk-page-padding-side);
19-
background-color: var(--sk-bg-2);
19+
background-color: var(--sk-bg-1);
2020
white-space: nowrap;
2121
flex: 0;
2222
gap: 1rem;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646

4747
<style>
4848
figcaption {
49-
font: var(--sk-font-body-small);
49+
font: var(--sk-font-ui-medium);
5050
}
5151
5252
.home :global {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@
2727
figcaption {
2828
position: relative;
2929
top: max(-2vw, calc(-0.02 * (120rem + 2 * var(--sk-page-padding-side))));
30-
font: var(--sk-font-body-small);
30+
font: var(--sk-font-ui-medium);
3131
margin: 0 auto;
3232
padding: 0 var(--sk-page-padding-side);
33-
color: var(--sk-fg-4);
33+
color: var(--sk-fg-3);
3434
text-align: center;
3535
3636
a {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
top: 0;
130130
font: var(--sk-font-ui-medium);
131131
text-transform: uppercase;
132-
color: var(--sk-fg-4);
132+
color: var(--sk-fg-3);
133133
}
134134
}
135135

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,6 @@
4545
img {
4646
max-width: 100%;
4747
}
48-
49-
figcaption {
50-
color: var(--sk-fg-4);
51-
font: var(--sk-font-body-small);
52-
}
5348
}
5449
5550
video {
@@ -65,7 +60,7 @@
6560
font: var(--sk-font-body-small);
6661
6762
p {
68-
color: var(--sk-fg-4);
63+
color: inherit;
6964
font: inherit;
7065
}
7166
}

‎apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,12 @@
4040
}
4141
4242
.toc-container {
43-
background: var(--sk-bg-3);
43+
background: var(--sk-bg-2);
4444
display: none;
45+
46+
:root.dark & {
47+
background: var(--sk-bg-0);
48+
}
4549
}
4650
4751
@media (min-width: 832px) {

‎apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
}
7575
7676
a {
77-
color: var(--sk-fg-3);
77+
color: var(--sk-fg-2);
7878
}
7979
}
8080

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@
191191
height: 80%;
192192
font: var(--sk-font-mono);
193193
padding: 1rem;
194-
border-top: 1px solid var(--sk-fg-4);
194+
border-top: 1px solid var(--sk-border);
195195
background: rgba(255, 255, 255, 0.5);
196196
transform: translate(0, 100%);
197197
-webkit-transform: translate3d(0, 100%, 0.01);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
font: var(--sk-font-mono);
7777
padding: 1rem;
7878
background: var(--sk-bg-1);
79-
border-top: 1px solid var(--sk-fg-4);
79+
border-top: 1px solid var(--sk-border);
8080
transform: translate(0, 100%);
8181
-webkit-transform: translate3d(0, 100%, 0.01);
8282
transition: transform 0.3s;

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

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,14 @@
2727
<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
2828
<label class="option">
2929
<span class="key">dev:</span>
30-
<Checkbox
31-
checked={workspace.compiler_options.dev!}
32-
onchange={(dev) => {
33-
workspace.update_compiler_options({ dev });
34-
}}
35-
/>
30+
<span style="font-size: 1.2rem">
31+
<Checkbox
32+
checked={workspace.compiler_options.dev!}
33+
onchange={(dev) => {
34+
workspace.update_compiler_options({ dev });
35+
}}
36+
/>
37+
</span>
3638
<span class="boolean">{workspace.compiler_options.dev}</span>
3739
</label>
3840
});
@@ -94,31 +96,27 @@
9496
9597
input[type='radio'] + label:before {
9698
content: '';
97-
background: #eee;
9899
display: block;
99100
box-sizing: border-box;
100101
float: left;
101-
width: 15px;
102-
height: 15px;
102+
width: 1.6rem;
103+
height: 1.6rem;
103104
margin-left: -21px;
104105
margin-top: 4px;
105106
/* vertical-align: top; */
106107
cursor: pointer;
107108
text-align: center;
108-
transition: box-shadow 0.1s ease-out;
109-
}
110-
111-
input[type='radio'] + label:before {
109+
transition: box-shadow 0.05s ease-out;
112110
background-color: var(--sk-fg-4);
113111
border-radius: 100%;
114-
box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.95);
115-
border: 1px solid var(--sk-fg-4);
112+
box-shadow: inset 0 0 0 0.5em var(--sk-bg-2);
113+
border: 1px solid var(--sk-border);
116114
}
117115
118116
input[type='radio']:checked + label:before {
119117
background-color: var(--sk-fg-accent);
120-
box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.95);
121-
border: 1px solid var(--sk-fg-4);
118+
box-shadow: inset 0 0 0 0.15em var(--sk-bg-2);
119+
border: 1px solid var(--sk-fg-accent);
122120
transition: box-shadow 0.2s ease-out;
123121
}
124122
</style>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,6 @@
166166
<div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
167167
<div class="viewport" class:output={show_output}>
168168
<SplitPane
169-
--color="var(--sk-fg-4)"
170169
id="main"
171170
type={orientation === 'rows' ? 'vertical' : 'horizontal'}
172171
pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
top: 2px;
5050
left: 2px;
5151
border-radius: 1em;
52-
background: white;
52+
background: var(--sk-bg-1);
5353
box-shadow:
5454
0 0px 1px rgba(0, 0, 0, 0.4),
5555
0 4px 2px rgba(0, 0, 0, 0.1);

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -512,14 +512,10 @@
512512
display: flex;
513513
align-items: center;
514514
height: 3rem;
515-
color: var(--sk-fg-4);
515+
color: var(--sk-fg-3);
516516
font: var(--sk-font-body-small);
517517
user-select: none;
518518
519-
&:hover {
520-
color: var(--sk-fg-3);
521-
}
522-
523519
.legacy &::after {
524520
position: absolute;
525521
display: flex;
@@ -550,5 +546,10 @@
550546
margin-bottom: 0;
551547
}
552548
}
549+
550+
figcaption {
551+
font: var(--sk-font-ui-medium);
552+
color: var(--sk-fg-3);
553+
}
553554
}
554555
</style>

‎packages/site-kit/src/lib/docs/DocsContents.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
nav {
5959
top: 0;
6060
left: 0;
61-
color: var(--sk-fg-3);
61+
color: var(--sk-fg-2);
6262
position: relative;
6363
}
6464

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
185185
height: var(--sk-nav-height);
186186
margin: 0 auto;
187187
padding: 0 var(--sk-page-padding-side);
188-
background-color: var(--sk-bg-2);
188+
background-color: var(--sk-bg-1);
189189
font-family: var(--sk-font-family-body);
190190
user-select: none;
191191
isolation: isolate;
@@ -200,6 +200,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
200200
height: 4px;
201201
background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
202202
}
203+
204+
:root.dark & {
205+
background-color: var(--sk-bg-3);
206+
}
203207
}
204208
205209
a {

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99
color-scheme: light;
1010

1111
/* Foreground colours */
12-
--sk-fg-1: hsl(0, 0%, 5%); /* for headings, and (very sparingly) as a highlight colour */
13-
--sk-fg-2: hsl(0, 0%, 12%); /* most text should be this colour */
14-
--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) and icons */
15-
--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
12+
--sk-fg-1: hsl(0, 0%, 8%); /* for headings, and (very sparingly) as a highlight colour */
13+
--sk-fg-2: hsl(0, 0%, 15%); /* most text should be this colour */
14+
--sk-fg-3: hsl(0, 0%, 40%); /* secondary text (e.g. figcaptions) and icons */
15+
--sk-fg-4: hsl(0, 0%, 50%); /* faded text (disabled buttons, comments etc) */
1616
--sk-fg-accent: hsl(12, 93%, 43%);
1717

1818
/* Background colours */
1919
--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%);
20+
--sk-bg-2: hsl(0, 0%, 99.3%);
21+
--sk-bg-3: hsl(0, 0%, 98.2%);
22+
--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
2323
--sk-bg-accent: var(--sk-fg-accent);
2424
--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
2525

@@ -49,21 +49,22 @@
4949
--sk-bg-hue: 220;
5050

5151
/* Foreground colours */
52-
--sk-fg-1: hsl(var(--sk-bg-hue), 10%, 90%);
53-
--sk-fg-2: hsl(var(--sk-bg-hue), 10%, 80%);
54-
--sk-fg-3: hsl(var(--sk-bg-hue), 10%, 65%);
55-
--sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%);
52+
--sk-fg-1: hsl(var(--sk-bg-hue), 2%, 90%);
53+
--sk-fg-2: hsl(var(--sk-bg-hue), 3%, 80%);
54+
--sk-fg-3: hsl(var(--sk-bg-hue), 5%, 65%);
55+
--sk-fg-4: hsl(var(--sk-bg-hue), 5%, 55%);
5656
--sk-fg-accent: hsl(12, 94%, 62%);
5757

5858
/* Background colours */
59-
--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
60-
--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
61-
--sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%);
62-
--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
59+
--sk-bg-0: hsl(var(--sk-bg-hue), 8%, 10%); /* docs sidebar (dark mode only) */
60+
--sk-bg-1: hsl(var(--sk-bg-hue), 10%, 12%);
61+
--sk-bg-2: hsl(var(--sk-bg-hue), 12%, 14%);
62+
--sk-bg-3: hsl(var(--sk-bg-hue), 14%, 16%);
63+
--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 21%);
6364
--sk-bg-accent: hsl(15, 100%, 35%);
6465

6566
/* Border colour */
66-
--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
67+
--sk-border: hsl(var(--sk-bg-hue), 15%, 22%);
6768

6869
/* Syntax highlighting */
6970
--shiki-color-text: hsl(45, 7%, 75%);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
2626
--sk-font-body: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
2727
var(--sk-font-family-body);
28-
--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body)
28+
--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body-small)
2929
var(--sk-font-family-body);
3030
--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
3131
--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);

0 commit comments

Comments
 (0)