@sandlada/mdk
Version:
A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.
42 lines (41 loc) • 1.84 kB
JavaScript
export class State {
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 DraggedStateLayerOpacity = new State('--md-sys-state-dragged-state-layer-opacity', 0.16, '');
static PressedStateLayerOpacity = new State('--md-sys-state-pressed-state-layer-opacity', 0.10, '');
static FocusedStateLayerOpacity = new State('--md-sys-state-focused-state-layer-opacity', 0.10, '');
static HoveredStateLayerOpacity = new State('--md-sys-state-hovered-state-layer-opacity', 0.08, '');
static DisabledStateLayerOpacity = new State('--md-sys-state-disabled-state-layer-opacity', 0.38, '');
static FocusIndicator = {
Thickness: new State('--md-sys-state-focus-indicator-thickness', 3, 'px'),
OuterOffset: new State('--md-sys-state-focus-indicator-outer-offset', 2, 'px'),
};
static AllEnums = {
DraggedStateLayerOpacity: this.DraggedStateLayerOpacity,
PressedStateLayerOpacity: this.PressedStateLayerOpacity,
FocusedStateLayerOpacity: this.FocusedStateLayerOpacity,
HoveredStateLayerOpacity: this.HoveredStateLayerOpacity,
DisabledStateLayerOpacity: this.DisabledStateLayerOpacity,
FocusIndicator: {
Thickness: this.FocusIndicator.Thickness,
OuterOffset: this.FocusIndicator.OuterOffset,
}
};
}