SiteWebAstrolabe/src/scss/_theme.scss
Yves Gatesoupe b8c1d5a79d form select arrow
focused elements styling
2020-06-26 16:32:56 +02:00

56 lines
1.8 KiB
SCSS

:root {
// Pull the tokens and generate custom props
@each $color in $stalfos-colors {
#{'--color-' + nth($color, 1)}: #{nth($color, 2)};
}
// Set theme aliases
--color-mode: 'light';
--color-bg: #{get-color('light')};
--color-bg-glare: #{get-color('light')};
--color-text: #{get-color('dark')};
--color-text-glare: #{get-color('dark')};
--color-selection-text: #{get-color('light')};
--color-selection-bg: #{get-color('dark')};
--color-stroke: #{get-color('mid')};
--color-action-bg: #{get-color('primary')};
--color-action-text: #{get-color('dark')};
--color-theme-primary: #{get-color('primary')};
--color-theme-primary-glare: #{get-color('primary-glare')};
--color-theme-highlight: #{get-color('highlight')};
--color-theme-highlight-block: #{get-color('highlight')};
--color-theme-secondary: #{get-color('secondary')};
--color-light-gray: #{get-color('light-gray')};
--color-white: #{get-color('light')};
}
@include dark-mode() {
--color-bg: #{get-color('dark')};
--color-bg-glare: #{get-color('slate')};
--color-text: #{get-color('light')};
--color-selection-text: #{get-color('dark')};
--color-selection-bg: #{get-color('light')};
--color-stroke: #{get-color('slate')};
--color-theme-primary: #{lighten(get-color('primary'), 50%)};
--color-theme-primary-glare: #{lighten(get-color('primary-glare'), 50%)};
--color-action-bg: var(--color-theme-primary-glare);
--color-action-text: #{get-color('dark')};
--color-theme-highlight: #{get-color('highlight')};
--color-theme-highlight-block: #{get-color('slate')};
--color-theme-feature-text: #{get-color('highlight')};
}
body {
color: var(--color-text);
background-color: var(--color-bg);
}
main {
overflow: hidden;
}
::selection {
color: var(--color-selection-text);
background-color: var(--color-selection-bg);
}