Fix for darken/lighten vars and new global colours vars to unify design

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 27 insertions, 12 deletions

diff --git a/core/css/variables.scss b/core/css/variables.scss
index 5d6c616e065..d66faeca0d8 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -1,31 +1,46 @@
+// SCSS darken/lighten function override 
+@function nc-darken($color, $value) {
+	@return darken($color, $value);
+}
+
+@function nc-lighten($color, $value) {
+	@return lighten($color, $value);
+}
+
+// SCSS variables
 $color-main-text: #000000;
 $color-main-background: #ffffff;
+
+// used for different active/disabled states
+$color-background-dark: nc-darken($color-main-background, 7%);
+$color-background-darker: nc-darken($color-main-background, 14%);
+
 $color-primary: #0082c9;
 $color-primary-text: #ffffff;
+$color-primary-text-dark: nc-darken($color-primary-text, 7%);
+$color-primary-element: $color-primary;
+
 $color-error: #e9322d;
 $color-warning: #eca700;
 $color-success: #46ba61;
-$color-primary-element: $color-primary;
 
 // rgb(118, 118, 118) / #767676
 // min. color contrast for normal text on white background according to WCAG AA
 // (Works as well: color: #000; opacity: 0.57;)
-$color-text-details: #767676;
+$color-text-maxcontrast: nc-lighten($color-main-text, 46.2%);
+$color-text-light: nc-lighten($color-main-text, 15%);
+$color-text-lighter: nc-lighten($color-main-text, 30%);
 
 $image-logo: url('../img/logo.svg?v=1');
 $image-login-background: url('../img/background.png?v=2');
 
 $color-loading: #969696;
 $color-loading-dark: #bbbbbb;
-$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
-$color-border: nc-darken($color-main-background, 8%);
-$border-radius: 3px;
 
-// SCSS darken/lighten function override 
-@function nc-darken($color, $value) {
-	@return darken($color, $value);
-}
+$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
 
-@function nc-lighten($color, $value) {
-	@return lighten($color, $value);
-}
\ No newline at end of file
+// light border like file table or app-content list
+$color-border: nc-darken($color-main-background, 7%);
+// darker border like inputs or very visible elements
+$color-border-dark: nc-darken($color-main-background, 14%);
+$border-radius: 3px;