@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
57 lines • 4.42 kB
TypeScript
/**
* MD3 Expressive Loading Indicator style tokens, aligned with
* `LoadingIndicatorTokens` from androidx.compose.material3 (v0.7.0) and
* extended to a per-variant color-role scheme.
*
* Layout:
*
* | token | Compose source | value |
* | ---------------- | ------------------------------------ | ------- |
* | `container-size` | `ContainerWidth` / `ContainerHeight` | `48px` |
* | `indicator-size` | `ActiveSize` | `38px` |
* | `container-shape-*`| `ContainerShape` | `CornerFull` |
*
* Appearance mode (selected via the `contained` attribute):
*
* | mode | container background | indicator color |
* | ------------- | --------------------------------------- | ---------------------------------- |
* | uncontained | `enabled-uncontained-container-color` | `enabled-uncontained-indicator-color` |
* | contained | `enabled-contained-container-color` | `enabled-contained-indicator-color` |
*
* Color variant (selected via the `variant` attribute): each variant re-keys
* the three color tokens through a `-{variant}` suffix, in CSS through
* `:host([variant='…'])`. Defaults = `primary`:
*
* | variant | uncontained indicator | contained container | contained indicator |
* | --------- | --------------------- | -------------------- | ---------------------- |
* | primary | `Primary` | `PrimaryContainer` | `OnPrimaryContainer` |
* | secondary | `Secondary` | `SecondaryContainer` | `OnSecondaryContainer` |
* | tertiary | `Tertiary` | `TertiaryContainer` | `OnTertiaryContainer` |
* | error | `Error` | `ErrorContainer` | `OnErrorContainer` |
* | surface | `Surface` | `SurfaceContainer` | `OnSurface` |
*/
export declare const LoadingIndicatorDefinition: {
readonly 'container-size': "48px";
readonly 'indicator-size': "38px";
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 'enabled-uncontained-container-color': "transparent";
readonly 'enabled-uncontained-indicator-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
readonly 'enabled-contained-container-color': "var(--md-sys-color-primary-container, light-dark(#58d584, #58d584))";
readonly 'enabled-contained-indicator-color': "var(--md-sys-color-on-primary-container, light-dark(#00592c, #00592c))";
readonly 'enabled-uncontained-indicator-color-secondary': "var(--md-sys-color-secondary, light-dark(#3c6847, #a2d2ab))";
readonly 'enabled-contained-container-color-secondary': "var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436))";
readonly 'enabled-contained-indicator-color-secondary': "var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0))";
readonly 'enabled-uncontained-indicator-color-tertiary': "var(--md-sys-color-tertiary, light-dark(#8f4d2a, #ffcfba))";
readonly 'enabled-contained-container-color-tertiary': "var(--md-sys-color-tertiary-container, light-dark(#ffa97f, #ffa97f))";
readonly 'enabled-contained-indicator-color-tertiary': "var(--md-sys-color-on-tertiary-container, light-dark(#793c1a, #793c1a))";
readonly 'enabled-uncontained-indicator-color-error': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
readonly 'enabled-contained-container-color-error': "var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a))";
readonly 'enabled-contained-indicator-color-error': "var(--md-sys-color-on-error-container, light-dark(#93000a, #ffdad6))";
readonly 'enabled-uncontained-indicator-color-surface': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
readonly 'enabled-contained-container-color-surface': "var(--md-sys-color-surface-container, light-dark(#e9f0e6, #1b211b))";
readonly 'enabled-contained-indicator-color-surface': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
};
//# sourceMappingURL=loading-indicator.definition.d.ts.map