@sentropic/design-system-themes 0.10.0 → 0.10.2

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 (4) hide show
  1. package/css/entropic.css +97 -3
  2. package/css/forge.css +97 -3
  3. package/css/sent-tech.css +97 -3
  4. package/package.json +2 -2
package/css/entropic.css CHANGED
@@ -284,6 +284,8 @@
284
284
  --st-component-button-primaryBackground: oklch(50% 0.134 242.749);
285
285
  --st-component-button-primaryText: #ffffff;
286
286
  --st-component-button-secondaryBackground: #f8fafc;
287
+ --st-component-button-secondaryBorder: #e2e8f0;
288
+ --st-component-button-secondaryHoverBackground: #e2e8f0;
287
289
  --st-component-button-secondaryText: #0f172a;
288
290
  --st-component-button-anatomy-shape-radius: 0.375rem;
289
291
  --st-component-button-anatomy-shape-borderWidth: 1px;
@@ -294,18 +296,21 @@
294
296
  --st-component-button-anatomy-density-sm-gap: 0.375rem;
295
297
  --st-component-button-anatomy-density-sm-minWidth: 2rem;
296
298
  --st-component-button-anatomy-density-sm-fontSize: 0.875rem;
299
+ --st-component-button-anatomy-density-sm-paddingInlineEnd: 0.75rem;
297
300
  --st-component-button-anatomy-density-md-controlHeight: 2.5rem;
298
301
  --st-component-button-anatomy-density-md-paddingBlock: 0;
299
302
  --st-component-button-anatomy-density-md-paddingInline: 1rem;
300
303
  --st-component-button-anatomy-density-md-gap: 0.5rem;
301
304
  --st-component-button-anatomy-density-md-minWidth: 2.5rem;
302
305
  --st-component-button-anatomy-density-md-fontSize: 0.9375rem;
306
+ --st-component-button-anatomy-density-md-paddingInlineEnd: 1rem;
303
307
  --st-component-button-anatomy-density-lg-controlHeight: 3rem;
304
308
  --st-component-button-anatomy-density-lg-paddingBlock: 0;
305
309
  --st-component-button-anatomy-density-lg-paddingInline: 1.25rem;
306
310
  --st-component-button-anatomy-density-lg-gap: 0.5rem;
307
311
  --st-component-button-anatomy-density-lg-minWidth: 3rem;
308
312
  --st-component-button-anatomy-density-lg-fontSize: 1rem;
313
+ --st-component-button-anatomy-density-lg-paddingInlineEnd: 1.25rem;
309
314
  --st-component-button-anatomy-typography-family: var(--st-font-sans);
310
315
  --st-component-button-anatomy-typography-size: 0.9375rem;
311
316
  --st-component-button-anatomy-typography-weight: 600;
@@ -365,6 +370,46 @@
365
370
  --st-component-alert-warningBorder: #d97706;
366
371
  --st-component-alert-errorBorder: #dc2626;
367
372
  --st-component-alert-radius: 0.5rem;
373
+ --st-component-alert-borderTop: 1px solid #e2e8f0;
374
+ --st-component-alert-borderRight: 1px solid #e2e8f0;
375
+ --st-component-alert-borderBottom: 1px solid #e2e8f0;
376
+ --st-component-alert-accentWidth: 0.25rem;
377
+ --st-component-alert-filetWidth: 0;
378
+ --st-component-alert-paddingTop: 1rem;
379
+ --st-component-alert-paddingRight: 1rem;
380
+ --st-component-alert-paddingBottom: 1rem;
381
+ --st-component-alert-paddingLeft: 1rem;
382
+ --st-component-alert-fontSize: inherit;
383
+ --st-component-alert-lineHeight: normal;
384
+ --st-component-alert-letterSpacing: normal;
385
+ --st-component-accordion-text: #0f172a;
386
+ --st-component-accordion-paddingBlock: 0.875rem;
387
+ --st-component-accordion-paddingInline: 0.5rem;
388
+ --st-component-accordion-fontSize: inherit;
389
+ --st-component-accordion-fontWeight: 600;
390
+ --st-component-accordion-lineHeight: normal;
391
+ --st-component-tag-radius: 999px;
392
+ --st-component-tag-paddingBlock: 0.25rem;
393
+ --st-component-tag-paddingInline: 0.625rem;
394
+ --st-component-tag-fontSize: 0.75rem;
395
+ --st-component-tag-fontWeight: 600;
396
+ --st-component-tag-lineHeight: 1;
397
+ --st-component-tag-letterSpacing: normal;
398
+ --st-component-tag-textTransform: none;
399
+ --st-component-tag-minHeight: 0;
400
+ --st-component-tag-neutralBackground: #f8fafc;
401
+ --st-component-tag-neutralText: #475569;
402
+ --st-component-badge-radius: 999px;
403
+ --st-component-badge-paddingBlock: 0.25rem;
404
+ --st-component-badge-paddingInline: 0.5rem;
405
+ --st-component-badge-fontSize: 0.75rem;
406
+ --st-component-badge-fontWeight: 650;
407
+ --st-component-badge-lineHeight: 1;
408
+ --st-component-badge-letterSpacing: normal;
409
+ --st-component-badge-textTransform: none;
410
+ --st-component-badge-minHeight: 0;
411
+ --st-component-badge-infoBackground: color-mix(in srgb, #2563eb 14%, white);
412
+ --st-component-badge-infoText: #2563eb;
368
413
  --st-component-card-background: #ffffff;
369
414
  --st-component-card-border: #e2e8f0;
370
415
  --st-component-card-radius: 0.5rem;
@@ -373,10 +418,10 @@
373
418
  --st-component-card-anatomy-shape-borderWidth: 1px;
374
419
  --st-component-card-anatomy-shape-borderStyle: solid;
375
420
  --st-component-card-anatomy-typography-family: var(--st-font-sans);
376
- --st-component-card-anatomy-typography-size: 1rem;
421
+ --st-component-card-anatomy-typography-size: inherit;
377
422
  --st-component-card-anatomy-typography-weight: 400;
378
- --st-component-card-anatomy-typography-lineHeight: 1.5;
379
- --st-component-card-anatomy-typography-letterSpacing: 0;
423
+ --st-component-card-anatomy-typography-lineHeight: normal;
424
+ --st-component-card-anatomy-typography-letterSpacing: normal;
380
425
  --st-component-card-anatomy-typography-textTransform: none;
381
426
  --st-component-card-anatomy-typography-textDecoration: none;
382
427
  --st-component-card-anatomy-typography-decorationThickness: auto;
@@ -484,6 +529,12 @@
484
529
  --st-component-control-anatomy-field-borderRight: 1px solid #e2e8f0;
485
530
  --st-component-control-anatomy-field-borderBottom: 1px solid #e2e8f0;
486
531
  --st-component-control-anatomy-field-borderLeft: 1px solid #e2e8f0;
532
+ --st-component-control-anatomy-field-radiusTop: 0.375rem;
533
+ --st-component-control-anatomy-field-underline: none;
534
+ --st-component-control-anatomy-field-focusShadow: none;
535
+ --st-component-control-anatomy-field-selectAppearance: auto;
536
+ --st-component-control-anatomy-field-selectChevron: none;
537
+ --st-component-control-anatomy-field-selectPaddingRight: 2rem;
487
538
  --st-component-control-anatomy-states-hover-border: #94a3b8;
488
539
  --st-component-control-anatomy-states-focus-border: oklch(50% 0.134 242.749);
489
540
  --st-component-control-anatomy-states-disabled-bg: #f8fafc;
@@ -494,6 +545,25 @@
494
545
  --st-component-selection-switchTrack: #94a3b8;
495
546
  --st-component-selection-switchTrackChecked: oklch(50% 0.134 242.749);
496
547
  --st-component-selection-switchThumb: #ffffff;
548
+ --st-component-selection-choiceLabelFontSize: 0.9375rem;
549
+ --st-component-selection-choiceLabelLineHeight: normal;
550
+ --st-component-selection-choiceRadioLineHeight: normal;
551
+ --st-component-selection-choiceLabelLetterSpacing: normal;
552
+ --st-component-selection-choiceLabelColor: #0f172a;
553
+ --st-component-selection-toggleTrackRadius: 999px;
554
+ --st-component-selection-toggleTrackPadding: 0.125rem;
555
+ --st-component-selection-toggleTrackWidth: 2.25rem;
556
+ --st-component-selection-toggleTrackHeight: 1.25rem;
557
+ --st-component-selection-toggleThumbSize: 1rem;
558
+ --st-component-selection-toggleFontSize: inherit;
559
+ --st-component-selection-toggleLineHeight: normal;
560
+ --st-component-selection-toggleLetterSpacing: normal;
561
+ --st-component-selection-toggleTextColor: #0f172a;
562
+ --st-component-search-paddingBlock: 0;
563
+ --st-component-search-paddingInline: 0;
564
+ --st-component-search-fontSize: 1rem;
565
+ --st-component-search-lineHeight: normal;
566
+ --st-component-search-letterSpacing: normal;
497
567
  --st-component-overlay-backdrop: rgb(15 23 42 / 0.48);
498
568
  --st-component-overlay-surface: #ffffff;
499
569
  --st-component-overlay-border: #e2e8f0;
@@ -538,10 +608,20 @@
538
608
  --st-component-dataTable-captionText: #475569;
539
609
  --st-component-dataTable-radius: 0.5rem;
540
610
  --st-component-tabs-activeText: #0f172a;
611
+ --st-component-tabs-activeBackground: transparent;
612
+ --st-component-tabs-inactiveBackground: transparent;
613
+ --st-component-tabs-activeWeight: 600;
541
614
  --st-component-tabs-inactiveText: #475569;
542
615
  --st-component-tabs-border: #e2e8f0;
543
616
  --st-component-tabs-indicator: oklch(50% 0.134 242.749);
544
617
  --st-component-tabs-panelBackground: #ffffff;
618
+ --st-component-tabs-tabPaddingBlock: 0.75rem;
619
+ --st-component-tabs-tabPaddingInline: 0.25rem;
620
+ --st-component-tabs-tabFontSize: inherit;
621
+ --st-component-tabs-tabLineHeight: 1.2;
622
+ --st-component-tabs-activeBorderTopWidth: 0;
623
+ --st-component-tabs-activeBorderBottomWidth: 1px;
624
+ --st-component-tabs-activeShadow: none;
545
625
  --st-component-tabs-anatomy-shape-radius: 0;
546
626
  --st-component-tabs-anatomy-shape-borderWidth: 1px;
547
627
  --st-component-tabs-anatomy-shape-borderStyle: solid;
@@ -576,10 +656,24 @@
576
656
  --st-component-pagination-activeText: #ffffff;
577
657
  --st-component-pagination-disabledText: #64748b;
578
658
  --st-component-pagination-radius: 0.375rem;
659
+ --st-component-pagination-borderWidth: 1px;
660
+ --st-component-pagination-activeBorder: #e2e8f0;
661
+ --st-component-pagination-activeBorderWidth: 1px;
662
+ --st-component-pagination-activeWeight: inherit;
663
+ --st-component-pagination-paddingBlock: 0;
664
+ --st-component-pagination-paddingInline: 0.75rem;
665
+ --st-component-pagination-minSize: 2.25rem;
666
+ --st-component-pagination-fontSize: inherit;
667
+ --st-component-pagination-lineHeight: normal;
668
+ --st-component-pagination-letterSpacing: normal;
579
669
  --st-component-breadcrumb-text: #475569;
580
670
  --st-component-breadcrumb-currentText: #0f172a;
581
671
  --st-component-breadcrumb-separator: #64748b;
582
672
  --st-component-breadcrumb-linkText: oklch(50% 0.134 242.749);
673
+ --st-component-breadcrumb-fontSize: inherit;
674
+ --st-component-breadcrumb-lineHeight: normal;
675
+ --st-component-breadcrumb-letterSpacing: normal;
676
+ --st-component-breadcrumb-currentWeight: 600;
583
677
  --st-component-sideNav-background: #ffffff;
584
678
  --st-component-sideNav-border: #e2e8f0;
585
679
  --st-component-sideNav-itemText: #475569;
package/css/forge.css CHANGED
@@ -284,6 +284,8 @@
284
284
  --st-component-button-primaryBackground: hsl(215 70% 25%);
285
285
  --st-component-button-primaryText: hsl(0 0% 100%);
286
286
  --st-component-button-secondaryBackground: #f8fafc;
287
+ --st-component-button-secondaryBorder: #e2e8f0;
288
+ --st-component-button-secondaryHoverBackground: #e2e8f0;
287
289
  --st-component-button-secondaryText: #0f172a;
288
290
  --st-component-button-anatomy-shape-radius: 0.375rem;
289
291
  --st-component-button-anatomy-shape-borderWidth: 1px;
@@ -294,18 +296,21 @@
294
296
  --st-component-button-anatomy-density-sm-gap: 0.375rem;
295
297
  --st-component-button-anatomy-density-sm-minWidth: 2rem;
296
298
  --st-component-button-anatomy-density-sm-fontSize: 0.875rem;
299
+ --st-component-button-anatomy-density-sm-paddingInlineEnd: 0.75rem;
297
300
  --st-component-button-anatomy-density-md-controlHeight: 2.5rem;
298
301
  --st-component-button-anatomy-density-md-paddingBlock: 0;
299
302
  --st-component-button-anatomy-density-md-paddingInline: 1rem;
300
303
  --st-component-button-anatomy-density-md-gap: 0.5rem;
301
304
  --st-component-button-anatomy-density-md-minWidth: 2.5rem;
302
305
  --st-component-button-anatomy-density-md-fontSize: 0.9375rem;
306
+ --st-component-button-anatomy-density-md-paddingInlineEnd: 1rem;
303
307
  --st-component-button-anatomy-density-lg-controlHeight: 3rem;
304
308
  --st-component-button-anatomy-density-lg-paddingBlock: 0;
305
309
  --st-component-button-anatomy-density-lg-paddingInline: 1.25rem;
306
310
  --st-component-button-anatomy-density-lg-gap: 0.5rem;
307
311
  --st-component-button-anatomy-density-lg-minWidth: 3rem;
308
312
  --st-component-button-anatomy-density-lg-fontSize: 1rem;
313
+ --st-component-button-anatomy-density-lg-paddingInlineEnd: 1.25rem;
309
314
  --st-component-button-anatomy-typography-family: var(--st-font-sans);
310
315
  --st-component-button-anatomy-typography-size: 0.9375rem;
311
316
  --st-component-button-anatomy-typography-weight: 600;
@@ -365,6 +370,46 @@
365
370
  --st-component-alert-warningBorder: #d97706;
366
371
  --st-component-alert-errorBorder: #dc2626;
367
372
  --st-component-alert-radius: 0.5rem;
373
+ --st-component-alert-borderTop: 1px solid #e2e8f0;
374
+ --st-component-alert-borderRight: 1px solid #e2e8f0;
375
+ --st-component-alert-borderBottom: 1px solid #e2e8f0;
376
+ --st-component-alert-accentWidth: 0.25rem;
377
+ --st-component-alert-filetWidth: 0;
378
+ --st-component-alert-paddingTop: 1rem;
379
+ --st-component-alert-paddingRight: 1rem;
380
+ --st-component-alert-paddingBottom: 1rem;
381
+ --st-component-alert-paddingLeft: 1rem;
382
+ --st-component-alert-fontSize: inherit;
383
+ --st-component-alert-lineHeight: normal;
384
+ --st-component-alert-letterSpacing: normal;
385
+ --st-component-accordion-text: #0f172a;
386
+ --st-component-accordion-paddingBlock: 0.875rem;
387
+ --st-component-accordion-paddingInline: 0.5rem;
388
+ --st-component-accordion-fontSize: inherit;
389
+ --st-component-accordion-fontWeight: 600;
390
+ --st-component-accordion-lineHeight: normal;
391
+ --st-component-tag-radius: 999px;
392
+ --st-component-tag-paddingBlock: 0.25rem;
393
+ --st-component-tag-paddingInline: 0.625rem;
394
+ --st-component-tag-fontSize: 0.75rem;
395
+ --st-component-tag-fontWeight: 600;
396
+ --st-component-tag-lineHeight: 1;
397
+ --st-component-tag-letterSpacing: normal;
398
+ --st-component-tag-textTransform: none;
399
+ --st-component-tag-minHeight: 0;
400
+ --st-component-tag-neutralBackground: #f8fafc;
401
+ --st-component-tag-neutralText: #475569;
402
+ --st-component-badge-radius: 999px;
403
+ --st-component-badge-paddingBlock: 0.25rem;
404
+ --st-component-badge-paddingInline: 0.5rem;
405
+ --st-component-badge-fontSize: 0.75rem;
406
+ --st-component-badge-fontWeight: 650;
407
+ --st-component-badge-lineHeight: 1;
408
+ --st-component-badge-letterSpacing: normal;
409
+ --st-component-badge-textTransform: none;
410
+ --st-component-badge-minHeight: 0;
411
+ --st-component-badge-infoBackground: color-mix(in srgb, #2563eb 14%, white);
412
+ --st-component-badge-infoText: #2563eb;
368
413
  --st-component-card-background: #ffffff;
369
414
  --st-component-card-border: #e2e8f0;
370
415
  --st-component-card-radius: 0.5rem;
@@ -373,10 +418,10 @@
373
418
  --st-component-card-anatomy-shape-borderWidth: 1px;
374
419
  --st-component-card-anatomy-shape-borderStyle: solid;
375
420
  --st-component-card-anatomy-typography-family: var(--st-font-sans);
376
- --st-component-card-anatomy-typography-size: 1rem;
421
+ --st-component-card-anatomy-typography-size: inherit;
377
422
  --st-component-card-anatomy-typography-weight: 400;
378
- --st-component-card-anatomy-typography-lineHeight: 1.5;
379
- --st-component-card-anatomy-typography-letterSpacing: 0;
423
+ --st-component-card-anatomy-typography-lineHeight: normal;
424
+ --st-component-card-anatomy-typography-letterSpacing: normal;
380
425
  --st-component-card-anatomy-typography-textTransform: none;
381
426
  --st-component-card-anatomy-typography-textDecoration: none;
382
427
  --st-component-card-anatomy-typography-decorationThickness: auto;
@@ -484,6 +529,12 @@
484
529
  --st-component-control-anatomy-field-borderRight: 1px solid #e2e8f0;
485
530
  --st-component-control-anatomy-field-borderBottom: 1px solid #e2e8f0;
486
531
  --st-component-control-anatomy-field-borderLeft: 1px solid #e2e8f0;
532
+ --st-component-control-anatomy-field-radiusTop: 0.375rem;
533
+ --st-component-control-anatomy-field-underline: none;
534
+ --st-component-control-anatomy-field-focusShadow: none;
535
+ --st-component-control-anatomy-field-selectAppearance: auto;
536
+ --st-component-control-anatomy-field-selectChevron: none;
537
+ --st-component-control-anatomy-field-selectPaddingRight: 2rem;
487
538
  --st-component-control-anatomy-states-hover-border: #94a3b8;
488
539
  --st-component-control-anatomy-states-focus-border: oklch(50% 0.134 242.749);
489
540
  --st-component-control-anatomy-states-disabled-bg: #f8fafc;
@@ -494,6 +545,25 @@
494
545
  --st-component-selection-switchTrack: #94a3b8;
495
546
  --st-component-selection-switchTrackChecked: hsl(215 70% 25%);
496
547
  --st-component-selection-switchThumb: #ffffff;
548
+ --st-component-selection-choiceLabelFontSize: 0.9375rem;
549
+ --st-component-selection-choiceLabelLineHeight: normal;
550
+ --st-component-selection-choiceRadioLineHeight: normal;
551
+ --st-component-selection-choiceLabelLetterSpacing: normal;
552
+ --st-component-selection-choiceLabelColor: #0f172a;
553
+ --st-component-selection-toggleTrackRadius: 999px;
554
+ --st-component-selection-toggleTrackPadding: 0.125rem;
555
+ --st-component-selection-toggleTrackWidth: 2.25rem;
556
+ --st-component-selection-toggleTrackHeight: 1.25rem;
557
+ --st-component-selection-toggleThumbSize: 1rem;
558
+ --st-component-selection-toggleFontSize: inherit;
559
+ --st-component-selection-toggleLineHeight: normal;
560
+ --st-component-selection-toggleLetterSpacing: normal;
561
+ --st-component-selection-toggleTextColor: #0f172a;
562
+ --st-component-search-paddingBlock: 0;
563
+ --st-component-search-paddingInline: 0;
564
+ --st-component-search-fontSize: 1rem;
565
+ --st-component-search-lineHeight: normal;
566
+ --st-component-search-letterSpacing: normal;
497
567
  --st-component-overlay-backdrop: rgb(15 23 42 / 0.48);
498
568
  --st-component-overlay-surface: #ffffff;
499
569
  --st-component-overlay-border: #e2e8f0;
@@ -538,10 +608,20 @@
538
608
  --st-component-dataTable-captionText: #475569;
539
609
  --st-component-dataTable-radius: 0.5rem;
540
610
  --st-component-tabs-activeText: #0f172a;
611
+ --st-component-tabs-activeBackground: transparent;
612
+ --st-component-tabs-inactiveBackground: transparent;
613
+ --st-component-tabs-activeWeight: 600;
541
614
  --st-component-tabs-inactiveText: #475569;
542
615
  --st-component-tabs-border: #e2e8f0;
543
616
  --st-component-tabs-indicator: hsl(215 70% 25%);
544
617
  --st-component-tabs-panelBackground: #ffffff;
618
+ --st-component-tabs-tabPaddingBlock: 0.75rem;
619
+ --st-component-tabs-tabPaddingInline: 0.25rem;
620
+ --st-component-tabs-tabFontSize: inherit;
621
+ --st-component-tabs-tabLineHeight: 1.2;
622
+ --st-component-tabs-activeBorderTopWidth: 0;
623
+ --st-component-tabs-activeBorderBottomWidth: 1px;
624
+ --st-component-tabs-activeShadow: none;
545
625
  --st-component-tabs-anatomy-shape-radius: 0;
546
626
  --st-component-tabs-anatomy-shape-borderWidth: 1px;
547
627
  --st-component-tabs-anatomy-shape-borderStyle: solid;
@@ -576,10 +656,24 @@
576
656
  --st-component-pagination-activeText: hsl(0 0% 100%);
577
657
  --st-component-pagination-disabledText: #64748b;
578
658
  --st-component-pagination-radius: 0.375rem;
659
+ --st-component-pagination-borderWidth: 1px;
660
+ --st-component-pagination-activeBorder: #e2e8f0;
661
+ --st-component-pagination-activeBorderWidth: 1px;
662
+ --st-component-pagination-activeWeight: inherit;
663
+ --st-component-pagination-paddingBlock: 0;
664
+ --st-component-pagination-paddingInline: 0.75rem;
665
+ --st-component-pagination-minSize: 2.25rem;
666
+ --st-component-pagination-fontSize: inherit;
667
+ --st-component-pagination-lineHeight: normal;
668
+ --st-component-pagination-letterSpacing: normal;
579
669
  --st-component-breadcrumb-text: #475569;
580
670
  --st-component-breadcrumb-currentText: #0f172a;
581
671
  --st-component-breadcrumb-separator: #64748b;
582
672
  --st-component-breadcrumb-linkText: oklch(50% 0.134 242.749);
673
+ --st-component-breadcrumb-fontSize: inherit;
674
+ --st-component-breadcrumb-lineHeight: normal;
675
+ --st-component-breadcrumb-letterSpacing: normal;
676
+ --st-component-breadcrumb-currentWeight: 600;
583
677
  --st-component-sideNav-background: #ffffff;
584
678
  --st-component-sideNav-border: #e2e8f0;
585
679
  --st-component-sideNav-itemText: #475569;
package/css/sent-tech.css CHANGED
@@ -284,6 +284,8 @@
284
284
  --st-component-button-primaryBackground: oklch(50% 0.134 242.749);
285
285
  --st-component-button-primaryText: #ffffff;
286
286
  --st-component-button-secondaryBackground: #f8fafc;
287
+ --st-component-button-secondaryBorder: #e2e8f0;
288
+ --st-component-button-secondaryHoverBackground: #e2e8f0;
287
289
  --st-component-button-secondaryText: #0f172a;
288
290
  --st-component-button-anatomy-shape-radius: 0.375rem;
289
291
  --st-component-button-anatomy-shape-borderWidth: 1px;
@@ -294,18 +296,21 @@
294
296
  --st-component-button-anatomy-density-sm-gap: 0.375rem;
295
297
  --st-component-button-anatomy-density-sm-minWidth: 2rem;
296
298
  --st-component-button-anatomy-density-sm-fontSize: 0.875rem;
299
+ --st-component-button-anatomy-density-sm-paddingInlineEnd: 0.75rem;
297
300
  --st-component-button-anatomy-density-md-controlHeight: 2.5rem;
298
301
  --st-component-button-anatomy-density-md-paddingBlock: 0;
299
302
  --st-component-button-anatomy-density-md-paddingInline: 1rem;
300
303
  --st-component-button-anatomy-density-md-gap: 0.5rem;
301
304
  --st-component-button-anatomy-density-md-minWidth: 2.5rem;
302
305
  --st-component-button-anatomy-density-md-fontSize: 0.9375rem;
306
+ --st-component-button-anatomy-density-md-paddingInlineEnd: 1rem;
303
307
  --st-component-button-anatomy-density-lg-controlHeight: 3rem;
304
308
  --st-component-button-anatomy-density-lg-paddingBlock: 0;
305
309
  --st-component-button-anatomy-density-lg-paddingInline: 1.25rem;
306
310
  --st-component-button-anatomy-density-lg-gap: 0.5rem;
307
311
  --st-component-button-anatomy-density-lg-minWidth: 3rem;
308
312
  --st-component-button-anatomy-density-lg-fontSize: 1rem;
313
+ --st-component-button-anatomy-density-lg-paddingInlineEnd: 1.25rem;
309
314
  --st-component-button-anatomy-typography-family: var(--st-font-sans);
310
315
  --st-component-button-anatomy-typography-size: 0.9375rem;
311
316
  --st-component-button-anatomy-typography-weight: 600;
@@ -365,6 +370,46 @@
365
370
  --st-component-alert-warningBorder: #d97706;
366
371
  --st-component-alert-errorBorder: #dc2626;
367
372
  --st-component-alert-radius: 0.5rem;
373
+ --st-component-alert-borderTop: 1px solid #e2e8f0;
374
+ --st-component-alert-borderRight: 1px solid #e2e8f0;
375
+ --st-component-alert-borderBottom: 1px solid #e2e8f0;
376
+ --st-component-alert-accentWidth: 0.25rem;
377
+ --st-component-alert-filetWidth: 0;
378
+ --st-component-alert-paddingTop: 1rem;
379
+ --st-component-alert-paddingRight: 1rem;
380
+ --st-component-alert-paddingBottom: 1rem;
381
+ --st-component-alert-paddingLeft: 1rem;
382
+ --st-component-alert-fontSize: inherit;
383
+ --st-component-alert-lineHeight: normal;
384
+ --st-component-alert-letterSpacing: normal;
385
+ --st-component-accordion-text: #0f172a;
386
+ --st-component-accordion-paddingBlock: 0.875rem;
387
+ --st-component-accordion-paddingInline: 0.5rem;
388
+ --st-component-accordion-fontSize: inherit;
389
+ --st-component-accordion-fontWeight: 600;
390
+ --st-component-accordion-lineHeight: normal;
391
+ --st-component-tag-radius: 999px;
392
+ --st-component-tag-paddingBlock: 0.25rem;
393
+ --st-component-tag-paddingInline: 0.625rem;
394
+ --st-component-tag-fontSize: 0.75rem;
395
+ --st-component-tag-fontWeight: 600;
396
+ --st-component-tag-lineHeight: 1;
397
+ --st-component-tag-letterSpacing: normal;
398
+ --st-component-tag-textTransform: none;
399
+ --st-component-tag-minHeight: 0;
400
+ --st-component-tag-neutralBackground: #f8fafc;
401
+ --st-component-tag-neutralText: #475569;
402
+ --st-component-badge-radius: 999px;
403
+ --st-component-badge-paddingBlock: 0.25rem;
404
+ --st-component-badge-paddingInline: 0.5rem;
405
+ --st-component-badge-fontSize: 0.75rem;
406
+ --st-component-badge-fontWeight: 650;
407
+ --st-component-badge-lineHeight: 1;
408
+ --st-component-badge-letterSpacing: normal;
409
+ --st-component-badge-textTransform: none;
410
+ --st-component-badge-minHeight: 0;
411
+ --st-component-badge-infoBackground: color-mix(in srgb, #2563eb 14%, white);
412
+ --st-component-badge-infoText: #2563eb;
368
413
  --st-component-card-background: #ffffff;
369
414
  --st-component-card-border: #e2e8f0;
370
415
  --st-component-card-radius: 0.5rem;
@@ -373,10 +418,10 @@
373
418
  --st-component-card-anatomy-shape-borderWidth: 1px;
374
419
  --st-component-card-anatomy-shape-borderStyle: solid;
375
420
  --st-component-card-anatomy-typography-family: var(--st-font-sans);
376
- --st-component-card-anatomy-typography-size: 1rem;
421
+ --st-component-card-anatomy-typography-size: inherit;
377
422
  --st-component-card-anatomy-typography-weight: 400;
378
- --st-component-card-anatomy-typography-lineHeight: 1.5;
379
- --st-component-card-anatomy-typography-letterSpacing: 0;
423
+ --st-component-card-anatomy-typography-lineHeight: normal;
424
+ --st-component-card-anatomy-typography-letterSpacing: normal;
380
425
  --st-component-card-anatomy-typography-textTransform: none;
381
426
  --st-component-card-anatomy-typography-textDecoration: none;
382
427
  --st-component-card-anatomy-typography-decorationThickness: auto;
@@ -484,6 +529,12 @@
484
529
  --st-component-control-anatomy-field-borderRight: 1px solid #e2e8f0;
485
530
  --st-component-control-anatomy-field-borderBottom: 1px solid #e2e8f0;
486
531
  --st-component-control-anatomy-field-borderLeft: 1px solid #e2e8f0;
532
+ --st-component-control-anatomy-field-radiusTop: 0.375rem;
533
+ --st-component-control-anatomy-field-underline: none;
534
+ --st-component-control-anatomy-field-focusShadow: none;
535
+ --st-component-control-anatomy-field-selectAppearance: auto;
536
+ --st-component-control-anatomy-field-selectChevron: none;
537
+ --st-component-control-anatomy-field-selectPaddingRight: 2rem;
487
538
  --st-component-control-anatomy-states-hover-border: #94a3b8;
488
539
  --st-component-control-anatomy-states-focus-border: oklch(50% 0.134 242.749);
489
540
  --st-component-control-anatomy-states-disabled-bg: #f8fafc;
@@ -494,6 +545,25 @@
494
545
  --st-component-selection-switchTrack: #94a3b8;
495
546
  --st-component-selection-switchTrackChecked: oklch(50% 0.134 242.749);
496
547
  --st-component-selection-switchThumb: #ffffff;
548
+ --st-component-selection-choiceLabelFontSize: 0.9375rem;
549
+ --st-component-selection-choiceLabelLineHeight: normal;
550
+ --st-component-selection-choiceRadioLineHeight: normal;
551
+ --st-component-selection-choiceLabelLetterSpacing: normal;
552
+ --st-component-selection-choiceLabelColor: #0f172a;
553
+ --st-component-selection-toggleTrackRadius: 999px;
554
+ --st-component-selection-toggleTrackPadding: 0.125rem;
555
+ --st-component-selection-toggleTrackWidth: 2.25rem;
556
+ --st-component-selection-toggleTrackHeight: 1.25rem;
557
+ --st-component-selection-toggleThumbSize: 1rem;
558
+ --st-component-selection-toggleFontSize: inherit;
559
+ --st-component-selection-toggleLineHeight: normal;
560
+ --st-component-selection-toggleLetterSpacing: normal;
561
+ --st-component-selection-toggleTextColor: #0f172a;
562
+ --st-component-search-paddingBlock: 0;
563
+ --st-component-search-paddingInline: 0;
564
+ --st-component-search-fontSize: 1rem;
565
+ --st-component-search-lineHeight: normal;
566
+ --st-component-search-letterSpacing: normal;
497
567
  --st-component-overlay-backdrop: rgb(15 23 42 / 0.48);
498
568
  --st-component-overlay-surface: #ffffff;
499
569
  --st-component-overlay-border: #e2e8f0;
@@ -538,10 +608,20 @@
538
608
  --st-component-dataTable-captionText: #475569;
539
609
  --st-component-dataTable-radius: 0.5rem;
540
610
  --st-component-tabs-activeText: #0f172a;
611
+ --st-component-tabs-activeBackground: transparent;
612
+ --st-component-tabs-inactiveBackground: transparent;
613
+ --st-component-tabs-activeWeight: 600;
541
614
  --st-component-tabs-inactiveText: #475569;
542
615
  --st-component-tabs-border: #e2e8f0;
543
616
  --st-component-tabs-indicator: oklch(50% 0.134 242.749);
544
617
  --st-component-tabs-panelBackground: #ffffff;
618
+ --st-component-tabs-tabPaddingBlock: 0.75rem;
619
+ --st-component-tabs-tabPaddingInline: 0.25rem;
620
+ --st-component-tabs-tabFontSize: inherit;
621
+ --st-component-tabs-tabLineHeight: 1.2;
622
+ --st-component-tabs-activeBorderTopWidth: 0;
623
+ --st-component-tabs-activeBorderBottomWidth: 1px;
624
+ --st-component-tabs-activeShadow: none;
545
625
  --st-component-tabs-anatomy-shape-radius: 0;
546
626
  --st-component-tabs-anatomy-shape-borderWidth: 1px;
547
627
  --st-component-tabs-anatomy-shape-borderStyle: solid;
@@ -576,10 +656,24 @@
576
656
  --st-component-pagination-activeText: #ffffff;
577
657
  --st-component-pagination-disabledText: #64748b;
578
658
  --st-component-pagination-radius: 0.375rem;
659
+ --st-component-pagination-borderWidth: 1px;
660
+ --st-component-pagination-activeBorder: #e2e8f0;
661
+ --st-component-pagination-activeBorderWidth: 1px;
662
+ --st-component-pagination-activeWeight: inherit;
663
+ --st-component-pagination-paddingBlock: 0;
664
+ --st-component-pagination-paddingInline: 0.75rem;
665
+ --st-component-pagination-minSize: 2.25rem;
666
+ --st-component-pagination-fontSize: inherit;
667
+ --st-component-pagination-lineHeight: normal;
668
+ --st-component-pagination-letterSpacing: normal;
579
669
  --st-component-breadcrumb-text: #475569;
580
670
  --st-component-breadcrumb-currentText: #0f172a;
581
671
  --st-component-breadcrumb-separator: #64748b;
582
672
  --st-component-breadcrumb-linkText: oklch(50% 0.134 242.749);
673
+ --st-component-breadcrumb-fontSize: inherit;
674
+ --st-component-breadcrumb-lineHeight: normal;
675
+ --st-component-breadcrumb-letterSpacing: normal;
676
+ --st-component-breadcrumb-currentWeight: 600;
583
677
  --st-component-sideNav-background: #ffffff;
584
678
  --st-component-sideNav-border: #e2e8f0;
585
679
  --st-component-sideNav-itemText: #475569;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sentropic/design-system-themes",
3
- "version": "0.10.0",
3
+ "version": "0.10.2",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -29,7 +29,7 @@
29
29
  "css"
30
30
  ],
31
31
  "dependencies": {
32
- "@sentropic/design-system-tokens": "0.10.0"
32
+ "@sentropic/design-system-tokens": "0.10.2"
33
33
  },
34
34
  "scripts": {
35
35
  "build": "tsc -p tsconfig.json && npm run build:css",