mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-01-22 09:20:00 +00:00
7f7943d2fc
* feat(dark mode): set up first set of colors * feat(dark mode): define state colours * 🧹 * feat(dark mode): variablify all teh wordz * feat(dark mode): set colors on body * feat(dark mode): replace hard coded color value * feat(dark mode): 🌑 * feat(a11y): update link focus styles - restores visible focus in windows high contrast mode - increases visibility in boxes with bg colour * feat(dark mode): enable postcss * 💅 * feat(dark mode): add user control * chore: use generic headline name * feat(dark mode): hide switch until script loads * feat(dark mode): increase link contrast * add content warning to footer nav partial * feat(dark mode): replace hard coded colour value in alertbox * feat(dark mode): tone down text colour * feat(dark mode): properly invert code elements * 🧹 move box styles into own partial * feat(dark mode): use darker colour as background for links
68 lines
1.8 KiB
SCSS
68 lines
1.8 KiB
SCSS
// create variables for all colours
|
|
@mixin raw-color-names {
|
|
@each $name, $value in $colors {
|
|
--clr-#{$name}: #{$value};
|
|
}
|
|
}
|
|
|
|
// map the raw colours to abstract names in standard color mode
|
|
// we map the colour values here to prepare for dark mode
|
|
// with these mapping we express the _design intention_ rather than the colour value
|
|
@mixin color-scheme-light {
|
|
--clr-primary: var(--clr-red);
|
|
--clr-secondary: var(--clr-green);
|
|
--clr-foreground: var(--clr-black);
|
|
--clr-foreground-transparent: var(--clr-black-transparent);
|
|
--clr-background: white;
|
|
--clr-accent: var(--clr-pink);
|
|
--clr-border-main: var(--clr-dark-grey);
|
|
|
|
--clr-positive: var(--clr-green);
|
|
--clr-positive-text: var(--clr-dark-green);
|
|
--clr-positive-background: var(--clr-pale-green);
|
|
|
|
--clr-warning: var(--clr-yellow);
|
|
--clr-warning-background: var(--clr-pale-yellow);
|
|
--clr-warning-text: var(--clr-dark-yellow);
|
|
|
|
--clr-avoid: var(--clr-red);
|
|
--clr-avoid-background: var(--clr-pink);
|
|
--clr-avoid-text: var(--clr-dark-red);
|
|
}
|
|
|
|
// update colors which need to change in dark mode
|
|
@mixin color-scheme-dark {
|
|
--clr-foreground: var(--clr-light-grey);
|
|
--clr-foreground-transparent: var(--clr-white-transparent);
|
|
--clr-background: var(--clr-black);
|
|
--clr-accent: var(--clr-berry);
|
|
|
|
--clr-positive-text: var(--clr-pale-green);
|
|
--clr-positive-background: var(--clr-dark-green);
|
|
|
|
--clr-warning-background: var(--clr-dark-yellow);
|
|
--clr-warning-text: var(--clr-pale-yellow);
|
|
|
|
--clr-avoid-background: var(--clr-dark-red);
|
|
--clr-avoid-text: var(--clr-pink);
|
|
}
|
|
|
|
:root {
|
|
@include raw-color-names();
|
|
|
|
@include color-scheme-light();
|
|
|
|
--auto-grid-min-size: 17rem;
|
|
--l-gap: 1rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-user-theme='light']) {
|
|
@include color-scheme-dark();
|
|
}
|
|
}
|
|
|
|
:root[data-user-theme='dark'] {
|
|
@include color-scheme-dark();
|
|
}
|