Material Design 3 "Time Picker" tokens: All tokens
Preview
Browse tokens
Color
Time picker - Dial
Enabled
Container
| Token | Value |
|---|---|
Time picker clock dial colormd.comp.time-picker.clock-dial.color | #E6E0E9 md.comp.time-picker.clock-dial.color
|
Time picker clock dial color ignoremd.comp.time-picker.clock-dial.color.ignore | #49454F md.comp.time-picker.clock-dial.color.ignore
|
Time picker clock dial container sizemd.comp.time-picker.clock-dial.container.size | 256dp md.comp.time-picker.clock-dial.container.size |
Time picker clock dial selector center container colormd.comp.time-picker.clock-dial.selector.center.container.color | #6750A4 md.comp.time-picker.clock-dial.selector.center.container.color
|
Time picker clock dial selector center container shapemd.comp.time-picker.clock-dial.selector.center.container.shape | Full md.comp.time-picker.clock-dial.selector.center.container.shape
|
Time picker clock dial selector center container sizemd.comp.time-picker.clock-dial.selector.center.container.size | 8dp md.comp.time-picker.clock-dial.selector.center.container.size |
Time picker clock dial selector handle container colormd.comp.time-picker.clock-dial.selector.handle.container.color | #6750A4 md.comp.time-picker.clock-dial.selector.handle.container.color
|
Time picker clock dial selector handle container shapemd.comp.time-picker.clock-dial.selector.handle.container.shape | Full md.comp.time-picker.clock-dial.selector.handle.container.shape
|
Time picker clock dial selector handle container sizemd.comp.time-picker.clock-dial.selector.handle.container.size | 48dp md.comp.time-picker.clock-dial.selector.handle.container.size |
Time picker clock dial selector track container colormd.comp.time-picker.clock-dial.selector.track.container.color | #6750A4 md.comp.time-picker.clock-dial.selector.track.container.color
|
Time picker clock dial selector track container widthmd.comp.time-picker.clock-dial.selector.track.container.width | 2dp md.comp.time-picker.clock-dial.selector.track.container.width |
Time picker clock dial shapemd.comp.time-picker.clock-dial.shape | Full md.comp.time-picker.clock-dial.shape
|
Time picker clock dial shape ignoremd.comp.time-picker.clock-dial.shape.ignore | Full md.comp.time-picker.clock-dial.shape.ignore
|
Time picker container colormd.comp.time-picker.container.color | #ECE6F0 md.comp.time-picker.container.color
|
Time picker container elevationmd.comp.time-picker.container.elevation | 6dp md.comp.time-picker.container.elevation
|
Time picker container shapemd.comp.time-picker.container.shape | 28dp md.comp.time-picker.container.shape
|
Time picker period selector container shapemd.comp.time-picker.period-selector.container.shape | 8dp md.comp.time-picker.period-selector.container.shape
|
Time picker period selector horizontal container heightmd.comp.time-picker.period-selector.horizontal.container.height | 38dp md.comp.time-picker.period-selector.horizontal.container.height |
Time picker period selector horizontal container widthmd.comp.time-picker.period-selector.horizontal.container.width | 216dp md.comp.time-picker.period-selector.horizontal.container.width |
Time picker period selector outline colormd.comp.time-picker.period-selector.outline.color | #79747E md.comp.time-picker.period-selector.outline.color
|
Time picker period selector outline widthmd.comp.time-picker.period-selector.outline.width | 1dp md.comp.time-picker.period-selector.outline.width |
Time picker period selector selected container colormd.comp.time-picker.period-selector.selected.container.color | #FFD8E4 md.comp.time-picker.period-selector.selected.container.color
|
Time picker period selector vertical container heightmd.comp.time-picker.period-selector.vertical.container.height | 80dp md.comp.time-picker.period-selector.vertical.container.height |
Time picker period selector vertical container widthmd.comp.time-picker.period-selector.vertical.container.width | 52dp md.comp.time-picker.period-selector.vertical.container.width |
Time picker surface tint layer colormd.comp.time-picker.surface-tint-layer.color | #6750A4 md.comp.time-picker.surface-tint-layer.color
|
Time picker time selector 24h vertical container widthmd.comp.time-picker.time-selector.24h-vertical.container.width | 114dp md.comp.time-picker.time-selector.24h-vertical.container.width |
Time picker time selector container heightmd.comp.time-picker.time-selector.container.height | 80dp md.comp.time-picker.time-selector.container.height |
Time picker time selector container shapemd.comp.time-picker.time-selector.container.shape | 8dp md.comp.time-picker.time-selector.container.shape
|
Time picker time selector container widthmd.comp.time-picker.time-selector.container.width | 96dp md.comp.time-picker.time-selector.container.width |
Time picker time selector selected container colormd.comp.time-picker.time-selector.selected.container.color | #EADDFF md.comp.time-picker.time-selector.selected.container.color
|
Time picker time selector unselected container colormd.comp.time-picker.time-selector.unselected.container.color | #E6E0E9 md.comp.time-picker.time-selector.unselected.container.color
|
Label text
| Token | Value |
|---|---|
Time picker clock dial label text fontmd.comp.time-picker.clock-dial.label-text.font | Roboto md.comp.time-picker.clock-dial.label-text.font
|
Time picker clock dial label text line heightmd.comp.time-picker.clock-dial.label-text.line-height | 24pt md.comp.time-picker.clock-dial.label-text.line-height
|
Time picker clock dial label text sizemd.comp.time-picker.clock-dial.label-text.size | 16pt md.comp.time-picker.clock-dial.label-text.size
|
Time picker clock dial label text trackingmd.comp.time-picker.clock-dial.label-text.tracking | 0.5pt md.comp.time-picker.clock-dial.label-text.tracking
|
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 md.comp.time-picker.clock-dial.label-text.type
|
Time picker clock dial label text weightmd.comp.time-picker.clock-dial.label-text.weight | 400 md.comp.time-picker.clock-dial.label-text.weight
|
Time picker clock dial selected label text colormd.comp.time-picker.clock-dial.selected.label-text.color | #FFFFFF md.comp.time-picker.clock-dial.selected.label-text.color
|
Time picker clock dial unselected label text colormd.comp.time-picker.clock-dial.unselected.label-text.color | #1D1B20 md.comp.time-picker.clock-dial.unselected.label-text.color
|
Time picker period selector label text fontmd.comp.time-picker.period-selector.label-text.font | Roboto md.comp.time-picker.period-selector.label-text.font
|
Time picker period selector label text line heightmd.comp.time-picker.period-selector.label-text.line-height | 24pt md.comp.time-picker.period-selector.label-text.line-height
|
Time picker period selector label text sizemd.comp.time-picker.period-selector.label-text.size | 16pt md.comp.time-picker.period-selector.label-text.size
|
Time picker period selector label text trackingmd.comp.time-picker.period-selector.label-text.tracking | 0.15pt md.comp.time-picker.period-selector.label-text.tracking
|
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 md.comp.time-picker.period-selector.label-text.type
|
Time picker period selector label text weightmd.comp.time-picker.period-selector.label-text.weight | 500 md.comp.time-picker.period-selector.label-text.weight
|
Time picker period selector selected label text colormd.comp.time-picker.period-selector.selected.label-text.color | #633B48 md.comp.time-picker.period-selector.selected.label-text.color
|
Time picker period selector unselected label text colormd.comp.time-picker.period-selector.unselected.label-text.color | #49454F md.comp.time-picker.period-selector.unselected.label-text.color
|
Time picker time selector label text fontmd.comp.time-picker.time-selector.label-text.font | Roboto md.comp.time-picker.time-selector.label-text.font
|
Time picker time selector label text line heightmd.comp.time-picker.time-selector.label-text.line-height | 64pt md.comp.time-picker.time-selector.label-text.line-height
|
Time picker time selector label text sizemd.comp.time-picker.time-selector.label-text.size | 57pt md.comp.time-picker.time-selector.label-text.size
|
Time picker time selector label text trackingmd.comp.time-picker.time-selector.label-text.tracking | -0.25pt md.comp.time-picker.time-selector.label-text.tracking
|
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 md.comp.time-picker.time-selector.label-text.type
|
Time picker time selector label text weightmd.comp.time-picker.time-selector.label-text.weight | 400 md.comp.time-picker.time-selector.label-text.weight
|
Time picker time selector selected label text colormd.comp.time-picker.time-selector.selected.label-text.color | #4F378B md.comp.time-picker.time-selector.selected.label-text.color
|
Time picker time selector unselected label text colormd.comp.time-picker.time-selector.unselected.label-text.color | #1D1B20 md.comp.time-picker.time-selector.unselected.label-text.color
|
Headline
| Token | Value |
|---|---|
Time picker headline colormd.comp.time-picker.headline.color | #49454F md.comp.time-picker.headline.color
|
Time picker headline fontmd.comp.time-picker.headline.font | Roboto md.comp.time-picker.headline.font
|
Time picker headline line heightmd.comp.time-picker.headline.line-height | 16pt md.comp.time-picker.headline.line-height
|
Time picker headline sizemd.comp.time-picker.headline.size | 12pt md.comp.time-picker.headline.size
|
Time picker headline trackingmd.comp.time-picker.headline.tracking | 0.5pt md.comp.time-picker.headline.tracking
|
Time picker headline typemd.comp.time-picker.headline.type | Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt md.comp.time-picker.headline.type
|
Time picker headline weightmd.comp.time-picker.headline.weight | 500 md.comp.time-picker.headline.weight
|
Separator
| Token | Value |
|---|---|
Time picker time selector separator colormd.comp.time-picker.time-selector.separator.color | #1D1B20 md.comp.time-picker.time-selector.separator.color
|
Time picker time selector separator fontmd.comp.time-picker.time-selector.separator.font | Roboto md.comp.time-picker.time-selector.separator.font
|
Time picker time selector separator line heightmd.comp.time-picker.time-selector.separator.line-height | 64pt md.comp.time-picker.time-selector.separator.line-height
|
Time picker time selector separator sizemd.comp.time-picker.time-selector.separator.size | 57pt md.comp.time-picker.time-selector.separator.size
|
Time picker time selector separator trackingmd.comp.time-picker.time-selector.separator.tracking | -0.25pt md.comp.time-picker.time-selector.separator.tracking
|
Time picker time selector separator typemd.comp.time-picker.time-selector.separator.type | Roboto · 57pt · weight 400 · line height 64pt · tracking -0.25pt md.comp.time-picker.time-selector.separator.type
|
Time picker time selector separator weightmd.comp.time-picker.time-selector.separator.weight | 400 md.comp.time-picker.time-selector.separator.weight
|
Hovered
Label text
| Token | Value |
|---|---|
Time picker period selector selected hover label text colormd.comp.time-picker.period-selector.selected.hover.label-text.color | #633B48 md.comp.time-picker.period-selector.selected.hover.label-text.color
|
Time picker period selector unselected hover label text colormd.comp.time-picker.period-selector.unselected.hover.label-text.color | #49454F md.comp.time-picker.period-selector.unselected.hover.label-text.color
|
Time picker time selector selected hover label text colormd.comp.time-picker.time-selector.selected.hover.label-text.color | #4F378B md.comp.time-picker.time-selector.selected.hover.label-text.color
|
Time picker time selector unselected hover label text colormd.comp.time-picker.time-selector.unselected.hover.label-text.color | #1D1B20 md.comp.time-picker.time-selector.unselected.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Time picker period selector hover state layer opacitymd.comp.time-picker.period-selector.hover.state-layer.opacity | 8% md.comp.time-picker.period-selector.hover.state-layer.opacity
|
Time picker period selector selected hover state layer colormd.comp.time-picker.period-selector.selected.hover.state-layer.color | #633B48 md.comp.time-picker.period-selector.selected.hover.state-layer.color
|
Time picker period selector unselected hover state layer colormd.comp.time-picker.period-selector.unselected.hover.state-layer.color | #49454F md.comp.time-picker.period-selector.unselected.hover.state-layer.color
|
Time picker time selector hover state layer opacitymd.comp.time-picker.time-selector.hover.state-layer.opacity | 8% md.comp.time-picker.time-selector.hover.state-layer.opacity
|
Time picker time selector selected hover state layer colormd.comp.time-picker.time-selector.selected.hover.state-layer.color | #4F378B md.comp.time-picker.time-selector.selected.hover.state-layer.color
|
Time picker time selector unselected hover state layer colormd.comp.time-picker.time-selector.unselected.hover.state-layer.color | #1D1B20 md.comp.time-picker.time-selector.unselected.hover.state-layer.color
|
Focused
Label text
| Token | Value |
|---|---|
Time picker period selector selected focus label text colormd.comp.time-picker.period-selector.selected.focus.label-text.color | #633B48 md.comp.time-picker.period-selector.selected.focus.label-text.color
|
Time picker period selector unselected focus label text colormd.comp.time-picker.period-selector.unselected.focus.label-text.color | #49454F md.comp.time-picker.period-selector.unselected.focus.label-text.color
|
Time picker time selector selected focus label text colormd.comp.time-picker.time-selector.selected.focus.label-text.color | #4F378B md.comp.time-picker.time-selector.selected.focus.label-text.color
|
Time picker time selector unselected focus label text colormd.comp.time-picker.time-selector.unselected.focus.label-text.color | #1D1B20 md.comp.time-picker.time-selector.unselected.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Time picker period selector focus state layer opacitymd.comp.time-picker.period-selector.focus.state-layer.opacity | 10% md.comp.time-picker.period-selector.focus.state-layer.opacity
|
Time picker period selector selected focus state layer colormd.comp.time-picker.period-selector.selected.focus.state-layer.color | #633B48 md.comp.time-picker.period-selector.selected.focus.state-layer.color
|
Time picker period selector unselected focus state layer colormd.comp.time-picker.period-selector.unselected.focus.state-layer.color | #49454F md.comp.time-picker.period-selector.unselected.focus.state-layer.color
|
Time picker time selector focus state layer opacitymd.comp.time-picker.time-selector.focus.state-layer.opacity | 10% md.comp.time-picker.time-selector.focus.state-layer.opacity
|
Time picker time selector selected focus state layer colormd.comp.time-picker.time-selector.selected.focus.state-layer.color | #4F378B md.comp.time-picker.time-selector.selected.focus.state-layer.color
|
Time picker time selector unselected focus state layer colormd.comp.time-picker.time-selector.unselected.focus.state-layer.color | #1D1B20 md.comp.time-picker.time-selector.unselected.focus.state-layer.color
|
Pressed (ripple)
Label text
| Token | Value |
|---|---|
Time picker period selector selected pressed label text colormd.comp.time-picker.period-selector.selected.pressed.label-text.color | #633B48 md.comp.time-picker.period-selector.selected.pressed.label-text.color
|
Time picker period selector unselected pressed label text colormd.comp.time-picker.period-selector.unselected.pressed.label-text.color | #49454F md.comp.time-picker.period-selector.unselected.pressed.label-text.color
|
Time picker time selector selected pressed label text colormd.comp.time-picker.time-selector.selected.pressed.label-text.color | #4F378B md.comp.time-picker.time-selector.selected.pressed.label-text.color
|
Time picker time selector unselected pressed label text colormd.comp.time-picker.time-selector.unselected.pressed.label-text.color | #1D1B20 md.comp.time-picker.time-selector.unselected.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Time picker period selector pressed state layer opacitymd.comp.time-picker.period-selector.pressed.state-layer.opacity | 10% md.comp.time-picker.period-selector.pressed.state-layer.opacity
|
Time picker period selector selected pressed state layer colormd.comp.time-picker.period-selector.selected.pressed.state-layer.color | #633B48 md.comp.time-picker.period-selector.selected.pressed.state-layer.color
|
Time picker period selector unselected pressed state layer colormd.comp.time-picker.period-selector.unselected.pressed.state-layer.color | #49454F md.comp.time-picker.period-selector.unselected.pressed.state-layer.color
|
Time picker time selector pressed state layer opacitymd.comp.time-picker.time-selector.pressed.state-layer.opacity | 10% md.comp.time-picker.time-selector.pressed.state-layer.opacity
|
Time picker time selector selected pressed state layer colormd.comp.time-picker.time-selector.selected.pressed.state-layer.color | #4F378B md.comp.time-picker.time-selector.selected.pressed.state-layer.color
|
Time picker time selector unselected pressed state layer colormd.comp.time-picker.time-selector.unselected.pressed.state-layer.color | #1D1B20 md.comp.time-picker.time-selector.unselected.pressed.state-layer.color
|
Time picker - Input
Enabled
Container
| Token | Value |
|---|---|
Time input container colormd.comp.time-input.container.color | #ECE6F0 md.comp.time-input.container.color
|
Time input container elevationmd.comp.time-input.container.elevation | 6dp md.comp.time-input.container.elevation
|
Time input container shapemd.comp.time-input.container.shape | 28dp md.comp.time-input.container.shape
|
Time input period selector container heightmd.comp.time-input.period-selector.container.height | 72dp md.comp.time-input.period-selector.container.height |
Time input period selector container shapemd.comp.time-input.period-selector.container.shape | 8dp md.comp.time-input.period-selector.container.shape
|
Time input period selector container widthmd.comp.time-input.period-selector.container.width | 52dp md.comp.time-input.period-selector.container.width |
Time input period selector outline colormd.comp.time-input.period-selector.outline.color | #79747E md.comp.time-input.period-selector.outline.color
|
Time input period selector outline widthmd.comp.time-input.period-selector.outline.width | 1dp md.comp.time-input.period-selector.outline.width |
Time input period selector selected container colormd.comp.time-input.period-selector.selected.container.color | #FFD8E4 md.comp.time-input.period-selector.selected.container.color
|
Time input surface tint layer colormd.comp.time-input.surface-tint-layer.color | #6750A4 md.comp.time-input.surface-tint-layer.color
|
Time input time input field container colormd.comp.time-input.time-input-field.container.color | #E6E0E9 md.comp.time-input.time-input-field.container.color
|
Time input time input field container heightmd.comp.time-input.time-input-field.container.height | 72dp md.comp.time-input.time-input-field.container.height |
Time input time input field container shapemd.comp.time-input.time-input-field.container.shape | 8dp md.comp.time-input.time-input-field.container.shape
|
Time input time input field container widthmd.comp.time-input.time-input-field.container.width | 96dp md.comp.time-input.time-input-field.container.width |
Label text
| Token | Value |
|---|---|
Time input period selector label text fontmd.comp.time-input.period-selector.label-text.font | Roboto md.comp.time-input.period-selector.label-text.font
|
Time input period selector label text line heightmd.comp.time-input.period-selector.label-text.line-height | 24pt md.comp.time-input.period-selector.label-text.line-height
|
Time input period selector label text sizemd.comp.time-input.period-selector.label-text.size | 16pt md.comp.time-input.period-selector.label-text.size
|
Time input period selector label text trackingmd.comp.time-input.period-selector.label-text.tracking | 0.15pt md.comp.time-input.period-selector.label-text.tracking
|
Type stylemd.comp.time-input.period-selector.label-text.type | Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt md.comp.time-input.period-selector.label-text.type
|
Time input period selector label text weightmd.comp.time-input.period-selector.label-text.weight | 500 md.comp.time-input.period-selector.label-text.weight
|
Time input period selector selected label text colormd.comp.time-input.period-selector.selected.label-text.color | #633B48 md.comp.time-input.period-selector.selected.label-text.color
|
Time input period selector unselected label text colormd.comp.time-input.period-selector.unselected.label-text.color | #49454F md.comp.time-input.period-selector.unselected.label-text.color
|
Time input time input field label text colormd.comp.time-input.time-input-field.label-text.color | #1D1B20 md.comp.time-input.time-input-field.label-text.color
|
Time input time input field label text fontmd.comp.time-input.time-input-field.label-text.font | Roboto md.comp.time-input.time-input-field.label-text.font
|
Time input time input field label text line heightmd.comp.time-input.time-input-field.label-text.line-height | 52pt md.comp.time-input.time-input-field.label-text.line-height
|
Time input time input field label text sizemd.comp.time-input.time-input-field.label-text.size | 45pt md.comp.time-input.time-input-field.label-text.size
|
Time input time input field label text trackingmd.comp.time-input.time-input-field.label-text.tracking | 0pt md.comp.time-input.time-input-field.label-text.tracking
|
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 md.comp.time-input.time-input-field.label-text.type
|
Time input time input field label text weightmd.comp.time-input.time-input-field.label-text.weight | 400 md.comp.time-input.time-input-field.label-text.weight
|
Headline
| Token | Value |
|---|---|
Time input headline colormd.comp.time-input.headline.color | #49454F md.comp.time-input.headline.color
|
Time input headline fontmd.comp.time-input.headline.font | Roboto md.comp.time-input.headline.font
|
Time input headline line heightmd.comp.time-input.headline.line-height | 16pt md.comp.time-input.headline.line-height
|
Time input headline sizemd.comp.time-input.headline.size | 12pt md.comp.time-input.headline.size
|
Time input headline trackingmd.comp.time-input.headline.tracking | 0.5pt md.comp.time-input.headline.tracking
|
Time input headline typemd.comp.time-input.headline.type | Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt md.comp.time-input.headline.type
|
Time input headline weightmd.comp.time-input.headline.weight | 500 md.comp.time-input.headline.weight
|
Supporting text
| Token | Value |
|---|---|
Time input time input field supporting text colormd.comp.time-input.time-input-field.supporting-text.color | #49454F md.comp.time-input.time-input-field.supporting-text.color
|
Time input time input field supporting text fontmd.comp.time-input.time-input-field.supporting-text.font | Roboto md.comp.time-input.time-input-field.supporting-text.font
|
Time input time input field supporting text line heightmd.comp.time-input.time-input-field.supporting-text.line-height | 16pt md.comp.time-input.time-input-field.supporting-text.line-height
|
Time input time input field supporting text sizemd.comp.time-input.time-input-field.supporting-text.size | 12pt md.comp.time-input.time-input-field.supporting-text.size
|
Time input time input field supporting text trackingmd.comp.time-input.time-input-field.supporting-text.tracking | 0.4pt md.comp.time-input.time-input-field.supporting-text.tracking
|
Type stylemd.comp.time-input.time-input-field.supporting-text.type | Roboto · 12pt · weight 400 · line height 16pt · tracking 0.4pt md.comp.time-input.time-input-field.supporting-text.type
|
Time input time input field supporting text weightmd.comp.time-input.time-input-field.supporting-text.weight | 400 md.comp.time-input.time-input-field.supporting-text.weight
|
Separator
| Token | Value |
|---|---|
Time input time input field separator colormd.comp.time-input.time-input-field.separator.color | #1D1B20 md.comp.time-input.time-input-field.separator.color
|
Time input time input field separator fontmd.comp.time-input.time-input-field.separator.font | Roboto md.comp.time-input.time-input-field.separator.font
|
Time input time input field separator line heightmd.comp.time-input.time-input-field.separator.line-height | 64pt md.comp.time-input.time-input-field.separator.line-height
|
Time input time input field separator sizemd.comp.time-input.time-input-field.separator.size | 57pt md.comp.time-input.time-input-field.separator.size
|
Time input time input field separator trackingmd.comp.time-input.time-input-field.separator.tracking | -0.25pt md.comp.time-input.time-input-field.separator.tracking
|
Type stylemd.comp.time-input.time-input-field.separator.type | Roboto · 57pt · weight 400 · line height 64pt · tracking -0.25pt md.comp.time-input.time-input-field.separator.type
|
Time input time input field separator weightmd.comp.time-input.time-input-field.separator.weight | 400 md.comp.time-input.time-input-field.separator.weight
|
Hovered
Label text
| Token | Value |
|---|---|
Time input period selector selected hover label text colormd.comp.time-input.period-selector.selected.hover.label-text.color | #633B48 md.comp.time-input.period-selector.selected.hover.label-text.color
|
Time input period selector unselected hover label text colormd.comp.time-input.period-selector.unselected.hover.label-text.color | #49454F md.comp.time-input.period-selector.unselected.hover.label-text.color
|
Time input time input field hover label text colormd.comp.time-input.time-input-field.hover.label-text.color | #1D1B20 md.comp.time-input.time-input-field.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Time input period selector hover state layer opacitymd.comp.time-input.period-selector.hover.state-layer.opacity | 8% md.comp.time-input.period-selector.hover.state-layer.opacity
|
Time input period selector selected hover state layer colormd.comp.time-input.period-selector.selected.hover.state-layer.color | #633B48 md.comp.time-input.period-selector.selected.hover.state-layer.color
|
Time input period selector unselected hover state layer colormd.comp.time-input.period-selector.unselected.hover.state-layer.color | #49454F md.comp.time-input.period-selector.unselected.hover.state-layer.color
|
Time input time input field hover state layer colormd.comp.time-input.time-input-field.hover.state-layer.color | #1D1B20 md.comp.time-input.time-input-field.hover.state-layer.color
|
Time input time input field hover state layer opacitymd.comp.time-input.time-input-field.hover.state-layer.opacity | 8% md.comp.time-input.time-input-field.hover.state-layer.opacity
|
Focused
Focus indicator
| Token | Value |
|---|---|
Time input focus indicator colormd.comp.time-input.focus.indicator.color | #625B71 md.comp.time-input.focus.indicator.color
|
Time input focus indicator offsetmd.comp.time-input.focus.indicator.outline.offset | 2dp md.comp.time-input.focus.indicator.outline.offset
|
Time input focus indicator thicknessmd.comp.time-input.focus.indicator.thickness | 3dp md.comp.time-input.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Time input time input field focus container colormd.comp.time-input.time-input-field.focus.container.color | #EADDFF md.comp.time-input.time-input-field.focus.container.color
|
Time input time input field focus outline colormd.comp.time-input.time-input-field.focus.outline.color | #6750A4 md.comp.time-input.time-input-field.focus.outline.color
|
Time input time input field focus outline widthmd.comp.time-input.time-input-field.focus.outline.width | 2dp md.comp.time-input.time-input-field.focus.outline.width |
Label text
| Token | Value |
|---|---|
Time input period selector selected focus label text colormd.comp.time-input.period-selector.selected.focus.label-text.color | #633B48 md.comp.time-input.period-selector.selected.focus.label-text.color
|
Time input period selector unselected focus label text colormd.comp.time-input.period-selector.unselected.focus.label-text.color | #49454F md.comp.time-input.period-selector.unselected.focus.label-text.color
|
Time input time input field focus label text colormd.comp.time-input.time-input-field.focus.label-text.color | #4F378B md.comp.time-input.time-input-field.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Time input period selector focus state layer opacitymd.comp.time-input.period-selector.focus.state-layer.opacity | 10% md.comp.time-input.period-selector.focus.state-layer.opacity
|
Time input period selector selected focus state layer colormd.comp.time-input.period-selector.selected.focus.state-layer.color | #633B48 md.comp.time-input.period-selector.selected.focus.state-layer.color
|
Time input period selector unselected focus state layer colormd.comp.time-input.period-selector.unselected.focus.state-layer.color | #49454F md.comp.time-input.period-selector.unselected.focus.state-layer.color
|
Pressed (ripple)
Label text
| Token | Value |
|---|---|
Time input period selector selected pressed label text colormd.comp.time-input.period-selector.selected.pressed.label-text.color | #633B48 md.comp.time-input.period-selector.selected.pressed.label-text.color
|
Time input period selector unselected pressed label text colormd.comp.time-input.period-selector.unselected.pressed.label-text.color | #49454F md.comp.time-input.period-selector.unselected.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Time input period selector pressed state layer opacitymd.comp.time-input.period-selector.pressed.state-layer.opacity | 10% md.comp.time-input.period-selector.pressed.state-layer.opacity
|
Time input period selector selected pressed state layer colormd.comp.time-input.period-selector.selected.pressed.state-layer.color | #633B48 md.comp.time-input.period-selector.selected.pressed.state-layer.color
|
Time input period selector unselected pressed state layer colormd.comp.time-input.period-selector.unselected.pressed.state-layer.color | #49454F md.comp.time-input.period-selector.unselected.pressed.state-layer.color
|