local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Redefine all Bulma variables to fix undefined variables (#1165)

Browse source 
As per discussion in https://kolaente.dev/vikunja/frontend/issues/1074

This will hopefully eventually be fixed at the root - with missing scss variables properly passed though, possibly by switching to Bulvar.

But in the mean time I experimented with add ALL the bulma css color related variables into color.scss

This fixes the issue with the date picker in light mode. Also has me wondering if it will allow removal of some of other little overrides we made to fix niggling issues with dark mode, so marking this WIP.

Not suggesting this ever be merged, just exploring.

Resolves #1497
Resolves #1074

Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1165
Reviewed-by: konrad <k@knt.li>
Co-authored-by: adrinux <adrian@perlucida.co.uk>
Co-committed-by: adrinux <adrian@perlucida.co.uk>
This commit is contained in:
adrinux 2022-03-27 19:20:37 +00:00 • committed by konrad
parent c8fa0cc6b1
commit a8fe2cdcbd
1 changed files with 179 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
src/styles/custom-properties/colors.scss
View file

@ -1,6 +1,178 @@
// Vikunja colors as CSS custom properties
:root {
// Core Bulma color variables
// Added (from bulma-css-variables/css/bulma.css) to fix issues with undefined variables
// This section should be removed once bulma/sass scoping issues are fixed
// see https://kolaente.dev/vikunja/frontend/issues/1064
// Variables overriden in Vikunja specific rules below are commented out
//--scheme-main: white;
--scheme-main-bis: #fafafa;
--scheme-main-ter: whitesmoke;
--scheme-invert: #0a0a0a;
--scheme-invert-rgb: 10.2, 10.2, 10.2;
--scheme-invert-bis: #121212;
--scheme-invert-ter: #242424;
--background: whitesmoke;
//--border: #dbdbdb;
--border-rgb: 219.3, 219.3, 219.3;
--border-hover: #b5b5b5;
--border-light: #ededed;
--border-light-hover: #b5b5b5;
--text: #4a4a4a;
--text-invert: #fff;
--text-light: #7a7a7a;
--text-strong: #363636;
--code: #da1039;
--code-background: var(--background, whitesmoke);
--pre: var(--text, #4a4a4a);
--pre-background: var(--background, whitesmoke);
--link-visited: #b86bff;
//--link-hover: #363636;
--link-hover-border: #b5b5b5;
--link-focus: #363636;
--link-focus-border: var(--link, #485fc7);
--link-active: #363636;
--link-active-border: #4a4a4a;
//--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-invert-l: 4%;
--white-invert: #0a0a0a;
--white-light-l: 100%;
--white-light: hsla(var(--white-h), var(--white-s), var(--white-light-l), var(--white-a));
--white-dark-l: 29%;
--white-dark: hsla(var(--white-h), var(--white-s), var(--white-dark-l), var(--white-a));
//--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));
--black-invert-l: 100%;
--black-invert: white;
--black-light-l: 96%;
--black-light: hsla(var(--black-h), var(--black-s), var(--black-light-l), var(--black-a));
--black-dark-l: 57%;
--black-dark: hsla(var(--black-h), var(--black-s), var(--black-dark-l), var(--black-a));
--light-h: 0deg;
--light-s: 0%;
--light-l: 96%;
--light-a: 1;
--light: hsla(var(--light-h), var(--light-s), var(--light-l), var(--light-a));
--light-invert-l: 0%;
--light-invert: rgba(0, 0, 0, 0.7);
--light-light-l: 96%;
--light-light: hsla(var(--light-h), var(--light-s), var(--light-light-l), var(--light-a));
--light-dark-l: 29%;
--light-dark: hsla(var(--light-h), var(--light-s), var(--light-dark-l), var(--light-a));
--dark-h: 0deg;
--dark-s: 0%;
--dark-l: 21%;
--dark-a: 1;
--dark: hsla(var(--dark-h), var(--dark-s), var(--dark-l), var(--dark-a));
--dark-invert-l: 100%;
--dark-invert: #fff;
--dark-light-l: 96%;
--dark-light: hsla(var(--dark-h), var(--dark-s), var(--dark-light-l), var(--dark-a));
--dark-dark-l: 54%;
--dark-dark: hsla(var(--dark-h), var(--dark-s), var(--dark-dark-l), var(--dark-a));
//--primary-h: 171deg;
//--primary-s: 100%;
//--primary-l: 41%;
//--primary-a: 1;
//--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
--primary-invert-l: 100%;
--primary-invert: #fff;
--primary-light-l: 96%;
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
--primary-dark-l: 29%;
--primary-dark: hsla(var(--primary-h), var(--primary-s), var(--primary-dark-l), var(--primary-a));
--link-h: 229deg;
--link-s: 53%;
--link-l: 53%;
--link-a: 1;
//--link: hsla(var(--link-h), var(--link-s), var(--link-l), var(--link-a));
--link-invert-l: 100%;
--link-invert: #fff;
--link-light-l: 96%;
--link-light: hsla(var(--link-h), var(--link-s), var(--link-light-l), var(--link-a));
--link-dark-l: 47%;
--link-dark: hsla(var(--link-h), var(--link-s), var(--link-dark-l), var(--link-a));
--info-h: 207deg;
--info-s: 61%;
--info-l: 53%;
--info-a: 1;
--info: hsla(var(--info-h), var(--info-s), var(--info-l), var(--info-a));
--info-invert-l: 100%;
--info-invert: #fff;
--info-light-l: 96%;
--info-light: hsla(var(--info-h), var(--info-s), var(--info-light-l), var(--info-a));
--info-dark-l: 41%;
--info-dark: hsla(var(--info-h), var(--info-s), var(--info-dark-l), var(--info-a));
//--success-h: 153deg;
//--success-s: 53%;
//--success-l: 53%;
//--success-a: 1;
//--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
--success-invert-l: 100%;
--success-invert: #fff;
--success-light-l: 96%;
--success-light: hsla(var(--success-h), var(--success-s), var(--success-light-l), var(--success-a));
--success-dark-l: 31%;
--success-dark: hsla(var(--success-h), var(--success-s), var(--success-dark-l), var(--success-a));
//--warning-h: 44deg;
//--warning-s: 100%;
//--warning-l: 77%;
//--warning-a: 1;
//--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
--warning-invert-l: 0%;
--warning-invert: rgba(0, 0, 0, 0.7);
--warning-light-l: 96%;
--warning-light: hsla(var(--warning-h), var(--warning-s), var(--warning-light-l), var(--warning-a));
--warning-dark-l: 29%;
--warning-dark: hsla(var(--warning-h), var(--warning-s), var(--warning-dark-l), var(--warning-a));
//--danger-h: 348deg;
//--danger-s: 86%;
//--danger-l: 61%;
//--danger-a: 1;
//--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
--danger-invert-l: 100%;
--danger-invert: #fff;
--danger-light-l: 96%;
--danger-light: hsla(var(--danger-h), var(--danger-s), var(--danger-light-l), var(--danger-a));
--danger-dark-l: 43%;
--danger-dark: hsla(var(--danger-h), var(--danger-s), var(--danger-dark-l), var(--danger-a));
--input-color: var(--text-strong, #363636);
--input-background-color: var(--scheme-main, white);
//--input-border-color: var(--border, #dbdbdb);
--input-shadow: inset 0 0.0625em 0.125em rgba(var(--scheme-invert-rgb, 10.2, 10.2, 10.2), 0.05);
--input-placeholder-color: rgba(54, 54, 54, 0.3);
--input-hover-color: var(--text-strong, #363636);
--input-hover-border-color: var(--border-hover, #b5b5b5);
--input-focus-color: var(--text-strong, #363636);
--input-focus-border-color: var(--link, #485fc7);
--input-focus-box-shadow-color: var(--input-focus-box-shadow-color-hsla, rgba(72, 95, 199, 0.25));
--input-disabled-color: var(--text-light, #7a7a7a);
//--input-disabled-background-color: var(--background, whitesmoke);
//--input-disabled-border-color: var(--background, whitesmoke);
--input-disabled-placeholder-color: rgba(122, 122, 122, 0.3);
--input-arrow: var(--link, #485fc7);
--input-icon-color: var(--border, #dbdbdb);
--input-icon-active-color: var(--text, #4a4a4a);
--black-bis: #121212;
--black-ter: #242424;
//--grey-darker: #363636;
//--grey-dark: #4a4a4a;
//--grey: #7a7a7a;
//--grey-light: #b5b5b5;
//--grey-lighter: #dbdbdb;
--white-ter: whitesmoke;
--white-bis: #fafafa;
// END core Bulma color variables
// Vikunja specific variables
--grey-50: hsl(210, 20%, 98%);
--grey-100-hsl: 220, 14.3%, 95.9%;
@ -15,9 +187,9 @@
--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
--scheme-main: var(--white);
--grey-darker: var(--grey-700);
--grey-dark: var(--grey-800);
--grey: var(--grey-500);
@ -67,6 +239,12 @@
--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));
--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);
// END Overrides of Bulma defaults
@ -77,12 +255,6 @@
--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%;