# Shadow editor
Edits one shadow: a preview card drawn with it, its layers with their offsets, blur, spread, color and opacity, and a button to add a layer.
Block: `smbk-shadow-editor`. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.
## Options
| Axis | Values | Default | Meaning |
|---|---|---|---|
Parts: `smbk-shadow-editor__preview`, `smbk-shadow-editor__card`, `smbk-shadow-editor__layers`, `smbk-shadow-editor__layer`, `smbk-shadow-editor__head`, `smbk-shadow-editor__title`, `smbk-shadow-editor__handle`, `smbk-shadow-editor__name`, `smbk-shadow-editor__remove`, `smbk-shadow-editor__fields`, `smbk-shadow-editor__paint`, `smbk-shadow-editor__field`, `smbk-shadow-editor__label`, `smbk-shadow-editor__add`, `smbk-shadow-editor__hidden`
## Markup
```html
Up and down arrow keys move the layer.
Layer 1
X offset in pixelsY offset in pixelsBlur in pixelsSpread in pixels
Color
Opacity
Layer 2
X offset in pixelsY offset in pixelsBlur in pixelsSpread in pixels
Color
Opacity
```
## React
```tsx
import { ShadowEditor } from './design-system/components/shadow-editor/shadow-editor.js';
```
## Stylesheet
```css
/* smbk-shadow-editor — Shadow editor. Figma "Shadow editor" 7417:172 (Preview and Add layer switches) and its
* "ShadowLayer" 7417:87 (Remove switch).
* A column, the medium stack step apart: a preview (a card on the default surface, raised by the shadow being edited, in
* a well of the canvas color inside a subtle edge), the layers from top to bottom, and the Add layer button.
* Each layer is a card on the default surface inside a subtle edge, the medium inset round it and the small stack step
* between its rows: a head (the move handle and the layer's name in Label MD, and the Remove button), a row of four
* small number boxes (X, Y, Blur, Spread) and a row of the color picker's field with the opacity box, each box under its
* label in Body XS. The shadow on the preview's card is data: the wrapper writes it to a custom property on the block. */
.smbk-shadow-editor {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--smbk-space-stack-md);
min-width: 0;
}
/* The block frames the words it hides for screen readers, so they stay inside it wherever it is placed: without a
frame they hang from the page itself and stretch it, past the end of an area that scrolls. No weight, so a parent
that places the block keeps its say. */
:where(.smbk-shadow-editor) {
position: relative;
}
.smbk-shadow-editor__preview,
.smbk-shadow-editor__layers {
align-self: stretch;
}
/* The preview: a 64 tall card in the middle of a 128 tall well. Figma's card is 112 wide, written here as the 48 and 64
size steps together, since no one size step is 112. */
.smbk-shadow-editor__preview {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding-block: var(--smbk-space-inset-3xl);
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
border-radius: var(--smbk-radius-container-sm);
background: var(--smbk-color-surface-canvas);
}
.smbk-shadow-editor__card {
width: calc(var(--smbk-size-48) + var(--smbk-size-64));
height: var(--smbk-size-64);
border-radius: var(--smbk-radius-container-sm);
background: var(--smbk-color-surface-default);
box-shadow: var(--smbk-shadow-editor-shadow, none);
}
.smbk-shadow-editor__layers {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-md);
margin: 0;
padding: 0;
list-style: none;
}
/* ---- a layer (Figma's ShadowLayer) ---- */
.smbk-shadow-editor__layer {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-sm);
box-sizing: border-box;
min-width: 0;
padding: var(--smbk-space-inset-md);
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
border-radius: var(--smbk-radius-container-sm);
background: var(--smbk-color-surface-default);
}
.smbk-shadow-editor__layer[data-dragging] {
box-shadow: var(--smbk-elevation-raised);
}
.smbk-shadow-editor__head {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--smbk-size-control-xs);
}
.smbk-shadow-editor__title {
display: flex;
align-items: center;
gap: var(--smbk-space-inline-xs);
min-width: 0;
}
.smbk-shadow-editor__name {
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-label-md-font-family);
font-size: var(--smbk-typography-label-md-font-size);
font-weight: var(--smbk-typography-label-md-font-weight);
line-height: var(--smbk-typography-label-md-line-height);
letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}
/* The move handle: Figma's 16 px DotsSixVertical icon, in a 24 px target that moves the layer. */
.smbk-shadow-editor__handle {
position: relative;
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--smbk-size-icon-sm);
height: var(--smbk-size-icon-sm);
margin: 0;
padding: 0;
border: 0;
border-radius: var(--smbk-radius-control-xs);
background: none;
color: var(--smbk-color-text-subtle);
cursor: grab;
touch-action: none;
outline: none;
}
.smbk-shadow-editor__handle::before {
content: '';
position: absolute;
inset: calc((var(--smbk-size-icon-sm) - var(--smbk-size-control-xs)) / 2);
}
.smbk-shadow-editor__handle .smbk-icon {
font-size: var(--smbk-size-icon-sm);
}
@media (hover: hover) {
.smbk-shadow-editor__handle:hover {
color: var(--smbk-color-text-default);
}
}
.smbk-shadow-editor__layer[data-dragging] .smbk-shadow-editor__handle {
cursor: grabbing;
}
.smbk-shadow-editor__handle:focus-visible {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: var(--smbk-focus-ring-offset);
}
.smbk-shadow-editor__fields,
.smbk-shadow-editor__paint {
display: grid;
gap: var(--smbk-space-inline-sm);
}
.smbk-shadow-editor__fields {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* The color takes the room the opacity box, Figma's 64, leaves. */
.smbk-shadow-editor__paint {
grid-template-columns: minmax(0, 1fr) var(--smbk-size-64);
}
.smbk-shadow-editor__field {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-xs);
min-width: 0;
}
.smbk-shadow-editor__label {
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-xs-font-family);
font-size: var(--smbk-typography-body-xs-font-size);
font-weight: var(--smbk-typography-body-xs-font-weight);
line-height: var(--smbk-typography-body-xs-line-height);
letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}
/* Words for screen readers only: a label's unit, a move's hint and what changed. */
/* .smbk-shadow-editor__hidden: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */
/* ---- touch: the move handle's area reaches the comfortable target ----
On a touch screen the handle's invisible area grows from the smallest target to the comfortable one; the dots, the
focus ring and every place stay as drawn. */
@media (pointer: coarse) {
.smbk-shadow-editor__handle::before {
inset: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
}
}
/* ---- high contrast (forced colors) ---- */
@media (forced-colors: active) {
.smbk-shadow-editor__preview,
.smbk-shadow-editor__layer {
border-color: CanvasText;
}
.smbk-shadow-editor__card {
outline: var(--smbk-border-width-hairline) solid CanvasText;
}
.smbk-shadow-editor__handle:focus-visible {
outline-color: Highlight;
}
}
```
## Tokens it reads
```json
{
"space": {
"stack": {
"md": {
"$type": "dimension",
"$value": "{{space.12}}",
"$description": "Gap between things stacked one above another, medium."
},
"sm": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "Gap between things stacked one above another, small."
},
"xs": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Gap between things stacked one above another, extra small."
}
},
"inset": {
"3xl": {
"$type": "dimension",
"$value": "{{space.32}}",
"$description": "Padding inside a component, 3× large."
},
"md": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "Padding inside a component, medium."
}
},
"inline": {
"xs": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Gap between things side by side, extra small."
},
"sm": {
"$type": "dimension",
"$value": "{{space.6}}",
"$description": "Gap between things side by side, small."
}
}
},
"border-width": {
"hairline": {
"$type": "dimension",
"$value": "{{border-width.1}}",
"$description": "Thin lines: dividers and almost every edge."
}
},
"color": {
"border": {
"subtle": {
"$type": "color",
"$value": "{{color.grey.300}}",
"$description": "Dividers and quiet edges."
},
"focus": {
"$type": "color",
"$value": "{{color.red.600}}",
"$description": "Keyboard focus ring on controls."
}
},
"surface": {
"canvas": {
"$type": "color",
"$value": "{{color.grey.200}}",
"$description": "Page background."
},
"default": {
"$type": "color",
"$value": "{{color.grey.100}}",
"$description": "Standard surface: cards, panels, the header."
}
},
"text": {
"default": {
"$type": "color",
"$value": "{{color.grey.900}}",
"$description": "Main text."
},
"subtle": {
"$type": "color",
"$value": "{{color.grey.700}}",
"$description": "Secondary text: descriptions, metadata."
}
}
},
"radius": {
"container": {
"sm": {
"$type": "dimension",
"$value": "{{radius.8}}",
"$description": "Corners of cards, panels and dialogs, small."
}
},
"control": {
"xs": {
"$type": "dimension",
"$value": "{{radius.2}}",
"$description": "Corners of controls, extra small."
}
}
},
"size": {
"48": {
"$type": "dimension",
"$value": "48px",
"$description": "Raw size step, 48 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here."
},
"64": {
"$type": "dimension",
"$value": "64px",
"$description": "Raw size step, 64 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here."
},
"control": {
"xs": {
"$type": "dimension",
"$value": "{{size.24}}",
"$description": "Height of the extra-small control: 24 in both densities, the smallest target allowed. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable)."
}
},
"icon": {
"sm": {
"$type": "dimension",
"$value": "{{size.16}}",
"$description": "Icon box, small."
}
},
"target": {
"comfortable": {
"$type": "dimension",
"$value": "{{size.44}}",
"$description": "Comfortable touch target (44)."
}
}
},
"elevation": {
"raised": {
"$type": "shadow",
"$value": {
"light": "0px 2px 8px 1px #373d431a, 0px 1px 2px 0px #373d431a",
"dark": "0px 2px 8px 1px #00000026, 0px 1px 2px 0px #00000026"
}
}
},
"typography": {
"label-md": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": 1.4,
"letterSpacing": "0px"
},
"$description": "Label MD: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
},
"body-xs": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "12px",
"fontWeight": 400,
"lineHeight": 1.5,
"letterSpacing": "0px"
}
}
},
"focus": {
"ring": {
"width": {
"$type": "dimension",
"$value": "{{border-width.2}}",
"$description": "Thickness of the focus ring."
},
"offset": {
"$type": "dimension",
"$value": "{{space.2}}",
"$description": "Gap between a control and its focus ring."
}
}
}
}
```
## Purpose
Edits one shadow, such as a design system's shadow level: a preview card drawn with it, its layers from top to bottom, each with its offsets, blur, spread, color and opacity, and a button to add a layer. It is for tools that edit a design system's elevation. To show a shadow without editing it, draw it on a card.
## Anatomy
- The block: a column of the preview, the layers and Add layer, each part of which can be left out but the layers.
- The preview part: a well of the canvas color holding a card (the card part) on the default surface, raised by the shadow being edited.
- The layers part: a list of the layer part, top layer first. Each layer is a card on the default surface inside a subtle edge:
- the head part: the move handle (the handle part, shown when there are two layers or more) and the layer's name, such as "Layer 1" (the name part), then the Remove button (the remove part), which can be left out;
- the fields part: four small number boxes, X, Y, Blur and Spread, each under its label (the field and label parts);
- the paint part: the color picker's field and the opacity box, in percent.
- The add part: a ghost button, "Add layer".
## When to use
- To set the layers of a shadow, and see it as it is set.
## When not to use
- To choose among a system's shadow levels by name. Offer them by name.
- For a shadow of one hard layer, which reads as a line: soft shadows are two or three layers.
## Behavior
Each change is drawn on the preview at once and reported to the page with every layer. `shadowToCss` writes the layers as a CSS `box-shadow`. A layer's color keeps its code; its opacity is the layer's own, so the color's own opacity is replaced. Blur never goes below 0. A layer marked as inset stays inset, though the editor offers no switch for it.
Remove takes a layer out; Add layer adds one at the foot. A layer's handle moves it up and down the list, dragged or with the arrow keys; the first layer is drawn on top.
On a touch screen the move handle keeps its size and takes an invisible press area round it, out to the comfortable touch target.
## Accessibility
### What it does for you
- The layers are a list. Each box is named with its layer and its label, such as "Layer 1 Blur in pixels".
- The move handle is a button named "Move Layer 1"; the up and down arrow keys move its layer, and focus stays on it. Dragging is never the only way.
- Remove is named with its layer, "Remove Layer 2". After it, focus moves to the layer that takes its place, or to Add layer when none is left. Add layer moves focus to the new layer's first box.
- Each change to the list is said politely: "Layer 3 added", "Layer 2 removed", "Layer 1 moved to place 2 of 3".
- The preview is hidden from screen readers; the numbers are the content.
- Every word it says by itself, such as the layers' names, the labels and what it says as layers change, keeps its English unless the page gives its own.
- On a touch screen the move handle keeps its size and takes an invisible press area round it, out to the comfortable touch target.
- In a forced-color mode, the edges of the preview and the layers are drawn in the reader's text color.
### What you must do
- Give the layers' names, the labels and the announcements in the page's own language when the page is not in English.
### How to test
- Tab to a layer's boxes and type a number: the preview changes at once. Tab to a move handle and press Up Arrow or Down Arrow: the layer moves, focus stays on the handle, and the move is announced.
- Press Enter on Remove: the layer goes and focus moves to the layer that took its place, or to Add layer when none is left. Press Enter on Add layer: focus moves to the new layer's first box.
- With a screen reader, the layers are read as a list, each box by its layer and its label, and each change is announced politely.
- With text at 200% and the page 320 pixels wide, the layers' boxes stay whole and reachable.
- In a forced-color mode, the edges of the layers and the preview stay visible.
### Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus through the controls of each layer in turn, then to Add layer. |
| Up Arrow or Down Arrow | On a move handle, moves its layer up or down the list. Focus stays on the handle. |
| Enter or Space | On Remove or Add layer, presses it. |
## Usage rules
### Do
- Keep a shadow to two or three soft layers.
### Don't
- Hide Remove and Add layer where the reader is meant to change how many layers there are.