@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
77 lines • 6.18 kB
TypeScript
/**
* Style definition for `mdc-list-item`.
*
* Based on the Material 3 list item specification:
*
* - Container: 56dp (one-line) / 72dp (two-line) / 88dp (three-line), square corners
* - Headline: body-large; supporting text: body-medium; overline: label-small;
* trailing supporting text: label-medium
* - Leading icon: 24dp; leading avatar: 40dp full shape
* - Selected state: secondary-container background
* - State layer: on-surface at 8% / 10% / 10% (hover / focus / press)
* - Disabled: on-surface at 38% label opacity
* - Touch target: 48dp min
*/
export declare const ListItemDefinition: {
readonly 'container-shape-start-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-start-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-end-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-end-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'one-line-container-height': "56px";
readonly 'two-line-container-height': "72px";
readonly 'three-line-container-height': "88px";
readonly 'enabled-container-inline-leading-padding-space': "16px";
readonly 'enabled-container-inline-trailing-padding-space': "16px";
readonly 'enabled-container-color': "transparent";
readonly 'hovered-container-color': "transparent";
readonly 'focused-container-color': "transparent";
readonly 'pressed-container-color': "transparent";
readonly 'disabled-container-color': "transparent";
readonly 'enabled-container-color-selected': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'hovered-container-color-selected': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'focused-container-color-selected': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'pressed-container-color-selected': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'enabled-label-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'enabled-label-size': "var(--md-sys-typescale-body-large-font-size, 16px)";
readonly 'enabled-label-weight': "var(--md-ref-typeface-weight-regular, 400)";
readonly 'enabled-label-tracking': "var(--md-sys-typescale-body-large-font-tracking, 0px)";
readonly 'enabled-label-line-height': "var(--md-sys-typescale-body-large-font-line-height, 24px)";
readonly 'enabled-label-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'enabled-label-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'disabled-label-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'enabled-supporting-text-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'enabled-supporting-text-size': "var(--md-sys-typescale-body-medium-font-size, 14px)";
readonly 'enabled-supporting-text-weight': "var(--md-ref-typeface-weight-regular, 400)";
readonly 'enabled-supporting-text-tracking': "var(--md-sys-typescale-body-medium-font-tracking, 0px)";
readonly 'enabled-supporting-text-line-height': "var(--md-sys-typescale-body-medium-font-line-height, 20px)";
readonly 'enabled-supporting-text-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-supporting-text-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'enabled-overline-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'enabled-overline-size': "var(--md-sys-typescale-label-small-font-size, 11px)";
readonly 'enabled-overline-weight': "var(--md-ref-typeface-weight-bold, 700)";
readonly 'enabled-overline-tracking': "var(--md-sys-typescale-label-small-font-tracking, 0.1px)";
readonly 'enabled-overline-line-height': "var(--md-sys-typescale-label-small-font-line-height, 16px)";
readonly 'enabled-overline-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'enabled-overline-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'enabled-trailing-supporting-text-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'enabled-trailing-supporting-text-size': "var(--md-sys-typescale-label-medium-font-size, 12px)";
readonly 'enabled-trailing-supporting-text-weight': "var(--md-ref-typeface-weight-bold, 700)";
readonly 'enabled-trailing-supporting-text-tracking': "var(--md-sys-typescale-label-medium-font-tracking, 0.1px)";
readonly 'enabled-trailing-supporting-text-line-height': "var(--md-sys-typescale-label-medium-font-line-height, 16px)";
readonly 'enabled-trailing-supporting-text-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-trailing-supporting-text-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'enabled-leading-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-leading-icon-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'leading-icon-size': "24px";
readonly 'enabled-trailing-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-trailing-icon-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'hovered-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'hovered-state-layer-opacity': "0.08";
readonly 'focused-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-state-layer-opacity': "0.1";
readonly 'pressed-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'pressed-state-layer-opacity': "0.1";
readonly 'disabled-label-opacity': "0.38";
readonly 'min-touch-target-size': "48px";
};
//# sourceMappingURL=list.definition.d.ts.map