Skip to content

Commit

Permalink
docs(dropshadow): display both drop shadow and box shadow
Browse files Browse the repository at this point in the history
  • Loading branch information
@rise-erpelding
rise-erpelding committed May 2, 2024
1 parent dbdde03 commit 5836ca7
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 28 deletions.
37 changes: 27 additions & 10 deletions .storybook/foundations/drop-shadow/drop-shadow.mdx
View file
Expand Up @@ -7,23 +7,29 @@ import * as DropShadowStories from './drop-shadow.stories.js';
<Title />
<Description of={DropShadowStories} />

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.
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 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.

The opacity values in dark shadow colors are 3x the light values.

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.

## Emphasized Default
This drop shadow is used to provide emphasis to containers within a page.
<Story of={DropShadowStories.DropShadowEmphasizedDefault} />
The opacity values in dark shadow colors are 3x the light values.
This shadow is used to provide emphasis to containers within a page.

### Drop shadow
<Story of={DropShadowStories.DropShadowEmphasizedDefault} />
```
filter: drop-shadow(
var(--spectrum-drop-shadow-emphasized-default-x)
var(--spectrum-drop-shadow-emphasized-default-y)
var(--spectrum-drop-shadow-emphasized-default-blur)
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2)
var(--spectrum-drop-shadow-emphasized-default-color)
);
```

### Box shadow
<Story of={DropShadowStories.BoxShadowEmphasizedDefault} />
```
box-shadow:
var(--spectrum-drop-shadow-emphasized-default-x)
var(--spectrum-drop-shadow-emphasized-default-y)
Expand All @@ -32,17 +38,22 @@ box-shadow:
```

## Emphasized Hover
If the whole container is interactive, such as in a select box, the drop shadow becomes elevated on hover.
<Story of={DropShadowStories.DropShadowEmphasizedHover} />
If the whole container is interactive, such as in a select box, the shadow becomes elevated on hover.

### Drop shadow
<Story of={DropShadowStories.DropShadowEmphasizedHover} />
```
filter: drop-shadow(
var(--spectrum-drop-shadow-emphasized-hover-x)
var(--spectrum-drop-shadow-emphasized-hover-y)
var(--spectrum-drop-shadow-emphasized-hover-blur)
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2)
var(--spectrum-drop-shadow-emphasized-hover-color)
);
```

### Box shadow
<Story of={DropShadowStories.BoxShadowEmphasizedHover} />
```
box-shadow:
var(--spectrum-drop-shadow-emphasized-hover-x)
var(--spectrum-drop-shadow-emphasized-hover-y)
Expand All @@ -51,16 +62,22 @@ box-shadow:
```

## Elevated
Elevated drop shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels.
Elevated shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels.

### Drop shadow
<Story of={DropShadowStories.DropShadowElevated} />
```
filter: drop-shadow(
var(--spectrum-drop-shadow-elevated-x)
var(--spectrum-drop-shadow-elevated-y)
var(--spectrum-drop-shadow-elevated-blur)
calc(var(--spectrum-drop-shadow-elevated-blur) / 2)
var(--spectrum-drop-shadow-elevated-color)
);
```

### Box shadow
<Story of={DropShadowStories.BoxShadowElevated} />
```
box-shadow:
var(--spectrum-drop-shadow-elevated-x)
var(--spectrum-drop-shadow-elevated-y)
Expand Down
37 changes: 28 additions & 9 deletions .storybook/foundations/drop-shadow/drop-shadow.stories.js
View file
Expand Up @@ -9,17 +9,17 @@ export default {
tags: ['foundation'],
}

const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant}) => {
const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant, ...args}) => {
const { isDropShadow } = args;
return html`
<div class=${classMap({
[rootClass]: true,
[`${rootClass}--${variant}`]: typeof variant !== undefined,
[`${rootClass}--${variant}-drop-shadow`]: typeof variant !== undefined && !!isDropShadow,
[`${rootClass}--${variant}-box-shadow`]: typeof variant !== undefined && !isDropShadow,
})}></div>
`;}

const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => {

return html`
const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => html`
<div class=${classMap({
[rootClass]: true,
"spectrum--light": color === "light",
Expand All @@ -28,28 +28,47 @@ const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-
${DropShadowSwatch(args)}
</div>
`;
}

const DropShadowVariant = ({...args}) => {
return html`
const DropShadowVariant = ({...args}) => html`
<div class="spectrum-Foundations-Example-variant-container">
${DropShadowBackground({...args, color: "light"})}
${DropShadowBackground({...args, color: "dark"})}
</div>
`;}
`;


export const DropShadowEmphasizedDefault = DropShadowVariant.bind({});
DropShadowEmphasizedDefault.args = {
variant: "emphasized-default",
isDropShadow: true,
};

export const DropShadowEmphasizedHover = DropShadowVariant.bind({});
DropShadowEmphasizedHover.args = {
variant: "emphasized-hover",
isDropShadow: true,
};

export const DropShadowElevated = DropShadowVariant.bind({});
DropShadowElevated.args = {
variant: "elevated",
isDropShadow: true,
};

export const BoxShadowEmphasizedDefault = DropShadowVariant.bind({});
BoxShadowEmphasizedDefault.args = {
variant: "emphasized-default",
isDropShadow: false,
};

export const BoxShadowEmphasizedHover = DropShadowVariant.bind({});
BoxShadowEmphasizedHover.args = {
variant: "emphasized-hover",
isDropShadow: false,
};

export const BoxShadowElevated = DropShadowVariant.bind({});
BoxShadowElevated.args = {
variant: "elevated",
isDropShadow: false,
};
51 changes: 42 additions & 9 deletions .storybook/foundations/drop-shadow/index.css
View file
Expand Up @@ -24,44 +24,77 @@ governing permissions and limitations under the License.
background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
}

.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default {
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow {
box-shadow:
var(--spectrum-drop-shadow-emphasized-default-x)
var(--spectrum-drop-shadow-emphasized-default-y)
var(--spectrum-drop-shadow-emphasized-default-blur)
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
}

.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default {
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
filter: drop-shadow(
var(--spectrum-drop-shadow-emphasized-default-x)
var(--spectrum-drop-shadow-emphasized-default-y)
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))
);
}

.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
/* adjustment because color tokens do not work properly on foundations pages */
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
}

.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover {
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
box-shadow:
var(--spectrum-drop-shadow-emphasized-hover-x)
var(--spectrum-drop-shadow-emphasized-hover-y)
var(--spectrum-drop-shadow-emphasized-hover-blur)
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
}

.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover {
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow {
filter: drop-shadow(
var(--spectrum-drop-shadow-emphasized-hover-x)
var(--spectrum-drop-shadow-emphasized-hover-y)
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))
);
}

.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
/* adjustment because color tokens do not work properly on foundations pages */
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
}

.spectrum-Foundations-Example-DropShadow-swatch--elevated {
.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
box-shadow:
var(--spectrum-drop-shadow-elevated-x)
var(--spectrum-drop-shadow-elevated-y)
var(--spectrum-drop-shadow-elevated-blur)
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
}

.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated {
.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow {
filter: drop-shadow(
var(--spectrum-drop-shadow-elevated-x)
var(--spectrum-drop-shadow-elevated-y)
calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))
);
}

.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
/* adjustment because color tokens do not work properly on foundations pages */
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
}
Expand Down

0 comments on commit 5836ca7

Please sign in to comment.