Liking cljdoc? Tell your friends :D

Token coverage

Generated by bb scripts/audit_tokens.bb doc. Do not edit.

Each cell says how many values of that family follow a token of x-theme, out of all the values of that family in the component's CSS. A value follows the theme when it is a token, or the component's own property whose default is a token. Structural values such as 0, none and inherit are not counted, and neither are the values that are not themed by design, for the reasons at the end. An empty cell means the component has no value of that family.

Closed families, in which CI allows no value that follows no token: border-width, color, font-family, font-size, font-weight, line-height, radius, shadow, transition, z.

Componentcolorfont-familyfont-sizefont-weightline-heightradiusshadowtransitionspacezborder-width
x-alert18/18 1/1 2/2 4/40/4 1/1
x-avatar18/18 4/41/1 2/2 0/1 1/1
x-avatar-group8/8 4/41/1 1/1 1/1
x-badge18/18 1/11/1 3/3 0/2 1/1
x-bento-grid
x-bento-item
x-breadcrumbs8/8 3/31/1 0/1
x-button42/42 3/31/1 1/16/62/20/2 1/1
x-calendar17/17 4/44/4 7/71/11/10/11 2/2
x-cancel-dialogue18/18 3/32/21/12/22/2 0/61/1
x-card14/14 4/42/22/20/3 1/1
x-carousel12/12 1/11/13/30/3
x-chart14/14 2/21/1 2/22/21/10/6 2/2
x-checkbox15/15 1/1 3/3
x-chip7/7 1/1 1/1 1/10/4 1/1
x-code9/91/13/31/1 2/2 1/10/8 4/4
x-collapse14/14 1/11/1 1/1 1/10/3 2/2
x-color-picker10/101/11/1 2/23/3 0/51/14/4
x-combobox26/26 2/21/1 4/44/43/30/71/110/10
x-command-palette11/11 4/41/1 1/12/2 0/62/21/1
x-confetti
x-container2/2 0/3 1/1
x-context-menu8/8 1/12/21/10/1 1/1
x-copy8/8 1/1 1/1 0/11/1
x-currency-field16/16 5/51/1 1/1 1/10/3 2/2
x-date-picker25/25 5/54/4 4/41/1 0/91/13/3
x-divider3/3 1/11/1 0/2
x-drag-panel7/7 2/22/21/10/41/12/2
x-drawer6/6 2/22/20/31/12/2
x-drop-zone9/9 1/1 2/2 1/10/3 1/1
x-dropdown18/18 1/11/1 2/22/23/30/31/14/4
x-fieldset11/11 1/11/1 2/22/2 0/4 2/2
x-file-download9/9 1/11/1 1/1 1/10/2
x-file-upload22/22 2/21/1 4/4 1/11/5 2/2
x-floating-panel8/8 3/32/21/13/3 2/2
x-form 0/1
x-form-field14/14 4/41/1 1/1 1/10/2 2/2
x-gaussian-blur
x-grid
x-i18n
x-i18n-provider
x-icon
x-image6/61/11/1 1/1 2/21/2
x-kbd2/21/1 1/1 0/4 1/1
x-kinetic-canvas
x-kinetic-font1/1 0/1
x-kinetic-typography4/41/1 1/1 0/1
x-liquid-dock4/4 1/12/2 0/2 1/1
x-liquid-fill
x-liquid-glass
x-menu4/4 1/12/2 0/51/12/2
x-menu-item12/12 1/1 1/1 1/10/3 1/1
x-metaball-cursor
x-modal3/3 1/11/12/20/31/12/2
x-morph-stack
x-multi-combobox26/26 2/21/1 3/34/43/30/81/110/10
x-navbar8/8 2/22/20/3 1/1
x-neural-glow
x-notification-center 0/11/1
x-organic-divider2/2
x-organic-progress2/2
x-organic-shape 1/1
x-otp-input8/81/1 1/1 1/1 1/11/1 2/2
x-pagination14/14 3/31/1 1/1 1/10/2 3/3
x-particle-button54/54 3/31/1 1/16/64/40/2 1/1
x-popover48/48 4/42/2 4/44/45/50/81/120/20
x-progress10/10 2/21/1 1/1 1/10/1
x-progress-circle8/8 1/1 1/1
x-proximity-list1/1 0/1
x-radio8/8 2/2
x-range-slider11/11 2/21/1 1/11/11/10/1
x-rating7/7 1/11/1 1/1 1/10/1
x-ripple-effect
x-scroll12/12 2/23/30/2
x-scroll-parallax 0/1
x-scroll-stack 0/2
x-scroll-story 1/1 1/10/2
x-scroll-timeline8/8 1/11/1 3/3 1/10/6
x-search-field12/12 1/1 2/2 1/10/2 2/2
x-select19/19 4/4 1/11/11/10/2 1/1
x-sidebar4/4 2/22/2 2/2
x-skeleton2/2 2/2
x-skeleton-group 0/1
x-slider14/14 2/21/1 1/11/12/20/2
x-soft-body4/4 2/2 0/1
x-spacer
x-spinner4/4
x-splash10/10 1/1 3/30/1
x-split-pane5/5 1/1
x-spotlight-card6/6 4/42/22/20/3 1/1
x-stat10/10 2/22/2 1/1 2/20/2 1/1
x-stepper22/22 5/52/2 1/1 1/10/3
x-switch8/8 1/11/12/2
x-tab10/10 1/1 2/20/4 1/1
x-table5/5 1/11/1 1/1 0/2 1/1
x-table-cell13/13 1/1 1/1 1/10/3 1/1
x-table-row7/7 1/1
x-tabs 0/2
x-text-area14/14 4/41/11/11/1 1/10/2 2/2
x-timeline1/1 1/11/1 0/1
x-timeline-item28/28 2/21/1 1/1 3/30/3
x-toast42/42 2/21/1 2/22/24/40/5 1/1
x-toaster 0/11/1
x-tooltip6/6 1/1 1/12/22/21/11/12/2
x-typography7/73/39/916/164/42/2 0/3 1/1
x-welcome-tour26/261/14/42/21/14/42/28/88/9 1/1
x-welcome-tour-step
All987/98710/10117/11769/697/7111/11175/75107/10715/23719/19115/115

CSS not read, or not in full: x-liquid-glass.

Not themed by design

The values are in scripts/tokens_by_design.edn.

A loop that runs by itself. It is not a transition.

15 values in x-button, x-chart, x-drop-zone, x-image, x-kinetic-typography, x-organic-divider, x-organic-shape, x-particle-button, x-progress, x-progress-circle, x-skeleton, x-spinner, x-splash.

An effect that plays once. Its length is part of the effect.

1 value in x-particle-button.

A ring or a dot. Its roundness is its shape.

4 values in x-avatar, x-button, x-particle-button, x-timeline-item.

An outline or an edge drawn with a shadow. It is not an elevation.

3 values in x-color-picker, x-kbd.

The shape of a mark. It is not a corner, a weight or a size of text.

3 values in x-checkbox.

A glyph that stands for an icon. Its size is the size of the icon.

5 values in x-chip, x-combobox, x-file-upload, x-search-field, x-welcome-tour.

A step between two steps of the theme. It keeps the variants of its component apart.

1 value in x-typography.

A display size. It belongs to the scale of its component.

9 values in x-kinetic-font, x-kinetic-typography, x-otp-input, x-stat, x-typography.

A size below the smallest step of the theme, chosen to fit its place.

8 values in x-avatar, x-avatar-group, x-badge, x-calendar, x-code, x-stepper, x-typography.

The effect needs a variable font. system-ui is the safest default for one.

1 value in x-kinetic-font.

Smoothing tied to scrolling. It follows the pointer and no design default.

4 values in x-scroll-parallax, x-scroll-stack, x-scroll-timeline.

A line height set against the font size of its own text.

31 values in x-alert, x-cancel-dialogue, x-chart, x-code, x-combobox, x-command-palette, x-date-picker, x-image, x-kbd, x-kinetic-font, x-kinetic-typography, x-multi-combobox, x-select, x-stepper, x-timeline-item, x-toast, x-tooltip, x-typography.

The height of a one-line control.

4 values in x-command-palette, x-currency-field, x-form-field, x-search-field.

Text on a tint, chosen for contrast with it.

18 values in x-alert, x-avatar, x-badge.

A colour of the info status. The theme has no token for it.

14 values in x-alert, x-badge, x-toast.

A tint of the danger colour, written as a solid colour.

2 values in x-menu-item.

Text or a mark on a filled colour, chosen for contrast with the fill.

31 values in x-button, x-calendar, x-cancel-dialogue, x-combobox, x-copy, x-date-picker, x-multi-combobox, x-particle-button, x-stepper, x-timeline-item, x-welcome-tour.

A colour of the syntax palette.

24 values in x-code.

A colour that an effect or a tool draws with. The theme has no role for it.

21 values in x-chart, x-color-picker, x-image, x-metaball-cursor, x-organic-shape, x-particle-button, x-scroll-story, x-scroll-timeline, x-skeleton.

A scrim. It darkens what is behind it in every theme.

7 values in x-cancel-dialogue, x-command-palette, x-drawer, x-modal, x-sidebar.

A mix of the text colour around it.

1 value in x-floating-panel.

The inverted bar. It is dark in every theme and mode.

6 values in x-navbar.

The active item of the command palette. Its accent is the same in every theme.

4 values in x-command-palette.

A ring, a thumb or an indicator. Its width is part of its shape.

13 values in x-avatar, x-checkbox, x-color-picker, x-radio, x-range-slider, x-scroll-timeline, x-slider, x-tab.

The dashed edge of a drop target.

4 values in x-file-upload.

A bar, an arrow or an outline drawn at its own width.

3 values in x-soft-body, x-typography, x-welcome-tour.

Above everything, by its purpose.

3 values in x-confetti, x-metaball-cursor, x-splash.

Page chrome. It sits below every floating layer.

2 values in x-liquid-dock, x-navbar.

A window that floats under dialogs.

1 value in x-floating-panel.

A layer inside its own component.

1 value in x-chart.

❮Theming GuideShared Utilities Reference❯

Can you improve this documentation?Edit on GitHub

cljdoc builds & hosts documentation for Clojure/Script libraries

Keyboard shortcuts
Ctrl+kJump to recent docs
←Move to previous article
→Move to next article
Ctrl+/Jump to the search field
Raise an issueBrowse cljdoc sourceChat on Slack
× close