Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overhaul tokens #735

Merged
merged 12 commits into from
Oct 31, 2024
Merged

Overhaul tokens #735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ae915f0
get rid of some unused junk
Rich-Harris Oct 31, 2024
cf9bc96
modularise tokens
Rich-Harris Oct 31, 2024
0d4d2a8
unused
Rich-Harris Oct 31, 2024
cae217d
tidy up
Rich-Harris Oct 31, 2024
c48a0e1
tidy up
Rich-Harris Oct 31, 2024
7d59eb7
group colours by purpose
Rich-Harris Oct 31, 2024
e04d548
organise tokens
Rich-Harris Oct 31, 2024
8da97db
consolidate
Rich-Harris Oct 31, 2024
8051e39
revert
Rich-Harris Oct 31, 2024
0cdc719
separate background colors from borders
Rich-Harris Oct 31, 2024
44f06ea
more border stuff
Rich-Harris Oct 31, 2024
b67932a
move --sk-raised tokens into buttons.css
Rich-Harris Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/svelte.dev/src/lib/components/Modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@
transform: translate(-50%, -50%);
width: calc(100vw - 2rem);
max-width: 56rem;
background: var(--sk-back-2);
color: var(--sk-text-2);
background: var(--sk-bg-2);
color: var(--sk-fg-2);
padding: 2rem;
border: none;
border-radius: 0.5rem;
Expand Down
4 changes: 2 additions & 2 deletions apps/svelte.dev/src/lib/components/PageControls.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

.controls {
max-width: calc(var(--sk-page-content-width) + 1rem);
border-top: 1px solid var(--sk-back-4);
border-top: 1px solid var(--sk-border-medium);
padding: 1rem 0 0 0;
margin: 1rem 0 0 0;
text-wrap: balance;
Expand All @@ -83,7 +83,7 @@
span {
font: var(--sk-font-ui-medium);
text-transform: uppercase;
color: var(--sk-text-3);
color: var(--sk-fg-3);

&.faded {
opacity: 0.4;
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
left: 0;
top: 0;
height: 100%;
background-color: var(--sk-theme-1);
background-color: var(--sk-fg-accent);
transition: width 0.4s;
}

Expand Down
4 changes: 2 additions & 2 deletions apps/svelte.dev/src/lib/components/SecondaryNav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
align-items: center;
justify-content: space-between;
padding: 0.6rem var(--sk-page-padding-side);
background-color: var(--sk-back-2);
color: var(--sk-text-1);
background-color: var(--sk-bg-2);
color: var(--sk-fg-1);
white-space: nowrap;
flex: 0;
gap: 1rem;
Expand Down
4 changes: 2 additions & 2 deletions apps/svelte.dev/src/lib/components/SelectIcon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
position: relative;

&:has(select:focus-visible) .raised.icon {
outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6);
outline: 2px solid var(--sk-fg-accent);
border-radius: var(--sk-border-radius);
}

Expand All @@ -47,7 +47,7 @@

.icon {
position: relative;
color: var(--sk-text-3);
color: var(--sk-fg-3);
line-height: 1;
background-size: 1.8rem;
z-index: 999;
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import type { Adapter } from '$lib/tutorial';
import type { Item, File } from 'editor';

const converter = new AnsiToHtml({
fg: 'var(--sk-text-3)'
fg: 'var(--sk-fg-3)'
});

/** Web container singleton */
Expand Down
16 changes: 8 additions & 8 deletions apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
padding: 0 0 0 3.2rem;
position: relative;
margin: 1rem 0;
color: var(--sk-text-2);
color: var(--sk-fg-2);
font: var(--sk-font-ui-medium);

.avatar {
Expand All @@ -181,7 +181,7 @@
font: var(--sk-font-ui-medium);
z-index: 2;
justify-content: space-between;
outline: 1rem solid var(--sk-back-1);
outline: 1rem solid var(--sk-bg-1);
}

.controls::after {
Expand All @@ -190,7 +190,7 @@
width: 100%;
bottom: -2rem;
height: 2rem;
background: linear-gradient(to bottom, var(--sk-back-1) 0%, var(--sk-back-1) 50%, transparent);
background: linear-gradient(to bottom, var(--sk-bg-1) 0%, var(--sk-bg-1) 50%, transparent);
}

.controls form {
Expand All @@ -209,7 +209,7 @@
padding: 0.5rem 1rem;
line-height: 1;
display: flex;
border: 1px solid var(--sk-back-5);
border: 1px solid var(--sk-border-medium);
border-radius: var(--sk-border-radius);
z-index: 2;
font: var(--sk-font-ui-large);
Expand Down Expand Up @@ -241,15 +241,15 @@
}

h2 {
color: var(--sk-text-2);
color: var(--sk-fg-2);
font: var(--sk-font-ui-medium);
overflow: hidden;
text-overflow: ellipsis;
}

li a {
display: block;
background: var(--sk-back-3);
background: var(--sk-bg-3);
padding: 1rem 3rem 1rem 1rem;
height: 100%;
line-height: 1;
Expand All @@ -259,7 +259,7 @@

li span {
font: var(--sk-font-ui-small);
color: var(--sk-text-3);
color: var(--sk-fg-3);
}

li label {
Expand All @@ -275,7 +275,7 @@
}

ul:not(.selecting) li:hover a {
background-color: var(--sk-back-4);
background-color: var(--sk-bg-4);
}

ul:not(.selecting) li:hover input {
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@
height: calc(100% - var(--sk-nav-height) - var(--sk-banner-height));
height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-height));
overflow: hidden;
background-color: var(--sk-back-1);
background-color: var(--sk-bg-1);
box-sizing: border-box;
display: flex;
flex-direction: column;
Expand Down
6 changes: 3 additions & 3 deletions apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@

.icon {
position: relative;
color: var(--sk-text-3);
color: var(--sk-fg-3);
line-height: 1;
background-size: 1.8rem;
z-index: 999;
Expand Down Expand Up @@ -303,7 +303,7 @@

input {
background: transparent;
border: 1px solid var(--sk-back-4);
border: 1px solid var(--sk-border-medium);
border-radius: var(--sk-border-radius);
color: currentColor;
width: 0;
Expand All @@ -315,7 +315,7 @@

.badge {
position: absolute;
background: var(--sk-theme-1);
background: var(--sk-fg-accent);
border-radius: 50%;
width: 1rem;
height: 1rem;
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: var(--sk-back-1);
background-color: var(--sk-bg-1);
overflow: hidden;
box-sizing: border-box;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/_home/Community.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
font: var(--sk-font-body-small);
margin: 0 auto;
padding: 0 var(--sk-page-padding-side);
color: var(--sk-text-4);
color: var(--sk-fg-4);
text-align: center;

a {
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/_home/Companies.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
text-align: center;
justify-self: center;
z-index: 2;
filter: drop-shadow(0 0 1rem var(--sk-back-1)) drop-shadow(0 0 1rem var(--sk-back-1));
filter: drop-shadow(0 0 1rem var(--sk-bg-1)) drop-shadow(0 0 1rem var(--sk-bg-1));
}

.wing {
Expand Down
6 changes: 3 additions & 3 deletions apps/svelte.dev/src/routes/_home/Hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,12 @@
height: 200%;
left: 0;
top: -8rem; /* prevent cutoff on overscroll */
background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
}

:root.dark &::before {
background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
radial-gradient(
64.14% 72.25% at 47.58% 31.75%,
hsl(209deg 6% 47% / 52%) 0%,
Expand Down Expand Up @@ -104,7 +104,7 @@
.cta {
font: var(--sk-font-ui-medium);
font-size: 2rem;
color: var(--sk-theme-1);
color: var(--sk-fg-accent);
text-transform: uppercase;
display: flex;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions apps/svelte.dev/src/routes/_home/Testimonials.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,10 +166,10 @@
padding: 0.25em 0.5em;
line-height: 1;
text-transform: uppercase;
background: var(--sk-text-2);
background: var(--sk-fg-2);
border-radius: var(--sk-border-radius);
font: var(--sk-font-ui-small);
color: var(--sk-back-2);
color: var(--sk-bg-2);

&::after {
content: 'adj.';
Expand Down
6 changes: 3 additions & 3 deletions apps/svelte.dev/src/routes/_home/Video.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@
}

video:focus {
outline: 1px solid var(--sk-theme-1);
outline: 1px solid var(--sk-fg-accent);
}

video::cue {
Expand All @@ -190,7 +190,7 @@
left: 0;
bottom: 0;
height: 0.5rem;
background: var(--sk-theme-1);
background: var(--sk-fg-accent);
transition: height 0.2s;
}

Expand Down Expand Up @@ -242,7 +242,7 @@
}

.video-player input:focus-visible ~ img {
outline: 2px solid var(--sk-theme-1);
outline: 2px solid var(--sk-fg-accent);
outline-offset: 2px;
}
</style>
12 changes: 6 additions & 6 deletions apps/svelte.dev/src/routes/blog/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@

h2 {
display: inline-block;
color: var(--sk-text-2);
color: var(--sk-fg-2);
font: var(--sk-font-h3);
}

Expand All @@ -88,14 +88,14 @@

h2 {
font: var(--sk-font-h1);
color: var(--sk-text-2);
color: var(--sk-fg-2);
}
}

a {
display: block;
text-decoration: none;
color: var(--sk-text-2);
color: var(--sk-fg-2);

&:hover h2 {
text-decoration: underline;
Expand All @@ -104,7 +104,7 @@

p {
font: var(--sk-font-body-small);
color: var(--sk-text-3);
color: var(--sk-fg-3);
margin: 0 0 0.5em 0;
}
}
Expand All @@ -130,7 +130,7 @@
top: 0;
font: var(--sk-font-ui-medium);
text-transform: uppercase;
color: var(--sk-text-4);
color: var(--sk-fg-4);
}
}

Expand Down Expand Up @@ -164,7 +164,7 @@
a {
display: block;
font: var(--sk-font-body);
color: var(--sk-text-2);
color: var(--sk-fg-2);
}
}
}
Expand Down
14 changes: 7 additions & 7 deletions apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
}

figcaption {
color: var(--sk-text-4);
color: var(--sk-fg-4);
font: var(--sk-font-body-small);
}
}
Expand All @@ -61,11 +61,11 @@
margin: 0 0 1em 1em;
width: 16rem;
z-index: 2;
color: var(--sk-text-4);
color: var(--sk-fg-4);
font: var(--sk-font-body-small);

p {
color: var(--sk-text-4);
color: var(--sk-fg-4);
font: inherit;
}
}
Expand All @@ -87,7 +87,7 @@
position: relative;
border: none;
height: 1px;
background: radial-gradient(circle at center, var(--sk-text-4), transparent);
background: radial-gradient(circle at center, var(--sk-fg-4), transparent);
margin: 7rem 0;
overflow: visible;

Expand All @@ -99,8 +99,8 @@
left: 50%;
top: 2px;
transform: rotate(45deg) translate(-50%, -50%);
background: var(--sk-back-1);
border: 1px solid var(--sk-text-4);
background: var(--sk-bg-1);
border: 1px solid var(--sk-fg-4);
}
}
}
Expand All @@ -112,7 +112,7 @@

.standfirst {
font: var(--sk-font-body-small);
color: var(--sk-text-3);
color: var(--sk-fg-3);
margin: 0 0 1em 0;
}

Expand Down
6 changes: 3 additions & 3 deletions apps/svelte.dev/src/routes/docs/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,14 +111,14 @@

.options a {
display: block;
color: var(--sk-text-2);
color: var(--sk-fg-2);
margin: 1em -1.6rem;
padding: 1.6rem;
background-color: var(--sk-back-1);
background-color: var(--sk-bg-1);
border-radius: var(--sk-border-radius);

&:hover {
background-color: var(--sk-back-2);
background-color: var(--sk-bg-2);
filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
text-decoration: none;
-webkit-transform: var(--safari-fix);
Expand Down
Loading
Loading