From e55bfc8c91ccc7520fd38633a1bdf6dc4b7d18cb Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 5 Sep 2024 13:04:36 -0500
Subject: [PATCH] enhance: CMD-182 design tokens (#200)

* enhance: CMD-182 do not use `-rgb` css vars

* chore: remove redundant style

%x-overlay--callout already does this

* fix: CMD-182 do not use var in rgb

- not supported by Safari v15*
- not polyfilled by postcss-relative-color-syntax

* Supported by v16. Once v18 coems ut, we can use var in rgb, because we only need support latest 2 major versions of common browsers.

* fix: CMD-182 more not use var in rgb

* chore: CMD-182 flag old color vars as deprecated

* fix: CMD-182 rgb relative color syntax
---
 brainmap_cms/static/brainmap_cms/css/src/site.css  |  3 +--
 .../css/src/_imports/settings/color.css            |  1 +
 .../css/src/_imports/trumps/s-home.css             |  4 ++--
 .../utrc_cms/css/src/_imports/trumps/s-home.css    | 14 +++++---------
 4 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/brainmap_cms/static/brainmap_cms/css/src/site.css b/brainmap_cms/static/brainmap_cms/css/src/site.css
index 5fc1f3db..6bc94a5d 100644
--- a/brainmap_cms/static/brainmap_cms/css/src/site.css
+++ b/brainmap_cms/static/brainmap_cms/css/src/site.css
@@ -15,10 +15,9 @@
   --global-color-accent--dark: hsl(229 45% 35%);
   --global-color-accent--x-dark: hsl(229 45% 30%);
 
+  /* DEPRECATED */
   --global-color-accent--alt: hsl(229 22% 77%);
   --global-color-accent--weak: hsl(229, 45%, 52%, 0.25);
-
-  /* Link */
   --global-color-link-on-light--normal: var(--global-color-accent--normal);
   --global-color-link-on-dark--normal: var(--global-color-accent--x-light);
 }
diff --git a/frontera_cms/static/frontera_cms/css/src/_imports/settings/color.css b/frontera_cms/static/frontera_cms/css/src/_imports/settings/color.css
index 539d9dc2..1ac84947 100644
--- a/frontera_cms/static/frontera_cms/css/src/_imports/settings/color.css
+++ b/frontera_cms/static/frontera_cms/css/src/_imports/settings/color.css
@@ -8,6 +8,7 @@
   --global-color-accent--dark: #64563E;    /* originally #6039cc */
   --global-color-accent--x-dark: #403014;  /* originally #3d189b */
 
+  /* DEPRECATED */
   --global-color-accent--alt: #E0D8C9;     /* originally #d2cce7 */
   --global-color-accent--weak: #9D702140;  /* originally #6039cc40 */
 }
diff --git a/frontera_cms/static/frontera_cms/css/src/_imports/trumps/s-home.css b/frontera_cms/static/frontera_cms/css/src/_imports/trumps/s-home.css
index a8e1a290..96997328 100644
--- a/frontera_cms/static/frontera_cms/css/src/_imports/trumps/s-home.css
+++ b/frontera_cms/static/frontera_cms/css/src/_imports/trumps/s-home.css
@@ -70,10 +70,10 @@
   @extend %x-overlay--curtain;
 }
 .o-section--style-dark .s-home__banner .o-section__banner-overlay {
-  --color-bkgd-rgb: var(--global-color-primary--x-dark-rgb);
+  background-color: rgb( from design-token('color.gray.dark-x') r g b / 0.65 );
 }
 .o-section--style-light .s-home__banner .o-section__banner-overlay {
-  --color-bkgd-rgb: var(--global-color-primary--x-light-rgb);
+  background-color: rgb( from design-token('color.gray.light-x') r g b / 0.65 );
 }
 
 
diff --git a/utrc_cms/static/utrc_cms/css/src/_imports/trumps/s-home.css b/utrc_cms/static/utrc_cms/css/src/_imports/trumps/s-home.css
index d559937a..c3cd21b5 100644
--- a/utrc_cms/static/utrc_cms/css/src/_imports/trumps/s-home.css
+++ b/utrc_cms/static/utrc_cms/css/src/_imports/trumps/s-home.css
@@ -67,19 +67,15 @@
 .o-section--banner .s-home__banner .o-section__banner-overlay {
   @extend %x-overlay--callout;
 
-  --color-text: inherit;
-  --color-bkgd-rgb: var(--global-color-primary--normal);
-
-  color: var(--color-text);
-  background-color: rgba(var(--color-bkgd-rgb), 0.9);
+  background-color: rgb( from design-token('color.gray.medium') r g b / 0.9 );
 }
 .o-section--banner.o-section--style-dark .s-home__banner .o-section__banner-overlay {
-  --color-text: var(--global-color-primary--xx-light);
-  --color-bkgd-rgb: var(--global-color-primary--xx-dark-rgb);
+  color: var(--global-color-primary--xx-light);
+  background-color: rgb( from design-token('color.gray.dark-2x') r g b / 0.9 );
 }
 .o-section--banner.o-section--style-light .s-home__banner .o-section__banner-overlay {
-  --color-text: var(--global-color-primary--xx-dark);
-  --color-bkgd-rgb: var(--global-color-primary--xx-light-rgb);
+  color: var(--global-color-primary--xx-dark);
+  background-color: rgb( from design-token('color.gray.light-2x') r g b / 0.9 );
 }