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