Design tokens¶
The most useful custom properties for extension authors. Consume these rather than hard-coding values — they carry Craft’s theming (and future dark-mode) for free.
| Token | Value | Use |
|---|---|---|
--ui-control-height |
34px | Standard height for inputs & buttons |
--ui-control-height-small |
30px | Compact controls |
--radius-lg |
5px | Control corners |
--size-line-height |
1.42em |
Base line-height |
--fg-subtle |
--gray-550 |
Instructions, secondary labels |
--fg-input |
hsl(212 25% 50%) | Input border color |
--border-hairline |
gray-800 @ 10% | Row dividers |
--border-hairline-medium |
#cfd8e3 | Pane & card borders |
--focus-outline-medium |
#0284c7 | Focus rings |
--xl |
24px | Pane padding |