ami/tl-vikunja
1
0
Fork 0
Code Activity

Migrate to bulma-css-variables and introduce dark mode (#954)

Browse Source 
Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/954
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
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
2021-11-22 21:12:54 +00:00
committed by konrad
parent 4ef54f1bc2
commit 46fa43d67f
73 changed files with 605 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/styles/common-imports.scss Normal file
View File

@ -0,0 +1,44 @@
//
// IMPORTANT NOTE:
//
// The styles in this file and all imported styles should not
// create CSS output when compiled!
// Instead they should only define SCSS that gets compiled to nothing.
//
// The reason is that this file is prefixed in _every_ component style so that
// the component has access to the variables, mixins, etc. that
// are defined here.
//
// the default values get overwritten by the definitions above
@import "bulma-css-variables/sass/utilities/_all";
// since $tablet is defined by bulma we can just define it after importing the utilities
$mobile: math.div($tablet, 2);
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$vikunja-font: 'Quicksand', sans-serif;
$thickness: 1px;
$pagination-current-border: var(--primary);
$navbar-item-active-color: var(--primary);
$dropdown-content-shadow: none;
$dropdown-item-hover-background-color: var(--grey-100);
$bulmaswatch-import-font: false !default;
$site-background: var(--grey-100);
$transition-duration: 150ms;
$transition: $transition-duration ease;
$button-height: 34px;
$switch-view-height: 2.69rem;
$navbar-height: 4rem;
$navbar-width: 300px;
$navbar-icon-width: 40px;
$lists-per-row: 5;
$list-height: 150px;
$list-spacing: 1rem;

2
src/styles/components/labels.scss
View File

@ -6,7 +6,7 @@
.tag {
margin: .5rem 0 .5rem .5rem;
background: $grey-200;
background: var(--grey-200);
// FIXME: only used in ListLabels.vue
&.disabled {

4
src/styles/components/task.scss
View File

@ -7,8 +7,8 @@
.modal-container .task-view {
border-radius: $radius;
padding: 1rem;
color: $text;
background-color: $light-background !important;
color: var(--text);
background-color: var(--site-background) !important;
@media screen and (max-width: 800px) {
border-radius: 0;

4
src/styles/components/tooltip.scss
View File

@ -5,7 +5,7 @@
z-index: 10000;
font-size: 0.8rem;
text-align: center;
background: $dark;
background: var(--dark);
color: white;
border-radius: 5px;
padding: 5px 10px 5px;
@ -28,7 +28,7 @@
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $dark;
border-top: 5px solid var(--dark);
&.bottom {
transform: rotate(180deg);

2
src/styles/custom-properties/_index.scss Normal file
View File

@ -0,0 +1,2 @@
@import "colors";
@import "shadows";

122
src/styles/custom-properties/colors.scss Normal file
View File

@ -0,0 +1,122 @@
// 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: 216.5deg;
--primary-s: 100%;
--primary-l: 54.9%;
--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%);
&.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);
}
}

22
src/styles/custom-properties/shadows.scss Normal file
View File

@ -0,0 +1,22 @@
:root {
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl), .12),
0 1px 2px hsla(var(--grey-500-hsl), .24);
--shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
0 2px 4px hsla(var(--grey-500-hsl), .10);
--shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
0 3px 6px hsla(var(--grey-500-hsl), .08);
--shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
0 5px 10px hsla(var(--grey-500-hsl), .05);
&.dark {
// Even darker shadows for dark mode
--shadow-xs: 0 1px 3px hsla(var(--grey-50-hsl), 0.4),
0 1px 2px hsla(var(--grey-50-hsl), 0.8);
--shadow-sm: 0 3px 6px hsla(var(--grey-50-hsl), 0.8),
0 2px 4px hsla(var(--grey-50-hsl), 0.6);
--shadow-md: 0 10px 20px hsla(var(--grey-50-hsl), 0.8),
0 3px 6px hsla(var(--grey-50-hsl), 0.6);
--shadow-lg: 0 15px 25px hsla(var(--grey-50-hsl), 0.8),
0 5px 10px hsla(var(--grey-50-hsl), 0.4);
}
}

14
src/styles/fonts.scss
View File

@ -1,6 +1,6 @@
$font-files-path: '/fonts/';
/* quicksand-regular - latin */
// quicksand-regular - latin
@font-face {
font-family: 'Quicksand';
font-style: normal;
@ -10,7 +10,7 @@ $font-files-path: '/fonts/';
}
/* quicksand-500 - latin */
// quicksand-500 - latin
@font-face {
font-family: 'Quicksand';
font-style: normal;
@ -19,7 +19,7 @@ $font-files-path: '/fonts/';
src: url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2');
}
/* quicksand-700 - latin */
// quicksand-700 - latin
@font-face {
font-family: 'Quicksand';
font-style: normal;
@ -28,7 +28,7 @@ $font-files-path: '/fonts/';
src: url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2');
}
/* open-sans-regular - latin */
// open-sans-regular - latin
@font-face {
font-family: 'Open Sans';
font-style: normal;
@ -37,7 +37,7 @@ $font-files-path: '/fonts/';
src: url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2');
}
/* open-sans-italic - latin */
// open-sans-italic - latin
@font-face {
font-family: 'Open Sans';
font-style: italic;
@ -46,7 +46,7 @@ $font-files-path: '/fonts/';
src: url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2');
}
/* open-sans-700 - latin */
// open-sans-700 - latin
@font-face {
font-family: 'Open Sans';
font-style: normal;
@ -55,7 +55,7 @@ $font-files-path: '/fonts/';
src: url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2');
}
/* open-sans-700italic - latin */
// open-sans-700italic - latin
@font-face {
font-family: 'Open Sans';
font-style: italic;

18
src/styles/global.scss
View File

@ -5,13 +5,15 @@
// This imports are the same as in "bulma/bulma.sass"
// with the expeption of the bulma utilities.
// They are imported globally in variables.scss
@import "bulma/sass/base/_all";
@import "bulma/sass/elements/_all";
@import "bulma/sass/form/_all";
@import "bulma/sass/components/_all";
@import "bulma/sass/grid/_all";
@import "bulma/sass/helpers/_all";
@import "bulma/sass/layout/_all";
@import "bulma-css-variables/sass/base/_all";
@import "bulma-css-variables/sass/elements/_all";
@import "bulma-css-variables/sass/form/_all";
@import "bulma-css-variables/sass/components/_all";
@import "bulma-css-variables/sass/grid/_all";
@import "bulma-css-variables/sass/helpers/_all";
@import "bulma-css-variables/sass/layout/_all";
@import "theme";
@import "components";
@import "components";
@import "custom-properties";

2
src/styles/theme/background.scss
View File

@ -8,7 +8,7 @@
// FIXME: move to pagination component
.pagination-link:not(.is-current) {
background: $light-background;
background: var(--grey-100);
}
.box,

2
src/styles/theme/content.scss
View File

@ -6,7 +6,7 @@
}
.table.has-actions {
border-top: 1px solid $grey-100;
border-top: 1px solid var(--grey-100);
border-radius: 4px;
overflow: hidden;

6
src/styles/theme/scrollbars.scss
View File

@ -1,7 +1,7 @@
$scrollbar-height: 8px;
$scrollbar-track-color: $grey-200;
$scrollbar-thumb-color: $grey-300;
$scrollbar-hover-color: $grey-500;
$scrollbar-track-color: var(--grey-200);
$scrollbar-thumb-color: var(--grey-300);
$scrollbar-hover-color: var(--grey-500);
// Chrome
::-webkit-scrollbar {

18
src/styles/theme/theme.scss
View File

@ -6,7 +6,7 @@
}
:focus {
box-shadow: 0 0 0 2px rgba($primary, 0.5);
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}
:focus:not(:focus-visible) {
@ -15,11 +15,11 @@
:focus-visible,
:-moz-focusring {
box-shadow: 0 0 0 2px rgba($primary, 0.5);
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}
body {
background: $light-background;
background: var(--site-background);
min-height: 100vh;
}
@ -45,7 +45,7 @@ h6 {
&::-moz-progress-bar,
&::-webkit-progress-value {
background: $grey-500;
background: var(--grey-500);
}
@media screen and (max-width: $tablet) {
@ -94,11 +94,11 @@ button.table {
}
.icon:not(.has-text-success) {
color: $grey-300 !important;
color: var(--grey-300) !important;
}
&.has-text-danger .icon {
color: $danger !important;
color: var(--danger) !important;
}
&.is-disabled {
@ -140,7 +140,7 @@ button.table {
}
.dropdown-menu .dropdown-content {
box-shadow: $shadow-md;
box-shadow: var(--shadow-md);
}
.is-strikethrough {
@ -156,6 +156,6 @@ button.table {
}
.box {
border: 1px solid $grey-200;
box-shadow: $shadow-sm;
border: 1px solid var(--grey-200);
box-shadow: var(--shadow-sm);
}

12
src/styles/variables/_index.scss
View File

@ -1,12 +0,0 @@
@import "colors";
@import "shadows";
@import "variables";
// the default values get overwritten by the definitions above
@import "bulma/sass/utilities/_all";
// this is needed so that the shared form variables are globally defined aswell
@import "bulma/sass/form/shared";
// since $tablet is defined by bulma we can just define it after importing the utilities
$mobile: math.div($tablet, 2);

18
src/styles/variables/colors.scss
View File

@ -1,18 +0,0 @@
$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;
// 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;

5
src/styles/variables/shadows.scss
View File

@ -1,5 +0,0 @@
$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
$shadow-xl: 0 20px 40px rgba($grey-500, .2);

41
src/styles/variables/variables.scss
View File

@ -1,41 +0,0 @@
$white: #fff;
$black: hsl(0, 0%, 4%) !default;
$orange: #ff851b;
$green: #00db60;
$red: #ff4136;
$blue: #1973ff;
$primary: $blue;
$info-invert: $white;
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$vikunja-font: 'Quicksand', sans-serif;
$thickness: 1px;
$pagination-current-border: $primary;
$navbar-item-active-color: $primary;
$dropdown-content-shadow: none;
$dropdown-item-hover-background-color: $grey-100;
$bulmaswatch-import-font: false !default;
$light-background: $grey-100;
$transition-duration: 150ms;
$transition: $transition-duration ease;
$button-height: 34px;
$switch-view-height: 2.69rem;
$user-dropdown-width-mobile: 5rem;
$hamburger-menu-icon-spacing: 1rem;
$hamburger-menu-icon-width: 28px;
$navbar-height: 4rem;
$navbar-width: 300px;
$navbar-icon-width: 40px;
$lists-per-row: 5;
$list-height: 150px;
$list-spacing: 1rem;