Skip to content

Commit 47f9fc8

Browse files
castastrophecastastrophe
committed
feat(backgroundlayers): class based implementation [CSS-1268]
1 parent 743253c commit 47f9fc8

File tree

9 files changed

+311
-0
lines changed

9 files changed

+311
-0
lines changed

‎components/backgroundlayers/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# @spectrum-css/backgroundlayers
2+
3+
> > 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.
4+
> > Make note of the context when determing the correct class to use.
5+
6+
Editing Context Classes:
7+
8+
- `spectrum-BackgroundLayers-edit-elevated`
9+
- `spectrum-BackgroundLayers-edit-layer2`
10+
- `spectrum-BackgroundLayers-edit-layer1`
11+
- `spectrum-BackgroundLayers-edit-pasteboard`
12+
13+
Browsing Context Classes:
14+
15+
- `spectrum-BackgroundLayers-browse-elevated`
16+
- `spectrum-BackgroundLayers-browse-layer1`
17+
- `spectrum-BackgroundLayers-browse-base`
18+
19+
To used these classes:
20+
21+
- add background layers as a dependency
22+
- Use appropraite class on the element which should display the background layer
23+
24+
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
25+
26+
See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/backgroundlayers).

‎components/backgroundlayers/dist/metadata.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"sourceFile": "index.css",
3+
"selectors": [
4+
".spectrum-BackgroundLayers-browse-base",
5+
".spectrum-BackgroundLayers-browse-elevated",
6+
".spectrum-BackgroundLayers-browse-layer1",
7+
".spectrum-BackgroundLayers-edit-elevated",
8+
".spectrum-BackgroundLayers-edit-layer1",
9+
".spectrum-BackgroundLayers-edit-layer2",
10+
".spectrum-BackgroundLayers-edit-pasteboard"
11+
],
12+
"modifiers": [],
13+
"component": [
14+
"--spectrum-backgroundlayers-shadow-blur",
15+
"--spectrum-backgroundlayers-shadow-color",
16+
"--spectrum-backgroundlayers-shadow-horizontal",
17+
"--spectrum-backgroundlayers-shadow-vertical"
18+
],
19+
"global": [
20+
"--spectrum-background-base-color",
21+
"--spectrum-background-elevated-color",
22+
"--spectrum-background-layer-1-color",
23+
"--spectrum-background-layer-2-color",
24+
"--spectrum-background-pasteboard-color",
25+
"--spectrum-gray-100",
26+
"--spectrum-gray-600"
27+
],
28+
"passthroughs": [],
29+
"high-contrast": []
30+
}

‎components/backgroundlayers/index.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*!
2+
* Copyright 2024 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
14+
/* for use only in editing contexts */
15+
.spectrum-BackgroundLayers-edit-elevated {
16+
--spectrum-backgroundlayers-shadow-horizontal: 0;
17+
--spectrum-backgroundlayers-shadow-vertical: 0;
18+
--spectrum-backgroundlayers-shadow-blur: 5px;
19+
--spectrum-backgroundlayers-shadow-color: light-dark(var(--spectrum-gray-600), var(--spectrum-gray-100));
20+
21+
background-color: var(--spectrum-background-elevated-color);
22+
box-shadow: var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color);
23+
}
24+
25+
.spectrum-BackgroundLayers-edit-layer2 {
26+
background-color: var(--spectrum-background-layer-2-color);
27+
border: 2px solid rgb(180 180 180 / 25%);
28+
}
29+
30+
.spectrum-BackgroundLayers-edit-layer1 {
31+
background-color: var(--spectrum-background-layer-1-color);
32+
}
33+
34+
.spectrum-BackgroundLayers-edit-pasteboard {
35+
background-color: var(--spectrum-background-pasteboard-color);
36+
}
37+
38+
/* only used in browsing contexts */
39+
.spectrum-BackgroundLayers-browse-elevated {
40+
--spectrum-backgroundlayers-shadow-horizontal: 0;
41+
--spectrum-backgroundlayers-shadow-vertical: 0;
42+
--spectrum-backgroundlayers-shadow-blur: 5px;
43+
--spectrum-backgroundlayers-shadow-color: light-dark(var(--spectrum-gray-600), var(--spectrum-gray-100));
44+
45+
background-color: var(--spectrum-background-elevated-color);
46+
box-shadow: var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color);
47+
}
48+
49+
.spectrum-BackgroundLayers-browse-layer1 {
50+
background-color: var(--spectrum-background-layer-1-color);
51+
}
52+
53+
.spectrum-BackgroundLayers-browse-base {
54+
border: 2px solid rgb(180 180 180 / 25%);
55+
background-color: var(--spectrum-background-base-color);
56+
}

‎components/backgroundlayers/metadata/backgroundlayers.yml

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: Background layers
2+
status: Verified
3+
SpectrumSiteSlug: https://spectrum.adobe.com/page/background-layers/
4+
examples:
5+
- id: backgroundlayers-browsing
6+
name: Editting Contexts
7+
markup: |
8+
<div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
9+
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-edit-elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">
10+
</div>
11+
<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;">
12+
</div>
13+
<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;">
14+
</div>
15+
<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;">
16+
</div>
17+
</div>
18+
- id: backgroundlayers-editting
19+
name: Browsing Contexts
20+
markup: |
21+
<div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
22+
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-browse-elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 3;">
23+
</div>
24+
<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;">
25+
</div>
26+
<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;">
27+
</div>
28+
</div>

‎components/backgroundlayers/package.json

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "@spectrum-css/backgroundlayers",
3+
"version": "1.0.0-alpha.0",
4+
"description": "The Spectrum CSS backgroundlayers component",
5+
"license": "Apache-2.0",
6+
"author": "Adobe",
7+
"homepage": "https://opensource.adobe.com/spectrum-css/",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/adobe/spectrum-css.git",
11+
"directory": "components/backgroundlayers"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/adobe/spectrum-css/issues"
15+
},
16+
"exports": {
17+
".": "./dist/index.css",
18+
"./*.md": "./*.md",
19+
"./dist/*": "./dist/*",
20+
"./index-*.css": "./dist/index-*.css",
21+
"./index.css": "./dist/index.css",
22+
"./metadata.json": "./dist/metadata.json",
23+
"./package.json": "./package.json",
24+
"./stories/*": "./stories/*"
25+
},
26+
"main": "dist/index.css",
27+
"peerDependencies": {
28+
"@spectrum-css/tokens": ">=16.1.0-next.0"
29+
},
30+
"peerDependenciesMeta": {
31+
"@spectrum-css/tokens": {
32+
"optional": true
33+
}
34+
},
35+
"devDependencies": {
36+
"@spectrum-css/tokens": "16.1.0-next.8"
37+
},
38+
"keywords": [
39+
"design-system",
40+
"spectrum",
41+
"spectrum-css",
42+
"adobe",
43+
"adobe-spectrum",
44+
"component",
45+
"css"
46+
],
47+
"publishConfig": {
48+
"access": "public"
49+
}
50+
}

‎components/backgroundlayers/project.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
3+
"name": "backgroundlayers",
4+
"tags": ["component"],
5+
"targets": {
6+
"build": {},
7+
"clean": {},
8+
"compare": {},
9+
"format": {},
10+
"lint": {},
11+
"report": {},
12+
"test": {
13+
"defaultConfiguration": "scope"
14+
},
15+
"validate": {}
16+
}
17+
}

‎components/backgroundlayers/stories/backgroundlayers.stories.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Template } from "./template";
2+
import { html } from "lit";
3+
4+
export default {
5+
title: "UtilityClasses/Background layers",
6+
description: "The background layers is a series of classes used to style background layers.",
7+
component: "BackgroundLayers",
8+
argTypes: {},
9+
args: {
10+
rootClass: "spectrum-BackgroundLayers",
11+
},
12+
parameters: {
13+
actions: {
14+
handles: []
15+
},
16+
status: {
17+
type: process.env.MIGRATED_PACKAGES.includes("backgroundlayers") ? "migrated" : undefined
18+
}
19+
}
20+
};
21+
22+
const EditingContext = ({
23+
}) => {
24+
return html`
25+
<div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;">
26+
${Template({
27+
style: "z-index: 4;",
28+
layer: "edit-elevated",
29+
})}
30+
${Template({
31+
style: "z-index: 3; inset-inline-start: 15px; inset-block-start: 15px;",
32+
layer: "edit-layer2",
33+
})}
34+
${Template({
35+
style: "z-index: 2; inset-inline-start: 25px; inset-block-start: 25px;",
36+
layer: "edit-layer1",
37+
})}
38+
${Template({
39+
style: "z-index: 1; inset-inline-start: 35px; inset-block-start: 35px;",
40+
layer: "edit-pasteboard",
41+
})}
42+
</div>
43+
`;
44+
};
45+
46+
const BrowsingContext = ({
47+
}) => {
48+
return html`
49+
<div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;">
50+
${Template({
51+
style: "z-index: 3;",
52+
layer: "browse-elevated",
53+
})}
54+
${Template({
55+
style: "z-index: 2; inset-inline-start: 15px; inset-block-start: 15px;",
56+
layer: "browse-layer1",
57+
})}
58+
${Template({
59+
style: "z-index: 1; inset-inline-start: 25px; inset-block-start: 25px;",
60+
layer: "browse-base",
61+
})}
62+
</div>
63+
`;
64+
};
65+
export const Editing = EditingContext.bind({});
66+
Editing.args = {};
67+
68+
export const Browsing = BrowsingContext.bind({});
69+
Browsing.args = {};

‎components/backgroundlayers/stories/template.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { html } from "lit";
2+
import { classMap } from "lit/directives/class-map.js";
3+
4+
import "../index.css";
5+
6+
export const Template = ({
7+
rootClass = "spectrum-BackgroundLayers",
8+
style,
9+
layer,
10+
id,
11+
customClasses = [],
12+
}) => {
13+
return html`
14+
<div class=${classMap({
15+
[rootClass]: true,
16+
[`${rootClass}-${layer}`]: true,
17+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
18+
})}
19+
style="${style} inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute;">
20+
</div>
21+
`;
22+
};

‎yarn.lock

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4271,6 +4271,19 @@ __metadata:
42714271
languageName: unknown
42724272
linkType: soft
42734273

4274+
"@spectrum-css/backgroundlayers@workspace:components/backgroundlayers":
4275+
version: 0.0.0-use.local
4276+
resolution: "@spectrum-css/backgroundlayers@workspace:components/backgroundlayers"
4277+
dependencies:
4278+
"@spectrum-css/tokens": "npm:16.1.0-next.8"
4279+
peerDependencies:
4280+
"@spectrum-css/tokens": ">=16.1.0-next.0"
4281+
peerDependenciesMeta:
4282+
"@spectrum-css/tokens":
4283+
optional: true
4284+
languageName: unknown
4285+
linkType: soft
4286+
42744287
"@spectrum-css/badge@npm:7.0.0-next.2, @spectrum-css/badge@workspace:components/badge":
42754288
version: 0.0.0-use.local
42764289
resolution: "@spectrum-css/badge@workspace:components/badge"

0 commit comments

Comments
 (0)