@sentropic/design-system-themes 0.10.2 → 0.11.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 (4) hide show
  1. package/css/entropic.css +24 -0
  2. package/css/forge.css +24 -0
  3. package/css/sent-tech.css +24 -0
  4. package/package.json +2 -2
package/css/entropic.css CHANGED
@@ -349,6 +349,8 @@
349
349
  --st-component-link-anatomy-typography-textDecoration: underline;
350
350
  --st-component-link-anatomy-typography-decorationThickness: auto;
351
351
  --st-component-link-anatomy-typography-decorationOffset: 0.18em;
352
+ --st-component-link-anatomy-typography-decorationThicknessHover: auto;
353
+ --st-component-link-anatomy-typography-decorationOffsetHover: 0.18em;
352
354
  --st-component-link-anatomy-typography-textDecorationHover: underline;
353
355
  --st-component-link-anatomy-focus-strategy: outline;
354
356
  --st-component-link-anatomy-focus-width: 2px;
@@ -433,11 +435,14 @@
433
435
  --st-component-card-anatomy-focus-inset: 0;
434
436
  --st-component-card-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
435
437
  --st-component-card-anatomy-focus-boxShadow: none;
438
+ --st-component-card-anatomy-states-hover-bg: #ffffff;
436
439
  --st-component-card-anatomy-states-hover-transform: translateY(-1px);
437
440
  --st-component-menu-background: #ffffff;
438
441
  --st-component-menu-border: #e2e8f0;
439
442
  --st-component-menu-text: #0f172a;
440
443
  --st-component-menu-itemHoverBackground: #f8fafc;
444
+ --st-component-menu-dangerText: #dc2626;
445
+ --st-component-menu-dangerHoverBackground: rgba(185, 28, 28, 0.08);
441
446
  --st-component-menu-disabledText: #64748b;
442
447
  --st-component-menu-radius: 0.375rem;
443
448
  --st-component-menu-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
@@ -478,6 +483,7 @@
478
483
  --st-component-control-placeholderText: #64748b;
479
484
  --st-component-control-border: #e2e8f0;
480
485
  --st-component-control-hoverBorder: #94a3b8;
486
+ --st-component-control-hoverBackground: #f8fafc;
481
487
  --st-component-control-focusRing: oklch(50% 0.134 242.749);
482
488
  --st-component-control-invalidBorder: #dc2626;
483
489
  --st-component-control-disabledBackground: #f8fafc;
@@ -530,6 +536,7 @@
530
536
  --st-component-control-anatomy-field-borderBottom: 1px solid #e2e8f0;
531
537
  --st-component-control-anatomy-field-borderLeft: 1px solid #e2e8f0;
532
538
  --st-component-control-anatomy-field-radiusTop: 0.375rem;
539
+ --st-component-control-anatomy-field-radiusBottom: 0.375rem;
533
540
  --st-component-control-anatomy-field-underline: none;
534
541
  --st-component-control-anatomy-field-focusShadow: none;
535
542
  --st-component-control-anatomy-field-selectAppearance: auto;
@@ -561,6 +568,8 @@
561
568
  --st-component-selection-toggleTextColor: #0f172a;
562
569
  --st-component-search-paddingBlock: 0;
563
570
  --st-component-search-paddingInline: 0;
571
+ --st-component-search-paddingLeft: 0;
572
+ --st-component-search-paddingRight: 0;
564
573
  --st-component-search-fontSize: 1rem;
565
574
  --st-component-search-lineHeight: normal;
566
575
  --st-component-search-letterSpacing: normal;
@@ -666,6 +675,15 @@
666
675
  --st-component-pagination-fontSize: inherit;
667
676
  --st-component-pagination-lineHeight: normal;
668
677
  --st-component-pagination-letterSpacing: normal;
678
+ --st-component-paginationNav-background: #ffffff;
679
+ --st-component-paginationNav-border: #e2e8f0;
680
+ --st-component-paginationNav-radius: 0.375rem;
681
+ --st-component-paginationNav-text: #0f172a;
682
+ --st-component-paginationNav-hoverBackground: #f8fafc;
683
+ --st-component-paginationNav-activeBackground: oklch(50% 0.134 242.749);
684
+ --st-component-paginationNav-activeText: #ffffff;
685
+ --st-component-paginationNav-disabledText: #64748b;
686
+ --st-component-paginationNav-ellipsisText: #64748b;
669
687
  --st-component-breadcrumb-text: #475569;
670
688
  --st-component-breadcrumb-currentText: #0f172a;
671
689
  --st-component-breadcrumb-separator: #64748b;
@@ -680,6 +698,12 @@
680
698
  --st-component-sideNav-activeBackground: #f8fafc;
681
699
  --st-component-sideNav-activeText: #0f172a;
682
700
  --st-component-sideNav-width: 16rem;
701
+ --st-component-selectableRow-selectedBackground: color-mix(in oklch, oklch(50% 0.134 242.749) 12%, transparent);
702
+ --st-component-selectableRow-selectedAccent: oklch(50% 0.134 242.749);
703
+ --st-component-selectableRow-selectedText: color-mix(in oklch, oklch(50% 0.134 242.749) 78%, black);
704
+ --st-component-selectableRow-selectedBackgroundDark: color-mix(in oklch, oklch(50% 0.134 242.749) 22%, transparent);
705
+ --st-component-selectableRow-selectedAccentDark: oklch(50% 0.134 242.749);
706
+ --st-component-selectableRow-selectedTextDark: color-mix(in oklch, oklch(50% 0.134 242.749) 70%, white);
683
707
  --st-component-chat-userBubbleBackground: oklch(50% 0.134 242.749);
684
708
  --st-component-chat-userBubbleText: #ffffff;
685
709
  --st-component-chat-assistantBubbleBackground: #f8fafc;
package/css/forge.css CHANGED
@@ -349,6 +349,8 @@
349
349
  --st-component-link-anatomy-typography-textDecoration: underline;
350
350
  --st-component-link-anatomy-typography-decorationThickness: auto;
351
351
  --st-component-link-anatomy-typography-decorationOffset: 0.18em;
352
+ --st-component-link-anatomy-typography-decorationThicknessHover: auto;
353
+ --st-component-link-anatomy-typography-decorationOffsetHover: 0.18em;
352
354
  --st-component-link-anatomy-typography-textDecorationHover: underline;
353
355
  --st-component-link-anatomy-focus-strategy: outline;
354
356
  --st-component-link-anatomy-focus-width: 2px;
@@ -433,11 +435,14 @@
433
435
  --st-component-card-anatomy-focus-inset: 0;
434
436
  --st-component-card-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
435
437
  --st-component-card-anatomy-focus-boxShadow: none;
438
+ --st-component-card-anatomy-states-hover-bg: #ffffff;
436
439
  --st-component-card-anatomy-states-hover-transform: translateY(-1px);
437
440
  --st-component-menu-background: #ffffff;
438
441
  --st-component-menu-border: #e2e8f0;
439
442
  --st-component-menu-text: #0f172a;
440
443
  --st-component-menu-itemHoverBackground: #f8fafc;
444
+ --st-component-menu-dangerText: #dc2626;
445
+ --st-component-menu-dangerHoverBackground: rgba(185, 28, 28, 0.08);
441
446
  --st-component-menu-disabledText: #64748b;
442
447
  --st-component-menu-radius: 0.375rem;
443
448
  --st-component-menu-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
@@ -478,6 +483,7 @@
478
483
  --st-component-control-placeholderText: #64748b;
479
484
  --st-component-control-border: #e2e8f0;
480
485
  --st-component-control-hoverBorder: #94a3b8;
486
+ --st-component-control-hoverBackground: #f8fafc;
481
487
  --st-component-control-focusRing: oklch(50% 0.134 242.749);
482
488
  --st-component-control-invalidBorder: #dc2626;
483
489
  --st-component-control-disabledBackground: #f8fafc;
@@ -530,6 +536,7 @@
530
536
  --st-component-control-anatomy-field-borderBottom: 1px solid #e2e8f0;
531
537
  --st-component-control-anatomy-field-borderLeft: 1px solid #e2e8f0;
532
538
  --st-component-control-anatomy-field-radiusTop: 0.375rem;
539
+ --st-component-control-anatomy-field-radiusBottom: 0.375rem;
533
540
  --st-component-control-anatomy-field-underline: none;
534
541
  --st-component-control-anatomy-field-focusShadow: none;
535
542
  --st-component-control-anatomy-field-selectAppearance: auto;
@@ -561,6 +568,8 @@
561
568
  --st-component-selection-toggleTextColor: #0f172a;
562
569
  --st-component-search-paddingBlock: 0;
563
570
  --st-component-search-paddingInline: 0;
571
+ --st-component-search-paddingLeft: 0;
572
+ --st-component-search-paddingRight: 0;
564
573
  --st-component-search-fontSize: 1rem;
565
574
  --st-component-search-lineHeight: normal;
566
575
  --st-component-search-letterSpacing: normal;
@@ -666,6 +675,15 @@
666
675
  --st-component-pagination-fontSize: inherit;
667
676
  --st-component-pagination-lineHeight: normal;
668
677
  --st-component-pagination-letterSpacing: normal;
678
+ --st-component-paginationNav-background: #ffffff;
679
+ --st-component-paginationNav-border: #e2e8f0;
680
+ --st-component-paginationNav-radius: 0.375rem;
681
+ --st-component-paginationNav-text: #0f172a;
682
+ --st-component-paginationNav-hoverBackground: #f8fafc;
683
+ --st-component-paginationNav-activeBackground: hsl(215 70% 25%);
684
+ --st-component-paginationNav-activeText: hsl(0 0% 100%);
685
+ --st-component-paginationNav-disabledText: #64748b;
686
+ --st-component-paginationNav-ellipsisText: #64748b;
669
687
  --st-component-breadcrumb-text: #475569;
670
688
  --st-component-breadcrumb-currentText: #0f172a;
671
689
  --st-component-breadcrumb-separator: #64748b;
@@ -680,6 +698,12 @@
680
698
  --st-component-sideNav-activeBackground: #f8fafc;
681
699
  --st-component-sideNav-activeText: #0f172a;
682
700
  --st-component-sideNav-width: 16rem;
701
+ --st-component-selectableRow-selectedBackground: color-mix(in oklch, hsl(215 70% 25%) 12%, transparent);
702
+ --st-component-selectableRow-selectedAccent: hsl(215 70% 25%);
703
+ --st-component-selectableRow-selectedText: color-mix(in oklch, hsl(215 70% 25%) 78%, black);
704
+ --st-component-selectableRow-selectedBackgroundDark: color-mix(in oklch, hsl(215 70% 25%) 22%, transparent);
705
+ --st-component-selectableRow-selectedAccentDark: hsl(215 70% 25%);
706
+ --st-component-selectableRow-selectedTextDark: color-mix(in oklch, hsl(215 70% 25%) 70%, white);
683
707
  --st-component-chat-userBubbleBackground: hsl(215 70% 25%);
684
708
  --st-component-chat-userBubbleText: hsl(0 0% 100%);
685
709
  --st-component-chat-assistantBubbleBackground: #f8fafc;
package/css/sent-tech.css CHANGED
@@ -349,6 +349,8 @@
349
349
  --st-component-link-anatomy-typography-textDecoration: underline;
350
350
  --st-component-link-anatomy-typography-decorationThickness: auto;
351
351
  --st-component-link-anatomy-typography-decorationOffset: 0.18em;
352
+ --st-component-link-anatomy-typography-decorationThicknessHover: auto;
353
+ --st-component-link-anatomy-typography-decorationOffsetHover: 0.18em;
352
354
  --st-component-link-anatomy-typography-textDecorationHover: underline;
353
355
  --st-component-link-anatomy-focus-strategy: outline;
354
356
  --st-component-link-anatomy-focus-width: 2px;
@@ -433,11 +435,14 @@
433
435
  --st-component-card-anatomy-focus-inset: 0;
434
436
  --st-component-card-anatomy-focus-outline: 2px solid var(--st-semantic-border-interactive);
435
437
  --st-component-card-anatomy-focus-boxShadow: none;
438
+ --st-component-card-anatomy-states-hover-bg: #ffffff;
436
439
  --st-component-card-anatomy-states-hover-transform: translateY(-1px);
437
440
  --st-component-menu-background: #ffffff;
438
441
  --st-component-menu-border: #e2e8f0;
439
442
  --st-component-menu-text: #0f172a;
440
443
  --st-component-menu-itemHoverBackground: #f8fafc;
444
+ --st-component-menu-dangerText: #dc2626;
445
+ --st-component-menu-dangerHoverBackground: rgba(185, 28, 28, 0.08);
441
446
  --st-component-menu-disabledText: #64748b;
442
447
  --st-component-menu-radius: 0.375rem;
443
448
  --st-component-menu-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
@@ -478,6 +483,7 @@
478
483
  --st-component-control-placeholderText: #64748b;
479
484
  --st-component-control-border: #e2e8f0;
480
485
  --st-component-control-hoverBorder: #94a3b8;
486
+ --st-component-control-hoverBackground: #f8fafc;
481
487
  --st-component-control-focusRing: oklch(50% 0.134 242.749);
482
488
  --st-component-control-invalidBorder: #dc2626;
483
489
  --st-component-control-disabledBackground: #f8fafc;
@@ -530,6 +536,7 @@
530
536
  --st-component-control-anatomy-field-borderBottom: 1px solid #e2e8f0;
531
537
  --st-component-control-anatomy-field-borderLeft: 1px solid #e2e8f0;
532
538
  --st-component-control-anatomy-field-radiusTop: 0.375rem;
539
+ --st-component-control-anatomy-field-radiusBottom: 0.375rem;
533
540
  --st-component-control-anatomy-field-underline: none;
534
541
  --st-component-control-anatomy-field-focusShadow: none;
535
542
  --st-component-control-anatomy-field-selectAppearance: auto;
@@ -561,6 +568,8 @@
561
568
  --st-component-selection-toggleTextColor: #0f172a;
562
569
  --st-component-search-paddingBlock: 0;
563
570
  --st-component-search-paddingInline: 0;
571
+ --st-component-search-paddingLeft: 0;
572
+ --st-component-search-paddingRight: 0;
564
573
  --st-component-search-fontSize: 1rem;
565
574
  --st-component-search-lineHeight: normal;
566
575
  --st-component-search-letterSpacing: normal;
@@ -666,6 +675,15 @@
666
675
  --st-component-pagination-fontSize: inherit;
667
676
  --st-component-pagination-lineHeight: normal;
668
677
  --st-component-pagination-letterSpacing: normal;
678
+ --st-component-paginationNav-background: #ffffff;
679
+ --st-component-paginationNav-border: #e2e8f0;
680
+ --st-component-paginationNav-radius: 0.375rem;
681
+ --st-component-paginationNav-text: #0f172a;
682
+ --st-component-paginationNav-hoverBackground: #f8fafc;
683
+ --st-component-paginationNav-activeBackground: oklch(50% 0.134 242.749);
684
+ --st-component-paginationNav-activeText: #ffffff;
685
+ --st-component-paginationNav-disabledText: #64748b;
686
+ --st-component-paginationNav-ellipsisText: #64748b;
669
687
  --st-component-breadcrumb-text: #475569;
670
688
  --st-component-breadcrumb-currentText: #0f172a;
671
689
  --st-component-breadcrumb-separator: #64748b;
@@ -680,6 +698,12 @@
680
698
  --st-component-sideNav-activeBackground: #f8fafc;
681
699
  --st-component-sideNav-activeText: #0f172a;
682
700
  --st-component-sideNav-width: 16rem;
701
+ --st-component-selectableRow-selectedBackground: color-mix(in oklch, oklch(50% 0.134 242.749) 12%, transparent);
702
+ --st-component-selectableRow-selectedAccent: oklch(50% 0.134 242.749);
703
+ --st-component-selectableRow-selectedText: color-mix(in oklch, oklch(50% 0.134 242.749) 78%, black);
704
+ --st-component-selectableRow-selectedBackgroundDark: color-mix(in oklch, oklch(50% 0.134 242.749) 22%, transparent);
705
+ --st-component-selectableRow-selectedAccentDark: oklch(50% 0.134 242.749);
706
+ --st-component-selectableRow-selectedTextDark: color-mix(in oklch, oklch(50% 0.134 242.749) 70%, white);
683
707
  --st-component-chat-userBubbleBackground: oklch(50% 0.134 242.749);
684
708
  --st-component-chat-userBubbleText: #ffffff;
685
709
  --st-component-chat-assistantBubbleBackground: #f8fafc;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sentropic/design-system-themes",
3
- "version": "0.10.2",
3
+ "version": "0.11.0",
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.2"
32
+ "@sentropic/design-system-tokens": "0.11.0"
33
33
  },
34
34
  "scripts": {
35
35
  "build": "tsc -p tsconfig.json && npm run build:css",