@c8y/style 1023.97.4 → 1023.97.7

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/helper-scripts/convert-scss-to-less.sh +10 -2
  2. package/package.json +1 -1
  3. package/variables/dashboard-themes/_branded-dashboard.less +82 -33
  4. package/variables/dashboard-themes/_branded-dashboard.scss +82 -33
  5. package/variables/dashboard-themes/_dark-dashboard.less +7 -13
  6. package/variables/dashboard-themes/_dark-dashboard.scss +7 -14
  7. package/variables/dashboard-themes/_white-dashboard.less +12 -2
  8. package/variables/dashboard-themes/_white-dashboard.scss +12 -3
package/helper-scripts/convert-scss-to-less.sh CHANGED
@@ -176,8 +176,16 @@ convert_syntax() {
176
176
  if [[ $VERBOSE == true ]]; then
177
177
  print_info "Removing redundant variable imports (LESS has global scope)"
178
178
  fi
179
- # Remove any import of variables/index.less or _login-vars.less
180
- content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\//d')
179
+ # Remove any import of variable files (LESS has global scope — these are
180
+ # imported at entry points and available everywhere)
181
+ content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\/index\.less/d')
182
+ content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\/_login-vars\.less/d')
183
+ content=$(echo "$content" | sed -E '/@import[[:space:]]+.*_color-defaults\.less/d')
184
+ content=$(echo "$content" | sed -E '/@import[[:space:]]+.*_color-vars\.less/d')
185
+ content=$(echo "$content" | sed -E '/@import[[:space:]]+.*_brand-vars\.less/d')
186
+
187
+ # 0f. Strip leading blank lines left after import removal
188
+ content=$(echo "$content" | sed '/./,$!d')
181
189
 
182
190
  # 1. Remove @content keyword (LESS doesn't support it)
183
191
  # Mixins with @content need manual expansion - just remove the keyword itself
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c8y/style",
3
- "version": "1023.97.4",
3
+ "version": "1023.97.7",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Cumulocity GmbH",
6
6
  "description": "Styles for Cumulocity IoT applications",
package/variables/dashboard-themes/_branded-dashboard.less CHANGED
@@ -5,6 +5,27 @@ c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-brande
5
5
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
6
6
  .c8y-grid-dashboard c8y-dashboard-child .panel-content-branded,
7
7
  &:has(.dashboard-theme-branded) .c8y-ui-action-bar {
8
+ // Branded theme always uses the light brand palette as its identity.
9
+ // These defaults use the light palette values (green). When branding IS
10
+ // customized, applyBrandingVars() injects overrides under
11
+ // .dashboard-theme-branded/.panel-content-branded with the same specificity
12
+ // but later in the cascade, so the customized values win.
13
+ --c8y-brand-10: var(--c8y-palette-green-10);
14
+ --c8y-brand-20: var(--c8y-palette-green-20);
15
+ --c8y-brand-30: var(--c8y-palette-green-30);
16
+ --c8y-brand-40: var(--c8y-palette-green-40);
17
+ --c8y-brand-50: var(--c8y-palette-green-50);
18
+ --c8y-brand-60: var(--c8y-palette-green-60);
19
+ --c8y-brand-70: var(--c8y-palette-green-70);
20
+ --c8y-brand-80: var(--c8y-palette-green-80);
21
+ --c8y-brand-accent: var(--c8y-palette-yellow-60);
22
+ --c8y-brand-accent-dark: var(--c8y-palette-yellow-10);
23
+ --c8y-brand-accent-light: var(--c8y-palette-yellow-80);
24
+ --c8y-brand-dark: var(--brand-dark, var(--c8y-palette-gray-20));
25
+ --c8y-brand-light: var(--brand-light, var(--c8y-palette-green-60));
26
+ --c8y-brand-primary: var(--brand-primary, var(--c8y-palette-green-40));
27
+ --c8y-brand-realtime-added: var(--c8y-brand-80);
28
+
8
29
  --c8y-abbr-border-color: var(--c8y-palette-gray-40);
9
30
  --c8y-action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
10
31
  --c8y-action-bar-background-default: var(--c8y-brand-10);
@@ -15,7 +36,19 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
15
36
  --c8y-action-bar-color-focus: var(--c8y-brand-80);
16
37
  --c8y-action-bar-color-text-muted: var(--c8y-brand-80);
17
38
  --c8y-action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
18
- --c8y-action-bar-icon-color: var(--v8y-brand-80);
39
+ --c8y-action-bar-icon-color: var(--c8y-brand-80);
40
+ // Override unprefixed action bar vars — branding injects these at :root,
41
+ // and the SCSS fallback chain checks unprefixed first.
42
+ --action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
43
+ --action-bar-background-default: var(--c8y-brand-10);
44
+ --action-bar-border-color: var(--c8y-brand-30);
45
+ --action-bar-color-actions-hover: var(--c8y-brand-60);
46
+ --action-bar-color-actions: var(--c8y-palette-high);
47
+ --action-bar-color-default: var(--c8y-palette-high);
48
+ --action-bar-color-focus: var(--c8y-brand-80);
49
+ --action-bar-color-text-muted: var(--c8y-brand-80);
50
+ --action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
51
+ --action-bar-icon-color: var(--c8y-brand-80);
19
52
 
20
53
 
21
54
  --c8y-alert-background-default: var(--c8y-palette-gray-80);
@@ -171,38 +204,21 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
171
204
  --c8y-palette-gray-70: var(--c8y-brand-50);
172
205
  --c8y-palette-gray-80: var(--c8y-brand-40);
173
206
  --c8y-palette-gray-90: var(--c8y-brand-30);
174
- --c8y-palette-high: white;
175
207
  --c8y-palette-low: var(--c8y-brand-80);
176
- --c8y-palette-purple-10: #f1e7fe;
177
- --c8y-palette-purple-20: #dabffc;
178
- --c8y-palette-purple-30: #c69dfb;
179
- --c8y-palette-purple-40: #a96cf9;
180
- --c8y-palette-purple-50: #8e3cf7; /* Accent */
181
- --c8y-palette-purple-60: #712dd2;
182
- --c8y-palette-purple-70: #5b25a7;
183
- --c8y-palette-purple-80: #3b2c5e;
184
- --c8y-palette-status-danger-dark: #8f0009; /* suitable for text */
185
- --c8y-palette-status-danger-light: #fae6e8;
186
- --c8y-palette-status-danger: #dc5b68;
187
- --c8y-palette-status-info-light: #ebf5ff;
188
- --c8y-palette-status-info: #0e85fb;
189
- --c8y-palette-status-realtime: #00bb00;
190
- --c8y-palette-status-success-dark: #008800; /* suitable for text */
191
- --c8y-palette-status-success-light: #f4fce3;
192
- --c8y-palette-status-success: #71a112;
208
+ --c8y-palette-status-danger: #DC5B68;
209
+ --c8y-palette-status-danger-dark: #fae6e8;
210
+ --c8y-palette-status-danger-light: #8f0009;
211
+ --c8y-palette-status-info: #0092db;
212
+ --c8y-palette-status-info-dark: #ebf5ff;
213
+ --c8y-palette-status-info-light: #105589;
214
+ --c8y-palette-status-success: #71A112;
215
+ --c8y-palette-status-success-dark: #f4fce3;
216
+ --c8y-palette-status-success-light: #007700;
193
217
  --c8y-palette-status-system: var(--c8y-brand-primary);
194
- --c8y-palette-status-warning-dark: #806a00;
195
- --c8y-palette-status-warning-high: #fff1e0;
196
- --c8y-palette-status-warning-light: #ecbe23;
197
- --c8y-palette-status-warning: #e07800;
198
- --c8y-palette-teal-10: #ebf9f8;
199
- --c8y-palette-teal-20: #c5edea;
200
- --c8y-palette-teal-30: #8adbd5; /* Primary */
201
- --c8y-palette-teal-40: #3cc1b7;
202
- --c8y-palette-teal-50: #22a6aa;
203
- --c8y-palette-teal-60: #058192;
204
- --c8y-palette-teal-70: #1c5569;
205
- --c8y-palette-teal-80: #134158;
218
+ --c8y-palette-status-warning: #E07800;
219
+ --c8y-palette-status-warning-dark: var(--c8y-palette-orange-80);
220
+ --c8y-palette-status-warning-high: var(--c8y-palette-yellow-60);
221
+ --c8y-palette-status-warning-light: var(--c8y-palette-orange-10);
206
222
  --c8y-popover-background-default: var(--c8y-palette-gray-30);
207
223
  --c8y-popover-border-color: var(--c8y-root-component-border-color);
208
224
  --c8y-popover-color-default: var(--c8y-palette-gray-100);
@@ -255,10 +271,18 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
255
271
  --c8y-tooltip-border-color: var(--c8y-root-component-border-color);
256
272
  --c8y-tooltip-color-default: var(--c8y-palette-gray-100);
257
273
  --c8y-tooltip-opacity: 0.95;
274
+ // Override unprefixed vars — branding injects these at :root,
275
+ // and the SCSS fallback chain checks unprefixed first.
276
+ --text-color: var(--c8y-palette-high);
277
+ --text-muted: var(--c8y-palette-gray-40);
278
+ --body-background-color: var(--c8y-brand-10);
279
+ --link-color: var(--c8y-brand-80);
280
+ --link-hover-color: var(--c8y-brand-80);
258
281
 
259
282
  }
260
283
  .dashboard-preview-slot.dashboard-theme-branded {
261
- background:var(--c8y-brand-10) !important;
284
+ background: var(--c8y-brand-10) !important;
285
+ color: var(--c8y-text-color);
262
286
  }
263
287
 
264
288
  c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-branded,
@@ -270,8 +294,33 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded {
270
294
  }
271
295
 
272
296
 
297
+ // Dark/white widgets inside branded dashboards must inherit brand tokens
298
+ // from the branded parent. Without this, .c8y-dark-theme on the widget
299
+ // overrides brand tokens with dark-theme defaults.
300
+ // Note: only targets nested elements (descendant selector), not the flat
301
+ // preview element which uses .c8y-light-theme directly on the element.
302
+ .dashboard-theme-branded .panel-content-dark,
303
+ .dashboard-theme-branded .panel-content-white {
304
+ --c8y-brand-10: inherit;
305
+ --c8y-brand-20: inherit;
306
+ --c8y-brand-30: inherit;
307
+ --c8y-brand-40: inherit;
308
+ --c8y-brand-50: inherit;
309
+ --c8y-brand-60: inherit;
310
+ --c8y-brand-70: inherit;
311
+ --c8y-brand-80: inherit;
312
+ --c8y-brand-primary: inherit;
313
+ --c8y-brand-dark: inherit;
314
+ --c8y-brand-light: inherit;
315
+ --c8y-brand-accent: inherit;
316
+ --c8y-brand-accent-dark: inherit;
317
+ --c8y-brand-accent-light: inherit;
318
+ --c8y-brand-realtime-added: inherit;
319
+ }
320
+
273
321
  body:has(.dashboard-theme-branded){
274
- .c8y-ui-action-bar{
322
+ .c8y-ui-action-bar,
323
+ .dashboard-theme-branded {
275
324
  .btn-help{
276
325
  outline: 1px solid @status-info;
277
326
  background-color: @status-info;
package/variables/dashboard-themes/_branded-dashboard.scss CHANGED
@@ -8,6 +8,27 @@ c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-brande
8
8
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
9
9
  .c8y-grid-dashboard c8y-dashboard-child .panel-content-branded,
10
10
  &:has(.dashboard-theme-branded) .c8y-ui-action-bar {
11
+ // Branded theme always uses the light brand palette as its identity.
12
+ // These defaults use the light palette values (green). When branding IS
13
+ // customized, applyBrandingVars() injects overrides under
14
+ // .dashboard-theme-branded/.panel-content-branded with the same specificity
15
+ // but later in the cascade, so the customized values win.
16
+ --c8y-brand-10: var(--c8y-palette-green-10);
17
+ --c8y-brand-20: var(--c8y-palette-green-20);
18
+ --c8y-brand-30: var(--c8y-palette-green-30);
19
+ --c8y-brand-40: var(--c8y-palette-green-40);
20
+ --c8y-brand-50: var(--c8y-palette-green-50);
21
+ --c8y-brand-60: var(--c8y-palette-green-60);
22
+ --c8y-brand-70: var(--c8y-palette-green-70);
23
+ --c8y-brand-80: var(--c8y-palette-green-80);
24
+ --c8y-brand-accent: var(--c8y-palette-yellow-60);
25
+ --c8y-brand-accent-dark: var(--c8y-palette-yellow-10);
26
+ --c8y-brand-accent-light: var(--c8y-palette-yellow-80);
27
+ --c8y-brand-dark: var(--brand-dark, var(--c8y-palette-gray-20));
28
+ --c8y-brand-light: var(--brand-light, var(--c8y-palette-green-60));
29
+ --c8y-brand-primary: var(--brand-primary, var(--c8y-palette-green-40));
30
+ --c8y-brand-realtime-added: var(--c8y-brand-80);
31
+
11
32
  --c8y-abbr-border-color: var(--c8y-palette-gray-40);
12
33
  --c8y-action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
13
34
  --c8y-action-bar-background-default: var(--c8y-brand-10);
@@ -18,7 +39,19 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
18
39
  --c8y-action-bar-color-focus: var(--c8y-brand-80);
19
40
  --c8y-action-bar-color-text-muted: var(--c8y-brand-80);
20
41
  --c8y-action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
21
- --c8y-action-bar-icon-color: var(--v8y-brand-80);
42
+ --c8y-action-bar-icon-color: var(--c8y-brand-80);
43
+ // Override unprefixed action bar vars — branding injects these at :root,
44
+ // and the SCSS fallback chain checks unprefixed first.
45
+ --action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
46
+ --action-bar-background-default: var(--c8y-brand-10);
47
+ --action-bar-border-color: var(--c8y-brand-30);
48
+ --action-bar-color-actions-hover: var(--c8y-brand-60);
49
+ --action-bar-color-actions: var(--c8y-palette-high);
50
+ --action-bar-color-default: var(--c8y-palette-high);
51
+ --action-bar-color-focus: var(--c8y-brand-80);
52
+ --action-bar-color-text-muted: var(--c8y-brand-80);
53
+ --action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
54
+ --action-bar-icon-color: var(--c8y-brand-80);
22
55
 
23
56
 
24
57
  --c8y-alert-background-default: var(--c8y-palette-gray-80);
@@ -174,38 +207,21 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
174
207
  --c8y-palette-gray-70: var(--c8y-brand-50);
175
208
  --c8y-palette-gray-80: var(--c8y-brand-40);
176
209
  --c8y-palette-gray-90: var(--c8y-brand-30);
177
- --c8y-palette-high: white;
178
210
  --c8y-palette-low: var(--c8y-brand-80);
179
- --c8y-palette-purple-10: #f1e7fe;
180
- --c8y-palette-purple-20: #dabffc;
181
- --c8y-palette-purple-30: #c69dfb;
182
- --c8y-palette-purple-40: #a96cf9;
183
- --c8y-palette-purple-50: #8e3cf7; /* Accent */
184
- --c8y-palette-purple-60: #712dd2;
185
- --c8y-palette-purple-70: #5b25a7;
186
- --c8y-palette-purple-80: #3b2c5e;
187
- --c8y-palette-status-danger-dark: #8f0009; /* suitable for text */
188
- --c8y-palette-status-danger-light: #fae6e8;
189
- --c8y-palette-status-danger: #dc5b68;
190
- --c8y-palette-status-info-light: #ebf5ff;
191
- --c8y-palette-status-info: #0e85fb;
192
- --c8y-palette-status-realtime: #00bb00;
193
- --c8y-palette-status-success-dark: #008800; /* suitable for text */
194
- --c8y-palette-status-success-light: #f4fce3;
195
- --c8y-palette-status-success: #71a112;
211
+ --c8y-palette-status-danger: #DC5B68;
212
+ --c8y-palette-status-danger-dark: #fae6e8;
213
+ --c8y-palette-status-danger-light: #8f0009;
214
+ --c8y-palette-status-info: #0092db;
215
+ --c8y-palette-status-info-dark: #ebf5ff;
216
+ --c8y-palette-status-info-light: #105589;
217
+ --c8y-palette-status-success: #71A112;
218
+ --c8y-palette-status-success-dark: #f4fce3;
219
+ --c8y-palette-status-success-light: #007700;
196
220
  --c8y-palette-status-system: var(--c8y-brand-primary);
197
- --c8y-palette-status-warning-dark: #806a00;
198
- --c8y-palette-status-warning-high: #fff1e0;
199
- --c8y-palette-status-warning-light: #ecbe23;
200
- --c8y-palette-status-warning: #e07800;
201
- --c8y-palette-teal-10: #ebf9f8;
202
- --c8y-palette-teal-20: #c5edea;
203
- --c8y-palette-teal-30: #8adbd5; /* Primary */
204
- --c8y-palette-teal-40: #3cc1b7;
205
- --c8y-palette-teal-50: #22a6aa;
206
- --c8y-palette-teal-60: #058192;
207
- --c8y-palette-teal-70: #1c5569;
208
- --c8y-palette-teal-80: #134158;
221
+ --c8y-palette-status-warning: #E07800;
222
+ --c8y-palette-status-warning-dark: var(--c8y-palette-orange-80);
223
+ --c8y-palette-status-warning-high: var(--c8y-palette-yellow-60);
224
+ --c8y-palette-status-warning-light: var(--c8y-palette-orange-10);
209
225
  --c8y-popover-background-default: var(--c8y-palette-gray-30);
210
226
  --c8y-popover-border-color: var(--c8y-root-component-border-color);
211
227
  --c8y-popover-color-default: var(--c8y-palette-gray-100);
@@ -258,10 +274,18 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
258
274
  --c8y-tooltip-border-color: var(--c8y-root-component-border-color);
259
275
  --c8y-tooltip-color-default: var(--c8y-palette-gray-100);
260
276
  --c8y-tooltip-opacity: 0.95;
277
+ // Override unprefixed vars — branding injects these at :root,
278
+ // and the SCSS fallback chain checks unprefixed first.
279
+ --text-color: var(--c8y-palette-high);
280
+ --text-muted: var(--c8y-palette-gray-40);
281
+ --body-background-color: var(--c8y-brand-10);
282
+ --link-color: var(--c8y-brand-80);
283
+ --link-hover-color: var(--c8y-brand-80);
261
284
 
262
285
  }
263
286
  .dashboard-preview-slot.dashboard-theme-branded {
264
- background:var(--c8y-brand-10) !important;
287
+ background: var(--c8y-brand-10) !important;
288
+ color: var(--c8y-text-color);
265
289
  }
266
290
 
267
291
  c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-branded,
@@ -273,8 +297,33 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded {
273
297
  }
274
298
 
275
299
 
300
+ // Dark/white widgets inside branded dashboards must inherit brand tokens
301
+ // from the branded parent. Without this, .c8y-dark-theme on the widget
302
+ // overrides brand tokens with dark-theme defaults.
303
+ // Note: only targets nested elements (descendant selector), not the flat
304
+ // preview element which uses .c8y-light-theme directly on the element.
305
+ .dashboard-theme-branded .panel-content-dark,
306
+ .dashboard-theme-branded .panel-content-white {
307
+ --c8y-brand-10: inherit;
308
+ --c8y-brand-20: inherit;
309
+ --c8y-brand-30: inherit;
310
+ --c8y-brand-40: inherit;
311
+ --c8y-brand-50: inherit;
312
+ --c8y-brand-60: inherit;
313
+ --c8y-brand-70: inherit;
314
+ --c8y-brand-80: inherit;
315
+ --c8y-brand-primary: inherit;
316
+ --c8y-brand-dark: inherit;
317
+ --c8y-brand-light: inherit;
318
+ --c8y-brand-accent: inherit;
319
+ --c8y-brand-accent-dark: inherit;
320
+ --c8y-brand-accent-light: inherit;
321
+ --c8y-brand-realtime-added: inherit;
322
+ }
323
+
276
324
  body:has(.dashboard-theme-branded){
277
- .c8y-ui-action-bar{
325
+ .c8y-ui-action-bar,
326
+ .dashboard-theme-branded {
278
327
  .btn-help{
279
328
  outline: 1px solid $status-info;
280
329
  background-color: $status-info;
package/variables/dashboard-themes/_dark-dashboard.less CHANGED
@@ -3,7 +3,8 @@ body .dashboard-preview-slot.panel-content-dark,
3
3
  .dashboard-preview-slot.dashboard-theme-dark,
4
4
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark,
5
5
  .c8y-grid-dashboard c8y-dashboard-child .panel-content-dark {
6
- .c8y-dark-theme();
6
+ // Dark theme tokens come from .c8y-dark-theme foundation class on the element.
7
+ // This allows branding overrides (appended later in the cascade) to take precedence.
7
8
 
8
9
  // Override legacy --text-color to use dark theme value
9
10
  // This ensures root-component tokens (which reference --text-color) get the correct dark value
@@ -13,10 +14,6 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark,
13
14
  color: @text-color;
14
15
  }
15
16
 
16
- .dashboard-preview-slot.dashboard-theme-dark {
17
- // background: #011932 !important;
18
- }
19
-
20
17
  c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-dark,
21
18
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark {
22
19
  --c8y-dashboard-background: var(--c8y-palette-low);
@@ -24,13 +21,10 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark {
24
21
  }
25
22
 
26
23
  body:has(.dashboard-theme-dark:not(.dashboard-preview-slot)){
27
- .c8y-ui-action-bar{
28
- .c8y-dark-theme();
29
- .btn-help{
30
- outline: 1px solid @status-info;
31
- background-color: @status-info;
32
- --help-info-color: @palette-high;
33
- color: @palette-high;
34
- }
24
+ .c8y-ui-action-bar .btn-help{
25
+ outline: 1px solid @status-info;
26
+ background-color: @status-info;
27
+ --help-info-color: @palette-high;
28
+ color: @palette-high;
35
29
  }
36
30
  }
package/variables/dashboard-themes/_dark-dashboard.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @use '../color-defaults' as *;
2
- @use '../tokens/c8y-design-tokens-dark' as dark;
3
2
  @use '../color-vars' as *;
4
3
 
5
4
  c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-dark,
@@ -7,7 +6,8 @@ body .dashboard-preview-slot.panel-content-dark,
7
6
  .dashboard-preview-slot.dashboard-theme-dark,
8
7
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark,
9
8
  .c8y-grid-dashboard c8y-dashboard-child .panel-content-dark {
10
- @include dark.c8y-dark-theme();
9
+ // Dark theme tokens come from .c8y-dark-theme foundation class on the element.
10
+ // This allows branding overrides (appended later in the cascade) to take precedence.
11
11
 
12
12
  // Override legacy --text-color to use dark theme value
13
13
  // This ensures root-component tokens (which reference --text-color) get the correct dark value
@@ -17,10 +17,6 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark,
17
17
  color: $text-color;
18
18
  }
19
19
 
20
- .dashboard-preview-slot.dashboard-theme-dark {
21
- // background: #011932 !important;
22
- }
23
-
24
20
  c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-dark,
25
21
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark {
26
22
  --c8y-dashboard-background: var(--c8y-palette-low);
@@ -28,13 +24,10 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark {
28
24
  }
29
25
 
30
26
  body:has(.dashboard-theme-dark:not(.dashboard-preview-slot)){
31
- .c8y-ui-action-bar{
32
- @include dark.c8y-dark-theme();
33
- .btn-help{
34
- outline: 1px solid $status-info;
35
- background-color: $status-info;
36
- --help-info-color: #{$palette-high};
37
- color: $palette-high;
38
- }
27
+ .c8y-ui-action-bar .btn-help{
28
+ outline: 1px solid $status-info;
29
+ background-color: $status-info;
30
+ --help-info-color: #{$palette-high};
31
+ color: $palette-high;
39
32
  }
40
33
  }
package/variables/dashboard-themes/_white-dashboard.less CHANGED
@@ -1,10 +1,20 @@
1
+ // Light theme tokens come from .c8y-light-theme foundation class on the element.
2
+ // This allows branding overrides (appended later in the cascade) to take precedence.
3
+
4
+ // Override unprefixed vars to match the light theme values.
5
+ // Without this, branded/dark parent elements' unprefixed vars (e.g. --text-color: white)
6
+ // are inherited and win in the dual-prefix fallback: var(--text-color, var(--c8y-text-color)).
1
7
  c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
2
8
  body .dashboard-preview-slot.panel-content-white,
3
9
  .dashboard-preview-slot.dashboard-theme-white,
4
10
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white,
5
11
  .c8y-grid-dashboard c8y-dashboard-child .panel-content-white {
6
- .c8y-light-theme();
7
-
12
+ --text-color: var(--c8y-text-color);
13
+ --text-muted: var(--c8y-text-muted);
14
+ --body-background-color: var(--c8y-body-background-color);
15
+ --link-color: var(--c8y-link-color);
16
+ --link-hover-color: var(--c8y-link-hover-color);
17
+ color: @text-color;
8
18
  }
9
19
 
10
20
  .dashboard-preview-slot.dashboard-theme-white {
package/variables/dashboard-themes/_white-dashboard.scss CHANGED
@@ -1,14 +1,23 @@
1
1
  @use '../color-defaults' as *;
2
- @use '../tokens/c8y-design-tokens' as tokens;
3
2
  @use '../color-vars' as *;
4
3
 
4
+ // Light theme tokens come from .c8y-light-theme foundation class on the element.
5
+ // This allows branding overrides (appended later in the cascade) to take precedence.
6
+
7
+ // Override unprefixed vars to match the light theme values.
8
+ // Without this, branded/dark parent elements' unprefixed vars (e.g. --text-color: white)
9
+ // are inherited and win in the dual-prefix fallback: var(--text-color, var(--c8y-text-color)).
5
10
  c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
6
11
  body .dashboard-preview-slot.panel-content-white,
7
12
  .dashboard-preview-slot.dashboard-theme-white,
8
13
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white,
9
14
  .c8y-grid-dashboard c8y-dashboard-child .panel-content-white {
10
- @include tokens.c8y-light-theme();
11
-
15
+ --text-color: var(--c8y-text-color);
16
+ --text-muted: var(--c8y-text-muted);
17
+ --body-background-color: var(--c8y-body-background-color);
18
+ --link-color: var(--c8y-link-color);
19
+ --link-hover-color: var(--c8y-link-hover-color);
20
+ color: $text-color;
12
21
  }
13
22
 
14
23
  .dashboard-preview-slot.dashboard-theme-white {