23e6b2123e
* Create _input-mixins.scss * Use button-mixins on more elements * Replace <select> tag with custom Select component * Fix RevertButton causing cursor: pointer when hidden * Increase SaveButton chevron width * Hide floating component box-shadow when inactive * Rework SpinBox and move it into components * Run eslint and prettier * Remove leftover options prop * Pass disabled array to EnumSelector again * Update MapperRow.svelte * Darken QHeaderView border color Slipping this in without an extra PR. * Adjust disabled color, border and cursor * Remove redundant icon definition from stylesheets * Fix deck options initial config * Fix z-index issues in change notetype screen It might be best to handle z-index locally in each user component instead of hard-coded component values. * Give web SpinBox a horizontal design * Give QRadioButton the same treatment as QCheckBox in #2079 * Fix unused CSS selector warning with base button-mixin * Remove redundant import * Fix deck options save button * Delete input-mixins and remove unused down-arrow * Run eslint on change-notetype * Run eslint on components
339 lines
9.4 KiB
SCSS
339 lines
9.4 KiB
SCSS
/* Copyright: Ankitects Pty Ltd and contributors
|
|
* License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */
|
|
|
|
@use "sass:map";
|
|
@use "sass:color";
|
|
@use "functions" as *;
|
|
@use "colors" as *;
|
|
|
|
@function palette($key, $shade) {
|
|
$color: map.get($colors, $key);
|
|
@return map.get($color, $shade);
|
|
}
|
|
|
|
$vars: (
|
|
props: (
|
|
border-radius: (
|
|
default: 5px,
|
|
),
|
|
),
|
|
colors: (
|
|
white: (
|
|
default: white,
|
|
),
|
|
black: (
|
|
default: black,
|
|
),
|
|
fg: (
|
|
default: (
|
|
light: palette(darkgray, 9),
|
|
dark: palette(lightgray, 0),
|
|
),
|
|
subtle: (
|
|
light: palette(darkgray, 6),
|
|
dark: palette(lightgray, 3),
|
|
),
|
|
disabled: (
|
|
light: palette(lightgray, 9),
|
|
dark: palette(darkgray, 0),
|
|
),
|
|
faint: (
|
|
light: palette(lightgray, 7),
|
|
dark: palette(darkgray, 2),
|
|
),
|
|
),
|
|
canvas: (
|
|
default: (
|
|
light: palette(lightgray, 3),
|
|
dark: palette(darkgray, 5),
|
|
),
|
|
elevated: (
|
|
light: white,
|
|
dark: palette(darkgray, 4),
|
|
),
|
|
inset: (
|
|
light: palette(lightgray, 4),
|
|
dark: palette(darkgray, 6),
|
|
),
|
|
overlay: (
|
|
light: white,
|
|
dark: black,
|
|
),
|
|
code: (
|
|
light: white,
|
|
dark: palette(darkgray, 6),
|
|
),
|
|
),
|
|
border: (
|
|
default: (
|
|
light: palette(lightgray, 6),
|
|
dark: palette(darkgray, 6),
|
|
),
|
|
subtle: (
|
|
light: palette(lightgray, 5),
|
|
dark: palette(darkgray, 4),
|
|
),
|
|
strong: (
|
|
light: palette(lightgray, 9),
|
|
dark: palette(darkgray, 1),
|
|
),
|
|
focus: (
|
|
light: palette(blue, 5),
|
|
dark: palette(blue, 5),
|
|
),
|
|
),
|
|
button: (
|
|
border: (
|
|
light: palette(lightgray, 6),
|
|
dark: palette(darkgray, 6),
|
|
),
|
|
focus: (
|
|
light: palette(cyan, 3),
|
|
dark: palette(cyan, 4),
|
|
),
|
|
pressed: (
|
|
shadow: (
|
|
light: palette(lightgray, 7),
|
|
dark: palette(darkgray, 7),
|
|
),
|
|
border: (
|
|
light: palette(lightgray, 9),
|
|
dark: palette(darkgray, 9),
|
|
),
|
|
),
|
|
disabled: (
|
|
light: color.scale(palette(lightgray, 5), $alpha: -50%),
|
|
dark: color.scale(palette(darkgray, 3), $alpha: -50%),
|
|
),
|
|
gradient: (
|
|
start: (
|
|
light: white,
|
|
dark: palette(darkgray, 3),
|
|
),
|
|
end: (
|
|
light: palette(lightgray, 1),
|
|
dark: palette(darkgray, 4),
|
|
),
|
|
),
|
|
hover: (
|
|
gradient: (
|
|
start: (
|
|
light: palette(lightgray, 1),
|
|
dark: palette(darkgray, 2),
|
|
),
|
|
end: (
|
|
light: palette(lightgray, 4),
|
|
dark: palette(darkgray, 3),
|
|
),
|
|
),
|
|
border: (
|
|
light: palette(lightgray, 8),
|
|
dark: palette(darkgray, 8),
|
|
),
|
|
),
|
|
primary: (
|
|
gradient: (
|
|
start: (
|
|
light: palette(blue, 4),
|
|
dark: color.scale(palette(blue, 6), $saturation: -10%),
|
|
),
|
|
end: (
|
|
light: palette(blue, 6),
|
|
dark: color.scale(palette(blue, 8), $saturation: -10%),
|
|
),
|
|
),
|
|
hover: (
|
|
gradient: (
|
|
start: (
|
|
light: palette(blue, 3),
|
|
dark: color.scale(palette(blue, 5), $saturation: -10%),
|
|
),
|
|
end: (
|
|
light: palette(blue, 5),
|
|
dark: color.scale(palette(blue, 7), $saturation: -10%),
|
|
),
|
|
),
|
|
),
|
|
disabled: (
|
|
light: palette(blue, 3),
|
|
dark: color.scale(palette(blue, 5), $saturation: -10%),
|
|
),
|
|
),
|
|
),
|
|
scrollbar: (
|
|
bg: (
|
|
default: (
|
|
light: palette(lightgray, 5),
|
|
dark: palette(darkgray, 4),
|
|
),
|
|
hover: (
|
|
light: palette(lightgray, 6),
|
|
dark: palette(darkgray, 3),
|
|
),
|
|
active: (
|
|
light: palette(lightgray, 7),
|
|
dark: palette(darkgray, 1),
|
|
),
|
|
),
|
|
),
|
|
shadow: (
|
|
default: (
|
|
light: palette(lightgray, 8),
|
|
dark: palette(darkgray, 7),
|
|
),
|
|
inset: (
|
|
light: palette(lightgray, 9),
|
|
dark: palette(darkgray, 7),
|
|
),
|
|
subtle: (
|
|
light: palette(lightgray, 5),
|
|
dark: palette(darkgray, 6),
|
|
),
|
|
focus: (
|
|
default: palette(indigo, 5),
|
|
),
|
|
),
|
|
accent: (
|
|
card: (
|
|
light: palette(blue, 3),
|
|
dark: palette(blue, 4),
|
|
),
|
|
note: (
|
|
light: palette(green, 5),
|
|
dark: palette(green, 4),
|
|
),
|
|
link: (
|
|
light: palette(blue, 7),
|
|
dark: palette(blue, 2),
|
|
),
|
|
danger: (
|
|
light: palette(red, 5),
|
|
dark: palette(red, 4),
|
|
),
|
|
),
|
|
flag: (
|
|
1: (
|
|
light: palette(red, 5),
|
|
dark: palette(red, 4),
|
|
),
|
|
2: (
|
|
light: palette(orange, 4),
|
|
dark: palette(orange, 3),
|
|
),
|
|
3: (
|
|
light: palette(green, 4),
|
|
dark: palette(green, 3),
|
|
),
|
|
4: (
|
|
light: palette(blue, 5),
|
|
dark: palette(blue, 4),
|
|
),
|
|
5: (
|
|
light: palette(fuchsia, 4),
|
|
dark: palette(fuchsia, 3),
|
|
),
|
|
6: (
|
|
light: palette(teal, 4),
|
|
dark: palette(teal, 3),
|
|
),
|
|
7: (
|
|
light: palette(purple, 5),
|
|
dark: palette(purple, 4),
|
|
),
|
|
),
|
|
state: (
|
|
new: (
|
|
light: palette(blue, 5),
|
|
dark: palette(blue, 3),
|
|
),
|
|
learn: (
|
|
light: palette(red, 6),
|
|
dark: palette(red, 4),
|
|
),
|
|
review: (
|
|
light: palette(green, 6),
|
|
dark: palette(green, 5),
|
|
),
|
|
buried: (
|
|
light: palette(amber, 5),
|
|
dark: palette(amber, 8),
|
|
),
|
|
suspended: (
|
|
light: palette(yellow, 4),
|
|
dark: palette(yellow, 1),
|
|
),
|
|
marked: (
|
|
light: palette(indigo, 2),
|
|
dark: palette(purple, 5),
|
|
),
|
|
),
|
|
highlight: (
|
|
bg: (
|
|
light: palette(blue, 3),
|
|
dark: palette(blue, 4),
|
|
),
|
|
fg: (
|
|
light: black,
|
|
dark: white,
|
|
),
|
|
),
|
|
selection: (
|
|
bg: (
|
|
light: color.scale(palette(lightgray, 5), $alpha: -50%),
|
|
dark: color.scale(palette(blue, 3), $alpha: -50%),
|
|
),
|
|
fg: (
|
|
light: black,
|
|
dark: white,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
|
|
@function color($keyword) {
|
|
@return var(--#{$keyword});
|
|
}
|
|
|
|
@function palette-of($keyword, $theme: default) {
|
|
$colors: map.get($vars, colors);
|
|
@return get-value-from-map($colors, $keyword, $theme);
|
|
}
|
|
|
|
@function prop($keyword) {
|
|
@return var(--#{$keyword});
|
|
}
|
|
|
|
/*! colors */
|
|
:root {
|
|
$colors: map.get($vars, colors);
|
|
@each $name, $val in create-vars-from-map($colors, light) {
|
|
#{$name}: #{$val};
|
|
}
|
|
color-scheme: light;
|
|
&.night-mode {
|
|
@each $name, $val in create-vars-from-map($colors, dark) {
|
|
#{$name}: #{$val};
|
|
}
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
/*! props */
|
|
:root {
|
|
$props: map.get($vars, props);
|
|
@each $name, $val in create-vars-from-map($props, default) {
|
|
#{$name}: #{$val};
|
|
}
|
|
@each $name, $val in create-vars-from-map($props, light) {
|
|
#{$name}: #{$val};
|
|
}
|
|
&.night-mode {
|
|
@each $name, $val in create-vars-from-map($props, default) {
|
|
#{$name}: #{$val};
|
|
}
|
|
@each $name, $val in create-vars-from-map($props, dark) {
|
|
#{$name}: #{$val};
|
|
}
|
|
}
|
|
}
|