Material Design 3 "Chip" tokens: All tokens
Preview
Browse tokens
Color
Chip - Input
Enabled
Avatar
| Token | Value |
|---|---|
Input chip with avatar avatar shapemd.comp.input-chip.with-avatar.avatar.shape | Full md.comp.input-chip.with-avatar.avatar.shape
|
Input chip with avatar avatar sizemd.comp.input-chip.with-avatar.avatar.size | 24dp md.comp.input-chip.with-avatar.avatar.size |
Container
| Token | Value |
|---|---|
Input chip container elevationmd.comp.input-chip.container.elevation | 0dp md.comp.input-chip.container.elevation
|
Input chip container heightmd.comp.input-chip.container.height | 32dp md.comp.input-chip.container.height |
Input chip container shapemd.comp.input-chip.container.shape | 8dp md.comp.input-chip.container.shape
|
Input chip outline colormd.comp.input-chip.outline.color | #79747E md.comp.input-chip.outline.color
|
Input chip outline widthmd.comp.input-chip.outline.width | 1dp md.comp.input-chip.outline.width |
Input chip selected container colormd.comp.input-chip.selected.container.color | #E8DEF8 md.comp.input-chip.selected.container.color
|
Input chip selected outline widthmd.comp.input-chip.selected.outline.width | 0dp md.comp.input-chip.selected.outline.width |
Input chip unselected outline colormd.comp.input-chip.unselected.outline.color | #CAC4D0 md.comp.input-chip.unselected.outline.color
|
Input chip unselected outline widthmd.comp.input-chip.unselected.outline.width | 1dp md.comp.input-chip.unselected.outline.width |
Label text
| Token | Value |
|---|---|
Input chip label text colormd.comp.input-chip.label-text.color | #49454F md.comp.input-chip.label-text.color
|
Input chip label text fontmd.comp.input-chip.label-text.font | Roboto md.comp.input-chip.label-text.font
|
Input chip label text line heightmd.comp.input-chip.label-text.line-height | 20pt md.comp.input-chip.label-text.line-height
|
Input chip label text sizemd.comp.input-chip.label-text.size | 14pt md.comp.input-chip.label-text.size
|
Input chip label text trackingmd.comp.input-chip.label-text.tracking | 0.1pt md.comp.input-chip.label-text.tracking
|
Input chip label text type stylemd.comp.input-chip.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.input-chip.label-text.type
|
Input chip label text weightmd.comp.input-chip.label-text.weight | 500 md.comp.input-chip.label-text.weight
|
Input chip selected label text colormd.comp.input-chip.selected.label-text.color | #4A4458 md.comp.input-chip.selected.label-text.color
|
Input chip unselected label text colormd.comp.input-chip.unselected.label-text.color | #49454F md.comp.input-chip.unselected.label-text.color
|
Leading icon
| Token | Value |
|---|---|
Input chip leading icon colormd.comp.input-chip.with-leading-icon.leading-icon.color | #49454F md.comp.input-chip.with-leading-icon.leading-icon.color
|
Input chip leading icon sizemd.comp.input-chip.with-leading-icon.leading-icon.size | 18dp md.comp.input-chip.with-leading-icon.leading-icon.size |
Input chip with leading icon selected leading icon colormd.comp.input-chip.with-leading-icon.selected.leading-icon.color | #6750A4 md.comp.input-chip.with-leading-icon.selected.leading-icon.color
|
Input chip with leading icon unselected leading icon colormd.comp.input-chip.with-leading-icon.unselected.leading-icon.color | #49454F md.comp.input-chip.with-leading-icon.unselected.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Input chip with trailing icon selected trailing icon colormd.comp.input-chip.with-trailing-icon.selected.trailing-icon.color | #4A4458 md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color
|
Input chip trailing icon colormd.comp.input-chip.with-trailing-icon.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.trailing-icon.color
|
Input chip trailing icon sizemd.comp.input-chip.with-trailing-icon.trailing-icon.size | 18dp md.comp.input-chip.with-trailing-icon.trailing-icon.size |
Input chip with trailing icon unselected trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color
|
Disabled
Container
| Token | Value |
|---|---|
Input chip disabled outline colormd.comp.input-chip.disabled.outline.color | #1D1B20 md.comp.input-chip.disabled.outline.color
|
Input chip disabled outline opacitymd.comp.input-chip.disabled.outline.opacity | 12% md.comp.input-chip.disabled.outline.opacity |
Input chip disabled selected container colormd.comp.input-chip.disabled.selected.container.color | #1D1B20 md.comp.input-chip.disabled.selected.container.color
|
Input chip disabled selected container opacitymd.comp.input-chip.disabled.selected.container.opacity | 12% md.comp.input-chip.disabled.selected.container.opacity |
Input chip disabled unselected outline colormd.comp.input-chip.disabled.unselected.outline.color | #1D1B20 md.comp.input-chip.disabled.unselected.outline.color
|
Input chip disabled unselected outline opacitymd.comp.input-chip.disabled.unselected.outline.opacity | 12% md.comp.input-chip.disabled.unselected.outline.opacity |
Label text
| Token | Value |
|---|---|
Input chip disabled label text colormd.comp.input-chip.disabled.label-text.color | #1D1B20 md.comp.input-chip.disabled.label-text.color
|
Input chip disabled label text opacitymd.comp.input-chip.disabled.label-text.opacity | 38% md.comp.input-chip.disabled.label-text.opacity |
Leading icon
| Token | Value |
|---|---|
Input chip with leading icon disabled leading icon colormd.comp.input-chip.with-leading-icon.disabled.leading-icon.color | #1D1B20 md.comp.input-chip.with-leading-icon.disabled.leading-icon.color
|
Input chip with leading icon disabled leading icon opacitymd.comp.input-chip.with-leading-icon.disabled.leading-icon.opacity | 38% md.comp.input-chip.with-leading-icon.disabled.leading-icon.opacity |
Trailing icon
| Token | Value |
|---|---|
Input chip with trailing icon disabled trailing icon colormd.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color | #1D1B20 md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color
|
Input chip with trailing icon disabled trailing icon opacitymd.comp.input-chip.with-trailing-icon.disabled.trailing-icon.opacity | 38% md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.opacity |
Avatar
| Token | Value |
|---|---|
Input chip with avatar disabled avatar opacitymd.comp.input-chip.with-avatar.disabled.avatar.opacity | 38% md.comp.input-chip.with-avatar.disabled.avatar.opacity |
Hovered
Label text
| Token | Value |
|---|---|
Input chip hover label text colormd.comp.input-chip.hover.label-text.color | #49454F md.comp.input-chip.hover.label-text.color
|
Input chip selected hover label text colormd.comp.input-chip.selected.hover.label-text.color | #4A4458 md.comp.input-chip.selected.hover.label-text.color
|
Input chip unselected hover label text colormd.comp.input-chip.unselected.hover.label-text.color | #49454F md.comp.input-chip.unselected.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Input chip hover state layer colormd.comp.input-chip.hover.state-layer.color | #49454F md.comp.input-chip.hover.state-layer.color
|
Input chip hover state layer opacitymd.comp.input-chip.hover.state-layer.opacity | 8% md.comp.input-chip.hover.state-layer.opacity
|
Input chip selected hover state layer colormd.comp.input-chip.selected.hover.state-layer.color | #4A4458 md.comp.input-chip.selected.hover.state-layer.color
|
Input chip selected hover state layer opacitymd.comp.input-chip.selected.hover.state-layer.opacity | 8% md.comp.input-chip.selected.hover.state-layer.opacity
|
Input chip unselected hover state layer colormd.comp.input-chip.unselected.hover.state-layer.color | #49454F md.comp.input-chip.unselected.hover.state-layer.color
|
Input chip unselected hover state layer opacitymd.comp.input-chip.unselected.hover.state-layer.opacity | 8% md.comp.input-chip.unselected.hover.state-layer.opacity
|
Leading icon
| Token | Value |
|---|---|
Input chip with leading icon hover leading icon colormd.comp.input-chip.with-leading-icon.hover.leading-icon.color | #49454F md.comp.input-chip.with-leading-icon.hover.leading-icon.color
|
Input chip with leading icon selected hover leading icon colormd.comp.input-chip.with-leading-icon.selected.hover.leading-icon.color | #6750A4 md.comp.input-chip.with-leading-icon.selected.hover.leading-icon.color
|
Input chip with leading icon unselected hover leading icon colormd.comp.input-chip.with-leading-icon.unselected.hover.leading-icon.color | #6750A4 md.comp.input-chip.with-leading-icon.unselected.hover.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Input chip with trailing icon hover trailing icon colormd.comp.input-chip.with-trailing-icon.hover.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.hover.trailing-icon.color
|
Input chip with trailing icon selected hover trailing icon colormd.comp.input-chip.with-trailing-icon.selected.hover.trailing-icon.color | #4A4458 md.comp.input-chip.with-trailing-icon.selected.hover.trailing-icon.color
|
Input chip with trailing icon unselected hover trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.hover.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.unselected.hover.trailing-icon.color
|
Focused
Focus indicator
| Token | Value |
|---|---|
Input chip focus indicator colormd.comp.input-chip.focus.indicator.color | #625B71 md.comp.input-chip.focus.indicator.color
|
Input chip focus indicator offsetmd.comp.input-chip.focus.indicator.outline.offset | 2dp md.comp.input-chip.focus.indicator.outline.offset
|
Input chip focus indicator thicknessmd.comp.input-chip.focus.indicator.thickness | 3dp md.comp.input-chip.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Input chip focus outline colormd.comp.input-chip.focus.outline.color | #49454F md.comp.input-chip.focus.outline.color
|
Input chip unselected focus outline colormd.comp.input-chip.unselected.focus.outline.color | #49454F md.comp.input-chip.unselected.focus.outline.color
|
Label text
| Token | Value |
|---|---|
Input chip focus label text colormd.comp.input-chip.focus.label-text.color | #49454F md.comp.input-chip.focus.label-text.color
|
Input chip selected focus label text colormd.comp.input-chip.selected.focus.label-text.color | #4A4458 md.comp.input-chip.selected.focus.label-text.color
|
Input chip unselected focus label text colormd.comp.input-chip.unselected.focus.label-text.color | #49454F md.comp.input-chip.unselected.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Input chip focus state layer colormd.comp.input-chip.focus.state-layer.color | #49454F md.comp.input-chip.focus.state-layer.color
|
Input chip focus state layer opacitymd.comp.input-chip.focus.state-layer.opacity | 10% md.comp.input-chip.focus.state-layer.opacity
|
Input chip selected focus state layer colormd.comp.input-chip.selected.focus.state-layer.color | #4A4458 md.comp.input-chip.selected.focus.state-layer.color
|
Input chip selected focus state layer opacitymd.comp.input-chip.selected.focus.state-layer.opacity | 10% md.comp.input-chip.selected.focus.state-layer.opacity
|
Input chip unselected focus state layer colormd.comp.input-chip.unselected.focus.state-layer.color | #49454F md.comp.input-chip.unselected.focus.state-layer.color
|
Input chip unselected focus state layer opacitymd.comp.input-chip.unselected.focus.state-layer.opacity | 10% md.comp.input-chip.unselected.focus.state-layer.opacity
|
Leading icon
| Token | Value |
|---|---|
Input chip with leading icon focus leading icon colormd.comp.input-chip.with-leading-icon.focus.leading-icon.color | #49454F md.comp.input-chip.with-leading-icon.focus.leading-icon.color
|
Input chip with leading icon selected focus leading icon colormd.comp.input-chip.with-leading-icon.selected.focus.leading-icon.color | #6750A4 md.comp.input-chip.with-leading-icon.selected.focus.leading-icon.color
|
Input chip with leading icon unselected focus leading icon colormd.comp.input-chip.with-leading-icon.unselected.focus.leading-icon.color | #6750A4 md.comp.input-chip.with-leading-icon.unselected.focus.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Input chip with trailing icon focus trailing icon colormd.comp.input-chip.with-trailing-icon.focus.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.focus.trailing-icon.color
|
Input chip with trailing icon selected focus trailing icon colormd.comp.input-chip.with-trailing-icon.selected.focus.trailing-icon.color | #4A4458 md.comp.input-chip.with-trailing-icon.selected.focus.trailing-icon.color
|
Input chip with trailing icon unselected focus trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.focus.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.unselected.focus.trailing-icon.color
|
Pressed (ripple)
Label text
| Token | Value |
|---|---|
Input chip pressed label text colormd.comp.input-chip.pressed.label-text.color | #49454F md.comp.input-chip.pressed.label-text.color
|
Input chip selected pressed label text colormd.comp.input-chip.selected.pressed.label-text.color | #4A4458 md.comp.input-chip.selected.pressed.label-text.color
|
Input chip unselected pressed label text colormd.comp.input-chip.unselected.pressed.label-text.color | #49454F md.comp.input-chip.unselected.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Input chip pressed state layer colormd.comp.input-chip.pressed.state-layer.color | #49454F md.comp.input-chip.pressed.state-layer.color
|
Input chip pressed state layer opacitymd.comp.input-chip.pressed.state-layer.opacity | 10% md.comp.input-chip.pressed.state-layer.opacity
|
Input chip selected pressed state layer colormd.comp.input-chip.selected.pressed.state-layer.color | #4A4458 md.comp.input-chip.selected.pressed.state-layer.color
|
Input chip selected pressed state layer opacitymd.comp.input-chip.selected.pressed.state-layer.opacity | 10% md.comp.input-chip.selected.pressed.state-layer.opacity
|
Input chip unselected pressed state layer colormd.comp.input-chip.unselected.pressed.state-layer.color | #49454F md.comp.input-chip.unselected.pressed.state-layer.color
|
Input chip unselected pressed state layer opacitymd.comp.input-chip.unselected.pressed.state-layer.opacity | 10% md.comp.input-chip.unselected.pressed.state-layer.opacity
|
Leading icon
| Token | Value |
|---|---|
Input chip with leading icon pressed leading icon colormd.comp.input-chip.with-leading-icon.pressed.leading-icon.color | #49454F md.comp.input-chip.with-leading-icon.pressed.leading-icon.color
|
Input chip with leading icon selected pressed leading icon colormd.comp.input-chip.with-leading-icon.selected.pressed.leading-icon.color | #6750A4 md.comp.input-chip.with-leading-icon.selected.pressed.leading-icon.color
|
Input chip with leading icon unselected pressed leading icon colormd.comp.input-chip.with-leading-icon.unselected.pressed.leading-icon.color | #6750A4 md.comp.input-chip.with-leading-icon.unselected.pressed.leading-icon.color
|
Trailing icon
| Token | Value |
|---|---|
Input chip with trailing icon pressed trailing icon colormd.comp.input-chip.with-trailing-icon.pressed.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.pressed.trailing-icon.color
|
Input chip with trailing icon selected pressed trailing icon colormd.comp.input-chip.with-trailing-icon.selected.pressed.trailing-icon.color | #4A4458 md.comp.input-chip.with-trailing-icon.selected.pressed.trailing-icon.color
|
Input chip with trailing icon unselected pressed trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.pressed.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.unselected.pressed.trailing-icon.color
|
Dragged
Container
| Token | Value |
|---|---|
Input chip dragged container elevationmd.comp.input-chip.dragged.container.elevation | 8dp md.comp.input-chip.dragged.container.elevation
|
Label text
| Token | Value |
|---|---|
Input chip dragged label text colormd.comp.input-chip.dragged.label-text.color | #49454F md.comp.input-chip.dragged.label-text.color
|
Input chip selected dragged label text colormd.comp.input-chip.selected.dragged.label-text.color | #4A4458 md.comp.input-chip.selected.dragged.label-text.color
|
Input chip unselected dragged label text colormd.comp.input-chip.unselected.dragged.label-text.color | #49454F md.comp.input-chip.unselected.dragged.label-text.color
|
State layer
| Token | Value |
|---|---|
Input chip dragged state layer colormd.comp.input-chip.dragged.state-layer.color | #49454F md.comp.input-chip.dragged.state-layer.color
|
Input chip dragged state layer opacitymd.comp.input-chip.dragged.state-layer.opacity | 16% md.comp.input-chip.dragged.state-layer.opacity
|
Input chip selected dragged state layer colormd.comp.input-chip.selected.dragged.state-layer.color | #4A4458 md.comp.input-chip.selected.dragged.state-layer.color
|
Input chip selected dragged state layer opacitymd.comp.input-chip.selected.dragged.state-layer.opacity | 16% md.comp.input-chip.selected.dragged.state-layer.opacity
|
Input chip unselected dragged state layer colormd.comp.input-chip.unselected.dragged.state-layer.color | #49454F md.comp.input-chip.unselected.dragged.state-layer.color
|
Input chip unselected dragged state layer opacitymd.comp.input-chip.unselected.dragged.state-layer.opacity | 16% md.comp.input-chip.unselected.dragged.state-layer.opacity
|
Trailing icon
| Token | Value |
|---|---|
Input chip with trailing icon dragged trailing icon colormd.comp.input-chip.with-trailing-icon.dragged.trailing-icon.color | #49454F md.comp.input-chip.with-trailing-icon.dragged.trailing-icon.color
|
Input chip with trailing icon selected dragged trailing icon colormd.comp.input-chip.with-trailing-icon.selected.dragged.trailing-icon.color | #6750A4 md.comp.input-chip.with-trailing-icon.selected.dragged.trailing-icon.color
|
Input chip with trailing icon unselected dragged trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.dragged.trailing-icon.color | #6750A4 md.comp.input-chip.with-trailing-icon.unselected.dragged.trailing-icon.color
|
Leading icon
| Token | Value |
|---|---|
Input chip with leading icon draged leading icon colormd.comp.input-chip.with-leading-icon.dragged.leading-icon.color | #49454F md.comp.input-chip.with-leading-icon.dragged.leading-icon.color
|
Input chip with leading icon selected dragged leading icon colormd.comp.input-chip.with-leading-icon.selected.dragged.leading-icon.color | #4A4458 md.comp.input-chip.with-leading-icon.selected.dragged.leading-icon.color
|
Input chip with leading icon unselected dragged leading icon colormd.comp.input-chip.with-leading-icon.unselected.dragged.leading-icon.color | #49454F md.comp.input-chip.with-leading-icon.unselected.dragged.leading-icon.color
|
Chip - Assist
Enabled
Container
| Token | Value |
|---|---|
Assist chip container heightmd.comp.assist-chip.container.height | 32dp md.comp.assist-chip.container.height |
Assist chip container shapemd.comp.assist-chip.container.shape | 8dp md.comp.assist-chip.container.shape
|
Assist chip container surface tintmd.comp.assist-chip.container.surface-tint-layer.color | #6750A4 md.comp.assist-chip.container.surface-tint-layer.color
|
Assist chip elevated container colormd.comp.assist-chip.elevated.container.color | #F7F2FA md.comp.assist-chip.elevated.container.color
|
Assist chip elevated container elevationmd.comp.assist-chip.elevated.container.elevation | 1dp md.comp.assist-chip.elevated.container.elevation
|
Assist chip elevated container shadow colormd.comp.assist-chip.elevated.container.shadow-color | #000000 md.comp.assist-chip.elevated.container.shadow-color
|
Assist chip container elevationmd.comp.assist-chip.flat.container.elevation | 0dp md.comp.assist-chip.flat.container.elevation
|
Assist chip container outline colormd.comp.assist-chip.flat.outline.color | #CAC4D0 md.comp.assist-chip.flat.outline.color
|
Assist chip container outline widthmd.comp.assist-chip.flat.outline.width | 1dp md.comp.assist-chip.flat.outline.width |
Label text
| Token | Value |
|---|---|
Assist chip label text colormd.comp.assist-chip.label-text.color | #1D1B20 md.comp.assist-chip.label-text.color
|
Assist chip label text fontmd.comp.assist-chip.label-text.font | Roboto md.comp.assist-chip.label-text.font
|
Assist chip label text line heightmd.comp.assist-chip.label-text.line-height | 20pt md.comp.assist-chip.label-text.line-height
|
Assist chip label text sizemd.comp.assist-chip.label-text.size | 14pt md.comp.assist-chip.label-text.size
|
Assist chip label text trackingmd.comp.assist-chip.label-text.tracking | 0.1pt md.comp.assist-chip.label-text.tracking
|
Assist chip label text typemd.comp.assist-chip.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.assist-chip.label-text.type
|
Assist chip label text weightmd.comp.assist-chip.label-text.weight | 500 md.comp.assist-chip.label-text.weight
|
Icon
| Token | Value |
|---|---|
Assist chip icon colormd.comp.assist-chip.with-icon.icon.color | #6750A4 md.comp.assist-chip.with-icon.icon.color
|
Assist chip icon sizemd.comp.assist-chip.with-icon.icon.size | 18dp md.comp.assist-chip.with-icon.icon.size |
Disabled
Container
| Token | Value |
|---|---|
Assist chip elevated disabled container colormd.comp.assist-chip.elevated.disabled.container.color | #1D1B20 md.comp.assist-chip.elevated.disabled.container.color
|
Assist chip elevated disabled container elevationmd.comp.assist-chip.elevated.disabled.container.elevation | 0dp md.comp.assist-chip.elevated.disabled.container.elevation
|
Assist chip elevated disabled container opacitymd.comp.assist-chip.elevated.disabled.container.opacity | 12% md.comp.assist-chip.elevated.disabled.container.opacity |
Assist chip disabled outline colormd.comp.assist-chip.flat.disabled.outline.color | #1D1B20 md.comp.assist-chip.flat.disabled.outline.color
|
Assist chip disabled outline opacitymd.comp.assist-chip.flat.disabled.outline.opacity | 12% md.comp.assist-chip.flat.disabled.outline.opacity |
Label text
| Token | Value |
|---|---|
Assist chip disabled label text colormd.comp.assist-chip.disabled.label-text.color | #1D1B20 md.comp.assist-chip.disabled.label-text.color
|
Assist chip disabled label text opacitymd.comp.assist-chip.disabled.label-text.opacity | 38% md.comp.assist-chip.disabled.label-text.opacity |
Icon
| Token | Value |
|---|---|
Assist chip with icon disabled icon colormd.comp.assist-chip.with-icon.disabled.icon.color | #1D1B20 md.comp.assist-chip.with-icon.disabled.icon.color
|
Assist chip with icon disabled icon opacitymd.comp.assist-chip.with-icon.disabled.icon.opacity | 38% md.comp.assist-chip.with-icon.disabled.icon.opacity |
Hovered
Container
| Token | Value |
|---|---|
Assist chip elevated hover container elevationmd.comp.assist-chip.elevated.hover.container.elevation | 3dp md.comp.assist-chip.elevated.hover.container.elevation
|
Label text
| Token | Value |
|---|---|
Assist chip hover label text colormd.comp.assist-chip.hover.label-text.color | #1D1B20 md.comp.assist-chip.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Assist chip hover state layer colormd.comp.assist-chip.hover.state-layer.color | #1D1B20 md.comp.assist-chip.hover.state-layer.color
|
Assist chip hover state layer opacitymd.comp.assist-chip.hover.state-layer.opacity | 8% md.comp.assist-chip.hover.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Assist chip with icon hover icon colormd.comp.assist-chip.with-icon.hover.icon.color | #6750A4 md.comp.assist-chip.with-icon.hover.icon.color
|
Focused
Focus indicator
| Token | Value |
|---|---|
Assist chip focus indicator colormd.comp.assist-chip.focus.indicator.color | #625B71 md.comp.assist-chip.focus.indicator.color
|
Assist chip focus indicator offsetmd.comp.assist-chip.focus.indicator.outline.offset | 2dp md.comp.assist-chip.focus.indicator.outline.offset
|
Assist chip focus indicator thicknessmd.comp.assist-chip.focus.indicator.thickness | 3dp md.comp.assist-chip.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Assist chip elevated focus container elevationmd.comp.assist-chip.elevated.focus.container.elevation | 1dp md.comp.assist-chip.elevated.focus.container.elevation
|
Assist chip focus outline colormd.comp.assist-chip.flat.focus.outline.color | #1D1B20 md.comp.assist-chip.flat.focus.outline.color
|
Label text
| Token | Value |
|---|---|
Assist chip focus label text colormd.comp.assist-chip.focus.label-text.color | #1D1B20 md.comp.assist-chip.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Assist chip focus state layer colormd.comp.assist-chip.focus.state-layer.color | #1D1B20 md.comp.assist-chip.focus.state-layer.color
|
Assist chip focus state layer opacitymd.comp.assist-chip.focus.state-layer.opacity | 10% md.comp.assist-chip.focus.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Assist chip with icon focus icon colormd.comp.assist-chip.with-icon.focus.icon.color | #6750A4 md.comp.assist-chip.with-icon.focus.icon.color
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Assist chip elevated pressed container elevationmd.comp.assist-chip.elevated.pressed.container.elevation | 1dp md.comp.assist-chip.elevated.pressed.container.elevation
|
Label text
| Token | Value |
|---|---|
Assist chip pressed label text colormd.comp.assist-chip.pressed.label-text.color | #1D1B20 md.comp.assist-chip.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Assist chip pressed state layer colormd.comp.assist-chip.pressed.state-layer.color | #1D1B20 md.comp.assist-chip.pressed.state-layer.color
|
Assist chip pressed state layer opacitymd.comp.assist-chip.pressed.state-layer.opacity | 10% md.comp.assist-chip.pressed.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Assist chip with icon pressed icon colormd.comp.assist-chip.with-icon.pressed.icon.color | #6750A4 md.comp.assist-chip.with-icon.pressed.icon.color
|
Dragged
Container
| Token | Value |
|---|---|
Assist chip dragged container elevationmd.comp.assist-chip.dragged.container.elevation | 8dp md.comp.assist-chip.dragged.container.elevation
|
Label text
| Token | Value |
|---|---|
Assist chip dragged label text colormd.comp.assist-chip.dragged.label-text.color | #1D1B20 md.comp.assist-chip.dragged.label-text.color
|
State layer
| Token | Value |
|---|---|
Assist chip dragged state layer colormd.comp.assist-chip.dragged.state-layer.color | #1D1B20 md.comp.assist-chip.dragged.state-layer.color
|
Assist chip dragged state layer opacitymd.comp.assist-chip.dragged.state-layer.opacity | 16% md.comp.assist-chip.dragged.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Assist chip with icon dragged icon colormd.comp.assist-chip.with-icon.dragged.icon.color | #6750A4 md.comp.assist-chip.with-icon.dragged.icon.color
|
Chip - Suggestion
Enabled
Container
| Token | Value |
|---|---|
Suggestion chip container heightmd.comp.suggestion-chip.container.height | 32dp md.comp.suggestion-chip.container.height |
Suggestion chip container shapemd.comp.suggestion-chip.container.shape | 8dp md.comp.suggestion-chip.container.shape
|
Suggestion chip container surface tint colormd.comp.suggestion-chip.container.surface-tint-layer.color | #6750A4 md.comp.suggestion-chip.container.surface-tint-layer.color
|
Suggestion chip elevated container colormd.comp.suggestion-chip.elevated.container.color | #F7F2FA md.comp.suggestion-chip.elevated.container.color
|
Suggestion chip elevated container elevationmd.comp.suggestion-chip.elevated.container.elevation | 1dp md.comp.suggestion-chip.elevated.container.elevation
|
Suggestion chip elevated container shadow colormd.comp.suggestion-chip.elevated.container.shadow-color | #000000 md.comp.suggestion-chip.elevated.container.shadow-color
|
Suggestion chip container elevationmd.comp.suggestion-chip.flat.container.elevation | 0dp md.comp.suggestion-chip.flat.container.elevation
|
Suggestion chip container outline colormd.comp.suggestion-chip.flat.outline.color | #CAC4D0 md.comp.suggestion-chip.flat.outline.color
|
Suggestion chip container outline widthmd.comp.suggestion-chip.flat.outline.width | 1dp md.comp.suggestion-chip.flat.outline.width |
Icon
| Token | Value |
|---|---|
Suggestion chip leading icon colormd.comp.suggestion-chip.with-leading-icon.leading-icon.color | #6750A4 md.comp.suggestion-chip.with-leading-icon.leading-icon.color
|
Suggestion chip leading icon sizemd.comp.suggestion-chip.with-leading-icon.leading-icon.size | 18dp md.comp.suggestion-chip.with-leading-icon.leading-icon.size |
Label text
| Token | Value |
|---|---|
Suggestion chip label text colormd.comp.suggestion-chip.label-text.color | #49454F md.comp.suggestion-chip.label-text.color
|
Suggestion chip label text fontmd.comp.suggestion-chip.label-text.font | Roboto md.comp.suggestion-chip.label-text.font
|
Suggestion chip label text line heightmd.comp.suggestion-chip.label-text.line-height | 20pt md.comp.suggestion-chip.label-text.line-height
|
Suggestion chip label text sizemd.comp.suggestion-chip.label-text.size | 14pt md.comp.suggestion-chip.label-text.size
|
Suggestion chip label text trackingmd.comp.suggestion-chip.label-text.tracking | 0.1pt md.comp.suggestion-chip.label-text.tracking
|
Suggestion chip label text type stylemd.comp.suggestion-chip.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.suggestion-chip.label-text.type
|
Suggestion chip label text weightmd.comp.suggestion-chip.label-text.weight | 500 md.comp.suggestion-chip.label-text.weight
|
Disabled
Container
| Token | Value |
|---|---|
Suggestion chip elevated disabled container colormd.comp.suggestion-chip.elevated.disabled.container.color | #1D1B20 md.comp.suggestion-chip.elevated.disabled.container.color
|
Suggestion chip elevated disabled container elevationmd.comp.suggestion-chip.elevated.disabled.container.elevation | 0dp md.comp.suggestion-chip.elevated.disabled.container.elevation
|
Suggestion chip elevated disabled container opacitymd.comp.suggestion-chip.elevated.disabled.container.opacity | 12% md.comp.suggestion-chip.elevated.disabled.container.opacity |
Suggestion chip disabled outline colormd.comp.suggestion-chip.flat.disabled.outline.color | #1D1B20 md.comp.suggestion-chip.flat.disabled.outline.color
|
Suggestion chip disabled outline opacitymd.comp.suggestion-chip.flat.disabled.outline.opacity | 12% md.comp.suggestion-chip.flat.disabled.outline.opacity |
Icon
| Token | Value |
|---|---|
Suggestion chip disabled leading icon colormd.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.color | #1D1B20 md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.color
|
Suggestion chip disabled leading icon opacitymd.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.opacity | 38% md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.opacity |
Label text
| Token | Value |
|---|---|
Suggestion chip disabled label text colormd.comp.suggestion-chip.disabled.label-text.color | #1D1B20 md.comp.suggestion-chip.disabled.label-text.color
|
Suggestion chip disabled label text opacitymd.comp.suggestion-chip.disabled.label-text.opacity | 38% md.comp.suggestion-chip.disabled.label-text.opacity |
Hovered
Container
| Token | Value |
|---|---|
Suggestion chip elevated hover container elevationmd.comp.suggestion-chip.elevated.hover.container.elevation | 3dp md.comp.suggestion-chip.elevated.hover.container.elevation
|
Icon
| Token | Value |
|---|---|
Suggestion chip hover leading icon colormd.comp.suggestion-chip.with-leading-icon.hover.leading-icon.color | #6750A4 md.comp.suggestion-chip.with-leading-icon.hover.leading-icon.color
|
Label text
| Token | Value |
|---|---|
Suggestion chip hover label text colormd.comp.suggestion-chip.hover.label-text.color | #49454F md.comp.suggestion-chip.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Suggestion chip elevated hover state layer colormd.comp.suggestion-chip.hover.state-layer.color | #49454F md.comp.suggestion-chip.hover.state-layer.color
|
Suggestion chip elevated hover state layer opacitymd.comp.suggestion-chip.hover.state-layer.opacity | 8% md.comp.suggestion-chip.hover.state-layer.opacity
|
Focused
Focus indicator
| Token | Value |
|---|---|
Suggestion chip focus indicator colormd.comp.suggestion-chip.focus.indicator.color | #625B71 md.comp.suggestion-chip.focus.indicator.color
|
Suggestion chip focus indicator offsetmd.comp.suggestion-chip.focus.indicator.outline.offset | 2dp md.comp.suggestion-chip.focus.indicator.outline.offset
|
Suggestion chip focus indicator thicknessmd.comp.suggestion-chip.focus.indicator.thickness | 3dp md.comp.suggestion-chip.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Suggestion chip elevated focus container elevationmd.comp.suggestion-chip.elevated.focus.container.elevation | 1dp md.comp.suggestion-chip.elevated.focus.container.elevation
|
Suggestion chip focus outline colormd.comp.suggestion-chip.flat.focus.outline.color | #49454F md.comp.suggestion-chip.flat.focus.outline.color
|
Icon
| Token | Value |
|---|---|
Suggestion chip focus leading icon colormd.comp.suggestion-chip.with-leading-icon.focus.leading-icon.color | #6750A4 md.comp.suggestion-chip.with-leading-icon.focus.leading-icon.color
|
Label text
| Token | Value |
|---|---|
Suggestion chip focus label text colormd.comp.suggestion-chip.focus.label-text.color | #49454F md.comp.suggestion-chip.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Suggestion chip focus state layer colormd.comp.suggestion-chip.focus.state-layer.color | #49454F md.comp.suggestion-chip.focus.state-layer.color
|
Suggestion chip focus state layer opacitymd.comp.suggestion-chip.focus.state-layer.opacity | 10% md.comp.suggestion-chip.focus.state-layer.opacity
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Suggestion chip elevated pressed container elevationmd.comp.suggestion-chip.elevated.pressed.container.elevation | 1dp md.comp.suggestion-chip.elevated.pressed.container.elevation
|
Icon
| Token | Value |
|---|---|
Suggestion chip pressed leading icon colormd.comp.suggestion-chip.with-leading-icon.pressed.leading-icon.color | #6750A4 md.comp.suggestion-chip.with-leading-icon.pressed.leading-icon.color
|
Label text
| Token | Value |
|---|---|
Suggestion chip elevated pressed label text colormd.comp.suggestion-chip.pressed.label-text.color | #49454F md.comp.suggestion-chip.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Suggestion chip elevated pressed state layer colormd.comp.suggestion-chip.pressed.state-layer.color | #49454F md.comp.suggestion-chip.pressed.state-layer.color
|
Suggestion chip elevated pressed state layer opacitymd.comp.suggestion-chip.pressed.state-layer.opacity | 10% md.comp.suggestion-chip.pressed.state-layer.opacity
|
Dragged
Container
| Token | Value |
|---|---|
Suggestion chip dragged container elevationmd.comp.suggestion-chip.dragged.container.elevation | 8dp md.comp.suggestion-chip.dragged.container.elevation
|
Icon
| Token | Value |
|---|---|
Suggestion chip dragged leading icon colormd.comp.suggestion-chip.with-leading-icon.dragged.leading-icon.color | #6750A4 md.comp.suggestion-chip.with-leading-icon.dragged.leading-icon.color
|
Label text
| Token | Value |
|---|---|
Suggestion chip dragged label text colormd.comp.suggestion-chip.dragged.label-text.color | #49454F md.comp.suggestion-chip.dragged.label-text.color
|
State layer
| Token | Value |
|---|---|
Suggestion chip dragged state layer colormd.comp.suggestion-chip.dragged.state-layer.color | #49454F md.comp.suggestion-chip.dragged.state-layer.color
|
Suggestion chip dragged state layer opacitymd.comp.suggestion-chip.dragged.state-layer.opacity | 16% md.comp.suggestion-chip.dragged.state-layer.opacity
|
Chip - Filter
Enabled
Container
| Token | Value |
|---|---|
Filter chip container heightmd.comp.filter-chip.container.height | 32dp md.comp.filter-chip.container.height |
Filter chip container shadow colormd.comp.filter-chip.container.shadow-color | #000000 md.comp.filter-chip.container.shadow-color
|
Filter chip container shapemd.comp.filter-chip.container.shape | 8dp md.comp.filter-chip.container.shape
|
Filter chip container surface tint layer colormd.comp.filter-chip.container.surface-tint-layer.color | #6750A4 md.comp.filter-chip.container.surface-tint-layer.color
|
Filter chip elevated container elevationmd.comp.filter-chip.elevated.container.elevation | 1dp md.comp.filter-chip.elevated.container.elevation
|
Filter chip elevated container shadow colormd.comp.filter-chip.elevated.container.shadow-color | #000000 md.comp.filter-chip.elevated.container.shadow-color
|
Filter chip elevated (selected) container colormd.comp.filter-chip.elevated.selected.container.color | #E8DEF8 md.comp.filter-chip.elevated.selected.container.color
|
Filter chip elevated (unselected) container colormd.comp.filter-chip.elevated.unselected.container.color | #F7F2FA md.comp.filter-chip.elevated.unselected.container.color
|
Filter chip container elevationmd.comp.filter-chip.flat.container.elevation | 0dp md.comp.filter-chip.flat.container.elevation
|
Filter chip (selected) outline colormd.comp.filter-chip.flat.selected.container.color | #E8DEF8 md.comp.filter-chip.flat.selected.container.color
|
Filter chip (selected) outline widthmd.comp.filter-chip.flat.selected.outline.width | 0dp md.comp.filter-chip.flat.selected.outline.width |
Filter chip (unselected) outline colormd.comp.filter-chip.flat.unselected.outline.color | #CAC4D0 md.comp.filter-chip.flat.unselected.outline.color
|
Filter chip (unselected) outline widthmd.comp.filter-chip.flat.unselected.outline.width | 1dp md.comp.filter-chip.flat.unselected.outline.width |
Label text
| Token | Value |
|---|---|
Filter chip label text fontmd.comp.filter-chip.label-text.font | Roboto md.comp.filter-chip.label-text.font
|
Filter chip label text line heightmd.comp.filter-chip.label-text.line-height | 20pt md.comp.filter-chip.label-text.line-height
|
Filter chip label text sizemd.comp.filter-chip.label-text.size | 14pt md.comp.filter-chip.label-text.size
|
Filter chip label text trackingmd.comp.filter-chip.label-text.tracking | 0.1pt md.comp.filter-chip.label-text.tracking
|
Filter chip label text type stylemd.comp.filter-chip.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.filter-chip.label-text.type
|
Filter chip label text weightmd.comp.filter-chip.label-text.weight | 500 md.comp.filter-chip.label-text.weight
|
Filter chip (selected) label text colormd.comp.filter-chip.selected.label-text.color | #4A4458 md.comp.filter-chip.selected.label-text.color
|
Filter chip (unselected) label text colormd.comp.filter-chip.unselected.label-text.color | #49454F md.comp.filter-chip.unselected.label-text.color
|
Icon
| Token | Value |
|---|---|
Filter chip with icon icon sizemd.comp.filter-chip.with-icon.icon.size | 18dp md.comp.filter-chip.with-icon.icon.size |
Filter chip with icon (selected) icon colormd.comp.filter-chip.with-icon.selected.icon.color | #4A4458 md.comp.filter-chip.with-icon.selected.icon.color
|
Filter chip with icon (unselected) icon colormd.comp.filter-chip.with-icon.unselected.icon.color | #49454F md.comp.filter-chip.with-icon.unselected.icon.color
|
Filter chip (unselected) with leading iconmd.comp.filter-chip.with-leading-icon.leading-icon.unselected.color | #6750A4 md.comp.filter-chip.with-leading-icon.leading-icon.unselected.color
|
Filter chip with leading icon selected leading icon colormd.comp.filter-chip.with-leading-icon.selected.leading-icon.color | #4A4458 md.comp.filter-chip.with-leading-icon.selected.leading-icon.color
|
Filter chip with leading icon unselected leading icon colormd.comp.filter-chip.with-leading-icon.unselected.leading-icon.color | #6750A4 md.comp.filter-chip.with-leading-icon.unselected.leading-icon.color
|
Filter chip with trailing icon selected trailing icon colormd.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color | #4A4458 md.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color
|
Filter chip (unselected) with trailing iconmd.comp.filter-chip.with-trailing-icon.trailing-icon.unselected.color | #49454F md.comp.filter-chip.with-trailing-icon.trailing-icon.unselected.color
|
Filter chip with trailing icon unselected trailing icon colormd.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color | #49454F md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color
|
Disabled
Container
| Token | Value |
|---|---|
Filter chip elevated disabled container colormd.comp.filter-chip.elevated.disabled.container.color | #1D1B20 md.comp.filter-chip.elevated.disabled.container.color
|
Filter chip elevated disabled container elevationmd.comp.filter-chip.elevated.disabled.container.elevation | 0dp md.comp.filter-chip.elevated.disabled.container.elevation
|
Filter chip elevated disabled container opacitymd.comp.filter-chip.elevated.disabled.container.opacity | 12% md.comp.filter-chip.elevated.disabled.container.opacity |
Filter chip disabled (selected) container colormd.comp.filter-chip.flat.disabled.selected.container.color | #1D1B20 md.comp.filter-chip.flat.disabled.selected.container.color
|
Filter chip disabled (selected) container opacitymd.comp.filter-chip.flat.disabled.selected.container.opacity | 12% md.comp.filter-chip.flat.disabled.selected.container.opacity |
Filter chip disabled (unselected) outline colormd.comp.filter-chip.flat.disabled.unselected.outline.color | #1D1B20 md.comp.filter-chip.flat.disabled.unselected.outline.color
|
Filter chip disabled (unselected) outline opacitymd.comp.filter-chip.flat.disabled.unselected.outline.opacity | 12% md.comp.filter-chip.flat.disabled.unselected.outline.opacity |
Label text
| Token | Value |
|---|---|
Filter chip disabled label text colormd.comp.filter-chip.disabled.label-text.color | #1D1B20 md.comp.filter-chip.disabled.label-text.color
|
Filter chip disabled label text opacitymd.comp.filter-chip.disabled.label-text.opacity | 38% md.comp.filter-chip.disabled.label-text.opacity |
Icon
| Token | Value |
|---|---|
Filter chip with icon disabled icon colormd.comp.filter-chip.with-icon.disabled.icon.color | #1D1B20 md.comp.filter-chip.with-icon.disabled.icon.color
|
Filter chip with icon disabled icon opacitymd.comp.filter-chip.with-icon.disabled.icon.opacity | 38% md.comp.filter-chip.with-icon.disabled.icon.opacity |
Filter chip with leading icon disabled icon colormd.comp.filter-chip.with-leading-icon.disabled.leading-icon.color | #1D1B20 md.comp.filter-chip.with-leading-icon.disabled.leading-icon.color
|
Filter chip with leading icon disabled leading icon opacitymd.comp.filter-chip.with-leading-icon.disabled.leading-icon.opacity | 38% md.comp.filter-chip.with-leading-icon.disabled.leading-icon.opacity |
Filter chip with trailing icon disabled icon colormd.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color | #1D1B20 md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color
|
Filter chip with trailing icon disabled trailing icon opacitymd.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.opacity | 38% md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.opacity |
Focused
Focus indicator
| Token | Value |
|---|---|
Filter chip focus indicator colormd.comp.filter-chip.focus.indicator.color | #625B71 md.comp.filter-chip.focus.indicator.color
|
Filter chip focus indicator offsetmd.comp.filter-chip.focus.indicator.outline.offset | 2dp md.comp.filter-chip.focus.indicator.outline.offset
|
Filter chip focus indicator thicknessmd.comp.filter-chip.focus.indicator.thickness | 3dp md.comp.filter-chip.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Filter chip elevated focus container elevationmd.comp.filter-chip.elevated.focus.container.elevation | 1dp md.comp.filter-chip.elevated.focus.container.elevation
|
Filter chip (selected) focus container elevationmd.comp.filter-chip.flat.selected.focus.container.elevation | 0dp md.comp.filter-chip.flat.selected.focus.container.elevation
|
Filter chip (unselected) focus container elevationmd.comp.filter-chip.flat.unselected.focus.container.elevation | 0dp md.comp.filter-chip.flat.unselected.focus.container.elevation
|
Filter chip (unselected) focus outline colormd.comp.filter-chip.flat.unselected.focus.outline.color | #49454F md.comp.filter-chip.flat.unselected.focus.outline.color
|
Label text
| Token | Value |
|---|---|
Filter chip (selected) focus label text colormd.comp.filter-chip.selected.focus.label-text.color | #4A4458 md.comp.filter-chip.selected.focus.label-text.color
|
Filter chip (unselected) focus label text colormd.comp.filter-chip.unselected.focus.label-text.color | #49454F md.comp.filter-chip.unselected.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Filter chip (selected) focus state layer colormd.comp.filter-chip.selected.focus.state-layer.color | #4A4458 md.comp.filter-chip.selected.focus.state-layer.color
|
Filter chip (selected) focus state layer opacitymd.comp.filter-chip.selected.focus.state-layer.opacity | 10% md.comp.filter-chip.selected.focus.state-layer.opacity
|
Filter chip (unselected) focus state layer colormd.comp.filter-chip.unselected.focus.state-layer.color | #49454F md.comp.filter-chip.unselected.focus.state-layer.color
|
Filter chip (unselected) focus state layer opacitymd.comp.filter-chip.unselected.focus.state-layer.opacity | 10% md.comp.filter-chip.unselected.focus.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Filter chip with icon (selected) focus icon colormd.comp.filter-chip.with-icon.selected.focus.icon.color | #4A4458 md.comp.filter-chip.with-icon.selected.focus.icon.color
|
Filter chip with icon (unselected) focus icon colormd.comp.filter-chip.with-icon.unselected.focus.icon.color | #49454F md.comp.filter-chip.with-icon.unselected.focus.icon.color
|
Filter chip with leading icon (selected) focus icon colormd.comp.filter-chip.with-leading-icon.selected.focus.leading-icon.color | #4A4458 md.comp.filter-chip.with-leading-icon.selected.focus.leading-icon.color
|
Filter chip with leading icon (unselected) focus icon colormd.comp.filter-chip.with-leading-icon.unselected.focus.leading-icon.color | #6750A4 md.comp.filter-chip.with-leading-icon.unselected.focus.leading-icon.color
|
Filter chip with trailing icon (selected) focus icon colormd.comp.filter-chip.with-trailing-icon.selected.focus.trailing-icon.color | #4A4458 md.comp.filter-chip.with-trailing-icon.selected.focus.trailing-icon.color
|
Filter chip with trailing icon (unselected) focus icon colormd.comp.filter-chip.with-trailing-icon.unselected.focus.trailing-icon.color | #49454F md.comp.filter-chip.with-trailing-icon.unselected.focus.trailing-icon.color
|
Hovered
Container
| Token | Value |
|---|---|
Filter chip elevated hover container elevationmd.comp.filter-chip.elevated.hover.container.elevation | 3dp md.comp.filter-chip.elevated.hover.container.elevation
|
Filter chip (selected) hover container elevationmd.comp.filter-chip.flat.selected.hover.container.elevation | 1dp md.comp.filter-chip.flat.selected.hover.container.elevation
|
Filter chip (unselected) hover container elevationmd.comp.filter-chip.flat.unselected.hover.container.elevation | 0dp md.comp.filter-chip.flat.unselected.hover.container.elevation
|
Label text
| Token | Value |
|---|---|
Filter chip (selected) hover label text colormd.comp.filter-chip.selected.hover.label-text.color | #4A4458 md.comp.filter-chip.selected.hover.label-text.color
|
Filter chip (unselected) hover label text colormd.comp.filter-chip.unselected.hover.label-text.color | #49454F md.comp.filter-chip.unselected.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Filter chip (selected) hover state layer colormd.comp.filter-chip.selected.hover.state-layer.color | #4A4458 md.comp.filter-chip.selected.hover.state-layer.color
|
Filter chip (selected) hover state layer opacitymd.comp.filter-chip.selected.hover.state-layer.opacity | 8% md.comp.filter-chip.selected.hover.state-layer.opacity
|
Filter chip (unselected) hover state layer colormd.comp.filter-chip.unselected.hover.state-layer.color | #49454F md.comp.filter-chip.unselected.hover.state-layer.color
|
Filter chip (unselected) hover state layer opacitymd.comp.filter-chip.unselected.hover.state-layer.opacity | 8% md.comp.filter-chip.unselected.hover.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Filter chip with icon (selected) hover icon colormd.comp.filter-chip.with-icon.selected.hover.icon.color | #4A4458 md.comp.filter-chip.with-icon.selected.hover.icon.color
|
Filter chip with icon (unselected) hover icon colormd.comp.filter-chip.with-icon.unselected.hover.icon.color | #49454F md.comp.filter-chip.with-icon.unselected.hover.icon.color
|
Filter chip with leading icon (selected) hover icon colormd.comp.filter-chip.with-leading-icon.selected.hover.leading-icon.color | #4A4458 md.comp.filter-chip.with-leading-icon.selected.hover.leading-icon.color
|
Filter chip with leading icon (unselected) hover icon colormd.comp.filter-chip.with-leading-icon.unselected.hover.leading-icon.color | #6750A4 md.comp.filter-chip.with-leading-icon.unselected.hover.leading-icon.color
|
Filter chip with trailing icon (selected) hover icon colormd.comp.filter-chip.with-trailing-icon.selected.hover.trailing-icon.color | #4A4458 md.comp.filter-chip.with-trailing-icon.selected.hover.trailing-icon.color
|
Filter chip with trailing icon (unselected) hover icon colormd.comp.filter-chip.with-trailing-icon.unselected.hover.trailing-icon.color | #49454F md.comp.filter-chip.with-trailing-icon.unselected.hover.trailing-icon.color
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Filter chip (Elevated style) pressed container elevationmd.comp.filter-chip.elevated.pressed.container.elevation | 1dp md.comp.filter-chip.elevated.pressed.container.elevation
|
Filter chip (selected) pressed container elevationmd.comp.filter-chip.flat.selected.pressed.container.elevation | 0dp md.comp.filter-chip.flat.selected.pressed.container.elevation
|
Filter chip (unselected) pressed container elevationmd.comp.filter-chip.flat.unselected.pressed.container.elevation | 0dp md.comp.filter-chip.flat.unselected.pressed.container.elevation
|
Label text
| Token | Value |
|---|---|
Filter chip (selected) pressed label text colormd.comp.filter-chip.selected.pressed.label-text.color | #4A4458 md.comp.filter-chip.selected.pressed.label-text.color
|
Filter chip (unselected) pressed label text colormd.comp.filter-chip.unselected.pressed.label-text.color | #49454F md.comp.filter-chip.unselected.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Filter chip (selected) pressed state layer colormd.comp.filter-chip.selected.pressed.state-layer.color | #49454F md.comp.filter-chip.selected.pressed.state-layer.color
|
Filter chip (selected) pressed state layer opacitymd.comp.filter-chip.selected.pressed.state-layer.opacity | 10% md.comp.filter-chip.selected.pressed.state-layer.opacity
|
Filter chip (unselected) pressed state layer colormd.comp.filter-chip.unselected.pressed.state-layer.color | #4A4458 md.comp.filter-chip.unselected.pressed.state-layer.color
|
Filter chip (unselected) pressed state layer opacitymd.comp.filter-chip.unselected.pressed.state-layer.opacity | 10% md.comp.filter-chip.unselected.pressed.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Filter chip with icon (selected) pressed icon colormd.comp.filter-chip.with-icon.selected.pressed.icon.color | #4A4458 md.comp.filter-chip.with-icon.selected.pressed.icon.color
|
Filter chip with icon (unselected) pressed icon colormd.comp.filter-chip.with-icon.unselected.pressed.icon.color | #49454F md.comp.filter-chip.with-icon.unselected.pressed.icon.color
|
Filter chip with leading icon (selected) pressed icon colormd.comp.filter-chip.with-leading-icon.selected.pressed.leading-icon.color | #4A4458 md.comp.filter-chip.with-leading-icon.selected.pressed.leading-icon.color
|
Filter chip with leading icon (unselected) pressed icon colormd.comp.filter-chip.with-leading-icon.unselected.pressed.leading-icon.color | #6750A4 md.comp.filter-chip.with-leading-icon.unselected.pressed.leading-icon.color
|
Filter chip with trailing icon (selected) pressed icon colormd.comp.filter-chip.with-trailing-icon.selected.pressed.trailing-icon.color | #4A4458 md.comp.filter-chip.with-trailing-icon.selected.pressed.trailing-icon.color
|
Filter chip with trailing icon (unselected) pressed icon colormd.comp.filter-chip.with-trailing-icon.unselected.pressed.trailing-icon.color | #49454F md.comp.filter-chip.with-trailing-icon.unselected.pressed.trailing-icon.color
|
Dragged
Container
| Token | Value |
|---|---|
Filter chip dragged container elevationmd.comp.filter-chip.dragged.container.elevation | 8dp md.comp.filter-chip.dragged.container.elevation
|
Label text
| Token | Value |
|---|---|
Filter chip (selected) dragged label text colormd.comp.filter-chip.selected.dragged.label-text.color | #4A4458 md.comp.filter-chip.selected.dragged.label-text.color
|
Filter chip (unselected) dragged label text colormd.comp.filter-chip.unselected.dragged.label-text.color | #49454F md.comp.filter-chip.unselected.dragged.label-text.color
|
State layer
| Token | Value |
|---|---|
Filter chip (selected) dragged state layer colormd.comp.filter-chip.selected.dragged.state-layer.color | #4A4458 md.comp.filter-chip.selected.dragged.state-layer.color
|
Filter chip (selected) dragged state layer opacitymd.comp.filter-chip.selected.dragged.state-layer.opacity | 16% md.comp.filter-chip.selected.dragged.state-layer.opacity
|
Filter chip (unselected) dragged state layer colormd.comp.filter-chip.unselected.dragged.state-layer.color | #49454F md.comp.filter-chip.unselected.dragged.state-layer.color
|
Filter chip (unselected) dragged state layer opacitymd.comp.filter-chip.unselected.dragged.state-layer.opacity | 16% md.comp.filter-chip.unselected.dragged.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Filter chip with icon (unselected) dragged icon colormd.comp.filter-chip.with-icon.selected.dragged.icon.color | #4A4458 md.comp.filter-chip.with-icon.selected.dragged.icon.color
|
Filter chip with icon (unselected) dragged icon colormd.comp.filter-chip.with-icon.unselected.dragged.icon.color | #49454F md.comp.filter-chip.with-icon.unselected.dragged.icon.color
|
Filter chip with leading icon (selected) dragged icon colormd.comp.filter-chip.with-leading-icon.selected.dragged.leading-icon.color | #4A4458 md.comp.filter-chip.with-leading-icon.selected.dragged.leading-icon.color
|
Filter chip with leading icon (unselected) dragged icon colormd.comp.filter-chip.with-leading-icon.unselected.dragged.leading-icon.color | #6750A4 md.comp.filter-chip.with-leading-icon.unselected.dragged.leading-icon.color
|
Filter chip with trailing icon (selected) dragged icon colormd.comp.filter-chip.with-trailing-icon.selected.dragged.trailing-icon.color | #4A4458 md.comp.filter-chip.with-trailing-icon.selected.dragged.trailing-icon.color
|
Filter chip with trailing icon (unselected) dragged icon colormd.comp.filter-chip.with-trailing-icon.unselected.dragged.trailing-icon.color | #49454F md.comp.filter-chip.with-trailing-icon.unselected.dragged.trailing-icon.color
|