| checkbox-control-size-small |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| checkbox-control-size-medium |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| checkbox-control-size-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| checkbox-control-size-extra-large |
- |
desktop: 20px; mobile: 26px |
No |
- |
- |
| checkbox-top-to-control-small |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| checkbox-top-to-control-medium |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| checkbox-top-to-control-large |
- |
desktop: 11px; mobile: 14px |
No |
- |
- |
| checkbox-top-to-control-extra-large |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| switch-control-width-small |
- |
desktop: 22px; mobile: 30px |
No |
- |
- |
| switch-control-width-medium |
- |
desktop: 26px; mobile: 34px |
No |
- |
- |
| switch-control-width-large |
- |
desktop: 30px; mobile: 38px |
No |
- |
- |
| switch-control-width-extra-large |
- |
desktop: 34px; mobile: 46px |
No |
- |
- |
| switch-control-height-small |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| switch-control-height-medium |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| switch-control-height-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| switch-control-height-extra-large |
- |
desktop: 20px; mobile: 26px |
No |
- |
- |
| switch-top-to-control-small |
- |
desktop: 6px; mobile: 7px |
No |
- |
- |
| switch-top-to-control-medium |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| switch-top-to-control-large |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| switch-top-to-control-extra-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| radio-button-control-size-small |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| radio-button-control-size-medium |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| radio-button-control-size-large |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| radio-button-control-size-extra-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| radio-button-top-to-control-small |
- |
desktop: 6px; mobile: 7px |
No |
- |
- |
| radio-button-top-to-control-medium |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| radio-button-top-to-control-large |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| radio-button-top-to-control-extra-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| radio-button-selection-indicator |
4px |
4px |
No |
- |
- |
| field-label-text-to-asterisk-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| field-label-text-to-asterisk-medium |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| field-label-text-to-asterisk-large |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| field-label-text-to-asterisk-extra-large |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| field-label-top-to-asterisk-small |
- |
desktop: 8px; mobile: 11px |
No |
- |
- |
| field-label-top-to-asterisk-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| field-label-top-to-asterisk-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| field-label-top-to-asterisk-extra-large |
- |
desktop: 18px; mobile: 24px |
No |
- |
- |
| field-label-top-margin-small |
0px |
0px |
No |
- |
- |
| field-label-top-margin-medium |
0px |
0px |
No |
- |
- |
| field-label-top-margin-large |
0px |
0px |
No |
- |
- |
| field-label-top-margin-extra-large |
0px |
0px |
No |
- |
- |
| field-label-to-component |
0px |
0px |
No |
- |
- |
| field-label-to-component-quiet-small |
- |
desktop: -8px; mobile: -10px |
No |
- |
- |
| field-label-to-component-quiet-medium |
- |
desktop: -8px; mobile: -10px |
No |
- |
- |
| field-label-to-component-quiet-large |
- |
desktop: -12px; mobile: -15px |
No |
- |
- |
| field-label-to-component-quiet-extra-large |
- |
desktop: -15px; mobile: -19px |
No |
- |
- |
| help-text-top-to-workflow-icon-small |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| help-text-top-to-workflow-icon-medium |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| help-text-top-to-workflow-icon-large |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| help-text-top-to-workflow-icon-extra-large |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| help-text-to-component |
0px |
0px |
No |
- |
- |
| status-light-dot-size-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| status-light-dot-size-medium |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| status-light-dot-size-large |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| status-light-dot-size-extra-large |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| status-light-top-to-dot-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| status-light-top-to-dot-medium |
- |
desktop: 11px; mobile: 14px |
No |
- |
- |
| status-light-top-to-dot-large |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| status-light-top-to-dot-extra-large |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| action-button-edge-to-hold-icon-extra-small |
3px |
3px |
No |
- |
- |
| action-button-edge-to-hold-icon-small |
3px |
3px |
No |
- |
- |
| action-button-edge-to-hold-icon-medium |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| action-button-edge-to-hold-icon-large |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| action-button-edge-to-hold-icon-extra-large |
- |
desktop: 6px; mobile: 7px |
No |
- |
- |
| button-minimum-width-multiplier |
2.25 |
2.25 |
No |
- |
- |
| tooltip-tip-width |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| tooltip-tip-height |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| tooltip-maximum-width |
- |
desktop: 160px; mobile: 200px |
No |
- |
- |
| divider-thickness-small |
1px |
1px |
No |
- |
- |
| divider-thickness-medium |
2px |
2px |
No |
- |
- |
| divider-thickness-large |
4px |
4px |
No |
- |
- |
| progress-circle-size-small |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| progress-circle-size-medium |
- |
desktop: 32px; mobile: 40px |
No |
- |
- |
| progress-circle-size-large |
- |
desktop: 64px; mobile: 80px |
No |
- |
- |
| progress-circle-thickness-small |
- |
desktop: 2px; mobile: 3px |
No |
- |
- |
| progress-circle-thickness-medium |
- |
desktop: 3px; mobile: 4px |
No |
- |
- |
| progress-circle-thickness-large |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| toast-height |
- |
desktop: 52px; mobile: 60px |
No |
- |
- |
| toast-maximum-width |
- |
desktop: 336px; mobile: 420px |
No |
- |
- |
| toast-top-to-workflow-icon |
- |
desktop: 18px; mobile: 20px |
No |
- |
- |
| toast-top-to-text |
- |
desktop: 18px; mobile: 20px |
No |
- |
- |
| toast-bottom-to-text |
- |
desktop: 20px; mobile: 22px |
No |
- |
- |
| action-bar-height |
{component-height-400} |
desktop: 56px; mobile: 70px |
No |
- |
- |
| action-bar-top-to-item-counter |
{component-top-to-text-300} |
desktop: 12px; mobile: 15px |
No |
- |
- |
| swatch-size-extra-small |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| swatch-size-small |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| swatch-size-medium |
- |
desktop: 32px; mobile: 40px |
No |
- |
- |
| swatch-size-large |
- |
desktop: 40px; mobile: 50px |
No |
- |
- |
| swatch-rectangle-width-multiplier |
2 |
2 |
No |
- |
- |
| swatch-slash-thickness-extra-small |
2px |
2px |
No |
- |
- |
| swatch-slash-thickness-small |
3px |
3px |
No |
- |
- |
| swatch-slash-thickness-medium |
4px |
4px |
No |
- |
- |
| swatch-slash-thickness-large |
5px |
5px |
No |
- |
- |
| progress-bar-minimum-width |
48px |
48px |
No |
- |
- |
| progress-bar-maximum-width |
768px |
768px |
No |
- |
- |
| progress-bar-thickness-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| progress-bar-thickness-medium |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| progress-bar-thickness-large |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| progress-bar-thickness-extra-large |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| meter-minimum-width |
48px |
48px |
No |
- |
- |
| meter-maximum-width |
768px |
768px |
No |
- |
- |
| meter-width |
- |
desktop: 192px; mobile: 240px |
No |
- |
- |
| meter-default-width |
{meter-width} |
desktop: 192px; mobile: 240px |
Yes |
Token renamed, use meter-width |
Replaced by meter-width |
| meter-thickness-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| meter-thickness-large |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| in-line-alert-minimum-width |
240px |
240px |
No |
- |
- |
| tag-top-to-avatar-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| tag-top-to-avatar-medium |
- |
desktop: 6px; mobile: 7px |
No |
- |
- |
| tag-top-to-avatar-large |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| tag-top-to-cross-icon-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| tag-top-to-cross-icon-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| tag-top-to-cross-icon-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| popover-tip-width |
16px |
16px |
No |
- |
- |
| popover-tip-height |
8px |
8px |
No |
- |
- |
| popover-top-to-content-area |
{popover-edge-to-content-area} |
8px |
Yes |
Introduced as an error. Use popover-edge-to-content-area instead |
Replaced by popover-edge-to-content-area |
| popover-edge-to-content-area |
{spacing-100} |
8px |
No |
- |
- |
| menu-item-label-to-description |
{menu-item-label-to-description-medium} |
1px |
Yes |
- |
- |
| menu-item-edge-to-content-not-selected-small |
- |
desktop: 28px; mobile: 24px |
No |
- |
- |
| menu-item-edge-to-content-not-selected-medium |
- |
desktop: 32px; mobile: 42px |
No |
- |
- |
| menu-item-edge-to-content-not-selected-large |
- |
desktop: 38px; mobile: 47px |
No |
- |
- |
| menu-item-edge-to-content-not-selected-extra-large |
- |
desktop: 45px; mobile: 54px |
No |
- |
- |
| menu-item-top-to-disclosure-icon-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| menu-item-top-to-disclosure-icon-medium |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| menu-item-top-to-disclosure-icon-large |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| menu-item-top-to-disclosure-icon-extra-large |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| menu-item-top-to-selected-icon-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| menu-item-top-to-selected-icon-medium |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| menu-item-top-to-selected-icon-large |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| menu-item-top-to-selected-icon-extra-large |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| menu-item-section-divider-height |
12px |
12px |
No |
- |
- |
| slider-track-thickness |
2px |
2px |
Yes |
- |
- |
| slider-control-height-small |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| slider-control-height-medium |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| slider-control-height-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| slider-control-height-extra-large |
- |
desktop: 20px; mobile: 26px |
No |
- |
- |
| slider-handle-size-small |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| slider-handle-size-medium |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| slider-handle-size-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| slider-handle-size-extra-large |
- |
desktop: 20px; mobile: 26px |
No |
- |
- |
| slider-handle-border-width-down-small |
- |
desktop: 5px; mobile: 7px |
No |
- |
- |
| slider-handle-border-width-down-medium |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| slider-handle-border-width-down-large |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| slider-handle-border-width-down-extra-large |
- |
desktop: 8px; mobile: 11px |
No |
- |
- |
| slider-handle-gap |
4px |
4px |
Yes |
- |
- |
| slider-bottom-to-handle-small |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| slider-bottom-to-handle-medium |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| slider-bottom-to-handle-large |
- |
desktop: 11px; mobile: 14px |
No |
- |
- |
| slider-bottom-to-handle-extra-large |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| slider-control-to-field-label-small |
- |
desktop: -4px; mobile: -8px |
No |
- |
- |
| slider-control-to-field-label-medium |
- |
desktop: -12px; mobile: -16px |
No |
- |
- |
| slider-control-to-field-label-large |
- |
desktop: -16px; mobile: -20px |
No |
- |
- |
| slider-control-to-field-label-extra-large |
- |
desktop: -20px; mobile: -28px |
No |
- |
- |
| picker-minimum-width-multiplier |
2 |
2 |
No |
- |
- |
| picker-visual-to-disclosure-icon-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| picker-visual-to-disclosure-icon-medium |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| picker-visual-to-disclosure-icon-large |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| picker-visual-to-disclosure-icon-extra-large |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| picker-border-width |
{border-width-100} |
1px |
No |
- |
- |
| picker-end-edge-to-disclousure-icon-quiet |
{picker-end-edge-to-disclosure-icon-quiet} |
0px |
Yes |
Use picker-end-edge-to-disclosure-icon-quiet instead |
Replaced by picker-end-edge-to-disclosure-icon-quiet |
| picker-end-edge-to-disclosure-icon-quiet |
0px |
0px |
No |
- |
- |
| text-field-minimum-width-multiplier |
1.5 |
1.5 |
No |
- |
- |
| text-area-minimum-width |
- |
desktop: 112px; mobile: 140px |
No |
- |
- |
| text-area-minimum-height |
- |
desktop: 56px; mobile: 70px |
No |
- |
- |
| combo-box-minimum-width-multiplier |
2.5 |
2.5 |
No |
- |
- |
| combo-box-quiet-minimum-width-multiplier |
2 |
2 |
Yes |
- |
- |
| combo-box-visual-to-field-button-small |
{combo-box-visual-to-field-button} |
0px |
Yes |
Replaced with combo-box-visual-to-field-button |
Replaced by combo-box-visual-to-field-button |
| combo-box-visual-to-field-button-medium |
{combo-box-visual-to-field-button} |
0px |
Yes |
Replaced with combo-box-visual-to-field-button |
Replaced by combo-box-visual-to-field-button |
| combo-box-visual-to-field-button-large |
{combo-box-visual-to-field-button} |
0px |
Yes |
Replaced with combo-box-visual-to-field-button |
Replaced by combo-box-visual-to-field-button |
| combo-box-visual-to-field-button-extra-large |
{combo-box-visual-to-field-button} |
0px |
Yes |
Replaced with combo-box-visual-to-field-button |
Replaced by combo-box-visual-to-field-button |
| combo-box-visual-to-field-button-quiet |
{combo-box-visual-to-field-button} |
0px |
Yes |
Replaced with combo-box-visual-to-field-button |
Replaced by combo-box-visual-to-field-button |
| thumbnail-size-50 |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| thumbnail-size-75 |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| thumbnail-size-100 |
- |
desktop: 24px; mobile: 28px |
No |
- |
- |
| thumbnail-size-200 |
- |
desktop: 28px; mobile: 32px |
No |
- |
- |
| thumbnail-size-300 |
- |
desktop: 32px; mobile: 36px |
No |
- |
- |
| thumbnail-size-400 |
- |
desktop: 36px; mobile: 40px |
No |
- |
- |
| thumbnail-size-500 |
- |
desktop: 40px; mobile: 44px |
No |
- |
- |
| thumbnail-size-600 |
- |
desktop: 44px; mobile: 48px |
No |
- |
- |
| thumbnail-size-700 |
- |
desktop: 48px; mobile: 52px |
No |
- |
- |
| thumbnail-size-800 |
- |
desktop: 52px; mobile: 56px |
No |
- |
- |
| thumbnail-size-900 |
- |
desktop: 56px; mobile: 64px |
No |
- |
- |
| thumbnail-size-1000 |
- |
desktop: 64px; mobile: 72px |
No |
- |
- |
| alert-dialog-minimum-width |
288px |
288px |
No |
- |
- |
| alert-dialog-maximum-width |
480px |
480px |
No |
- |
- |
| alert-dialog-title-size |
{alert-dialog-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Replace with alert-dialog-title-font-size |
Replaced by alert-dialog-title-font-size |
| alert-dialog-description-size |
{alert-dialog-description-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Replace with alert-dialog-description-font-size |
Replaced by alert-dialog-description-font-size |
| opacity-checkerboard-square-size |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use opacity-checkerboard-square-size-medium instead. |
Replaced by opacity-checkerboard-square-size-medium |
| opacity-checkerboard-square-size-medium |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| contextual-help-minimum-width |
268px |
268px |
No |
- |
- |
| contextual-help-title-size |
{contextual-help-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
- |
- |
| contextual-help-body-size |
{contextual-help-body-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
- |
- |
| breadcrumbs-height |
{component-height-200} |
desktop: 40px; mobile: 50px |
Yes |
- |
- |
| breadcrumbs-height-compact |
{component-height-100} |
desktop: 32px; mobile: 40px |
Yes |
- |
- |
| breadcrumbs-height-multiline |
- |
desktop: 72px; mobile: 90px |
No |
- |
- |
| breadcrumbs-top-to-text |
{component-top-to-text-200} |
desktop: 9px; mobile: 12px |
Yes |
- |
- |
| breadcrumbs-top-to-text-compact |
{component-top-to-text-100} |
desktop: 6px; mobile: 8px |
Yes |
- |
- |
| breadcrumbs-top-to-text-multiline |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| breadcrumbs-bottom-to-text |
{component-bottom-to-text-200} |
desktop: 11px; mobile: 14px |
Yes |
- |
- |
| breadcrumbs-bottom-to-text-compact |
{component-bottom-to-text-100} |
desktop: 9px; mobile: 11px |
Yes |
- |
- |
| breadcrumbs-bottom-to-text-multiline |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| breadcrumbs-start-edge-to-text |
{breadcrumbs-start-edge-to-text-large} |
desktop: 9px; mobile: 11px |
Yes |
Use a sized token instead, e.g., breadcrumbs-start-edge-to-text-large. |
Replaced by breadcrumbs-start-edge-to-text-large |
| breadcrumbs-end-edge-to-text |
0px |
0px |
No |
- |
- |
| breadcrumbs-top-text-to-bottom-text |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| breadcrumbs-top-to-separator-icon |
{breadcrumbs-top-to-separator-large} |
desktop: 15px; mobile: 20px |
Yes |
Use a sized token instead, e.g., breadcrumbs-top-to-separator-large. |
Replaced by breadcrumbs-top-to-separator-large |
| breadcrumbs-top-to-separator-icon-compact |
{breadcrumbs-top-to-separator-medium} |
desktop: 11px; mobile: 15px |
Yes |
Use a sized token instead, e.g., breadcrumbs-top-to-separator-medium. |
Replaced by breadcrumbs-top-to-separator-medium |
| breadcrumbs-top-to-separator-icon-multiline |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| breadcrumbs-separator-icon-to-bottom-text-multiline |
{breadcrumbs-separator-to-bottom-text-multiline} |
desktop: 11px; mobile: 15px |
Yes |
- |
- |
| breadcrumbs-truncated-menu-to-separator-icon |
{breadcrumbs-truncated-menu-to-separator} |
0px |
Yes |
- |
- |
| breadcrumbs-top-to-truncated-menu |
0px |
0px |
No |
- |
- |
| breadcrumbs-top-to-truncated-menu-compact |
{breadcrumbs-top-to-truncated-menu} |
0px |
Yes |
- |
- |
| breadcrumbs-start-edge-to-truncated-menu |
0px |
0px |
No |
- |
- |
| breadcrumbs-truncated-menu-to-bottom-text |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| avatar-size-50 |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| avatar-size-75 |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| avatar-size-100 |
- |
desktop: 24px; mobile: 28px |
No |
- |
- |
| avatar-size-200 |
- |
desktop: 28px; mobile: 32px |
No |
- |
- |
| avatar-size-300 |
- |
desktop: 32px; mobile: 36px |
No |
- |
- |
| avatar-size-400 |
- |
desktop: 36px; mobile: 40px |
No |
- |
- |
| avatar-size-500 |
- |
desktop: 40px; mobile: 44px |
No |
- |
- |
| avatar-size-600 |
- |
desktop: 44px; mobile: 48px |
No |
- |
- |
| avatar-size-700 |
- |
desktop: 48px; mobile: 52px |
No |
- |
- |
| avatar-size-800 |
- |
desktop: 52px; mobile: 56px |
No |
- |
- |
| avatar-size-900 |
- |
desktop: 56px; mobile: 64px |
No |
- |
- |
| avatar-size-1000 |
- |
desktop: 64px; mobile: 72px |
No |
- |
- |
| avatar-size-1100 |
- |
desktop: 72px; mobile: 80px |
No |
- |
- |
| avatar-size-1200 |
- |
desktop: 80px; mobile: 88px |
No |
- |
- |
| avatar-size-1300 |
- |
desktop: 88px; mobile: 96px |
No |
- |
- |
| avatar-size-1400 |
- |
desktop: 96px; mobile: 104px |
No |
- |
- |
| avatar-size-1500 |
- |
desktop: 104px; mobile: 112px |
No |
- |
- |
| alert-banner-minimum-height |
- |
desktop: 56px; mobile: 64px |
No |
- |
- |
| alert-banner-width |
- |
desktop: 832px; mobile: 680px |
No |
- |
- |
| alert-banner-to-top-workflow-icon |
{alert-banner-top-to-workflow-icon} |
desktop: 18px; mobile: 20px |
Yes |
Introduced as an error. Use alert-banner-top-to-workflow-icon instead |
Replaced by alert-banner-top-to-workflow-icon |
| alert-banner-top-to-workflow-icon |
- |
desktop: 18px; mobile: 20px |
No |
- |
- |
| alert-banner-to-top-text |
{alert-banner-top-to-text} |
desktop: 18px; mobile: 21px |
Yes |
Introduced as an error. Use alert-banner-top-to-text instead |
Replaced by alert-banner-top-to-text |
| alert-banner-top-to-text |
- |
desktop: 18px; mobile: 21px |
No |
- |
- |
| alert-banner-to-bottom-text |
{alert-banner-bottom-to-text} |
desktop: 20px; mobile: 22px |
Yes |
Introduced as an error. Use alert-banner-bottom-to-text instead |
Replaced by alert-banner-bottom-to-text |
| alert-banner-bottom-to-text |
- |
desktop: 20px; mobile: 22px |
No |
- |
- |
| rating-indicator-width |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| rating-indicator-to-icon |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| color-area-width |
- |
desktop: 192px; mobile: 240px |
No |
- |
- |
| color-area-minimum-width |
- |
desktop: 64px; mobile: 80px |
No |
- |
- |
| color-area-height |
- |
desktop: 192px; mobile: 240px |
No |
- |
- |
| color-area-minimum-height |
- |
desktop: 64px; mobile: 80px |
No |
- |
- |
| color-area-border-width |
{border-width-100} |
1px |
No |
- |
- |
| color-area-border-rounding |
{corner-radius-medium-size-small} |
7px |
No |
- |
- |
| color-wheel-width |
- |
desktop: 192px; mobile: 240px |
No |
- |
- |
| color-wheel-minimum-width |
- |
desktop: 175px; mobile: 219px |
No |
- |
- |
| color-wheel-color-area-margin |
12px |
12px |
No |
- |
- |
| color-slider-length |
- |
desktop: 192px; mobile: 240px |
No |
- |
- |
| color-slider-minimum-length |
- |
desktop: 80px; mobile: 100px |
No |
- |
- |
| color-slider-border-width |
1px |
1px |
No |
- |
- |
| color-slider-border-rounding |
{corner-radius-medium-size-small} |
7px |
No |
- |
- |
| floating-action-button-drop-shadow-blur |
12px |
12px |
No |
- |
- |
| floating-action-button-drop-shadow-y |
4px |
4px |
No |
- |
- |
| illustrated-message-maximum-width |
{illustrated-message-vertical-maximum-width} |
380px |
Yes |
- |
- |
| illustrated-message-title-size |
{illustrated-message-large-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Use illustrated-message-medium-title-font-size instead |
Replaced by illustrated-message-medium-title-font-size |
| illustrated-message-cjk-title-size |
{illustrated-message-large-cjk-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Use illustrated-message-medium-cjk-title-font-size instead |
Replaced by illustrated-message-medium-cjk-title-font-size |
| illustrated-message-body-size |
{illustrated-message-large-body-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Use illustrated-message-medium-body-font-size instead |
Replaced by illustrated-message-medium-body-font-size |
| search-field-minimum-width-multiplier |
4 |
4 |
No |
- |
- |
| color-loupe-height |
64px |
64px |
No |
- |
- |
| color-loupe-width |
48px |
48px |
No |
- |
- |
| color-loupe-bottom-to-color-handle |
12px |
12px |
No |
- |
- |
| color-loupe-outer-border-width |
{border-width-200} |
2px |
No |
- |
- |
| color-loupe-inner-border-width |
1px |
1px |
No |
- |
- |
| card-minimum-width |
{card-minimum-width-default} |
100px |
Yes |
This token has been deprecated, use card-minimum-width-default instead. |
Replaced by card-minimum-width-default |
| card-minimum-width-default |
100px |
100px |
No |
- |
- |
| card-preview-minimum-height |
130px |
130px |
No |
- |
- |
| card-selection-background-size |
40px |
40px |
No |
- |
- |
| drop-zone-width |
428px |
428px |
No |
- |
- |
| drop-zone-content-maximum-width |
{illustrated-message-maximum-width} |
380px |
Yes |
- |
- |
| drop-zone-border-dash-length |
8px |
8px |
No |
- |
- |
| drop-zone-border-dash-gap |
6px |
6px |
No |
- |
- |
| drop-zone-title-size |
{drop-zone-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Use drop-zone-title-font-size instead |
Replaced by drop-zone-title-font-size |
| drop-zone-cjk-title-size |
{drop-zone-cjk-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Use drop-zone-cjk-title-font-size instead |
Replaced by drop-zone-cjk-title-font-size |
| drop-zone-body-size |
{drop-zone-body-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Use drop-zone-body-font-size instead |
Replaced by drop-zone-body-font-size |
| coach-mark-width |
- |
desktop: 296px; mobile: 216px |
No |
- |
- |
| coach-mark-minimum-width |
- |
desktop: 296px; mobile: 216px |
No |
- |
- |
| coach-mark-maximum-width |
- |
desktop: 380px; mobile: 248px |
No |
- |
- |
| coach-mark-edge-to-content |
- |
desktop: 24px; mobile: 16px |
No |
- |
- |
| coach-mark-pagination-text-to-bottom-edge |
- |
desktop: 33px; mobile: 22px |
No |
- |
- |
| coach-mark-media-height |
- |
desktop: 222px; mobile: 162px |
No |
- |
- |
| coach-mark-media-minimum-height |
- |
desktop: 166px; mobile: 121px |
No |
- |
- |
| coach-mark-title-size |
{coach-mark-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Replace with coach-mark-title-font-size |
Replaced by coach-mark-title-font-size |
| coach-mark-body-size |
{coach-mark-body-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Replace with coach-mark-body-font-size |
Replaced by coach-mark-body-font-size |
| coach-mark-pagination-body-size |
{coach-mark-pagination-body-font-size} |
desktop: [object Object]; mobile: [object Object] |
Yes |
Replace with coach-mark-pagination-body-font-size |
Replaced by coach-mark-pagination-body-font-size |
| accordion-top-to-text-compact-small |
- |
desktop: 3px; mobile: 4px |
No |
- |
- |
| accordion-top-to-text-regular-small |
{accordion-top-to-text-small} |
desktop: 7px; mobile: 10px |
Yes |
- |
- |
| accordion-small-top-to-text-spacious |
- |
desktop: 9px; mobile: 12px |
No |
- |
- |
| accordion-top-to-text-compact-medium |
5px |
5px |
No |
- |
- |
| accordion-top-to-text-regular-medium |
{accordion-top-to-text-medium} |
desktop: 9px; mobile: 10px |
Yes |
- |
- |
| accordion-top-to-text-spacious-medium |
- |
desktop: 13px; mobile: 15px |
No |
- |
- |
| accordion-top-to-text-compact-large |
- |
desktop: 8px; mobile: 14px |
No |
- |
- |
| accordion-top-to-text-regular-large |
{accordion-top-to-text-large} |
desktop: 12px; mobile: 16px |
Yes |
- |
- |
| accordion-top-to-text-spacious-large |
- |
desktop: 16px; mobile: 19px |
No |
- |
- |
| accordion-top-to-text-compact-extra-large |
- |
desktop: 8px; mobile: 11px |
No |
- |
- |
| accordion-top-to-text-regular-extra-large |
{accordion-top-to-text-extra-large} |
desktop: 13px; mobile: 17px |
Yes |
- |
- |
| accordion-top-to-text-spacious-extra-large |
- |
desktop: 17px; mobile: 21px |
No |
- |
- |
| accordion-bottom-to-text-compact-small |
- |
desktop: 2px; mobile: 4px |
No |
- |
- |
| accordion-bottom-to-text-regular-small |
{accordion-bottom-to-text-small} |
desktop: 7px; mobile: 9px |
Yes |
- |
- |
| accordion-bottom-to-text-spacious-small |
- |
desktop: 11px; mobile: 15px |
No |
- |
- |
| accordion-bottom-to-text-compact-medium |
- |
desktop: 5px; mobile: 8px |
No |
- |
- |
| accordion-bottom-to-text-regular-medium |
{accordion-bottom-to-text-medium} |
desktop: 9px; mobile: 13px |
Yes |
- |
- |
| accordion-bottom-to-text-spacious-medium |
- |
desktop: 13px; mobile: 18px |
No |
- |
- |
| accordion-bottom-to-text-compact-large |
- |
desktop: 8px; mobile: 9px |
No |
- |
- |
| accordion-bottom-to-text-regular-large |
{accordion-bottom-to-text-large} |
desktop: 11px; mobile: 14px |
Yes |
- |
- |
| accordion-bottom-to-text-spacious-large |
- |
desktop: 16px; mobile: 19px |
No |
- |
- |
| accordion-bottom-to-text-compact-extra-large |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| accordion-bottom-to-text-regular-extra-large |
{accordion-bottom-to-text-extra-large} |
desktop: 12px; mobile: 15px |
Yes |
- |
- |
| accordion-bottom-to-text-spacious-extra-large |
- |
desktop: 16px; mobile: 21px |
No |
- |
- |
| accordion-minimum-width |
- |
desktop: 200px; mobile: 250px |
No |
- |
- |
| accordion-disclosure-indicator-to-text |
0px |
0px |
Yes |
- |
- |
| accordion-edge-to-disclosure-indicator |
0px |
0px |
Yes |
- |
- |
| accordion-edge-to-text |
0px |
0px |
No |
- |
- |
| accordion-focus-indicator-gap |
2px |
2px |
No |
- |
- |
| accordion-content-area-top-to-content |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| accordion-content-area-bottom-to-content |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| color-handle-size |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| color-handle-size-key-focus |
- |
desktop: 32px; mobile: 40px |
No |
- |
- |
| color-handle-border-width |
{border-width-200} |
2px |
No |
- |
- |
| color-handle-inner-border-width |
1px |
1px |
No |
- |
- |
| color-handle-outer-border-width |
1px |
1px |
No |
- |
- |
| color-handle-drop-shadow-x |
0 |
0 |
No |
- |
- |
| color-handle-drop-shadow-y |
0 |
0 |
No |
- |
- |
| color-handle-drop-shadow-blur |
0 |
0 |
No |
- |
- |
| table-column-header-row-top-to-text-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| table-column-header-row-top-to-text-medium |
- |
desktop: 6px; mobile: 9px |
No |
- |
- |
| table-column-header-row-top-to-text-large |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| table-column-header-row-top-to-text-extra-large |
- |
desktop: 13px; mobile: 16px |
No |
- |
- |
| table-column-header-row-bottom-to-text-small |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| table-column-header-row-bottom-to-text-medium |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| table-column-header-row-bottom-to-text-large |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| table-column-header-row-bottom-to-text-extra-large |
- |
desktop: 13px; mobile: 17px |
No |
- |
- |
| table-row-height-small-compact |
{component-height-75} |
desktop: 24px; mobile: 30px |
No |
- |
- |
| table-row-height-medium-compact |
{component-height-100} |
desktop: 32px; mobile: 40px |
No |
- |
- |
| table-row-height-large-compact |
{component-height-200} |
desktop: 40px; mobile: 50px |
No |
- |
- |
| table-row-height-extra-large-compact |
{component-height-300} |
desktop: 48px; mobile: 60px |
No |
- |
- |
| table-row-height-small-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-height-small instead. |
Replaced by table-row-height-small |
| table-row-height-small |
- |
desktop: 32px; mobile: 40px |
No |
- |
- |
| table-row-height-medium-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-height-medium instead. |
Replaced by table-row-height-medium |
| table-row-height-medium |
- |
desktop: 40px; mobile: 50px |
No |
- |
- |
| table-row-height-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-height-large instead. |
Replaced by table-row-height-large |
| table-row-height-large |
- |
desktop: 48px; mobile: 60px |
No |
- |
- |
| table-row-height-extra-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-height-extra-large instead. |
Replaced by table-row-height-extra-large |
| table-row-height-extra-large |
- |
desktop: 56px; mobile: 70px |
No |
- |
- |
| table-row-height-small-spacious |
- |
desktop: 40px; mobile: 50px |
No |
- |
- |
| table-row-height-medium-spacious |
- |
desktop: 48px; mobile: 60px |
No |
- |
- |
| table-row-height-large-spacious |
- |
desktop: 56px; mobile: 70px |
No |
- |
- |
| table-row-height-extra-large-spacious |
- |
desktop: 64px; mobile: 80px |
No |
- |
- |
| table-row-top-to-text-small-compact |
{component-top-to-text-75} |
desktop: 4px; mobile: 5px |
No |
- |
- |
| table-row-top-to-text-medium-compact |
{component-top-to-text-100} |
desktop: 6px; mobile: 8px |
No |
- |
- |
| table-row-top-to-text-large-compact |
{component-top-to-text-200} |
desktop: 9px; mobile: 12px |
No |
- |
- |
| table-row-top-to-text-extra-large-compact |
{component-top-to-text-300} |
desktop: 12px; mobile: 15px |
No |
- |
- |
| table-row-bottom-to-text-small-compact |
{component-bottom-to-text-75} |
desktop: 5px; mobile: 6px |
No |
- |
- |
| table-row-bottom-to-text-medium-compact |
{component-bottom-to-text-100} |
desktop: 9px; mobile: 11px |
No |
- |
- |
| table-row-bottom-to-text-large-compact |
{component-bottom-to-text-200} |
desktop: 11px; mobile: 14px |
No |
- |
- |
| table-row-bottom-to-text-extra-large-compact |
{component-bottom-to-text-300} |
desktop: 14px; mobile: 18px |
No |
- |
- |
| table-row-top-to-text-small-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-top-to-text-small instead. |
Replaced by table-row-top-to-text-small |
| table-row-top-to-text-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| table-row-top-to-text-medium-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-top-to-text-medium instead. |
Replaced by table-row-top-to-text-medium |
| table-row-top-to-text-medium |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| table-row-top-to-text-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-top-to-text-large instead. |
Replaced by table-row-top-to-text-large |
| table-row-top-to-text-large |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| table-row-top-to-text-extra-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-top-to-text-extra-large instead. |
Replaced by table-row-top-to-text-extra-large |
| table-row-top-to-text-extra-large |
- |
desktop: 17px; mobile: 21px |
No |
- |
- |
| table-row-bottom-to-text-small-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-bottom-to-text-small instead. |
Replaced by table-row-bottom-to-text-small |
| table-row-bottom-to-text-small |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| table-row-bottom-to-text-medium-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-bottom-to-text-medium instead. |
Replaced by table-row-bottom-to-text-medium |
| table-row-bottom-to-text-medium |
- |
desktop: 13px; mobile: 15px |
No |
- |
- |
| table-row-bottom-to-text-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-bottom-to-text-large instead. |
Replaced by table-row-bottom-to-text-large |
| table-row-bottom-to-text-large |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| table-row-bottom-to-text-extra-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-bottom-to-text-extra-large instead. |
Replaced by table-row-bottom-to-text-extra-large |
| table-row-bottom-to-text-extra-large |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| table-row-top-to-text-small-spacious |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| table-row-top-to-text-medium-spacious |
- |
desktop: 15px; mobile: 16px |
No |
- |
- |
| table-row-top-to-text-large-spacious |
- |
desktop: 18px; mobile: 23px |
No |
- |
- |
| table-row-top-to-text-extra-large-spacious |
- |
desktop: 21px; mobile: 26px |
No |
- |
- |
| table-row-bottom-to-text-small-spacious |
- |
desktop: 13px; mobile: 16px |
No |
- |
- |
| table-row-bottom-to-text-medium-spacious |
- |
desktop: 16px; mobile: 18px |
No |
- |
- |
| table-row-bottom-to-text-large-spacious |
- |
desktop: 18px; mobile: 23px |
No |
- |
- |
| table-row-bottom-to-text-extra-large-spacious |
- |
desktop: 21px; mobile: 27px |
No |
- |
- |
| table-edge-to-content |
16px |
16px |
No |
- |
- |
| table-border-divider-width |
1px |
1px |
No |
- |
- |
| table-checkbox-to-text |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| table-header-row-checkbox-to-top-small |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| table-header-row-checkbox-to-top-medium |
- |
desktop: 8px; mobile: 11px |
No |
- |
- |
| table-header-row-checkbox-to-top-large |
- |
desktop: 12px; mobile: 17px |
No |
- |
- |
| table-header-row-checkbox-to-top-extra-large |
- |
desktop: 15px; mobile: 21px |
No |
- |
- |
| table-row-checkbox-to-top-small-compact |
- |
desktop: 6px; mobile: 9px |
No |
- |
- |
| table-row-checkbox-to-top-small-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-checkbox-to-top-small instead. |
Replaced by table-row-checkbox-to-top-small |
| table-row-checkbox-to-top-small |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| table-row-checkbox-to-top-small-spacious |
- |
desktop: 14px; mobile: 19px |
No |
- |
- |
| table-row-checkbox-to-top-medium-compact |
- |
desktop: 8px; mobile: 11px |
No |
- |
- |
| table-row-checkbox-to-top-medium-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-checkbox-to-top-medium instead. |
Replaced by table-row-checkbox-to-top-medium |
| table-row-checkbox-to-top-medium |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| table-row-checkbox-to-top-medium-spacious |
- |
desktop: 16px; mobile: 21px |
No |
- |
- |
| table-row-checkbox-to-top-large-compact |
- |
desktop: 12px; mobile: 17px |
No |
- |
- |
| table-row-checkbox-to-top-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-checkbox-to-top-large instead. |
Replaced by table-row-checkbox-to-top-large |
| table-row-checkbox-to-top-large |
- |
desktop: 16px; mobile: 22px |
No |
- |
- |
| table-row-checkbox-to-top-large-spacious |
- |
desktop: 20px; mobile: 27px |
No |
- |
- |
| table-row-checkbox-to-top-extra-large-compact |
- |
desktop: 15px; mobile: 21px |
No |
- |
- |
| table-row-checkbox-to-top-extra-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-row-checkbox-to-top-extra-large instead. |
Replaced by table-row-checkbox-to-top-extra-large |
| table-row-checkbox-to-top-extra-large |
- |
desktop: 19px; mobile: 26px |
No |
- |
- |
| table-row-checkbox-to-top-extra-large-spacious |
- |
desktop: 23px; mobile: 31px |
No |
- |
- |
| table-section-header-row-height-small |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| table-section-header-row-height-medium |
- |
desktop: 32px; mobile: 40px |
No |
- |
- |
| table-section-header-row-height-large |
- |
desktop: 40px; mobile: 50px |
No |
- |
- |
| table-section-header-row-height-extra-large |
- |
desktop: 48px; mobile: 60px |
No |
- |
- |
| table-thumbnail-to-top-minimum-small-compact |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| table-thumbnail-to-top-minimum-medium-compact |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| table-thumbnail-to-top-minimum-large-compact |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| table-thumbnail-to-top-minimum-extra-large-compact |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| table-thumbnail-to-top-minimum-small-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-thumbnail-to-top-minimum-small instead. |
Replaced by table-thumbnail-to-top-minimum-small |
| table-thumbnail-to-top-minimum-small |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| table-thumbnail-to-top-minimum-medium-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-thumbnail-to-top-minimum-medium instead. |
Replaced by table-thumbnail-to-top-minimum-medium |
| table-thumbnail-to-top-minimum-medium |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| table-thumbnail-to-top-minimum-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-thumbnail-to-top-minimum-large instead. |
Replaced by table-thumbnail-to-top-minimum-large |
| table-thumbnail-to-top-minimum-large |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| table-thumbnail-to-top-minimum-extra-large-regular |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use table-thumbnail-to-top-minimum-extra-large instead. |
Replaced by table-thumbnail-to-top-minimum-extra-large |
| table-thumbnail-to-top-minimum-extra-large |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| table-thumbnail-to-top-minimum-small-spacious |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| table-thumbnail-to-top-minimum-medium-spacious |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| table-thumbnail-to-top-minimum-large-spacious |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| table-thumbnail-to-top-minimum-extra-large-spacious |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| tab-item-height-small |
{component-height-200} |
desktop: 40px; mobile: 50px |
No |
- |
- |
| tab-item-height-medium |
{component-height-300} |
desktop: 48px; mobile: 60px |
No |
- |
- |
| tab-item-height-large |
{component-height-400} |
desktop: 56px; mobile: 70px |
No |
- |
- |
| tab-item-height-extra-large |
{component-height-500} |
desktop: 64px; mobile: 80px |
No |
- |
- |
| tab-item-compact-height-small |
{component-height-75} |
desktop: 24px; mobile: 30px |
No |
- |
- |
| tab-item-compact-height-medium |
{component-height-100} |
desktop: 32px; mobile: 40px |
No |
- |
- |
| tab-item-compact-height-large |
{component-height-200} |
desktop: 40px; mobile: 50px |
No |
- |
- |
| tab-item-compact-height-extra-large |
{component-height-300} |
desktop: 48px; mobile: 60px |
No |
- |
- |
| tab-item-to-tab-item-horizontal-small |
- |
desktop: 21px; mobile: 27px |
No |
- |
- |
| tab-item-to-tab-item-horizontal-medium |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| tab-item-to-tab-item-horizontal-large |
- |
desktop: 27px; mobile: 33px |
No |
- |
- |
| tab-item-to-tab-item-horizontal-extra-large |
- |
desktop: 30px; mobile: 36px |
No |
- |
- |
| tab-item-to-tab-item-vertical-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| tab-item-to-tab-item-vertical-medium |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| tab-item-to-tab-item-vertical-large |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| tab-item-to-tab-item-vertical-extra-large |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| tab-item-start-to-edge-quiet |
0px |
0px |
No |
- |
- |
| tab-item-start-to-edge-small |
- |
desktop: 12px; mobile: 13px |
No |
- |
- |
| tab-item-start-to-edge-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| tab-item-start-to-edge-large |
- |
desktop: 13px; mobile: 17px |
No |
- |
- |
| tab-item-start-to-edge-extra-large |
- |
desktop: 13px; mobile: 19px |
No |
- |
- |
| tab-item-top-to-text-small |
- |
desktop: 11px; mobile: 14px |
No |
- |
- |
| tab-item-bottom-to-text-small |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| tab-item-top-to-text-medium |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| tab-item-bottom-to-text-medium |
- |
desktop: 14px; mobile: 19px |
No |
- |
- |
| tab-item-top-to-text-large |
- |
desktop: 16px; mobile: 22px |
No |
- |
- |
| tab-item-bottom-to-text-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| tab-item-top-to-text-extra-large |
- |
desktop: 19px; mobile: 25px |
No |
- |
- |
| tab-item-bottom-to-text-extra-large |
- |
desktop: 20px; mobile: 25px |
No |
- |
- |
| tab-item-top-to-text-compact-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| tab-item-bottom-to-text-compact-small |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| tab-item-top-to-text-compact-medium |
- |
desktop: 6px; mobile: 9px |
No |
- |
- |
| tab-item-bottom-to-text-compact-medium |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| tab-item-top-to-text-compact-large |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| tab-item-bottom-to-text-compact-large |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| tab-item-top-to-text-compact-extra-large |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| tab-item-bottom-to-text-compact-extra-large |
- |
desktop: 13px; mobile: 17px |
No |
- |
- |
| tab-item-top-to-workflow-icon-small |
- |
desktop: 13px; mobile: 15px |
No |
- |
- |
| tab-item-top-to-workflow-icon-medium |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| tab-item-top-to-workflow-icon-large |
- |
desktop: 17px; mobile: 23px |
No |
- |
- |
| tab-item-top-to-workflow-icon-extra-large |
- |
desktop: 19px; mobile: 26px |
No |
- |
- |
| tab-item-top-to-workflow-icon-compact-small |
- |
desktop: 3px; mobile: 5px |
No |
- |
- |
| tab-item-top-to-workflow-icon-compact-medium |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| tab-item-top-to-workflow-icon-compact-large |
- |
desktop: 9px; mobile: 13px |
No |
- |
- |
| tab-item-top-to-workflow-icon-compact-extra-large |
- |
desktop: 11px; mobile: 16px |
No |
- |
- |
| tab-item-focus-indicator-gap-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| tab-item-focus-indicator-gap-medium |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| tab-item-focus-indicator-gap-large |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| tab-item-focus-indicator-gap-extra-large |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| side-navigation-width |
- |
desktop: 192px; mobile: 240px |
No |
- |
- |
| side-navigation-minimum-width |
- |
desktop: 144px; mobile: 180px |
No |
- |
- |
| side-navigation-maximum-width |
- |
desktop: 240px; mobile: 300px |
No |
- |
- |
| side-navigation-second-level-edge-to-text |
- |
desktop: 38px; mobile: 44px |
No |
- |
- |
| side-navigation-third-level-edge-to-text |
- |
desktop: 64px; mobile: 70px |
No |
- |
- |
| side-navigation-with-icon-second-level-edge-to-text |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| side-navigation-with-icon-third-level-edge-to-text |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| side-navigation-item-to-item |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| side-navigation-item-to-header |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| side-navigation-bottom-to-text |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| tray-top-to-content-area |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| in-field-button-width-stacked-small |
20px |
20px |
No |
- |
- |
| in-field-button-width-stacked-medium |
28px |
28px |
No |
- |
- |
| in-field-button-width-stacked-large |
36px |
36px |
No |
- |
- |
| in-field-button-width-stacked-extra-large |
44px |
44px |
No |
- |
- |
| in-field-button-fill-stacked-inner-border-rounding |
0px |
0px |
No |
- |
- |
| in-field-button-edge-to-fill |
0px |
0px |
Yes |
- |
- |
| in-field-button-stacked-inner-edge-to-fill |
0px |
0px |
No |
- |
- |
| in-field-button-edge-to-disclosure-icon-stacked-small |
7px |
7px |
No |
- |
- |
| in-field-button-edge-to-disclosure-icon-stacked-medium |
9px |
9px |
No |
- |
- |
| in-field-button-edge-to-disclosure-icon-stacked-large |
13px |
13px |
No |
- |
- |
| in-field-button-edge-to-disclosure-icon-stacked-extra-large |
16px |
16px |
No |
- |
- |
| in-field-button-outer-edge-to-disclosure-icon-stacked-small |
3px |
3px |
No |
- |
- |
| in-field-button-outer-edge-to-disclosure-icon-stacked-medium |
3px |
3px |
No |
- |
- |
| in-field-button-outer-edge-to-disclosure-icon-stacked-large |
4px |
4px |
No |
- |
- |
| in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large |
5px |
5px |
No |
- |
- |
| in-field-button-inner-edge-to-disclosure-icon-stacked-small |
{in-field-button-outer-edge-to-disclosure-icon-stacked-small} |
3px |
No |
- |
- |
| in-field-button-inner-edge-to-disclosure-icon-stacked-medium |
{in-field-button-outer-edge-to-disclosure-icon-stacked-medium} |
3px |
No |
- |
- |
| in-field-button-inner-edge-to-disclosure-icon-stacked-large |
{in-field-button-outer-edge-to-disclosure-icon-stacked-large} |
4px |
No |
- |
- |
| in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large |
{in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large} |
5px |
No |
- |
- |
| arrow-icon-size-75 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| arrow-icon-size-100 |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| arrow-icon-size-200 |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| arrow-icon-size-300 |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| arrow-icon-size-400 |
- |
desktop: 16px; mobile: 18px |
No |
- |
- |
| arrow-icon-size-500 |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| arrow-icon-size-600 |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| asterisk-icon-size-75 |
8px |
8px |
No |
- |
- |
| asterisk-icon-size-100 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| asterisk-icon-size-200 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| asterisk-icon-size-300 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| checkmark-icon-size-50 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| checkmark-icon-size-75 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| checkmark-icon-size-100 |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| checkmark-icon-size-200 |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| checkmark-icon-size-300 |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| checkmark-icon-size-400 |
- |
desktop: 16px; mobile: 18px |
No |
- |
- |
| checkmark-icon-size-500 |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| checkmark-icon-size-600 |
- |
desktop: 18px; mobile: 24px |
No |
- |
- |
| chevron-icon-size-50 |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| chevron-icon-size-75 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| chevron-icon-size-100 |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| chevron-icon-size-200 |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| chevron-icon-size-300 |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| chevron-icon-size-400 |
- |
desktop: 16px; mobile: 18px |
No |
- |
- |
| chevron-icon-size-500 |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| chevron-icon-size-600 |
- |
desktop: 18px; mobile: 24px |
No |
- |
- |
| cross-icon-size-75 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| cross-icon-size-100 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| cross-icon-size-200 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| cross-icon-size-300 |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| cross-icon-size-400 |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| cross-icon-size-500 |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| cross-icon-size-600 |
- |
desktop: 16px; mobile: 18px |
No |
- |
- |
| dash-icon-size-50 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| dash-icon-size-75 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| dash-icon-size-100 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| dash-icon-size-200 |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| dash-icon-size-300 |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| dash-icon-size-400 |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| dash-icon-size-500 |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| dash-icon-size-600 |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| side-navigation-header-to-item |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| divider-vertical-minimum-height |
200px |
200px |
No |
- |
- |
| divider-horizontal-minimum-width |
200px |
200px |
No |
- |
- |
| tooltip-tip-corner-radius |
1px |
1px |
No |
- |
- |
| switch-handle-size-small |
- |
desktop: 6px; mobile: 10px |
No |
- |
- |
| switch-handle-selected-size-small |
- |
desktop: 8px; mobile: 12px |
No |
- |
- |
| switch-handle-selected-size-medium |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| switch-handle-selected-size-large |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| switch-handle-selected-size-extra-large |
- |
desktop: 14px; mobile: 20px |
No |
- |
- |
| switch-handle-size-medium |
- |
desktop: 8px; mobile: 12px |
No |
- |
- |
| switch-handle-size-large |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| switch-handle-size-extra-large |
- |
desktop: 12px; mobile: 18px |
No |
- |
- |
| tag-minimum-width-multiplier |
1 |
1 |
Yes |
- |
- |
| tag-maximum-width-multiplier |
7 |
7 |
No |
- |
- |
| tag-label-to-clear-icon-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| tag-label-to-clear-icon-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| tag-label-to-clear-icon-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| tag-edge-to-clear-icon-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| tag-edge-to-clear-icon-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| tag-edge-to-clear-icon-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| title-cjk-emphasized-font-style |
{default-font-style} |
normal |
No |
- |
- |
| title-cjk-emphasized-font-weight |
{extra-bold-font-weight} |
extra-bold |
No |
- |
- |
| title-cjk-font-family |
{cjk-font-family} |
Adobe Clean Han |
No |
- |
- |
| title-cjk-font-style |
{default-font-style} |
normal |
No |
- |
- |
| title-cjk-font-weight |
{bold-font-weight} |
bold |
No |
- |
- |
| title-cjk-line-height |
{cjk-line-height-100} |
1.5 |
No |
- |
- |
| title-cjk-size-l |
{font-size-200} |
desktop: 16px; mobile: 19px |
No |
- |
- |
| title-cjk-size-m |
{font-size-100} |
desktop: 14px; mobile: 17px |
No |
- |
- |
| title-cjk-size-s |
{font-size-75} |
desktop: 12px; mobile: 15px |
No |
- |
- |
| title-cjk-size-xl |
{font-size-300} |
desktop: 18px; mobile: 22px |
No |
- |
- |
| title-cjk-size-xs |
{font-size-50} |
desktop: 11px; mobile: 13px |
No |
- |
- |
| title-cjk-size-xxl |
{font-size-400} |
desktop: 20px; mobile: 24px |
No |
- |
- |
| title-cjk-size-xxxl |
{font-size-500} |
desktop: 22px; mobile: 27px |
No |
- |
- |
| title-cjk-strong-emphasized-font-style |
{default-font-style} |
normal |
No |
- |
- |
| title-cjk-strong-emphasized-font-weight |
{extra-bold-font-weight} |
extra-bold |
No |
- |
- |
| title-cjk-strong-font-style |
{default-font-style} |
normal |
No |
- |
- |
| title-cjk-strong-font-weight |
{extra-bold-font-weight} |
extra-bold |
No |
- |
- |
| title-line-height |
{line-height-100} |
1.3 |
No |
- |
- |
| title-margin-bottom-multiplier |
0.25 |
0.25 |
No |
- |
- |
| title-margin-top-multiplier |
0.88888889 |
0.88888889 |
No |
- |
- |
| title-sans-serif-emphasized-font-style |
{italic-font-style} |
italic |
No |
- |
- |
| title-sans-serif-emphasized-font-weight |
{bold-font-weight} |
bold |
No |
- |
- |
| title-sans-serif-font-family |
{sans-serif-font-family} |
Adobe Clean Spectrum VF |
No |
- |
- |
| title-sans-serif-font-style |
{default-font-style} |
normal |
No |
- |
- |
| title-sans-serif-font-weight |
{bold-font-weight} |
bold |
No |
- |
- |
| title-sans-serif-strong-emphasized-font-style |
{italic-font-style} |
italic |
No |
- |
- |
| title-sans-serif-strong-emphasized-font-weight |
{extra-bold-font-weight} |
extra-bold |
No |
- |
- |
| title-sans-serif-strong-font-style |
{default-font-style} |
normal |
No |
- |
- |
| title-sans-serif-strong-font-weight |
{extra-bold-font-weight} |
extra-bold |
No |
- |
- |
| title-serif-emphasized-font-style |
{italic-font-style} |
italic |
No |
- |
- |
| title-serif-emphasized-font-weight |
{bold-font-weight} |
bold |
No |
- |
- |
| title-serif-font-family |
{serif-font-family} |
Adobe Clean Serif |
No |
- |
- |
| title-serif-font-style |
{default-font-style} |
normal |
No |
- |
- |
| title-serif-font-weight |
{bold-font-weight} |
bold |
No |
- |
- |
| title-serif-strong-emphasized-font-style |
{italic-font-style} |
italic |
No |
- |
- |
| title-serif-strong-emphasized-font-weight |
{black-font-weight} |
black |
No |
- |
- |
| title-serif-strong-font-style |
{default-font-style} |
normal |
No |
- |
- |
| title-serif-strong-font-weight |
{black-font-weight} |
black |
No |
- |
- |
| title-size-l |
{font-size-300} |
desktop: 18px; mobile: 22px |
No |
- |
- |
| title-size-m |
{font-size-200} |
desktop: 16px; mobile: 19px |
No |
- |
- |
| title-size-s |
{font-size-100} |
desktop: 14px; mobile: 17px |
No |
- |
- |
| title-size-xl |
{font-size-400} |
desktop: 20px; mobile: 24px |
No |
- |
- |
| title-size-xs |
{font-size-75} |
desktop: 12px; mobile: 15px |
No |
- |
- |
| title-size-xxl |
{font-size-500} |
desktop: 22px; mobile: 27px |
No |
- |
- |
| title-size-xxxl |
{font-size-600} |
desktop: 25px; mobile: 31px |
No |
- |
- |
| opacity-checkerboard-square-size-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| alert-banner-top-to-alert-icon |
- |
desktop: 37px; mobile: 29px |
No |
- |
- |
| accordion-top-to-text-spacious-small |
- |
desktop: 11px; mobile: 15px |
No |
- |
- |
| field-default-width-small |
- |
desktop: 192px; mobile: 240px |
No |
- |
- |
| field-default-width-medium |
- |
desktop: 208px; mobile: 256px |
No |
- |
- |
| field-default-width-large |
- |
desktop: 224px; mobile: 272px |
No |
- |
- |
| field-default-width-extra-large |
- |
desktop: 240px; mobile: 288px |
No |
- |
- |
| tag-minimum-width-small |
- |
desktop: 21px; mobile: 25px |
No |
- |
- |
| tag-minimum-width-medium |
- |
desktop: 27px; mobile: 34px |
No |
- |
- |
| tag-minimum-width-large |
- |
desktop: 33px; mobile: 42px |
No |
- |
- |
| combo-box-visual-to-field-button |
0px |
0px |
No |
- |
- |
| in-field-button-edge-to-fill-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| in-field-button-edge-to-fill-medium |
6px |
6px |
No |
- |
- |
| in-field-button-edge-to-fill-large |
8px |
8px |
No |
- |
- |
| in-field-button-edge-to-fill-extra-large |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| in-field-progress-circle-edge-to-fill |
- |
desktop: 1px; mobile: 2px |
No |
- |
- |
| in-field-progress-circle-size-75 |
- |
desktop: 16px; mobile: 18px |
No |
- |
- |
| in-field-progress-circle-size-100 |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| in-field-progress-circle-size-200 |
- |
desktop: 22px; mobile: 28px |
No |
- |
- |
| in-field-progress-circle-size-300 |
- |
desktop: 26px; mobile: 30px |
No |
- |
- |
| alert-dialog-description-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| alert-dialog-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| coach-mark-body-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| coach-mark-pagination-body-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| coach-mark-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| standard-dialog-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| standard-dialog-body-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| standard-dialog-maximum-width-small |
400px |
400px |
No |
- |
- |
| standard-dialog-minimum-width |
288px |
288px |
No |
- |
- |
| standard-dialog-maximum-width-medium |
480px |
480px |
No |
- |
- |
| standard-dialog-maximum-width-large |
640px |
640px |
No |
- |
- |
| status-light-text-to-visual-75 |
{text-to-visual-75} |
desktop: 5px; mobile: 7px |
No |
- |
- |
| status-light-text-to-visual-100 |
{text-to-visual-100} |
desktop: 6px; mobile: 8px |
No |
- |
- |
| status-light-text-to-visual-200 |
{text-to-visual-200} |
desktop: 7px; mobile: 9px |
No |
- |
- |
| status-light-text-to-visual-300 |
{text-to-visual-300} |
desktop: 8px; mobile: 10px |
No |
- |
- |
| link-out-icon-size-75 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| link-out-icon-size-100 |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| link-out-icon-size-200 |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| link-out-icon-size-300 |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| link-out-icon-size-400 |
- |
desktop: 16px; mobile: 18px |
No |
- |
- |
| menu-item-label-to-description-small |
1px |
1px |
No |
- |
- |
| menu-item-label-to-description-medium |
1px |
1px |
No |
- |
- |
| menu-item-label-to-description-large |
2px |
2px |
No |
- |
- |
| menu-item-label-to-description-extra-large |
2px |
2px |
No |
- |
- |
| menu-section-header-to-description-small |
1px |
1px |
No |
- |
- |
| menu-section-header-to-description-medium |
1px |
1px |
No |
- |
- |
| menu-section-header-to-description-large |
2px |
2px |
No |
- |
- |
| menu-section-header-to-description-extra-large |
2px |
2px |
No |
- |
- |
| menu-item-top-to-thumbnail-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| menu-item-top-to-thumbnail-medium |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| menu-item-top-to-thumbnail-large |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| menu-item-top-to-thumbnail-extra-large |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| menu-item-background-opacity |
0 |
0 |
No |
- |
- |
| illustrated-message-small-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| illustrated-message-small-cjk-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| illustrated-message-medium-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| illustrated-message-medium-cjk-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| illustrated-message-large-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| illustrated-message-large-cjk-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| illustrated-message-small-body-font-size |
{body-size-xs} |
desktop: 12px; mobile: 15px |
No |
- |
- |
| illustrated-message-medium-body-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| illustrated-message-large-body-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| drop-zone-title-font-size |
{illustrated-message-medium-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| drop-zone-cjk-title-font-size |
{illustrated-message-medium-cjk-title-font-size} |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| drop-zone-body-font-size |
{illustrated-message-medium-body-font-size} |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| breadcrumbs-separator-to-bottom-text-multiline |
- |
desktop: 11px; mobile: 15px |
No |
- |
- |
| breadcrumbs-start-edge-to-text-large |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| breadcrumbs-start-edge-to-text-medium |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| breadcrumbs-start-edge-to-text-multiline |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| breadcrumbs-top-to-separator-large |
- |
desktop: 15px; mobile: 20px |
No |
- |
- |
| breadcrumbs-top-to-separator-medium |
- |
desktop: 11px; mobile: 15px |
No |
- |
- |
| breadcrumbs-top-to-separator-multiline |
- |
desktop: 7px; mobile: 10px |
No |
- |
- |
| breadcrumbs-truncated-menu-to-separator |
0px |
0px |
No |
- |
- |
| breadcrumbs-text-to-separator-large |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| breadcrumbs-text-to-separator-medium |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| breadcrumbs-text-to-separator-multiline |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| contextual-help-body-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| contextual-help-title-font-size |
- |
desktop: [object Object]; mobile: [object Object] |
No |
- |
- |
| coach-indicator-collapsed-ring-rounding-increment |
6px |
6px |
No |
- |
- |
| coach-indicator-expanded-ring-rounding-increment |
14px |
14px |
No |
- |
- |
| coach-indicator-collapsed-ring-thickness |
4px |
4px |
No |
- |
- |
| coach-indicator-expanded-ring-thickness |
8px |
8px |
No |
- |
- |
| coach-indicator-collapsed-gap |
2px |
2px |
No |
- |
- |
| coach-indicator-expanded-gap |
6px |
6px |
No |
- |
- |
| coach-indicator-opacity |
0.2 |
0.2 |
No |
- |
- |
| accordion-content-area-edge-to-content-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| accordion-content-area-edge-to-content-medium |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| accordion-content-area-edge-to-content-large |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| accordion-content-area-edge-to-content-extra-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| accordion-disclosure-indicator-to-text-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| accordion-disclosure-indicator-to-text-medium |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| accordion-disclosure-indicator-to-text-large |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| accordion-disclosure-indicator-to-text-extra-large |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| accordion-item-to-divider |
0px |
0px |
No |
- |
- |
| meter-thickness-medium |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| meter-thickness-extra-large |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| thumbnail-opacity-checkerboard-square-size |
4px |
4px |
No |
- |
- |
| thumbnail-corner-radius |
{corner-radius-75} |
3px |
No |
- |
- |
| action-bar-top-to-content-area |
{spacing-200} |
12px |
No |
- |
- |
| action-bar-bottom-to-content-area |
{spacing-200} |
12px |
No |
- |
- |
| action-bar-edge-to-content-area |
{spacing-100} |
8px |
No |
- |
- |
| action-bar-close-button-to-counter |
{text-to-control-50} |
desktop: 4px; mobile: 5px |
No |
- |
- |
| action-bar-counter-font-size |
{font-size-100} |
desktop: 14px; mobile: 17px |
No |
- |
- |
| swatch-group-spacing-spacious |
6px |
6px |
No |
- |
- |
| swatch-group-border-opacity |
0.2 |
0.2 |
No |
- |
- |
| avatar-border-width |
{border-width-100} |
1px |
No |
- |
- |
| avatar-group-size-50 |
{avatar-size-50} |
desktop: 16px; mobile: 20px |
No |
- |
- |
| avatar-group-size-75 |
{avatar-size-75} |
desktop: 20px; mobile: 24px |
No |
- |
- |
| avatar-group-size-100 |
{avatar-size-100} |
desktop: 24px; mobile: 28px |
No |
- |
- |
| avatar-group-size-200 |
{avatar-size-200} |
desktop: 28px; mobile: 32px |
No |
- |
- |
| avatar-group-size-300 |
{avatar-size-300} |
desktop: 32px; mobile: 36px |
No |
- |
- |
| avatar-group-size-400 |
{avatar-size-400} |
desktop: 36px; mobile: 40px |
No |
- |
- |
| avatar-group-size-500 |
{avatar-size-500} |
desktop: 40px; mobile: 44px |
No |
- |
- |
| avatar-to-avatar-50 |
- |
desktop: -4px; mobile: -5px |
No |
- |
- |
| avatar-to-avatar-75 |
- |
desktop: -5px; mobile: -6px |
No |
- |
- |
| avatar-to-avatar-100 |
- |
desktop: -6px; mobile: -7px |
No |
- |
- |
| avatar-to-avatar-200 |
- |
desktop: -7px; mobile: -8px |
No |
- |
- |
| avatar-to-avatar-300 |
- |
desktop: -8px; mobile: -9px |
No |
- |
- |
| avatar-to-avatar-400 |
- |
desktop: -9px; mobile: -10px |
No |
- |
- |
| avatar-to-avatar-500 |
- |
desktop: -10px; mobile: -11px |
No |
- |
- |
| code-cjk-size-xl |
{code-size-xl} |
desktop: 20px; mobile: 24px |
No |
- |
- |
| code-cjk-size-l |
{code-size-l} |
desktop: 18px; mobile: 22px |
No |
- |
- |
| code-cjk-size-m |
{code-size-m} |
desktop: 16px; mobile: 19px |
No |
- |
- |
| code-cjk-size-s |
{code-size-s} |
desktop: 14px; mobile: 17px |
No |
- |
- |
| code-cjk-size-xs |
{code-size-xs} |
desktop: 12px; mobile: 15px |
No |
- |
- |
| standard-panel-width |
260px |
260px |
No |
- |
- |
| standard-panel-minimum-width |
200px |
200px |
No |
- |
- |
| standard-panel-maximum-width |
400px |
400px |
No |
- |
- |
| standard-panel-top-to-close-button-compact |
5px |
5px |
No |
- |
- |
| standard-panel-top-to-close-button-regular |
9px |
9px |
No |
- |
- |
| standard-panel-top-to-close-button-spacious |
17px |
17px |
No |
- |
- |
| standard-panel-edge-to-close-button-compact |
3px |
3px |
No |
- |
- |
| standard-panel-edge-to-close-button-regular |
7px |
7px |
No |
- |
- |
| standard-panel-edge-to-close-button-spacious |
15px |
15px |
No |
- |
- |
| standard-panel-title-font-size |
{title-size-s} |
desktop: 14px; mobile: 17px |
No |
- |
- |
| illustrated-message-horizontal-maximum-width |
535px |
535px |
No |
- |
- |
| illustrated-message-vertical-maximum-width |
380px |
380px |
No |
- |
- |
| bar-panel-width |
56px |
56px |
No |
- |
- |
| bar-panel-minimum-width |
40px |
40px |
No |
- |
- |
| bar-panel-maximum-width |
72px |
72px |
No |
- |
- |
| bar-panel-spacing-extra-spacious |
20px |
20px |
No |
- |
- |
| rating-top-to-content-area-small |
{spacing-75} |
4px |
No |
- |
- |
| rating-bottom-to-content-area-small |
{spacing-75} |
4px |
No |
- |
- |
| rating-edge-to-content-area-small |
{spacing-75} |
4px |
No |
- |
- |
| rating-top-to-content-area-medium |
6px |
6px |
No |
- |
- |
| rating-bottom-to-content-area-medium |
6px |
6px |
No |
- |
- |
| rating-edge-to-content-area-medium |
6px |
6px |
No |
- |
- |
| rating-width-small |
104px |
104px |
No |
- |
- |
| rating-height-small |
{component-height-75} |
desktop: 24px; mobile: 30px |
No |
- |
- |
| rating-width-medium |
128px |
128px |
No |
- |
- |
| rating-height-medium |
{component-height-100} |
desktop: 32px; mobile: 40px |
No |
- |
- |
| select-box-horizontal-minimum-height |
- |
desktop: 80px; mobile: 100px |
No |
- |
- |
| select-box-horizontal-width |
- |
desktop: 368px; mobile: 460px |
No |
- |
- |
| select-box-vertical-height |
- |
desktop: 170px; mobile: 212px |
No |
- |
- |
| select-box-edge-to-checkbox |
8px |
8px |
No |
- |
- |
| select-box-horizontal-end-to-content |
- |
desktop: 32px; mobile: 40px |
No |
- |
- |
| select-box-horizontal-illustration-to-label |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| select-box-horizontal-label-to-description |
- |
desktop: 2px; mobile: 3px |
No |
- |
- |
| select-box-horizontal-start-to-content |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| select-box-horizontal-top-to-content |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| select-box-top-to-checkbox |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| select-box-vertical-edge-to-content |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| select-box-vertical-illustration-to-label |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| slider-control-to-field-label-editable-small |
- |
desktop: -4px; mobile: -8px |
No |
- |
- |
| slider-control-to-field-label-editable-medium |
- |
desktop: -12px; mobile: -16px |
No |
- |
- |
| slider-control-to-field-label-editable-large |
- |
desktop: -16px; mobile: -20px |
No |
- |
- |
| slider-control-to-field-label-editable-extra-large |
- |
desktop: -20px; mobile: -24px |
No |
- |
- |
| slider-control-to-field-label-side-small |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| slider-control-to-field-label-side-medium |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| slider-control-to-field-label-side-large |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| slider-control-to-field-label-side-extra-large |
- |
desktop: 24px; mobile: 28px |
No |
- |
- |
| slider-control-to-text-field-small |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| slider-control-to-text-field-medium |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| slider-control-to-text-field-large |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| slider-control-to-text-field-extra-large |
- |
desktop: 24px; mobile: 28px |
No |
- |
- |
| segmented-control-selection-border-width |
{border-width-200} |
2px |
No |
- |
- |
| slider-handle-height-precision-small |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| slider-handle-height-precision-medium |
- |
desktop: 22px; mobile: 26px |
No |
- |
- |
| slider-handle-height-precision-large |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| slider-handle-height-precision-extra-large |
- |
desktop: 26px; mobile: 32px |
No |
- |
- |
| slider-handle-small |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| slider-handle-medium |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| slider-handle-large |
- |
desktop: 22px; mobile: 28px |
No |
- |
- |
| slider-handle-extra-large |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| slider-handle-precision-width |
6px |
6px |
No |
- |
- |
| slider-track-height-medium |
4px |
4px |
No |
- |
- |
| slider-track-height-large |
16px |
16px |
No |
- |
- |
| segmented-control-item-height |
{component-height-100} |
desktop: 32px; mobile: 40px |
No |
- |
- |
| in-field-stepper-to-end-small |
- |
desktop: 0px; mobile: 3px |
No |
- |
- |
| in-field-stepper-to-end-medium |
3px |
3px |
No |
- |
- |
| in-field-stepper-to-end-large |
4px |
4px |
No |
- |
- |
| in-field-stepper-to-end-extra-large |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| number-field-with-stepper-minimum-width-small |
- |
desktop: 104px; mobile: 126px |
No |
- |
- |
| number-field-with-stepper-minimum-width-medium |
- |
desktop: 120px; mobile: 150px |
No |
- |
- |
| number-field-with-stepper-minimum-width-large |
- |
desktop: 144px; mobile: 174px |
No |
- |
- |
| number-field-with-stepper-minimum-width-extra-large |
- |
desktop: 168px; mobile: 198px |
No |
- |
- |
| number-field-visual-to-in-field-stepper-small |
- |
desktop: 5px; mobile: 7px |
No |
- |
- |
| number-field-visual-to-in-field-stepper-medium |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| number-field-visual-to-in-field-stepper-large |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| number-field-visual-to-in-field-stepper-extra-large |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| number-field-minimum-width-multiplier |
1.25 |
1.25 |
No |
- |
- |
| takeover-dialog-height |
100% |
100% |
No |
- |
- |
| takeover-dialog-width |
100% |
100% |
No |
- |
- |
| tree-view-disclosure-indicator-height |
- |
desktop: 32px; mobile: 40px |
No |
- |
- |
| tree-view-disclosure-indicator-width |
- |
desktop: 34px; mobile: 42px |
No |
- |
- |
| tree-view-minimum-height |
- |
desktop: 40px; mobile: 50px |
No |
- |
- |
| tree-view-minimum-width |
- |
desktop: 160px; mobile: 200px |
No |
- |
- |
| tree-view-bottom-to-label |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| tree-view-drag-handle-to-checkbox |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| tree-view-edge-to-checkbox |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| tree-view-edge-to-drag-handle |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| tree-view-end-edge-to-action-area |
- |
desktop: 6px; mobile: 7px |
No |
- |
- |
| tree-view-header-to-item |
-1px |
-1px |
No |
- |
- |
| tree-view-item-to-header |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| tree-view-item-to-item |
{tree-view-item-to-item-default} |
-1px |
Yes |
This token has been deprecated, use tree-view-item-to-item-default instead. |
Replaced by tree-view-item-to-item-default |
| tree-view-item-to-item-default |
-1px |
-1px |
No |
- |
- |
| tree-view-item-to-item-detached |
2px |
2px |
No |
- |
- |
| tree-view-label-to-action-area |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| tree-view-level-increment |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| tree-view-minimum-top-to-context-area |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| tree-view-top-to-action-button |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| tree-view-top-to-checkbox |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| tree-view-top-to-disclosure-indicator |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| tree-view-top-to-drag-handle |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| tree-view-top-to-label |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| tree-view-selected-row-background-opacity-emphasized |
0.1 |
0.1 |
No |
- |
- |
| tree-view-selected-row-background-opacity-emphasized-hover |
0.15 |
0.15 |
No |
- |
- |
| action-bar-minimum-width |
176px |
176px |
No |
- |
- |
| action-bar-label-to-action-group-area |
{spacing-300} |
16px |
No |
- |
- |
| card-edge-to-content-compact-extra-small |
6px |
6px |
No |
- |
- |
| card-edge-to-content-default-extra-small |
8px |
8px |
No |
- |
- |
| card-edge-to-content-spacious-extra-small |
12px |
12px |
No |
- |
- |
| card-edge-to-content-compact-small |
8px |
8px |
No |
- |
- |
| card-edge-to-content-default-small |
12px |
12px |
No |
- |
- |
| card-edge-to-content-spacious-small |
16px |
16px |
No |
- |
- |
| card-edge-to-content-compact-medium |
12px |
12px |
No |
- |
- |
| card-edge-to-content-default-medium |
16px |
16px |
No |
- |
- |
| card-edge-to-content-spacious-medium |
20px |
20px |
No |
- |
- |
| card-edge-to-content-compact-large |
16px |
16px |
No |
- |
- |
| card-edge-to-content-default-large |
20px |
20px |
No |
- |
- |
| card-edge-to-content-spacious-large |
24px |
24px |
No |
- |
- |
| card-edge-to-content-compact-extra-large |
20px |
20px |
No |
- |
- |
| card-edge-to-content-default-extra-large |
24px |
24px |
No |
- |
- |
| card-edge-to-content-spacious-extra-large |
28px |
28px |
No |
- |
- |
| card-header-to-description |
{spacing-75} |
4px |
No |
- |
- |
| card-description-to-footer |
{spacing-300} |
16px |
No |
- |
- |
| card-selection-background-size-small |
22px |
22px |
No |
- |
- |
| card-selection-background-size-medium |
24px |
24px |
No |
- |
- |
| card-selection-background-size-large |
26px |
26px |
No |
- |
- |
| card-selection-background-size-extra-large |
28px |
28px |
No |
- |
- |
| card-minimum-width-extra-small |
100px |
100px |
No |
- |
- |
| card-minimum-width-small |
150px |
150px |
No |
- |
- |
| card-minimum-width-medium |
200px |
200px |
No |
- |
- |
| card-minimum-width-large |
270px |
270px |
No |
- |
- |
| card-minimum-width-extra-large |
340px |
340px |
No |
- |
- |
| card-default-width-extra-small |
120px |
120px |
No |
- |
- |
| card-default-width-small |
180px |
180px |
No |
- |
- |
| card-default-width-medium |
240px |
240px |
No |
- |
- |
| card-default-width-large |
320px |
320px |
No |
- |
- |
| card-default-width-extra-large |
400px |
400px |
No |
- |
- |
| card-maximum-width-extra-small |
140px |
140px |
No |
- |
- |
| card-maximum-width-small |
210px |
210px |
No |
- |
- |
| card-maximum-width-medium |
280px |
280px |
No |
- |
- |
| card-maximum-width-large |
370px |
370px |
No |
- |
- |
| card-maximum-width-extra-large |
460px |
460px |
No |
- |
- |
| card-minimum-height-extra-small |
90px |
90px |
No |
- |
- |
| card-minimum-height-small |
135px |
135px |
No |
- |
- |
| card-minimum-height-medium |
180px |
180px |
No |
- |
- |
| card-minimum-height-large |
240px |
240px |
No |
- |
- |
| card-minimum-height-extra-large |
300px |
300px |
No |
- |
- |
| collection-card-minimum-height-extra-small |
88px |
88px |
No |
- |
- |
| collection-card-minimum-height-small |
124px |
124px |
No |
- |
- |
| collection-card-minimum-height-medium |
157px |
157px |
No |
- |
- |
| collection-card-minimum-height-large |
202px |
202px |
No |
- |
- |
| collection-card-minimum-height-extra-large |
249px |
249px |
No |
- |
- |
| collection-card-minimum-height-hero-extra-small |
168px |
168px |
No |
- |
- |
| collection-card-minimum-height-hero-small |
243px |
243px |
No |
- |
- |
| collection-card-minimum-height-hero-medium |
317px |
317px |
No |
- |
- |
| collection-card-minimum-height-hero-large |
414px |
414px |
No |
- |
- |
| collection-card-minimum-height-hero-extra-large |
514px |
514px |
No |
- |
- |
| user-card-minimum-height-small |
192px |
192px |
No |
- |
- |
| user-card-minimum-height-medium |
202px |
202px |
No |
- |
- |
| user-card-minimum-height-large |
219px |
219px |
No |
- |
- |
| user-card-minimum-height-extra-large |
236px |
236px |
No |
- |
- |
| user-card-minimum-height-title-below-small |
212px |
212px |
No |
- |
- |
| user-card-minimum-height-title-below-medium |
224px |
224px |
No |
- |
- |
| user-card-minimum-height-title-below-large |
244px |
244px |
No |
- |
- |
| user-card-minimum-height-title-below-extra-large |
263px |
263px |
No |
- |
- |
| segmented-control-item-maximum-width |
265px |
265px |
No |
- |
- |
| steplist-step-default-width-small |
46px |
46px |
No |
- |
- |
| steplist-step-default-width-medium |
54px |
54px |
No |
- |
- |
| steplist-step-default-width-large |
70px |
70px |
No |
- |
- |
| steplist-step-default-width-extra-large |
78px |
78px |
No |
- |
- |
| steplist-step-default-height-small |
46px |
46px |
No |
- |
- |
| steplist-step-default-height-medium |
54px |
54px |
No |
- |
- |
| steplist-step-default-height-large |
70px |
70px |
No |
- |
- |
| steplist-step-default-height-extra-large |
78px |
78px |
No |
- |
- |
| steplist-visual-size-small |
8px |
8px |
No |
- |
- |
| steplist-visual-size-medium |
16px |
16px |
No |
- |
- |
| steplist-visual-size-large |
24px |
24px |
No |
- |
- |
| steplist-visual-size-extra-large |
32px |
32px |
No |
- |
- |
| steplist-track-thickness-medium |
2px |
2px |
No |
- |
- |
| steplist-step-to-track-size-small |
6px |
6px |
No |
- |
- |
| steplist-step-to-track-size-medium |
7px |
7px |
No |
- |
- |
| steplist-step-to-track-size-large |
8px |
8px |
No |
- |
- |
| steplist-step-to-track-size-extra-large |
9px |
9px |
No |
- |
- |
| steplist-bottom-to-text |
1px |
1px |
No |
- |
- |
| card-horizontal-edge-to-content-compact |
12px |
12px |
No |
- |
- |
| card-horizontal-edge-to-content-default |
16px |
16px |
No |
- |
- |
| card-horizontal-edge-to-content-spacious |
20px |
20px |
No |
- |
- |
| accordion-edge-to-content-area-small |
7px |
7px |
No |
- |
- |
| accordion-edge-to-content-area-medium |
11px |
11px |
No |
- |
- |
| accordion-edge-to-content-area-large |
14px |
14px |
No |
- |
- |
| accordion-edge-to-content-area-extra-large |
17px |
17px |
No |
- |
- |
| single-calendar-popover-minimum-width |
320px |
320px |
No |
- |
- |
| single-calendar-popover-minimum-height |
320px |
320px |
No |
- |
- |
| double-calendar-popover-minimum-width |
616px |
616px |
No |
- |
- |
| double-calendar-popover-minimum-height |
320px |
320px |
No |
- |
- |
| triple-calendar-popover-minimum-width |
912px |
912px |
No |
- |
- |
| triple-calendar-popover-minimum-height |
320px |
320px |
No |
- |
- |
| date-field-minimum-width |
152px |
152px |
No |
- |
- |
| date-field-text-to-visual |
20px |
20px |
No |
- |
- |
| date-picker-visual-to-field-button |
0px |
0px |
No |
- |
- |
| date-picker-text-to-visual |
0px |
0px |
No |
- |
- |
| date-picker-minimum-width |
152px |
152px |
No |
- |
- |
| time-field-minimum-width |
2.5 |
2.5 |
No |
- |
- |
| time-field-text-to-visual |
20px |
20px |
No |
- |
- |
| segmented-text-field-gap |
0px |
0px |
No |
- |
- |
| segmented-text-field-rounding |
2px |
2px |
No |
- |
- |
| add-icon-size-50 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| add-icon-size-75 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| add-icon-size-100 |
- |
desktop: 10px; mobile: 14px |
No |
- |
- |
| add-icon-size-200 |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| add-icon-size-300 |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| drag-handle-icon-size-75 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| drag-handle-icon-size-100 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| drag-handle-icon-size-200 |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| drag-handle-icon-size-300 |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| gripper-icon-size-100 |
24px |
24px |
No |
- |
- |
| tag-field-default-width-small |
- |
desktop: 240px; mobile: 264px |
No |
- |
- |
| tag-field-default-width-medium |
- |
desktop: 264px; mobile: 288px |
No |
- |
- |
| tag-field-default-width-large |
- |
desktop: 288px; mobile: 312px |
No |
- |
- |
| tag-field-minimum-width |
- |
desktop: 180px; mobile: 200px |
No |
- |
- |
| tag-field-minimum-height-small |
- |
desktop: 44px; mobile: 54px |
No |
- |
- |
| tag-field-minimum-height-medium |
- |
desktop: 56px; mobile: 68px |
No |
- |
- |
| tag-field-minimum-height-large |
- |
desktop: 68px; mobile: 82px |
No |
- |
- |
| tag-field-edge-to-content-small |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| tag-field-edge-to-content-medium |
- |
desktop: 12px; mobile: 14px |
No |
- |
- |
| tag-field-edge-to-content-large |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| list-view-minimum-height |
- |
desktop: 40px; mobile: 50px |
No |
- |
- |
| list-view-minimum-width |
- |
desktop: 200px; mobile: 240px |
No |
- |
- |
| list-view-item-top-corner-radius |
{corner-radius-medium-default} |
8px |
No |
- |
- |
| list-view-item-bottom-corner-radius |
{corner-radius-medium-default} |
8px |
No |
- |
- |
| list-view-end-edge-to-content |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| stack-item-selected-background-opacity-emphasized |
0.1 |
0.1 |
No |
- |
- |
| stack-item-selected-background-opacity-emphasized-hover |
0.15 |
0.15 |
No |
- |
- |
| stack-item-selected-background-opacity-emphasized-down |
0.15 |
0.15 |
No |
- |
- |
| stack-item-selected-background-opacity-emphasized-key-focus |
0.15 |
0.15 |
No |
- |
- |
| stack-item-header-minimum-width |
- |
desktop: 200px; mobile: 240px |
No |
- |
- |
| stack-item-start-edge-to-content |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| stack-item-drag-handle-to-control |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| stack-item-text-to-control |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| stack-item-edge-to-control |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| stack-item-edge-to-visual |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| stack-item-action-to-navigation |
- |
desktop: 4px; mobile: 6px |
No |
- |
- |
| stack-item-header-to-item |
0px |
0px |
No |
- |
- |
| stack-item-item-to-item |
-1px |
-1px |
No |
- |
- |
| accordion-bottom-to-text-extra-large |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| accordion-bottom-to-text-large |
- |
desktop: 11px; mobile: 14px |
No |
- |
- |
| accordion-bottom-to-text-medium |
- |
desktop: 9px; mobile: 13px |
No |
- |
- |
| accordion-bottom-to-text-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| accordion-top-to-text-extra-large |
- |
desktop: 13px; mobile: 17px |
No |
- |
- |
| accordion-top-to-text-large |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| accordion-top-to-text-medium |
- |
desktop: 9px; mobile: 10px |
No |
- |
- |
| accordion-top-to-text-small |
- |
desktop: 7px; mobile: 10px |
No |
- |
- |
| select-box-horizontal-minimum-width |
- |
desktop: 188px; mobile: 220px |
No |
- |
- |
| side-navigation-counter-to-disclosure |
- |
desktop: 4px; mobile: 6px |
No |
- |
- |
| side-navigation-edge-to-indicator |
- |
desktop: 4px; mobile: 6px |
No |
- |
- |
| side-navigation-indicator-to-content |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| side-navigation-second-level-edge-to-indicator |
- |
desktop: 30px; mobile: 36px |
No |
- |
- |
| side-navigation-second-level-with-icon-edge-to-text |
- |
desktop: 28px; mobile: 34px |
No |
- |
- |
| side-navigation-second-level-with-icon-edge-to-indicator |
- |
desktop: 20px; mobile: 26px |
No |
- |
- |
| side-navigation-third-level-edge-to-indicator |
- |
desktop: 56px; mobile: 62px |
No |
- |
- |
| side-navigation-third-level-with-icon-edge-to-text |
- |
desktop: 44px; mobile: 50px |
No |
- |
- |
| side-navigation-third-level-with-icon-edge-to-indicator |
- |
desktop: 36px; mobile: 42px |
No |
- |
- |
| side-navigation-trailing-accessory-area-to-edge |
- |
desktop: 4px; mobile: 6px |
No |
- |
- |
| side-navigation-indicator-height |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| side-navigation-indicator-thickness |
2px |
2px |
No |
- |
- |
