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-input.modal.container.color
#ECE6F0
Container elevationmd.comp.date-input.modal.container.elevation
6dp
Container surface tint layer colormd.comp.date-input.modal.container.surface-tint-layer.color
#6750A4
Container shapemd.comp.date-input.modal.container.shape
28dp
Container widthmd.comp.date-input.modal.container.width
328dp
Container heightmd.comp.date-input.modal.container.height
512dp
Header container widthmd.comp.date-input.modal.header.container.width
328dp
Header container heightmd.comp.date-input.modal.header.container.height
120dp
Headline
Headline tokens
TokenValue
Header headline colormd.comp.date-input.modal.header.headline.color
#49454F
Header headline fontmd.comp.date-input.modal.header.headline.font
Roboto
Header headline line heightmd.comp.date-input.modal.header.headline.line-height
40pt
Header headline sizemd.comp.date-input.modal.header.headline.size
32pt
Header headline weightmd.comp.date-input.modal.header.headline.weight
400
Header headline trackingmd.comp.date-input.modal.header.headline.tracking
0pt
Header headline type stylemd.comp.date-input.modal.header.headline.type
Roboto · 32pt · weight 400 · line height 40pt · tracking 0pt
Supporting text
Supporting text tokens
TokenValue
Header supporting text colormd.comp.date-input.modal.header.supporting-text.color
#49454F
Header supporting text fontmd.comp.date-input.modal.header.supporting-text.font
Roboto
Header supporting text line heightmd.comp.date-input.modal.header.supporting-text.line-height
20pt
Header supporting text sizemd.comp.date-input.modal.header.supporting-text.size
14pt
Header supporting text weightmd.comp.date-input.modal.header.supporting-text.weight
500
Header supporting text trackingmd.comp.date-input.modal.header.supporting-text.tracking
0.1pt
Header supporting text type stylemd.comp.date-input.modal.header.supporting-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt