@c8y/style 1023.17.20 → 1023.22.2

package/variables/_progress-bars-vars.scss

@@ -0,0 +1,19 @@
+@use 'sass:math';
+@use 'color-vars' as *;
+
+//** Background color of the whole progress component
+$progress-bg:                                   rgba($black, math.div(5, 100));
+//** Progress bar text color
+$progress-bar-color:                            $palette-high;
+//** Default progress bar color
+$progress-bar-bg:                               var(--brand-primary, var(--c8y-brand-primary));
+//** Success progress bar color
+$progress-bar-success-bg:                       var(--c8y-palette-status-success);
+//** Warning progress bar color
+$progress-bar-warning-bg:                       var(--c8y-palette-status-warning);
+//** Danger progress bar color
+$progress-bar-danger-bg:                        var(--c8y-palette-status-danger);
+//** Info progress bar color
+$progress-bar-info-bg:                          var(--c8y-palette-status-info);
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius:                        10px;

package/variables/_scaffolding.scss

@@ -0,0 +1,33 @@
+@use 'sass:string';
+@use 'color-defaults' as *;
+@use 'color-vars' as *;
+
+//## Settings for some of the most global styles.
+$mcontainer-bg-color:       $body-background-color; // mcontainer
+$link-hover-decoration:     underline; //** Link hover decoration.
+
+// realtime colors
+$realtimeEnd:               $gray-90;
+$realtimeStart:             $gray-50;
+$realtimeOn:                $status-success;
+$realtimeOff:               $status-danger;
+
+// Z-index master list
+// Warning: Avoid customizing these values.
+$zindex-navbar:             1001;
+$zindex-dropdown:           1001;
+$zindex-popover:            1060;
+$zindex-tooltip:            1070;
+$zindex-navbar-fixed:       1030;
+$zindex-action-bar:         1030;
+$zindex-modal-background:   1040;
+$zindex-modal:              1050;
+$zindex-alerts:             1080;
+$zindex-error-detail:       1090;
+
+$use-relative-paths:        false !default;
+$used-as-base:              false !default;
+$extending:                 false !default; // check if this is being extended by another branding
+$logo-login:                string.unquote('.mainlogo');
+$logo-navigator:            string.unquote('.navigator .title .tenant-brand');
+$font-path:                 'font/'; // Deprecated, just to prevent eventual errors of undefined vars

package/variables/_selectize-vars.scss

@@ -0,0 +1,37 @@
+@use 'color-vars' as *;
+@use 'components-vars' as *;
+@use 'layout-vars' as *;
+
+$selectize-font-family:                   inherit;
+$selectize-font-smoothing:                inherit;
+$selectize-font-size:                     inherit;
+$selectize-line-height:                   1.42857143;
+
+$selectize-lighten-disabled-item:         30%;
+$selectize-lighten-disabled-item-text:    30%;
+$selectize-lighten-disabled-item-border:  30%;
+$selectize-opacity-disabled:              0.5;
+
+$selectize-shadow-input:                  inset 0 1px 1px rgba(0,0,0,0.1);
+$selectize-shadow-input-focus:            inset 0 1px 2px rgba(0,0,0,0.15);
+
+$selectize-border:                        1px solid $selectize-color-border;
+$selectize-border-radius:                 0;
+
+$selectize-width-item-border:             0;
+$selectize-max-height-dropdown:           200px;
+
+$selectize-padding-x:                     10px;
+$selectize-padding-y:                     6px;
+$selectize-padding-item-x:                6px;
+$selectize-padding-item-y:                2px;
+$selectize-padding-dropdown-item-x:       $selectize-padding-x;
+$selectize-padding-dropdown-item-y:       5px;
+$selectize-margin-item-x:                 3px;
+$selectize-margin-item-y:                 3px;
+
+$selectize-arrow-size:                    5px;
+$selectize-arrow-offset:                  $size-16;
+
+$selectize-caret-margin:                  0 2px 0 0;
+$selectize-caret-margin-rtl:              0 4px 0 -2px;

package/variables/_tables-vars.scss

@@ -0,0 +1,7 @@
+@use 'color-vars' as *;
+@use 'layout-vars' as *;
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding-default:                       var(--c8y-table-cell-padding-default);
+//** Padding for cells in `.table-condensed`.
+$table-cell-padding-condensed:                     var(--c8y-table-cell-padding-condensed);

package/variables/_tag-vars.less

@@ -5,7 +5,7 @@
 // TODO: remove the fix after updating the branding feature with the new shades of the primary color
 // @tag--background-primary:                              @brand-80;
 // @tag--color-primary:                                   @brand-20;
-@tag--background-primary:                              @brand-primary;
+@tag--background-primary:                              var(--brand-primary, var(--c8y-brand-primary));
 @tag--color-primary:                                   @palette-high;
 
 // Success tag background color

package/variables/_tag-vars.scss

@@ -0,0 +1,38 @@
+@use 'color-vars' as *;
+
+// Default tag background color
+$tag--background-default:                              $gray-80;
+
+// Primary tag background color
+// TODO: remove the fix after updating the branding feature with the new shades of the primary color
+// $tag--background-primary:                              $brand-80;
+// $tag--color-primary:                                   $brand-20;
+$tag--background-primary:                              var(--brand-primary, var(--c8y-brand-primary));
+$tag--color-primary:                                   $palette-high;
+
+// Success tag background color
+$tag--background-success:                              $status-success-light;
+$tag--color-success:                                   $status-success-dark;
+
+// Info tag background color
+$tag--background-info:                                 $status-info-light;
+$tag--color-info:                                      $status-info-dark;
+
+// Warning tag background color
+$tag--background-warning:                              $status-warning-light;
+$tag--color-warning:                                   $status-warning-dark;
+
+// Danger tag background color
+$tag--background-danger:                               $status-danger-light;
+$tag--color-danger:                                    $status-danger-dark;
+
+// Default tag text color
+$tag--color-light:                                     $palette-high;
+
+// Default tag text color
+$tag--color-dark:                                      $text-color;
+
+// Default text color of a linked tag
+$tag--link-hover-color:                                $palette-high;
+
+

package/variables/_thumbnail-vars.scss

@@ -0,0 +1,12 @@
+@use 'color-vars' as *;
+@use 'components-vars' as *;
+
+$thumbnail-padding:                             4px;
+
+$thumbnail-bg:                                  $body-background-color;
+
+$thumbnail-border:                              transparent;
+$thumbnail-border-radius:                       $component-border-radius-base;
+
+$thumbnail-caption-color:                       $text-color;
+$thumbnail-caption-padding:                     9px;

package/variables/_tooltip-vars.scss

@@ -0,0 +1,16 @@
+@use 'color-vars' as *;
+@use 'layout-vars' as *;
+
+$tooltip-color-default:                                  var(--c8y-tooltip-color-default);
+
+$tooltip-background-default:                             var(--c8y-tooltip-background-default);
+
+$tooltip-arrow-color:                                    $tooltip-background-default;
+
+$tooltip-max-width:                                      var(--c8y-tooltip-width);
+
+$tooltip-opacity:                                        var(--c8y-tooltip-opacity);
+
+$tooltip-arrow-width:                                    var(--c8y-tooltip-arrow-width);
+
+$tooltip-radius:                                         var(--c8y-tooltip-border-radius);

package/variables/_typography-vars.scss

@@ -0,0 +1,45 @@
+//** Main font face
+$font-family-sans-serif:                        var(--c8y-font-family-sans-serif);
+$font-family-serif:                             var(--c8y-font-family-serif);
+$headings-font-family:                          var(--font-family-headings, var(--c8y-headings-font-family));
+
+// ** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace:                         var(--c8y-font-family-mono-spaced);
+$font-family-base:                              var(--font-family-base, var(--c8y-font-family-base, $font-family-sans-serif));
+
+
+//** font size
+$font-size-base:                                var(--c8y-font-size-base);
+$font-size-large:                               var(--c8y-font-size-large); // 17px
+
+$font-size-small:                               var(--c8y-font-size-small); // 12px
+$font-size-xs:                                  var(--c8y-font-size-xs); // 10px
+
+$font-size-h1:                                  var(--c8y-font-size-h1); // 36px
+$font-size-h2:                                  var(--c8y-font-size-h2); // 30px
+$font-size-h3:                                  var(--c8y-font-size-h3); // 24px
+$font-size-h4:                                  var(--c8y-font-size-h4); // 18px
+$font-size-h5:                                  var(--c8y-font-size-h5); // 14px
+$font-size-h6:                                  var(--c8y-font-size-h6); // 12px
+
+//** Unit-fallback `line-height` for use in components like buttons.
+$line-height-base-fallback:                     1.42857142857; // 20/14
+$line-height-base:                              var(--c8y-line-height-base, $line-height-base-fallback);
+$line-height-large:                             var(--c8y-line-height-large); // 1.3333333
+$line-height-small:                             var(--c8y-line-height-small); // 1
+
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed:                          calc($font-size-base * $line-height-base); // 20px
+
+$headings-font-weight-fallback:                 400;
+$headings-font-weight:                          var(--c8y-font-weight-headings, $headings-font-weight-fallback);
+
+$headings-line-height-fallback:                 1.15;
+$headings-line-height:                          var(--c8y-line-height-headings, $headings-line-height-fallback);
+
+//** Blockquotes
+$blockquote-font-size-fallback:                 var(--c8y-font-size-large);
+$blockquote-font-size:                          var(--c8y-blockquote-font-size, $blockquote-font-size-fallback);
+
+//** Width of horizontal description list titles
+$dl-horizontal-offset:                          var(--c8y-dl-horizontal-offset);

package/variables/dashboard-themes/_branded-dashboard.less

@@ -237,17 +237,6 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
 --c8y-root-component-color-odd: var(--c8y-text-color);
 --c8y-root-component-color-text-muted: var(--c8y-text-muted);
 --c8y-root-component-opacity-disabled: var(--c8y-global-disabled-opacity);
---c8y-root-component-form-control-background-default: var(--c8y-form-control-background-default);
---c8y-root-component-form-control-background-disabled: var(--c8y-form-control-background-disabled);
---c8y-root-component-form-control-background-focus: var(--c8y-form-control-background-focus);
---c8y-root-component-form-control-border-color-default: var(--c8y-form-control-border-color-default);
---c8y-root-component-form-control-border-color-focus: var(--c8y-form-control-border-color-focus);
---c8y-root-component-form-control-color-default: var(--c8y-form-control-color-default);
---c8y-root-component-form-control-color-disabled: var(--c8y-form-control-color-disabled);
---c8y-root-component-form-control-color-focus: var(--c8y-form-control-color-focus);
---c8y-root-component-form-control-placeholder-color: var(--c8y-form-control-placeholder-color);
---c8y-root-component-form-label-color: var(--c8y-form-label-color);
---c8y-root-component-form-legend-color: var(--c8y-form-legend-color);
 --c8y-root-component-icon-color: var(--c8y-palette-gray-30);
 --c8y-root-component-icon-dark-color-dark: var(--c8y-palette-high);
 --c8y-root-component-pulse-color: var(--c8y-palette-status-realtime);

package/variables/dashboard-themes/_branded-dashboard.scss

@@ -0,0 +1,296 @@
+@use '../color-defaults' as *;
+@use '../color-vars' as *;
+
+body, body.c8y-dark-theme{
+c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-branded,
+.dashboard-preview-slot.panel-content-branded,
+.dashboard-preview-slot.dashboard-theme-branded,
+c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
+.c8y-grid-dashboard c8y-dashboard-child .panel-content-branded,
+&:has(.dashboard-theme-branded) .c8y-ui-action-bar {
+  --c8y-abbr-border-color: var(--c8y-palette-gray-40);
+--c8y-action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
+--c8y-action-bar-background-default: var(--c8y-brand-10);
+--c8y-action-bar-border-color: var(--c8y-brand-30);
+--c8y-action-bar-color-actions-hover: var(--c8y-brand-60);
+--c8y-action-bar-color-actions: var(--c8y-palette-high);
+--c8y-action-bar-color-default: var(--c8y-palette-high);
+--c8y-action-bar-color-focus: var(--c8y-brand-80);
+--c8y-action-bar-color-text-muted: var(--c8y-brand-80);
+--c8y-action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
+--c8y-action-bar-icon-color: var(--v8y-brand-80);
+
+
+--c8y-alert-background-default: var(--c8y-palette-gray-80);
+--c8y-alert-color-default: var(--c8y-root-component-color-default);
+--c8y-alert-status-danger: var(--c8y-palette-status-danger);
+--c8y-alert-status-info: var(--c8y-palette-status-info);
+--c8y-alert-status-success: var(--c8y-palette-status-success);
+--c8y-alert-status-system: var(--c8y-root-component-brand-primary);
+--c8y-alert-status-warning: var(--c8y-palette-status-warning);
+--c8y-blockquote-border-color: transparent;
+--c8y-body-background-color: var(--c8y-brand-10);
+--c8y-btn-accent-background-active: var(--c8y-brand-accent-dark);
+--c8y-btn-accent-background-default: var(--c8y-brand-accent);
+--c8y-btn-accent-background-focus: var(--c8y-palette-high);
+--c8y-btn-accent-background-hover: var(--c8y-palette-high);
+--c8y-btn-accent-border-color-active: var(--c8y-brand-accent-dark);
+--c8y-btn-accent-border-color-default: var(--c8y-brand-accent);
+--c8y-btn-accent-border-color-focus: var(--c8y-brand-accent);
+--c8y-btn-accent-border-color-hover: var(--c8y-brand-accent);
+--c8y-btn-accent-color-active: var(--c8y-palette-high);
+--c8y-btn-accent-color-default: var(--c8y-palette-high);
+--c8y-btn-accent-color-focus: var(--c8y-brand-accent);
+--c8y-btn-accent-color-hover: var(--c8y-brand-accent);
+--c8y-btn-danger-background-active: var(--c8y-palette-status-danger-dark);
+--c8y-btn-danger-background-default: var(--c8y-palette-status-danger);
+--c8y-btn-danger-background-focus: var(--c8y-palette-high);
+--c8y-btn-danger-background-hover: var(--c8y-palette-high);
+--c8y-btn-danger-border-color-active: var(--c8y-palette-status-danger-dark);
+--c8y-btn-danger-border-color-default: var(--c8y-palette-status-danger);
+--c8y-btn-danger-border-color-focus: var(--c8y-palette-status-danger);
+--c8y-btn-danger-border-color-hover: var(--c8y-palette-status-danger);
+--c8y-btn-danger-color-active: var(--c8y-palette-high);
+--c8y-btn-danger-color-default: var(--c8y-palette-high);
+--c8y-btn-danger-color-focus: var(--c8y-palette-status-danger);
+--c8y-btn-danger-color-hover: var(--c8y-palette-status-danger);
+--c8y-btn-default-background-active: var(--c8y-brand-50);
+--c8y-btn-default-background-default: transparent;
+--c8y-btn-default-background-focus: transparent;
+--c8y-btn-default-background-hover: transparent;
+--c8y-btn-default-border-color-active: var(--c8y-root-component-brand-primary);
+--c8y-btn-default-border-color-default: var(--c8y-root-component-brand-primary);
+--c8y-btn-default-border-color-focus: var(--c8y-root-component-brand-primary);
+--c8y-btn-default-border-color-hover: var(--c8y-root-component-brand-primary);
+--c8y-btn-default-color-active: var(--c8y-brand-80);
+--c8y-btn-default-color-default: var(--c8y-root-component-brand-primary);
+--c8y-btn-default-color-focus: var(--c8y-root-component-brand-primary);
+--c8y-btn-default-color-hover: var(--c8y-root-component-brand-primary);
+--c8y-btn-primary-background-active: var(--c8y-brand-10);
+--c8y-btn-primary-background-default: var(--c8y-brand-60);
+--c8y-btn-primary-background-focus: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
+--c8y-btn-primary-background-hover: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
+--c8y-btn-primary-border-color-active: var(--c8y-brand-70);
+--c8y-btn-primary-border-color-default: var(--c8y-brand-60);
+--c8y-btn-primary-border-color-focus: var(--c8y-brand-70);
+--c8y-btn-primary-border-color-hover: var(--c8y-brand-70);
+--c8y-btn-primary-color-active: var(--c8y-palette-high);
+--c8y-btn-primary-color-default: var(--c8y-palette-gray-100);
+--c8y-btn-primary-color-focus: var(--c8y-palette-high);
+--c8y-btn-primary-color-hover: var(--c8y-palette-high);
+--c8y-code-background-color: var(--c8y-palette-gray-100);
+--c8y-code-border-color: transparent;
+--c8y-code-color: var(--c8y-palette-status-danger-dark);
+--c8y-dropdown-background-default: var(--c8y-brand-20);
+--c8y-elevation-border: none; /* For App switchers, Overflow menus, Tooltips */
+--c8y-elevation-hover: none;
+--c8y-elevation-lg: none; /* Elevation for Modals */
+--c8y-elevation-md: none; /* Elevation for Panels, App switchers, Overflow menus, Tooltips */
+--c8y-elevation-sm: none; /* Elevation for Cards, Select dropdowns, Date pickers, Time pickers, Dropdown buttons */
+--c8y-form-control-background-default: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
+--c8y-form-control-background-disabled: var(--c8y-component-background-disabled, var(--c8y-root-component-background-disabled));
+--c8y-form-control-background-focus: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
+--c8y-form-control-border-color-default: var(--c8y-palette-gray-70);
+--c8y-form-control-border-color-focus: var(--brand-primary, var(--c8y-root-component-brand-primary));
+--c8y-form-control-color-default: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
+--c8y-form-control-color-disabled: var(--c8y-component-color-disabled, var(--c8y-root-component-color-disabled));
+--c8y-form-control-color-focus: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
+--c8y-form-control-disabled-opacity: var(--c8y-global-disabled-opacity);
+--c8y-form-control-icon-color: var(--brand-primary, var(--c8y-root-component-brand-primary));
+--c8y-form-control-placeholder-color: var(--c8y-palette-gray-40);
+--c8y-form-label-color: var(--c8y-palette-gray-20);
+--c8y-form-legend-color: var(--c8y-palette-gray-50);
+--c8y-form-validation-color-error: var(--c8y-palette-status-danger);
+--c8y-form-validation-color-info: var(--c8y-palette-status-info);
+--c8y-form-validation-color-success: var(--c8y-palette-status-success);
+--c8y-form-validation-color-warning: var(--c8y-palette-status-warning);
+--c8y-global-disabled-opacity: 0.55;
+--c8y-global-odd: linear-gradient(to top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
+--c8y-global-separator: var(--c8y-palette-gray-90);
+--c8y-headings-color: inherit;
+--c8y-icon-stroke-color: var(--c8y-palette-high);
+--c8y-level-0: var(--c8y-palette-gray-100);
+--c8y-level-1: var(--c8y-palette-gray-90);
+--c8y-level-2: var(--c8y-palette-gray-80);
+--c8y-level-3: var(--c8y-palette-gray-70);
+--c8y-level-4: var(--c8y-palette-gray-60);
+--c8y-link-color: var(--c8y-brand-80);
+--c8y-link-hover-color: var(--c8y-brand-80);
+--c8y-main-header-background-default: var(--c8y-palette-gray-100);
+--c8y-main-header-background-hover: inherit;
+--c8y-main-header-border-color: transparent;
+--c8y-main-header-shadow: var(--c8y-elevation-md-bottom);
+--c8y-modal-backdrop-background: var(--c8y-palette-low);
+--c8y-nav-pills-background-active: var(--c8y-navlink-background-active);
+--c8y-nav-pills-background-default: var(--c8y-navlink-background-default);
+--c8y-nav-pills-background-focus: var(--c8y-navlink-background-focus);
+--c8y-nav-pills-background-hover: var(--c8y-navlink-background-hover);
+--c8y-nav-pills-color-active: var(--c8y-navlink-color-active);
+--c8y-nav-pills-color-default: var(--c8y-navlink-color-default);
+--c8y-nav-pills-color-focus: var(--c8y-navlink-color-focus);
+--c8y-nav-pills-color-hover: var(--c8y-navlink-color-hover);
+--c8y-nav-tabs-background-active: var(--c8y-root-component-background-default);
+--c8y-nav-tabs-background-default: transparent;
+--c8y-nav-tabs-background-focus: var(--c8y-navlink-background-focus);
+--c8y-nav-tabs-background-hover: transparent;
+--c8y-nav-tabs-border-color-active: var(--c8y-root-component-brand-primary);
+--c8y-nav-tabs-border-color-default: var(--c8y-global-separator);
+--c8y-nav-tabs-color-active: var(--c8y-navlink-color-active);
+--c8y-nav-tabs-color-default: var(--c8y-navlink-color-default);
+--c8y-nav-tabs-color-focus: var(--c8y-navlink-color-focus);
+--c8y-nav-tabs-color-hover: var(--c8y-navlink-color-hover);
+--c8y-nav-tabs-icon-color-active: var(--c8y-navlink-color-default);
+--c8y-nav-tabs-icon-color-default: var(--c8y-palette-gray-40);
+--c8y-nav-tabs-icon-color-focus: var(--c8y-navlink-color-default);
+--c8y-nav-tabs-icon-color-hover: var(--c8y-navlink-color-default);
+--c8y-navbar-background-default: var(--c8y-root-component-background-default);
+--c8y-navbar-border-color: transparent;
+--c8y-navbar-color-default: var(--c8y-text-color);
+--c8y-navbar-link: var(--c8y-root-component-brand-primary);
+--c8y-navigator-background-default: var(--c8y-palette-low);
+--c8y-navigator-background-selected: var(--c8y-palette-gray-90);
+--c8y-navigator-scrollbar-track: var(--c8y-root-component-scrollbar-track);
+--c8y-navigator-separator-color: var(--c8y-palette-gray-80);
+--c8y-navigator-text-color-default: var(--c8y-palette-gray-20);
+--c8y-navlink-background-active: transparent;
+--c8y-navlink-background-default: var(--c8y-root-component-background-default);
+--c8y-navlink-background-focus: transparent;
+--c8y-navlink-background-hover: transparent;
+--c8y-navlink-color-active: var(--c8y-root-component-brand-primary);
+--c8y-navlink-color-default: var(--c8y-text-color);
+--c8y-navlink-color-focus: var(--c8y-root-component-brand-primary);
+--c8y-navlink-color-hover: var(--c8y-root-component-brand-primary);
+--c8y-page-sticky-header-background-default: var(--c8y-palette-gray-90);
+--c8y-page-sticky-header-color-active: var(--c8y-link-color);
+--c8y-page-sticky-header-color-default: var(--c8y-palette-gray-10);
+--c8y-page-sticky-header-color-hover: var(--c8y-link-hover-color);
+--c8y-palette-gray-10: #f9fafb;
+--c8y-palette-gray-100: var(--c8y-brand-20);
+--c8y-palette-gray-20: #ccd2d8;
+--c8y-palette-gray-30: var(--c8y-brand-80);
+--c8y-palette-gray-40: var(--c8y-brand-80);
+--c8y-palette-gray-50: var(--c8y-brand-70);
+--c8y-palette-gray-60: var(--c8y-brand-50);
+--c8y-palette-gray-70: var(--c8y-brand-50);
+--c8y-palette-gray-80: var(--c8y-brand-40);
+--c8y-palette-gray-90: var(--c8y-brand-30);
+--c8y-palette-high: white;
+--c8y-palette-low: var(--c8y-brand-80);
+--c8y-palette-purple-10: #f1e7fe;
+--c8y-palette-purple-20: #dabffc;
+--c8y-palette-purple-30: #c69dfb;
+--c8y-palette-purple-40: #a96cf9;
+--c8y-palette-purple-50: #8e3cf7; /* Accent */
+--c8y-palette-purple-60: #712dd2;
+--c8y-palette-purple-70: #5b25a7;
+--c8y-palette-purple-80: #3b2c5e;
+--c8y-palette-status-danger-dark: #8f0009; /* suitable for text */
+--c8y-palette-status-danger-light: #fae6e8;
+--c8y-palette-status-danger: #dc5b68;
+--c8y-palette-status-info-light: #ebf5ff;
+--c8y-palette-status-info: #0e85fb;
+--c8y-palette-status-realtime: #00bb00;
+--c8y-palette-status-success-dark: #008800; /* suitable for text */
+--c8y-palette-status-success-light: #f4fce3;
+--c8y-palette-status-success: #71a112;
+--c8y-palette-status-system: var(--c8y-brand-primary);
+--c8y-palette-status-warning-dark: #806a00;
+--c8y-palette-status-warning-high: #fff1e0;
+--c8y-palette-status-warning-light: #ecbe23;
+--c8y-palette-status-warning: #e07800;
+--c8y-palette-teal-10: #ebf9f8;
+--c8y-palette-teal-20: #c5edea;
+--c8y-palette-teal-30: #8adbd5; /* Primary */
+--c8y-palette-teal-40: #3cc1b7;
+--c8y-palette-teal-50: #22a6aa;
+--c8y-palette-teal-60: #058192;
+--c8y-palette-teal-70: #1c5569;
+--c8y-palette-teal-80: #134158;
+--c8y-popover-background-default: var(--c8y-palette-gray-30);
+--c8y-popover-border-color: var(--c8y-root-component-border-color);
+--c8y-popover-color-default: var(--c8y-palette-gray-100);
+--c8y-popover-color-link-hover: var(--c8y-root-component-color-link-hover);
+--c8y-popover-color-link: var(--c8y-root-component-color-link);
+--c8y-popover-icon-color: var(--c8y-palette-gray-80);
+--c8y-popover-label-color: var(--c8y-palette-gray-100);
+--c8y-pre-background: var(--c8y-palette-gray-90);
+--c8y-pre-border-color: var(--c8y-palette-gray-70);
+--c8y-pre-color: var(--c8y-palette-gray-30);
+--c8y-root-component-actions-opacity: var(--c8y-global-disabled-opacity);
+--c8y-root-component-background-active: var(--c8y-root-component-background-default);
+--c8y-root-component-background-default: var(--c8y-palette-gray-100);
+--c8y-root-component-background-disabled: rgba(255, 255, 255, 0.1); /* Don't use when changing opacity */
+--c8y-root-component-background-expanded-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0px, var(--c8y-root-component-background-expanded) 12px, var(--c8y-root-component-background-expanded) calc(100% - 12px), rgba(0, 0, 0, 0.03) 100%);
+--c8y-root-component-background-expanded: var(--c8y-palette-gray-100);
+--c8y-root-component-background-focus: var(--c8y-root-component-background-default);
+--c8y-root-component-background-hover: var(--c8y-palette-teal-80);
+--c8y-root-component-background-odd: var(--c8y-global-odd); /* use for alternate stripes */
+--c8y-root-component-border-color: var(--c8y-global-separator);
+--c8y-root-component-brand-primary: var(--c8y-brand-80);
+--c8y-root-component-color-accent: var(--c8y-root-component-brand-primary);
+--c8y-root-component-color-actions-hover: var(--c8y-brand-60);
+--c8y-root-component-color-actions: var(--c8y-palette-high);
+--c8y-root-component-color-active: var(--c8y-root-component-brand-primary);
+--c8y-root-component-color-default: var(--c8y-text-color);
+--c8y-root-component-color-disabled: var(--c8y-palette-gray-70); /* Don't use when changing opacity */
+--c8y-root-component-color-expanded: inherit;
+--c8y-root-component-color-focus: var(--c8y-root-component-brand-primary);
+--c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
+--c8y-root-component-color-link: var(--c8y-link-color);
+--c8y-root-component-color-odd: var(--c8y-text-color);
+--c8y-root-component-color-text-muted: var(--c8y-text-muted);
+--c8y-root-component-opacity-disabled: var(--c8y-global-disabled-opacity);
+--c8y-root-component-icon-color: var(--c8y-palette-gray-30);
+--c8y-root-component-icon-dark-color-dark: var(--c8y-palette-high);
+--c8y-root-component-pulse-color: var(--c8y-palette-status-realtime);
+--c8y-root-component-realtime-added: var(--c8y-brand-realtime-added);
+--c8y-root-component-scrollbar-thumb-default: var(--c8y-palette-gray-80);
+--c8y-root-component-scrollbar-thumb-hover: var(--c8y-palette-gray-70);
+--c8y-root-component-scrollbar-track: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
+--c8y-root-component-separator-color: var(--c8y-global-separator);
+--c8y-root-component-spinner-color: var(--c8y-brand-primary);
+--c8y-switch-background-active: var(--c8y-brand-30);
+--c8y-switch-background-default: var(--c8y-palette-gray-20);
+--c8y-switch-handle-background: var(--c8y-palette-high);
+--c8y-text-color: var(--c8y-palette-high);
+--c8y-text-muted: var(--c8y-palette-gray-40);
+--c8y-tooltip-background-default: var(--c8y-palette-gray-10);
+--c8y-tooltip-border-color: var(--c8y-root-component-border-color);
+--c8y-tooltip-color-default: var(--c8y-palette-gray-100);
+--c8y-tooltip-opacity: 0.95;
+
+}
+.dashboard-preview-slot.dashboard-theme-branded {
+  background:var(--c8y-brand-10) !important;
+}
+
+c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-branded,
+c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded {
+  --c8y-dashboard-background: var(--c8y-brand-10);
+  background-color: var(--c8y-dashboard-background);
+  color: var(--c8y-text-color);
+}
+}
+
+
+body:has(.dashboard-theme-branded){
+  .c8y-ui-action-bar{
+    .btn-help{
+      outline: 1px solid $status-info;
+      background-color: $status-info;
+      --help-info-color: #{$palette-high};
+      color: $palette-high;
+    }
+  }
+  .c8y-top-drawer{
+    --c8y-nav-tabs-background-default: var(--c8y-root-component-background-default);
+    --c8y-nav-tabs-background-active: var(--c8y-body-background-color);
+    background: var(--c8y-body-background-color);
+    --c8y-level-1: var(--c8y-root-component-background-default);
+  }
+  .dashboard-theme-branded{
+    .label-primary{
+      color:  var(--c8y-root-component-color-default);
+    }
+  }
+}

package/variables/dashboard-themes/_dark-dashboard.less

@@ -4,6 +4,13 @@ body .dashboard-preview-slot.panel-content-dark,
 c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark,
 .c8y-grid-dashboard c8y-dashboard-child .panel-content-dark {
   .c8y-dark-theme();
+
+  // Override legacy --text-color to use dark theme value
+  // This ensures root-component tokens (which reference --text-color) get the correct dark value
+  --text-color: var(--c8y-text-color);
+  --text-muted: var(--c8y-text-muted);
+
+  color: @text-color;
 }
 
 .dashboard-preview-slot.dashboard-theme-dark {

package/variables/dashboard-themes/_dark-dashboard.scss

@@ -0,0 +1,40 @@
+@use '../color-defaults' as *;
+@use '../tokens/c8y-design-tokens-dark' as dark;
+@use '../color-vars' as *;
+
+c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-dark,
+body .dashboard-preview-slot.panel-content-dark,
+.dashboard-preview-slot.dashboard-theme-dark,
+c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark,
+.c8y-grid-dashboard c8y-dashboard-child .panel-content-dark {
+  @include dark.c8y-dark-theme();
+
+  // Override legacy --text-color to use dark theme value
+  // This ensures root-component tokens (which reference --text-color) get the correct dark value
+  --text-color: var(--c8y-text-color);
+  --text-muted: var(--c8y-text-muted);
+
+  color: $text-color;
+}
+
+.dashboard-preview-slot.dashboard-theme-dark {
+  // background: #011932 !important;
+}
+
+c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-dark,
+c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark {
+  --c8y-dashboard-background: var(--c8y-palette-low);
+  background-color: var(--c8y-dashboard-background);
+}
+
+body:has(.dashboard-theme-dark:not(.dashboard-preview-slot)){
+  .c8y-ui-action-bar{
+    @include dark.c8y-dark-theme();
+    .btn-help{
+      outline: 1px solid $status-info;
+      background-color: $status-info;
+      --help-info-color: #{$palette-high};
+      color: $palette-high;
+    }
+  }
+}

package/variables/dashboard-themes/_transparent-dashboard.scss

@@ -0,0 +1,17 @@
+@use '../color-defaults' as *;
+@use '../color-vars' as *;
+
+body .dashboard-preview-slot.panel-content-transparent,
+.c8y-grid-dashboard c8y-dashboard-child .panel-content-transparent {
+  
+  --c8y-component-background-default: transparent;
+  --c8y-elevation-hover: none;
+  --c8y-elevation-sm: none; /* Elevation for Cards, Select dropdowns, Date pickers, Time pickers, Dropdown buttons */
+  --c8y-elevation-md: none; /* Elevation for Panels, App switchers, Overflow menus, Tooltips */
+  --c8y-elevation-lg: none; /* Elevation for Modals */
+  --c8y-elevation-border: none; /* For App switchers, Overflow menus, Tooltips */
+}
+
+.dashboard-preview-slot {
+  background-color: var(--c8y-dashboard-background, var(--c8y-body-background-color)) !important;
+}

package/variables/dashboard-themes/_white-dashboard.scss

@@ -0,0 +1,44 @@
+@use '../color-defaults' as *;
+@use '../tokens/c8y-design-tokens' as tokens;
+@use '../color-vars' as *;
+
+c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
+body .dashboard-preview-slot.panel-content-white,
+.dashboard-preview-slot.dashboard-theme-white,
+c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white,
+.c8y-grid-dashboard c8y-dashboard-child .panel-content-white {
+  @include tokens.c8y-light-theme();
+
+}
+
+.dashboard-preview-slot.dashboard-theme-white {
+  background: white !important;
+}
+
+.dashboard-preview-slot.dashboard-theme-light {
+  --c8y-dashboard-background: var(--body-background-color, var(--c8y-body-background-color));
+  background:var(--c8y-dashboard-background);
+
+}
+
+c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
+c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white {
+  --c8y-dashboard-background: var(--c8y-palette-high);
+  background-color: var(--c8y-dashboard-background);
+}
+
+c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-light,
+c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-light {
+  --c8y-dashboard-background: var(--body-background-color, var(--c8y-body-background-color)) ;
+
+  .c8y-dark-theme & {
+    --c8y-dashboard-background: var(--c8y-palette-low);
+  }
+  .c8y-system-theme &{
+    @media(prefers-color-scheme: dark) {
+      --c8y-dashboard-background: var(--c8y-palette-low);
+    }
+  }
+
+
+}