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

Author: wesleyboar

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);
 }

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 */
 }

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 );
 }
 
 

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 );
 }