Skip to content

Commit b045a7f

Browse files
rise-erpeldingpfulton
rise-erpelding
authored and
pfulton
committed
docs(dropshadow): add stories and docs for dropshadow
1 parent 2381f1a commit b045a7f

File tree

3 files changed

+275
-0
lines changed

3 files changed

+275
-0
lines changed

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
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 box shadows or drop 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. Note that in cases where `filter: drop-shadow()` is used, the shadow may be more blurred than the design spec due to a difference in how the blur parameter is calculated, and an adjustment by half may be needed.
11+
12+
The opacity values in dark shadow colors are 3x the light values.
13+
14+
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.
15+
16+
## Emphasized Default
17+
This shadow is used to provide emphasis to containers within a page.
18+
19+
### `box-shadow`
20+
<Story of={DropShadowStories.BoxShadowEmphasizedDefault} />
21+
```
22+
box-shadow:
23+
var(--spectrum-drop-shadow-emphasized-default-x)
24+
var(--spectrum-drop-shadow-emphasized-default-y)
25+
var(--spectrum-drop-shadow-emphasized-default-blur)
26+
var(--spectrum-drop-shadow-emphasized-default-color);
27+
```
28+
29+
### `filter: drop-shadow()`
30+
<Story of={DropShadowStories.DropShadowEmphasizedDefault} />
31+
```
32+
filter: drop-shadow(
33+
var(--spectrum-drop-shadow-emphasized-default-x)
34+
var(--spectrum-drop-shadow-emphasized-default-y)
35+
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2)
36+
var(--spectrum-drop-shadow-emphasized-default-color)
37+
);
38+
```
39+
40+
## Emphasized Hover
41+
If the whole container is interactive, such as in a select box, the shadow becomes elevated on hover.
42+
43+
### `box-shadow`
44+
<Story of={DropShadowStories.BoxShadowEmphasizedHover} />
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+
### `filter: drop-shadow()`
54+
<Story of={DropShadowStories.DropShadowEmphasizedHover} />
55+
```
56+
filter: drop-shadow(
57+
var(--spectrum-drop-shadow-emphasized-hover-x)
58+
var(--spectrum-drop-shadow-emphasized-hover-y)
59+
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2)
60+
var(--spectrum-drop-shadow-emphasized-hover-color)
61+
);
62+
```
63+
64+
## Elevated
65+
Elevated shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels.
66+
67+
### `box-shadow`
68+
<Story of={DropShadowStories.BoxShadowElevated} />
69+
```
70+
box-shadow:
71+
var(--spectrum-drop-shadow-elevated-x)
72+
var(--spectrum-drop-shadow-elevated-y)
73+
var(--spectrum-drop-shadow-elevated-blur)
74+
var(--spectrum-drop-shadow-elevated-color);
75+
```
76+
77+
### `filter: drop-shadow()`
78+
<Story of={DropShadowStories.DropShadowElevated} />
79+
```
80+
filter: drop-shadow(
81+
var(--spectrum-drop-shadow-elevated-x)
82+
var(--spectrum-drop-shadow-elevated-y)
83+
calc(var(--spectrum-drop-shadow-elevated-blur) / 2)
84+
var(--spectrum-drop-shadow-elevated-color)
85+
);
86+
```

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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, ...args}) => {
13+
const { isDropShadow } = args;
14+
return html`
15+
<div class=${classMap({
16+
[rootClass]: true,
17+
[`${rootClass}--${variant}-drop-shadow`]: typeof variant !== undefined && !!isDropShadow,
18+
[`${rootClass}--${variant}-box-shadow`]: typeof variant !== undefined && !isDropShadow,
19+
})}></div>
20+
`;}
21+
22+
const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => 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+
const DropShadowVariant = ({...args}) => html`
33+
<div class="spectrum-Foundations-Example-variant-container">
34+
${DropShadowBackground({...args, color: "light"})}
35+
${DropShadowBackground({...args, color: "dark"})}
36+
</div>
37+
`;
38+
39+
40+
export const DropShadowEmphasizedDefault = DropShadowVariant.bind({});
41+
DropShadowEmphasizedDefault.args = {
42+
variant: "emphasized-default",
43+
isDropShadow: true,
44+
};
45+
46+
export const DropShadowEmphasizedHover = DropShadowVariant.bind({});
47+
DropShadowEmphasizedHover.args = {
48+
variant: "emphasized-hover",
49+
isDropShadow: true,
50+
};
51+
52+
export const DropShadowElevated = DropShadowVariant.bind({});
53+
DropShadowElevated.args = {
54+
variant: "elevated",
55+
isDropShadow: true,
56+
};
57+
58+
export const BoxShadowEmphasizedDefault = DropShadowVariant.bind({});
59+
BoxShadowEmphasizedDefault.args = {
60+
variant: "emphasized-default",
61+
isDropShadow: false,
62+
};
63+
64+
export const BoxShadowEmphasizedHover = DropShadowVariant.bind({});
65+
BoxShadowEmphasizedHover.args = {
66+
variant: "emphasized-hover",
67+
isDropShadow: false,
68+
};
69+
70+
export const BoxShadowElevated = DropShadowVariant.bind({});
71+
BoxShadowElevated.args = {
72+
variant: "elevated",
73+
isDropShadow: false,
74+
};

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
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-box-shadow {
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-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
36+
filter: drop-shadow(
37+
var(--spectrum-drop-shadow-emphasized-default-x)
38+
var(--spectrum-drop-shadow-emphasized-default-y)
39+
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */
40+
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))
41+
);
42+
}
43+
44+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
45+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
46+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow,
47+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
48+
/* adjustment because color tokens do not work properly on foundations pages */
49+
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
50+
}
51+
52+
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
53+
box-shadow:
54+
var(--spectrum-drop-shadow-emphasized-hover-x)
55+
var(--spectrum-drop-shadow-emphasized-hover-y)
56+
var(--spectrum-drop-shadow-emphasized-hover-blur)
57+
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
58+
}
59+
60+
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow {
61+
filter: drop-shadow(
62+
var(--spectrum-drop-shadow-emphasized-hover-x)
63+
var(--spectrum-drop-shadow-emphasized-hover-y)
64+
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */
65+
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))
66+
);
67+
}
68+
69+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
70+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
71+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow,
72+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
73+
/* adjustment because color tokens do not work properly on foundations pages */
74+
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
75+
}
76+
77+
.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
78+
box-shadow:
79+
var(--spectrum-drop-shadow-elevated-x)
80+
var(--spectrum-drop-shadow-elevated-y)
81+
var(--spectrum-drop-shadow-elevated-blur)
82+
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
83+
}
84+
85+
.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow {
86+
filter: drop-shadow(
87+
var(--spectrum-drop-shadow-elevated-x)
88+
var(--spectrum-drop-shadow-elevated-y)
89+
calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */
90+
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))
91+
);
92+
}
93+
94+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
95+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
96+
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow,
97+
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
98+
/* adjustment because color tokens do not work properly on foundations pages */
99+
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
100+
}
101+
102+
.spectrum-Foundations-Example-swatch-container {
103+
background-color: var(--spectrum-gray-25);
104+
block-size: 200px;
105+
inline-size: 300px;
106+
display: flex;
107+
align-items: center;
108+
justify-content: center;
109+
}
110+
111+
.spectrum-Foundations-Example-variant-container {
112+
background-color: var(--spectrum-gray-25);
113+
display: flex;
114+
flex-direction: row;
115+
}

0 commit comments

Comments
 (0)