@c8y/style 1023.17.19 → 1023.22.2

package/variables/_color-vars.less

@@ -15,34 +15,19 @@
 @gray-10: var(--c8y-palette-gray-10);
 
 /* Brand */
-@brand-primary: var(--brand-primary, var(--c8y-brand-primary));
-@brand-primary-light: var(--brand-light, var(--c8y-brand-light));
-@brand-primary-dark: var(--brand-dark, var(--c8y-brand-dark));
-@brand-complementary: var(--brand-complementary, var(--c8y-brand-complementary));
-@brand-10: var(--c8y-brand-10);
-@brand-20: var(--c8y-brand-20);
-@brand-30: var(--c8y-brand-30);
-@brand-40: var(--c8y-brand-40);
-@brand-50: var(--c8y-brand-50);
-@brand-60: var(--c8y-brand-60);
-@brand-70: var(--c8y-brand-70);
-@brand-80: var(--c8y-brand-80);
-
-@brand-accent: var(--c8y-brand-accent);
-@brand-accent-dark: var(--c8y-brand-accent-dark);
-@brand-accent-light: var(--c8y-brand-accent-light);
+/* NOTE: @brand-primary, @brand-light, @brand-dark, @brand-accent, etc.  */
+/* are defined in _color-defaults.less with actual color values */
+/* and can be overridden AFTER importing extend.less. */
+/* They are NO LONGER redefined here as CSS var() references. */
 
 /* Status, feedback states and alerts */
-@status-success: var(--palette-status-success, var(--c8y-palette-status-success));
+/* NOTE: Status color variables are also defined in _color-defaults.less */
 @status-success-light: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
 @status-success-dark: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
-@status-info: var(--palette-status-info, var(--c8y-palette-status-info));
 @status-info-light: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
 @status-info-dark: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
-@status-danger: var(--palette-status-danger, var(--c8y-palette-status-danger));
 @status-danger-light: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
 @status-danger-dark: var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark));
-@status-warning: var(--palette-status-warning, var(--c8y-palette-status-warning));
 @status-warning-light: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
 @status-warning-high: var(--c8y-palette-status-warning-high);
 @status-warning-dark: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
@@ -50,34 +35,34 @@
 
 @state-success-text: @text-color;
 @state-success-bg: transparent;
-@state-success-border: @status-success;
+@state-success-border: var(--c8y-palette-status-success);
 
 @state-info-text: @text-color;
 @state-info-bg: transparent;
-@state-info-border: @status-info;
+@state-info-border: var(--c8y-palette-status-info);
 
 @state-system-text: @text-color;
 @state-system-bg: transparent;
-@state-system-border: @brand-primary;
+@state-system-border: var(--brand-primary, var(--c8y-brand-primary));
 
 @state-warning-text: @text-color;
 @state-warning-bg: transparent;
-@state-warning-border: @status-warning;
+@state-warning-border: var(--c8y-palette-status-warning);
 
 @state-danger-text: @text-color;
 @state-danger-bg: transparent;
-@state-danger-border: @status-danger;
+@state-danger-border: var(--c8y-palette-status-danger);
 
 /* NAVIGATOR */
-@navigator-background-default: var(--navigator-bg-color, var(--c8y-navigator-bg-color));
-@navigator-header-background: var(--navigator-header-bg, var(--c8y-navigator-header-bg));
-@navigator-text-color: var(--navigator-text-color, var(--c8y-navigator-text-color));
-@navigator-header-color: var(--navigator-title-color, var(--c8y-navigator-title-color));
+@navigator-background-default: var(--navigator-bg-color, var(--c8y-navigator-background-default));
+@navigator-header-background: var(--navigator-header-bg, var(--c8y-navigator-header-background));
+@navigator-text-color: var(--navigator-text-color, var(--c8y-navigator-text-color-default));
+@navigator-header-color: var(--navigator-title-color, var(--c8y-navigator-header-color));
 @navigator-separator-color: var(--navigator-separator-color, var(--c8y-navigator-separator-color));
-@navigator-text-color-selected: var(--navigator-active-color, var(--navigator-color-active, var(--c8y-navigator-color-active)));
-@navigator-background-selected: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
-@navigator-border-selected: var(--navigator-border-active, var(--c8y-navigator-border-active));
-@navigator-background-active: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
+@navigator-text-color-selected: var(--navigator-active-color, var(--navigator-color-active, var(--c8y-navigator-text-color-active, var(--c8y-navigator-text-color-selected))));
+@navigator-background-selected: var(--navigator-active-bg, var(--c8y-navigator-background-selected));
+@navigator-border-selected: var(--navigator-border-active, var(--c8y-navigator-border-selected));
+@navigator-background-active: var(--navigator-active-bg, var(--c8y-navigator-background-active));
 @navigator-scrollbar-track-color: var(--c8y-navigator-scrollbar-track);
 @navigator-scrollbar-thumb-color: var(--c8y-navigator-scrollbar-thumb-default);
 @navigator-scrollbar-thumb-color-hover: var(--c8y-navigator-scrollbar-thumb-hover);
@@ -116,15 +101,15 @@
 @header-background-hover: var(--c8y-main-header-background-hover);
 @header-background-active: var(--c8y-main-header-background-active);
 @header-text-color: var(--header-text-color, var(--c8y-main-header-text-color-default));
-@header-text-color-hover: var(--header-hover-color, var(--c8y-header-hover-color));
+@header-text-color-hover: var(--header-hover-color, var(--c8y-main-header-text-color-hover));
 @header-border-color: var(--header-border-color, var(--c8y-main-header-border-color));
 @header-shadow: var(--c8y-main-header-shadow);
 
 /* TYPOGRAPHY COLORS */
 
 /* Text */
-@text-color: var(--text-color, var(--c8y-component-color-default, var(--c8y-root-component-color-default)));
-@text-muted: var(--c8y-component-color-text-muted, var(--c8y-root-component-color-text-muted));
+@text-color: var(--text-color, var(--c8y-text-color));
+@text-muted: var(--text-muted, var(--c8y-text-muted));
 @headings-color: var(--c8y-headings-color);
 @abbr-border-color: @gray-80;
 @blockquote-small-color: @text-muted;
@@ -165,10 +150,10 @@
 
 @component-actions-opacity: var(--c8y-component-actions-opacity, var(--c8y-root-component-actions-opacity));
 
-@component-form-label-color: var(--c8y-component-form-label-color, var(--c8y-root-component-form-label-color));
-@component-form-legend-color: var(--c8y-component-form-legend-color, var(--c8y-root-component-form-legend-color));
+@component-form-label-color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
+@component-form-legend-color: var(--c8y-component-form-legend-color, var(--c8y-form-legend-color));
 
-@component-form-control-border-color: var(--c8y-component-form-control-border-color, var(--c8y-root-component-form-control-border-color));
+@component-form-control-border-color: var(--c8y-component-form-control-border-color, var(--c8y-form-control-border-color-default));
 @component-placeholder-color: var(--c8y-component-placeholder-color, var(--c8y-root-component-placeholder-color));
 
 @component-accent-color: var(--c8y-component-accent-color, var(--c8y-root-component-accent-color));
@@ -238,3 +223,75 @@
 @selectize-color-optgroup: @selectize-color-dropdown;
 @selectize-color-optgroup-text: @selectize-color-text;
 @selectize-arrow-color: @component-brand-primary;
+
+/* ============================================================================
+   CSS Custom Properties based on LESS Variables
+
+   These CSS custom properties are set based on the LESS variable values,
+   allowing LESS variable overrides to work for backwards compatibility.
+
+   When a user overrides @brand-primary before importing main.less,
+   these CSS custom properties will be set to the overridden value,
+   which will then be used throughout the application.
+
+   IMPORTANT: We only override the --c8y-* design tokens when the user has
+   explicitly overridden the LESS variables. The default values come from
+   the design tokens (c8y-design-tokens.less and c8y-design-tokens-dark.less)
+   which correctly handle light vs dark theme defaults.
+   ============================================================================ */
+
+/* Check if user overrode @brand-primary by comparing against default */
+& when not (@brand-primary = @brand-primary-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    /* User overrode @brand-primary, so apply it to both themes */
+    --c8y-brand-primary: @brand-primary;
+    --c8y-brand-light: @brand-primary-light;
+    --c8y-brand-dark: @brand-primary-dark;
+    --c8y-brand-complementary: @brand-complementary;
+  }
+}
+
+& when not (@brand-10 = @brand-10-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-brand-10: @brand-10;
+    --c8y-brand-20: @brand-20;
+    --c8y-brand-30: @brand-30;
+    --c8y-brand-40: @brand-40;
+    --c8y-brand-50: @brand-50;
+    --c8y-brand-60: @brand-60;
+    --c8y-brand-70: @brand-70;
+    --c8y-brand-80: @brand-80;
+  }
+}
+
+& when not (@brand-accent = @brand-accent-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-brand-accent: @brand-accent;
+    --c8y-brand-accent-dark: @brand-accent-dark;
+    --c8y-brand-accent-light: @brand-accent-light;
+  }
+}
+
+& when not (@status-success = @status-success-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-palette-status-success: @status-success;
+  }
+}
+
+& when not (@status-info = @status-info-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-palette-status-info: @status-info;
+  }
+}
+
+& when not (@status-danger = @status-danger-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-palette-status-danger: @status-danger;
+  }
+}
+
+& when not (@status-warning = @status-warning-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-palette-status-warning: @status-warning;
+  }
+}

package/variables/_color-vars.scss

@@ -0,0 +1,303 @@
+@use 'color-defaults' as *;
+@use 'forms-vars' as *;
+
+$palette-high: var(--c8y-palette-high);
+$palette-low: var(--c8y-palette-low);
+$black: black; // we need it as a color object
+
+/* grays */
+$gray-100: var(--c8y-palette-gray-100);
+$gray-90: var(--c8y-palette-gray-90);
+$gray-80: var(--c8y-palette-gray-80);
+$gray-70: var(--c8y-palette-gray-70);
+$gray-60: var(--c8y-palette-gray-60);
+$gray-50: var(--c8y-palette-gray-50);
+$gray-40: var(--c8y-palette-gray-40);
+$gray-30: var(--c8y-palette-gray-30);
+$gray-20: var(--c8y-palette-gray-20);
+$gray-10: var(--c8y-palette-gray-10);
+
+/* TYPOGRAPHY COLORS - Defined early as used throughout */
+/* Text */
+$text-color: var(--text-color, var(--c8y-text-color));
+$text-muted: var(--text-muted, var(--c8y-text-muted));
+
+/* Brand */
+/* NOTE: $brand-primary, $brand-light, $brand-dark, $brand-accent, etc.  */
+/* are defined in _color-defaults.less with actual color values */
+/* and can be overridden AFTER importing extend.less. */
+/* They are NO LONGER redefined here as CSS var() references. */
+
+/* Status, feedback states and alerts */
+/* NOTE: Status color variables are also defined in _color-defaults.less */
+$status-success-light: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
+$status-success-dark: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
+$status-info-light: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
+$status-info-dark: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
+$status-danger-light: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
+$status-danger-dark: var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark));
+$status-warning-light: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
+$status-warning-high: var(--c8y-palette-status-warning-high);
+$status-warning-dark: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
+$status-system: var(--palette-status-system, var(--c8y-palette-status-system));
+
+$state-success-text: $text-color;
+$state-success-bg: transparent;
+$state-success-border: var(--c8y-palette-status-success);
+
+$state-info-text: $text-color;
+$state-info-bg: transparent;
+$state-info-border: var(--c8y-palette-status-info);
+
+$state-system-text: $text-color;
+$state-system-bg: transparent;
+$state-system-border: var(--brand-primary, var(--c8y-brand-primary));
+
+$state-warning-text: $text-color;
+$state-warning-bg: transparent;
+$state-warning-border: var(--c8y-palette-status-warning);
+
+$state-danger-text: $text-color;
+$state-danger-bg: transparent;
+$state-danger-border: var(--c8y-palette-status-danger);
+
+/* NAVIGATOR */
+$navigator-background-default: var(--navigator-bg-color, var(--c8y-navigator-bg-color));
+$navigator-header-background: var(--navigator-header-bg, var(--c8y-navigator-header-bg));
+$navigator-text-color: var(--navigator-text-color, var(--c8y-navigator-text-color));
+$navigator-header-color: var(--navigator-title-color, var(--c8y-navigator-title-color));
+$navigator-separator-color: var(--navigator-separator-color, var(--c8y-navigator-separator-color));
+$navigator-text-color-selected: var(--navigator-active-color, var(--navigator-color-active, var(--c8y-navigator-text-color-active, var(--c8y-navigator-text-color-selected))));
+$navigator-background-selected: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
+$navigator-border-selected: var(--navigator-border-active, var(--c8y-navigator-border-active));
+$navigator-background-active: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
+$navigator-scrollbar-track-color: var(--c8y-navigator-scrollbar-track);
+$navigator-scrollbar-thumb-color: var(--c8y-navigator-scrollbar-thumb-default);
+$navigator-scrollbar-thumb-color-hover: var(--c8y-navigator-scrollbar-thumb-hover);
+
+$navColor: $navigator-background-default;
+$navColorHeader: $navigator-header-background;
+$navigator-text-color-default: $navigator-text-color;
+$navigator-title-color: $navigator-header-color;
+$navigator-color-active: $navigator-text-color-selected;
+$navigator-active-bg: $navigator-background-selected;
+
+// when set, adds a gradient in navbar and header
+$grad-top: "";
+$grad-bottom: "";
+
+/* RIGHT DRAWER */
+
+$drawer-bg: var(--right-drawer-background-default, var(--navigator-bg-color, var(--c8y-right-drawer-background-default)));
+$drawer-background-default: $drawer-bg;
+$drawer-color: var(--right-drawer-text-color-default, var(--navigator-text-color, var(--c8y-right-drawer-text-color-default)));
+$drawer-separator-color: var(--c8y-right-drawer-separator-color);
+$drawer-background-active: var(--c8y-right-drawer-background-active);
+$drawer-border-selected: var(--c8y-right-drawer-border-selected);
+$drawer-legend: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));
+
+/* change the used icons. Available options are:
+-'white'for using the same colors as .c8y-icon-white
+-'duo'for using the same colors as .c8y-icon-duocolor
+-'none' to use the default $drawer-color
+*/
+$drawer-c8y-icon: 'none';
+
+
+/* MAIN HEADER */
+$headerColor: var(--header-color, var(--c8y-header-color));
+$header-background-hover: var(--c8y-main-header-background-hover);
+$header-background-active: var(--c8y-main-header-background-active);
+$header-text-color: var(--header-text-color, var(--c8y-main-header-text-color-default));
+$header-text-color-hover: var(--header-hover-color, var(--c8y-header-hover-color));
+$header-border-color: var(--header-border-color, var(--c8y-main-header-border-color));
+$header-shadow: var(--c8y-main-header-shadow);
+
+/* TYPOGRAPHY COLORS */
+
+/* Text - $text-color and $text-muted defined at top of file */
+$headings-color: var(--c8y-headings-color);
+$abbr-border-color: var(--c8y-abbr-border-color);
+$blockquote-small-color: $text-muted;
+$blockquote-border-color: var(--c8y-blockquote-border-color);
+
+/* Headings */
+$headings-small-color: $text-muted;
+
+/* Links */
+$link-color: var(--link-color, var(--c8y-component-color-link, var(--c8y-root-component-color-link)));
+$link-color-hover: var(--link-hover-color, var(--c8y-component-color-link-hover, var(--c8y-root-component-color-link-hover)));
+
+/* COMPONENTS */
+$component-background-active: var(--c8y-component-background-active, var(--c8y-root-component-background-active));
+$component-background-default: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
+$component-background-expanded: var(--c8y-component-background-expanded, var(--c8y-root-component-background-expanded));
+$component-background-odd: var(--c8y-component-background-odd, var(--c8y-root-component-background-odd));
+$component-background-expanded-gradient: var(--c8y-component-background-expanded-gradient, var(--c8y-root-component-background-expanded-gradient));
+$component-background-disabled: var(--c8y-component-background-disabled, var(--c8y-root-component-background-disabled));
+$component-background-hover: var(--c8y-component-background-hover, var(--c8y-root-component-background-hover));
+
+$component-border-color: var(--c8y-component-border-color, var(--c8y-root-component-border-color));
+
+$component-color-actions: var(--c8y-component-color-actions, var(--c8y-root-component-color-actions));
+$component-color-actions-hover: var(--c8y-component-color-actions-hover, var(--c8y-root-component-color-actions-hover));
+$component-color-active: var(--c8y-component-color-active, var(--c8y-root-component-color-active));
+$component-color-default: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
+$component-color-expanded: var(--c8y-component-color-expanded, var(--c8y-root-component-color-expanded));
+$component-color-link: $link-color;
+$component-color-link-hover: $link-color-hover;
+$component-color-odd: var(--c8y-component-color-odd, var(--c8y-root-component-color-odd));
+$component-color-text-muted: var(--c8y-component-color-text-muted, var(--c8y-root-component-color-text-muted));
+$component-color-accent: var(--c8y-component-color-accent, var(--c8y-root-component-color-accent));
+$component-color-disabled: var(--c8y-component-color-disabled, var(--c8y-root-component-color-disabled));
+
+$component-color-focus: var(--c8y-component-color-focus, var(--c8y-root-component-color-focus));
+$component-background-focus: var(--c8y-component-background-focus, var(--c8y-root-component-background-focus));
+
+$component-actions-opacity: var(--c8y-component-actions-opacity, var(--c8y-root-component-actions-opacity));
+
+$component-form-label-color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
+$component-form-legend-color: var(--c8y-component-form-legend-color, var(--c8y-form-legend-color));
+
+$component-form-control-border-color: var(--c8y-component-form-control-border-color, var(--c8y-form-control-border-color-default));
+$component-placeholder-color: var(--c8y-component-placeholder-color, var(--c8y-root-component-placeholder-color));
+
+$component-accent-color: var(--c8y-component-accent-color, var(--c8y-root-component-accent-color));
+
+$component-brand-primary: var(--c8y-component-brand-primary, var(--c8y-root-component-brand-primary));
+$component-realtime-added: var(--c8y-component-realtime-added, var(--c8y-root-component-realtime-added));
+$component-pulse-color: var(--c8y-component-pulse-color, var(--c8y-root-component-pulse-color));
+$component-spinner-color: var(--c8y-component-spinner-color, var(--c8y-root-component-spinner-color));
+
+$component-disabled-opacity: var(--c8y-component-disabled-opacity, var(--c8y-root-component-opacity-disabled));
+
+$component-icon-white-color-light: var(--c8y-component-icon-white-color-light, var(--c8y-root-component-icon-white-color-light, $brand-primary-light));
+$component-icon-white-color-dark: var(--c8y-component-icon-white-color-dark, var(--c8y-root-component-icon-white-color-dark, $palette-high));
+$component-icon-dark-color-light: var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, $brand-primary-light));
+$component-icon-dark-color-dark: var(--c8y-component-icon-dark-color-dark, var(--c8y-root-component-icon-dark-color-dark, $brand-primary-dark));
+$component-icon-color: var(--c8y-component-icon-color, var(--c8y-root-component-icon-color));
+
+$component-scrollbar-thumb-default: var(--c8y-component-scrollbar-thumb-default, var(--c8y-root-component-scrollbar-thumb-default));
+$component-scrollbar-thumb-hover: var(--c8y-component-scrollbar-thumb-hover, var(--c8y-root-component-scrollbar-thumb-hover));
+$component-scrollbar-track: var(--c8y-component-scrollbar-track, var(--c8y-root-component-scrollbar-track));
+
+/* Icons */
+$icon-white-color-light: $component-icon-white-color-light;
+$icon-white-color-dark: $component-icon-white-color-dark;
+$icon-dark-color-light: $component-icon-dark-color-light;
+$icon-dark-color-dark: $component-icon-dark-color-dark;
+
+/* Page sticky header */
+$page-sticky-header-background-default: var(--c8y-page-sticky-header-background-default);
+$page-sticky-header-color-default: var(--c8y-page-sticky-header-color-default);
+$page-sticky-header-color-hover: var(--c8y-page-sticky-header-color-hover);
+$page-sticky-header-color-active: var(--c8y-page-sticky-header-color-active);
+
+/* Layout */
+$body-background-color: var(--body-background-color, var(--c8y-body-background-color));
+
+$hr-border: $component-border-color;
+
+$spinner-color: $component-spinner-color;
+
+$expanded-bg-color: $component-background-expanded;
+
+// realtime pulse color
+$pulse-color: $component-pulse-color;
+
+//SELECTIZE COLORS
+// ** from selectize-vars.less
+$selectize-color-text: $form-control-color-default;
+$selectize-color-border: $form-control-border-color-default;
+$selectize-color-highlight: var(--c8y-brand-7);
+$selectize-color-input: $palette-high;
+$selectize-color-input-full: $selectize-color-input;
+$selectize-color-disabled: $gray-100;
+$selectize-color-item: $gray-90;
+$selectize-color-item-text: $selectize-color-text;
+$selectize-color-item-border: $gray-80;
+$selectize-color-item-active: $gray-90;
+$selectize-color-item-active-text: $component-color-active;
+$selectize-color-item-active-border: $gray-80;
+$selectize-color-dropdown: $component-background-default;
+$selectize-color-dropdown-border: $selectize-color-border;
+$selectize-color-dropdown-border-top: $component-background-default;
+$selectize-color-dropdown-item-active: $component-background-active;
+$selectize-color-dropdown-item-active-text: $component-color-active;
+$selectize-color-dropdown-item-create-text: $selectize-color-dropdown-item-active-text;
+$selectize-color-dropdown-item-create-active-text: $selectize-color-dropdown-item-active-text;
+$selectize-color-optgroup: $selectize-color-dropdown;
+$selectize-color-optgroup-text: $selectize-color-text;
+$selectize-arrow-color: $component-brand-primary;
+
+/* ============================================================================
+   CSS Custom Properties based on LESS Variables
+
+   These CSS custom properties are set based on the LESS variable values,
+   allowing LESS variable overrides to work for backwards compatibility.
+
+   When a user overrides $brand-primary before importing main.less,
+   these CSS custom properties will be set to the overridden value,
+   which will then be used throughout the application.
+
+   IMPORTANT: We only override the --c8y-* design tokens when the user has
+   explicitly overridden the LESS variables. The default values come from
+   the design tokens (c8y-design-tokens.less and c8y-design-tokens-dark.less)
+   which correctly handle light vs dark theme defaults.
+   ============================================================================ */
+
+/* Check if user overrode $brand-primary by comparing against default */
+@if ($brand-primary != $brand-primary-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    /* User overrode $brand-primary, so apply it to both themes */
+    --c8y-brand-primary: #{$brand-primary};
+    --c8y-brand-light: #{$brand-primary-light};
+    --c8y-brand-dark: #{$brand-primary-dark};
+    --c8y-brand-complementary: #{$brand-complementary};
+  }
+}
+
+@if ($brand-10 != $brand-10-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-brand-10: #{$brand-10};
+    --c8y-brand-20: #{$brand-20};
+    --c8y-brand-30: #{$brand-30};
+    --c8y-brand-40: #{$brand-40};
+    --c8y-brand-50: #{$brand-50};
+    --c8y-brand-60: #{$brand-60};
+    --c8y-brand-70: #{$brand-70};
+    --c8y-brand-80: #{$brand-80};
+  }
+}
+
+@if ($brand-accent != $brand-accent-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-brand-accent: #{$brand-accent};
+    --c8y-brand-accent-dark: #{$brand-accent-dark};
+    --c8y-brand-accent-light: #{$brand-accent-light};
+  }
+}
+
+@if ($status-success != $status-success-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-palette-status-success: #{$status-success};
+  }
+}
+
+@if ($status-info != $status-info-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-palette-status-info: #{$status-info};
+  }
+}
+
+@if ($status-danger != $status-danger-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-palette-status-danger: #{$status-danger};
+  }
+}
+
+@if ($status-warning != $status-warning-default) {
+  :root, .c8y-light-theme, .c8y-dark-theme {
+    --c8y-palette-status-warning: #{$status-warning};
+  }
+}

package/variables/_components-vars.scss

@@ -0,0 +1,22 @@
+// Component background colors (needed by forms-vars)
+$component-background-default: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
+
+$component-border-width:                        var(--c8y-component-border-width, var(--c8y-root-component-border-width));
+$component-border-style:                        var(--c8y-component-border-style, var(--c8y-root-component-border-style));
+$component-border-radius-base:                  var(--c8y-component-border-radius-base, var(--c8y-root-component-border-radius-base));
+$component-border-radius-large:                 var(--c8y-component-border-radius-large, var(--c8y-root-component-border-radius-large));
+$component-border-radius-small:                 var(--c8y-component-border-radius-small, var(--c8y-root-component-border-radius-small));
+$component-border-radius-focus:                 var(--c8y-component-border-radius-focus, var(--c8y-root-component-border-radius-focus));
+
+$component-border-caret-width:                  var(--c8y-component-border-caret-width, var(--c8y-root-component-border-caret-width));
+
+$component-padding-base-horizontal:             var(--c8y-component-padding-base-horizontal, var(--c8y-root-component-padding-base-horizontal));
+$component-padding-base-vertical:               var(--c8y-component-padding-base-vertical, var(--c8y-root-component-padding-base-vertical));
+$component-padding-large-horizontal:            var(--c8y-component-padding-large-horizontal, var(--c8y-root-component-padding-large-horizontal));
+$component-padding-large-vertical:              var(--c8y-component-padding-large-vertical, var(--c8y-root-component-padding-large-vertical));
+$component-padding-small-horizontal:            var(--c8y-component-padding-small-horizontal, var(--c8y-root-component-padding-small-horizontal));
+$component-padding-small-vertical:              var(--c8y-component-padding-small-vertical, var(--c8y-root-component-padding-small-vertical));
+$component-padding-xs-horizontal:               var(--c8y-component-padding-xs-horizontal, var(--c8y-root-component-padding-xs-horizontal));
+$component-padding-xs-vertical:                 var(--c8y-component-padding-xs-vertical, var(--c8y-root-component-padding-small-vertical));
+$component-padding:                             var(--c8y-component-padding, var(--c8y-root-component-padding-default));
+$component-actions-opacity:                     var(--c8y-component-actions-opacity, var(--c8y-root-component-actions-opacity));