131 lines
No EOL
4.3 KiB
SCSS
131 lines
No EOL
4.3 KiB
SCSS
// Vikunja colors as CSS custom properties
|
|
|
|
:root {
|
|
// Vikunja specific variables
|
|
--grey-50: hsl(210, 20%, 98%);
|
|
--grey-100: hsl(220, 14.3%, 95.9%);
|
|
--grey-200: hsl(220, 13%, 91%);
|
|
--grey-300: hsl(216, 12.2%, 83.9%);
|
|
--grey-400: hsl(217.9, 10.6%, 64.9%);
|
|
--grey-500-hsl: 220, 8.9%, 46.1%;
|
|
--grey-500: hsl(var(--grey-500-hsl));
|
|
--grey-600: hsl(215, 13.8%, 34.1%);
|
|
--grey-700: hsl(216.9, 19.1%, 26.7%);
|
|
--grey-800: hsl(215, 27.9%, 16.9%);
|
|
--grey-900: hsl(220.9, 39.3%, 11%);
|
|
--site-background: var(--grey-100);
|
|
--scheme-main: var(--white);
|
|
|
|
// Overrides of Bulma defaults
|
|
--grey-darker: var(--grey-700);
|
|
--grey-dark: var(--grey-800);
|
|
--grey: var(--grey-500);
|
|
--grey-light: var(--grey-300);
|
|
--grey-lighter: var(--grey-200);
|
|
--grey-lightest: var(--grey-100);
|
|
--input-border-color: var(--grey-200);
|
|
|
|
--white-h: 0deg;
|
|
--white-s: 0%;
|
|
--white-l: 100%;
|
|
--white-a: 1;
|
|
--white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
|
--white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
|
|
|
|
--black-h: 0deg;
|
|
--black-s: 0%;
|
|
--black-l: 4%;
|
|
--black-a: 1;
|
|
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
|
|
|
|
// $warning / $orange: #ff851b
|
|
--warning-h: 27.9deg;
|
|
--warning-s: 100%;
|
|
--warning-l: 55.3%;
|
|
--warning-a: 1;
|
|
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
|
|
|
// $success / $green is #00db60
|
|
--success-h: 146.3deg;
|
|
--success-s: 100%;
|
|
--success-l: 42.9%;
|
|
--success-a: 1;
|
|
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
|
|
|
// $danger / $red is #ff4136
|
|
--danger-h: 3.3deg;
|
|
--danger-s: 100%;
|
|
--danger-l: 60.6%;
|
|
--danger-a: 1;
|
|
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
|
|
|
// var(--primary) / $blue is #1973ff
|
|
--primary-h: 217deg;
|
|
--primary-s: 98%;
|
|
--primary-l: 53%;
|
|
--primary-a: 1;
|
|
--primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
|
|
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
|
// END Overrides of Bulma defaults
|
|
|
|
|
|
// Define custom color variable to prevent change in dark mode
|
|
--switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
|
|
|
// Define custom color variable to alow change in dark mode
|
|
--card-border-color: var(--grey-200);
|
|
--logo-text-color: hsl(180, 1%, 15%);
|
|
|
|
--link: var(--primary);
|
|
--link-hover: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .75);
|
|
--border: var(--grey-200);
|
|
--input-disabled-background-color: var(--grey-100);
|
|
--input-disabled-border-color: var(--grey-300);
|
|
|
|
&.dark {
|
|
// Light mode colours reversed for dark mode
|
|
--grey-900-hsl: 210, 20%, 98%;
|
|
--grey-900: hsl(var(--grey-900-hsl));
|
|
--grey-800: hsl(220, 14.3%, 95.9%);
|
|
--grey-700: hsl(220, 13%, 91%);
|
|
--grey-600: hsl(216, 12.2%, 83.9%);
|
|
--grey-500-hsl: 217.9, 10.6%, 64.9%;
|
|
--grey-500: hsl(var(--grey-500-hsl));
|
|
--grey-400: hsl(220, 8.9%, 46.1%);
|
|
--grey-300: hsl(215, 13.8%, 34.1%);
|
|
--grey-200: hsl(216.9, 19.1%, 26.7%);
|
|
--grey-100-hsl: 215, 27.9%, 16.9%;
|
|
--grey-100: hsl(var(--grey-100-hsl));
|
|
--grey-50-hsl: 220.9, 39.3%, 11%;
|
|
--grey-50: hsl(var(--grey-50-hsl));
|
|
|
|
// Dark grey looks better than black
|
|
--white: var(--grey-50);
|
|
--black-l: 100%;
|
|
|
|
// Text renders better in grey than black
|
|
--text: var(--grey-800);
|
|
--text-invert: #000;
|
|
--text-light: var(--grey-300);
|
|
--text-strong: var(--grey-900);
|
|
|
|
// Elements that rely on Bulma defaults in light mode but
|
|
// need to be overriden in dark mode
|
|
--input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
|
|
--tag-color: var(--grey-50);
|
|
--table-row-hover-background-color: var(--grey-100);
|
|
--dropdown-item-hover-background-color: var(--grey-100);
|
|
--dropdown-item-hover-color: var(--text);
|
|
--button-text-hover-background-color: var(--grey-200);
|
|
--button-hover-color: var(--grey-600);
|
|
|
|
// Custom color variables we need to override
|
|
--card-border-color: hsla(var(--grey-100-hsl), 0.3);
|
|
--logo-text-color: var(--grey-700);
|
|
|
|
// Slightly different primary color to make sure it has a sufficent contrast ratio
|
|
--primary-h: 217deg;
|
|
--primary-s: 98%;
|
|
--primary-l: 58%;
|
|
}
|
|
} |