Component

Material Design 3 side sheet tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Enabled
Enabled tokens
TokenValue
Sheet side docked container colormd.comp.sheet.side.docked.container.color
md.sys.color.surfaceShow reference chainHide reference chain
md.comp.sheet.side.docked.container.color
  • md.sys.color.surface
    • md.ref.palette.neutral98
#FEF7FF
Sheet side docked container surface tint layer colormd.comp.sheet.side.docked.container.surface-tint-layer.color
md.sys.color.surface-tintShow reference chainHide reference chain
md.comp.sheet.side.docked.container.surface-tint-layer.color
  • md.sys.color.surface-tint
    • md.sys.color.primary
      • md.ref.palette.primary40
#6750A4
Sheet side docked divider colormd.comp.sheet.side.docked.divider.color
md.sys.color.outlineShow reference chainHide reference chain
md.comp.sheet.side.docked.divider.color
  • md.sys.color.outline
    • md.ref.palette.neutral-variant50
#79747E
Sheet side docked headline colormd.comp.sheet.side.docked.headline.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.sheet.side.docked.headline.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Sheet side docked modal container colormd.comp.sheet.side.docked.modal.container.color
md.sys.color.surface-container-lowShow reference chainHide reference chain
md.comp.sheet.side.docked.modal.container.color
  • md.sys.color.surface-container-low
    • md.ref.palette.neutral96
#F7F2FA
Sheet side docked modal container elevationmd.comp.sheet.side.docked.modal.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.sheet.side.docked.modal.container.elevation
  • md.sys.elevation.level1
1dp
Sheet side docked standard container colormd.comp.sheet.side.docked.standard.container.color
md.sys.color.surfaceShow reference chainHide reference chain
md.comp.sheet.side.docked.standard.container.color
  • md.sys.color.surface
    • md.ref.palette.neutral98
#FEF7FF
Sheet side docked standard container elevationmd.comp.sheet.side.docked.standard.container.elevation
md.sys.elevation.level0Show reference chainHide reference chain
md.comp.sheet.side.docked.standard.container.elevation
  • md.sys.elevation.level0
No value specified (dp)
Hovered
Hovered tokens
TokenValue
Sheet side docked action hover label text colormd.comp.sheet.side.docked.action.hover.label-text.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.sheet.side.docked.action.hover.label-text.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Sheet side docked action hover state layer colormd.comp.sheet.side.docked.action.hover.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.sheet.side.docked.action.hover.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Sheet side docked action hover state layer opacitymd.comp.sheet.side.docked.action.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.sheet.side.docked.action.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
Focused
Focused tokens
TokenValue
Sheet side docked action focus label text colormd.comp.sheet.side.docked.action.focus.label-text.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.sheet.side.docked.action.focus.label-text.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Sheet side docked action focus state layer colormd.comp.sheet.side.docked.action.focus.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.sheet.side.docked.action.focus.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Sheet side docked action focus state layer opacitymd.comp.sheet.side.docked.action.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.sheet.side.docked.action.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Sheet side docked focus indicator colormd.comp.sheet.side.docked.focus.indicator.color
md.sys.color.secondaryShow reference chainHide reference chain
md.comp.sheet.side.docked.focus.indicator.color
  • md.sys.color.secondary
    • md.ref.palette.secondary40
#625B71
Pressed
Pressed tokens
TokenValue
Sheet side docked action pressed label text colormd.comp.sheet.side.docked.action.pressed.label-text.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.sheet.side.docked.action.pressed.label-text.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Sheet side docked action pressed state layer colormd.comp.sheet.side.docked.action.pressed.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.sheet.side.docked.action.pressed.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Sheet side docked action pressed state layer opacitymd.comp.sheet.side.docked.action.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.sheet.side.docked.action.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%