@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
68 lines • 3.87 kB
TypeScript
/**
* Style definition for `mdc-tooltip`.
*
* Based on Material Components for Android `Widget.Material3.Tooltip`:
*
* Plain tooltip:
* - Background: InverseSurface (colorPrimary in M3 theme overlay)
* - Text: InverseOnSurface (colorOnPrimary)
* - Shape: Full (pill shape)
* - Padding: 4dp
* - Min size: 28dp
* - Margin: 2dp
* - Text: body-small
*
* Rich tooltip (from Jetpack Compose):
* - Background: SurfaceContainer
* - Shape: Medium (12dp)
* - Elevation: Level 2
* - Padding: 16dp
* - Text: body-medium
* - Headline: title-small
*/
export declare const PlainTooltipDefinition: {
readonly 'enabled-container-color': "var(--md-sys-color-inverse-surface, light-dark(#2b322c, #dde4db))";
readonly 'container-shape-start-start': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'container-shape-start-end': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'container-shape-end-start': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'container-shape-end-end': "var(--md-sys-shape-corner-full, calc(infinity * 1px))";
readonly 'container-padding-inline': "8px";
readonly 'container-padding-block': "4px";
readonly 'container-min-width': "28px";
readonly 'container-min-height': "28px";
readonly 'container-max-width': "200px";
readonly 'container-margin': "2px";
readonly 'label-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'label-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
readonly 'label-weight': "var(--md-ref-typeface-weight-regular, 400)";
readonly 'label-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
readonly 'label-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
readonly 'enabled-label-color': "var(--md-sys-color-inverse-on-surface, light-dark(#ecf3e9, #2b322c))";
};
export declare const RichTooltipDefinition: {
readonly 'enabled-container-color': "var(--md-sys-color-surface-container, light-dark(#e9f0e6, #1b211b))";
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 'enabled-container-elevation': "2";
readonly 'enabled-container-shadow-color': "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
readonly 'container-padding': "16px";
readonly 'container-max-width': "320px";
readonly 'label-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'label-size': "var(--md-sys-typescale-body-medium-font-size, 14px)";
readonly 'label-weight': "var(--md-ref-typeface-weight-regular, 400)";
readonly 'label-tracking': "var(--md-sys-typescale-body-medium-font-tracking, 0px)";
readonly 'label-line-height': "var(--md-sys-typescale-body-medium-font-line-height, 20px)";
readonly 'enabled-label-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'headline-font': "var(--md-ref-typeface-font-plain, Roboto)";
readonly 'headline-size': "var(--md-sys-typescale-title-small-font-size, 14px)";
readonly 'headline-weight': "var(--md-ref-typeface-weight-medium, 500)";
readonly 'headline-tracking': "var(--md-sys-typescale-title-small-font-tracking, 0px)";
readonly 'headline-line-height': "var(--md-sys-typescale-title-small-font-line-height, 20px)";
readonly 'enabled-headline-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'headline-padding-block': "8px";
readonly 'actions-gap': "8px";
readonly 'actions-padding-block': "8px";
};
//# sourceMappingURL=tooltip.definition.d.ts.map