54 lines
1.3 KiB
SCSS
54 lines
1.3 KiB
SCSS
|
@use "tailwind/colors";
|
||
|
|
@use "tailwind/spacing";
|
||
|
|
@use "tailwind/text";
|
||
|
|
|
||
|
|
html {
|
||
|
|
color-scheme: light dark;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* These need switchable client-side */
|
||
|
|
:root {
|
||
|
|
/* Foreground */
|
||
|
|
--color-fg-base: #{colors.$slate-700};
|
||
|
|
--color-fg-deemphasized: #{colors.$slate-600};
|
||
|
|
--color-fg-headings: #{colors.$slate-900};
|
||
|
|
|
||
|
|
/* Background */
|
||
|
|
--color-bg-base: #{colors.$slate-100};
|
||
|
|
--color-bg-raised-1: #{colors.$slate-200};
|
||
|
|
--color-bg-raised-2: #{colors.$slate-300};
|
||
|
|
|
||
|
|
/* Borders */
|
||
|
|
--color-bd-base: #{colors.$slate-300};
|
||
|
|
--color-bd-highlighted: #{colors.$slate-500};
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
/* Foreground */
|
||
|
|
--color-fg-base: #{colors.$slate-300};
|
||
|
|
--color-fg-deemphasized: #{colors.$slate-400};
|
||
|
|
--color-fg-headings: #{colors.$slate-100};
|
||
|
|
|
||
|
|
/* Background */
|
||
|
|
--color-bg-base: #{colors.$slate-900};
|
||
|
|
--color-bg-raised-1: #{colors.$slate-800};
|
||
|
|
--color-bg-raised-2: #{colors.$slate-700};
|
||
|
|
|
||
|
|
/* Borders */
|
||
|
|
--color-bd-base: #{colors.$slate-700};
|
||
|
|
--color-bd-highlighted: #{colors.$slate-500};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin heading($disable-margin: false) {
|
||
|
|
color: var(--color-fg-headings);
|
||
|
|
@if $disable-margin {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin heading2($disable-margin: false) {
|
||
|
|
@include heading($disable-margin);
|
||
|
|
font-size: text.$font-size-4xl;
|
||
|
|
font-weight: text.$font-weight-bold;
|
||
|
|
}
|