@c8y/style 1023.17.20 → 1023.22.2

package/variables/index.less

@@ -1,3 +1,6 @@
+/* Import color defaults FIRST so LESS variables can be overridden before main.less import */
+@import '_color-defaults.less';
+
 @import 'tokens/c8y-design-tokens.less';
 @import 'tokens/c8y-design-tokens-dark.less';
 
@@ -8,6 +11,7 @@
 }
 
 @import '_brand-vars.less';
+/* _color-vars.less will override CSS custom properties with LESS variable values */
 @import '_color-vars.less';
 
 @import '_typography-vars.less';

package/variables/index.scss

@@ -0,0 +1,146 @@
+/**
+ * Variables Index
+ *
+ * Imports and forwards all SCSS variable files.
+ * These files are kept in sync with corresponding LESS files during the LESS→SCSS migration.
+ *
+ * Usage: @use 'variables/index' as *;
+ */
+
+/* Configuration variables */
+$use-relative-paths: false !default;
+
+/* Import and forward all variable modules */
+
+@use '_color-defaults' as *;
+@forward '_color-defaults';
+
+@use 'tokens/c8y-design-tokens' as *;
+@forward 'tokens/c8y-design-tokens';
+
+@use 'tokens/c8y-design-tokens-dark' as dark;
+
+@use '_typography-vars' as *;
+@forward '_typography-vars';
+
+@use '_layout-vars' as *;
+@forward '_layout-vars';
+
+// Forward components-vars and forms-vars
+@use '_components-vars' as *;
+@forward '_components-vars';
+
+@use '_forms-vars' as *;
+@forward '_forms-vars';
+
+// Forward color-vars (hide duplicate variables defined in components-vars)
+@use '_color-vars' as *;
+@forward '_color-vars' hide
+  $component-background-default,
+  $component-border-width,
+  $component-border-style,
+  $component-actions-opacity;
+
+@use '_scaffolding' with (
+  $use-relative-paths: $use-relative-paths
+);
+@forward '_scaffolding' hide $use-relative-paths;
+
+@use '_brand-vars' with (
+  $use-relative-paths: $use-relative-paths
+);
+@forward '_brand-vars' hide $use-relative-paths;
+
+@use '_navigator' as *;
+@forward '_navigator';
+
+@use '_dlt-c8y-icons-vars' as *;
+@forward '_dlt-c8y-icons-vars';
+
+@use '_c8y-icon-vars' as *;
+@forward '_c8y-icon-vars';
+
+@use '_alert-vars' as *;
+@forward '_alert-vars';
+
+@use '_badge-vars' as *;
+@forward '_badge-vars';
+
+@use '_breadcrumbs-vars' as *;
+@forward '_breadcrumbs-vars';
+
+@use '_buttons-vars' as *;
+@forward '_buttons-vars' hide $switch-width, $switch-height, $switch-radius, $switch-sm, $switch-background-default, $switch-background-active;
+
+@use '_code-vars' as *;
+@forward '_code-vars';
+
+@use '_label-vars' as *;
+@forward '_label-vars';
+
+@use '_tag-vars' as *;
+@forward '_tag-vars';
+
+@use '_map-vars' with (
+  $use-relative-paths: $use-relative-paths
+);
+@forward '_map-vars' hide $use-relative-paths;
+
+@use '_c8y-action-bar-vars' as *;
+@forward '_c8y-action-bar-vars';
+
+@use '_modal-vars' as *;
+@forward '_modal-vars';
+
+@use '_navbar-vars' as *;
+@forward '_navbar-vars';
+
+@use '_pagination-vars' as *;
+@forward '_pagination-vars';
+
+@use '_panel-vars' as *;
+@forward '_panel-vars';
+
+@use '_popover-vars' as *;
+@forward '_popover-vars';
+
+@use '_progress-bars-vars' as *;
+@forward '_progress-bars-vars';
+
+@use '_tables-vars' as *;
+@forward '_tables-vars';
+
+@use '_thumbnail-vars' as *;
+@forward '_thumbnail-vars';
+
+@use '_tooltip-vars' as *;
+@forward '_tooltip-vars';
+
+@use '_selectize-vars' as *;
+@forward '_selectize-vars';
+
+@use '_page-sticky-header' as *;
+@forward '_page-sticky-header';
+
+@use 'shadows' as *;
+@forward 'shadows';
+
+// Dashboard themes
+@use 'dashboard-themes/_branded-dashboard' as *;
+@forward 'dashboard-themes/_branded-dashboard';
+
+@use 'dashboard-themes/_dark-dashboard' as *;
+@forward 'dashboard-themes/_dark-dashboard';
+
+@use 'dashboard-themes/_white-dashboard' as *;
+@forward 'dashboard-themes/_white-dashboard';
+
+@use 'dashboard-themes/_transparent-dashboard' as *;
+@forward 'dashboard-themes/_transparent-dashboard';
+
+/* Dark theme mixin application */
+.c8y-system-theme{
+  @media(prefers-color-scheme: dark) {
+    @include dark.c8y-dark-theme();
+  }
+}

package/variables/login-vars.scss

@@ -0,0 +1,48 @@
+@import 'tokens/c8y-design-tokens';
+@import 'tokens/c8y-design-tokens-dark';
+
+.c8y-system-theme{
+  @media(prefers-color-scheme: dark) {
+    @include c8y-dark-theme();
+  }
+}
+
+@import '_brand-vars';
+@import '_color-vars';
+
+@import '_typography-vars';
+@import '_components-vars';
+@import '_navigator';
+@import '_dlt-c8y-icons-vars';
+@import '_c8y-icon-vars';
+
+@import '_alert-vars';
+@import '_badge-vars';
+// @import '_breadcrumbs-vars';
+@import '_buttons-vars';
+
+@import '_code-vars';
+@import '_forms-vars';
+// @import '_label-vars'; /* TODO: Remove after Codex launch. will be replaced by Tag */
+@import '_tag-vars';
+@import '_layout-vars';
+// @import '_map-vars';
+
+@import '_c8y-action-bar-vars';
+@import '_modal-vars';
+
+@import '_navbar-vars';
+// @import '_pagination-vars';
+// @import '_panel-vars';
+// @import '_popover-vars';
+@import '_progress-bars-vars';
+@import '_scaffolding';
+// @import '_tables-vars';
+@import '_thumbnail-vars';
+@import '_tooltip-vars';
+// @import '_selectize-vars';
+// @import '_page-sticky-header';
+
+@import 'shadows';
+
+

package/variables/shadows.scss

@@ -0,0 +1,15 @@
+// Elevation shadows
+
+//cards
+$elevation-sm:           var(--c8y-elevation-sm);
+
+// rightdrawer, ui-button-footer, toolbar
+$elevation-md-left:      var(--c8y-elevation-md-left);
+$elevation-md-right:     var(--c8y-elevation-md-right);
+$elevation-md-bottom:    var(--c8y-elevation-md-bottom);
+$elevation-md-top:       var(--c8y-elevation-md-top);
+
+
+$elevation-lg:           var(--c8y-elevation-lg);
+
+$elevation-hover:           var(--c8y-elevation-hover);//0 4px 4px rgba(0, 0, 0, 0.01), 0 8px 8px rgba(0, 0, 0, 0.01), 0 16px 16px rgba(0, 0, 0, 0.03), 0 32px 32px rgba(0, 0, 0, 0.05), 0 16px 64px rgba(0, 0, 0, .1);

package/variables/tokens/c8y-design-tokens-dark.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 03 Sep 2025 23:29:02 GMT
+// Generated on Mon, 12 Jan 2026 11:47:08 GMT
 
 .c8y-dark-theme {
 
@@ -260,7 +260,7 @@
   --c8y-popover-color-link: var(--c8y-root-component-color-link);
   --c8y-popover-color-link-hover: var(--c8y-root-component-color-link-hover);
   --c8y-popover-icon-color: var(--c8y-root-component-icon-color);
-  --c8y-popover-label-color: var(--c8y-root-component-form-label-color);
+  --c8y-popover-label-color: var(--c8y-form-label-color);
 
   /* SECTION: Pre - Colors */
   --c8y-pre-background: var(--c8y-palette-gray-60);
@@ -300,17 +300,6 @@
   --c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
   --c8y-root-component-color-odd: var(--text-color, var(--c8y-text-color));
   --c8y-root-component-color-text-muted: var(--c8y-text-muted);
-  --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-gray-30);
   --c8y-root-component-icon-dark-color-light: var(--brand-primary, var(--c8y-brand-primary));

package/variables/tokens/c8y-design-tokens-dark.scss

@@ -0,0 +1,332 @@
+
+// Do not edit directly
+// Generated on Mon, 12 Jan 2026 11:47:08 GMT
+
+@mixin c8y-dark-theme() {
+
+  /* SECTION: Primitives - Colors */
+  --c8y-palette-gray-10: #f2f2f3;
+  --c8y-palette-gray-100: #191a1a;
+  --c8y-palette-gray-20: #EDEDEE;
+  --c8y-palette-gray-30: #B9BABC;
+  --c8y-palette-gray-40: #97999B;
+  --c8y-palette-gray-50: #7D7F82;
+  --c8y-palette-gray-60: #505253;
+  --c8y-palette-gray-70: #434546;
+  --c8y-palette-gray-80: #2D2E2F;
+  --c8y-palette-gray-90: #1e1f1f;
+  --c8y-palette-high: #fff;
+  --c8y-palette-low: #141415;
+
+  /* SECTION: Primitives - Status */
+  --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-realtime: #00bb00;
+  --c8y-palette-status-success: #71A112;
+  --c8y-palette-status-success-dark: #f4fce3;
+  --c8y-palette-status-success-light: #007700;
+  --c8y-palette-status-system: var(--c8y-palette-gray-40);
+  --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);
+
+  /* SECTION: Semantic - Brand */
+  --c8y-brand-10: var(--c8y-palette-yellow-10);
+  --c8y-brand-20: var(--c8y-palette-yellow-20);
+  --c8y-brand-30: var(--c8y-palette-yellow-30);
+  --c8y-brand-40: var(--c8y-palette-yellow-40);
+  --c8y-brand-50: var(--c8y-palette-yellow-50);
+  --c8y-brand-60: var(--c8y-palette-yellow-60);
+  --c8y-brand-70: var(--c8y-palette-yellow-70);
+  --c8y-brand-80: var(--c8y-palette-yellow-80);
+  --c8y-brand-accent: var(--c8y-palette-blue-30);
+  --c8y-brand-accent-dark: var(--c8y-palette-blue-10);
+  --c8y-brand-accent-light: var(--c8y-palette-blue-80);
+  --c8y-brand-dark: var(--c8y-brand-10);
+  --c8y-brand-light: var(--c8y-brand-70);
+  --c8y-brand-primary: var(--c8y-brand-60);
+  --c8y-brand-realtime-added: var(--c8y-brand-40);
+
+  /* SECTION: Semantic - Defaults */
+  --c8y-abbr-border-color: var(--c8y-palette-gray-60);
+  --c8y-body-background-color: var(--c8y-palette-low);
+  --c8y-global-disabled-opacity: 0.55;
+  --c8y-global-odd: linear-gradient(to top,rgba(255, 255, 255, .03), rgba(255, 255, 255, 0.03));
+  --c8y-global-separator: var(--c8y-palette-gray-80);
+  --c8y-headings-color: inherit;
+  --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(--link-color,var(--brand-primary, var(--c8y-brand-primary)));
+  --c8y-link-hover-color: var(--link-hover-color, var(--brand-primary, var(--c8y-brand-primary)));
+  --c8y-text-color: var(--c8y-palette-gray-30);
+  --c8y-text-muted: var(--c8y-palette-gray-40);
+
+  /* SECTION: Semantic - Elevation */
+  --c8y-elevation-border: inset 0 0 0 1px var(--c8y-palette-gray-80);
+  --c8y-elevation-color: var(--c8y-palette-gray-80);
+  --c8y-elevation-hover: 0 0 0 1px var(--c8y-brand-primary);
+  --c8y-elevation-lg: 0 0 0 1px var(--c8y-elevation-color);
+  --c8y-elevation-md-bottom: 0 0 0 1px var(--c8y-elevation-color);
+  --c8y-elevation-md-left: 0 0 0 1px var(--c8y-elevation-color);
+  --c8y-elevation-md-right: 0 0 0 1px var(--c8y-elevation-color);
+  --c8y-elevation-md-top: 0 0 0 1px var(--c8y-elevation-color);
+  --c8y-elevation-sm: 0 0 0 1px var(--c8y-elevation-color);
+
+  /* SECTION: Action Bar - Colors */
+  --c8y-action-bar-background-default: var(--c8y-main-header-background-default);
+  --c8y-action-bar-border-color: var(--c8y-root-component-border-color);
+  --c8y-action-bar-color-actions: var(--c8y-root-component-color-actions);
+  --c8y-action-bar-color-actions-hover: var(--c8y-root-component-color-actions-hover);
+  --c8y-action-bar-color-default: var(--c8y-root-component-color-default);
+  --c8y-action-bar-color-focus: var(--c8y-root-component-color-focus);
+  --c8y-action-bar-color-text-muted: var(--c8y-root-component-color-text-muted);
+  --c8y-action-bar-icon-color: var(--c8y-root-component-icon-color);
+
+  /* SECTION: Alert - Colors */
+  --c8y-alert-background-default: var(--c8y-palette-low);
+  --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-palette-status-system);
+  --c8y-alert-status-warning: var(--c8y-palette-status-warning);
+
+  /* SECTION: Button - Colors */
+  --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-light);
+  --c8y-btn-danger-background-default: var(--c8y-root-component-background-default);
+  --c8y-btn-danger-background-focus: var(--c8y-palette-high);
+  --c8y-btn-danger-background-hover: var(--c8y-palette-status-danger);
+  --c8y-btn-danger-border-color-active: var(--c8y-palette-status-danger-light);
+  --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-status-danger);
+  --c8y-btn-danger-color-focus: var(--c8y-palette-status-danger);
+  --c8y-btn-danger-color-hover: var(--c8y-palette-high);
+  --c8y-btn-default-background-active: var(--c8y-brand-40);
+  --c8y-btn-default-background-default: var(--c8y-root-component-background-default);
+  --c8y-btn-default-background-focus: var(--c8y-root-component-background-default);
+  --c8y-btn-default-background-hover: var(--c8y-root-component-background-default);
+  --c8y-btn-default-border-color-active: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-default-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-default-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-default-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-default-color-active: var(--c8y-brand-10);
+  --c8y-btn-default-color-default: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-default-color-focus: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-default-color-hover: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-primary-background-active: var(--c8y-brand-30);
+  --c8y-btn-primary-background-default: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-primary-background-focus: var(--c8y-root-component-background-default);
+  --c8y-btn-primary-background-hover: var(--c8y-root-component-background-default);
+  --c8y-btn-primary-border-color-active: var(--c8y-brand-30);
+  --c8y-btn-primary-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-primary-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-primary-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-primary-color-active: var(--c8y-palette-high);
+  --c8y-btn-primary-color-default: var(--c8y-palette-low);
+  --c8y-btn-primary-color-focus: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-btn-primary-color-hover: var(--brand-primary, var(--c8y-brand-primary));
+
+  /* SECTION: Code - Colors */
+  --c8y-code-background: var(--c8y-palette-blue-80);
+  --c8y-code-color: var(--c8y-palette-blue-30);
+
+  /* SECTION: Dropdown - Colors */
+  --c8y-dropdown-background-default: var(--c8y-palette-gray-80);
+  --c8y-dropdown-border-color: var(--c8y-palette-gray-70);
+  --c8y-dropdown-color-default: var(--c8y-root-component-color-default);
+  --c8y-dropdown-color-hover: var(--c8y-root-component-color-actions-hover);
+  --c8y-dropdown-icon-color-default: var(--c8y-palette-gray-40);
+  --c8y-dropdown-icon-color-hover: var(--c8y-dropdown-color-hover);
+
+  /* SECTION: Dropdown - Defaults */
+  --c8y-dropdown-border-radius: 6px;
+  --c8y-dropdown-elevation-default: none;
+  --c8y-dropdown-elevation-hover: 0 0 0 1px var(--c8y-palette-gray-70);
+
+  /* SECTION: Form Control - Colors */
+  --c8y-form-control-background-default: var(--c8y-palette-gray-80);
+  --c8y-form-control-background-disabled: var(--c8y-root-component-background-disabled);
+  --c8y-form-control-background-focus: var(--c8y-palette-gray-80);
+  --c8y-form-control-border-color-default: var(--c8y-palette-gray-60);
+  --c8y-form-control-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-form-control-color-default: var(--c8y-root-component-color-default);
+  --c8y-form-control-color-disabled: var(--c8y-root-component-color-disabled);
+  --c8y-form-control-color-focus: var(--c8y-root-component-color-default);
+  --c8y-form-control-icon-color: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-form-control-placeholder-color: var(--c8y-palette-gray-40);
+
+  /* SECTION: Form Label - Colors */
+  --c8y-form-label-color: var(--text-color, var(--c8y-text-color));
+
+  /* SECTION: Form Legend - Colors */
+  --c8y-form-legend-color: var(--text-color, var(--c8y-text-color));
+
+  /* SECTION: Helpdrawer - Colors */
+  --c8y-helpdrawer-background-default: var(--c8y-palette-gray-80);
+
+  /* SECTION: Main Header - Colors */
+  --c8y-main-header-background-active: var(--c8y-brand-20);
+  --c8y-main-header-background-default: var(--c8y-palette-gray-90);
+  --c8y-main-header-text-color-default: var(--text-color, var(--c8y-text-color));
+  --c8y-main-header-text-color-hover: var(--brand-primary, var(--c8y-brand-primary));
+
+  /* SECTION: Main Header - Defaults */
+  --c8y-main-header-shadow: inset 0 -1px 0 var(--c8y-palette-gray-80);
+
+  /* SECTION: Modal - Colors */
+  --c8y-modal-background-default: var(--c8y-palette-gray-90);
+  --c8y-modal-color-default: var(--c8y-root-component-color-default);
+
+  /* SECTION: Nav Tabs - Colors */
+  --c8y-nav-tabs-background-active: var(--c8y-nav-tabs-background-default);
+  --c8y-nav-tabs-background-default: var(--c8y-main-header-background-default);
+  --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-root-component-border-color);
+  --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(--brand-primary, var(--c8y-brand-primary));
+  --c8y-nav-tabs-icon-color-default: var(--c8y-palette-gray-40);
+  --c8y-nav-tabs-icon-color-focus: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-nav-tabs-icon-color-hover: var(--brand-primary, var(--c8y-brand-primary));
+
+  /* SECTION: Navbar - Colors */
+  --c8y-navbar-background-default: var(--c8y-nav-tabs-background-default);
+  --c8y-navbar-border-color: transparent;
+  --c8y-navbar-color-default: var(--text-color, var(--c8y-text-color));
+  --c8y-navbar-link: var(--c8y-root-component-brand-primary);
+
+  /* SECTION: Navigator - Colors */
+  --c8y-navigator-background-active: var(--c8y-brand-20);
+  --c8y-navigator-background-default: var(--c8y-palette-gray-90);
+  --c8y-navigator-background-selected: var(--c8y-palette-gray-80);
+  --c8y-navigator-border-selected: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-navigator-header-background: var(--c8y-navigator-background-default);
+  --c8y-navigator-header-color: var(--c8y-navigator-text-color-default);
+  --c8y-navigator-scrollbar-thumb-default: var(--c8y-root-component-scrollbar-thumb-default);
+  --c8y-navigator-scrollbar-thumb-hover: var(--c8y-root-component-scrollbar-thumb-hover);
+  --c8y-navigator-scrollbar-track: var(--c8y-root-component-scrollbar-track);
+  --c8y-navigator-separator-color: var(--c8y-palette-gray-80);
+  --c8y-navigator-text-color-active: var(--c8y-palette-gray-20);
+  --c8y-navigator-text-color-default: var(--c8y-palette-gray-30);
+  --c8y-navigator-text-color-selected: var(--c8y-palette-gray-20);
+
+  /* SECTION: NavLink - Colors */
+  --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(--brand-primary, var(--c8y-brand-primary));
+  --c8y-navlink-color-default: var(--text-color, var(--c8y-text-color));
+  --c8y-navlink-color-focus: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-navlink-color-hover: var(--brand-primary, var(--c8y-brand-primary));
+
+  /* SECTION: Page Sticky Header - Colors */
+  --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(--text-color, var(--c8y-text-color));
+  --c8y-page-sticky-header-color-hover: var(--c8y-link-hover-color);
+
+  /* SECTION: Popover - Colors */
+  --c8y-popover-background-default: var(--c8y-palette-low);
+  --c8y-popover-border-color: var(--c8y-root-component-border-color);
+  --c8y-popover-color-default: var(--c8y-root-component-color-default);
+  --c8y-popover-color-link: var(--c8y-root-component-color-link);
+  --c8y-popover-color-link-hover: var(--c8y-root-component-color-link-hover);
+  --c8y-popover-icon-color: var(--c8y-root-component-icon-color);
+  --c8y-popover-label-color: var(--c8y-form-label-color);
+
+  /* SECTION: Pre - Colors */
+  --c8y-pre-background: var(--c8y-palette-gray-60);
+  --c8y-pre-border-color: var(--c8y-palette-gray-70);
+  --c8y-pre-color: var(--c8y-palette-gray-20);
+
+  /* SECTION: Right Drawer - Colors */
+  --c8y-right-drawer-background-active: var(--c8y-brand-20);
+  --c8y-right-drawer-background-default: var(--c8y-palette-gray-90);
+  --c8y-right-drawer-background-selected: var(--c8y-palette-gray-90);
+  --c8y-right-drawer-border-selected: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-right-drawer-link-color-default: var(--c8y-root-component-brand-primary);
+  --c8y-right-drawer-link-color-hover: var(--c8y-root-component-brand-primary);
+  --c8y-right-drawer-separator-color: var(--c8y-palette-gray-80);
+  --c8y-right-drawer-text-color-default: var(--c8y-palette-gray-30);
+
+  /* SECTION: Root Component - Colors */
+  --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,.1);
+  --c8y-root-component-background-expanded: var(--c8y-palette-gray-90);
+  --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(255, 255, 255, 0.03) 100%);
+  --c8y-root-component-background-focus: var(--c8y-root-component-background-default);
+  --c8y-root-component-background-hover: color-mix(in srgb, var(--c8y-brand-10), transparent 80%);
+  --c8y-root-component-background-odd: var(--c8y-global-odd);
+  --c8y-root-component-border-color: var(--c8y-palette-gray-70);
+  --c8y-root-component-brand-primary: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-root-component-color-accent: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-root-component-color-actions: var(--text-color, var(--c8y-text-color));
+  --c8y-root-component-color-actions-hover: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-root-component-color-active: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-root-component-color-default: var(--text-color, var(--c8y-text-color));
+  --c8y-root-component-color-disabled: var(--c8y-palette-gray-70);
+  --c8y-root-component-color-expanded: inherit;
+  --c8y-root-component-color-focus: var(--c8y-brand-60);
+  --c8y-root-component-color-link: var(--c8y-link-color);
+  --c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
+  --c8y-root-component-color-odd: var(--text-color, var(--c8y-text-color));
+  --c8y-root-component-color-text-muted: var(--c8y-text-muted);
+  --c8y-root-component-icon-color: var(--c8y-palette-gray-30);
+  --c8y-root-component-icon-dark-color-dark: var(--c8y-palette-gray-30);
+  --c8y-root-component-icon-dark-color-light: var(--brand-primary, var(--c8y-brand-primary));
+  --c8y-root-component-icon-white-color-dark: var(--c8y-palette-low);
+  --c8y-root-component-icon-white-color-light: var(--brand-primary, var(--c8y-brand-primary));
+  --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-root-component-background-default);
+  --c8y-root-component-separator-color: var(--c8y-global-separator);
+  --c8y-root-component-spinner-color: var(--brand-primary, var(--c8y-brand-primary));
+
+  /* SECTION: Switch - Colors */
+  --c8y-switch-background-active: var(--c8y-brand-30);
+  --c8y-switch-background-default: var(--c8y-palette-gray-60);
+  --c8y-switch-handle-background: var(--c8y-palette-gray-20);
+  --c8y-switch-handle-color: var(--c8y-root-component-background-default);
+
+  /* SECTION: Tooltip - Colors */
+  --c8y-tooltip-background-default: var(--c8y-palette-gray-30);
+  --c8y-tooltip-color-default: var(--c8y-palette-gray-100);
+
+  /* SECTION: Tooltip - Defaults */
+  --c8y-tooltip-opacity: 1;
+}
+
+.c8y-dark-theme {
+  @include c8y-dark-theme();
+}

package/variables/tokens/c8y-design-tokens.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 03 Sep 2025 23:29:02 GMT
+// Generated on Mon, 12 Jan 2026 11:47:08 GMT
 
 :root, .c8y-light-theme {
 
@@ -243,7 +243,7 @@
   --c8y-btn-border-radius-large: calc(var(--c8y-btn-border-radius-base) * 1.25px);
   --c8y-btn-border-radius-pill: calc(var(--c8y-unit-base) * 3px);
   --c8y-btn-border-radius-small: calc(var(--c8y-btn-border-radius-base) * 0.75 * 1px);
-  --c8y-btn-border-radius-xs: 12px;
+  --c8y-btn-border-radius-xs: 3px;
   --c8y-btn-font-family: var(--c8y-font-family-base);
   --c8y-btn-font-size-base: var(--c8y-font-size-base);
   --c8y-btn-font-size-large: var(--c8y-font-size-large);
@@ -322,7 +322,7 @@
 
   /* SECTION: Form Label - Defaults */
   --c8y-form-label-font-size: var(--c8y-font-size-base);
-  --c8y-form-label-font-weight: 500;
+  --c8y-form-label-font-weight: 600;
   --c8y-form-label-text-transform: none;
 
   /* SECTION: Form Legend - Colors */
@@ -471,7 +471,7 @@
   --c8y-popover-color-link: var(--c8y-root-component-color-link);
   --c8y-popover-color-link-hover: var(--c8y-root-component-color-link-hover);
   --c8y-popover-icon-color: var(--c8y-root-component-icon-color);
-  --c8y-popover-label-color: var(--c8y-root-component-form-label-color);
+  --c8y-popover-label-color: var(--c8y-form-label-color);
 
   /* SECTION: Popover - Defaults */
   --c8y-popover-arrow-width: 10px;
@@ -525,17 +525,6 @@
   --c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
   --c8y-root-component-color-odd: var(--text-color, var(--c8y-text-color));
   --c8y-root-component-color-text-muted: var(--c8y-text-muted);
-  --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(--brand-dark, var(--c8y-brand-dark));
   --c8y-root-component-icon-dark-color-light: var(--brand-light, var(--c8y-brand-light));