myshell-react-lib 0.2.45 → 0.3.1

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 (18) hide show
  1. package/dist/index.cjs +114 -87
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +14 -8
  4. package/dist/index.d.ts +14 -8
  5. package/dist/index.js +115 -88
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles/components-dark-v2.scss +220 -0
  8. package/dist/styles/components-light-v2.scss +220 -0
  9. package/dist/styles/design2-dark-v2.scss +443 -0
  10. package/dist/styles/design2-light-v2.scss +443 -0
  11. package/dist/styles/global.scss +5 -5
  12. package/dist/styles/new-tokens-v2.scss +518 -0
  13. package/package.json +2 -2
  14. package/dist/styles/components-dark.scss +0 -210
  15. package/dist/styles/components-light.scss +0 -208
  16. package/dist/styles/design2-dark.scss +0 -332
  17. package/dist/styles/design2-light.scss +0 -366
  18. package/dist/styles/new-tokens.scss +0 -264
package/dist/styles/components-dark-v2.scss ADDED
@@ -0,0 +1,220 @@
1
+ @import './new-tokens-v2.scss';
2
+
3
+ @layer base {
4
+ .dark {
5
+
6
+ // Component Colors Icon
7
+ --Component-Colors-Icon-Featured-icon-fg-Info: var(--Dodger-Blue-400);
8
+ --Component-Colors-Icon-Featured-icon-bg-Info: var(--Dodger-Blue-Variant-100);
9
+ --Component-Colors-Icon-Featured-icon-fg-success: var(--Success-400);
10
+ --Component-Colors-Icon-Featured-icon-bg-success: var(--Success-Variant-100);
11
+ --Component-Colors-Icon-Featured-icon-fg-warning: var(--Warning-400);
12
+ --Component-Colors-Icon-Featured-icon-bg-warning: var(--Warning-Variant-100);
13
+ --Component-Colors-Icon-Featured-icon-fg-error: var(--Error-400);
14
+ --Component-Colors-Icon-Featured-icon-bg-error: var(--Error-Variant-100);
15
+
16
+ // Component Colors Button
17
+ --Component-Colors-Button-Brand-fg-default: var(--Brand-25);
18
+ --Component-Colors-Button-Brand-fg-alt: var(--Gray-600);
19
+ --Component-Colors-Button-Brand-bg-default: var(--Brand-500);
20
+ --Component-Colors-Button-Brand-bg-hover: var(--Brand-600);
21
+ --Component-Colors-Button-Brand-bg-active: var(--Brand-600);
22
+ --Component-Colors-Button-Brand-bg-disabled: var(--Gray-800);
23
+ --Component-Colors-Button-Primary-fg-default: var(--Gray-900);
24
+ --Component-Colors-Button-Primary-fg-alt: var(--Gray-600);
25
+ --Component-Colors-Button-Primary-bg-default: var(--Basic-White);
26
+ --Component-Colors-Button-Primary-bg-hover: var(--Gray-100);
27
+ --Component-Colors-Button-Primary-bg-active: var(--Gray-50);
28
+ --Component-Colors-Button-Primary-bg-disabled: var(--Gray-800);
29
+ --Component-Colors-Button-Secondary-fg-default: var(--Brand-Dark-500);
30
+ --Component-Colors-Button-Secondary-fg-alt: var(--Gray-600);
31
+ --Component-Colors-Button-Secondary-bg-default: var(--Gray-800);
32
+ --Component-Colors-Button-Secondary-bg-hover: var(--Gray-700);
33
+ --Component-Colors-Button-Secondary-bg-active: var(--Gray-600);
34
+ --Component-Colors-Button-Secondary-border-default: var(--Basic-None);
35
+ --Component-Colors-Button-Secondary-border-disabled: var(--Basic-None);
36
+ --Component-Colors-Button-Tertiary-fg-default: var(--Gray-50);
37
+ --Component-Colors-Button-Tertiary-fg-alt: var(--Gray-600);
38
+ --Component-Colors-Button-Tertiary-bg-default: var(--Gray-800);
39
+ --Component-Colors-Button-Tertiary-bg-hover: var(--Gray-700);
40
+ --Component-Colors-Button-Tertiary-bg-active: var(--Gray-700);
41
+ --Component-Colors-Button-Ghost-fg-default: var(--Gray-50);
42
+ --Component-Colors-Button-Ghost-fg-alt: var(--Gray-600);
43
+ --Component-Colors-Button-Ghost-bg-default: var(--Gray-900);
44
+ --Component-Colors-Button-Ghost-bg-hover: var(--Gray-800);
45
+ --Component-Colors-Button-Ghost-bg-active: var(--Gray-800);
46
+ --Component-Colors-Button-Ghost-border: var(--Gray-700);
47
+ --Component-Colors-Button-Ghost-border-alt: var(--Gray-800);
48
+ --Component-Colors-Button-Plain-fg-default: var(--Gray-50);
49
+ --Component-Colors-Button-Plain-fg-alt: var(--Gray-600);
50
+ --Component-Colors-Button-Plain-bg-default: var(--Basic-None);
51
+ --Component-Colors-Button-Plain-bg-hover: var(--Gray-800);
52
+ --Component-Colors-Button-Plain-bg-active: var(--Gray-800);
53
+ --Component-Colors-Button-Plain-brand-fg-default: var(--Brand-Dark-500);
54
+ --Component-Colors-Button-Plain-brand-fg-alt: var(--Gray-600);
55
+ --Component-Colors-Button-Plain-brand-bg-default: var(--Basic-None);
56
+ --Component-Colors-Button-Plain-brand-bg-hover: var(--Gray-800);
57
+ --Component-Colors-Button-Plain-brand-bg-active: var(--Gray-800);
58
+ --Component-Colors-Button-Plain-gray-fg-default: var(--Gray-50);
59
+ --Component-Colors-Button-Plain-gray-fg-alt: var(--Gray-600);
60
+ --Component-Colors-Button-Plain-gray-bg-default: var(--Basic-None);
61
+ --Component-Colors-Button-Plain-gray-bg-hover: var(--Gray-800);
62
+ --Component-Colors-Button-Plain-gray-bg-active: var(--Gray-800);
63
+ --Component-Colors-Button-Plain-Brand-fg-default: var(--Brand-Dark-500);
64
+ --Component-Colors-Button-Plain-Brand-fg-alt: var(--Gray-600);
65
+ --Component-Colors-Button-Plain-Brand-bg-default: var(--Basic-None);
66
+ --Component-Colors-Button-Plain-Brand-bg-hover: var(--Gray-800);
67
+ --Component-Colors-Button-Plain-Brand-bg-active: var(--Gray-800);
68
+ --Component-Colors-Button-Error-Primary-fg-default: var(--Error-25);
69
+ --Component-Colors-Button-Error-Primary-fg-alt: var(--Gray-600);
70
+ --Component-Colors-Button-Error-Primary-bg-default: var(--Error-500);
71
+ --Component-Colors-Button-Error-Primary-bg-hover: var(--Error-600);
72
+ --Component-Colors-Button-Error-Primary-bg-active: var(--Error-700);
73
+ --Component-Colors-Button-Error-Primary-bg-disabled: var(--Gray-800);
74
+ --Component-Colors-Button-Error-Primary-bg-loading: var(--Error-500);
75
+ --Component-Colors-Button-Error-Secondary-fg-default: var(--Error-400);
76
+ --Component-Colors-Button-Error-Secondary-fg-alt: var(--Gray-600);
77
+ --Component-Colors-Button-Error-Secondary-bg-default: var(--Error-Variant-100);
78
+ --Component-Colors-Button-Error-Secondary-bg-hover: var(--Error-950);
79
+ --Component-Colors-Button-Error-Secondary-bg-active: var(--Error-950);
80
+ --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Basic-None);
81
+ --Component-Colors-Button-Error-Secondary-border-default: var(--Error-500);
82
+ --Component-Colors-Button-Error-Secondary-border-disabled: var(--Gray-800);
83
+ --Component-Colors-Button-Static-fg-default: var(--Gray-900);
84
+ --Component-Colors-Button-Static-fg-alt: var(--Gray-600);
85
+ --Component-Colors-Button-Static-bg-default: var(--Basic-White);
86
+ --Component-Colors-Button-Static-bg-hover: var(--Gray-100);
87
+ --Component-Colors-Button-Static-bg-active: var(--Gray-100);
88
+ --Component-Colors-Button-Static-border: var(--Basic-None);
89
+ --Component-Colors-Button-Static-border-alt: var(--Basic-None);
90
+ --Component-Colors-Button-Opacity-fg-default: var(--Opacity-White-100);
91
+ --Component-Colors-Button-Opacity-bg-default: var(--Opacity-Black-30);
92
+ --Component-Colors-Button-Opacity-bg-hover: var(--Opacity-Black-50);
93
+ --Component-Colors-Button-Opacity-bg-active: var(--Opacity-Black-50);
94
+ --Component-Colors-Button-Opacity-border: var(--Opacity-White-8);
95
+
96
+ // Component Colors Icon-Button
97
+ --Component-Colors-Icon-Button-Brand-fg-default: var(--Brand-25);
98
+ --Component-Colors-Icon-Button-Brand-fg-alt: var(--Gray-600);
99
+ --Component-Colors-Icon-Button-Brand-bg-default: var(--Brand-500);
100
+ --Component-Colors-Icon-Button-Brand-bg-hover: var(--Brand-600);
101
+ --Component-Colors-Icon-Button-Brand-bg-active: var(--Brand-700);
102
+ --Component-Colors-Icon-Button-Brand-bg-disabled: var(--Gray-800);
103
+ --Component-Colors-Icon-Button-Plain-brand-fg-default: var(--Brand-Dark-500);
104
+ --Component-Colors-Icon-Button-Plain-gray-fg-default: var(--Gray-50);
105
+ --Component-Colors-Icon-Button-Plain-Gray-fg-default: var(--Gray-50);
106
+
107
+ // Component Colors Link-Button
108
+ --Component-Colors-Link-Button-Primary-fg-default: var(--Brand-Dark-500);
109
+ --Component-Colors-Link-Button-Primary-fg-hover: var(--Brand-Dark-600);
110
+ --Component-Colors-Link-Button-Primary-fg-active: var(--Brand-Dark-700);
111
+ --Component-Colors-Link-Button-Primary-fg-disabled: var(--Gray-600);
112
+ --Component-Colors-Link-Button-Primary-bg-default: var(--Basic-None);
113
+ --Component-Colors-Link-Button-Secondary-fg-default: var(--Gray-50);
114
+ --Component-Colors-Link-Button-Secondary-fg-hover: var(--Gray-100);
115
+ --Component-Colors-Link-Button-Secondary-fg-active: var(--Gray-100);
116
+ --Component-Colors-Link-Button-Secondary-fg-disabled: var(--Gray-600);
117
+ --Component-Colors-Link-Button-Secondary-bg-default: var(--Basic-None);
118
+
119
+ // Component Colors Tooltip
120
+ --Component-Colors-Tooltip-fg-default: var(--Gray-50);
121
+ --Component-Colors-Tooltip-fg-subtle: var(--Gray-400);
122
+ --Component-Colors-Tooltip-bg-default: var(--Gray-800);
123
+ --Component-Colors-Tooltip-border: var(--Basic-None);
124
+
125
+ // Component Colors Tabbar
126
+ --Component-Colors-Tabbar-fg-default: var(--Gray-400);
127
+ --Component-Colors-Tabbar-fg-alt: var(--Gray-700);
128
+ --Component-Colors-Tabbar-fg-bolder: var(--Gray-50);
129
+ --Component-Colors-Tabbar-fg-disabled: var(--Gray-600);
130
+ --Component-Colors-Tabbar-fg-Select-disabled: var(--Gray-600);
131
+ --Component-Colors-Tabbar-bg-default: var(--Gray-800);
132
+ --Component-Colors-Tabbar-bg-select: var(--Gray-600);
133
+ --Component-Colors-Tabbar-border: var(--Brand-500);
134
+ --Component-Colors-Tabbar-border-disabled: var(--Gray-700);
135
+
136
+ // Component Colors Energy
137
+ --Component-Colors-Energy-Low-battery-fg-default: var(--Archive-Terracotta-90);
138
+ --Component-Colors-Energy-Low-battery-bg-default: var(--Archive-Terracotta-Variant-10);
139
+ --Component-Colors-Energy-Low-battery-bg-alt: var(--Archive-Terracotta-Variant-20);
140
+ --Component-Colors-Energy-Low-battery-bg-on: var(--Archive-Terracotta-60);
141
+ --Component-Colors-Energy-Low-battery-border: var(--Archive-Terracotta-60);
142
+ --Component-Colors-Energy-Low-battery-add-icon: var(--Archive-Terracotta-30);
143
+ --Component-Colors-Energy-fg-default: var(--Archive-Khaki-90);
144
+ --Component-Colors-Energy-bg-default: var(--Archive-Khaki-10);
145
+ --Component-Colors-Energy-bg-alt: var(--Archive-Khaki-20);
146
+ --Component-Colors-Energy-bg-on: var(--Archive-Khaki-60);
147
+ --Component-Colors-Energy-border: var(--Archive-Khaki-60);
148
+ --Component-Colors-Energy-add-icon: var(--Archive-Khaki-40);
149
+
150
+ // Component Colors Input
151
+ --Component-Colors-Input-bg-default: var(--Gray-800);
152
+ --Component-Colors-Input-bg-active: var(--Basic-None);
153
+ --Component-Colors-Input-border: var(--Gray-700);
154
+
155
+ // Component Colors Search-bar
156
+ --Component-Colors-Search-bar-bg-default: var(--Gray-800);
157
+ --Component-Colors-Search-bar-bg-active: var(--Basic-None);
158
+ --Component-Colors-Search-bar-border: var(--Gray-700);
159
+
160
+ // Component Colors Shadows
161
+ --Component-Colors-Shadows-Surface-Default: var(--Opacity-White-5);
162
+ --Component-Colors-Shadows-Surface-Bolder: var(--Opacity-White-3);
163
+ --Component-Colors-Shadows-Modal-DefaultAndBolder: var(--Opacity-Black-40);
164
+
165
+ // Component Colors Focus-rings
166
+ --Component-Colors-Focus-rings-Brand: var(--Opacity-White-40);
167
+ --Component-Colors-Focus-rings-Error: var(--Error-500);
168
+
169
+ // Component Colors Check-box
170
+ --Component-Colors-Check-box-fg-default: var(--Gray-900);
171
+ --Component-Colors-Check-box-fg-alt: var(--Gray-600);
172
+ --Component-Colors-Check-box-border: var(--Gray-700);
173
+ --Component-Colors-Check-box-border-hover: var(--Gray-600);
174
+ --Component-Colors-Check-box-border-disabled: var(--Gray-800);
175
+ --Component-Colors-Check-box-bg-default: var(--Brand-500);
176
+ --Component-Colors-Check-box-bg-hover: var(--Brand-600);
177
+ --Component-Colors-Check-box-bg-disabled: var(--Gray-800);
178
+
179
+ // Component Colors Switch
180
+ --Component-Colors-Switch-fg-default: var(--Gray-25);
181
+ --Component-Colors-Switch-fg-on: var(--Basic-White);
182
+ --Component-Colors-Switch-fg-disabled: var(--Opacity-White-30);
183
+ --Component-Colors-Switch-bg-default: var(--Gray-700);
184
+ --Component-Colors-Switch-bg-on: var(--Brand-500);
185
+ --Component-Colors-Switch-bg-disabled: var(--Gray-800);
186
+
187
+ // Component Colors Tag
188
+ --Component-Colors-Tag-bg-default: var(--Gray-800);
189
+
190
+ // Component Colors Chips
191
+ --Component-Colors-Chips-Primary-fg-disabled: var(--Gray-600);
192
+ --Component-Colors-Chips-Primary-bg-default: var(--Gray-900);
193
+ --Component-Colors-Chips-Primary-bg-hover: var(--Gray-800);
194
+ --Component-Colors-Chips-Primary-bg-disabled: var(--Gray-800);
195
+ --Component-Colors-Chips-Primary-border: var(--Gray-700);
196
+ --Component-Colors-Chips-Primary-bg-select: var(--Basic-White);
197
+ --Component-Colors-Chips-Primary-bg-select-disabled: var(--Gray-800);
198
+
199
+ // Component Colors Popover
200
+ --Component-Colors-Popover-fg-default: var(--Gray-50);
201
+ --Component-Colors-Popover-bg-default: var(--Gray-800);
202
+ --Component-Colors-Popover-border: var(--Basic-None);
203
+
204
+ // Component Colors Dropdown
205
+ --Component-Colors-Dropdown-fg-default: var(--Gray-50);
206
+ --Component-Colors-Dropdown-fg-subtle: var(--Gray-300);
207
+ --Component-Colors-Dropdown-fg-disabled: var(--Gray-600);
208
+ --Component-Colors-Dropdown-bg-default: var(--Gray-800);
209
+ --Component-Colors-Dropdown-bg-hover: var(--Gray-700);
210
+ --Component-Colors-Dropdown-bg-bolder: var(--Opacity-White-8);
211
+ --Component-Colors-Dropdown-Border: var(--Basic-None);
212
+ --Component-Colors-Dropdown-Border-2: var(--Basic-None);
213
+
214
+ // Component Colors Toast
215
+ --Component-Colors-Toast-fg-default: var(--Opacity-White-100);
216
+ --Component-Colors-Toast-fg-subtle: var(--Opacity-White-60);
217
+ --Component-Colors-Toast-bg-default: var(--Opacity-Black-50);
218
+ --Component-Colors-Toast-Border: var(--Opacity-White-8);
219
+ }
220
+ }
package/dist/styles/components-light-v2.scss ADDED
@@ -0,0 +1,220 @@
1
+ @import './new-tokens-v2.scss';
2
+
3
+ @layer base {
4
+ :root {
5
+
6
+ // Component Colors Icon
7
+ --Component-Colors-Icon-Featured-icon-fg-Info: var(--Dodger-Blue-600);
8
+ --Component-Colors-Icon-Featured-icon-bg-Info: var(--Dodger-Blue-Variant-100);
9
+ --Component-Colors-Icon-Featured-icon-fg-success: var(--Success-600);
10
+ --Component-Colors-Icon-Featured-icon-bg-success: var(--Success-Variant-100);
11
+ --Component-Colors-Icon-Featured-icon-fg-warning: var(--Warning-600);
12
+ --Component-Colors-Icon-Featured-icon-bg-warning: var(--Warning-Variant-100);
13
+ --Component-Colors-Icon-Featured-icon-fg-error: var(--Error-600);
14
+ --Component-Colors-Icon-Featured-icon-bg-error: var(--Error-Variant-100);
15
+
16
+ // Component Colors Button
17
+ --Component-Colors-Button-Brand-fg-default: var(--Brand-25);
18
+ --Component-Colors-Button-Brand-fg-alt: var(--Gray-400);
19
+ --Component-Colors-Button-Brand-bg-default: var(--Brand-500);
20
+ --Component-Colors-Button-Brand-bg-hover: var(--Brand-600);
21
+ --Component-Colors-Button-Brand-bg-active: var(--Brand-600);
22
+ --Component-Colors-Button-Brand-bg-disabled: var(--Gray-100);
23
+ --Component-Colors-Button-Primary-fg-default: var(--Basic-White);
24
+ --Component-Colors-Button-Primary-fg-alt: var(--Gray-200);
25
+ --Component-Colors-Button-Primary-bg-default: var(--Gray-950);
26
+ --Component-Colors-Button-Primary-bg-hover: var(--Gray-800);
27
+ --Component-Colors-Button-Primary-bg-active: var(--Gray-900);
28
+ --Component-Colors-Button-Primary-bg-disabled: var(--Gray-300);
29
+ --Component-Colors-Button-Secondary-fg-default: var(--Brand-500);
30
+ --Component-Colors-Button-Secondary-fg-alt: var(--Gray-400);
31
+ --Component-Colors-Button-Secondary-bg-default: var(--Gray-200);
32
+ --Component-Colors-Button-Secondary-bg-hover: var(--Gray-300);
33
+ --Component-Colors-Button-Secondary-bg-active: var(--Gray-300);
34
+ --Component-Colors-Button-Secondary-border-default: var(--Basic-None);
35
+ --Component-Colors-Button-Secondary-border-disabled: var(--Basic-None);
36
+ --Component-Colors-Button-Tertiary-fg-default: var(--Gray-900);
37
+ --Component-Colors-Button-Tertiary-fg-alt: var(--Gray-400);
38
+ --Component-Colors-Button-Tertiary-bg-default: var(--Gray-200);
39
+ --Component-Colors-Button-Tertiary-bg-hover: var(--Gray-300);
40
+ --Component-Colors-Button-Tertiary-bg-active: var(--Gray-300);
41
+ --Component-Colors-Button-Ghost-fg-default: var(--Gray-900);
42
+ --Component-Colors-Button-Ghost-fg-alt: var(--Gray-400);
43
+ --Component-Colors-Button-Ghost-bg-default: var(--Basic-White);
44
+ --Component-Colors-Button-Ghost-bg-hover: var(--Gray-100);
45
+ --Component-Colors-Button-Ghost-bg-active: var(--Gray-100);
46
+ --Component-Colors-Button-Ghost-border: var(--Gray-300);
47
+ --Component-Colors-Button-Ghost-border-alt: var(--Gray-100);
48
+ --Component-Colors-Button-Plain-fg-default: var(--Gray-900);
49
+ --Component-Colors-Button-Plain-fg-alt: var(--Gray-400);
50
+ --Component-Colors-Button-Plain-bg-default: var(--Basic-None);
51
+ --Component-Colors-Button-Plain-bg-hover: var(--Gray-100);
52
+ --Component-Colors-Button-Plain-bg-active: var(--Gray-100);
53
+ --Component-Colors-Button-Plain-brand-fg-default: var(--Brand-500);
54
+ --Component-Colors-Button-Plain-brand-fg-alt: var(--Gray-400);
55
+ --Component-Colors-Button-Plain-brand-bg-default: var(--Basic-None);
56
+ --Component-Colors-Button-Plain-brand-bg-hover: var(--Gray-100);
57
+ --Component-Colors-Button-Plain-brand-bg-active: var(--Gray-100);
58
+ --Component-Colors-Button-Plain-gray-fg-default: var(--Gray-900);
59
+ --Component-Colors-Button-Plain-gray-fg-alt: var(--Gray-400);
60
+ --Component-Colors-Button-Plain-gray-bg-default: var(--Basic-None);
61
+ --Component-Colors-Button-Plain-gray-bg-hover: var(--Gray-100);
62
+ --Component-Colors-Button-Plain-gray-bg-active: var(--Gray-100);
63
+ --Component-Colors-Button-Plain-Brand-fg-default: var(--Brand-500);
64
+ --Component-Colors-Button-Plain-Brand-fg-alt: var(--Gray-400);
65
+ --Component-Colors-Button-Plain-Brand-bg-default: var(--Basic-None);
66
+ --Component-Colors-Button-Plain-Brand-bg-hover: var(--Gray-100);
67
+ --Component-Colors-Button-Plain-Brand-bg-active: var(--Gray-100);
68
+ --Component-Colors-Button-Error-Primary-fg-default: var(--Error-25);
69
+ --Component-Colors-Button-Error-Primary-fg-alt: var(--Gray-400);
70
+ --Component-Colors-Button-Error-Primary-bg-default: var(--Error-500);
71
+ --Component-Colors-Button-Error-Primary-bg-hover: var(--Error-600);
72
+ --Component-Colors-Button-Error-Primary-bg-active: var(--Error-700);
73
+ --Component-Colors-Button-Error-Primary-bg-disabled: var(--Gray-100);
74
+ --Component-Colors-Button-Error-Primary-bg-loading: var(--Error-400);
75
+ --Component-Colors-Button-Error-Secondary-fg-default: var(--Error-600);
76
+ --Component-Colors-Button-Error-Secondary-fg-alt: var(--Gray-400);
77
+ --Component-Colors-Button-Error-Secondary-bg-default: var(--Error-50);
78
+ --Component-Colors-Button-Error-Secondary-bg-hover: var(--Error-100);
79
+ --Component-Colors-Button-Error-Secondary-bg-active: var(--Error-100);
80
+ --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Error-50);
81
+ --Component-Colors-Button-Error-Secondary-border-default: var(--Error-500);
82
+ --Component-Colors-Button-Error-Secondary-border-disabled: var(--Gray-100);
83
+ --Component-Colors-Button-Static-fg-default: var(--Gray-900);
84
+ --Component-Colors-Button-Static-fg-alt: var(--Gray-400);
85
+ --Component-Colors-Button-Static-bg-default: var(--Basic-White);
86
+ --Component-Colors-Button-Static-bg-hover: var(--Gray-100);
87
+ --Component-Colors-Button-Static-bg-active: var(--Gray-100);
88
+ --Component-Colors-Button-Static-border: var(--Basic-None);
89
+ --Component-Colors-Button-Static-border-alt: var(--Basic-None);
90
+ --Component-Colors-Button-Opacity-fg-default: var(--Opacity-White-100);
91
+ --Component-Colors-Button-Opacity-bg-default: var(--Opacity-Black-30);
92
+ --Component-Colors-Button-Opacity-bg-hover: var(--Opacity-Black-50);
93
+ --Component-Colors-Button-Opacity-bg-active: var(--Opacity-Black-50);
94
+ --Component-Colors-Button-Opacity-border: var(--Opacity-White-8);
95
+
96
+ // Component Colors Icon-Button
97
+ --Component-Colors-Icon-Button-Brand-fg-default: var(--Brand-25);
98
+ --Component-Colors-Icon-Button-Brand-fg-alt: var(--Gray-400);
99
+ --Component-Colors-Icon-Button-Brand-bg-default: var(--Brand-500);
100
+ --Component-Colors-Icon-Button-Brand-bg-hover: var(--Brand-600);
101
+ --Component-Colors-Icon-Button-Brand-bg-active: var(--Brand-700);
102
+ --Component-Colors-Icon-Button-Brand-bg-disabled: var(--Gray-100);
103
+ --Component-Colors-Icon-Button-Plain-brand-fg-default: var(--Brand-500);
104
+ --Component-Colors-Icon-Button-Plain-gray-fg-default: var(--Gray-900);
105
+ --Component-Colors-Icon-Button-Plain-Gray-fg-default: var(--Gray-900);
106
+
107
+ // Component Colors Link-Button
108
+ --Component-Colors-Link-Button-Primary-fg-default: var(--Brand-500);
109
+ --Component-Colors-Link-Button-Primary-fg-hover: var(--Brand-600);
110
+ --Component-Colors-Link-Button-Primary-fg-active: var(--Brand-700);
111
+ --Component-Colors-Link-Button-Primary-fg-disabled: var(--Gray-400);
112
+ --Component-Colors-Link-Button-Primary-bg-default: var(--Basic-None);
113
+ --Component-Colors-Link-Button-Secondary-fg-default: var(--Gray-900);
114
+ --Component-Colors-Link-Button-Secondary-fg-hover: var(--Gray-800);
115
+ --Component-Colors-Link-Button-Secondary-fg-active: var(--Gray-800);
116
+ --Component-Colors-Link-Button-Secondary-fg-disabled: var(--Gray-400);
117
+ --Component-Colors-Link-Button-Secondary-bg-default: var(--Basic-None);
118
+
119
+ // Component Colors Tooltip
120
+ --Component-Colors-Tooltip-fg-default: var(--Gray-50);
121
+ --Component-Colors-Tooltip-fg-subtle: var(--Gray-400);
122
+ --Component-Colors-Tooltip-bg-default: var(--Gray-900);
123
+ --Component-Colors-Tooltip-border: var(--Basic-None);
124
+
125
+ // Component Colors Tabbar
126
+ --Component-Colors-Tabbar-fg-default: var(--Gray-600);
127
+ --Component-Colors-Tabbar-fg-alt: var(--Gray-500);
128
+ --Component-Colors-Tabbar-fg-bolder: var(--Gray-900);
129
+ --Component-Colors-Tabbar-fg-disabled: var(--Gray-400);
130
+ --Component-Colors-Tabbar-fg-Select-disabled: var(--Gray-400);
131
+ --Component-Colors-Tabbar-bg-default: var(--Gray-200);
132
+ --Component-Colors-Tabbar-bg-select: var(--Basic-White);
133
+ --Component-Colors-Tabbar-border: var(--Brand-500);
134
+ --Component-Colors-Tabbar-border-disabled: var(--Gray-300);
135
+
136
+ // Component Colors Energy
137
+ --Component-Colors-Energy-Low-battery-fg-default: var(--Archive-Terracotta-30);
138
+ --Component-Colors-Energy-Low-battery-bg-default: var(--Archive-Terracotta-99);
139
+ --Component-Colors-Energy-Low-battery-bg-alt: var(--Archive-Terracotta-95);
140
+ --Component-Colors-Energy-Low-battery-bg-on: var(--Archive-Terracotta-70);
141
+ --Component-Colors-Energy-Low-battery-border: var(--Archive-Terracotta-70);
142
+ --Component-Colors-Energy-Low-battery-add-icon: var(--Archive-Terracotta-60);
143
+ --Component-Colors-Energy-fg-default: var(--Archive-Khaki-40);
144
+ --Component-Colors-Energy-bg-default: var(--Archive-Khaki-99);
145
+ --Component-Colors-Energy-bg-alt: var(--Archive-Khaki-95);
146
+ --Component-Colors-Energy-bg-on: var(--Archive-Khaki-80);
147
+ --Component-Colors-Energy-border: var(--Archive-Khaki-80);
148
+ --Component-Colors-Energy-add-icon: var(--Archive-Khaki-60);
149
+
150
+ // Component Colors Input
151
+ --Component-Colors-Input-bg-default: var(--Basic-White);
152
+ --Component-Colors-Input-bg-active: var(--Gray-25);
153
+ --Component-Colors-Input-border: var(--Gray-300);
154
+
155
+ // Component Colors Search-bar
156
+ --Component-Colors-Search-bar-bg-default: var(--Gray-200);
157
+ --Component-Colors-Search-bar-bg-active: var(--Gray-25);
158
+ --Component-Colors-Search-bar-border: var(--Gray-300);
159
+
160
+ // Component Colors Shadows
161
+ --Component-Colors-Shadows-Surface-Default: var(--Opacity-Black-12);
162
+ --Component-Colors-Shadows-Surface-Bolder: var(--Opacity-Black-3);
163
+ --Component-Colors-Shadows-Modal-DefaultAndBolder: var(--Opacity-Black-12);
164
+
165
+ // Component Colors Focus-rings
166
+ --Component-Colors-Focus-rings-Brand: var(--Brand-Variant-100);
167
+ --Component-Colors-Focus-rings-Error: var(--Error-500);
168
+
169
+ // Component Colors Check-box
170
+ --Component-Colors-Check-box-fg-default: var(--Basic-White);
171
+ --Component-Colors-Check-box-fg-alt: var(--Gray-400);
172
+ --Component-Colors-Check-box-border: var(--Gray-300);
173
+ --Component-Colors-Check-box-border-hover: var(--Gray-400);
174
+ --Component-Colors-Check-box-border-disabled: var(--Gray-200);
175
+ --Component-Colors-Check-box-bg-default: var(--Brand-500);
176
+ --Component-Colors-Check-box-bg-hover: var(--Brand-600);
177
+ --Component-Colors-Check-box-bg-disabled: var(--Gray-100);
178
+
179
+ // Component Colors Switch
180
+ --Component-Colors-Switch-fg-default: var(--Gray-25);
181
+ --Component-Colors-Switch-fg-on: var(--Basic-White);
182
+ --Component-Colors-Switch-fg-disabled: var(--Opacity-White-60);
183
+ --Component-Colors-Switch-bg-default: var(--Gray-300);
184
+ --Component-Colors-Switch-bg-on: var(--Gray-950);
185
+ --Component-Colors-Switch-bg-disabled: var(--Gray-200);
186
+
187
+ // Component Colors Tag
188
+ --Component-Colors-Tag-bg-default: var(--Gray-200);
189
+
190
+ // Component Colors Chips
191
+ --Component-Colors-Chips-Primary-fg-disabled: var(--Gray-400);
192
+ --Component-Colors-Chips-Primary-bg-default: var(--Basic-White);
193
+ --Component-Colors-Chips-Primary-bg-hover: var(--Gray-100);
194
+ --Component-Colors-Chips-Primary-bg-disabled: var(--Gray-25);
195
+ --Component-Colors-Chips-Primary-border: var(--Gray-300);
196
+ --Component-Colors-Chips-Primary-bg-select: var(--Gray-900);
197
+ --Component-Colors-Chips-Primary-bg-select-disabled: var(--Gray-300);
198
+
199
+ // Component Colors Popover
200
+ --Component-Colors-Popover-fg-default: var(--Gray-900);
201
+ --Component-Colors-Popover-bg-default: var(--Basic-White);
202
+ --Component-Colors-Popover-border: var(--Basic-None);
203
+
204
+ // Component Colors Dropdown
205
+ --Component-Colors-Dropdown-fg-default: var(--Gray-900);
206
+ --Component-Colors-Dropdown-fg-subtle: var(--Gray-600);
207
+ --Component-Colors-Dropdown-fg-disabled: var(--Gray-400);
208
+ --Component-Colors-Dropdown-bg-default: var(--Basic-White);
209
+ --Component-Colors-Dropdown-bg-hover: var(--Gray-100);
210
+ --Component-Colors-Dropdown-bg-bolder: var(--Gray-200);
211
+ --Component-Colors-Dropdown-Border: var(--Basic-None);
212
+ --Component-Colors-Dropdown-Border-2: var(--Basic-None);
213
+
214
+ // Component Colors Toast
215
+ --Component-Colors-Toast-fg-default: var(--Opacity-Black-95);
216
+ --Component-Colors-Toast-fg-subtle: var(--Opacity-Black-60);
217
+ --Component-Colors-Toast-bg-default: var(--Opacity-White-80);
218
+ --Component-Colors-Toast-Border: var(--Opacity-Black-8);
219
+ }
220
+ }