@bspk/ui 1.4.0 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/components/StylesProviderDemo/brandsCss.js +10 -10
  2. package/dist/components/StylesProviderDemo/brandsCss.js.map +1 -1
  3. package/dist/styles/agent-workplace.css +307 -301
  4. package/dist/styles/agent-workplace.css.js +307 -301
  5. package/dist/styles/anywhere.css +305 -299
  6. package/dist/styles/anywhere.css.js +305 -299
  7. package/dist/styles/better-homes-gardens.css +200 -350
  8. package/dist/styles/better-homes-gardens.css.js +200 -350
  9. package/dist/styles/broker-workplace.css +315 -309
  10. package/dist/styles/broker-workplace.css.js +315 -309
  11. package/dist/styles/cartus.css +288 -282
  12. package/dist/styles/cartus.css.js +288 -282
  13. package/dist/styles/century-21.css +312 -306
  14. package/dist/styles/century-21.css.js +312 -306
  15. package/dist/styles/coldwell-banker.css +283 -277
  16. package/dist/styles/coldwell-banker.css.js +283 -277
  17. package/dist/styles/corcoran.css +283 -277
  18. package/dist/styles/corcoran.css.js +283 -277
  19. package/dist/styles/era.css +290 -284
  20. package/dist/styles/era.css.js +290 -284
  21. package/dist/styles/sothebys.css +282 -276
  22. package/dist/styles/sothebys.css.js +282 -276
  23. package/package.json +2 -2
  24. package/src/components/StylesProviderDemo/brandsCss.ts +10 -10
package/dist/styles/era.css.js CHANGED
@@ -455,6 +455,8 @@ body {
455
455
  --corner-radius-80: 8px;
456
456
  /* Corner radius/circular - Global (primitives) */
457
457
  --corner-radius-circular: 999px;
458
+ /* Corner radius/None - Global (primitives) */
459
+ --corner-radius-none: 0;
458
460
  /* East - navigation rails, drawers, sheets */
459
461
  --drop-shadow-east: 2px 0px 8px -2px #0000001a, 2px 0px 4px -2px #0000001f;
460
462
  /* Float */
@@ -469,9 +471,9 @@ body {
469
471
  --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
470
472
  /* West - side sheets */
471
473
  --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
472
- /* Foreground/AI-powered/blue - Theme - ERA */
474
+ /* Foreground/AI-powered/blue - Theme - BRAND */
473
475
  --foreground-ai-powered-blue: #000000;
474
- /* Foreground/AI-powered/pink - Theme - ERA */
476
+ /* Foreground/AI-powered/pink - Theme - BRAND */
475
477
  --foreground-ai-powered-pink: #000000;
476
478
  /* Interactions/opacity-black-10 - Global (primitives) */
477
479
  --interactions-opacity-black-10: #0000001a;
@@ -497,25 +499,25 @@ body {
497
499
  --interactions-opacity-white-6: #ffffff0f;
498
500
  /* Interactions/opacity-white-8 - Global (primitives) */
499
501
  --interactions-opacity-white-8: #ffffff14;
500
- /* Colors/Brands/ERA/Interactions/primary-dark-opacity-10 - Global (primitives) */
502
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-10 - Global (primitives) */
501
503
  --interactions-primary-dark-opacity-10: #6d84af1a;
502
- /* Colors/Brands/ERA/Interactions/primary-dark-opacity-12 - Global (primitives) */
504
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-12 - Global (primitives) */
503
505
  --interactions-primary-dark-opacity-12: #6d84af1f;
504
- /* Colors/Brands/ERA/Interactions/primary-dark-opacity-16 - Global (primitives) */
506
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-16 - Global (primitives) */
505
507
  --interactions-primary-dark-opacity-16: #6d84af29;
506
- /* Colors/Brands/ERA/Interactions/primary-dark-opacity-20 - Global (primitives) */
508
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-20 - Global (primitives) */
507
509
  --interactions-primary-dark-opacity-20: #6d84af33;
508
- /* Colors/Brands/ERA/Interactions/primary-dark-opacity-8 - Global (primitives) */
510
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-8 - Global (primitives) */
509
511
  --interactions-primary-dark-opacity-8: #6d84af14;
510
- /* Colors/Brands/ERA/Interactions/primary-light-opacity-10 - Global (primitives) */
512
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-10 - Global (primitives) */
511
513
  --interactions-primary-light-opacity-10: #0b32791a;
512
- /* Colors/Brands/ERA/Interactions/primary-light-opacity-12 - Global (primitives) */
514
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-12 - Global (primitives) */
513
515
  --interactions-primary-light-opacity-12: #0b32791f;
514
- /* Colors/Brands/ERA/Interactions/primary-light-opacity-16 - Global (primitives) */
516
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-16 - Global (primitives) */
515
517
  --interactions-primary-light-opacity-16: #0b327929;
516
- /* Colors/Brands/ERA/Interactions/primary-light-opacity-20 - Global (primitives) */
518
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-20 - Global (primitives) */
517
519
  --interactions-primary-light-opacity-20: #0b327933;
518
- /* Colors/Brands/ERA/Interactions/primary-light-opacity-8 - Global (primitives) */
520
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-8 - Global (primitives) */
519
521
  --interactions-primary-light-opacity-8: #0b327914;
520
522
  /* Labels/Base */
521
523
  --labels-base: 500 16px/24px var(--typeface);
@@ -549,17 +551,17 @@ body {
549
551
  --labels-x-small-size: 12px;
550
552
  /* Labels/X-Small - style */
551
553
  --labels-x-small-style: medium;
552
- /* Colors/Brands/ERA/Primary/00-base - Global (primitives) */
554
+ /* Colors/Brands/BRAND/Primary/00-base - Global (primitives) */
553
555
  --primary-00-base: #0b3279;
554
- /* Colors/Brands/ERA/Primary/15-dark - Global (primitives) */
556
+ /* Colors/Brands/BRAND/Primary/15-dark - Global (primitives) */
555
557
  --primary-15-dark: #092b67;
556
- /* Colors/Brands/ERA/Primary/40-light - Global (primitives) */
558
+ /* Colors/Brands/BRAND/Primary/40-light - Global (primitives) */
557
559
  --primary-40-light: #6d84af;
558
- /* Colors/Brands/ERA/Primary/55-light - Global (primitives) */
560
+ /* Colors/Brands/BRAND/Primary/55-light - Global (primitives) */
559
561
  --primary-55-light: #91a3c3;
560
- /* Colors/Brands/ERA/Primary/75-dark - Global (primitives) */
562
+ /* Colors/Brands/BRAND/Primary/75-dark - Global (primitives) */
561
563
  --primary-75-dark: #030d1e;
562
- /* Colors/Brands/ERA/Primary/85-light - Global (primitives) */
564
+ /* Colors/Brands/BRAND/Primary/85-light - Global (primitives) */
563
565
  --primary-85-light: #dae0eb;
564
566
  /* Radius/full - Borders */
565
567
  --radius-full: 999px;
@@ -567,21 +569,23 @@ body {
567
569
  --radius-lg: 12px;
568
570
  /* Radius/md - Borders */
569
571
  --radius-md: 8px;
572
+ /* Radius/none - Borders */
573
+ --radius-none: 0;
570
574
  /* Radius/sm - Borders */
571
575
  --radius-sm: 4px;
572
576
  /* Radius/xlg - Borders */
573
577
  --radius-xlg: 16px;
574
- /* Colors/Brands/ERA/Secondary/00-base - Global (primitives) */
578
+ /* Colors/Brands/BRAND/Secondary/00-base - Global (primitives) */
575
579
  --secondary-00-base: #c8102e;
576
- /* Colors/Brands/ERA/Secondary/15-dark - Global (primitives) */
580
+ /* Colors/Brands/BRAND/Secondary/15-dark - Global (primitives) */
577
581
  --secondary-15-dark: #aa0e27;
578
- /* Colors/Brands/ERA/Secondary/40-light - Global (primitives) */
582
+ /* Colors/Brands/BRAND/Secondary/40-light - Global (primitives) */
579
583
  --secondary-40-light: #de7082;
580
- /* Colors/Brands/ERA/Secondary/55-light - Global (primitives) */
584
+ /* Colors/Brands/BRAND/Secondary/55-light - Global (primitives) */
581
585
  --secondary-55-light: #e693a1;
582
- /* Colors/Brands/ERA/Secondary/75-dark - Global (primitives) */
586
+ /* Colors/Brands/BRAND/Secondary/75-dark - Global (primitives) */
583
587
  --secondary-75-dark: #32040c;
584
- /* Colors/Brands/ERA/Secondary/85-light - Global (primitives) */
588
+ /* Colors/Brands/BRAND/Secondary/85-light - Global (primitives) */
585
589
  --secondary-85-light: #f7dbe0;
586
590
  /* Shadows/Inner-Shadow-black-100 - Global (primitives) */
587
591
  --shadows-inner-shadow-black-100: #000000;
@@ -661,6 +665,8 @@ body {
661
665
  --spacing-sizing-24: 148px;
662
666
  /* Spacing/sizing-25 - Spacing & Sizing */
663
667
  --spacing-sizing-25: 152px;
668
+ /* Spacing/sizing-none - Spacing & Sizing */
669
+ --spacing-sizing-none: 0;
664
670
  /* Spacings/1040 - Global (primitives) */
665
671
  --spacings-1040: 104px;
666
672
  /* Spacings/120 - Global (primitives) */
@@ -711,34 +717,38 @@ body {
711
717
  --spacings-800: 80px;
712
718
  /* Spacings/960 - Global (primitives) */
713
719
  --spacings-960: 96px;
714
- /* Stroke/AI-powered/blue - Theme - ERA */
720
+ /* Spacings/None - Global (primitives) */
721
+ --spacings-none: 0;
722
+ /* Stroke/AI-powered/blue - Theme - BRAND */
715
723
  --stroke-ai-powered-blue: #000000;
716
- /* Stroke/AI-powered/pink - Theme - ERA */
724
+ /* Stroke/AI-powered/pink - Theme - BRAND */
717
725
  --stroke-ai-powered-pink: #000000;
726
+ /* Stroke/none - Borders */
727
+ --stroke-none: 0;
718
728
  /* Stroke/thick - Borders */
719
729
  --stroke-thick: 2px;
720
730
  /* Stroke/thicker - Borders */
721
731
  --stroke-thicker: 4px;
722
732
  /* Stroke/thin - Borders */
723
733
  --stroke-thin: 1px;
724
- /* Surface/AI-powered/blue - Theme - ERA */
734
+ /* Surface/AI-powered/blue - Theme - BRAND */
725
735
  --surface-ai-powered-blue: #000000;
726
- /* Surface/AI-powered/pink - Theme - ERA */
736
+ /* Surface/AI-powered/pink - Theme - BRAND */
727
737
  --surface-ai-powered-pink: #000000;
728
- /* Colors/Brands/ERA/Tertiary/00-base - Global (primitives) */
738
+ /* Colors/Brands/BRAND/Tertiary/00-base - Global (primitives) */
729
739
  --tertiary-00-base: #990033;
730
- /* Colors/Brands/ERA/Tertiary/15-dark - Global (primitives) */
740
+ /* Colors/Brands/BRAND/Tertiary/15-dark - Global (primitives) */
731
741
  --tertiary-15-dark: #82002b;
732
- /* Colors/Brands/ERA/Tertiary/40-light - Global (primitives) */
742
+ /* Colors/Brands/BRAND/Tertiary/40-light - Global (primitives) */
733
743
  --tertiary-40-light: #c26685;
734
- /* Colors/Brands/ERA/Tertiary/55-light - Global (primitives) */
744
+ /* Colors/Brands/BRAND/Tertiary/55-light - Global (primitives) */
735
745
  --tertiary-55-light: #d18ca3;
736
- /* Colors/Brands/ERA/Tertiary/75-dark - Global (primitives) */
746
+ /* Colors/Brands/BRAND/Tertiary/75-dark - Global (primitives) */
737
747
  --tertiary-75-dark: #26000d;
738
- /* Colors/Brands/ERA/Tertiary/85-light - Global (primitives) */
748
+ /* Colors/Brands/BRAND/Tertiary/85-light - Global (primitives) */
739
749
  --tertiary-85-light: #f0d9e0;
740
750
  /* Typeface - Brand */
741
- --typeface: 'SF Pro';
751
+ --typeface: 'SF Pro', 'Inter', sans-serif;
742
752
  /* Typography/Line-height/lh-1 - Global (primitives) */
743
753
  --typography-line-height-lh-1: 16px;
744
754
  /* Typography/Line-height/lh-10 - Global (primitives) */
@@ -970,11 +980,11 @@ body {
970
980
  /* Mobile/Subheader/XXX-Large - Large Headline style */
971
981
  --subheader-xxx-large-style: regular;
972
982
  /* light theme (default) */
973
- /* Background/base - Brand */
983
+ /* Background/base - Theme - BRAND */
974
984
  --background-base: #ffffff;
975
- /* Background/scrim - Theme - ERA */
985
+ /* Background/scrim - Theme - BRAND */
976
986
  --background-scrim: #00000040;
977
- /* Background/shade - Brand */
987
+ /* Background/shade - Theme - BRAND */
978
988
  --background-shade: #f5f5f5;
979
989
  /* Data visual/category-01 - Brand */
980
990
  --data-visual-category-01: #0a466c;
@@ -1004,39 +1014,39 @@ body {
1004
1014
  --data-visual-category-07: #433479;
1005
1015
  /* Data visual/category-07-highlight - Brand */
1006
1016
  --data-visual-category-07-highlight: #4334794d;
1007
- /* Data visual/category-1 - Theme - Better Home & Garden */
1017
+ /* Data visual/category-1 - Theme - BRAND */
1008
1018
  --data-visual-category-1: #0a466c;
1009
- /* Data visual/category-1-highlight - Theme - ERA */
1019
+ /* Data visual/category-1-highlight - Theme - BRAND */
1010
1020
  --data-visual-category-1-highlight: #0a466c4d;
1011
- /* Data visual/category-2 - Theme - Better Home & Garden */
1021
+ /* Data visual/category-2 - Theme - BRAND */
1012
1022
  --data-visual-category-2: #299de0;
1013
- /* Data visual/category-2-highlight - Theme - ERA */
1023
+ /* Data visual/category-2-highlight - Theme - BRAND */
1014
1024
  --data-visual-category-2-highlight: #299de04d;
1015
- /* Data visual/category-3 - Theme - Better Home & Garden */
1025
+ /* Data visual/category-3 - Theme - BRAND */
1016
1026
  --data-visual-category-3: #130033;
1017
- /* Data visual/category-3-highlight - Theme - ERA */
1027
+ /* Data visual/category-3-highlight - Theme - BRAND */
1018
1028
  --data-visual-category-3-highlight: #1300334d;
1019
- /* Data visual/category-4 - Theme - Better Home & Garden */
1029
+ /* Data visual/category-4 - Theme - BRAND */
1020
1030
  --data-visual-category-4: #389e7a;
1021
- /* Data visual/category-4-highlight - Theme - ERA */
1031
+ /* Data visual/category-4-highlight - Theme - BRAND */
1022
1032
  --data-visual-category-4-highlight: #389e7a4d;
1023
- /* Data visual/category-5 - Theme - Better Home & Garden */
1033
+ /* Data visual/category-5 - Theme - BRAND */
1024
1034
  --data-visual-category-5: #094a53;
1025
- /* Data visual/category-5-highlight - Theme - ERA */
1035
+ /* Data visual/category-5-highlight - Theme - BRAND */
1026
1036
  --data-visual-category-5-highlight: #094a534d;
1027
- /* Data visual/category-6 - Theme - Better Home & Garden */
1037
+ /* Data visual/category-6 - Theme - BRAND */
1028
1038
  --data-visual-category-6: #7f7f7f;
1029
- /* Data visual/category-6-highlight - Theme - ERA */
1039
+ /* Data visual/category-6-highlight - Theme - BRAND */
1030
1040
  --data-visual-category-6-highlight: #7f7f7f4d;
1031
- /* Data visual/category-7 - Theme - Better Home & Garden */
1041
+ /* Data visual/category-7 - Theme - BRAND */
1032
1042
  --data-visual-category-7: #433479;
1033
- /* Data visual/category-7-highlight - Theme - ERA */
1043
+ /* Data visual/category-7-highlight - Theme - BRAND */
1034
1044
  --data-visual-category-7-highlight: #4334794d;
1035
- /* Data visual/gradient-end - Theme - ERA */
1045
+ /* Data visual/gradient-end - Theme - BRAND */
1036
1046
  --data-visual-gradient-end: #ffffff4d;
1037
- /* Data visual/green - Theme - ERA */
1047
+ /* Data visual/green - Theme - BRAND */
1038
1048
  --data-visual-green: #258750;
1039
- /* Data visual/green-highlight - Theme - ERA */
1049
+ /* Data visual/green-highlight - Theme - BRAND */
1040
1050
  --data-visual-green-highlight: #deede5;
1041
1051
  /* Data visual/negative - Brand */
1042
1052
  --data-visual-negative: #d83a52;
@@ -1046,109 +1056,109 @@ body {
1046
1056
  --data-visual-positive: #258750;
1047
1057
  /* Data visual/positive-highlight - Brand */
1048
1058
  --data-visual-positive-highlight: #deede5;
1049
- /* Data visual/red - Theme - ERA */
1059
+ /* Data visual/red - Theme - BRAND */
1050
1060
  --data-visual-red: #d83a52;
1051
- /* Data visual/red-highlight - Theme - ERA */
1061
+ /* Data visual/red-highlight - Theme - BRAND */
1052
1062
  --data-visual-red-highlight: #f9e1e5;
1053
- /* Foreground/Brand/on-inverse-primary - Theme - ERA */
1063
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1054
1064
  --foreground-brand-on-inverse-primary: #6d84af;
1055
- /* Foreground/Brand/on-inverse-secondary - Theme - ERA */
1056
- --foreground-brand-on-inverse-secondary: #eba691;
1057
- /* Foreground/Brand/on-brand-primary - Brand */
1065
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1066
+ --foreground-brand-on-inverse-secondary: #de7082;
1067
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1058
1068
  /* Foreground color used on Brand's primary color (non neutral color) */
1059
1069
  --foreground-brand-on-primary: #ffffff;
1060
- /* Foreground/Brand/on-brand-secondary - Brand */
1070
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1061
1071
  /* Foreground color used on Brand's primary color (non neutral color) */
1062
1072
  --foreground-brand-on-secondary: #ffffff;
1063
- /* Foreground/Brand/brand-primary - Brand */
1073
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1064
1074
  /* Foreground text and icons that match the brand's primary color */
1065
1075
  --foreground-brand-primary: #0b3279;
1066
- /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1067
- --foreground-brand-primary-depth: #217221;
1068
- /* Foreground/Brand/brand-secondary - Brand */
1076
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1077
+ --foreground-brand-primary-depth: #092b67;
1078
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1069
1079
  /* Foreground text and icons that match the brand's secondary color */
1070
1080
  --foreground-brand-secondary: #c8102e;
1071
- /* Foreground/Brand/brand-secondary-depth - Theme - ERA */
1081
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1072
1082
  --foreground-brand-secondary-depth: #aa0e27;
1073
- /* Foreground/Link text/default - Brand */
1083
+ /* Foreground/Link text/default - Theme - BRAND */
1074
1084
  --foreground-link-text-default: #215ecd;
1075
- /* Foreground/Link text/default-disabled - Brand */
1085
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1076
1086
  --foreground-link-text-default-disabled: #7a9ee1;
1077
- /* Foreground/Link text/default-hovered - Theme - ERA */
1087
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1078
1088
  --foreground-link-text-default-hovered: #1e55b9;
1079
- /* Foreground/Link text/default-pressed - Theme - ERA */
1089
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1080
1090
  --foreground-link-text-default-pressed: #1a4ba4;
1081
- /* Foreground/Link text/default-visited - Brand */
1091
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1082
1092
  --foreground-link-text-default-visited: #7a3e7a;
1083
1093
  /* Foreground/Link text/subtle-disabled - Brand */
1084
1094
  --foreground-link-text-subtle-disabled: #bdbdbd;
1085
- /* Foreground/Link text/subtle-hovered - Theme - ERA */
1095
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1086
1096
  --foreground-link-text-subtle-hovered: #292929;
1087
- /* Foreground/Link text/subtle-inverse-hovered - Theme - ERA */
1097
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1088
1098
  --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1089
- /* Foreground/Link text/subtle-inverse-pressed - Theme - ERA */
1099
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1090
1100
  --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1091
1101
  /* Foreground/Link text/subtle-inversed-disabled - Brand */
1092
1102
  --foreground-link-text-subtle-inversed-disabled: #757575;
1093
- /* Foreground/Link text/subtle-pressed - Theme - ERA */
1103
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1094
1104
  --foreground-link-text-subtle-pressed: #3d3d3d;
1095
- /* Foreground/Neutral/disabled-on-color-surface - Brand */
1105
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1096
1106
  --foreground-neutral-disabled-on-color-surface: #757575;
1097
- /* Foreground/Neutral/disabled-on-surface - Brand */
1107
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1098
1108
  --foreground-neutral-disabled-on-surface: #bdbdbd;
1099
- /* Foreground/Neutral/inverse-on-surface - Theme - ERA */
1109
+ /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
1100
1110
  --foreground-neutral-inverse-on-surface: #fafafa;
1101
- /* Foreground/Neutral/on-color - Brand */
1111
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1102
1112
  /* Interactive controls */
1103
1113
  --foreground-neutral-on-color: #ffffff;
1104
1114
  /* Foreground/Neutral/on-inverse-surface - Brand */
1105
1115
  /* Text and icons against inverse surface */
1106
1116
  --foreground-neutral-on-inverse-surface: #fafafa;
1107
- /* Foreground/Neutral/on-surface - Brand */
1117
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1108
1118
  /* Default foreground text and icons against any surface color */
1109
1119
  --foreground-neutral-on-surface: #141414;
1110
- /* Foreground/Neutral/on-surface-variant-01 - Brand */
1120
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1111
1121
  /* Secondary foreground color for icons and text */
1112
1122
  --foreground-neutral-on-surface-variant-01: #707070;
1113
- /* Foreground/Neutral/on-surface-variant-02 - Brand */
1123
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1114
1124
  /* Tertiary foreground color for icons and text */
1115
1125
  --foreground-neutral-on-surface-variant-02: #757575;
1116
- /* Foreground/Neutral/on-surface-variant-03 - Brand */
1126
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1117
1127
  /* Quaternary foreground color for icons and text. Only for placeholder text */
1118
1128
  --foreground-neutral-on-surface-variant-03: #8a8a8a;
1119
- /* Foreground/Neutral/skeleton-element - Brand */
1129
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1120
1130
  --foreground-neutral-skeleton-element: #e0e0e0;
1121
- /* Foreground/Spectrum/blue - Theme - ERA */
1131
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1122
1132
  --foreground-spectrum-blue: #143778;
1123
- /* Foreground/Spectrum/green - Theme - ERA */
1133
+ /* Foreground/Spectrum/green - Theme - BRAND */
1124
1134
  --foreground-spectrum-green: #134428;
1125
- /* Foreground/Spectrum/lime - Theme - ERA */
1135
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1126
1136
  --foreground-spectrum-lime: #60651a;
1127
- /* Foreground/Spectrum/magenta - Theme - ERA */
1137
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1128
1138
  --foreground-spectrum-magenta: #63076f;
1129
- /* Foreground/Spectrum/orange - Brand */
1139
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1130
1140
  --foreground-spectrum-orange: #773001;
1131
- /* Foreground/Spectrum/pink - Theme - ERA */
1141
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1132
1142
  --foreground-spectrum-pink: #6c1240;
1133
- /* Foreground/Spectrum/purple - Theme - ERA */
1143
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1134
1144
  --foreground-spectrum-purple: #310077;
1135
- /* Foreground/Spectrum/red - Brand */
1145
+ /* Foreground/Spectrum/red - Theme - BRAND */
1136
1146
  --foreground-spectrum-red: #6c1d29;
1137
- /* Foreground/Spectrum/teal - Theme - ERA */
1147
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1138
1148
  --foreground-spectrum-teal: #01413c;
1139
- /* Foreground/Spectrum/yellow - Theme - ERA */
1149
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1140
1150
  --foreground-spectrum-yellow: #7b5e18;
1141
- /* Interactions/brand-disabled-opacity - Theme - ERA */
1151
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1142
1152
  --interactions-brand-disabled-opacity: #0000000f;
1143
- /* Interactions/brand-hover-opacity - Theme - ERA */
1153
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1144
1154
  --interactions-brand-hover-opacity: #0000001a;
1145
- /* Interactions/brand-press-opacity - Theme - ERA */
1155
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1146
1156
  --interactions-brand-press-opacity: #00000033;
1147
- /* Interactions/disabled-opacity - Theme - ERA */
1157
+ /* Interactions/disabled-opacity - Theme - BRAND */
1148
1158
  --interactions-disabled-opacity: #0000000f;
1149
- /* Interactions/hover-opacity - Theme - ERA */
1159
+ /* Interactions/hover-opacity - Theme - BRAND */
1150
1160
  --interactions-hover-opacity: #00000014;
1151
- /* Interactions/link-active-opacity - Brand */
1161
+ /* Interactions/link-active-opacity - Theme - BRAND */
1152
1162
  --interactions-link-active-opacity: #0000004d;
1153
1163
  /* Interactions/neutral-hover-opacity - Brand */
1154
1164
  /* surfaces using neutral tones */
@@ -1156,27 +1166,27 @@ body {
1156
1166
  /* Interactions/neutral-press-opacity - Brand */
1157
1167
  /* surfaces using neutral tones */
1158
1168
  --interactions-neutral-press-opacity: #00000029;
1159
- /* Interactions/press-opacity - Theme - ERA */
1169
+ /* Interactions/press-opacity - Theme - BRAND */
1160
1170
  --interactions-press-opacity: #00000029;
1161
- /* Interactions/primary-disabled-opacity - Theme - ERA */
1171
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1162
1172
  --interactions-primary-disabled-opacity: #0b32791f;
1163
- /* Interactions/primary-hover-opacity - Theme - ERA */
1173
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1164
1174
  --interactions-primary-hover-opacity: #0b32791a;
1165
- /* Interactions/primary-press-opacity - Theme - ERA */
1175
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1166
1176
  --interactions-primary-press-opacity: #0b327933;
1167
- /* Shadow/shadow-10 - Theme - ERA */
1177
+ /* Shadow/shadow-10 - Theme - BRAND */
1168
1178
  --shadow-10: #0000001a;
1169
- /* Shadow/shadow-12 - Theme - ERA */
1179
+ /* Shadow/shadow-12 - Theme - BRAND */
1170
1180
  --shadow-12: #0000001f;
1171
- /* Shadow/shadow-15 - Theme - ERA */
1181
+ /* Shadow/shadow-15 - Theme - BRAND */
1172
1182
  --shadow-15: #00000026;
1173
- /* Shadow/shadow-25 - Theme - ERA */
1183
+ /* Shadow/shadow-25 - Theme - BRAND */
1174
1184
  --shadow-25: #00000040;
1175
- /* Shadow/shadow-32 - Theme - ERA */
1185
+ /* Shadow/shadow-32 - Theme - BRAND */
1176
1186
  --shadow-32: #00000052;
1177
1187
  /* Shadow/inner-shadow - Brand */
1178
1188
  --shadow-inner: #ffffff;
1179
- /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1189
+ /* Shadow/inner-shadow-100 - Theme - BRAND */
1180
1190
  --shadow-inner-100: #ffffff;
1181
1191
  /* Shadow/variant-01 - Brand */
1182
1192
  --shadow-variant-01: #0000001a;
@@ -1188,45 +1198,45 @@ body {
1188
1198
  --shadow-variant-04: #00000040;
1189
1199
  /* Shadow/variant-05 - Brand */
1190
1200
  --shadow-variant-05: #00000052;
1191
- /* Status/error - Brand */
1201
+ /* Status/error - Theme - BRAND */
1192
1202
  /* Foreground error text and icons */
1193
1203
  --status-error: #d83a52;
1194
- /* Status/information - Theme - Better Home & Garden */
1204
+ /* Status/information - Theme - BRAND */
1195
1205
  --status-information: #276ef1;
1196
1206
  /* Status/informational - Brand */
1197
1207
  /* Foreground informational text and icons */
1198
1208
  --status-informational: #276ef1;
1199
- /* Status/on-error - Brand */
1209
+ /* Status/on-error - Theme - BRAND */
1200
1210
  /* Foreground error text and icons */
1201
1211
  --status-on-error: #ffffff;
1202
- /* Status/on-information - Theme - Better Home & Garden */
1212
+ /* Status/on-information - Theme - BRAND */
1203
1213
  --status-on-information: #ffffff;
1204
1214
  /* Status/on-informational - Brand */
1205
1215
  /* Foreground informational text and icons */
1206
1216
  --status-on-informational: #ffffff;
1207
- /* Status/on-success - Brand */
1217
+ /* Status/on-success - Theme - BRAND */
1208
1218
  /* Foreground success icons and text */
1209
1219
  --status-on-success: #ffffff;
1210
- /* Status/on-warning - Brand */
1220
+ /* Status/on-warning - Theme - BRAND */
1211
1221
  /* Foreground warning icons */
1212
1222
  --status-on-warning: #141414;
1213
- /* Status/success - Brand */
1223
+ /* Status/success - Theme - BRAND */
1214
1224
  /* Foreground success icons and text */
1215
1225
  --status-success: #258750;
1216
- /* Status/warning - Brand */
1226
+ /* Status/warning - Theme - BRAND */
1217
1227
  /* Foreground warning icons */
1218
1228
  --status-warning: #f6bc2f;
1219
- /* Stroke/Brand/brand-primary - Brand */
1229
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1220
1230
  /* Outline variant - decorative elements such as dividers */
1221
1231
  --stroke-brand-primary: #0b3279;
1222
- /* Stroke/Brand/brand-primary-depth - Brand */
1232
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1223
1233
  /* Outline variant - decorative elements such as dividers */
1224
1234
  --stroke-brand-primary-depth: #092b67;
1225
- /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1226
- --stroke-brand-secondary: #dd6b47;
1227
- /* Stroke/Brand/brand-secondary-depth - Theme - ERA */
1228
- --stroke-brand-secondary-depth: #bc5b3c;
1229
- /* Stroke/Neutral/neutral-base - Brand */
1235
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1236
+ --stroke-brand-secondary: #c8102e;
1237
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1238
+ --stroke-brand-secondary-depth: #a3474e;
1239
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1230
1240
  /* For control components */
1231
1241
  --stroke-neutral-base: #949494;
1232
1242
  /* Stroke/Neutral/disabled-dark - Brand */
@@ -1243,73 +1253,71 @@ body {
1243
1253
  --stroke-neutral-focus-on-inverse: #ffffff;
1244
1254
  /* Stroke/Neutral/neutral-high - Brand */
1245
1255
  --stroke-neutral-high: #242424;
1246
- /* Stroke/Neutral/neutral-high-contrast - Theme - ERA */
1247
- --stroke-neutral-high-contrast: #141414;
1248
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - ERA */
1256
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1257
+ --stroke-neutral-high-contrast: #242424;
1258
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1249
1259
  --stroke-neutral-interactions-disabled-dark: #757575;
1250
- /* Stroke/Neutral/Interactions/disabled-light - Theme - ERA */
1260
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1251
1261
  --stroke-neutral-interactions-disabled-light: #bdbdbd;
1252
- /* Stroke/Neutral/Interactions/focus - Theme - ERA */
1262
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1253
1263
  --stroke-neutral-interactions-focus: #000000;
1254
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - ERA */
1264
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
1255
1265
  --stroke-neutral-interactions-inverse-focus: #ffffff;
1256
1266
  /* Stroke/Neutral/neutral-low - Brand */
1257
1267
  /* Outline variant - decorative elements such as dividers */
1258
1268
  --stroke-neutral-low: #e0e0e0;
1259
- /* Stroke/Neutral/neutral-low-contrast - Theme - ERA */
1269
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1260
1270
  --stroke-neutral-low-contrast: #e0e0e0;
1261
- /* Surface/Brand/primary - Brand */
1271
+ /* Surface/Brand/primary - Theme - BRAND */
1262
1272
  --surface-brand-primary: #0b3279;
1263
- /* Surface/Brand/primary-highlight - Theme - ERA */
1264
- --surface-brand-primary-highlight: #dfeddf;
1265
- /* Surface/Brand/secondary - Brand */
1273
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1274
+ --surface-brand-primary-highlight: #dae0eb;
1275
+ /* Surface/Brand/secondary - Theme - BRAND */
1266
1276
  --surface-brand-secondary: #c8102e;
1267
- /* Surface/Brand/secondary-highlight - Theme - ERA */
1277
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1268
1278
  --surface-brand-secondary-highlight: #f7dbe0;
1269
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1279
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1270
1280
  --surface-neutral-interactions-dark-disabled: #d6d6d6;
1271
- /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1281
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1272
1282
  --surface-neutral-interactions-light-disabled: #f5f5f5;
1273
1283
  /* Surface/Neutral/inverse - Brand */
1274
1284
  /* Inverted. Use for toasts notification & snackbars */
1275
1285
  --surface-neutral-inverse: #1f1f1f;
1276
- /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1286
+ /* Surface/Neutral/inverse-dark - Theme - BRAND */
1277
1287
  --surface-neutral-inverse-dark: #1f1f1f;
1278
- /* Surface/Neutral/inverse-light - Theme - ERA */
1288
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1279
1289
  --surface-neutral-inverse-light: #ffffff;
1280
- /* Surface/Neutral/T1-base - Brand */
1290
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1281
1291
  --surface-neutral-t1-base: #ffffff;
1282
- /* Surface/Neutral/T2-lowest - Brand */
1292
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1283
1293
  --surface-neutral-t2-lowest: #f5f5f5;
1284
- /* Surface/Neutral/T3-low - Brand */
1294
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1285
1295
  /* Navigations, app bar etc */
1286
1296
  --surface-neutral-t3-low: #dbdbdb;
1287
- /* Surface/Neutral/T4-high - Brand */
1297
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1288
1298
  /* Navigations, app bar etc */
1289
1299
  --surface-neutral-t4-high: #8a8a8a;
1290
- /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1291
- --surface-neutral-t4-high-2: #8a8a8a;
1292
- /* Surface/Neutral/transparent - Brand */
1300
+ /* Surface/Neutral/transparent - Theme - BRAND */
1293
1301
  --surface-neutral-transparent: #ffffff00;
1294
- /* Surface/Spectrum/blue - Theme - ERA */
1302
+ /* Surface/Spectrum/blue - Theme - BRAND */
1295
1303
  --surface-spectrum-blue: #dfe9fd;
1296
- /* Surface/Spectrum/green - Theme - ERA */
1304
+ /* Surface/Spectrum/green - Theme - BRAND */
1297
1305
  --surface-spectrum-green: #deede5;
1298
- /* Surface/Spectrum/lime - Theme - ERA */
1306
+ /* Surface/Spectrum/lime - Theme - BRAND */
1299
1307
  --surface-spectrum-lime: #f6f7e0;
1300
- /* Surface/Spectrum/magenta - Theme - ERA */
1308
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1301
1309
  --surface-spectrum-magenta: #f6dbfa;
1302
- /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1310
+ /* Surface/Spectrum/orange - Theme - BRAND */
1303
1311
  --surface-spectrum-orange: #fce7d9;
1304
- /* Surface/Spectrum/pink - Theme - ERA */
1312
+ /* Surface/Spectrum/pink - Theme - BRAND */
1305
1313
  --surface-spectrum-pink: #f9deec;
1306
- /* Surface/Spectrum/purple - Theme - ERA */
1314
+ /* Surface/Spectrum/purple - Theme - BRAND */
1307
1315
  --surface-spectrum-purple: #e7d9fc;
1308
- /* Surface/Spectrum/red - Theme - ERA */
1316
+ /* Surface/Spectrum/red - Theme - BRAND */
1309
1317
  --surface-spectrum-red: #f9e1e5;
1310
- /* Surface/Spectrum/teal - Theme - ERA */
1318
+ /* Surface/Spectrum/teal - Theme - BRAND */
1311
1319
  --surface-spectrum-teal: #d9eceb;
1312
- /* Surface/Spectrum/yellow - Theme - ERA */
1320
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1313
1321
  --surface-spectrum-yellow: #fef5e0;
1314
1322
 
1315
1323
  @media (width >= 640px) {
@@ -1453,11 +1461,11 @@ body {
1453
1461
  }
1454
1462
  /* dark theme */
1455
1463
  [data-theme='dark'] {
1456
- /* Background/base - Brand */
1464
+ /* Background/base - Theme - BRAND */
1457
1465
  --background-base: #1f1f1f;
1458
- /* Background/scrim - Theme - ERA */
1466
+ /* Background/scrim - Theme - BRAND */
1459
1467
  --background-scrim: #61616180;
1460
- /* Background/shade - Brand */
1468
+ /* Background/shade - Theme - BRAND */
1461
1469
  --background-shade: #292929;
1462
1470
  /* Data visual/category-01 - Brand */
1463
1471
  --data-visual-category-01: #7899ae;
@@ -1487,39 +1495,39 @@ body {
1487
1495
  --data-visual-category-07: #a19abc;
1488
1496
  /* Data visual/category-07-highlight - Brand */
1489
1497
  --data-visual-category-07-highlight: #a19abc4d;
1490
- /* Data visual/category-1 - Theme - Better Home & Garden */
1491
- --data-visual-category-1: #0a466c;
1492
- /* Data visual/category-1-highlight - Theme - ERA */
1498
+ /* Data visual/category-1 - Theme - BRAND */
1499
+ --data-visual-category-1: #7899ae;
1500
+ /* Data visual/category-1-highlight - Theme - BRAND */
1493
1501
  --data-visual-category-1-highlight: #7899ae4d;
1494
- /* Data visual/category-2 - Theme - Better Home & Garden */
1502
+ /* Data visual/category-2 - Theme - BRAND */
1495
1503
  --data-visual-category-2: #7fc4ec;
1496
- /* Data visual/category-2-highlight - Theme - ERA */
1504
+ /* Data visual/category-2-highlight - Theme - BRAND */
1497
1505
  --data-visual-category-2-highlight: #7fc4ec4d;
1498
- /* Data visual/category-3 - Theme - Better Home & Garden */
1506
+ /* Data visual/category-3 - Theme - BRAND */
1499
1507
  --data-visual-category-3: #958ca3;
1500
- /* Data visual/category-3-highlight - Theme - ERA */
1508
+ /* Data visual/category-3-highlight - Theme - BRAND */
1501
1509
  --data-visual-category-3-highlight: #958ca34d;
1502
- /* Data visual/category-4 - Theme - Better Home & Garden */
1510
+ /* Data visual/category-4 - Theme - BRAND */
1503
1511
  --data-visual-category-4: #88c5af;
1504
- /* Data visual/category-4-highlight - Theme - ERA */
1512
+ /* Data visual/category-4-highlight - Theme - BRAND */
1505
1513
  --data-visual-category-4-highlight: #88c5af4d;
1506
- /* Data visual/category-5 - Theme - Better Home & Garden */
1514
+ /* Data visual/category-5 - Theme - BRAND */
1507
1515
  --data-visual-category-5: #789ba0;
1508
- /* Data visual/category-5-highlight - Theme - ERA */
1516
+ /* Data visual/category-5-highlight - Theme - BRAND */
1509
1517
  --data-visual-category-5-highlight: #789ba04d;
1510
- /* Data visual/category-6 - Theme - Better Home & Garden */
1518
+ /* Data visual/category-6 - Theme - BRAND */
1511
1519
  --data-visual-category-6: #b2b2b2;
1512
- /* Data visual/category-6-highlight - Theme - ERA */
1520
+ /* Data visual/category-6-highlight - Theme - BRAND */
1513
1521
  --data-visual-category-6-highlight: #b2b2b24d;
1514
- /* Data visual/category-7 - Theme - Better Home & Garden */
1522
+ /* Data visual/category-7 - Theme - BRAND */
1515
1523
  --data-visual-category-7: #a19abc;
1516
- /* Data visual/category-7-highlight - Theme - ERA */
1524
+ /* Data visual/category-7-highlight - Theme - BRAND */
1517
1525
  --data-visual-category-7-highlight: #a19abc4d;
1518
- /* Data visual/gradient-end - Theme - ERA */
1526
+ /* Data visual/gradient-end - Theme - BRAND */
1519
1527
  --data-visual-gradient-end: #1f1f1f4d;
1520
- /* Data visual/green - Theme - ERA */
1528
+ /* Data visual/green - Theme - BRAND */
1521
1529
  --data-visual-green: #7cb796;
1522
- /* Data visual/green-highlight - Theme - ERA */
1530
+ /* Data visual/green-highlight - Theme - BRAND */
1523
1531
  --data-visual-green-highlight: #0d2f1c;
1524
1532
  /* Data visual/negative - Brand */
1525
1533
  --data-visual-negative: #e88997;
@@ -1529,109 +1537,109 @@ body {
1529
1537
  --data-visual-positive: #7cb796;
1530
1538
  /* Data visual/positive-highlight - Brand */
1531
1539
  --data-visual-positive-highlight: #0d2f1c;
1532
- /* Data visual/red - Theme - ERA */
1540
+ /* Data visual/red - Theme - BRAND */
1533
1541
  --data-visual-red: #e88997;
1534
- /* Data visual/red-highlight - Theme - ERA */
1542
+ /* Data visual/red-highlight - Theme - BRAND */
1535
1543
  --data-visual-red-highlight: #4c141d;
1536
- /* Foreground/Brand/on-inverse-primary - Theme - ERA */
1544
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1537
1545
  --foreground-brand-on-inverse-primary: #6d84af;
1538
- /* Foreground/Brand/on-inverse-secondary - Theme - ERA */
1539
- --foreground-brand-on-inverse-secondary: #eba691;
1540
- /* Foreground/Brand/on-brand-primary - Brand */
1546
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1547
+ --foreground-brand-on-inverse-secondary: #de7082;
1548
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1541
1549
  /* Foreground color used on Brand's primary color (non neutral color) */
1542
1550
  --foreground-brand-on-primary: #ffffff;
1543
- /* Foreground/Brand/on-brand-secondary - Brand */
1551
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1544
1552
  /* Foreground color used on Brand's primary color (non neutral color) */
1545
1553
  --foreground-brand-on-secondary: #141414;
1546
- /* Foreground/Brand/brand-primary - Brand */
1554
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1547
1555
  /* Foreground text and icons that match the brand's primary color */
1548
1556
  --foreground-brand-primary: #6d84af;
1549
- /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1550
- --foreground-brand-primary-depth: #88bc88;
1551
- /* Foreground/Brand/brand-secondary - Brand */
1557
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1558
+ --foreground-brand-primary-depth: #91a3c3;
1559
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1552
1560
  /* Foreground text and icons that match the brand's secondary color */
1553
1561
  --foreground-brand-secondary: #de7082;
1554
- /* Foreground/Brand/brand-secondary-depth - Theme - ERA */
1562
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1555
1563
  --foreground-brand-secondary-depth: #e693a1;
1556
- /* Foreground/Link text/default - Brand */
1564
+ /* Foreground/Link text/default - Theme - BRAND */
1557
1565
  --foreground-link-text-default: #7a9ee1;
1558
- /* Foreground/Link text/default-disabled - Brand */
1566
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1559
1567
  --foreground-link-text-default-disabled: #14387b;
1560
- /* Foreground/Link text/default-hovered - Theme - ERA */
1568
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1561
1569
  --foreground-link-text-default-hovered: #90afe6;
1562
- /* Foreground/Link text/default-pressed - Theme - ERA */
1570
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1563
1571
  --foreground-link-text-default-pressed: #a6bfeb;
1564
- /* Foreground/Link text/default-visited - Brand */
1572
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1565
1573
  --foreground-link-text-default-visited: #af8baf;
1566
1574
  /* Foreground/Link text/subtle-disabled - Brand */
1567
1575
  --foreground-link-text-subtle-disabled: #4d4d4d;
1568
- /* Foreground/Link text/subtle-hovered - Theme - ERA */
1576
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1569
1577
  --foreground-link-text-subtle-hovered: #e6e6e6;
1570
- /* Foreground/Link text/subtle-inverse-hovered - Theme - ERA */
1578
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1571
1579
  --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1572
- /* Foreground/Link text/subtle-inverse-pressed - Theme - ERA */
1580
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1573
1581
  --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1574
1582
  /* Foreground/Link text/subtle-inversed-disabled - Brand */
1575
1583
  --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
1576
- /* Foreground/Link text/subtle-pressed - Theme - ERA */
1584
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1577
1585
  --foreground-link-text-subtle-pressed: #d1d1d1;
1578
- /* Foreground/Neutral/disabled-on-color-surface - Brand */
1586
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1579
1587
  --foreground-neutral-disabled-on-color-surface: #3d3d3d;
1580
- /* Foreground/Neutral/disabled-on-surface - Brand */
1588
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1581
1589
  --foreground-neutral-disabled-on-surface: #4d4d4d;
1582
- /* Foreground/Neutral/inverse-on-surface - Theme - ERA */
1590
+ /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
1583
1591
  --foreground-neutral-inverse-on-surface: #fafafa;
1584
- /* Foreground/Neutral/on-color - Brand */
1592
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1585
1593
  /* Interactive controls */
1586
1594
  --foreground-neutral-on-color: #ffffff;
1587
1595
  /* Foreground/Neutral/on-inverse-surface - Brand */
1588
1596
  /* Text and icons against inverse surface */
1589
1597
  --foreground-neutral-on-inverse-surface: #fafafa;
1590
- /* Foreground/Neutral/on-surface - Brand */
1598
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1591
1599
  /* Default foreground text and icons against any surface color */
1592
1600
  --foreground-neutral-on-surface: #fafafa;
1593
- /* Foreground/Neutral/on-surface-variant-01 - Brand */
1601
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1594
1602
  /* Secondary foreground color for icons and text */
1595
1603
  --foreground-neutral-on-surface-variant-01: #c2c2c2;
1596
- /* Foreground/Neutral/on-surface-variant-02 - Brand */
1604
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1597
1605
  /* Tertiary foreground color for icons and text */
1598
1606
  --foreground-neutral-on-surface-variant-02: #9e9e9e;
1599
- /* Foreground/Neutral/on-surface-variant-03 - Brand */
1607
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1600
1608
  /* Quaternary foreground color for icons and text. Only for placeholder text */
1601
1609
  --foreground-neutral-on-surface-variant-03: #757575;
1602
- /* Foreground/Neutral/skeleton-element - Brand */
1610
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1603
1611
  --foreground-neutral-skeleton-element: #333333;
1604
- /* Foreground/Spectrum/blue - Theme - ERA */
1612
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1605
1613
  --foreground-spectrum-blue: #88aff7;
1606
- /* Foreground/Spectrum/green - Theme - ERA */
1614
+ /* Foreground/Spectrum/green - Theme - BRAND */
1607
1615
  --foreground-spectrum-green: #87bd9f;
1608
- /* Foreground/Spectrum/lime - Theme - ERA */
1616
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1609
1617
  --foreground-spectrum-lime: #dce28f;
1610
- /* Foreground/Spectrum/magenta - Theme - ERA */
1618
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1611
1619
  --foreground-spectrum-magenta: #e07aed;
1612
- /* Foreground/Spectrum/orange - Brand */
1620
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1613
1621
  --foreground-spectrum-orange: #f6a874;
1614
- /* Foreground/Spectrum/pink - Theme - ERA */
1622
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1615
1623
  --foreground-spectrum-pink: #ea86b9;
1616
- /* Foreground/Spectrum/purple - Theme - ERA */
1624
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1617
1625
  --foreground-spectrum-purple: #c8a6f9;
1618
- /* Foreground/Spectrum/red - Brand */
1626
+ /* Foreground/Spectrum/red - Theme - BRAND */
1619
1627
  --foreground-spectrum-red: #ea93a0;
1620
- /* Foreground/Spectrum/teal - Theme - ERA */
1628
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1621
1629
  --foreground-spectrum-teal: #74bbb4;
1622
- /* Foreground/Spectrum/yellow - Theme - ERA */
1630
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1623
1631
  --foreground-spectrum-yellow: #fada8d;
1624
- /* Interactions/brand-disabled-opacity - Theme - ERA */
1632
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1625
1633
  --interactions-brand-disabled-opacity: #ffffff0f;
1626
- /* Interactions/brand-hover-opacity - Theme - ERA */
1634
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1627
1635
  --interactions-brand-hover-opacity: #ffffff1a;
1628
- /* Interactions/brand-press-opacity - Theme - ERA */
1636
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1629
1637
  --interactions-brand-press-opacity: #ffffff33;
1630
- /* Interactions/disabled-opacity - Theme - ERA */
1638
+ /* Interactions/disabled-opacity - Theme - BRAND */
1631
1639
  --interactions-disabled-opacity: #ffffff0f;
1632
- /* Interactions/hover-opacity - Theme - ERA */
1640
+ /* Interactions/hover-opacity - Theme - BRAND */
1633
1641
  --interactions-hover-opacity: #ffffff14;
1634
- /* Interactions/link-active-opacity - Brand */
1642
+ /* Interactions/link-active-opacity - Theme - BRAND */
1635
1643
  --interactions-link-active-opacity: #ffffff4d;
1636
1644
  /* Interactions/neutral-hover-opacity - Brand */
1637
1645
  /* surfaces using neutral tones */
@@ -1639,27 +1647,27 @@ body {
1639
1647
  /* Interactions/neutral-press-opacity - Brand */
1640
1648
  /* surfaces using neutral tones */
1641
1649
  --interactions-neutral-press-opacity: #ffffff29;
1642
- /* Interactions/press-opacity - Theme - ERA */
1650
+ /* Interactions/press-opacity - Theme - BRAND */
1643
1651
  --interactions-press-opacity: #ffffff29;
1644
- /* Interactions/primary-disabled-opacity - Theme - ERA */
1652
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1645
1653
  --interactions-primary-disabled-opacity: #0b32791f;
1646
- /* Interactions/primary-hover-opacity - Theme - ERA */
1654
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1647
1655
  --interactions-primary-hover-opacity: #0b32791a;
1648
- /* Interactions/primary-press-opacity - Theme - ERA */
1656
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1649
1657
  --interactions-primary-press-opacity: #0b327933;
1650
- /* Shadow/shadow-10 - Theme - ERA */
1658
+ /* Shadow/shadow-10 - Theme - BRAND */
1651
1659
  --shadow-10: #6161611a;
1652
- /* Shadow/shadow-12 - Theme - ERA */
1660
+ /* Shadow/shadow-12 - Theme - BRAND */
1653
1661
  --shadow-12: #6161611f;
1654
- /* Shadow/shadow-15 - Theme - ERA */
1662
+ /* Shadow/shadow-15 - Theme - BRAND */
1655
1663
  --shadow-15: #61616126;
1656
- /* Shadow/shadow-25 - Theme - ERA */
1664
+ /* Shadow/shadow-25 - Theme - BRAND */
1657
1665
  --shadow-25: #61616140;
1658
- /* Shadow/shadow-32 - Theme - ERA */
1666
+ /* Shadow/shadow-32 - Theme - BRAND */
1659
1667
  --shadow-32: #61616152;
1660
1668
  /* Shadow/inner-shadow - Brand */
1661
1669
  --shadow-inner: #000000;
1662
- /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1670
+ /* Shadow/inner-shadow-100 - Theme - BRAND */
1663
1671
  --shadow-inner-100: #000000;
1664
1672
  /* Shadow/variant-01 - Brand */
1665
1673
  --shadow-variant-01: #6161611a;
@@ -1671,45 +1679,45 @@ body {
1671
1679
  --shadow-variant-04: #61616140;
1672
1680
  /* Shadow/variant-05 - Brand */
1673
1681
  --shadow-variant-05: #61616152;
1674
- /* Status/error - Brand */
1682
+ /* Status/error - Theme - BRAND */
1675
1683
  /* Foreground error text and icons */
1676
1684
  --status-error: #e26b7d;
1677
- /* Status/information - Theme - Better Home & Garden */
1685
+ /* Status/information - Theme - BRAND */
1678
1686
  --status-information: #5d92f5;
1679
1687
  /* Status/informational - Brand */
1680
1688
  /* Foreground informational text and icons */
1681
1689
  --status-informational: #5d92f5;
1682
- /* Status/on-error - Brand */
1690
+ /* Status/on-error - Theme - BRAND */
1683
1691
  /* Foreground error text and icons */
1684
1692
  --status-on-error: #ffffff;
1685
- /* Status/on-information - Theme - Better Home & Garden */
1693
+ /* Status/on-information - Theme - BRAND */
1686
1694
  --status-on-information: #ffffff;
1687
1695
  /* Status/on-informational - Brand */
1688
1696
  /* Foreground informational text and icons */
1689
1697
  --status-on-informational: #ffffff;
1690
- /* Status/on-success - Brand */
1698
+ /* Status/on-success - Theme - BRAND */
1691
1699
  /* Foreground success icons and text */
1692
1700
  --status-on-success: #ffffff;
1693
- /* Status/on-warning - Brand */
1701
+ /* Status/on-warning - Theme - BRAND */
1694
1702
  /* Foreground warning icons */
1695
1703
  --status-on-warning: #141414;
1696
- /* Status/success - Brand */
1704
+ /* Status/success - Theme - BRAND */
1697
1705
  /* Foreground success icons and text */
1698
1706
  --status-success: #519f73;
1699
- /* Status/warning - Brand */
1707
+ /* Status/warning - Theme - BRAND */
1700
1708
  /* Foreground warning icons */
1701
1709
  --status-warning: #f8cd63;
1702
- /* Stroke/Brand/brand-primary - Brand */
1710
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1703
1711
  /* Outline variant - decorative elements such as dividers */
1704
1712
  --stroke-brand-primary: #6d84af;
1705
- /* Stroke/Brand/brand-primary-depth - Brand */
1713
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1706
1714
  /* Outline variant - decorative elements such as dividers */
1707
1715
  --stroke-brand-primary-depth: #91a3c3;
1708
- /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1709
- --stroke-brand-secondary: #f0bcac;
1710
- /* Stroke/Brand/brand-secondary-depth - Theme - ERA */
1711
- --stroke-brand-secondary-depth: #eba691;
1712
- /* Stroke/Neutral/neutral-base - Brand */
1716
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1717
+ --stroke-brand-secondary: #de7082;
1718
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1719
+ --stroke-brand-secondary-depth: #e693a1;
1720
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1713
1721
  /* For control components */
1714
1722
  --stroke-neutral-base: #6b6b6b;
1715
1723
  /* Stroke/Neutral/disabled-dark - Brand */
@@ -1726,73 +1734,71 @@ body {
1726
1734
  --stroke-neutral-focus-on-inverse: #ffffff;
1727
1735
  /* Stroke/Neutral/neutral-high - Brand */
1728
1736
  --stroke-neutral-high: #fafafa;
1729
- /* Stroke/Neutral/neutral-high-contrast - Theme - ERA */
1737
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1730
1738
  --stroke-neutral-high-contrast: #fafafa;
1731
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - ERA */
1739
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1732
1740
  --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1733
- /* Stroke/Neutral/Interactions/disabled-light - Theme - ERA */
1741
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1734
1742
  --stroke-neutral-interactions-disabled-light: #4d4d4d;
1735
- /* Stroke/Neutral/Interactions/focus - Theme - ERA */
1743
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1736
1744
  --stroke-neutral-interactions-focus: #ffffff;
1737
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - ERA */
1745
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
1738
1746
  --stroke-neutral-interactions-inverse-focus: #ffffff;
1739
1747
  /* Stroke/Neutral/neutral-low - Brand */
1740
1748
  /* Outline variant - decorative elements such as dividers */
1741
1749
  --stroke-neutral-low: #4d4d4d;
1742
- /* Stroke/Neutral/neutral-low-contrast - Theme - ERA */
1750
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1743
1751
  --stroke-neutral-low-contrast: #4d4d4d;
1744
- /* Surface/Brand/primary - Brand */
1752
+ /* Surface/Brand/primary - Theme - BRAND */
1745
1753
  --surface-brand-primary: #6d84af;
1746
- /* Surface/Brand/primary-highlight - Theme - ERA */
1747
- --surface-brand-primary-highlight: #0a220a;
1748
- /* Surface/Brand/secondary - Brand */
1754
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1755
+ --surface-brand-primary-highlight: #030d1e;
1756
+ /* Surface/Brand/secondary - Theme - BRAND */
1749
1757
  --surface-brand-secondary: #de7082;
1750
- /* Surface/Brand/secondary-highlight - Theme - ERA */
1758
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1751
1759
  --surface-brand-secondary-highlight: #32040c;
1752
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1760
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1753
1761
  --surface-neutral-interactions-dark-disabled: #474747;
1754
- /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1762
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1755
1763
  --surface-neutral-interactions-light-disabled: #292929;
1756
1764
  /* Surface/Neutral/inverse - Brand */
1757
1765
  /* Inverted. Use for toasts notification & snackbars */
1758
1766
  --surface-neutral-inverse: #333333;
1759
- /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1760
- --surface-neutral-inverse-dark: #383838;
1761
- /* Surface/Neutral/inverse-light - Theme - ERA */
1767
+ /* Surface/Neutral/inverse-dark - Theme - BRAND */
1768
+ --surface-neutral-inverse-dark: #333333;
1769
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1762
1770
  --surface-neutral-inverse-light: #575757;
1763
- /* Surface/Neutral/T1-base - Brand */
1771
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1764
1772
  --surface-neutral-t1-base: #1f1f1f;
1765
- /* Surface/Neutral/T2-lowest - Brand */
1773
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1766
1774
  --surface-neutral-t2-lowest: #2e2e2e;
1767
- /* Surface/Neutral/T3-low - Brand */
1775
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1768
1776
  /* Navigations, app bar etc */
1769
1777
  --surface-neutral-t3-low: #383838;
1770
- /* Surface/Neutral/T4-high - Brand */
1778
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1771
1779
  /* Navigations, app bar etc */
1772
1780
  --surface-neutral-t4-high: #7a7a7a;
1773
- /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1774
- --surface-neutral-t4-high-2: #7a7a7a;
1775
- /* Surface/Neutral/transparent - Brand */
1781
+ /* Surface/Neutral/transparent - Theme - BRAND */
1776
1782
  --surface-neutral-transparent: #ffffff00;
1777
- /* Surface/Spectrum/blue - Theme - ERA */
1783
+ /* Surface/Spectrum/blue - Theme - BRAND */
1778
1784
  --surface-spectrum-blue: #0e2754;
1779
- /* Surface/Spectrum/green - Theme - ERA */
1785
+ /* Surface/Spectrum/green - Theme - BRAND */
1780
1786
  --surface-spectrum-green: #0d2f1c;
1781
- /* Surface/Spectrum/lime - Theme - ERA */
1787
+ /* Surface/Spectrum/lime - Theme - BRAND */
1782
1788
  --surface-spectrum-lime: #434712;
1783
- /* Surface/Spectrum/magenta - Theme - ERA */
1789
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1784
1790
  --surface-spectrum-magenta: #45054e;
1785
- /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1791
+ /* Surface/Spectrum/orange - Theme - BRAND */
1786
1792
  --surface-spectrum-orange: #532201;
1787
- /* Surface/Spectrum/pink - Theme - ERA */
1793
+ /* Surface/Spectrum/pink - Theme - BRAND */
1788
1794
  --surface-spectrum-pink: #4c0c2d;
1789
- /* Surface/Spectrum/purple - Theme - ERA */
1795
+ /* Surface/Spectrum/purple - Theme - BRAND */
1790
1796
  --surface-spectrum-purple: #220053;
1791
- /* Surface/Spectrum/red - Theme - ERA */
1797
+ /* Surface/Spectrum/red - Theme - BRAND */
1792
1798
  --surface-spectrum-red: #4c141d;
1793
- /* Surface/Spectrum/teal - Theme - ERA */
1799
+ /* Surface/Spectrum/teal - Theme - BRAND */
1794
1800
  --surface-spectrum-teal: #012e2a;
1795
- /* Surface/Spectrum/yellow - Theme - ERA */
1801
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1796
1802
  --surface-spectrum-yellow: #564210;
1797
1803
  }
1798
1804
  `));