@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
71 lines • 2.99 kB
TypeScript
/**
* Style definition for `mdc-button-group` — standard variant.
*
* In standard button groups, buttons are grouped with padding between buttons
* that scales at smaller sizes to guarantee a minimum accessible touch target of 48dp:
* - XS: 18dp (18px)
* - S: 12dp (12px)
* - M: 8dp (8px)
* - L: 8dp (8px)
* - XL: 8dp (8px)
*
* @version
* Material Design 3 Expressive
*
* @link
* https://m3.material.io/components/button-groups/specs
*/
export declare const StandardButtonGroupDefinition: {
readonly 'enabled-space-between': "8px";
readonly 'enabled-extra-small-space-between': "18px";
readonly 'enabled-small-space-between': "12px";
readonly 'enabled-medium-space-between': "8px";
readonly 'enabled-large-space-between': "8px";
readonly 'enabled-extra-large-space-between': "8px";
};
/**
* Style definition for `mdc-button-group` — connected variant.
*
* In connected button groups, 2dp (2px) inner padding is used at every size.
* Outer shapes are fully round (or square corner radius), and inner shapes
* use specific corner radii:
* - XS: 4dp (4px)
* - S: 8dp (8px)
* - M: 8dp (8px)
* - L: 16dp (16px)
* - XL: 20dp (20px)
*
* Extra small and small buttons have a minimum width of 48dp (48px).
*
* @version
* Material Design 3 Expressive
*
* @link
* https://m3.material.io/components/button-groups/specs
*/
export declare const ConnectedButtonGroupDefinition: {
readonly 'enabled-space-between': "2px";
readonly 'enabled-extra-small-space-between': "2px";
readonly 'enabled-small-space-between': "2px";
readonly 'enabled-medium-space-between': "2px";
readonly 'enabled-large-space-between': "2px";
readonly 'enabled-extra-large-space-between': "2px";
readonly 'enabled-extra-small-min-width': "48px";
readonly 'enabled-small-min-width': "48px";
readonly 'enabled-extra-small-inner-shape': "4px";
readonly 'enabled-small-inner-shape': "8px";
readonly 'enabled-medium-inner-shape': "8px";
readonly 'enabled-large-inner-shape': "16px";
readonly 'enabled-extra-large-inner-shape': "20px";
readonly 'enabled-extra-small-outer-shape-round': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'enabled-small-outer-shape-round': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'enabled-medium-outer-shape-round': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'enabled-large-outer-shape-round': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'enabled-extra-large-outer-shape-round': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'enabled-extra-small-outer-shape-square': "4px";
readonly 'enabled-small-outer-shape-square': "8px";
readonly 'enabled-medium-outer-shape-square': "8px";
readonly 'enabled-large-outer-shape-square': "16px";
readonly 'enabled-extra-large-outer-shape-square': "20px";
};
//# sourceMappingURL=button-group.definition.d.ts.map