Add new variables for buttons

Signed-off-by: marco <marcoambrosini@pm.me>

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 2b9d12d2cd495ea884299acba1ec2f7337d1ca3c..5117ff753c2791e4cbe33281a3f2689cf9fba951 100644 (file)
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -260,6 +260,9 @@ input.primary,
 
 /** Handle primary buttons for bright colors */
 @if (luma($color-primary) > 0.8) {
+       :root {
+               --color-primary-light-text: var(--color-primary-text);
+       }
        select,
        button, .button,
        input:not([type='range']),
@@ -278,7 +281,6 @@ input.primary,
                        }
                }
        }
-
 }
 
 @if ($color-primary == #ffffff) {

diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index 86f80611a6c40efea7c53bfe41fe26f677e68160..d475d6d2c66e454aadf8067f91dda9426da481b6 100644 (file)
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -18,15 +18,23 @@
        --color-placeholder-dark: #{$color-placeholder-dark};
 
        --color-primary: #{$color-primary};
+       --color-primary-hover: #{$color-primary-hover};
        --color-primary-light: #{$color-primary-light};
+       --color-primary-light-hover: #{$color-primary-light-hover};
        --color-primary-text: #{$color-primary-text};
+       --color-primary-light-text: #{$color-primary-light-text};
        --color-primary-text-dark: #{$color-primary-text-dark};
        --color-primary-element: #{$color-primary-element};
+       --color-primary-element-hover: #{$color-primary-element-hover};
        --color-primary-element-light: #{$color-primary-element-light};
+       --color-primary-element-lighter: #{$color-primary-element-lighter};
 
        --color-error: #{$color-error};
+       --color-error-hover: #{$color-error-hover};
        --color-warning: #{$color-warning};
+       --color-warning-hover: #{$color-warning-hover};
        --color-success: #{$color-success};
+       --color-success-hover: #{$color-success-hover};
 
        --color-text-maxcontrast: #{$color-text-maxcontrast};
        --color-text-light: #{$color-main-text};
@@ -44,6 +52,8 @@
 
        --color-border: #{$color-border};
        --color-border-dark: #{$color-border-dark};
+
+
        --border-radius: #{$border-radius};
        --border-radius-large: #{$border-radius-large};
        --border-radius-pill: #{$border-radius-pill};
@@ -58,3 +68,4 @@
 
        --header-height: #{$header-height};
 }
+

diff --git a/core/css/variables.scss b/core/css/variables.scss
index cf7d919d72d5092b62bfae54c95c4f76d98a80e2..84646379ef1d5092e00929294a5bfae76b1e2226 100644 (file)
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -44,17 +44,27 @@ $color-placeholder-light: nc-darken($color-main-background, 10%) !default;
 $color-placeholder-dark: nc-darken($color-main-background, 20%) !default;
 
 $color-primary: #0082c9 !default;
+$color-primary-hover: mix($color-primary, $color-main-background, 80%) !default;
+
 $color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
+$color-primary-light-text: $color-primary !default;
+$color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !default;
+
 $color-primary-text: #ffffff !default;
 // do not use nc-darken/lighten in case of overriding because
 // primary-text is independent of color-main-text
 $color-primary-text-dark: darken($color-primary-text, 7%) !default;
 $color-primary-element: $color-primary !default;
+$color-primary-element-hover: mix($color-primary-element, $color-main-background, 80%) !default;
 $color-primary-element-light: lighten($color-primary-element, 15%) !default;
+$color-primary-element-lighter: mix($color-primary-element, $color-main-background, 15%) !default;
 
 $color-error: #e9322d;
+$color-error-hover: mix($color-error, $color-main-background, 80%) !default;
 $color-warning: #eca700;
+$color-warning-hover: mix($color-warning, $color-main-background, 80%) !default;
 $color-success: #46ba61;
+$color-success-hover: mix($color-success, $color-main-background, 80%) !default;
 // used for svg
 $color-white: #fff;
 $color-black: #000;
@@ -81,6 +91,7 @@ $color-box-shadow: transparentize(nc-darken($color-main-background, 70%), 0.5) !
 $color-border: nc-darken($color-main-background, 7%) !default;
 // darker border like inputs or very visible elements
 $color-border-dark: nc-darken($color-main-background, 14%) !default;
+
 $border-radius: 3px !default;
 $border-radius-large: 10px !default;
 // Pill-style button, value is large so big buttons also have correct roundness