Skip to content

Commit 413ef7f

Browse files
jenndiazjenndiaz
committed
feat(backgroundlayers): use context in class name
1 parent a38f475 commit 413ef7f

File tree

5 files changed

+92
-51
lines changed

5 files changed

+92
-51
lines changed

‎components/backgroundlayers/README.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
11
# @spectrum-css/backgroundlayers
22

3-
> The Spectrum CSS background layers component
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+
- `spectrum-BackgroundLayers-edit-elevated`
8+
- `spectrum-BackgroundLayers-edit-layer2`
9+
- `spectrum-BackgroundLayers-edit-layer1`
10+
- `spectrum-BackgroundLayers-edit-pasteboard`
11+
12+
Browsing Context Classes:
13+
- `spectrum-BackgroundLayers-browse-elevated`
14+
- `spectrum-BackgroundLayers-browse-layer1`
15+
- `spectrum-BackgroundLayers-browse-base`
16+
17+
To used these classes:
18+
- add background layers as a dependency
19+
- Use appropraite class on the element which should display the background layer
420

521
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
622

‎components/backgroundlayers/index.css

Lines changed: 57 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,52 +9,77 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
99
OF ANY KIND, either express or implied. See the License for the specific language
1010
governing permissions and limitations under the License.
1111
*/
12-
.spectrum-BackgroundLayers {
13-
--spectrum-gray-25: rgb(255, 255, 255);
14-
--spectrum-gray-50: rgb(248, 248, 248);
15-
--spectrum-gray-75: rgb(243, 243, 243);
16-
--spectrum-gray-100: rgb(233, 233, 233);
17-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
18-
19-
}
20-
21-
.spectrum-BackgroundLayers--elevated {
22-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
12+
/* for use only in editing contexts */
13+
.spectrum-BackgroundLayers-edit-elevated {
14+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
2315
--spectrum-backgroundlayers-shadow-horizontal: 0;
2416
--spectrum-backgroundlayers-shadow-vertical: 0;
2517
--spectrum-backgroundlayers-shadow-blur: 5px;
26-
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-200);
18+
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-600);
19+
2720
.spectrum--dark & {
28-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
21+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
2922
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
3023
}
24+
background-color: var(--spectrum-backgroundlayers-background-color);
25+
box-shadow:
26+
var(--spectrum-backgroundlayers-shadow-horizontal)
27+
var(--spectrum-backgroundlayers-shadow-vertical)
28+
var(--spectrum-backgroundlayers-shadow-blur)
29+
var(--spectrum-backgroundlayers-shadow-color)
3130
}
32-
.spectrum-BackgroundLayers--layer2 {
33-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
31+
32+
.spectrum-BackgroundLayers-edit-layer2 {
33+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
34+
3435
.spectrum--dark & {
35-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
36+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
3637
}
38+
background-color: var(--spectrum-backgroundlayers-background-color);
39+
border: 2px solid rgba(180, 180, 180, 25%);
3740
}
38-
.spectrum-BackgroundLayers--layer1 {
39-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-50);
41+
42+
.spectrum-BackgroundLayers-edit-layer1 {
43+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-50);
44+
background-color: var(--spectrum-backgroundlayers-background-color);
4045
}
41-
.spectrum-BackgroundLayers--pasteboard {
42-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-100);
46+
47+
.spectrum-BackgroundLayers-edit-pasteboard {
48+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-100);
49+
4350
.spectrum--dark & {
44-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
51+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
4552
}
46-
}
47-
.spectrum-BackgroundLayers--base {
48-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
49-
border: 2px solid rgba(180, 180, 180, 0.25);
53+
background-color: var(--spectrum-backgroundlayers-background-color);
5054
}
5155

52-
.spectrum-BackgroundLayers {
53-
background-color: var(--spectum-backgroundlayers-background-color);
54-
filter: drop-shadow(
56+
/* only used in browsing contexts */
57+
.spectrum-BackgroundLayers-browse-elevated {
58+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
59+
--spectrum-backgroundlayers-shadow-horizontal: 0;
60+
--spectrum-backgroundlayers-shadow-vertical: 0;
61+
--spectrum-backgroundlayers-shadow-blur: 5px;
62+
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-600);
63+
64+
.spectrum--dark & {
65+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
66+
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
67+
}
68+
background-color: var(--spectrum-backgroundlayers-background-color);
69+
box-shadow:
5570
var(--spectrum-backgroundlayers-shadow-horizontal)
56-
var(--spectrum-backgroundlayers-shadow-vertical)
57-
var(--spectrum-backgroundlayers-shadow-blur)
58-
var(--spectrum-backgroundlayers-shadow-color)
59-
);
71+
var(--spectrum-backgroundlayers-shadow-vertical)
72+
var(--spectrum-backgroundlayers-shadow-blur)
73+
var(--spectrum-backgroundlayers-shadow-color)
6074
}
75+
76+
.spectrum-BackgroundLayers-browse-layer1 {
77+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-50);
78+
background-color: var(--spectrum-backgroundlayers-background-color);
79+
}
80+
81+
.spectrum-BackgroundLayers-browse-base {
82+
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
83+
border: 2px solid rgba(180, 180, 180, 25%);
84+
background-color: var(--spectrum-backgroundlayers-background-color);
85+
}

‎components/backgroundlayers/metadata/backgroundlayers.yml

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,26 @@ status: Verified
33
SpectrumSiteSlug: https://spectrum.adobe.com/page/background-layers/
44
examples:
55
- id: backgroundlayers-browsing
6-
name: Browsing Contexts
6+
name: Editting Contexts
77
markup: |
88
<div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
9-
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">
9+
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-edit-elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">
1010
</div>
11-
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer2" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 3;">
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;">
1212
</div>
13-
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 30px; top: 30px; z-index: 2;">
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;">
1414
</div>
15-
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--pasteboard" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 40px; top: 40px; z-index: 1;">
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;">
1616
</div>
1717
</div>
1818
- id: backgroundlayers-editting
19-
name: Editting Contexts
19+
name: Browsing Contexts
2020
markup: |
2121
<div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
22-
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 3;">
22+
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers-browse-elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 3;">
2323
</div>
24-
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 2;">
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;">
2525
</div>
26-
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--base" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 20px; top: 20px; z-index: 1;">
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;">
2727
</div>
2828
</div>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Template } from "./template";
22
import { html } from 'lit';
33

44
export default {
5-
title: "Elements/Background layers",
5+
title: "UtilityClasses/Background layers",
66
description: "The background layers is a series of classes used to style background layers.",
77
component: "BackgroundLayers",
88
argTypes: {},
@@ -25,19 +25,19 @@ const EditingContext = ({
2525
<div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;">
2626
${Template({
2727
style: "z-index: 4;",
28-
layer: 'elevated',
28+
layer: 'edit-elevated',
2929
})}
3030
${Template({
3131
style: "z-index: 3; inset-inline-start: 15px; inset-block-start: 15px;",
32-
layer: 'layer2',
32+
layer: 'edit-layer2',
3333
})}
3434
${Template({
3535
style: "z-index: 2; inset-inline-start: 25px; inset-block-start: 25px;",
36-
layer: 'layer1',
36+
layer: 'edit-layer1',
3737
})}
3838
${Template({
3939
style: "z-index: 1; inset-inline-start: 35px; inset-block-start: 35px;",
40-
layer: "pasteboard",
40+
layer: "edit-pasteboard",
4141
})}
4242
</div>
4343
`;
@@ -49,15 +49,15 @@ const BrowsingContext = ({
4949
<div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;">
5050
${Template({
5151
style: "z-index: 3;",
52-
layer: 'elevated',
52+
layer: 'browse-elevated',
5353
})}
5454
${Template({
5555
style: "z-index: 2; inset-inline-start: 15px; inset-block-start: 15px;",
56-
layer: 'layer1',
56+
layer: 'browse-layer1',
5757
})}
5858
${Template({
5959
style: "z-index: 1; inset-inline-start: 25px; inset-block-start: 25px;",
60-
layer: "base",
60+
layer: "browse-base",
6161
})}
6262
</div>
6363
`;

‎components/backgroundlayers/stories/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const Template = ({
1313
return html`
1414
<div class=${classMap({
1515
[rootClass]: true,
16-
[`${rootClass}--${layer}`]: true,
16+
[`${rootClass}-${layer}`]: true,
1717
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
1818
})}
1919
style="${style} inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute;">

0 commit comments

Comments
 (0)