Update palette tokens for Scrim styling (#831)

Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com>

.changeset/serious-crabs-watch.md

@@ -0,0 +1,17 @@
+---
+"@jpmorganchase/uitk-core": minor
+"@jpmorganchase/uitk-theme": minor
+---
+
+Change to Scrim styling; remove variant prop from Scrim component
+
+```diff
+- --uitk-palette-opacity-primary-scrim
+- --uitk-palette-opacity-secondary-scrim
+- --uitk-palette-neutral-primary-background-scrim
+- --uitk-palette-neutral-secondary-background-scrim
+- --uitk-overlayable-primary-background
+- --uitk-overlayable-secondary-background
++ --uitk-palette-neutral-background-backdrop
++ --uitk-overlayable-background: var(--uitk-palette-neutral-background-backdrop)
+```

packages/core/src/scrim/Scrim.css

@@ -1,13 +1,4 @@
 /* Style applied to the root element */
-.uitkScrim {
-  --scrim-background: var(--uitk-overlayable-primary-background);
-}
-
-/* Secondary variant */
-.uitkScrim-secondary.uitkScrim {
-  --scrim-background: var(--uitk-overlayable-secondary-background);
-}
-
 .uitkScrim {
   top: 0;
   left: 0;
@@ -20,7 +11,7 @@
   position: fixed;
   align-items: center;
   justify-content: center;
-  background: var(--uitkScrim-background, var(--scrim-background));
+  background: var(--uitkScrim-background, var(--uitk-overlayable-background));
   -webkit-tap-highlight-color: transparent;
 }
 

packages/core/src/scrim/Scrim.tsx

@@ -110,10 +110,6 @@ export interface ScrimProps extends HTMLAttributes<HTMLDivElement> {
    * comma separated string of query selectors which may need to be overridden for edge cases.
    */
   tabEnabledSelectors?: string;
-  /**
-   * Variant; defaults to "primary"
-   */
-  variant?: "primary" | "secondary";
   /**
    * Prop to pass z-index for Scrim.
    */
@@ -137,7 +133,6 @@ export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
     enableContainerMode = false,
     returnFocusOptions,
     tabEnabledSelectors = defaultSelector,
-    variant = "primary",
     zIndex,
     ...rest
   },
@@ -225,8 +220,7 @@ export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
     <div
       aria-modal={!enableContainerMode}
       className={classnames(className, withBaseName(), {
-        [withBaseName(`containerFix`)]: enableContainerMode,
-        [withBaseName(variant)]: variant === "secondary",
+        [withBaseName("containerFix")]: enableContainerMode,
       })}
       data-testid="scrim"
       onClick={onBackDropClick}

packages/core/stories/scrim.stories.tsx

@@ -52,31 +52,6 @@ export const ClosableScrim: ComponentStory<typeof Scrim> = () => {
   );
 };
 
-export const LighterScrim: ComponentStory<typeof Scrim> = () => {
-  const [open, setOpen] = useState(false);
-  const handleRequestOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-  return (
-    <>
-      <Button onClick={handleRequestOpen}>click to open scrim</Button>
-      <Scrim
-        aria-label="Example Scrim"
-        closeWithEscape
-        variant="secondary"
-        onBackDropClick={handleClose}
-        onClose={handleClose}
-        open={open}
-      >
-        <p>Click or press Escape to close the Scrim</p>
-      </Scrim>
-    </>
-  );
-};
-
 export const ScrimWithContentStatus: ComponentStory<typeof Scrim> = () => {
   return (
     <Scrim aria-label="Example Scrim" open>
@@ -150,7 +125,6 @@ export const ScrimContainer: ComponentStory<typeof Scrim> = () => {
         open={open}
         enableContainerMode
         containerRef={parentRef}
-        variant="secondary"
         zIndex={2}
       >
         <Button onClick={handleClose}>CLOSE SCRIM</Button>

packages/theme/css/characteristics/overlayable.css

@@ -7,6 +7,5 @@
   --uitk-overlayable-shadow-drag: var(--uitk-shadow-4);
   --uitk-overlayable-shadow-modal: var(--uitk-shadow-5);
 
-  --uitk-overlayable-primary-background: var(--uitk-palette-neutral-primary-scrim);
-  --uitk-overlayable-secondary-background: var(--uitk-palette-neutral-secondary-scrim);
+  --uitk-overlayable-background: var(--uitk-palette-neutral-backdrop);
 }

packages/theme/css/foundations/fade.css

@@ -39,10 +39,7 @@
   --uitk-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--uitk-palette-opacity-readonly));
   --uitk-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--uitk-palette-opacity-readonly));
 
-  --uitk-color-gray-800-fade-scrim-primary: rgba(36, 37, 38, var(--uitk-palette-opacity-primary-scrim));
-  --uitk-color-black-fade-scrim-primary: rgba(36, 37, 38, var(--uitk-palette-opacity-primary-scrim));
-  --uitk-color-black-fade-scrim-secondary: rgba(0, 0, 0, var(--uitk-palette-opacity-secondary-scrim));
-  --uitk-color-white-fade-scrim-secondary: rgba(255, 255, 255, var(--uitk-palette-opacity-primary-scrim));
+  --uitk-color-black-fade-backdrop: rgba(36, 37, 38, var(--uitk-palette-opacity-backdrop));
 
   --uitk-color-gray-90-fade-stroke: rgba(132, 135, 142, var(--uitk-palette-opacity-stroke));
 

packages/theme/css/foundations/opacity.css

@@ -3,5 +3,4 @@
   --uitk-opacity-2: 0.25;
   --uitk-opacity-3: 0.4;
   --uitk-opacity-4: 0.7;
-  --uitk-opacity-5: 0.8;
 }

packages/theme/css/foundations/palette.css

@@ -5,21 +5,13 @@
   --uitk-palette-opacity-border-readonly: var(--uitk-opacity-2);
   --uitk-palette-opacity-fill: var(--uitk-opacity-3);
   --uitk-palette-opacity-foreground: var(--uitk-opacity-4);
-  --uitk-palette-opacity-secondary-scrim: var(--uitk-opacity-5);
+  --uitk-palette-opacity-backdrop: var(--uitk-opacity-4);
   --uitk-palette-opacity-stroke: var(--uitk-opacity-3);
   --uitk-palette-opacity-primary-border: var(--uitk-opacity-3);
   --uitk-palette-opacity-secondary-border: var(--uitk-opacity-2);
   --uitk-palette-opacity-tertiary-border: var(--uitk-opacity-1);
 }
 
-.uitk-theme[data-mode="light"] {
-  --uitk-palette-opacity-primary-scrim: var(--uitk-opacity-5);
-}
-
-.uitk-theme[data-mode="dark"] {
-  --uitk-palette-opacity-primary-scrim: var(--uitk-opacity-4);
-}
-
 .uitk-theme[data-mode="light"] {
   /* Accent */
   --uitk-palette-accent-background: var(--uitk-color-blue-500);
@@ -127,7 +119,6 @@
   --uitk-palette-neutral-primary-background-readonly: var(--uitk-color-white-fade-background-readonly);
   --uitk-palette-neutral-primary-foreground: var(--uitk-color-gray-900);
   --uitk-palette-neutral-primary-foreground-disabled: var(--uitk-color-gray-900-fade-foreground);
-  --uitk-palette-neutral-primary-scrim: var(--uitk-color-black-fade-scrim-primary);
   --uitk-palette-neutral-primary-separator: var(--uitk-color-black-fade-separatorOpacity-primary);
   --uitk-palette-neutral-primary-border: var(--uitk-color-gray-60);
   --uitk-palette-neutral-primary-border-disabled: var(--uitk-color-gray-60-fade-border);
@@ -138,7 +129,7 @@
   --uitk-palette-neutral-secondary-border-disabled: var(--uitk-color-gray-90-fade-border);
   --uitk-palette-neutral-secondary-foreground: var(--uitk-color-gray-200);
   --uitk-palette-neutral-secondary-foreground-disabled: var(--uitk-color-gray-200-fade-foreground);
-  --uitk-palette-neutral-secondary-scrim: var(--uitk-color-white-fade-scrim-secondary);
+  --uitk-palette-neutral-backdrop: var(--uitk-color-black-fade-backdrop);
   --uitk-palette-neutral-secondary-separator: var(--uitk-color-black-fade-separatorOpacity-secondary);
   --uitk-palette-neutral-tertiary-background: transparent;
   --uitk-palette-neutral-tertiary-background-disabled: transparent;
@@ -261,7 +252,6 @@
   --uitk-palette-neutral-primary-border-disabled: var(--uitk-color-gray-300-fade-border);
   --uitk-palette-neutral-primary-foreground: var(--uitk-color-white);
   --uitk-palette-neutral-primary-foreground-disabled: var(--uitk-color-white-fade-foreground);
-  --uitk-palette-neutral-primary-scrim: var(--uitk-color-gray-800-fade-scrim-primary);
   --uitk-palette-neutral-primary-separator: var(--uitk-color-white-fade-separatorOpacity-primary);
   --uitk-palette-neutral-secondary-background: var(--uitk-color-gray-600);
   --uitk-palette-neutral-secondary-background-disabled: var(--uitk-color-gray-600-fade-background);
@@ -270,7 +260,7 @@
   --uitk-palette-neutral-secondary-border-disabled: var(--uitk-color-gray-90-fade-border);
   --uitk-palette-neutral-secondary-foreground: var(--uitk-color-gray-70);
   --uitk-palette-neutral-secondary-foreground-disabled: var(--uitk-color-gray-70-fade-foreground);
-  --uitk-palette-neutral-secondary-scrim: var(--uitk-color-black-fade-scrim-secondary);
+  --uitk-palette-neutral-backdrop: var(--uitk-color-black-fade-backdrop);
   --uitk-palette-neutral-secondary-separator: var(--uitk-color-white-fade-separatorOpacity-secondary);
   --uitk-palette-neutral-tertiary-background: transparent;
   --uitk-palette-neutral-tertiary-background-disabled: transparent;

packages/theme/stories/characteristics/overlayable.stories.mdx

@@ -22,11 +22,12 @@ Components that may form a hierarchy and stack upon or beneath other elements of
 | Hover              | Dropshadow found around a component using the default (e.g. Card) on hover state |
 | Popout             | Dropshadow found around temporarily overlaying elements (e.g. Tooltip)           |
 | Drag               | Dropshadow found around draggable objects on drag (e.g. Tabs)                    |
-| Z-Modal            | Dropshadow found around modal windows (e.g. Dialog)                              |
+| Modal              | Dropshadow found around modal windows (e.g. Dialog)                              |
 
 <Canvas>
-  <Story name="Shadow">
+  <Story name="Overlayable">
     <DocGrid>
+      <ColorBlock colorVar="--uitk-overlayable-background" />
       <ShadowBlockCell shadowVar="--uitk-overlayable-shadow-scroll" />
       <BlankBlockCode>--uitk-overlayable-shadow-scroll</BlankBlockCode>
       <ShadowBlockCell shadowVar="--uitk-overlayable-shadow-borderRegion" />
@@ -45,26 +46,6 @@ Components that may form a hierarchy and stack upon or beneath other elements of
   </Story>
 </Canvas>
 
-### Primary
-
-<Canvas>
-  <Story name="Primary">
-    <DocGrid>
-      <ColorBlock colorVar="--uitk-overlayable-primary-background" />
-    </DocGrid>
-  </Story>
-</Canvas>
-
-### Secondary
-
-<Canvas>
-  <Story name="Secondary">
-    <DocGrid>
-      <ColorBlock colorVar="--uitk-overlayable-secondary-background" />
-    </DocGrid>
-  </Story>
-</Canvas>
-
 ## Usages
 
 - `Announcement Dialog` (inherited)

packages/theme/stories/foundations/opacity.stories.mdx

@@ -19,7 +19,6 @@ Opacity is usually used to style components in disabled states, but can also be
       <NumberBlock number="0.25" cssVariable="--uitk-opacity-2" />
       <NumberBlock number="0.4" cssVariable="--uitk-opacity-3" />
       <NumberBlock number="0.7" cssVariable="--uitk-opacity-4" />
-      <NumberBlock number="0.8" cssVariable="--uitk-opacity-5" />
     </DocGrid>
   </Story>
 </Canvas>

packages/theme/stories/foundations/palette.stories.mdx

@@ -78,12 +78,8 @@ Opacity values to adjust different attributes.
         cssVariable="--uitk-palette-opacity-foreground"
       />
       <OpacityBlock
-        opacity="--uitk-opacity-5"
-        cssVariable="--uitk-palette-opacity-primary-scrim"
-      />
-      <OpacityBlock
-        opacity="--uitk-opacity-5"
-        cssVariable="--uitk-palette-opacity-secondary-scrim"
+        opacity="--uitk-opacity-4"
+        cssVariable="--uitk-palette-opacity-backdrop"
       />
       <OpacityBlock
         opacity="--uitk-opacity-3"
@@ -97,8 +93,6 @@ Opacity values to adjust different attributes.
   </Story>
 </Canvas>
 
-- Note: `--uitk-palette-opacity-scrim-medium` is `--uitk-opacity-3` in dark mode
-
 ## Accent
 
 <Canvas>
@@ -279,15 +273,14 @@ Opacity values to adjust different attributes.
       <ColorBlock colorVar="--uitk-palette-neutral-primary-border-disabled" />
       <ColorBlock colorVar="--uitk-palette-neutral-primary-foreground" />
       <ColorBlock colorVar="--uitk-palette-neutral-primary-foreground-disabled" />
-      <ColorBlock colorVar="--uitk-palette-neutral-primary-scrim" />
       <ColorBlock colorVar="--uitk-palette-neutral-primary-separator" />
       <ColorBlock colorVar="--uitk-palette-neutral-secondary-background" />
       <ColorBlock colorVar="--uitk-palette-neutral-secondary-background-disabled" />
       <ColorBlock colorVar="--uitk-palette-neutral-secondary-background-readonly" />
       <ColorBlock colorVar="--uitk-palette-neutral-secondary-border-disabled" />
       <ColorBlock colorVar="--uitk-palette-neutral-secondary-foreground" />
       <ColorBlock colorVar="--uitk-palette-neutral-secondary-foreground-disabled" />
-      <ColorBlock colorVar="--uitk-palette-neutral-secondary-scrim" />
+      <ColorBlock colorVar="--uitk-palette-neutral-backdrop" />
       <ColorBlock colorVar="--uitk-palette-neutral-secondary-separator" />
       <ColorBlock colorVar="--uitk-palette-neutral-tertiary-background" />
       <ColorBlock colorVar="--uitk-palette-neutral-tertiary-background-disabled" />

packages/theme/stories/introduction.stories.mdx

@@ -91,23 +91,18 @@ Similarly, for the palette:
 
 And it's opacities:
 
-| Opacity sentiment                        | Defined value        |
-| ---------------------------------------- | -------------------- |
-| --uitk-palette-opacity-background        | `--uitk-opacity-3`   |
-| --uitk-palette-opacity-border`           | `--uitk-opacity-3`   |
-| --uitk-palette-opacity-border-readonly`  | `--uitk-opacity-2`   |
-| --uitk-palette-opacity-fill`             | `--uitk-opacity-3`   |
-| --uitk-palette-opacity-foreground`       | `--uitk-opacity-4`   |
-| --uitk-palette-opacity-scrim-low`        | `--uitk-opacity-5`   |
-| --uitk-palette-opacity-stroke`           | `--uitk-opacity-3`   |
-| --uitk-palette-opacity-scrim-medium`     | `--uitk-opacity-5`   |
-| --uitk-palette-opacity-primary-border`   | `--uitk-opacity-3`   |
-| --uitk-palette-opacity-secondary-border` | `--uitk-opacity-2`   |
-| --uitk-palette-opacity-tertiary-border`  | `--uitk-opacity-1`   |
-| --uitk-palette-opacity-primary-scrim`    | `--uitk-opacity-5`\* |
-| --uitk-palette-opacity-secondary-scrim`  | `--uitk-opacity-5`   |
-
-- 4 in dark mode
+| Opacity sentiment                        | Defined value      |
+| ---------------------------------------- | ------------------ | --- |
+| --uitk-palette-opacity-background        | `--uitk-opacity-3` |
+| --uitk-palette-opacity-border`           | `--uitk-opacity-3` |
+| --uitk-palette-opacity-border-readonly`  | `--uitk-opacity-2` |
+| --uitk-palette-opacity-fill`             | `--uitk-opacity-3` |
+| --uitk-palette-opacity-foreground`       | `--uitk-opacity-4` |
+| --uitk-palette-opacity-stroke`           | `--uitk-opacity-3` |
+| --uitk-palette-opacity-backdrop`         | `--uitk-opacity-4` |
+| --uitk-palette-opacity-primary-border`   | `--uitk-opacity-3` |
+| --uitk-palette-opacity-secondary-border` | `--uitk-opacity-2` |
+| --uitk-palette-opacity-tertiary-border`  | `--uitk-opacity-1` |     |
 
 The full set of characteristics currently defined is as follows. Note how the values of characteristics can be foundation tokens, palette tokens or hardcoded values, depending on what's most suitable: