@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
75 lines • 5.65 kB
TypeScript
/**
* Style definition for `mdc-segmented-button` — a single selectable segment.
*
* Follows the Material 3 *outlined segmented button* token set
* (`md.comp.outlined-segmented-button`). Segments never paint an outline of
* their own; the surrounding `mdc-segmented-button-set` owns the container
* outline and corner radii (via `OutlinedSegmentedButtonSetDefinition`).
*
* @version
* Material Design 3
*/
export declare const OutlinedSegmentedButtonDefinition: {
readonly 'label-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'label-line-height': "var(--md-sys-typescale-label-large-font-line-height, 20px)";
readonly 'label-size': "var(--md-sys-typescale-label-large-font-size, 14px)";
readonly 'label-tracking': "var(--md-sys-typescale-label-large-font-tracking, 0px)";
readonly 'label-weight': "var(--md-ref-typeface-weight-medium, 500)";
readonly 'icon-size': "18px";
readonly 'spacing-leading': "12px";
readonly 'spacing-trailing': "12px";
readonly 'enabled-outline-color': "var(--md-sys-color-outline, light-dark(#6d7a6e, #879487))";
readonly 'outline-width': "1px";
readonly 'enabled-container-color-selected': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'enabled-label-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'enabled-icon-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'enabled-with-icon-icon-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'hovered-state-layer-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'focused-state-layer-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'pressed-state-layer-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'hovered-label-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'focused-label-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'pressed-label-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'hovered-icon-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'focused-icon-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'pressed-icon-color-selected': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'enabled-container-color-unselected': "transparent";
readonly 'enabled-label-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'enabled-icon-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'hovered-state-layer-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-state-layer-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'pressed-state-layer-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'hovered-label-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-label-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'pressed-label-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'hovered-icon-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'focused-icon-color-unselected': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'pressed-icon-color-unselected': "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-state-layer-opacity': "var(--md-sys-state-focused-state-layer-opacity, 0.1)";
readonly 'pressed-state-layer-opacity': "var(--md-sys-state-pressed-state-layer-opacity, 0.1)";
readonly 'disabled-label-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-label-opacity': "0.38";
readonly 'disabled-icon-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-icon-opacity': "0.38";
readonly 'disabled-outline-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-outline-opacity': "0.12";
};
/**
* Style definition for `mdc-segmented-button-set` — the container.
*
* The set paints the 1px outline around the whole group and applies the
* container corner radii to its first / last segment, so the outline appears
* to wrap the group while adjacent segments share a single 1px divider.
*
* @version
* Material Design 3
*/
export declare const OutlinedSegmentedButtonSetDefinition: {
readonly 'container-height': "40px";
readonly 'shape-start-start': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'shape-start-end': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'shape-end-start': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'shape-end-end': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
};
//# sourceMappingURL=segmented-button.definition.d.ts.map