myshell-react-lib 0.1.15 → 0.1.17

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 (15) hide show
  1. package/dist/index.cjs +37 -67
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +7 -7
  4. package/dist/index.d.ts +7 -7
  5. package/dist/index.js +37 -67
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles/components-dark.scss +212 -0
  8. package/dist/styles/components-light.scss +210 -0
  9. package/dist/styles/design2-dark.scss +333 -0
  10. package/dist/styles/design2-light.scss +364 -0
  11. package/dist/styles/font.css +19 -0
  12. package/dist/styles/global.scss +247 -0
  13. package/dist/styles/md-viewer.scss +155 -0
  14. package/dist/styles/new-tokens.scss +255 -0
  15. package/package.json +1 -1
package/dist/styles/components-dark.scss ADDED
@@ -0,0 +1,212 @@
1
+ @import './new-tokens.scss';
2
+
3
+ @layer base {
4
+ .dark {
5
+
6
+ // Colors Component_colors_icon
7
+ --Component-Colors-Icon-Featured-icon-fg-info: var(--Lake-Blue-70);
8
+ --Component-Colors-Icon-Featured-icon-fg-success: var(--Teal-70);
9
+ --Component-Colors-Icon-Featured-icon-fg-warning: var(--Khaki-70);
10
+ --Component-Colors-Icon-Featured-icon-fg-error: var(--Terracotta-70);
11
+
12
+ // Colors Component_colors_button_brand
13
+ --Component-Colors-Button-Brand-fg-default: var(--Pure-Mauve-99);
14
+ --Component-Colors-Button-Brand-fg-alt: var(--Neutral-Variant-40);
15
+ --Component-Colors-Button-Brand-bg-default: var(--Pure-Mauve-50);
16
+ --Component-Colors-Button-Brand-bg-hover: var(--Pure-Mauve-30);
17
+ --Component-Colors-Button-Brand-bg-active: var(--Pure-Mauve-20);
18
+ --Component-Colors-Button-Brand-bg-disabled: var(--Neutral-Variant-20);
19
+
20
+ // Colors Component_colors_button_primary
21
+ --Component-Colors-Button-Primary-fg-default: var(--Neutral-Variant-5);
22
+ --Component-Colors-Button-Primary-fg-alt: var(--Neutral-Variant-40);
23
+ --Component-Colors-Button-Primary-bg-default: var(--Neutral-Variant-100);
24
+ --Component-Colors-Button-Primary-bg-hover: var(--Neutral-Variant-90);
25
+ --Component-Colors-Button-Primary-bg-active: var(--Neutral-Variant-80);
26
+ --Component-Colors-Button-Primary-bg-disabled: var(--Neutral-Variant-20);
27
+ --Component-Colors-Button-Primary-bg-default-2: var(--Neutral-Variant-100);
28
+
29
+
30
+ // Colors Component_colors_button_secondary
31
+ --Component-Colors-Button-Secondary-fg-default: var(--Neutral-Variant-100);
32
+ --Component-Colors-Button-Secondary-fg-alt: var(--Neutral-Variant-40);
33
+ --Component-Colors-Button-Secondary-bg-default: var(--Basic-None);
34
+ --Component-Colors-Button-Secondary-bg-hover: var(--Opacity-White-16);
35
+ --Component-Colors-Button-Secondary-bg-active: var(--Opacity-White-20);
36
+ --Component-Colors-Button-Secondary-border-default: var(--Neutral-Variant-100);
37
+ --Component-Colors-Button-Secondary-border-disabled: var(--Opacity-White-16);
38
+
39
+ // Colors Component_colors_button_tertiary
40
+ --Component-Colors-Button-Tertiary-fg-default: var(--Neutral-Variant-100);
41
+ --Component-Colors-Button-Tertiary-fg-alt: var(--Opacity-White-30);
42
+ --Component-Colors-Button-Tertiary-bg-default: var(--Opacity-White-8);
43
+ --Component-Colors-Button-Tertiary-bg-hover: var(--Opacity-White-16);
44
+ --Component-Colors-Button-Tertiary-bg-active: var(--Opacity-White-20);
45
+ --Component-Colors-Button-Tertiary-border: var(--Opacity-White-16);
46
+ --Component-Colors-Button-Tertiary-border-alt: var(--Opacity-White-30);
47
+
48
+ // Colors Component_colors_button_plain
49
+ --Component-Colors-Button-Plain-fg-default: var(--Neutral-Variant-100);
50
+ --Component-Colors-Button-Plain-fg-alt: var(--Neutral-Variant-40);
51
+ --Component-Colors-Button-Plain-bg-default: var(--Basic-None);
52
+ --Component-Colors-Button-Plain-bg-hover: var(--Opacity-White-16);
53
+ --Component-Colors-Button-Plain-bg-active: var(--Opacity-White-20);
54
+
55
+ // Colors Component_colors_button_plain_brand
56
+ --Component-Colors-Button-Plain-Brand-fg-default: var(--Pure-Mauve-70);
57
+ --Component-Colors-Button-Plain-Brand-fg-alt: var(--Neutral-Variant-40);
58
+ --Component-Colors-Button-Plain-Brand-bg-default: var(--Basic-None);
59
+ --Component-Colors-Button-Plain-Brand-bg-hover: var(--Opacity-White-16);
60
+ --Component-Colors-Button-Plain-Brand-bg-active: var(--Opacity-White-20);
61
+
62
+ // Colors Component_colors_button_error_primary
63
+ --Component-Colors-Button-Error-Primary-fg-default: var(--Terracotta-95);
64
+ --Component-Colors-Button-Error-Primary-fg-alt: var(--Neutral-Variant-40);
65
+ --Component-Colors-Button-Error-Primary-bg-default: var(--Terracotta-40);
66
+ --Component-Colors-Button-Error-Primary-bg-hover: var(--Terracotta-30);
67
+ --Component-Colors-Button-Error-Primary-bg-active: var(--Terracotta-20);
68
+ --Component-Colors-Button-Error-Primary-bg-disabled: var(--Neutral-Variant-20);
69
+ --Component-Colors-Button-Error-Primary-bg-loading: var(--Terracotta-40);
70
+
71
+ // Colors Component_colors_button_error_secondary
72
+ --Component-Colors-Button-Error-Secondary-fg-default: var(--Terracotta-95);
73
+ --Component-Colors-Button-Error-Secondary-fg-alt: var(--Neutral-Variant-40);
74
+ --Component-Colors-Button-Error-Secondary-bg-default: var(--Terracotta-5);
75
+ --Component-Colors-Button-Error-Secondary-bg-hover: var(--Terracotta-20);
76
+ --Component-Colors-Button-Error-Secondary-bg-active: var(--Terracotta-30);
77
+ --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Basic-None);
78
+ --Component-Colors-Button-Error-Secondary-border-default: var(--Terracotta-40);
79
+ --Component-Colors-Button-Error-Secondary-border-disabled: var(--Opacity-White-16);
80
+
81
+ // Colors Component_colors_button_static
82
+ --Component-Colors-Button-Static-fg-default: var(--Neutral-Variant-5);
83
+ --Component-Colors-Button-Static-fg-alt: var(--Neutral-Variant-40);
84
+ --Component-Colors-Button-Static-bg-default: var(--Neutral-Variant-99);
85
+ --Component-Colors-Button-Static-bg-hover: var(--Neutral-Variant-95);
86
+ --Component-Colors-Button-Static-bg-active: var(--Neutral-Variant-90);
87
+ --Component-Colors-Button-Static-border: var(--Opacity-White-16);
88
+ --Component-Colors-Button-Static-border-alt: var(--Opacity-White-30);
89
+
90
+ // Colors Component_colors_button_solid
91
+ --Component-Colors-Button-Solid-fg-default: var(--Neutral-Variant-100);
92
+ --Component-Colors-Button-Solid-fg-alt: var(--Neutral-Variant-40);
93
+ --Component-Colors-Button-Solid-bg-default: var(--Neutral-Variant-10);
94
+ --Component-Colors-Button-Solid-bg-hover: var(--Neutral-Variant-20);
95
+ --Component-Colors-Button-Solid-bg-active: var(--Neutral-Variant-30);
96
+ --Component-Colors-Button-Solid-border: var(--Opacity-White-16);
97
+ --Component-Colors-Button-Solid-border-alt: var(--Opacity-White-30);
98
+
99
+ // Colors Component_colors_icon_button
100
+ --Component-Colors-Icon-Button-Brand-fg-default: var(--Pure-Mauve-99);
101
+ --Component-Colors-Icon-Button-Brand-fg-alt: var(--Neutral-Variant-40);
102
+ --Component-Colors-Icon-Button-Brand-bg-default: var(--Pure-Mauve-50);
103
+ --Component-Colors-Icon-Button-Brand-bg-hover: var(--Pure-Mauve-30);
104
+ --Component-Colors-Icon-Button-Brand-bg-active: var(--Pure-Mauve-20);
105
+ --Component-Colors-Icon-Button-Brand-bg-disabled: var(--Neutral-Variant-20);
106
+
107
+ --Component-Colors-Icon-Button-Plain-fg-default: var(--Neutral-Variant-100);
108
+ --Component-Colors-Icon-Button-Plain-Gray-fg-default: var(--Neutral-Variant-80);
109
+
110
+ // Colors Component_colors_link_button_primary
111
+ --Component-Colors-Link-Button-Primary-fg-default: var(--Pure-Mauve-70);
112
+ --Component-Colors-Link-Button-Primary-fg-hover: var(--Pure-Mauve-80);
113
+ --Component-Colors-Link-Button-Primary-fg-active: var(--Pure-Mauve-80);
114
+ --Component-Colors-Link-Button-Primary-fg-disabled: var(--Neutral-Variant-40);
115
+ --Component-Colors-Link-Button-Primary-bg-default: var(--Basic-None);
116
+
117
+ // Colors Component_colors_link_button_secondary
118
+ --Component-Colors-Link-Button-Secondary-fg-default: var(--Neutral-Variant-100);
119
+ --Component-Colors-Link-Button-Secondary-fg-hover: var(--Neutral-Variant-80);
120
+ --Component-Colors-Link-Button-Secondary-fg-active: var(--Neutral-Variant-60);
121
+ --Component-Colors-Link-Button-Secondary-fg-disabled: var(--Neutral-Variant-40);
122
+ --Component-Colors-Link-Button-Secondary-bg-default: var(--Basic-None);
123
+
124
+ // Colors Component_colors_tooltip
125
+ --Component-Colors-Tooltip-fg-default: var(--Neutral-Variant-100);
126
+ --Component-Colors-Tooltip-fg-subtle: var(--Neutral-Variant-80);
127
+ --Component-Colors-Tooltip-bg-default: var(--Neutral-Variant-10);
128
+ --Component-Colors-Tooltip-border-default: var(--Neutral-Variant-20);
129
+
130
+ // Colors Component_colors_tabbar
131
+ --Component-Colors-Tabbar-fg-default: var(--Neutral-Variant-70);
132
+ --Component-Colors-Tabbar-fg-alt: var(--Neutral-Variant-50);
133
+ --Component-Colors-Tabbar-fg-bolder: var(--Neutral-Variant-100);
134
+ --Component-Colors-Tabbar-fg-disabled: var(--Neutral-Variant-30);
135
+ --Component-Colors-Tabbar-bg-default: var(--Opacity-White-5);
136
+ --Component-Colors-Tabbar-bg-select: var(--Neutral-Variant-20);
137
+ --Component-Colors-Tabbar-border-default: var(--Neutral-Variant-100);
138
+ --Component-Colors-Tabbar-border-disabled: var(--Neutral-Variant-20);
139
+
140
+ // Colors Component_colors_energy
141
+ --Component-Colors-Energy-fg-default: var(--Khaki-90);
142
+ --Component-Colors-Energy-bg-default: var(--Khaki-10);
143
+ --Component-Colors-Energy-bg-alt: var(--Khaki-20);
144
+ --Component-Colors-Energy-bg-on: var(--Khaki-60);
145
+ --Component-Colors-Energy-border-default: var(--Khaki-90);
146
+
147
+ // Colors Component_colors_input
148
+ --Component-Colors-Input-bg-default: var(--Opacity-White-5);
149
+ --Component-Colors-Input-bg-hover: var(--Opacity-White-12);
150
+ --Component-Colors-Input-bg-disabled: var(--Opacity-White-8);
151
+ --Component-Colors-Input-border-default: var(--Opacity-White-12);
152
+
153
+ // Colors Component_colors_search_bar
154
+ --Component-Colors-Search-Bar-bg-default: var(--Opacity-White-5);
155
+ --Component-Colors-Search-Bar-bg-hover: var(--Opacity-White-12);
156
+ --Component-Colors-Search-Bar-border-default: var(--Opacity-White-12);
157
+
158
+ // Colors Component_colors_shadow
159
+ --Component-Colors-Shadows-Surface-Default: var(--Opacity-White-5);
160
+ --Component-Colors-Shadows-Surface-Bolder: var(--Opacity-White-3);
161
+ --Component-Colors-Shadows-Modal-Default: var(--Opacity-Black-40);
162
+ --Component-Colors-Shadows-Modal-Bolder: var(--Opacity-Black-40);
163
+ --Component-Colors-Shadows-Button-Primary-1:var(--Alpha-White-8);
164
+
165
+ // Colors Component_colors_focus_rings
166
+ --Component-Colors-Focus-Rings-Brand: var(--Opacity-White-40);
167
+ --Component-Colors-Focus-Rings-Error: var(--Terracotta-60);
168
+
169
+ // Colors Component_colors_chat_tips
170
+ --Component-Colors-Chat-Tips-fg-info: var(--Pure-Mauve-70);
171
+ --Component-Colors-Chat-Tips-bg-info: var(--Pure-Mauve-10);
172
+ --Component-Colors-Chat-Tips-border-info: var(--Pure-Mauve-30);
173
+ --Component-Colors-Chat-Tips-fg-alert: var(--Khaki-70);
174
+ --Component-Colors-Chat-Tips-bg-alert: var(--Khaki-10);
175
+ --Component-Colors-Chat-Tips-button-alert: var(--Khaki-40);
176
+ --Component-Colors-Chat-Tips-border-alert: var(--Khaki-30);
177
+ --Component-Colors-Chat-Tips-fg-error: var(--Terracotta-70);
178
+ --Component-Colors-Chat-Tips-bg-error: var(--Terracotta-10);
179
+ --Component-Colors-Chat-Tips-border-error: var(--Terracotta-30);
180
+
181
+ // Colors Component_colors_check_box
182
+ --Component-Colors-Check-Box-fg-default: var(--Neutral-Variant-5);
183
+ --Component-Colors-Check-Box-fg-alt: var(--Neutral-Variant-50);
184
+ --Component-Colors-Check-Box-border-default: var(--Neutral-Variant-30);
185
+ --Component-Colors-Check-Box-border-hover: var(--Neutral-Variant-40);
186
+ --Component-Colors-Check-Box-border-disabled: var(--Neutral-Variant-30);
187
+ --Component-Colors-Check-Box-bg-default: var(--Neutral-Variant-100);
188
+ --Component-Colors-Check-Box-bg-hover: var(--Neutral-Variant-90);
189
+ --Component-Colors-Check-Box-bg-disabled: var(--Neutral-Variant-20);
190
+
191
+ // Colors Component_colors_switch
192
+ --Component-Colors-Switch-fg-default: var(--Neutral-Variant-100);
193
+ --Component-Colors-Switch-fg-on: var(--Neutral-Variant-100);
194
+ --Component-Colors-Switch-fg-disabled: var(--Opacity-White-30);
195
+ --Component-Colors-Switch-bg-default: var(--Neutral-Variant-20);
196
+ --Component-Colors-Switch-bg-on: var(--Pure-Mauve-60);
197
+ --Component-Colors-Switch-bg-disabled: var(--Neutral-Variant-20);
198
+
199
+ // Colors Component_colors_tag
200
+ --Component-Colors-Tag-bg-default: var(--Opacity-White-12);
201
+
202
+ // Colors Component_colors_chips
203
+ --Component-Colors-Chips-Primary-bg-default: var(--Opacity-White-5);
204
+ --Component-Colors-Chips-Primary-bg-hover: var(--Opacity-White-12);
205
+ --Component-Colors-Chips-Primary-bg-disabled: var(--Opacity-White-8);
206
+ --Component-Colors-Chips-Primary-border: var(--Opacity-White-12);
207
+ --Component-Colors-Chips-Primary-bg-select-disabled: var(--Neutral-Variant-30);
208
+ --Component-Colors-Chips-Primary-bg-select: var(--Neutral-Variant-100);
209
+
210
+ }
211
+ }
212
+
package/dist/styles/components-light.scss ADDED
@@ -0,0 +1,210 @@
1
+ @import './new-tokens.scss';
2
+
3
+ @layer base {
4
+ :root {
5
+
6
+ // Colors Component_colors_icon
7
+ --Component-Colors-Icon-Featured-icon-fg-info: var(--Lake-Blue-50);
8
+ --Component-Colors-Icon-Featured-icon-fg-success: var(--Teal-50);
9
+ --Component-Colors-Icon-Featured-icon-fg-warning: var(--Khaki-50);
10
+ --Component-Colors-Icon-Featured-icon-fg-error: var(--Terracotta-50);
11
+
12
+ // Colors Component_colors_button_brand
13
+ --Component-Colors-Button-Brand-fg-default: var(--Pure-Mauve-50);
14
+ --Component-Colors-Button-Brand-fg-alt: var(--Neutral-70);
15
+ --Component-Colors-Button-Brand-bg-default: var(--Pure-Mauve-95);
16
+ --Component-Colors-Button-Brand-bg-hover: var(--Pure-Mauve-80);
17
+ --Component-Colors-Button-Brand-bg-active: var(--Pure-Mauve-70);
18
+ --Component-Colors-Button-Brand-bg-disabled: var(--Neutral-95);
19
+
20
+ // Colors Component_colors_button_primary
21
+ --Component-Colors-Button-Primary-fg-default: var(--Neutral-100);
22
+ --Component-Colors-Button-Primary-fg-alt: var(--Opacity-White-90);
23
+ --Component-Colors-Button-Primary-bg-default: var(--Neutral-5);
24
+ --Component-Colors-Button-Primary-bg-hover: var(--Neutral-20);
25
+ --Component-Colors-Button-Primary-bg-active: var(--Neutral-40);
26
+ --Component-Colors-Button-Primary-bg-disabled: var(--Opacity-Black-30);
27
+ --Component-Colors-Button-Primary-bg-default-2: var(--Neutral-5);
28
+
29
+ // Colors Component_colors_button_secondary
30
+ --Component-Colors-Button-Secondary-fg-default: var(--Neutral-5);
31
+ --Component-Colors-Button-Secondary-fg-alt: var(--Neutral-70);
32
+ --Component-Colors-Button-Secondary-bg-default: var(--Basic-None);
33
+ --Component-Colors-Button-Secondary-bg-hover: var(--Opacity-On-Surface-20);
34
+ --Component-Colors-Button-Secondary-bg-active: var(--Opacity-On-Surface-30);
35
+ --Component-Colors-Button-Secondary-border-default: var(--Neutral-5);
36
+ --Component-Colors-Button-Secondary-border-disabled: var(--Opacity-On-Surface-40);
37
+
38
+ // Colors Component_colors_button_tertiary
39
+ --Component-Colors-Button-Tertiary-fg-default: var(--Neutral-5);
40
+ --Component-Colors-Button-Tertiary-fg-alt: var(--Neutral-70);
41
+ --Component-Colors-Button-Tertiary-bg-default: var(--Opacity-On-Surface-10);
42
+ --Component-Colors-Button-Tertiary-bg-hover: var(--Opacity-On-Surface-20);
43
+ --Component-Colors-Button-Tertiary-bg-active: var(--Opacity-On-Surface-30);
44
+ --Component-Colors-Button-Tertiary-border-default: var(--Opacity-On-Surface-40);
45
+ --Component-Colors-Button-Tertiary-border-alt: var(--Opacity-On-Surface-40);
46
+
47
+ // Colors Component_colors_button_plain
48
+ --Component-Colors-Button-Plain-fg-default: var(--Neutral-5);
49
+ --Component-Colors-Button-Plain-fg-alt: var(--Neutral-70);
50
+ --Component-Colors-Button-Plain-bg-default: var(--Basic-None);
51
+ --Component-Colors-Button-Plain-bg-hover: var(--Opacity-On-Surface-20);
52
+ --Component-Colors-Button-Plain-bg-active: var(--Opacity-On-Surface-30);
53
+
54
+ // Colors Component_colors_button_plain_brand
55
+ --Component-Colors-Button-Plain-Brand-fg-default: var(--Pure-Mauve-50);
56
+ --Component-Colors-Button-Plain-Brand-fg-alt: var(--Neutral-70);
57
+ --Component-Colors-Button-Plain-Brand-bg-default: var(--Basic-None);
58
+ --Component-Colors-Button-Plain-Brand-bg-hover: var(--Opacity-On-Surface-20);
59
+ --Component-Colors-Button-Plain-Brand-bg-active: var(--Opacity-On-Surface-30);
60
+
61
+ // Colors Component_colors_button_error
62
+ --Component-Colors-Button-Error-Primary-fg-default: var(--Terracotta-100);
63
+ --Component-Colors-Button-Error-Primary-fg-alt: var(--Neutral-70);
64
+ --Component-Colors-Button-Error-Primary-bg-default: var(--Terracotta-50);
65
+ --Component-Colors-Button-Error-Primary-bg-hover: var(--Terracotta-40);
66
+ --Component-Colors-Button-Error-Primary-bg-active: var(--Terracotta-30);
67
+ --Component-Colors-Button-Error-Primary-bg-disabled: var(--Neutral-95);
68
+ --Component-Colors-Button-Error-Primary-bg-loading: var(--Terracotta-90);
69
+
70
+ // Colors Component_colors_button_error_secondary
71
+ --Component-Colors-Button-Error-Secondary-fg-default: var(--Terracotta-50);
72
+ --Component-Colors-Button-Error-Secondary-fg-alt: var(--Neutral-70);
73
+ --Component-Colors-Button-Error-Secondary-bg-default: var(--Terracotta-98);
74
+ --Component-Colors-Button-Error-Secondary-bg-hover: var(--Terracotta-90);
75
+ --Component-Colors-Button-Error-Secondary-bg-active: var(--Terracotta-80);
76
+ --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Terracotta-100);
77
+ --Component-Colors-Button-Error-Secondary-border-default: var(--Terracotta-50);
78
+ --Component-Colors-Button-Error-Secondary-border-disabled: var(--Opacity-On-Surface-40);
79
+
80
+ // Colors Component_colors_button_static
81
+ --Component-Colors-Button-Static-fg-default: var(--Neutral-5);
82
+ --Component-Colors-Button-Static-fg-alt: var(--Neutral-70);
83
+ --Component-Colors-Button-Static-bg-default: var(--Opacity-On-Surface-10);
84
+ --Component-Colors-Button-Static-bg-hover: var(--Opacity-On-Surface-20);
85
+ --Component-Colors-Button-Static-bg-active: var(--Opacity-On-Surface-30);
86
+ --Component-Colors-Button-Static-border-default: var(--Opacity-On-Surface-40);
87
+ --Component-Colors-Button-Static-border-alt: var(--Opacity-On-Surface-40);
88
+
89
+ // Colors Component_colors_button_solid
90
+ --Component-Colors-Button-Solid-fg-default: var(--Neutral-5);
91
+ --Component-Colors-Button-Solid-fg-alt: var(--Neutral-70);
92
+ --Component-Colors-Button-Solid-bg-default: var(--Neutral-100);
93
+ --Component-Colors-Button-Solid-bg-hover: var(--Neutral-98);
94
+ --Component-Colors-Button-Solid-bg-active: var(--Neutral-95);
95
+ --Component-Colors-Button-Solid-border-default: var(--Opacity-On-Surface-40);
96
+ --Component-Colors-Button-Solid-border-alt: var(--Opacity-On-Surface-40);
97
+
98
+ // Colors Component_colors_icon_button
99
+ --Component-Colors-Icon-Button-Brand-fg-default: var(--Pure-Mauve-5);
100
+ --Component-Colors-Icon-Button-Brand-fg-alt: var(--Neutral-70);
101
+ --Component-Colors-Icon-Button-Brand-bg-default: var(--Pure-Mauve-95);
102
+ --Component-Colors-Icon-Button-Brand-bg-hover: var(--Pure-Mauve-80);
103
+ --Component-Colors-Icon-Button-Brand-bg-active: var(--Pure-Mauve-70);
104
+ --Component-Colors-Icon-Button-Brand-bg-disabled: var(--Neutral-95);
105
+
106
+ --Component-Colors-Icon-Button-Plain-fg-default: var(--Neutral-5);
107
+ --Component-Colors-Icon-Button-Plain-Gray-fg-default: var(--Neutral-40);
108
+
109
+ // Colors Component_colors_link_button_primary
110
+ --Component-Colors-Link-Button-Primary-fg-default: var(--Pure-Mauve-50);
111
+ --Component-Colors-Link-Button-Primary-fg-hover: var(--Pure-Mauve-40);
112
+ --Component-Colors-Link-Button-Primary-fg-active: var(--Pure-Mauve-30);
113
+ --Component-Colors-Link-Button-Primary-fg-disabled: var(--Neutral-Variant-80);
114
+ --Component-Colors-Link-Button-Primary-bg-default: var(--Basic-None);
115
+
116
+ // Colors Component_colors_link_button_secondary
117
+ --Component-Colors-Link-Button-Secondary-fg-default: var(--Neutral-Variant-30);
118
+ --Component-Colors-Link-Button-Secondary-fg-hover: var(--Neutral-Variant-50);
119
+ --Component-Colors-Link-Button-Secondary-fg-active: var(--Neutral-Variant-70);
120
+ --Component-Colors-Link-Button-Secondary-fg-disabled: var(--Neutral-Variant-80);
121
+ --Component-Colors-Link-Button-Secondary-bg-default: var(--Basic-None);
122
+
123
+ // Colors Component_colors_tooltip
124
+ --Component-Colors-Tooltip-fg-default: var(--Neutral-Variant-100);
125
+ --Component-Colors-Tooltip-fg-subtle: var(--Neutral-Variant-80);
126
+ --Component-Colors-Tooltip-bg-default: var(--Neutral-Variant-10);
127
+ --Component-Colors-Tooltip-border-default: var(--Basic-None);
128
+
129
+ // Colors Component_colors_tabbar
130
+ --Component-Colors-Tabbar-fg-default: var(--Neutral-60);
131
+ --Component-Colors-Tabbar-fg-alt: var(--Neutral-70);
132
+ --Component-Colors-Tabbar-fg-bolder: var(--Neutral-5);
133
+ --Component-Colors-Tabbar-fg-disabled: var(--Neutral-90);
134
+ --Component-Colors-Tabbar-bg-default: var(--Opacity-On-Surface-10);
135
+ --Component-Colors-Tabbar-bg-select: var(--Neutral-100);
136
+ --Component-Colors-Tabbar-border-default: var(--Neutral-5);
137
+ --Component-Colors-Tabbar-border-disabled: var(--Neutral-95);
138
+
139
+ // Colors Component_colors_energy
140
+ --Component-Colors-Energy-fg-default: var(--Khaki-40);
141
+ --Component-Colors-Energy-bg-default: var(--Khaki-99);
142
+ --Component-Colors-Energy-bg-alt: var(--Khaki-95);
143
+ --Component-Colors-Energy-bg-on: var(--Khaki-90);
144
+ --Component-Colors-Energy-border-default: var(--Khaki-80);
145
+
146
+ // Colors Component_colors_input
147
+ --Component-Colors-Input-bg-default: var(--Opacity-On-Surface-10);
148
+ --Component-Colors-Input-bg-hover: var(--Opacity-On-Surface-20);
149
+ --Component-Colors-Input-bg-disabled: var(--Opacity-On-Surface-10);
150
+ --Component-Colors-Input-border-default: var(--Opacity-On-Surface-40);
151
+
152
+ // Colors Component_colors_search_bar
153
+ --Component-Colors-Search-Bar-bg-default: var(--Opacity-On-Surface-10);
154
+ --Component-Colors-Search-Bar-bg-hover: var(--Opacity-On-Surface-20);
155
+ --Component-Colors-Search-Bar-border-default: var(--Opacity-On-Surface-40);
156
+
157
+ // Colors Component_colors_shadow
158
+ --Component-Colors-Shadows-Surface-Default: var(--Opacity-Black-12);
159
+ --Component-Colors-Shadows-Surface-Bolder: var(--Opacity-Black-3);
160
+ --Component-Colors-Shadows-Modal-Default: var(--Opacity-Black-12);
161
+ --Component-Colors-Shadows-Modal-Bolder: var(--Opacity-Black-12);
162
+ --Component-Colors-Shadows-Button-Primary-1:var(--Alpha-White-8);
163
+
164
+ // Colors Component_colors_focus_rings
165
+ --Component-Colors-Focus-Rings-Brand: var(--Neutral-90);
166
+ --Component-Colors-Focus-Rings-Error: var(--Terracotta-50);
167
+
168
+ // Colors Component_colors_chat_tips
169
+ --Component-Colors-Chat-Tips-fg-info: var(--Pure-Mauve-50);
170
+ --Component-Colors-Chat-Tips-bg-info: var(--Pure-Mauve-99);
171
+ --Component-Colors-Chat-Tips-border-info: var(--Pure-Mauve-90);
172
+ --Component-Colors-Chat-Tips-fg-alert: var(--Khaki-70);
173
+ --Component-Colors-Chat-Tips-bg-alert: var(--Khaki-98);
174
+ --Component-Colors-Chat-Tips-button-alert: var(--Khaki-90);
175
+ --Component-Colors-Chat-Tips-border-alert: var(--Khaki-90);
176
+ --Component-Colors-Chat-Tips-fg-error: var(--Terracotta-50);
177
+ --Component-Colors-Chat-Tips-bg-error: var(--Terracotta-98);
178
+ --Component-Colors-Chat-Tips-border-error: var(--Terracotta-90);
179
+
180
+ // Colors Component_colors_check_box
181
+ --Component-Colors-Check-Box-fg-default: var(--Neutral-100);
182
+ --Component-Colors-Check-Box-fg-alt: var(--Neutral-80);
183
+ --Component-Colors-Check-Box-border-default: var(--Neutral-90);
184
+ --Component-Colors-Check-Box-border-hover: var(--Neutral-80);
185
+ --Component-Colors-Check-Box-border-disabled: var(--Neutral-95);
186
+ --Component-Colors-Check-Box-bg-default: var(--Neutral-5);
187
+ --Component-Colors-Check-Box-bg-hover: var(--Neutral-30);
188
+ --Component-Colors-Check-Box-bg-disabled: var(--Neutral-99);
189
+
190
+ // Colors Component_colors_switch
191
+ --Component-Colors-Switch-fg-default: var(--Neutral-Variant-100);
192
+ --Component-Colors-Switch-fg-on: var(--Neutral-Variant-100);
193
+ --Component-Colors-Switch-fg-disabled: var(--Opacity-White-60);
194
+ --Component-Colors-Switch-bg-default: var(--Neutral-Variant-90);
195
+ --Component-Colors-Switch-bg-on: var(--Neutral-Variant-5);
196
+ --Component-Colors-Switch-bg-disabled: var(--Neutral-Variant-98);
197
+
198
+ // Colors Component_colors_tag
199
+ --Component-Colors-Tag-bg-default: var(--Opacity-On-Surface-20);
200
+
201
+ // Colors Component_colors_chips
202
+ --Component-Colors-Chips-Primary-bg-default: var(--Opacity-On-Surface-10);
203
+ --Component-Colors-Chips-Primary-bg-hover: var(--Opacity-On-Surface-20);
204
+ --Component-Colors-Chips-Primary-bg-disabled: var(--Opacity-On-Surface-10);
205
+ --Component-Colors-Chips-Primary-border-default: var(--Opacity-On-Surface-40);
206
+ --Component-Colors-Chips-Primary-bg-select-disabled: var(--Neutral-90);
207
+ --Component-Colors-Chips-Primary-bg-select: var(--Neutral-5);
208
+ }
209
+ }
210
+