feat(backgroundlayers): class based implementation

README.md

@@ -403,3 +403,7 @@ Occasionally, you may want to run a prerelease for an individual package and ski
 - You **must** run a build **before** continuing with the prerelease. An npm task for cleaning, building, and beta publishing is available, and it can be run via the following command: `yarn release:beta-from-package`. This command will perform a full `clean` (via the `clean` task), a full `build` (via the `build` task), and will attempt to publish the package (via `lerna publish --conventional-prerelease --preid beta --pre-dist-tag beta --no-private`).
 - Depending on the severity of your change(s), and before publishing to npm, Lerna should show a preview of the affected package version number that looks something like: `@spectrum-css/switch: 1.0.23 => 2.0.0-beta.0`. Additionally, at this time, Lerna will ask if you would like to continue with publishing the changes or cancel.
 - Selecting `y` to publish will publish the affected package(s) to npm.
+
+## Spectrum 2
+
+More information coming soon!

components/backgroundlayers/README.md

@@ -0,0 +1,23 @@
+# @spectrum-css/backgroundlayers
+
+> > The Spectrum CSS background layers is a set of utility classes used to apply Spectrum 2 app framing. Consult design documentation for further usage and infomation.
+Make note of the context when determing the correct class to use.
+
+Editing Context Classes:
+- `spectrum-BackgroundLayers-edit-elevated`
+- `spectrum-BackgroundLayers-edit-layer2`
+- `spectrum-BackgroundLayers-edit-layer1`
+- `spectrum-BackgroundLayers-edit-pasteboard`
+
+Browsing Context Classes:
+- `spectrum-BackgroundLayers-browse-elevated`
+- `spectrum-BackgroundLayers-browse-layer1`
+- `spectrum-BackgroundLayers-browse-base`
+
+To used these classes:
+- add background layers as a dependency
+- Use appropraite class on the element which should display the background layer
+
+This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
+
+See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/backgroundlayers).

components/backgroundlayers/gulpfile.js

@@ -0,0 +1 @@
+module.exports = require('@spectrum-css/component-builder-simple');

components/backgroundlayers/index.css

@@ -0,0 +1,68 @@
+/*!
+Copyright 2023 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: var(--spectrum-gray-600);
+
+	.spectrum--dark & {
+		--spectrum-backgroundlayers-shadow-color: 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 rgba(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: var(--spectrum-gray-600);
+
+	.spectrum--dark & {
+		--spectrum-backgroundlayers-shadow-color: 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 rgba(180, 180, 180, 25%);
+	background-color: var(--spectrum-background-base-color);
+}

components/backgroundlayers/metadata/backgroundlayers.yml

@@ -0,0 +1,28 @@
+name: Background layers
+status: Verified
+SpectrumSiteSlug: https://spectrum.adobe.com/page/background-layers/
+examples:
+  - id: backgroundlayers-browsing
+    name: Editting Contexts
+    markup: |
+      <div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-edit-elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-edit-layer2" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 3;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-edit-layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 30px; top: 30px; z-index: 2;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-edit-pasteboard" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 40px; top: 40px; z-index: 1;">
+        </div>
+      </div>
+  - id: backgroundlayers-editting
+    name: Browsing Contexts
+    markup: |
+      <div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-browse-elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 3;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-browse-layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 2;">
+        </div>
+        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-browse-base"  style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 20px; top: 20px; z-index: 1;">
+        </div>
+      </div>

components/backgroundlayers/metadata/mods.md

@@ -0,0 +1,3 @@
+| Modifiable Custom Properties                   |
+| ---------------------------------------------- |
+| `--mod-backgroundlayers-content-color-default` |

components/backgroundlayers/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@spectrum-css/backgroundlayers",
+  "version": "1.0.0-alpha.0",
+  "description": "The Spectrum CSS backgroundlayers component",
+  "license": "Apache-2.0",
+  "author": "Adobe",
+  "homepage": "https://opensource.adobe.com/spectrum-css/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/spectrum-css.git",
+    "directory": "components/backgroundlayers"
+  },
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-css/issues"
+  },
+  "main": "dist/index-vars.css",
+  "scripts": {
+    "build": "gulp",
+    "clean": "rimraf dist",
+    "test": "nx test:scope @spectrum-css/preview backgroundlayers"
+  },
+  "peerDependencies": {
+    "@spectrum-css/tokens": ">=13"
+  },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^2.0.17",
+    "@spectrum-css/tokens": "^13.0.0-beta.8",
+    "gulp": "^4.0.0",
+    "nx": "^17.0.3",
+    "rimraf": "^5.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

components/backgroundlayers/stories/backgroundlayers.stories.js

@@ -0,0 +1,69 @@
+import { Template } from "./template";
+import { html } from 'lit';
+
+export default {
+  title: "UtilityClasses/Background layers",
+  description: "The background layers is a series of classes used to style background layers.",
+  component: "BackgroundLayers",
+  argTypes: {},
+  args: {
+    rootClass: "spectrum-BackgroundLayers",
+  },
+  parameters: {
+    actions: {
+      handles: []
+    },
+    status: {
+      type: process.env.MIGRATED_PACKAGES.includes('backgroundlayers') ? 'migrated' : undefined
+    }
+  }
+};
+
+const EditingContext = ({
+}) => {
+	return html`
+		<div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;">
+			${Template({
+        style: "z-index: 4;",
+				layer: 'edit-elevated',
+			})}
+			${Template({
+        style: "z-index: 3; inset-inline-start: 15px; inset-block-start: 15px;",
+				layer: 'edit-layer2',
+			})}
+			${Template({
+        style: "z-index: 2; inset-inline-start: 25px; inset-block-start: 25px;",
+				layer: 'edit-layer1',
+			})}
+			${Template({
+        style: "z-index: 1; inset-inline-start: 35px; inset-block-start: 35px;",
+				layer: "edit-pasteboard",
+			})}
+		</div>
+	`;
+};
+
+const BrowsingContext = ({
+}) => {
+	return html`
+		<div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;">
+			${Template({
+        style: "z-index: 3;",
+				layer: 'browse-elevated',
+			})}
+			${Template({
+        style: "z-index: 2; inset-inline-start: 15px; inset-block-start: 15px;",
+				layer: 'browse-layer1',
+			})}
+			${Template({
+        style: "z-index: 1; inset-inline-start: 25px; inset-block-start: 25px;",
+				layer: "browse-base",
+			})}
+		</div>
+	`;
+};
+export const Editing = EditingContext.bind({});
+Editing.args = {};
+
+export const Browsing = BrowsingContext.bind({});
+Browsing.args = {};

components/backgroundlayers/stories/template.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+
+import "../index.css";
+
+export const Template = ({
+  rootClass = "spectrum-BackgroundLayers",
+  style,
+  layer,
+  id,
+  customClasses = [],
+}) => {
+  return html`
+    <div class=${classMap({
+      [rootClass]: true,
+      [`${rootClass}-${layer}`]: true,
+      ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+    })}
+      style="${style} inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute;">
+    </div>
+  `;
+}

components/backgroundlayers/themes/express.css

@@ -0,0 +1,13 @@
+/*!
+Copyright 2023 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.
+*/
+
+@container (--system: express) {}

components/backgroundlayers/themes/spectrum.css

@@ -0,0 +1,13 @@
+/*!
+Copyright 2023 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.
+*/
+
+@container (--system: spectrum) {}

tokens/package.json

@@ -15,8 +15,10 @@
   },
   "main": "dist/index.css",
   "devDependencies": {
-    "@adobe/spectrum-tokens": "12.23.3",
+    "@adobe/spectrum-tokens": "13.0.0-beta.8",
     "@nxkit/style-dictionary": "^4.0.0",
+    "concat-cli": "^4.0.0",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",