@sandlada/mdk
Version:
A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.
48 lines (47 loc) • 2.71 kB
TypeScript
import type { ICSSDeclaration } from '../interfaces/css-declaration.interface';
type ShapeDeclaration<K extends string, V extends number | string, U extends string> = `${K}: ${V}${U}${';' | ''}`;
type ShapeVariable<K extends string, V extends number | string, U extends string> = `var(${K}, ${V}${U})`;
export declare class Shape<K extends string, V extends number | string, U extends string> implements ICSSDeclaration<K, V, ShapeDeclaration<K, V, U>, ShapeVariable<K, V, U>> {
readonly Key: K;
readonly Value: V;
readonly Unit: U;
toJSON(): {
Key: K;
Value: V;
Unit: U;
};
ToCSSDeclaration(): `${K}: ${V}${U}`;
ToCSSDeclaration(options: {
Semicolon: true;
}): `${K}: ${V}${U};`;
ToCSSDeclaration(options?: {
Semicolon?: boolean;
}): `${K}: ${V}${U}${';' | ''}`;
ToCSSVariable(): `var(${K}, ${V}${U})`;
ToCSSValue(): string;
toString(): `${K}: ${V}${U}`;
private constructor();
static readonly None: Shape<"--md-sys-shape-corner-none", 0, "px">;
static readonly ExtraSmall: Shape<"--md-sys-shape-corner-extra-small", 4, "px">;
static readonly Small: Shape<"--md-sys-shape-corner-small", 8, "px">;
static readonly Medium: Shape<"--md-sys-shape-corner-medium", 12, "px">;
static readonly Large: Shape<"--md-sys-shape-corner-large", 16, "px">;
static readonly LargeIncreased: Shape<"--md-sys-shape-corner-large-increased", 20, "px">;
static readonly ExtraLarge: Shape<"--md-sys-shape-corner-extra-large", 28, "px">;
static readonly ExtraLargeIncreased: Shape<"--md-sys-shape-corner-extra-large-increased", 32, "px">;
static readonly ExtraExtraLarge: Shape<"--md-sys-shape-corner-extra-extra-large", 48, "px">;
static readonly Full: Shape<"--md-sys-shape-corner-full", "calc(infinity * 1px)", "">;
static readonly AllEnums: {
readonly None: Shape<"--md-sys-shape-corner-none", 0, "px">;
readonly ExtraSmall: Shape<"--md-sys-shape-corner-extra-small", 4, "px">;
readonly Small: Shape<"--md-sys-shape-corner-small", 8, "px">;
readonly Medium: Shape<"--md-sys-shape-corner-medium", 12, "px">;
readonly Large: Shape<"--md-sys-shape-corner-large", 16, "px">;
readonly LargeIncreased: Shape<"--md-sys-shape-corner-large-increased", 20, "px">;
readonly ExtraLarge: Shape<"--md-sys-shape-corner-extra-large", 28, "px">;
readonly ExtraLargeIncreased: Shape<"--md-sys-shape-corner-extra-large-increased", 32, "px">;
readonly ExtraExtraLarge: Shape<"--md-sys-shape-corner-extra-extra-large", 48, "px">;
readonly Full: Shape<"--md-sys-shape-corner-full", "calc(infinity * 1px)", "">;
};
}
export {};