1.23.1 Procedures

Procedure: density-value density ¶

Return the scale of a density mode as a string, defaulting to comfortable for a mode the table does not name.

density

'comfortable or 'compact.

Procedure: design-tokens-css KEY: #:class ¶

Return the SXML <style> block that publishes every design token.

The block has three parts: the light theme on :root, the dark theme on [data-theme="dark"], and a reduced-motion block that sets every duration to zero. A page that loads it can override any single decision from its own stylesheet – or from markup, with an inline custom property – and the components that read var(--hg-space-4, 1rem) follow.

The class on the style element is only there to make the block easy to find in a document; the tokens themselves are declared on the root element, not scoped to it.

class

A class name for the <style> element itself.

(design-tokens-css)

Procedure: token-declarations pairs KEY: #:theme ¶

Turn a list of (group name) pairs into CSS declaration pairs.

The result can be handed to mk-style, which is how a component passes a token to the browser as an inline custom property:

(mk-style (token-declarations '((space 6) (radius 2xl))))
;; => "--hg-space-6: 1.5rem; --hg-radius-2xl: 1.12rem"

pairs

A list of two-element lists, (group name).

theme

The theme read by a colour token. Defaults to 'light.

Procedure: token-name group name KEY: #:theme ¶

Return the CSS custom property a token is exposed as, or #f for an unknown group.

A colour’s name carries its theme as a suffix (--hg-color-ink-dark), because both values have to exist in the same stylesheet.

(token-name 'space 4)
;; => "--hg-space-4"

Procedure: token-value group name KEY: #:theme ¶

Return the value of the token called name in group, as a string.

Groups are 'space, 'radius, 'elevation, 'motion, 'z, 'color and 'density. A colour has a value per theme, so theme picks one; every other group ignores it.

Unknown groups and names signal an error rather than returning a silent #f, because a token that is misspelt in a component is a bug that should surface on the first render, not a value that quietly disappears.

group

One of the symbol names above.

name

The token’s key, e.g. 4 for spacing or 'lg for a radius.

theme

'light (the default) or 'dark, read by colour tokens only.

(token-value 'space 4)
;; => "1rem"

(token-value 'color 'ink #:theme 'dark)
;; => "#ededee"

1.23.2 Variables

Variable: color-tokens ¶

((ink "#1c1917" . "#ededee") (muted-ink "#57534e" . "#d6d3d1") (surface "#f5f5f4" . "#262626") (raised "#e7e5e4" . "#3f3f3f") (sunken "#d6d3d1" . "#1c1917") (line "rgba(120, 113, 108, 0.5)" . "rgba(214, 211, 209, 0.5)") (accent "#57534e" . "#d6d3d1") (accent-ink "#f5f5f4" . "#1c1917") (danger "#a1301b" . "#ffb4a2") (success "#3f6212" . "#d9f99d") (warning "#713f12" . "#fef08a") (info "#1e3a8a" . "#dbeafe"))

Variable: density-tokens ¶

((comfortable . "1") (compact . "0.8"))

Variable: elevation-tokens ¶

((none . "none") (sm . "0 1px 2px rgba(12, 10, 9, 0.12)") (md . "0 4px 12px rgba(12, 10, 9, 0.16)") (lg . "0 12px 32px rgba(12, 10, 9, 0.24)") (xl . "0 20px 48px rgba(12, 10, 9, 0.32)"))

Variable: motion-tokens ¶

((instant . "0ms") (fast . "120ms") (base . "200ms") (slow . "320ms") (slower . "480ms") (ease . "cubic-bezier(0.2, 0, 0, 1)"))

Variable: radius-tokens ¶

((none . "0") (#@{2xs@}# . "0.16rem") (xs . "0.32rem") (sm . "0.48rem") (md . "0.64rem") (lg . "0.8rem") (xl . "0.96rem") (#@{2xl@}# . "1.12rem") (#@{3xl@}# . "1.28rem") (full . "9999px"))

Variable: spacing-tokens ¶

((0 . "0") (px . "1px") (1 . "0.25rem") (2 . "0.5rem") (3 . "0.75rem") (4 . "1rem") (5 . "1.25rem") (6 . "1.5rem") (8 . "2rem") (10 . "2.5rem") (12 . "3rem") (16 . "4rem") (20 . "5rem") (24 . "6rem"))

Variable: z-tokens ¶

((base . "0") (raised . "8") (sticky . "20") (dropdown . "32") (overlay . "48") (modal . "64") (popover . "72") (toast . "80") (tooltip . "96"))