| menu-item-background-color-default |
color-set |
- |
light: rgb(233, 233, 233) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(233%2C%20233%2C%20233)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
dark: rgb(50, 50, 50) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(50%2C%2050%2C%2050)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
wireframe: rgb(228, 234, 249) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(228%2C%20234%2C%20249)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) |
No |
- |
- |
| menu-item-background-color-disabled |
color-set |
- |
light: rgb(233, 233, 233) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(233%2C%20233%2C%20233)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
dark: rgb(50, 50, 50) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(50%2C%2050%2C%2050)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
wireframe: rgb(228, 234, 249) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(228%2C%20234%2C%20249)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) |
No |
- |
- |
| menu-item-background-color-down |
color-set |
- |
light: rgb(233, 233, 233) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(233%2C%20233%2C%20233)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
dark: rgb(50, 50, 50) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(50%2C%2050%2C%2050)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
wireframe: rgb(228, 234, 249) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(228%2C%20234%2C%20249)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) |
No |
- |
- |
| menu-item-background-color-hover |
color-set |
- |
light: rgb(233, 233, 233) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(233%2C%20233%2C%20233)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
dark: rgb(50, 50, 50) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(50%2C%2050%2C%2050)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
wireframe: rgb(228, 234, 249) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(228%2C%20234%2C%20249)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) |
No |
- |
- |
| menu-item-background-color-keyboard-focus |
color-set |
- |
light: rgb(233, 233, 233) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(233%2C%20233%2C%20233)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
dark: rgb(50, 50, 50) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(50%2C%2050%2C%2050)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
wireframe: rgb(228, 234, 249) %22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22rgb(228%2C%20234%2C%20249)%22%2F%3E%3Crect%20width%3D%2215%22%20height%3D%2215%22%20x%3D%220.5%22%20y%3D%220.5%22%20rx%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.42)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) |
No |
- |
- |
| menu-item-background-opacity |
opacity |
0 |
0 |
No |
- |
- |
| menu-item-edge-to-content-not-selected-extra-large |
scale-set |
- |
desktop: 45px
mobile: 54px |
Yes |
This use case should not be a single token but either calculated or structurally determined. Refactor may be required. |
- |
| menu-item-edge-to-content-not-selected-large |
scale-set |
- |
desktop: 38px
mobile: 47px |
Yes |
This use case should not be a single token but either calculated or structurally determined. Refactor may be required. |
- |
| menu-item-edge-to-content-not-selected-medium |
scale-set |
- |
desktop: 32px
mobile: 42px |
Yes |
This use case should not be a single token but either calculated or structurally determined. Refactor may be required. |
- |
| menu-item-edge-to-content-not-selected-small |
scale-set |
- |
desktop: 28px
mobile: 24px |
Yes |
This use case should not be a single token but either calculated or structurally determined. Refactor may be required. |
- |
| menu-item-label-to-description |
alias |
{menu-item-label-to-description-medium} |
1px |
Yes |
- |
- |
| menu-item-label-to-description-extra-large |
dimension |
2px |
2px |
Yes |
Use semantic token text-gap-extra-large instead. |
Replaced by text-gap-extra-large |
| menu-item-label-to-description-large |
dimension |
2px |
2px |
Yes |
Use semantic token text-gap-large instead. |
Replaced by text-gap-large |
| menu-item-label-to-description-medium |
dimension |
1px |
1px |
Yes |
Use semantic token text-gap-medium instead. |
Replaced by text-gap-medium |
| menu-item-label-to-description-small |
dimension |
1px |
1px |
Yes |
Use semantic token text-gap-small instead. |
Replaced by text-gap-small |
| menu-item-section-divider-height |
dimension |
12px |
12px |
No |
- |
- |
| menu-item-top-to-disclosure-icon-extra-large |
scale-set |
- |
desktop: 17px
mobile: 22px |
Yes |
Use semantic token base-padding-vertical-extra-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-extra-large |
Replaced by base-padding-vertical-extra-large |
| menu-item-top-to-disclosure-icon-large |
scale-set |
- |
desktop: 14px
mobile: 17px |
Yes |
Use semantic token base-padding-vertical-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-large |
Replaced by base-padding-vertical-large |
| menu-item-top-to-disclosure-icon-medium |
scale-set |
- |
desktop: 11px
mobile: 13px |
Yes |
Use semantic token base-padding-vertical-medium instead. UI icons must be in a frame that has height equal to workflow-icon-size-medium |
Replaced by base-padding-vertical-medium |
| menu-item-top-to-disclosure-icon-small |
scale-set |
- |
desktop: 7px
mobile: 9px |
Yes |
Use semantic token base-padding-vertical-small instead. UI icons must be in a frame that has height equal to workflow-icon-size-small |
Replaced by base-padding-vertical-small |
| menu-item-top-to-selected-icon-extra-large |
scale-set |
- |
desktop: 17px
mobile: 22px |
Yes |
Use semantic token base-padding-vertical-extra-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-extra-large |
Replaced by base-padding-vertical-extra-large |
| menu-item-top-to-selected-icon-large |
scale-set |
- |
desktop: 14px
mobile: 17px |
Yes |
Use semantic token base-padding-vertical-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-large |
Replaced by base-padding-vertical-large |
| menu-item-top-to-selected-icon-medium |
scale-set |
- |
desktop: 11px
mobile: 13px |
Yes |
Use semantic token base-padding-vertical-medium instead. UI icons must be in a frame that has height equal to workflow-icon-size-medium |
Replaced by base-padding-vertical-medium |
| menu-item-top-to-selected-icon-small |
scale-set |
- |
desktop: 7px
mobile: 9px |
Yes |
Use semantic token base-padding-vertical-small instead. UI icons must be in a frame that has height equal to workflow-icon-size-small |
Replaced by base-padding-vertical-small |
| menu-item-top-to-thumbnail-extra-large |
scale-set |
- |
desktop: 11px
mobile: 13px |
Yes |
Use semantic token base-padding-vertical-extra-large instead. Unify with all top component paddings |
Replaced by base-padding-vertical-extra-large |
| menu-item-top-to-thumbnail-large |
scale-set |
- |
desktop: 10px
mobile: 12px |
Yes |
Use semantic token base-padding-vertical-large instead. Unify with all top component paddings |
Replaced by base-padding-vertical-large |
| menu-item-top-to-thumbnail-medium |
scale-set |
- |
desktop: 9px
mobile: 11px |
Yes |
Use semantic token base-padding-vertical-medium instead. Unify with all top component paddings |
Replaced by base-padding-vertical-medium |
| menu-item-top-to-thumbnail-small |
scale-set |
- |
desktop: 8px
mobile: 10px |
Yes |
Use semantic token base-padding-vertical-small instead. Unify with all top component paddings |
Replaced by base-padding-vertical-small |
| menu-section-header-to-description-extra-large |
dimension |
2px |
2px |
Yes |
Use semantic token text-gap-extra-large instead. |
Replaced by text-gap-extra-large |
| menu-section-header-to-description-large |
dimension |
2px |
2px |
Yes |
Use semantic token text-gap-large instead. |
Replaced by text-gap-large |
| menu-section-header-to-description-medium |
dimension |
1px |
1px |
Yes |
Use semantic token text-gap-medium instead. |
Replaced by text-gap-medium |
| menu-section-header-to-description-small |
dimension |
1px |
1px |
Yes |
Use semantic token text-gap-small instead. |
Replaced by text-gap-small |