@c8y/style 1022.4.9 → 1022.4.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/styles/_c8y-countdown-interval.less +1 -1
  3. package/styles/_main-header.less +1 -1
  4. package/variables/_c8y-action-bar-vars.less +1 -1
  5. package/variables/_color-vars.less +1 -1
  6. package/variables/dashboard-themes/_branded-dashboard.less +1 -1
  7. package/variables/tokens/c8y-design-tokens-dark.less +48 -48
  8. package/variables/tokens/c8y-design-tokens.less +51 -50
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c8y/style",
3
- "version": "1022.4.9",
3
+ "version": "1022.4.14",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Cumulocity GmbH",
6
6
  "description": "Styles for Cumulocity IoT applications",
package/styles/_c8y-countdown-interval.less CHANGED
@@ -99,7 +99,7 @@ c8y-countdown-interval {
99
99
  cursor: not-allowed !important;
100
100
  outline-offset: 0 !important;
101
101
  i {
102
- opacity: var(--c8y-action-bar-disabled-opacity) !important;
102
+ opacity: var(--c8y-action-bar-opacity-disabled) !important;
103
103
  cursor: not-allowed !important;
104
104
  }
105
105
  }
package/styles/_main-header.less CHANGED
@@ -107,7 +107,7 @@
107
107
 
108
108
  body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
109
109
  .app-main-header {
110
- box-shadow: inset 0 -1px 0 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color)), var(--c8y-main-header-shadow);
110
+ box-shadow: inset 0 -1px 0 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color)), var(--c8y-elevation-md-bottom);
111
111
  }
112
112
  }
113
113
 
package/variables/_c8y-action-bar-vars.less CHANGED
@@ -9,5 +9,5 @@
9
9
  @action-bar-color-actions-hover: var(--action-bar-color-actions-hover, var(--c8y-action-bar-color-actions-hover));
10
10
 
11
11
  @action-bar-actions-opacity: var(--action-bar-actions-opacity, var(--c8y-action-bar-actions-opacity));
12
- @action-bar-disabled-opacity: var(--action-bar-disabled-opacity, var(--c8y-action-bar-disabled-opacity));
12
+ @action-bar-disabled-opacity: var(--action-bar-opacity-disabled, var(--c8y-action-bar-opacity-disabled));
13
13
  @action-bar-icon-color: var(--action-bar-icon-color, var(--c8y-action-bar-icon-color));
package/variables/_color-vars.less CHANGED
@@ -74,7 +74,7 @@
74
74
  @navigator-text-color: var(--navigator-text-color, var(--c8y-navigator-text-color));
75
75
  @navigator-header-color: var(--navigator-title-color, var(--c8y-navigator-title-color));
76
76
  @navigator-separator-color: var(--navigator-separator-color, var(--c8y-navigator-separator-color));
77
- @navigator-text-color-selected: var(--navigator-color-active, var(--c8y-navigator-color-active));
77
+ @navigator-text-color-selected: var(--navigator-active-color, var(--navigator-color-active, var(--c8y-navigator-color-active)));
78
78
  @navigator-background-selected: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
79
79
  @navigator-border-selected: var(--navigator-border-active, var(--c8y-navigator-border-active));
80
80
  @navigator-background-active: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
package/variables/dashboard-themes/_branded-dashboard.less CHANGED
@@ -14,7 +14,7 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
14
14
  --c8y-action-bar-color-default: var(--c8y-palette-high);
15
15
  --c8y-action-bar-color-focus: var(--c8y-brand-80);
16
16
  --c8y-action-bar-color-text-muted: var(--c8y-brand-80);
17
- --c8y-action-bar-disabled-opacity: var(--c8y-root-component-opacity-disabled);
17
+ --c8y-action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
18
18
  --c8y-action-bar-icon-color: var(--v8y-brand-80);
19
19
 
20
20
 
package/variables/tokens/c8y-design-tokens-dark.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 17 Jun 2025 11:08:06 GMT
3
+ // Generated on Tue, 01 Jul 2025 20:03:54 GMT
4
4
 
5
5
  .c8y-dark-theme {
6
6
 
@@ -44,8 +44,8 @@
44
44
  --c8y-brand-60: var(--c8y-palette-yellow-60);
45
45
  --c8y-brand-70: var(--c8y-palette-yellow-70);
46
46
  --c8y-brand-80: var(--c8y-palette-yellow-80);
47
+ --c8y-brand-accent: var(--c8y-palette-blue-30);
47
48
  --c8y-brand-accent-dark: var(--c8y-palette-blue-10);
48
- --c8y-brand-accent-default: var(--c8y-palette-blue-30);
49
49
  --c8y-brand-accent-light: var(--c8y-palette-blue-80);
50
50
  --c8y-brand-complementary: var(--c8y-brand-70);
51
51
  --c8y-brand-dark: var(--c8y-brand-10);
@@ -102,17 +102,17 @@
102
102
 
103
103
  /* SECTION: Button - Colors */
104
104
  --c8y-btn-accent-background-active: var(--c8y-brand-accent-dark);
105
- --c8y-btn-accent-background-default: var(--c8y-brand-accent-default);
105
+ --c8y-btn-accent-background-default: var(--c8y-brand-accent);
106
106
  --c8y-btn-accent-background-focus: var(--c8y-palette-high);
107
107
  --c8y-btn-accent-background-hover: var(--c8y-palette-high);
108
108
  --c8y-btn-accent-border-color-active: var(--c8y-brand-accent-dark);
109
- --c8y-btn-accent-border-color-default: var(--c8y-brand-accent-default);
110
- --c8y-btn-accent-border-color-focus: var(--c8y-brand-accent-default);
111
- --c8y-btn-accent-border-color-hover: var(--c8y-brand-accent-default);
109
+ --c8y-btn-accent-border-color-default: var(--c8y-brand-accent);
110
+ --c8y-btn-accent-border-color-focus: var(--c8y-brand-accent);
111
+ --c8y-btn-accent-border-color-hover: var(--c8y-brand-accent);
112
112
  --c8y-btn-accent-color-active: var(--c8y-palette-high);
113
113
  --c8y-btn-accent-color-default: var(--c8y-palette-high);
114
- --c8y-btn-accent-color-focus: var(--c8y-brand-accent-default);
115
- --c8y-btn-accent-color-hover: var(--c8y-brand-accent-default);
114
+ --c8y-btn-accent-color-focus: var(--c8y-brand-accent);
115
+ --c8y-btn-accent-color-hover: var(--c8y-brand-accent);
116
116
  --c8y-btn-danger-background-active: var(--c8y-palette-status-danger-light);
117
117
  --c8y-btn-danger-background-default: var(--c8y-root-component-background-default);
118
118
  --c8y-btn-danger-background-focus: var(--c8y-palette-high);
@@ -129,26 +129,26 @@
129
129
  --c8y-btn-default-background-default: var(--c8y-root-component-background-default);
130
130
  --c8y-btn-default-background-focus: var(--c8y-root-component-background-default);
131
131
  --c8y-btn-default-background-hover: var(--c8y-root-component-background-default);
132
- --c8y-btn-default-border-color-active: var(--c8y-brand-primary);
133
- --c8y-btn-default-border-color-default: var(--c8y-brand-primary);
134
- --c8y-btn-default-border-color-focus: var(--c8y-brand-primary);
135
- --c8y-btn-default-border-color-hover: var(--c8y-brand-primary);
132
+ --c8y-btn-default-border-color-active: var(--brand-primary, var(--c8y-brand-primary));
133
+ --c8y-btn-default-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
134
+ --c8y-btn-default-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
135
+ --c8y-btn-default-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
136
136
  --c8y-btn-default-color-active: var(--c8y-brand-10);
137
- --c8y-btn-default-color-default: var(--c8y-brand-primary);
138
- --c8y-btn-default-color-focus: var(--c8y-brand-primary);
139
- --c8y-btn-default-color-hover: var(--c8y-brand-primary);
137
+ --c8y-btn-default-color-default: var(--brand-primary, var(--c8y-brand-primary));
138
+ --c8y-btn-default-color-focus: var(--brand-primary, var(--c8y-brand-primary));
139
+ --c8y-btn-default-color-hover: var(--brand-primary, var(--c8y-brand-primary));
140
140
  --c8y-btn-primary-background-active: var(--c8y-brand-30);
141
- --c8y-btn-primary-background-default: var(--c8y-brand-primary);
141
+ --c8y-btn-primary-background-default: var(--brand-primary, var(--c8y-brand-primary));
142
142
  --c8y-btn-primary-background-focus: var(--c8y-root-component-background-default);
143
143
  --c8y-btn-primary-background-hover: var(--c8y-root-component-background-default);
144
144
  --c8y-btn-primary-border-color-active: var(--c8y-brand-30);
145
- --c8y-btn-primary-border-color-default: var(--c8y-brand-primary);
146
- --c8y-btn-primary-border-color-focus: var(--c8y-brand-primary);
147
- --c8y-btn-primary-border-color-hover: var(--c8y-brand-primary);
145
+ --c8y-btn-primary-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
146
+ --c8y-btn-primary-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
147
+ --c8y-btn-primary-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
148
148
  --c8y-btn-primary-color-active: var(--c8y-palette-high);
149
149
  --c8y-btn-primary-color-default: var(--c8y-palette-low);
150
- --c8y-btn-primary-color-focus: var(--c8y-brand-primary);
151
- --c8y-btn-primary-color-hover: var(--c8y-brand-primary);
150
+ --c8y-btn-primary-color-focus: var(--brand-primary, var(--c8y-brand-primary));
151
+ --c8y-btn-primary-color-hover: var(--brand-primary, var(--c8y-brand-primary));
152
152
 
153
153
  /* SECTION: Code - Colors */
154
154
  --c8y-code-background: var(--c8y-palette-blue-80);
@@ -172,18 +172,18 @@
172
172
  --c8y-form-control-background-disabled: var(--c8y-root-component-background-disabled);
173
173
  --c8y-form-control-background-focus: var(--c8y-palette-gray-80);
174
174
  --c8y-form-control-border-color-default: var(--c8y-palette-gray-60);
175
- --c8y-form-control-border-color-focus: var(--c8y-brand-primary);
175
+ --c8y-form-control-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
176
176
  --c8y-form-control-color-default: var(--c8y-root-component-color-default);
177
177
  --c8y-form-control-color-disabled: var(--c8y-root-component-color-disabled);
178
178
  --c8y-form-control-color-focus: var(--c8y-root-component-color-default);
179
- --c8y-form-control-icon-color: var(--c8y-brand-primary);
179
+ --c8y-form-control-icon-color: var(--brand-primary, var(--c8y-brand-primary));
180
180
  --c8y-form-control-placeholder-color: var(--c8y-palette-gray-40);
181
181
 
182
182
  /* SECTION: Form Label - Colors */
183
- --c8y-form-label-color: var(--c8y-text-color);
183
+ --c8y-form-label-color: var(--text-color, var(--c8y-text-color));
184
184
 
185
185
  /* SECTION: Form Legend - Colors */
186
- --c8y-form-legend-color: var(--c8y-text-color);
186
+ --c8y-form-legend-color: var(--text-color, var(--c8y-text-color));
187
187
 
188
188
  /* SECTION: Helpdrawer - Colors */
189
189
  --c8y-helpdrawer-background-default: var(--c8y-palette-gray-80);
@@ -191,8 +191,8 @@
191
191
  /* SECTION: Main Header - Colors */
192
192
  --c8y-main-header-background-active: var(--c8y-brand-20);
193
193
  --c8y-main-header-background-default: var(--c8y-palette-gray-90);
194
- --c8y-main-header-text-color-default: var(--c8y-text-color);
195
- --c8y-main-header-text-color-hover: var(--c8y-brand-primary);
194
+ --c8y-main-header-text-color-default: var(--text-color, var(--c8y-text-color));
195
+ --c8y-main-header-text-color-hover: var(--brand-primary, var(--c8y-brand-primary));
196
196
 
197
197
  /* SECTION: Main Header - Defaults */
198
198
  --c8y-main-header-shadow: inset 0 -1px 0 var(--c8y-palette-gray-80);
@@ -212,22 +212,22 @@
212
212
  --c8y-nav-tabs-color-default: var(--c8y-navlink-color-default);
213
213
  --c8y-nav-tabs-color-focus: var(--c8y-navlink-color-focus);
214
214
  --c8y-nav-tabs-color-hover: var(--c8y-navlink-color-hover);
215
- --c8y-nav-tabs-icon-color-active: var(--c8y-brand-primary);
215
+ --c8y-nav-tabs-icon-color-active: var(--brand-primary, var(--c8y-brand-primary));
216
216
  --c8y-nav-tabs-icon-color-default: var(--c8y-palette-gray-40);
217
- --c8y-nav-tabs-icon-color-focus: var(--c8y-brand-primary);
218
- --c8y-nav-tabs-icon-color-hover: var(--c8y-brand-primary);
217
+ --c8y-nav-tabs-icon-color-focus: var(--brand-primary, var(--c8y-brand-primary));
218
+ --c8y-nav-tabs-icon-color-hover: var(--brand-primary, var(--c8y-brand-primary));
219
219
 
220
220
  /* SECTION: Navbar - Colors */
221
221
  --c8y-navbar-background-default: var(--c8y-nav-tabs-background-default);
222
222
  --c8y-navbar-border-color: transparent;
223
- --c8y-navbar-color-default: var(--c8y-text-color);
223
+ --c8y-navbar-color-default: var(--text-color, var(--c8y-text-color));
224
224
  --c8y-navbar-link: var(--c8y-root-component-brand-primary);
225
225
 
226
226
  /* SECTION: Navigator - Colors */
227
227
  --c8y-navigator-background-active: var(--c8y-brand-20);
228
228
  --c8y-navigator-background-default: var(--c8y-palette-gray-90);
229
229
  --c8y-navigator-background-selected: var(--c8y-palette-gray-80);
230
- --c8y-navigator-border-selected: var(--c8y-brand-primary);
230
+ --c8y-navigator-border-selected: var(--brand-primary, var(--c8y-brand-primary));
231
231
  --c8y-navigator-header-background: var(--c8y-navigator-background-default);
232
232
  --c8y-navigator-header-color: var(--c8y-navigator-text-color-default);
233
233
  --c8y-navigator-scrollbar-thumb-default: var(--c8y-root-component-scrollbar-thumb-default);
@@ -243,15 +243,15 @@
243
243
  --c8y-navlink-background-default: var(--c8y-root-component-background-default);
244
244
  --c8y-navlink-background-focus: transparent;
245
245
  --c8y-navlink-background-hover: transparent;
246
- --c8y-navlink-color-active: var(--c8y-brand-primary);
247
- --c8y-navlink-color-default: var(--c8y-text-color);
248
- --c8y-navlink-color-focus: var(--c8y-brand-primary);
249
- --c8y-navlink-color-hover: var(--c8y-brand-primary);
246
+ --c8y-navlink-color-active: var(--brand-primary, var(--c8y-brand-primary));
247
+ --c8y-navlink-color-default: var(--text-color, var(--c8y-text-color));
248
+ --c8y-navlink-color-focus: var(--brand-primary, var(--c8y-brand-primary));
249
+ --c8y-navlink-color-hover: var(--brand-primary, var(--c8y-brand-primary));
250
250
 
251
251
  /* SECTION: Page Sticky Header - Colors */
252
252
  --c8y-page-sticky-header-background-default: var(--c8y-palette-gray-90);
253
253
  --c8y-page-sticky-header-color-active: var(--c8y-link-color);
254
- --c8y-page-sticky-header-color-default: var(--c8y-text-color);
254
+ --c8y-page-sticky-header-color-default: var(--text-color, var(--c8y-text-color));
255
255
  --c8y-page-sticky-header-color-hover: var(--c8y-link-hover-color);
256
256
 
257
257
  /* SECTION: Popover - Colors */
@@ -272,7 +272,7 @@
272
272
  --c8y-right-drawer-background-active: var(--c8y-brand-20);
273
273
  --c8y-right-drawer-background-default: var(--c8y-palette-gray-90);
274
274
  --c8y-right-drawer-background-selected: var(--c8y-palette-gray-90);
275
- --c8y-right-drawer-border-selected: var(--c8y-brand-primary);
275
+ --c8y-right-drawer-border-selected: var(--brand-primary, var(--c8y-brand-primary));
276
276
  --c8y-right-drawer-link-color-default: var(--c8y-root-component-brand-primary);
277
277
  --c8y-right-drawer-link-color-hover: var(--c8y-root-component-brand-primary);
278
278
  --c8y-right-drawer-separator-color: var(--c8y-palette-gray-80);
@@ -288,18 +288,18 @@
288
288
  --c8y-root-component-background-hover: color-mix(in srgb, var(--c8y-brand-10), transparent 80%);
289
289
  --c8y-root-component-background-odd: var(--c8y-global-odd);
290
290
  --c8y-root-component-border-color: var(--c8y-palette-gray-70);
291
- --c8y-root-component-brand-primary: var(--c8y-brand-primary);
292
- --c8y-root-component-color-accent: var(--c8y-brand-primary);
293
- --c8y-root-component-color-actions: var(--c8y-text-color);
294
- --c8y-root-component-color-actions-hover: var(--c8y-brand-primary);
295
- --c8y-root-component-color-active: var(--c8y-brand-primary);
296
- --c8y-root-component-color-default: var(--c8y-text-color);
291
+ --c8y-root-component-brand-primary: var(--brand-primary, var(--c8y-brand-primary));
292
+ --c8y-root-component-color-accent: var(--brand-primary, var(--c8y-brand-primary));
293
+ --c8y-root-component-color-actions: var(--text-color, var(--c8y-text-color));
294
+ --c8y-root-component-color-actions-hover: var(--brand-primary, var(--c8y-brand-primary));
295
+ --c8y-root-component-color-active: var(--brand-primary, var(--c8y-brand-primary));
296
+ --c8y-root-component-color-default: var(--text-color, var(--c8y-text-color));
297
297
  --c8y-root-component-color-disabled: var(--c8y-palette-gray-70);
298
298
  --c8y-root-component-color-expanded: inherit;
299
299
  --c8y-root-component-color-focus: var(--c8y-brand-60);
300
300
  --c8y-root-component-color-link: var(--c8y-link-color);
301
301
  --c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
302
- --c8y-root-component-color-odd: var(--c8y-text-color);
302
+ --c8y-root-component-color-odd: var(--text-color, var(--c8y-text-color));
303
303
  --c8y-root-component-color-text-muted: var(--c8y-text-muted);
304
304
  --c8y-root-component-form-control-background-default: var(--c8y-form-control-background-default);
305
305
  --c8y-root-component-form-control-background-disabled: var(--c8y-form-control-background-disabled);
@@ -314,16 +314,16 @@
314
314
  --c8y-root-component-form-legend-color: var(--c8y-form-legend-color);
315
315
  --c8y-root-component-icon-color: var(--c8y-palette-gray-30);
316
316
  --c8y-root-component-icon-dark-color-dark: var(--c8y-palette-gray-30);
317
- --c8y-root-component-icon-dark-color-light: var(--c8y-brand-primary);
317
+ --c8y-root-component-icon-dark-color-light: var(--brand-primary, var(--c8y-brand-primary));
318
318
  --c8y-root-component-icon-white-color-dark: var(--c8y-palette-low);
319
- --c8y-root-component-icon-white-color-light: var(--c8y-brand-primary);
319
+ --c8y-root-component-icon-white-color-light: var(--brand-primary, var(--c8y-brand-primary));
320
320
  --c8y-root-component-pulse-color: var(--c8y-palette-status-realtime);
321
321
  --c8y-root-component-realtime-added: var(--c8y-brand-realtime-added);
322
322
  --c8y-root-component-scrollbar-thumb-default: var(--c8y-palette-gray-80);
323
323
  --c8y-root-component-scrollbar-thumb-hover: var(--c8y-palette-gray-70);
324
324
  --c8y-root-component-scrollbar-track: var(--c8y-root-component-background-default);
325
325
  --c8y-root-component-separator-color: var(--c8y-global-separator);
326
- --c8y-root-component-spinner-color: var(--c8y-brand-primary);
326
+ --c8y-root-component-spinner-color: var(--brand-primary, var(--c8y-brand-primary));
327
327
 
328
328
  /* SECTION: Switch - Colors */
329
329
  --c8y-switch-background-active: var(--c8y-brand-30);
package/variables/tokens/c8y-design-tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 17 Jun 2025 11:08:06 GMT
3
+ // Generated on Tue, 01 Jul 2025 20:03:54 GMT
4
4
 
5
5
  :root, .c8y-light-theme {
6
6
 
@@ -108,8 +108,8 @@
108
108
  --c8y-brand-60: var(--c8y-palette-green-60);
109
109
  --c8y-brand-70: var(--c8y-palette-green-70);
110
110
  --c8y-brand-80: var(--c8y-palette-green-80);
111
+ --c8y-brand-accent: var(--c8y-palette-yellow-60);
111
112
  --c8y-brand-accent-dark: var(--c8y-palette-yellow-10);
112
- --c8y-brand-accent-default: var(--c8y-palette-yellow-60);
113
113
  --c8y-brand-accent-light: var(--c8y-palette-yellow-80);
114
114
  --c8y-brand-dark: var(--c8y-palette-gray-20);
115
115
  --c8y-brand-light: var(--c8y-palette-green-60);
@@ -190,17 +190,17 @@
190
190
 
191
191
  /* SECTION: Button - Colors */
192
192
  --c8y-btn-accent-background-active: var(--c8y-brand-accent-dark);
193
- --c8y-btn-accent-background-default: var(--c8y-brand-accent-default);
193
+ --c8y-btn-accent-background-default: var(--c8y-brand-accent);
194
194
  --c8y-btn-accent-background-focus: var(--c8y-palette-high);
195
195
  --c8y-btn-accent-background-hover: var(--c8y-palette-high);
196
196
  --c8y-btn-accent-border-color-active: var(--c8y-brand-accent-dark);
197
- --c8y-btn-accent-border-color-default: var(--c8y-brand-accent-default);
198
- --c8y-btn-accent-border-color-focus: var(--c8y-brand-accent-default);
199
- --c8y-btn-accent-border-color-hover: var(--c8y-brand-accent-default);
197
+ --c8y-btn-accent-border-color-default: var(--c8y-brand-accent);
198
+ --c8y-btn-accent-border-color-focus: var(--c8y-brand-accent);
199
+ --c8y-btn-accent-border-color-hover: var(--c8y-brand-accent);
200
200
  --c8y-btn-accent-color-active: var(--c8y-palette-high);
201
201
  --c8y-btn-accent-color-default: var(--c8y-palette-high);
202
- --c8y-btn-accent-color-focus: var(--c8y-brand-accent-default);
203
- --c8y-btn-accent-color-hover: var(--c8y-brand-accent-default);
202
+ --c8y-btn-accent-color-focus: var(--c8y-brand-accent);
203
+ --c8y-btn-accent-color-hover: var(--c8y-brand-accent);
204
204
  --c8y-btn-danger-background-active: var(--c8y-palette-status-danger-dark);
205
205
  --c8y-btn-danger-background-default: var(--c8y-root-component-background-default);
206
206
  --c8y-btn-danger-background-focus: var(--c8y-palette-high);
@@ -217,26 +217,26 @@
217
217
  --c8y-btn-default-background-default: var(--c8y-palette-high);
218
218
  --c8y-btn-default-background-focus: var(--c8y-palette-high);
219
219
  --c8y-btn-default-background-hover: var(--c8y-palette-high);
220
- --c8y-btn-default-border-color-active: var(--c8y-brand-primary);
221
- --c8y-btn-default-border-color-default: var(--c8y-brand-primary);
222
- --c8y-btn-default-border-color-focus: var(--c8y-brand-primary);
223
- --c8y-btn-default-border-color-hover: var(--c8y-brand-primary);
224
- --c8y-btn-default-color-active: var(--c8y-brand-primary);
225
- --c8y-btn-default-color-default: var(--c8y-brand-primary);
226
- --c8y-btn-default-color-focus: var(--c8y-brand-primary);
227
- --c8y-btn-default-color-hover: var(--c8y-brand-primary);
220
+ --c8y-btn-default-border-color-active: var(--brand-primary, var(--c8y-brand-primary));
221
+ --c8y-btn-default-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
222
+ --c8y-btn-default-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
223
+ --c8y-btn-default-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
224
+ --c8y-btn-default-color-active: var(--brand-primary, var(--c8y-brand-primary));
225
+ --c8y-btn-default-color-default: var(--brand-primary, var(--c8y-brand-primary));
226
+ --c8y-btn-default-color-focus: var(--brand-primary, var(--c8y-brand-primary));
227
+ --c8y-btn-default-color-hover: var(--brand-primary, var(--c8y-brand-primary));
228
228
  --c8y-btn-primary-background-active: var(--c8y-brand-20);
229
- --c8y-btn-primary-background-default: var(--c8y-brand-primary);
229
+ --c8y-btn-primary-background-default: var(--brand-primary, var(--c8y-brand-primary));
230
230
  --c8y-btn-primary-background-focus: var(--c8y-palette-high);
231
231
  --c8y-btn-primary-background-hover: var(--c8y-palette-high);
232
232
  --c8y-btn-primary-border-color-active: var(--c8y-brand-20);
233
- --c8y-btn-primary-border-color-default: var(--c8y-brand-primary);
234
- --c8y-btn-primary-border-color-focus: var(--c8y-brand-primary);
235
- --c8y-btn-primary-border-color-hover: var(--c8y-brand-primary);
233
+ --c8y-btn-primary-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
234
+ --c8y-btn-primary-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
235
+ --c8y-btn-primary-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
236
236
  --c8y-btn-primary-color-active: var(--c8y-palette-high);
237
237
  --c8y-btn-primary-color-default: var(--c8y-palette-high);
238
- --c8y-btn-primary-color-focus: var(--c8y-brand-primary);
239
- --c8y-btn-primary-color-hover: var(--c8y-brand-primary);
238
+ --c8y-btn-primary-color-focus: var(--brand-primary, var(--c8y-brand-primary));
239
+ --c8y-btn-primary-color-hover: var(--brand-primary, var(--c8y-brand-primary));
240
240
 
241
241
  /* SECTION: Button - Defaults */
242
242
  --c8y-btn-border-radius-base: 4;
@@ -296,11 +296,11 @@
296
296
  --c8y-form-control-background-disabled: var(--c8y-root-component-background-disabled);
297
297
  --c8y-form-control-background-focus: var(--c8y-root-component-background-default);
298
298
  --c8y-form-control-border-color-default: var(--c8y-palette-gray-60);
299
- --c8y-form-control-border-color-focus: var(--c8y-brand-primary);
299
+ --c8y-form-control-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
300
300
  --c8y-form-control-color-default: var(--c8y-root-component-color-default);
301
301
  --c8y-form-control-color-disabled: var(--c8y-root-component-color-disabled);
302
302
  --c8y-form-control-color-focus: var(--c8y-root-component-color-default);
303
- --c8y-form-control-icon-color: var(--c8y-brand-primary);
303
+ --c8y-form-control-icon-color: var(--brand-primary, var(--c8y-brand-primary));
304
304
  --c8y-form-control-placeholder-color: var(--c8y-palette-gray-40);
305
305
 
306
306
  /* SECTION: Form Control - Defaults */
@@ -318,7 +318,7 @@
318
318
  --c8y-form-control-placeholder-font-style: italic;
319
319
 
320
320
  /* SECTION: Form Label - Colors */
321
- --c8y-form-label-color: var(--c8y-palette-gray-20);
321
+ --c8y-form-label-color: var(--text-color, var(--c8y-palette-gray-20));
322
322
 
323
323
  /* SECTION: Form Label - Defaults */
324
324
  --c8y-form-label-font-size: var(--c8y-font-size-base);
@@ -326,7 +326,7 @@
326
326
  --c8y-form-label-text-transform: none;
327
327
 
328
328
  /* SECTION: Form Legend - Colors */
329
- --c8y-form-legend-color: var(--c8y-palette-gray-40);
329
+ --c8y-form-legend-color: var(--text-color,var(--c8y-palette-gray-40));
330
330
 
331
331
  /* SECTION: Form Legend - Defaults */
332
332
  --c8y-form-legend-font-size: var(--c8y-font-size-small);
@@ -348,8 +348,8 @@
348
348
  --c8y-main-header-background-default: var(--c8y-palette-high);
349
349
  --c8y-main-header-background-hover: inherit;
350
350
  --c8y-main-header-border-color: transparent;
351
- --c8y-main-header-text-color-default: var(--c8y-text-color);
352
- --c8y-main-header-text-color-hover: var(--c8y-brand-primary);
351
+ --c8y-main-header-text-color-default: var(--text-color, var(--c8y-text-color));
352
+ --c8y-main-header-text-color-hover: var(--brand-primary, var(--c8y-brand-primary));
353
353
 
354
354
  /* SECTION: Main Header - Defaults */
355
355
  --c8y-main-header-shadow: inset 0 -1px 0 0 var(--c8y-palette-gray-90);
@@ -392,10 +392,10 @@
392
392
  --c8y-nav-tabs-color-default: var(--c8y-navlink-color-default);
393
393
  --c8y-nav-tabs-color-focus: var(--c8y-navlink-color-focus);
394
394
  --c8y-nav-tabs-color-hover: var(--c8y-navlink-color-hover);
395
- --c8y-nav-tabs-icon-color-active: var(--c8y-brand-primary);
395
+ --c8y-nav-tabs-icon-color-active: var(--brand-primary, var(--c8y-brand-primary));
396
396
  --c8y-nav-tabs-icon-color-default: var(--c8y-palette-gray-40);
397
- --c8y-nav-tabs-icon-color-focus: var(--c8y-brand-primary);
398
- --c8y-nav-tabs-icon-color-hover: var(--c8y-brand-primary);
397
+ --c8y-nav-tabs-icon-color-focus: var(--brand-primary, var(--c8y-brand-primary));
398
+ --c8y-nav-tabs-icon-color-hover: var(--brand-primary, var(--c8y-brand-primary));
399
399
 
400
400
  /* SECTION: Nav Tabs - Defaults */
401
401
  --c8y-nav-tabs-border-width-active: 4px;
@@ -410,7 +410,7 @@
410
410
  /* SECTION: Navbar - Colors */
411
411
  --c8y-navbar-background-default: var(--c8y-root-component-background-default);
412
412
  --c8y-navbar-border-color: transparent;
413
- --c8y-navbar-color-default: var(--c8y-text-color);
413
+ --c8y-navbar-color-default: var(--text-color, var(--c8y-text-color));
414
414
  --c8y-navbar-link: var(--c8y-root-component-brand-primary);
415
415
 
416
416
  /* SECTION: Navbar - Defaults */
@@ -421,7 +421,7 @@
421
421
  --c8y-navigator-background-active: var(--c8y-brand-70);
422
422
  --c8y-navigator-background-default: var(--c8y-palette-gray-100);
423
423
  --c8y-navigator-background-selected: var(--c8y-palette-gray-80);
424
- --c8y-navigator-border-selected: var(--c8y-brand-primary);
424
+ --c8y-navigator-border-selected: var(--brand-primary, var(--c8y-brand-primary));
425
425
  --c8y-navigator-header-background: var(--c8y-navigator-background-default);
426
426
  --c8y-navigator-header-color: var(--c8y-navigator-text-color-default);
427
427
  --c8y-navigator-scrollbar-thumb-default: var(--c8y-root-component-scrollbar-thumb-default);
@@ -435,9 +435,10 @@
435
435
  /* SECTION: Navigator - Defaults */
436
436
  --c8y-navigator-active-border-width: 4px;
437
437
  --c8y-navigator-app-icon-size: 46px;
438
- --c8y-navigator-app-name-size: calc(var(--c8y-unit-base) * 2);
438
+ --c8y-navigator-app-name-size: calc(var(--c8y-font-size-base) * 1.14285714);
439
439
  --c8y-navigator-font-family: var(--c8y-font-family-base);
440
440
  --c8y-navigator-font-size: var(--c8y-font-size-base);
441
+ --c8y-navigator-panel-width: calc(var(--c8y-unit-base) * 30);
441
442
  --c8y-navigator-platform-logo-height: calc(var(--c8y-unit-base) * 5);
442
443
 
443
444
  /* SECTION: NavLink - Colors */
@@ -445,10 +446,10 @@
445
446
  --c8y-navlink-background-default: var(--c8y-root-component-background-default);
446
447
  --c8y-navlink-background-focus: transparent;
447
448
  --c8y-navlink-background-hover: transparent;
448
- --c8y-navlink-color-active: var(--c8y-brand-primary);
449
- --c8y-navlink-color-default: var(--c8y-text-color);
450
- --c8y-navlink-color-focus: var(--c8y-brand-primary);
451
- --c8y-navlink-color-hover: var(--c8y-brand-primary);
449
+ --c8y-navlink-color-active: var(--brand-primary, var(--c8y-brand-primary));
450
+ --c8y-navlink-color-default: var(--text-color, var(--c8y-text-color));
451
+ --c8y-navlink-color-focus: var(--brand-primary, var(--c8y-brand-primary));
452
+ --c8y-navlink-color-hover: var(--brand-primary, var(--c8y-brand-primary));
452
453
 
453
454
  /* SECTION: NavLink - Defaults */
454
455
  --c8y-navlink-padding-horizontal: calc(var(--c8y-unit-base) * 2);
@@ -492,7 +493,7 @@
492
493
  --c8y-right-drawer-background-active: var(--c8y-brand-70);
493
494
  --c8y-right-drawer-background-default: var(--c8y-palette-gray-100);
494
495
  --c8y-right-drawer-background-selected: var(--c8y-palette-gray-80);
495
- --c8y-right-drawer-border-selected: var(--c8y-brand-primary);
496
+ --c8y-right-drawer-border-selected: var(--brand-primary, var(--c8y-brand-primary));
496
497
  --c8y-right-drawer-link-color-default: var(--c8y-root-component-brand-primary);
497
498
  --c8y-right-drawer-link-color-hover: var(--c8y-root-component-brand-primary);
498
499
  --c8y-right-drawer-separator-color: var(--c8y-palette-gray-70);
@@ -511,18 +512,18 @@
511
512
  --c8y-root-component-background-hover: color-mix(in srgb, var(--c8y-brand-80), transparent 40%);
512
513
  --c8y-root-component-background-odd: var(--c8y-global-odd);
513
514
  --c8y-root-component-border-color: var(--c8y-global-separator);
514
- --c8y-root-component-brand-primary: var(--c8y-brand-primary);
515
- --c8y-root-component-color-accent: var(--c8y-brand-primary);
515
+ --c8y-root-component-brand-primary: var(--brand-primary, var(--c8y-brand-primary));
516
+ --c8y-root-component-color-accent: var(--brand-primary, var(--c8y-brand-primary));
516
517
  --c8y-root-component-color-actions: var(--c8y-palette-gray-30);
517
- --c8y-root-component-color-actions-hover: var(--c8y-brand-primary);
518
- --c8y-root-component-color-active: var(--c8y-brand-primary);
519
- --c8y-root-component-color-default: var(--c8y-text-color);
518
+ --c8y-root-component-color-actions-hover: var(--brand-primary, var(--c8y-brand-primary));
519
+ --c8y-root-component-color-active: var(--brand-primary, var(--c8y-brand-primary));
520
+ --c8y-root-component-color-default: var(--text-color, var(--c8y-text-color));
520
521
  --c8y-root-component-color-disabled: var(--c8y-palette-gray-70);
521
522
  --c8y-root-component-color-expanded: inherit;
522
- --c8y-root-component-color-focus: var(--c8y-brand-primary);
523
+ --c8y-root-component-color-focus: var(--brand-primary, var(--c8y-brand-primary));
523
524
  --c8y-root-component-color-link: var(--c8y-link-color);
524
525
  --c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
525
- --c8y-root-component-color-odd: var(--c8y-text-color);
526
+ --c8y-root-component-color-odd: var(--text-color, var(--c8y-text-color));
526
527
  --c8y-root-component-color-text-muted: var(--c8y-text-muted);
527
528
  --c8y-root-component-form-control-background-default: var(--c8y-form-control-background-default);
528
529
  --c8y-root-component-form-control-background-disabled: var(--c8y-form-control-background-disabled);
@@ -537,16 +538,16 @@
537
538
  --c8y-root-component-form-legend-color: var(--c8y-form-legend-color);
538
539
  --c8y-root-component-icon-color: var(--c8y-palette-gray-30);
539
540
  --c8y-root-component-icon-dark-color-dark: var(--c8y-brand-dark);
540
- --c8y-root-component-icon-dark-color-light: var(--c8y-brand-light);
541
+ --c8y-root-component-icon-dark-color-light: var(--c8y-brand-60);
541
542
  --c8y-root-component-icon-white-color-dark: var(--c8y-palette-high);
542
- --c8y-root-component-icon-white-color-light: var(--c8y-brand-light);
543
+ --c8y-root-component-icon-white-color-light: var(--c8y-brand-60);
543
544
  --c8y-root-component-pulse-color: var(--c8y-palette-status-realtime);
544
545
  --c8y-root-component-realtime-added: var(--c8y-brand-realtime-added);
545
546
  --c8y-root-component-scrollbar-thumb-default: rgba(57, 72, 82, .2);
546
547
  --c8y-root-component-scrollbar-thumb-hover: var(--c8y-palette-gray-40);
547
548
  --c8y-root-component-scrollbar-track: var(--c8y-root-component-background-default);
548
549
  --c8y-root-component-separator-color: var(--c8y-global-separator);
549
- --c8y-root-component-spinner-color: var(--c8y-brand-primary);
550
+ --c8y-root-component-spinner-color: var(--brand-primary, var(--c8y-brand-primary));
550
551
 
551
552
  /* SECTION: Root Component - Defaults */
552
553
  --c8y-root-component-border-caret-width: 6px;
@@ -572,7 +573,7 @@
572
573
  --c8y-switch-background-active: var(--c8y-brand-40);
573
574
  --c8y-switch-background-default: var(--c8y-palette-gray-50);
574
575
  --c8y-switch-handle-background: var(--c8y-palette-high);
575
- --c8y-switch-handle-color: var(--c8y-text-color);
576
+ --c8y-switch-handle-color: var(--text-color, var(--c8y-text-color));
576
577
 
577
578
  /* SECTION: Switch - Defaults */
578
579
  --c8y-switch-height: calc(var(--c8y-unit-base) * 3.75);