Skip to content

more css tweaks #765

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

Merged
merged 6 commits into from
Nov 4, 2024
Merged

more css tweaks #765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8185d74
more css tweaks
Rich-Harris Nov 2, 2024
ce128dc
tweak background colours
Rich-Harris Nov 2, 2024
72251d9
reduce fg saturation
Rich-Harris Nov 2, 2024
05e80a0
bump --sk-fg-4 brightness to meet accessibility guidelines
Rich-Harris Nov 2, 2024
1065eb7
use fg-2 for on-this-page
Rich-Harris Nov 2, 2024
d25bd08
darker sidebar
Rich-Harris Nov 2, 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
2 changes: 1 addition & 1 deletion 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,7 +16,7 @@
align-items: center;
justify-content: space-between;
padding: 0.6rem var(--sk-page-padding-side);
background-color: var(--sk-bg-2);
background-color: var(--sk-bg-1);
white-space: nowrap;
flex: 0;
gap: 1rem;
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

<style>
figcaption {
font: var(--sk-font-body-small);
font: var(--sk-font-ui-medium);
}

.home :global {
Expand Down
4 changes: 2 additions & 2 deletions 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 @@ -27,10 +27,10 @@
figcaption {
position: relative;
top: max(-2vw, calc(-0.02 * (120rem + 2 * var(--sk-page-padding-side))));
font: var(--sk-font-body-small);
font: var(--sk-font-ui-medium);
margin: 0 auto;
padding: 0 var(--sk-page-padding-side);
color: var(--sk-fg-4);
color: var(--sk-fg-3);
text-align: center;

a {
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -129,7 +129,7 @@
top: 0;
font: var(--sk-font-ui-medium);
text-transform: uppercase;
color: var(--sk-fg-4);
color: var(--sk-fg-3);
}
}

Expand Down
7 changes: 1 addition & 6 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 @@ -45,11 +45,6 @@
img {
max-width: 100%;
}

figcaption {
color: var(--sk-fg-4);
font: var(--sk-font-body-small);
}
}

video {
Expand All @@ -65,7 +60,7 @@
font: var(--sk-font-body-small);

p {
color: var(--sk-fg-4);
color: inherit;
font: inherit;
}
}
Expand Down
6 changes: 5 additions & 1 deletion apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,12 @@
}

.toc-container {
background: var(--sk-bg-3);
background: var(--sk-bg-2);
display: none;

:root.dark & {
background: var(--sk-bg-0);
}
}

@media (min-width: 832px) {
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
}

a {
color: var(--sk-fg-3);
color: var(--sk-fg-2);
}
}

Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@
height: 80%;
font: var(--sk-font-mono);
padding: 1rem;
border-top: 1px solid var(--sk-fg-4);
border-top: 1px solid var(--sk-border);
background: rgba(255, 255, 255, 0.5);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0.01);
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
font: var(--sk-font-mono);
padding: 1rem;
background: var(--sk-bg-1);
border-top: 1px solid var(--sk-fg-4);
border-top: 1px solid var(--sk-border);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0.01);
transition: transform 0.3s;
Expand Down
32 changes: 15 additions & 17 deletions packages/repl/src/lib/Output/CompilerOptions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,14 @@
<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
<label class="option">
<span class="key">dev:</span>
<Checkbox
checked={workspace.compiler_options.dev!}
onchange={(dev) => {
workspace.update_compiler_options({ dev });
}}
/>
<span style="font-size: 1.2rem">
<Checkbox
checked={workspace.compiler_options.dev!}
onchange={(dev) => {
workspace.update_compiler_options({ dev });
}}
/>
</span>
<span class="boolean">{workspace.compiler_options.dev}</span>
</label>
});
Expand Down Expand Up @@ -94,31 +96,27 @@

input[type='radio'] + label:before {
content: '';
background: #eee;
display: block;
box-sizing: border-box;
float: left;
width: 15px;
height: 15px;
width: 1.6rem;
height: 1.6rem;
margin-left: -21px;
margin-top: 4px;
/* vertical-align: top; */
cursor: pointer;
text-align: center;
transition: box-shadow 0.1s ease-out;
}

input[type='radio'] + label:before {
transition: box-shadow 0.05s ease-out;
background-color: var(--sk-fg-4);
border-radius: 100%;
box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.95);
border: 1px solid var(--sk-fg-4);
box-shadow: inset 0 0 0 0.5em var(--sk-bg-2);
border: 1px solid var(--sk-border);
}

input[type='radio']:checked + label:before {
background-color: var(--sk-fg-accent);
box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.95);
border: 1px solid var(--sk-fg-4);
box-shadow: inset 0 0 0 0.15em var(--sk-bg-2);
border: 1px solid var(--sk-fg-accent);
transition: box-shadow 0.2s ease-out;
}
</style>
1 change: 0 additions & 1 deletion packages/repl/src/lib/Repl.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,6 @@
<div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
<div class="viewport" class:output={show_output}>
<SplitPane
--color="var(--sk-fg-4)"
id="main"
type={orientation === 'rows' ? 'vertical' : 'horizontal'}
pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"
Expand Down
2 changes: 1 addition & 1 deletion packages/site-kit/src/lib/components/Checkbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
top: 2px;
left: 2px;
border-radius: 1em;
background: white;
background: var(--sk-bg-1);
box-shadow:
0 0px 1px rgba(0, 0, 0, 0.4),
0 4px 2px rgba(0, 0, 0, 0.1);
Expand Down
11 changes: 6 additions & 5 deletions packages/site-kit/src/lib/components/Text.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,14 +512,10 @@
display: flex;
align-items: center;
height: 3rem;
color: var(--sk-fg-4);
color: var(--sk-fg-3);
font: var(--sk-font-body-small);
user-select: none;

&:hover {
color: var(--sk-fg-3);
}

.legacy &::after {
position: absolute;
display: flex;
Expand Down Expand Up @@ -550,5 +546,10 @@
margin-bottom: 0;
}
}

figcaption {
font: var(--sk-font-ui-medium);
color: var(--sk-fg-3);
}
}
</style>
2 changes: 1 addition & 1 deletion packages/site-kit/src/lib/docs/DocsContents.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
nav {
top: 0;
left: 0;
color: var(--sk-fg-3);
color: var(--sk-fg-2);
position: relative;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/site-kit/src/lib/nav/Nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
height: var(--sk-nav-height);
margin: 0 auto;
padding: 0 var(--sk-page-padding-side);
background-color: var(--sk-bg-2);
background-color: var(--sk-bg-1);
font-family: var(--sk-font-family-body);
user-select: none;
isolation: isolate;
Expand All @@ -203,6 +203,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
height: 4px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
}

:root.dark & {
background-color: var(--sk-bg-3);
}
}

a {
Expand Down
33 changes: 17 additions & 16 deletions packages/site-kit/src/lib/styles/tokens/colours.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
color-scheme: light;

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

/* Background colours */
--sk-bg-1: hsl(0, 0%, 100%);
--sk-bg-2: hsl(0, 0%, 100%);
--sk-bg-3: hsl(0, 0%, 99%);
--sk-bg-4: hsl(0, 0%, 95%);
--sk-bg-2: hsl(0, 0%, 99.3%);
--sk-bg-3: hsl(0, 0%, 98.2%);
--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
--sk-bg-accent: var(--sk-fg-accent);
--sk-bg-selection: hsla(204, 100%, 63%, 0.3);

Expand Down Expand Up @@ -49,21 +49,22 @@
--sk-bg-hue: 220;

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

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

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

/* Syntax highlighting */
--shiki-color-text: hsl(45, 7%, 75%);
Expand Down
2 changes: 1 addition & 1 deletion packages/site-kit/src/lib/styles/tokens/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
--sk-font-body: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
var(--sk-font-family-body);
--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body)
--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body-small)
var(--sk-font-family-body);
--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);
Expand Down
Loading