forked from vikunja/frontend
67 lines
1.7 KiB
SCSS
67 lines
1.7 KiB
SCSS
:root {
|
|
/* Original colors as CSS custom properties & converted to HSL */
|
|
--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: hsla(var(--grey-500-hsl), 1);
|
|
--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%);
|
|
|
|
--white: hsl(0, 0%, 100%);
|
|
--black: hsl(0, 0%, 4%);
|
|
|
|
--light-background: var(--grey-100);
|
|
}
|
|
|
|
$grey-50: #F9FAFB;
|
|
$grey-100: #f3f4f6;
|
|
$grey-200: #E5E7EB;
|
|
$grey-300: #D1D5DB;
|
|
$grey-400: #9CA3AF;
|
|
$grey-500: #6B7280;
|
|
$grey-600: #4B5563;
|
|
$grey-700: #374151;
|
|
$grey-800: #1F2937;
|
|
$grey-900: #111827;
|
|
|
|
$white: #fff;
|
|
$black: hsl(0, 0%, 4%) !default;
|
|
$orange: #ff851b;
|
|
$green: #00db60;
|
|
$red: #ff4136;
|
|
$blue: #1973ff;
|
|
$primary: $blue;
|
|
|
|
// Bulma defaults
|
|
$grey-dark: $grey-800;
|
|
$grey-darker: $grey-700;
|
|
$grey: $grey-500;
|
|
$grey-light: $grey-300;
|
|
$grey-lighter: $grey-200;
|
|
$grey-lightest: $grey-100;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Light mode colours in revers order for dark mode */
|
|
--grey-900: hsl(210, 20%, 98%);
|
|
--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: hsla(var(--grey-500-hsl), 1);
|
|
--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-50: hsl(220.9, 39.3%, 11%);
|
|
|
|
--white: hsl(0, 0%, 4%);
|
|
--black: hsl(0, 0%, 100%);
|
|
}
|
|
}
|