29 lines
1.3 KiB
SCSS
29 lines
1.3 KiB
SCSS
/*
|
|
Colors used throughout the application
|
|
Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
|
|
Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
|
|
*/
|
|
|
|
// --- Primary | The color displayed most frequently across screens and components
|
|
$color-primary : #3a65ab;
|
|
$color-primary-light : lighten($color-primary, 30%);
|
|
$color-primary-dark : darken($color-primary, 18%);
|
|
$color-primary-darker : darken($color-primary, 32%);
|
|
$color-primary-darkest : darken($color-primary, 44%);
|
|
// Text/iconography color that is usable on top of primary color
|
|
$color-on-primary : #e4f1fe;
|
|
|
|
// --- Secondary | Accent color, should be applied sparingly to accent select parts of UI
|
|
$color-secondary : #00D1AD;
|
|
$color-secondary-light : lighten($color-secondary, 48%);
|
|
// Text/iconography color that is usable on top of secondary color
|
|
$color-on-secondary : #005051;
|
|
|
|
// --- Surface | Affect surfaces of components, such as cards, sheets, and menus.
|
|
$color-surface : #fff;
|
|
// Text/iconography color that is usable on surface
|
|
$color-on-surface : #4d5156;
|
|
|
|
// Background | Appears behind scrollable content.
|
|
$color-background : #e6ecf4;
|