@sentropic/design-system-themes 0.9.0 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/css/entropic.css +389 -0
  2. package/css/forge.css +403 -14
  3. package/css/sent-tech.css +389 -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,81 @@
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-sm-paddingInlineEnd: 0.75rem;
298
+ --st-component-button-anatomy-density-md-controlHeight: 2.5rem;
299
+ --st-component-button-anatomy-density-md-paddingBlock: 0;
300
+ --st-component-button-anatomy-density-md-paddingInline: 1rem;
301
+ --st-component-button-anatomy-density-md-gap: 0.5rem;
302
+ --st-component-button-anatomy-density-md-minWidth: 2.5rem;
303
+ --st-component-button-anatomy-density-md-fontSize: 0.9375rem;
304
+ --st-component-button-anatomy-density-md-paddingInlineEnd: 1rem;
305
+ --st-component-button-anatomy-density-lg-controlHeight: 3rem;
306
+ --st-component-button-anatomy-density-lg-paddingBlock: 0;
307
+ --st-component-button-anatomy-density-lg-paddingInline: 1.25rem;
308
+ --st-component-button-anatomy-density-lg-gap: 0.5rem;
309
+ --st-component-button-anatomy-density-lg-minWidth: 3rem;
310
+ --st-component-button-anatomy-density-lg-fontSize: 1rem;
311
+ --st-component-button-anatomy-density-lg-paddingInlineEnd: 1.25rem;
312
+ --st-component-button-anatomy-typography-family: var(--st-font-sans);
313
+ --st-component-button-anatomy-typography-size: 0.9375rem;
314
+ --st-component-button-anatomy-typography-weight: 600;
315
+ --st-component-button-anatomy-typography-lineHeight: 1.2;
316
+ --st-component-button-anatomy-typography-letterSpacing: 0;
317
+ --st-component-button-anatomy-typography-textTransform: none;
318
+ --st-component-button-anatomy-typography-textDecoration: none;
319
+ --st-component-button-anatomy-typography-decorationThickness: auto;
320
+ --st-component-button-anatomy-typography-decorationOffset: auto;
321
+ --st-component-button-anatomy-focus-strategy: outline;
322
+ --st-component-button-anatomy-focus-width: 2px;
323
+ --st-component-button-anatomy-focus-offset: 2px;
324
+ --st-component-button-anatomy-focus-color: var(--st-semantic-border-interactive);
325
+ --st-component-button-anatomy-focus-inset: 0;
326
+ --st-component-button-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
327
+ --st-component-button-anatomy-focus-boxShadow: none;
328
+ --st-component-button-anatomy-icon-size: 1.125rem;
329
+ --st-component-button-anatomy-icon-gap: 0.5rem;
330
+ --st-component-button-anatomy-states-hover-bg: oklch(32% 0.11 242);
331
+ --st-component-button-anatomy-states-hover-transform: none;
332
+ --st-component-button-anatomy-states-active-transform: none;
333
+ --st-component-button-anatomy-states-disabled-opacity: 0.55;
88
334
  --st-component-link-text: oklch(50% 0.134 242.749);
89
335
  --st-component-link-hoverText: oklch(50% 0.134 242.749);
90
336
  --st-component-link-disabledText: #64748b;
91
337
  --st-component-link-focusRing: oklch(50% 0.134 242.749);
338
+ --st-component-link-anatomy-shape-radius: 0.25rem;
339
+ --st-component-link-anatomy-shape-borderWidth: 0;
340
+ --st-component-link-anatomy-shape-borderStyle: solid;
341
+ --st-component-link-anatomy-typography-family: inherit;
342
+ --st-component-link-anatomy-typography-size: inherit;
343
+ --st-component-link-anatomy-typography-weight: inherit;
344
+ --st-component-link-anatomy-typography-lineHeight: inherit;
345
+ --st-component-link-anatomy-typography-letterSpacing: 0;
346
+ --st-component-link-anatomy-typography-textTransform: none;
347
+ --st-component-link-anatomy-typography-textDecoration: underline;
348
+ --st-component-link-anatomy-typography-decorationThickness: auto;
349
+ --st-component-link-anatomy-typography-decorationOffset: 0.18em;
350
+ --st-component-link-anatomy-typography-textDecorationHover: underline;
351
+ --st-component-link-anatomy-focus-strategy: outline;
352
+ --st-component-link-anatomy-focus-width: 2px;
353
+ --st-component-link-anatomy-focus-offset: 2px;
354
+ --st-component-link-anatomy-focus-color: var(--st-semantic-border-interactive);
355
+ --st-component-link-anatomy-focus-inset: 0;
356
+ --st-component-link-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
357
+ --st-component-link-anatomy-focus-boxShadow: none;
358
+ --st-component-link-anatomy-states-hover-text: oklch(50% 0.134 242.749);
359
+ --st-component-link-anatomy-states-hover-decoration: underline;
360
+ --st-component-link-anatomy-states-disabled-text: #64748b;
361
+ --st-component-link-anatomy-states-disabled-decoration: none;
362
+ --st-component-link-anatomy-states-disabled-opacity: 0.55;
92
363
  --st-component-alert-background: #ffffff;
93
364
  --st-component-alert-text: #0f172a;
94
365
  --st-component-alert-border: #e2e8f0;
@@ -101,6 +372,26 @@
101
372
  --st-component-card-border: #e2e8f0;
102
373
  --st-component-card-radius: 0.5rem;
103
374
  --st-component-card-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
375
+ --st-component-card-anatomy-shape-radius: 0.5rem;
376
+ --st-component-card-anatomy-shape-borderWidth: 1px;
377
+ --st-component-card-anatomy-shape-borderStyle: solid;
378
+ --st-component-card-anatomy-typography-family: var(--st-font-sans);
379
+ --st-component-card-anatomy-typography-size: inherit;
380
+ --st-component-card-anatomy-typography-weight: 400;
381
+ --st-component-card-anatomy-typography-lineHeight: normal;
382
+ --st-component-card-anatomy-typography-letterSpacing: normal;
383
+ --st-component-card-anatomy-typography-textTransform: none;
384
+ --st-component-card-anatomy-typography-textDecoration: none;
385
+ --st-component-card-anatomy-typography-decorationThickness: auto;
386
+ --st-component-card-anatomy-typography-decorationOffset: auto;
387
+ --st-component-card-anatomy-focus-strategy: outline;
388
+ --st-component-card-anatomy-focus-width: 2px;
389
+ --st-component-card-anatomy-focus-offset: 2px;
390
+ --st-component-card-anatomy-focus-color: var(--st-semantic-border-interactive);
391
+ --st-component-card-anatomy-focus-inset: 0;
392
+ --st-component-card-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
393
+ --st-component-card-anatomy-focus-boxShadow: none;
394
+ --st-component-card-anatomy-states-hover-transform: translateY(-1px);
104
395
  --st-component-menu-background: #ffffff;
105
396
  --st-component-menu-border: #e2e8f0;
106
397
  --st-component-menu-text: #0f172a;
@@ -131,6 +422,15 @@
131
422
  --st-component-field-errorText: #dc2626;
132
423
  --st-component-field-gap: 0.5rem;
133
424
  --st-component-field-maxWidth: 28rem;
425
+ --st-component-field-labelTypography-family: var(--st-font-sans);
426
+ --st-component-field-labelTypography-size: 0.875rem;
427
+ --st-component-field-labelTypography-weight: 600;
428
+ --st-component-field-labelTypography-lineHeight: 1.4;
429
+ --st-component-field-labelTypography-letterSpacing: 0;
430
+ --st-component-field-labelTypography-textTransform: none;
431
+ --st-component-field-labelTypography-textDecoration: none;
432
+ --st-component-field-labelTypography-decorationThickness: auto;
433
+ --st-component-field-labelTypography-decorationOffset: auto;
134
434
  --st-component-control-background: #ffffff;
135
435
  --st-component-control-text: #0f172a;
136
436
  --st-component-control-placeholderText: #64748b;
@@ -144,6 +444,59 @@
144
444
  --st-component-control-smHeight: 2rem;
145
445
  --st-component-control-mdHeight: 2.5rem;
146
446
  --st-component-control-lgHeight: 3rem;
447
+ --st-component-control-anatomy-shape-radius: 0.375rem;
448
+ --st-component-control-anatomy-shape-borderWidth: 1px;
449
+ --st-component-control-anatomy-shape-borderStyle: solid;
450
+ --st-component-control-anatomy-density-sm-controlHeight: 2rem;
451
+ --st-component-control-anatomy-density-sm-paddingBlock: 0;
452
+ --st-component-control-anatomy-density-sm-paddingInline: 0.75rem;
453
+ --st-component-control-anatomy-density-sm-gap: 0.375rem;
454
+ --st-component-control-anatomy-density-sm-minWidth: 2rem;
455
+ --st-component-control-anatomy-density-sm-fontSize: 0.875rem;
456
+ --st-component-control-anatomy-density-md-controlHeight: 2.5rem;
457
+ --st-component-control-anatomy-density-md-paddingBlock: 0;
458
+ --st-component-control-anatomy-density-md-paddingInline: 1rem;
459
+ --st-component-control-anatomy-density-md-gap: 0.5rem;
460
+ --st-component-control-anatomy-density-md-minWidth: 2.5rem;
461
+ --st-component-control-anatomy-density-md-fontSize: 0.9375rem;
462
+ --st-component-control-anatomy-density-lg-controlHeight: 3rem;
463
+ --st-component-control-anatomy-density-lg-paddingBlock: 0;
464
+ --st-component-control-anatomy-density-lg-paddingInline: 1.25rem;
465
+ --st-component-control-anatomy-density-lg-gap: 0.5rem;
466
+ --st-component-control-anatomy-density-lg-minWidth: 3rem;
467
+ --st-component-control-anatomy-density-lg-fontSize: 1rem;
468
+ --st-component-control-anatomy-typography-family: var(--st-font-sans);
469
+ --st-component-control-anatomy-typography-size: 1rem;
470
+ --st-component-control-anatomy-typography-weight: 400;
471
+ --st-component-control-anatomy-typography-lineHeight: 1.5;
472
+ --st-component-control-anatomy-typography-letterSpacing: 0;
473
+ --st-component-control-anatomy-typography-textTransform: none;
474
+ --st-component-control-anatomy-typography-textDecoration: none;
475
+ --st-component-control-anatomy-typography-decorationThickness: auto;
476
+ --st-component-control-anatomy-typography-decorationOffset: auto;
477
+ --st-component-control-anatomy-focus-strategy: outline;
478
+ --st-component-control-anatomy-focus-width: 2px;
479
+ --st-component-control-anatomy-focus-offset: 2px;
480
+ --st-component-control-anatomy-focus-color: var(--st-semantic-border-interactive);
481
+ --st-component-control-anatomy-focus-inset: 0;
482
+ --st-component-control-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
483
+ --st-component-control-anatomy-focus-boxShadow: none;
484
+ --st-component-control-anatomy-field-style: outline;
485
+ --st-component-control-anatomy-field-fillBg: var(--st-semantic-surface-default);
486
+ --st-component-control-anatomy-field-borderTop: 1px solid #e2e8f0;
487
+ --st-component-control-anatomy-field-borderRight: 1px solid #e2e8f0;
488
+ --st-component-control-anatomy-field-borderBottom: 1px solid #e2e8f0;
489
+ --st-component-control-anatomy-field-borderLeft: 1px solid #e2e8f0;
490
+ --st-component-control-anatomy-field-radiusTop: 0.375rem;
491
+ --st-component-control-anatomy-field-underline: none;
492
+ --st-component-control-anatomy-field-focusShadow: none;
493
+ --st-component-control-anatomy-field-selectAppearance: auto;
494
+ --st-component-control-anatomy-field-selectChevron: none;
495
+ --st-component-control-anatomy-field-selectPaddingRight: 2rem;
496
+ --st-component-control-anatomy-states-hover-border: #94a3b8;
497
+ --st-component-control-anatomy-states-focus-border: oklch(50% 0.134 242.749);
498
+ --st-component-control-anatomy-states-disabled-bg: #f8fafc;
499
+ --st-component-control-anatomy-states-disabled-text: #64748b;
147
500
  --st-component-selection-checkedBackground: oklch(50% 0.134 242.749);
148
501
  --st-component-selection-checkedText: #ffffff;
149
502
  --st-component-selection-border: #e2e8f0;
@@ -194,10 +547,46 @@
194
547
  --st-component-dataTable-captionText: #475569;
195
548
  --st-component-dataTable-radius: 0.5rem;
196
549
  --st-component-tabs-activeText: #0f172a;
550
+ --st-component-tabs-activeBackground: transparent;
551
+ --st-component-tabs-activeWeight: 600;
197
552
  --st-component-tabs-inactiveText: #475569;
198
553
  --st-component-tabs-border: #e2e8f0;
199
554
  --st-component-tabs-indicator: oklch(50% 0.134 242.749);
200
555
  --st-component-tabs-panelBackground: #ffffff;
556
+ --st-component-tabs-tabPaddingBlock: 0.75rem;
557
+ --st-component-tabs-tabPaddingInline: 0.25rem;
558
+ --st-component-tabs-tabFontSize: inherit;
559
+ --st-component-tabs-tabLineHeight: 1.2;
560
+ --st-component-tabs-activeBorderTopWidth: 0;
561
+ --st-component-tabs-activeBorderBottomWidth: 1px;
562
+ --st-component-tabs-activeShadow: none;
563
+ --st-component-tabs-anatomy-shape-radius: 0;
564
+ --st-component-tabs-anatomy-shape-borderWidth: 1px;
565
+ --st-component-tabs-anatomy-shape-borderStyle: solid;
566
+ --st-component-tabs-anatomy-density-md-controlHeight: 2.5rem;
567
+ --st-component-tabs-anatomy-density-md-paddingBlock: 0;
568
+ --st-component-tabs-anatomy-density-md-paddingInline: 1rem;
569
+ --st-component-tabs-anatomy-density-md-gap: 0.5rem;
570
+ --st-component-tabs-anatomy-density-md-minWidth: 2.5rem;
571
+ --st-component-tabs-anatomy-density-md-fontSize: 0.9375rem;
572
+ --st-component-tabs-anatomy-typography-family: var(--st-font-sans);
573
+ --st-component-tabs-anatomy-typography-size: 0.9375rem;
574
+ --st-component-tabs-anatomy-typography-weight: 600;
575
+ --st-component-tabs-anatomy-typography-lineHeight: 1.2;
576
+ --st-component-tabs-anatomy-typography-letterSpacing: 0;
577
+ --st-component-tabs-anatomy-typography-textTransform: none;
578
+ --st-component-tabs-anatomy-typography-textDecoration: none;
579
+ --st-component-tabs-anatomy-typography-decorationThickness: auto;
580
+ --st-component-tabs-anatomy-typography-decorationOffset: auto;
581
+ --st-component-tabs-anatomy-focus-strategy: outline;
582
+ --st-component-tabs-anatomy-focus-width: 2px;
583
+ --st-component-tabs-anatomy-focus-offset: 2px;
584
+ --st-component-tabs-anatomy-focus-color: var(--st-semantic-border-interactive);
585
+ --st-component-tabs-anatomy-focus-inset: 0;
586
+ --st-component-tabs-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
587
+ --st-component-tabs-anatomy-focus-boxShadow: none;
588
+ --st-component-tabs-anatomy-states-hover-text: #0f172a;
589
+ --st-component-tabs-anatomy-states-disabled-opacity: 0.55;
201
590
  --st-component-pagination-background: #ffffff;
202
591
  --st-component-pagination-border: #e2e8f0;
203
592
  --st-component-pagination-text: #0f172a;