Skip to main content Design tokens Components Style utilities
Skip to table of contents

    Other tokens

    All of the design tokens described herein are considered relatively stable. However, some changes might occur in future versions to address mission critical bugs or improvements. If such changes occur, they will not be considered breaking changes and will be clearly documented in the changelog.

    Most design tokens are consistent across the light and dark theme. Those that vary will show both values.

    Focus rings

    Focus rings show what item is selected when tabbing with the keyboard or when an input is focused.

    Design tokenDefault value
    --pc-focus-ring-width3px
    --pc-focus-ring-stylesolid
    --pc-focus-ring-colorvar(--pc-color-primary-600)
    --pc-focus-ringvar(--pc-focus-ring-width) var(--pc-focus-ring-style) var(--pc-focus-ring-color)
    --pc-focus-ring-offset1px

    Buttons

    These tokens below control the appearance of buttons. In addition, buttons also use some form input tokens such as --pc-input-height-* and --pc-input-border-*, as they’re also form controls.

    Design tokenDefault value
    --pc-button-font-size-svar(--pc-font-size-xs)
    --pc-button-font-size-mvar(--pc-font-size-s)
    --pc-button-font-size-lvar(--pc-font-size-m)

    Form controls

    These tokens are used to style form controls, such as Input and Select.

    Default tokenDefault value
    --pc-input-height-s1.75rem (28px @ 16px base)
    --pc-input-height-m2.25rem (36px @ 16px base)
    --pc-input-height-l3rem (48px @ 16px base)
    --pc-input-background-colorvar(--pc-color-neutral-50)
    --pc-input-background-color-hovervar(--pc-color-neutral-50)
    --pc-input-background-color-focusvar(--pc-color-neutral-0)
    --pc-input-background-color-disabledvar(--pc-color-neutral-100)
    --pc-input-border-colorvar(--pc-color-neutral-300)
    --pc-input-border-color-hovervar(--pc-color-neutral-400)
    --pc-input-border-color-activevar(--pc-color-neutral-200)
    --pc-input-border-color-disabledvar(--pc-color-neutral-400)
    --pc-input-border-width1px
    --pc-input-required-content"*"
    --pc-input-required-content-offset-2px
    --pc-input-required-content-colorvar(--pc-color-danger-600)
    --pc-input-border-radius-svar(--pc-border-radius-m)
    --pc-input-border-radius-mvar(--pc-border-radius-m)
    --pc-input-border-radius-lvar(--pc-border-radius-l)
    --pc-input-font-familyvar(--pc-font-sans)
    --pc-input-font-weightvar(--pc-font-weight-normal)
    --pc-input-font-size-svar(--pc-font-size-s)
    --pc-input-font-size-mvar(--pc-font-size-m)
    --pc-input-font-size-lvar(--pc-font-size-l)
    --pc-input-letter-spacingvar(--pc-letter-spacing-normal)
    --pc-input-colorvar(--pc-color-neutral-700)
    --pc-input-color-hovervar(--pc-color-neutral-900)
    --pc-input-color-focusvar(--pc-color-neutral-900)
    --pc-input-color-disabledvar(--pc-color-neutral-700)
    --pc-input-icon-colorvar(--pc-color-neutral-600)
    --pc-input-icon-color-hovervar(--pc-color-neutral-700)
    --pc-input-icon-color-activevar(--pc-color-neutral-500)
    --pc-input-icon-color-focusvar(--pc-color-neutral-700)
    --pc-input-placeholder-colorvar(--pc-color-neutral-500)
    --pc-input-placeholder-color-disabledvar(--pc-color-neutral-600)
    --pc-input-spacing-svar(--pc-spacing-s)
    --pc-input-spacing-mvar(--pc-spacing-m)
    --pc-input-spacing-lvar(--pc-spacing-l)

    Filled form controls

    These tokens are used to style form controls with the filled style enabled, i.e. with the filled attribute.

    Default tokenDefault value
    --pc-input-filled-background-colorvar(--pc-color-neutral-100)
    --pc-input-filled-background-color-hovervar(--pc-color-neutral-200)
    --pc-input-filled-background-color-focusvar(--pc-color-neutral-100)
    --pc-input-filled-background-color-disabledvar(--pc-color-neutral-100)
    --pc-input-filled-colorvar(--pc-color-neutral-900)
    --pc-input-filled-color-hovervar(--pc-color-neutral-900)
    --pc-input-filled-color-focusvar(--pc-color-neutral-900)
    --pc-input-filled-color-disabledvar(--pc-color-neutral-800)

    Labels

    These control the appearance of labels in form controls.

    Design tokenDefault value
    --pc-input-label-font-size-svar(--pc-font-size-s)
    --pc-input-label-font-size-mvar(--pc-font-size-m)
    --pc-input-label-font-size-lvar(--pc-font-size-l)
    --pc-input-label-colorinherit

    Hints

    These tokens control the appearances of hints in form controls.

    Design tokenDefault value
    --pc-input-hint-font-size-svar(--pc-font-size-xs)
    --pc-input-hint-font-size-mvar(--pc-font-size-s)
    --pc-input-hint-font-size-lvar(--pc-font-size-m)
    --pc-input-hint-colorvar(--pc-color-neutral-600)

    Toggles

    These tokens control the appearance of toggles, such as Checkbox, Radio and Switch.

    Design tokenDefault value
    --pc-toggle-size-s0.875rem (14px @ 16px base)
    --pc-toggle-size-m1.125rem (18px @ 16px base)
    --pc-toggle-size-l1.375rem (22px @ 16px base)

    Overlays

    This controls the appearance of overlays used in components such as Dialog and Drawer.

    Design tokenDefault value
    --pc-overlay-background-colorrgb(220 220 220 / 70%) (light mode)
    rgb(27 31 36 / 70%) (dark mode)

    Panels

    These control the appearance of panels used in components such as Dialog, Drawer and Menu.

    Default tokenDefault value
    --pc-panel-background-colorvar(--pc-color-neutral-50)
    --pc-panel-border-colorvar(--pc-color-neutral-200)
    --pc-panel-border-width1px

    Tooltips

    These tokens control the appearance of tooltips. This includes the Tooltip component.

    Default tokenDefault value
    --pc-tooltip-border-radiusvar(--pc-border-radius-s)
    --pc-tooltip-background-colorvar(--pc-color-neutral-200)
    --pc-tooltip-colorvar(--pc-color-neutral-950)
    --pc-tooltip-font-familyvar(--pc-font-sans)
    --pc-tooltip-font-weightvar(--pc-font-weight-medium)
    --pc-tooltip-font-sizevar(--pc-font-size-s)
    --pc-tooltip-line-heightvar(--pc-line-height-dense)
    --pc-tooltip-paddingvar(--pc-spacing-xs) var(--pc-spacing-s)
    --pc-tooltip-arrow-size6px