@sage/design-tokens 7.3.0 → 7.3.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.
- package/css/frozenproduct/all.css +24 -24
- package/css/frozenproduct/large/components/progress.css +6 -6
- package/css/frozenproduct/large/components/tab.css +1 -1
- package/css/frozenproduct/small/components/button.css +23 -23
- package/css/frozenproduct/small/components/tab.css +1 -1
- package/css/marketing/all.css +1 -1
- package/css/marketing/large/components/tab.css +1 -1
- package/css/marketing/small/components/tab.css +1 -1
- package/css/product/all.css +1 -1
- package/css/product/large/components/tab.css +1 -1
- package/css/product/small/components/tab.css +1 -1
- package/ios/frozenproduct/large/dark/components/tab.h +1 -1
- package/ios/frozenproduct/large/light/components/tab.h +1 -1
- package/ios/frozenproduct/small/dark/components/tab.h +1 -1
- package/ios/frozenproduct/small/light/components/tab.h +1 -1
- package/ios/marketing/large/dark/components/tab.h +1 -1
- package/ios/marketing/large/light/components/tab.h +1 -1
- package/ios/marketing/small/dark/components/tab.h +1 -1
- package/ios/marketing/small/light/components/tab.h +1 -1
- package/ios/product/large/dark/components/tab.h +1 -1
- package/ios/product/large/light/components/tab.h +1 -1
- package/ios/product/small/dark/components/tab.h +1 -1
- package/ios/product/small/light/components/tab.h +1 -1
- package/js/common/frozenproduct/large/dark/components/tab.js +2 -2
- package/js/common/frozenproduct/large/light/components/tab.js +2 -2
- package/js/common/frozenproduct/small/dark/components/tab.js +2 -2
- package/js/common/frozenproduct/small/light/components/tab.js +2 -2
- package/js/common/marketing/large/dark/components/tab.js +2 -2
- package/js/common/marketing/large/light/components/tab.js +2 -2
- package/js/common/marketing/small/dark/components/tab.js +2 -2
- package/js/common/marketing/small/light/components/tab.js +2 -2
- package/js/common/product/large/dark/components/tab.js +2 -2
- package/js/common/product/large/light/components/tab.js +2 -2
- package/js/common/product/small/dark/components/tab.js +2 -2
- package/js/common/product/small/light/components/tab.js +2 -2
- package/js/es6/frozenproduct/large/dark/components/tab.js +1 -1
- package/js/es6/frozenproduct/large/light/components/tab.js +1 -1
- package/js/es6/frozenproduct/small/dark/components/tab.js +1 -1
- package/js/es6/frozenproduct/small/light/components/tab.js +1 -1
- package/js/es6/marketing/large/dark/components/tab.js +1 -1
- package/js/es6/marketing/large/light/components/tab.js +1 -1
- package/js/es6/marketing/small/dark/components/tab.js +1 -1
- package/js/es6/marketing/small/light/components/tab.js +1 -1
- package/js/es6/product/large/dark/components/tab.js +1 -1
- package/js/es6/product/large/light/components/tab.js +1 -1
- package/js/es6/product/small/dark/components/tab.js +1 -1
- package/js/es6/product/small/light/components/tab.js +1 -1
- package/js/umd/frozenproduct/large/dark/components/tab.js +2 -2
- package/js/umd/frozenproduct/large/light/components/tab.js +2 -2
- package/js/umd/frozenproduct/small/dark/components/tab.js +2 -2
- package/js/umd/frozenproduct/small/light/components/tab.js +2 -2
- package/js/umd/marketing/large/dark/components/tab.js +2 -2
- package/js/umd/marketing/large/light/components/tab.js +2 -2
- package/js/umd/marketing/small/dark/components/tab.js +2 -2
- package/js/umd/marketing/small/light/components/tab.js +2 -2
- package/js/umd/product/large/dark/components/tab.js +2 -2
- package/js/umd/product/large/light/components/tab.js +2 -2
- package/js/umd/product/small/dark/components/tab.js +2 -2
- package/js/umd/product/small/light/components/tab.js +2 -2
- package/json/flat/frozenproduct/large/dark/components/tab.json +1 -1
- package/json/flat/frozenproduct/large/light/components/tab.json +1 -1
- package/json/flat/frozenproduct/small/dark/components/tab.json +1 -1
- package/json/flat/frozenproduct/small/light/components/tab.json +1 -1
- package/json/flat/marketing/large/dark/components/tab.json +1 -1
- package/json/flat/marketing/large/light/components/tab.json +1 -1
- package/json/flat/marketing/small/dark/components/tab.json +1 -1
- package/json/flat/marketing/small/light/components/tab.json +1 -1
- package/json/flat/product/large/dark/components/tab.json +1 -1
- package/json/flat/product/large/light/components/tab.json +1 -1
- package/json/flat/product/small/dark/components/tab.json +1 -1
- package/json/flat/product/small/light/components/tab.json +1 -1
- package/json/nested/frozenproduct/large/dark/components/tab.json +1 -1
- package/json/nested/frozenproduct/large/light/components/tab.json +1 -1
- package/json/nested/frozenproduct/small/dark/components/tab.json +1 -1
- package/json/nested/frozenproduct/small/light/components/tab.json +1 -1
- package/json/nested/marketing/large/dark/components/tab.json +1 -1
- package/json/nested/marketing/large/light/components/tab.json +1 -1
- package/json/nested/marketing/small/dark/components/tab.json +1 -1
- package/json/nested/marketing/small/light/components/tab.json +1 -1
- package/json/nested/product/large/dark/components/tab.json +1 -1
- package/json/nested/product/large/light/components/tab.json +1 -1
- package/json/nested/product/small/dark/components/tab.json +1 -1
- package/json/nested/product/small/light/components/tab.json +1 -1
- package/package.json +1 -1
- package/sage-design-tokens-7.3.1.tgz +0 -0
- package/scss/frozenproduct/large/components/button.scss +23 -23
- package/scss/frozenproduct/large/components/container.scss +9 -9
- package/scss/frozenproduct/large/components/form.scss +7 -7
- package/scss/frozenproduct/large/components/link.scss +2 -2
- package/scss/frozenproduct/large/components/nav.scss +3 -3
- package/scss/frozenproduct/large/components/page.scss +1 -1
- package/scss/frozenproduct/large/components/popover.scss +2 -2
- package/scss/frozenproduct/large/components/progress.scss +6 -6
- package/scss/frozenproduct/large/components/status.scss +3 -3
- package/scss/frozenproduct/large/components/tab.scss +8 -8
- package/scss/frozenproduct/large/components/table.scss +10 -10
- package/scss/frozenproduct/small/components/button.scss +23 -23
- package/scss/frozenproduct/small/components/container.scss +9 -9
- package/scss/frozenproduct/small/components/form.scss +7 -7
- package/scss/frozenproduct/small/components/link.scss +2 -2
- package/scss/frozenproduct/small/components/nav.scss +3 -3
- package/scss/frozenproduct/small/components/page.scss +1 -1
- package/scss/frozenproduct/small/components/popover.scss +2 -2
- package/scss/frozenproduct/small/components/progress.scss +6 -6
- package/scss/frozenproduct/small/components/status.scss +3 -3
- package/scss/frozenproduct/small/components/tab.scss +8 -8
- package/scss/frozenproduct/small/components/table.scss +10 -10
- package/scss/marketing/large/components/tab.scss +1 -1
- package/scss/marketing/small/components/button.scss +23 -23
- package/scss/marketing/small/components/container.scss +9 -9
- package/scss/marketing/small/components/form.scss +7 -7
- package/scss/marketing/small/components/link.scss +2 -2
- package/scss/marketing/small/components/nav.scss +3 -3
- package/scss/marketing/small/components/page.scss +1 -1
- package/scss/marketing/small/components/popover.scss +2 -2
- package/scss/marketing/small/components/progress.scss +6 -6
- package/scss/marketing/small/components/status.scss +3 -3
- package/scss/marketing/small/components/tab.scss +8 -8
- package/scss/marketing/small/components/table.scss +10 -10
- package/scss/product/large/components/tab.scss +1 -1
- package/scss/product/small/components/button.scss +23 -23
- package/scss/product/small/components/container.scss +9 -9
- package/scss/product/small/components/form.scss +7 -7
- package/scss/product/small/components/link.scss +2 -2
- package/scss/product/small/components/nav.scss +3 -3
- package/scss/product/small/components/page.scss +1 -1
- package/scss/product/small/components/popover.scss +2 -2
- package/scss/product/small/components/progress.scss +6 -6
- package/scss/product/small/components/status.scss +3 -3
- package/scss/product/small/components/tab.scss +8 -8
- package/scss/product/small/components/table.scss +10 -10
- package/sage-design-tokens-7.3.0.tgz +0 -0
|
@@ -531,6 +531,9 @@
|
|
|
531
531
|
--button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
|
|
532
532
|
--button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
|
|
533
533
|
--button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
|
|
534
|
+
--button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
|
|
535
|
+
--button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
|
|
536
|
+
--button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
|
|
534
537
|
--button-typography-primary-s: var(--global-typography-component-firm-s);
|
|
535
538
|
--button-typography-primary-m: var(--global-typography-component-firm-m);
|
|
536
539
|
--button-typography-primary-l: var(--global-typography-component-firm-l);
|
|
@@ -543,24 +546,34 @@
|
|
|
543
546
|
--button-typography-subtle-s: var(--global-typography-component-firm-s);
|
|
544
547
|
--button-typography-subtle-m: var(--global-typography-component-firm-m);
|
|
545
548
|
--button-typography-subtle-l: var(--global-typography-component-firm-l);
|
|
549
|
+
--button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
546
550
|
--button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
|
|
547
551
|
--button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
|
|
548
552
|
--button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
|
|
549
553
|
--button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
|
|
550
554
|
--button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
|
|
551
555
|
--button-color-typical-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
|
|
552
|
-
--button-color-typical-secondary-border-
|
|
556
|
+
--button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
557
|
+
--button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
558
|
+
--button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
553
559
|
--button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
|
|
554
560
|
--button-color-typical-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
|
|
561
|
+
--button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
555
562
|
--button-color-typical-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
|
|
556
563
|
--button-color-typical-tertiary-bg-enabled: var(--button-color-none);
|
|
557
564
|
--button-color-typical-tertiary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
|
|
558
|
-
--button-color-typical-tertiary-border-
|
|
565
|
+
--button-color-typical-tertiary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt2-light), var(--modes-color-interactive-monochrome-generic-default-alt2-dark));
|
|
566
|
+
--button-color-typical-tertiary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
567
|
+
--button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
559
568
|
--button-color-typical-tertiary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
|
|
560
|
-
--button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
|
|
561
569
|
--button-color-typical-toggle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
|
|
570
|
+
--button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
571
|
+
--button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
|
|
562
572
|
--button-color-typical-toggle-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
|
|
563
573
|
--button-color-video-bg-blur: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
|
|
574
|
+
--button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
575
|
+
--button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
576
|
+
--button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
564
577
|
--button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
|
|
565
578
|
--button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
|
|
566
579
|
--button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
|
|
@@ -650,8 +663,8 @@
|
|
|
650
663
|
--button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
651
664
|
--button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
652
665
|
--button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
666
|
+
--button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
|
|
653
667
|
--button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
654
|
-
--button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
655
668
|
--button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
|
656
669
|
--button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
|
|
657
670
|
--button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
|
|
@@ -664,30 +677,24 @@
|
|
|
664
677
|
--button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
|
665
678
|
--button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
|
|
666
679
|
--button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
|
|
667
|
-
--button-color-typical-secondary-
|
|
668
|
-
--button-color-typical-secondary-
|
|
680
|
+
--button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
|
|
681
|
+
--button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
|
|
669
682
|
--button-color-typical-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
670
|
-
--button-color-typical-
|
|
683
|
+
--button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
|
|
684
|
+
--button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
|
|
671
685
|
--button-color-typical-subtle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
672
|
-
--button-color-typical-
|
|
673
|
-
--button-color-typical-tertiary-
|
|
674
|
-
--button-color-typical-tertiary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
686
|
+
--button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
|
|
687
|
+
--button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
|
|
675
688
|
--button-color-typical-tertiary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
676
|
-
--button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
677
689
|
--button-color-typical-toggle-label-active-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
|
678
|
-
--button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
679
690
|
--button-color-typical-toggle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
|
|
680
691
|
--button-color-typical-toggle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
681
|
-
--button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
|
|
682
692
|
--button-color-video-primary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
|
|
683
693
|
--button-color-video-primary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
|
|
684
|
-
--button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
685
|
-
--button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
686
694
|
--button-color-video-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
|
|
687
695
|
--button-color-video-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
|
|
688
696
|
--button-color-video-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
|
|
689
697
|
--button-color-video-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
|
|
690
|
-
--button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
|
|
691
698
|
--button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
|
|
692
699
|
--button-radius-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
|
|
693
700
|
--button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
|
|
@@ -709,19 +716,12 @@
|
|
|
709
716
|
--button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */
|
|
710
717
|
--button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
|
|
711
718
|
--button-color-ai-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
712
|
-
--button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
|
|
713
719
|
--button-color-destructive-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
714
720
|
--button-color-destructive-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
715
721
|
--button-color-typical-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
716
|
-
--button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
|
|
717
722
|
--button-color-typical-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
718
|
-
--button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
|
|
719
|
-
--button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
|
|
720
|
-
--button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
|
|
721
|
-
--button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
|
|
722
723
|
--button-color-typical-tertiary-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
723
724
|
--button-color-typical-tertiary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
724
|
-
--button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
|
|
725
725
|
--button-color-typical-toggle-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
726
726
|
|
|
727
727
|
/* container component tokens */
|
|
@@ -1828,7 +1828,7 @@
|
|
|
1828
1828
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
1829
1829
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
1830
1830
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
1831
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
1831
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
1832
1832
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
1833
1833
|
|
|
1834
1834
|
/* table component tokens */
|
|
@@ -23,13 +23,19 @@
|
|
|
23
23
|
--progress-color-fg-ai: var(--modes-color-interactive-ai-default); /* For progress ring in ai buttons */
|
|
24
24
|
--progress-color-fg-alt: var(--modes-color-status-positive-default);
|
|
25
25
|
--progress-color-fg-caution: var(--modes-color-status-caution-default);
|
|
26
|
+
--progress-color-fg-default: var(--modes-color-interactive-monochrome-generic-active);
|
|
26
27
|
--progress-color-fg-error: var(--modes-color-status-negative-default);
|
|
27
28
|
--progress-color-fg-info: var(--modes-color-status-info-default);
|
|
28
29
|
--progress-color-datavis-fg-default: var(--modes-color-status-generic-default);
|
|
30
|
+
--progress-color-loader-fg-default: var(--modes-color-interactive-monochrome-generic-active); /* used for loader standard loader spinner */
|
|
29
31
|
--progress-color-loader-fg-error: var(--modes-color-status-negative-default);
|
|
30
32
|
--progress-color-loader-fg-complete: var(--modes-color-status-positive-default);
|
|
33
|
+
--progress-color-stepflow-bg-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
31
34
|
--progress-color-stepflow-bg-complete: var(--modes-color-status-positive-default);
|
|
35
|
+
--progress-color-stepflow-border-active-outer: var(--modes-color-interactive-monochrome-generic-active);
|
|
36
|
+
--progress-color-stepindicator-bg-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
32
37
|
--progress-color-stepindicator-bg-complete: var(--modes-color-status-positive-default);
|
|
38
|
+
--progress-color-stepindicator-border-active-outer: var(--modes-color-interactive-monochrome-generic-active);
|
|
33
39
|
--progress-color-stepindicator-border-success: var(--modes-color-status-positive-default);
|
|
34
40
|
--progress-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
|
|
35
41
|
--progress-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
|
|
@@ -45,20 +51,14 @@
|
|
|
45
51
|
--progress-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
|
|
46
52
|
--progress-color-bg-default: var(--modes-color-interactive-progress-bg);
|
|
47
53
|
--progress-color-fg-alt2: var(--modes-color-generic-content-firm);
|
|
48
|
-
--progress-color-fg-default: var(--modes-color-interactive-monochrome-generic-active);
|
|
49
54
|
--progress-color-label-alt: var(--modes-color-generic-content-firm);
|
|
50
55
|
--progress-color-label-default: var(--modes-color-generic-content-harsh);
|
|
51
56
|
--progress-color-loader-bg-default: var(--modes-color-interactive-progress-bg);
|
|
52
57
|
--progress-color-loader-bg-alt: var(--modes-color-interactive-progress-bg-alt); /* used for inverse loader bgs */
|
|
53
|
-
--progress-color-loader-fg-default: var(--modes-color-interactive-monochrome-generic-active); /* used for loader standard loader spinner */
|
|
54
|
-
--progress-color-stepflow-bg-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
55
58
|
--progress-color-stepflow-bg-default: var(--modes-color-generic-fg-nought);
|
|
56
59
|
--progress-color-stepflow-border-active-inner: var(--modes-color-generic-fg-nought);
|
|
57
|
-
--progress-color-stepflow-border-active-outer: var(--modes-color-interactive-monochrome-generic-active);
|
|
58
60
|
--progress-color-stepflow-label-alt: var(--modes-color-generic-content-firm);
|
|
59
61
|
--progress-color-stepflow-label-default: var(--modes-color-generic-content-harsh);
|
|
60
|
-
--progress-color-stepindicator-bg-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
61
|
-
--progress-color-stepindicator-border-active-outer: var(--modes-color-interactive-monochrome-generic-active);
|
|
62
62
|
--progress-color-stepindicator-label-default: var(--modes-color-generic-content-harsh);
|
|
63
63
|
--progress-size-bar-s: var(--global-size-micro-xs); /* S loader bar */
|
|
64
64
|
--progress-size-bar-m: var(--global-size-micro-m); /* M progress tracker bar, M loader bar */
|
|
@@ -50,6 +50,6 @@
|
|
|
50
50
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
51
51
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
52
52
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
53
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
53
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
54
54
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
55
55
|
}
|
|
@@ -20,6 +20,9 @@
|
|
|
20
20
|
--button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
|
|
21
21
|
--button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
|
|
22
22
|
--button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
|
|
23
|
+
--button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
24
|
+
--button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
25
|
+
--button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
23
26
|
--button-typography-adaptive-primary-s: var(--global-typography-adaptive-component-firm-s);
|
|
24
27
|
--button-typography-adaptive-primary-m: var(--global-typography-adaptive-component-firm-m);
|
|
25
28
|
--button-typography-adaptive-primary-l: var(--global-typography-adaptive-component-firm-l);
|
|
@@ -44,24 +47,34 @@
|
|
|
44
47
|
--button-typography-responsive-subtle-s: var(--global-typography-responsive-component-firm-s);
|
|
45
48
|
--button-typography-responsive-subtle-m: var(--global-typography-responsive-component-firm-m);
|
|
46
49
|
--button-typography-responsive-subtle-l: var(--global-typography-responsive-component-firm-l);
|
|
50
|
+
--button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
47
51
|
--button-color-ai-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
48
52
|
--button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
|
|
49
53
|
--button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
|
|
50
54
|
--button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
|
|
51
55
|
--button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
|
|
52
56
|
--button-color-typical-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
53
|
-
--button-color-typical-secondary-border-
|
|
57
|
+
--button-color-typical-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
58
|
+
--button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
59
|
+
--button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
54
60
|
--button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
55
61
|
--button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
62
|
+
--button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
56
63
|
--button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
57
64
|
--button-color-typical-tertiary-bg-enabled: var(--button-color-none);
|
|
58
65
|
--button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
59
|
-
--button-color-typical-tertiary-border-
|
|
66
|
+
--button-color-typical-tertiary-border-enabled: var(--modes-color-interactive-monochrome-generic-default-alt2);
|
|
67
|
+
--button-color-typical-tertiary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
68
|
+
--button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
60
69
|
--button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
61
|
-
--button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
62
70
|
--button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
71
|
+
--button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
72
|
+
--button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
|
|
63
73
|
--button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
64
74
|
--button-color-video-bg-blur: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
75
|
+
--button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
76
|
+
--button-color-video-primary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
77
|
+
--button-color-video-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
65
78
|
--button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
|
|
66
79
|
--button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
|
|
67
80
|
--button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
|
|
@@ -151,8 +164,8 @@
|
|
|
151
164
|
--button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
152
165
|
--button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
153
166
|
--button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
167
|
+
--button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
154
168
|
--button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
155
|
-
--button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
156
169
|
--button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
|
157
170
|
--button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
|
|
158
171
|
--button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
|
|
@@ -165,30 +178,24 @@
|
|
|
165
178
|
--button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
|
166
179
|
--button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
|
|
167
180
|
--button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
|
|
168
|
-
--button-color-typical-secondary-
|
|
169
|
-
--button-color-typical-secondary-
|
|
181
|
+
--button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
182
|
+
--button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
170
183
|
--button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
171
|
-
--button-color-typical-
|
|
184
|
+
--button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
185
|
+
--button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
172
186
|
--button-color-typical-subtle-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
173
|
-
--button-color-typical-
|
|
174
|
-
--button-color-typical-tertiary-
|
|
175
|
-
--button-color-typical-tertiary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
187
|
+
--button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
188
|
+
--button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
176
189
|
--button-color-typical-tertiary-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
177
|
-
--button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
178
190
|
--button-color-typical-toggle-label-active-disabled: var(--modes-color-interactive-inactive-content-alt);
|
|
179
|
-
--button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
180
191
|
--button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-generic-with-active);
|
|
181
192
|
--button-color-typical-toggle-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
182
|
-
--button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
|
|
183
193
|
--button-color-video-primary-bg-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
184
194
|
--button-color-video-primary-bg-hover: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
185
|
-
--button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
186
|
-
--button-color-video-primary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
187
195
|
--button-color-video-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
188
196
|
--button-color-video-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
189
197
|
--button-color-video-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
190
198
|
--button-color-video-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
191
|
-
--button-color-video-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
192
199
|
--button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
|
|
193
200
|
--button-radius-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
|
|
194
201
|
--button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
|
|
@@ -210,18 +217,11 @@
|
|
|
210
217
|
--button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */
|
|
211
218
|
--button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
|
|
212
219
|
--button-color-ai-border-disabled: var(--modes-color-interactive-inactive-default);
|
|
213
|
-
--button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
214
220
|
--button-color-destructive-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
|
|
215
221
|
--button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
|
|
216
222
|
--button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
|
|
217
|
-
--button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
218
223
|
--button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
|
|
219
|
-
--button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
220
|
-
--button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
221
|
-
--button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
222
|
-
--button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
223
224
|
--button-color-typical-tertiary-bg-active-disabled: var(--modes-color-interactive-inactive-default);
|
|
224
225
|
--button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
|
|
225
|
-
--button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
226
226
|
--button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);
|
|
227
227
|
}
|
|
@@ -50,6 +50,6 @@
|
|
|
50
50
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
51
51
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
52
52
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
53
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
53
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
54
54
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
55
55
|
}
|
package/css/marketing/all.css
CHANGED
|
@@ -1828,7 +1828,7 @@
|
|
|
1828
1828
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
1829
1829
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
1830
1830
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
1831
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
1831
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
1832
1832
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
1833
1833
|
|
|
1834
1834
|
/* table component tokens */
|
|
@@ -50,6 +50,6 @@
|
|
|
50
50
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
51
51
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
52
52
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
53
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
53
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
54
54
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
55
55
|
}
|
|
@@ -50,6 +50,6 @@
|
|
|
50
50
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
51
51
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
52
52
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
53
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
53
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
54
54
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
55
55
|
}
|
package/css/product/all.css
CHANGED
|
@@ -1828,7 +1828,7 @@
|
|
|
1828
1828
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
1829
1829
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
1830
1830
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
1831
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
1831
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
1832
1832
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
1833
1833
|
|
|
1834
1834
|
/* table component tokens */
|
|
@@ -50,6 +50,6 @@
|
|
|
50
50
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
51
51
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
52
52
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
53
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
53
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
54
54
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
55
55
|
}
|
|
@@ -50,6 +50,6 @@
|
|
|
50
50
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
51
51
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
52
52
|
--tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
53
|
-
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-
|
|
53
|
+
--tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
54
54
|
--tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
|
|
55
55
|
}
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
#define tabRadiusIndicatorM 2
|
|
51
51
|
#define tabRadiusIndicatorL 2
|
|
52
52
|
#define tabRadiusNone 0
|
|
53
|
-
#define tabBorderwidthNavigationBottom
|
|
53
|
+
#define tabBorderwidthNavigationBottom 2
|
|
54
54
|
#define tabBorderwidthNavigationSide 2
|
|
55
55
|
#define tabTypographyAdaptiveLabelS [object Object]
|
|
56
56
|
#define tabTypographyAdaptiveLabelM [object Object]
|
|
@@ -621,13 +621,13 @@ module.exports = {
|
|
|
621
621
|
navigation: {
|
|
622
622
|
bottom: {
|
|
623
623
|
$type: "borderWidth",
|
|
624
|
-
$value:
|
|
624
|
+
$value: 2,
|
|
625
625
|
$description: "Tab (enabled and hover bottom border)",
|
|
626
626
|
filePath: "data/tokens/components/tab.json",
|
|
627
627
|
isSource: true,
|
|
628
628
|
original: {
|
|
629
629
|
$type: "borderWidth",
|
|
630
|
-
$value: "{global.borderwidth.
|
|
630
|
+
$value: "{global.borderwidth.S}",
|
|
631
631
|
$description: "Tab (enabled and hover bottom border)",
|
|
632
632
|
},
|
|
633
633
|
name: "tabBorderwidthNavigationBottom",
|
|
@@ -621,13 +621,13 @@ module.exports = {
|
|
|
621
621
|
navigation: {
|
|
622
622
|
bottom: {
|
|
623
623
|
$type: "borderWidth",
|
|
624
|
-
$value:
|
|
624
|
+
$value: 2,
|
|
625
625
|
$description: "Tab (enabled and hover bottom border)",
|
|
626
626
|
filePath: "data/tokens/components/tab.json",
|
|
627
627
|
isSource: true,
|
|
628
628
|
original: {
|
|
629
629
|
$type: "borderWidth",
|
|
630
|
-
$value: "{global.borderwidth.
|
|
630
|
+
$value: "{global.borderwidth.S}",
|
|
631
631
|
$description: "Tab (enabled and hover bottom border)",
|
|
632
632
|
},
|
|
633
633
|
name: "tabBorderwidthNavigationBottom",
|
|
@@ -621,13 +621,13 @@ module.exports = {
|
|
|
621
621
|
navigation: {
|
|
622
622
|
bottom: {
|
|
623
623
|
$type: "borderWidth",
|
|
624
|
-
$value:
|
|
624
|
+
$value: 2,
|
|
625
625
|
$description: "Tab (enabled and hover bottom border)",
|
|
626
626
|
filePath: "data/tokens/components/tab.json",
|
|
627
627
|
isSource: true,
|
|
628
628
|
original: {
|
|
629
629
|
$type: "borderWidth",
|
|
630
|
-
$value: "{global.borderwidth.
|
|
630
|
+
$value: "{global.borderwidth.S}",
|
|
631
631
|
$description: "Tab (enabled and hover bottom border)",
|
|
632
632
|
},
|
|
633
633
|
name: "tabBorderwidthNavigationBottom",
|
|
@@ -621,13 +621,13 @@ module.exports = {
|
|
|
621
621
|
navigation: {
|
|
622
622
|
bottom: {
|
|
623
623
|
$type: "borderWidth",
|
|
624
|
-
$value:
|
|
624
|
+
$value: 2,
|
|
625
625
|
$description: "Tab (enabled and hover bottom border)",
|
|
626
626
|
filePath: "data/tokens/components/tab.json",
|
|
627
627
|
isSource: true,
|
|
628
628
|
original: {
|
|
629
629
|
$type: "borderWidth",
|
|
630
|
-
$value: "{global.borderwidth.
|
|
630
|
+
$value: "{global.borderwidth.S}",
|
|
631
631
|
$description: "Tab (enabled and hover bottom border)",
|
|
632
632
|
},
|
|
633
633
|
name: "tabBorderwidthNavigationBottom",
|
|
@@ -621,13 +621,13 @@ module.exports = {
|
|
|
621
621
|
navigation: {
|
|
622
622
|
bottom: {
|
|
623
623
|
$type: "borderWidth",
|
|
624
|
-
$value:
|
|
624
|
+
$value: 2,
|
|
625
625
|
$description: "Tab (enabled and hover bottom border)",
|
|
626
626
|
filePath: "data/tokens/components/tab.json",
|
|
627
627
|
isSource: true,
|
|
628
628
|
original: {
|
|
629
629
|
$type: "borderWidth",
|
|
630
|
-
$value: "{global.borderwidth.
|
|
630
|
+
$value: "{global.borderwidth.S}",
|
|
631
631
|
$description: "Tab (enabled and hover bottom border)",
|
|
632
632
|
},
|
|
633
633
|
name: "tabBorderwidthNavigationBottom",
|
|
@@ -621,13 +621,13 @@ module.exports = {
|
|
|
621
621
|
navigation: {
|
|
622
622
|
bottom: {
|
|
623
623
|
$type: "borderWidth",
|
|
624
|
-
$value:
|
|
624
|
+
$value: 2,
|
|
625
625
|
$description: "Tab (enabled and hover bottom border)",
|
|
626
626
|
filePath: "data/tokens/components/tab.json",
|
|
627
627
|
isSource: true,
|
|
628
628
|
original: {
|
|
629
629
|
$type: "borderWidth",
|
|
630
|
-
$value: "{global.borderwidth.
|
|
630
|
+
$value: "{global.borderwidth.S}",
|
|
631
631
|
$description: "Tab (enabled and hover bottom border)",
|
|
632
632
|
},
|
|
633
633
|
name: "tabBorderwidthNavigationBottom",
|