@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
173 lines • 12.4 kB
TypeScript
/**
* @version
* Material Design 3 - Expressive
*/
export declare const SliderDefinition: {
readonly 'extra-small-active-track-height': "16px";
readonly 'extra-small-active-track-leading-shape': "16px";
readonly 'extra-small-active-track-trailing-shape': "2px";
readonly 'extra-small-inactive-track-height': "16px";
readonly 'extra-small-inactive-track-leading-shape': "2px";
readonly 'extra-small-inactive-track-trailing-shape': "16px";
readonly 'extra-small-active-handle-height': "44px";
readonly 'extra-small-handle-width': "4px";
readonly 'small-active-track-height': "24px";
readonly 'small-active-track-leading-shape': "8px";
readonly 'small-active-track-trailing-shape': "2px";
readonly 'small-inactive-track-height': "24px";
readonly 'small-inactive-track-leading-shape': "2px";
readonly 'small-inactive-track-trailing-shape': "8px";
readonly 'small-active-handle-height': "44px";
readonly 'small-handle-width': "4px";
readonly 'medium-active-track-height': "40px";
readonly 'medium-active-track-leading-shape': "12px";
readonly 'medium-active-track-trailing-shape': "2px";
readonly 'medium-inactive-track-height': "40px";
readonly 'medium-inactive-track-leading-shape': "2px";
readonly 'medium-inactive-track-trailing-shape': "12px";
readonly 'medium-active-handle-height': "52px";
readonly 'medium-handle-width': "4px";
readonly 'large-active-track-height': "56px";
readonly 'large-active-track-leading-shape': "16px";
readonly 'large-active-track-trailing-shape': "2px";
readonly 'large-inactive-track-height': "56px";
readonly 'large-inactive-track-leading-shape': "2px";
readonly 'large-inactive-track-trailing-shape': "16px";
readonly 'large-active-handle-height': "68px";
readonly 'large-handle-width': "4px";
readonly 'extra-large-active-track-height': "96px";
readonly 'extra-large-active-track-leading-shape': "28px";
readonly 'extra-large-active-track-trailing-shape': "2px";
readonly 'extra-large-inactive-track-height': "96px";
readonly 'extra-large-inactive-track-leading-shape': "2px";
readonly 'extra-large-inactive-track-trailing-shape': "28px";
readonly 'extra-large-active-handle-height': "108px";
readonly 'extra-large-handle-width': "4px";
readonly 'center-dot-size': "4px";
readonly 'medium-icon-padding': "6px";
readonly 'medium-icon-size': "24px";
readonly 'large-icon-padding': "6px";
readonly 'large-icon-size': "24px";
readonly 'extra-large-icon-padding': "8px";
readonly 'extra-large-icon-size': "32px";
readonly 'label-container-width': "48px";
readonly 'label-container-height': "44px";
readonly 'label-x-padding': "16px";
readonly 'label-y-padding': "12px";
readonly 'label-bottom-space': "6px";
readonly 'enabled-label-container-color': "var(--md-sys-color-inverse-surface, light-dark(#2b322c, #dde4db))";
readonly 'enabled-label-text-color': "var(--md-sys-color-inverse-on-surface, light-dark(#ecf3e9, #2b322c))";
readonly 'label-text-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'label-text-line-height': "var(--md-sys-typescale-label-large-font-line-height, 20px)";
readonly 'label-text-size': "var(--md-sys-typescale-label-large-font-size, 14px)";
readonly 'label-text-tracking': "var(--md-sys-typescale-label-large-font-tracking, 0px)";
readonly 'label-text-weight': "var(--md-ref-typeface-weight-medium, 500)";
readonly 'stop-indicator-size': "4px";
readonly 'stop-indicator-shape': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'stop-indicator-trailing-space': "4px";
readonly 'with-tick-marks-container-shape': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'with-tick-marks-container-size': "2px";
readonly 'enabled-with-tick-marks-active-container-color': "var(--md-sys-color-on-primary, light-dark(#ffffff, #00391a))";
readonly 'enabled-with-tick-marks-active-container-opacity': "0.38";
readonly 'enabled-with-tick-marks-inactive-container-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-with-tick-marks-inactive-container-opacity': "0.38";
readonly 'enabled-active-stop-indicator-color': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'enabled-inactive-stop-indicator-color': "var(--md-sys-color-on-primary, light-dark(#ffffff, #00391a))";
readonly 'enabled-active-stop-indicator-container-color': "var(--md-sys-color-on-primary, light-dark(#ffffff, #00391a))";
readonly 'enabled-active-stop-indicator-container-opacity': "1";
readonly 'enabled-inactive-stop-indicator-container-color': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'enabled-inactive-stop-indicator-container-opacity': "1";
readonly 'active-track-inner-corner-size': "2px";
readonly 'enabled-active-track-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'enabled-inactive-track-color': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'handle-width': "4px";
readonly 'active-handle-width': "4px";
readonly 'handle-shape': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'active-handle-shape': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'enabled-handle-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'enabled-active-handle-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'active-handle-leading-space': "6px";
readonly 'active-handle-trailing-space': "6px";
readonly 'active-handle-padding': "6px";
readonly 'disabled-active-stop-indicator-color': "var(--md-sys-color-inverse-on-surface, light-dark(#ecf3e9, #2b322c))";
readonly 'disabled-inactive-stop-indicator-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-active-track-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-inactive-track-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-active-track-opacity': "0.38";
readonly 'disabled-inactive-track-opacity': "0.12";
readonly 'disabled-handle-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-handle-opacity': "0.38";
readonly 'disabled-handle-width': "4px";
readonly 'hovered-handle-width': "4px";
readonly 'focused-active-track-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'focused-inactive-track-color': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'focused-handle-width': "2px";
readonly 'pressed-handle-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'pressed-handle-width': "2px";
readonly 'pressed-active-track-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'pressed-inactive-track-color': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'pressed-inactive-container-color': "var(--md-sys-color-inverse-surface, light-dark(#2b322c, #dde4db))";
readonly 'pressed-value-indicator-label-color': "var(--md-sys-color-inverse-on-surface, light-dark(#ecf3e9, #2b322c))";
readonly 'pressed-value-indicator-label-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'pressed-value-indicator-label-line-height': "var(--md-sys-typescale-label-large-font-line-height, 20px)";
readonly 'pressed-value-indicator-label-size': "var(--md-sys-typescale-label-large-font-size, 14px)";
readonly 'pressed-value-indicator-label-tracking': "var(--md-sys-typescale-label-large-font-tracking, 0px)";
readonly 'pressed-value-indicator-label-weight': "var(--md-ref-typeface-weight-medium, 500)";
readonly 'pressed-value-indicator-active-bottom-space': "6px";
};
/**
* @version
* Material Design 2
*/
export declare const SliderDefinitionVersion2: {
readonly 'enabled-active-track-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'active-track-height': "4px";
readonly 'active-track-shape': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'disabled-active-track-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-active-track-opacity': "0.38";
readonly 'disabled-handle-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-handle-elevation': "0";
readonly 'disabled-handle-opacity': "0.38";
readonly 'disabled-inactive-track-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-inactive-track-opacity': "0.12";
readonly 'focused-handle-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'focused-state-layer-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'focused-state-layer-opacity': "var(--md-sys-state-focused-state-layer-opacity, 0.1)";
readonly 'enabled-handle-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'enabled-handle-elevation': "1";
readonly 'handle-height': "20px";
readonly 'enabled-handle-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'handle-shape': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'handle-width': "20px";
readonly 'hovered-handle-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'hovered-state-layer-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'hovered-state-layer-opacity': "var(--md-sys-state-hovered-state-layer-opacity, 0.08)";
readonly 'enabled-inactive-track-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
readonly 'inactive-track-height': "4px";
readonly 'inactive-track-shape': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'enabled-label-container-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'enabled-label-container-elevation': "0";
readonly 'label-container-height': "28px";
readonly 'enabled-label-text-color': "var(--md-sys-color-on-primary, light-dark(#ffffff, #00391a))";
readonly 'label-text-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'label-text-line-height': "var(--md-sys-typescale-label-medium-font-line-height, 16px)";
readonly 'label-text-size': "var(--md-sys-typescale-label-medium-font-size, 12px)";
readonly 'label-text-tracking': "var(--md-sys-typescale-label-medium-font-tracking, 0.1px)";
readonly 'label-text-weight': "var(--md-ref-typeface-weight-bold, 700)";
readonly 'pressed-handle-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'pressed-state-layer-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'pressed-state-layer-opacity': "var(--md-sys-state-pressed-state-layer-opacity, 0.1)";
readonly 'state-layer-size': "40px";
readonly 'enabled-track-elevation': "0";
readonly 'enabled-with-overlap-handle-outline-color': "var(--md-sys-color-on-primary, light-dark(#ffffff, #00391a))";
readonly 'with-overlap-handle-outline-width': "1px";
readonly 'enabled-with-tick-marks-active-container-color': "var(--md-sys-color-on-primary, light-dark(#ffffff, #00391a))";
readonly 'enabled-with-tick-marks-active-container-opacity': "0.38";
readonly 'with-tick-marks-container-shape': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'with-tick-marks-container-size': "2px";
readonly 'disabled-with-tick-marks-container-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'disabled-with-tick-marks-container-opacity': "0.38";
readonly 'enabled-with-tick-marks-inactive-container-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
readonly 'enabled-with-tick-marks-inactive-container-opacity': "0.38";
};
//# sourceMappingURL=slider.definition.d.ts.map