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