fix(color tokens): update references

Esri · Nov 22, 2023 · a039397 · a039397
1 parent 6e47bc3
commit a039397
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
@@ -11,13 +11,17 @@
  *
  */
 
+:host {
+  --calcite-modal-scrim-background: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};
+}
+
 :host {
   @apply absolute flex inset-0 opacity-0 z-overlay;
   visibility: hidden !important;
   transition: visibility 0ms linear var(--calcite-internal-animation-timing-slow),
     opacity var(--calcite-internal-animation-timing-slow) $easing-function;
   // the modal should always use a dark scrim, regardless of light / dark mode - matches value in global.scss
-  --calcite-modal-scrim-background-internal: #{rgba($blk-240, 0.85)};
+  --calcite-modal-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, 0.85)};
 }
 
 .content-top[hidden],
@@ -62,7 +66,7 @@
 }
 
 .scrim {
-  --calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-modal-scrim-background-internal));
+  --calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-background-transparent-scrim));
   @apply fixed inset-0 flex overflow-y-hidden;
 }
 

diff --git a/packages/calcite-components/src/components/scrim/scrim.e2e.ts b/packages/calcite-components/src/components/scrim/scrim.e2e.ts
@@ -247,7 +247,7 @@ describe("calcite-scrim", () => {
         scrim = await page.find("calcite-scrim >>> .scrim");
         scrimStyles = await scrim.getComputedStyle();
         scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
-        expect(scrimBgStyle).toEqual("rgba(255, 255, 255, 0.8)");
+        expect(scrimBgStyle).toEqual("rgba(255, 255, 255, 0.85)");
       });
     });
 
@@ -259,17 +259,17 @@ describe("calcite-scrim", () => {
         scrim = await page.find("calcite-scrim >>> .scrim");
         scrimStyles = await scrim.getComputedStyle();
         scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
-        expect(scrimBgStyle).toEqual("rgba(0, 0, 0, 0.8)");
+        expect(scrimBgStyle).toEqual("rgba(0, 0, 0, 0.85)");
       });
     });
 
-    it("should allow the CSS custom property to be overridden when applied to :root", async () => {
+    it("should allow the CSS custom property to be overridden when parent token is altered at :root", async () => {
       const overrideStyle = "rgb(128, 0, 128)";
       page = await newE2EPage({
         html: `
         <style>
           :root {
-            --calcite-scrim-background: ${overrideStyle};
+            --calcite-color-background-transparent-scrim: ${overrideStyle};
           }
         </style>
         ${scrimSnippet}

diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -5,6 +5,9 @@
  *
  * @prop --calcite-scrim-background: Specifies the background color of the scrim.
  */
+:host {
+  --calcite-scrim-background: var(--calcite-color-background-transparent-scrim);
+}
 
 :host {
   @apply absolute
@@ -36,7 +39,7 @@
   justify-center
   overflow-hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-scrim-background, var(--calcite-color-background-transparent));
+  background-color: var(--calcite-scrim-background, var(--calcite-color-background-transparent-scrim));
 }
 
 .content {