feat(underlay): background tokens used directory

Author: castastrophe

components/underlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/underlay",
-  "version": "2.0.54",
+  "version": "2.1.0-alpha.0",
   "description": "The Spectrum CSS underlay component",
   "license": "Apache-2.0",
   "author": "Adobe",

components/underlay/skin.css

@@ -11,5 +11,6 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-Underlay {
-  background: var(--spectrum-dialog-confirm-overlay-background-color);
+  /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */
+  background: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
 }

components/underlay/stories/template.js

@@ -0,0 +1,26 @@
+import { html } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+
+import "../index.css";
+import "../skin.css";
+
+export const Template = ({
+  rootClass = "spectrum-Underlay",
+  customClasses = [],
+  style = [],
+  content,
+  isOpen = true,
+  ...globals
+}) => {
+  return html`
+  <div class=${classMap({
+    [rootClass]: true,
+    "is-open": isOpen,
+    ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+  })} id="spectrum-underlay"
+  style=${styleMap(style)}>
+      ${content}
+    </div>
+  `;
+}

components/underlay/stories/underlay.stories.js

@@ -0,0 +1,40 @@
+// Import the component markup template
+import { Template } from "./template";
+
+export default {
+  title: "Components/Underlay",
+  description: "A underlay component is used with modal and dialog. It lays over the rest of the page to deliver a blocking layer between the two contexts.",
+  component: "Underlay",
+  argTypes: {
+    isOpen: {
+      description: "Whether the underlay is open (visible).",
+      table: {
+        type: { summary: "boolean" },
+        category: "State",
+      },
+      control: "boolean",
+    },
+    content: {
+      table: { disable: true }
+    },
+  },
+  args: {
+    isOpen: true,
+    rootClass: "spectrum-Underlay",
+  },
+  parameters: {
+    actions: {
+      handles: []
+    },
+    status: {
+      type: process.env.MIGRATED_PACKAGES.includes('underlay') ? 'migrated' : undefined
+    }
+  }
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  content: [
+    "This is a underlay. Don't use it like this. Use it with a Modal and a Dialog.",
+  ],
+};