Component

Material Design 3 time 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
Time input container colormd.comp.time-input.container.color
#ECE6F0
Time input container elevationmd.comp.time-input.container.elevation
6dp
Time input surface tint layer colormd.comp.time-input.surface-tint-layer.color
#6750A4
Time input container shapemd.comp.time-input.container.shape
28dp
Time input time input field container colormd.comp.time-input.time-input-field.container.color
#E6E0E9
Time input time input field container shapemd.comp.time-input.time-input-field.container.shape
8dp
Time input period selector selected container colormd.comp.time-input.period-selector.selected.container.color
#FFD8E4
Time input period selector container shapemd.comp.time-input.period-selector.container.shape
8dp
Time input period selector outline colormd.comp.time-input.period-selector.outline.color
#79747E
Time input period selector outline widthmd.comp.time-input.period-selector.outline.width
1dp
Time input time input field container widthmd.comp.time-input.time-input-field.container.width
96dp
Time input time input field container heightmd.comp.time-input.time-input-field.container.height
72dp
Time input period selector container widthmd.comp.time-input.period-selector.container.width
52dp
Time input period selector container heightmd.comp.time-input.period-selector.container.height
72dp
Label text
Label text tokens
TokenValue
Time input time input field label text colormd.comp.time-input.time-input-field.label-text.color
#1D1B20
Time input time input field label text fontmd.comp.time-input.time-input-field.label-text.font
Roboto
Time input time input field label text line heightmd.comp.time-input.time-input-field.label-text.line-height
52pt
Time input time input field label text sizemd.comp.time-input.time-input-field.label-text.size
45pt
Time input time input field label text weightmd.comp.time-input.time-input-field.label-text.weight
400
Time input time input field label text trackingmd.comp.time-input.time-input-field.label-text.tracking
0pt
Time input time input field label text typemd.comp.time-input.time-input-field.label-text.type
Roboto · 45pt · weight 400 · line height 52pt · tracking 0pt
Time input period selector selected label text colormd.comp.time-input.period-selector.selected.label-text.color
#633B48
Time input period selector unselected label text colormd.comp.time-input.period-selector.unselected.label-text.color
#49454F
Time input period selector label text fontmd.comp.time-input.period-selector.label-text.font
Roboto
Time input period selector label text line heightmd.comp.time-input.period-selector.label-text.line-height
24pt
Time input period selector label text sizemd.comp.time-input.period-selector.label-text.size
16pt
Time input period selector label text weightmd.comp.time-input.period-selector.label-text.weight
500
Time input period selector label text trackingmd.comp.time-input.period-selector.label-text.tracking
0.15pt
Type stylemd.comp.time-input.period-selector.label-text.type
Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt
Headline
Headline tokens
TokenValue
Time input headline colormd.comp.time-input.headline.color
#49454F
Time input headline fontmd.comp.time-input.headline.font
Roboto
Time input headline line heightmd.comp.time-input.headline.line-height
16pt
Time input headline sizemd.comp.time-input.headline.size
12pt
Time input headline weightmd.comp.time-input.headline.weight
500
Time input headline trackingmd.comp.time-input.headline.tracking
0.5pt
Time input headline typemd.comp.time-input.headline.type
Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt
Supporting text
Supporting text tokens
TokenValue
Time input time input field supporting text colormd.comp.time-input.time-input-field.supporting-text.color
#49454F
Time input time input field supporting text fontmd.comp.time-input.time-input-field.supporting-text.font
Roboto
Time input time input field supporting text line heightmd.comp.time-input.time-input-field.supporting-text.line-height
16pt
Time input time input field supporting text sizemd.comp.time-input.time-input-field.supporting-text.size
12pt
Time input time input field supporting text weightmd.comp.time-input.time-input-field.supporting-text.weight
400
Time input time input field supporting text trackingmd.comp.time-input.time-input-field.supporting-text.tracking
0.4pt
Type stylemd.comp.time-input.time-input-field.supporting-text.type
Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt
Separator
Separator tokens
TokenValue
Time input time input field separator colormd.comp.time-input.time-input-field.separator.color
#1D1B20
Time input time input field separator fontmd.comp.time-input.time-input-field.separator.font
Roboto
Time input time input field separator line heightmd.comp.time-input.time-input-field.separator.line-height
64pt
Time input time input field separator sizemd.comp.time-input.time-input-field.separator.size
57pt
Time input time input field separator weightmd.comp.time-input.time-input-field.separator.weight
400
Time input time input field separator trackingmd.comp.time-input.time-input-field.separator.tracking
-0.25pt
Type stylemd.comp.time-input.time-input-field.separator.type
Roboto · 57pt · weight 400 · line height 64pt · tracking -0.25pt
Hovered
Label text
Label text tokens
TokenValue
Time input time input field hover label text colormd.comp.time-input.time-input-field.hover.label-text.color
#1D1B20
Time input period selector selected hover label text colormd.comp.time-input.period-selector.selected.hover.label-text.color
#633B48
Time input period selector unselected hover label text colormd.comp.time-input.period-selector.unselected.hover.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Time input time input field hover state layer colormd.comp.time-input.time-input-field.hover.state-layer.color
#1D1B20
Time input time input field hover state layer opacitymd.comp.time-input.time-input-field.hover.state-layer.opacity
8%
Time input period selector selected hover state layer colormd.comp.time-input.period-selector.selected.hover.state-layer.color
#633B48
Time input period selector unselected hover state layer colormd.comp.time-input.period-selector.unselected.hover.state-layer.color
#49454F
Time input period selector hover state layer opacitymd.comp.time-input.period-selector.hover.state-layer.opacity
8%
Focused
Focus indicator
Focus indicator tokens
TokenValue
Time input focus indicator colormd.comp.time-input.focus.indicator.color
#625B71
Time input focus indicator thicknessmd.comp.time-input.focus.indicator.thickness
3dp
Time input focus indicator offsetmd.comp.time-input.focus.indicator.outline.offset
2dp
Container
Container tokens
TokenValue
Time input time input field focus container colormd.comp.time-input.time-input-field.focus.container.color
#EADDFF
Time input time input field focus outline colormd.comp.time-input.time-input-field.focus.outline.color
#6750A4
Time input time input field focus outline widthmd.comp.time-input.time-input-field.focus.outline.width
2dp
Label text
Label text tokens
TokenValue
Time input time input field focus label text colormd.comp.time-input.time-input-field.focus.label-text.color
#4F378B
Time input period selector selected focus label text colormd.comp.time-input.period-selector.selected.focus.label-text.color
#633B48
Time input period selector unselected focus label text colormd.comp.time-input.period-selector.unselected.focus.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Time input period selector selected focus state layer colormd.comp.time-input.period-selector.selected.focus.state-layer.color
#633B48
Time input period selector unselected focus state layer colormd.comp.time-input.period-selector.unselected.focus.state-layer.color
#49454F
Time input period selector focus state layer opacitymd.comp.time-input.period-selector.focus.state-layer.opacity
10%
Pressed (ripple)
Label text
Label text tokens
TokenValue
Time input period selector selected pressed label text colormd.comp.time-input.period-selector.selected.pressed.label-text.color
#633B48
Time input period selector unselected pressed label text colormd.comp.time-input.period-selector.unselected.pressed.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Time input period selector selected pressed state layer colormd.comp.time-input.period-selector.selected.pressed.state-layer.color
#633B48
Time input period selector unselected pressed state layer colormd.comp.time-input.period-selector.unselected.pressed.state-layer.color
#49454F
Time input period selector pressed state layer opacitymd.comp.time-input.period-selector.pressed.state-layer.opacity
10%