role disclosure
Accordion draft v0.1.0
A stack of sections whose content shows and hides under a header people activate.
An accordion stacks sections of content, each behind a header: activating the header shows the section, activating it again hides it. It saves vertical space when people need only one or two sections at a time (settings groups, frequently asked questions, order details). Several sections may be open at once; the component never closes one when another opens. One section alone is the same thing with a single item.
Tokens
From packages/tokens/src/components/accordion.tokens.json. Path grammar: accordion.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part item (2)
| 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
|
Part trigger (14)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
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
|
Part title (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
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
|
Part indicator (9)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
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
|
Part panel (5)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
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
|
Parts without tokens: container (they inherit from their parent).