mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 11:05:25 -04:00
87 lines
3.7 KiB
SCSS
87 lines
3.7 KiB
SCSS
@use "sass:map";
|
|
@use "sass:string";
|
|
@use "sass:list";
|
|
|
|
@use "settings";
|
|
@use "functions" as *;
|
|
|
|
// Takes a single CSS property and theme key (see abstracts/_themes) and sets
|
|
// both body.light and body.dark selectors.
|
|
@mixin themed($property, $key, $moreTransitions: "") {
|
|
// allow root element (body) theming
|
|
$selectors: str-split("#{&}");
|
|
|
|
// fade colors on theme toggle
|
|
$transitions: ();
|
|
@each $element in settings.$theme-transition-elements {
|
|
$transitions: list.append(
|
|
$transitions,
|
|
string.unquote(
|
|
"#{$element} #{settings.$theme-transition-duration} #{settings.$theme-transition-function}"
|
|
)
|
|
);
|
|
}
|
|
@if $moreTransitions != "" {
|
|
// HACK: $moreTransitions is passed in and appended here because joining multiple transitions is hard :(
|
|
$transitions: list.append($transitions, string.unquote($moreTransitions));
|
|
}
|
|
@each $selector in $selectors {
|
|
@if $selector == "" {
|
|
// support root body element
|
|
$selector: "body";
|
|
}
|
|
@at-root #{$selector} {
|
|
transition: list.join($transitions, (), $separator: comma);
|
|
}
|
|
}
|
|
|
|
// set the actual light/dark properties
|
|
@each $theme, $map in $themes {
|
|
@each $selector in $selectors {
|
|
@at-root body.#{$theme} #{$selector} {
|
|
#{$property}: map.get($map, $key);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------
|
|
|
|
// Dark & Light Themes
|
|
$themes: (
|
|
light: (
|
|
background-inner: #ffffff,
|
|
background-outer: #fcfcfc,
|
|
text: #202020,
|
|
medium-dark: #515151,
|
|
medium: #5e5e5e,
|
|
medium-light: #757575,
|
|
light: #d2d2d2,
|
|
kinda-light: #e3e3e3,
|
|
super-light: #f4f4f4,
|
|
super-duper-light: #fbfbfb,
|
|
links: #0e6dc2,
|
|
success: #0b890f,
|
|
error: #ff1b1b,
|
|
),
|
|
dark: (
|
|
background-inner: #1e1e1e,
|
|
background-outer: #252525,
|
|
text: #f1f1f1,
|
|
medium-dark: #d7d7d7,
|
|
medium: #b1b1b1,
|
|
medium-light: #959595,
|
|
light: #646464,
|
|
kinda-light: #535353,
|
|
super-light: #272727,
|
|
super-duper-light: #1f1f1f,
|
|
links: #88c7ff,
|
|
success: #78df55,
|
|
error: #f54545,
|
|
),
|
|
);
|
|
|
|
// Icons (modified twemojis)
|
|
$icon-bulb-on: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#FFD983"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#FFCC4D"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';
|
|
$icon-bulb-off: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill-rule="nonzero" fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#CCCBCB"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#7D7A72"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';
|