@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/agent-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/Agent 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/Agent 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/Agent 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/Agent 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/Agent 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/Agent 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/Agent 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/Agent 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/Agent 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/Agent 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/Agent Workplace/Primary/00-base - Global (primitives) */
547
+ /* Colors/Brands/BRAND/Primary/00-base - Global (primitives) */
546
548
  --primary-00-base: #19172f;
547
- /* Colors/Brands/Agent Workplace/Primary/15-dark - Global (primitives) */
549
+ /* Colors/Brands/BRAND/Primary/15-dark - Global (primitives) */
548
550
  --primary-15-dark: #151428;
549
- /* Colors/Brands/Agent Workplace/Primary/40-light - Global (primitives) */
551
+ /* Colors/Brands/BRAND/Primary/40-light - Global (primitives) */
550
552
  --primary-40-light: #757482;
551
- /* Colors/Brands/Agent Workplace/Primary/55-light - Global (primitives) */
553
+ /* Colors/Brands/BRAND/Primary/55-light - Global (primitives) */
552
554
  --primary-55-light: #9897a1;
553
- /* Colors/Brands/Agent Workplace/Primary/75-dark - Global (primitives) */
555
+ /* Colors/Brands/BRAND/Primary/75-dark - Global (primitives) */
554
556
  --primary-75-dark: #06060c;
555
- /* Colors/Brands/Agent 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/Agent Workplace/Secondary/00-base - Global (primitives) */
571
+ /* Colors/Brands/BRAND/Secondary/00-base - Global (primitives) */
568
572
  --secondary-00-base: #eb672f;
569
- /* Colors/Brands/Agent Workplace/Secondary/15-dark - Global (primitives) */
573
+ /* Colors/Brands/BRAND/Secondary/15-dark - Global (primitives) */
570
574
  --secondary-15-dark: #c85828;
571
- /* Colors/Brands/Agent Workplace/Secondary/40-light - Global (primitives) */
575
+ /* Colors/Brands/BRAND/Secondary/40-light - Global (primitives) */
572
576
  --secondary-40-light: #f3a482;
573
- /* Colors/Brands/Agent Workplace/Secondary/55-light - Global (primitives) */
577
+ /* Colors/Brands/BRAND/Secondary/55-light - Global (primitives) */
574
578
  --secondary-55-light: #f6bba1;
575
- /* Colors/Brands/Agent Workplace/Secondary/75-dark - Global (primitives) */
579
+ /* Colors/Brands/BRAND/Secondary/75-dark - Global (primitives) */
576
580
  --secondary-75-dark: #3b1a0c;
577
- /* Colors/Brands/Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent Workplace */
1007
- --data-visual-category-7-highlight: #4334794d;
1008
- /* Data visual/gradient-end - Theme - Agent 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 - Agent Workplace */
1020
+ /* Data visual/green - Theme - BRAND */
1011
1021
  --data-visual-green: #258750;
1012
- /* Data visual/green-highlight - Theme - Agent 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 - Agent Workplace */
1032
+ /* Data visual/red - Theme - BRAND */
1023
1033
  --data-visual-red: #d83a52;
1024
- /* Data visual/red-highlight - Theme - Agent Workplace */
1034
+ /* Data visual/red-highlight - Theme - BRAND */
1025
1035
  --data-visual-red-highlight: #f9e1e5;
1026
- /* Foreground/AI-powered/blue - Theme - Agent Workplace */
1036
+ /* Foreground/AI-powered/blue - Theme - BRAND */
1027
1037
  --foreground-ai-powered-blue: #215ecd;
1028
- /* Foreground/AI-powered/pink - Theme - Agent Workplace */
1038
+ /* Foreground/AI-powered/pink - Theme - BRAND */
1029
1039
  --foreground-ai-powered-pink: #c60ede;
1030
- /* Foreground/Brand/on-inverse-primary - Theme - Agent Workplace */
1040
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1031
1041
  --foreground-brand-on-inverse-primary: #757482;
1032
- /* Foreground/Brand/on-inverse-secondary - Theme - Agent Workplace */
1042
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1033
1043
  --foreground-brand-on-inverse-secondary: #f3a482;
1034
- /* Foreground/Brand/on-brand-primary - Brand */
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 - Agent Workplace */
1058
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1049
1059
  --foreground-brand-secondary-depth: #c85828;
1050
- /* Foreground/Link text/default - Brand */
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 - Agent Workplace */
1064
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1055
1065
  --foreground-link-text-default-hovered: #1e55b9;
1056
- /* Foreground/Link text/default-pressed - Theme - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent Workplace */
1108
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1099
1109
  --foreground-spectrum-blue: #143778;
1100
- /* Foreground/Spectrum/green - Theme - Agent Workplace */
1110
+ /* Foreground/Spectrum/green - Theme - BRAND */
1101
1111
  --foreground-spectrum-green: #134428;
1102
- /* Foreground/Spectrum/lime - Theme - Agent Workplace */
1112
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1103
1113
  --foreground-spectrum-lime: #60651a;
1104
- /* Foreground/Spectrum/magenta - Theme - Agent 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 - Agent Workplace */
1118
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1109
1119
  --foreground-spectrum-pink: #6c1240;
1110
- /* Foreground/Spectrum/purple - Theme - Agent 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 - Agent Workplace */
1124
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1115
1125
  --foreground-spectrum-teal: #01413c;
1116
- /* Foreground/Spectrum/yellow - Theme - Agent Workplace */
1126
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1117
1127
  --foreground-spectrum-yellow: #7b5e18;
1118
- /* Interactions/brand-disabled-opacity - Theme - Agent Workplace */
1128
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1119
1129
  --interactions-brand-disabled-opacity: #0000000f;
1120
- /* Interactions/brand-hover-opacity - Theme - Agent Workplace */
1130
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1121
1131
  --interactions-brand-hover-opacity: #0000001a;
1122
- /* Interactions/brand-press-opacity - Theme - Agent Workplace */
1132
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1123
1133
  --interactions-brand-press-opacity: #00000033;
1124
- /* Interactions/disabled-opacity - Theme - Agent Workplace */
1134
+ /* Interactions/disabled-opacity - Theme - BRAND */
1125
1135
  --interactions-disabled-opacity: #0000000f;
1126
- /* Interactions/hover-opacity - Theme - Agent 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 - Agent Workplace */
1146
+ /* Interactions/press-opacity - Theme - BRAND */
1137
1147
  --interactions-press-opacity: #00000029;
1138
- /* Interactions/primary-disabled-opacity - Theme - Agent Workplace */
1148
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1139
1149
  --interactions-primary-disabled-opacity: #19172f1f;
1140
- /* Interactions/primary-hover-opacity - Theme - Agent Workplace */
1150
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1141
1151
  --interactions-primary-hover-opacity: #19172f1a;
1142
- /* Interactions/primary-press-opacity - Theme - Agent Workplace */
1152
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1143
1153
  --interactions-primary-press-opacity: #19172f33;
1144
- /* Shadow/shadow-10 - Theme - Agent Workplace */
1154
+ /* Shadow/shadow-10 - Theme - BRAND */
1145
1155
  --shadow-10: #0000001a;
1146
- /* Shadow/shadow-12 - Theme - Agent Workplace */
1156
+ /* Shadow/shadow-12 - Theme - BRAND */
1147
1157
  --shadow-12: #0000001f;
1148
- /* Shadow/shadow-15 - Theme - Agent Workplace */
1158
+ /* Shadow/shadow-15 - Theme - BRAND */
1149
1159
  --shadow-15: #00000026;
1150
- /* Shadow/shadow-25 - Theme - Agent Workplace */
1160
+ /* Shadow/shadow-25 - Theme - BRAND */
1151
1161
  --shadow-25: #00000040;
1152
- /* Shadow/shadow-32 - Theme - Agent 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 - Agent Workplace */
1206
+ /* Stroke/AI-powered/blue - Theme - BRAND */
1197
1207
  --stroke-ai-powered-blue: #215ecd;
1198
- /* Stroke/AI-powered/pink - Theme - Agent 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 - Agent Workplace */
1216
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1217
+ --stroke-brand-secondary: #eb672f;
1218
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1209
1219
  --stroke-brand-secondary-depth: #c85828;
1210
- /* Stroke/Neutral/neutral-base - Brand */
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 - Agent Workplace */
1237
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1228
1238
  --stroke-neutral-high-contrast: #141414;
1229
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - Agent Workplace */
1239
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1230
1240
  --stroke-neutral-interactions-disabled-dark: #757575;
1231
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Agent Workplace */
1241
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1232
1242
  --stroke-neutral-interactions-disabled-light: #bdbdbd;
1233
- /* Stroke/Neutral/Interactions/focus - Theme - Agent Workplace */
1243
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1234
1244
  --stroke-neutral-interactions-focus: #000000;
1235
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - Agent 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 - Agent Workplace */
1250
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1241
1251
  --stroke-neutral-low-contrast: #e0e0e0;
1242
- /* Surface/AI-powered/blue - Theme - Agent Workplace */
1252
+ /* Surface/AI-powered/blue - Theme - BRAND */
1243
1253
  --surface-ai-powered-blue: #215ecd;
1244
- /* Surface/AI-powered/pink - Theme - Agent 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 - Agent 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 - Agent Workplace */
1262
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1253
1263
  --surface-brand-secondary-highlight: #fce8e0;
1254
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
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 - Agent 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 - Agent Workplace */
1287
+ /* Surface/Spectrum/blue - Theme - BRAND */
1280
1288
  --surface-spectrum-blue: #dfe9fd;
1281
- /* Surface/Spectrum/green - Theme - Agent Workplace */
1289
+ /* Surface/Spectrum/green - Theme - BRAND */
1282
1290
  --surface-spectrum-green: #deede5;
1283
- /* Surface/Spectrum/lime - Theme - Agent Workplace */
1291
+ /* Surface/Spectrum/lime - Theme - BRAND */
1284
1292
  --surface-spectrum-lime: #f6f7e0;
1285
- /* Surface/Spectrum/magenta - Theme - Agent 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 - Agent Workplace */
1297
+ /* Surface/Spectrum/pink - Theme - BRAND */
1290
1298
  --surface-spectrum-pink: #f9deec;
1291
- /* Surface/Spectrum/purple - Theme - Agent Workplace */
1299
+ /* Surface/Spectrum/purple - Theme - BRAND */
1292
1300
  --surface-spectrum-purple: #e7d9fc;
1293
- /* Surface/Spectrum/red - Theme - Agent Workplace */
1301
+ /* Surface/Spectrum/red - Theme - BRAND */
1294
1302
  --surface-spectrum-red: #f9e1e5;
1295
- /* Surface/Spectrum/teal - Theme - Agent Workplace */
1303
+ /* Surface/Spectrum/teal - Theme - BRAND */
1296
1304
  --surface-spectrum-teal: #d9eceb;
1297
- /* Surface/Spectrum/yellow - Theme - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent Workplace */
1502
- --data-visual-category-7-highlight: #a19abc4d;
1503
- /* Data visual/gradient-end - Theme - Agent 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 - Agent Workplace */
1513
+ /* Data visual/green - Theme - BRAND */
1506
1514
  --data-visual-green: #7cb796;
1507
- /* Data visual/green-highlight - Theme - Agent 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 - Agent Workplace */
1525
+ /* Data visual/red - Theme - BRAND */
1518
1526
  --data-visual-red: #e88997;
1519
- /* Data visual/red-highlight - Theme - Agent Workplace */
1527
+ /* Data visual/red-highlight - Theme - BRAND */
1520
1528
  --data-visual-red-highlight: #4c141d;
1521
- /* Foreground/AI-powered/blue - Theme - Agent Workplace */
1529
+ /* Foreground/AI-powered/blue - Theme - BRAND */
1522
1530
  --foreground-ai-powered-blue: #000000;
1523
- /* Foreground/AI-powered/pink - Theme - Agent Workplace */
1531
+ /* Foreground/AI-powered/pink - Theme - BRAND */
1524
1532
  --foreground-ai-powered-pink: #000000;
1525
- /* Foreground/Brand/on-inverse-primary - Theme - Agent Workplace */
1533
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1526
1534
  --foreground-brand-on-inverse-primary: #757482;
1527
- /* Foreground/Brand/on-inverse-secondary - Theme - Agent Workplace */
1535
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1528
1536
  --foreground-brand-on-inverse-secondary: #f3a482;
1529
- /* Foreground/Brand/on-brand-primary - Brand */
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 - Agent Workplace */
1551
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1544
1552
  --foreground-brand-secondary-depth: #f6bba1;
1545
- /* Foreground/Link text/default - Brand */
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 - Agent Workplace */
1557
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1550
1558
  --foreground-link-text-default-hovered: #90afe6;
1551
- /* Foreground/Link text/default-pressed - Theme - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent 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 - Agent Workplace */
1601
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1594
1602
  --foreground-spectrum-blue: #88aff7;
1595
- /* Foreground/Spectrum/green - Theme - Agent Workplace */
1603
+ /* Foreground/Spectrum/green - Theme - BRAND */
1596
1604
  --foreground-spectrum-green: #87bd9f;
1597
- /* Foreground/Spectrum/lime - Theme - Agent Workplace */
1605
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1598
1606
  --foreground-spectrum-lime: #dce28f;
1599
- /* Foreground/Spectrum/magenta - Theme - Agent 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 - Agent Workplace */
1611
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1604
1612
  --foreground-spectrum-pink: #ea86b9;
1605
- /* Foreground/Spectrum/purple - Theme - Agent 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 - Agent Workplace */
1617
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1610
1618
  --foreground-spectrum-teal: #74bbb4;
1611
- /* Foreground/Spectrum/yellow - Theme - Agent Workplace */
1619
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1612
1620
  --foreground-spectrum-yellow: #fada8d;
1613
- /* Interactions/brand-disabled-opacity - Theme - Agent Workplace */
1621
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1614
1622
  --interactions-brand-disabled-opacity: #ffffff0f;
1615
- /* Interactions/brand-hover-opacity - Theme - Agent Workplace */
1623
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1616
1624
  --interactions-brand-hover-opacity: #ffffff1a;
1617
- /* Interactions/brand-press-opacity - Theme - Agent Workplace */
1625
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1618
1626
  --interactions-brand-press-opacity: #ffffff33;
1619
- /* Interactions/disabled-opacity - Theme - Agent Workplace */
1627
+ /* Interactions/disabled-opacity - Theme - BRAND */
1620
1628
  --interactions-disabled-opacity: #ffffff0f;
1621
- /* Interactions/hover-opacity - Theme - Agent 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 - Agent Workplace */
1639
+ /* Interactions/press-opacity - Theme - BRAND */
1632
1640
  --interactions-press-opacity: #ffffff29;
1633
- /* Interactions/primary-disabled-opacity - Theme - Agent Workplace */
1641
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1634
1642
  --interactions-primary-disabled-opacity: #7574821f;
1635
- /* Interactions/primary-hover-opacity - Theme - Agent Workplace */
1643
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1636
1644
  --interactions-primary-hover-opacity: #7574821a;
1637
- /* Interactions/primary-press-opacity - Theme - Agent Workplace */
1645
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1638
1646
  --interactions-primary-press-opacity: #75748233;
1639
- /* Shadow/shadow-10 - Theme - Agent Workplace */
1647
+ /* Shadow/shadow-10 - Theme - BRAND */
1640
1648
  --shadow-10: #6161611a;
1641
- /* Shadow/shadow-12 - Theme - Agent Workplace */
1649
+ /* Shadow/shadow-12 - Theme - BRAND */
1642
1650
  --shadow-12: #6161611f;
1643
- /* Shadow/shadow-15 - Theme - Agent Workplace */
1651
+ /* Shadow/shadow-15 - Theme - BRAND */
1644
1652
  --shadow-15: #61616126;
1645
- /* Shadow/shadow-25 - Theme - Agent Workplace */
1653
+ /* Shadow/shadow-25 - Theme - BRAND */
1646
1654
  --shadow-25: #61616140;
1647
- /* Shadow/shadow-32 - Theme - Agent 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 - Agent Workplace */
1699
+ /* Stroke/AI-powered/blue - Theme - BRAND */
1692
1700
  --stroke-ai-powered-blue: #000000;
1693
- /* Stroke/AI-powered/pink - Theme - Agent 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 - Agent Workplace */
1709
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1710
+ --stroke-brand-secondary: #f3a482;
1711
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1704
1712
  --stroke-brand-secondary-depth: #f6bba1;
1705
- /* Stroke/Neutral/neutral-base - Brand */
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 - Agent Workplace */
1730
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1723
1731
  --stroke-neutral-high-contrast: #fafafa;
1724
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - Agent Workplace */
1732
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1725
1733
  --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1726
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Agent Workplace */
1734
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1727
1735
  --stroke-neutral-interactions-disabled-light: #4d4d4d;
1728
- /* Stroke/Neutral/Interactions/focus - Theme - Agent Workplace */
1736
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1729
1737
  --stroke-neutral-interactions-focus: #ffffff;
1730
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - Agent 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 - Agent Workplace */
1743
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1736
1744
  --stroke-neutral-low-contrast: #4d4d4d;
1737
- /* Surface/AI-powered/blue - Theme - Agent Workplace */
1745
+ /* Surface/AI-powered/blue - Theme - BRAND */
1738
1746
  --surface-ai-powered-blue: #000000;
1739
- /* Surface/AI-powered/pink - Theme - Agent 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 - Agent 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 - Agent Workplace */
1755
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1748
1756
  --surface-brand-secondary-highlight: #3b1a0c;
1749
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1757
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1750
1758
  --surface-neutral-interactions-dark-disabled: #474747;
1751
- /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1759
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1752
1760
  --surface-neutral-interactions-light-disabled: #292929;
1753
1761
  /* Surface/Neutral/inverse - Brand */
1754
1762
  /* Inverted. Use for toasts notification & snackbars */
1755
1763
  --surface-neutral-inverse: #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 - Agent 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 - Agent Workplace */
1780
+ /* Surface/Spectrum/blue - Theme - BRAND */
1775
1781
  --surface-spectrum-blue: #0e2754;
1776
- /* Surface/Spectrum/green - Theme - Agent Workplace */
1782
+ /* Surface/Spectrum/green - Theme - BRAND */
1777
1783
  --surface-spectrum-green: #0d2f1c;
1778
- /* Surface/Spectrum/lime - Theme - Agent Workplace */
1784
+ /* Surface/Spectrum/lime - Theme - BRAND */
1779
1785
  --surface-spectrum-lime: #434712;
1780
- /* Surface/Spectrum/magenta - Theme - Agent 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 - Agent Workplace */
1790
+ /* Surface/Spectrum/pink - Theme - BRAND */
1785
1791
  --surface-spectrum-pink: #4c0c2d;
1786
- /* Surface/Spectrum/purple - Theme - Agent Workplace */
1792
+ /* Surface/Spectrum/purple - Theme - BRAND */
1787
1793
  --surface-spectrum-purple: #220053;
1788
- /* Surface/Spectrum/red - Theme - Agent Workplace */
1794
+ /* Surface/Spectrum/red - Theme - BRAND */
1789
1795
  --surface-spectrum-red: #4c141d;
1790
- /* Surface/Spectrum/teal - Theme - Agent Workplace */
1796
+ /* Surface/Spectrum/teal - Theme - BRAND */
1791
1797
  --surface-spectrum-teal: #012e2a;
1792
- /* Surface/Spectrum/yellow - Theme - Agent Workplace */
1798
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1793
1799
  --surface-spectrum-yellow: #564210;
1794
1800
  }