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 3, 2024
1 parent 658c0be commit b02ba6f
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 44 deletions.
69 changes: 43 additions & 26 deletions .storybook/foundations/drop-shadow/drop-shadow.mdx
View file
Expand Up @@ -7,63 +7,80 @@ 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 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.

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.

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

## 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} />

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

## Emphasized Hover
If the whole container is interactive, such as in a select box, the shadow becomes elevated on hover.

### Box shadow
<Story of={DropShadowStories.BoxShadowEmphasizedHover} />
```
box-shadow:
var(--spectrum-drop-shadow-emphasized-hover-x)
var(--spectrum-drop-shadow-emphasized-hover-y)
var(--spectrum-drop-shadow-emphasized-hover-blur)
var(--spectrum-drop-shadow-emphasized-hover-color);
```

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

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

### Box shadow
<Story of={DropShadowStories.BoxShadowElevated} />
```
box-shadow:
var(--spectrum-drop-shadow-elevated-x)
var(--spectrum-drop-shadow-elevated-y)
var(--spectrum-drop-shadow-elevated-blur)
var(--spectrum-drop-shadow-elevated-color);
```

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

Please sign in to comment.