@sentropic/design-system-themes 0.8.0 → 0.10.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 (14) hide show
  1. package/css/entropic.css +371 -0
  2. package/css/forge.css +385 -14
  3. package/css/sent-tech.css +371 -0
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/index.js.map +1 -1
  8. package/dist/themes/entropic.d.ts.map +1 -1
  9. package/dist/themes/entropic.js +15 -13
  10. package/dist/themes/entropic.js.map +1 -1
  11. package/dist/themes/forge.d.ts.map +1 -1
  12. package/dist/themes/forge.js +13 -10
  13. package/dist/themes/forge.js.map +1 -1
  14. package/package.json +2 -2
package/css/entropic.css CHANGED
@@ -2,50 +2,248 @@
2
2
  /* Theme: Entropic (entropic) */
3
3
  [data-st-theme="entropic"] {
4
4
  --st-foundation-color-blue-10: oklch(97% 0.02 242);
5
+ --st-color-blue-10: oklch(97% 0.02 242);
5
6
  --st-foundation-color-blue-60: oklch(50% 0.134 242.749);
7
+ --st-color-blue-60: oklch(50% 0.134 242.749);
6
8
  --st-foundation-color-blue-80: oklch(32% 0.11 242);
9
+ --st-color-blue-80: oklch(32% 0.11 242);
7
10
  --st-foundation-color-cyan-10: oklch(96% 0.04 195);
11
+ --st-color-cyan-10: oklch(96% 0.04 195);
8
12
  --st-foundation-color-cyan-50: oklch(70.4% 0.14 182.503);
13
+ --st-color-cyan-50: oklch(70.4% 0.14 182.503);
9
14
  --st-foundation-color-cyan-70: oklch(48% 0.12 190);
15
+ --st-color-cyan-70: oklch(48% 0.12 190);
10
16
  --st-foundation-color-slate-0: #ffffff;
17
+ --st-color-slate-0: #ffffff;
11
18
  --st-foundation-color-slate-10: #f8fafc;
19
+ --st-color-slate-10: #f8fafc;
12
20
  --st-foundation-color-slate-20: #e2e8f0;
21
+ --st-color-slate-20: #e2e8f0;
13
22
  --st-foundation-color-slate-60: #475569;
23
+ --st-color-slate-60: #475569;
14
24
  --st-foundation-color-slate-80: #1e293b;
25
+ --st-color-slate-80: #1e293b;
15
26
  --st-foundation-color-slate-90: #0f172a;
27
+ --st-color-slate-90: #0f172a;
16
28
  --st-foundation-color-feedback-success: #16a34a;
29
+ --st-color-feedback-success: #16a34a;
17
30
  --st-foundation-color-feedback-warning: #d97706;
31
+ --st-color-feedback-warning: #d97706;
18
32
  --st-foundation-color-feedback-error: #dc2626;
33
+ --st-color-feedback-error: #dc2626;
19
34
  --st-foundation-color-feedback-info: #2563eb;
35
+ --st-color-feedback-info: #2563eb;
20
36
  --st-foundation-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
37
+ --st-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
21
38
  --st-foundation-font-display: Inter, system-ui, sans-serif;
39
+ --st-font-display: Inter, system-ui, sans-serif;
22
40
  --st-foundation-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
41
+ --st-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
23
42
  --st-foundation-spacing-0: 0;
43
+ --st-spacing-0: 0;
24
44
  --st-foundation-spacing-1: 0.25rem;
45
+ --st-spacing-1: 0.25rem;
25
46
  --st-foundation-spacing-2: 0.5rem;
47
+ --st-spacing-2: 0.5rem;
26
48
  --st-foundation-spacing-3: 0.75rem;
49
+ --st-spacing-3: 0.75rem;
27
50
  --st-foundation-spacing-4: 1rem;
51
+ --st-spacing-4: 1rem;
28
52
  --st-foundation-spacing-6: 1.5rem;
53
+ --st-spacing-6: 1.5rem;
29
54
  --st-foundation-spacing-8: 2rem;
55
+ --st-spacing-8: 2rem;
30
56
  --st-foundation-spacing-12: 3rem;
57
+ --st-spacing-12: 3rem;
31
58
  --st-foundation-spacing-16: 4rem;
59
+ --st-spacing-16: 4rem;
32
60
  --st-foundation-radius-none: 0;
61
+ --st-radius-none: 0;
33
62
  --st-foundation-radius-sm: 0.25rem;
63
+ --st-radius-sm: 0.25rem;
34
64
  --st-foundation-radius-md: 0.375rem;
65
+ --st-radius-md: 0.375rem;
35
66
  --st-foundation-radius-lg: 0.5rem;
67
+ --st-radius-lg: 0.5rem;
36
68
  --st-foundation-radius-pill: 999px;
69
+ --st-radius-pill: 999px;
37
70
  --st-foundation-shadow-subtle: 0 1px 2px rgb(15 23 42 / 0.08);
71
+ --st-shadow-subtle: 0 1px 2px rgb(15 23 42 / 0.08);
38
72
  --st-foundation-shadow-medium: 0 8px 24px rgb(15 23 42 / 0.12);
73
+ --st-shadow-medium: 0 8px 24px rgb(15 23 42 / 0.12);
39
74
  --st-foundation-shadow-floating: 0 18px 45px rgb(15 23 42 / 0.18);
75
+ --st-shadow-floating: 0 18px 45px rgb(15 23 42 / 0.18);
40
76
  --st-foundation-motion-fast: 120ms;
77
+ --st-motion-fast: 120ms;
41
78
  --st-foundation-motion-normal: 180ms;
79
+ --st-motion-normal: 180ms;
42
80
  --st-foundation-motion-slow: 280ms;
81
+ --st-motion-slow: 280ms;
43
82
  --st-foundation-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
83
+ --st-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
44
84
  --st-foundation-z-header: 50;
85
+ --st-z-header: 50;
86
+ --st-zindex-header: 50;
45
87
  --st-foundation-z-toast: 60;
88
+ --st-z-toast: 60;
89
+ --st-zindex-toast: 60;
46
90
  --st-foundation-z-overlay: 80;
91
+ --st-z-overlay: 80;
92
+ --st-zindex-overlay: 80;
47
93
  --st-foundation-z-modal: 100;
94
+ --st-z-modal: 100;
95
+ --st-zindex-modal: 100;
48
96
  --st-foundation-z-chat: 110;
97
+ --st-z-chat: 110;
98
+ --st-zindex-chat: 110;
99
+ --st-foundation-borderWidth-none: 0;
100
+ --st-borderWidth-none: 0;
101
+ --st-foundation-borderWidth-thin: 1px;
102
+ --st-borderWidth-thin: 1px;
103
+ --st-foundation-borderWidth-thick: 2px;
104
+ --st-borderWidth-thick: 2px;
105
+ --st-foundation-borderStyle-solid: solid;
106
+ --st-borderStyle-solid: solid;
107
+ --st-foundation-density-sm-controlHeight: 2rem;
108
+ --st-density-sm-controlHeight: 2rem;
109
+ --st-foundation-density-sm-paddingBlock: 0;
110
+ --st-density-sm-paddingBlock: 0;
111
+ --st-foundation-density-sm-paddingInline: 0.75rem;
112
+ --st-density-sm-paddingInline: 0.75rem;
113
+ --st-foundation-density-sm-gap: 0.375rem;
114
+ --st-density-sm-gap: 0.375rem;
115
+ --st-foundation-density-sm-minWidth: 2rem;
116
+ --st-density-sm-minWidth: 2rem;
117
+ --st-foundation-density-md-controlHeight: 2.5rem;
118
+ --st-density-md-controlHeight: 2.5rem;
119
+ --st-foundation-density-md-paddingBlock: 0;
120
+ --st-density-md-paddingBlock: 0;
121
+ --st-foundation-density-md-paddingInline: 1rem;
122
+ --st-density-md-paddingInline: 1rem;
123
+ --st-foundation-density-md-gap: 0.5rem;
124
+ --st-density-md-gap: 0.5rem;
125
+ --st-foundation-density-md-minWidth: 2.5rem;
126
+ --st-density-md-minWidth: 2.5rem;
127
+ --st-foundation-density-lg-controlHeight: 3rem;
128
+ --st-density-lg-controlHeight: 3rem;
129
+ --st-foundation-density-lg-paddingBlock: 0;
130
+ --st-density-lg-paddingBlock: 0;
131
+ --st-foundation-density-lg-paddingInline: 1.25rem;
132
+ --st-density-lg-paddingInline: 1.25rem;
133
+ --st-foundation-density-lg-gap: 0.5rem;
134
+ --st-density-lg-gap: 0.5rem;
135
+ --st-foundation-density-lg-minWidth: 3rem;
136
+ --st-density-lg-minWidth: 3rem;
137
+ --st-foundation-typography-control-family: var(--st-font-sans);
138
+ --st-typography-control-family: var(--st-font-sans);
139
+ --st-foundation-typography-control-size: 0.9375rem;
140
+ --st-typography-control-size: 0.9375rem;
141
+ --st-foundation-typography-control-weight: 600;
142
+ --st-typography-control-weight: 600;
143
+ --st-foundation-typography-control-lineHeight: 1.2;
144
+ --st-typography-control-lineHeight: 1.2;
145
+ --st-foundation-typography-control-letterSpacing: 0;
146
+ --st-typography-control-letterSpacing: 0;
147
+ --st-foundation-typography-control-textTransform: none;
148
+ --st-typography-control-textTransform: none;
149
+ --st-foundation-typography-control-textDecoration: none;
150
+ --st-typography-control-textDecoration: none;
151
+ --st-foundation-typography-control-decorationThickness: auto;
152
+ --st-typography-control-decorationThickness: auto;
153
+ --st-foundation-typography-control-decorationOffset: auto;
154
+ --st-typography-control-decorationOffset: auto;
155
+ --st-foundation-typography-field-family: var(--st-font-sans);
156
+ --st-typography-field-family: var(--st-font-sans);
157
+ --st-foundation-typography-field-size: 1rem;
158
+ --st-typography-field-size: 1rem;
159
+ --st-foundation-typography-field-weight: 400;
160
+ --st-typography-field-weight: 400;
161
+ --st-foundation-typography-field-lineHeight: 1.5;
162
+ --st-typography-field-lineHeight: 1.5;
163
+ --st-foundation-typography-field-letterSpacing: 0;
164
+ --st-typography-field-letterSpacing: 0;
165
+ --st-foundation-typography-field-textTransform: none;
166
+ --st-typography-field-textTransform: none;
167
+ --st-foundation-typography-field-textDecoration: none;
168
+ --st-typography-field-textDecoration: none;
169
+ --st-foundation-typography-field-decorationThickness: auto;
170
+ --st-typography-field-decorationThickness: auto;
171
+ --st-foundation-typography-field-decorationOffset: auto;
172
+ --st-typography-field-decorationOffset: auto;
173
+ --st-foundation-typography-label-family: var(--st-font-sans);
174
+ --st-typography-label-family: var(--st-font-sans);
175
+ --st-foundation-typography-label-size: 0.875rem;
176
+ --st-typography-label-size: 0.875rem;
177
+ --st-foundation-typography-label-weight: 600;
178
+ --st-typography-label-weight: 600;
179
+ --st-foundation-typography-label-lineHeight: 1.4;
180
+ --st-typography-label-lineHeight: 1.4;
181
+ --st-foundation-typography-label-letterSpacing: 0;
182
+ --st-typography-label-letterSpacing: 0;
183
+ --st-foundation-typography-label-textTransform: none;
184
+ --st-typography-label-textTransform: none;
185
+ --st-foundation-typography-label-textDecoration: none;
186
+ --st-typography-label-textDecoration: none;
187
+ --st-foundation-typography-label-decorationThickness: auto;
188
+ --st-typography-label-decorationThickness: auto;
189
+ --st-foundation-typography-label-decorationOffset: auto;
190
+ --st-typography-label-decorationOffset: auto;
191
+ --st-foundation-typography-link-family: inherit;
192
+ --st-typography-link-family: inherit;
193
+ --st-foundation-typography-link-size: inherit;
194
+ --st-typography-link-size: inherit;
195
+ --st-foundation-typography-link-weight: inherit;
196
+ --st-typography-link-weight: inherit;
197
+ --st-foundation-typography-link-lineHeight: inherit;
198
+ --st-typography-link-lineHeight: inherit;
199
+ --st-foundation-typography-link-letterSpacing: 0;
200
+ --st-typography-link-letterSpacing: 0;
201
+ --st-foundation-typography-link-textTransform: none;
202
+ --st-typography-link-textTransform: none;
203
+ --st-foundation-typography-link-textDecoration: underline;
204
+ --st-typography-link-textDecoration: underline;
205
+ --st-foundation-typography-link-decorationThickness: auto;
206
+ --st-typography-link-decorationThickness: auto;
207
+ --st-foundation-typography-link-decorationOffset: 0.18em;
208
+ --st-typography-link-decorationOffset: 0.18em;
209
+ --st-foundation-disabledOpacity: 0.55;
210
+ --st-disabledOpacity: 0.55;
211
+ --st-foundation-transition-property: background-color, border-color, color, box-shadow, outline-color;
212
+ --st-transition-property: background-color, border-color, color, box-shadow, outline-color;
213
+ --st-foundation-transition-duration: 120ms;
214
+ --st-transition-duration: 120ms;
215
+ --st-foundation-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
216
+ --st-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
217
+ --st-foundation-cursor-interactive: pointer;
218
+ --st-cursor-interactive: pointer;
219
+ --st-foundation-cursor-disabled: not-allowed;
220
+ --st-cursor-disabled: not-allowed;
221
+ --st-foundation-cursor-text: text;
222
+ --st-cursor-text: text;
223
+ --st-foundation-iconSize-sm: 1rem;
224
+ --st-iconSize-sm: 1rem;
225
+ --st-foundation-iconSize-md: 1.125rem;
226
+ --st-iconSize-md: 1.125rem;
227
+ --st-foundation-iconSize-lg: 1.25rem;
228
+ --st-iconSize-lg: 1.25rem;
229
+ --st-foundation-focus-strategy: outline;
230
+ --st-focus-strategy: outline;
231
+ --st-foundation-focus-width: 2px;
232
+ --st-focus-width: 2px;
233
+ --st-foundation-focus-offset: 2px;
234
+ --st-focus-offset: 2px;
235
+ --st-foundation-focus-color: var(--st-semantic-border-interactive);
236
+ --st-focus-color: var(--st-semantic-border-interactive);
237
+ --st-foundation-focus-inset: 0;
238
+ --st-focus-inset: 0;
239
+ --st-foundation-field-style: outline;
240
+ --st-field-style: outline;
241
+ --st-foundation-field-fillBg: var(--st-semantic-surface-default);
242
+ --st-field-fillBg: var(--st-semantic-surface-default);
243
+ --st-foundation-field-underlineColor: var(--st-semantic-border-strong);
244
+ --st-field-underlineColor: var(--st-semantic-border-strong);
245
+ --st-foundation-field-underlineWidth: 1px;
246
+ --st-field-underlineWidth: 1px;
49
247
  --st-semantic-surface-default: #ffffff;
50
248
  --st-semantic-surface-subtle: #f8fafc;
51
249
  --st-semantic-surface-raised: #ffffff;
@@ -60,8 +258,10 @@
60
258
  --st-semantic-border-strong: #94a3b8;
61
259
  --st-semantic-border-interactive: oklch(50% 0.134 242.749);
62
260
  --st-semantic-action-primary: oklch(50% 0.134 242.749);
261
+ --st-semantic-action-primaryHover: oklch(32% 0.11 242);
63
262
  --st-semantic-action-primaryText: #ffffff;
64
263
  --st-semantic-action-secondary: #f8fafc;
264
+ --st-semantic-action-secondaryHover: #e2e8f0;
65
265
  --st-semantic-action-secondaryText: #0f172a;
66
266
  --st-semantic-action-danger: #dc2626;
67
267
  --st-semantic-feedback-success: #16a34a;
@@ -85,10 +285,78 @@
85
285
  --st-component-button-primaryText: #ffffff;
86
286
  --st-component-button-secondaryBackground: #f8fafc;
87
287
  --st-component-button-secondaryText: #0f172a;
288
+ --st-component-button-anatomy-shape-radius: 0.375rem;
289
+ --st-component-button-anatomy-shape-borderWidth: 1px;
290
+ --st-component-button-anatomy-shape-borderStyle: solid;
291
+ --st-component-button-anatomy-density-sm-controlHeight: 2rem;
292
+ --st-component-button-anatomy-density-sm-paddingBlock: 0;
293
+ --st-component-button-anatomy-density-sm-paddingInline: 0.75rem;
294
+ --st-component-button-anatomy-density-sm-gap: 0.375rem;
295
+ --st-component-button-anatomy-density-sm-minWidth: 2rem;
296
+ --st-component-button-anatomy-density-sm-fontSize: 0.875rem;
297
+ --st-component-button-anatomy-density-md-controlHeight: 2.5rem;
298
+ --st-component-button-anatomy-density-md-paddingBlock: 0;
299
+ --st-component-button-anatomy-density-md-paddingInline: 1rem;
300
+ --st-component-button-anatomy-density-md-gap: 0.5rem;
301
+ --st-component-button-anatomy-density-md-minWidth: 2.5rem;
302
+ --st-component-button-anatomy-density-md-fontSize: 0.9375rem;
303
+ --st-component-button-anatomy-density-lg-controlHeight: 3rem;
304
+ --st-component-button-anatomy-density-lg-paddingBlock: 0;
305
+ --st-component-button-anatomy-density-lg-paddingInline: 1.25rem;
306
+ --st-component-button-anatomy-density-lg-gap: 0.5rem;
307
+ --st-component-button-anatomy-density-lg-minWidth: 3rem;
308
+ --st-component-button-anatomy-density-lg-fontSize: 1rem;
309
+ --st-component-button-anatomy-typography-family: var(--st-font-sans);
310
+ --st-component-button-anatomy-typography-size: 0.9375rem;
311
+ --st-component-button-anatomy-typography-weight: 600;
312
+ --st-component-button-anatomy-typography-lineHeight: 1.2;
313
+ --st-component-button-anatomy-typography-letterSpacing: 0;
314
+ --st-component-button-anatomy-typography-textTransform: none;
315
+ --st-component-button-anatomy-typography-textDecoration: none;
316
+ --st-component-button-anatomy-typography-decorationThickness: auto;
317
+ --st-component-button-anatomy-typography-decorationOffset: auto;
318
+ --st-component-button-anatomy-focus-strategy: outline;
319
+ --st-component-button-anatomy-focus-width: 2px;
320
+ --st-component-button-anatomy-focus-offset: 2px;
321
+ --st-component-button-anatomy-focus-color: var(--st-semantic-border-interactive);
322
+ --st-component-button-anatomy-focus-inset: 0;
323
+ --st-component-button-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
324
+ --st-component-button-anatomy-focus-boxShadow: none;
325
+ --st-component-button-anatomy-icon-size: 1.125rem;
326
+ --st-component-button-anatomy-icon-gap: 0.5rem;
327
+ --st-component-button-anatomy-states-hover-bg: oklch(32% 0.11 242);
328
+ --st-component-button-anatomy-states-hover-transform: none;
329
+ --st-component-button-anatomy-states-active-transform: none;
330
+ --st-component-button-anatomy-states-disabled-opacity: 0.55;
88
331
  --st-component-link-text: oklch(50% 0.134 242.749);
89
332
  --st-component-link-hoverText: oklch(50% 0.134 242.749);
90
333
  --st-component-link-disabledText: #64748b;
91
334
  --st-component-link-focusRing: oklch(50% 0.134 242.749);
335
+ --st-component-link-anatomy-shape-radius: 0.25rem;
336
+ --st-component-link-anatomy-shape-borderWidth: 0;
337
+ --st-component-link-anatomy-shape-borderStyle: solid;
338
+ --st-component-link-anatomy-typography-family: inherit;
339
+ --st-component-link-anatomy-typography-size: inherit;
340
+ --st-component-link-anatomy-typography-weight: inherit;
341
+ --st-component-link-anatomy-typography-lineHeight: inherit;
342
+ --st-component-link-anatomy-typography-letterSpacing: 0;
343
+ --st-component-link-anatomy-typography-textTransform: none;
344
+ --st-component-link-anatomy-typography-textDecoration: underline;
345
+ --st-component-link-anatomy-typography-decorationThickness: auto;
346
+ --st-component-link-anatomy-typography-decorationOffset: 0.18em;
347
+ --st-component-link-anatomy-typography-textDecorationHover: underline;
348
+ --st-component-link-anatomy-focus-strategy: outline;
349
+ --st-component-link-anatomy-focus-width: 2px;
350
+ --st-component-link-anatomy-focus-offset: 2px;
351
+ --st-component-link-anatomy-focus-color: var(--st-semantic-border-interactive);
352
+ --st-component-link-anatomy-focus-inset: 0;
353
+ --st-component-link-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
354
+ --st-component-link-anatomy-focus-boxShadow: none;
355
+ --st-component-link-anatomy-states-hover-text: oklch(50% 0.134 242.749);
356
+ --st-component-link-anatomy-states-hover-decoration: underline;
357
+ --st-component-link-anatomy-states-disabled-text: #64748b;
358
+ --st-component-link-anatomy-states-disabled-decoration: none;
359
+ --st-component-link-anatomy-states-disabled-opacity: 0.55;
92
360
  --st-component-alert-background: #ffffff;
93
361
  --st-component-alert-text: #0f172a;
94
362
  --st-component-alert-border: #e2e8f0;
@@ -101,6 +369,26 @@
101
369
  --st-component-card-border: #e2e8f0;
102
370
  --st-component-card-radius: 0.5rem;
103
371
  --st-component-card-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
372
+ --st-component-card-anatomy-shape-radius: 0.5rem;
373
+ --st-component-card-anatomy-shape-borderWidth: 1px;
374
+ --st-component-card-anatomy-shape-borderStyle: solid;
375
+ --st-component-card-anatomy-typography-family: var(--st-font-sans);
376
+ --st-component-card-anatomy-typography-size: 1rem;
377
+ --st-component-card-anatomy-typography-weight: 400;
378
+ --st-component-card-anatomy-typography-lineHeight: 1.5;
379
+ --st-component-card-anatomy-typography-letterSpacing: 0;
380
+ --st-component-card-anatomy-typography-textTransform: none;
381
+ --st-component-card-anatomy-typography-textDecoration: none;
382
+ --st-component-card-anatomy-typography-decorationThickness: auto;
383
+ --st-component-card-anatomy-typography-decorationOffset: auto;
384
+ --st-component-card-anatomy-focus-strategy: outline;
385
+ --st-component-card-anatomy-focus-width: 2px;
386
+ --st-component-card-anatomy-focus-offset: 2px;
387
+ --st-component-card-anatomy-focus-color: var(--st-semantic-border-interactive);
388
+ --st-component-card-anatomy-focus-inset: 0;
389
+ --st-component-card-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
390
+ --st-component-card-anatomy-focus-boxShadow: none;
391
+ --st-component-card-anatomy-states-hover-transform: translateY(-1px);
104
392
  --st-component-menu-background: #ffffff;
105
393
  --st-component-menu-border: #e2e8f0;
106
394
  --st-component-menu-text: #0f172a;
@@ -131,6 +419,15 @@
131
419
  --st-component-field-errorText: #dc2626;
132
420
  --st-component-field-gap: 0.5rem;
133
421
  --st-component-field-maxWidth: 28rem;
422
+ --st-component-field-labelTypography-family: var(--st-font-sans);
423
+ --st-component-field-labelTypography-size: 0.875rem;
424
+ --st-component-field-labelTypography-weight: 600;
425
+ --st-component-field-labelTypography-lineHeight: 1.4;
426
+ --st-component-field-labelTypography-letterSpacing: 0;
427
+ --st-component-field-labelTypography-textTransform: none;
428
+ --st-component-field-labelTypography-textDecoration: none;
429
+ --st-component-field-labelTypography-decorationThickness: auto;
430
+ --st-component-field-labelTypography-decorationOffset: auto;
134
431
  --st-component-control-background: #ffffff;
135
432
  --st-component-control-text: #0f172a;
136
433
  --st-component-control-placeholderText: #64748b;
@@ -144,6 +441,53 @@
144
441
  --st-component-control-smHeight: 2rem;
145
442
  --st-component-control-mdHeight: 2.5rem;
146
443
  --st-component-control-lgHeight: 3rem;
444
+ --st-component-control-anatomy-shape-radius: 0.375rem;
445
+ --st-component-control-anatomy-shape-borderWidth: 1px;
446
+ --st-component-control-anatomy-shape-borderStyle: solid;
447
+ --st-component-control-anatomy-density-sm-controlHeight: 2rem;
448
+ --st-component-control-anatomy-density-sm-paddingBlock: 0;
449
+ --st-component-control-anatomy-density-sm-paddingInline: 0.75rem;
450
+ --st-component-control-anatomy-density-sm-gap: 0.375rem;
451
+ --st-component-control-anatomy-density-sm-minWidth: 2rem;
452
+ --st-component-control-anatomy-density-sm-fontSize: 0.875rem;
453
+ --st-component-control-anatomy-density-md-controlHeight: 2.5rem;
454
+ --st-component-control-anatomy-density-md-paddingBlock: 0;
455
+ --st-component-control-anatomy-density-md-paddingInline: 1rem;
456
+ --st-component-control-anatomy-density-md-gap: 0.5rem;
457
+ --st-component-control-anatomy-density-md-minWidth: 2.5rem;
458
+ --st-component-control-anatomy-density-md-fontSize: 0.9375rem;
459
+ --st-component-control-anatomy-density-lg-controlHeight: 3rem;
460
+ --st-component-control-anatomy-density-lg-paddingBlock: 0;
461
+ --st-component-control-anatomy-density-lg-paddingInline: 1.25rem;
462
+ --st-component-control-anatomy-density-lg-gap: 0.5rem;
463
+ --st-component-control-anatomy-density-lg-minWidth: 3rem;
464
+ --st-component-control-anatomy-density-lg-fontSize: 1rem;
465
+ --st-component-control-anatomy-typography-family: var(--st-font-sans);
466
+ --st-component-control-anatomy-typography-size: 1rem;
467
+ --st-component-control-anatomy-typography-weight: 400;
468
+ --st-component-control-anatomy-typography-lineHeight: 1.5;
469
+ --st-component-control-anatomy-typography-letterSpacing: 0;
470
+ --st-component-control-anatomy-typography-textTransform: none;
471
+ --st-component-control-anatomy-typography-textDecoration: none;
472
+ --st-component-control-anatomy-typography-decorationThickness: auto;
473
+ --st-component-control-anatomy-typography-decorationOffset: auto;
474
+ --st-component-control-anatomy-focus-strategy: outline;
475
+ --st-component-control-anatomy-focus-width: 2px;
476
+ --st-component-control-anatomy-focus-offset: 2px;
477
+ --st-component-control-anatomy-focus-color: var(--st-semantic-border-interactive);
478
+ --st-component-control-anatomy-focus-inset: 0;
479
+ --st-component-control-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
480
+ --st-component-control-anatomy-focus-boxShadow: none;
481
+ --st-component-control-anatomy-field-style: outline;
482
+ --st-component-control-anatomy-field-fillBg: var(--st-semantic-surface-default);
483
+ --st-component-control-anatomy-field-borderTop: 1px solid #e2e8f0;
484
+ --st-component-control-anatomy-field-borderRight: 1px solid #e2e8f0;
485
+ --st-component-control-anatomy-field-borderBottom: 1px solid #e2e8f0;
486
+ --st-component-control-anatomy-field-borderLeft: 1px solid #e2e8f0;
487
+ --st-component-control-anatomy-states-hover-border: #94a3b8;
488
+ --st-component-control-anatomy-states-focus-border: oklch(50% 0.134 242.749);
489
+ --st-component-control-anatomy-states-disabled-bg: #f8fafc;
490
+ --st-component-control-anatomy-states-disabled-text: #64748b;
147
491
  --st-component-selection-checkedBackground: oklch(50% 0.134 242.749);
148
492
  --st-component-selection-checkedText: #ffffff;
149
493
  --st-component-selection-border: #e2e8f0;
@@ -198,6 +542,33 @@
198
542
  --st-component-tabs-border: #e2e8f0;
199
543
  --st-component-tabs-indicator: oklch(50% 0.134 242.749);
200
544
  --st-component-tabs-panelBackground: #ffffff;
545
+ --st-component-tabs-anatomy-shape-radius: 0;
546
+ --st-component-tabs-anatomy-shape-borderWidth: 1px;
547
+ --st-component-tabs-anatomy-shape-borderStyle: solid;
548
+ --st-component-tabs-anatomy-density-md-controlHeight: 2.5rem;
549
+ --st-component-tabs-anatomy-density-md-paddingBlock: 0;
550
+ --st-component-tabs-anatomy-density-md-paddingInline: 1rem;
551
+ --st-component-tabs-anatomy-density-md-gap: 0.5rem;
552
+ --st-component-tabs-anatomy-density-md-minWidth: 2.5rem;
553
+ --st-component-tabs-anatomy-density-md-fontSize: 0.9375rem;
554
+ --st-component-tabs-anatomy-typography-family: var(--st-font-sans);
555
+ --st-component-tabs-anatomy-typography-size: 0.9375rem;
556
+ --st-component-tabs-anatomy-typography-weight: 600;
557
+ --st-component-tabs-anatomy-typography-lineHeight: 1.2;
558
+ --st-component-tabs-anatomy-typography-letterSpacing: 0;
559
+ --st-component-tabs-anatomy-typography-textTransform: none;
560
+ --st-component-tabs-anatomy-typography-textDecoration: none;
561
+ --st-component-tabs-anatomy-typography-decorationThickness: auto;
562
+ --st-component-tabs-anatomy-typography-decorationOffset: auto;
563
+ --st-component-tabs-anatomy-focus-strategy: outline;
564
+ --st-component-tabs-anatomy-focus-width: 2px;
565
+ --st-component-tabs-anatomy-focus-offset: 2px;
566
+ --st-component-tabs-anatomy-focus-color: var(--st-semantic-border-interactive);
567
+ --st-component-tabs-anatomy-focus-inset: 0;
568
+ --st-component-tabs-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
569
+ --st-component-tabs-anatomy-focus-boxShadow: none;
570
+ --st-component-tabs-anatomy-states-hover-text: #0f172a;
571
+ --st-component-tabs-anatomy-states-disabled-opacity: 0.55;
201
572
  --st-component-pagination-background: #ffffff;
202
573
  --st-component-pagination-border: #e2e8f0;
203
574
  --st-component-pagination-text: #0f172a;