Skip to content

Commit dbdde03

Browse files
rise-erpeldingrise-erpelding
committed
docs(dropshadow): add stories and docs for dropshadow
1 parent e0e0fd2 commit dbdde03

File tree

3 files changed

+205
-0
lines changed

3 files changed

+205
-0
lines changed

‎.storybook/foundations/drop-shadow/drop-shadow.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Meta, Title, Story, Description } from '@storybook/blocks';
2+
import * as DropShadowStories from './drop-shadow.stories.js';
3+
4+
5+
<Meta of={DropShadowStories} />
6+
7+
<Title />
8+
<Description of={DropShadowStories} />
9+
10+
Drop shadow tokens may be used for drop shadows or box shadows in CSS. Using `box-shadow` is often preferable to using `filter: drop-shadow()`, but in situations where the shadow must be applied to the alpha channel of the content rather than the border box, or if `box-shadow` is already being used for a different purpose, such as a focus outline, `filter: drop-shadow()` may be used.
11+
12+
These single-layer shadows are an interim solution for shadows until complex tokens (additional design data for the Spectrum Tokens system) are available to support multi-layer shadows.
13+
14+
## Emphasized Default
15+
This drop shadow is used to provide emphasis to containers within a page.
16+
<Story of={DropShadowStories.DropShadowEmphasizedDefault} />
17+
The opacity values in dark shadow colors are 3x the light values.
18+
19+
```
20+
filter: drop-shadow(
21+
var(--spectrum-drop-shadow-emphasized-default-x)
22+
var(--spectrum-drop-shadow-emphasized-default-y)
23+
var(--spectrum-drop-shadow-emphasized-default-blur)
24+
var(--spectrum-drop-shadow-emphasized-default-color)
25+
);
26+
27+
box-shadow:
28+
var(--spectrum-drop-shadow-emphasized-default-x)
29+
var(--spectrum-drop-shadow-emphasized-default-y)
30+
var(--spectrum-drop-shadow-emphasized-default-blur)
31+
var(--spectrum-drop-shadow-emphasized-default-color);
32+
```
33+
34+
## Emphasized Hover
35+
If the whole container is interactive, such as in a select box, the drop shadow becomes elevated on hover.
36+
<Story of={DropShadowStories.DropShadowEmphasizedHover} />
37+
38+
```
39+
filter: drop-shadow(
40+
var(--spectrum-drop-shadow-emphasized-hover-x)
41+
var(--spectrum-drop-shadow-emphasized-hover-y)
42+
var(--spectrum-drop-shadow-emphasized-hover-blur)
43+
var(--spectrum-drop-shadow-emphasized-hover-color)
44+
);
45+
46+
box-shadow:
47+
var(--spectrum-drop-shadow-emphasized-hover-x)
48+
var(--spectrum-drop-shadow-emphasized-hover-y)
49+
var(--spectrum-drop-shadow-emphasized-hover-blur)
50+
var(--spectrum-drop-shadow-emphasized-hover-color);
51+
```
52+
53+
## Elevated
54+
Elevated drop shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels.
55+
<Story of={DropShadowStories.DropShadowElevated} />
56+
```
57+
filter: drop-shadow(
58+
var(--spectrum-drop-shadow-elevated-x)
59+
var(--spectrum-drop-shadow-elevated-y)
60+
var(--spectrum-drop-shadow-elevated-blur)
61+
var(--spectrum-drop-shadow-elevated-color)
62+
);
63+
64+
box-shadow:
65+
var(--spectrum-drop-shadow-elevated-x)
66+
var(--spectrum-drop-shadow-elevated-y)
67+
var(--spectrum-drop-shadow-elevated-blur)
68+
var(--spectrum-drop-shadow-elevated-color);
69+
```

‎.storybook/foundations/drop-shadow/drop-shadow.stories.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { html } from "lit";
2+
import { classMap } from "lit/directives/class-map.js";
3+
import "./index.css";
4+
5+
export default {
6+
title: "Foundations/Drop shadow",
7+
description: "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.",
8+
component: "Drop shadow",
9+
tags: ['foundation'],
10+
}
11+
12+
const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant}) => {
13+
return html`
14+
<div class=${classMap({
15+
[rootClass]: true,
16+
[`${rootClass}--${variant}`]: typeof variant !== undefined,
17+
})}></div>
18+
`;}
19+
20+
const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => {
21+
22+
return html`
23+
<div class=${classMap({
24+
[rootClass]: true,
25+
"spectrum--light": color === "light",
26+
"spectrum--dark": color === "dark",
27+
})}>
28+
${DropShadowSwatch(args)}
29+
</div>
30+
`;
31+
}
32+
33+
const DropShadowVariant = ({...args}) => {
34+
return html`
35+
<div class="spectrum-Foundations-Example-variant-container">
36+
${DropShadowBackground({...args, color: "light"})}
37+
${DropShadowBackground({...args, color: "dark"})}
38+
</div>
39+
`;}
40+
41+
42+
export const DropShadowEmphasizedDefault = DropShadowVariant.bind({});
43+
DropShadowEmphasizedDefault.args = {
44+
variant: "emphasized-default",
45+
};
46+
47+
export const DropShadowEmphasizedHover = DropShadowVariant.bind({});
48+
DropShadowEmphasizedHover.args = {
49+
variant: "emphasized-hover",
50+
};
51+
52+
export const DropShadowElevated = DropShadowVariant.bind({});
53+
DropShadowElevated.args = {
54+
variant: "elevated",
55+
};

‎.storybook/foundations/drop-shadow/index.css

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*!
2+
Copyright 2024 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
/* stylelint-disable spectrum-tools/no-unknown-custom-properties */
14+
15+
.spectrum-Foundations-Example-DropShadow-swatch {
16+
block-size: 150px;
17+
inline-size: 150px;
18+
background-color: var(--spectrum-gray-25);
19+
border-radius: var(--spectrum-corner-radius-large-default);
20+
border: transparent;
21+
}
22+
23+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch {
24+
background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
25+
}
26+
27+
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default {
28+
box-shadow:
29+
var(--spectrum-drop-shadow-emphasized-default-x)
30+
var(--spectrum-drop-shadow-emphasized-default-y)
31+
var(--spectrum-drop-shadow-emphasized-default-blur)
32+
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
33+
}
34+
35+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default,
36+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default {
37+
/* adjustment because color tokens do not work properly on foundations pages */
38+
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
39+
}
40+
41+
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover {
42+
box-shadow:
43+
var(--spectrum-drop-shadow-emphasized-hover-x)
44+
var(--spectrum-drop-shadow-emphasized-hover-y)
45+
var(--spectrum-drop-shadow-emphasized-hover-blur)
46+
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
47+
}
48+
49+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover,
50+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover {
51+
/* adjustment because color tokens do not work properly on foundations pages */
52+
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
53+
}
54+
55+
.spectrum-Foundations-Example-DropShadow-swatch--elevated {
56+
box-shadow:
57+
var(--spectrum-drop-shadow-elevated-x)
58+
var(--spectrum-drop-shadow-elevated-y)
59+
var(--spectrum-drop-shadow-elevated-blur)
60+
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
61+
}
62+
63+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated,
64+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated {
65+
/* adjustment because color tokens do not work properly on foundations pages */
66+
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
67+
}
68+
69+
.spectrum-Foundations-Example-swatch-container {
70+
background-color: var(--spectrum-gray-25);
71+
block-size: 200px;
72+
inline-size: 300px;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
}
77+
78+
.spectrum-Foundations-Example-variant-container {
79+
display: flex;
80+
flex-direction: row;
81+
}

0 commit comments

Comments
 (0)