@sage/design-tokens 5.1.0 → 5.2.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 (43) hide show
  1. package/css/marketing/all.css +31 -31
  2. package/css/marketing/small/components/button.css +22 -22
  3. package/css/marketing/small/components/container.css +9 -9
  4. package/css/product/large/components/status.css +3 -3
  5. package/package.json +1 -1
  6. package/sage-design-tokens-5.2.0.tgz +0 -0
  7. package/scss/marketing/small/components/button.scss +22 -22
  8. package/scss/marketing/small/components/container.scss +9 -9
  9. package/scss/marketing/small/components/form.scss +7 -7
  10. package/scss/marketing/small/components/link.scss +2 -2
  11. package/scss/marketing/small/components/logo.scss +4 -4
  12. package/scss/marketing/small/components/nav.scss +3 -3
  13. package/scss/marketing/small/components/page.scss +1 -1
  14. package/scss/marketing/small/components/popover.scss +2 -2
  15. package/scss/marketing/small/components/progress.scss +6 -6
  16. package/scss/marketing/small/components/status.scss +3 -3
  17. package/scss/marketing/small/components/tab.scss +7 -7
  18. package/scss/marketing/small/components/table.scss +11 -11
  19. package/scss/product/large/components/button.scss +22 -22
  20. package/scss/product/large/components/container.scss +9 -9
  21. package/scss/product/large/components/form.scss +7 -7
  22. package/scss/product/large/components/link.scss +2 -2
  23. package/scss/product/large/components/logo.scss +4 -4
  24. package/scss/product/large/components/nav.scss +3 -3
  25. package/scss/product/large/components/page.scss +1 -1
  26. package/scss/product/large/components/popover.scss +2 -2
  27. package/scss/product/large/components/progress.scss +6 -6
  28. package/scss/product/large/components/status.scss +3 -3
  29. package/scss/product/large/components/tab.scss +7 -7
  30. package/scss/product/large/components/table.scss +11 -11
  31. package/scss/product/small/components/button.scss +22 -22
  32. package/scss/product/small/components/container.scss +9 -9
  33. package/scss/product/small/components/form.scss +7 -7
  34. package/scss/product/small/components/link.scss +2 -2
  35. package/scss/product/small/components/logo.scss +4 -4
  36. package/scss/product/small/components/nav.scss +3 -3
  37. package/scss/product/small/components/page.scss +1 -1
  38. package/scss/product/small/components/popover.scss +2 -2
  39. package/scss/product/small/components/progress.scss +6 -6
  40. package/scss/product/small/components/status.scss +3 -3
  41. package/scss/product/small/components/tab.scss +7 -7
  42. package/scss/product/small/components/table.scss +11 -11
  43. package/sage-design-tokens-5.1.0.tgz +0 -0
package/css/marketing/all.css CHANGED
@@ -528,6 +528,9 @@
528
528
  --button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
529
529
  --button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
530
530
  --button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
531
+ --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
532
+ --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
533
+ --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
531
534
  --button-typography-primary-s: var(--global-typography-component-firm-s);
532
535
  --button-typography-primary-m: var(--global-typography-component-firm-m);
533
536
  --button-typography-primary-l: var(--global-typography-component-firm-l);
@@ -540,6 +543,7 @@
540
543
  --button-typography-subtle-s: var(--global-typography-component-firm-s);
541
544
  --button-typography-subtle-m: var(--global-typography-component-firm-m);
542
545
  --button-typography-subtle-l: var(--global-typography-component-firm-l);
546
+ --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
543
547
  --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));
544
548
  --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
545
549
  --button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
@@ -547,17 +551,25 @@
547
551
  --button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
548
552
  --button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
549
553
  --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));
550
- --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
554
+ --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
555
+ --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
556
+ --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
551
557
  --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));
552
558
  --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));
559
+ --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
553
560
  --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));
561
+ --button-color-typical-tertiary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark));
554
562
  --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));
555
- --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
563
+ --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
556
564
  --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));
557
- --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
558
565
  --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));
566
+ --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
567
+ --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));
559
568
  --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));
560
569
  --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));
570
+ --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
571
+ --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
572
+ --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
561
573
  --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
562
574
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
563
575
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
@@ -647,8 +659,8 @@
647
659
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
648
660
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
649
661
  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
662
+ --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));
650
663
  --button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
651
- --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
652
664
  --button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
653
665
  --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
654
666
  --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
@@ -660,30 +672,25 @@
660
672
  --button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
661
673
  --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
662
674
  --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
663
- --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
664
- --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
675
+ --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));
676
+ --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));
665
677
  --button-color-typical-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
666
- --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
678
+ --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));
679
+ --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));
667
680
  --button-color-typical-subtle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
668
- --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
669
- --button-color-typical-tertiary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark));
681
+ --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));
682
+ --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));
670
683
  --button-color-typical-tertiary-label-active-copy: light-dark(var(--modes-color-interactive-monochrome-frozen-with-active-light), var(--modes-color-interactive-monochrome-frozen-with-active-dark));
671
684
  --button-color-typical-tertiary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
672
- --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
673
685
  --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));
674
- --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
675
686
  --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));
676
687
  --button-color-typical-toggle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
677
- --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));
678
688
  --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));
679
689
  --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));
680
- --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
681
- --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
682
690
  --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));
683
691
  --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));
684
692
  --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));
685
693
  --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));
686
- --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
687
694
  --button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
688
695
  --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) */
689
696
  --button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
@@ -704,19 +711,12 @@
704
711
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
705
712
  --button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
706
713
  --button-color-ai-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
707
- --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));
708
714
  --button-color-destructive-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
709
715
  --button-color-destructive-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
710
716
  --button-color-typical-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
711
- --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));
712
717
  --button-color-typical-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
713
- --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));
714
- --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));
715
- --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));
716
- --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));
717
718
  --button-color-typical-tertiary-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
718
719
  --button-color-typical-tertiary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
719
- --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));
720
720
  --button-color-typical-toggle-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
721
721
 
722
722
  /* container component tokens */
@@ -727,15 +727,20 @@
727
727
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
728
728
  --container-opacity-carousel-hidden: light-dark(var(--modes-color-modifiers-input-disabled-fg-light), var(--modes-color-modifiers-input-disabled-fg-dark)); /* opacity applied to next and previous carousel slides */
729
729
  --container-color-standard-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
730
+ --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
730
731
  --container-color-ai-borderhorizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI dialog component */
731
732
  --container-color-ai-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for dialog and insight bubbles. */
732
733
  --container-color-ai-nudge-border-ai-horizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI nudge message component */
733
734
  --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
734
735
  --container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-default-light), var(--modes-color-custom-default-dark)); /* */
735
736
  --container-color-interactive-bg-footer-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* */
737
+ --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
736
738
  --container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
737
739
  --container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color */
738
740
  --container-color-interactive-bg-enabled: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
741
+ --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
742
+ --container-color-interactive-icon-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active chevron for any accordion. */
743
+ --container-color-interactive-text-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active label for any accordion. */
739
744
  --container-typography-heading-m: var(--global-typography-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
740
745
  --container-typography-heading-l: var(--global-typography-heading-m); /* Dialog, drawer and sidebar headings */
741
746
  --container-typography-subheading-m: var(--global-typography-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -747,18 +752,17 @@
747
752
  --container-typography-paragraph-l: var(--global-typography-component-moderate-l);
748
753
  --container-color-standard-bg-alt: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
749
754
  --container-color-standard-bg-footer-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* tile footer bg color */
750
- --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
751
755
  --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
752
756
  --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
753
757
  --container-color-standard-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc */
754
758
  --container-color-scrollbar-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
755
- --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
756
759
  --container-color-interactive-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark)); /* Used for accordion hover backgrounds */
757
- --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
758
- --container-color-interactive-icon-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active chevron for any accordion. */
759
- --container-color-interactive-text-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active label for any accordion. */
760
+ --container-color-interactive-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Enabled chevron for any accordion. */
761
+ --container-color-interactive-icon-alt-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark)); /* Enabled label for subtle accordion. */
762
+ --container-color-interactive-icon-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover chevron for any accordion. */
760
763
  --container-color-interactive-text-enabled: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* Enabled label for standard accordion. */
761
764
  --container-color-interactive-text-alt-enabled: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* Enabled label for subtle accordion. */
765
+ --container-color-interactive-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover label for any accordion. */
762
766
  --container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
763
767
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
764
768
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
@@ -778,13 +782,9 @@
778
782
  --container-color-interactive-border-alt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Link preview. */
779
783
  --container-color-interactive-border-inactive: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
780
784
  --container-color-interactive-border-enabled: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
781
- --container-color-interactive-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Enabled chevron for any accordion. */
782
- --container-color-interactive-icon-alt-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark)); /* Enabled label for subtle accordion. */
783
- --container-color-interactive-icon-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover chevron for any accordion. */
784
785
  --container-color-interactive-label-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
785
786
  --container-color-interactive-label-footer-activated: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
786
787
  --container-color-interactive-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
787
- --container-color-interactive-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover label for any accordion. */
788
788
  --container-size-none: var(--global-size-none);
789
789
  --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
790
790
  --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
package/css/marketing/small/components/button.css CHANGED
@@ -21,6 +21,9 @@
21
21
  --button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
22
22
  --button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
23
23
  --button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
24
+ --button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
25
+ --button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
26
+ --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
24
27
  --button-typography-adaptive-primary-s: var(--global-typography-adaptive-component-firm-s);
25
28
  --button-typography-adaptive-primary-m: var(--global-typography-adaptive-component-firm-m);
26
29
  --button-typography-adaptive-primary-l: var(--global-typography-adaptive-component-firm-l);
@@ -45,6 +48,7 @@
45
48
  --button-typography-responsive-subtle-s: var(--global-typography-responsive-component-firm-s);
46
49
  --button-typography-responsive-subtle-m: var(--global-typography-responsive-component-firm-m);
47
50
  --button-typography-responsive-subtle-l: var(--global-typography-responsive-component-firm-l);
51
+ --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
48
52
  --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
49
53
  --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
50
54
  --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
@@ -52,17 +56,25 @@
52
56
  --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
53
57
  --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
54
58
  --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
55
- --button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
59
+ --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
60
+ --button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
61
+ --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
56
62
  --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
57
63
  --button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
64
+ --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
58
65
  --button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
66
+ --button-color-typical-tertiary-bg-enabled: var(--modes-color-interactive-monochrome-subtle-default);
59
67
  --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
60
- --button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
68
+ --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
61
69
  --button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
62
- --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
63
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);
64
73
  --button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
65
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);
66
78
  --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
67
79
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
68
80
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
@@ -152,8 +164,8 @@
152
164
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
153
165
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
154
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);
155
168
  --button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
156
- --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
157
169
  --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
158
170
  --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
159
171
  --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
@@ -165,30 +177,25 @@
165
177
  --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
166
178
  --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
167
179
  --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
168
- --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
169
- --button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
180
+ --button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
181
+ --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
170
182
  --button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
171
- --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
183
+ --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
184
+ --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
172
185
  --button-color-typical-subtle-label-disabled: var(--modes-color-interactive-inactive-content);
173
- --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
174
- --button-color-typical-tertiary-bg-enabled: var(--modes-color-interactive-monochrome-subtle-default);
186
+ --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
187
+ --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
175
188
  --button-color-typical-tertiary-label-active-copy: var(--modes-color-interactive-monochrome-frozen-with-active);
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) */
@@ -209,18 +216,11 @@
209
216
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
210
217
  --button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
211
218
  --button-color-ai-border-disabled: var(--modes-color-interactive-inactive-default);
212
- --button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
213
219
  --button-color-destructive-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
214
220
  --button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
215
221
  --button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
216
- --button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
217
222
  --button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
218
- --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
219
- --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
220
- --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
221
- --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
222
223
  --button-color-typical-tertiary-bg-active-disabled: var(--modes-color-interactive-inactive-default);
223
224
  --button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
224
- --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
225
225
  --button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);
226
226
  }
package/css/marketing/small/components/container.css CHANGED
@@ -10,15 +10,20 @@
10
10
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
11
11
  --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
12
12
  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
13
+ --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
13
14
  --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
14
15
  --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
15
16
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
16
17
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
17
18
  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
18
19
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
20
+ --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
19
21
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
20
22
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
21
23
  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
24
+ --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
25
+ --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
26
+ --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
22
27
  --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
23
28
  --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
24
29
  --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -39,18 +44,17 @@
39
44
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
40
45
  --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
41
46
  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
42
- --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
43
47
  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
44
48
  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
45
49
  --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
46
50
  --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
47
- --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
48
51
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
49
- --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
50
- --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
51
- --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
52
+ --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
53
+ --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
54
+ --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
52
55
  --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
53
56
  --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
57
+ --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
54
58
  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
55
59
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
56
60
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
@@ -70,13 +74,9 @@
70
74
  --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview. */
71
75
  --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
72
76
  --container-color-interactive-border-enabled: var(--modes-color-generic-fg-moderate);
73
- --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
74
- --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
75
- --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
76
77
  --container-color-interactive-label-footer-active: var(--modes-color-interactive-monochrome-generic-with-active);
77
78
  --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
78
79
  --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
79
- --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
80
80
  --container-size-none: var(--global-size-none);
81
81
  --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
82
82
  --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
package/css/product/large/components/status.css CHANGED
@@ -6,8 +6,6 @@
6
6
  --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
7
7
  --status-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
8
8
  --status-color-bg-default: var(--modes-color-generic-bg-nought);
9
- --status-color-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
10
- --status-color-callout-bg-alt-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
11
9
  --status-color-error-bg-default: var(--modes-color-status-negative-default);
12
10
  --status-color-error-bg-alt: var(--modes-color-status-negative-default-alt); /* Subtle message bg */
13
11
  --status-color-error-border-default: var(--modes-color-status-negative-default);
@@ -53,7 +51,8 @@
53
51
  --status-color-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
54
52
  --status-color-ai-bg-default: var(--modes-color-status-ai-default-alt);
55
53
  --status-color-ai-border-default: var(--modes-color-status-ai-default-alt);
56
- --status-color-callout-bg-alt-hover: var(--modes-color-status-callout-hover-alt); /* Subtle message bg */
54
+ --status-color-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
55
+ --status-color-callout-bg-alt-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
57
56
  --status-color-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
58
57
  --status-color-error-bg-hover: var(--modes-color-status-negative-hover);
59
58
  --status-color-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
@@ -73,6 +72,7 @@
73
72
  --status-color-label-readonly: var(--modes-color-interactive-monochrome-generic-with-default); /* Pill (all types, readonly, when nested in disabled parent components) */
74
73
  --status-color-label-hover: var(--modes-color-status-content-with-hover);
75
74
  --status-color-label-alt-default: var(--modes-color-status-content-with-default-alt);
75
+ --status-color-callout-bg-alt-hover: var(--modes-color-status-callout-hover-alt); /* Subtle message bg */
76
76
  --status-size-pill-s: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Min height */
77
77
  --status-size-pill-m: var(--global-size-macro-xs); /* Min height and removable button. */
78
78
  --status-size-pill-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* Min height and removable button */
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  },
7
7
  "description": "Design tokens for the Sage Design System.",
8
8
  "author": "The Sage Group plc",
9
- "version": "5.1.0",
9
+ "version": "5.2.0",
10
10
  "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
11
11
  "tags": [
12
12
  "design tokens",
package/sage-design-tokens-5.2.0.tgz ADDED
Binary file
package/scss/marketing/small/components/button.scss CHANGED
@@ -23,6 +23,9 @@ $button-color-ai-border-hover: $modes-color-interactive-ai-default;
23
23
  $button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
24
24
  $button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
25
25
  $button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
26
+ $button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
27
+ $button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
28
+ $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
26
29
  $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
27
30
  $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
28
31
  $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -47,6 +50,7 @@ $button-typography-responsive-tertiary-l: $global-typography-responsive-componen
47
50
  $button-typography-responsive-subtle-s: $global-typography-responsive-component-firm-s;
48
51
  $button-typography-responsive-subtle-m: $global-typography-responsive-component-firm-m;
49
52
  $button-typography-responsive-subtle-l: $global-typography-responsive-component-firm-l;
53
+ $button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
50
54
  $button-color-ai-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
51
55
  $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
52
56
  $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -54,17 +58,25 @@ $button-color-destructive-secondary-border-hover: $modes-color-interactive-dange
54
58
  $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
55
59
  $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
56
60
  $button-color-typical-secondary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
57
- $button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
61
+ $button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
62
+ $button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
63
+ $button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
58
64
  $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
59
65
  $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
66
+ $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
60
67
  $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
68
+ $button-color-typical-tertiary-bg-enabled: $modes-color-interactive-monochrome-subtle-default;
61
69
  $button-color-typical-tertiary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
62
- $button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
70
+ $button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
63
71
  $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
64
- $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
65
72
  $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
73
+ $button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
74
+ $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
66
75
  $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
67
76
  $button-color-video-bg-blur: $modes-color-interactive-monochrome-generic-hover-alt;
77
+ $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
78
+ $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
79
+ $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
68
80
  $button-size-split: $global-size-micro-xxs; // Split button (divider width)
69
81
  $button-size-s: $global-size-macro-s; // min-height on S Buttons
70
82
  $button-size-m: $global-size-macro-m; // min-height on M Buttons
@@ -154,8 +166,8 @@ $button-space-toggle-container-y-l: $global-space-micro-s; // Vertical padding
154
166
  $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in video button
155
167
  $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
156
168
  $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
169
+ $button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
157
170
  $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
158
- $button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
159
171
  $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
160
172
  $button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
161
173
  $button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
@@ -167,30 +179,25 @@ $button-color-typical-primary-label-active: $modes-color-interactive-primary-wit
167
179
  $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
168
180
  $button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
169
181
  $button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
170
- $button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
171
- $button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
182
+ $button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
183
+ $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
172
184
  $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
173
- $button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
185
+ $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
186
+ $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
174
187
  $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
175
- $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
176
- $button-color-typical-tertiary-bg-enabled: $modes-color-interactive-monochrome-subtle-default;
188
+ $button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
189
+ $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
177
190
  $button-color-typical-tertiary-label-active-copy: $modes-color-interactive-monochrome-frozen-with-active;
178
191
  $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
179
- $button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
180
192
  $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
181
- $button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
182
193
  $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-generic-with-active;
183
194
  $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
184
- $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
185
195
  $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-generic-with-default;
186
196
  $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
187
- $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
188
- $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
189
197
  $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
190
198
  $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-generic-with-default;
191
199
  $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-generic-with-default;
192
200
  $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-generic-with-default;
193
- $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
194
201
  $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
195
202
  $button-radius-m: $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)
196
203
  $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -211,17 +218,10 @@ $button-borderwidth-chip: $global-borderwidth-xs; // chip button border width
211
218
  $button-borderwidth-secondary: $global-borderwidth-s; // Secondary button.
212
219
  $button-borderwidth-togglecontainer: $global-borderwidth-xs; // Toggle container
213
220
  $button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
214
- $button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
215
221
  $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive-default;
216
222
  $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
217
223
  $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
218
- $button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
219
224
  $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
220
- $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
221
- $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
222
- $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
223
- $button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
224
225
  $button-color-typical-tertiary-bg-active-disabled: $modes-color-interactive-inactive-default;
225
226
  $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
226
- $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
227
227
  $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
package/scss/marketing/small/components/container.scss CHANGED
@@ -12,15 +12,20 @@ $container-radius-blockquote-bar: $global-radius-circle; // radius for blockquot
12
12
  $container-radius-scrollbar: $global-radius-circle; // Scrollbar
13
13
  $container-opacity-carousel-hidden: $modes-color-modifiers-input-disabled-fg; // opacity applied to next and previous carousel slides
14
14
  $container-color-standard-bg-default: $modes-color-generic-bg-nought;
15
+ $container-color-standard-border-active: $modes-color-interactive-monochrome-generic-active;
15
16
  $container-color-ai-borderhorizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI dialog component
16
17
  $container-color-ai-bordervertical: $modes-color-status-ai-default-vertical; // left and right border for dialog and insight bubbles.
17
18
  $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI nudge message component
18
19
  $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
19
20
  $container-color-interactive-detailedicon-bg: $modes-color-custom-default; //
20
21
  $container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //
22
+ $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-generic-active;
21
23
  $container-color-interactive-border-activated: $modes-color-status-positive-default;
22
24
  $container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color
23
25
  $container-color-interactive-bg-enabled: $modes-color-generic-bg-nought;
26
+ $container-color-interactive-border-active: $modes-color-interactive-monochrome-generic-active;
27
+ $container-color-interactive-icon-active: $modes-color-interactive-monochrome-generic-active; // Active chevron for any accordion.
28
+ $container-color-interactive-text-active: $modes-color-interactive-monochrome-generic-active; // Active label for any accordion.
24
29
  $container-typography-adaptive-heading-m: $global-typography-adaptive-heading-s; // Accordion, Subscription tile, Tile select and generic tile or card headings
25
30
  $container-typography-adaptive-heading-l: $global-typography-adaptive-heading-m; // Dialog, drawer and sidebar headings
26
31
  $container-typography-adaptive-subheading-m: $global-typography-adaptive-subheading-m; // Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading
@@ -41,18 +46,17 @@ $container-typography-responsive-paragraph-m: $global-typography-responsive-comp
41
46
  $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
42
47
  $container-color-standard-bg-alt: $modes-color-generic-bg-faint;
43
48
  $container-color-standard-bg-footer-default: $modes-color-generic-bg-faint; // tile footer bg color
44
- $container-color-standard-border-active: $modes-color-interactive-monochrome-generic-active;
45
49
  $container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
46
50
  $container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
47
51
  $container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
48
52
  $container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
49
- $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-generic-active;
50
53
  $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // Used for accordion hover backgrounds
51
- $container-color-interactive-border-active: $modes-color-interactive-monochrome-generic-active;
52
- $container-color-interactive-icon-active: $modes-color-interactive-monochrome-generic-active; // Active chevron for any accordion.
53
- $container-color-interactive-text-active: $modes-color-interactive-monochrome-generic-active; // Active label for any accordion.
54
+ $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-generic-default; // Enabled chevron for any accordion.
55
+ $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-generic-default-alt; // Enabled label for subtle accordion.
56
+ $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
54
57
  $container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
55
58
  $container-color-interactive-text-alt-enabled: $modes-color-generic-content-moderate; // Enabled label for subtle accordion.
59
+ $container-color-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
56
60
  $container-color-blockquote-border: $modes-color-interactive-primary-default;
57
61
  $container-boxshadow-card-enabled: $global-boxshadow-interactive-enabled; // Card (enabled)
58
62
  $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (hover state)
@@ -72,13 +76,9 @@ $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-defa
72
76
  $container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview.
73
77
  $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
74
78
  $container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
75
- $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-generic-default; // Enabled chevron for any accordion.
76
- $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-generic-default-alt; // Enabled label for subtle accordion.
77
- $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
78
79
  $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-generic-with-active;
79
80
  $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-generic-with-active;
80
81
  $container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
81
- $container-color-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
82
82
  $container-size-none: $global-size-none;
83
83
  $container-size-accordionstandard-chevron: $global-size-icon-m; // Accordion chevron container
84
84
  $container-size-quotebar-width: $global-size-micro-m; // block quote bar width