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 picker clock dial colormd.comp.time-picker.clock-dial.color
#E6E0E9
Time picker clock dial shapemd.comp.time-picker.clock-dial.shape
Full
Time picker container colormd.comp.time-picker.container.color
#ECE6F0
Time picker container elevationmd.comp.time-picker.container.elevation
6dp
Time picker surface tint layer colormd.comp.time-picker.surface-tint-layer.color
#6750A4
Time picker container shapemd.comp.time-picker.container.shape
28dp
Time picker time selector selected container colormd.comp.time-picker.time-selector.selected.container.color
#EADDFF
Time picker time selector unselected container colormd.comp.time-picker.time-selector.unselected.container.color
#E6E0E9
Time picker time selector container shapemd.comp.time-picker.time-selector.container.shape
8dp
Time picker period selector selected container colormd.comp.time-picker.period-selector.selected.container.color
#FFD8E4
Time picker period selector container shapemd.comp.time-picker.period-selector.container.shape
8dp
Time picker period selector outline colormd.comp.time-picker.period-selector.outline.color
#79747E
Time picker period selector outline widthmd.comp.time-picker.period-selector.outline.width
1dp
Time picker clock dial color ignoremd.comp.time-picker.clock-dial.color.ignore
#49454F
Time picker clock dial shape ignoremd.comp.time-picker.clock-dial.shape.ignore
Full
Time picker clock dial selector handle container colormd.comp.time-picker.clock-dial.selector.handle.container.color
#6750A4
Time picker clock dial selector handle container shapemd.comp.time-picker.clock-dial.selector.handle.container.shape
Full
Time picker clock dial selector center container colormd.comp.time-picker.clock-dial.selector.center.container.color
#6750A4
Time picker clock dial selector center container shapemd.comp.time-picker.clock-dial.selector.center.container.shape
Full
Time picker clock dial selector track container colormd.comp.time-picker.clock-dial.selector.track.container.color
#6750A4
Time picker time selector container widthmd.comp.time-picker.time-selector.container.width
96dp
Time picker time selector 24h vertical container widthmd.comp.time-picker.time-selector.24h-vertical.container.width
114dp
Time picker time selector container heightmd.comp.time-picker.time-selector.container.height
80dp
Time picker period selector vertical container widthmd.comp.time-picker.period-selector.vertical.container.width
52dp
Time picker period selector vertical container heightmd.comp.time-picker.period-selector.vertical.container.height
80dp
Time picker period selector horizontal container widthmd.comp.time-picker.period-selector.horizontal.container.width
216dp
Time picker period selector horizontal container heightmd.comp.time-picker.period-selector.horizontal.container.height
38dp
Time picker clock dial container sizemd.comp.time-picker.clock-dial.container.size
256dp
Time picker clock dial selector handle container sizemd.comp.time-picker.clock-dial.selector.handle.container.size
48dp
Time picker clock dial selector center container sizemd.comp.time-picker.clock-dial.selector.center.container.size
8dp
Time picker clock dial selector track container widthmd.comp.time-picker.clock-dial.selector.track.container.width
2dp
Label text
Label text tokens
TokenValue
Time picker time selector selected label text colormd.comp.time-picker.time-selector.selected.label-text.color
#4F378B
Time picker time selector unselected label text colormd.comp.time-picker.time-selector.unselected.label-text.color
#1D1B20
Time picker time selector label text fontmd.comp.time-picker.time-selector.label-text.font
Roboto
Time picker time selector label text line heightmd.comp.time-picker.time-selector.label-text.line-height
64pt
Time picker time selector label text sizemd.comp.time-picker.time-selector.label-text.size
57pt
Time picker time selector label text weightmd.comp.time-picker.time-selector.label-text.weight
400
Time picker time selector label text trackingmd.comp.time-picker.time-selector.label-text.tracking
-0.25pt
Time picker time selector label text typemd.comp.time-picker.time-selector.label-text.type
Roboto · 57pt · weight 400 · line height 64pt · tracking -0.25pt
Time picker period selector selected label text colormd.comp.time-picker.period-selector.selected.label-text.color
#633B48
Time picker period selector unselected label text colormd.comp.time-picker.period-selector.unselected.label-text.color
#49454F
Time picker period selector label text fontmd.comp.time-picker.period-selector.label-text.font
Roboto
Time picker period selector label text line heightmd.comp.time-picker.period-selector.label-text.line-height
24pt
Time picker period selector label text sizemd.comp.time-picker.period-selector.label-text.size
16pt
Time picker period selector label text weightmd.comp.time-picker.period-selector.label-text.weight
500
Time picker period selector label text trackingmd.comp.time-picker.period-selector.label-text.tracking
0.15pt
Time picker period selector label text typemd.comp.time-picker.period-selector.label-text.type
Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt
Time picker clock dial selected label text colormd.comp.time-picker.clock-dial.selected.label-text.color
#FFFFFF
Time picker clock dial unselected label text colormd.comp.time-picker.clock-dial.unselected.label-text.color
#1D1B20
Time picker clock dial label text fontmd.comp.time-picker.clock-dial.label-text.font
Roboto
Time picker clock dial label text line heightmd.comp.time-picker.clock-dial.label-text.line-height
24pt
Time picker clock dial label text sizemd.comp.time-picker.clock-dial.label-text.size
16pt
Time picker clock dial label text weightmd.comp.time-picker.clock-dial.label-text.weight
400
Time picker clock dial label text trackingmd.comp.time-picker.clock-dial.label-text.tracking
0.5pt
Time picker clock dial label text typemd.comp.time-picker.clock-dial.label-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Headline
Headline tokens
TokenValue
Time picker headline colormd.comp.time-picker.headline.color
#49454F
Time picker headline fontmd.comp.time-picker.headline.font
Roboto
Time picker headline line heightmd.comp.time-picker.headline.line-height
16pt
Time picker headline sizemd.comp.time-picker.headline.size
12pt
Time picker headline weightmd.comp.time-picker.headline.weight
500
Time picker headline trackingmd.comp.time-picker.headline.tracking
0.5pt
Time picker headline typemd.comp.time-picker.headline.type
Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt
Separator
Separator tokens
TokenValue
Time picker time selector separator colormd.comp.time-picker.time-selector.separator.color
#1D1B20
Time picker time selector separator fontmd.comp.time-picker.time-selector.separator.font
Roboto
Time picker time selector separator line heightmd.comp.time-picker.time-selector.separator.line-height
64pt
Time picker time selector separator sizemd.comp.time-picker.time-selector.separator.size
57pt
Time picker time selector separator weightmd.comp.time-picker.time-selector.separator.weight
400
Time picker time selector separator trackingmd.comp.time-picker.time-selector.separator.tracking
-0.25pt
Time picker time selector separator typemd.comp.time-picker.time-selector.separator.type
Roboto · 57pt · weight 400 · line height 64pt · tracking -0.25pt
Hovered
Label text
Label text tokens
TokenValue
Time picker time selector selected hover label text colormd.comp.time-picker.time-selector.selected.hover.label-text.color
#4F378B
Time picker time selector unselected hover label text colormd.comp.time-picker.time-selector.unselected.hover.label-text.color
#1D1B20
Time picker period selector selected hover label text colormd.comp.time-picker.period-selector.selected.hover.label-text.color
#633B48
Time picker period selector unselected hover label text colormd.comp.time-picker.period-selector.unselected.hover.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Time picker time selector selected hover state layer colormd.comp.time-picker.time-selector.selected.hover.state-layer.color
#4F378B
Time picker time selector unselected hover state layer colormd.comp.time-picker.time-selector.unselected.hover.state-layer.color
#1D1B20
Time picker time selector hover state layer opacitymd.comp.time-picker.time-selector.hover.state-layer.opacity
8%
Time picker period selector selected hover state layer colormd.comp.time-picker.period-selector.selected.hover.state-layer.color
#633B48
Time picker period selector unselected hover state layer colormd.comp.time-picker.period-selector.unselected.hover.state-layer.color
#49454F
Time picker period selector hover state layer opacitymd.comp.time-picker.period-selector.hover.state-layer.opacity
8%
Focused
Label text
Label text tokens
TokenValue
Time picker time selector selected focus label text colormd.comp.time-picker.time-selector.selected.focus.label-text.color
#4F378B
Time picker time selector unselected focus label text colormd.comp.time-picker.time-selector.unselected.focus.label-text.color
#1D1B20
Time picker period selector selected focus label text colormd.comp.time-picker.period-selector.selected.focus.label-text.color
#633B48
Time picker period selector unselected focus label text colormd.comp.time-picker.period-selector.unselected.focus.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Time picker time selector selected focus state layer colormd.comp.time-picker.time-selector.selected.focus.state-layer.color
#4F378B
Time picker time selector unselected focus state layer colormd.comp.time-picker.time-selector.unselected.focus.state-layer.color
#1D1B20
Time picker time selector focus state layer opacitymd.comp.time-picker.time-selector.focus.state-layer.opacity
10%
Time picker period selector selected focus state layer colormd.comp.time-picker.period-selector.selected.focus.state-layer.color
#633B48
Time picker period selector unselected focus state layer colormd.comp.time-picker.period-selector.unselected.focus.state-layer.color
#49454F
Time picker period selector focus state layer opacitymd.comp.time-picker.period-selector.focus.state-layer.opacity
10%
Pressed (ripple)
Label text
Label text tokens
TokenValue
Time picker time selector selected pressed label text colormd.comp.time-picker.time-selector.selected.pressed.label-text.color
#4F378B
Time picker time selector unselected pressed label text colormd.comp.time-picker.time-selector.unselected.pressed.label-text.color
#1D1B20
Time picker period selector selected pressed label text colormd.comp.time-picker.period-selector.selected.pressed.label-text.color
#633B48
Time picker period selector unselected pressed label text colormd.comp.time-picker.period-selector.unselected.pressed.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Time picker time selector selected pressed state layer colormd.comp.time-picker.time-selector.selected.pressed.state-layer.color
#4F378B
Time picker time selector unselected pressed state layer colormd.comp.time-picker.time-selector.unselected.pressed.state-layer.color
#1D1B20
Time picker time selector pressed state layer opacitymd.comp.time-picker.time-selector.pressed.state-layer.opacity
10%
Time picker period selector selected pressed state layer colormd.comp.time-picker.period-selector.selected.pressed.state-layer.color
#633B48
Time picker period selector unselected pressed state layer colormd.comp.time-picker.period-selector.unselected.pressed.state-layer.color
#49454F
Time picker period selector pressed state layer opacitymd.comp.time-picker.period-selector.pressed.state-layer.opacity
10%