Skip to content

Commit 12fe24b

Browse files
dummdidummRich-Harris
dummdidumm
and
Rich-Harris
authored
[feat] styles update (sveltejs#116)
Co-authored-by: Rich Harris <hello@rich-harris.dev>
1 parent 5700d33 commit 12fe24b

File tree

43 files changed

+219
-305
lines changed

Some content is hidden

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

43 files changed

+219
-305
lines changed

‎content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte

+2-3
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,15 @@
88
</script>
99

1010
<p>
11-
The <code>{name}</code> package is {speed} fast.
12-
Download version {version} from
11+
The <code>{name}</code> package is {speed} fast. Download version {version}
12+
from
1313
<a {href}>npm</a>
1414
and <a href={website}>learn more here</a>
1515
</p>
1616

1717
<style>
1818
code {
1919
font-family: Menlo;
20-
background: #eee;
2120
padding: 0.1em 0.2em;
2221
border-radius: 0.2em;
2322
}

‎content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-a/src/lib/Thing.svelte

+6
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,10 @@
3030
border-radius: 0.2em;
3131
background-color: #ffdfd3;
3232
}
33+
34+
@media (prefers-color-scheme: dark) {
35+
span {
36+
background-color: #4f352b;
37+
}
38+
}
3339
</style>

‎content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte

+6
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,10 @@
2929
border-radius: 0.2em;
3030
background-color: #ffdfd3;
3131
}
32+
33+
@media (prefers-color-scheme: dark) {
34+
span {
35+
background-color: #4f352b;
36+
}
37+
}
3238
</style>

‎content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
async function getRandomNumber() {
33
const res = await fetch(
4-
`tutorial/random-number`
4+
`https://svelte.dev/tutorial/random-number`
55
);
66
const text = await res.text();
77
@@ -19,9 +19,7 @@
1919
}
2020
</script>
2121

22-
<button on:click={handleClick}>
23-
generate random number
24-
</button>
22+
<button on:click={handleClick}> generate random number </button>
2523

2624
<!-- replace this element -->
2725
<p>{promise}</p>

‎content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
async function getRandomNumber() {
33
const res = await fetch(
4-
`tutorial/random-number`
4+
`https://svelte.dev/tutorial/random-number`
55
);
66
const text = await res.text();
77
@@ -19,9 +19,7 @@
1919
}
2020
</script>
2121

22-
<button on:click={handleClick}>
23-
generate random number
24-
</button>
22+
<button on:click={handleClick}> generate random number </button>
2523

2624
{#await promise}
2725
<p>...waiting</p>

‎content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ You can customise the fallback error page. Create a `src/error.html` file:
2222
<head>
2323
<meta charset="utf-8" />
2424
<title>%sveltekit.error.message%</title>
25+
<style>
26+
body {
27+
color: #ff531a;
28+
}
29+
</style>
2530
</head>
2631
<body>
2732
<h1>Game over</h1>

‎content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/app-b/src/error.html

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>%sveltekit.error.message%</title>
6+
<style>
7+
body {
8+
color: #ff531a;
9+
}
10+
</style>
611
</head>
712
<body>
813
<h1>Game over</h1>

‎content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-a/src/lib/Project.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@
5353
}
5454
5555
p {
56-
color: #777;
56+
opacity: 0.9;
5757
margin: 0;
5858
}
5959
6060
.discussion {
61-
background-color: #eee;
61+
background-color: rgba(82, 81, 75, 0.1);
6262
border-top: 1px #ccc solid;
6363
}
6464
</style>

‎content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-b/src/lib/Project.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@
5555
}
5656
5757
p {
58-
color: #777;
58+
opacity: 0.9;
5959
margin: 0;
6060
}
6161
6262
.discussion {
63-
background-color: #eee;
63+
background-color: rgba(82, 81, 75, 0.1);
6464
border-top: 1px #ccc solid;
6565
}
6666
</style>

‎content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-a/src/lib/App.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
div {
1717
padding: 1em;
1818
margin: 0 0 1em 0;
19-
background-color: #eee;
19+
border: 1px solid #ff3e00;
2020
}
2121
2222
.active {

‎content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-b/src/lib/App.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
div {
3737
padding: 1em;
3838
margin: 0 0 1em 0;
39-
background-color: #eee;
39+
border: 1px solid #ff3e00;
4040
}
4141
4242
.active {

‎content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/app-a/src/routes/+layout.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
content: attr(data-name) ' layout';
2424
left: 1em;
2525
top: -1em;
26-
background-color: white;
26+
background-color: #ff531a;
27+
color: white;
2728
padding: 0.5em;
2829
line-height: 1;
2930
}

‎content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/app-a/src/routes/CoolComponent.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
<style>
1010
marquee {
1111
font-family: 'Comic Sans MS';
12-
color: purple;
12+
color: #e60073;
1313
}
1414
</style>

‎content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: $env/static/public
2+
title: $env/dynamic/public
33
---
44

55
As with [private environment variables](/tutorial/env-static-private), it's preferable to use static values if possible, but if necessary we can use dynamic values instead:

‎content/tutorial/common/src/app.html

+20
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,26 @@
5252
.error {
5353
color: red;
5454
}
55+
56+
code {
57+
background: hsl(206, 20%, 80%);
58+
}
59+
60+
@media (prefers-color-scheme: dark) {
61+
body {
62+
background: hsl(0, 0%, 18%);
63+
color: hsl(0, 0%, 90%);
64+
}
65+
code {
66+
background: hsl(0, 0%, 40%);
67+
}
68+
a {
69+
color: hsl(204, 100%, 63%);
70+
}
71+
nav {
72+
background-color: #1a0d01;
73+
}
74+
}
5575
</style>
5676
</head>
5777
<body>

‎content/tutorial/common/static/svelte-logo-mask.svg

+1
Loading

‎content/tutorial/common/static/tutorial/dark-theme.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
background-color: #333;
3+
color: whitesmoke;
4+
transition: all 0.5s;
5+
}

‎content/tutorial/common/static/tutorial/icons/folder-open.svg

+1
Loading

‎content/tutorial/common/static/tutorial/icons/folder.svg

+1
Loading

‎content/tutorial/common/static/tutorial/icons/gif.svg

+1
Loading

‎content/tutorial/common/static/tutorial/icons/md.svg

+1
Loading

‎content/tutorial/common/static/tutorial/icons/xlsx.svg

+1
Loading

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@sveltejs/adapter-auto": "1.0.0-next.90",
1515
"@sveltejs/adapter-vercel": "1.0.0-next.85",
1616
"@sveltejs/kit": "next",
17-
"@sveltejs/site-kit": "^2.1.2",
17+
"@sveltejs/site-kit": "^3.0.2",
1818
"@types/diff": "^5.0.2",
1919
"@types/marked": "^4.0.8",
2020
"@types/prismjs": "^1.26.0",

‎pnpm-lock.yaml

+7-13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" class="theme-default typo-default">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />

‎src/lib/components/Modal.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@
6666
transform: translate(-50%, -50%);
6767
width: calc(100vw - 2rem);
6868
max-width: 56rem;
69-
background: white;
69+
background: var(--sk-back-2);
70+
color: var(--sk-text-2);
7071
padding: 2rem;
7172
border: none;
7273
border-radius: 0.5rem;

‎src/lib/components/PreloadingIndicator.svelte

-67
This file was deleted.

‎src/lib/components/SplitPane.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@
194194
top: 0;
195195
width: 100%;
196196
height: 100%;
197-
background: rgba(255, 255, 255, 0.01);
197+
background: rgba(255, 255, 255, 0.0001);
198198
}
199199
200200
.divider {

‎src/lib/components/filetree/ContextMenu.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
}
6565
6666
button {
67-
color: var(--text);
67+
color: var(--sk-text-2);
6868
width: 100%;
6969
text-align: left;
7070
border: 0px;

0 commit comments

Comments
 (0)