feat(backgroundlayers): class based implementation [CSS-1268]

.storybook/foundations/backgroundlayers/backgroundlayers.stories.js

@@ -0,0 +1,127 @@
+import { html } from "lit";
+import { Template } from "./template";
+
+/**
+ * The Spectrum CSS background layers is a set of utility classes used to apply Spectrum 2 app framing. Consult [design documentation](https://s2.spectrum.corp.adobe.com/page/background-layers/) for further usage and infomation.
+ * Make note of the context when determing the correct class to use.
+ *
+ * To use these classes:
+ *
+ * - add background layers as a dependency
+ * - Use appropriate class on the element which should display the background layer
+ */
+export default {
+	title: "Background layers",
+	description: "The background layers is a series of classes used to style background layers.",
+	component: "BackgroundLayers",
+	argTypes: {
+		environment: {
+			name: "Context",
+			description: "The context of the background layer",
+			control: "select",
+			options: ["edit", "browse"],
+		},
+		layer: {
+			name: "Layer",
+			description: "The layer of the background layer",
+			control: "select",
+			options: ["elevated", "layer1", "layer2", "pasteboard"],
+			if: {
+				arg: "environment",
+				equals: "browse",
+				options: ["elevated", "layer1", "base"],
+			},
+		},
+	},
+	args: {
+		rootClass: "spectrum-BackgroundLayers",
+		environment: "edit",
+		layer: "layer1",
+	},
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551",
+		},
+		status: {
+			type: "migrated",
+		},
+	},
+	tags: ["migrated", "!dev"]
+};
+
+/**
+ * Editing context classes:
+ *
+ * - `spectrum-BackgroundLayers-edit-elevated`
+ * - `spectrum-BackgroundLayers-edit-layer2`
+ * - `spectrum-BackgroundLayers-edit-layer1`
+ * - `spectrum-BackgroundLayers-edit-pasteboard`
+ */
+export const EditingContext = (args = {}, context = {}) => {
+	const spacing = 28;
+	const size = 120;
+	const minSize = size + spacing * 2;
+	return html`
+		<div style=${`position: relative; min-block-size: ${minSize}px; min-inline-size: ${minSize}px;`}>
+			${Template({
+				...args,
+				customStyles: { zIndex: 4 },
+				layer: "elevated",
+			}, context)}
+			${Template({
+				...args,
+				customStyles: { zIndex: 3, insetInlineStart: `${spacing}px`, insetBlockStart: `${spacing}px` },
+				layer: "layer2",
+			}, context)}
+			${Template({
+				...args,
+				customStyles: { zIndex: 2, insetInlineStart: `${spacing * 2}px`, insetBlockStart: `${spacing * 2}px` },
+				layer: "layer1",
+			}, context)}
+			${Template({
+				...args,
+				customStyles: { zIndex: 1, insetInlineStart: `${spacing * 3}px`, insetBlockStart: `${spacing * 3}px` },
+				layer: "pasteboard",
+			}, context)}
+		</div>
+	`;
+};
+EditingContext.args = {
+	environment: "edit",
+};
+
+/**
+ * Browsing context classes:
+ *
+ * - `spectrum-BackgroundLayers-browse-elevated`
+ * - `spectrum-BackgroundLayers-browse-layer1`
+ * - `spectrum-BackgroundLayers-browse-base`
+ */
+export const BrowsingContext = (args = {}, context = {}) => {
+	const spacing = 28;
+	const size = 120;
+	const minSize = size + spacing * 2;
+	return html`
+		<div style=${`position: relative; min-block-size: ${minSize}px; min-inline-size: ${minSize}px;`}>
+			${Template({
+				...args,
+				customStyles: { zIndex: 3 },
+				layer: "elevated",
+			}, context)}
+			${Template({
+				...args,
+				customStyles: { zIndex: 2, insetInlineStart: `${spacing}px`, insetBlockStart: `${spacing}px` },
+				layer: "layer1",
+			}, context)}
+			${Template({
+				...args,
+				customStyles: { zIndex: 1, insetInlineStart: `${spacing * 2}px`, insetBlockStart: `${spacing * 2}px` },
+				layer: "base",
+			}, context)}
+		</div>
+	`;
+};
+BrowsingContext.args = {
+	environment: "browse",
+};

.storybook/foundations/backgroundlayers/index.css

@@ -0,0 +1,56 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* for use only in editing contexts */
+.spectrum-BackgroundLayers-edit-elevated {
+	--spectrum-backgroundlayers-shadow-horizontal: 0;
+	--spectrum-backgroundlayers-shadow-vertical: 0;
+	--spectrum-backgroundlayers-shadow-blur: 5px;
+	--spectrum-backgroundlayers-shadow-color: light-dark(var(--spectrum-gray-600), var(--spectrum-gray-100));
+
+	background-color: var(--spectrum-background-elevated-color);
+	box-shadow: var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color);
+}
+
+.spectrum-BackgroundLayers-edit-layer2 {
+	background-color: var(--spectrum-background-layer-2-color);
+	border: 2px solid rgb(180 180 180 / 25%);
+}
+
+.spectrum-BackgroundLayers-edit-layer1 {
+	background-color: var(--spectrum-background-layer-1-color);
+}
+
+.spectrum-BackgroundLayers-edit-pasteboard {
+	background-color: var(--spectrum-background-pasteboard-color);
+}
+
+/* only used in browsing contexts */
+.spectrum-BackgroundLayers-browse-elevated {
+	--spectrum-backgroundlayers-shadow-horizontal: 0;
+	--spectrum-backgroundlayers-shadow-vertical: 0;
+	--spectrum-backgroundlayers-shadow-blur: 5px;
+	--spectrum-backgroundlayers-shadow-color: light-dark(var(--spectrum-gray-600), var(--spectrum-gray-100));
+
+	background-color: var(--spectrum-background-elevated-color);
+	box-shadow: var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color);
+}
+
+.spectrum-BackgroundLayers-browse-layer1 {
+	background-color: var(--spectrum-background-layer-1-color);
+}
+
+.spectrum-BackgroundLayers-browse-base {
+	border: 2px solid rgb(180 180 180 / 25%);
+	background-color: var(--spectrum-background-base-color);
+}

.storybook/foundations/backgroundlayers/template.js

@@ -0,0 +1,44 @@
+import { getRandomId } from "@spectrum-css/preview/decorators";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+import "./index.css";
+
+export const Template = ({
+	rootClass = "spectrum-BackgroundLayers",
+	environment = "edit",
+  layer = "layer1",
+  size = 120,
+	customStyles = {},
+	customClasses = [],
+	id = getRandomId("background-layers"),
+}) => {
+  let previousZIndex = 0;
+
+	return html`
+    <div class=${classMap({
+      [rootClass]: true,
+      [`${rootClass}-${environment}-${layer}`]: true,
+      ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+    })}
+			id=${ifDefined(id)}
+			style=${styleMap({
+        inlineSize: `${size}px`,
+        blockSize: `${size}px`,
+        borderRadius: "10px",
+        position: "absolute",
+        ...customStyles,
+        display: "grid",
+        placeItems: "center",
+      })} @mouseover=${(event) => {
+        previousZIndex = event.target.style.zIndex;
+        event.target.style.zIndex = "100";
+      }} @mouseout=${(event) => {
+        event.target.style.zIndex = previousZIndex;
+      }}>
+        <span>${layer}</span>
+      </div>
+  `;
+};

.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

@@ -14,7 +14,7 @@ export default {
 			handles: ["click .spectrum-ActionButton:not([disabled])"],
 		},
 	},
-	tags: ['!dev'],
+	tags: ['!dev', 'migrated'],
 };
 
 const ActionButton = (args, context) => html`

.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js

@@ -15,7 +15,7 @@ export default {
 			handles: ['click input[type="checkbox"]'],
 		},
 	},
-	tags: ['!dev'],
+	tags: ['!dev', 'migrated'],
 };
 
 const Checkbox = (args = {}, context = {}) => html`

.storybook/foundations/corner-rounding/corner-rounding.stories.js

@@ -10,7 +10,7 @@ export default {
 	args: {
 		rootClass: "spectrum-Foundations-Example-CornerRounding",
 	},
-	tags: ["!dev"],
+	tags: ["!dev", "migrated"],
 };
 
 const CornerRadiusGroup = (args = {}, context = {}) => html`