material-tokens-generator

If you find any problems, please report them.

This warehouse uses the @material/material-color-utilities open source warehouse to convert the results generated by @material/material-color-utilities into CSS styles.

• ESM Supported Only
• Typescript Supported

npm i @glare-labs/material-tokens-generator @material/material-color-utilities

import {
    EMaterialContrastLevel,
    EMaterialVariant,
    MaterialTokens,
} from "@glare-labs/material-tokens-generator";

const theme = new MaterialTokens(Hct.from(140, 90, 50), {
    contrastLevel: EMaterialContrastLevel.Default,
    variant: EMaterialVariant.Fidelity,
    isDark: false,
    prefix: "my-prefix",
    excludedTokens: [
        "surfaceTint",
    ],
});

Usage

Generate Colors

For example:

import { MaterialTokens } from "@glare-labs/material-tokens-generator";

const theme = new MaterialTokens(Hct.from(140, 90, 50), {
    isDark: false,
});

/**
 * @output
 * ```
 * --md-sys-color-primary-palette-key-color: #278900;
 * --md-sys-color-secondary-palette-key-color: #578245;
 * ...
 * --md-sys-color-on-tertiary-fixed: #001e2b;
 * --md-sys-color-on-tertiary-fixed-variant: #004d67;
 * ```
 */
console.log(theme.cssText());

Generate Palettes

For example:

import { MaterialPalettes } from "@glare-labs/material-tokens-generator";

const palettes = new MaterialPalettes(Hct.from(120, 90, 70), {
    isDark: true,
});

/**
 * @output
 * ```
 * --md-sys-palette-primary-0: #000000;
 * --md-sys-palette-secondary-0: #000000;
 * ...
 * --md-sys-palette-neutral-100: #ffffff;
 * --md-sys-palette-neutralVariant-100: #ffffff;
 * ```
 */
console.log(palettes.cssText());

API

| Classes | Features | | :-------------------------------------------- | --------------------------------------------------------: | | MaterialTokens, MaterialDynamicTokens | Used to create tokens like --md-sys-color-primary. | | MaterialPalettes, MaterialDynamicPalettes | Used to create tokens like --md-sys-palette-primary-40. |

constructor

| Param | Option | Type | Required | | :------------- | :-------------------- | :-------------------------------------------- | -------: | | sourceColorHct | | string | Yes | | options | isDark | boolean | No | | options | variant | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 | No | | options | contrastLevel | -1.0 \| 0 \| 0.5 \| 1.0 | No | | options | prefix | string | No | | options | excludedTokens | Array<keyof TMaterialColors> | No | | options | customTokens | Record<keyof TMaterialColors, DynamicColor> | No | | options | primaryPalette | TonalPalette | No | | options | secondaryPalette | TonalPalette | No | | options | tertiaryPalette | TonalPalette | No | | options | neutralPalette | TonalPalette | No | | options | neutralVariantPalette | TonalPalette | No | | options | levels | Array<number> | No |

new MaterialTokens(Hct.from(140, 90, 50));
new MaterialTokens(Hct.from(140, 90, 50), {
    prefix: "my-color",
    variant: EMaterialVariant.Content,
    isDark: true,
    contrastLevel: 0,
    excludedTokens: ["surfaceTint"],
});

new MaterialPalettes(Hct.from(75, 90, 75));
new MaterialPalettes(Hct.from(75, 90, 75), {
    contrastLevel: 0,
    isDark: false,
    levels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    prefix: "my-palette",
    variant: EMaterialVariant.Rainbow,
});

new MaterialDynamicPalettes({});
new MaterialDynamicPalettes({
    sourceColorHct: Hct.from(75, 90, 75),
    contrastLevel: 0,
    isDark: false,
    levels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    prefix: "my-palette",
    variant: EMaterialVariant.Rainbow,
    primaryPalette: TonalPalette.fromHueAndChroma(200, 75),
    secondaryPalette: TonalPalette.fromHueAndChroma(120, 75),
    tertiaryPalette: TonalPalette.fromHueAndChroma(140, 75),
    neutralPalette: TonalPalette.fromHueAndChroma(180, 25),
    neutralVariantPalette: TonalPalette.fromHueAndChroma(200, 35),
});

tokens

const theme = new MaterialTokens(Hct.from(140, 90, 50));
const tokens = theme.tokens();
/**
 * @output
 * ```
 * {
 *      background: "#f5fcec",
 *      error: "#ba1a1a",
 *      ...
 *      tertiaryFixedDim: "#77d1fe",
 *      tertiaryPaletteKeyColor: "#0080a9",
 * }
 * ```
 */
console.log(tokens);

/**
 * @output
 * #f5fcec
 */
console.log(tokens.surface);

cssPropertyRecord

const theme = new MaterialTokens(Hct.from(140, 90, 50));

/**
 * @output
 * ```
 * {
 *      background: {
 *          "name": "--md-sys-color-background",
 *          "value": {
 *              "name": "--md-sys-color-background",
 *              "initialValue": "#f5fcec",
 *              "inherits": false,
 *           "syntax": "<color>"
 *           }
 *      }
 *      ...
 * }
 * ```
 */
console.log(theme.cssPropertyRecord());

cssPropertyText

const theme = new MaterialTokens(Hct.from(140, 90, 50));

/**
 * @output
 * ```
 * @property --md-sys-color-primary-palette-key-color { initial-value: #278900; syntax: <color>; inherits: false; }
 * ...
 * @property --md-sys-color-on-tertiary-fixed-variant { initial-value: #004d67; syntax: <color>; inherits: false; }
 * ```
 */
console.log(theme.cssPropertyText());

cssRecord

const theme = new MaterialTokens(Hct.from(140, 90, 50));

/**
 * @output
 * ```
 * {
 *      background: {
 *          "name": "--md-sys-color-background",
 *          "value": "#f5fcec"
 *      },
 *      ...
 * }
 * ...
 * @property --md-sys-color-on-tertiary-fixed-variant { initial-value: #004d67; syntax: <color>; inherits: false; }
 * ```
 */
console.log(theme.cssRecord());

cssText

const theme = new MaterialTokens(Hct.from(140, 90, 50));

/**
 * @output
 * ```
 * --md-sys-color-primary-palette-key-color: #278900;
 * ...
 * --md-sys-color-on-tertiary-fixed-variant: #004d67;
 * ```
 */
console.log(theme.cssText());