@sandlada/mdk
Version:
A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.
99 lines (98 loc) • 13.2 kB
JavaScript
import { Typeface } from './typeface';
class FontCSSDeclaration {
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;
}
}
export class Typescale {
Font;
FontSize;
Tracking;
LineHeight;
FontWeight;
constructor(font, fontSize, tracking, lineHeight, fontWeight) {
this.Font = font;
this.FontSize = fontSize;
this.Tracking = tracking;
this.LineHeight = lineHeight;
this.FontWeight = fontWeight;
}
static DisplayLarge = new Typescale(Typeface.FontBrand, new FontCSSDeclaration('--md-sys-typescale-display-large-font-size', 57, 'px'), new FontCSSDeclaration('--md-sys-typescale-display-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-display-large-font-line-height', 64, 'px'), Typeface.WeightRegular);
static DisplayMedium = new Typescale(Typeface.FontBrand, new FontCSSDeclaration('--md-sys-typescale-display-medium-font-size', 45, 'px'), new FontCSSDeclaration('--md-sys-typescale-display-medium-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-display-medium-font-line-height', 52, 'px'), Typeface.WeightRegular);
static DisplaySmall = new Typescale(Typeface.FontBrand, new FontCSSDeclaration('--md-sys-typescale-display-small-font-size', 36, 'px'), new FontCSSDeclaration('--md-sys-typescale-display-small-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-display-small-font-line-height', 44, 'px'), Typeface.WeightRegular);
static HeadlineLarge = new Typescale(Typeface.FontBrand, new FontCSSDeclaration('--md-sys-typescale-headline-large-font-size', 32, 'px'), new FontCSSDeclaration('--md-sys-typescale-headline-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-headline-large-font-line-height', 40, 'px'), Typeface.WeightRegular);
static HeadlineMedium = new Typescale(Typeface.FontBrand, new FontCSSDeclaration('--md-sys-typescale-headline-medium-font-size', 28, 'px'), new FontCSSDeclaration('--md-sys-typescale-headline-medium-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-headline-medium-font-line-height', 36, 'px'), Typeface.WeightRegular);
static HeadlineSmall = new Typescale(Typeface.FontBrand, new FontCSSDeclaration('--md-sys-typescale-headline-small-font-size', 24, 'px'), new FontCSSDeclaration('--md-sys-typescale-headline-small-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-headline-small-font-line-height', 32, 'px'), Typeface.WeightRegular);
static TitleLarge = new Typescale(Typeface.FontBrand, new FontCSSDeclaration('--md-sys-typescale-title-large-font-size', 22, 'px'), new FontCSSDeclaration('--md-sys-typescale-title-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-title-large-font-line-height', 28, 'px'), Typeface.WeightRegular);
static TitleMedium = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-title-medium-font-size', 16, 'px'), new FontCSSDeclaration('--md-sys-typescale-title-medium-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-title-medium-font-line-height', 24, 'px'), Typeface.WeightMedium);
static TitleSmall = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-title-small-font-size', 14, 'px'), new FontCSSDeclaration('--md-sys-typescale-title-small-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-title-small-font-line-height', 20, 'px'), Typeface.WeightMedium);
static BodyLarge = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-body-large-font-size', 16, 'px'), new FontCSSDeclaration('--md-sys-typescale-body-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-body-large-font-line-height', 24, 'px'), Typeface.WeightRegular);
static BodyMedium = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-body-medium-font-size', 14, 'px'), new FontCSSDeclaration('--md-sys-typescale-body-medium-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-body-medium-font-line-height', 20, 'px'), Typeface.WeightRegular);
static BodySmall = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-body-small-font-size', 12, 'px'), new FontCSSDeclaration('--md-sys-typescale-body-small-font-tracking', 0.1, 'px'), new FontCSSDeclaration('--md-sys-typescale-body-small-font-line-height', 16, 'px'), Typeface.WeightRegular);
static LabelLarge = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-label-large-font-size', 14, 'px'), new FontCSSDeclaration('--md-sys-typescale-label-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-label-large-font-line-height', 20, 'px'), Typeface.WeightMedium);
static LabelMedium = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-label-medium-font-size', 12, 'px'), new FontCSSDeclaration('--md-sys-typescale-label-medium-font-tracking', 0.1, 'px'), new FontCSSDeclaration('--md-sys-typescale-label-medium-font-line-height', 16, 'px'), Typeface.WeightBold);
static LabelSmall = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-label-small-font-size', 11, 'px'), new FontCSSDeclaration('--md-sys-typescale-label-small-font-tracking', 0.1, 'px'), new FontCSSDeclaration('--md-sys-typescale-label-small-font-line-height', 16, 'px'), Typeface.WeightBold);
static EmphasizedDisplayLarge = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-display-large-font-size', 57, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-display-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-display-large-font-line-height', 64, 'px'), Typeface.WeightMedium);
static EmphasizedDisplayMedium = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-display-medium-font-size', 45, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-display-medium-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-display-medium-font-line-height', 52, 'px'), Typeface.WeightMedium);
static EmphasizedDisplaySmall = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-display-small-font-size', 36, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-display-small-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-display-small-font-line-height', 44, 'px'), Typeface.WeightMedium);
static EmphasizedHeadlineLarge = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-large-font-size', 32, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-large-font-line-height', 40, 'px'), Typeface.WeightMedium);
static EmphasizedHeadlineMedium = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-medium-font-size', 28, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-medium-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-medium-font-line-height', 36, 'px'), Typeface.WeightMedium);
static EmphasizedHeadlineSmall = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-small-font-size', 24, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-small-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-headline-small-font-line-height', 32, 'px'), Typeface.WeightMedium);
static EmphasizedTitleLarge = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-title-large-font-size', 22, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-title-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-title-large-font-line-height', 28, 'px'), Typeface.WeightMedium);
static EmphasizedTitleMedium = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-title-medium-font-size', 16, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-title-medium-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-title-medium-font-line-height', 24, 'px'), Typeface.WeightBold);
static EmphasizedTitleSmall = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-title-small-font-size', 14, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-title-small-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-title-small-font-line-height', 20, 'px'), Typeface.WeightBold);
static EmphasizedBodyLarge = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-body-large-font-size', 16, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-body-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-body-large-font-line-height', 24, 'px'), Typeface.WeightMedium);
static EmphasizedBodyMedium = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-body-medium-font-size', 14, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-body-medium-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-body-medium-font-line-height', 20, 'px'), Typeface.WeightMedium);
static EmphasizedBodySmall = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-body-small-font-size', 12, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-body-small-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-body-small-font-line-height', 16, 'px'), Typeface.WeightMedium);
static EmphasizedLabelLarge = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-label-large-font-size', 14, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-label-large-font-tracking', 0, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-label-large-font-line-height', 20, 'px'), Typeface.WeightBold);
static EmphasizedLabelMedium = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-label-medium-font-size', 12, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-label-medium-font-tracking', 0.1, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-label-medium-font-line-height', 16, 'px'), Typeface.WeightBold);
static EmphasizedLabelSmall = new Typescale(Typeface.FontPlain, new FontCSSDeclaration('--md-sys-typescale-emphasized-label-small-font-size', 11, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-label-small-font-tracking', 0.1, 'px'), new FontCSSDeclaration('--md-sys-typescale-emphasized-label-small-font-line-height', 16, 'px'), Typeface.WeightBold);
static AllEnums = {
DisplayLarge: Typescale.DisplayLarge,
DisplayMedium: Typescale.DisplayMedium,
DisplaySmall: Typescale.DisplaySmall,
HeadlineLarge: Typescale.HeadlineLarge,
HeadlineMedium: Typescale.HeadlineMedium,
HeadlineSmall: Typescale.HeadlineSmall,
TitleLarge: Typescale.TitleLarge,
TitleMedium: Typescale.TitleMedium,
TitleSmall: Typescale.TitleSmall,
BodyLarge: Typescale.BodyLarge,
BodyMedium: Typescale.BodyMedium,
BodySmall: Typescale.BodySmall,
LabelLarge: Typescale.LabelLarge,
LabelMedium: Typescale.LabelMedium,
LabelSmall: Typescale.LabelSmall,
EmphasizedDisplayLarge: Typescale.EmphasizedDisplayLarge,
EmphasizedDisplayMedium: Typescale.EmphasizedDisplayMedium,
EmphasizedDisplaySmall: Typescale.EmphasizedDisplaySmall,
EmphasizedHeadlineLarge: Typescale.EmphasizedHeadlineLarge,
EmphasizedHeadlineMedium: Typescale.EmphasizedHeadlineMedium,
EmphasizedHeadlineSmall: Typescale.EmphasizedHeadlineSmall,
EmphasizedTitleLarge: Typescale.EmphasizedTitleLarge,
EmphasizedTitleMedium: Typescale.EmphasizedTitleMedium,
EmphasizedTitleSmall: Typescale.EmphasizedTitleSmall,
EmphasizedBodyLarge: Typescale.EmphasizedBodyLarge,
EmphasizedBodyMedium: Typescale.EmphasizedBodyMedium,
EmphasizedBodySmall: Typescale.EmphasizedBodySmall,
EmphasizedLabelLarge: Typescale.EmphasizedLabelLarge,
EmphasizedLabelMedium: Typescale.EmphasizedLabelMedium,
EmphasizedLabelSmall: Typescale.EmphasizedLabelSmall
};
}