@sandlada/mdk/build/domain/shape.js

A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.

export class Shape {
    Key;
    Value;
    Unit;
    toJSON() { return ({ Key: this.Key, Value: this.Value, Unit: this.Unit }); }
    ToCSSDeclaration({ Semicolon = false } = {}) {
        return `${this.Key}: ${this.Value}${this.Unit}${Semicolon ? ';' : ''}`;
    }
    ToCSSVariable() {
        return `var(${this.Key}, ${this.Value}${this.Unit})`;
    }
    ToCSSValue() {
        return `${this.Value}${this.Unit}`;
    }
    toString() { return this.ToCSSDeclaration(); }
    constructor(Key, Value, Unit) {
        this.Key = Key;
        this.Value = Value;
        this.Unit = Unit;
    }
    static None = new Shape('--md-sys-shape-corner-none', 0, 'px');
    static ExtraSmall = new Shape('--md-sys-shape-corner-extra-small', 4, 'px');
    static Small = new Shape('--md-sys-shape-corner-small', 8, 'px');
    static Medium = new Shape('--md-sys-shape-corner-medium', 12, 'px');
    static Large = new Shape('--md-sys-shape-corner-large', 16, 'px');
    static LargeIncreased = new Shape('--md-sys-shape-corner-large-increased', 20, 'px');
    static ExtraLarge = new Shape('--md-sys-shape-corner-extra-large', 28, 'px');
    static ExtraLargeIncreased = new Shape('--md-sys-shape-corner-extra-large-increased', 32, 'px');
    static ExtraExtraLarge = new Shape('--md-sys-shape-corner-extra-extra-large', 48, 'px');
    static Full = new Shape('--md-sys-shape-corner-full', 'calc(infinity * 1px)', '');
    static AllEnums = {
        None: Shape.None,
        ExtraSmall: Shape.ExtraSmall,
        Small: Shape.Small,
        Medium: Shape.Medium,
        Large: Shape.Large,
        LargeIncreased: Shape.LargeIncreased,
        ExtraLarge: Shape.ExtraLarge,
        ExtraLargeIncreased: Shape.ExtraLargeIncreased,
        ExtraExtraLarge: Shape.ExtraExtraLarge,
        Full: Shape.Full
    };
}