feat(scrim): Add component tokens (#8662)

**Related Issue:** #7180 ## Summary `--calcite-scrim-background-color`: Specifies the background color of the component. Adds a deprecated tag and fallback for the previous `--calcite-scrim-background` css property.
Esri · Feb 12, 2024 · 21fee6e · 21fee6e
1 parent 94b090b
commit 21fee6e
Show file tree

Hide file tree

Showing 3 changed files with 296 additions and 234 deletions.
diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -3,10 +3,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-scrim-background: Specifies the background color of the scrim.
+ * @prop --calcite-scrim-background: [Deprecated] Use the `--calcite-scrim-background-color` property instead. Specifies the background color of the component.
+ * @prop --calcite-scrim-background-color: Specifies the background color of the component.
  */
 :host {
-  --calcite-scrim-background: var(--calcite-color-transparent-scrim);
+  --calcite-scrim-background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));
 }
 
 :host {
@@ -39,7 +40,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-transparent-scrim));
+  background-color: var(--calcite-scrim-background-color);
 }
 
 .content {

diff --git a/packages/calcite-components/src/components/scrim/scrim.stories.ts b/packages/calcite-components/src/components/scrim/scrim.stories.ts
@@ -82,3 +82,73 @@ export const noContent_TestOnly = (): string =>
   html` <div tabindex="0" style="position: relative; width: 400px; height: 400px">
     <calcite-scrim></calcite-scrim>
   </div>`;
+
+export const theming_TestOnly = (): string => html`
+  <div tabindex="0" style="position: relative; width: 400px; height: 400px">
+    <calcite-scrim
+      dir="rtl"
+      class="calcite-mode-dark"
+      ${boolean("loading", false)}
+      style="--calcite-scrim-background-color: purple"
+    ></calcite-scrim>
+    <div style="width: 400px; height: 400px; overflow: auto">
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
+        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
+        ultricies mi vitae est. Mauris placerat eleifend leo.
+      </p>
+      <ul>
+        <li>
+          Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed
+          arcu. Cras consequat.
+        </li>
+        <li>
+          Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
+          Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+        </li>
+        <li>
+          Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetur ligula vulputate sem tristique cursus.
+          Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+        </li>
+        <li>
+          Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
+        </li>
+      </ul>
+    </div>
+  </div>
+`;
+
+export const themingDeprecatedFallback_TestOnly = (): string => html`
+  <div tabindex="0" style="position: relative; width: 400px; height: 400px">
+    <calcite-scrim
+      dir="rtl"
+      class="calcite-mode-dark"
+      ${boolean("loading", false)}
+      style="--calcite-scrim-background: purple"
+    ></calcite-scrim>
+    <div style="width: 400px; height: 400px; overflow: auto">
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
+        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
+        ultricies mi vitae est. Mauris placerat eleifend leo.
+      </p>
+      <ul>
+        <li>
+          Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed
+          arcu. Cras consequat.
+        </li>
+        <li>
+          Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
+          Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+        </li>
+        <li>
+          Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetur ligula vulputate sem tristique cursus.
+          Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+        </li>
+        <li>
+          Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
+        </li>
+      </ul>
+    </div>
+  </div>
+`;