@sandlada/mdk
Version:
A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.
149 lines (148 loc) • 8.15 kB
JavaScript
import { DefaultColorContract } from '../consts/default-color-contract.const';
class _Color {
Key;
Value;
toJSON() { return { Key: this.Key, Value: this.Value }; }
toString() { return this.Value; }
ToCSSDeclaration({ Semicolon = false } = {}) {
return `${this.Key}: ${this.Value}${Semicolon ? ';' : ''}`;
}
ToCSSVariable() {
return `var(${this.Key}, ${this.Value})`;
}
constructor(Key, Value) {
this.Key = Key;
this.Value = Value;
}
}
/**
* @example
* Usage:
* ```ts
* const YourAppColor = Color.From({
* // Optionally, you can override the default color contract by providing a partial contract object to the `From` method.
* Primary: { Key: `--hum-hum`, Value: `abcdefgHumHumHum` },
* })
*
* console.log(YourAppColor.Primary.Value) // abcdefgHumHumHum
* console.log(YourAppColor.Primary.Key) // --hum-hum
* console.log(YourAppColor.Primary.ToCSSDeclaration()) // --hum-hum: abcdefgHumHumHum
* console.log(YourAppColor.Primary.ToCSSVariable()) // var(--hum-hum, abcdefgHumHumHum)
* ```
*/
export class Color {
/**
* {
* OnPrimary: _Color({ Key: `--md-sys-color-on-primary`, Value: `light-dark(#ffffff, #00391a)` }),
* ...
* }
*/
contract;
constructor(contract) {
this.contract = contract;
}
static From(contract = {}) {
const raw = {
...DefaultColorContract,
...contract
};
const colors = Object.fromEntries(Object.entries(raw).map(([property, Value]) => [
property,
new _Color(Value.Key, Value.Value)
]));
return new Color(colors);
}
get PrimaryKeyColor() { return this.contract.PrimaryKeyColor; }
get SecondaryKeyColor() { return this.contract.SecondaryKeyColor; }
get TertiaryKeyColor() { return this.contract.TertiaryKeyColor; }
get ErrorKeyColor() { return this.contract.ErrorKeyColor; }
get NeutralKeyColor() { return this.contract.NeutralKeyColor; }
get NeutralVariantKeyColor() { return this.contract.NeutralVariantKeyColor; }
get Background() { return this.contract.Background; }
get Error() { return this.contract.Error; }
get ErrorContainer() { return this.contract.ErrorContainer; }
get ErrorDim() { return this.contract.ErrorDim; }
get InverseOnSurface() { return this.contract.InverseOnSurface; }
get InversePrimary() { return this.contract.InversePrimary; }
get InverseSurface() { return this.contract.InverseSurface; }
get OnBackground() { return this.contract.OnBackground; }
get OnError() { return this.contract.OnError; }
get OnErrorContainer() { return this.contract.OnErrorContainer; }
get OnPrimary() { return this.contract.OnPrimary; }
get OnPrimaryContainer() { return this.contract.OnPrimaryContainer; }
get OnPrimaryFixed() { return this.contract.OnPrimaryFixed; }
get OnPrimaryFixedVariant() { return this.contract.OnPrimaryFixedVariant; }
get OnSecondary() { return this.contract.OnSecondary; }
get OnSecondaryContainer() { return this.contract.OnSecondaryContainer; }
get OnSecondaryFixed() { return this.contract.OnSecondaryFixed; }
get OnSecondaryFixedVariant() { return this.contract.OnSecondaryFixedVariant; }
get OnSurface() { return this.contract.OnSurface; }
get OnSurfaceVariant() { return this.contract.OnSurfaceVariant; }
get OnTertiary() { return this.contract.OnTertiary; }
get OnTertiaryContainer() { return this.contract.OnTertiaryContainer; }
get OnTertiaryFixed() { return this.contract.OnTertiaryFixed; }
get OnTertiaryFixedVariant() { return this.contract.OnTertiaryFixedVariant; }
get Outline() { return this.contract.Outline; }
get OutlineVariant() { return this.contract.OutlineVariant; }
get Primary() { return this.contract.Primary; }
get PrimaryContainer() { return this.contract.PrimaryContainer; }
get PrimaryDim() { return this.contract.PrimaryDim; }
get PrimaryFixed() { return this.contract.PrimaryFixed; }
get PrimaryFixedDim() { return this.contract.PrimaryFixedDim; }
get Scrim() { return this.contract.Scrim; }
get Secondary() { return this.contract.Secondary; }
get SecondaryContainer() { return this.contract.SecondaryContainer; }
get SecondaryDim() { return this.contract.SecondaryDim; }
get SecondaryFixed() { return this.contract.SecondaryFixed; }
get SecondaryFixedDim() { return this.contract.SecondaryFixedDim; }
get Shadow() { return this.contract.Shadow; }
get Surface() { return this.contract.Surface; }
get SurfaceBright() { return this.contract.SurfaceBright; }
get SurfaceContainer() { return this.contract.SurfaceContainer; }
get SurfaceContainerHigh() { return this.contract.SurfaceContainerHigh; }
get SurfaceContainerHighest() { return this.contract.SurfaceContainerHighest; }
get SurfaceContainerLow() { return this.contract.SurfaceContainerLow; }
get SurfaceContainerLowest() { return this.contract.SurfaceContainerLowest; }
get SurfaceDim() { return this.contract.SurfaceDim; }
get SurfaceTint() { return this.contract.SurfaceTint; }
get SurfaceVariant() { return this.contract.SurfaceVariant; }
get Tertiary() { return this.contract.Tertiary; }
get TertiaryContainer() { return this.contract.TertiaryContainer; }
get TertiaryDim() { return this.contract.TertiaryDim; }
get TertiaryFixed() { return this.contract.TertiaryFixed; }
get TertiaryFixedDim() { return this.contract.TertiaryFixedDim; }
get AllEnums() {
return {
PrimaryKeyColor: this.PrimaryKeyColor, SecondaryKeyColor: this.SecondaryKeyColor,
TertiaryKeyColor: this.TertiaryKeyColor, ErrorKeyColor: this.ErrorKeyColor,
NeutralKeyColor: this.NeutralKeyColor, NeutralVariantKeyColor: this.NeutralVariantKeyColor,
Background: this.Background, Error: this.Error,
ErrorContainer: this.ErrorContainer, ErrorDim: this.ErrorDim,
InverseOnSurface: this.InverseOnSurface, InversePrimary: this.InversePrimary,
InverseSurface: this.InverseSurface, OnBackground: this.OnBackground,
OnError: this.OnError, OnErrorContainer: this.OnErrorContainer,
OnPrimary: this.OnPrimary, OnPrimaryContainer: this.OnPrimaryContainer,
OnPrimaryFixed: this.OnPrimaryFixed, OnPrimaryFixedVariant: this.OnPrimaryFixedVariant,
OnSecondary: this.OnSecondary, OnSecondaryContainer: this.OnSecondaryContainer,
OnSecondaryFixed: this.OnSecondaryFixed, OnSecondaryFixedVariant: this.OnSecondaryFixedVariant,
OnSurface: this.OnSurface, OnSurfaceVariant: this.OnSurfaceVariant,
OnTertiary: this.OnTertiary, OnTertiaryContainer: this.OnTertiaryContainer,
OnTertiaryFixed: this.OnTertiaryFixed, OnTertiaryFixedVariant: this.OnTertiaryFixedVariant,
Outline: this.Outline, OutlineVariant: this.OutlineVariant,
Primary: this.Primary, PrimaryContainer: this.PrimaryContainer,
PrimaryDim: this.PrimaryDim, PrimaryFixed: this.PrimaryFixed,
PrimaryFixedDim: this.PrimaryFixedDim, Scrim: this.Scrim,
Secondary: this.Secondary, SecondaryContainer: this.SecondaryContainer,
SecondaryDim: this.SecondaryDim, SecondaryFixed: this.SecondaryFixed,
SecondaryFixedDim: this.SecondaryFixedDim, Shadow: this.Shadow,
Surface: this.Surface, SurfaceBright: this.SurfaceBright,
SurfaceContainer: this.SurfaceContainer, SurfaceContainerHigh: this.SurfaceContainerHigh,
SurfaceContainerHighest: this.SurfaceContainerHighest, SurfaceContainerLow: this.SurfaceContainerLow,
SurfaceContainerLowest: this.SurfaceContainerLowest, SurfaceDim: this.SurfaceDim,
SurfaceTint: this.SurfaceTint, SurfaceVariant: this.SurfaceVariant,
Tertiary: this.Tertiary, TertiaryContainer: this.TertiaryContainer,
TertiaryDim: this.TertiaryDim, TertiaryFixed: this.TertiaryFixed,
TertiaryFixedDim: this.TertiaryFixedDim,
};
}
}