Tokens
Three tiers, one direction of references: component → semantic → raw.
Generated CSS keeps aliases as var() chains so themes can override any layer.
component tokens
Component tokens. One file per component, root group = component id, second level = anatomy part. Reference semantic tokens only. Never overridden per platform: the component's decisions are the same everywhere. May reference: semantic.
No token matches.
accordion
(33)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
accordion.item.border-color
|
color |
{global.border.level.on-level.0}
|
light
#ECE8E9
dark
#303030
|
--accordion-item-border-color
|
accordion.item.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--accordion-item-border-width
|
accordion.trigger.min-height.small
|
dimension |
{space.40}
|
40px
|
--accordion-trigger-min-height-small
|
accordion.trigger.min-height.medium
|
dimension |
{space.48}
|
48px
|
--accordion-trigger-min-height-medium
|
accordion.trigger.padding-inline
|
dimension |
{space.8}
|
8px
|
--accordion-trigger-padding-inline
|
accordion.trigger.padding-block
|
dimension |
{space.8}
|
8px
|
--accordion-trigger-padding-block
|
accordion.trigger.gap
|
dimension |
{space.12}
|
12px
|
--accordion-trigger-gap
|
accordion.trigger.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--accordion-trigger-border-radius
|
accordion.trigger.background.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--accordion-trigger-background-default
|
accordion.trigger.background.hover
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--accordion-trigger-background-hover
|
accordion.trigger.background.active
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--accordion-trigger-background-active
|
accordion.trigger.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--accordion-trigger-outline-width-focus-visible
|
accordion.trigger.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--accordion-trigger-outline-offset-focus-visible
|
accordion.trigger.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--accordion-trigger-outline-color-focus-visible
|
accordion.trigger.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--accordion-trigger-transition-duration
|
accordion.trigger.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--accordion-trigger-transition-easing
|
accordion.title.color
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--accordion-title-color
|
accordion.title.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--accordion-title-typography-small-font-family--accordion-title-typography-small-font-size--accordion-title-typography-small-font-weight--accordion-title-typography-small-line-height--accordion-title-typography-small-letter-spacing
|
accordion.title.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--accordion-title-typography-medium-font-family--accordion-title-typography-medium-font-size--accordion-title-typography-medium-font-weight--accordion-title-typography-medium-line-height--accordion-title-typography-medium-letter-spacing
|
accordion.indicator.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--accordion-indicator-font-family
|
accordion.indicator.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--accordion-indicator-font-weight
|
accordion.indicator.fill
|
number |
{font.icon.fill.off}
|
0
|
--accordion-indicator-fill
|
accordion.indicator.grade
|
number |
{font.icon.grade.normal}
|
0
|
--accordion-indicator-grade
|
accordion.indicator.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--accordion-indicator-optical-size
|
accordion.indicator.size.small
|
dimension |
{size.3}
|
20px
|
--accordion-indicator-size-small
|
accordion.indicator.size.medium
|
dimension |
{size.4}
|
24px
|
--accordion-indicator-size-medium
|
accordion.indicator.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--accordion-indicator-transition-duration
|
accordion.indicator.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--accordion-indicator-transition-easing
|
accordion.panel.padding-inline
|
dimension |
{space.8}
|
8px
|
--accordion-panel-padding-inline
|
accordion.panel.padding-block
|
dimension |
{space.12}
|
12px
|
--accordion-panel-padding-block
|
accordion.panel.color
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--accordion-panel-color
|
accordion.panel.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--accordion-panel-typography-small-font-family--accordion-panel-typography-small-font-size--accordion-panel-typography-small-font-weight--accordion-panel-typography-small-line-height--accordion-panel-typography-small-letter-spacing
|
accordion.panel.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--accordion-panel-typography-medium-font-family--accordion-panel-typography-medium-font-size--accordion-panel-typography-medium-font-weight--accordion-panel-typography-medium-line-height--accordion-panel-typography-medium-letter-spacing
|
alert
(30)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
alert.container.background.info
|
color |
{global.bg.subtle.functional.info.default}
|
light
#EDF1F9
dark
#09162F
|
--alert-container-background-info
|
alert.container.background.success
|
color |
{global.bg.subtle.functional.success.default}
|
light
#DBFAE6
dark
#011C16
|
--alert-container-background-success
|
alert.container.background.warning
|
color |
{global.bg.subtle.functional.warning.default}
|
light
#FFF1C7
dark
#1F1504
|
--alert-container-background-warning
|
alert.container.background.error
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--alert-container-background-error
|
alert.container.border-color.info
|
color |
{global.border.accent.functional.info.default}
|
light
#1A4CAD
dark
#709DF1
|
--alert-container-border-color-info
|
alert.container.border-color.success
|
color |
{global.border.accent.functional.success.default}
|
light
#075D33
dark
#16AE64
|
--alert-container-border-color-success
|
alert.container.border-color.warning
|
color |
{global.border.accent.functional.warning.default}
|
#DFA700
|
--alert-container-border-color-warning
|
alert.container.border-color.error
|
color |
{global.border.accent.functional.error.default}
|
#C01619
|
--alert-container-border-color-error
|
alert.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--alert-container-border-width
|
alert.container.border-radius
|
dimension |
{corner-radius.sm}
|
8px
|
--alert-container-border-radius
|
alert.container.padding
|
dimension |
{space.16}
|
16px
|
--alert-container-padding
|
alert.container.gap
Between the icon and the content column.
|
dimension |
{space.12}
|
12px
|
--alert-container-gap
|
alert.icon.color.info
|
color |
{global.icon.on-subtle.functional.info.default}
|
light
#1A4CAD
dark
#BBCFF3
|
--alert-icon-color-info
|
alert.icon.color.success
|
color |
{global.icon.on-subtle.functional.success.default}
|
light
#075D33
dark
#30F498
|
--alert-icon-color-success
|
alert.icon.color.warning
|
color |
{global.icon.on-subtle.functional.warning.default}
|
light
#3E2D0C
dark
#DFA700
|
--alert-icon-color-warning
|
alert.icon.color.error
|
color |
{global.icon.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--alert-icon-color-error
|
alert.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--alert-icon-font-family
|
alert.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--alert-icon-font-weight
|
alert.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--alert-icon-fill
|
alert.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--alert-icon-grade
|
alert.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--alert-icon-optical-size
|
alert.icon.size
|
dimension |
{size.4}
|
24px
|
--alert-icon-size
|
alert.content.gap
Between the title and the message.
|
dimension |
{space.4}
|
4px
|
--alert-content-gap
|
alert.title.color.info
|
color |
{global.text.on-subtle.functional.info.default}
|
light
#1A4CAD
dark
#BBCFF3
|
--alert-title-color-info
|
alert.title.color.success
|
color |
{global.text.on-subtle.functional.success.default}
|
light
#075D33
dark
#30F498
|
--alert-title-color-success
|
alert.title.color.warning
|
color |
{global.text.on-subtle.functional.warning.default}
|
light
#644B16
dark
#FFD654
|
--alert-title-color-warning
|
alert.title.color.error
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--alert-title-color-error
|
alert.title.typography
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--alert-title-typography-font-family--alert-title-typography-font-size--alert-title-typography-font-weight--alert-title-typography-line-height--alert-title-typography-letter-spacing
|
alert.message.color
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--alert-message-color
|
alert.message.typography
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--alert-message-typography-font-family--alert-message-typography-font-size--alert-message-typography-font-weight--alert-message-typography-line-height--alert-message-typography-letter-spacing
|
avatar
(12)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
avatar.container.size.small
|
dimension |
{size.4}
|
24px
|
--avatar-container-size-small
|
avatar.container.size.medium
|
dimension |
{size.5}
|
32px
|
--avatar-container-size-medium
|
avatar.container.size.large
|
dimension |
{size.6}
|
40px
|
--avatar-container-size-large
|
avatar.container.border-radius.circle
|
dimension |
{corner-radius.full}
|
9999px
|
--avatar-container-border-radius-circle
|
avatar.container.border-radius.square
|
dimension |
{corner-radius.xs}
|
4px
|
--avatar-container-border-radius-square
|
avatar.container.background
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--avatar-container-background
|
avatar.container.border-color
|
color |
{global.border.level.edge.level.1}
|
light
#D7D3D4
dark
#282828
|
--avatar-container-border-color
|
avatar.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--avatar-container-border-width
|
avatar.initials.color
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--avatar-initials-color
|
avatar.initials.typography.small
|
typography |
{body.family}{body.size.2xs}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":10,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--avatar-initials-typography-small-font-family--avatar-initials-typography-small-font-size--avatar-initials-typography-small-font-weight--avatar-initials-typography-small-line-height--avatar-initials-typography-small-letter-spacing
|
avatar.initials.typography.medium
|
typography |
{body.family}{body.size.xs}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--avatar-initials-typography-medium-font-family--avatar-initials-typography-medium-font-size--avatar-initials-typography-medium-font-weight--avatar-initials-typography-medium-line-height--avatar-initials-typography-medium-letter-spacing
|
avatar.initials.typography.large
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--avatar-initials-typography-large-font-family--avatar-initials-typography-large-font-size--avatar-initials-typography-large-font-weight--avatar-initials-typography-large-line-height--avatar-initials-typography-large-letter-spacing
|
badge
(44)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
badge.container.background.accent.neutral
|
color |
{global.bg.accent.neutral.default}
|
light
#201E1F
dark
#E8E3E4
|
--badge-container-background-accent-neutral
|
badge.container.background.accent.brand
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--badge-container-background-accent-brand
|
badge.container.background.accent.success
|
color |
{global.bg.accent.functional.success.default}
|
light
#0B7742
dark
#11C772
|
--badge-container-background-accent-success
|
badge.container.background.accent.warning
|
color |
{global.bg.accent.functional.warning.default}
|
#FFC61C
|
--badge-container-background-accent-warning
|
badge.container.background.accent.error
|
color |
{global.bg.accent.functional.error.default}
|
#E12A23
|
--badge-container-background-accent-error
|
badge.container.background.accent.info
|
color |
{global.bg.accent.functional.info.default}
|
light
#2B68E0
dark
#94B6F4
|
--badge-container-background-accent-info
|
badge.container.background.subtle.neutral
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--badge-container-background-subtle-neutral
|
badge.container.background.subtle.brand
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--badge-container-background-subtle-brand
|
badge.container.background.subtle.success
|
color |
{global.bg.subtle.functional.success.default}
|
light
#DBFAE6
dark
#011C16
|
--badge-container-background-subtle-success
|
badge.container.background.subtle.warning
|
color |
{global.bg.subtle.functional.warning.default}
|
light
#FFF1C7
dark
#1F1504
|
--badge-container-background-subtle-warning
|
badge.container.background.subtle.error
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--badge-container-background-subtle-error
|
badge.container.background.subtle.info
|
color |
{global.bg.subtle.functional.info.default}
|
light
#EDF1F9
dark
#09162F
|
--badge-container-background-subtle-info
|
badge.container.border-color.accent.neutral
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--badge-container-border-color-accent-neutral
|
badge.container.border-color.accent.brand
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--badge-container-border-color-accent-brand
|
badge.container.border-color.accent.success
|
color |
{global.border.accent.functional.success.default}
|
light
#075D33
dark
#16AE64
|
--badge-container-border-color-accent-success
|
badge.container.border-color.accent.warning
|
color |
{global.border.accent.functional.warning.default}
|
#DFA700
|
--badge-container-border-color-accent-warning
|
badge.container.border-color.accent.error
|
color |
{global.border.accent.functional.error.default}
|
#C01619
|
--badge-container-border-color-accent-error
|
badge.container.border-color.accent.info
|
color |
{global.border.accent.functional.info.default}
|
light
#1A4CAD
dark
#709DF1
|
--badge-container-border-color-accent-info
|
badge.container.border-color.subtle.neutral
|
color |
{global.border.subtle.neutral.default}
|
light
#DFDBDC
dark
#36363680
|
--badge-container-border-color-subtle-neutral
|
badge.container.border-color.subtle.brand
|
color |
{global.border.subtle.brand.default}
|
light
#DDE6F5
dark
#0D272E
|
--badge-container-border-color-subtle-brand
|
badge.container.border-color.subtle.success
|
color |
{global.border.subtle.functional.success.default}
|
light
#AEF6C9
dark
#022A23
|
--badge-container-border-color-subtle-success
|
badge.container.border-color.subtle.warning
|
color |
{global.border.subtle.functional.warning.default}
|
light
#FFE495
dark
#2D2107
|
--badge-container-border-color-subtle-warning
|
badge.container.border-color.subtle.error
|
color |
{global.border.subtle.functional.error.default}
|
light
#FCCDC6
dark
#3E130F
|
--badge-container-border-color-subtle-error
|
badge.container.border-color.subtle.info
|
color |
{global.border.subtle.functional.info.default}
|
light
#DEE7F6
dark
#0B204B
|
--badge-container-border-color-subtle-info
|
badge.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--badge-container-border-width
|
badge.container.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--badge-container-border-radius
|
badge.container.min-height.small
|
dimension |
{space.20}
|
20px
|
--badge-container-min-height-small
|
badge.container.min-height.medium
|
dimension |
{space.24}
|
24px
|
--badge-container-min-height-medium
|
badge.container.padding-inline.small
|
dimension |
{space.6}
|
6px
|
--badge-container-padding-inline-small
|
badge.container.padding-inline.medium
|
dimension |
{space.8}
|
8px
|
--badge-container-padding-inline-medium
|
badge.label.color.accent.neutral
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--badge-label-color-accent-neutral
|
badge.label.color.accent.brand
|
color |
{global.text.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--badge-label-color-accent-brand
|
badge.label.color.accent.success
|
color |
{global.text.on-accent.functional.success.default}
|
light
#F8FEFA
dark
#011C16
|
--badge-label-color-accent-success
|
badge.label.color.accent.warning
|
color |
{global.text.on-accent.functional.warning.default}
|
#1F1504
|
--badge-label-color-accent-warning
|
badge.label.color.accent.error
|
color |
{global.text.on-accent.functional.error.default}
|
#FEFBFA
|
--badge-label-color-accent-error
|
badge.label.color.accent.info
|
color |
{global.text.on-accent.functional.info.default}
|
light
#FBFCFD
dark
#09162F
|
--badge-label-color-accent-info
|
badge.label.color.subtle.neutral
|
color |
{global.text.on-subtle.neutral.default}
|
light
#323031
dark
#E3DDDE
|
--badge-label-color-subtle-neutral
|
badge.label.color.subtle.brand
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--badge-label-color-subtle-brand
|
badge.label.color.subtle.success
|
color |
{global.text.on-subtle.functional.success.default}
|
light
#075D33
dark
#30F498
|
--badge-label-color-subtle-success
|
badge.label.color.subtle.warning
|
color |
{global.text.on-subtle.functional.warning.default}
|
light
#644B16
dark
#FFD654
|
--badge-label-color-subtle-warning
|
badge.label.color.subtle.error
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--badge-label-color-subtle-error
|
badge.label.color.subtle.info
|
color |
{global.text.on-subtle.functional.info.default}
|
light
#1A4CAD
dark
#BBCFF3
|
--badge-label-color-subtle-info
|
badge.label.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--badge-label-typography-small-font-family--badge-label-typography-small-font-size--badge-label-typography-small-font-weight--badge-label-typography-small-line-height--badge-label-typography-small-letter-spacing
|
badge.label.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--badge-label-typography-medium-font-family--badge-label-typography-medium-font-size--badge-label-typography-medium-font-weight--badge-label-typography-medium-line-height--badge-label-typography-medium-letter-spacing
|
breadcrumb
(21)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
breadcrumb.container.gap
Between an item, the separator and the next item.
|
dimension |
{space.4}
|
4px
|
--breadcrumb-container-gap
|
breadcrumb.link.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--breadcrumb-link-color-default
|
breadcrumb.link.color.hover
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--breadcrumb-link-color-hover
|
breadcrumb.link.color.current
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--breadcrumb-link-color-current
|
breadcrumb.link.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--breadcrumb-link-typography-small-font-family--breadcrumb-link-typography-small-font-size--breadcrumb-link-typography-small-font-weight--breadcrumb-link-typography-small-line-height--breadcrumb-link-typography-small-letter-spacing
|
breadcrumb.link.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--breadcrumb-link-typography-medium-font-family--breadcrumb-link-typography-medium-font-size--breadcrumb-link-typography-medium-font-weight--breadcrumb-link-typography-medium-line-height--breadcrumb-link-typography-medium-letter-spacing
|
breadcrumb.link.border-radius
|
dimension |
{corner-radius.2xs}
|
2px
|
--breadcrumb-link-border-radius
|
breadcrumb.link.min-height
|
dimension |
{space.24}
|
24px
|
--breadcrumb-link-min-height
|
breadcrumb.link.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--breadcrumb-link-outline-width-focus-visible
|
breadcrumb.link.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--breadcrumb-link-outline-offset-focus-visible
|
breadcrumb.link.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--breadcrumb-link-outline-color-focus-visible
|
breadcrumb.link.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--breadcrumb-link-transition-duration
|
breadcrumb.link.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--breadcrumb-link-transition-easing
|
breadcrumb.separator.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--breadcrumb-separator-font-family
|
breadcrumb.separator.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--breadcrumb-separator-font-weight
|
breadcrumb.separator.fill
|
number |
{font.icon.fill.off}
|
0
|
--breadcrumb-separator-fill
|
breadcrumb.separator.grade
|
number |
{font.icon.grade.normal}
|
0
|
--breadcrumb-separator-grade
|
breadcrumb.separator.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--breadcrumb-separator-optical-size
|
breadcrumb.separator.color
|
color |
{global.icon.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--breadcrumb-separator-color
|
breadcrumb.separator.size.small
|
dimension |
{size.2}
|
16px
|
--breadcrumb-separator-size-small
|
breadcrumb.separator.size.medium
|
dimension |
{size.3}
|
20px
|
--breadcrumb-separator-size-medium
|
button
(137)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
button.container.background.accent.neutral.default
|
color |
{global.bg.accent.neutral.default}
|
light
#201E1F
dark
#E8E3E4
|
--button-container-background-accent-neutral-default
|
button.container.background.accent.neutral.hover
|
color |
{global.bg.accent.neutral.hover}
|
light
#323031
dark
#D2CECF
|
--button-container-background-accent-neutral-hover
|
button.container.background.accent.neutral.active
|
color |
{global.bg.accent.neutral.active}
|
light
#4C4A4A
dark
#B9B7B7
|
--button-container-background-accent-neutral-active
|
button.container.background.accent.brand.default
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--button-container-background-accent-brand-default
|
button.container.background.accent.brand.hover
|
color |
{global.bg.accent.brand.hover}
|
light
#1148A9
dark
#53D6F2
|
--button-container-background-accent-brand-hover
|
button.container.background.accent.brand.active
|
color |
{global.bg.accent.brand.active}
|
light
#0B2A69
dark
#41B9D3
|
--button-container-background-accent-brand-active
|
button.container.background.accent.error.default
|
color |
{global.bg.accent.functional.error.default}
|
#E12A23
|
--button-container-background-accent-error-default
|
button.container.background.accent.error.hover
|
color |
{global.bg.accent.functional.error.hover}
|
#C01619
|
--button-container-background-accent-error-hover
|
button.container.background.accent.error.active
|
color |
{global.bg.accent.functional.error.active}
|
#940E11
|
--button-container-background-accent-error-active
|
button.container.background.accent.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--button-container-background-accent-disabled
|
button.container.background.subtle.neutral.default
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--button-container-background-subtle-neutral-default
|
button.container.background.subtle.neutral.hover
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--button-container-background-subtle-neutral-hover
|
button.container.background.subtle.neutral.active
|
color |
{global.bg.subtle.neutral.active}
|
light
#B6B4B433
dark
#76767680
|
--button-container-background-subtle-neutral-active
|
button.container.background.subtle.brand.default
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--button-container-background-subtle-brand-default
|
button.container.background.subtle.brand.hover
|
color |
{global.bg.subtle.brand.hover}
|
light
#DDE6F5
dark
#0D272E
|
--button-container-background-subtle-brand-hover
|
button.container.background.subtle.brand.active
|
color |
{global.bg.subtle.brand.active}
|
light
#BFD1F1
dark
#10363E
|
--button-container-background-subtle-brand-active
|
button.container.background.subtle.error.default
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--button-container-background-subtle-error-default
|
button.container.background.subtle.error.hover
|
color |
{global.bg.subtle.functional.error.hover}
|
light
#FCCDC6
dark
#3E130F
|
--button-container-background-subtle-error-hover
|
button.container.background.subtle.error.active
|
color |
{global.bg.subtle.functional.error.active}
|
light
#FAA79D
dark
#531A16
|
--button-container-background-subtle-error-active
|
button.container.background.subtle.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--button-container-background-subtle-disabled
|
button.container.background.ghost.neutral.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-background-ghost-neutral-default
|
button.container.background.ghost.neutral.hover
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--button-container-background-ghost-neutral-hover
|
button.container.background.ghost.neutral.active
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--button-container-background-ghost-neutral-active
|
button.container.background.ghost.brand.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-background-ghost-brand-default
|
button.container.background.ghost.brand.hover
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--button-container-background-ghost-brand-hover
|
button.container.background.ghost.brand.active
|
color |
{global.bg.subtle.brand.hover}
|
light
#DDE6F5
dark
#0D272E
|
--button-container-background-ghost-brand-active
|
button.container.background.ghost.error.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-background-ghost-error-default
|
button.container.background.ghost.error.hover
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--button-container-background-ghost-error-hover
|
button.container.background.ghost.error.active
|
color |
{global.bg.subtle.functional.error.hover}
|
light
#FCCDC6
dark
#3E130F
|
--button-container-background-ghost-error-active
|
button.container.background.ghost.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--button-container-background-ghost-disabled
|
button.container.border-color.accent.neutral.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--button-container-border-color-accent-neutral-default
|
button.container.border-color.accent.neutral.hover
|
color |
{global.border.accent.neutral.hover}
|
light
#4C4A4A
dark
#B9B7B7
|
--button-container-border-color-accent-neutral-hover
|
button.container.border-color.accent.neutral.active
|
color |
{global.border.accent.neutral.active}
|
light
#616161
dark
#9D9B9C
|
--button-container-border-color-accent-neutral-active
|
button.container.border-color.accent.brand.default
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--button-container-border-color-accent-brand-default
|
button.container.border-color.accent.brand.hover
|
color |
{global.border.accent.brand.hover}
|
light
#0B2A69
dark
#41B9D3
|
--button-container-border-color-accent-brand-hover
|
button.container.border-color.accent.brand.active
|
color |
{global.border.accent.brand.active}
|
light
#0B204D
dark
#3499AF
|
--button-container-border-color-accent-brand-active
|
button.container.border-color.accent.error.default
|
color |
{global.border.accent.functional.error.default}
|
#C01619
|
--button-container-border-color-accent-error-default
|
button.container.border-color.accent.error.hover
|
color |
{global.border.accent.functional.error.hover}
|
#940E11
|
--button-container-border-color-accent-error-hover
|
button.container.border-color.accent.error.active
|
color |
{global.border.accent.functional.error.active}
|
#531A16
|
--button-container-border-color-accent-error-active
|
button.container.border-color.accent.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--button-container-border-color-accent-disabled
|
button.container.border-color.subtle.neutral.default
|
color |
{global.border.subtle.neutral.default}
|
light
#DFDBDC
dark
#36363680
|
--button-container-border-color-subtle-neutral-default
|
button.container.border-color.subtle.neutral.hover
|
color |
{global.border.subtle.neutral.hover}
|
light
#D7D3D4
dark
#363636
|
--button-container-border-color-subtle-neutral-hover
|
button.container.border-color.subtle.neutral.active
|
color |
{global.border.subtle.neutral.active}
|
light
#B6B4B4
dark
#767676
|
--button-container-border-color-subtle-neutral-active
|
button.container.border-color.subtle.brand.default
|
color |
{global.border.subtle.brand.default}
|
light
#DDE6F5
dark
#0D272E
|
--button-container-border-color-subtle-brand-default
|
button.container.border-color.subtle.brand.hover
|
color |
{global.border.subtle.brand.hover}
|
light
#BFD1F1
dark
#10363E
|
--button-container-border-color-subtle-brand-hover
|
button.container.border-color.subtle.brand.active
|
color |
{global.border.subtle.brand.active}
|
light
#9BB9EC
dark
#1F606E
|
--button-container-border-color-subtle-brand-active
|
button.container.border-color.subtle.error.default
|
color |
{global.border.subtle.functional.error.default}
|
light
#FCCDC6
dark
#3E130F
|
--button-container-border-color-subtle-error-default
|
button.container.border-color.subtle.error.hover
|
color |
{global.border.subtle.functional.error.hover}
|
light
#FAA79D
dark
#531A16
|
--button-container-border-color-subtle-error-hover
|
button.container.border-color.subtle.error.active
|
color |
{global.border.subtle.functional.error.active}
|
light
#F88275
dark
#940E11
|
--button-container-border-color-subtle-error-active
|
button.container.border-color.subtle.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--button-container-border-color-subtle-disabled
|
button.container.border-color.ghost.neutral.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-border-color-ghost-neutral-default
|
button.container.border-color.ghost.neutral.hover
|
color |
{global.border.subtle.neutral.default}
|
light
#DFDBDC
dark
#36363680
|
--button-container-border-color-ghost-neutral-hover
|
button.container.border-color.ghost.neutral.active
|
color |
{global.border.subtle.neutral.hover}
|
light
#D7D3D4
dark
#363636
|
--button-container-border-color-ghost-neutral-active
|
button.container.border-color.ghost.brand.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-border-color-ghost-brand-default
|
button.container.border-color.ghost.brand.hover
|
color |
{global.border.subtle.brand.default}
|
light
#DDE6F5
dark
#0D272E
|
--button-container-border-color-ghost-brand-hover
|
button.container.border-color.ghost.brand.active
|
color |
{global.border.subtle.brand.hover}
|
light
#BFD1F1
dark
#10363E
|
--button-container-border-color-ghost-brand-active
|
button.container.border-color.ghost.error.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-border-color-ghost-error-default
|
button.container.border-color.ghost.error.hover
|
color |
{global.border.subtle.functional.error.default}
|
light
#FCCDC6
dark
#3E130F
|
--button-container-border-color-ghost-error-hover
|
button.container.border-color.ghost.error.active
|
color |
{global.border.subtle.functional.error.hover}
|
light
#FAA79D
dark
#531A16
|
--button-container-border-color-ghost-error-active
|
button.container.border-color.ghost.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--button-container-border-color-ghost-disabled
|
button.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--button-container-border-width
|
button.container.border-radius.xsmall
|
dimension |
{corner-radius.2xs}
|
2px
|
--button-container-border-radius-xsmall
|
button.container.border-radius.small
|
dimension |
{corner-radius.2xs}
|
2px
|
--button-container-border-radius-small
|
button.container.border-radius.medium
|
dimension |
{corner-radius.xs}
|
4px
|
--button-container-border-radius-medium
|
button.container.border-radius.large
|
dimension |
{corner-radius.xs}
|
4px
|
--button-container-border-radius-large
|
button.container.padding-inline.xsmall
|
dimension |
{space.6}
|
6px
|
--button-container-padding-inline-xsmall
|
button.container.padding-inline.small
|
dimension |
{space.8}
|
8px
|
--button-container-padding-inline-small
|
button.container.padding-inline.medium
|
dimension |
{space.12}
|
12px
|
--button-container-padding-inline-medium
|
button.container.padding-inline.large
|
dimension |
{space.16}
|
16px
|
--button-container-padding-inline-large
|
button.container.padding-inline.icon-side.xsmall
|
dimension |
{space.2}
|
2px
|
--button-container-padding-inline-icon-side-xsmall
|
button.container.padding-inline.icon-side.small
|
dimension |
{space.6}
|
6px
|
--button-container-padding-inline-icon-side-small
|
button.container.padding-inline.icon-side.medium
|
dimension |
{space.6}
|
6px
|
--button-container-padding-inline-icon-side-medium
|
button.container.padding-inline.icon-side.large
|
dimension |
{space.8}
|
8px
|
--button-container-padding-inline-icon-side-large
|
button.container.padding-inline.label-side.xsmall
|
dimension |
{space.6}
|
6px
|
--button-container-padding-inline-label-side-xsmall
|
button.container.padding-inline.label-side.small
|
dimension |
{space.8}
|
8px
|
--button-container-padding-inline-label-side-small
|
button.container.padding-inline.label-side.medium
|
dimension |
{space.8}
|
8px
|
--button-container-padding-inline-label-side-medium
|
button.container.padding-inline.label-side.large
|
dimension |
{space.10}
|
10px
|
--button-container-padding-inline-label-side-large
|
button.container.min-height.xsmall
|
dimension |
{space.24}
|
24px
|
--button-container-min-height-xsmall
|
button.container.min-height.small
|
dimension |
{space.28}
|
28px
|
--button-container-min-height-small
|
button.container.min-height.medium
|
dimension |
{space.36}
|
36px
|
--button-container-min-height-medium
|
button.container.min-height.large
|
dimension |
{space.44}
|
44px
|
--button-container-min-height-large
|
button.container.padding-block.xsmall
|
dimension |
{space.2}
|
2px
|
--button-container-padding-block-xsmall
|
button.container.padding-block.small
|
dimension |
{space.3}
|
3px
|
--button-container-padding-block-small
|
button.container.padding-block.medium
|
dimension |
{space.5}
|
5px
|
--button-container-padding-block-medium
|
button.container.padding-block.large
|
dimension |
{space.8}
|
8px
|
--button-container-padding-block-large
|
button.container.gap.xsmall
|
dimension |
{space.2}
|
2px
|
--button-container-gap-xsmall
|
button.container.gap.small
|
dimension |
{space.2}
|
2px
|
--button-container-gap-small
|
button.container.gap.medium
|
dimension |
{space.4}
|
4px
|
--button-container-gap-medium
|
button.container.gap.large
|
dimension |
{space.4}
|
4px
|
--button-container-gap-large
|
button.container.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--button-container-outline-width-focus-visible
|
button.container.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--button-container-outline-offset-focus-visible
|
button.container.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--button-container-outline-color-focus-visible
|
button.container.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--button-container-transition-duration
|
button.container.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--button-container-transition-easing
|
button.label.color.accent.neutral.default
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--button-label-color-accent-neutral-default
|
button.label.color.accent.neutral.hover
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--button-label-color-accent-neutral-hover
|
button.label.color.accent.neutral.active
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--button-label-color-accent-neutral-active
|
button.label.color.accent.brand.default
|
color |
{global.text.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--button-label-color-accent-brand-default
|
button.label.color.accent.brand.hover
|
color |
{global.text.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--button-label-color-accent-brand-hover
|
button.label.color.accent.brand.active
|
color |
{global.text.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--button-label-color-accent-brand-active
|
button.label.color.accent.error.default
|
color |
{global.text.on-accent.functional.error.default}
|
#FEFBFA
|
--button-label-color-accent-error-default
|
button.label.color.accent.error.hover
|
color |
{global.text.on-accent.functional.error.default}
|
#FEFBFA
|
--button-label-color-accent-error-hover
|
button.label.color.accent.error.active
|
color |
{global.text.on-accent.functional.error.default}
|
#FEFBFA
|
--button-label-color-accent-error-active
|
button.label.color.accent.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--button-label-color-accent-disabled
|
button.label.color.subtle.neutral.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-subtle-neutral-default
|
button.label.color.subtle.neutral.hover
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-subtle-neutral-hover
|
button.label.color.subtle.neutral.active
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-subtle-neutral-active
|
button.label.color.subtle.brand.default
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-subtle-brand-default
|
button.label.color.subtle.brand.hover
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-subtle-brand-hover
|
button.label.color.subtle.brand.active
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-subtle-brand-active
|
button.label.color.subtle.error.default
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-subtle-error-default
|
button.label.color.subtle.error.hover
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-subtle-error-hover
|
button.label.color.subtle.error.active
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-subtle-error-active
|
button.label.color.subtle.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--button-label-color-subtle-disabled
|
button.label.color.ghost.neutral.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-ghost-neutral-default
|
button.label.color.ghost.neutral.hover
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-ghost-neutral-hover
|
button.label.color.ghost.neutral.active
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-ghost-neutral-active
|
button.label.color.ghost.brand.default
|
color |
{global.text.on-base.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--button-label-color-ghost-brand-default
|
button.label.color.ghost.brand.hover
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-ghost-brand-hover
|
button.label.color.ghost.brand.active
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-ghost-brand-active
|
button.label.color.ghost.error.default
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-ghost-error-default
|
button.label.color.ghost.error.hover
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-ghost-error-hover
|
button.label.color.ghost.error.active
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-ghost-error-active
|
button.label.color.ghost.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--button-label-color-ghost-disabled
|
button.label.typography.xsmall
|
typography |
{body.family}{body.size.xs}{body.weight.medium}{font.line-height.compact}{font.letter-spacing.tight.xs}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":500,"lineHeight":1,"letterSpacing":{"value":-0.24,"unit":"px"}}
|
--button-label-typography-xsmall-font-family--button-label-typography-xsmall-font-size--button-label-typography-xsmall-font-weight--button-label-typography-xsmall-line-height--button-label-typography-xsmall-letter-spacing
|
button.label.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.compact}{font.letter-spacing.tight.sm}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1,"letterSpacing":{"value":-0.28,"unit":"px"}}
|
--button-label-typography-small-font-family--button-label-typography-small-font-size--button-label-typography-small-font-weight--button-label-typography-small-line-height--button-label-typography-small-letter-spacing
|
button.label.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.compact}{font.letter-spacing.tight.md}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1,"letterSpacing":{"value":-0.48,"unit":"px"}}
|
--button-label-typography-medium-font-family--button-label-typography-medium-font-size--button-label-typography-medium-font-weight--button-label-typography-medium-line-height--button-label-typography-medium-letter-spacing
|
button.label.typography.large
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.compact}{font.letter-spacing.tight.md}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1,"letterSpacing":{"value":-0.48,"unit":"px"}}
|
--button-label-typography-large-font-family--button-label-typography-large-font-size--button-label-typography-large-font-weight--button-label-typography-large-line-height--button-label-typography-large-letter-spacing
|
button.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--button-icon-font-family
|
button.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--button-icon-font-weight
|
button.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--button-icon-fill
|
button.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--button-icon-grade
|
button.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--button-icon-optical-size
|
button.icon.size.xsmall
|
dimension |
{size.2}
|
16px
|
--button-icon-size-xsmall
|
button.icon.size.small
|
dimension |
{size.3}
|
20px
|
--button-icon-size-small
|
button.icon.size.medium
|
dimension |
{size.4}
|
24px
|
--button-icon-size-medium
|
button.icon.size.large
|
dimension |
{size.4}
|
24px
|
--button-icon-size-large
|
card
(12)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
card.container.background.level-1
|
color |
{global.bg.level.1.default}
|
light
#F7F6F6
dark
#212121
|
--card-container-background-level-1
|
card.container.background.level-2
|
color |
{global.bg.level.2.default}
|
light
#FDFDFD
dark
#282828
|
--card-container-background-level-2
|
card.container.border-color.level-1
|
color |
{global.border.level.edge.level.1}
|
light
#D7D3D4
dark
#282828
|
--card-container-border-color-level-1
|
card.container.border-color.level-2
|
color |
{global.border.level.edge.level.2}
|
light
#DFDBDC
dark
#303030
|
--card-container-border-color-level-2
|
card.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--card-container-border-width
|
card.container.border-radius
|
dimension |
{corner-radius.sm}
|
8px
|
--card-container-border-radius
|
card.container.padding
|
dimension |
{space.16}
|
16px
|
--card-container-padding
|
card.container.gap
|
dimension |
{space.8}
|
8px
|
--card-container-gap
|
card.title.color
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--card-title-color
|
card.title.typography
|
typography |
{heading.family}{heading.size.2xs}{heading.weight.semi-bold}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":600,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--card-title-typography-font-family--card-title-typography-font-size--card-title-typography-font-weight--card-title-typography-line-height--card-title-typography-letter-spacing
|
card.description.color
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--card-description-color
|
card.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--card-description-typography-font-family--card-description-typography-font-size--card-description-typography-font-weight--card-description-typography-line-height--card-description-typography-letter-spacing
|
checkbox-group
(42)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.container.row-gap
Between the legend, the description, the options and the error message.
|
dimension |
{space.8}
|
8px
|
--checkbox-group-container-row-gap
|
checkbox-group.container.gap.vertical
|
dimension |
{space.8}
|
8px
|
--checkbox-group-container-gap-vertical
|
checkbox-group.container.gap.horizontal
|
dimension |
{space.16}
|
16px
|
--checkbox-group-container-gap-horizontal
|
checkbox-group.legend.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--checkbox-group-legend-color-default
|
checkbox-group.legend.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-legend-color-disabled
|
checkbox-group.legend.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-legend-typography-font-family--checkbox-group-legend-typography-font-size--checkbox-group-legend-typography-font-weight--checkbox-group-legend-typography-line-height--checkbox-group-legend-typography-letter-spacing
|
checkbox-group.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--checkbox-group-description-color-default
|
checkbox-group.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-description-color-disabled
|
checkbox-group.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-description-typography-font-family--checkbox-group-description-typography-font-size--checkbox-group-description-typography-font-weight--checkbox-group-description-typography-line-height--checkbox-group-description-typography-letter-spacing
|
checkbox-group.error-message.color
|
color |
{global.text.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--checkbox-group-error-message-color
|
checkbox-group.error-message.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-error-message-typography-font-family--checkbox-group-error-message-typography-font-size--checkbox-group-error-message-typography-font-weight--checkbox-group-error-message-typography-line-height--checkbox-group-error-message-typography-letter-spacing
|
checkbox-group.option.column-gap
Between the radio and its label column.
|
dimension |
{space.8}
|
8px
|
--checkbox-group-option-column-gap
|
checkbox-group.option.row-gap
Between an option's label and its description.
|
dimension |
{space.2}
|
2px
|
--checkbox-group-option-row-gap
|
checkbox-group.control.size.small
|
dimension |
{size.2}
|
16px
|
--checkbox-group-control-size-small
|
checkbox-group.control.size.medium
|
dimension |
{size.3}
|
20px
|
--checkbox-group-control-size-medium
|
checkbox-group.control.border-radius.small
|
dimension |
{corner-radius.2xs}
|
2px
|
--checkbox-group-control-border-radius-small
|
checkbox-group.control.border-radius.medium
|
dimension |
{corner-radius.xs}
|
4px
|
--checkbox-group-control-border-radius-medium
|
checkbox-group.control.border-width
|
dimension |
{stroke-width.md}
|
1.2px
|
--checkbox-group-control-border-width
|
checkbox-group.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--checkbox-group-control-background-default
|
checkbox-group.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--checkbox-group-control-background-hover
|
checkbox-group.control.background.checked
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--checkbox-group-control-background-checked
|
checkbox-group.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--checkbox-group-control-background-disabled
|
checkbox-group.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--checkbox-group-control-border-color-default
|
checkbox-group.control.border-color.hover
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--checkbox-group-control-border-color-hover
|
checkbox-group.control.border-color.checked
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--checkbox-group-control-border-color-checked
|
checkbox-group.control.border-color.invalid
|
color |
{global.border.base.functional.error.default}
|
light
#C01619
dark
#E12A23
|
--checkbox-group-control-border-color-invalid
|
checkbox-group.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--checkbox-group-control-border-color-disabled
|
checkbox-group.control.color.checked
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--checkbox-group-control-color-checked
|
checkbox-group.control.color.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-control-color-disabled
|
checkbox-group.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--checkbox-group-control-outline-width-focus-visible
|
checkbox-group.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--checkbox-group-control-outline-offset-focus-visible
|
checkbox-group.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--checkbox-group-control-outline-color-focus-visible
|
checkbox-group.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--checkbox-group-control-transition-duration
|
checkbox-group.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--checkbox-group-control-transition-easing
|
checkbox-group.option-label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--checkbox-group-option-label-color-default
|
checkbox-group.option-label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-option-label-color-disabled
|
checkbox-group.option-label.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-option-label-typography-small-font-family--checkbox-group-option-label-typography-small-font-size--checkbox-group-option-label-typography-small-font-weight--checkbox-group-option-label-typography-small-line-height--checkbox-group-option-label-typography-small-letter-spacing
|
checkbox-group.option-label.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-option-label-typography-medium-font-family--checkbox-group-option-label-typography-medium-font-size--checkbox-group-option-label-typography-medium-font-weight--checkbox-group-option-label-typography-medium-line-height--checkbox-group-option-label-typography-medium-letter-spacing
|
checkbox-group.option-description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--checkbox-group-option-description-color-default
|
checkbox-group.option-description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-option-description-color-disabled
|
checkbox-group.option-description.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-option-description-typography-small-font-family--checkbox-group-option-description-typography-small-font-size--checkbox-group-option-description-typography-small-font-weight--checkbox-group-option-description-typography-small-line-height--checkbox-group-option-description-typography-small-letter-spacing
|
checkbox-group.option-description.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-option-description-typography-medium-font-family--checkbox-group-option-description-typography-medium-font-size--checkbox-group-option-description-typography-medium-font-weight--checkbox-group-option-description-typography-medium-line-height--checkbox-group-option-description-typography-medium-letter-spacing
|
checkbox
(34)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox.container.column-gap
Between the control and the label column.
|
dimension |
{space.8}
|
8px
|
--checkbox-container-column-gap
|
checkbox.container.row-gap
Between the label and its description.
|
dimension |
{space.2}
|
2px
|
--checkbox-container-row-gap
|
checkbox.control.size.small
|
dimension |
{size.2}
|
16px
|
--checkbox-control-size-small
|
checkbox.control.size.medium
|
dimension |
{size.3}
|
20px
|
--checkbox-control-size-medium
|
checkbox.control.border-radius.small
|
dimension |
{corner-radius.2xs}
|
2px
|
--checkbox-control-border-radius-small
|
checkbox.control.border-radius.medium
|
dimension |
{corner-radius.xs}
|
4px
|
--checkbox-control-border-radius-medium
|
checkbox.control.border-width
|
dimension |
{stroke-width.md}
|
1.2px
|
--checkbox-control-border-width
|
checkbox.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--checkbox-control-background-default
|
checkbox.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--checkbox-control-background-hover
|
checkbox.control.background.checked
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--checkbox-control-background-checked
|
checkbox.control.background.indeterminate
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--checkbox-control-background-indeterminate
|
checkbox.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--checkbox-control-background-disabled
|
checkbox.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--checkbox-control-border-color-default
|
checkbox.control.border-color.hover
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--checkbox-control-border-color-hover
|
checkbox.control.border-color.checked
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--checkbox-control-border-color-checked
|
checkbox.control.border-color.indeterminate
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--checkbox-control-border-color-indeterminate
|
checkbox.control.border-color.invalid
|
color |
{global.border.base.functional.error.default}
|
light
#C01619
dark
#E12A23
|
--checkbox-control-border-color-invalid
|
checkbox.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--checkbox-control-border-color-disabled
|
checkbox.control.color.checked
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--checkbox-control-color-checked
|
checkbox.control.color.indeterminate
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--checkbox-control-color-indeterminate
|
checkbox.control.color.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-control-color-disabled
|
checkbox.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--checkbox-control-outline-width-focus-visible
|
checkbox.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--checkbox-control-outline-offset-focus-visible
|
checkbox.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--checkbox-control-outline-color-focus-visible
|
checkbox.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--checkbox-control-transition-duration
|
checkbox.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--checkbox-control-transition-easing
|
checkbox.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--checkbox-label-color-default
|
checkbox.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-label-color-disabled
|
checkbox.label.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-label-typography-small-font-family--checkbox-label-typography-small-font-size--checkbox-label-typography-small-font-weight--checkbox-label-typography-small-line-height--checkbox-label-typography-small-letter-spacing
|
checkbox.label.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-label-typography-medium-font-family--checkbox-label-typography-medium-font-size--checkbox-label-typography-medium-font-weight--checkbox-label-typography-medium-line-height--checkbox-label-typography-medium-letter-spacing
|
checkbox.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--checkbox-description-color-default
|
checkbox.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-description-color-disabled
|
checkbox.description.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-description-typography-small-font-family--checkbox-description-typography-small-font-size--checkbox-description-typography-small-font-weight--checkbox-description-typography-small-line-height--checkbox-description-typography-small-letter-spacing
|
checkbox.description.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-description-typography-medium-font-family--checkbox-description-typography-medium-font-size--checkbox-description-typography-medium-font-weight--checkbox-description-typography-medium-line-height--checkbox-description-typography-medium-letter-spacing
|
divider
(5)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
divider.container.color
|
color |
{global.border.base.neutral.4}
|
light
#B6B4B4
dark
#363636
|
--divider-container-color
|
divider.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--divider-container-border-width
|
divider.container.margin-block.horizontal
|
dimension |
{space.16}
|
16px
|
--divider-container-margin-block-horizontal
|
divider.container.margin-inline.vertical
|
dimension |
{space.16}
|
16px
|
--divider-container-margin-inline-vertical
|
divider.container.min-height.vertical
|
dimension |
{space.24}
|
24px
|
--divider-container-min-height-vertical
|
dropdown
(39)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
dropdown.menu.background
The menu is a level 2 surface, whatever the surface it opens over: in dark mode it stays lighter than the page and than a level 1 panel.
|
color |
{global.bg.level.2.default}
|
light
#FDFDFD
dark
#282828
|
--dropdown-menu-background
|
dropdown.menu.border-color
|
color |
{global.border.level.edge.level.2}
|
light
#DFDBDC
dark
#303030
|
--dropdown-menu-border-color
|
dropdown.menu.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--dropdown-menu-border-width
|
dropdown.menu.border-radius
|
dimension |
{corner-radius.sm}
|
8px
|
--dropdown-menu-border-radius
|
dropdown.menu.padding
Wider than the focus ring and its offset, so the ring of an item is never cut by the menu edge.
|
dimension |
{space.8}
|
8px
|
--dropdown-menu-padding
|
dropdown.menu.offset
Distance between the trigger and the menu.
|
dimension |
{space.4}
|
4px
|
--dropdown-menu-offset
|
dropdown.separator.color
|
color |
{global.border.level.on-level.2}
|
light
#ECE8E9
dark
#767676
|
--dropdown-separator-color
|
dropdown.separator.width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--dropdown-separator-width
|
dropdown.separator.margin-block
|
dimension |
{space.4}
|
4px
|
--dropdown-separator-margin-block
|
dropdown.item.background.neutral.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--dropdown-item-background-neutral-default
|
dropdown.item.background.neutral.hover
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--dropdown-item-background-neutral-hover
|
dropdown.item.background.neutral.active
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--dropdown-item-background-neutral-active
|
dropdown.item.background.error.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--dropdown-item-background-error-default
|
dropdown.item.background.error.hover
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--dropdown-item-background-error-hover
|
dropdown.item.background.error.active
|
color |
{global.bg.subtle.functional.error.hover}
|
light
#FCCDC6
dark
#3E130F
|
--dropdown-item-background-error-active
|
dropdown.item.background.disabled
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--dropdown-item-background-disabled
|
dropdown.item.min-height
|
dimension |
{space.32}
|
32px
|
--dropdown-item-min-height
|
dropdown.item.padding-inline
|
dimension |
{space.8}
|
8px
|
--dropdown-item-padding-inline
|
dropdown.item.gap
|
dimension |
{space.8}
|
8px
|
--dropdown-item-gap
|
dropdown.item.border-radius
|
dimension |
{corner-radius.2xs}
|
2px
|
--dropdown-item-border-radius
|
dropdown.item.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--dropdown-item-outline-width-focus-visible
|
dropdown.item.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--dropdown-item-outline-offset-focus-visible
|
dropdown.item.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--dropdown-item-outline-color-focus-visible
|
dropdown.item.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--dropdown-item-transition-duration
|
dropdown.item.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--dropdown-item-transition-easing
|
dropdown.item-label.color.neutral.default
|
color |
{global.text.on-subtle.neutral.default}
|
light
#323031
dark
#E3DDDE
|
--dropdown-item-label-color-neutral-default
|
dropdown.item-label.color.neutral.hover
|
color |
{global.text.on-subtle.neutral.default}
|
light
#323031
dark
#E3DDDE
|
--dropdown-item-label-color-neutral-hover
|
dropdown.item-label.color.neutral.active
|
color |
{global.text.on-subtle.neutral.default}
|
light
#323031
dark
#E3DDDE
|
--dropdown-item-label-color-neutral-active
|
dropdown.item-label.color.error.default
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--dropdown-item-label-color-error-default
|
dropdown.item-label.color.error.hover
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--dropdown-item-label-color-error-hover
|
dropdown.item-label.color.error.active
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--dropdown-item-label-color-error-active
|
dropdown.item-label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--dropdown-item-label-color-disabled
|
dropdown.item-label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--dropdown-item-label-typography-font-family--dropdown-item-label-typography-font-size--dropdown-item-label-typography-font-weight--dropdown-item-label-typography-line-height--dropdown-item-label-typography-letter-spacing
|
dropdown.item-icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--dropdown-item-icon-font-family
|
dropdown.item-icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--dropdown-item-icon-font-weight
|
dropdown.item-icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--dropdown-item-icon-fill
|
dropdown.item-icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--dropdown-item-icon-grade
|
dropdown.item-icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--dropdown-item-icon-optical-size
|
dropdown.item-icon.size
|
dimension |
{size.2}
|
16px
|
--dropdown-item-icon-size
|
icon-button
(117)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
icon-button.container.background.accent.neutral.default
|
color |
{global.bg.accent.neutral.default}
|
light
#201E1F
dark
#E8E3E4
|
--icon-button-container-background-accent-neutral-default
|
icon-button.container.background.accent.neutral.hover
|
color |
{global.bg.accent.neutral.hover}
|
light
#323031
dark
#D2CECF
|
--icon-button-container-background-accent-neutral-hover
|
icon-button.container.background.accent.neutral.active
|
color |
{global.bg.accent.neutral.active}
|
light
#4C4A4A
dark
#B9B7B7
|
--icon-button-container-background-accent-neutral-active
|
icon-button.container.background.accent.brand.default
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--icon-button-container-background-accent-brand-default
|
icon-button.container.background.accent.brand.hover
|
color |
{global.bg.accent.brand.hover}
|
light
#1148A9
dark
#53D6F2
|
--icon-button-container-background-accent-brand-hover
|
icon-button.container.background.accent.brand.active
|
color |
{global.bg.accent.brand.active}
|
light
#0B2A69
dark
#41B9D3
|
--icon-button-container-background-accent-brand-active
|
icon-button.container.background.accent.error.default
|
color |
{global.bg.accent.functional.error.default}
|
#E12A23
|
--icon-button-container-background-accent-error-default
|
icon-button.container.background.accent.error.hover
|
color |
{global.bg.accent.functional.error.hover}
|
#C01619
|
--icon-button-container-background-accent-error-hover
|
icon-button.container.background.accent.error.active
|
color |
{global.bg.accent.functional.error.active}
|
#940E11
|
--icon-button-container-background-accent-error-active
|
icon-button.container.background.accent.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--icon-button-container-background-accent-disabled
|
icon-button.container.background.subtle.neutral.default
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--icon-button-container-background-subtle-neutral-default
|
icon-button.container.background.subtle.neutral.hover
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--icon-button-container-background-subtle-neutral-hover
|
icon-button.container.background.subtle.neutral.active
|
color |
{global.bg.subtle.neutral.active}
|
light
#B6B4B433
dark
#76767680
|
--icon-button-container-background-subtle-neutral-active
|
icon-button.container.background.subtle.brand.default
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--icon-button-container-background-subtle-brand-default
|
icon-button.container.background.subtle.brand.hover
|
color |
{global.bg.subtle.brand.hover}
|
light
#DDE6F5
dark
#0D272E
|
--icon-button-container-background-subtle-brand-hover
|
icon-button.container.background.subtle.brand.active
|
color |
{global.bg.subtle.brand.active}
|
light
#BFD1F1
dark
#10363E
|
--icon-button-container-background-subtle-brand-active
|
icon-button.container.background.subtle.error.default
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--icon-button-container-background-subtle-error-default
|
icon-button.container.background.subtle.error.hover
|
color |
{global.bg.subtle.functional.error.hover}
|
light
#FCCDC6
dark
#3E130F
|
--icon-button-container-background-subtle-error-hover
|
icon-button.container.background.subtle.error.active
|
color |
{global.bg.subtle.functional.error.active}
|
light
#FAA79D
dark
#531A16
|
--icon-button-container-background-subtle-error-active
|
icon-button.container.background.subtle.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--icon-button-container-background-subtle-disabled
|
icon-button.container.background.ghost.neutral.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--icon-button-container-background-ghost-neutral-default
|
icon-button.container.background.ghost.neutral.hover
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--icon-button-container-background-ghost-neutral-hover
|
icon-button.container.background.ghost.neutral.active
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--icon-button-container-background-ghost-neutral-active
|
icon-button.container.background.ghost.brand.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--icon-button-container-background-ghost-brand-default
|
icon-button.container.background.ghost.brand.hover
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--icon-button-container-background-ghost-brand-hover
|
icon-button.container.background.ghost.brand.active
|
color |
{global.bg.subtle.brand.hover}
|
light
#DDE6F5
dark
#0D272E
|
--icon-button-container-background-ghost-brand-active
|
icon-button.container.background.ghost.error.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--icon-button-container-background-ghost-error-default
|
icon-button.container.background.ghost.error.hover
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--icon-button-container-background-ghost-error-hover
|
icon-button.container.background.ghost.error.active
|
color |
{global.bg.subtle.functional.error.hover}
|
light
#FCCDC6
dark
#3E130F
|
--icon-button-container-background-ghost-error-active
|
icon-button.container.background.ghost.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--icon-button-container-background-ghost-disabled
|
icon-button.container.border-color.accent.neutral.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--icon-button-container-border-color-accent-neutral-default
|
icon-button.container.border-color.accent.neutral.hover
|
color |
{global.border.accent.neutral.hover}
|
light
#4C4A4A
dark
#B9B7B7
|
--icon-button-container-border-color-accent-neutral-hover
|
icon-button.container.border-color.accent.neutral.active
|
color |
{global.border.accent.neutral.active}
|
light
#616161
dark
#9D9B9C
|
--icon-button-container-border-color-accent-neutral-active
|
icon-button.container.border-color.accent.brand.default
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--icon-button-container-border-color-accent-brand-default
|
icon-button.container.border-color.accent.brand.hover
|
color |
{global.border.accent.brand.hover}
|
light
#0B2A69
dark
#41B9D3
|
--icon-button-container-border-color-accent-brand-hover
|
icon-button.container.border-color.accent.brand.active
|
color |
{global.border.accent.brand.active}
|
light
#0B204D
dark
#3499AF
|
--icon-button-container-border-color-accent-brand-active
|
icon-button.container.border-color.accent.error.default
|
color |
{global.border.accent.functional.error.default}
|
#C01619
|
--icon-button-container-border-color-accent-error-default
|
icon-button.container.border-color.accent.error.hover
|
color |
{global.border.accent.functional.error.hover}
|
#940E11
|
--icon-button-container-border-color-accent-error-hover
|
icon-button.container.border-color.accent.error.active
|
color |
{global.border.accent.functional.error.active}
|
#531A16
|
--icon-button-container-border-color-accent-error-active
|
icon-button.container.border-color.accent.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--icon-button-container-border-color-accent-disabled
|
icon-button.container.border-color.subtle.neutral.default
|
color |
{global.border.subtle.neutral.default}
|
light
#DFDBDC
dark
#36363680
|
--icon-button-container-border-color-subtle-neutral-default
|
icon-button.container.border-color.subtle.neutral.hover
|
color |
{global.border.subtle.neutral.hover}
|
light
#D7D3D4
dark
#363636
|
--icon-button-container-border-color-subtle-neutral-hover
|
icon-button.container.border-color.subtle.neutral.active
|
color |
{global.border.subtle.neutral.active}
|
light
#B6B4B4
dark
#767676
|
--icon-button-container-border-color-subtle-neutral-active
|
icon-button.container.border-color.subtle.brand.default
|
color |
{global.border.subtle.brand.default}
|
light
#DDE6F5
dark
#0D272E
|
--icon-button-container-border-color-subtle-brand-default
|
icon-button.container.border-color.subtle.brand.hover
|
color |
{global.border.subtle.brand.hover}
|
light
#BFD1F1
dark
#10363E
|
--icon-button-container-border-color-subtle-brand-hover
|
icon-button.container.border-color.subtle.brand.active
|
color |
{global.border.subtle.brand.active}
|
light
#9BB9EC
dark
#1F606E
|
--icon-button-container-border-color-subtle-brand-active
|
icon-button.container.border-color.subtle.error.default
|
color |
{global.border.subtle.functional.error.default}
|
light
#FCCDC6
dark
#3E130F
|
--icon-button-container-border-color-subtle-error-default
|
icon-button.container.border-color.subtle.error.hover
|
color |
{global.border.subtle.functional.error.hover}
|
light
#FAA79D
dark
#531A16
|
--icon-button-container-border-color-subtle-error-hover
|
icon-button.container.border-color.subtle.error.active
|
color |
{global.border.subtle.functional.error.active}
|
light
#F88275
dark
#940E11
|
--icon-button-container-border-color-subtle-error-active
|
icon-button.container.border-color.subtle.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--icon-button-container-border-color-subtle-disabled
|
icon-button.container.border-color.ghost.neutral.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--icon-button-container-border-color-ghost-neutral-default
|
icon-button.container.border-color.ghost.neutral.hover
|
color |
{global.border.subtle.neutral.default}
|
light
#DFDBDC
dark
#36363680
|
--icon-button-container-border-color-ghost-neutral-hover
|
icon-button.container.border-color.ghost.neutral.active
|
color |
{global.border.subtle.neutral.hover}
|
light
#D7D3D4
dark
#363636
|
--icon-button-container-border-color-ghost-neutral-active
|
icon-button.container.border-color.ghost.brand.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--icon-button-container-border-color-ghost-brand-default
|
icon-button.container.border-color.ghost.brand.hover
|
color |
{global.border.subtle.brand.default}
|
light
#DDE6F5
dark
#0D272E
|
--icon-button-container-border-color-ghost-brand-hover
|
icon-button.container.border-color.ghost.brand.active
|
color |
{global.border.subtle.brand.hover}
|
light
#BFD1F1
dark
#10363E
|
--icon-button-container-border-color-ghost-brand-active
|
icon-button.container.border-color.ghost.error.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--icon-button-container-border-color-ghost-error-default
|
icon-button.container.border-color.ghost.error.hover
|
color |
{global.border.subtle.functional.error.default}
|
light
#FCCDC6
dark
#3E130F
|
--icon-button-container-border-color-ghost-error-hover
|
icon-button.container.border-color.ghost.error.active
|
color |
{global.border.subtle.functional.error.hover}
|
light
#FAA79D
dark
#531A16
|
--icon-button-container-border-color-ghost-error-active
|
icon-button.container.border-color.ghost.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--icon-button-container-border-color-ghost-disabled
|
icon-button.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--icon-button-container-border-width
|
icon-button.container.border-radius.xsmall
|
dimension |
{corner-radius.2xs}
|
2px
|
--icon-button-container-border-radius-xsmall
|
icon-button.container.border-radius.small
|
dimension |
{corner-radius.2xs}
|
2px
|
--icon-button-container-border-radius-small
|
icon-button.container.border-radius.medium
|
dimension |
{corner-radius.xs}
|
4px
|
--icon-button-container-border-radius-medium
|
icon-button.container.border-radius.large
|
dimension |
{corner-radius.xs}
|
4px
|
--icon-button-container-border-radius-large
|
icon-button.container.min-height.xsmall
|
dimension |
{space.24}
|
24px
|
--icon-button-container-min-height-xsmall
|
icon-button.container.min-height.small
|
dimension |
{space.28}
|
28px
|
--icon-button-container-min-height-small
|
icon-button.container.min-height.medium
|
dimension |
{space.36}
|
36px
|
--icon-button-container-min-height-medium
|
icon-button.container.min-height.large
|
dimension |
{space.44}
|
44px
|
--icon-button-container-min-height-large
|
icon-button.container.min-width.xsmall
|
dimension |
{space.24}
|
24px
|
--icon-button-container-min-width-xsmall
|
icon-button.container.min-width.small
|
dimension |
{space.28}
|
28px
|
--icon-button-container-min-width-small
|
icon-button.container.min-width.medium
|
dimension |
{space.36}
|
36px
|
--icon-button-container-min-width-medium
|
icon-button.container.min-width.large
|
dimension |
{space.44}
|
44px
|
--icon-button-container-min-width-large
|
icon-button.container.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--icon-button-container-outline-width-focus-visible
|
icon-button.container.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--icon-button-container-outline-offset-focus-visible
|
icon-button.container.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--icon-button-container-outline-color-focus-visible
|
icon-button.container.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--icon-button-container-transition-duration
|
icon-button.container.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--icon-button-container-transition-easing
|
icon-button.icon.color.accent.neutral.default
|
color |
{global.icon.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--icon-button-icon-color-accent-neutral-default
|
icon-button.icon.color.accent.neutral.hover
|
color |
{global.icon.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--icon-button-icon-color-accent-neutral-hover
|
icon-button.icon.color.accent.neutral.active
|
color |
{global.icon.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--icon-button-icon-color-accent-neutral-active
|
icon-button.icon.color.accent.brand.default
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--icon-button-icon-color-accent-brand-default
|
icon-button.icon.color.accent.brand.hover
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--icon-button-icon-color-accent-brand-hover
|
icon-button.icon.color.accent.brand.active
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--icon-button-icon-color-accent-brand-active
|
icon-button.icon.color.accent.error.default
|
color |
{global.icon.on-accent.functional.error.default}
|
#FEFBFA
|
--icon-button-icon-color-accent-error-default
|
icon-button.icon.color.accent.error.hover
|
color |
{global.icon.on-accent.functional.error.default}
|
#FEFBFA
|
--icon-button-icon-color-accent-error-hover
|
icon-button.icon.color.accent.error.active
|
color |
{global.icon.on-accent.functional.error.default}
|
#FEFBFA
|
--icon-button-icon-color-accent-error-active
|
icon-button.icon.color.accent.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--icon-button-icon-color-accent-disabled
|
icon-button.icon.color.subtle.neutral.default
|
color |
{global.icon.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--icon-button-icon-color-subtle-neutral-default
|
icon-button.icon.color.subtle.neutral.hover
|
color |
{global.icon.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--icon-button-icon-color-subtle-neutral-hover
|
icon-button.icon.color.subtle.neutral.active
|
color |
{global.icon.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--icon-button-icon-color-subtle-neutral-active
|
icon-button.icon.color.subtle.brand.default
|
color |
{global.icon.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--icon-button-icon-color-subtle-brand-default
|
icon-button.icon.color.subtle.brand.hover
|
color |
{global.icon.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--icon-button-icon-color-subtle-brand-hover
|
icon-button.icon.color.subtle.brand.active
|
color |
{global.icon.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--icon-button-icon-color-subtle-brand-active
|
icon-button.icon.color.subtle.error.default
|
color |
{global.icon.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--icon-button-icon-color-subtle-error-default
|
icon-button.icon.color.subtle.error.hover
|
color |
{global.icon.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--icon-button-icon-color-subtle-error-hover
|
icon-button.icon.color.subtle.error.active
|
color |
{global.icon.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--icon-button-icon-color-subtle-error-active
|
icon-button.icon.color.subtle.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--icon-button-icon-color-subtle-disabled
|
icon-button.icon.color.ghost.neutral.default
|
color |
{global.icon.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--icon-button-icon-color-ghost-neutral-default
|
icon-button.icon.color.ghost.neutral.hover
|
color |
{global.icon.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--icon-button-icon-color-ghost-neutral-hover
|
icon-button.icon.color.ghost.neutral.active
|
color |
{global.icon.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--icon-button-icon-color-ghost-neutral-active
|
icon-button.icon.color.ghost.brand.default
|
color |
{global.icon.on-base.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--icon-button-icon-color-ghost-brand-default
|
icon-button.icon.color.ghost.brand.hover
|
color |
{global.icon.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--icon-button-icon-color-ghost-brand-hover
|
icon-button.icon.color.ghost.brand.active
|
color |
{global.icon.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--icon-button-icon-color-ghost-brand-active
|
icon-button.icon.color.ghost.error.default
|
color |
{global.icon.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--icon-button-icon-color-ghost-error-default
|
icon-button.icon.color.ghost.error.hover
|
color |
{global.icon.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--icon-button-icon-color-ghost-error-hover
|
icon-button.icon.color.ghost.error.active
|
color |
{global.icon.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--icon-button-icon-color-ghost-error-active
|
icon-button.icon.color.ghost.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--icon-button-icon-color-ghost-disabled
|
icon-button.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--icon-button-icon-font-family
|
icon-button.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--icon-button-icon-font-weight
|
icon-button.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--icon-button-icon-fill
|
icon-button.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--icon-button-icon-grade
|
icon-button.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--icon-button-icon-optical-size
|
icon-button.icon.size.xsmall
|
dimension |
{size.2}
|
16px
|
--icon-button-icon-size-xsmall
|
icon-button.icon.size.small
|
dimension |
{size.3}
|
20px
|
--icon-button-icon-size-small
|
icon-button.icon.size.medium
|
dimension |
{size.4}
|
24px
|
--icon-button-icon-size-medium
|
icon-button.icon.size.large
|
dimension |
{size.4}
|
24px
|
--icon-button-icon-size-large
|
icon
(14)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
icon.container.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--icon-container-font-family
|
icon.container.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--icon-container-font-weight
|
icon.container.fill
|
number |
{font.icon.fill.off}
|
0
|
--icon-container-fill
|
icon.container.grade
|
number |
{font.icon.grade.normal}
|
0
|
--icon-container-grade
|
icon.container.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--icon-container-optical-size
|
icon.container.size.small
|
dimension |
{size.2}
|
16px
|
--icon-container-size-small
|
icon.container.size.medium
|
dimension |
{size.3}
|
20px
|
--icon-container-size-medium
|
icon.container.size.large
|
dimension |
{size.4}
|
24px
|
--icon-container-size-large
|
icon.container.color.neutral
|
color |
{global.icon.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--icon-container-color-neutral
|
icon.container.color.brand
|
color |
{global.icon.on-base.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--icon-container-color-brand
|
icon.container.color.success
|
color |
{global.icon.on-base.functional.success.default}
|
light
#075D33
dark
#16AE64
|
--icon-container-color-success
|
icon.container.color.warning
|
color |
{global.icon.on-base.functional.warning.default}
|
light
#3E2D0C
dark
#644B16
|
--icon-container-color-warning
|
icon.container.color.error
|
color |
{global.icon.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--icon-container-color-error
|
icon.container.color.info
|
color |
{global.icon.on-base.functional.info.default}
|
light
#2B68E0
dark
#94B6F4
|
--icon-container-color-info
|
number-field
(36)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
number-field.container.gap
Between the label, the control, the description and the error message.
|
dimension |
{space.4}
|
4px
|
--number-field-container-gap
|
number-field.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--number-field-label-color-default
|
number-field.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--number-field-label-color-disabled
|
number-field.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--number-field-label-typography-font-family--number-field-label-typography-font-size--number-field-label-typography-font-weight--number-field-label-typography-line-height--number-field-label-typography-letter-spacing
|
number-field.control.min-height.small
|
dimension |
{space.32}
|
32px
|
--number-field-control-min-height-small
|
number-field.control.min-height.medium
|
dimension |
{space.40}
|
40px
|
--number-field-control-min-height-medium
|
number-field.control.min-height.large
|
dimension |
{space.48}
|
48px
|
--number-field-control-min-height-large
|
number-field.control.padding-inline.small
|
dimension |
{space.8}
|
8px
|
--number-field-control-padding-inline-small
|
number-field.control.padding-inline.medium
|
dimension |
{space.12}
|
12px
|
--number-field-control-padding-inline-medium
|
number-field.control.padding-inline.large
|
dimension |
{space.16}
|
16px
|
--number-field-control-padding-inline-large
|
number-field.control.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--number-field-control-border-radius
|
number-field.control.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--number-field-control-border-width
|
number-field.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--number-field-control-background-default
|
number-field.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--number-field-control-background-hover
|
number-field.control.background.readonly
|
color |
{global.bg.level.1.default}
|
light
#F7F6F6
dark
#212121
|
--number-field-control-background-readonly
|
number-field.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--number-field-control-background-disabled
|
number-field.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--number-field-control-border-color-default
|
number-field.control.border-color.invalid
|
color |
{global.border.base.functional.error.default}
|
light
#C01619
dark
#E12A23
|
--number-field-control-border-color-invalid
|
number-field.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--number-field-control-border-color-disabled
|
number-field.control.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--number-field-control-color-default
|
number-field.control.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--number-field-control-color-disabled
|
number-field.control.placeholder-color.default
|
color |
{global.text.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--number-field-control-placeholder-color-default
|
number-field.control.placeholder-color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--number-field-control-placeholder-color-disabled
|
number-field.control.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--number-field-control-typography-small-font-family--number-field-control-typography-small-font-size--number-field-control-typography-small-font-weight--number-field-control-typography-small-line-height--number-field-control-typography-small-letter-spacing
|
number-field.control.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--number-field-control-typography-medium-font-family--number-field-control-typography-medium-font-size--number-field-control-typography-medium-font-weight--number-field-control-typography-medium-line-height--number-field-control-typography-medium-letter-spacing
|
number-field.control.typography.large
|
typography |
{body.family}{body.size.lg}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":20,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--number-field-control-typography-large-font-family--number-field-control-typography-large-font-size--number-field-control-typography-large-font-weight--number-field-control-typography-large-line-height--number-field-control-typography-large-letter-spacing
|
number-field.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--number-field-control-outline-width-focus-visible
|
number-field.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--number-field-control-outline-offset-focus-visible
|
number-field.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--number-field-control-outline-color-focus-visible
|
number-field.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--number-field-control-transition-duration
|
number-field.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--number-field-control-transition-easing
|
number-field.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--number-field-description-color-default
|
number-field.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--number-field-description-color-disabled
|
number-field.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--number-field-description-typography-font-family--number-field-description-typography-font-size--number-field-description-typography-font-weight--number-field-description-typography-line-height--number-field-description-typography-letter-spacing
|
number-field.error-message.color
|
color |
{global.text.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--number-field-error-message-color
|
number-field.error-message.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--number-field-error-message-typography-font-family--number-field-error-message-typography-font-size--number-field-error-message-typography-font-weight--number-field-error-message-typography-line-height--number-field-error-message-typography-letter-spacing
|
pagination
(28)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
pagination.container.gap
|
dimension |
{space.4}
|
4px
|
--pagination-container-gap
|
pagination.link.size.small
|
dimension |
{space.32}
|
32px
|
--pagination-link-size-small
|
pagination.link.size.medium
|
dimension |
{space.40}
|
40px
|
--pagination-link-size-medium
|
pagination.link.padding-inline.small
|
dimension |
{space.6}
|
6px
|
--pagination-link-padding-inline-small
|
pagination.link.padding-inline.medium
|
dimension |
{space.8}
|
8px
|
--pagination-link-padding-inline-medium
|
pagination.link.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--pagination-link-border-radius
|
pagination.link.background.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--pagination-link-background-default
|
pagination.link.background.hover
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--pagination-link-background-hover
|
pagination.link.background.active
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--pagination-link-background-active
|
pagination.link.background.current
|
color |
{global.bg.accent.neutral.default}
|
light
#201E1F
dark
#E8E3E4
|
--pagination-link-background-current
|
pagination.link.background.disabled
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--pagination-link-background-disabled
|
pagination.link.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--pagination-link-color-default
|
pagination.link.color.current
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--pagination-link-color-current
|
pagination.link.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--pagination-link-color-disabled
|
pagination.link.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--pagination-link-typography-small-font-family--pagination-link-typography-small-font-size--pagination-link-typography-small-font-weight--pagination-link-typography-small-line-height--pagination-link-typography-small-letter-spacing
|
pagination.link.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--pagination-link-typography-medium-font-family--pagination-link-typography-medium-font-size--pagination-link-typography-medium-font-weight--pagination-link-typography-medium-line-height--pagination-link-typography-medium-letter-spacing
|
pagination.link.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--pagination-link-outline-width-focus-visible
|
pagination.link.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--pagination-link-outline-offset-focus-visible
|
pagination.link.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--pagination-link-outline-color-focus-visible
|
pagination.link.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--pagination-link-transition-duration
|
pagination.link.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--pagination-link-transition-easing
|
pagination.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--pagination-icon-font-family
|
pagination.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--pagination-icon-font-weight
|
pagination.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--pagination-icon-fill
|
pagination.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--pagination-icon-grade
|
pagination.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--pagination-icon-optical-size
|
pagination.icon.size.small
|
dimension |
{size.3}
|
20px
|
--pagination-icon-size-small
|
pagination.icon.size.medium
|
dimension |
{size.4}
|
24px
|
--pagination-icon-size-medium
|
progress-bar
(14)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
progress-bar.container.gap
Between the label row and the track.
|
dimension |
{space.4}
|
4px
|
--progress-bar-container-gap
|
progress-bar.container.column-gap
Between the label and the value.
|
dimension |
{space.8}
|
8px
|
--progress-bar-container-column-gap
|
progress-bar.label.color
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--progress-bar-label-color
|
progress-bar.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--progress-bar-label-typography-font-family--progress-bar-label-typography-font-size--progress-bar-label-typography-font-weight--progress-bar-label-typography-line-height--progress-bar-label-typography-letter-spacing
|
progress-bar.value.color
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--progress-bar-value-color
|
progress-bar.value.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--progress-bar-value-typography-font-family--progress-bar-value-typography-font-size--progress-bar-value-typography-font-weight--progress-bar-value-typography-line-height--progress-bar-value-typography-letter-spacing
|
progress-bar.track.height.small
|
dimension |
{space.4}
|
4px
|
--progress-bar-track-height-small
|
progress-bar.track.height.medium
|
dimension |
{space.8}
|
8px
|
--progress-bar-track-height-medium
|
progress-bar.track.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--progress-bar-track-border-radius
|
progress-bar.track.background
|
color |
{global.bg.base.neutral.3}
|
light
#ECE8E9
dark
#282828
|
--progress-bar-track-background
|
progress-bar.indicator.background
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--progress-bar-indicator-background
|
progress-bar.indicator.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--progress-bar-indicator-border-radius
|
progress-bar.indicator.transition.duration
|
duration |
{duration.normal}
|
250ms
|
--progress-bar-indicator-transition-duration
|
progress-bar.indicator.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--progress-bar-indicator-transition-easing
|
radio-group
(41)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
radio-group.container.row-gap
Between the legend, the description, the options and the error message.
|
dimension |
{space.8}
|
8px
|
--radio-group-container-row-gap
|
radio-group.container.gap.vertical
|
dimension |
{space.8}
|
8px
|
--radio-group-container-gap-vertical
|
radio-group.container.gap.horizontal
|
dimension |
{space.16}
|
16px
|
--radio-group-container-gap-horizontal
|
radio-group.legend.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--radio-group-legend-color-default
|
radio-group.legend.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--radio-group-legend-color-disabled
|
radio-group.legend.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--radio-group-legend-typography-font-family--radio-group-legend-typography-font-size--radio-group-legend-typography-font-weight--radio-group-legend-typography-line-height--radio-group-legend-typography-letter-spacing
|
radio-group.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--radio-group-description-color-default
|
radio-group.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--radio-group-description-color-disabled
|
radio-group.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--radio-group-description-typography-font-family--radio-group-description-typography-font-size--radio-group-description-typography-font-weight--radio-group-description-typography-line-height--radio-group-description-typography-letter-spacing
|
radio-group.error-message.color
|
color |
{global.text.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--radio-group-error-message-color
|
radio-group.error-message.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--radio-group-error-message-typography-font-family--radio-group-error-message-typography-font-size--radio-group-error-message-typography-font-weight--radio-group-error-message-typography-line-height--radio-group-error-message-typography-letter-spacing
|
radio-group.option.column-gap
Between the radio and its label column.
|
dimension |
{space.8}
|
8px
|
--radio-group-option-column-gap
|
radio-group.option.row-gap
Between an option's label and its description.
|
dimension |
{space.2}
|
2px
|
--radio-group-option-row-gap
|
radio-group.control.size.small
|
dimension |
{size.2}
|
16px
|
--radio-group-control-size-small
|
radio-group.control.size.medium
|
dimension |
{size.3}
|
20px
|
--radio-group-control-size-medium
|
radio-group.control.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--radio-group-control-border-radius
|
radio-group.control.border-width
|
dimension |
{stroke-width.md}
|
1.2px
|
--radio-group-control-border-width
|
radio-group.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--radio-group-control-background-default
|
radio-group.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--radio-group-control-background-hover
|
radio-group.control.background.checked
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--radio-group-control-background-checked
|
radio-group.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--radio-group-control-background-disabled
|
radio-group.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--radio-group-control-border-color-default
|
radio-group.control.border-color.hover
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--radio-group-control-border-color-hover
|
radio-group.control.border-color.checked
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--radio-group-control-border-color-checked
|
radio-group.control.border-color.invalid
|
color |
{global.border.base.functional.error.default}
|
light
#C01619
dark
#E12A23
|
--radio-group-control-border-color-invalid
|
radio-group.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--radio-group-control-border-color-disabled
|
radio-group.control.color.checked
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--radio-group-control-color-checked
|
radio-group.control.color.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--radio-group-control-color-disabled
|
radio-group.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--radio-group-control-outline-width-focus-visible
|
radio-group.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--radio-group-control-outline-offset-focus-visible
|
radio-group.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--radio-group-control-outline-color-focus-visible
|
radio-group.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--radio-group-control-transition-duration
|
radio-group.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--radio-group-control-transition-easing
|
radio-group.option-label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--radio-group-option-label-color-default
|
radio-group.option-label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--radio-group-option-label-color-disabled
|
radio-group.option-label.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--radio-group-option-label-typography-small-font-family--radio-group-option-label-typography-small-font-size--radio-group-option-label-typography-small-font-weight--radio-group-option-label-typography-small-line-height--radio-group-option-label-typography-small-letter-spacing
|
radio-group.option-label.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--radio-group-option-label-typography-medium-font-family--radio-group-option-label-typography-medium-font-size--radio-group-option-label-typography-medium-font-weight--radio-group-option-label-typography-medium-line-height--radio-group-option-label-typography-medium-letter-spacing
|
radio-group.option-description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--radio-group-option-description-color-default
|
radio-group.option-description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--radio-group-option-description-color-disabled
|
radio-group.option-description.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--radio-group-option-description-typography-small-font-family--radio-group-option-description-typography-small-font-size--radio-group-option-description-typography-small-font-weight--radio-group-option-description-typography-small-line-height--radio-group-option-description-typography-small-letter-spacing
|
radio-group.option-description.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--radio-group-option-description-typography-medium-font-family--radio-group-option-description-typography-medium-font-size--radio-group-option-description-typography-medium-font-weight--radio-group-option-description-typography-medium-line-height--radio-group-option-description-typography-medium-letter-spacing
|
search-field
(46)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
search-field.container.gap
Between the label, the control, the description and the error message.
|
dimension |
{space.4}
|
4px
|
--search-field-container-gap
|
search-field.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--search-field-label-color-default
|
search-field.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-label-color-disabled
|
search-field.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-label-typography-font-family--search-field-label-typography-font-size--search-field-label-typography-font-weight--search-field-label-typography-line-height--search-field-label-typography-letter-spacing
|
search-field.control.min-height.small
|
dimension |
{space.32}
|
32px
|
--search-field-control-min-height-small
|
search-field.control.min-height.medium
|
dimension |
{space.40}
|
40px
|
--search-field-control-min-height-medium
|
search-field.control.min-height.large
|
dimension |
{space.48}
|
48px
|
--search-field-control-min-height-large
|
search-field.control.padding-inline.small
|
dimension |
{space.8}
|
8px
|
--search-field-control-padding-inline-small
|
search-field.control.padding-inline.medium
|
dimension |
{space.12}
|
12px
|
--search-field-control-padding-inline-medium
|
search-field.control.padding-inline.large
|
dimension |
{space.16}
|
16px
|
--search-field-control-padding-inline-large
|
search-field.control.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--search-field-control-border-radius
|
search-field.control.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--search-field-control-border-width
|
search-field.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--search-field-control-background-default
|
search-field.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--search-field-control-background-hover
|
search-field.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--search-field-control-background-disabled
|
search-field.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--search-field-control-border-color-default
|
search-field.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--search-field-control-border-color-disabled
|
search-field.control.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--search-field-control-color-default
|
search-field.control.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-control-color-disabled
|
search-field.control.placeholder-color.default
|
color |
{global.text.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--search-field-control-placeholder-color-default
|
search-field.control.placeholder-color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-control-placeholder-color-disabled
|
search-field.control.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-control-typography-small-font-family--search-field-control-typography-small-font-size--search-field-control-typography-small-font-weight--search-field-control-typography-small-line-height--search-field-control-typography-small-letter-spacing
|
search-field.control.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-control-typography-medium-font-family--search-field-control-typography-medium-font-size--search-field-control-typography-medium-font-weight--search-field-control-typography-medium-line-height--search-field-control-typography-medium-letter-spacing
|
search-field.control.typography.large
|
typography |
{body.family}{body.size.lg}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":20,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-control-typography-large-font-family--search-field-control-typography-large-font-size--search-field-control-typography-large-font-weight--search-field-control-typography-large-line-height--search-field-control-typography-large-letter-spacing
|
search-field.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--search-field-control-outline-width-focus-visible
|
search-field.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--search-field-control-outline-offset-focus-visible
|
search-field.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--search-field-control-outline-color-focus-visible
|
search-field.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--search-field-control-transition-duration
|
search-field.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--search-field-control-transition-easing
|
search-field.control.padding-inline-start.small
|
dimension |
{space.28}
|
28px
|
--search-field-control-padding-inline-start-small
|
search-field.control.padding-inline-start.medium
|
dimension |
{space.36}
|
36px
|
--search-field-control-padding-inline-start-medium
|
search-field.control.padding-inline-start.large
|
dimension |
{space.40}
|
40px
|
--search-field-control-padding-inline-start-large
|
search-field.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--search-field-description-color-default
|
search-field.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-description-color-disabled
|
search-field.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-description-typography-font-family--search-field-description-typography-font-size--search-field-description-typography-font-weight--search-field-description-typography-line-height--search-field-description-typography-letter-spacing
|
search-field.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--search-field-icon-font-family
|
search-field.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--search-field-icon-font-weight
|
search-field.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--search-field-icon-fill
|
search-field.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--search-field-icon-grade
|
search-field.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--search-field-icon-optical-size
|
search-field.icon.size.small
|
dimension |
{size.2}
|
16px
|
--search-field-icon-size-small
|
search-field.icon.size.medium
|
dimension |
{size.3}
|
20px
|
--search-field-icon-size-medium
|
search-field.icon.size.large
|
dimension |
{size.4}
|
24px
|
--search-field-icon-size-large
|
search-field.icon.margin-inline
|
dimension |
{space.8}
|
8px
|
--search-field-icon-margin-inline
|
search-field.icon.color.default
|
color |
{global.icon.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--search-field-icon-color-default
|
search-field.icon.color.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-icon-color-disabled
|
select
(45)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
select.container.gap
Between the label, the control, the description and the error message.
|
dimension |
{space.4}
|
4px
|
--select-container-gap
|
select.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--select-label-color-default
|
select.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--select-label-color-disabled
|
select.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--select-label-typography-font-family--select-label-typography-font-size--select-label-typography-font-weight--select-label-typography-line-height--select-label-typography-letter-spacing
|
select.control.min-height.small
|
dimension |
{space.32}
|
32px
|
--select-control-min-height-small
|
select.control.min-height.medium
|
dimension |
{space.40}
|
40px
|
--select-control-min-height-medium
|
select.control.min-height.large
|
dimension |
{space.48}
|
48px
|
--select-control-min-height-large
|
select.control.padding-inline.small
|
dimension |
{space.8}
|
8px
|
--select-control-padding-inline-small
|
select.control.padding-inline.medium
|
dimension |
{space.12}
|
12px
|
--select-control-padding-inline-medium
|
select.control.padding-inline.large
|
dimension |
{space.16}
|
16px
|
--select-control-padding-inline-large
|
select.control.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--select-control-border-radius
|
select.control.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--select-control-border-width
|
select.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--select-control-background-default
|
select.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--select-control-background-hover
|
select.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--select-control-background-disabled
|
select.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--select-control-border-color-default
|
select.control.border-color.invalid
|
color |
{global.border.base.functional.error.default}
|
light
#C01619
dark
#E12A23
|
--select-control-border-color-invalid
|
select.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--select-control-border-color-disabled
|
select.control.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--select-control-color-default
|
select.control.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--select-control-color-disabled
|
select.control.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--select-control-typography-small-font-family--select-control-typography-small-font-size--select-control-typography-small-font-weight--select-control-typography-small-line-height--select-control-typography-small-letter-spacing
|
select.control.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--select-control-typography-medium-font-family--select-control-typography-medium-font-size--select-control-typography-medium-font-weight--select-control-typography-medium-line-height--select-control-typography-medium-letter-spacing
|
select.control.typography.large
|
typography |
{body.family}{body.size.lg}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":20,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--select-control-typography-large-font-family--select-control-typography-large-font-size--select-control-typography-large-font-weight--select-control-typography-large-line-height--select-control-typography-large-letter-spacing
|
select.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--select-control-outline-width-focus-visible
|
select.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--select-control-outline-offset-focus-visible
|
select.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--select-control-outline-color-focus-visible
|
select.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--select-control-transition-duration
|
select.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--select-control-transition-easing
|
select.control.padding-inline-end.small
|
dimension |
{space.28}
|
28px
|
--select-control-padding-inline-end-small
|
select.control.padding-inline-end.medium
|
dimension |
{space.36}
|
36px
|
--select-control-padding-inline-end-medium
|
select.control.padding-inline-end.large
|
dimension |
{space.40}
|
40px
|
--select-control-padding-inline-end-large
|
select.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--select-description-color-default
|
select.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--select-description-color-disabled
|
select.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--select-description-typography-font-family--select-description-typography-font-size--select-description-typography-font-weight--select-description-typography-line-height--select-description-typography-letter-spacing
|
select.error-message.color
|
color |
{global.text.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--select-error-message-color
|
select.error-message.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--select-error-message-typography-font-family--select-error-message-typography-font-size--select-error-message-typography-font-weight--select-error-message-typography-line-height--select-error-message-typography-letter-spacing
|
select.indicator.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--select-indicator-font-family
|
select.indicator.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--select-indicator-font-weight
|
select.indicator.fill
|
number |
{font.icon.fill.off}
|
0
|
--select-indicator-fill
|
select.indicator.grade
|
number |
{font.icon.grade.normal}
|
0
|
--select-indicator-grade
|
select.indicator.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--select-indicator-optical-size
|
select.indicator.size.small
|
dimension |
{size.2}
|
16px
|
--select-indicator-size-small
|
select.indicator.size.medium
|
dimension |
{size.3}
|
20px
|
--select-indicator-size-medium
|
select.indicator.size.large
|
dimension |
{size.4}
|
24px
|
--select-indicator-size-large
|
select.indicator.margin-inline
Distance between the chevron and the end edge of the control.
|
dimension |
{space.8}
|
8px
|
--select-indicator-margin-inline
|
skeleton
(10)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
skeleton.container.background
|
color |
{global.bg.state.skeleton.default}
|
light
#DFDBDC66
dark
#303030b2
|
--skeleton-container-background
|
skeleton.container.border-radius.text
|
dimension |
{corner-radius.2xs}
|
2px
|
--skeleton-container-border-radius-text
|
skeleton.container.border-radius.rectangle
|
dimension |
{corner-radius.sm}
|
8px
|
--skeleton-container-border-radius-rectangle
|
skeleton.container.border-radius.circle
|
dimension |
{corner-radius.full}
|
9999px
|
--skeleton-container-border-radius-circle
|
skeleton.container.height.text
|
dimension |
{space.16}
|
16px
|
--skeleton-container-height-text
|
skeleton.container.height.circle
|
dimension |
{space.40}
|
40px
|
--skeleton-container-height-circle
|
skeleton.container.height.rectangle
|
dimension |
{space.96}
|
96px
|
--skeleton-container-height-rectangle
|
skeleton.container.opacity
Low point of the pulse; the high point is fully opaque.
|
number |
{opacity.50}
|
0.5
|
--skeleton-container-opacity
|
skeleton.container.animation.duration
|
duration |
{duration.normal}
|
250ms
|
--skeleton-container-animation-duration
|
skeleton.container.animation.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--skeleton-container-animation-easing
|
slider
(29)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
slider.container.gap
Between the label row and the control.
|
dimension |
{space.4}
|
4px
|
--slider-container-gap
|
slider.container.column-gap
Between the label and the value.
|
dimension |
{space.8}
|
8px
|
--slider-container-column-gap
|
slider.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--slider-label-color-default
|
slider.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--slider-label-color-disabled
|
slider.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--slider-label-typography-font-family--slider-label-typography-font-size--slider-label-typography-font-weight--slider-label-typography-line-height--slider-label-typography-letter-spacing
|
slider.value.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--slider-value-color-default
|
slider.value.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--slider-value-color-disabled
|
slider.value.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--slider-value-typography-font-family--slider-value-typography-font-size--slider-value-typography-font-weight--slider-value-typography-line-height--slider-value-typography-letter-spacing
|
slider.control.height.small
|
dimension |
{space.4}
|
4px
|
--slider-control-height-small
|
slider.control.height.medium
|
dimension |
{space.8}
|
8px
|
--slider-control-height-medium
|
slider.control.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--slider-control-border-radius
|
slider.control.background.default
|
color |
{global.bg.base.neutral.3}
|
light
#ECE8E9
dark
#282828
|
--slider-control-background-default
|
slider.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--slider-control-background-disabled
|
slider.control.min-height
Pointer target height of the whole control, whatever the track height.
|
dimension |
{space.24}
|
24px
|
--slider-control-min-height
|
slider.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--slider-control-outline-width-focus-visible
|
slider.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--slider-control-outline-offset-focus-visible
|
slider.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--slider-control-outline-color-focus-visible
|
slider.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--slider-control-transition-duration
|
slider.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--slider-control-transition-easing
|
slider.thumb.size.small
|
dimension |
{space.16}
|
16px
|
--slider-thumb-size-small
|
slider.thumb.size.medium
|
dimension |
{space.20}
|
20px
|
--slider-thumb-size-medium
|
slider.thumb.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--slider-thumb-border-radius
|
slider.thumb.border-width
|
dimension |
{stroke-width.md}
|
1.2px
|
--slider-thumb-border-width
|
slider.thumb.background.default
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--slider-thumb-background-default
|
slider.thumb.background.hover
|
color |
{global.bg.accent.brand.hover}
|
light
#1148A9
dark
#53D6F2
|
--slider-thumb-background-hover
|
slider.thumb.background.active
|
color |
{global.bg.accent.brand.active}
|
light
#0B2A69
dark
#41B9D3
|
--slider-thumb-background-active
|
slider.thumb.background.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--slider-thumb-background-disabled
|
slider.thumb.border-color.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--slider-thumb-border-color-default
|
slider.thumb.border-color.disabled
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--slider-thumb-border-color-disabled
|
spinner
(15)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
spinner.container.gap
Between the ring and a visible label.
|
dimension |
{space.8}
|
8px
|
--spinner-container-gap
|
spinner.ring.size.small
|
dimension |
{size.2}
|
16px
|
--spinner-ring-size-small
|
spinner.ring.size.medium
|
dimension |
{size.4}
|
24px
|
--spinner-ring-size-medium
|
spinner.ring.size.large
|
dimension |
{size.5}
|
32px
|
--spinner-ring-size-large
|
spinner.ring.border-width.small
|
dimension |
{stroke-width.md}
|
1.2px
|
--spinner-ring-border-width-small
|
spinner.ring.border-width.medium
|
dimension |
{stroke-width.lg}
|
2.4px
|
--spinner-ring-border-width-medium
|
spinner.ring.border-width.large
|
dimension |
{stroke-width.lg}
|
2.4px
|
--spinner-ring-border-width-large
|
spinner.ring.border-color
The still part of the ring.
|
color |
{global.bg.base.neutral.3}
|
light
#ECE8E9
dark
#282828
|
--spinner-ring-border-color
|
spinner.ring.color
The moving arc.
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--spinner-ring-color
|
spinner.ring.animation.duration
|
duration |
{duration.normal}
|
250ms
|
--spinner-ring-animation-duration
|
spinner.ring.animation.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--spinner-ring-animation-easing
|
spinner.ring.opacity
Low point of the opacity pulse shown under reduced motion.
|
number |
{opacity.40}
|
0.4
|
--spinner-ring-opacity
|
spinner.label.color
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--spinner-label-color
|
spinner.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--spinner-label-typography-font-family--spinner-label-typography-font-size--spinner-label-typography-font-weight--spinner-label-typography-line-height--spinner-label-typography-letter-spacing
|
spinner.label.size
Box of the visually hidden label: one pixel, clipped, so the text stays in the accessibility tree.
|
dimension |
{space.1}
|
1px
|
--spinner-label-size
|
switch
(35)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
switch.container.column-gap
Between the track and the label column.
|
dimension |
{space.8}
|
8px
|
--switch-container-column-gap
|
switch.container.row-gap
Between the label and its description.
|
dimension |
{space.2}
|
2px
|
--switch-container-row-gap
|
switch.control.width.small
|
dimension |
{space.32}
|
32px
|
--switch-control-width-small
|
switch.control.width.medium
|
dimension |
{space.40}
|
40px
|
--switch-control-width-medium
|
switch.control.height.small
|
dimension |
{space.20}
|
20px
|
--switch-control-height-small
|
switch.control.height.medium
|
dimension |
{space.24}
|
24px
|
--switch-control-height-medium
|
switch.control.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--switch-control-border-radius
|
switch.control.border-width
|
dimension |
{stroke-width.md}
|
1.2px
|
--switch-control-border-width
|
switch.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--switch-control-background-default
|
switch.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--switch-control-background-hover
|
switch.control.background.checked
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--switch-control-background-checked
|
switch.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--switch-control-background-disabled
|
switch.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--switch-control-border-color-default
|
switch.control.border-color.hover
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--switch-control-border-color-hover
|
switch.control.border-color.checked
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--switch-control-border-color-checked
|
switch.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--switch-control-border-color-disabled
|
switch.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--switch-control-outline-width-focus-visible
|
switch.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--switch-control-outline-offset-focus-visible
|
switch.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--switch-control-outline-color-focus-visible
|
switch.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--switch-control-transition-duration
|
switch.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--switch-control-transition-easing
|
switch.thumb.size.small
|
dimension |
{space.12}
|
12px
|
--switch-thumb-size-small
|
switch.thumb.size.medium
|
dimension |
{space.16}
|
16px
|
--switch-thumb-size-medium
|
switch.thumb.margin
Inset of the thumb inside the track, beyond the border.
|
dimension |
{space.2}
|
2px
|
--switch-thumb-margin
|
switch.thumb.background.default
|
color |
{global.bg.accent.neutral.default}
|
light
#201E1F
dark
#E8E3E4
|
--switch-thumb-background-default
|
switch.thumb.background.checked
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--switch-thumb-background-checked
|
switch.thumb.background.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--switch-thumb-background-disabled
|
switch.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--switch-label-color-default
|
switch.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--switch-label-color-disabled
|
switch.label.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--switch-label-typography-small-font-family--switch-label-typography-small-font-size--switch-label-typography-small-font-weight--switch-label-typography-small-line-height--switch-label-typography-small-letter-spacing
|
switch.label.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--switch-label-typography-medium-font-family--switch-label-typography-medium-font-size--switch-label-typography-medium-font-weight--switch-label-typography-medium-line-height--switch-label-typography-medium-letter-spacing
|
switch.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--switch-description-color-default
|
switch.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--switch-description-color-disabled
|
switch.description.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--switch-description-typography-small-font-family--switch-description-typography-small-font-size--switch-description-typography-small-font-weight--switch-description-typography-small-line-height--switch-description-typography-small-letter-spacing
|
switch.description.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--switch-description-typography-medium-font-family--switch-description-typography-medium-font-size--switch-description-typography-medium-font-weight--switch-description-typography-medium-line-height--switch-description-typography-medium-letter-spacing
|
text-field
(36)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
text-field.container.gap
Between the label, the control, the description and the error message.
|
dimension |
{space.4}
|
4px
|
--text-field-container-gap
|
text-field.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--text-field-label-color-default
|
text-field.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--text-field-label-color-disabled
|
text-field.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--text-field-label-typography-font-family--text-field-label-typography-font-size--text-field-label-typography-font-weight--text-field-label-typography-line-height--text-field-label-typography-letter-spacing
|
text-field.control.min-height.small
|
dimension |
{space.32}
|
32px
|
--text-field-control-min-height-small
|
text-field.control.min-height.medium
|
dimension |
{space.40}
|
40px
|
--text-field-control-min-height-medium
|
text-field.control.min-height.large
|
dimension |
{space.48}
|
48px
|
--text-field-control-min-height-large
|
text-field.control.padding-inline.small
|
dimension |
{space.8}
|
8px
|
--text-field-control-padding-inline-small
|
text-field.control.padding-inline.medium
|
dimension |
{space.12}
|
12px
|
--text-field-control-padding-inline-medium
|
text-field.control.padding-inline.large
|
dimension |
{space.16}
|
16px
|
--text-field-control-padding-inline-large
|
text-field.control.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--text-field-control-border-radius
|
text-field.control.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--text-field-control-border-width
|
text-field.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--text-field-control-background-default
|
text-field.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--text-field-control-background-hover
|
text-field.control.background.readonly
|
color |
{global.bg.level.1.default}
|
light
#F7F6F6
dark
#212121
|
--text-field-control-background-readonly
|
text-field.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--text-field-control-background-disabled
|
text-field.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--text-field-control-border-color-default
|
text-field.control.border-color.invalid
|
color |
{global.border.base.functional.error.default}
|
light
#C01619
dark
#E12A23
|
--text-field-control-border-color-invalid
|
text-field.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--text-field-control-border-color-disabled
|
text-field.control.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--text-field-control-color-default
|
text-field.control.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--text-field-control-color-disabled
|
text-field.control.placeholder-color.default
|
color |
{global.text.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--text-field-control-placeholder-color-default
|
text-field.control.placeholder-color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--text-field-control-placeholder-color-disabled
|
text-field.control.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--text-field-control-typography-small-font-family--text-field-control-typography-small-font-size--text-field-control-typography-small-font-weight--text-field-control-typography-small-line-height--text-field-control-typography-small-letter-spacing
|
text-field.control.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--text-field-control-typography-medium-font-family--text-field-control-typography-medium-font-size--text-field-control-typography-medium-font-weight--text-field-control-typography-medium-line-height--text-field-control-typography-medium-letter-spacing
|
text-field.control.typography.large
|
typography |
{body.family}{body.size.lg}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":20,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--text-field-control-typography-large-font-family--text-field-control-typography-large-font-size--text-field-control-typography-large-font-weight--text-field-control-typography-large-line-height--text-field-control-typography-large-letter-spacing
|
text-field.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--text-field-control-outline-width-focus-visible
|
text-field.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--text-field-control-outline-offset-focus-visible
|
text-field.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--text-field-control-outline-color-focus-visible
|
text-field.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--text-field-control-transition-duration
|
text-field.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--text-field-control-transition-easing
|
text-field.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--text-field-description-color-default
|
text-field.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--text-field-description-color-disabled
|
text-field.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--text-field-description-typography-font-family--text-field-description-typography-font-size--text-field-description-typography-font-weight--text-field-description-typography-line-height--text-field-description-typography-letter-spacing
|
text-field.error-message.color
|
color |
{global.text.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--text-field-error-message-color
|
text-field.error-message.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--text-field-error-message-typography-font-family--text-field-error-message-typography-font-size--text-field-error-message-typography-font-weight--text-field-error-message-typography-line-height--text-field-error-message-typography-letter-spacing
|
textarea
(39)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
textarea.container.gap
Between the label, the control, the description and the error message.
|
dimension |
{space.4}
|
4px
|
--textarea-container-gap
|
textarea.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--textarea-label-color-default
|
textarea.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--textarea-label-color-disabled
|
textarea.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--textarea-label-typography-font-family--textarea-label-typography-font-size--textarea-label-typography-font-weight--textarea-label-typography-line-height--textarea-label-typography-letter-spacing
|
textarea.control.min-height.small
|
dimension |
{space.32}
|
32px
|
--textarea-control-min-height-small
|
textarea.control.min-height.medium
|
dimension |
{space.40}
|
40px
|
--textarea-control-min-height-medium
|
textarea.control.min-height.large
|
dimension |
{space.48}
|
48px
|
--textarea-control-min-height-large
|
textarea.control.padding-inline.small
|
dimension |
{space.8}
|
8px
|
--textarea-control-padding-inline-small
|
textarea.control.padding-inline.medium
|
dimension |
{space.12}
|
12px
|
--textarea-control-padding-inline-medium
|
textarea.control.padding-inline.large
|
dimension |
{space.16}
|
16px
|
--textarea-control-padding-inline-large
|
textarea.control.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--textarea-control-border-radius
|
textarea.control.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--textarea-control-border-width
|
textarea.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--textarea-control-background-default
|
textarea.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--textarea-control-background-hover
|
textarea.control.background.readonly
|
color |
{global.bg.level.1.default}
|
light
#F7F6F6
dark
#212121
|
--textarea-control-background-readonly
|
textarea.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--textarea-control-background-disabled
|
textarea.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--textarea-control-border-color-default
|
textarea.control.border-color.invalid
|
color |
{global.border.base.functional.error.default}
|
light
#C01619
dark
#E12A23
|
--textarea-control-border-color-invalid
|
textarea.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--textarea-control-border-color-disabled
|
textarea.control.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--textarea-control-color-default
|
textarea.control.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--textarea-control-color-disabled
|
textarea.control.placeholder-color.default
|
color |
{global.text.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--textarea-control-placeholder-color-default
|
textarea.control.placeholder-color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--textarea-control-placeholder-color-disabled
|
textarea.control.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--textarea-control-typography-small-font-family--textarea-control-typography-small-font-size--textarea-control-typography-small-font-weight--textarea-control-typography-small-line-height--textarea-control-typography-small-letter-spacing
|
textarea.control.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--textarea-control-typography-medium-font-family--textarea-control-typography-medium-font-size--textarea-control-typography-medium-font-weight--textarea-control-typography-medium-line-height--textarea-control-typography-medium-letter-spacing
|
textarea.control.typography.large
|
typography |
{body.family}{body.size.lg}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":20,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--textarea-control-typography-large-font-family--textarea-control-typography-large-font-size--textarea-control-typography-large-font-weight--textarea-control-typography-large-line-height--textarea-control-typography-large-letter-spacing
|
textarea.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--textarea-control-outline-width-focus-visible
|
textarea.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--textarea-control-outline-offset-focus-visible
|
textarea.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--textarea-control-outline-color-focus-visible
|
textarea.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--textarea-control-transition-duration
|
textarea.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--textarea-control-transition-easing
|
textarea.control.padding-block.small
|
dimension |
{space.6}
|
6px
|
--textarea-control-padding-block-small
|
textarea.control.padding-block.medium
|
dimension |
{space.8}
|
8px
|
--textarea-control-padding-block-medium
|
textarea.control.padding-block.large
|
dimension |
{space.12}
|
12px
|
--textarea-control-padding-block-large
|
textarea.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--textarea-description-color-default
|
textarea.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--textarea-description-color-disabled
|
textarea.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--textarea-description-typography-font-family--textarea-description-typography-font-size--textarea-description-typography-font-weight--textarea-description-typography-line-height--textarea-description-typography-letter-spacing
|
textarea.error-message.color
|
color |
{global.text.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--textarea-error-message-color
|
textarea.error-message.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--textarea-error-message-typography-font-family--textarea-error-message-typography-font-size--textarea-error-message-typography-font-weight--textarea-error-message-typography-line-height--textarea-error-message-typography-letter-spacing
|