Material Design 3 "Date Picker" tokens: All tokens
Preview
Browse tokens
Color
Date picker - Modal input
Enabled
Container
| Token | Value |
|---|---|
Container colormd.comp.date-input.modal.container.color | #ECE6F0 md.comp.date-input.modal.container.color
|
Container elevationmd.comp.date-input.modal.container.elevation | 6dp md.comp.date-input.modal.container.elevation
|
Container heightmd.comp.date-input.modal.container.height | 512dp md.comp.date-input.modal.container.height |
Container shapemd.comp.date-input.modal.container.shape | 28dp md.comp.date-input.modal.container.shape
|
Container surface tint layer colormd.comp.date-input.modal.container.surface-tint-layer.color | #6750A4 md.comp.date-input.modal.container.surface-tint-layer.color
|
Container widthmd.comp.date-input.modal.container.width | 328dp md.comp.date-input.modal.container.width |
Header container heightmd.comp.date-input.modal.header.container.height | 120dp md.comp.date-input.modal.header.container.height |
Header container widthmd.comp.date-input.modal.header.container.width | 328dp md.comp.date-input.modal.header.container.width |
Headline
| Token | Value |
|---|---|
Header headline colormd.comp.date-input.modal.header.headline.color | #49454F md.comp.date-input.modal.header.headline.color
|
Header headline fontmd.comp.date-input.modal.header.headline.font | Roboto md.comp.date-input.modal.header.headline.font
|
Header headline line heightmd.comp.date-input.modal.header.headline.line-height | 40pt md.comp.date-input.modal.header.headline.line-height
|
Header headline sizemd.comp.date-input.modal.header.headline.size | 32pt md.comp.date-input.modal.header.headline.size
|
Header headline trackingmd.comp.date-input.modal.header.headline.tracking | 0pt md.comp.date-input.modal.header.headline.tracking
|
Header headline type stylemd.comp.date-input.modal.header.headline.type | Roboto · 32pt · weight 400 · line height 40pt · tracking 0pt md.comp.date-input.modal.header.headline.type
|
Header headline weightmd.comp.date-input.modal.header.headline.weight | 400 md.comp.date-input.modal.header.headline.weight
|
Supporting text
| Token | Value |
|---|---|
Header supporting text colormd.comp.date-input.modal.header.supporting-text.color | #49454F md.comp.date-input.modal.header.supporting-text.color
|
Header supporting text fontmd.comp.date-input.modal.header.supporting-text.font | Roboto md.comp.date-input.modal.header.supporting-text.font
|
Header supporting text line heightmd.comp.date-input.modal.header.supporting-text.line-height | 20pt md.comp.date-input.modal.header.supporting-text.line-height
|
Header supporting text sizemd.comp.date-input.modal.header.supporting-text.size | 14pt md.comp.date-input.modal.header.supporting-text.size
|
Header supporting text trackingmd.comp.date-input.modal.header.supporting-text.tracking | 0.1pt md.comp.date-input.modal.header.supporting-text.tracking
|
Header supporting text type stylemd.comp.date-input.modal.header.supporting-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.date-input.modal.header.supporting-text.type
|
Header supporting text weightmd.comp.date-input.modal.header.supporting-text.weight | 500 md.comp.date-input.modal.header.supporting-text.weight
|
Date picker - Modal
Enabled
Container
| Token | Value |
|---|---|
Container colormd.comp.date-picker.modal.container.color | #ECE6F0 md.comp.date-picker.modal.container.color
|
Container elevationmd.comp.date-picker.modal.container.elevation | 6dp md.comp.date-picker.modal.container.elevation
|
Container heightmd.comp.date-picker.modal.container.height | 524dp md.comp.date-picker.modal.container.height |
Container shapemd.comp.date-picker.modal.container.shape | 28dp md.comp.date-picker.modal.container.shape
|
Container surface tint layer colormd.comp.date-picker.modal.container.surface-tint-layer.color | #6750A4 md.comp.date-picker.modal.container.surface-tint-layer.color
|
Container widthmd.comp.date-picker.modal.container.width | 360dp md.comp.date-picker.modal.container.width |
Date container heightmd.comp.date-picker.modal.date.container.height | 40dp md.comp.date-picker.modal.date.container.height |
Date container shapemd.comp.date-picker.modal.date.container.shape | Full md.comp.date-picker.modal.date.container.shape
|
Date container widthmd.comp.date-picker.modal.date.container.width | 40dp md.comp.date-picker.modal.date.container.width |
Date selected container colormd.comp.date-picker.modal.date.selected.container.color | #6750A4 md.comp.date-picker.modal.date.selected.container.color
|
Date today container outline colormd.comp.date-picker.modal.date.today.container.outline.color | #6750A4 md.comp.date-picker.modal.date.today.container.outline.color
|
Date today container outline widthmd.comp.date-picker.modal.date.today.container.outline.width | 1dp md.comp.date-picker.modal.date.today.container.outline.width |
Header container heightmd.comp.date-picker.modal.header.container.height | 120dp md.comp.date-picker.modal.header.container.height |
Header container widthmd.comp.date-picker.modal.header.container.width | 360dp md.comp.date-picker.modal.header.container.width |
Range selection active indicator container colormd.comp.date-picker.modal.range-selection.active-indicator.container.color | #E8DEF8 md.comp.date-picker.modal.range-selection.active-indicator.container.color
|
Range selection active indicator container heightmd.comp.date-picker.modal.range-selection.active-indicator.container.height | 40dp md.comp.date-picker.modal.range-selection.active-indicator.container.height |
Range selection active indicator container shapemd.comp.date-picker.modal.range-selection.active-indicator.container.shape | Full md.comp.date-picker.modal.range-selection.active-indicator.container.shape
|
Range selection container elevationmd.comp.date-picker.modal.range-selection.container.elevation | 0dp md.comp.date-picker.modal.range-selection.container.elevation
|
Range selection container shapemd.comp.date-picker.modal.range-selection.container.shape | 0dp md.comp.date-picker.modal.range-selection.container.shape
|
Range selection header container heightmd.comp.date-picker.modal.range-selection.header.container.height | 128dp md.comp.date-picker.modal.range-selection.header.container.height |
Year selection year container heightmd.comp.date-picker.modal.year-selection.year.container.height | 36dp md.comp.date-picker.modal.year-selection.year.container.height |
Year selection year container widthmd.comp.date-picker.modal.year-selection.year.container.width | 72dp md.comp.date-picker.modal.year-selection.year.container.width |
Year selection year selected container colormd.comp.date-picker.modal.year-selection.year.selected.container.color | #6750A4 md.comp.date-picker.modal.year-selection.year.selected.container.color
|
Label text
| Token | Value |
|---|---|
Date label text fontmd.comp.date-picker.modal.date.label-text.font | Roboto md.comp.date-picker.modal.date.label-text.font
|
Date label text line heightmd.comp.date-picker.modal.date.label-text.line-height | 24pt md.comp.date-picker.modal.date.label-text.line-height
|
Date label text sizemd.comp.date-picker.modal.date.label-text.size | 16pt md.comp.date-picker.modal.date.label-text.size
|
Date label text trackingmd.comp.date-picker.modal.date.label-text.tracking | 0.5pt md.comp.date-picker.modal.date.label-text.tracking
|
Date label text type stylemd.comp.date-picker.modal.date.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.date-picker.modal.date.label-text.type
|
Date label text weightmd.comp.date-picker.modal.date.label-text.weight | 400 md.comp.date-picker.modal.date.label-text.weight
|
Date selected label text colormd.comp.date-picker.modal.date.selected.label-text.color | #FFFFFF md.comp.date-picker.modal.date.selected.label-text.color
|
Date today label text colormd.comp.date-picker.modal.date.today.label-text.color | #6750A4 md.comp.date-picker.modal.date.today.label-text.color
|
Date unselected label text colormd.comp.date-picker.modal.date.unselected.label-text.color | #1D1B20 md.comp.date-picker.modal.date.unselected.label-text.color
|
Range selection date in range label text colormd.comp.date-picker.modal.range-selection.date.in-range.label-text.color | #4A4458 md.comp.date-picker.modal.range-selection.date.in-range.label-text.color
|
Weekdays label text colormd.comp.date-picker.modal.weekdays.label-text.color | #1D1B20 md.comp.date-picker.modal.weekdays.label-text.color
|
Weekdays label text fontmd.comp.date-picker.modal.weekdays.label-text.font | Roboto md.comp.date-picker.modal.weekdays.label-text.font
|
Weekdays label text line heightmd.comp.date-picker.modal.weekdays.label-text.line-height | 24pt md.comp.date-picker.modal.weekdays.label-text.line-height
|
Weekdays label text sizemd.comp.date-picker.modal.weekdays.label-text.size | 16pt md.comp.date-picker.modal.weekdays.label-text.size
|
Weekdays label text trackingmd.comp.date-picker.modal.weekdays.label-text.tracking | 0.5pt md.comp.date-picker.modal.weekdays.label-text.tracking
|
Weekdays label text type stylemd.comp.date-picker.modal.weekdays.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.date-picker.modal.weekdays.label-text.type
|
Weekdays label text weightmd.comp.date-picker.modal.weekdays.label-text.weight | 400 md.comp.date-picker.modal.weekdays.label-text.weight
|
Year selection year label text fontmd.comp.date-picker.modal.year-selection.year.label-text.font | Roboto md.comp.date-picker.modal.year-selection.year.label-text.font
|
Year selection year label text line heightmd.comp.date-picker.modal.year-selection.year.label-text.line-height | 24pt md.comp.date-picker.modal.year-selection.year.label-text.line-height
|
Year selection year label text sizemd.comp.date-picker.modal.year-selection.year.label-text.size | 16pt md.comp.date-picker.modal.year-selection.year.label-text.size
|
Year selection year label text trackingmd.comp.date-picker.modal.year-selection.year.label-text.tracking | 0.5pt md.comp.date-picker.modal.year-selection.year.label-text.tracking
|
Year selection year label text type stylemd.comp.date-picker.modal.year-selection.year.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.date-picker.modal.year-selection.year.label-text.type
|
Year selection year label text weightmd.comp.date-picker.modal.year-selection.year.label-text.weight | 400 md.comp.date-picker.modal.year-selection.year.label-text.weight
|
Year selection year selected label text colormd.comp.date-picker.modal.year-selection.year.selected.label-text.color | #FFFFFF md.comp.date-picker.modal.year-selection.year.selected.label-text.color
|
Year selection year unselected label text colormd.comp.date-picker.modal.year-selection.year.unselected.label-text.color | #49454F md.comp.date-picker.modal.year-selection.year.unselected.label-text.color
|
Subhead
| Token | Value |
|---|---|
Range selection month subhead colormd.comp.date-picker.modal.range-selection.month.subhead.color | #49454F md.comp.date-picker.modal.range-selection.month.subhead.color
|
Range selection month subhead fontmd.comp.date-picker.modal.range-selection.month.subhead.font | Roboto md.comp.date-picker.modal.range-selection.month.subhead.font
|
Range selection month subhead line heightmd.comp.date-picker.modal.range-selection.month.subhead.line-height | 20pt md.comp.date-picker.modal.range-selection.month.subhead.line-height
|
Range selection month subhead sizemd.comp.date-picker.modal.range-selection.month.subhead.size | 14pt md.comp.date-picker.modal.range-selection.month.subhead.size
|
Range selection month subhead trackingmd.comp.date-picker.modal.range-selection.month.subhead.tracking | 0.1pt md.comp.date-picker.modal.range-selection.month.subhead.tracking
|
Range selection month subhead type stylemd.comp.date-picker.modal.range-selection.month.subhead.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.date-picker.modal.range-selection.month.subhead.type
|
Range selection month subhead weightmd.comp.date-picker.modal.range-selection.month.subhead.weight | 500 md.comp.date-picker.modal.range-selection.month.subhead.weight
|
Headline
| Token | Value |
|---|---|
Header headline colormd.comp.date-picker.modal.header.headline.color | #49454F md.comp.date-picker.modal.header.headline.color
|
Header headline fontmd.comp.date-picker.modal.header.headline.font | Roboto md.comp.date-picker.modal.header.headline.font
|
Header headline line heightmd.comp.date-picker.modal.header.headline.line-height | 40pt md.comp.date-picker.modal.header.headline.line-height
|
Header headline sizemd.comp.date-picker.modal.header.headline.size | 32pt md.comp.date-picker.modal.header.headline.size
|
Header headline trackingmd.comp.date-picker.modal.header.headline.tracking | 0pt md.comp.date-picker.modal.header.headline.tracking
|
Header headline type stylemd.comp.date-picker.modal.header.headline.type | Roboto · 32pt · weight 400 · line height 40pt · tracking 0pt md.comp.date-picker.modal.header.headline.type
|
Header headline weightmd.comp.date-picker.modal.header.headline.weight | 400 md.comp.date-picker.modal.header.headline.weight
|
Range selection header headline fontmd.comp.date-picker.modal.range-selection.header.headline.font | Roboto md.comp.date-picker.modal.range-selection.header.headline.font
|
Range selection header headline line heightmd.comp.date-picker.modal.range-selection.header.headline.line-height | 28pt md.comp.date-picker.modal.range-selection.header.headline.line-height
|
Range selection header headline sizemd.comp.date-picker.modal.range-selection.header.headline.size | 22pt md.comp.date-picker.modal.range-selection.header.headline.size
|
Range selection header headline trackingmd.comp.date-picker.modal.range-selection.header.headline.tracking | 0pt md.comp.date-picker.modal.range-selection.header.headline.tracking
|
Range selection header headline type stylemd.comp.date-picker.modal.range-selection.header.headline.type | Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt md.comp.date-picker.modal.range-selection.header.headline.type
|
Range selection header headline weightmd.comp.date-picker.modal.range-selection.header.headline.weight | 400 md.comp.date-picker.modal.range-selection.header.headline.weight
|
Supporting text
| Token | Value |
|---|---|
Header supporting text type stylemd.comp.date-picker.modal.header.supporting-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.date-picker.modal.header.supporting-text.type
|
State layer
| Token | Value |
|---|---|
Date state layer heightmd.comp.date-picker.modal.date.state-layer.height | 40dp md.comp.date-picker.modal.date.state-layer.height |
Date state layer shapemd.comp.date-picker.modal.date.state-layer.shape | Full md.comp.date-picker.modal.date.state-layer.shape
|
Date state layer widthmd.comp.date-picker.modal.date.state-layer.width | 40dp md.comp.date-picker.modal.date.state-layer.width |
Year selection year state layer heightmd.comp.date-picker.modal.year-selection.year.state-layer.height | 36dp md.comp.date-picker.modal.year-selection.year.state-layer.height |
Year selection year state layer shapemd.comp.date-picker.modal.year-selection.year.state-layer.shape | Full md.comp.date-picker.modal.year-selection.year.state-layer.shape
|
Year selection year state layer widthmd.comp.date-picker.modal.year-selection.year.state-layer.width | 72dp md.comp.date-picker.modal.year-selection.year.state-layer.width |
Header
| Token | Value |
|---|---|
Header supporting text colormd.comp.date-picker.modal.header.supporting-text.color | #49454F md.comp.date-picker.modal.header.supporting-text.color
|
Header supporting text fontmd.comp.date-picker.modal.header.supporting-text.font | Roboto md.comp.date-picker.modal.header.supporting-text.font
|
Header supporting text line heightmd.comp.date-picker.modal.header.supporting-text.line-height | 20pt md.comp.date-picker.modal.header.supporting-text.line-height
|
Header supporting text sizemd.comp.date-picker.modal.header.supporting-text.size | 14pt md.comp.date-picker.modal.header.supporting-text.size
|
Header supporting text trackingmd.comp.date-picker.modal.header.supporting-text.tracking | 0.1pt md.comp.date-picker.modal.header.supporting-text.tracking
|
Header supporting text weightmd.comp.date-picker.modal.header.supporting-text.weight | 500 md.comp.date-picker.modal.header.supporting-text.weight
|
Hovered
State layer
| Token | Value |
|---|---|
Date hover state layer opacitymd.comp.date-picker.modal.date.hover.state-layer.opacity | 8% md.comp.date-picker.modal.date.hover.state-layer.opacity
|
Date selected hover state layer colormd.comp.date-picker.modal.date.selected.hover.state-layer.color | #FFFFFF md.comp.date-picker.modal.date.selected.hover.state-layer.color
|
Date today hover state layer colormd.comp.date-picker.modal.date.today.hover.state-layer.color | #6750A4 md.comp.date-picker.modal.date.today.hover.state-layer.color
|
Date unselected hover state layer colormd.comp.date-picker.modal.date.unselected.hover.state-layer.color | #49454F md.comp.date-picker.modal.date.unselected.hover.state-layer.color
|
Range selection date in range hover state layer colormd.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.color | #4F378B md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.color
|
Range selection date in range hover state layer opacitymd.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opacity | 8% md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opacity
|
Range selection date in range hover state layer opcaitymd.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opcaity | 8% md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opcaity
|
Year selection year hover state layer opacitymd.comp.date-picker.modal.year-selection.year.hover.state-layer.opacity | 8% md.comp.date-picker.modal.year-selection.year.hover.state-layer.opacity
|
Year selection year selected hover state layer colormd.comp.date-picker.modal.year-selection.year.selected.hover.state-layer.color | #FFFFFF md.comp.date-picker.modal.year-selection.year.selected.hover.state-layer.color
|
Year selection year unselected hover state layer colormd.comp.date-picker.modal.year-selection.year.unselected.hover.state-layer.color | #49454F md.comp.date-picker.modal.year-selection.year.unselected.hover.state-layer.color
|
Focused
State layer
| Token | Value |
|---|---|
Date focus state layer opacitymd.comp.date-picker.modal.date.focus.state-layer.opacity | 10% md.comp.date-picker.modal.date.focus.state-layer.opacity
|
Date selected focus state layer colormd.comp.date-picker.modal.date.selected.focus.state-layer.color | #FFFFFF md.comp.date-picker.modal.date.selected.focus.state-layer.color
|
Date today focus state layer colormd.comp.date-picker.modal.date.today.focus.state-layer.color | #6750A4 md.comp.date-picker.modal.date.today.focus.state-layer.color
|
Date unselected focus state layer colormd.comp.date-picker.modal.date.unselected.focus.state-layer.color | #49454F md.comp.date-picker.modal.date.unselected.focus.state-layer.color
|
Range selection date in range focus state layer colormd.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.color | #4F378B md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.color
|
Range selection date in range focus state layer opacitymd.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opacity | 10% md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opacity
|
Range selection date in range focus state layer opcaitymd.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opcaity | 10% md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opcaity
|
Year selection year focus state layer opacitymd.comp.date-picker.modal.year-selection.year.focus.state-layer.opacity | 10% md.comp.date-picker.modal.year-selection.year.focus.state-layer.opacity
|
Year selection year selected focus state layer colormd.comp.date-picker.modal.year-selection.year.selected.focus.state-layer.color | #FFFFFF md.comp.date-picker.modal.year-selection.year.selected.focus.state-layer.color
|
Year selection year unselected focus state layer colormd.comp.date-picker.modal.year-selection.year.unselected.focus.state-layer.color | #49454F md.comp.date-picker.modal.year-selection.year.unselected.focus.state-layer.color
|
Pressed (ripple)
State layer
| Token | Value |
|---|---|
Date pressed state layer opacitymd.comp.date-picker.modal.date.pressed.state-layer.opacity | 10% md.comp.date-picker.modal.date.pressed.state-layer.opacity
|
Date selected pressed state layer colormd.comp.date-picker.modal.date.selected.pressed.state-layer.color | #FFFFFF md.comp.date-picker.modal.date.selected.pressed.state-layer.color
|
Date today pressed state layer colormd.comp.date-picker.modal.date.today.pressed.state-layer.color | #6750A4 md.comp.date-picker.modal.date.today.pressed.state-layer.color
|
Date unselected pressed state layer colormd.comp.date-picker.modal.date.unselected.pressed.state-layer.color | #49454F md.comp.date-picker.modal.date.unselected.pressed.state-layer.color
|
Range selection date in range pressed state layer colormd.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.color | #4F378B md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.color
|
Range selection date in range pressed state layer opacitymd.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opacity | 10% md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opacity
|
Range selection date in range pressed state layer opcaitymd.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opcaity | 10% md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opcaity
|
Year selection year pressed state layer opacitymd.comp.date-picker.modal.year-selection.year.pressed.state-layer.opacity | 10% md.comp.date-picker.modal.year-selection.year.pressed.state-layer.opacity
|
Year selection year selected pressed state layer colormd.comp.date-picker.modal.year-selection.year.selected.pressed.state-layer.color | #FFFFFF md.comp.date-picker.modal.year-selection.year.selected.pressed.state-layer.color
|
Year selection year unselected pressed state layer colormd.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color | #49454F md.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color
|
Date picker - Docked
Enabled
Container
| Token | Value |
|---|---|
Container colormd.comp.date-picker.docked.container.color | #ECE6F0 md.comp.date-picker.docked.container.color
|
Container elevationmd.comp.date-picker.docked.container.elevation | 6dp md.comp.date-picker.docked.container.elevation
|
Container heightmd.comp.date-picker.docked.container.height | 456dp md.comp.date-picker.docked.container.height |
Container shapemd.comp.date-picker.docked.container.shape | 16dp md.comp.date-picker.docked.container.shape
|
Container surface tint layer colormd.comp.date-picker.docked.container.surface-tint-layer.color | #6750A4 md.comp.date-picker.docked.container.surface-tint-layer.color
|
Container widthmd.comp.date-picker.docked.container.width | 360dp md.comp.date-picker.docked.container.width |
Date container heightmd.comp.date-picker.docked.date.container.height | 48dp md.comp.date-picker.docked.date.container.height |
Date container shapemd.comp.date-picker.docked.date.container.shape | Full md.comp.date-picker.docked.date.container.shape
|
Date container widthmd.comp.date-picker.docked.date.container.width | 48dp md.comp.date-picker.docked.date.container.width |
Date selected container colormd.comp.date-picker.docked.date.selected.container.color | #6750A4 md.comp.date-picker.docked.date.selected.container.color
|
Date today container outline colormd.comp.date-picker.docked.date.today.container.outline.color | #6750A4 md.comp.date-picker.docked.date.today.container.outline.color
|
Date today container outline widthmd.comp.date-picker.docked.date.today.container.outline.width | 1dp md.comp.date-picker.docked.date.today.container.outline.width |
Menu button container heightmd.comp.date-picker.docked.menu-button.container.height | 40dp md.comp.date-picker.docked.menu-button.container.height |
Menu button container shapemd.comp.date-picker.docked.menu-button.container.shape | Full md.comp.date-picker.docked.menu-button.container.shape
|
Menu list item container heightmd.comp.date-picker.docked.menu.list-item.container.height | 48dp md.comp.date-picker.docked.menu.list-item.container.height |
Menu list item selected container colormd.comp.date-picker.docked.menu.list-item.selected.container.color | #E7E0EC md.comp.date-picker.docked.menu.list-item.selected.container.color
|
Label text
| Token | Value |
|---|---|
Date label text fontmd.comp.date-picker.docked.date.label-text.font | Roboto md.comp.date-picker.docked.date.label-text.font
|
Date label text line heightmd.comp.date-picker.docked.date.label-text.line-height | 24pt md.comp.date-picker.docked.date.label-text.line-height
|
Date label text sizemd.comp.date-picker.docked.date.label-text.size | 16pt md.comp.date-picker.docked.date.label-text.size
|
Date label text trackingmd.comp.date-picker.docked.date.label-text.tracking | 0.5pt md.comp.date-picker.docked.date.label-text.tracking
|
Date label text type stylemd.comp.date-picker.docked.date.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.date-picker.docked.date.label-text.type
|
Date label text weightmd.comp.date-picker.docked.date.label-text.weight | 400 md.comp.date-picker.docked.date.label-text.weight
|
Date selected label text colormd.comp.date-picker.docked.date.selected.label-text.color | #FFFFFF md.comp.date-picker.docked.date.selected.label-text.color
|
Date today label text colormd.comp.date-picker.docked.date.today.label-text.color | #6750A4 md.comp.date-picker.docked.date.today.label-text.color
|
Date unselected label text colormd.comp.date-picker.docked.date.unselected.label-text.color | #1D1B20 md.comp.date-picker.docked.date.unselected.label-text.color
|
Date unselected outside month label text colormd.comp.date-picker.docked.date.unselected.outside-month.label-text.color | #1D1B20 md.comp.date-picker.docked.date.unselected.outside-month.label-text.color
|
Date unselected outside month label text opacitymd.comp.date-picker.docked.date.unselected.outside-month.label-text.opacity | 38% md.comp.date-picker.docked.date.unselected.outside-month.label-text.opacity |
Menu button label text colormd.comp.date-picker.docked.menu-button.label-text.color | #49454F md.comp.date-picker.docked.menu-button.label-text.color
|
Menu button label text fontmd.comp.date-picker.docked.menu-button.label-text.font | Roboto md.comp.date-picker.docked.menu-button.label-text.font
|
Menu button label text line heightmd.comp.date-picker.docked.menu-button.label-text.line-height | 20pt md.comp.date-picker.docked.menu-button.label-text.line-height
|
Menu button label text sizemd.comp.date-picker.docked.menu-button.label-text.size | 14pt md.comp.date-picker.docked.menu-button.label-text.size
|
Menu button label text trackingmd.comp.date-picker.docked.menu-button.label-text.tracking | 0.1pt md.comp.date-picker.docked.menu-button.label-text.tracking
|
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 md.comp.date-picker.docked.menu-button.label-text.type
|
Menu button label text weightmd.comp.date-picker.docked.menu-button.label-text.weight | 500 md.comp.date-picker.docked.menu-button.label-text.weight
|
Menu list item label text colormd.comp.date-picker.docked.menu.list-item.label-text.color | #1D1B20 md.comp.date-picker.docked.menu.list-item.label-text.color
|
Menu list item label text fontmd.comp.date-picker.docked.menu.list-item.label-text.font | Roboto md.comp.date-picker.docked.menu.list-item.label-text.font
|
Menu list item label text line heightmd.comp.date-picker.docked.menu.list-item.label-text.line-height | 24pt md.comp.date-picker.docked.menu.list-item.label-text.line-height
|
Menu list item label text sizemd.comp.date-picker.docked.menu.list-item.label-text.size | 16pt md.comp.date-picker.docked.menu.list-item.label-text.size
|
Menu list item label text trackingmd.comp.date-picker.docked.menu.list-item.label-text.tracking | 0.5pt md.comp.date-picker.docked.menu.list-item.label-text.tracking
|
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 md.comp.date-picker.docked.menu.list-item.label-text.type
|
Menu list item label text weightmd.comp.date-picker.docked.menu.list-item.label-text.weight | 400 md.comp.date-picker.docked.menu.list-item.label-text.weight
|
Weekdays label text colormd.comp.date-picker.docked.weekdays.label-text.color | #1D1B20 md.comp.date-picker.docked.weekdays.label-text.color
|
Weekdays label text fontmd.comp.date-picker.docked.weekdays.label-text.font | Roboto md.comp.date-picker.docked.weekdays.label-text.font
|
Weekdays label text line heightmd.comp.date-picker.docked.weekdays.label-text.line-height | 24pt md.comp.date-picker.docked.weekdays.label-text.line-height
|
Weekdays label text sizemd.comp.date-picker.docked.weekdays.label-text.size | 16pt md.comp.date-picker.docked.weekdays.label-text.size
|
Weekdays label text trackingmd.comp.date-picker.docked.weekdays.label-text.tracking | 0.5pt md.comp.date-picker.docked.weekdays.label-text.tracking
|
Weekdays label text type stylemd.comp.date-picker.docked.weekdays.label-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.date-picker.docked.weekdays.label-text.type
|
Weekdays label text weightmd.comp.date-picker.docked.weekdays.label-text.weight | 400 md.comp.date-picker.docked.weekdays.label-text.weight
|
Icon
| Token | Value |
|---|---|
Menu button icon colormd.comp.date-picker.docked.menu-button.icon.color | #49454F md.comp.date-picker.docked.menu-button.icon.color
|
Menu button icon sizemd.comp.date-picker.docked.menu-button.icon.size | 18dp md.comp.date-picker.docked.menu-button.icon.size |
Leading icon
| Token | Value |
|---|---|
Menu list item selected leading icon colormd.comp.date-picker.docked.menu.list-item.selected.leading-icon.color | #1D1B20 md.comp.date-picker.docked.menu.list-item.selected.leading-icon.color
|
Menu list item selected leading icon sizemd.comp.date-picker.docked.menu.list-item.selected.leading-icon.size | 24dp md.comp.date-picker.docked.menu.list-item.selected.leading-icon.size |
State layer
| Token | Value |
|---|---|
Date state layer heightmd.comp.date-picker.docked.date.state-layer.height | 40dp md.comp.date-picker.docked.date.state-layer.height |
Date state layer shapemd.comp.date-picker.docked.date.state-layer.shape | Full md.comp.date-picker.docked.date.state-layer.shape
|
Date state layer widthmd.comp.date-picker.docked.date.state-layer.width | 40dp md.comp.date-picker.docked.date.state-layer.width |
Header
| Token | Value |
|---|---|
Header heightmd.comp.date-picker.docked.header.height | 64dp md.comp.date-picker.docked.header.height |
Disabled
Label text
| Token | Value |
|---|---|
Menu button disabled label text colormd.comp.date-picker.docked.menu-button.disabled.label-text.color | #1D1B20 md.comp.date-picker.docked.menu-button.disabled.label-text.color
|
Menu button disabled label text opacitymd.comp.date-picker.docked.menu-button.disabled.label-text.opacity | 38% md.comp.date-picker.docked.menu-button.disabled.label-text.opacity |
Icon
| Token | Value |
|---|---|
Menu button disabled icon colormd.comp.date-picker.docked.menu-button.disabled.icon.color | #1D1B20 md.comp.date-picker.docked.menu-button.disabled.icon.color
|
Menu button disabled icon opacitymd.comp.date-picker.docked.menu-button.disabled.icon.opacity | 38% md.comp.date-picker.docked.menu-button.disabled.icon.opacity |
Hovered
Label text
| Token | Value |
|---|---|
Menu button hover label text colormd.comp.date-picker.docked.menu-button.hover.label-text.color | #49454F md.comp.date-picker.docked.menu-button.hover.label-text.color
|
Menu list item hover label text colormd.comp.date-picker.docked.menu.list-item.hover.label-text.color | #1D1B20 md.comp.date-picker.docked.menu.list-item.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Date hover state layer opacitymd.comp.date-picker.docked.date.hover.state-layer.opacity | 8% md.comp.date-picker.docked.date.hover.state-layer.opacity
|
Date selected hover state layer colormd.comp.date-picker.docked.date.selected.hover.state-layer.color | #FFFFFF md.comp.date-picker.docked.date.selected.hover.state-layer.color
|
Date today hover state layer colormd.comp.date-picker.docked.date.today.hover.state-layer.color | #6750A4 md.comp.date-picker.docked.date.today.hover.state-layer.color
|
Date unselected hover state layer colormd.comp.date-picker.docked.date.unselected.hover.state-layer.color | #49454F md.comp.date-picker.docked.date.unselected.hover.state-layer.color
|
Menu button hover state layer colormd.comp.date-picker.docked.menu-button.hover.state-layer.color | #49454F md.comp.date-picker.docked.menu-button.hover.state-layer.color
|
Menu button hover state layer opacitymd.comp.date-picker.docked.menu-button.hover.state-layer.opacity | 8% md.comp.date-picker.docked.menu-button.hover.state-layer.opacity
|
Menu list item hover state layer colormd.comp.date-picker.docked.menu.list-item.hover.state-layer.color | #1D1B20 md.comp.date-picker.docked.menu.list-item.hover.state-layer.color
|
Menu list item hover state layer opacitymd.comp.date-picker.docked.menu.list-item.hover.state-layer.opacity | 8% md.comp.date-picker.docked.menu.list-item.hover.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Menu button hover icon colormd.comp.date-picker.docked.menu-button.hover.icon.color | #49454F md.comp.date-picker.docked.menu-button.hover.icon.color
|
Leading icon
| Token | Value |
|---|---|
Menu list item selected hover leading icon colormd.comp.date-picker.docked.menu.list-item.selected.hover.leading-icon.color | #49454F md.comp.date-picker.docked.menu.list-item.selected.hover.leading-icon.color
|
Focused
Label text
| Token | Value |
|---|---|
Menu button focus label text colormd.comp.date-picker.docked.menu-button.focus.label-text.color | #49454F md.comp.date-picker.docked.menu-button.focus.label-text.color
|
Menu list item focus label text colormd.comp.date-picker.docked.menu.list-item.focus.label-text.color | #1D1B20 md.comp.date-picker.docked.menu.list-item.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Date focus state layer opacitymd.comp.date-picker.docked.date.focus.state-layer.opacity | 10% md.comp.date-picker.docked.date.focus.state-layer.opacity
|
Date selected focus state layer colormd.comp.date-picker.docked.date.selected.focus.state-layer.color | #FFFFFF md.comp.date-picker.docked.date.selected.focus.state-layer.color
|
Date today focus state layer colormd.comp.date-picker.docked.date.today.focus.state-layer.color | #6750A4 md.comp.date-picker.docked.date.today.focus.state-layer.color
|
Date unselected focus state layer colormd.comp.date-picker.docked.date.unselected.focus.state-layer.color | #49454F md.comp.date-picker.docked.date.unselected.focus.state-layer.color
|
Menu button focus state layer colormd.comp.date-picker.docked.menu-button.focus.state-layer.color | #49454F md.comp.date-picker.docked.menu-button.focus.state-layer.color
|
Menu button focus state layer opacitymd.comp.date-picker.docked.menu-button.focus.state-layer.opacity | 10% md.comp.date-picker.docked.menu-button.focus.state-layer.opacity
|
Menu list item focus state layer colormd.comp.date-picker.docked.menu.list-item.focus.state-layer.color | #1D1B20 md.comp.date-picker.docked.menu.list-item.focus.state-layer.color
|
Menu list item focus state layer opacitymd.comp.date-picker.docked.menu.list-item.focus.state-layer.opacity | 10% md.comp.date-picker.docked.menu.list-item.focus.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Menu button focus icon colormd.comp.date-picker.docked.menu-button.focus.icon.color | #49454F md.comp.date-picker.docked.menu-button.focus.icon.color
|
Leading icon
| Token | Value |
|---|---|
Menu list item selected focus leading icon colormd.comp.date-picker.docked.menu.list-item.selected.focus.leading-icon.color | #49454F md.comp.date-picker.docked.menu.list-item.selected.focus.leading-icon.color
|
Pressed (ripple)
Label text
| Token | Value |
|---|---|
Menu button pressed label text colormd.comp.date-picker.docked.menu-button.pressed.label-text.color | #49454F md.comp.date-picker.docked.menu-button.pressed.label-text.color
|
Menu list item pressed label text colormd.comp.date-picker.docked.menu.list-item.pressed.label-text.color | #1D1B20 md.comp.date-picker.docked.menu.list-item.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Date pressed state layer opacitymd.comp.date-picker.docked.date.pressed.state-layer.opacity | 10% md.comp.date-picker.docked.date.pressed.state-layer.opacity
|
Date selected pressed state layer colormd.comp.date-picker.docked.date.selected.pressed.state-layer.color | #FFFFFF md.comp.date-picker.docked.date.selected.pressed.state-layer.color
|
Date today pressed state layer colormd.comp.date-picker.docked.date.today.pressed.state-layer.color | #6750A4 md.comp.date-picker.docked.date.today.pressed.state-layer.color
|
Date unselected pressed state layer colormd.comp.date-picker.docked.date.unselected.pressed.state-layer.color | #49454F md.comp.date-picker.docked.date.unselected.pressed.state-layer.color
|
Menu button pressed state layer colormd.comp.date-picker.docked.menu-button.pressed.state-layer.color | #49454F md.comp.date-picker.docked.menu-button.pressed.state-layer.color
|
Menu button pressed state layer opacitymd.comp.date-picker.docked.menu-button.pressed.state-layer.opacity | 10% md.comp.date-picker.docked.menu-button.pressed.state-layer.opacity
|
Menu list item pressed state layer colormd.comp.date-picker.docked.menu.list-item.pressed.state-layer.color | #1D1B20 md.comp.date-picker.docked.menu.list-item.pressed.state-layer.color
|
Menu list item pressed state layer opacitymd.comp.date-picker.docked.menu.list-item.pressed.state-layer.opacity | 10% md.comp.date-picker.docked.menu.list-item.pressed.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Menu button pressed icon colormd.comp.date-picker.docked.menu-button.pressed.icon.color | #49454F md.comp.date-picker.docked.menu-button.pressed.icon.color
|
Leading icon
| Token | Value |
|---|---|
Menu list item selected pressed leading icon colormd.comp.date-picker.docked.menu.list-item.selected.pressed.leading-icon.color | #49454F md.comp.date-picker.docked.menu.list-item.selected.pressed.leading-icon.color
|