@c8y/style 1024.13.0 → 1024.14.1

package/styles/vendor/datepicker/_bs-datepicker.scss

@@ -96,7 +96,7 @@
           $_icon-dir: if(sass($use-relative-paths): '../../../assets/icons'; else: 'assets/icons');
           content: "";
           background-color: currentColor;
-          --_icon-mask: url("#{$_icon-dir}/dlt/forward.svg");
+          --_icon-mask: url("#{$_icon-dir}/dlt/chevron-right.svg");
           mask-image: var(--_icon-mask);
           -webkit-mask-image: var(--_icon-mask);
         } @else {
@@ -108,7 +108,7 @@
           $_icon-dir: if(sass($use-relative-paths): '../../../assets/icons'; else: 'assets/icons');
           content: "";
           background-color: currentColor;
-          --_icon-mask: url("#{$_icon-dir}/dlt/caret-back.svg");
+          --_icon-mask: url("#{$_icon-dir}/dlt/chevron-left.svg");
           mask-image: var(--_icon-mask);
           -webkit-mask-image: var(--_icon-mask);
         } @else {

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

@@ -1,299 +1,290 @@
-@use '../color-defaults' as *;
-@use '../color-vars' as *;
+@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 {
-  // Branded theme always uses the light brand palette as its identity.
-  // These defaults use the light palette values (green). When branding IS
-  // customized, applyBrandingVars() injects overrides under
-  // .dashboard-theme-branded/.panel-content-branded with the same specificity
-  // but later in the cascade, so the customized values win.
-  --c8y-brand-10: var(--c8y-palette-green-10);
-  --c8y-brand-20: var(--c8y-palette-green-20);
-  --c8y-brand-30: var(--c8y-palette-green-30);
-  --c8y-brand-40: var(--c8y-palette-green-40);
-  --c8y-brand-50: var(--c8y-palette-green-50);
-  --c8y-brand-60: var(--c8y-palette-green-60);
-  --c8y-brand-70: var(--c8y-palette-green-70);
-  --c8y-brand-80: var(--c8y-palette-green-80);
-  --c8y-brand-accent: var(--c8y-palette-yellow-60);
-  --c8y-brand-accent-dark: var(--c8y-palette-yellow-10);
-  --c8y-brand-accent-light: var(--c8y-palette-yellow-80);
-  --c8y-brand-dark: var(--brand-dark, var(--c8y-palette-gray-20));
-  --c8y-brand-light: var(--brand-light, var(--c8y-palette-green-60));
-  --c8y-brand-primary: var(--brand-primary, var(--c8y-palette-green-40));
-  --c8y-brand-realtime-added: var(--c8y-brand-80);
+body,
+body.c8y-dark-theme {
 
-  --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(--c8y-brand-80);
-// Override unprefixed action bar vars — branding injects these at :root,
-// and the SCSS fallback chain checks unprefixed first.
---action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
---action-bar-background-default: var(--c8y-brand-10);
---action-bar-border-color: var(--c8y-brand-30);
---action-bar-color-actions-hover: var(--c8y-brand-60);
---action-bar-color-actions: var(--c8y-palette-high);
---action-bar-color-default: var(--c8y-palette-high);
---action-bar-color-focus: var(--c8y-brand-80);
---action-bar-color-text-muted: var(--c8y-brand-80);
---action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
---action-bar-icon-color: var(--c8y-brand-80);
+  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-brand-realtime-added: var(--c8y-brand-80);
 
+    --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(--c8y-brand-80);
+    // Override unprefixed action bar vars — branding injects these at :root,
+    // and the SCSS fallback chain checks unprefixed first.
+    --action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
+    --action-bar-background-default: var(--c8y-brand-10);
+    --action-bar-border-color: var(--c8y-brand-30);
+    --action-bar-color-actions-hover: var(--c8y-brand-60);
+    --action-bar-color-actions: var(--c8y-palette-high);
+    --action-bar-color-default: var(--c8y-palette-high);
+    --action-bar-color-focus: var(--c8y-brand-80);
+    --action-bar-color-text-muted: var(--c8y-brand-80);
+    --action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
+    --action-bar-icon-color: var(--c8y-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-low: var(--c8y-brand-80);
---c8y-palette-status-danger: #DC5B68;
---c8y-palette-status-danger-dark: #fae6e8;
---c8y-palette-status-danger-light: #8f0009;
---c8y-palette-status-info: #0092db;
---c8y-palette-status-info-dark: #ebf5ff;
---c8y-palette-status-info-light: #105589;
---c8y-palette-status-success: #71A112;
---c8y-palette-status-success-dark: #f4fce3;
---c8y-palette-status-success-light: #007700;
---c8y-palette-status-system: var(--c8y-brand-primary);
---c8y-palette-status-warning: #E07800;
---c8y-palette-status-warning-dark: var(--c8y-palette-orange-80);
---c8y-palette-status-warning-high: var(--c8y-palette-yellow-60);
---c8y-palette-status-warning-light: var(--c8y-palette-orange-10);
---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;
-// Override unprefixed vars — branding injects these at :root,
-// and the SCSS fallback chain checks unprefixed first.
---text-color: var(--c8y-palette-high);
---text-muted: var(--c8y-palette-gray-40);
---body-background-color: var(--c8y-brand-10);
---link-color: var(--c8y-brand-80);
---link-hover-color: var(--c8y-brand-80);
 
-}
-.dashboard-preview-slot.dashboard-theme-branded {
-  background: var(--c8y-brand-10) !important;
-  color: var(--c8y-text-color);
-}
+    --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-low: var(--c8y-brand-80);
+    --c8y-palette-status-danger: #DC5B68;
+    --c8y-palette-status-danger-dark: #fae6e8;
+    --c8y-palette-status-danger-light: #8f0009;
+    --c8y-palette-status-info: #0092db;
+    --c8y-palette-status-info-dark: #ebf5ff;
+    --c8y-palette-status-info-light: #105589;
+    --c8y-palette-status-success: #71A112;
+    --c8y-palette-status-success-dark: #f4fce3;
+    --c8y-palette-status-success-light: #007700;
+    --c8y-palette-status-system: var(--c8y-brand-primary);
+    --c8y-palette-status-warning: #E07800;
+    --c8y-palette-status-warning-dark: var(--c8y-palette-orange-80);
+    --c8y-palette-status-warning-high: var(--c8y-palette-yellow-60);
+    --c8y-palette-status-warning-light: var(--c8y-palette-orange-10);
+    --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;
+    // Override unprefixed vars — branding injects these at :root,
+    // and the SCSS fallback chain checks unprefixed first.
+    --text-color: var(--c8y-palette-high);
+    --text-muted: var(--c8y-palette-gray-40);
+    --body-background-color: var(--c8y-brand-10);
+    --link-color: var(--c8y-brand-80);
+    --link-hover-color: var(--c8y-brand-80);
 
-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);
-}
+  }
+
+  .dashboard-preview-slot.dashboard-theme-branded {
+    background: var(--c8y-brand-10) !important;
+    color: var(--c8y-text-color);
+  }
+
+  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);
+  }
 }
 
 
@@ -321,25 +312,28 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded {
   --c8y-brand-realtime-added: inherit;
 }
 
-body:has(.dashboard-theme-branded){
+body:has(.dashboard-theme-branded) {
+
   .c8y-ui-action-bar,
   .dashboard-theme-branded {
-    .btn-help{
+    .btn-help {
       outline: 1px solid $status-info;
       background-color: $status-info;
       --help-info-color: #{$palette-high};
       color: $palette-high;
     }
   }
-  .c8y-top-drawer{
+
+  .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);
+
+  .dashboard-theme-branded {
+    .label-primary {
+      color: var(--c8y-root-component-color-default);
     }
   }
 }

package/assets/icons/c8y-dark/data-preparation.svg

@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.9766 21.1855C25.035 22.9439 23.6829 24.3531 21.9199 25.4121C20.157 26.4711 18.1836 27 16 27C13.8164 27 11.843 26.4711 10.0801 25.4121C8.3171 24.3531 6.96503 22.9439 6.02344 21.1855L10.2305 18.9072C11.5126 21.2251 13.4358 22.3847 16 22.3848C18.5642 22.3847 20.4874 21.2251 21.7695 18.9072L25.9766 21.1855ZM16 5C18.1836 5.00003 20.157 5.52986 21.9199 6.58887C23.6829 7.6479 25.035 9.05705 25.9766 10.8154L21.7695 13.0928C20.5674 10.9197 18.8018 9.76558 16.4727 9.62988L16 9.61621L15.5273 9.62988C13.1982 9.76558 11.4326 10.9197 10.2305 13.0928L6.02344 10.8154C6.96502 9.05705 8.31712 7.6479 10.0801 6.58887C11.843 5.52986 13.8164 5.00003 16 5Z" fill="#currentColor"/>
-</svg>

package/assets/icons/c8y-dark/icon-manager.svg

@@ -1,10 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_16_5290)">
-<path d="M3.718 12L2.74 8H45.252L44.27 12H3.718ZM6.88 4L6.002 0H41.99L41.112 4H6.88ZM48 36H0L4 48H44L48 36Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_16_5290">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
-</svg>