Tokens
Shape and depth tokens
The 31 shape and depth tokens with their values in the current look.
| Token | Value in this look | Varies by | In code | Description |
|---|---|---|---|---|
--mk-radius-none | 0 | voice |
| The none radius. |
--mk-radius-mark | 3px | voice |
| The mark radius. |
--mk-radius-chip | 8px | voice |
| The chip radius. |
--mk-radius-control | 10px | voice |
| The control radius. |
--mk-radius-plate | 18px | voice |
| The plate radius. |
--mk-radius-pill | 999px | voice |
| The pill radius. |
--mk-corner | 1 | voice |
| The current voice's corner scale. |
--mk-border | calc(2px + var(--mk-w-hc) * 1px) | contrast |
| The default rule, 2 px (3 px under more contrast). |
--mk-border-thin | 1.5px | contrast |
| A thin rule, for small marks and stickers. |
--mk-border-thick | 3px | contrast |
| A thick rule, for comic frames. |
--mk-border-heavy | 4px | contrast |
| A heavy rule, for stamps and Press frames. |
--mk-shadow-key | var(--mk-key-offset, 4px) var(--mk-key-offset, 4px) 0 var(--mk-key-edge, var(--mk-ink)) | themevolume |
| A key's hard offset. |
--mk-shadow-key-pressed | none | themevolume |
| A pressed key: no offset. |
--mk-shadow-plate | var(--mk-v-plate-offset) var(--mk-v-plate-offset) 0 var(--mk-ink) | themevolume |
| A printed plate's hard offset, 0 to 8 px by volume. |
--mk-shadow-menu | 0 18px 40px -16px color-mix(in srgb, var(--mk-shadow-soft) calc(var(--mk-w-bone) * 50% + var(--mk-w-night) * 80%), transparent) | themevolume |
| The soft shadow of menus and popovers. |
--mk-shadow-toast | 0 18px 40px -16px color-mix(in srgb, var(--mk-shadow-soft) calc(var(--mk-w-bone) * 60% + var(--mk-w-night) * 85%), transparent) | themevolume |
| The soft shadow of toasts. |
--mk-shadow-pop | 0 40px 90px -30px color-mix(in srgb, var(--mk-shadow-soft) calc(var(--mk-w-bone) * 70% + var(--mk-w-night) * 90%), transparent) | themevolume |
| The soft shadow of dialogs. |
--mk-shadow-soft | color-mix(in oklab, var(--mk-ink) calc(var(--mk-w-bone) * 100%), #000000) | themevolume |
| The soft shadow's colour. |
--mk-z-base | 0 | nothing |
| Stacking order: the base layer. |
--mk-z-art | 0 | nothing |
| Stacking order: the art layer. |
--mk-z-plate | 1 | nothing |
| Stacking order: the plate layer. |
--mk-z-raised | 2 | nothing |
| Stacking order: the raised layer. |
--mk-z-header | 40 | nothing |
| Stacking order: the header layer. |
--mk-z-dock | 45 | nothing |
| Stacking order: the dock layer. |
--mk-z-overlay | 60 | nothing |
| Stacking order: the overlay layer. |
--mk-z-popover | 65 | nothing |
| Stacking order: the popover layer. |
--mk-z-toast | 70 | nothing |
| Stacking order: the toast layer. |
--mk-z-tooltip | 80 | nothing |
| Stacking order: the tooltip layer. |
--mk-z-cursor | 90 | nothing |
| Stacking order: the cursor layer. |
--mk-z-boot | 100 | nothing |
| Stacking order: the boot layer. |
--mk-z-skip | 110 | nothing |
| Stacking order: the skip layer. |