One corner drawn at one radius, for a list of corner steps or roles beside their names and sizes.
Options
The corner sample has no choices: it is drawn one way.
Examples
Usage
A corner at each step of a scale, from none to the capsule, which draws as the square’s own size.
A list of corner steps
Beside each step’s name and size, which say what it shows: the sample is a picture.
- md6 px
- lg8 px
- xl12 px
- 2xl16 px
- 3xl20 px
The system’s radius tokens
A radius token given as a CSS value: the control and container corners, then full.
Guidelines
Purpose
Draws one corner at one radius, a small picture for lists of corner steps or corner roles in a tool that edits a design system's corners. To show what a radius does to a whole card or button, draw the card or button.
When to use
- Beside each step of a corner scale or each corner role, with its name and size.
When not to use
- To show a component's own corners. Show the component.
Usage rules
Do
- Put the step's name and size beside the sample.
Don't
- Show samples alone, which leaves a screen reader with nothing.
- lg8 px
Put the step’s name and size beside the sample.
Show samples alone, which leaves a screen reader with nothing.
Anatomy
- The block: a 24 px square on the subtle neutral surface whose top and left edges are drawn in the control border color, so it reads in both themes, with its top left corner rounded at the radius given.
- A radius as large as the square or larger, such as a capsule's, draws as the square's own size.
Behavior
The radius is given as a number of pixels, a CSS length, or a CSS value such as a radius token's custom property. With none, the corner is square.
Accessibility
What it does for you
- The sample is a picture hidden from screen readers.
- In forced colors mode its edges take the reader's text color.
What you must do
- Put the step's name and size beside the sample in words, which say what it shows. A screen reader reads those and nothing of the sample.
How to test
- With a screen reader, the sample is skipped and the words beside it are read.
- In a forced-color mode, the sample's edges are visible.
Source
The files the corner sample is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-corner-sample — Corner sample. Figma "Corner sample" 7429:1037 (Radius: None, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, Full).
* One corner drawn at one radius: a 24 px square in the subtle neutral surface whose top and left edges are drawn two
* pixels wide in the control border color, so it reads in both themes, with its top left corner rounded. The radius is
* data: the wrapper writes it to a custom property on the block. A radius larger than the square, the capsule, draws
* as the square's own size, as Figma draws Full. It is a picture: the words beside it name the step. */
.smbk-corner-sample {
display: inline-block;
flex-shrink: 0;
box-sizing: border-box;
width: var(--smbk-size-24);
height: var(--smbk-size-24);
border-top: var(--smbk-border-width-2) solid var(--smbk-color-border-control);
border-left: var(--smbk-border-width-2) solid var(--smbk-color-border-control);
border-top-left-radius: min(var(--smbk-corner-sample-radius, var(--smbk-space-0)), var(--smbk-size-24));
background: var(--smbk-color-surface-neutral-subtle);
vertical-align: middle;
}
/* ---- high contrast (forced colors) ---- */
/* The fill is dropped; the two edges take the reader's text color, so the corner still shows. */
@media (forced-colors: active) {
.smbk-corner-sample {
border-color: CanvasText;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| size.24--smbk-size-24 | 24px | Size | |
| border-width.2--smbk-border-width-2 | 2px | Border width | |
| color.border.control--smbk-color-border-control | #7c8692 | Color | |
| space.0--smbk-space-0 | 0px | Spacing | |
| color.surface.neutral-subtle--smbk-color-surface-neutral-subtle | light: #373d431adark: #606a7533changes with theme | Color |
Manifest
{
"name": "corner-sample",
"block": "smbk-corner-sample",
"summary": "One corner drawn at one radius, for a list of corner steps or roles beside their names and sizes.",
"adapt": "css",
"axes": {},
"flags": {},
"parts": [],
"figmaNodeId": "7429:1037"
}