# Corner sample

One corner drawn at one radius, for a list of corner steps or roles beside their names and sizes.

Block: `smbk-corner-sample`. 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 |
|---|---|---|---|



## Markup

```html
<span aria-hidden="true" style="--smbk-corner-sample-radius:8px" class="smbk-corner-sample"></span>
```

## React

```tsx
import { CornerSample } from './design-system/components/corner-sample/corner-sample.js';

<CornerSample radius={8} />
```

## Stylesheet

```css
/* 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

```json
{
  "size": {
    "24": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "Raw size step, 24 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here."
    }
  },
  "border-width": {
    "2": {
      "$type": "dimension",
      "$value": "2px",
      "$description": "Raw line thickness, 2 px. border-width/hairline, emphasis and accent point here."
    }
  },
  "color": {
    "border": {
      "control": {
        "$type": "color",
        "$value": "{{color.grey.500}}",
        "$description": "The edge that marks a control: a checkbox, a radio (must reach 3:1)."
      }
    },
    "surface": {
      "neutral-subtle": {
        "$type": "color",
        "$value": "{{color.alpha.grey-800.10}}",
        "$description": "A quiet neutral fill for small marks and their resting state (default badge, tag, chip): translucent, so it shows by the same step on the default, raised and sunken surfaces. Hover steps up to color/surface/hover."
      }
    }
  },
  "space": {
    "0": {
      "$type": "dimension",
      "$value": "0px",
      "$description": "Raw space step, 0 px. Only for fixed distances inside a component; spacing that follows density uses space/inset, stack or inline."
    }
  }
}
```

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

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

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

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

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