Material Design 3 date pickers tokens

Change history (522)Material Design 3 documentation

Browse tokens

Enabled

Container

Label text

Subhead

Subhead tokens
Token	Value
Range selection month subhead color`md.comp.date-picker.modal.range-selection.month.subhead.color`	#49454F Range selection month subhead color #49454F `md.comp.date-picker.modal.range-selection.month.subhead.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Range selection month subhead font`md.comp.date-picker.modal.range-selection.month.subhead.font`	Roboto Range selection month subhead font Roboto `md.comp.date-picker.modal.range-selection.month.subhead.font` `md.sys.typescale.title-small.font` `md.ref.typeface.plain` Roboto
Range selection month subhead line height`md.comp.date-picker.modal.range-selection.month.subhead.line-height`	20pt Range selection month subhead line height 20pt `md.comp.date-picker.modal.range-selection.month.subhead.line-height` `md.sys.typescale.title-small.line-height` 20pt
Range selection month subhead size`md.comp.date-picker.modal.range-selection.month.subhead.size`	14pt Range selection month subhead size 14pt `md.comp.date-picker.modal.range-selection.month.subhead.size` `md.sys.typescale.title-small.size` 14pt
Range selection month subhead weight`md.comp.date-picker.modal.range-selection.month.subhead.weight`	500 Range selection month subhead weight 500 `md.comp.date-picker.modal.range-selection.month.subhead.weight` `md.sys.typescale.title-small.weight` `md.ref.typeface.weight-medium` 500
Range selection month subhead tracking`md.comp.date-picker.modal.range-selection.month.subhead.tracking`	0.1pt Range selection month subhead tracking 0.1pt `md.comp.date-picker.modal.range-selection.month.subhead.tracking` `md.sys.typescale.title-small.tracking` 0.1pt
Range selection month subhead type style`md.comp.date-picker.modal.range-selection.month.subhead.type`	Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt Range selection month subhead type style Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt `md.comp.date-picker.modal.range-selection.month.subhead.type` `md.comp.date-picker.modal.range-selection.month.subhead.font` `md.sys.typescale.title-small.font` `md.ref.typeface.plain` `md.comp.date-picker.modal.range-selection.month.subhead.weight` `md.sys.typescale.title-small.weight` `md.ref.typeface.weight-medium` `md.comp.date-picker.modal.range-selection.month.subhead.size` `md.sys.typescale.title-small.size` `md.comp.date-picker.modal.range-selection.month.subhead.line-height` `md.sys.typescale.title-small.line-height` `md.comp.date-picker.modal.range-selection.month.subhead.tracking` `md.sys.typescale.title-small.tracking` Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt

Headline

Headline tokens
Token	Value
Header headline color`md.comp.date-picker.modal.header.headline.color`	#49454F Header headline color #49454F `md.comp.date-picker.modal.header.headline.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Header headline font`md.comp.date-picker.modal.header.headline.font`	Roboto Header headline font Roboto `md.comp.date-picker.modal.header.headline.font` `md.sys.typescale.headline-large.font` `md.ref.typeface.brand` Roboto
Header headline line height`md.comp.date-picker.modal.header.headline.line-height`	40pt Header headline line height 40pt `md.comp.date-picker.modal.header.headline.line-height` `md.sys.typescale.headline-large.line-height` 40pt
Header headline size`md.comp.date-picker.modal.header.headline.size`	32pt Header headline size 32pt `md.comp.date-picker.modal.header.headline.size` `md.sys.typescale.headline-large.size` 32pt
Header headline weight`md.comp.date-picker.modal.header.headline.weight`	400 Header headline weight 400 `md.comp.date-picker.modal.header.headline.weight` `md.sys.typescale.headline-large.weight` `md.ref.typeface.weight-regular` 400
Header headline tracking`md.comp.date-picker.modal.header.headline.tracking`	0pt Header headline tracking 0pt `md.comp.date-picker.modal.header.headline.tracking` `md.sys.typescale.headline-large.tracking` 0pt
Header headline type style`md.comp.date-picker.modal.header.headline.type`	Roboto · 32pt · weight 400 · line height 40pt · tracking 0pt Header headline type style Roboto · 32pt · weight 400 · line height 40pt · tracking 0pt `md.comp.date-picker.modal.header.headline.type` `md.comp.date-picker.modal.header.headline.font` `md.sys.typescale.headline-large.font` `md.ref.typeface.brand` `md.comp.date-picker.modal.header.headline.weight` `md.sys.typescale.headline-large.weight` `md.ref.typeface.weight-regular` `md.comp.date-picker.modal.header.headline.size` `md.sys.typescale.headline-large.size` `md.comp.date-picker.modal.header.headline.line-height` `md.sys.typescale.headline-large.line-height` `md.comp.date-picker.modal.header.headline.tracking` `md.sys.typescale.headline-large.tracking` Roboto · 32pt · weight 400 · line height 40pt · tracking 0pt
Range selection header headline font`md.comp.date-picker.modal.range-selection.header.headline.font`	Roboto Range selection header headline font Roboto `md.comp.date-picker.modal.range-selection.header.headline.font` `md.sys.typescale.title-large.font` `md.ref.typeface.brand` Roboto
Range selection header headline line height`md.comp.date-picker.modal.range-selection.header.headline.line-height`	28pt Range selection header headline line height 28pt `md.comp.date-picker.modal.range-selection.header.headline.line-height` `md.sys.typescale.title-large.line-height` 28pt
Range selection header headline size`md.comp.date-picker.modal.range-selection.header.headline.size`	22pt Range selection header headline size 22pt `md.comp.date-picker.modal.range-selection.header.headline.size` `md.sys.typescale.title-large.size` 22pt
Range selection header headline weight`md.comp.date-picker.modal.range-selection.header.headline.weight`	400 Range selection header headline weight 400 `md.comp.date-picker.modal.range-selection.header.headline.weight` `md.sys.typescale.title-large.weight` `md.ref.typeface.weight-regular` 400
Range selection header headline tracking`md.comp.date-picker.modal.range-selection.header.headline.tracking`	0pt Range selection header headline tracking 0pt `md.comp.date-picker.modal.range-selection.header.headline.tracking` `md.sys.typescale.title-large.tracking` 0pt
Range selection header headline type style`md.comp.date-picker.modal.range-selection.header.headline.type`	Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt Range selection header headline type style Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt `md.comp.date-picker.modal.range-selection.header.headline.type` `md.comp.date-picker.modal.range-selection.header.headline.font` `md.sys.typescale.title-large.font` `md.ref.typeface.brand` `md.comp.date-picker.modal.range-selection.header.headline.weight` `md.sys.typescale.title-large.weight` `md.ref.typeface.weight-regular` `md.comp.date-picker.modal.range-selection.header.headline.size` `md.sys.typescale.title-large.size` `md.comp.date-picker.modal.range-selection.header.headline.line-height` `md.sys.typescale.title-large.line-height` `md.comp.date-picker.modal.range-selection.header.headline.tracking` `md.sys.typescale.title-large.tracking` Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt

Supporting text

Supporting text tokens
Token	Value
Header supporting text type style`md.comp.date-picker.modal.header.supporting-text.type`	Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt Header supporting text type style Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt `md.comp.date-picker.modal.header.supporting-text.type` `md.comp.date-picker.modal.header.supporting-text.font` `md.sys.typescale.label-large.font` `md.ref.typeface.plain` `md.comp.date-picker.modal.header.supporting-text.weight` `md.sys.typescale.label-large.weight` `md.ref.typeface.weight-medium` `md.comp.date-picker.modal.header.supporting-text.size` `md.sys.typescale.label-large.size` `md.comp.date-picker.modal.header.supporting-text.line-height` `md.sys.typescale.label-large.line-height` `md.comp.date-picker.modal.header.supporting-text.tracking` `md.sys.typescale.label-large.tracking` Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt

State layer

State layer tokens
Token	Value
Date state layer shape`md.comp.date-picker.modal.date.state-layer.shape`	Full Date state layer shape Full `md.comp.date-picker.modal.date.state-layer.shape` `md.sys.shape.corner.full` Full
Year selection year state layer shape`md.comp.date-picker.modal.year-selection.year.state-layer.shape`	Full Year selection year state layer shape Full `md.comp.date-picker.modal.year-selection.year.state-layer.shape` `md.sys.shape.corner.full` Full
Date state layer width`md.comp.date-picker.modal.date.state-layer.width`	40dp Date state layer width 40dp `md.comp.date-picker.modal.date.state-layer.width` 40dp
Date state layer height`md.comp.date-picker.modal.date.state-layer.height`	40dp Date state layer height 40dp `md.comp.date-picker.modal.date.state-layer.height` 40dp
Year selection year state layer width`md.comp.date-picker.modal.year-selection.year.state-layer.width`	72dp Year selection year state layer width 72dp `md.comp.date-picker.modal.year-selection.year.state-layer.width` 72dp
Year selection year state layer height`md.comp.date-picker.modal.year-selection.year.state-layer.height`	36dp Year selection year state layer height 36dp `md.comp.date-picker.modal.year-selection.year.state-layer.height` 36dp

Header

Header tokens
Token	Value
Header supporting text color`md.comp.date-picker.modal.header.supporting-text.color`	#49454F Header supporting text color #49454F `md.comp.date-picker.modal.header.supporting-text.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Header supporting text font`md.comp.date-picker.modal.header.supporting-text.font`	Roboto Header supporting text font Roboto `md.comp.date-picker.modal.header.supporting-text.font` `md.sys.typescale.label-large.font` `md.ref.typeface.plain` Roboto
Header supporting text line height`md.comp.date-picker.modal.header.supporting-text.line-height`	20pt Header supporting text line height 20pt `md.comp.date-picker.modal.header.supporting-text.line-height` `md.sys.typescale.label-large.line-height` 20pt
Header supporting text size`md.comp.date-picker.modal.header.supporting-text.size`	14pt Header supporting text size 14pt `md.comp.date-picker.modal.header.supporting-text.size` `md.sys.typescale.label-large.size` 14pt
Header supporting text weight`md.comp.date-picker.modal.header.supporting-text.weight`	500 Header supporting text weight 500 `md.comp.date-picker.modal.header.supporting-text.weight` `md.sys.typescale.label-large.weight` `md.ref.typeface.weight-medium` 500
Header supporting text tracking`md.comp.date-picker.modal.header.supporting-text.tracking`	0.1pt Header supporting text tracking 0.1pt `md.comp.date-picker.modal.header.supporting-text.tracking` `md.sys.typescale.label-large.tracking` 0.1pt

Hovered

State layer

State layer tokens
Token	Value
Date unselected hover state layer color`md.comp.date-picker.modal.date.unselected.hover.state-layer.color`	#49454F Date unselected hover state layer color #49454F `md.comp.date-picker.modal.date.unselected.hover.state-layer.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Date selected hover state layer color`md.comp.date-picker.modal.date.selected.hover.state-layer.color`	#FFFFFF Date selected hover state layer color #FFFFFF `md.comp.date-picker.modal.date.selected.hover.state-layer.color` `md.sys.color.on-primary` `md.ref.palette.primary100` Color#FFFFFF
Date today hover state layer color`md.comp.date-picker.modal.date.today.hover.state-layer.color`	#6750A4 Date today hover state layer color #6750A4 `md.comp.date-picker.modal.date.today.hover.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40` Color#6750A4
Date hover state layer opacity`md.comp.date-picker.modal.date.hover.state-layer.opacity`	8% Date hover state layer opacity 8% `md.comp.date-picker.modal.date.hover.state-layer.opacity` `md.sys.state.hover.state-layer-opacity` 8%
Range selection date in range hover state layer color`md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.color`	#4F378B Range selection date in range hover state layer color #4F378B `md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.color` `md.sys.color.on-primary-container` `md.ref.palette.primary30` Color#4F378B
Range selection date in range hover state layer opacity`md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opacity`	8% Range selection date in range hover state layer opacity 8% `md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opacity` `md.sys.state.hover.state-layer-opacity` 8%
Range selection date in range hover state layer opcaity`md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opcaity`	8% Range selection date in range hover state layer opcaity 8% `md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opcaity` `md.sys.state.hover.state-layer-opacity` 8%
Year selection year unselected hover state layer color`md.comp.date-picker.modal.year-selection.year.unselected.hover.state-layer.color`	#49454F Year selection year unselected hover state layer color #49454F `md.comp.date-picker.modal.year-selection.year.unselected.hover.state-layer.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Year selection year selected hover state layer color`md.comp.date-picker.modal.year-selection.year.selected.hover.state-layer.color`	#FFFFFF Year selection year selected hover state layer color #FFFFFF `md.comp.date-picker.modal.year-selection.year.selected.hover.state-layer.color` `md.sys.color.on-primary` `md.ref.palette.primary100` Color#FFFFFF
Year selection year hover state layer opacity`md.comp.date-picker.modal.year-selection.year.hover.state-layer.opacity`	8% Year selection year hover state layer opacity 8% `md.comp.date-picker.modal.year-selection.year.hover.state-layer.opacity` `md.sys.state.hover.state-layer-opacity` 8%

Focused

State layer

State layer tokens
Token	Value
Range selection date in range focus state layer opacity`md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opacity`	10% Range selection date in range focus state layer opacity 10% `md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opacity` `md.sys.state.focus.state-layer-opacity` 10%
Date unselected focus state layer color`md.comp.date-picker.modal.date.unselected.focus.state-layer.color`	#49454F Date unselected focus state layer color #49454F `md.comp.date-picker.modal.date.unselected.focus.state-layer.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Date selected focus state layer color`md.comp.date-picker.modal.date.selected.focus.state-layer.color`	#FFFFFF Date selected focus state layer color #FFFFFF `md.comp.date-picker.modal.date.selected.focus.state-layer.color` `md.sys.color.on-primary` `md.ref.palette.primary100` Color#FFFFFF
Date today focus state layer color`md.comp.date-picker.modal.date.today.focus.state-layer.color`	#6750A4 Date today focus state layer color #6750A4 `md.comp.date-picker.modal.date.today.focus.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40` Color#6750A4
Date focus state layer opacity`md.comp.date-picker.modal.date.focus.state-layer.opacity`	10% Date focus state layer opacity 10% `md.comp.date-picker.modal.date.focus.state-layer.opacity` `md.sys.state.focus.state-layer-opacity` 10%
Range selection date in range focus state layer color`md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.color`	#4F378B Range selection date in range focus state layer color #4F378B `md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.color` `md.sys.color.on-primary-container` `md.ref.palette.primary30` Color#4F378B
Range selection date in range focus state layer opcaity`md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opcaity`	10% Range selection date in range focus state layer opcaity 10% `md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opcaity` `md.sys.state.focus.state-layer-opacity` 10%
Year selection year unselected focus state layer color`md.comp.date-picker.modal.year-selection.year.unselected.focus.state-layer.color`	#49454F Year selection year unselected focus state layer color #49454F `md.comp.date-picker.modal.year-selection.year.unselected.focus.state-layer.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Year selection year selected focus state layer color`md.comp.date-picker.modal.year-selection.year.selected.focus.state-layer.color`	#FFFFFF Year selection year selected focus state layer color #FFFFFF `md.comp.date-picker.modal.year-selection.year.selected.focus.state-layer.color` `md.sys.color.on-primary` `md.ref.palette.primary100` Color#FFFFFF
Year selection year focus state layer opacity`md.comp.date-picker.modal.year-selection.year.focus.state-layer.opacity`	10% Year selection year focus state layer opacity 10% `md.comp.date-picker.modal.year-selection.year.focus.state-layer.opacity` `md.sys.state.focus.state-layer-opacity` 10%

Pressed (ripple)

State layer

State layer tokens
Token	Value
Range selection date in range pressed state layer opacity`md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opacity`	10% Range selection date in range pressed state layer opacity 10% `md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity` 10%
Date unselected pressed state layer color`md.comp.date-picker.modal.date.unselected.pressed.state-layer.color`	#49454F Date unselected pressed state layer color #49454F `md.comp.date-picker.modal.date.unselected.pressed.state-layer.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Date selected pressed state layer color`md.comp.date-picker.modal.date.selected.pressed.state-layer.color`	#FFFFFF Date selected pressed state layer color #FFFFFF `md.comp.date-picker.modal.date.selected.pressed.state-layer.color` `md.sys.color.on-primary` `md.ref.palette.primary100` Color#FFFFFF
Date today pressed state layer color`md.comp.date-picker.modal.date.today.pressed.state-layer.color`	#6750A4 Date today pressed state layer color #6750A4 `md.comp.date-picker.modal.date.today.pressed.state-layer.color` `md.sys.color.primary` `md.ref.palette.primary40` Color#6750A4
Date pressed state layer opacity`md.comp.date-picker.modal.date.pressed.state-layer.opacity`	10% Date pressed state layer opacity 10% `md.comp.date-picker.modal.date.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity` 10%
Range selection date in range pressed state layer color`md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.color`	#4F378B Range selection date in range pressed state layer color #4F378B `md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.color` `md.sys.color.on-primary-container` `md.ref.palette.primary30` Color#4F378B
Range selection date in range pressed state layer opcaity`md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opcaity`	10% Range selection date in range pressed state layer opcaity 10% `md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opcaity` `md.sys.state.pressed.state-layer-opacity` 10%
Year selection year unselected pressed state layer color`md.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color`	#49454F Year selection year unselected pressed state layer color #49454F `md.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F
Year selection year selected pressed state layer color`md.comp.date-picker.modal.year-selection.year.selected.pressed.state-layer.color`	#FFFFFF Year selection year selected pressed state layer color #FFFFFF `md.comp.date-picker.modal.year-selection.year.selected.pressed.state-layer.color` `md.sys.color.on-primary` `md.ref.palette.primary100` Color#FFFFFF
Year selection year pressed state layer opacity`md.comp.date-picker.modal.year-selection.year.pressed.state-layer.opacity`	10% Year selection year pressed state layer opacity 10% `md.comp.date-picker.modal.year-selection.year.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity` 10%

Token	Value
Container color`md.comp.date-picker.modal.container.color`	#ECE6F0 Container color #ECE6F0 `md.comp.date-picker.modal.container.color` `md.sys.color.surface-container-high` `md.ref.palette.neutral92` Color#ECE6F0
Container elevation`md.comp.date-picker.modal.container.elevation`	6dp Container elevation 6dp `md.comp.date-picker.modal.container.elevation` `md.sys.elevation.level3` 6dp
Container surface tint layer color`md.comp.date-picker.modal.container.surface-tint-layer.color`	#6750A4 Container surface tint layer color #6750A4 `md.comp.date-picker.modal.container.surface-tint-layer.color` `md.sys.color.surface-tint` `md.sys.color.primary` `md.ref.palette.primary40` Color#6750A4
Container shape`md.comp.date-picker.modal.container.shape`	28dp Container shape 28dp `md.comp.date-picker.modal.container.shape` `md.sys.shape.corner.extra-large` 28dp
Range selection container elevation`md.comp.date-picker.modal.range-selection.container.elevation`	0dp Range selection container elevation 0dp `md.comp.date-picker.modal.range-selection.container.elevation` `md.sys.elevation.level0` 0dp
Range selection container shape`md.comp.date-picker.modal.range-selection.container.shape`	0dp Range selection container shape 0dp `md.comp.date-picker.modal.range-selection.container.shape` `md.sys.shape.corner.none` 0dp
Date container shape`md.comp.date-picker.modal.date.container.shape`	Full Date container shape Full `md.comp.date-picker.modal.date.container.shape` `md.sys.shape.corner.full` Full
Date today container outline color`md.comp.date-picker.modal.date.today.container.outline.color`	#6750A4 Date today container outline color #6750A4 `md.comp.date-picker.modal.date.today.container.outline.color` `md.sys.color.primary` `md.ref.palette.primary40` Color#6750A4
Date today container outline width`md.comp.date-picker.modal.date.today.container.outline.width`	1dp Date today container outline width 1dp `md.comp.date-picker.modal.date.today.container.outline.width` 1dp
Date selected container color`md.comp.date-picker.modal.date.selected.container.color`	#6750A4 Date selected container color #6750A4 `md.comp.date-picker.modal.date.selected.container.color` `md.sys.color.primary` `md.ref.palette.primary40` Color#6750A4
Range selection active indicator container color`md.comp.date-picker.modal.range-selection.active-indicator.container.color`	#E8DEF8 Range selection active indicator container color #E8DEF8 `md.comp.date-picker.modal.range-selection.active-indicator.container.color` `md.sys.color.secondary-container` `md.ref.palette.secondary90` Color#E8DEF8
Range selection active indicator container shape`md.comp.date-picker.modal.range-selection.active-indicator.container.shape`	Full Range selection active indicator container shape Full `md.comp.date-picker.modal.range-selection.active-indicator.container.shape` `md.sys.shape.corner.full` Full
Year selection year selected container color`md.comp.date-picker.modal.year-selection.year.selected.container.color`	#6750A4 Year selection year selected container color #6750A4 `md.comp.date-picker.modal.year-selection.year.selected.container.color` `md.sys.color.primary` `md.ref.palette.primary40` Color#6750A4
Container width`md.comp.date-picker.modal.container.width`	360dp Container width 360dp `md.comp.date-picker.modal.container.width` 360dp
Container height`md.comp.date-picker.modal.container.height`	524dp Container height 524dp `md.comp.date-picker.modal.container.height` 524dp
Header container width`md.comp.date-picker.modal.header.container.width`	360dp Header container width 360dp `md.comp.date-picker.modal.header.container.width` 360dp
Header container height`md.comp.date-picker.modal.header.container.height`	120dp Header container height 120dp `md.comp.date-picker.modal.header.container.height` 120dp
Range selection header container height`md.comp.date-picker.modal.range-selection.header.container.height`	128dp Range selection header container height 128dp `md.comp.date-picker.modal.range-selection.header.container.height` 128dp
Date container width`md.comp.date-picker.modal.date.container.width`	40dp Date container width 40dp `md.comp.date-picker.modal.date.container.width` 40dp
Date container height`md.comp.date-picker.modal.date.container.height`	40dp Date container height 40dp `md.comp.date-picker.modal.date.container.height` 40dp
Year selection year container width`md.comp.date-picker.modal.year-selection.year.container.width`	72dp Year selection year container width 72dp `md.comp.date-picker.modal.year-selection.year.container.width` 72dp
Year selection year container height`md.comp.date-picker.modal.year-selection.year.container.height`	36dp Year selection year container height 36dp `md.comp.date-picker.modal.year-selection.year.container.height` 36dp
Range selection active indicator container height`md.comp.date-picker.modal.range-selection.active-indicator.container.height`	40dp Range selection active indicator container height 40dp `md.comp.date-picker.modal.range-selection.active-indicator.container.height` 40dp

Token	Value
Weekdays label text color`md.comp.date-picker.modal.weekdays.label-text.color`	#1D1B20 Weekdays label text color #1D1B20 `md.comp.date-picker.modal.weekdays.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10` Color#1D1B20
Weekdays label text font`md.comp.date-picker.modal.weekdays.label-text.font`	Roboto Weekdays label text font Roboto `md.comp.date-picker.modal.weekdays.label-text.font` `md.sys.typescale.body-large.font` `md.ref.typeface.plain` Roboto
Weekdays label text line height`md.comp.date-picker.modal.weekdays.label-text.line-height`	24pt Weekdays label text line height 24pt `md.comp.date-picker.modal.weekdays.label-text.line-height` `md.sys.typescale.body-large.line-height` 24pt
Weekdays label text size`md.comp.date-picker.modal.weekdays.label-text.size`	16pt Weekdays label text size 16pt `md.comp.date-picker.modal.weekdays.label-text.size` `md.sys.typescale.body-large.size` 16pt
Weekdays label text weight`md.comp.date-picker.modal.weekdays.label-text.weight`	400 Weekdays label text weight 400 `md.comp.date-picker.modal.weekdays.label-text.weight` `md.sys.typescale.body-large.weight` `md.ref.typeface.weight-regular` 400
Weekdays label text tracking`md.comp.date-picker.modal.weekdays.label-text.tracking`	0.5pt Weekdays label text tracking 0.5pt `md.comp.date-picker.modal.weekdays.label-text.tracking` `md.sys.typescale.body-large.tracking` 0.5pt
Weekdays label text type style`md.comp.date-picker.modal.weekdays.label-text.type`	Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt Weekdays label text type style Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt `md.comp.date-picker.modal.weekdays.label-text.type` `md.comp.date-picker.modal.weekdays.label-text.font` `md.sys.typescale.body-large.font` `md.ref.typeface.plain` `md.comp.date-picker.modal.weekdays.label-text.weight` `md.sys.typescale.body-large.weight` `md.ref.typeface.weight-regular` `md.comp.date-picker.modal.weekdays.label-text.size` `md.sys.typescale.body-large.size` `md.comp.date-picker.modal.weekdays.label-text.line-height` `md.sys.typescale.body-large.line-height` `md.comp.date-picker.modal.weekdays.label-text.tracking` `md.sys.typescale.body-large.tracking` Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Date label text font`md.comp.date-picker.modal.date.label-text.font`	Roboto Date label text font Roboto `md.comp.date-picker.modal.date.label-text.font` `md.sys.typescale.body-large.font` `md.ref.typeface.plain` Roboto
Date label text line height`md.comp.date-picker.modal.date.label-text.line-height`	24pt Date label text line height 24pt `md.comp.date-picker.modal.date.label-text.line-height` `md.sys.typescale.body-large.line-height` 24pt
Date label text size`md.comp.date-picker.modal.date.label-text.size`	16pt Date label text size 16pt `md.comp.date-picker.modal.date.label-text.size` `md.sys.typescale.body-large.size` 16pt
Date label text weight`md.comp.date-picker.modal.date.label-text.weight`	400 Date label text weight 400 `md.comp.date-picker.modal.date.label-text.weight` `md.sys.typescale.body-large.weight` `md.ref.typeface.weight-regular` 400
Date label text tracking`md.comp.date-picker.modal.date.label-text.tracking`	0.5pt Date label text tracking 0.5pt `md.comp.date-picker.modal.date.label-text.tracking` `md.sys.typescale.body-large.tracking` 0.5pt
Date label text type style`md.comp.date-picker.modal.date.label-text.type`	Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt Date label text type style Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt `md.comp.date-picker.modal.date.label-text.type` `md.comp.date-picker.modal.date.label-text.font` `md.sys.typescale.body-large.font` `md.ref.typeface.plain` `md.comp.date-picker.modal.date.label-text.weight` `md.sys.typescale.body-large.weight` `md.ref.typeface.weight-regular` `md.comp.date-picker.modal.date.label-text.size` `md.sys.typescale.body-large.size` `md.comp.date-picker.modal.date.label-text.line-height` `md.sys.typescale.body-large.line-height` `md.comp.date-picker.modal.date.label-text.tracking` `md.sys.typescale.body-large.tracking` Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Date unselected label text color`md.comp.date-picker.modal.date.unselected.label-text.color`	#1D1B20 Date unselected label text color #1D1B20 `md.comp.date-picker.modal.date.unselected.label-text.color` `md.sys.color.on-surface` `md.ref.palette.neutral10` Color#1D1B20
Date today label text color`md.comp.date-picker.modal.date.today.label-text.color`	#6750A4 Date today label text color #6750A4 `md.comp.date-picker.modal.date.today.label-text.color` `md.sys.color.primary` `md.ref.palette.primary40` Color#6750A4
Date selected label text color`md.comp.date-picker.modal.date.selected.label-text.color`	#FFFFFF Date selected label text color #FFFFFF `md.comp.date-picker.modal.date.selected.label-text.color` `md.sys.color.on-primary` `md.ref.palette.primary100` Color#FFFFFF
Range selection date in range label text color`md.comp.date-picker.modal.range-selection.date.in-range.label-text.color`	#4A4458 Range selection date in range label text color #4A4458 `md.comp.date-picker.modal.range-selection.date.in-range.label-text.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30` Color#4A4458
Year selection year label text font`md.comp.date-picker.modal.year-selection.year.label-text.font`	Roboto Year selection year label text font Roboto `md.comp.date-picker.modal.year-selection.year.label-text.font` `md.sys.typescale.body-large.font` `md.ref.typeface.plain` Roboto
Year selection year label text line height`md.comp.date-picker.modal.year-selection.year.label-text.line-height`	24pt Year selection year label text line height 24pt `md.comp.date-picker.modal.year-selection.year.label-text.line-height` `md.sys.typescale.body-large.line-height` 24pt
Year selection year label text size`md.comp.date-picker.modal.year-selection.year.label-text.size`	16pt Year selection year label text size 16pt `md.comp.date-picker.modal.year-selection.year.label-text.size` `md.sys.typescale.body-large.size` 16pt
Year selection year label text weight`md.comp.date-picker.modal.year-selection.year.label-text.weight`	400 Year selection year label text weight 400 `md.comp.date-picker.modal.year-selection.year.label-text.weight` `md.sys.typescale.body-large.weight` `md.ref.typeface.weight-regular` 400
Year selection year label text tracking`md.comp.date-picker.modal.year-selection.year.label-text.tracking`	0.5pt Year selection year label text tracking 0.5pt `md.comp.date-picker.modal.year-selection.year.label-text.tracking` `md.sys.typescale.body-large.tracking` 0.5pt
Year selection year label text type style`md.comp.date-picker.modal.year-selection.year.label-text.type`	Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt Year selection year label text type style Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt `md.comp.date-picker.modal.year-selection.year.label-text.type` `md.comp.date-picker.modal.year-selection.year.label-text.font` `md.sys.typescale.body-large.font` `md.ref.typeface.plain` `md.comp.date-picker.modal.year-selection.year.label-text.weight` `md.sys.typescale.body-large.weight` `md.ref.typeface.weight-regular` `md.comp.date-picker.modal.year-selection.year.label-text.size` `md.sys.typescale.body-large.size` `md.comp.date-picker.modal.year-selection.year.label-text.line-height` `md.sys.typescale.body-large.line-height` `md.comp.date-picker.modal.year-selection.year.label-text.tracking` `md.sys.typescale.body-large.tracking` Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Year selection year selected label text color`md.comp.date-picker.modal.year-selection.year.selected.label-text.color`	#FFFFFF Year selection year selected label text color #FFFFFF `md.comp.date-picker.modal.year-selection.year.selected.label-text.color` `md.sys.color.on-primary` `md.ref.palette.primary100` Color#FFFFFF
Year selection year unselected label text color`md.comp.date-picker.modal.year-selection.year.unselected.label-text.color`	#49454F Year selection year unselected label text color #49454F `md.comp.date-picker.modal.year-selection.year.unselected.label-text.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30` Color#49454F