@luscii-healthtech/web-ui 58.1.2 → 58.2.0

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 (12) hide show
  1. package/dist/index.development.js +6 -0
  2. package/dist/index.development.js.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/src/components/Text/Text.d.ts +1 -1
  6. package/dist/src/generated/components/Text/Text.d.ts +1 -1
  7. package/dist/src/generated/tokens/generated/tokens.d.ts +312 -114
  8. package/dist/src/tokens/generated/tokens.d.ts +312 -114
  9. package/dist/web-ui-tailwind.css +236 -176
  10. package/dist/web-ui.esm.js +1 -1
  11. package/dist/web-ui.esm.js.map +1 -1
  12. package/package.json +1 -1
package/dist/web-ui-tailwind.css CHANGED
@@ -21,17 +21,16 @@
21
21
  --ui-primitive-color-green-500: #388e3c;
22
22
  --ui-primitive-color-green-700: #1b5e20;
23
23
  --ui-primitive-color-green-900: #0d3b1e;
24
- --ui-primitive-color-grey-100: #ffffff;
25
- --ui-primitive-color-grey-300: #f5f7fa;
26
- --ui-primitive-color-grey-500: #cbd5e1;
27
- --ui-primitive-color-grey-700: #7387a4;
28
- --ui-primitive-color-grey-800: #3a4657;
24
+ --ui-primitive-color-grey-100: #f5f7fa;
25
+ --ui-primitive-color-grey-300: #cbd5e1;
26
+ --ui-primitive-color-grey-500: #99a1af;
27
+ --ui-primitive-color-grey-700: #6a7282;
29
28
  --ui-primitive-color-grey-900: #162130;
30
29
  --ui-primitive-color-orange-100: #fff1da;
31
30
  --ui-primitive-color-orange-300: #ffcf8e;
32
- --ui-primitive-color-orange-500: #ffb300;
33
- --ui-primitive-color-orange-700: #f0761e;
34
- --ui-primitive-color-orange-900: #8a3d00;
31
+ --ui-primitive-color-orange-500: #ffbe66;
32
+ --ui-primitive-color-orange-700: #ffa52b;
33
+ --ui-primitive-color-orange-900: #ff9300;
35
34
  --ui-primitive-color-pink-100: #ffe5ec;
36
35
  --ui-primitive-color-pink-300: #ffc3d1;
37
36
  --ui-primitive-color-pink-500: #fb7092;
@@ -47,12 +46,12 @@
47
46
  --ui-primitive-color-red-500: #ff6266;
48
47
  --ui-primitive-color-red-700: #b91c1c;
49
48
  --ui-primitive-color-red-900: #8d1515;
50
- --ui-primitive-color-yellow-100: #fffbd9;
51
- --ui-primitive-color-yellow-300: #fff0a6;
52
- --ui-primitive-color-yellow-500: #fff080;
53
- --ui-primitive-color-yellow-700: #ffe100;
54
- --ui-primitive-color-yellow-900: #ad8f00;
55
- --ui-primitive-gradient-primary: linear-gradient(-90deg, #1d4ed8 0%, #1e40af 100%);
49
+ --ui-primitive-color-white-100: #ffffff;
50
+ --ui-primitive-color-yellow-100: #fffae5;
51
+ --ui-primitive-color-yellow-300: #fff2b2;
52
+ --ui-primitive-color-yellow-500: #ffe97f;
53
+ --ui-primitive-color-yellow-700: #ffe14c;
54
+ --ui-primitive-color-yellow-900: #ffd400;
56
55
  --ui-primitive-dimension-0: 0;
57
56
  --ui-primitive-dimension-0-25: 1px;
58
57
  --ui-primitive-dimension-0-5: 2px;
@@ -82,28 +81,15 @@
82
81
  --ui-primitive-dimension-8: 32px;
83
82
  --ui-primitive-dimension-9: 36px;
84
83
  --ui-primitive-dimension-999: 999px;
85
- --ui-primitive-fontFamilies-avenir-next: Avenir Next;
86
- --ui-primitive-fontFamilies-inter: Inter;
87
- --ui-primitive-fontSize-0: 12px;
88
- --ui-primitive-fontSize-1: 16px;
89
- --ui-primitive-fontSize-2: 20px;
90
- --ui-primitive-fontSize-3: 24px;
91
- --ui-primitive-fontSize-4: 32px;
92
- --ui-primitive-fontWeights-avenir-next-0: 700;
93
- --ui-primitive-fontWeights-avenir-next-1: 600;
94
- --ui-primitive-fontWeights-inter-2: 300;
95
- --ui-primitive-fontWeights-inter-3: 400;
96
- --ui-primitive-fontWeights-inter-4: 700;
97
- --ui-primitive-letterSpacing-0: 0%;
98
- --ui-primitive-paragraphIndent-0: 0px;
99
- --ui-primitive-paragraphSpacing-0: 0;
100
- --ui-primitive-textCase-none: none;
101
- --ui-primitive-textDecoration-none: none;
102
- --ui-primitive-shadow-active-focus-ring: 0 1px 2px 0 #0000000d, 0 0 1px 4px #d7e3fb;
103
- --ui-primitive-shadow-error-focus-ring: 0 1px 2px 0 #0000000d, 0 0 1px 4px #fee2e2;
104
- --ui-primitive-shadow-large: 0 2px 8px 0 #e4eaf41f, 0 16px 24px 0 #c6d3e652;
105
- --ui-primitive-shadow-medium: 0 2px 4px 0 #e4eaf414, 0 8px 16px 0 #c6d3e63d;
106
- --ui-primitive-shadow-small: 0 0 1px 0 #e4eaf414, 0 2px 4px 0 #c6d3e63d;
84
+ --ui-color-background-accents-pink-default: var(--ui-primitive-color-pink-100);
85
+ --ui-color-background-accents-pink-disabled: var(--ui-primitive-color-grey-100);
86
+ --ui-color-background-accents-pink-hovered: var(--ui-primitive-color-pink-300);
87
+ --ui-color-background-accents-purple-default: var(--ui-primitive-color-purple-100);
88
+ --ui-color-background-accents-purple-disabled: var(--ui-primitive-color-grey-100);
89
+ --ui-color-background-accents-purple-hovered: var(--ui-primitive-color-purple-300);
90
+ --ui-color-background-accents-yellow-default: var(--ui-primitive-color-yellow-100);
91
+ --ui-color-background-accents-yellow-disabled: var(--ui-primitive-color-grey-300);
92
+ --ui-color-background-accents-yellow-hovered: var(--ui-primitive-color-yellow-300);
107
93
  --ui-color-background-alerts-high-crimson: var(--ui-primitive-color-red-500);
108
94
  --ui-color-background-alerts-high-red: var(--ui-primitive-color-red-700);
109
95
  --ui-color-background-alerts-high-salmon: var(--ui-primitive-color-red-300);
@@ -114,7 +100,7 @@
114
100
  --ui-color-background-alerts-medium-oak: var(--ui-primitive-color-brown-500);
115
101
  --ui-color-background-alerts-medium-sun: var(--ui-primitive-color-orange-700);
116
102
  --ui-color-background-alerts-neutral-fog: var(--ui-primitive-color-grey-500);
117
- --ui-color-background-alerts-neutral-graphite: var(--ui-primitive-color-grey-800);
103
+ --ui-color-background-alerts-neutral-graphite: var(--ui-primitive-color-grey-900);
118
104
  --ui-color-background-alerts-neutral-neutral: var(--ui-primitive-color-grey-700);
119
105
  --ui-color-background-brand-primary-default: var(--ui-primitive-color-brand-700);
120
106
  --ui-color-background-brand-primary-disabled: var(--ui-primitive-color-grey-300);
@@ -136,12 +122,15 @@
136
122
  --ui-color-background-info-secondary-default: var(--ui-primitive-color-blue-100);
137
123
  --ui-color-background-info-secondary-disabled: var(--ui-primitive-color-grey-100);
138
124
  --ui-color-background-info-secondary-hovered: var(--ui-primitive-color-blue-300);
139
- --ui-color-background-neutral-primary-default: var(--ui-primitive-color-grey-300);
140
- --ui-color-background-neutral-primary-hovered: var(--ui-primitive-color-brand-300);
141
- --ui-color-background-neutral-primary-selected: var(--ui-primitive-color-grey-300);
142
- --ui-color-background-neutral-secondary-default: var(--ui-primitive-color-grey-100);
125
+ --ui-color-background-neutral-primary-default: var(--ui-primitive-color-grey-100);
126
+ --ui-color-background-neutral-primary-hovered: var(--ui-primitive-color-grey-300);
127
+ --ui-color-background-neutral-primary-selected: var(--ui-primitive-color-brand-300);
128
+ --ui-color-background-neutral-secondary-default: var(--ui-primitive-color-white-100);
143
129
  --ui-color-background-neutral-secondary-hovered: var(--ui-primitive-color-brand-300);
144
- --ui-color-background-neutral-secondary-selected: var(--ui-primitive-color-grey-300);
130
+ --ui-color-background-neutral-secondary-selected: var(--ui-primitive-color-brand-300);
131
+ --ui-color-background-neutral-tertiary-default: var(--ui-primitive-color-grey-300);
132
+ --ui-color-background-neutral-tertiary-hovered: var(--ui-primitive-color-grey-100);
133
+ --ui-color-background-neutral-tertiary-selected: var(--ui-primitive-color-brand-300);
145
134
  --ui-color-background-success-primary-default: var(--ui-primitive-color-green-100);
146
135
  --ui-color-background-success-primary-disabled: var(--ui-primitive-color-grey-300);
147
136
  --ui-color-background-success-primary-hovered: var(--ui-primitive-color-green-500);
@@ -154,13 +143,19 @@
154
143
  --ui-color-background-warning-secondary-default: var(--ui-primitive-color-orange-100);
155
144
  --ui-color-background-warning-secondary-disabled: var(--ui-primitive-color-grey-100);
156
145
  --ui-color-background-warning-secondary-hovered: var(--ui-primitive-color-orange-300);
146
+ --ui-color-border-accents-pink-default: var(--ui-primitive-color-pink-700);
147
+ --ui-color-border-accents-pink-disabled: var(--ui-primitive-color-grey-500);
148
+ --ui-color-border-accents-purple-default: var(--ui-primitive-color-purple-900);
149
+ --ui-color-border-accents-purple-disabled: var(--ui-primitive-color-grey-500);
150
+ --ui-color-border-accents-yellow-default: var(--ui-primitive-color-yellow-300);
151
+ --ui-color-border-accents-yellow-disabled: var(--ui-primitive-color-grey-500);
157
152
  --ui-color-border-brand-primary-default: var(--ui-primitive-color-brand-700);
158
- --ui-color-border-brand-primary-disabled: var(--ui-primitive-color-grey-500);
153
+ --ui-color-border-brand-primary-disabled: var(--ui-primitive-color-grey-300);
159
154
  --ui-color-border-brand-primary-hovered: var(--ui-primitive-color-brand-500);
160
155
  --ui-color-border-brand-primary-pressed: var(--ui-primitive-color-brand-900);
161
156
  --ui-color-border-brand-primary-selected: var(--ui-primitive-color-brand-700);
162
157
  --ui-color-border-brand-secondary-default: var(--ui-primitive-color-brand-500);
163
- --ui-color-border-brand-secondary-disabled: var(--ui-primitive-color-grey-500);
158
+ --ui-color-border-brand-secondary-disabled: var(--ui-primitive-color-grey-300);
164
159
  --ui-color-border-brand-secondary-hovered: var(--ui-primitive-color-brand-700);
165
160
  --ui-color-border-brand-secondary-pressed: var(--ui-primitive-color-brand-900);
166
161
  --ui-color-border-brand-secondary-selected: var(--ui-primitive-color-brand-500);
@@ -172,8 +167,10 @@
172
167
  --ui-color-border-info-primary-disabled: var(--ui-primitive-color-grey-500);
173
168
  --ui-color-border-info-secondary-default: var(--ui-primitive-color-brand-500);
174
169
  --ui-color-border-info-secondary-disabled: var(--ui-primitive-color-grey-500);
175
- --ui-color-border-neutral-primary-default: var(--ui-primitive-color-grey-700);
176
- --ui-color-border-neutral-primary-disabled: var(--ui-primitive-color-grey-500);
170
+ --ui-color-border-inverse-primary-default: var(--ui-primitive-color-white-100);
171
+ --ui-color-border-inverse-primary-disabled: var(--ui-primitive-color-grey-500);
172
+ --ui-color-border-neutral-primary-default: var(--ui-primitive-color-grey-300);
173
+ --ui-color-border-neutral-primary-disabled: var(--ui-primitive-color-grey-300);
177
174
  --ui-color-border-neutral-primary-hovered: var(--ui-primitive-color-brand-500);
178
175
  --ui-color-border-neutral-primary-pressed: var(--ui-primitive-color-brand-700);
179
176
  --ui-color-border-neutral-primary-selected: var(--ui-primitive-color-brand-700);
@@ -186,78 +183,86 @@
186
183
  --ui-color-border-success-primary-disabled: var(--ui-primitive-color-grey-500);
187
184
  --ui-color-border-success-secondary-default: var(--ui-primitive-color-green-500);
188
185
  --ui-color-border-success-secondary-disabled: var(--ui-primitive-color-grey-500);
189
- --ui-color-border-warning-primary-default: var(--ui-primitive-color-orange-900);
186
+ --ui-color-border-warning-primary-default: var(--ui-primitive-color-brown-700);
190
187
  --ui-color-border-warning-primary-disabled: var(--ui-primitive-color-grey-500);
191
- --ui-color-border-warning-secondary-default: var(--ui-primitive-color-orange-700);
188
+ --ui-color-border-warning-secondary-default: var(--ui-primitive-color-brown-900);
192
189
  --ui-color-border-warning-secondary-disabled: var(--ui-primitive-color-grey-500);
190
+ --ui-color-icon-accents-pink-default: var(--ui-primitive-color-pink-700);
191
+ --ui-color-icon-accents-pink-disabled: var(--ui-primitive-color-grey-700);
192
+ --ui-color-icon-accents-purple-default: var(--ui-primitive-color-purple-900);
193
+ --ui-color-icon-accents-purple-disabled: var(--ui-primitive-color-grey-700);
193
194
  --ui-color-icon-alerts-high-crimson: var(--ui-primitive-color-red-500);
194
- --ui-color-icon-alerts-high-red: var(--ui-primitive-color-red-700);
195
- --ui-color-icon-alerts-high-salmon: var(--ui-primitive-color-red-300);
196
- --ui-color-icon-alerts-low-green: var(--ui-primitive-color-green-700);
195
+ --ui-color-icon-alerts-high-red: var(--ui-primitive-color-red-300);
196
+ --ui-color-icon-alerts-high-salmon: var(--ui-primitive-color-red-700);
197
+ --ui-color-icon-alerts-low-green: var(--ui-primitive-color-green-300);
197
198
  --ui-color-icon-alerts-low-leaf: var(--ui-primitive-color-green-500);
198
- --ui-color-icon-alerts-low-mint: var(--ui-primitive-color-green-300);
199
+ --ui-color-icon-alerts-low-mint: var(--ui-primitive-color-green-700);
199
200
  --ui-color-icon-alerts-medium-amber: var(--ui-primitive-color-orange-500);
200
201
  --ui-color-icon-alerts-medium-oak: var(--ui-primitive-color-brown-500);
201
- --ui-color-icon-alerts-medium-sun: var(--ui-primitive-color-orange-700);
202
- --ui-color-icon-alerts-neutral-fog: var(--ui-primitive-color-grey-500);
203
- --ui-color-icon-alerts-neutral-graphite: var(--ui-primitive-color-grey-800);
204
- --ui-color-icon-alerts-neutral-neutral: var(--ui-primitive-color-grey-700);
202
+ --ui-color-icon-alerts-medium-sun: var(--ui-primitive-color-yellow-700);
203
+ --ui-color-icon-alerts-neutral-fog: var(--ui-primitive-color-grey-700);
204
+ --ui-color-icon-alerts-neutral-graphite: var(--ui-primitive-color-grey-300);
205
+ --ui-color-icon-alerts-neutral-neutral: var(--ui-primitive-color-grey-500);
205
206
  --ui-color-icon-brand-primary-default: var(--ui-primitive-color-brand-700);
206
- --ui-color-icon-brand-primary-disabled: var(--ui-primitive-color-grey-500);
207
+ --ui-color-icon-brand-primary-disabled: var(--ui-primitive-color-grey-300);
207
208
  --ui-color-icon-brand-primary-hover: var(--ui-primitive-color-brand-500);
208
209
  --ui-color-icon-brand-secondary-default: var(--ui-primitive-color-brand-700);
209
- --ui-color-icon-brand-secondary-disabled: var(--ui-primitive-color-grey-500);
210
+ --ui-color-icon-brand-secondary-disabled: var(--ui-primitive-color-grey-300);
210
211
  --ui-color-icon-brand-secondary-hover: var(--ui-primitive-color-brand-900);
211
212
  --ui-color-icon-error-primary-default: var(--ui-primitive-color-red-900);
212
- --ui-color-icon-error-primary-disabled: var(--ui-primitive-color-grey-500);
213
+ --ui-color-icon-error-primary-disabled: var(--ui-primitive-color-grey-300);
213
214
  --ui-color-icon-error-secondary-default: var(--ui-primitive-color-red-700);
214
- --ui-color-icon-error-secondary-disabled: var(--ui-primitive-color-grey-500);
215
+ --ui-color-icon-error-secondary-disabled: var(--ui-primitive-color-grey-300);
215
216
  --ui-color-icon-info-primary-default: var(--ui-primitive-color-brand-700);
216
- --ui-color-icon-info-primary-disabled: var(--ui-primitive-color-grey-500);
217
+ --ui-color-icon-info-primary-disabled: var(--ui-primitive-color-grey-300);
217
218
  --ui-color-icon-info-secondary-default: var(--ui-primitive-color-brand-500);
218
- --ui-color-icon-info-secondary-disabled: var(--ui-primitive-color-grey-500);
219
- --ui-color-icon-inverse-primary-default: var(--ui-primitive-color-grey-100);
220
- --ui-color-icon-inverse-primary-disabled: var(--ui-primitive-color-grey-500);
221
- --ui-color-icon-neutral-primary-default: var(--ui-primitive-color-grey-800);
222
- --ui-color-icon-neutral-primary-disabled: var(--ui-primitive-color-grey-500);
223
- --ui-color-icon-neutral-primary-hover: var(--ui-primitive-color-grey-900);
224
- --ui-color-icon-neutral-secondary-default: var(--ui-primitive-color-grey-700);
225
- --ui-color-icon-neutral-secondary-disabled: var(--ui-primitive-color-grey-500);
226
- --ui-color-icon-neutral-secondary-hover: var(--ui-primitive-color-grey-800);
219
+ --ui-color-icon-info-secondary-disabled: var(--ui-primitive-color-grey-300);
220
+ --ui-color-icon-inverse-primary-default: var(--ui-primitive-color-white-100);
221
+ --ui-color-icon-inverse-primary-disabled: var(--ui-primitive-color-grey-300);
222
+ --ui-color-icon-neutral-primary-default: var(--ui-primitive-color-grey-700);
223
+ --ui-color-icon-neutral-primary-disabled: var(--ui-primitive-color-grey-300);
224
+ --ui-color-icon-neutral-primary-hover: var(--ui-primitive-color-grey-700);
225
+ --ui-color-icon-neutral-secondary-default: var(--ui-primitive-color-grey-500);
226
+ --ui-color-icon-neutral-secondary-disabled: var(--ui-primitive-color-grey-300);
227
+ --ui-color-icon-neutral-secondary-hover: var(--ui-primitive-color-grey-700);
227
228
  --ui-color-icon-success-primary-default: var(--ui-primitive-color-green-700);
228
- --ui-color-icon-success-primary-disabled: var(--ui-primitive-color-grey-500);
229
+ --ui-color-icon-success-primary-disabled: var(--ui-primitive-color-grey-300);
229
230
  --ui-color-icon-success-secondary-default: var(--ui-primitive-color-green-500);
230
- --ui-color-icon-success-secondary-disabled: var(--ui-primitive-color-grey-500);
231
- --ui-color-icon-warning-primary-default: var(--ui-primitive-color-orange-900);
232
- --ui-color-icon-warning-primary-disabled: var(--ui-primitive-color-grey-500);
233
- --ui-color-icon-warning-secondary-default: var(--ui-primitive-color-orange-500);
234
- --ui-color-icon-warning-secondary-disabled: var(--ui-primitive-color-grey-500);
231
+ --ui-color-icon-success-secondary-disabled: var(--ui-primitive-color-grey-300);
232
+ --ui-color-icon-warning-primary-default: var(--ui-primitive-color-brown-700);
233
+ --ui-color-icon-warning-primary-disabled: var(--ui-primitive-color-grey-300);
234
+ --ui-color-icon-warning-secondary-default: var(--ui-primitive-color-brown-900);
235
+ --ui-color-icon-warning-secondary-disabled: var(--ui-primitive-color-grey-300);
236
+ --ui-color-text-accents-pink-default: var(--ui-primitive-color-pink-700);
237
+ --ui-color-text-accents-pink-disabled: var(--ui-primitive-color-grey-500);
238
+ --ui-color-text-accents-purple-default: var(--ui-primitive-color-purple-900);
239
+ --ui-color-text-accents-purple-disabled: var(--ui-primitive-color-grey-500);
235
240
  --ui-color-text-brand-primary-default: var(--ui-primitive-color-brand-700);
236
- --ui-color-text-brand-primary-disabled: var(--ui-primitive-color-grey-700);
241
+ --ui-color-text-brand-primary-disabled: var(--ui-primitive-color-grey-500);
237
242
  --ui-color-text-brand-secondary-default: var(--ui-primitive-color-brand-500);
238
- --ui-color-text-brand-secondary-disabled: var(--ui-primitive-color-grey-700);
243
+ --ui-color-text-brand-secondary-disabled: var(--ui-primitive-color-grey-500);
239
244
  --ui-color-text-error-primary-default: var(--ui-primitive-color-red-900);
240
- --ui-color-text-error-primary-disabled: var(--ui-primitive-color-grey-700);
245
+ --ui-color-text-error-primary-disabled: var(--ui-primitive-color-grey-500);
241
246
  --ui-color-text-error-secondary-default: var(--ui-primitive-color-red-700);
242
- --ui-color-text-error-secondary-disabled: var(--ui-primitive-color-grey-700);
247
+ --ui-color-text-error-secondary-disabled: var(--ui-primitive-color-grey-500);
243
248
  --ui-color-text-info-primary-default: var(--ui-primitive-color-brand-900);
244
- --ui-color-text-info-primary-disabled: var(--ui-primitive-color-grey-700);
249
+ --ui-color-text-info-primary-disabled: var(--ui-primitive-color-grey-500);
245
250
  --ui-color-text-info-secondary-default: var(--ui-primitive-color-brand-500);
246
- --ui-color-text-info-secondary-disabled: var(--ui-primitive-color-grey-700);
247
- --ui-color-text-inverse-primary-default: var(--ui-primitive-color-grey-100);
248
- --ui-color-text-inverse-primary-disabled: var(--ui-primitive-color-grey-700);
251
+ --ui-color-text-info-secondary-disabled: var(--ui-primitive-color-grey-500);
252
+ --ui-color-text-inverse-primary-default: var(--ui-primitive-color-white-100);
253
+ --ui-color-text-inverse-primary-disabled: var(--ui-primitive-color-grey-500);
249
254
  --ui-color-text-neutral-primary-default: var(--ui-primitive-color-grey-900);
250
- --ui-color-text-neutral-primary-disabled: var(--ui-primitive-color-grey-700);
251
- --ui-color-text-neutral-secondary-default: var(--ui-primitive-color-grey-800);
252
- --ui-color-text-neutral-secondary-disabled: var(--ui-primitive-color-grey-700);
255
+ --ui-color-text-neutral-primary-disabled: var(--ui-primitive-color-grey-500);
256
+ --ui-color-text-neutral-secondary-default: var(--ui-primitive-color-grey-700);
257
+ --ui-color-text-neutral-secondary-disabled: var(--ui-primitive-color-grey-300);
253
258
  --ui-color-text-success-primary-default: var(--ui-primitive-color-green-700);
254
- --ui-color-text-success-primary-disabled: var(--ui-primitive-color-grey-700);
259
+ --ui-color-text-success-primary-disabled: var(--ui-primitive-color-grey-500);
255
260
  --ui-color-text-success-secondary-default: var(--ui-primitive-color-green-500);
256
- --ui-color-text-success-secondary-disabled: var(--ui-primitive-color-grey-700);
257
- --ui-color-text-warning-primary-default: var(--ui-primitive-color-orange-900);
258
- --ui-color-text-warning-primary-disabled: var(--ui-primitive-color-grey-700);
259
- --ui-color-text-warning-secondary-default: var(--ui-primitive-color-orange-700);
260
- --ui-color-text-warning-secondary-disabled: var(--ui-primitive-color-grey-700);
261
+ --ui-color-text-success-secondary-disabled: var(--ui-primitive-color-grey-500);
262
+ --ui-color-text-warning-primary-default: var(--ui-primitive-color-brown-700);
263
+ --ui-color-text-warning-primary-disabled: var(--ui-primitive-color-grey-500);
264
+ --ui-color-text-warning-secondary-default: var(--ui-primitive-color-brown-900);
265
+ --ui-color-text-warning-secondary-disabled: var(--ui-primitive-color-grey-500);
261
266
  --ui-semantic-spacing-2xl: var(--ui-primitive-dimension-8);
262
267
  --ui-semantic-spacing-3xl: var(--ui-primitive-dimension-10);
263
268
  --ui-semantic-spacing-4xl: var(--ui-primitive-dimension-12);
@@ -286,6 +291,31 @@
286
291
  --ui-semantic-size-s: var(--ui-primitive-dimension-4);
287
292
  --ui-semantic-size-xl: var(--ui-primitive-dimension-8);
288
293
  --ui-semantic-size-xs: var(--ui-primitive-dimension-3);
294
+ --ui-semantic-active-focus-ring: 0 1px 2px 0 #0000000d, 0 0 1px 4px #d7e3fb;
295
+ --ui-semantic-error-focus-ring: 0 1px 2px 0 #0000000d, 0 0 1px 4px #fee2e2;
296
+ --ui-semantic-fontFamilies-avenir-next: Avenir Next;
297
+ --ui-semantic-fontFamilies-inter: Inter;
298
+ --ui-semantic-fontSize-0: 12px;
299
+ --ui-semantic-fontSize-1: 14px;
300
+ --ui-semantic-fontSize-2: 16px;
301
+ --ui-semantic-fontSize-3: 20px;
302
+ --ui-semantic-fontSize-4: 24px;
303
+ --ui-semantic-fontSize-5: 32px;
304
+ --ui-semantic-fontWeights-avenir-next-0: 600;
305
+ --ui-semantic-fontWeights-inter-1: 300;
306
+ --ui-semantic-fontWeights-inter-2: 400;
307
+ --ui-semantic-fontWeights-inter-3: 500;
308
+ --ui-semantic-fontWeights-inter-4: 600;
309
+ --ui-semantic-gradient-primary: linear-gradient(-90deg, #1d4ed8 0%, #1e40af 100%);
310
+ --ui-semantic-large: 0 2px 8px 0 #e4eaf41f, 0 16px 24px 0 #c6d3e652;
311
+ --ui-semantic-letterSpacing-0: 0%;
312
+ --ui-semantic-medium: 0 2px 4px 0 #e4eaf414, 0 8px 16px 0 #c6d3e63d;
313
+ --ui-semantic-overlay: #3a465733;
314
+ --ui-semantic-paragraphIndent-0: 0px;
315
+ --ui-semantic-paragraphSpacing-0: 0;
316
+ --ui-semantic-small: 0 0 1px 0 #e4eaf414, 0 2px 4px 0 #c6d3e63d;
317
+ --ui-semantic-textCase-none: none;
318
+ --ui-semantic-textDecoration-none: none;
289
319
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
290
320
  monospace;
291
321
  --ui-color-red-50: #fef2f2;
@@ -402,103 +432,133 @@
402
432
  --ui-flyout-menu-content-max-height: 600px;
403
433
  }
404
434
  .ui-typo-h1 {
405
- font-family: var(--ui-primitive-fontFamilies-avenir-next);
406
- font-weight: var(--ui-primitive-fontWeights-avenir-next-0);
407
- font-size: var(--ui-primitive-fontSize-4);
435
+ font-family: var(--ui-semantic-fontFamilies-avenir-next);
436
+ font-weight: var(--ui-semantic-fontWeights-avenir-next-0);
437
+ font-size: var(--ui-semantic-fontSize-5);
408
438
  line-height: var(--ui-primitive-dimension-11);
409
- letter-spacing: var(--ui-primitive-letterSpacing-0);
410
- text-transform: var(--ui-primitive-textCase-none);
411
- text-decoration: var(--ui-primitive-textDecoration-none);
439
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
440
+ text-transform: var(--ui-semantic-textCase-none);
441
+ text-decoration: var(--ui-semantic-textDecoration-none);
412
442
  margin: 0;
413
443
  }
414
444
  .ui-typo-h2 {
415
- font-family: var(--ui-primitive-fontFamilies-avenir-next);
416
- font-weight: var(--ui-primitive-fontWeights-avenir-next-1);
417
- font-size: var(--ui-primitive-fontSize-3);
445
+ font-family: var(--ui-semantic-fontFamilies-avenir-next);
446
+ font-weight: var(--ui-semantic-fontWeights-avenir-next-0);
447
+ font-size: var(--ui-semantic-fontSize-4);
418
448
  line-height: var(--ui-primitive-dimension-8);
419
- letter-spacing: var(--ui-primitive-letterSpacing-0);
420
- text-transform: var(--ui-primitive-textCase-none);
421
- text-decoration: var(--ui-primitive-textDecoration-none);
449
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
450
+ text-transform: var(--ui-semantic-textCase-none);
451
+ text-decoration: var(--ui-semantic-textDecoration-none);
422
452
  margin: 0;
423
453
  }
424
454
  .ui-typo-h3 {
425
- font-family: var(--ui-primitive-fontFamilies-avenir-next);
426
- font-weight: var(--ui-primitive-fontWeights-avenir-next-1);
427
- font-size: var(--ui-primitive-fontSize-2);
455
+ font-family: var(--ui-semantic-fontFamilies-avenir-next);
456
+ font-weight: var(--ui-semantic-fontWeights-avenir-next-0);
457
+ font-size: var(--ui-semantic-fontSize-3);
428
458
  line-height: var(--ui-primitive-dimension-6);
429
- letter-spacing: var(--ui-primitive-letterSpacing-0);
430
- text-transform: var(--ui-primitive-textCase-none);
431
- text-decoration: var(--ui-primitive-textDecoration-none);
459
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
460
+ text-transform: var(--ui-semantic-textCase-none);
461
+ text-decoration: var(--ui-semantic-textDecoration-none);
432
462
  margin: 0;
433
463
  }
434
464
  .ui-typo-h4 {
435
- font-family: var(--ui-primitive-fontFamilies-avenir-next);
436
- font-weight: var(--ui-primitive-fontWeights-avenir-next-1);
437
- font-size: var(--ui-primitive-fontSize-1);
465
+ font-family: var(--ui-semantic-fontFamilies-avenir-next);
466
+ font-weight: var(--ui-semantic-fontWeights-avenir-next-0);
467
+ font-size: var(--ui-semantic-fontSize-2);
438
468
  line-height: var(--ui-primitive-dimension-6);
439
- letter-spacing: var(--ui-primitive-letterSpacing-0);
440
- text-transform: var(--ui-primitive-textCase-none);
441
- text-decoration: var(--ui-primitive-textDecoration-none);
469
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
470
+ text-transform: var(--ui-semantic-textCase-none);
471
+ text-decoration: var(--ui-semantic-textDecoration-none);
442
472
  margin: 0;
443
473
  }
444
474
  .ui-typo-body-base-light {
445
- font-family: var(--ui-primitive-fontFamilies-inter);
446
- font-weight: var(--ui-primitive-fontWeights-inter-2);
447
- font-size: var(--ui-primitive-fontSize-1);
448
- line-height: var(--ui-primitive-dimension-6);
449
- letter-spacing: var(--ui-primitive-letterSpacing-0);
450
- text-transform: var(--ui-primitive-textCase-none);
451
- text-decoration: var(--ui-primitive-textDecoration-none);
475
+ font-family: var(--ui-semantic-fontFamilies-inter);
476
+ font-weight: var(--ui-semantic-fontWeights-inter-1);
477
+ font-size: var(--ui-semantic-fontSize-2);
478
+ line-height: var(--ui-semantic-size-m);
479
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
480
+ text-transform: var(--ui-semantic-textCase-none);
481
+ text-decoration: var(--ui-semantic-textDecoration-none);
452
482
  margin: 0;
453
483
  }
454
484
  .ui-typo-body-base-regular {
455
- font-family: var(--ui-primitive-fontFamilies-inter);
456
- font-weight: var(--ui-primitive-fontWeights-inter-3);
457
- font-size: var(--ui-primitive-fontSize-1);
458
- line-height: var(--ui-primitive-dimension-6);
459
- letter-spacing: var(--ui-primitive-letterSpacing-0);
460
- text-transform: var(--ui-primitive-textCase-none);
461
- text-decoration: var(--ui-primitive-textDecoration-none);
485
+ font-family: var(--ui-semantic-fontFamilies-inter);
486
+ font-weight: var(--ui-semantic-fontWeights-inter-2);
487
+ font-size: var(--ui-semantic-fontSize-2);
488
+ line-height: var(--ui-semantic-size-m);
489
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
490
+ text-transform: var(--ui-semantic-textCase-none);
491
+ text-decoration: var(--ui-semantic-textDecoration-none);
462
492
  margin: 0;
463
493
  }
464
494
  .ui-typo-body-base-bold {
465
- font-family: var(--ui-primitive-fontFamilies-inter);
466
- font-weight: var(--ui-primitive-fontWeights-inter-4);
467
- font-size: var(--ui-primitive-fontSize-1);
468
- line-height: var(--ui-primitive-dimension-6);
469
- letter-spacing: var(--ui-primitive-letterSpacing-0);
470
- text-transform: var(--ui-primitive-textCase-none);
471
- text-decoration: var(--ui-primitive-textDecoration-none);
495
+ font-family: var(--ui-semantic-fontFamilies-inter);
496
+ font-weight: var(--ui-semantic-fontWeights-inter-3);
497
+ font-size: var(--ui-semantic-fontSize-2);
498
+ line-height: var(--ui-semantic-size-m);
499
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
500
+ text-transform: var(--ui-semantic-textCase-none);
501
+ text-decoration: var(--ui-semantic-textDecoration-none);
502
+ margin: 0;
503
+ }
504
+ .ui-typo-body-medium-light {
505
+ font-family: var(--ui-semantic-fontFamilies-inter);
506
+ font-weight: var(--ui-semantic-fontWeights-inter-2);
507
+ font-size: var(--ui-semantic-fontSize-1);
508
+ line-height: var(--ui-semantic-size-m);
509
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
510
+ text-transform: var(--ui-semantic-textCase-none);
511
+ text-decoration: var(--ui-semantic-textDecoration-none);
512
+ margin: 0;
513
+ }
514
+ .ui-typo-body-medium-regular {
515
+ font-family: var(--ui-semantic-fontFamilies-inter);
516
+ font-weight: var(--ui-semantic-fontWeights-inter-3);
517
+ font-size: var(--ui-semantic-fontSize-1);
518
+ line-height: var(--ui-semantic-size-m);
519
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
520
+ text-transform: var(--ui-semantic-textCase-none);
521
+ text-decoration: var(--ui-semantic-textDecoration-none);
522
+ margin: 0;
523
+ }
524
+ .ui-typo-body-medium-bold {
525
+ font-family: var(--ui-semantic-fontFamilies-inter);
526
+ font-weight: var(--ui-semantic-fontWeights-inter-4);
527
+ font-size: var(--ui-semantic-fontSize-1);
528
+ line-height: var(--ui-semantic-size-m);
529
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
530
+ text-transform: var(--ui-semantic-textCase-none);
531
+ text-decoration: var(--ui-semantic-textDecoration-none);
472
532
  margin: 0;
473
533
  }
474
534
  .ui-typo-body-small-light {
475
- font-family: var(--ui-primitive-fontFamilies-inter);
476
- font-weight: var(--ui-primitive-fontWeights-inter-2);
477
- font-size: var(--ui-primitive-fontSize-0);
535
+ font-family: var(--ui-semantic-fontFamilies-inter);
536
+ font-weight: var(--ui-semantic-fontWeights-inter-2);
537
+ font-size: var(--ui-semantic-fontSize-0);
478
538
  line-height: var(--ui-semantic-size-s);
479
- letter-spacing: var(--ui-primitive-letterSpacing-0);
480
- text-transform: var(--ui-primitive-textCase-none);
481
- text-decoration: var(--ui-primitive-textDecoration-none);
539
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
540
+ text-transform: var(--ui-semantic-textCase-none);
541
+ text-decoration: var(--ui-semantic-textDecoration-none);
482
542
  margin: 0;
483
543
  }
484
544
  .ui-typo-body-small-regular {
485
- font-family: var(--ui-primitive-fontFamilies-inter);
486
- font-weight: var(--ui-primitive-fontWeights-inter-3);
487
- font-size: var(--ui-primitive-fontSize-0);
545
+ font-family: var(--ui-semantic-fontFamilies-inter);
546
+ font-weight: var(--ui-semantic-fontWeights-inter-3);
547
+ font-size: var(--ui-semantic-fontSize-0);
488
548
  line-height: var(--ui-semantic-size-s);
489
- letter-spacing: var(--ui-primitive-letterSpacing-0);
490
- text-transform: var(--ui-primitive-textCase-none);
491
- text-decoration: var(--ui-primitive-textDecoration-none);
549
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
550
+ text-transform: var(--ui-semantic-textCase-none);
551
+ text-decoration: var(--ui-semantic-textDecoration-none);
492
552
  margin: 0;
493
553
  }
494
554
  .ui-typo-body-small-bold {
495
- font-family: var(--ui-primitive-fontFamilies-inter);
496
- font-weight: var(--ui-primitive-fontWeights-inter-4);
497
- font-size: var(--ui-primitive-fontSize-0);
555
+ font-family: var(--ui-semantic-fontFamilies-inter);
556
+ font-weight: var(--ui-semantic-fontWeights-inter-4);
557
+ font-size: var(--ui-semantic-fontSize-0);
498
558
  line-height: var(--ui-semantic-size-s);
499
- letter-spacing: var(--ui-primitive-letterSpacing-0);
500
- text-transform: var(--ui-primitive-textCase-none);
501
- text-decoration: var(--ui-primitive-textDecoration-none);
559
+ letter-spacing: var(--ui-semantic-letterSpacing-0);
560
+ text-transform: var(--ui-semantic-textCase-none);
561
+ text-decoration: var(--ui-semantic-textDecoration-none);
502
562
  margin: 0;
503
563
  }
504
564
  *, ::after, ::before, ::backdrop, ::file-selector-button {
@@ -2710,7 +2770,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
2710
2770
  border-color: var(--ui-primitive-color-brand-900);
2711
2771
  }
2712
2772
  .ui\:border-border-neutral-primary-default {
2713
- border-color: var(--ui-primitive-color-grey-700);
2773
+ border-color: var(--ui-primitive-color-grey-300);
2714
2774
  }
2715
2775
  .ui\:border-border-neutral-secondary-default {
2716
2776
  border-color: var(--ui-primitive-color-grey-500);
@@ -2719,7 +2779,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
2719
2779
  border-color: var(--ui-primitive-color-green-700);
2720
2780
  }
2721
2781
  .ui\:border-border-warning-primary-default {
2722
- border-color: var(--ui-primitive-color-orange-900);
2782
+ border-color: var(--ui-primitive-color-brown-700);
2723
2783
  }
2724
2784
  .ui\:border-color-border {
2725
2785
  border-color: #ccc;
@@ -2824,16 +2884,16 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
2824
2884
  background-color: var(--ui-primitive-color-blue-300);
2825
2885
  }
2826
2886
  .ui\:bg-background-neutral-primary-default {
2827
- background-color: var(--ui-primitive-color-grey-300);
2887
+ background-color: var(--ui-primitive-color-grey-100);
2828
2888
  }
2829
2889
  .ui\:bg-background-neutral-secondary-default {
2830
- background-color: var(--ui-primitive-color-grey-100);
2890
+ background-color: var(--ui-primitive-color-white-100);
2831
2891
  }
2832
2892
  .ui\:bg-background-neutral-secondary-hovered {
2833
2893
  background-color: var(--ui-primitive-color-brand-300);
2834
2894
  }
2835
2895
  .ui\:bg-background-neutral-secondary-selected {
2836
- background-color: var(--ui-primitive-color-grey-300);
2896
+ background-color: var(--ui-primitive-color-brand-300);
2837
2897
  }
2838
2898
  .ui\:bg-background-success-primary-default {
2839
2899
  background-color: var(--ui-primitive-color-green-100);
@@ -3864,25 +3924,25 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
3864
3924
  color: var(--ui-primitive-color-brand-900);
3865
3925
  }
3866
3926
  .ui\:text-text-inverse-primary-default {
3867
- color: var(--ui-primitive-color-grey-100);
3927
+ color: var(--ui-primitive-color-white-100);
3868
3928
  }
3869
3929
  .ui\:text-text-neutral-primary-default {
3870
3930
  color: var(--ui-primitive-color-grey-900);
3871
3931
  }
3872
3932
  .ui\:text-text-neutral-primary-disabled {
3873
- color: var(--ui-primitive-color-grey-700);
3933
+ color: var(--ui-primitive-color-grey-500);
3874
3934
  }
3875
3935
  .ui\:text-text-neutral-secondary-default {
3876
- color: var(--ui-primitive-color-grey-800);
3936
+ color: var(--ui-primitive-color-grey-700);
3877
3937
  }
3878
3938
  .ui\:text-text-neutral-secondary-disabled {
3879
- color: var(--ui-primitive-color-grey-700);
3939
+ color: var(--ui-primitive-color-grey-300);
3880
3940
  }
3881
3941
  .ui\:text-text-success-primary-default {
3882
3942
  color: var(--ui-primitive-color-green-700);
3883
3943
  }
3884
3944
  .ui\:text-text-warning-primary-default {
3885
- color: var(--ui-primitive-color-orange-900);
3945
+ color: var(--ui-primitive-color-brown-700);
3886
3946
  }
3887
3947
  .ui\:text-transparent {
3888
3948
  color: transparent;
@@ -4016,7 +4076,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
4016
4076
  --tw-ring-color: var(--ui-primitive-color-brand-700);
4017
4077
  }
4018
4078
  .ui\:ring-border-neutral-primary-default {
4019
- --tw-ring-color: var(--ui-primitive-color-grey-700);
4079
+ --tw-ring-color: var(--ui-primitive-color-grey-300);
4020
4080
  }
4021
4081
  .ui\:outline {
4022
4082
  outline-style: var(--tw-outline-style);
@@ -5085,7 +5145,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
5085
5145
  }
5086
5146
  .ui\:focus-within\:bg-background-neutral-primary-hovered {
5087
5147
  &:focus-within {
5088
- background-color: var(--ui-primitive-color-brand-300);
5148
+ background-color: var(--ui-primitive-color-grey-300);
5089
5149
  }
5090
5150
  }
5091
5151
  .ui\:focus-within\:bg-background-neutral-secondary-hovered {
@@ -5232,7 +5292,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
5232
5292
  .ui\:hover\:bg-background-neutral-primary-hovered {
5233
5293
  &:hover {
5234
5294
  @media (hover: hover) {
5235
- background-color: var(--ui-primitive-color-brand-300);
5295
+ background-color: var(--ui-primitive-color-grey-300);
5236
5296
  }
5237
5297
  }
5238
5298
  }
@@ -5693,7 +5753,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
5693
5753
  }
5694
5754
  .ui\:disabled\:border-border-neutral-primary-disabled {
5695
5755
  &:disabled {
5696
- border-color: var(--ui-primitive-color-grey-500);
5756
+ border-color: var(--ui-primitive-color-grey-300);
5697
5757
  }
5698
5758
  }
5699
5759
  .ui\:disabled\:opacity-50 {
@@ -5704,7 +5764,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
5704
5764
  .ui\:disabled\:checked\:bg-icon-brand-primary-disabled {
5705
5765
  &:disabled {
5706
5766
  &:checked {
5707
- background-color: var(--ui-primitive-color-grey-500);
5767
+ background-color: var(--ui-primitive-color-grey-300);
5708
5768
  }
5709
5769
  }
5710
5770
  }
@@ -5749,7 +5809,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
5749
5809
  }
5750
5810
  .ui\:has-disabled\:ring-border-neutral-primary-disabled {
5751
5811
  &:has(*:disabled) {
5752
- --tw-ring-color: var(--ui-primitive-color-grey-500);
5812
+ --tw-ring-color: var(--ui-primitive-color-grey-300);
5753
5813
  }
5754
5814
  }
5755
5815
  .ui\:has-disabled\:grayscale {
@@ -5817,7 +5877,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
5817
5877
  }
5818
5878
  .ui\:data-\[state\=active\]\:bg-background-neutral-secondary-default {
5819
5879
  &[data-state="active"] {
5820
- background-color: var(--ui-primitive-color-grey-100);
5880
+ background-color: var(--ui-primitive-color-white-100);
5821
5881
  }
5822
5882
  }
5823
5883
  .ui\:data-\[state\=active\]\:text-primary {
@@ -6315,13 +6375,13 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
6315
6375
  }
6316
6376
  .ui\:\[\&_\*\]\:\!text-text-neutral-primary-disabled {
6317
6377
  & * {
6318
- color: var(--ui-primitive-color-grey-700) !important;
6378
+ color: var(--ui-primitive-color-grey-500) !important;
6319
6379
  }
6320
6380
  }
6321
6381
  .ui\:has-disabled\:\[\&_\*\]\:\!text-text-neutral-primary-disabled {
6322
6382
  &:has(*:disabled) {
6323
6383
  & * {
6324
- color: var(--ui-primitive-color-grey-700) !important;
6384
+ color: var(--ui-primitive-color-grey-500) !important;
6325
6385
  }
6326
6386
  }
6327
6387
  }
@@ -6433,7 +6493,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
6433
6493
  .ui\:has-disabled\:\[\&\>\*_\*\]\:\!text-text-neutral-primary-disabled {
6434
6494
  &:has(*:disabled) {
6435
6495
  &>* * {
6436
- color: var(--ui-primitive-color-grey-700) !important;
6496
+ color: var(--ui-primitive-color-grey-500) !important;
6437
6497
  }
6438
6498
  }
6439
6499
  }