Component

Material Design 3 date pickers 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.

Font

Enabled
Container
Container tokens
TokenValue
Container colormd.comp.date-picker.docked.container.color
#ECE6F0
Container elevationmd.comp.date-picker.docked.container.elevation
6dp
Container surface tint layer colormd.comp.date-picker.docked.container.surface-tint-layer.color
#6750A4
Container shapemd.comp.date-picker.docked.container.shape
16dp
Date container shapemd.comp.date-picker.docked.date.container.shape
Full
Date today container outline colormd.comp.date-picker.docked.date.today.container.outline.color
#6750A4
Date today container outline widthmd.comp.date-picker.docked.date.today.container.outline.width
1dp
Date selected container colormd.comp.date-picker.docked.date.selected.container.color
#6750A4
Menu button container shapemd.comp.date-picker.docked.menu-button.container.shape
Full
Menu list item selected container colormd.comp.date-picker.docked.menu.list-item.selected.container.color
#E7E0EC
Container widthmd.comp.date-picker.docked.container.width
360dp
Container heightmd.comp.date-picker.docked.container.height
456dp
Date container widthmd.comp.date-picker.docked.date.container.width
48dp
Date container heightmd.comp.date-picker.docked.date.container.height
48dp
Menu button container heightmd.comp.date-picker.docked.menu-button.container.height
40dp
Menu list item container heightmd.comp.date-picker.docked.menu.list-item.container.height
48dp
Label text
Label text tokens
TokenValue
Weekdays label text colormd.comp.date-picker.docked.weekdays.label-text.color
#1D1B20
Weekdays label text fontmd.comp.date-picker.docked.weekdays.label-text.font
Roboto
Weekdays label text line heightmd.comp.date-picker.docked.weekdays.label-text.line-height
24pt
Weekdays label text sizemd.comp.date-picker.docked.weekdays.label-text.size
16pt
Weekdays label text weightmd.comp.date-picker.docked.weekdays.label-text.weight
400
Weekdays label text trackingmd.comp.date-picker.docked.weekdays.label-text.tracking
0.5pt
Weekdays label text type stylemd.comp.date-picker.docked.weekdays.label-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Date label text fontmd.comp.date-picker.docked.date.label-text.font
Roboto
Date label text line heightmd.comp.date-picker.docked.date.label-text.line-height
24pt
Date label text sizemd.comp.date-picker.docked.date.label-text.size
16pt
Date label text weightmd.comp.date-picker.docked.date.label-text.weight
400
Date label text trackingmd.comp.date-picker.docked.date.label-text.tracking
0.5pt
Date label text type stylemd.comp.date-picker.docked.date.label-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Date unselected label text colormd.comp.date-picker.docked.date.unselected.label-text.color
#1D1B20
Date unselected outside month label text colormd.comp.date-picker.docked.date.unselected.outside-month.label-text.color
#1D1B20
Date unselected outside month label text opacitymd.comp.date-picker.docked.date.unselected.outside-month.label-text.opacity
38%
Date today label text colormd.comp.date-picker.docked.date.today.label-text.color
#6750A4
Date selected label text colormd.comp.date-picker.docked.date.selected.label-text.color
#FFFFFF
Menu button label text colormd.comp.date-picker.docked.menu-button.label-text.color
#49454F
Menu button label text fontmd.comp.date-picker.docked.menu-button.label-text.font
Roboto
Menu button label text line heightmd.comp.date-picker.docked.menu-button.label-text.line-height
20pt
Menu button label text sizemd.comp.date-picker.docked.menu-button.label-text.size
14pt
Menu button label text weightmd.comp.date-picker.docked.menu-button.label-text.weight
500
Menu button label text trackingmd.comp.date-picker.docked.menu-button.label-text.tracking
0.1pt
Menu button label text type stylemd.comp.date-picker.docked.menu-button.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Menu list item label text colormd.comp.date-picker.docked.menu.list-item.label-text.color
#1D1B20
Menu list item label text fontmd.comp.date-picker.docked.menu.list-item.label-text.font
Roboto
Menu list item label text line heightmd.comp.date-picker.docked.menu.list-item.label-text.line-height
24pt
Menu list item label text sizemd.comp.date-picker.docked.menu.list-item.label-text.size
16pt
Menu list item label text trackingmd.comp.date-picker.docked.menu.list-item.label-text.tracking
0.5pt
Menu list item label text weightmd.comp.date-picker.docked.menu.list-item.label-text.weight
400
Menu list item label text type stylemd.comp.date-picker.docked.menu.list-item.label-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Icon
Icon tokens
TokenValue
Menu button icon colormd.comp.date-picker.docked.menu-button.icon.color
#49454F
Menu button icon sizemd.comp.date-picker.docked.menu-button.icon.size
18dp
Leading icon
Leading icon tokens
TokenValue
Menu list item selected leading icon colormd.comp.date-picker.docked.menu.list-item.selected.leading-icon.color
#1D1B20
Menu list item selected leading icon sizemd.comp.date-picker.docked.menu.list-item.selected.leading-icon.size
24dp
State layer
State layer tokens
TokenValue
Date state layer shapemd.comp.date-picker.docked.date.state-layer.shape
Full
Date state layer widthmd.comp.date-picker.docked.date.state-layer.width
40dp
Date state layer heightmd.comp.date-picker.docked.date.state-layer.height
40dp
Header
Header tokens
TokenValue
Header heightmd.comp.date-picker.docked.header.height
64dp
Disabled
Label text
Label text tokens
TokenValue
Menu button disabled label text colormd.comp.date-picker.docked.menu-button.disabled.label-text.color
#1D1B20
Menu button disabled label text opacitymd.comp.date-picker.docked.menu-button.disabled.label-text.opacity
38%
Icon
Icon tokens
TokenValue
Menu button disabled icon colormd.comp.date-picker.docked.menu-button.disabled.icon.color
#1D1B20
Menu button disabled icon opacitymd.comp.date-picker.docked.menu-button.disabled.icon.opacity
38%
Hovered
Label text
Label text tokens
TokenValue
Menu button hover label text colormd.comp.date-picker.docked.menu-button.hover.label-text.color
#49454F
Menu list item hover label text colormd.comp.date-picker.docked.menu.list-item.hover.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Date unselected hover state layer colormd.comp.date-picker.docked.date.unselected.hover.state-layer.color
#49454F
Date selected hover state layer colormd.comp.date-picker.docked.date.selected.hover.state-layer.color
#FFFFFF
Date today hover state layer colormd.comp.date-picker.docked.date.today.hover.state-layer.color
#6750A4
Date hover state layer opacitymd.comp.date-picker.docked.date.hover.state-layer.opacity
8%
Menu button hover state layer colormd.comp.date-picker.docked.menu-button.hover.state-layer.color
#49454F
Menu button hover state layer opacitymd.comp.date-picker.docked.menu-button.hover.state-layer.opacity
8%
Menu list item hover state layer colormd.comp.date-picker.docked.menu.list-item.hover.state-layer.color
#1D1B20
Menu list item hover state layer opacitymd.comp.date-picker.docked.menu.list-item.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Menu button hover icon colormd.comp.date-picker.docked.menu-button.hover.icon.color
#49454F
Leading icon
Leading icon tokens
TokenValue
Menu list item selected hover leading icon colormd.comp.date-picker.docked.menu.list-item.selected.hover.leading-icon.color
#49454F
Focused
Label text
Label text tokens
TokenValue
Menu button focus label text colormd.comp.date-picker.docked.menu-button.focus.label-text.color
#49454F
Menu list item focus label text colormd.comp.date-picker.docked.menu.list-item.focus.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Date unselected focus state layer colormd.comp.date-picker.docked.date.unselected.focus.state-layer.color
#49454F
Date selected focus state layer colormd.comp.date-picker.docked.date.selected.focus.state-layer.color
#FFFFFF
Date today focus state layer colormd.comp.date-picker.docked.date.today.focus.state-layer.color
#6750A4
Date focus state layer opacitymd.comp.date-picker.docked.date.focus.state-layer.opacity
10%
Menu button focus state layer colormd.comp.date-picker.docked.menu-button.focus.state-layer.color
#49454F
Menu button focus state layer opacitymd.comp.date-picker.docked.menu-button.focus.state-layer.opacity
10%
Menu list item focus state layer colormd.comp.date-picker.docked.menu.list-item.focus.state-layer.color
#1D1B20
Menu list item focus state layer opacitymd.comp.date-picker.docked.menu.list-item.focus.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Menu button focus icon colormd.comp.date-picker.docked.menu-button.focus.icon.color
#49454F
Leading icon
Leading icon tokens
TokenValue
Menu list item selected focus leading icon colormd.comp.date-picker.docked.menu.list-item.selected.focus.leading-icon.color
#49454F
Pressed (ripple)
Label text
Label text tokens
TokenValue
Menu button pressed label text colormd.comp.date-picker.docked.menu-button.pressed.label-text.color
#49454F
Menu list item pressed label text colormd.comp.date-picker.docked.menu.list-item.pressed.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Date unselected pressed state layer colormd.comp.date-picker.docked.date.unselected.pressed.state-layer.color
#49454F
Date selected pressed state layer colormd.comp.date-picker.docked.date.selected.pressed.state-layer.color
#FFFFFF
Date today pressed state layer colormd.comp.date-picker.docked.date.today.pressed.state-layer.color
#6750A4
Date pressed state layer opacitymd.comp.date-picker.docked.date.pressed.state-layer.opacity
10%
Menu button pressed state layer colormd.comp.date-picker.docked.menu-button.pressed.state-layer.color
#49454F
Menu button pressed state layer opacitymd.comp.date-picker.docked.menu-button.pressed.state-layer.opacity
10%
Menu list item pressed state layer colormd.comp.date-picker.docked.menu.list-item.pressed.state-layer.color
#1D1B20
Menu list item pressed state layer opacitymd.comp.date-picker.docked.menu.list-item.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Menu button pressed icon colormd.comp.date-picker.docked.menu-button.pressed.icon.color
#49454F
Leading icon
Leading icon tokens
TokenValue
Menu list item selected pressed leading icon colormd.comp.date-picker.docked.menu.list-item.selected.pressed.leading-icon.color
#49454F