@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
132 lines • 9.9 kB
TypeScript
/**
* Standard side sheet — co-exists with main UI, no scrim, `surface` background.
*/
export declare const StandardSideSheetDefinition: {
readonly 'enabled-container-width': `400px`;
readonly 'enabled-container-shape-start-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-shape-start-end': `0`;
readonly 'enabled-container-shape-end-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-shape-end-end': `0`;
readonly 'dragged-container-shape-start-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-start-end': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-end-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-end-end': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-elevation': '1';
readonly 'container-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'headline-container-inline-leading-padding-space': `24px`;
readonly 'headline-container-inline-trailing-padding-space': `12px`;
readonly 'headline-container-block-leading-padding-space': `24px`;
readonly 'headline-container-block-trailing-padding-space': `12px`;
readonly 'enabled-headline-font': "var(--md-ref-typeface-font-brand, Roboto)";
readonly 'enabled-headline-line-height': "var(--md-sys-typescale-title-large-font-line-height, 28px)";
readonly 'enabled-headline-size': "var(--md-sys-typescale-title-large-font-size, 22px)";
readonly 'enabled-headline-tracking': "var(--md-sys-typescale-title-large-font-tracking, 0px)";
readonly 'enabled-headline-weight': "var(--md-ref-typeface-weight-regular, 400)";
readonly 'content-container-inline-leading-padding-space': `24px`;
readonly 'content-container-inline-trailing-padding-space': `24px`;
readonly 'content-container-block-leading-padding-space': `16px`;
readonly 'content-container-block-trailing-padding-space': `24px`;
readonly 'actions-container-block-leading-padding-space': `16px`;
readonly 'actions-container-block-trailing-padding-space': `24px`;
readonly 'actions-container-height': `72px`;
readonly 'headline-icon-container-inline-leading-padding-space': `16px`;
readonly 'enabled-container-color-modal': "var(--md-sys-color-scrim, light-dark(#000000, #000000))";
readonly 'enabled-container-opacity-modal': `0.32`;
readonly 'close-icon-size': `24px`;
readonly 'headline-icon-size': `24px`;
readonly 'hovered-icon-container-color': `rgba(0, 0, 0, 0.08)`;
readonly 'pressed-icon-container-color': `rgba(0, 0, 0, 0.12)`;
readonly 'enabled-container-color': "var(--md-sys-color-surface, light-dark(#f4fbf1, #0e150f))";
readonly 'enabled-headline-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-close-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-headline-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-divider-color': "var(--md-sys-color-outline-variant, light-dark(#bccabc, #3d4a3f))";
};
/**
* Modal side sheet — blocks interaction via scrim, uses `surface-container-low`
* background per the Material Components Android default.
*/
export declare const ModalSideSheetDefinition: {
readonly 'enabled-container-width': `400px`;
readonly 'enabled-container-shape-start-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-shape-start-end': `0`;
readonly 'enabled-container-shape-end-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-shape-end-end': `0`;
readonly 'dragged-container-shape-start-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-start-end': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-end-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-end-end': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-elevation': '1';
readonly 'container-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'headline-container-inline-leading-padding-space': `24px`;
readonly 'headline-container-inline-trailing-padding-space': `12px`;
readonly 'headline-container-block-leading-padding-space': `24px`;
readonly 'headline-container-block-trailing-padding-space': `12px`;
readonly 'enabled-headline-font': "var(--md-ref-typeface-font-brand, Roboto)";
readonly 'enabled-headline-line-height': "var(--md-sys-typescale-title-large-font-line-height, 28px)";
readonly 'enabled-headline-size': "var(--md-sys-typescale-title-large-font-size, 22px)";
readonly 'enabled-headline-tracking': "var(--md-sys-typescale-title-large-font-tracking, 0px)";
readonly 'enabled-headline-weight': "var(--md-ref-typeface-weight-regular, 400)";
readonly 'content-container-inline-leading-padding-space': `24px`;
readonly 'content-container-inline-trailing-padding-space': `24px`;
readonly 'content-container-block-leading-padding-space': `16px`;
readonly 'content-container-block-trailing-padding-space': `24px`;
readonly 'actions-container-block-leading-padding-space': `16px`;
readonly 'actions-container-block-trailing-padding-space': `24px`;
readonly 'actions-container-height': `72px`;
readonly 'headline-icon-container-inline-leading-padding-space': `16px`;
readonly 'enabled-container-color-modal': "var(--md-sys-color-scrim, light-dark(#000000, #000000))";
readonly 'enabled-container-opacity-modal': `0.32`;
readonly 'close-icon-size': `24px`;
readonly 'headline-icon-size': `24px`;
readonly 'hovered-icon-container-color': `rgba(0, 0, 0, 0.08)`;
readonly 'pressed-icon-container-color': `rgba(0, 0, 0, 0.12)`;
readonly 'enabled-container-color': "var(--md-sys-color-surface-container-low, light-dark(#eff6ec, #171d17))";
readonly 'enabled-headline-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-close-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-headline-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-divider-color': "var(--md-sys-color-outline-variant, light-dark(#bccabc, #3d4a3f))";
};
/** Default definition — the standard variant. */
export declare const SideSheetDefinition: {
readonly 'enabled-container-width': `400px`;
readonly 'enabled-container-shape-start-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-shape-start-end': `0`;
readonly 'enabled-container-shape-end-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-shape-end-end': `0`;
readonly 'dragged-container-shape-start-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-start-end': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-end-start': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'dragged-container-shape-end-end': "var(--md-sys-shape-corner-extra-large, 28px)";
readonly 'enabled-container-elevation': '1';
readonly 'container-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'headline-container-inline-leading-padding-space': `24px`;
readonly 'headline-container-inline-trailing-padding-space': `12px`;
readonly 'headline-container-block-leading-padding-space': `24px`;
readonly 'headline-container-block-trailing-padding-space': `12px`;
readonly 'enabled-headline-font': "var(--md-ref-typeface-font-brand, Roboto)";
readonly 'enabled-headline-line-height': "var(--md-sys-typescale-title-large-font-line-height, 28px)";
readonly 'enabled-headline-size': "var(--md-sys-typescale-title-large-font-size, 22px)";
readonly 'enabled-headline-tracking': "var(--md-sys-typescale-title-large-font-tracking, 0px)";
readonly 'enabled-headline-weight': "var(--md-ref-typeface-weight-regular, 400)";
readonly 'content-container-inline-leading-padding-space': `24px`;
readonly 'content-container-inline-trailing-padding-space': `24px`;
readonly 'content-container-block-leading-padding-space': `16px`;
readonly 'content-container-block-trailing-padding-space': `24px`;
readonly 'actions-container-block-leading-padding-space': `16px`;
readonly 'actions-container-block-trailing-padding-space': `24px`;
readonly 'actions-container-height': `72px`;
readonly 'headline-icon-container-inline-leading-padding-space': `16px`;
readonly 'enabled-container-color-modal': "var(--md-sys-color-scrim, light-dark(#000000, #000000))";
readonly 'enabled-container-opacity-modal': `0.32`;
readonly 'close-icon-size': `24px`;
readonly 'headline-icon-size': `24px`;
readonly 'hovered-icon-container-color': `rgba(0, 0, 0, 0.08)`;
readonly 'pressed-icon-container-color': `rgba(0, 0, 0, 0.12)`;
readonly 'enabled-container-color': "var(--md-sys-color-surface, light-dark(#f4fbf1, #0e150f))";
readonly 'enabled-headline-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-close-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-headline-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-divider-color': "var(--md-sys-color-outline-variant, light-dark(#bccabc, #3d4a3f))";
};
//# sourceMappingURL=side-sheet.definition.d.ts.map