Skip to content

Commit

Permalink
feat: JSLess dark mode (#85)
Browse files Browse the repository at this point in the history 
* Push

* Add changeset

* Add warning on top
  • Loading branch information
@PuruVJ
PuruVJ committed Apr 10, 2023
1 parent 0dc796d commit faff260
Show file tree
Hide file tree
Showing 3 changed files with 174 additions and 89 deletions.
5 changes: 5 additions & 0 deletions .changeset/shiny-pants-watch.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/site-kit': minor
---

Ship media queries alongside classes on body
3 changes: 1 addition & 2 deletions packages/site-kit/src/lib/styles/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,7 @@ pre code {
}

::selection {
background: var(--sk-theme-3);
color: white;
background: var(--selection-color);
}

/* opinionated styles --------------------- */
Expand Down
255 changes: 168 additions & 87 deletions packages/site-kit/src/lib/styles/tokens.css
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,11 @@
body,
body.light,
body.dark {
/* colors */
/*
!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode, you should change that for the other dark mode too
*/
:root {
--sk-back-h: 206;
--sk-back-3-hsl: 206, 64%, 98%;

--sk-back-1: hsl(0, 0%, 100%);
--sk-back-2: hsl(0, 0%, 100%); /* same as sk-back-1 in light mode, different in dark mode */
--sk-back-3: hsl(var(--sk-back-3-hsl));
--sk-back-4: hsl(206, 44%, 93%);
--sk-back-5: hsl(206, 20%, 80%);
--sk-theme-1: hsl(15, 100%, 50%);
--sk-theme-2: hsl(240, 8%, 44%);
--sk-theme-3: hsl(204, 100%, 63%);
--sk-text-1: hsl(0, 0%, 13%);
--sk-text-2: hsl(0, 0%, 27%);
--sk-text-3: var(--sk-theme-2);
--sk-scrollbar: rgba(0, 0, 0, 0.3);

/* same in light mode, different in dark mode */
--sk-theme-1-variant: hsl(15, 100%, 50%);
--sk-theme-2-variant: hsl(240, 8%, 44%);
--sk-theme-3-variant: hsl(204, 100%, 63%);

--sk-code-bg: var(--sk-back-3);
--sk-code-ts-bg: var(--sk-back-1);
--sk-code-base: hsl(45, 7%, 35%);
--sk-code-comment: hsl(0, 0%, 41%);
--sk-code-keyword: hsl(204, 88%, 35%);
--sk-code-function: hsl(19, 67%, 44%);
--sk-code-string: hsl(41, 37%, 38%);
--sk-code-number: hsl(120, 100%, 25%);
--sk-code-template-string: hsl(2, 80%, 47%);
--sk-code-tags: var(--code-function);
--sk-code-important: var(--code-string);
--sk-code-diff-base: hsla(0, 0%, 0%, 0.4);
--sk-code-diff-inserted: hsl(120, 100%, 25%);
--sk-code-diff-removed: hsl(2, 80%, 47%);

/* used for coloured backgrounds e.g. blockquotes */
--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
--selection-color: hsla(204, 100%, 63%, 0.3);

/* dimensions */
--sk-nav-height: 6rem;
Expand All @@ -63,67 +28,183 @@ body.dark {
--sk-line-max-width: 84rem;
}

@media only screen and (prefers-color-scheme: dark) {
:root {
--sk-back-3-hsl: 0, 0%, 14%;
--sk-back-1: hsl(0, 0%, 10%);
--sk-back-2: hsl(0, 0%, 18%);
--sk-back-3: hsl(var(--sk-back-3-hsl));
--sk-back-4: hsl(0, 0%, 22%);
--sk-back-5: hsl(0, 0%, 40%);
--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
--sk-theme-1: hsl(15, 100%, 55%);
--sk-theme-2: hsl(240, 8%, 44%);
--sk-theme-3: hsl(204, 100%, 63%);
--sk-text-1: hsl(0, 0%, 90%);
--sk-text-2: hsl(0, 0%, 80%);
--sk-text-3: hsl(0, 0%, 65%);
--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
--sk-scrollbar: rgba(255, 255, 255, 0.3);

--sk-back-3-hsl: 0, 0%, 14%;
--sk-theme-1-variant: hsl(15, 100%, 40%);
--sk-theme-2-variant: hsl(240, 8%, 35%);
--sk-theme-3-variant: hsl(204, 100%, 50%);

--sk-code-ts-bg: var(--sk-back-2);
--sk-code-bg: var(--sk-back-3);
--sk-code-base: hsl(45, 7%, 75%);
--sk-code-comment: hsl(0, 0%, 51%);
--sk-code-keyword: hsl(204, 88%, 65%);
--sk-code-function: hsl(19, 67%, 75%);
--sk-code-string: hsl(41, 37%, 68%);
--sk-code-number: hsl(120, 100%, 25%);
--sk-code-template-string: hsl(2, 80%, 47%);
--sk-code-tags: var(--code-function);
--sk-code-important: var(--code-string);
--sk-code-diff-base: hsla(0, 0%, 100%, 0.4);
--sk-code-diff-inserted: hsl(120, 46%, 48%);
--sk-code-diff-removed: hsl(2, 64%, 52%);
}

body.light {
--sk-back-3-hsl: 206, 64%, 98%;
--sk-back-1: hsl(0, 0%, 100%);
--sk-back-2: hsl(0, 0%, 100%); /* same as sk-back-1 in light mode, different in dark mode */
--sk-back-3: hsl(var(--sk-back-3-hsl));
--sk-back-4: hsl(206, 44%, 93%);
--sk-back-5: hsl(206, 20%, 80%);
--sk-theme-1: hsl(15, 100%, 50%);
--sk-theme-2: hsl(240, 8%, 44%);
--sk-theme-3: hsl(204, 100%, 63%);
--sk-text-1: hsl(0, 0%, 13%);
--sk-text-2: hsl(0, 0%, 27%);
--sk-text-3: var(--sk-theme-2);
--sk-scrollbar: rgba(0, 0, 0, 0.3);

/* same in light mode, different in dark mode */
--sk-theme-1-variant: hsl(15, 100%, 50%);
--sk-theme-2-variant: hsl(240, 8%, 44%);
--sk-theme-3-variant: hsl(204, 100%, 63%);

--sk-code-bg: var(--sk-back-3);
--sk-code-ts-bg: var(--sk-back-1);
--sk-code-base: hsl(45, 7%, 35%);
--sk-code-comment: hsl(0, 0%, 41%);
--sk-code-keyword: hsl(204, 88%, 35%);
--sk-code-function: hsl(19, 67%, 44%);
--sk-code-string: hsl(41, 37%, 38%);
--sk-code-number: hsl(120, 100%, 25%);
--sk-code-template-string: hsl(2, 80%, 47%);
--sk-code-tags: var(--code-function);
--sk-code-important: var(--code-string);
--sk-code-diff-base: hsla(0, 0%, 0%, 0.4);
--sk-code-diff-inserted: hsl(120, 100%, 25%);
--sk-code-diff-removed: hsl(2, 80%, 47%);

/* used for coloured backgrounds e.g. blockquotes */
--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
}
}

@media screen and (min-width: 480px) {
body,
body.light,
body.dark {
:root {
--sk-page-padding-side: 3.2rem;
}
}

@media screen and (min-width: 768px) {
body,
body.light,
body.dark {
:root {
--sk-text-xxl: 5.4rem;
--sk-text-xl: 3.6rem;
--sk-page-padding-top: 8rem;
--sk-page-padding-side: 4.8rem;
}
}

body.dark {
/* TODO create tokens for all the ad-hoc styles used on the site, so we can offer dark mode */
--sk-back-1: hsl(0, 0%, 10%);
--sk-back-2: hsl(0, 0%, 18%);
/* --sk-back-3: hsl(0, 0%, 20%); */
--sk-back-4: hsl(0, 0%, 22%);
--sk-back-5: hsl(0, 0%, 40%);
--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
--sk-theme-1: hsl(15, 100%, 55%);
--sk-theme-2: hsl(240, 8%, 44%);
--sk-theme-3: hsl(204, 100%, 63%);
--sk-text-1: hsl(0, 0%, 90%);
--sk-text-2: hsl(0, 0%, 80%);
--sk-text-3: hsl(0, 0%, 65%);
--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
--sk-scrollbar: rgba(255, 255, 255, 0.3);

--sk-back-3-hsl: 0, 0%, 14%;
--sk-theme-1-variant: hsl(15, 100%, 40%);
--sk-theme-2-variant: hsl(240, 8%, 35%);
--sk-theme-3-variant: hsl(204, 100%, 50%);

--sk-code-ts-bg: var(--sk-back-2);
--sk-code-bg: var(--sk-back-3);
--sk-code-base: hsl(45, 7%, 75%);
--sk-code-comment: hsl(0, 0%, 51%);
--sk-code-keyword: hsl(204, 88%, 65%);
--sk-code-function: hsl(19, 67%, 75%);
--sk-code-string: hsl(41, 37%, 68%);
--sk-code-number: hsl(120, 100%, 25%);
--sk-code-template-string: hsl(2, 80%, 47%);
--sk-code-tags: var(--code-function);
--sk-code-important: var(--code-string);
--sk-code-diff-base: hsla(0, 0%, 100%, 0.4);
--sk-code-diff-inserted: hsl(120, 46%, 48%);
--sk-code-diff-removed: hsl(2, 64%, 52%);
@media screen and (prefers-color-scheme: light) {
:root {
--sk-back-3-hsl: 206, 64%, 98%;
--sk-back-1: hsl(0, 0%, 100%);
--sk-back-2: hsl(0, 0%, 100%); /* same as sk-back-1 in light mode, different in dark mode */
--sk-back-3: hsl(var(--sk-back-3-hsl));
--sk-back-4: hsl(206, 44%, 93%);
--sk-back-5: hsl(206, 20%, 80%);
--sk-theme-1: hsl(15, 100%, 50%);
--sk-theme-2: hsl(240, 8%, 44%);
--sk-theme-3: hsl(204, 100%, 63%);
--sk-text-1: hsl(0, 0%, 13%);
--sk-text-2: hsl(0, 0%, 27%);
--sk-text-3: var(--sk-theme-2);
--sk-scrollbar: rgba(0, 0, 0, 0.3);

/* same in light mode, different in dark mode */
--sk-theme-1-variant: hsl(15, 100%, 50%);
--sk-theme-2-variant: hsl(240, 8%, 44%);
--sk-theme-3-variant: hsl(204, 100%, 63%);

--sk-code-bg: var(--sk-back-3);
--sk-code-ts-bg: var(--sk-back-1);
--sk-code-base: hsl(45, 7%, 35%);
--sk-code-comment: hsl(0, 0%, 41%);
--sk-code-keyword: hsl(204, 88%, 35%);
--sk-code-function: hsl(19, 67%, 44%);
--sk-code-string: hsl(41, 37%, 38%);
--sk-code-number: hsl(120, 100%, 25%);
--sk-code-template-string: hsl(2, 80%, 47%);
--sk-code-tags: var(--code-function);
--sk-code-important: var(--code-string);
--sk-code-diff-base: hsla(0, 0%, 0%, 0.4);
--sk-code-diff-inserted: hsl(120, 100%, 25%);
--sk-code-diff-removed: hsl(2, 80%, 47%);

/* used for coloured backgrounds e.g. blockquotes */
--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
}

body.dark {
--sk-back-3-hsl: 0, 0%, 14%;
--sk-back-1: hsl(0, 0%, 10%);
--sk-back-2: hsl(0, 0%, 18%);
--sk-back-3: hsl(var(--sk-back-3-hsl));
--sk-back-4: hsl(0, 0%, 22%);
--sk-back-5: hsl(0, 0%, 40%);
--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
--sk-theme-1: hsl(15, 100%, 55%);
--sk-theme-2: hsl(240, 8%, 44%);
--sk-theme-3: hsl(204, 100%, 63%);
--sk-text-1: hsl(0, 0%, 90%);
--sk-text-2: hsl(0, 0%, 80%);
--sk-text-3: hsl(0, 0%, 65%);
--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
--sk-scrollbar: rgba(255, 255, 255, 0.3);

--sk-back-3-hsl: 0, 0%, 14%;
--sk-theme-1-variant: hsl(15, 100%, 40%);
--sk-theme-2-variant: hsl(240, 8%, 35%);
--sk-theme-3-variant: hsl(204, 100%, 50%);

--sk-code-ts-bg: var(--sk-back-2);
--sk-code-bg: var(--sk-back-3);
--sk-code-base: hsl(45, 7%, 75%);
--sk-code-comment: hsl(0, 0%, 51%);
--sk-code-keyword: hsl(204, 88%, 65%);
--sk-code-function: hsl(19, 67%, 75%);
--sk-code-string: hsl(41, 37%, 68%);
--sk-code-number: hsl(120, 100%, 25%);
--sk-code-template-string: hsl(2, 80%, 47%);
--sk-code-tags: var(--code-function);
--sk-code-important: var(--code-string);
--sk-code-diff-base: hsla(0, 0%, 100%, 0.4);
--sk-code-diff-inserted: hsl(120, 46%, 48%);
--sk-code-diff-removed: hsl(2, 64%, 52%);
}
}

/* legacy — existing site-kit uses these, and upgrading svelte.dev will be easier if we keep them around for now */
body,
body.light,
body.dark {
body {
/* colors */
--back: var(--sk-back-1);
--back-light: var(--sk-back-3);
Expand Down

0 comments on commit faff260

Please sign in to comment.