Theming

Three DTCG tiers, contrast-checked at build — every pair on both themes, and a build that fails on a pair below threshold. Dark mode is a data attribute, not a fork.

The two moves

Both are plain CSS, visible in devtools, no build step of yours involved.

1 · Pin a theme

<!-- On the page root, or on any subtree below it: -->
<html data-theme="dark">
  ...
</html>

2 · Override a token

<!-- Scoped exactly where you write it: -->
<aside style="--pct-surface: #0f172a; --pct-text: #f1f5f9">
  A dark island inside a light page.
</aside>

Primitives — the raw material

Colour ramps, the spacing scale, radii, motion durations. No meaning yet, only values.

token	type
`--pct-control-height-lg`	dimension
`--pct-control-height-md`	dimension
`--pct-control-height-sm`	dimension
`--pct-font-size-lg`	dimension
`--pct-font-size-md`	dimension
`--pct-font-size-sm`	dimension
`--pct-font-weight-medium`	fontWeight
`--pct-motion-drift-duration`	duration
`--pct-motion-loop-duration`	duration
`--pct-motion-transition-duration`	duration
`--pct-motion-transition-easing`	cubicBezier
`--pct-radius-md`	dimension
`--pct-space-2`	dimension
`--pct-space-3`	dimension
`--pct-space-4`	dimension
`--pct-space-5`	dimension
`--pct-space-6`	dimension
`--pct-target-min`	dimension

Semantic — the meaning

Surface, text, primary, danger — the names stylesheets actually read, each with a measured contrast partner. Dark mode redefines THESE, and only these.

token	type
`--pct-border`	color
`--pct-border-strong`	color
`--pct-danger`	color
`--pct-danger-100`	color
`--pct-danger-200`	color
`--pct-danger-active`	color
`--pct-danger-hover`	color
`--pct-focus-ring`	color
`--pct-hero`	color
`--pct-hero-text`	color
`--pct-hero-text-to`	color
`--pct-hero-text-via`	color
`--pct-hero-to`	color
`--pct-hero-via`	color
`--pct-info`	color
`--pct-info-100`	color
`--pct-info-200`	color
`--pct-info-active`	color
`--pct-info-hover`	color
`--pct-on-danger`	color
`--pct-on-danger-100`	color
`--pct-on-hero`	color
`--pct-on-info`	color
`--pct-on-info-100`	color
`--pct-on-primary`	color
`--pct-on-primary-100`	color
`--pct-on-success`	color
`--pct-on-success-100`	color
`--pct-on-surface-inverse`	color
`--pct-on-warning`	color
`--pct-on-warning-100`	color
`--pct-primary`	color
`--pct-primary-100`	color
`--pct-primary-200`	color
`--pct-primary-active`	color
`--pct-primary-hover`	color
`--pct-scrim`	color
`--pct-series-1`	color
`--pct-series-2`	color
`--pct-series-3`	color
`--pct-series-4`	color
`--pct-series-5`	color
`--pct-series-6`	color
`--pct-series-7`	color
`--pct-series-8`	color
`--pct-shadow-panel`	shadow
`--pct-success`	color
`--pct-success-100`	color
`--pct-success-200`	color
`--pct-success-active`	color
`--pct-success-hover`	color
`--pct-surface`	color
`--pct-surface-100`	color
`--pct-surface-disabled`	color
`--pct-surface-inverse`	color
`--pct-text`	color
`--pct-text-disabled`	color
`--pct-text-muted`	color
`--pct-warning`	color
`--pct-warning-100`	color
`--pct-warning-200`	color
`--pct-warning-active`	color
`--pct-warning-hover`	color

Component — the per-part dials

One component, one prefix: override a single control without touching the system. 654 dials across 33 components — every one of them also on its own component's page, beside what it paints. 57 further tokens are private plumbing: present in the snapshot, absent from this contract on purpose.

date60

token	type
`--pct-date-bg`	color
`--pct-date-bg-disabled`	color
`--pct-date-border`	color
`--pct-date-border-disabled`	color
`--pct-date-border-focus`	color
`--pct-date-border-hover`	color
`--pct-date-border-invalid`	color
`--pct-date-border-warning`	color
`--pct-date-caption-font-size`	dimension
`--pct-date-caption-font-weight`	fontWeight
`--pct-date-day-bg-hover`	color
`--pct-date-day-bg-selected`	color
`--pct-date-day-border-today`	color
`--pct-date-day-fg-disabled`	color
`--pct-date-day-fg-muted`	color
`--pct-date-day-fg-selected`	color
`--pct-date-day-font-size`	dimension
`--pct-date-day-font-size-lg`	dimension
`--pct-date-day-font-size-sm`	dimension
`--pct-date-day-font-weight-selected`	fontWeight
`--pct-date-day-radius`	dimension
`--pct-date-day-size`	dimension
`--pct-date-day-size-lg`	dimension
`--pct-date-day-size-sm`	dimension
`--pct-date-fg`	color
`--pct-date-fg-disabled`	color
`--pct-date-fg-invalid`	color
`--pct-date-fg-warning`	color
`--pct-date-font-size`	dimension
`--pct-date-font-size-lg`	dimension
`--pct-date-font-size-sm`	dimension
`--pct-date-gap`	dimension
`--pct-date-hint-fg`	color
`--pct-date-icon-size`	dimension
`--pct-date-label-fg`	color
`--pct-date-nav-bg-hover`	color
`--pct-date-nav-radius`	dimension
`--pct-date-nav-size`	dimension
`--pct-date-padding-x`	dimension
`--pct-date-padding-x-lg`	dimension
`--pct-date-padding-x-sm`	dimension
`--pct-date-padding-y`	dimension
`--pct-date-padding-y-lg`	dimension
`--pct-date-padding-y-sm`	dimension
`--pct-date-panel-bg`	color
`--pct-date-panel-border`	color
`--pct-date-panel-padding-x`	dimension
`--pct-date-panel-padding-y`	dimension
`--pct-date-panel-radius`	dimension
`--pct-date-panel-shadow`	shadow
`--pct-date-placeholder-fg`	color
`--pct-date-radius`	dimension
`--pct-date-target-min`	dimension
`--pct-date-toggle-bg-hover`	color
`--pct-date-toggle-fg`	color
`--pct-date-toggle-radius`	dimension
`--pct-date-toggle-size`	dimension
`--pct-date-weekday-fg`	color
`--pct-date-weekday-font-size`	dimension
`--pct-date-weekday-font-weight`	fontWeight

What date paints with them ↗

time53

token	type
`--pct-time-bg`	color
`--pct-time-bg-disabled`	color
`--pct-time-border`	color
`--pct-time-border-disabled`	color
`--pct-time-border-focus`	color
`--pct-time-border-hover`	color
`--pct-time-border-invalid`	color
`--pct-time-border-warning`	color
`--pct-time-column-height`	dimension
`--pct-time-column-min-width`	dimension
`--pct-time-fg`	color
`--pct-time-fg-disabled`	color
`--pct-time-fg-invalid`	color
`--pct-time-fg-warning`	color
`--pct-time-font-size`	dimension
`--pct-time-font-size-lg`	dimension
`--pct-time-font-size-sm`	dimension
`--pct-time-hint-fg`	color
`--pct-time-icon-size`	dimension
`--pct-time-label-fg`	color
`--pct-time-option-bg-hover`	color
`--pct-time-option-bg-selected`	color
`--pct-time-option-fg-disabled`	color
`--pct-time-option-fg-selected`	color
`--pct-time-option-font-size`	dimension
`--pct-time-option-font-size-lg`	dimension
`--pct-time-option-font-size-sm`	dimension
`--pct-time-option-font-weight-selected`	fontWeight
`--pct-time-option-height`	dimension
`--pct-time-option-height-lg`	dimension
`--pct-time-option-height-sm`	dimension
`--pct-time-option-padding-x`	dimension
`--pct-time-option-radius`	dimension
`--pct-time-padding-x`	dimension
`--pct-time-padding-x-lg`	dimension
`--pct-time-padding-x-sm`	dimension
`--pct-time-padding-y`	dimension
`--pct-time-padding-y-lg`	dimension
`--pct-time-padding-y-sm`	dimension
`--pct-time-panel-bg`	color
`--pct-time-panel-border`	color
`--pct-time-panel-gap`	dimension
`--pct-time-panel-padding-x`	dimension
`--pct-time-panel-padding-y`	dimension
`--pct-time-panel-radius`	dimension
`--pct-time-panel-shadow`	shadow
`--pct-time-placeholder-fg`	color
`--pct-time-radius`	dimension
`--pct-time-target-min`	dimension
`--pct-time-toggle-bg-hover`	color
`--pct-time-toggle-fg`	color
`--pct-time-toggle-radius`	dimension
`--pct-time-toggle-size`	dimension

What time paints with them ↗

select39

token	type
`--pct-select-arrow-fg`	color
`--pct-select-bg`	color
`--pct-select-bg-disabled`	color
`--pct-select-border`	color
`--pct-select-border-disabled`	color
`--pct-select-border-focus`	color
`--pct-select-border-hover`	color
`--pct-select-border-invalid`	color
`--pct-select-border-warning`	color
`--pct-select-fg`	color
`--pct-select-fg-disabled`	color
`--pct-select-fg-invalid`	color
`--pct-select-fg-warning`	color
`--pct-select-font-size`	dimension
`--pct-select-group-label-fg`	color
`--pct-select-group-label-font-size`	dimension
`--pct-select-group-label-font-weight`	fontWeight
`--pct-select-group-label-padding-x`	dimension
`--pct-select-group-label-padding-y`	dimension
`--pct-select-hint-fg`	color
`--pct-select-label-fg`	color
`--pct-select-option-bg`	color
`--pct-select-option-bg-active`	color
`--pct-select-option-bg-selected`	color
`--pct-select-option-fg`	color
`--pct-select-option-fg-active`	color
`--pct-select-option-fg-disabled`	color
`--pct-select-option-fg-selected`	color
`--pct-select-option-padding-x`	dimension
`--pct-select-option-padding-y`	dimension
`--pct-select-padding-x`	dimension
`--pct-select-padding-y`	dimension
`--pct-select-panel-bg`	color
`--pct-select-panel-border`	color
`--pct-select-panel-max-height`	dimension
`--pct-select-panel-radius`	dimension
`--pct-select-panel-shadow`	shadow
`--pct-select-placeholder-fg`	color
`--pct-select-radius`	dimension

What select paints with them ↗

datetime38

token	type
`--pct-datetime-bg`	color
`--pct-datetime-bg-disabled`	color
`--pct-datetime-border`	color
`--pct-datetime-border-disabled`	color
`--pct-datetime-border-focus`	color
`--pct-datetime-border-hover`	color
`--pct-datetime-border-invalid`	color
`--pct-datetime-border-warning`	color
`--pct-datetime-fg`	color
`--pct-datetime-fg-disabled`	color
`--pct-datetime-fg-invalid`	color
`--pct-datetime-fg-warning`	color
`--pct-datetime-font-size`	dimension
`--pct-datetime-font-size-lg`	dimension
`--pct-datetime-font-size-sm`	dimension
`--pct-datetime-hint-fg`	color
`--pct-datetime-icon-size`	dimension
`--pct-datetime-label-fg`	color
`--pct-datetime-padding-x`	dimension
`--pct-datetime-padding-x-lg`	dimension
`--pct-datetime-padding-x-sm`	dimension
`--pct-datetime-padding-y`	dimension
`--pct-datetime-padding-y-lg`	dimension
`--pct-datetime-padding-y-sm`	dimension
`--pct-datetime-panel-bg`	color
`--pct-datetime-panel-border`	color
`--pct-datetime-panel-gap`	dimension
`--pct-datetime-panel-padding-x`	dimension
`--pct-datetime-panel-padding-y`	dimension
`--pct-datetime-panel-radius`	dimension
`--pct-datetime-panel-shadow`	shadow
`--pct-datetime-placeholder-fg`	color
`--pct-datetime-radius`	dimension
`--pct-datetime-target-min`	dimension
`--pct-datetime-toggle-bg-hover`	color
`--pct-datetime-toggle-fg`	color
`--pct-datetime-toggle-radius`	dimension
`--pct-datetime-toggle-size`	dimension

What datetime paints with them ↗

toast31

token	type
`--pct-toast-action-fg`	color
`--pct-toast-action-font-weight`	fontWeight
`--pct-toast-action-radius`	dimension
`--pct-toast-close-bg-hover`	color
`--pct-toast-close-fg`	color
`--pct-toast-close-fg-hover`	color
`--pct-toast-close-radius`	dimension
`--pct-toast-close-size`	dimension
`--pct-toast-gap`	dimension
`--pct-toast-icon-fg`	color
`--pct-toast-icon-fg-danger`	color
`--pct-toast-icon-fg-info`	color
`--pct-toast-icon-fg-success`	color
`--pct-toast-icon-fg-warning`	color
`--pct-toast-icon-size`	dimension
`--pct-toast-inset`	dimension
`--pct-toast-item-bg`	color
`--pct-toast-item-border`	color
`--pct-toast-item-border-danger`	color
`--pct-toast-item-border-info`	color
`--pct-toast-item-border-success`	color
`--pct-toast-item-border-warning`	color
`--pct-toast-item-fg`	color
`--pct-toast-item-gap`	dimension
`--pct-toast-item-max-width`	dimension
`--pct-toast-item-padding-x`	dimension
`--pct-toast-item-padding-y`	dimension
`--pct-toast-item-radius`	dimension
`--pct-toast-item-shadow`	shadow
`--pct-toast-message-font-size`	dimension
`--pct-toast-z-index`	number

What toast paints with them ↗

table30

token	type
`--pct-table-bg-changed`	color
`--pct-table-bg-danger`	color
`--pct-table-bg-hover`	color
`--pct-table-bg-info`	color
`--pct-table-bg-striped`	color
`--pct-table-bg-success`	color
`--pct-table-bg-warning`	color
`--pct-table-border`	color
`--pct-table-caption-fg`	color
`--pct-table-caption-font-weight`	fontWeight
`--pct-table-caption-gap`	dimension
`--pct-table-column-max-width`	dimension
`--pct-table-fg`	color
`--pct-table-fg-danger`	color
`--pct-table-fg-info`	color
`--pct-table-fg-muted`	color
`--pct-table-fg-success`	color
`--pct-table-fg-warning`	color
`--pct-table-font-size`	dimension
`--pct-table-heading-bg`	color
`--pct-table-heading-border`	color
`--pct-table-heading-fg`	color
`--pct-table-heading-font-weight`	fontWeight
`--pct-table-icon-fg-muted`	color
`--pct-table-mark-bg`	color
`--pct-table-mark-fg`	color
`--pct-table-padding-x`	dimension
`--pct-table-padding-y`	dimension
`--pct-table-toggle-gap`	dimension
`--pct-table-toggle-target-min`	dimension

What table paints with them ↗

field28

token	type
`--pct-field-affix-fg`	color
`--pct-field-bg`	color
`--pct-field-bg-disabled`	color
`--pct-field-border`	color
`--pct-field-border-disabled`	color
`--pct-field-border-focus`	color
`--pct-field-border-hover`	color
`--pct-field-border-invalid`	color
`--pct-field-border-warning`	color
`--pct-field-fg`	color
`--pct-field-fg-disabled`	color
`--pct-field-fg-invalid`	color
`--pct-field-fg-warning`	color
`--pct-field-font-size`	dimension
`--pct-field-font-size-lg`	dimension
`--pct-field-font-size-sm`	dimension
`--pct-field-gap`	dimension
`--pct-field-height`	dimension
`--pct-field-height-lg`	dimension
`--pct-field-height-sm`	dimension
`--pct-field-hint-fg`	color
`--pct-field-label-fg`	color
`--pct-field-label-gap`	dimension
`--pct-field-padding-x`	dimension
`--pct-field-padding-x-lg`	dimension
`--pct-field-padding-x-sm`	dimension
`--pct-field-placeholder-fg`	color
`--pct-field-radius`	dimension

What field paints with them ↗

slider28

token	type
`--pct-slider-bubble-bg`	color
`--pct-slider-bubble-fg`	color
`--pct-slider-bubble-font-size`	dimension
`--pct-slider-bubble-padding-x`	dimension
`--pct-slider-bubble-radius`	dimension
`--pct-slider-fg-disabled`	color
`--pct-slider-fg-invalid`	color
`--pct-slider-fg-warning`	color
`--pct-slider-fill-bg`	color
`--pct-slider-fill-bg-disabled`	color
`--pct-slider-gap`	dimension
`--pct-slider-height`	dimension
`--pct-slider-hint-fg`	color
`--pct-slider-label-fg`	color
`--pct-slider-mark-bg`	color
`--pct-slider-mark-size`	dimension
`--pct-slider-target-min`	dimension
`--pct-slider-thumb-bg`	color
`--pct-slider-thumb-bg-disabled`	color
`--pct-slider-thumb-border`	color
`--pct-slider-thumb-border-disabled`	color
`--pct-slider-thumb-border-hover`	color
`--pct-slider-thumb-border-invalid`	color
`--pct-slider-thumb-size`	dimension
`--pct-slider-track-bg`	color
`--pct-slider-track-bg-disabled`	color
`--pct-slider-track-height`	dimension
`--pct-slider-track-radius`	dimension

What slider paints with them ↗

button23

token	type
`--pct-button-bg`	color
`--pct-button-bg-active`	color
`--pct-button-bg-disabled`	color
`--pct-button-bg-hover`	color
`--pct-button-border`	color
`--pct-button-border-disabled`	color
`--pct-button-fg`	color
`--pct-button-fg-disabled`	color
`--pct-button-font-size`	dimension
`--pct-button-font-size-lg`	dimension
`--pct-button-font-size-sm`	dimension
`--pct-button-font-weight`	fontWeight
`--pct-button-height`	dimension
`--pct-button-height-lg`	dimension
`--pct-button-height-sm`	dimension
`--pct-button-icon-size`	dimension
`--pct-button-icon-size-lg`	dimension
`--pct-button-icon-size-sm`	dimension
`--pct-button-padding-x`	dimension
`--pct-button-padding-x-lg`	dimension
`--pct-button-padding-x-sm`	dimension
`--pct-button-radius`	dimension
`--pct-button-target-min`	dimension

What button paints with them ↗

switch23

token	type
`--pct-switch-fg-disabled`	color
`--pct-switch-fg-invalid`	color
`--pct-switch-fg-warning`	color
`--pct-switch-gap`	dimension
`--pct-switch-height`	dimension
`--pct-switch-hint-fg`	color
`--pct-switch-label-fg`	color
`--pct-switch-padding-x`	dimension
`--pct-switch-radius`	dimension
`--pct-switch-target-min`	dimension
`--pct-switch-thumb-bg`	color
`--pct-switch-thumb-bg-checked`	color
`--pct-switch-thumb-bg-disabled`	color
`--pct-switch-thumb-size`	dimension
`--pct-switch-track-bg`	color
`--pct-switch-track-bg-checked`	color
`--pct-switch-track-bg-disabled`	color
`--pct-switch-track-border`	color
`--pct-switch-track-border-checked`	color
`--pct-switch-track-border-disabled`	color
`--pct-switch-track-border-hover`	color
`--pct-switch-track-border-invalid`	color
`--pct-switch-width`	dimension

What switch paints with them ↗

pagination22

token	type
`--pct-pagination-item-bg`	color
`--pct-pagination-item-bg-hover`	color
`--pct-pagination-item-bg-selected`	color
`--pct-pagination-item-border-selected`	color
`--pct-pagination-item-fg`	color
`--pct-pagination-item-fg-disabled`	color
`--pct-pagination-item-fg-hover`	color
`--pct-pagination-item-fg-selected`	color
`--pct-pagination-item-font-size`	dimension
`--pct-pagination-item-font-size-lg`	dimension
`--pct-pagination-item-font-size-sm`	dimension
`--pct-pagination-item-font-weight-selected`	fontWeight
`--pct-pagination-item-height`	dimension
`--pct-pagination-item-height-lg`	dimension
`--pct-pagination-item-height-sm`	dimension
`--pct-pagination-item-padding-x`	dimension
`--pct-pagination-item-padding-x-lg`	dimension
`--pct-pagination-item-padding-x-sm`	dimension
`--pct-pagination-item-radius`	dimension
`--pct-pagination-item-target-min`	dimension
`--pct-pagination-list-gap`	dimension
`--pct-pagination-marker-fg`	color

What pagination paints with them ↗

badge20

token	type
`--pct-badge-bg`	color
`--pct-badge-bg-danger`	color
`--pct-badge-bg-info`	color
`--pct-badge-bg-success`	color
`--pct-badge-bg-warning`	color
`--pct-badge-border`	color
`--pct-badge-border-danger`	color
`--pct-badge-border-info`	color
`--pct-badge-border-success`	color
`--pct-badge-border-warning`	color
`--pct-badge-fg`	color
`--pct-badge-fg-danger`	color
`--pct-badge-fg-info`	color
`--pct-badge-fg-success`	color
`--pct-badge-fg-warning`	color
`--pct-badge-font-size`	dimension
`--pct-badge-font-weight`	fontWeight
`--pct-badge-gap`	dimension
`--pct-badge-padding-x`	dimension
`--pct-badge-radius`	dimension

What badge paints with them ↗

chips20

token	type
`--pct-chips-item-bg`	color
`--pct-chips-item-border`	color
`--pct-chips-item-fg`	color
`--pct-chips-item-font-size`	dimension
`--pct-chips-item-font-size-lg`	dimension
`--pct-chips-item-font-size-sm`	dimension
`--pct-chips-item-gap`	dimension
`--pct-chips-item-height`	dimension
`--pct-chips-item-height-lg`	dimension
`--pct-chips-item-height-sm`	dimension
`--pct-chips-item-padding-x`	dimension
`--pct-chips-item-padding-x-lg`	dimension
`--pct-chips-item-padding-x-sm`	dimension
`--pct-chips-item-radius`	dimension
`--pct-chips-list-gap`	dimension
`--pct-chips-remove-bg-hover`	color
`--pct-chips-remove-fg`	color
`--pct-chips-remove-fg-hover`	color
`--pct-chips-remove-radius`	dimension
`--pct-chips-remove-target-min`	dimension

What chips paints with them ↗

dialog20

token	type
`--pct-dialog-backdrop-alpha`	dimension
`--pct-dialog-backdrop-bg`	color
`--pct-dialog-backdrop-blur`	dimension
`--pct-dialog-close-bg-hover`	color
`--pct-dialog-close-fg`	color
`--pct-dialog-close-fg-hover`	color
`--pct-dialog-close-radius`	dimension
`--pct-dialog-close-size`	dimension
`--pct-dialog-heading-fg`	color
`--pct-dialog-heading-font-size`	dimension
`--pct-dialog-heading-font-weight`	fontWeight
`--pct-dialog-panel-bg`	color
`--pct-dialog-panel-border`	color
`--pct-dialog-panel-fg`	color
`--pct-dialog-panel-gap`	dimension
`--pct-dialog-panel-max-width`	dimension
`--pct-dialog-panel-padding-x`	dimension
`--pct-dialog-panel-padding-y`	dimension
`--pct-dialog-panel-radius`	dimension
`--pct-dialog-panel-shadow`	shadow

What dialog paints with them ↗

radio19

token	type
`--pct-radio-bg`	color
`--pct-radio-bg-disabled`	color
`--pct-radio-border`	color
`--pct-radio-border-checked`	color
`--pct-radio-border-disabled`	color
`--pct-radio-border-hover`	color
`--pct-radio-border-invalid`	color
`--pct-radio-dot-bg`	color
`--pct-radio-dot-size`	dimension
`--pct-radio-fg-disabled`	color
`--pct-radio-fg-invalid`	color
`--pct-radio-fg-warning`	color
`--pct-radio-gap`	dimension
`--pct-radio-group-label-fg`	color
`--pct-radio-hint-fg`	color
`--pct-radio-label-fg`	color
`--pct-radio-option-gap`	dimension
`--pct-radio-size`	dimension
`--pct-radio-target-min`	dimension

What radio paints with them ↗

checkbox18

token	type
`--pct-checkbox-bg`	color
`--pct-checkbox-bg-checked`	color
`--pct-checkbox-bg-disabled`	color
`--pct-checkbox-border`	color
`--pct-checkbox-border-checked`	color
`--pct-checkbox-border-disabled`	color
`--pct-checkbox-border-hover`	color
`--pct-checkbox-border-invalid`	color
`--pct-checkbox-fg-checked`	color
`--pct-checkbox-fg-disabled`	color
`--pct-checkbox-fg-invalid`	color
`--pct-checkbox-fg-warning`	color
`--pct-checkbox-gap`	dimension
`--pct-checkbox-hint-fg`	color
`--pct-checkbox-label-fg`	color
`--pct-checkbox-radius`	dimension
`--pct-checkbox-size`	dimension
`--pct-checkbox-target-min`	dimension

What checkbox paints with them ↗

drawer18

token	type
`--pct-drawer-close-bg-hover`	color
`--pct-drawer-close-fg`	color
`--pct-drawer-close-fg-hover`	color
`--pct-drawer-close-radius`	dimension
`--pct-drawer-close-size`	dimension
`--pct-drawer-heading-fg`	color
`--pct-drawer-heading-font-size`	dimension
`--pct-drawer-heading-font-weight`	fontWeight
`--pct-drawer-panel-bg`	color
`--pct-drawer-panel-border`	color
`--pct-drawer-panel-fg`	color
`--pct-drawer-panel-gap`	dimension
`--pct-drawer-panel-height`	dimension
`--pct-drawer-panel-padding-x`	dimension
`--pct-drawer-panel-padding-y`	dimension
`--pct-drawer-panel-shadow`	shadow
`--pct-drawer-panel-width`	dimension
`--pct-drawer-z-index`	number

What drawer paints with them ↗

tabs18

token	type
`--pct-tabs-list-bg`	color
`--pct-tabs-list-border`	color
`--pct-tabs-list-gap`	dimension
`--pct-tabs-list-inset`	dimension
`--pct-tabs-panel-gap`	dimension
`--pct-tabs-panel-padding-y`	dimension
`--pct-tabs-tab-bg-hover`	color
`--pct-tabs-tab-bg-selected`	color
`--pct-tabs-tab-border-selected`	color
`--pct-tabs-tab-fg`	color
`--pct-tabs-tab-fg-disabled`	color
`--pct-tabs-tab-fg-hover`	color
`--pct-tabs-tab-fg-selected`	color
`--pct-tabs-tab-font-weight`	fontWeight
`--pct-tabs-tab-padding-x`	dimension
`--pct-tabs-tab-padding-y`	dimension
`--pct-tabs-tab-radius`	dimension
`--pct-tabs-tab-target-min`	dimension

What tabs paints with them ↗

chart17

token	type
`--pct-chart-area-alpha`	dimension
`--pct-chart-axis-border`	color
`--pct-chart-axis-fg`	color
`--pct-chart-axis-gap`	dimension
`--pct-chart-font-size`	dimension
`--pct-chart-grid-border`	color
`--pct-chart-message-fg`	color
`--pct-chart-series-color-1`	color
`--pct-chart-series-color-2`	color
`--pct-chart-series-color-3`	color
`--pct-chart-series-color-4`	color
`--pct-chart-series-color-5`	color
`--pct-chart-series-color-6`	color
`--pct-chart-series-color-7`	color
`--pct-chart-series-color-8`	color
`--pct-chart-series-width`	dimension
`--pct-chart-unit-fg`	color

What chart paints with them ↗

stepper17

token	type
`--pct-stepper-gap`	dimension
`--pct-stepper-label-fg-muted`	color
`--pct-stepper-label-font-weight-current`	fontWeight
`--pct-stepper-marker-bg`	color
`--pct-stepper-marker-bg-current`	color
`--pct-stepper-marker-bg-done`	color
`--pct-stepper-marker-border`	color
`--pct-stepper-marker-border-current`	color
`--pct-stepper-marker-border-done`	color
`--pct-stepper-marker-fg`	color
`--pct-stepper-marker-fg-current`	color
`--pct-stepper-marker-fg-done`	color
`--pct-stepper-marker-font-size`	dimension
`--pct-stepper-marker-radius`	dimension
`--pct-stepper-marker-size`	dimension
`--pct-stepper-track-bg`	color
`--pct-stepper-track-size`	dimension

What stepper paints with them ↗

menu16

token	type
`--pct-menu-item-bg`	color
`--pct-menu-item-bg-active`	color
`--pct-menu-item-fg`	color
`--pct-menu-item-fg-disabled`	color
`--pct-menu-item-font-size`	dimension
`--pct-menu-item-gap`	dimension
`--pct-menu-item-padding-x`	dimension
`--pct-menu-item-padding-y`	dimension
`--pct-menu-item-target-min`	dimension
`--pct-menu-panel-bg`	color
`--pct-menu-panel-border`	color
`--pct-menu-panel-fg`	color
`--pct-menu-panel-max-height`	dimension
`--pct-menu-panel-padding-y`	dimension
`--pct-menu-panel-radius`	dimension
`--pct-menu-panel-shadow`	shadow

What menu paints with them ↗

progress13

token	type
`--pct-progress-fill-bg`	color
`--pct-progress-fill-bg-danger`	color
`--pct-progress-fill-bg-info`	color
`--pct-progress-fill-bg-success`	color
`--pct-progress-fill-bg-warning`	color
`--pct-progress-fill-size`	dimension
`--pct-progress-icon-gap`	dimension
`--pct-progress-icon-size`	dimension
`--pct-progress-track-bg`	color
`--pct-progress-track-height`	dimension
`--pct-progress-track-height-lg`	dimension
`--pct-progress-track-height-sm`	dimension
`--pct-progress-track-radius`	dimension

What progress paints with them ↗

accordion12

token	type
`--pct-accordion-heading-bg-hover`	color
`--pct-accordion-heading-fg`	color
`--pct-accordion-heading-fg-disabled`	color
`--pct-accordion-heading-fg-hover`	color
`--pct-accordion-heading-font-weight`	fontWeight
`--pct-accordion-heading-gap`	dimension
`--pct-accordion-heading-padding-x`	dimension
`--pct-accordion-heading-padding-y`	dimension
`--pct-accordion-heading-target-min`	dimension
`--pct-accordion-item-border`	color
`--pct-accordion-marker-fg`	color
`--pct-accordion-panel-padding-y`	dimension

What accordion paints with them ↗

popover12

token	type
`--pct-popover-heading-fg`	color
`--pct-popover-heading-font-size`	dimension
`--pct-popover-heading-font-weight`	fontWeight
`--pct-popover-panel-bg`	color
`--pct-popover-panel-border`	color
`--pct-popover-panel-fg`	color
`--pct-popover-panel-gap`	dimension
`--pct-popover-panel-max-width`	dimension
`--pct-popover-panel-padding-x`	dimension
`--pct-popover-panel-padding-y`	dimension
`--pct-popover-panel-radius`	dimension
`--pct-popover-panel-shadow`	shadow

What popover paints with them ↗

avatar11

token	type
`--pct-avatar-bg`	color
`--pct-avatar-border`	color
`--pct-avatar-fg`	color
`--pct-avatar-font-size`	dimension
`--pct-avatar-font-size-lg`	dimension
`--pct-avatar-font-size-sm`	dimension
`--pct-avatar-icon-fg`	color
`--pct-avatar-radius`	dimension
`--pct-avatar-size`	dimension
`--pct-avatar-size-lg`	dimension
`--pct-avatar-size-sm`	dimension

What avatar paints with them ↗

tree11

token	type
`--pct-tree-arrow-fg`	color
`--pct-tree-arrow-size`	dimension
`--pct-tree-gap`	dimension
`--pct-tree-indent`	dimension
`--pct-tree-label-bg-hover`	color
`--pct-tree-label-bg-selected`	color
`--pct-tree-label-fg-selected`	color
`--pct-tree-label-padding-x`	dimension
`--pct-tree-label-padding-y`	dimension
`--pct-tree-label-radius`	dimension
`--pct-tree-label-target-min`	dimension

What tree paints with them ↗

breadcrumb8

token	type
`--pct-breadcrumb-fg`	color
`--pct-breadcrumb-font-size`	dimension
`--pct-breadcrumb-gap`	dimension
`--pct-breadcrumb-link-fg`	color
`--pct-breadcrumb-link-fg-hover`	color
`--pct-breadcrumb-link-font-weight-current`	fontWeight
`--pct-breadcrumb-link-target-min`	dimension
`--pct-breadcrumb-separator-fg`	color

What breadcrumb paints with them ↗

tooltip8

token	type
`--pct-tooltip-bg`	color
`--pct-tooltip-fg`	color
`--pct-tooltip-font-size`	dimension
`--pct-tooltip-max-width`	dimension
`--pct-tooltip-padding-x`	dimension
`--pct-tooltip-padding-y`	dimension
`--pct-tooltip-radius`	dimension
`--pct-tooltip-shadow`	shadow

What tooltip paints with them ↗

icon7

token	type
`--pct-icon-fg-danger`	color
`--pct-icon-fg-info`	color
`--pct-icon-fg-success`	color
`--pct-icon-fg-warning`	color
`--pct-icon-size`	dimension
`--pct-icon-size-lg`	dimension
`--pct-icon-size-sm`	dimension

What icon paints with them ↗

skeleton7

token	type
`--pct-skeleton-fill-bg`	color
`--pct-skeleton-fill-blur`	dimension
`--pct-skeleton-fill-size`	dimension
`--pct-skeleton-track-bg`	color
`--pct-skeleton-track-height`	dimension
`--pct-skeleton-track-radius`	dimension
`--pct-skeleton-track-width-last`	dimension

What skeleton paints with them ↗

stack3

token	type
`--pct-stack-gap`	dimension
`--pct-stack-gap-lg`	dimension
`--pct-stack-gap-sm`	dimension

What stack paints with them ↗

container2

token	type
`--pct-container-max-width`	dimension
`--pct-container-padding-x`	dimension

What container paints with them ↗

grid2

token	type
`--pct-grid-gap`	dimension
`--pct-grid-min-width`	dimension