44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use a consistent color system

Browse Source 
1. Renames color names in palette. Using names such as "primary" and
"secondary" that are in consistent with designs such as material,
bootstrap and metro UI palettes. It adds `color-` prefix on color
variables in line with Vue Design System.
2. Introduces necessary changes to follow the system color system
   everywhere without using any other color:
     - It changes tooltip background from black to darker primary
     colors.
     - It overrides unset styles from tree component
     - It ensures footer has same color as top menu.
3. Removes opacity CSS changes to have better control on choices. To
   achieve that:
     - It introduces new "light" variants of main colors
     - It switches to colors with different variants (e.g. in Dialogs it
       uses primary color as button as it has variants that can be
       activated on hover meanwhile on-surface color is single).
4. Styles a tags (anchor elements) globally for consistency
This commit is contained in:
undergroundwires
2021-10-11 19:33:34 +02:00
parent 37ad26a082
commit b08a6b5cec
21 changed files with 258 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/presentation/styles/colors.scss
View File

@@ -1,8 +1,25 @@
$white: #fff;
$light-gray: #eceef1;
$gray: darken($light-gray, 30%);
$dark-gray: #616f86;
$slate: darken($light-gray, 70%);
$dark-slate: #2f3133;
$accent: #1abc9c;
$black: #000
/*
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 : #949fb0;
$color-primary-light : lighten($color-primary, 15%);
$color-primary-dark : darken($color-primary, 18%);
$color-primary-darker : darken($color-primary, 40%);
$color-primary-darkest : darken($color-primary, 44%);
$color-on-primary : lighten($color-primary, 30%); // Text/iconography color that is usable on top of primary color
// --- Secondary | Accent color, should be applied sparingly to accent select parts of UI
$color-secondary : #1abc9c;
$color-secondary-light : lighten($color-secondary, 48%);
$color-on-secondary : #fff; // Text/iconography color that is usable on top of secondary color
// --- Surface | Affect surfaces of components, such as cards, sheets, and menus.
$color-surface : #fff;
$color-on-surface : #000; // Text/iconography color that is usable on surface
// Background | Appears behind scrollable content.
$color-background : lighten($color-primary, 30);

8
src/presentation/styles/tooltip.scss
View File

@@ -1,12 +1,12 @@
// based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
@import "@/presentation/styles/colors.scss";
.tooltip {
display: block !important;
z-index: 10000;
.tooltip-inner {
background: $black;
color: $white;
background: $color-primary-darkest;
color: $color-on-primary;
border-radius: 16px;
padding: 5px 10px 4px;
}
@@ -16,7 +16,7 @@
border-style: solid;
position: absolute;
margin: 5px;
border-color: $black;
border-color: $color-primary-darkest;
z-index: 1;
}
&[x-placement^="top"] {

38
src/presentation/styles/tree.scss
View File

@@ -1,41 +1,57 @@
// Overrides base styling for LiquorTree
@import "@/presentation/styles/colors.scss";
$color-tree-bg : $color-primary-darker;
$color-node-arrow : $color-on-primary;
$color-node-fg : $color-on-primary;
$color-node-hover-bg : $color-primary-dark;
$color-node-keyboard-bg : $color-surface;
$color-node-keyboard-fg : $color-on-surface;
$color-node-checkbox-checked-bg : $color-secondary;
$color-node-checkbox-checked-border : $color-secondary;
$color-node-checkbox-checked-checked-tick : $color-on-secondary;
$color-node-checkbox-unchecked-bg : $color-primary-darkest;
$color-node-checkbox-unchecked-border : $color-on-primary;
.tree {
background: $slate;
background: $color-tree-bg;
&-node {
white-space: normal !important;
> .tree-content {
> .tree-anchor > span {
color: $white;
color: $color-node-fg;
text-transform: uppercase;
font-size: 1.5em;
}
&:hover {
background: $dark-gray !important;
background: $color-node-hover-bg !important;
}
}
&.selected { // When using keyboard navigation it higlights current item and its child items
background: $gray;
&.selected { // When using keyboard navigation it highlights current item and its child items
background: $color-node-keyboard-bg;
.tree-text {
color: $black !important;
color: $color-node-keyboard-fg !important; // $block
}
}
}
&-checkbox {
border-color: $color-node-checkbox-unchecked-border !important;
&.checked {
background: $accent !important;
border-color: $accent !important;
background: $color-node-checkbox-checked-bg !important;
border-color: $color-node-checkbox-checked-border !important;
&:after {
border-color: $color-node-checkbox-checked-checked-tick !important;
}
}
&.indeterminate {
border-color: $gray !important;
border-color: $color-node-checkbox-unchecked-border !important;
}
background: $dark-slate !important;
background: $color-node-checkbox-unchecked-bg !important;
}
&-arrow {
&.has-child {
&.rtl:after, &:after {
border-color: $white !important;
border-color: $color-node-arrow !important;
}
}
}