@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/better-homes-gardens.css CHANGED
@@ -6,9 +6,9 @@ body {
6
6
  }
7
7
 
8
8
  :root {
9
- /* Colors/Brands/Better Homes & Gardens/Black - Global (primitives) */
9
+ /* Colors/Brands/BRAND/Black - Global (primitives) */
10
10
  --black: #000000;
11
- /* Colors/Brands/Better Homes & Gardens/Blue - Global (primitives) */
11
+ /* Colors/Brands/BRAND/Blue - Global (primitives) */
12
12
  --blue: #256c98;
13
13
  /* Body/Base */
14
14
  --body-base: 400 16px/24px var(--typeface);
@@ -446,7 +446,7 @@ body {
446
446
  --colors-system-yellow-light: #f6bc2f;
447
447
  /* Colors/System/yellow-light-bg - Global (primitives) */
448
448
  --colors-system-yellow-light-bg: #fef5e0;
449
- /* Colors/Brands/Better Homes & Gardens/Coral - Global (primitives) */
449
+ /* Colors/Brands/BRAND/Coral - Global (primitives) */
450
450
  --coral: #dd6b47;
451
451
  /* Corner radius/120 - Global (primitives) */
452
452
  --corner-radius-120: 12px;
@@ -458,7 +458,9 @@ body {
458
458
  --corner-radius-80: 8px;
459
459
  /* Corner radius/circular - Global (primitives) */
460
460
  --corner-radius-circular: 999px;
461
- /* Colors/Brands/Better Homes & Gardens/Dark Grey - Global (primitives) */
461
+ /* Corner radius/None - Global (primitives) */
462
+ --corner-radius-none: 0;
463
+ /* Colors/Brands/BRAND/Dark Grey - Global (primitives) */
462
464
  --dark-grey: #636466;
463
465
  /* East - navigation rails, drawers, sheets */
464
466
  --drop-shadow-east: 2px 0px 8px -2px #0000001a, 2px 0px 4px -2px #0000001f;
@@ -474,9 +476,9 @@ body {
474
476
  --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
475
477
  /* West - side sheets */
476
478
  --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
477
- /* Foreground/AI-powered/blue - Theme - Better Homes & Gardens */
479
+ /* Foreground/AI-powered/blue - Theme - BRAND */
478
480
  --foreground-ai-powered-blue: #000000;
479
- /* Foreground/AI-powered/pink - Theme - Better Homes & Gardens */
481
+ /* Foreground/AI-powered/pink - Theme - BRAND */
480
482
  --foreground-ai-powered-pink: #000000;
481
483
  /* Interactions/opacity-black-10 - Global (primitives) */
482
484
  --interactions-opacity-black-10: #0000001a;
@@ -502,25 +504,25 @@ body {
502
504
  --interactions-opacity-white-6: #ffffff0f;
503
505
  /* Interactions/opacity-white-8 - Global (primitives) */
504
506
  --interactions-opacity-white-8: #ffffff14;
505
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-dark-opacity-10 - Global (primitives) */
507
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-10 - Global (primitives) */
506
508
  --interactions-primary-dark-opacity-10: #7db67c1a;
507
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-dark-opacity-12 - Global (primitives) */
509
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-12 - Global (primitives) */
508
510
  --interactions-primary-dark-opacity-12: #7db67c1f;
509
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-dark-opacity-16 - Global (primitives) */
511
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-16 - Global (primitives) */
510
512
  --interactions-primary-dark-opacity-16: #7db67c29;
511
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-dark-opacity-20 - Global (primitives) */
513
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-20 - Global (primitives) */
512
514
  --interactions-primary-dark-opacity-20: #7db67c33;
513
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-dark-opacity-8 - Global (primitives) */
515
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-8 - Global (primitives) */
514
516
  --interactions-primary-dark-opacity-8: #7db67c14;
515
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-light-opacity-10 - Global (primitives) */
517
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-10 - Global (primitives) */
516
518
  --interactions-primary-light-opacity-10: #2786271a;
517
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-light-opacity-12 - Global (primitives) */
519
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-12 - Global (primitives) */
518
520
  --interactions-primary-light-opacity-12: #2786271f;
519
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-light-opacity-16 - Global (primitives) */
521
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-16 - Global (primitives) */
520
522
  --interactions-primary-light-opacity-16: #27862729;
521
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-light-opacity-20 - Global (primitives) */
523
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-20 - Global (primitives) */
522
524
  --interactions-primary-light-opacity-20: #27862733;
523
- /* Colors/Brands/Better Homes & Gardens/Interactions/primary-light-opacity-8 - Global (primitives) */
525
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-8 - Global (primitives) */
524
526
  --interactions-primary-light-opacity-8: #27862714;
525
527
  /* Labels/Base */
526
528
  --labels-base: 500 16px/24px var(--typeface);
@@ -554,21 +556,21 @@ body {
554
556
  --labels-x-small-size: 12px;
555
557
  /* Labels/X-Small - style */
556
558
  --labels-x-small-style: medium;
557
- /* Colors/Brands/Better Homes & Gardens/Light Blue - Global (primitives) */
559
+ /* Colors/Brands/BRAND/Light Blue - Global (primitives) */
558
560
  --light-blue: #a4c5d6;
559
- /* Colors/Brands/Better Homes & Gardens/Light Green - Global (primitives) */
561
+ /* Colors/Brands/BRAND/Light Green - Global (primitives) */
560
562
  --light-green: #a4cd55;
561
- /* Colors/Brands/Better Homes & Gardens/Primary/00-base - Global (primitives) */
563
+ /* Colors/Brands/BRAND/Primary/00-base - Global (primitives) */
562
564
  --primary-00-base: #278627;
563
- /* Colors/Brands/Better Homes & Gardens/Primary/15-dark - Global (primitives) */
565
+ /* Colors/Brands/BRAND/Primary/15-dark - Global (primitives) */
564
566
  --primary-15-dark: #217221;
565
- /* Colors/Brands/Better Homes & Gardens/Primary/40-light - Global (primitives) */
567
+ /* Colors/Brands/BRAND/Primary/40-light - Global (primitives) */
566
568
  --primary-40-light: #7db67c;
567
- /* Colors/Brands/Better Homes & Gardens/Primary/55-light - Global (primitives) */
569
+ /* Colors/Brands/BRAND/Primary/55-light - Global (primitives) */
568
570
  --primary-55-light: #88bc88;
569
- /* Colors/Brands/Better Homes & Gardens/Primary/75-dark - Global (primitives) */
571
+ /* Colors/Brands/BRAND/Primary/75-dark - Global (primitives) */
570
572
  --primary-75-dark: #0a220a;
571
- /* Colors/Brands/Better Homes & Gardens/Primary/85-light - Global (primitives) */
573
+ /* Colors/Brands/BRAND/Primary/85-light - Global (primitives) */
572
574
  --primary-85-light: #dfeddf;
573
575
  /* Radius/full - Borders */
574
576
  --radius-full: 999px;
@@ -576,21 +578,23 @@ body {
576
578
  --radius-lg: 12px;
577
579
  /* Radius/md - Borders */
578
580
  --radius-md: 8px;
581
+ /* Radius/none - Borders */
582
+ --radius-none: 0;
579
583
  /* Radius/sm - Borders */
580
584
  --radius-sm: 4px;
581
585
  /* Radius/xlg - Borders */
582
586
  --radius-xlg: 16px;
583
- /* Colors/Brands/Better Homes & Gardens/Secondary/00-base - Global (primitives) */
587
+ /* Colors/Brands/BRAND/Secondary/00-base - Global (primitives) */
584
588
  --secondary-00-base: #dd6b47;
585
- /* Colors/Brands/Better Homes & Gardens/Secondary/15-dark - Global (primitives) */
589
+ /* Colors/Brands/BRAND/Secondary/15-dark - Global (primitives) */
586
590
  --secondary-15-dark: #bc5b3c;
587
- /* Colors/Brands/Better Homes & Gardens/Secondary/40-light - Global (primitives) */
591
+ /* Colors/Brands/BRAND/Secondary/40-light - Global (primitives) */
588
592
  --secondary-40-light: #eba691;
589
- /* Colors/Brands/Better Homes & Gardens/Secondary/55-light - Global (primitives) */
593
+ /* Colors/Brands/BRAND/Secondary/55-light - Global (primitives) */
590
594
  --secondary-55-light: #f0bcac;
591
- /* Colors/Brands/Better Homes & Gardens/Secondary/75-dark - Global (primitives) */
595
+ /* Colors/Brands/BRAND/Secondary/75-dark - Global (primitives) */
592
596
  --secondary-75-dark: #371b12;
593
- /* Colors/Brands/Better Homes & Gardens/Secondary/85-light - Global (primitives) */
597
+ /* Colors/Brands/BRAND/Secondary/85-light - Global (primitives) */
594
598
  --secondary-85-light: #fae9e3;
595
599
  /* Shadows/Inner-Shadow-black-100 - Global (primitives) */
596
600
  --shadows-inner-shadow-black-100: #000000;
@@ -670,6 +674,8 @@ body {
670
674
  --spacing-sizing-24: 148px;
671
675
  /* Spacing/sizing-25 - Spacing & Sizing */
672
676
  --spacing-sizing-25: 152px;
677
+ /* Spacing/sizing-none - Spacing & Sizing */
678
+ --spacing-sizing-none: 0;
673
679
  /* Spacings/1040 - Global (primitives) */
674
680
  --spacings-1040: 104px;
675
681
  /* Spacings/120 - Global (primitives) */
@@ -720,22 +726,26 @@ body {
720
726
  --spacings-800: 80px;
721
727
  /* Spacings/960 - Global (primitives) */
722
728
  --spacings-960: 96px;
723
- /* Stroke/AI-powered/blue - Theme - Better Homes & Gardens */
729
+ /* Spacings/None - Global (primitives) */
730
+ --spacings-none: 0;
731
+ /* Stroke/AI-powered/blue - Theme - BRAND */
724
732
  --stroke-ai-powered-blue: #000000;
725
- /* Stroke/AI-powered/pink - Theme - Better Homes & Gardens */
733
+ /* Stroke/AI-powered/pink - Theme - BRAND */
726
734
  --stroke-ai-powered-pink: #000000;
735
+ /* Stroke/none - Borders */
736
+ --stroke-none: 0;
727
737
  /* Stroke/thick - Borders */
728
738
  --stroke-thick: 2px;
729
739
  /* Stroke/thicker - Borders */
730
740
  --stroke-thicker: 4px;
731
741
  /* Stroke/thin - Borders */
732
742
  --stroke-thin: 1px;
733
- /* Surface/AI-powered/blue - Theme - Better Homes & Gardens */
743
+ /* Surface/AI-powered/blue - Theme - BRAND */
734
744
  --surface-ai-powered-blue: #000000;
735
- /* Surface/AI-powered/pink - Theme - Better Homes & Gardens */
745
+ /* Surface/AI-powered/pink - Theme - BRAND */
736
746
  --surface-ai-powered-pink: #000000;
737
747
  /* Typeface - Brand */
738
- --typeface: 'Work Sans';
748
+ --typeface: 'Work Sans', 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) */
@@ -830,7 +840,7 @@ body {
830
840
  --typography-weight-500: 500;
831
841
  /* Typography/Weight/600 - Global (primitives) */
832
842
  --typography-weight-600: 600;
833
- /* Colors/Brands/Better Homes & Gardens/Yellow - Global (primitives) */
843
+ /* Colors/Brands/BRAND/Yellow - Global (primitives) */
834
844
  --yellow: #fab840;
835
845
  /* Mobile/Display/Regular/Large */
836
846
  --display-regular-large: 400 56px/72px var(--typeface);
@@ -969,11 +979,11 @@ body {
969
979
  /* Mobile/Subheader/XXX-Large - Large Headline style */
970
980
  --subheader-xxx-large-style: regular;
971
981
  /* light theme (default) */
972
- /* Background/base - Brand */
982
+ /* Background/base - Theme - BRAND */
973
983
  --background-base: #ffffff;
974
- /* Background/scrim - Theme - Better Homes & Gardens */
984
+ /* Background/scrim - Theme - BRAND */
975
985
  --background-scrim: #00000040;
976
- /* Background/shade - Brand */
986
+ /* Background/shade - Theme - BRAND */
977
987
  --background-shade: #f5f5f5;
978
988
  /* Data visual/category-01 - Brand */
979
989
  --data-visual-category-01: #389e7a;
@@ -1003,40 +1013,8 @@ body {
1003
1013
  --data-visual-category-07: #433479;
1004
1014
  /* Data visual/category-07-highlight - Brand */
1005
1015
  --data-visual-category-07-highlight: #4334794d;
1006
- /* Data visual/category-1 - Theme - Better Home & Garden */
1007
- --data-visual-category-1: #0a466c;
1008
- /* Data visual/category-1-highlight - Theme - Better Homes & Gardens */
1009
- --data-visual-category-1-highlight: #0a466c4d;
1010
- /* Data visual/category-2 - Theme - Better Home & Garden */
1011
- --data-visual-category-2: #299de0;
1012
- /* Data visual/category-2-highlight - Theme - Better Homes & Gardens */
1013
- --data-visual-category-2-highlight: #299de04d;
1014
- /* Data visual/category-3 - Theme - Better Home & Garden */
1015
- --data-visual-category-3: #130033;
1016
- /* Data visual/category-3-highlight - Theme - Better Homes & Gardens */
1017
- --data-visual-category-3-highlight: #1300334d;
1018
- /* Data visual/category-4 - Theme - Better Home & Garden */
1019
- --data-visual-category-4: #389e7a;
1020
- /* Data visual/category-4-highlight - Theme - Better Homes & Gardens */
1021
- --data-visual-category-4-highlight: #389e7a4d;
1022
- /* Data visual/category-5 - Theme - Better Home & Garden */
1023
- --data-visual-category-5: #094a53;
1024
- /* Data visual/category-5-highlight - Theme - Better Homes & Gardens */
1025
- --data-visual-category-5-highlight: #094a534d;
1026
- /* Data visual/category-6 - Theme - Better Home & Garden */
1027
- --data-visual-category-6: #7f7f7f;
1028
- /* Data visual/category-6-highlight - Theme - Better Homes & Gardens */
1029
- --data-visual-category-6-highlight: #7f7f7f4d;
1030
- /* Data visual/category-7 - Theme - Better Home & Garden */
1031
- --data-visual-category-7: #433479;
1032
- /* Data visual/category-7-highlight - Theme - Better Homes & Gardens */
1033
- --data-visual-category-7-highlight: #4334794d;
1034
- /* Data visual/gradient-end - Theme - Better Homes & Gardens */
1016
+ /* Data visual/gradient-end - Theme - BRAND */
1035
1017
  --data-visual-gradient-end: #ffffff4d;
1036
- /* Data visual/green - Theme - Better Homes & Gardens */
1037
- --data-visual-green: #258750;
1038
- /* Data visual/green-highlight - Theme - Better Homes & Gardens */
1039
- --data-visual-green-highlight: #deede5;
1040
1018
  /* Data visual/negative - Brand */
1041
1019
  --data-visual-negative: #d83a52;
1042
1020
  /* Data visual/negative-highlight - Brand */
@@ -1045,109 +1023,99 @@ body {
1045
1023
  --data-visual-positive: #258750;
1046
1024
  /* Data visual/positive-highlight - Brand */
1047
1025
  --data-visual-positive-highlight: #deede5;
1048
- /* Data visual/red - Theme - Better Homes & Gardens */
1049
- --data-visual-red: #d83a52;
1050
- /* Data visual/red-highlight - Theme - Better Homes & Gardens */
1051
- --data-visual-red-highlight: #f9e1e5;
1052
- /* Foreground/Brand/on-inverse-primary - Theme - Better Homes & Gardens */
1026
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1053
1027
  --foreground-brand-on-inverse-primary: #7db67c;
1054
- /* Foreground/Brand/on-inverse-secondary - Theme - Better Homes & Gardens */
1028
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1055
1029
  --foreground-brand-on-inverse-secondary: #eba691;
1056
- /* Foreground/Brand/on-brand-primary - Brand */
1030
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1057
1031
  /* Foreground color used on Brand's primary color (non neutral color) */
1058
1032
  --foreground-brand-on-primary: #ffffff;
1059
- /* Foreground/Brand/on-brand-secondary - Brand */
1033
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1060
1034
  /* Foreground color used on Brand's primary color (non neutral color) */
1061
1035
  --foreground-brand-on-secondary: #ffffff;
1062
- /* Foreground/Brand/brand-primary - Brand */
1036
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1063
1037
  /* Foreground text and icons that match the brand's primary color */
1064
1038
  --foreground-brand-primary: #278627;
1065
- /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1039
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1066
1040
  --foreground-brand-primary-depth: #217221;
1067
- /* Foreground/Brand/brand-secondary - Brand */
1041
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1068
1042
  /* Foreground text and icons that match the brand's secondary color */
1069
1043
  --foreground-brand-secondary: #dd6b47;
1070
- /* Foreground/Brand/brand-secondary-depth - Theme - Better Homes & Gardens */
1044
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1071
1045
  --foreground-brand-secondary-depth: #bc5b3c;
1072
- /* Foreground/Link text/default - Brand */
1046
+ /* Foreground/Link text/default - Theme - BRAND */
1073
1047
  --foreground-link-text-default: #215ecd;
1074
- /* Foreground/Link text/default-disabled - Brand */
1048
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1075
1049
  --foreground-link-text-default-disabled: #7a9ee1;
1076
- /* Foreground/Link text/default-hovered - Theme - Better Homes & Gardens */
1050
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1077
1051
  --foreground-link-text-default-hovered: #1e55b9;
1078
- /* Foreground/Link text/default-pressed - Theme - Better Homes & Gardens */
1052
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1079
1053
  --foreground-link-text-default-pressed: #1a4ba4;
1080
- /* Foreground/Link text/default-visited - Brand */
1054
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1081
1055
  --foreground-link-text-default-visited: #7a3e7a;
1082
1056
  /* Foreground/Link text/subtle-disabled - Brand */
1083
1057
  --foreground-link-text-subtle-disabled: #bdbdbd;
1084
- /* Foreground/Link text/subtle-hovered - Theme - Better Homes & Gardens */
1058
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1085
1059
  --foreground-link-text-subtle-hovered: #292929;
1086
- /* Foreground/Link text/subtle-inverse-hovered - Theme - Better Homes & Gardens */
1060
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1087
1061
  --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1088
- /* Foreground/Link text/subtle-inverse-pressed - Theme - Better Homes & Gardens */
1062
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1089
1063
  --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1090
1064
  /* Foreground/Link text/subtle-inversed-disabled - Brand */
1091
1065
  --foreground-link-text-subtle-inversed-disabled: #757575;
1092
- /* Foreground/Link text/subtle-pressed - Theme - Better Homes & Gardens */
1066
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1093
1067
  --foreground-link-text-subtle-pressed: #3d3d3d;
1094
- /* Foreground/Neutral/disabled-on-color-surface - Brand */
1068
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1095
1069
  --foreground-neutral-disabled-on-color-surface: #757575;
1096
- /* Foreground/Neutral/disabled-on-surface - Brand */
1070
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1097
1071
  --foreground-neutral-disabled-on-surface: #bdbdbd;
1098
- /* Foreground/Neutral/inverse-on-surface - Theme - Better Homes & Gardens */
1099
- --foreground-neutral-inverse-on-surface: #fafafa;
1100
- /* Foreground/Neutral/on-color - Brand */
1072
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1101
1073
  /* Interactive controls */
1102
1074
  --foreground-neutral-on-color: #ffffff;
1103
1075
  /* Foreground/Neutral/on-inverse-surface - Brand */
1104
1076
  /* Text and icons against inverse surface */
1105
1077
  --foreground-neutral-on-inverse-surface: #fafafa;
1106
- /* Foreground/Neutral/on-surface - Brand */
1078
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1107
1079
  /* Default foreground text and icons against any surface color */
1108
1080
  --foreground-neutral-on-surface: #141414;
1109
- /* Foreground/Neutral/on-surface-variant-01 - Brand */
1081
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1110
1082
  /* Secondary foreground color for icons and text */
1111
1083
  --foreground-neutral-on-surface-variant-01: #707070;
1112
- /* Foreground/Neutral/on-surface-variant-02 - Brand */
1084
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1113
1085
  /* Tertiary foreground color for icons and text */
1114
1086
  --foreground-neutral-on-surface-variant-02: #757575;
1115
- /* Foreground/Neutral/on-surface-variant-03 - Brand */
1087
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1116
1088
  /* Quaternary foreground color for icons and text. Only for placeholder text */
1117
1089
  --foreground-neutral-on-surface-variant-03: #8a8a8a;
1118
- /* Foreground/Neutral/skeleton-element - Brand */
1090
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1119
1091
  --foreground-neutral-skeleton-element: #e0e0e0;
1120
- /* Foreground/Spectrum/blue - Theme - Better Homes & Gardens */
1092
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1121
1093
  --foreground-spectrum-blue: #143778;
1122
- /* Foreground/Spectrum/green - Theme - Better Homes & Gardens */
1094
+ /* Foreground/Spectrum/green - Theme - BRAND */
1123
1095
  --foreground-spectrum-green: #134428;
1124
- /* Foreground/Spectrum/lime - Theme - Better Homes & Gardens */
1096
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1125
1097
  --foreground-spectrum-lime: #60651a;
1126
- /* Foreground/Spectrum/magenta - Theme - Better Homes & Gardens */
1098
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1127
1099
  --foreground-spectrum-magenta: #63076f;
1128
- /* Foreground/Spectrum/orange - Brand */
1100
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1129
1101
  --foreground-spectrum-orange: #773001;
1130
- /* Foreground/Spectrum/pink - Theme - Better Homes & Gardens */
1102
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1131
1103
  --foreground-spectrum-pink: #6c1240;
1132
- /* Foreground/Spectrum/purple - Theme - Better Homes & Gardens */
1104
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1133
1105
  --foreground-spectrum-purple: #310077;
1134
- /* Foreground/Spectrum/red - Brand */
1106
+ /* Foreground/Spectrum/red - Theme - BRAND */
1135
1107
  --foreground-spectrum-red: #6c1d29;
1136
- /* Foreground/Spectrum/teal - Theme - Better Homes & Gardens */
1108
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1137
1109
  --foreground-spectrum-teal: #01413c;
1138
- /* Foreground/Spectrum/yellow - Theme - Better Homes & Gardens */
1110
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1139
1111
  --foreground-spectrum-yellow: #7b5e18;
1140
- /* Interactions/brand-disabled-opacity - Theme - Better Homes & Gardens */
1141
- --interactions-brand-disabled-opacity: #0000000f;
1142
- /* Interactions/brand-hover-opacity - Theme - Better Homes & Gardens */
1112
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1143
1113
  --interactions-brand-hover-opacity: #0000001a;
1144
- /* Interactions/brand-press-opacity - Theme - Better Homes & Gardens */
1114
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1145
1115
  --interactions-brand-press-opacity: #00000033;
1146
- /* Interactions/disabled-opacity - Theme - Better Homes & Gardens */
1116
+ /* Interactions/disabled-opacity - Theme - BRAND */
1147
1117
  --interactions-disabled-opacity: #0000000f;
1148
- /* Interactions/hover-opacity - Theme - Better Homes & Gardens */
1149
- --interactions-hover-opacity: #00000014;
1150
- /* Interactions/link-active-opacity - Brand */
1118
+ /* Interactions/link-active-opacity - Theme - BRAND */
1151
1119
  --interactions-link-active-opacity: #0000004d;
1152
1120
  /* Interactions/neutral-hover-opacity - Brand */
1153
1121
  /* surfaces using neutral tones */
@@ -1155,28 +1123,14 @@ body {
1155
1123
  /* Interactions/neutral-press-opacity - Brand */
1156
1124
  /* surfaces using neutral tones */
1157
1125
  --interactions-neutral-press-opacity: #00000029;
1158
- /* Interactions/press-opacity - Theme - Better Homes & Gardens */
1159
- --interactions-press-opacity: #00000029;
1160
- /* Interactions/primary-disabled-opacity - Theme - Better Homes & Gardens */
1126
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1161
1127
  --interactions-primary-disabled-opacity: #2786271f;
1162
- /* Interactions/primary-hover-opacity - Theme - Better Homes & Gardens */
1128
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1163
1129
  --interactions-primary-hover-opacity: #2786271a;
1164
- /* Interactions/primary-press-opacity - Theme - Better Homes & Gardens */
1130
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1165
1131
  --interactions-primary-press-opacity: #27862733;
1166
- /* Shadow/shadow-10 - Theme - Better Homes & Gardens */
1167
- --shadow-10: #0000001a;
1168
- /* Shadow/shadow-12 - Theme - Better Homes & Gardens */
1169
- --shadow-12: #0000001f;
1170
- /* Shadow/shadow-15 - Theme - Better Homes & Gardens */
1171
- --shadow-15: #00000026;
1172
- /* Shadow/shadow-25 - Theme - Better Homes & Gardens */
1173
- --shadow-25: #00000040;
1174
- /* Shadow/shadow-32 - Theme - Better Homes & Gardens */
1175
- --shadow-32: #00000052;
1176
1132
  /* Shadow/inner-shadow - Brand */
1177
1133
  --shadow-inner: #ffffff;
1178
- /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1179
- --shadow-inner-100: #ffffff;
1180
1134
  /* Shadow/variant-01 - Brand */
1181
1135
  --shadow-variant-01: #0000001a;
1182
1136
  /* Shadow/variant-02 - Brand */
@@ -1187,45 +1141,41 @@ body {
1187
1141
  --shadow-variant-04: #00000040;
1188
1142
  /* Shadow/variant-05 - Brand */
1189
1143
  --shadow-variant-05: #00000052;
1190
- /* Status/error - Brand */
1144
+ /* Status/error - Theme - BRAND */
1191
1145
  /* Foreground error text and icons */
1192
1146
  --status-error: #d83a52;
1193
- /* Status/information - Theme - Better Home & Garden */
1194
- --status-information: #276ef1;
1195
1147
  /* Status/informational - Brand */
1196
1148
  /* Foreground informational text and icons */
1197
1149
  --status-informational: #276ef1;
1198
- /* Status/on-error - Brand */
1150
+ /* Status/on-error - Theme - BRAND */
1199
1151
  /* Foreground error text and icons */
1200
1152
  --status-on-error: #ffffff;
1201
- /* Status/on-information - Theme - Better Home & Garden */
1202
- --status-on-information: #ffffff;
1203
1153
  /* Status/on-informational - Brand */
1204
1154
  /* Foreground informational text and icons */
1205
1155
  --status-on-informational: #ffffff;
1206
- /* Status/on-success - Brand */
1156
+ /* Status/on-success - Theme - BRAND */
1207
1157
  /* Foreground success icons and text */
1208
1158
  --status-on-success: #ffffff;
1209
- /* Status/on-warning - Brand */
1159
+ /* Status/on-warning - Theme - BRAND */
1210
1160
  /* Foreground warning icons */
1211
1161
  --status-on-warning: #141414;
1212
- /* Status/success - Brand */
1162
+ /* Status/success - Theme - BRAND */
1213
1163
  /* Foreground success icons and text */
1214
1164
  --status-success: #258750;
1215
- /* Status/warning - Brand */
1165
+ /* Status/warning - Theme - BRAND */
1216
1166
  /* Foreground warning icons */
1217
1167
  --status-warning: #f6bc2f;
1218
- /* Stroke/Brand/brand-primary - Brand */
1168
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1219
1169
  /* Outline variant - decorative elements such as dividers */
1220
1170
  --stroke-brand-primary: #278627;
1221
- /* Stroke/Brand/brand-primary-depth - Brand */
1171
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1222
1172
  /* Outline variant - decorative elements such as dividers */
1223
1173
  --stroke-brand-primary-depth: #217221;
1224
- /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1174
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1225
1175
  --stroke-brand-secondary: #dd6b47;
1226
- /* Stroke/Brand/brand-secondary-depth - Theme - Better Homes & Gardens */
1176
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1227
1177
  --stroke-brand-secondary-depth: #bc5b3c;
1228
- /* Stroke/Neutral/neutral-base - Brand */
1178
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1229
1179
  /* For control components */
1230
1180
  --stroke-neutral-base: #949494;
1231
1181
  /* Stroke/Neutral/disabled-dark - Brand */
@@ -1242,73 +1192,53 @@ body {
1242
1192
  --stroke-neutral-focus-on-inverse: #ffffff;
1243
1193
  /* Stroke/Neutral/neutral-high - Brand */
1244
1194
  --stroke-neutral-high: #141414;
1245
- /* Stroke/Neutral/neutral-high-contrast - Theme - Better Homes & Gardens */
1246
- --stroke-neutral-high-contrast: #141414;
1247
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - Better Homes & Gardens */
1248
- --stroke-neutral-interactions-disabled-dark: #757575;
1249
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Better Homes & Gardens */
1250
- --stroke-neutral-interactions-disabled-light: #bdbdbd;
1251
- /* Stroke/Neutral/Interactions/focus - Theme - Better Homes & Gardens */
1252
- --stroke-neutral-interactions-focus: #000000;
1253
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - Better Homes & Gardens */
1254
- --stroke-neutral-interactions-inverse-focus: #ffffff;
1255
1195
  /* Stroke/Neutral/neutral-low - Brand */
1256
1196
  /* Outline variant - decorative elements such as dividers */
1257
1197
  --stroke-neutral-low: #e0e0e0;
1258
- /* Stroke/Neutral/neutral-low-contrast - Theme - Better Homes & Gardens */
1259
- --stroke-neutral-low-contrast: #e0e0e0;
1260
- /* Surface/Brand/primary - Brand */
1198
+ /* Surface/Brand/primary - Theme - BRAND */
1261
1199
  --surface-brand-primary: #278627;
1262
- /* Surface/Brand/primary-highlight - Theme - Better Homes & Gardens */
1200
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1263
1201
  --surface-brand-primary-highlight: #dfeddf;
1264
- /* Surface/Brand/secondary - Brand */
1202
+ /* Surface/Brand/secondary - Theme - BRAND */
1265
1203
  --surface-brand-secondary: #dd6b47;
1266
- /* Surface/Brand/secondary-highlight - Theme - Better Homes & Gardens */
1204
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1267
1205
  --surface-brand-secondary-highlight: #fae9e3;
1268
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1269
- --surface-neutral-interactions-dark-disabled: #d6d6d6;
1270
- /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1271
- --surface-neutral-interactions-light-disabled: #f5f5f5;
1272
1206
  /* Surface/Neutral/inverse - Brand */
1273
1207
  /* Inverted. Use for toasts notification & snackbars */
1274
1208
  --surface-neutral-inverse: #1f1f1f;
1275
- /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1276
- --surface-neutral-inverse-dark: #1f1f1f;
1277
- /* Surface/Neutral/inverse-light - Theme - Better Homes & Gardens */
1209
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1278
1210
  --surface-neutral-inverse-light: #ffffff;
1279
- /* Surface/Neutral/T1-base - Brand */
1211
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1280
1212
  --surface-neutral-t1-base: #ffffff;
1281
- /* Surface/Neutral/T2-lowest - Brand */
1213
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1282
1214
  --surface-neutral-t2-lowest: #f5f5f5;
1283
- /* Surface/Neutral/T3-low - Brand */
1215
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1284
1216
  /* Navigations, app bar etc */
1285
1217
  --surface-neutral-t3-low: #dbdbdb;
1286
- /* Surface/Neutral/T4-high - Brand */
1218
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1287
1219
  /* Navigations, app bar etc */
1288
1220
  --surface-neutral-t4-high: #8a8a8a;
1289
- /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1290
- --surface-neutral-t4-high-2: #8a8a8a;
1291
- /* Surface/Neutral/transparent - Brand */
1221
+ /* Surface/Neutral/transparent - Theme - BRAND */
1292
1222
  --surface-neutral-transparent: #ffffff00;
1293
- /* Surface/Spectrum/blue - Theme - Better Homes & Gardens */
1223
+ /* Surface/Spectrum/blue - Theme - BRAND */
1294
1224
  --surface-spectrum-blue: #dfe9fd;
1295
- /* Surface/Spectrum/green - Theme - Better Homes & Gardens */
1225
+ /* Surface/Spectrum/green - Theme - BRAND */
1296
1226
  --surface-spectrum-green: #deede5;
1297
- /* Surface/Spectrum/lime - Theme - Better Homes & Gardens */
1227
+ /* Surface/Spectrum/lime - Theme - BRAND */
1298
1228
  --surface-spectrum-lime: #f6f7e0;
1299
- /* Surface/Spectrum/magenta - Theme - Better Homes & Gardens */
1229
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1300
1230
  --surface-spectrum-magenta: #f6dbfa;
1301
- /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1231
+ /* Surface/Spectrum/orange - Theme - BRAND */
1302
1232
  --surface-spectrum-orange: #fce7d9;
1303
- /* Surface/Spectrum/pink - Theme - Better Homes & Gardens */
1233
+ /* Surface/Spectrum/pink - Theme - BRAND */
1304
1234
  --surface-spectrum-pink: #f9deec;
1305
- /* Surface/Spectrum/purple - Theme - Better Homes & Gardens */
1235
+ /* Surface/Spectrum/purple - Theme - BRAND */
1306
1236
  --surface-spectrum-purple: #e7d9fc;
1307
- /* Surface/Spectrum/red - Theme - Better Homes & Gardens */
1237
+ /* Surface/Spectrum/red - Theme - BRAND */
1308
1238
  --surface-spectrum-red: #f9e1e5;
1309
- /* Surface/Spectrum/teal - Theme - Better Homes & Gardens */
1239
+ /* Surface/Spectrum/teal - Theme - BRAND */
1310
1240
  --surface-spectrum-teal: #d9eceb;
1311
- /* Surface/Spectrum/yellow - Theme - Better Homes & Gardens */
1241
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1312
1242
  --surface-spectrum-yellow: #fef5e0;
1313
1243
 
1314
1244
  @media (width >= 640px) {
@@ -1452,11 +1382,11 @@ body {
1452
1382
  }
1453
1383
  /* dark theme */
1454
1384
  [data-theme='dark'] {
1455
- /* Background/base - Brand */
1385
+ /* Background/base - Theme - BRAND */
1456
1386
  --background-base: #1f1f1f;
1457
- /* Background/scrim - Theme - Better Homes & Gardens */
1387
+ /* Background/scrim - Theme - BRAND */
1458
1388
  --background-scrim: #61616180;
1459
- /* Background/shade - Brand */
1389
+ /* Background/shade - Theme - BRAND */
1460
1390
  --background-shade: #292929;
1461
1391
  /* Data visual/category-01 - Brand */
1462
1392
  --data-visual-category-01: #88c5af;
@@ -1486,40 +1416,8 @@ body {
1486
1416
  --data-visual-category-07: #a19abc;
1487
1417
  /* Data visual/category-07-highlight - Brand */
1488
1418
  --data-visual-category-07-highlight: #a19abc4d;
1489
- /* Data visual/category-1 - Theme - Better Home & Garden */
1490
- --data-visual-category-1: #0a466c;
1491
- /* Data visual/category-1-highlight - Theme - Better Homes & Gardens */
1492
- --data-visual-category-1-highlight: #7899ae4d;
1493
- /* Data visual/category-2 - Theme - Better Home & Garden */
1494
- --data-visual-category-2: #7fc4ec;
1495
- /* Data visual/category-2-highlight - Theme - Better Homes & Gardens */
1496
- --data-visual-category-2-highlight: #7fc4ec4d;
1497
- /* Data visual/category-3 - Theme - Better Home & Garden */
1498
- --data-visual-category-3: #958ca3;
1499
- /* Data visual/category-3-highlight - Theme - Better Homes & Gardens */
1500
- --data-visual-category-3-highlight: #958ca34d;
1501
- /* Data visual/category-4 - Theme - Better Home & Garden */
1502
- --data-visual-category-4: #88c5af;
1503
- /* Data visual/category-4-highlight - Theme - Better Homes & Gardens */
1504
- --data-visual-category-4-highlight: #88c5af4d;
1505
- /* Data visual/category-5 - Theme - Better Home & Garden */
1506
- --data-visual-category-5: #789ba0;
1507
- /* Data visual/category-5-highlight - Theme - Better Homes & Gardens */
1508
- --data-visual-category-5-highlight: #789ba04d;
1509
- /* Data visual/category-6 - Theme - Better Home & Garden */
1510
- --data-visual-category-6: #b2b2b2;
1511
- /* Data visual/category-6-highlight - Theme - Better Homes & Gardens */
1512
- --data-visual-category-6-highlight: #b2b2b24d;
1513
- /* Data visual/category-7 - Theme - Better Home & Garden */
1514
- --data-visual-category-7: #a19abc;
1515
- /* Data visual/category-7-highlight - Theme - Better Homes & Gardens */
1516
- --data-visual-category-7-highlight: #a19abc4d;
1517
- /* Data visual/gradient-end - Theme - Better Homes & Gardens */
1419
+ /* Data visual/gradient-end - Theme - BRAND */
1518
1420
  --data-visual-gradient-end: #1f1f1f4d;
1519
- /* Data visual/green - Theme - Better Homes & Gardens */
1520
- --data-visual-green: #7cb796;
1521
- /* Data visual/green-highlight - Theme - Better Homes & Gardens */
1522
- --data-visual-green-highlight: #0d2f1c;
1523
1421
  /* Data visual/negative - Brand */
1524
1422
  --data-visual-negative: #e88997;
1525
1423
  /* Data visual/negative-highlight - Brand */
@@ -1528,109 +1426,99 @@ body {
1528
1426
  --data-visual-positive: #7cb796;
1529
1427
  /* Data visual/positive-highlight - Brand */
1530
1428
  --data-visual-positive-highlight: #0d2f1c;
1531
- /* Data visual/red - Theme - Better Homes & Gardens */
1532
- --data-visual-red: #e88997;
1533
- /* Data visual/red-highlight - Theme - Better Homes & Gardens */
1534
- --data-visual-red-highlight: #4c141d;
1535
- /* Foreground/Brand/on-inverse-primary - Theme - Better Homes & Gardens */
1429
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1536
1430
  --foreground-brand-on-inverse-primary: #7db67c;
1537
- /* Foreground/Brand/on-inverse-secondary - Theme - Better Homes & Gardens */
1431
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1538
1432
  --foreground-brand-on-inverse-secondary: #eba691;
1539
- /* Foreground/Brand/on-brand-primary - Brand */
1433
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1540
1434
  /* Foreground color used on Brand's primary color (non neutral color) */
1541
1435
  --foreground-brand-on-primary: #141414;
1542
- /* Foreground/Brand/on-brand-secondary - Brand */
1436
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1543
1437
  /* Foreground color used on Brand's primary color (non neutral color) */
1544
1438
  --foreground-brand-on-secondary: #141414;
1545
- /* Foreground/Brand/brand-primary - Brand */
1439
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1546
1440
  /* Foreground text and icons that match the brand's primary color */
1547
1441
  --foreground-brand-primary: #7db67c;
1548
- /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1442
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1549
1443
  --foreground-brand-primary-depth: #88bc88;
1550
- /* Foreground/Brand/brand-secondary - Brand */
1444
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1551
1445
  /* Foreground text and icons that match the brand's secondary color */
1552
1446
  --foreground-brand-secondary: #eba691;
1553
- /* Foreground/Brand/brand-secondary-depth - Theme - Better Homes & Gardens */
1447
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1554
1448
  --foreground-brand-secondary-depth: #eba691;
1555
- /* Foreground/Link text/default - Brand */
1449
+ /* Foreground/Link text/default - Theme - BRAND */
1556
1450
  --foreground-link-text-default: #7a9ee1;
1557
- /* Foreground/Link text/default-disabled - Brand */
1451
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1558
1452
  --foreground-link-text-default-disabled: #14387b;
1559
- /* Foreground/Link text/default-hovered - Theme - Better Homes & Gardens */
1453
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1560
1454
  --foreground-link-text-default-hovered: #90afe6;
1561
- /* Foreground/Link text/default-pressed - Theme - Better Homes & Gardens */
1455
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1562
1456
  --foreground-link-text-default-pressed: #a6bfeb;
1563
- /* Foreground/Link text/default-visited - Brand */
1457
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1564
1458
  --foreground-link-text-default-visited: #af8baf;
1565
1459
  /* Foreground/Link text/subtle-disabled - Brand */
1566
1460
  --foreground-link-text-subtle-disabled: #4d4d4d;
1567
- /* Foreground/Link text/subtle-hovered - Theme - Better Homes & Gardens */
1461
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1568
1462
  --foreground-link-text-subtle-hovered: #e6e6e6;
1569
- /* Foreground/Link text/subtle-inverse-hovered - Theme - Better Homes & Gardens */
1463
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1570
1464
  --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1571
- /* Foreground/Link text/subtle-inverse-pressed - Theme - Better Homes & Gardens */
1465
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1572
1466
  --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1573
1467
  /* Foreground/Link text/subtle-inversed-disabled - Brand */
1574
1468
  --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
1575
- /* Foreground/Link text/subtle-pressed - Theme - Better Homes & Gardens */
1469
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1576
1470
  --foreground-link-text-subtle-pressed: #d1d1d1;
1577
- /* Foreground/Neutral/disabled-on-color-surface - Brand */
1471
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1578
1472
  --foreground-neutral-disabled-on-color-surface: #3d3d3d;
1579
- /* Foreground/Neutral/disabled-on-surface - Brand */
1473
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1580
1474
  --foreground-neutral-disabled-on-surface: #4d4d4d;
1581
- /* Foreground/Neutral/inverse-on-surface - Theme - Better Homes & Gardens */
1582
- --foreground-neutral-inverse-on-surface: #fafafa;
1583
- /* Foreground/Neutral/on-color - Brand */
1475
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1584
1476
  /* Interactive controls */
1585
1477
  --foreground-neutral-on-color: #ffffff;
1586
1478
  /* Foreground/Neutral/on-inverse-surface - Brand */
1587
1479
  /* Text and icons against inverse surface */
1588
1480
  --foreground-neutral-on-inverse-surface: #fafafa;
1589
- /* Foreground/Neutral/on-surface - Brand */
1481
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1590
1482
  /* Default foreground text and icons against any surface color */
1591
1483
  --foreground-neutral-on-surface: #fafafa;
1592
- /* Foreground/Neutral/on-surface-variant-01 - Brand */
1484
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1593
1485
  /* Secondary foreground color for icons and text */
1594
1486
  --foreground-neutral-on-surface-variant-01: #c2c2c2;
1595
- /* Foreground/Neutral/on-surface-variant-02 - Brand */
1487
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1596
1488
  /* Tertiary foreground color for icons and text */
1597
1489
  --foreground-neutral-on-surface-variant-02: #9e9e9e;
1598
- /* Foreground/Neutral/on-surface-variant-03 - Brand */
1490
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1599
1491
  /* Quaternary foreground color for icons and text. Only for placeholder text */
1600
1492
  --foreground-neutral-on-surface-variant-03: #757575;
1601
- /* Foreground/Neutral/skeleton-element - Brand */
1493
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1602
1494
  --foreground-neutral-skeleton-element: #333333;
1603
- /* Foreground/Spectrum/blue - Theme - Better Homes & Gardens */
1495
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1604
1496
  --foreground-spectrum-blue: #88aff7;
1605
- /* Foreground/Spectrum/green - Theme - Better Homes & Gardens */
1497
+ /* Foreground/Spectrum/green - Theme - BRAND */
1606
1498
  --foreground-spectrum-green: #87bd9f;
1607
- /* Foreground/Spectrum/lime - Theme - Better Homes & Gardens */
1499
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1608
1500
  --foreground-spectrum-lime: #dce28f;
1609
- /* Foreground/Spectrum/magenta - Theme - Better Homes & Gardens */
1501
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1610
1502
  --foreground-spectrum-magenta: #e07aed;
1611
- /* Foreground/Spectrum/orange - Brand */
1503
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1612
1504
  --foreground-spectrum-orange: #f6a874;
1613
- /* Foreground/Spectrum/pink - Theme - Better Homes & Gardens */
1505
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1614
1506
  --foreground-spectrum-pink: #ea86b9;
1615
- /* Foreground/Spectrum/purple - Theme - Better Homes & Gardens */
1507
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1616
1508
  --foreground-spectrum-purple: #c8a6f9;
1617
- /* Foreground/Spectrum/red - Brand */
1509
+ /* Foreground/Spectrum/red - Theme - BRAND */
1618
1510
  --foreground-spectrum-red: #ea93a0;
1619
- /* Foreground/Spectrum/teal - Theme - Better Homes & Gardens */
1511
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1620
1512
  --foreground-spectrum-teal: #74bbb4;
1621
- /* Foreground/Spectrum/yellow - Theme - Better Homes & Gardens */
1513
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1622
1514
  --foreground-spectrum-yellow: #fada8d;
1623
- /* Interactions/brand-disabled-opacity - Theme - Better Homes & Gardens */
1624
- --interactions-brand-disabled-opacity: #ffffff0f;
1625
- /* Interactions/brand-hover-opacity - Theme - Better Homes & Gardens */
1515
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1626
1516
  --interactions-brand-hover-opacity: #ffffff1a;
1627
- /* Interactions/brand-press-opacity - Theme - Better Homes & Gardens */
1517
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1628
1518
  --interactions-brand-press-opacity: #ffffff33;
1629
- /* Interactions/disabled-opacity - Theme - Better Homes & Gardens */
1519
+ /* Interactions/disabled-opacity - Theme - BRAND */
1630
1520
  --interactions-disabled-opacity: #ffffff0f;
1631
- /* Interactions/hover-opacity - Theme - Better Homes & Gardens */
1632
- --interactions-hover-opacity: #ffffff14;
1633
- /* Interactions/link-active-opacity - Brand */
1521
+ /* Interactions/link-active-opacity - Theme - BRAND */
1634
1522
  --interactions-link-active-opacity: #ffffff4d;
1635
1523
  /* Interactions/neutral-hover-opacity - Brand */
1636
1524
  /* surfaces using neutral tones */
@@ -1638,28 +1526,14 @@ body {
1638
1526
  /* Interactions/neutral-press-opacity - Brand */
1639
1527
  /* surfaces using neutral tones */
1640
1528
  --interactions-neutral-press-opacity: #ffffff29;
1641
- /* Interactions/press-opacity - Theme - Better Homes & Gardens */
1642
- --interactions-press-opacity: #ffffff29;
1643
- /* Interactions/primary-disabled-opacity - Theme - Better Homes & Gardens */
1529
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1644
1530
  --interactions-primary-disabled-opacity: #7db67c1f;
1645
- /* Interactions/primary-hover-opacity - Theme - Better Homes & Gardens */
1531
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1646
1532
  --interactions-primary-hover-opacity: #7db67c1a;
1647
- /* Interactions/primary-press-opacity - Theme - Better Homes & Gardens */
1533
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1648
1534
  --interactions-primary-press-opacity: #7db67c33;
1649
- /* Shadow/shadow-10 - Theme - Better Homes & Gardens */
1650
- --shadow-10: #6161611a;
1651
- /* Shadow/shadow-12 - Theme - Better Homes & Gardens */
1652
- --shadow-12: #6161611f;
1653
- /* Shadow/shadow-15 - Theme - Better Homes & Gardens */
1654
- --shadow-15: #61616126;
1655
- /* Shadow/shadow-25 - Theme - Better Homes & Gardens */
1656
- --shadow-25: #61616140;
1657
- /* Shadow/shadow-32 - Theme - Better Homes & Gardens */
1658
- --shadow-32: #61616152;
1659
1535
  /* Shadow/inner-shadow - Brand */
1660
1536
  --shadow-inner: #000000;
1661
- /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1662
- --shadow-inner-100: #000000;
1663
1537
  /* Shadow/variant-01 - Brand */
1664
1538
  --shadow-variant-01: #6161611a;
1665
1539
  /* Shadow/variant-02 - Brand */
@@ -1670,45 +1544,41 @@ body {
1670
1544
  --shadow-variant-04: #61616140;
1671
1545
  /* Shadow/variant-05 - Brand */
1672
1546
  --shadow-variant-05: #61616152;
1673
- /* Status/error - Brand */
1547
+ /* Status/error - Theme - BRAND */
1674
1548
  /* Foreground error text and icons */
1675
1549
  --status-error: #e26b7d;
1676
- /* Status/information - Theme - Better Home & Garden */
1677
- --status-information: #5d92f5;
1678
1550
  /* Status/informational - Brand */
1679
1551
  /* Foreground informational text and icons */
1680
1552
  --status-informational: #5d92f5;
1681
- /* Status/on-error - Brand */
1553
+ /* Status/on-error - Theme - BRAND */
1682
1554
  /* Foreground error text and icons */
1683
1555
  --status-on-error: #ffffff;
1684
- /* Status/on-information - Theme - Better Home & Garden */
1685
- --status-on-information: #ffffff;
1686
1556
  /* Status/on-informational - Brand */
1687
1557
  /* Foreground informational text and icons */
1688
1558
  --status-on-informational: #ffffff;
1689
- /* Status/on-success - Brand */
1559
+ /* Status/on-success - Theme - BRAND */
1690
1560
  /* Foreground success icons and text */
1691
1561
  --status-on-success: #141414;
1692
- /* Status/on-warning - Brand */
1562
+ /* Status/on-warning - Theme - BRAND */
1693
1563
  /* Foreground warning icons */
1694
1564
  --status-on-warning: #141414;
1695
- /* Status/success - Brand */
1565
+ /* Status/success - Theme - BRAND */
1696
1566
  /* Foreground success icons and text */
1697
1567
  --status-success: #519f73;
1698
- /* Status/warning - Brand */
1568
+ /* Status/warning - Theme - BRAND */
1699
1569
  /* Foreground warning icons */
1700
1570
  --status-warning: #f8cd63;
1701
- /* Stroke/Brand/brand-primary - Brand */
1571
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1702
1572
  /* Outline variant - decorative elements such as dividers */
1703
1573
  --stroke-brand-primary: #7db67c;
1704
- /* Stroke/Brand/brand-primary-depth - Brand */
1574
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1705
1575
  /* Outline variant - decorative elements such as dividers */
1706
1576
  --stroke-brand-primary-depth: #88bc88;
1707
- /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1577
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1708
1578
  --stroke-brand-secondary: #f0bcac;
1709
- /* Stroke/Brand/brand-secondary-depth - Theme - Better Homes & Gardens */
1579
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1710
1580
  --stroke-brand-secondary-depth: #eba691;
1711
- /* Stroke/Neutral/neutral-base - Brand */
1581
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1712
1582
  /* For control components */
1713
1583
  --stroke-neutral-base: #6b6b6b;
1714
1584
  /* Stroke/Neutral/disabled-dark - Brand */
@@ -1725,72 +1595,52 @@ body {
1725
1595
  --stroke-neutral-focus-on-inverse: #ffffff;
1726
1596
  /* Stroke/Neutral/neutral-high - Brand */
1727
1597
  --stroke-neutral-high: #fafafa;
1728
- /* Stroke/Neutral/neutral-high-contrast - Theme - Better Homes & Gardens */
1729
- --stroke-neutral-high-contrast: #fafafa;
1730
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - Better Homes & Gardens */
1731
- --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1732
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Better Homes & Gardens */
1733
- --stroke-neutral-interactions-disabled-light: #4d4d4d;
1734
- /* Stroke/Neutral/Interactions/focus - Theme - Better Homes & Gardens */
1735
- --stroke-neutral-interactions-focus: #ffffff;
1736
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - Better Homes & Gardens */
1737
- --stroke-neutral-interactions-inverse-focus: #ffffff;
1738
1598
  /* Stroke/Neutral/neutral-low - Brand */
1739
1599
  /* Outline variant - decorative elements such as dividers */
1740
1600
  --stroke-neutral-low: #4d4d4d;
1741
- /* Stroke/Neutral/neutral-low-contrast - Theme - Better Homes & Gardens */
1742
- --stroke-neutral-low-contrast: #4d4d4d;
1743
- /* Surface/Brand/primary - Brand */
1601
+ /* Surface/Brand/primary - Theme - BRAND */
1744
1602
  --surface-brand-primary: #7db67c;
1745
- /* Surface/Brand/primary-highlight - Theme - Better Homes & Gardens */
1603
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1746
1604
  --surface-brand-primary-highlight: #0a220a;
1747
- /* Surface/Brand/secondary - Brand */
1605
+ /* Surface/Brand/secondary - Theme - BRAND */
1748
1606
  --surface-brand-secondary: #f0bcac;
1749
- /* Surface/Brand/secondary-highlight - Theme - Better Homes & Gardens */
1607
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1750
1608
  --surface-brand-secondary-highlight: #371b12;
1751
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1752
- --surface-neutral-interactions-dark-disabled: #474747;
1753
- /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1754
- --surface-neutral-interactions-light-disabled: #292929;
1755
1609
  /* Surface/Neutral/inverse - Brand */
1756
1610
  /* Inverted. Use for toasts notification & snackbars */
1757
1611
  --surface-neutral-inverse: #383838;
1758
- /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1759
- --surface-neutral-inverse-dark: #383838;
1760
- /* Surface/Neutral/inverse-light - Theme - Better Homes & Gardens */
1612
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1761
1613
  --surface-neutral-inverse-light: #575757;
1762
- /* Surface/Neutral/T1-base - Brand */
1614
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1763
1615
  --surface-neutral-t1-base: #1f1f1f;
1764
- /* Surface/Neutral/T2-lowest - Brand */
1616
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1765
1617
  --surface-neutral-t2-lowest: #2e2e2e;
1766
- /* Surface/Neutral/T3-low - Brand */
1618
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1767
1619
  /* Navigations, app bar etc */
1768
1620
  --surface-neutral-t3-low: #383838;
1769
- /* Surface/Neutral/T4-high - Brand */
1621
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1770
1622
  /* Navigations, app bar etc */
1771
1623
  --surface-neutral-t4-high: #7a7a7a;
1772
- /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1773
- --surface-neutral-t4-high-2: #7a7a7a;
1774
- /* Surface/Neutral/transparent - Brand */
1624
+ /* Surface/Neutral/transparent - Theme - BRAND */
1775
1625
  --surface-neutral-transparent: #ffffff00;
1776
- /* Surface/Spectrum/blue - Theme - Better Homes & Gardens */
1626
+ /* Surface/Spectrum/blue - Theme - BRAND */
1777
1627
  --surface-spectrum-blue: #0e2754;
1778
- /* Surface/Spectrum/green - Theme - Better Homes & Gardens */
1628
+ /* Surface/Spectrum/green - Theme - BRAND */
1779
1629
  --surface-spectrum-green: #0d2f1c;
1780
- /* Surface/Spectrum/lime - Theme - Better Homes & Gardens */
1630
+ /* Surface/Spectrum/lime - Theme - BRAND */
1781
1631
  --surface-spectrum-lime: #434712;
1782
- /* Surface/Spectrum/magenta - Theme - Better Homes & Gardens */
1632
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1783
1633
  --surface-spectrum-magenta: #45054e;
1784
- /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1634
+ /* Surface/Spectrum/orange - Theme - BRAND */
1785
1635
  --surface-spectrum-orange: #532201;
1786
- /* Surface/Spectrum/pink - Theme - Better Homes & Gardens */
1636
+ /* Surface/Spectrum/pink - Theme - BRAND */
1787
1637
  --surface-spectrum-pink: #4c0c2d;
1788
- /* Surface/Spectrum/purple - Theme - Better Homes & Gardens */
1638
+ /* Surface/Spectrum/purple - Theme - BRAND */
1789
1639
  --surface-spectrum-purple: #220053;
1790
- /* Surface/Spectrum/red - Theme - Better Homes & Gardens */
1640
+ /* Surface/Spectrum/red - Theme - BRAND */
1791
1641
  --surface-spectrum-red: #4c141d;
1792
- /* Surface/Spectrum/teal - Theme - Better Homes & Gardens */
1642
+ /* Surface/Spectrum/teal - Theme - BRAND */
1793
1643
  --surface-spectrum-teal: #012e2a;
1794
- /* Surface/Spectrum/yellow - Theme - Better Homes & Gardens */
1644
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1795
1645
  --surface-spectrum-yellow: #564210;
1796
1646
  }