Luke UI
On this page

Theming

Token reference

Browse the public vars contract, copy typed paths for custom UI, and inspect resolved values in the active theme.

View as MarkdownEdit on GitHub

Border widths

Use vars.borderWidth.thin for a 1px border and vars.borderWidth.thick for a 2px border.

Sample
Token
Value

  • vars.borderWidth.thin

    —

  • vars.borderWidth.thick

    —

Colour

These tables list the full semantic colour contract, grouped by token family. Read Colour to choose surfaces, roles, and interaction states before you pick a path.

Background

Sample
Token
Value

  • vars.color.background.surface.base

    —

  • vars.color.background.surface.subdued

    —

  • vars.color.background.surface.raised

    —

  • vars.color.background.backdrop

    —

  • vars.color.background.skeleton

    —

Neutral

  • vars.color.background.neutral.subtle

    —

  • vars.color.background.neutral.solid.rest

    —

  • vars.color.background.neutral.solid.hover

    —

  • vars.color.background.neutral.solid.pressed

    —

Accent

  • vars.color.background.accent.subtle

    —

  • vars.color.background.accent.solid.rest

    —

  • vars.color.background.accent.solid.hover

    —

  • vars.color.background.accent.solid.pressed

    —

Info

  • vars.color.background.info.subtle

    —

  • vars.color.background.info.solid.rest

    —

  • vars.color.background.info.solid.hover

    —

  • vars.color.background.info.solid.pressed

    —

Success

  • vars.color.background.success.subtle

    —

  • vars.color.background.success.solid.rest

    —

  • vars.color.background.success.solid.hover

    —

  • vars.color.background.success.solid.pressed

    —

Warning

  • vars.color.background.warning.subtle

    —

  • vars.color.background.warning.solid.rest

    —

  • vars.color.background.warning.solid.hover

    —

  • vars.color.background.warning.solid.pressed

    —

Danger

  • vars.color.background.danger.subtle

    —

  • vars.color.background.danger.solid.rest

    —

  • vars.color.background.danger.solid.hover

    —

  • vars.color.background.danger.solid.pressed

    —

Foreground

Sample
Token
Value

  • vars.color.foreground.primary

    —

  • vars.color.foreground.secondary

    —

  • vars.color.foreground.disabled

    —

Neutral

  • vars.color.foreground.neutral.rest

    —

  • vars.color.foreground.neutral.hover

    —

  • vars.color.foreground.neutral.pressed

    —

  • vars.color.foreground.neutral.onSolid

    —

Accent

  • vars.color.foreground.accent.rest

    —

  • vars.color.foreground.accent.hover

    —

  • vars.color.foreground.accent.pressed

    —

  • vars.color.foreground.accent.onSolid

    —

Info

  • vars.color.foreground.info.rest

    —

  • vars.color.foreground.info.hover

    —

  • vars.color.foreground.info.pressed

    —

  • vars.color.foreground.info.onSolid

    —

Success

  • vars.color.foreground.success.rest

    —

  • vars.color.foreground.success.hover

    —

  • vars.color.foreground.success.pressed

    —

  • vars.color.foreground.success.onSolid

    —

Warning

  • vars.color.foreground.warning.rest

    —

  • vars.color.foreground.warning.hover

    —

  • vars.color.foreground.warning.pressed

    —

  • vars.color.foreground.warning.onSolid

    —

Danger

  • vars.color.foreground.danger.rest

    —

  • vars.color.foreground.danger.hover

    —

  • vars.color.foreground.danger.pressed

    —

  • vars.color.foreground.danger.onSolid

    —

Border

Sample
Token
Value

  • vars.color.border.decorative

    —

  • vars.color.border.control.rest

    —

  • vars.color.border.control.hover

    —

  • vars.color.border.control.pressed

    —

  • vars.color.border.neutral.strong

    —

  • vars.color.border.accent.strong

    —

  • vars.color.border.info.strong

    —

  • vars.color.border.success.strong

    —

  • vars.color.border.warning.strong

    —

  • vars.color.border.danger.strong

    —

Focus

color.focus is not a border. It paints the focus outline and ring shadows.

Sample
Token
Value

  • vars.color.focus

    —

Typography

Each type style is five tokens: family, size, weight, line height, and letter spacing. Render text with Text or Heading, which also apply the style's trim. Use these tokens only when you need an element those components cannot render. Read Typography to choose a style.

Token
Value
Type styles, smallest first. Use each row's copy control to copy its token.
TokenValue
Caption

vars.font.caption.fontSize

—

vars.font.caption.lineHeight

—

vars.font.caption.fontWeight

—

vars.font.caption.letterSpacing

—

vars.font.caption.fontFamily

—
Label

vars.font.label.fontSize

—

vars.font.label.lineHeight

—

vars.font.label.fontWeight

—

vars.font.label.letterSpacing

—

vars.font.label.fontFamily

—
Body

vars.font.body.fontSize

—

vars.font.body.lineHeight

—

vars.font.body.fontWeight

—

vars.font.body.letterSpacing

—

vars.font.body.fontFamily

—
Lead

vars.font.lead.fontSize

—

vars.font.lead.lineHeight

—

vars.font.lead.fontWeight

—

vars.font.lead.letterSpacing

—

vars.font.lead.fontFamily

—
Heading 4

vars.font.heading4.fontSize

—

vars.font.heading4.lineHeight

—

vars.font.heading4.fontWeight

—

vars.font.heading4.letterSpacing

—

vars.font.heading4.fontFamily

—
Heading 3

vars.font.heading3.fontSize

—

vars.font.heading3.lineHeight

—

vars.font.heading3.fontWeight

—

vars.font.heading3.letterSpacing

—

vars.font.heading3.fontFamily

—
Heading 2

vars.font.heading2.fontSize

—

vars.font.heading2.lineHeight

—

vars.font.heading2.fontWeight

—

vars.font.heading2.letterSpacing

—

vars.font.heading2.fontFamily

—
Heading 1

vars.font.heading1.fontSize

—

vars.font.heading1.lineHeight

—

vars.font.heading1.fontWeight

—

vars.font.heading1.letterSpacing

—

vars.font.heading1.fontFamily

—
Display

vars.font.display.fontSize

—

vars.font.display.lineHeight

—

vars.font.display.fontWeight

—

vars.font.display.letterSpacing

—

vars.font.display.fontFamily

—

Font family and weight tokens stay public for code surfaces and deliberate weight overrides.

Sample
Token
Value

Families

  • vars.font.family.body

    —

  • vars.font.family.display

    —

  • vars.font.family.code

    —

Weights

  • vars.font.weight.body

    —

  • vars.font.weight.label

    —

  • vars.font.weight.heading

    —

  • vars.font.weight.emphasis

    —

Space

Use the space scale for gap, padding, and margin. The number in each key is its pixel value at a 16px root. The token is emitted in rem. Read Layout for breakpoint keys and how spacing values cascade.

Sample
Token
Value

  • vars.space.4

    —

  • vars.space.8

    —

  • vars.space.12

    —

  • vars.space.16

    —

  • vars.space.24

    —

  • vars.space.32

    —

  • vars.space.40

    —

  • vars.space.48

    —

  • vars.space.64

    —

  • vars.space.96

    —

Radius

Radius has five roles. Choose the role that matches the element you round, such as control for an input or surface for a card.

Sample
Token
Value

  • vars.radius.detail

    A checkbox or a small part

    —

  • vars.radius.control

    A button, input, or select

    —

  • vars.radius.surface

    A card or a panel

    —

  • vars.radius.overlay

    A dialog or a tray

    —

  • vars.radius.full

    A pill or a switch track

    —

Shadow and finish

Shadow places a surface above or within the interface. Elevated inline content, menus, and dialogs use surface.raised. A menu adds shadow.floating, and a dialog adds shadow.overlay. A control finish is the face of a solid control fill, such as a solid button.

Luke UI components already apply shadow and finish for their own states. Use these tokens only for custom surfaces you own.

Sample
Token
Value

Shadow

  • vars.shadow.inset

    —

  • vars.shadow.resting

    —

  • vars.shadow.raised

    —

  • vars.shadow.floating

    —

  • vars.shadow.overlay

    —

Control finish

  • vars.controlFinish.recessed

    —

  • vars.controlFinish.resting

    —

  • vars.controlFinish.raised

    —

Sizing

Use a control size for the block size of a custom control so it lines up with Luke UI controls of the same size.

Sample
Token
Value

  • vars.controlSize.32

    —

  • vars.controlSize.40

    —

Interaction

Fade a custom control that is disabled or pending with interaction.disabledOpacity, as Luke UI controls do.

Sample
Token
Value

  • vars.interaction.disabledOpacity

    —

  • vars.interaction.tint.hover

    —

  • vars.interaction.tint.pressed

    —

Motion

Choose a treatment: each pairs a duration with its easing. Each treatment table includes an Animate switch in the group header. Duration samples alternate along the track, and each crossing takes that token’s duration within a one-second half-cycle. Easing samples rest at both ends, then cross with that timing function on the travel segments of their own one-second loop. Turn Animate off to hold the dots still, or on again to restart that table’s samples.

  • feedback covers an in-place state change, such as hover, focus, or selection.
  • enter covers an element or an overlay that enters the interface.
  • exit covers an element or an overlay that leaves the interface.

Use vars.motion.<treatment>.duration and vars.motion.<treatment>.easing together. Do not mix leaves from different treatments.

Sample
Token
Value

Feedback

  • vars.motion.feedback.duration

    —

  • vars.motion.feedback.easing

    —

Sample
Token
Value

Enter

  • vars.motion.enter.duration

    —

  • vars.motion.enter.easing

    —

Sample
Token
Value

Exit

  • vars.motion.exit.duration

    —

  • vars.motion.exit.easing

    —

Continue learning

Styling

Choose component props, recipes, layout utilities, or vars for custom UI.

Layout

Apply spacing and breakpoints with Box.

Colour

Choose semantic surfaces and roles for custom UI.