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