@c8y/style 1021.80.1 → 1022.3.2

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 (81) hide show
  1. package/branding-login.less +11 -0
  2. package/img/alarms/alarm-list-widget.png +0 -0
  3. package/img/dashboard-details-advanced-tab.png +0 -0
  4. package/img/data-points-table-widget.png +0 -0
  5. package/img/html-widget-pr.png +0 -0
  6. package/img/html-widget-preview.png +0 -0
  7. package/img/info-gauge-widget-pr.png +0 -0
  8. package/img/linear-gauge-widget-pr.png +0 -0
  9. package/img/map-widget-pr.png +0 -0
  10. package/img/markdown-widget.png +0 -0
  11. package/img/quick-links-widget.png +0 -0
  12. package/login.less +3 -0
  13. package/markdown-files/dashboard-details-import-export-tab.md +84 -0
  14. package/markdown-files/html-widget-preview.md +58 -0
  15. package/package.json +1 -1
  16. package/styles/_alerts.less +2 -1
  17. package/styles/_app-switcher.less +1 -0
  18. package/styles/_badges.less +11 -4
  19. package/styles/_bottom-drawer.less +7 -6
  20. package/styles/_boxed-label.less +21 -0
  21. package/styles/_buttons.less +20 -5
  22. package/styles/_c8y-action-bar.less +2 -2
  23. package/styles/_c8y-asset-selector-miller.less +3 -0
  24. package/styles/_c8y-asset-selector.less +12 -1
  25. package/styles/_c8y-child-assets-selector.less +2 -1
  26. package/styles/_c8y-countdown-interval.less +2 -2
  27. package/styles/_c8y-dashboard-style.less +9 -2
  28. package/styles/_c8y-empty-state.less +4 -0
  29. package/styles/_c8y-icons.less +7 -2
  30. package/styles/_c8y-list-group.less +25 -2
  31. package/styles/_c8y-pulse.less +2 -2
  32. package/styles/_c8y-right-drawer.less +1 -1
  33. package/styles/_c8y-selectize.less +5 -5
  34. package/styles/_c8y-utils.less +5 -3
  35. package/styles/_card.less +1 -2
  36. package/styles/_cards-layout.less +13 -12
  37. package/styles/_code.less +14 -6
  38. package/styles/_dashboard-widgets.less +4 -1
  39. package/styles/_data-grid.less +96 -5
  40. package/styles/_dropdowns.less +131 -26
  41. package/styles/_forms.less +1 -12
  42. package/styles/_input-groups.less +19 -5
  43. package/styles/_layouts.less +24 -5
  44. package/styles/_list-group.less +0 -3
  45. package/styles/_main-header.less +3 -1
  46. package/styles/_markdown-content.less +5 -0
  47. package/styles/_modals.less +11 -1
  48. package/styles/_navbar.less +0 -1
  49. package/styles/_navigator.less +2 -3
  50. package/styles/_page-tabs.less +1 -0
  51. package/styles/_popovers.less +1 -2
  52. package/styles/_quick-links-widget.less +38 -0
  53. package/styles/_smartrules.less +7 -6
  54. package/styles/_spinner-snake.less +2 -1
  55. package/styles/_split-view.less +7 -1
  56. package/styles/_static-assets-file-picker.less +1 -1
  57. package/styles/_tabs.less +10 -4
  58. package/styles/_tag.less +5 -0
  59. package/styles/index.less +3 -0
  60. package/styles/login-app.less +34 -0
  61. package/styles/mixins/c8y-scrollbar.less +1 -4
  62. package/styles/utilities/_icon-utils.less +1 -1
  63. package/styles/utilities/_position.less +61 -0
  64. package/styles/utilities.less +3 -0
  65. package/styles/welcome-widget.less +2 -2
  66. package/variables/_alert-vars.less +1 -1
  67. package/variables/_badge-vars.less +1 -1
  68. package/variables/_brand-vars.less +2 -0
  69. package/variables/_color-vars.less +7 -3
  70. package/variables/_components-vars.less +1 -1
  71. package/variables/dashboard-themes/_branded-dashboard.less +2 -2
  72. package/variables/login-vars.less +48 -0
  73. package/variables/tokens/c8y-design-tokens-dark.less +314 -273
  74. package/variables/tokens/c8y-design-tokens.less +567 -451
  75. package/img/applications-widget-pr.png +0 -0
  76. package/img/cockpit-welcome-image.svg +0 -571
  77. package/img/dm-welcome-widget-pr.png +0 -0
  78. package/img/help-and-service-widget-pr.png +0 -0
  79. package/img/logo-white.svg +0 -69
  80. package/img/logo.svg +0 -136
  81. /package/img/{widget-plugin-pr.png → sample-plugin-pr.png} +0 -0
package/variables/tokens/c8y-design-tokens-dark.less CHANGED
@@ -1,299 +1,340 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Tue, 01 Oct 2024 08:54:33 GMT
4
- */
1
+
2
+ // Do not edit directly
3
+ // Generated on Tue, 17 Jun 2025 11:08:06 GMT
5
4
 
6
5
  .c8y-dark-theme {
7
- --c8y-elevation-hover: none;
8
- --c8y-elevation-sm: none; /* Elevation for Cards, Select dropdowns, Date pickers, Time pickers */
9
- --c8y-elevation-md-bottom: none; /* Elevation md bottom */
10
- --c8y-elevation-md-top: none; /* Elevation md rop */
11
- --c8y-elevation-md-left: none; /* Elevation md right */
12
- --c8y-elevation-md-right: none; /* Elevation md right */
13
- --c8y-elevation-lg: none; /* Elevation for Modals */
14
- --c8y-elevation-color: 1, 31, 61; /* The rgb values of #f2f2f3 (the palette-gray-10) */
15
- --c8y-switch-background-active: var(--c8y-brand-40);
16
- --c8y-tooltip-opacity: .95;
17
- --c8y-nav-tabs-background-hover: transparent;
18
- --c8y-nav-tabs-background-default: transparent;
19
- --c8y-navlink-background-focus: transparent;
20
- --c8y-navlink-background-active: transparent;
21
- --c8y-navlink-background-hover: transparent;
22
- --c8y-navbar-border-color: transparent;
23
- --c8y-btn-primary-border-color-active: var(--c8y-brand-70);
24
- --c8y-btn-primary-background-active: var(--c8y-brand-70);
25
- --c8y-btn-default-background-active: var(--c8y-brand-40);
26
- --c8y-btn-default-background-focus: transparent;
27
- --c8y-btn-default-background-hover: transparent;
28
- --c8y-btn-default-background-default: transparent;
29
- --c8y-btn-default-color-active: var(--c8y-brand-10);
30
- --c8y-right-drawer-background-active: var(--c8y-brand-20);
31
- --c8y-navigator-background-active: var(--c8y-brand-20);
32
- --c8y-main-header-border-color: transparent;
33
- --c8y-main-header-background-active: var(--c8y-brand-20);
34
- --c8y-main-header-background-hover: inherit;
35
- --c8y-code-border-color: transparent;
36
- --c8y-code-color: var(--c8y-palette-blue-80);
37
- --c8y-code-background: var(--c8y-palette-blue-30);
38
- --c8y-blockquote-border-color: transparent;
39
- --c8y-headings-color: inherit;
40
- --c8y-root-component-color-expanded: inherit;
41
- --c8y-root-component-background-hover: var(--c8y-brand-10);
42
- --c8y-root-component-background-disabled: rgba(255, 255, 255,.1); /* Don't use when changing opacity */
43
- --c8y-brand-realtime-added: var(--c8y-brand-40);
44
- --c8y-brand-accent-light: var(--c8y-palette-blue-80);
45
- --c8y-brand-accent-dark: var(--c8y-palette-blue-10);
46
- --c8y-brand-accent: var(--c8y-palette-blue-30);
47
- --c8y-brand-light: var(--brand-light, var(--c8y-palette-yellow-68));
48
- --c8y-brand-80: var(--c8y-palette-yellow-80);
49
- --c8y-brand-70: var(--c8y-palette-yellow-70);
50
- --c8y-brand-60: var(--c8y-palette-yellow-60);
51
- --c8y-brand-50: var(--c8y-palette-yellow-50);
52
- --c8y-brand-40: var(--c8y-palette-yellow-40);
53
- --c8y-brand-30: var(--c8y-palette-yellow-30);
54
- --c8y-brand-20: var(--c8y-palette-yellow-20);
55
- --c8y-brand-10: var(--c8y-palette-yellow-10);
6
+
7
+ /* SECTION: Primitives - Colors */
8
+ --c8y-palette-gray-10: #f2f2f3;
9
+ --c8y-palette-gray-100: #191a1a;
10
+ --c8y-palette-gray-20: #EDEDEE;
11
+ --c8y-palette-gray-30: #B9BABC;
12
+ --c8y-palette-gray-40: #97999B;
13
+ --c8y-palette-gray-50: #7D7F82;
14
+ --c8y-palette-gray-60: #505253;
15
+ --c8y-palette-gray-70: #434546;
16
+ --c8y-palette-gray-80: #2D2E2F;
17
+ --c8y-palette-gray-90: #1e1f1f;
18
+ --c8y-palette-high: #fff;
19
+ --c8y-palette-low: #141415;
20
+
21
+ /* SECTION: Primitives - Status */
22
+ --c8y-palette-status-danger: #DC5B68;
23
+ --c8y-palette-status-danger-dark: #fae6e8;
24
+ --c8y-palette-status-danger-light: #8f0009;
25
+ --c8y-palette-status-info: #0092db;
26
+ --c8y-palette-status-info-dark: #ebf5ff;
27
+ --c8y-palette-status-info-light: #105589;
56
28
  --c8y-palette-status-realtime: #00bb00;
57
- --c8y-palette-status-info-dark: #105589;
58
- --c8y-palette-status-info-light: #ebf5ff;
59
- --c8y-palette-status-info: #1776BF;
60
- --c8y-palette-status-success-dark: #007700; /* suitable for text */
61
- --c8y-palette-status-success-light: #f4fce3;
62
29
  --c8y-palette-status-success: #71A112;
63
- --c8y-palette-status-danger-dark: #8f0009; /* suitable for text */
64
- --c8y-palette-status-danger-light: #fae6e8;
65
- --c8y-palette-status-danger: #DC5B68;
30
+ --c8y-palette-status-success-dark: #f4fce3;
31
+ --c8y-palette-status-success-light: #007700;
32
+ --c8y-palette-status-system: var(--c8y-palette-gray-40);
33
+ --c8y-palette-status-warning: #E07800;
34
+ --c8y-palette-status-warning-dark: #1e1f1f;
66
35
  --c8y-palette-status-warning-high: #fff1e0;
67
36
  --c8y-palette-status-warning-light: #ECBE23;
68
- --c8y-palette-status-warning-dark: #806A00;
69
- --c8y-palette-status-warning: #E07800;
70
- --c8y-palette-gray-100: #23262A;
71
- --c8y-palette-gray-90: #2e3338;
72
- --c8y-palette-gray-80: #32363A;
73
- --c8y-palette-gray-70: #4e5154;
74
- --c8y-palette-gray-60: #5f6265;
75
- --c8y-palette-gray-50: #707375;
76
- --c8y-palette-gray-40: #b5b7b9;
77
- --c8y-palette-gray-30: #cacbcc;
78
- --c8y-palette-gray-20: #dedee0;
79
- --c8y-palette-gray-10: #f2f2f3;
80
- --c8y-palette-low: #1e2124;
81
- --c8y-palette-high: white;
82
- --c8y-global-disabled-opacity: .55;
37
+
38
+ /* SECTION: Semantic - Brand */
39
+ --c8y-brand-10: var(--c8y-palette-yellow-10);
40
+ --c8y-brand-20: var(--c8y-palette-yellow-20);
41
+ --c8y-brand-30: var(--c8y-palette-yellow-30);
42
+ --c8y-brand-40: var(--c8y-palette-yellow-40);
43
+ --c8y-brand-50: var(--c8y-palette-yellow-50);
44
+ --c8y-brand-60: var(--c8y-palette-yellow-60);
45
+ --c8y-brand-70: var(--c8y-palette-yellow-70);
46
+ --c8y-brand-80: var(--c8y-palette-yellow-80);
47
+ --c8y-brand-accent-dark: var(--c8y-palette-blue-10);
48
+ --c8y-brand-accent-default: var(--c8y-palette-blue-30);
49
+ --c8y-brand-accent-light: var(--c8y-palette-blue-80);
50
+ --c8y-brand-complementary: var(--c8y-brand-70);
51
+ --c8y-brand-dark: var(--c8y-brand-10);
52
+ --c8y-brand-light: var(--c8y-brand-70);
53
+ --c8y-brand-primary: var(--c8y-brand-60);
54
+ --c8y-brand-realtime-added: var(--c8y-brand-40);
55
+
56
+ /* SECTION: Semantic - Defaults */
57
+ --c8y-abbr-border-color: var(--c8y-palette-gray-60);
58
+ --c8y-body-background-color: var(--c8y-palette-low);
59
+ --c8y-global-disabled-opacity: 0.55;
83
60
  --c8y-global-odd: linear-gradient(to top,rgba(255, 255, 255, .03), rgba(255, 255, 255, 0.03));
84
- --c8y-elevation-border: inset 0 0 0 1px var(--c8y-palette-gray-80); /* For App switchers, Overflow menus, Tooltips */
85
- --c8y-helpdrawer-background-default: var(--c8y-palette-gray-80);
86
- --c8y-dropdown-background-default: var(--c8y-palette-gray-70);
87
- --c8y-switch-background-default: var(--c8y-palette-gray-60);
88
- --c8y-tooltip-color-default: var(--c8y-palette-gray-100);
89
- --c8y-tooltip-background-default: var(--c8y-palette-gray-10);
90
- --c8y-popover-background-default: var(--c8y-palette-gray-80);
91
- --c8y-page-sticky-header-background-default: var(--c8y-palette-gray-90);
92
- --c8y-nav-pills-background-focus: var(--c8y-navlink-background-focus);
93
- --c8y-nav-pills-background-active: var(--c8y-navlink-background-active);
94
- --c8y-nav-pills-background-hover: var(--c8y-navlink-background-hover);
95
- --c8y-nav-tabs-icon-color-default: var(--c8y-palette-gray-40);
96
- --c8y-nav-tabs-background-focus: var(--c8y-navlink-background-focus);
97
- --c8y-modal-background-default: var(--c8y-palette-gray-80);
98
- --c8y-modal-backdrop-background: var(--c8y-palette-low);
99
- --c8y-form-validation-color-info: var(--c8y-palette-status-info);
100
- --c8y-form-validation-color-success: var(--c8y-palette-status-success);
101
- --c8y-form-validation-color-warning: var(--c8y-palette-status-warning);
102
- --c8y-form-validation-color-error: var(--c8y-palette-status-danger);
103
- --c8y-form-control-placeholder-color: var(--c8y-palette-gray-40);
104
- --c8y-form-control-disabled-opacity: var(--c8y-global-disabled-opacity);
105
- --c8y-form-control-border-color-default: var(--c8y-palette-gray-70);
106
- --c8y-form-control-background-disabled: var(--c8y-component-background-disabled, var(--c8y-root-component-background-disabled));
107
- --c8y-btn-danger-border-color-active: var(--c8y-palette-status-danger-dark);
108
- --c8y-btn-danger-border-color-focus: var(--c8y-palette-status-danger);
109
- --c8y-btn-danger-border-color-hover: var(--c8y-palette-status-danger);
110
- --c8y-btn-danger-border-color-default: var(--c8y-palette-status-danger);
111
- --c8y-btn-danger-background-active: var(--c8y-palette-status-danger-dark);
112
- --c8y-btn-danger-background-focus: var(--c8y-palette-high);
113
- --c8y-btn-danger-background-hover: var(--c8y-palette-high);
114
- --c8y-btn-danger-background-default: var(--c8y-palette-status-danger);
115
- --c8y-btn-danger-color-active: var(--c8y-palette-high);
116
- --c8y-btn-danger-color-focus: var(--c8y-palette-status-danger);
117
- --c8y-btn-danger-color-hover: var(--c8y-palette-status-danger);
118
- --c8y-btn-danger-color-default: var(--c8y-palette-high);
119
- --c8y-btn-accent-border-color-active: var(--c8y-brand-accent-dark);
120
- --c8y-btn-accent-border-color-focus: var(--c8y-brand-accent);
121
- --c8y-btn-accent-border-color-hover: var(--c8y-brand-accent);
122
- --c8y-btn-accent-border-color-default: var(--c8y-brand-accent);
61
+ --c8y-global-separator: var(--c8y-palette-gray-80);
62
+ --c8y-headings-color: inherit;
63
+ --c8y-level-0: var(--c8y-palette-gray-100);
64
+ --c8y-level-1: var(--c8y-palette-gray-90);
65
+ --c8y-level-2: var(--c8y-palette-gray-80);
66
+ --c8y-level-3: var(--c8y-palette-gray-70);
67
+ --c8y-level-4: var(--c8y-palette-gray-60);
68
+ --c8y-link-color: var(--c8y-brand-primary);
69
+ --c8y-link-hover-color: var(--c8y-brand-primary);
70
+ --c8y-text-color: var(--c8y-palette-gray-30);
71
+ --c8y-text-muted: var(--c8y-palette-gray-40);
72
+
73
+ /* SECTION: Semantic - Elevation */
74
+ --c8y-elevation-border: inset 0 0 0 1px var(--c8y-palette-gray-80);
75
+ --c8y-elevation-color: var(--c8y-palette-gray-80);
76
+ --c8y-elevation-hover: 0 0 0 1px var(--c8y-brand-primary);
77
+ --c8y-elevation-lg: 0 0 0 1px var(--c8y-elevation-color);
78
+ --c8y-elevation-md-bottom: 0 0 0 1px var(--c8y-elevation-color);
79
+ --c8y-elevation-md-left: 0 0 0 1px var(--c8y-elevation-color);
80
+ --c8y-elevation-md-right: 0 0 0 1px var(--c8y-elevation-color);
81
+ --c8y-elevation-md-top: 0 0 0 1px var(--c8y-elevation-color);
82
+ --c8y-elevation-sm: 0 0 0 1px var(--c8y-elevation-color);
83
+
84
+ /* SECTION: Action Bar - Colors */
85
+ --c8y-action-bar-background-default: var(--c8y-main-header-background-default);
86
+ --c8y-action-bar-border-color: var(--c8y-root-component-border-color);
87
+ --c8y-action-bar-color-actions: var(--c8y-root-component-color-actions);
88
+ --c8y-action-bar-color-actions-hover: var(--c8y-root-component-color-actions-hover);
89
+ --c8y-action-bar-color-default: var(--c8y-root-component-color-default);
90
+ --c8y-action-bar-color-focus: var(--c8y-root-component-color-focus);
91
+ --c8y-action-bar-color-text-muted: var(--c8y-root-component-color-text-muted);
92
+ --c8y-action-bar-icon-color: var(--c8y-root-component-icon-color);
93
+
94
+ /* SECTION: Alert - Colors */
95
+ --c8y-alert-background-default: var(--c8y-palette-low);
96
+ --c8y-alert-color-default: var(--c8y-root-component-color-default);
97
+ --c8y-alert-status-danger: var(--c8y-palette-status-danger);
98
+ --c8y-alert-status-info: var(--c8y-palette-status-info);
99
+ --c8y-alert-status-success: var(--c8y-palette-status-success);
100
+ --c8y-alert-status-system: var(--c8y-palette-status-system);
101
+ --c8y-alert-status-warning: var(--c8y-palette-status-warning);
102
+
103
+ /* SECTION: Button - Colors */
123
104
  --c8y-btn-accent-background-active: var(--c8y-brand-accent-dark);
105
+ --c8y-btn-accent-background-default: var(--c8y-brand-accent-default);
124
106
  --c8y-btn-accent-background-focus: var(--c8y-palette-high);
125
107
  --c8y-btn-accent-background-hover: var(--c8y-palette-high);
126
- --c8y-btn-accent-background-default: var(--c8y-brand-accent);
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);
127
112
  --c8y-btn-accent-color-active: var(--c8y-palette-high);
128
- --c8y-btn-accent-color-focus: var(--c8y-brand-accent);
129
- --c8y-btn-accent-color-hover: var(--c8y-brand-accent);
130
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);
116
+ --c8y-btn-danger-background-active: var(--c8y-palette-status-danger-light);
117
+ --c8y-btn-danger-background-default: var(--c8y-root-component-background-default);
118
+ --c8y-btn-danger-background-focus: var(--c8y-palette-high);
119
+ --c8y-btn-danger-background-hover: var(--c8y-palette-status-danger);
120
+ --c8y-btn-danger-border-color-active: var(--c8y-palette-status-danger-light);
121
+ --c8y-btn-danger-border-color-default: var(--c8y-palette-status-danger);
122
+ --c8y-btn-danger-border-color-focus: var(--c8y-palette-status-danger);
123
+ --c8y-btn-danger-border-color-hover: var(--c8y-palette-status-danger);
124
+ --c8y-btn-danger-color-active: var(--c8y-palette-high);
125
+ --c8y-btn-danger-color-default: var(--c8y-palette-status-danger);
126
+ --c8y-btn-danger-color-focus: var(--c8y-palette-status-danger);
127
+ --c8y-btn-danger-color-hover: var(--c8y-palette-high);
128
+ --c8y-btn-default-background-active: var(--c8y-brand-40);
129
+ --c8y-btn-default-background-default: var(--c8y-root-component-background-default);
130
+ --c8y-btn-default-background-focus: var(--c8y-root-component-background-default);
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);
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);
140
+ --c8y-btn-primary-background-active: var(--c8y-brand-30);
141
+ --c8y-btn-primary-background-default: var(--c8y-brand-primary);
142
+ --c8y-btn-primary-background-focus: var(--c8y-root-component-background-default);
143
+ --c8y-btn-primary-background-hover: var(--c8y-root-component-background-default);
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);
131
148
  --c8y-btn-primary-color-active: var(--c8y-palette-high);
132
149
  --c8y-btn-primary-color-default: var(--c8y-palette-low);
133
- --c8y-alert-status-info: var(--c8y-palette-status-info);
134
- --c8y-alert-status-success: var(--c8y-palette-status-success);
135
- --c8y-alert-status-danger: var(--c8y-palette-status-danger);
136
- --c8y-alert-status-warning: var(--c8y-palette-status-warning);
137
- --c8y-alert-background-default: var(--c8y-palette-gray-70);
138
- --c8y-action-bar-background-default: var(--c8y-palette-low);
139
- --c8y-right-drawer-separator-color: var(--c8y-palette-gray-80);
140
- --c8y-right-drawer-text-color-default: var(--c8y-palette-gray-20);
141
- --c8y-right-drawer-background-selected: var(--c8y-palette-gray-90);
142
- --c8y-right-drawer-background-default: var(--c8y-palette-low);
143
- --c8y-navigator-separator-color: var(--c8y-palette-gray-80);
144
- --c8y-navigator-text-color-default: var(--c8y-palette-gray-20);
145
- --c8y-navigator-background-selected: var(--c8y-palette-gray-90);
146
- --c8y-navigator-background-default: var(--c8y-palette-low);
147
- --c8y-main-header-background-default: var(--c8y-palette-low);
148
- --c8y-pre-border-color: var(--c8y-palette-gray-70);
149
- --c8y-pre-color: var(--c8y-palette-gray-30);
150
- --c8y-pre-background: var(--c8y-palette-gray-90);
151
- --c8y-abbr-border-color: var(--c8y-palette-gray-40);
152
- --c8y-text-muted: var(--c8y-palette-gray-40);
153
- --c8y-text-color: var(--c8y-palette-gray-30);
154
- --c8y-root-component-scrollbar-thumb-hover: var(--c8y-palette-gray-70);
155
- --c8y-root-component-scrollbar-thumb-default: var(--c8y-palette-gray-80);
156
- --c8y-root-component-icon-color: var(--c8y-palette-gray-30);
157
- --c8y-root-component-icon-dark-color-light: var(--c8y-brand-light);
158
- --c8y-root-component-pulse-color: var(--c8y-palette-status-realtime);
159
- --c8y-root-component-realtime-added: var(--c8y-brand-realtime-added);
160
- --c8y-root-component-disabled-opacity: var(--c8y-global-disabled-opacity);
161
- --c8y-root-component-actions-opacity: var(--c8y-global-disabled-opacity);
162
- --c8y-root-component-color-disabled: var(--c8y-palette-gray-70); /* Don't use when changing opacity */
163
- --c8y-root-component-background-expanded: var(--c8y-palette-gray-90);
164
- --c8y-root-component-background-odd: var(--c8y-global-odd); /* use for alternate stripes */
165
- --c8y-root-component-background-default: var(--c8y-palette-gray-100);
166
- --c8y-level-4: var(--c8y-palette-gray-60);
167
- --c8y-level-3: var(--c8y-palette-gray-70);
168
- --c8y-level-2: var(--c8y-palette-gray-80);
169
- --c8y-level-1: var(--c8y-palette-gray-90);
170
- --c8y-level-0: var(--c8y-palette-gray-100);
171
- --c8y-brand-complementary: var(--brand-complementary, var(--c8y-brand-70));
172
- --c8y-brand-dark: var(--brand-dark, var(--c8y-brand-40));
173
- --c8y-brand-primary: var(--brand-primary, var(--c8y-brand-60));
174
- --c8y-body-background-color: var(--c8y-palette-low);
175
- --c8y-global-separator: var(--c8y-palette-gray-70);
176
- --c8y-switch-handle-color: var(--c8y-root-component-background-default);
177
- --c8y-switch-handle-background: var(--c8y-text-color);
178
- --c8y-popover-icon-color: var(--c8y-root-component-icon-color);
179
- --c8y-page-sticky-header-color-default: var(--c8y-text-color);
180
- --c8y-nav-tabs-icon-color-active: var(--brand-primary, var(--c8y-brand-primary));
181
- --c8y-nav-tabs-icon-color-focus: var(--brand-primary, var(--c8y-brand-primary));
182
- --c8y-nav-tabs-icon-color-hover: var(--brand-primary, var(--c8y-brand-primary));
183
- --c8y-nav-tabs-background-active: var(--c8y-root-component-background-default);
184
- --c8y-navlink-color-focus: var(--brand-primary, var(--c8y-brand-primary));
185
- --c8y-navlink-color-active: var(--brand-primary, var(--c8y-brand-primary));
186
- --c8y-navlink-color-hover: var(--brand-primary, var(--c8y-brand-primary));
187
- --c8y-navlink-color-default: var(--c8y-text-color);
188
- --c8y-navlink-background-default: var(--c8y-root-component-background-default);
189
- --c8y-navbar-color-default: var(--c8y-text-color);
190
- --c8y-navbar-background-default: var(--c8y-root-component-background-default);
191
- --c8y-form-control-icon-color: var(--brand-primary,var(--c8y-brand-primary));
192
- --c8y-form-control-border-color-focus: var(--brand-primary,var(--c8y-brand-primary));
193
- --c8y-form-control-color-disabled: var(--c8y-component-color-disabled, var(--c8y-root-component-color-disabled));
194
- --c8y-form-control-background-focus: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
195
- --c8y-form-control-background-default: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
196
- --c8y-form-legend-color: var(--c8y-text-color);
150
+ --c8y-btn-primary-color-focus: var(--c8y-brand-primary);
151
+ --c8y-btn-primary-color-hover: var(--c8y-brand-primary);
152
+
153
+ /* SECTION: Code - Colors */
154
+ --c8y-code-background: var(--c8y-palette-blue-80);
155
+ --c8y-code-color: var(--c8y-palette-blue-30);
156
+
157
+ /* SECTION: Dropdown - Colors */
158
+ --c8y-dropdown-background-default: var(--c8y-palette-gray-80);
159
+ --c8y-dropdown-border-color: var(--c8y-palette-gray-70);
160
+ --c8y-dropdown-color-default: var(--c8y-root-component-color-default);
161
+ --c8y-dropdown-color-hover: var(--c8y-root-component-color-actions-hover);
162
+ --c8y-dropdown-icon-color-default: var(--c8y-palette-gray-40);
163
+ --c8y-dropdown-icon-color-hover: var(--c8y-dropdown-color-hover);
164
+
165
+ /* SECTION: Dropdown - Defaults */
166
+ --c8y-dropdown-border-radius: 6px;
167
+ --c8y-dropdown-elevation-default: none;
168
+ --c8y-dropdown-elevation-hover: 0 0 0 1px var(--c8y-palette-gray-70);
169
+
170
+ /* SECTION: Form Control - Colors */
171
+ --c8y-form-control-background-default: var(--c8y-palette-gray-80);
172
+ --c8y-form-control-background-disabled: var(--c8y-root-component-background-disabled);
173
+ --c8y-form-control-background-focus: var(--c8y-palette-gray-80);
174
+ --c8y-form-control-border-color-default: var(--c8y-palette-gray-60);
175
+ --c8y-form-control-border-color-focus: var(--c8y-brand-primary);
176
+ --c8y-form-control-color-default: var(--c8y-root-component-color-default);
177
+ --c8y-form-control-color-disabled: var(--c8y-root-component-color-disabled);
178
+ --c8y-form-control-color-focus: var(--c8y-root-component-color-default);
179
+ --c8y-form-control-icon-color: var(--c8y-brand-primary);
180
+ --c8y-form-control-placeholder-color: var(--c8y-palette-gray-40);
181
+
182
+ /* SECTION: Form Label - Colors */
197
183
  --c8y-form-label-color: var(--c8y-text-color);
198
- --c8y-btn-primary-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
199
- --c8y-btn-primary-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
200
- --c8y-btn-primary-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
201
- --c8y-btn-primary-background-focus: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
202
- --c8y-btn-primary-background-hover: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
203
- --c8y-btn-primary-background-default: var(--brand-primary, var(--c8y-brand-primary));
204
- --c8y-btn-primary-color-focus: var(--brand-primary, var(--c8y-brand-primary));
205
- --c8y-btn-primary-color-hover: var(--brand-primary, var(--c8y-brand-primary));
206
- --c8y-btn-default-border-color-active: var(--brand-primary, var(--c8y-brand-primary));
207
- --c8y-btn-default-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
208
- --c8y-btn-default-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
209
- --c8y-btn-default-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
210
- --c8y-btn-default-color-focus: var(--brand-primary, var(--c8y-brand-primary));
211
- --c8y-btn-default-color-hover: var(--brand-primary, var(--c8y-brand-primary));
212
- --c8y-btn-default-color-default: var(--brand-primary, var(--c8y-brand-primary));
213
- --c8y-alert-status-system: var(--brand-primary, var(--c8y-brand-primary));
214
- --c8y-action-bar-icon-color: var(--c8y-root-component-icon-color);
215
- --c8y-action-bar-disabled-opacity: var(--c8y-root-component-disabled-opacity);
216
- --c8y-action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
217
- --c8y-right-drawer-border-selected: var(--brand-primary, var(--c8y-brand-primary));
218
- --c8y-right-drawer-text-color-active: var(--c8y-right-drawer-text-color-default);
219
- --c8y-right-drawer-text-color-selected: var(--c8y-right-drawer-text-color-default);
220
- --c8y-navigator-scrollbar-thumb-hover: var(--c8y-root-component-scrollbar-thumb-hover);
221
- --c8y-navigator-scrollbar-thumb-default: var(--c8y-root-component-scrollbar-thumb-default);
222
- --c8y-navigator-border-selected: var(--brand-primary, var(--c8y-brand-primary));
223
- --c8y-navigator-header-color: var(--c8y-navigator-text-color-default);
224
- --c8y-navigator-header-background: var(--c8y-navigator-background-default);
225
- --c8y-navigator-text-color-active: var(--c8y-navigator-text-color-default);
226
- --c8y-navigator-text-color-selected: var(--c8y-navigator-text-color-default);
227
- --c8y-main-header-shadow: inset 0 -1px 0 var(--c8y-global-separator);
228
- --c8y-main-header-text-color-hover: var(--brand-primary, var(--c8y-brand-primary));
184
+
185
+ /* SECTION: Form Legend - Colors */
186
+ --c8y-form-legend-color: var(--c8y-text-color);
187
+
188
+ /* SECTION: Helpdrawer - Colors */
189
+ --c8y-helpdrawer-background-default: var(--c8y-palette-gray-80);
190
+
191
+ /* SECTION: Main Header - Colors */
192
+ --c8y-main-header-background-active: var(--c8y-brand-20);
193
+ --c8y-main-header-background-default: var(--c8y-palette-gray-90);
229
194
  --c8y-main-header-text-color-default: var(--c8y-text-color);
230
- --c8y-link-hover-color: var(--brand-primary, var(--c8y-brand-primary));
231
- --c8y-link-color: var(--brand-primary, var(--c8y-brand-primary));
232
- --c8y-root-component-form-control-placeholder-color: var(--c8y-form-control-placeholder-color);
233
- --c8y-root-component-form-control-border-color-default: var(--c8y-form-control-border-color-default);
234
- --c8y-root-component-form-control-background-disabled: var(--c8y-form-control-background-disabled);
235
- --c8y-root-component-scrollbar-track: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
236
- --c8y-root-component-icon-dark-color-dark: var(--c8y-brand-dark);
237
- --c8y-root-component-icon-white-color-dark: var(--c8y-brand-dark);
238
- --c8y-root-component-icon-white-color-light: var(--c8y-brand-primary);
239
- --c8y-root-component-brand-primary: var(--brand-primary, var(--c8y-brand-primary));
240
- --c8y-root-component-spinner-color: var(--brand-primary, var(--c8y-brand-primary));
241
- --c8y-root-component-border-color: var(--c8y-global-separator);
242
- --c8y-root-component-separator-color: var(--c8y-global-separator);
243
- --c8y-root-component-color-focus: var(--brand-primary, var(--c8y-brand-primary));
244
- --c8y-root-component-color-accent: var(--brand-primary, var(--c8y-brand-primary));
245
- --c8y-root-component-color-actions-hover: var(--brand-primary, var(--c8y-brand-primary));
246
- --c8y-root-component-color-actions: var(--c8y-text-color);
247
- --c8y-root-component-color-text-muted: var(--c8y-text-muted);
248
- --c8y-root-component-color-active: var(--brand-primary, var(--c8y-brand-primary));
249
- --c8y-root-component-color-odd: var(--c8y-text-color);
250
- --c8y-root-component-color-default: var(--c8y-text-color);
251
- --c8y-root-component-background-focus: var(--c8y-root-component-background-default);
252
- --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%);
253
- --c8y-root-component-background-active: var(--c8y-root-component-background-default);
254
- --c8y-palette-status-system: var(--brand-primary, var(--c8y-brand-primary));
255
- --c8y-tooltip-border-color: var(--c8y-root-component-border-color);
256
- --c8y-popover-border-color: var(--c8y-root-component-border-color);
257
- --c8y-popover-color-default: var(--c8y-root-component-color-default);
258
- --c8y-page-sticky-header-color-active: var(--c8y-link-color);
259
- --c8y-page-sticky-header-color-hover: var(--c8y-link-hover-color);
260
- --c8y-nav-pills-color-focus: var(--c8y-navlink-color-focus);
261
- --c8y-nav-pills-color-active: var(--c8y-navlink-color-active);
262
- --c8y-nav-pills-color-hover: var(--c8y-navlink-color-hover);
263
- --c8y-nav-pills-color-default: var(--c8y-navlink-color-default);
264
- --c8y-nav-pills-background-default: var(--c8y-navlink-background-default);
195
+ --c8y-main-header-text-color-hover: var(--c8y-brand-primary);
196
+
197
+ /* SECTION: Main Header - Defaults */
198
+ --c8y-main-header-shadow: inset 0 -1px 0 var(--c8y-palette-gray-80);
199
+
200
+ /* SECTION: Modal - Colors */
201
+ --c8y-modal-background-default: var(--c8y-palette-gray-90);
202
+ --c8y-modal-color-default: var(--c8y-root-component-color-default);
203
+
204
+ /* SECTION: Nav Tabs - Colors */
205
+ --c8y-nav-tabs-background-active: var(--c8y-nav-tabs-background-default);
206
+ --c8y-nav-tabs-background-default: var(--c8y-main-header-background-default);
207
+ --c8y-nav-tabs-background-focus: var(--c8y-navlink-background-focus);
208
+ --c8y-nav-tabs-background-hover: transparent;
265
209
  --c8y-nav-tabs-border-color-active: var(--c8y-root-component-brand-primary);
266
210
  --c8y-nav-tabs-border-color-default: var(--c8y-root-component-border-color);
267
- --c8y-nav-tabs-color-focus: var(--c8y-navlink-color-focus);
268
211
  --c8y-nav-tabs-color-active: var(--c8y-navlink-color-active);
269
- --c8y-nav-tabs-color-hover: var(--c8y-navlink-color-hover);
270
212
  --c8y-nav-tabs-color-default: var(--c8y-navlink-color-default);
213
+ --c8y-nav-tabs-color-focus: var(--c8y-navlink-color-focus);
214
+ --c8y-nav-tabs-color-hover: var(--c8y-navlink-color-hover);
215
+ --c8y-nav-tabs-icon-color-active: var(--c8y-brand-primary);
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);
219
+
220
+ /* SECTION: Navbar - Colors */
221
+ --c8y-navbar-background-default: var(--c8y-nav-tabs-background-default);
222
+ --c8y-navbar-border-color: transparent;
223
+ --c8y-navbar-color-default: var(--c8y-text-color);
271
224
  --c8y-navbar-link: var(--c8y-root-component-brand-primary);
272
- --c8y-modal-color-default: var(--c8y-root-component-color-default);
273
- --c8y-form-control-color-focus: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
274
- --c8y-form-control-color-default: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
275
- --c8y-alert-color-default: var(--c8y-root-component-color-default);
276
- --c8y-action-bar-border-color: var(--c8y-root-component-border-color);
277
- --c8y-action-bar-color-focus: var(--c8y-root-component-color-focus);
278
- --c8y-action-bar-color-actions-hover: var(--c8y-root-component-color-actions-hover);
279
- --c8y-action-bar-color-actions: var(--c8y-root-component-color-actions);
280
- --c8y-action-bar-color-text-muted: var(--c8y-root-component-color-text-muted);
281
- --c8y-action-bar-color-default: var(--c8y-root-component-color-default);
282
- --c8y-right-drawer-text-muted: var(--c8y-root-component-color-text-muted);
283
- --c8y-right-drawer-link-color-hover: var(--c8y-root-component-brand-primary);
284
- --c8y-right-drawer-link-color-default: var(--c8y-root-component-brand-primary);
225
+
226
+ /* SECTION: Navigator - Colors */
227
+ --c8y-navigator-background-active: var(--c8y-brand-20);
228
+ --c8y-navigator-background-default: var(--c8y-palette-gray-90);
229
+ --c8y-navigator-background-selected: var(--c8y-palette-gray-80);
230
+ --c8y-navigator-border-selected: var(--c8y-brand-primary);
231
+ --c8y-navigator-header-background: var(--c8y-navigator-background-default);
232
+ --c8y-navigator-header-color: var(--c8y-navigator-text-color-default);
233
+ --c8y-navigator-scrollbar-thumb-default: var(--c8y-root-component-scrollbar-thumb-default);
234
+ --c8y-navigator-scrollbar-thumb-hover: var(--c8y-root-component-scrollbar-thumb-hover);
285
235
  --c8y-navigator-scrollbar-track: var(--c8y-root-component-scrollbar-track);
236
+ --c8y-navigator-separator-color: var(--c8y-palette-gray-80);
237
+ --c8y-navigator-text-color-active: var(--c8y-palette-gray-20);
238
+ --c8y-navigator-text-color-default: var(--c8y-palette-gray-30);
239
+ --c8y-navigator-text-color-selected: var(--c8y-palette-gray-20);
240
+
241
+ /* SECTION: NavLink - Colors */
242
+ --c8y-navlink-background-active: transparent;
243
+ --c8y-navlink-background-default: var(--c8y-root-component-background-default);
244
+ --c8y-navlink-background-focus: transparent;
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);
250
+
251
+ /* SECTION: Page Sticky Header - Colors */
252
+ --c8y-page-sticky-header-background-default: var(--c8y-palette-gray-90);
253
+ --c8y-page-sticky-header-color-active: var(--c8y-link-color);
254
+ --c8y-page-sticky-header-color-default: var(--c8y-text-color);
255
+ --c8y-page-sticky-header-color-hover: var(--c8y-link-hover-color);
256
+
257
+ /* SECTION: Popover - Colors */
258
+ --c8y-popover-background-default: var(--c8y-palette-low);
259
+ --c8y-popover-border-color: var(--c8y-root-component-border-color);
260
+ --c8y-popover-color-default: var(--c8y-root-component-color-default);
261
+ --c8y-popover-color-link: var(--c8y-root-component-color-link);
262
+ --c8y-popover-color-link-hover: var(--c8y-root-component-color-link-hover);
263
+ --c8y-popover-icon-color: var(--c8y-root-component-icon-color);
264
+ --c8y-popover-label-color: var(--c8y-root-component-form-label-color);
265
+
266
+ /* SECTION: Pre - Colors */
267
+ --c8y-pre-background: var(--c8y-palette-gray-60);
268
+ --c8y-pre-border-color: var(--c8y-palette-gray-70);
269
+ --c8y-pre-color: var(--c8y-palette-gray-20);
270
+
271
+ /* SECTION: Right Drawer - Colors */
272
+ --c8y-right-drawer-background-active: var(--c8y-brand-20);
273
+ --c8y-right-drawer-background-default: var(--c8y-palette-gray-90);
274
+ --c8y-right-drawer-background-selected: var(--c8y-palette-gray-90);
275
+ --c8y-right-drawer-border-selected: var(--c8y-brand-primary);
276
+ --c8y-right-drawer-link-color-default: var(--c8y-root-component-brand-primary);
277
+ --c8y-right-drawer-link-color-hover: var(--c8y-root-component-brand-primary);
278
+ --c8y-right-drawer-separator-color: var(--c8y-palette-gray-80);
279
+ --c8y-right-drawer-text-color-default: var(--c8y-palette-gray-30);
280
+
281
+ /* SECTION: Root Component - Colors */
282
+ --c8y-root-component-background-active: var(--c8y-root-component-background-default);
283
+ --c8y-root-component-background-default: var(--c8y-palette-gray-100);
284
+ --c8y-root-component-background-disabled: rgba(255, 255, 255,.1);
285
+ --c8y-root-component-background-expanded: var(--c8y-palette-gray-90);
286
+ --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%);
287
+ --c8y-root-component-background-focus: var(--c8y-root-component-background-default);
288
+ --c8y-root-component-background-hover: color-mix(in srgb, var(--c8y-brand-10), transparent 80%);
289
+ --c8y-root-component-background-odd: var(--c8y-global-odd);
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);
297
+ --c8y-root-component-color-disabled: var(--c8y-palette-gray-70);
298
+ --c8y-root-component-color-expanded: inherit;
299
+ --c8y-root-component-color-focus: var(--c8y-brand-60);
300
+ --c8y-root-component-color-link: var(--c8y-link-color);
301
+ --c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
302
+ --c8y-root-component-color-odd: var(--c8y-text-color);
303
+ --c8y-root-component-color-text-muted: var(--c8y-text-muted);
304
+ --c8y-root-component-form-control-background-default: var(--c8y-form-control-background-default);
305
+ --c8y-root-component-form-control-background-disabled: var(--c8y-form-control-background-disabled);
306
+ --c8y-root-component-form-control-background-focus: var(--c8y-form-control-background-focus);
307
+ --c8y-root-component-form-control-border-color-default: var(--c8y-form-control-border-color-default);
286
308
  --c8y-root-component-form-control-border-color-focus: var(--c8y-form-control-border-color-focus);
309
+ --c8y-root-component-form-control-color-default: var(--c8y-form-control-color-default);
287
310
  --c8y-root-component-form-control-color-disabled: var(--c8y-form-control-color-disabled);
288
- --c8y-root-component-form-control-background-focus: var(--c8y-form-control-background-focus);
289
- --c8y-root-component-form-control-background-default: var(--c8y-form-control-background-default);
290
- --c8y-root-component-form-legend-color: var(--c8y-form-legend-color);
291
- --c8y-root-component-form-label-color: var(--c8y-form-label-color);
292
- --c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
293
- --c8y-root-component-color-link: var(--c8y-link-color);
294
- --c8y-popover-label-color: var(--c8y-root-component-form-label-color);
295
- --c8y-popover-color-link-hover: var(--c8y-root-component-color-link-hover);
296
- --c8y-popover-color-link: var(--c8y-root-component-color-link);
297
311
  --c8y-root-component-form-control-color-focus: var(--c8y-form-control-color-focus);
298
- --c8y-root-component-form-control-color-default: var(--c8y-form-control-color-default);
312
+ --c8y-root-component-form-control-placeholder-color: var(--c8y-form-control-placeholder-color);
313
+ --c8y-root-component-form-label-color: var(--c8y-form-label-color);
314
+ --c8y-root-component-form-legend-color: var(--c8y-form-legend-color);
315
+ --c8y-root-component-icon-color: var(--c8y-palette-gray-30);
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);
318
+ --c8y-root-component-icon-white-color-dark: var(--c8y-palette-low);
319
+ --c8y-root-component-icon-white-color-light: var(--c8y-brand-primary);
320
+ --c8y-root-component-pulse-color: var(--c8y-palette-status-realtime);
321
+ --c8y-root-component-realtime-added: var(--c8y-brand-realtime-added);
322
+ --c8y-root-component-scrollbar-thumb-default: var(--c8y-palette-gray-80);
323
+ --c8y-root-component-scrollbar-thumb-hover: var(--c8y-palette-gray-70);
324
+ --c8y-root-component-scrollbar-track: var(--c8y-root-component-background-default);
325
+ --c8y-root-component-separator-color: var(--c8y-global-separator);
326
+ --c8y-root-component-spinner-color: var(--c8y-brand-primary);
327
+
328
+ /* SECTION: Switch - Colors */
329
+ --c8y-switch-background-active: var(--c8y-brand-30);
330
+ --c8y-switch-background-default: var(--c8y-palette-gray-60);
331
+ --c8y-switch-handle-background: var(--c8y-palette-gray-20);
332
+ --c8y-switch-handle-color: var(--c8y-root-component-background-default);
333
+
334
+ /* SECTION: Tooltip - Colors */
335
+ --c8y-tooltip-background-default: var(--c8y-palette-gray-30);
336
+ --c8y-tooltip-color-default: var(--c8y-palette-gray-100);
337
+
338
+ /* SECTION: Tooltip - Defaults */
339
+ --c8y-tooltip-opacity: 1;
299
340
  }