@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
178 lines • 14.1 kB
TypeScript
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
export declare const ElevatedCardDefinition: {
readonly 'container-shape-start-start': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-start-end': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-end-start': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-end-end': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-square-start-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-start-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-end-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-end-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-padding-inline-start': `16px`;
readonly 'container-padding-inline-end': `16px`;
readonly 'container-padding-block-start': `16px`;
readonly 'container-padding-block-end': `16px`;
readonly 'container-margin-inline-start': `0px`;
readonly 'container-margin-inline-end': `0px`;
readonly 'container-margin-block-start': `0px`;
readonly 'container-margin-block-end': `0px`;
readonly 'enabled-icon-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'icon-size': `24px`;
readonly 'enabled-container-color': "var(--md-sys-color-surface-container-low, light-dark(#eff6ec, #171d17))";
readonly 'enabled-container-elevation': "var(--md-sys-elevation-level-1, 1px)";
readonly 'enabled-container-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'disabled-container-color': "var(--md-sys-color-surface, light-dark(#f4fbf1, #0e150f))";
readonly 'disabled-container-elevation': "var(--md-sys-elevation-level-1, 1px)";
readonly 'disabled-container-opacity': "0.38";
readonly 'hovered-container-elevation': "var(--md-sys-elevation-level-2, 3px)";
readonly 'hovered-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'hovered-state-layer-opacity': "var(--md-sys-state-hovered-state-layer-opacity, 0.08)";
readonly 'focused-container-elevation': "var(--md-sys-elevation-level-1, 1px)";
readonly 'focused-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-state-layer-opacity': "var(--md-sys-state-focused-state-layer-opacity, 0.1)";
readonly 'focused-indicator-color': "var(--md-sys-color-secondary, light-dark(#3c6847, #a2d2ab))";
readonly 'focused-indicator-offset': "var(--md-sys-state-focus-indicator-outer-offset, 2px)";
readonly 'focused-indicator-thickness': "var(--md-sys-state-focus-indicator-thickness, 3px)";
readonly 'pressed-container-elevation': "var(--md-sys-elevation-level-1, 1px)";
readonly 'pressed-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'pressed-state-layer-opacity': "var(--md-sys-state-pressed-state-layer-opacity, 0.1)";
readonly 'dragged-container-elevation': "var(--md-sys-elevation-level-4, 8px)";
readonly 'dragged-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'dragged-state-layer-opacity': "var(--md-sys-state-dragged-state-layer-opacity, 0.16)";
};
export declare const FilledCardDefinition: {
readonly 'container-shape-start-start': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-start-end': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-end-start': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-end-end': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-square-start-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-start-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-end-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-end-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-padding-inline-start': `16px`;
readonly 'container-padding-inline-end': `16px`;
readonly 'container-padding-block-start': `16px`;
readonly 'container-padding-block-end': `16px`;
readonly 'container-margin-inline-start': `0px`;
readonly 'container-margin-inline-end': `0px`;
readonly 'container-margin-block-start': `0px`;
readonly 'container-margin-block-end': `0px`;
readonly 'enabled-icon-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'icon-size': `24px`;
readonly 'enabled-container-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
readonly 'enabled-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'enabled-container-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'disabled-container-color': "var(--md-sys-color-surface-variant, light-dark(#d8e6d7, #3d4a3f))";
readonly 'disabled-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'disabled-container-opacity': "0.38";
readonly 'hovered-container-elevation': "var(--md-sys-elevation-level-1, 1px)";
readonly 'hovered-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'hovered-state-layer-opacity': "var(--md-sys-state-hovered-state-layer-opacity, 0.08)";
readonly 'focused-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'focused-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-state-layer-opacity': "var(--md-sys-state-focused-state-layer-opacity, 0.1)";
readonly 'focused-indicator-color': "var(--md-sys-color-secondary, light-dark(#3c6847, #a2d2ab))";
readonly 'focused-indicator-offset': "var(--md-sys-state-focus-indicator-outer-offset, 2px)";
readonly 'focused-indicator-thickness': "var(--md-sys-state-focus-indicator-thickness, 3px)";
readonly 'pressed-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'pressed-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'pressed-state-layer-opacity': "var(--md-sys-state-pressed-state-layer-opacity, 0.1)";
readonly 'dragged-container-elevation': "var(--md-sys-elevation-level-3, 6px)";
readonly 'dragged-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'dragged-state-layer-opacity': "var(--md-sys-state-dragged-state-layer-opacity, 0.16)";
};
export declare const OutlinedCardDefinition: {
readonly 'container-shape-start-start': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-start-end': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-end-start': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-end-end': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-square-start-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-start-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-end-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-end-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-padding-inline-start': `16px`;
readonly 'container-padding-inline-end': `16px`;
readonly 'container-padding-block-start': `16px`;
readonly 'container-padding-block-end': `16px`;
readonly 'container-margin-inline-start': `0px`;
readonly 'container-margin-inline-end': `0px`;
readonly 'container-margin-block-start': `0px`;
readonly 'container-margin-block-end': `0px`;
readonly 'enabled-icon-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'icon-size': `24px`;
readonly 'enabled-container-color': "var(--md-sys-color-surface, light-dark(#f4fbf1, #0e150f))";
readonly 'enabled-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'enabled-container-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'enabled-outline-color': "var(--md-sys-color-outline-variant, light-dark(#bccabc, #3d4a3f))";
readonly 'outline-width': "1px";
readonly 'disabled-container-color': "var(--md-sys-color-surface, light-dark(#f4fbf1, #0e150f))";
readonly 'disabled-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'disabled-container-opacity': "0.38";
readonly 'disabled-outline-color': "var(--md-sys-color-outline, light-dark(#6d7a6e, #879487))";
readonly 'disabled-outline-opacity': "0.12";
readonly 'hovered-container-elevation': "var(--md-sys-elevation-level-1, 1px)";
readonly 'hovered-outline-color': "var(--md-sys-color-outline-variant, light-dark(#bccabc, #3d4a3f))";
readonly 'hovered-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'hovered-state-layer-opacity': "var(--md-sys-state-hovered-state-layer-opacity, 0.08)";
readonly 'focused-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'focused-outline-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-state-layer-opacity': "var(--md-sys-state-focused-state-layer-opacity, 0.1)";
readonly 'focused-indicator-color': "var(--md-sys-color-secondary, light-dark(#3c6847, #a2d2ab))";
readonly 'focused-indicator-offset': "var(--md-sys-state-focus-indicator-outer-offset, 2px)";
readonly 'focused-indicator-thickness': "var(--md-sys-state-focus-indicator-thickness, 3px)";
readonly 'pressed-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'pressed-outline-color': "var(--md-sys-color-outline-variant, light-dark(#bccabc, #3d4a3f))";
readonly 'pressed-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'pressed-state-layer-opacity': "var(--md-sys-state-pressed-state-layer-opacity, 0.1)";
readonly 'dragged-container-elevation': "var(--md-sys-elevation-level-3, 6px)";
readonly 'dragged-outline-color': "var(--md-sys-color-outline-variant, light-dark(#bccabc, #3d4a3f))";
readonly 'dragged-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'dragged-state-layer-opacity': "var(--md-sys-state-dragged-state-layer-opacity, 0.16)";
};
export declare const CardDefinition: {
readonly 'container-shape-start-start': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-start-end': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-end-start': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-end-end': "var(--md-sys-shape-corner-medium, 12px)";
readonly 'container-shape-square-start-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-start-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-end-start': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-shape-square-end-end': "var(--md-sys-shape-corner-none, 0px)";
readonly 'container-padding-inline-start': `16px`;
readonly 'container-padding-inline-end': `16px`;
readonly 'container-padding-block-start': `16px`;
readonly 'container-padding-block-end': `16px`;
readonly 'container-margin-inline-start': `0px`;
readonly 'container-margin-inline-end': `0px`;
readonly 'container-margin-block-start': `0px`;
readonly 'container-margin-block-end': `0px`;
readonly 'enabled-icon-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'icon-size': `24px`;
readonly 'enabled-container-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
readonly 'enabled-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'enabled-container-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'disabled-container-color': "var(--md-sys-color-surface-variant, light-dark(#d8e6d7, #3d4a3f))";
readonly 'disabled-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'disabled-container-opacity': "0.38";
readonly 'hovered-container-elevation': "var(--md-sys-elevation-level-1, 1px)";
readonly 'hovered-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'hovered-state-layer-opacity': "var(--md-sys-state-hovered-state-layer-opacity, 0.08)";
readonly 'focused-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'focused-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-state-layer-opacity': "var(--md-sys-state-focused-state-layer-opacity, 0.1)";
readonly 'focused-indicator-color': "var(--md-sys-color-secondary, light-dark(#3c6847, #a2d2ab))";
readonly 'focused-indicator-offset': "var(--md-sys-state-focus-indicator-outer-offset, 2px)";
readonly 'focused-indicator-thickness': "var(--md-sys-state-focus-indicator-thickness, 3px)";
readonly 'pressed-container-elevation': "var(--md-sys-elevation-level-0, 0px)";
readonly 'pressed-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'pressed-state-layer-opacity': "var(--md-sys-state-pressed-state-layer-opacity, 0.1)";
readonly 'dragged-container-elevation': "var(--md-sys-elevation-level-3, 6px)";
readonly 'dragged-state-layer-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'dragged-state-layer-opacity': "var(--md-sys-state-dragged-state-layer-opacity, 0.16)";
};
//# sourceMappingURL=card.definition.d.ts.map