feat/vaults
Tomáš Mládek 2022-02-04 20:24:50 +01:00
parent f8a0410282
commit 9b978c39d1
No known key found for this signature in database
GPG Key ID: ED21612889E75EC5
1 changed files with 77 additions and 78 deletions

View File

@ -1,90 +1,89 @@
@use "colors"; @use "colors";
@mixin rebase( @mixin rebase(
$rebase03, $rebase03,
$rebase02, $rebase02,
$rebase01, $rebase01,
$rebase00, $rebase00,
$rebase0, $rebase0,
$rebase1, $rebase1,
$rebase2, $rebase2,
$rebase3 $rebase3
) { ) {
--foreground: #{$rebase0}; --foreground: #{$rebase0};
--foreground-lighter: #{$rebase1}; --foreground-lighter: #{$rebase1};
--foreground-lightest: #{$rebase2}; --foreground-lightest: #{$rebase2};
--background: #{$rebase03}; --background: #{$rebase03};
--background-lighter: #{$rebase02}; --background-lighter: #{$rebase02};
--primary: #{colors.$blue}; --primary: #{colors.$blue};
background-color: $rebase03; background-color: $rebase03;
color: $rebase0; color: $rebase0;
}
@mixin accentize($accent) {
a,
a:active,
a:visited,
code.url {
color: $accent;
} }
h1,
@mixin accentize($accent) { h2,
a, h3,
a:active, h4,
a:visited, h5,
code.url { h6 {
color: $accent; color: $accent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $accent;
}
} }
}
html {
@include rebase(
colors.$base3,
colors.$base2,
colors.$base1,
colors.$base0,
colors.$base00,
colors.$base01,
colors.$base02,
colors.$base03
);
}
@media (prefers-color-scheme: dark) {
html { html {
@include rebase( @include rebase(
colors.$base3, colors.$base03,
colors.$base2,
colors.$base1,
colors.$base0,
colors.$base00,
colors.$base01,
colors.$base02, colors.$base02,
colors.$base03 colors.$base01,
colors.$base00,
colors.$base0,
colors.$base1,
colors.$base2,
colors.$base3
); );
} }
}
@media (prefers-color-scheme: dark) {
html { html,
@include rebase( body {
colors.$base03, color: var(--foreground);
colors.$base02, background: var(--background);
colors.$base01,
colors.$base00, h1,
colors.$base0, h2,
colors.$base1, h3,
colors.$base2, h4,
colors.$base3 h5,
); h6 {
} color: var(--foreground-lighter);
border-color: var(--foreground);
} }
html, a,
body { a:active,
color: var(--foreground); a:visited {
background: var(--background); color: var(--foreground-lighter);
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--foreground-lighter);
border-color: var(--foreground);
}
a,
a:active,
a:visited {
color: var(--foreground-lighter);
}
} }
}