@sandlada/material-token-generator/build/index.js

Use the @material/material-color-utilities tool to create a set of tokens based on material design.

import{Hct as t,TonalPalette as e,hexFromArgb as r,DynamicScheme as a,MaterialDynamicColors as i,SchemeRainbow as n,SchemeFruitSalad as s,SchemeContent as o,SchemeFidelity as c,SchemeExpressive as l,SchemeVibrant as u,SchemeTonalSpot as y,SchemeNeutral as h,SchemeMonochrome as d}from"@material/material-color-utilities";const m={Reduced:-1,Default:0,Medium:.5,High:1},P={Monochrome:0,Neutral:1,TonalSpot:2,Vibrant:3,Expressive:4,Fidelity:5,Content:6,Rainbow:7,FruitSalad:8},f=t=>({type:"property",data:{syntax:"*",initialValue:"",...t}}),p=t=>{let e="";if("string"==typeof t)return t;if("object"==typeof t)for(const[r,a]of Object.entries(t))if(Object.hasOwn(a,"type")&&Object.hasOwn(a,"data"))if("style"===a.type){const[t,r]=Object.entries(a.data)[0];e+=`${t}: ${r};`}else"property"===a.type&&(e+=`@property ${a.data.name} { initial-value: ${a.data.initialValue}; syntax: ${a.data.syntax}; inherits: ${a.data.inherits}; }`);else Array.isArray(t)||"string"!=typeof a?"string"==typeof a?e+=";"===a[a.length-1]?a:`${a};`:"string"==typeof r&&"object"==typeof a&&(e+=`${Object.keys(a)}: ${Object.values(a)};`):e+=":"===r[r.length-1]?"key":`${r}: `+(";"===a[a.length-1]?a:`${a};`);return e},C=(t,e)=>{const r=[],a=[],i=[];return r.push("0","1","2","3","4","5","6","7","8","9"),a.push("_"),x(v(t.split("").map((t,e)=>"-"===t||a.includes(t)?"-":r.includes(t)?t:i.includes(t)?"":t.toUpperCase()===t?`${0!==e?"-":""}${t.toLowerCase()}`:t).join("")),["-"])},x=(t,e)=>t.split("").reduce((t,r)=>`${t}${t[t.length-1]===r&&e.includes(r)?"":r}`),v=t=>t.replace(/\s+/g,"");class _{_sourceColorHct;_isDark;_contrastLevel;_variant;_prefix;_primaryPalette;_secondaryPalette;_tertiaryPalette;_neutralPalette;_neutralVariantPalette;_levels;constructor(r){this._sourceColorHct=r?.sourceColorHct??t.from(10,50,90),this._contrastLevel=r?.contrastLevel??m.Default,this._isDark=r?.isDark??!1,this._variant=r?.variant??P.Content,this._prefix=r?.prefix??"md-sys-palette",this._primaryPalette=r?.primaryPalette??e.fromHct(t.from(0,60,90)),this._secondaryPalette=r?.secondaryPalette??e.fromHct(t.from(10,50,90)),this._tertiaryPalette=r?.tertiaryPalette??e.fromHct(t.from(20,40,90)),this._neutralPalette=r?.neutralPalette??e.fromHct(t.from(30,30,90)),this._neutralVariantPalette=r?.neutralVariantPalette??e.fromHct(t.from(40,20,90)),this._levels=r?.levels??[0,1,2,3,4,5,10,20,30,40,50,60,70,80,90,95,96,97,98,99,100]}cssRecord(){const t={};for(const[e,r]of Object.entries(this.tokens(!0,!0)))t[e.replace("-","")]={name:`--${this.prefix}-${e}`,value:r};return t}cssText(){const t=this.cssRecord(),e=Object.values(t).reduce((t,e)=>({...t,[e.name]:e.value}),{});return p(e)}cssPropertyRecord(){const t={};for(const[e,r]of Object.entries(this.tokens(!0,!0)))t[e.replace("-","")]={name:`--${this.prefix}-${e}`,value:{name:`--${this.prefix}-${e}`,initialValue:r,inherits:!1,syntax:"<color>"}};return t}cssPropertyText(){return p(this.cssCreatePropertyRecord())}cssCreatePropertyRecord(){const t=this.cssRecord();return Object.values(t).map(t=>f({name:t.name,initialValue:t.value,inherits:!1,syntax:"<color>"}))}tokens(t=!1,e=!1){const r=this.scheme;if(t){const t={};for(const a of this.levels){const i=this.getValuesFromSchemeAndTone(r,a),n=e?`-${a}`:a;t[`primary${n}`]=i.primary,t[`secondary${n}`]=i.secondary,t[`tertiary${n}`]=i.tertiary,t[`error${n}`]=i.error,t[`neutral${n}`]=i.neutral,t[`neutralVariant${n}`]=i.neutralVariant}return t}{const t={primary:{},secondary:{},tertiary:{},error:{},neutral:{},neutralVariant:{}};for(const a of this.levels){const i=this.getValuesFromSchemeAndTone(r,a),n=e?`-${a}`:a;t.primary[`tone${n}`]=i.primary,t.secondary[`tone${n}`]=i.secondary,t.tertiary[`tone${n}`]=i.tertiary,t.error[`tone${n}`]=i.error,t.neutral[`tone${n}`]=i.neutral,t.neutralVariant[`tone${n}`]=i.neutralVariant}return t}}getValuesFromSchemeAndTone(t,e){return{primary:r(t.primaryPalette.tone(e)),secondary:r(t.secondaryPalette.tone(e)),tertiary:r(t.tertiaryPalette.tone(e)),error:r(t.errorPalette.tone(e)),neutral:r(t.neutralPalette.tone(e)),neutralVariant:r(t.neutralVariantPalette.tone(e))}}get scheme(){return new a({sourceColorArgb:this.sourceColorHct.toInt(),primaryPalette:this.primaryPalette,secondaryPalette:this.secondaryPalette,tertiaryPalette:this.tertiaryPalette,neutralPalette:this.neutralPalette,neutralVariantPalette:this.neutralVariantPalette,isDark:this.isDark,contrastLevel:this.contrastLevel??m.Default,variant:this.variant})}get sourceColorHct(){return this._sourceColorHct}set sourceColorHct(t){this._sourceColorHct=t}get isDark(){return this._isDark}set isDark(t){this._isDark=t}get contrastLevel(){return this._contrastLevel}set contrastLevel(t){this._contrastLevel=t}get variant(){return this._variant}set variant(t){this._variant=t}get primaryPalette(){return this._primaryPalette}set primaryPalette(t){this._primaryPalette=t}get secondaryPalette(){return this._secondaryPalette}set secondaryPalette(t){this._secondaryPalette=t}get tertiaryPalette(){return this._tertiaryPalette}set tertiaryPalette(t){this._tertiaryPalette=t}get neutralPalette(){return this._neutralPalette}set neutralPalette(t){this._neutralPalette=t}get neutralVariantPalette(){return this._neutralVariantPalette}set neutralVariantPalette(t){this._neutralVariantPalette=t}get levels(){return this._levels}set levels(t){this._levels=t}get prefix(){return this._prefix}set prefix(t){this._prefix=t}}class g{static primaryPaletteKeyColor=i.primaryPaletteKeyColor;static secondaryPaletteKeyColor=i.secondaryPaletteKeyColor;static tertiaryPaletteKeyColor=i.tertiaryPaletteKeyColor;static neutralPaletteKeyColor=i.neutralPaletteKeyColor;static neutralVariantPaletteKeyColor=i.neutralVariantPaletteKeyColor;static background=i.background;static onBackground=i.onBackground;static surface=i.surface;static surfaceDim=i.surfaceDim;static surfaceBright=i.surfaceBright;static surfaceContainerLowest=i.surfaceContainerLowest;static surfaceContainerLow=i.surfaceContainerLow;static surfaceContainer=i.surfaceContainer;static surfaceContainerHigh=i.surfaceContainerHigh;static surfaceContainerHighest=i.surfaceContainerHighest;static onSurface=i.onSurface;static surfaceVariant=i.surfaceVariant;static onSurfaceVariant=i.onSurfaceVariant;static inverseSurface=i.inverseSurface;static inverseOnSurface=i.inverseOnSurface;static outline=i.outline;static outlineVariant=i.outlineVariant;static shadow=i.shadow;static scrim=i.scrim;static surfaceTint=i.surfaceTint;static primary=i.primary;static onPrimary=i.onPrimary;static primaryContainer=i.primaryContainer;static onPrimaryContainer=i.onPrimaryContainer;static inversePrimary=i.inversePrimary;static secondary=i.secondary;static onSecondary=i.onSecondary;static secondaryContainer=i.secondaryContainer;static onSecondaryContainer=i.onSecondaryContainer;static tertiary=i.tertiary;static onTertiary=i.onTertiary;static tertiaryContainer=i.tertiaryContainer;static onTertiaryContainer=i.onTertiaryContainer;static error=i.error;static onError=i.onError;static errorContainer=i.errorContainer;static onErrorContainer=i.onErrorContainer;static primaryFixed=i.primaryFixed;static primaryFixedDim=i.primaryFixedDim;static onPrimaryFixed=i.onPrimaryFixed;static onPrimaryFixedVariant=i.onPrimaryFixedVariant;static secondaryFixed=i.secondaryFixed;static secondaryFixedDim=i.secondaryFixedDim;static onSecondaryFixed=i.onSecondaryFixed;static onSecondaryFixedVariant=i.onSecondaryFixedVariant;static tertiaryFixed=i.tertiaryFixed;static tertiaryFixedDim=i.tertiaryFixedDim;static onTertiaryFixed=i.onTertiaryFixed;static onTertiaryFixedVariant=i.onTertiaryFixedVariant;static get values(){return{primaryPaletteKeyColor:this.primaryPaletteKeyColor,secondaryPaletteKeyColor:this.secondaryPaletteKeyColor,tertiaryPaletteKeyColor:this.tertiaryPaletteKeyColor,neutralPaletteKeyColor:this.neutralPaletteKeyColor,neutralVariantPaletteKeyColor:this.neutralVariantPaletteKeyColor,background:this.background,onBackground:this.onBackground,surface:this.surface,surfaceDim:this.surfaceDim,surfaceBright:this.surfaceBright,surfaceContainerLowest:this.surfaceContainerLowest,surfaceContainerLow:this.surfaceContainerLow,surfaceContainer:this.surfaceContainer,surfaceContainerHigh:this.surfaceContainerHigh,surfaceContainerHighest:this.surfaceContainerHighest,onSurface:this.onSurface,surfaceVariant:this.surfaceVariant,onSurfaceVariant:this.onSurfaceVariant,inverseSurface:this.inverseSurface,inverseOnSurface:this.inverseOnSurface,outline:this.outline,outlineVariant:this.outlineVariant,shadow:this.shadow,scrim:this.scrim,surfaceTint:this.surfaceTint,primary:this.primary,onPrimary:this.onPrimary,primaryContainer:this.primaryContainer,onPrimaryContainer:this.onPrimaryContainer,inversePrimary:this.inversePrimary,secondary:this.secondary,onSecondary:this.onSecondary,secondaryContainer:this.secondaryContainer,onSecondaryContainer:this.onSecondaryContainer,tertiary:this.tertiary,onTertiary:this.onTertiary,tertiaryContainer:this.tertiaryContainer,onTertiaryContainer:this.onTertiaryContainer,error:this.error,onError:this.onError,errorContainer:this.errorContainer,onErrorContainer:this.onErrorContainer,primaryFixed:this.primaryFixed,primaryFixedDim:this.primaryFixedDim,onPrimaryFixed:this.onPrimaryFixed,onPrimaryFixedVariant:this.onPrimaryFixedVariant,secondaryFixed:this.secondaryFixed,secondaryFixedDim:this.secondaryFixedDim,onSecondaryFixed:this.onSecondaryFixed,onSecondaryFixedVariant:this.onSecondaryFixedVariant,tertiaryFixed:this.tertiaryFixed,tertiaryFixedDim:this.tertiaryFixedDim,onTertiaryFixed:this.onTertiaryFixed,onTertiaryFixedVariant:this.onTertiaryFixedVariant}}static get array(){return[g.primaryPaletteKeyColor,g.secondaryPaletteKeyColor,g.tertiaryPaletteKeyColor,g.neutralPaletteKeyColor,g.neutralVariantPaletteKeyColor,g.background,g.onBackground,g.surface,g.surfaceDim,g.surfaceBright,g.surfaceContainerLowest,g.surfaceContainerLow,g.surfaceContainer,g.surfaceContainerHigh,g.surfaceContainerHighest,g.onSurface,g.surfaceVariant,g.onSurfaceVariant,g.inverseSurface,g.inverseOnSurface,g.outline,g.outlineVariant,g.shadow,g.scrim,g.surfaceTint,g.primary,g.onPrimary,g.primaryContainer,g.onPrimaryContainer,g.inversePrimary,g.secondary,g.onSecondary,g.secondaryContainer,g.onSecondaryContainer,g.tertiary,g.onTertiary,g.tertiaryContainer,g.onTertiaryContainer,g.error,g.onError,g.errorContainer,g.onErrorContainer,g.primaryFixed,g.primaryFixedDim,g.onPrimaryFixed,g.onPrimaryFixedVariant,g.secondaryFixed,g.secondaryFixedDim,g.onSecondaryFixed,g.onSecondaryFixedVariant,g.tertiaryFixed,g.tertiaryFixedDim,g.onTertiaryFixed,g.onTertiaryFixedVariant]}static get iterator(){return()=>{let t=0;return{next:()=>t>=Object.keys(g.values).length?{value:void 0,done:!0}:{value:g.array[t++],done:!1},return:e=>(t=0,{value:void 0,done:!0})}}}constructor(){}[Symbol.iterator](){return g.iterator()}static[Symbol.iterator](){return g.iterator()}static get json(){return JSON.stringify(g.values)}}class V{_sourceColorHct;_isDark;_contrastLevel;_variant;_prefix;_excludedTokens;_customTokens;_primaryPalette;_secondaryPalette;_tertiaryPalette;_neutralPalette;_neutralVariantPalette;constructor(r){this._sourceColorHct=r?.sourceColorHct??t.from(10,50,90),this._contrastLevel=r?.contrastLevel??m.Default,this._isDark=r?.isDark??!1,this._variant=r?.variant??P.Content,this._prefix=r?.prefix??"md-sys-color",this._excludedTokens=r?.excludedTokens??[],this._customTokens=r?.customTokens??{},this._primaryPalette=r?.primaryPalette??e.fromHct(t.from(50,75,50)),this._secondaryPalette=r?.secondaryPalette??e.fromHct(t.from(150,50,50)),this._tertiaryPalette=r?.tertiaryPalette??e.fromHct(t.from(250,45,50)),this._neutralPalette=r?.neutralPalette??e.fromHct(t.from(350,35,50)),this._neutralVariantPalette=r?.neutralVariantPalette??e.fromHct(t.from(25,25,50))}cssRecord(){const t={};for(const[e,r]of Object.entries(this.tokens()))t[e]={name:`--${this.prefix}-${C(e)}`,value:r};return t}cssText(){const t=this.cssRecord(),e=Object.values(t).reduce((t,e)=>({...t,[e.name]:e.value}),{});return p(e)}cssPropertyRecord(){const t={};for(const[e,r]of Object.entries(this.tokens()))t[e]={name:`--${this.prefix}-${C(e)}`,value:{name:`--${this.prefix}-${C(e)}`,initialValue:r,inherits:!1,syntax:"<color>"}};return t}cssCreatePropertyRecord(){const t=this.cssRecord();return Object.values(t).map(t=>f({name:t.name,initialValue:t.value,inherits:!1,syntax:"<color>"}))}cssPropertyText(){return p(this.cssCreatePropertyRecord())}tokens(){const t=this.scheme;return this.generate(t)}generate(t){const e={};for(const[a,i]of Object.entries(((t,e)=>{const r={};for(const[a,i]of Object.entries(t))Object.hasOwn(e,a)?r[a]=e[a]:r[a]=i;return r})(((t,e)=>{const r={};for(const[a,i]of Object.entries(t))e.includes(a)||(r[a]=i);return r})(g.values,this.excludedTokens),this.customTokens)))e[a]=r(i.getArgb(t));return e}get scheme(){return new a({contrastLevel:this.contrastLevel,isDark:this.isDark,variant:this.variant,sourceColorArgb:this.sourceColorHct.toInt(),primaryPalette:this.primaryPalette,secondaryPalette:this.secondaryPalette,tertiaryPalette:this.tertiaryPalette,neutralPalette:this.neutralPalette,neutralVariantPalette:this.neutralVariantPalette})}get sourceColorHct(){return this._sourceColorHct}set sourceColorHct(t){this._sourceColorHct=t}get isDark(){return this._isDark}set isDark(t){this._isDark=t}get contrastLevel(){return this._contrastLevel}set contrastLevel(t){this._contrastLevel=t}get variant(){return this._variant}set variant(t){this._variant=t}get prefix(){return this._prefix}set prefix(t){this._prefix=t}get excludedTokens(){return this._excludedTokens}set excludedTokens(t){this._excludedTokens=t}get customTokens(){return this._customTokens}set customTokens(t){this._customTokens=t}get primaryPalette(){return this._primaryPalette}set primaryPalette(t){this._primaryPalette=t}get secondaryPalette(){return this._secondaryPalette}set secondaryPalette(t){this._secondaryPalette=t}get tertiaryPalette(){return this._tertiaryPalette}set tertiaryPalette(t){this._tertiaryPalette=t}get neutralPalette(){return this._neutralPalette}set neutralPalette(t){this._neutralPalette=t}get neutralVariantPalette(){return this._neutralVariantPalette}set neutralVariantPalette(t){this._neutralVariantPalette=t}}class k extends _{constructor(e,r){super({...r,sourceColorHct:e??t.from(10,50,90)})}get scheme(){let t=null;switch(this.variant??P.Vibrant){case P.Monochrome:t=d;break;case P.Neutral:t=h;break;case P.TonalSpot:t=y;break;case P.Vibrant:t=u;break;case P.Expressive:t=l;break;case P.Fidelity:t=c;break;case P.Content:t=o;break;case P.FruitSalad:t=s;break;case P.Rainbow:t=n;break;default:throw new Error(`Unaccepted parameter value [options.variant] [${this.variant}]`)}return new t(this.sourceColorHct,this.isDark,this.contrastLevel)}}class F extends V{constructor(t,e){super({...e,sourceColorHct:t})}get scheme(){let t=null;switch(this.variant??P.Vibrant){case P.Monochrome:t=d;break;case P.Neutral:t=h;break;case P.TonalSpot:t=y;break;case P.Vibrant:t=u;break;case P.Expressive:t=l;break;case P.Fidelity:t=c;break;case P.Content:t=o;break;case P.FruitSalad:t=s;break;case P.Rainbow:t=n;break;default:throw new Error(`Unaccepted parameter value [options.variant] [${this.variant}]`)}return new t(this.sourceColorHct,this.isDark,this.contrastLevel)}}export{m as MaterialContrastLevel,_ as MaterialDynamicPalettes,V as MaterialDynamicTokens,k as MaterialPalettes,F as MaterialTokens,P as MaterialVariant};