myshell-react-lib 0.3.1 → 0.3.3

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 (10) hide show
  1. package/dist/index.cjs +8 -7
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +8 -7
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/components-dark-v2.scss +44 -33
  6. package/dist/styles/components-light-v2.scss +51 -40
  7. package/dist/styles/design2-dark-v2.scss +15 -122
  8. package/dist/styles/design2-light-v2.scss +14 -121
  9. package/dist/styles/global.scss +1 -1
  10. package/package.json +1 -1
package/dist/styles/components-dark-v2.scss CHANGED
@@ -45,26 +45,16 @@
45
45
  --Component-Colors-Button-Ghost-bg-active: var(--Gray-800);
46
46
  --Component-Colors-Button-Ghost-border: var(--Gray-700);
47
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
48
  --Component-Colors-Button-Plain-Brand-fg-default: var(--Brand-Dark-500);
64
49
  --Component-Colors-Button-Plain-Brand-fg-alt: var(--Gray-600);
65
50
  --Component-Colors-Button-Plain-Brand-bg-default: var(--Basic-None);
66
51
  --Component-Colors-Button-Plain-Brand-bg-hover: var(--Gray-800);
67
52
  --Component-Colors-Button-Plain-Brand-bg-active: var(--Gray-800);
53
+ --Component-Colors-Button-Plain-Gray-fg-default: var(--Gray-50);
54
+ --Component-Colors-Button-Plain-Gray-fg-alt: var(--Gray-600);
55
+ --Component-Colors-Button-Plain-Gray-bg-default: var(--Basic-None);
56
+ --Component-Colors-Button-Plain-Gray-bg-hover: var(--Gray-800);
57
+ --Component-Colors-Button-Plain-Gray-bg-active: var(--Gray-800);
68
58
  --Component-Colors-Button-Error-Primary-fg-default: var(--Error-25);
69
59
  --Component-Colors-Button-Error-Primary-fg-alt: var(--Gray-600);
70
60
  --Component-Colors-Button-Error-Primary-bg-default: var(--Error-500);
@@ -77,7 +67,7 @@
77
67
  --Component-Colors-Button-Error-Secondary-bg-default: var(--Error-Variant-100);
78
68
  --Component-Colors-Button-Error-Secondary-bg-hover: var(--Error-950);
79
69
  --Component-Colors-Button-Error-Secondary-bg-active: var(--Error-950);
80
- --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Basic-None);
70
+ --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Gray-900);
81
71
  --Component-Colors-Button-Error-Secondary-border-default: var(--Error-500);
82
72
  --Component-Colors-Button-Error-Secondary-border-disabled: var(--Gray-800);
83
73
  --Component-Colors-Button-Static-fg-default: var(--Gray-900);
@@ -88,6 +78,7 @@
88
78
  --Component-Colors-Button-Static-border: var(--Basic-None);
89
79
  --Component-Colors-Button-Static-border-alt: var(--Basic-None);
90
80
  --Component-Colors-Button-Opacity-fg-default: var(--Opacity-White-100);
81
+ --Component-Colors-Button-Opacity-fg-alt: var(--Opacity-White-40);
91
82
  --Component-Colors-Button-Opacity-bg-default: var(--Opacity-Black-30);
92
83
  --Component-Colors-Button-Opacity-bg-hover: var(--Opacity-Black-50);
93
84
  --Component-Colors-Button-Opacity-bg-active: var(--Opacity-Black-50);
@@ -100,8 +91,7 @@
100
91
  --Component-Colors-Icon-Button-Brand-bg-hover: var(--Brand-600);
101
92
  --Component-Colors-Icon-Button-Brand-bg-active: var(--Brand-700);
102
93
  --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);
94
+ --Component-Colors-Icon-Button-Plain-Brand-fg-default: var(--Brand-Dark-500);
105
95
  --Component-Colors-Icon-Button-Plain-Gray-fg-default: var(--Gray-50);
106
96
 
107
97
  // Component Colors Link-Button
@@ -127,7 +117,7 @@
127
117
  --Component-Colors-Tabbar-fg-alt: var(--Gray-700);
128
118
  --Component-Colors-Tabbar-fg-bolder: var(--Gray-50);
129
119
  --Component-Colors-Tabbar-fg-disabled: var(--Gray-600);
130
- --Component-Colors-Tabbar-fg-Select-disabled: var(--Gray-600);
120
+ --Component-Colors-Tabbar-fg-select-disabled: var(--Gray-600);
131
121
  --Component-Colors-Tabbar-bg-default: var(--Gray-800);
132
122
  --Component-Colors-Tabbar-bg-select: var(--Gray-600);
133
123
  --Component-Colors-Tabbar-border: var(--Brand-500);
@@ -153,28 +143,30 @@
153
143
  --Component-Colors-Input-border: var(--Gray-700);
154
144
 
155
145
  // 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);
146
+ --Component-Colors-Search-Bar-bg-default: var(--Gray-800);
147
+ --Component-Colors-Search-Bar-bg-active: var(--Basic-None);
148
+ --Component-Colors-Search-Bar-border: var(--Gray-700);
159
149
 
160
150
  // Component Colors Shadows
161
151
  --Component-Colors-Shadows-Surface-Default: var(--Opacity-White-5);
162
152
  --Component-Colors-Shadows-Surface-Bolder: var(--Opacity-White-3);
163
153
  --Component-Colors-Shadows-Modal-DefaultAndBolder: var(--Opacity-Black-40);
154
+ --Component-Colors-Shadows-Modal-Default: var(--Opacity-Black-40);
155
+ --Component-Colors-Shadows-Modal-Bolder: var(--Opacity-Black-40);
164
156
 
165
157
  // Component Colors Focus-rings
166
- --Component-Colors-Focus-rings-Brand: var(--Opacity-White-40);
167
- --Component-Colors-Focus-rings-Error: var(--Error-500);
158
+ --Component-Colors-Focus-Rings-Brand: var(--Opacity-White-40);
159
+ --Component-Colors-Focus-Rings-Error: var(--Error-500);
168
160
 
169
161
  // 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);
162
+ --Component-Colors-Check-Box-fg-default: var(--Basic-White);
163
+ --Component-Colors-Check-Box-fg-alt: var(--Gray-600);
164
+ --Component-Colors-Check-Box-border: var(--Gray-700);
165
+ --Component-Colors-Check-Box-border-hover: var(--Gray-600);
166
+ --Component-Colors-Check-Box-border-disabled: var(--Gray-800);
167
+ --Component-Colors-Check-Box-bg-default: var(--Brand-500);
168
+ --Component-Colors-Check-Box-bg-hover: var(--Brand-600);
169
+ --Component-Colors-Check-Box-bg-disabled: var(--Gray-800);
178
170
 
179
171
  // Component Colors Switch
180
172
  --Component-Colors-Switch-fg-default: var(--Gray-25);
@@ -185,7 +177,18 @@
185
177
  --Component-Colors-Switch-bg-disabled: var(--Gray-800);
186
178
 
187
179
  // Component Colors Tag
188
- --Component-Colors-Tag-bg-default: var(--Gray-800);
180
+ --Component-Colors-Tag-gray-fg: var(--Gray-50);
181
+ --Component-Colors-Tag-gray-bg: var(--Gray-800);
182
+ --Component-Colors-Tag-green-fg: var(--Success-400);
183
+ --Component-Colors-Tag-green-bg: var(--Success-800);
184
+ --Component-Colors-Tag-brand-fg: var(--Brand-Dark-700);
185
+ --Component-Colors-Tag-brand-bg: var(--Brand-700);
186
+ --Component-Colors-Tag-yellow-fg: var(--Warning-400);
187
+ --Component-Colors-Tag-yellow-bg: var(--Warning-800);
188
+ --Component-Colors-Tag-red-fg: var(--Red-Ribbon-300);
189
+ --Component-Colors-Tag-red-bg: var(--Red-Ribbon-800);
190
+ --Component-Colors-Tag-blue-fg: var(--Dodger-Blue-300);
191
+ --Component-Colors-Tag-blue-bg: var(--Dodger-Blue-800);
189
192
 
190
193
  // Component Colors Chips
191
194
  --Component-Colors-Chips-Primary-fg-disabled: var(--Gray-600);
@@ -216,5 +219,13 @@
216
219
  --Component-Colors-Toast-fg-subtle: var(--Opacity-White-60);
217
220
  --Component-Colors-Toast-bg-default: var(--Opacity-Black-50);
218
221
  --Component-Colors-Toast-Border: var(--Opacity-White-8);
222
+
223
+ // Component Colors Selector
224
+ --Component-Colors-Selector-fg-default: var(--Gray-50);
225
+ --Component-Colors-Selector-bg-default: var(--Gray-900);
226
+ --Component-Colors-Selector-bg-hover: var(--Gray-800);
227
+ --Component-Colors-Selector-bg-selected: var(--Brand-Variant-50);
228
+ --Component-Colors-Selector-border: var(--Gray-700);
229
+ --Component-Colors-Selector-border-selected: var(--Brand-Dark-500);
219
230
  }
220
231
  }
package/dist/styles/components-light-v2.scss CHANGED
@@ -19,13 +19,13 @@
19
19
  --Component-Colors-Button-Brand-bg-default: var(--Brand-500);
20
20
  --Component-Colors-Button-Brand-bg-hover: var(--Brand-600);
21
21
  --Component-Colors-Button-Brand-bg-active: var(--Brand-600);
22
- --Component-Colors-Button-Brand-bg-disabled: var(--Gray-100);
22
+ --Component-Colors-Button-Brand-bg-disabled: var(--Gray-200);
23
23
  --Component-Colors-Button-Primary-fg-default: var(--Basic-White);
24
- --Component-Colors-Button-Primary-fg-alt: var(--Gray-200);
24
+ --Component-Colors-Button-Primary-fg-alt: var(--Gray-400);
25
25
  --Component-Colors-Button-Primary-bg-default: var(--Gray-950);
26
26
  --Component-Colors-Button-Primary-bg-hover: var(--Gray-800);
27
27
  --Component-Colors-Button-Primary-bg-active: var(--Gray-900);
28
- --Component-Colors-Button-Primary-bg-disabled: var(--Gray-300);
28
+ --Component-Colors-Button-Primary-bg-disabled: var(--Gray-200);
29
29
  --Component-Colors-Button-Secondary-fg-default: var(--Brand-500);
30
30
  --Component-Colors-Button-Secondary-fg-alt: var(--Gray-400);
31
31
  --Component-Colors-Button-Secondary-bg-default: var(--Gray-200);
@@ -45,39 +45,29 @@
45
45
  --Component-Colors-Button-Ghost-bg-active: var(--Gray-100);
46
46
  --Component-Colors-Button-Ghost-border: var(--Gray-300);
47
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
48
  --Component-Colors-Button-Plain-Brand-fg-default: var(--Brand-500);
64
49
  --Component-Colors-Button-Plain-Brand-fg-alt: var(--Gray-400);
65
50
  --Component-Colors-Button-Plain-Brand-bg-default: var(--Basic-None);
66
51
  --Component-Colors-Button-Plain-Brand-bg-hover: var(--Gray-100);
67
52
  --Component-Colors-Button-Plain-Brand-bg-active: var(--Gray-100);
53
+ --Component-Colors-Button-Plain-Gray-fg-default: var(--Gray-900);
54
+ --Component-Colors-Button-Plain-Gray-fg-alt: var(--Gray-400);
55
+ --Component-Colors-Button-Plain-Gray-bg-default: var(--Basic-None);
56
+ --Component-Colors-Button-Plain-Gray-bg-hover: var(--Gray-100);
57
+ --Component-Colors-Button-Plain-Gray-bg-active: var(--Gray-100);
68
58
  --Component-Colors-Button-Error-Primary-fg-default: var(--Error-25);
69
59
  --Component-Colors-Button-Error-Primary-fg-alt: var(--Gray-400);
70
60
  --Component-Colors-Button-Error-Primary-bg-default: var(--Error-500);
71
61
  --Component-Colors-Button-Error-Primary-bg-hover: var(--Error-600);
72
62
  --Component-Colors-Button-Error-Primary-bg-active: var(--Error-700);
73
- --Component-Colors-Button-Error-Primary-bg-disabled: var(--Gray-100);
63
+ --Component-Colors-Button-Error-Primary-bg-disabled: var(--Gray-200);
74
64
  --Component-Colors-Button-Error-Primary-bg-loading: var(--Error-400);
75
65
  --Component-Colors-Button-Error-Secondary-fg-default: var(--Error-600);
76
66
  --Component-Colors-Button-Error-Secondary-fg-alt: var(--Gray-400);
77
67
  --Component-Colors-Button-Error-Secondary-bg-default: var(--Error-50);
78
68
  --Component-Colors-Button-Error-Secondary-bg-hover: var(--Error-100);
79
69
  --Component-Colors-Button-Error-Secondary-bg-active: var(--Error-100);
80
- --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Error-50);
70
+ --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Basic-White);
81
71
  --Component-Colors-Button-Error-Secondary-border-default: var(--Error-500);
82
72
  --Component-Colors-Button-Error-Secondary-border-disabled: var(--Gray-100);
83
73
  --Component-Colors-Button-Static-fg-default: var(--Gray-900);
@@ -88,6 +78,7 @@
88
78
  --Component-Colors-Button-Static-border: var(--Basic-None);
89
79
  --Component-Colors-Button-Static-border-alt: var(--Basic-None);
90
80
  --Component-Colors-Button-Opacity-fg-default: var(--Opacity-White-100);
81
+ --Component-Colors-Button-Opacity-fg-alt: var(--Opacity-White-40);
91
82
  --Component-Colors-Button-Opacity-bg-default: var(--Opacity-Black-30);
92
83
  --Component-Colors-Button-Opacity-bg-hover: var(--Opacity-Black-50);
93
84
  --Component-Colors-Button-Opacity-bg-active: var(--Opacity-Black-50);
@@ -99,9 +90,8 @@
99
90
  --Component-Colors-Icon-Button-Brand-bg-default: var(--Brand-500);
100
91
  --Component-Colors-Icon-Button-Brand-bg-hover: var(--Brand-600);
101
92
  --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);
93
+ --Component-Colors-Icon-Button-Brand-bg-disabled: var(--Gray-200);
94
+ --Component-Colors-Icon-Button-Plain-Brand-fg-default: var(--Brand-500);
105
95
  --Component-Colors-Icon-Button-Plain-Gray-fg-default: var(--Gray-900);
106
96
 
107
97
  // Component Colors Link-Button
@@ -127,7 +117,7 @@
127
117
  --Component-Colors-Tabbar-fg-alt: var(--Gray-500);
128
118
  --Component-Colors-Tabbar-fg-bolder: var(--Gray-900);
129
119
  --Component-Colors-Tabbar-fg-disabled: var(--Gray-400);
130
- --Component-Colors-Tabbar-fg-Select-disabled: var(--Gray-400);
120
+ --Component-Colors-Tabbar-fg-select-disabled: var(--Gray-400);
131
121
  --Component-Colors-Tabbar-bg-default: var(--Gray-200);
132
122
  --Component-Colors-Tabbar-bg-select: var(--Basic-White);
133
123
  --Component-Colors-Tabbar-border: var(--Brand-500);
@@ -148,33 +138,35 @@
148
138
  --Component-Colors-Energy-add-icon: var(--Archive-Khaki-60);
149
139
 
150
140
  // Component Colors Input
151
- --Component-Colors-Input-bg-default: var(--Basic-White);
141
+ --Component-Colors-Input-bg-default: var(--Gray-200);
152
142
  --Component-Colors-Input-bg-active: var(--Gray-25);
153
143
  --Component-Colors-Input-border: var(--Gray-300);
154
144
 
155
145
  // 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);
146
+ --Component-Colors-Search-Bar-bg-default: var(--Gray-200);
147
+ --Component-Colors-Search-Bar-bg-active: var(--Gray-25);
148
+ --Component-Colors-Search-Bar-border: var(--Gray-300);
159
149
 
160
150
  // Component Colors Shadows
161
151
  --Component-Colors-Shadows-Surface-Default: var(--Opacity-Black-12);
162
152
  --Component-Colors-Shadows-Surface-Bolder: var(--Opacity-Black-3);
163
153
  --Component-Colors-Shadows-Modal-DefaultAndBolder: var(--Opacity-Black-12);
154
+ --Component-Colors-Shadows-Modal-Default: var(--Opacity-Black-12);
155
+ --Component-Colors-Shadows-Modal-Bolder: var(--Opacity-Black-12);
164
156
 
165
157
  // Component Colors Focus-rings
166
- --Component-Colors-Focus-rings-Brand: var(--Brand-Variant-100);
167
- --Component-Colors-Focus-rings-Error: var(--Error-500);
158
+ --Component-Colors-Focus-Rings-Brand: var(--Brand-Variant-100);
159
+ --Component-Colors-Focus-Rings-Error: var(--Error-500);
168
160
 
169
161
  // 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);
162
+ --Component-Colors-Check-Box-fg-default: var(--Basic-White);
163
+ --Component-Colors-Check-Box-fg-alt: var(--Gray-400);
164
+ --Component-Colors-Check-Box-border: var(--Gray-300);
165
+ --Component-Colors-Check-Box-border-hover: var(--Gray-400);
166
+ --Component-Colors-Check-Box-border-disabled: var(--Gray-200);
167
+ --Component-Colors-Check-Box-bg-default: var(--Brand-500);
168
+ --Component-Colors-Check-Box-bg-hover: var(--Brand-600);
169
+ --Component-Colors-Check-Box-bg-disabled: var(--Gray-100);
178
170
 
179
171
  // Component Colors Switch
180
172
  --Component-Colors-Switch-fg-default: var(--Gray-25);
@@ -185,7 +177,18 @@
185
177
  --Component-Colors-Switch-bg-disabled: var(--Gray-200);
186
178
 
187
179
  // Component Colors Tag
188
- --Component-Colors-Tag-bg-default: var(--Gray-200);
180
+ --Component-Colors-Tag-gray-fg: var(--Gray-900);
181
+ --Component-Colors-Tag-gray-bg: var(--Gray-200);
182
+ --Component-Colors-Tag-green-fg: var(--Success-600);
183
+ --Component-Colors-Tag-green-bg: var(--Success-25);
184
+ --Component-Colors-Tag-brand-fg: var(--Brand-600);
185
+ --Component-Colors-Tag-brand-bg: var(--Brand-100);
186
+ --Component-Colors-Tag-yellow-fg: var(--Warning-600);
187
+ --Component-Colors-Tag-yellow-bg: var(--Warning-100);
188
+ --Component-Colors-Tag-red-fg: var(--Red-Ribbon-600);
189
+ --Component-Colors-Tag-red-bg: var(--Red-Ribbon-100);
190
+ --Component-Colors-Tag-blue-fg: var(--Dodger-Blue-600);
191
+ --Component-Colors-Tag-blue-bg: var(--Dodger-Blue-100);
189
192
 
190
193
  // Component Colors Chips
191
194
  --Component-Colors-Chips-Primary-fg-disabled: var(--Gray-400);
@@ -194,7 +197,7 @@
194
197
  --Component-Colors-Chips-Primary-bg-disabled: var(--Gray-25);
195
198
  --Component-Colors-Chips-Primary-border: var(--Gray-300);
196
199
  --Component-Colors-Chips-Primary-bg-select: var(--Gray-900);
197
- --Component-Colors-Chips-Primary-bg-select-disabled: var(--Gray-300);
200
+ --Component-Colors-Chips-Primary-bg-select-disabled: var(--Gray-200);
198
201
 
199
202
  // Component Colors Popover
200
203
  --Component-Colors-Popover-fg-default: var(--Gray-900);
@@ -216,5 +219,13 @@
216
219
  --Component-Colors-Toast-fg-subtle: var(--Opacity-Black-60);
217
220
  --Component-Colors-Toast-bg-default: var(--Opacity-White-80);
218
221
  --Component-Colors-Toast-Border: var(--Opacity-Black-8);
222
+
223
+ // Component Colors Selector
224
+ --Component-Colors-Selector-fg-default: var(--Gray-900);
225
+ --Component-Colors-Selector-bg-default: var(--Basic-White);
226
+ --Component-Colors-Selector-bg-hover: var(--Gray-100);
227
+ --Component-Colors-Selector-bg-selected: var(--Brand-Variant-50);
228
+ --Component-Colors-Selector-border: var(--Gray-300);
229
+ --Component-Colors-Selector-border-selected: var(--Brand-500);
219
230
  }
220
231
  }
package/dist/styles/design2-dark-v2.scss CHANGED
@@ -99,7 +99,7 @@
99
99
  --Colors-Background-Success-Subtle: var(--Success-900);
100
100
  --Colors-Background-Success-Hover: var(--Success-900);
101
101
  --Colors-Background-Success-Active: var(--Success-800);
102
- --Colors-Background-Success-Bolder: var(--Success-400);
102
+ --Colors-Background-Success-Bolder: var(--Success-700);
103
103
  --Colors-Background-Info-Default: var(--Dodger-Blue-950);
104
104
  --Colors-Background-Info-Alt: var(--Dodger-Blue-500);
105
105
  --Colors-Background-Info-Subtle: var(--Dodger-Blue-900);
@@ -206,20 +206,20 @@
206
206
  --Colors-Marketing-Purple-Heart-1000: var(--Purple-Heart-1000);
207
207
  --Colors-Marketing-Purple-Heart-Variant-50: var(--Purple-Heart-Variant-50);
208
208
  --Colors-Marketing-Purple-Heart-Variant-100: var(--Purple-Heart-Variant-100);
209
- --Colors-Marketing-Magenta--Fuchsia-50: var(--Magenta-Fuchsia-50);
210
- --Colors-Marketing-Magenta--Fuchsia-100: var(--Magenta-Fuchsia-100);
211
- --Colors-Marketing-Magenta--Fuchsia-200: var(--Magenta-Fuchsia-200);
212
- --Colors-Marketing-Magenta--Fuchsia-300: var(--Magenta-Fuchsia-300);
213
- --Colors-Marketing-Magenta--Fuchsia-400: var(--Magenta-Fuchsia-400);
214
- --Colors-Marketing-Magenta--Fuchsia-500: var(--Magenta-Fuchsia-500);
215
- --Colors-Marketing-Magenta--Fuchsia-600: var(--Magenta-Fuchsia-600);
216
- --Colors-Marketing-Magenta--Fuchsia-700: var(--Magenta-Fuchsia-700);
217
- --Colors-Marketing-Magenta--Fuchsia-800: var(--Magenta-Fuchsia-800);
218
- --Colors-Marketing-Magenta--Fuchsia-900: var(--Magenta-Fuchsia-900);
219
- --Colors-Marketing-Magenta--Fuchsia-950: var(--Magenta-Fuchsia-950);
220
- --Colors-Marketing-Magenta--Fuchsia-1000: var(--Magenta-Fuchsia-1000);
221
- --Colors-Marketing-Magenta--Fuchsia-Variant-50: var(--Magenta-Fuchsia-Variant-50);
222
- --Colors-Marketing-Magenta--Fuchsia-Variant-100: var(--Magenta-Fuchsia-Variant-100);
209
+ --Colors-Marketing-Magenta-Fuchsia-50: var(--Magenta-Fuchsia-50);
210
+ --Colors-Marketing-Magenta-Fuchsia-100: var(--Magenta-Fuchsia-100);
211
+ --Colors-Marketing-Magenta-Fuchsia-200: var(--Magenta-Fuchsia-200);
212
+ --Colors-Marketing-Magenta-Fuchsia-300: var(--Magenta-Fuchsia-300);
213
+ --Colors-Marketing-Magenta-Fuchsia-400: var(--Magenta-Fuchsia-400);
214
+ --Colors-Marketing-Magenta-Fuchsia-500: var(--Magenta-Fuchsia-500);
215
+ --Colors-Marketing-Magenta-Fuchsia-600: var(--Magenta-Fuchsia-600);
216
+ --Colors-Marketing-Magenta-Fuchsia-700: var(--Magenta-Fuchsia-700);
217
+ --Colors-Marketing-Magenta-Fuchsia-800: var(--Magenta-Fuchsia-800);
218
+ --Colors-Marketing-Magenta-Fuchsia-900: var(--Magenta-Fuchsia-900);
219
+ --Colors-Marketing-Magenta-Fuchsia-950: var(--Magenta-Fuchsia-950);
220
+ --Colors-Marketing-Magenta-Fuchsia-1000: var(--Magenta-Fuchsia-1000);
221
+ --Colors-Marketing-Magenta-Fuchsia-Variant-50: var(--Magenta-Fuchsia-Variant-50);
222
+ --Colors-Marketing-Magenta-Fuchsia-Variant-100: var(--Magenta-Fuchsia-Variant-100);
223
223
  --Colors-Marketing-Hollywood-Cerise-50: var(--Hollywood-Cerise-50);
224
224
  --Colors-Marketing-Hollywood-Cerise-100: var(--Hollywood-Cerise-100);
225
225
  --Colors-Marketing-Hollywood-Cerise-200: var(--Hollywood-Cerise-200);
@@ -332,112 +332,5 @@
332
332
  --Colors-Marketing-Dodger-Blue-1000: var(--Dodger-Blue-1000);
333
333
  --Colors-Marketing-Dodger-Blue-Variant-50: var(--Dodger-Blue-Variant-50);
334
334
  --Colors-Marketing-Dodger-Blue-Variant-100: var(--Dodger-Blue-Variant-100);
335
-
336
- // Colors Utility (v2 dark: map to Gray / Dodger-Blue / Turquoise-Blue / Purple-Heart / Candlelight / Crusta / etc.)
337
- --Colors-Utility-Gray-5: var(--Gray-800);
338
- --Colors-Utility-Gray-10: var(--Gray-700);
339
- --Colors-Utility-Gray-20: var(--Gray-600);
340
- --Colors-Utility-Gray-30: var(--Gray-500);
341
- --Colors-Utility-Gray-40: var(--Gray-400);
342
- --Colors-Utility-Gray-50: var(--Gray-300);
343
- --Colors-Utility-Gray-60: var(--Gray-200);
344
- --Colors-Utility-Gray-70: var(--Gray-100);
345
- --Colors-Utility-Gray-80: var(--Gray-50);
346
- --Colors-Utility-Olive-5: var(--Malachite-1000);
347
- --Colors-Utility-Olive-10: var(--Malachite-900);
348
- --Colors-Utility-Olive-20: var(--Malachite-800);
349
- --Colors-Utility-Olive-30: var(--Malachite-700);
350
- --Colors-Utility-Olive-40: var(--Malachite-600);
351
- --Colors-Utility-Olive-50: var(--Malachite-500);
352
- --Colors-Utility-Olive-60: var(--Malachite-400);
353
- --Colors-Utility-Olive-70: var(--Malachite-300);
354
- --Colors-Utility-Olive-80: var(--Malachite-200);
355
- --Colors-Utility-Teal-5: var(--Turquoise-Blue-1000);
356
- --Colors-Utility-Teal-10: var(--Turquoise-Blue-900);
357
- --Colors-Utility-Teal-20: var(--Turquoise-Blue-800);
358
- --Colors-Utility-Teal-30: var(--Turquoise-Blue-700);
359
- --Colors-Utility-Teal-40: var(--Turquoise-Blue-600);
360
- --Colors-Utility-Teal-50: var(--Turquoise-Blue-500);
361
- --Colors-Utility-Teal-60: var(--Turquoise-Blue-400);
362
- --Colors-Utility-Teal-70: var(--Turquoise-Blue-300);
363
- --Colors-Utility-Teal-80: var(--Turquoise-Blue-200);
364
- --Colors-Utility-Lake-Blue-5: var(--Dodger-Blue-1000);
365
- --Colors-Utility-Lake-Blue-10: var(--Dodger-Blue-900);
366
- --Colors-Utility-Lake-Blue-20: var(--Dodger-Blue-800);
367
- --Colors-Utility-Lake-Blue-30: var(--Dodger-Blue-700);
368
- --Colors-Utility-Lake-Blue-40: var(--Dodger-Blue-600);
369
- --Colors-Utility-Lake-Blue-50: var(--Dodger-Blue-500);
370
- --Colors-Utility-Lake-Blue-60: var(--Dodger-Blue-400);
371
- --Colors-Utility-Lake-Blue-70: var(--Dodger-Blue-300);
372
- --Colors-Utility-Lake-Blue-80: var(--Dodger-Blue-200);
373
- --Colors-Utility-Cobalt-5: var(--Dodger-Blue-1000);
374
- --Colors-Utility-Cobalt-10: var(--Dodger-Blue-900);
375
- --Colors-Utility-Cobalt-20: var(--Dodger-Blue-800);
376
- --Colors-Utility-Cobalt-30: var(--Dodger-Blue-700);
377
- --Colors-Utility-Cobalt-40: var(--Dodger-Blue-600);
378
- --Colors-Utility-Cobalt-50: var(--Dodger-Blue-500);
379
- --Colors-Utility-Cobalt-60: var(--Dodger-Blue-400);
380
- --Colors-Utility-Cobalt-70: var(--Dodger-Blue-300);
381
- --Colors-Utility-Cobalt-80: var(--Dodger-Blue-200);
382
- --Colors-Utility-Berry-Pink-5: var(--Magenta-Fuchsia-1000);
383
- --Colors-Utility-Berry-Pink-10: var(--Magenta-Fuchsia-900);
384
- --Colors-Utility-Berry-Pink-20: var(--Magenta-Fuchsia-800);
385
- --Colors-Utility-Berry-Pink-30: var(--Magenta-Fuchsia-700);
386
- --Colors-Utility-Berry-Pink-40: var(--Magenta-Fuchsia-500);
387
- --Colors-Utility-Berry-Pink-50: var(--Magenta-Fuchsia-400);
388
- --Colors-Utility-Berry-Pink-60: var(--Magenta-Fuchsia-300);
389
- --Colors-Utility-Berry-Pink-70: var(--Magenta-Fuchsia-200);
390
- --Colors-Utility-Berry-Pink-80: var(--Magenta-Fuchsia-100);
391
- --Colors-Utility-Terracotta-5: var(--Crusta-1000);
392
- --Colors-Utility-Terracotta-10: var(--Crusta-900);
393
- --Colors-Utility-Terracotta-20: var(--Crusta-800);
394
- --Colors-Utility-Terracotta-30: var(--Crusta-700);
395
- --Colors-Utility-Terracotta-40: var(--Crusta-500);
396
- --Colors-Utility-Terracotta-50: var(--Crusta-400);
397
- --Colors-Utility-Terracotta-60: var(--Crusta-300);
398
- --Colors-Utility-Terracotta-70: var(--Crusta-200);
399
- --Colors-Utility-Terracotta-80: var(--Crusta-100);
400
- --Colors-Utility-Terracotta-Variant-10: var(--Crusta-800);
401
- --Colors-Utility-Terracotta-Variant-20: var(--Crusta-600);
402
- --Colors-Utility-Terracotta-Variant-30: var(--Crusta-400);
403
- --Colors-Utility-Terracotta-Variant-40: var(--Crusta-300);
404
- --Colors-Utility-Ember-5: var(--Candlelight-1000);
405
- --Colors-Utility-Ember-10: var(--Candlelight-900);
406
- --Colors-Utility-Ember-20: var(--Candlelight-800);
407
- --Colors-Utility-Ember-30: var(--Candlelight-700);
408
- --Colors-Utility-Ember-40: var(--Candlelight-500);
409
- --Colors-Utility-Ember-50: var(--Candlelight-400);
410
- --Colors-Utility-Ember-60: var(--Candlelight-300);
411
- --Colors-Utility-Ember-70: var(--Candlelight-200);
412
- --Colors-Utility-Ember-80: var(--Candlelight-100);
413
- --Colors-Utility-Khaki-5: var(--Candlelight-1000);
414
- --Colors-Utility-Khaki-10: var(--Candlelight-900);
415
- --Colors-Utility-Khaki-20: var(--Candlelight-800);
416
- --Colors-Utility-Khaki-30: var(--Candlelight-700);
417
- --Colors-Utility-Khaki-40: var(--Candlelight-500);
418
- --Colors-Utility-Khaki-50: var(--Candlelight-400);
419
- --Colors-Utility-Khaki-60: var(--Candlelight-300);
420
- --Colors-Utility-Khaki-70: var(--Candlelight-200);
421
- --Colors-Utility-Khaki-80: var(--Candlelight-100);
422
- --Colors-Utility-Purple-5: var(--Brand-950);
423
- --Colors-Utility-Purple-10: var(--Brand-900);
424
- --Colors-Utility-Purple-20: var(--Brand-800);
425
- --Colors-Utility-Purple-30: var(--Brand-700);
426
- --Colors-Utility-Purple-40: var(--Brand-500);
427
- --Colors-Utility-Purple-50: var(--Brand-400);
428
- --Colors-Utility-Purple-60: var(--Brand-300);
429
- --Colors-Utility-Purple-70: var(--Brand-200);
430
- --Colors-Utility-Purple-80: var(--Brand-100);
431
- --Colors-Utility-Plum-Purple-5: var(--Purple-Heart-1000);
432
- --Colors-Utility-Plum-Purple-10: var(--Purple-Heart-900);
433
- --Colors-Utility-Plum-Purple-20: var(--Purple-Heart-800);
434
- --Colors-Utility-Plum-Purple-30: var(--Purple-Heart-700);
435
- --Colors-Utility-Plum-Purple-40: var(--Purple-Heart-500);
436
- --Colors-Utility-Plum-Purple-50: var(--Purple-Heart-400);
437
- --Colors-Utility-Plum-Purple-60: var(--Purple-Heart-300);
438
- --Colors-Utility-Plum-Purple-70: var(--Purple-Heart-200);
439
- --Colors-Utility-Plum-Purple-80: var(--Purple-Heart-100);
440
- --Colors-FaceTime-White: var(--Opacity-Black-20);
441
- --Colors-FaceTime-Black: var(--Opacity-White-20);
442
335
  }
443
336
  }
package/dist/styles/design2-light-v2.scss CHANGED
@@ -206,20 +206,20 @@
206
206
  --Colors-Marketing-Purple-Heart-1000: var(--Purple-Heart-1000);
207
207
  --Colors-Marketing-Purple-Heart-Variant-50: var(--Purple-Heart-Variant-50);
208
208
  --Colors-Marketing-Purple-Heart-Variant-100: var(--Purple-Heart-Variant-100);
209
- --Colors-Marketing-Magenta--Fuchsia-50: var(--Magenta-Fuchsia-50);
210
- --Colors-Marketing-Magenta--Fuchsia-100: var(--Magenta-Fuchsia-100);
211
- --Colors-Marketing-Magenta--Fuchsia-200: var(--Magenta-Fuchsia-200);
212
- --Colors-Marketing-Magenta--Fuchsia-300: var(--Magenta-Fuchsia-300);
213
- --Colors-Marketing-Magenta--Fuchsia-400: var(--Magenta-Fuchsia-400);
214
- --Colors-Marketing-Magenta--Fuchsia-500: var(--Magenta-Fuchsia-500);
215
- --Colors-Marketing-Magenta--Fuchsia-600: var(--Magenta-Fuchsia-600);
216
- --Colors-Marketing-Magenta--Fuchsia-700: var(--Magenta-Fuchsia-700);
217
- --Colors-Marketing-Magenta--Fuchsia-800: var(--Magenta-Fuchsia-800);
218
- --Colors-Marketing-Magenta--Fuchsia-900: var(--Magenta-Fuchsia-900);
219
- --Colors-Marketing-Magenta--Fuchsia-950: var(--Magenta-Fuchsia-950);
220
- --Colors-Marketing-Magenta--Fuchsia-1000: var(--Magenta-Fuchsia-1000);
221
- --Colors-Marketing-Magenta--Fuchsia-Variant-50: var(--Magenta-Fuchsia-Variant-50);
222
- --Colors-Marketing-Magenta--Fuchsia-Variant-100: var(--Magenta-Fuchsia-Variant-100);
209
+ --Colors-Marketing-Magenta-Fuchsia-50: var(--Magenta-Fuchsia-50);
210
+ --Colors-Marketing-Magenta-Fuchsia-100: var(--Magenta-Fuchsia-100);
211
+ --Colors-Marketing-Magenta-Fuchsia-200: var(--Magenta-Fuchsia-200);
212
+ --Colors-Marketing-Magenta-Fuchsia-300: var(--Magenta-Fuchsia-300);
213
+ --Colors-Marketing-Magenta-Fuchsia-400: var(--Magenta-Fuchsia-400);
214
+ --Colors-Marketing-Magenta-Fuchsia-500: var(--Magenta-Fuchsia-500);
215
+ --Colors-Marketing-Magenta-Fuchsia-600: var(--Magenta-Fuchsia-600);
216
+ --Colors-Marketing-Magenta-Fuchsia-700: var(--Magenta-Fuchsia-700);
217
+ --Colors-Marketing-Magenta-Fuchsia-800: var(--Magenta-Fuchsia-800);
218
+ --Colors-Marketing-Magenta-Fuchsia-900: var(--Magenta-Fuchsia-900);
219
+ --Colors-Marketing-Magenta-Fuchsia-950: var(--Magenta-Fuchsia-950);
220
+ --Colors-Marketing-Magenta-Fuchsia-1000: var(--Magenta-Fuchsia-1000);
221
+ --Colors-Marketing-Magenta-Fuchsia-Variant-50: var(--Magenta-Fuchsia-Variant-50);
222
+ --Colors-Marketing-Magenta-Fuchsia-Variant-100: var(--Magenta-Fuchsia-Variant-100);
223
223
  --Colors-Marketing-Hollywood-Cerise-50: var(--Hollywood-Cerise-50);
224
224
  --Colors-Marketing-Hollywood-Cerise-100: var(--Hollywood-Cerise-100);
225
225
  --Colors-Marketing-Hollywood-Cerise-200: var(--Hollywood-Cerise-200);
@@ -332,112 +332,5 @@
332
332
  --Colors-Marketing-Dodger-Blue-1000: var(--Dodger-Blue-1000);
333
333
  --Colors-Marketing-Dodger-Blue-Variant-50: var(--Dodger-Blue-Variant-50);
334
334
  --Colors-Marketing-Dodger-Blue-Variant-100: var(--Dodger-Blue-Variant-100);
335
-
336
- // Colors Utility (v2: map to Gray / Dodger-Blue / Turquoise-Blue / Purple-Heart / Candlelight / Crusta / etc.)
337
- --Colors-Utility-Gray-5: var(--Gray-25);
338
- --Colors-Utility-Gray-10: var(--Gray-50);
339
- --Colors-Utility-Gray-20: var(--Gray-100);
340
- --Colors-Utility-Gray-30: var(--Gray-200);
341
- --Colors-Utility-Gray-40: var(--Gray-300);
342
- --Colors-Utility-Gray-50: var(--Gray-400);
343
- --Colors-Utility-Gray-60: var(--Gray-500);
344
- --Colors-Utility-Gray-70: var(--Gray-600);
345
- --Colors-Utility-Gray-80: var(--Gray-700);
346
- --Colors-Utility-Olive-5: var(--Malachite-25);
347
- --Colors-Utility-Olive-10: var(--Malachite-50);
348
- --Colors-Utility-Olive-20: var(--Malachite-100);
349
- --Colors-Utility-Olive-30: var(--Malachite-200);
350
- --Colors-Utility-Olive-40: var(--Malachite-300);
351
- --Colors-Utility-Olive-50: var(--Malachite-400);
352
- --Colors-Utility-Olive-60: var(--Malachite-500);
353
- --Colors-Utility-Olive-70: var(--Malachite-600);
354
- --Colors-Utility-Olive-80: var(--Malachite-700);
355
- --Colors-Utility-Teal-5: var(--Turquoise-Blue-25);
356
- --Colors-Utility-Teal-10: var(--Turquoise-Blue-50);
357
- --Colors-Utility-Teal-20: var(--Turquoise-Blue-100);
358
- --Colors-Utility-Teal-30: var(--Turquoise-Blue-200);
359
- --Colors-Utility-Teal-40: var(--Turquoise-Blue-300);
360
- --Colors-Utility-Teal-50: var(--Turquoise-Blue-500);
361
- --Colors-Utility-Teal-60: var(--Turquoise-Blue-600);
362
- --Colors-Utility-Teal-70: var(--Turquoise-Blue-700);
363
- --Colors-Utility-Teal-80: var(--Turquoise-Blue-800);
364
- --Colors-Utility-Lake-Blue-5: var(--Dodger-Blue-25);
365
- --Colors-Utility-Lake-Blue-10: var(--Dodger-Blue-50);
366
- --Colors-Utility-Lake-Blue-20: var(--Dodger-Blue-100);
367
- --Colors-Utility-Lake-Blue-30: var(--Dodger-Blue-200);
368
- --Colors-Utility-Lake-Blue-40: var(--Dodger-Blue-400);
369
- --Colors-Utility-Lake-Blue-50: var(--Dodger-Blue-500);
370
- --Colors-Utility-Lake-Blue-60: var(--Dodger-Blue-600);
371
- --Colors-Utility-Lake-Blue-70: var(--Dodger-Blue-700);
372
- --Colors-Utility-Lake-Blue-80: var(--Dodger-Blue-800);
373
- --Colors-Utility-Cobalt-5: var(--Dodger-Blue-1000);
374
- --Colors-Utility-Cobalt-10: var(--Dodger-Blue-900);
375
- --Colors-Utility-Cobalt-20: var(--Dodger-Blue-800);
376
- --Colors-Utility-Cobalt-30: var(--Dodger-Blue-700);
377
- --Colors-Utility-Cobalt-40: var(--Dodger-Blue-600);
378
- --Colors-Utility-Cobalt-50: var(--Dodger-Blue-500);
379
- --Colors-Utility-Cobalt-60: var(--Dodger-Blue-400);
380
- --Colors-Utility-Cobalt-70: var(--Dodger-Blue-300);
381
- --Colors-Utility-Cobalt-80: var(--Dodger-Blue-200);
382
- --Colors-Utility-Berry-Pink-5: var(--Magenta-Fuchsia-25);
383
- --Colors-Utility-Berry-Pink-10: var(--Magenta-Fuchsia-50);
384
- --Colors-Utility-Berry-Pink-20: var(--Magenta-Fuchsia-100);
385
- --Colors-Utility-Berry-Pink-30: var(--Magenta-Fuchsia-200);
386
- --Colors-Utility-Berry-Pink-40: var(--Magenta-Fuchsia-400);
387
- --Colors-Utility-Berry-Pink-50: var(--Magenta-Fuchsia-500);
388
- --Colors-Utility-Berry-Pink-60: var(--Magenta-Fuchsia-600);
389
- --Colors-Utility-Berry-Pink-70: var(--Magenta-Fuchsia-700);
390
- --Colors-Utility-Berry-Pink-80: var(--Magenta-Fuchsia-800);
391
- --Colors-Utility-Terracotta-5: var(--Crusta-25);
392
- --Colors-Utility-Terracotta-10: var(--Crusta-50);
393
- --Colors-Utility-Terracotta-20: var(--Crusta-100);
394
- --Colors-Utility-Terracotta-30: var(--Crusta-200);
395
- --Colors-Utility-Terracotta-40: var(--Crusta-400);
396
- --Colors-Utility-Terracotta-50: var(--Crusta-500);
397
- --Colors-Utility-Terracotta-60: var(--Crusta-600);
398
- --Colors-Utility-Terracotta-70: var(--Crusta-700);
399
- --Colors-Utility-Terracotta-80: var(--Crusta-800);
400
- --Colors-Utility-Terracotta-Variant-10: var(--Crusta-Variant-50);
401
- --Colors-Utility-Terracotta-Variant-20: var(--Crusta-200);
402
- --Colors-Utility-Terracotta-Variant-30: var(--Crusta-400);
403
- --Colors-Utility-Terracotta-Variant-40: var(--Crusta-600);
404
- --Colors-Utility-Ember-5: var(--Candlelight-25);
405
- --Colors-Utility-Ember-10: var(--Candlelight-50);
406
- --Colors-Utility-Ember-20: var(--Candlelight-100);
407
- --Colors-Utility-Ember-30: var(--Candlelight-200);
408
- --Colors-Utility-Ember-40: var(--Candlelight-400);
409
- --Colors-Utility-Ember-50: var(--Candlelight-500);
410
- --Colors-Utility-Ember-60: var(--Candlelight-600);
411
- --Colors-Utility-Ember-70: var(--Candlelight-700);
412
- --Colors-Utility-Ember-80: var(--Candlelight-800);
413
- --Colors-Utility-Khaki-5: var(--Candlelight-25);
414
- --Colors-Utility-Khaki-10: var(--Candlelight-50);
415
- --Colors-Utility-Khaki-20: var(--Candlelight-100);
416
- --Colors-Utility-Khaki-30: var(--Candlelight-200);
417
- --Colors-Utility-Khaki-40: var(--Candlelight-400);
418
- --Colors-Utility-Khaki-50: var(--Candlelight-500);
419
- --Colors-Utility-Khaki-60: var(--Candlelight-600);
420
- --Colors-Utility-Khaki-70: var(--Candlelight-700);
421
- --Colors-Utility-Khaki-80: var(--Candlelight-800);
422
- --Colors-Utility-Purple-5: var(--Brand-25);
423
- --Colors-Utility-Purple-10: var(--Brand-50);
424
- --Colors-Utility-Purple-20: var(--Brand-100);
425
- --Colors-Utility-Purple-30: var(--Brand-200);
426
- --Colors-Utility-Purple-40: var(--Brand-400);
427
- --Colors-Utility-Purple-50: var(--Brand-500);
428
- --Colors-Utility-Purple-60: var(--Brand-600);
429
- --Colors-Utility-Purple-70: var(--Brand-700);
430
- --Colors-Utility-Purple-80: var(--Brand-800);
431
- --Colors-Utility-Plum-Purple-5: var(--Purple-Heart-25);
432
- --Colors-Utility-Plum-Purple-10: var(--Purple-Heart-50);
433
- --Colors-Utility-Plum-Purple-20: var(--Purple-Heart-100);
434
- --Colors-Utility-Plum-Purple-30: var(--Purple-Heart-200);
435
- --Colors-Utility-Plum-Purple-40: var(--Purple-Heart-400);
436
- --Colors-Utility-Plum-Purple-50: var(--Purple-Heart-500);
437
- --Colors-Utility-Plum-Purple-60: var(--Purple-Heart-600);
438
- --Colors-Utility-Plum-Purple-70: var(--Purple-Heart-700);
439
- --Colors-Utility-Plum-Purple-80: var(--Purple-Heart-800);
440
- --Colors-FaceTime-White: var(--Opacity-White-20);
441
- --Colors-FaceTime-Black: var(--Opacity-Black-20);
442
335
  }
443
336
  }
package/dist/styles/global.scss CHANGED
@@ -161,7 +161,7 @@ button {
161
161
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 20px);
162
162
  }
163
163
  .driver-popover {
164
- background-color: var(--Colors-Utility-Lake-Blue-50) !important;
164
+ background-color: var(--Colors-Background-Info-Alt) !important;
165
165
  color: var(--Colors-Text-Static-White) !important;
166
166
  }
167
167
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "myshell-react-lib",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "type": "module",
5
5
  "description": "React component library with Tailwind CSS integration",
6
6
  "main": "./dist/index.cjs",