@md3tail/theme
Version:
An open source plugin based on tailwindcss built with Material Desing 3
109 lines • 4.3 kB
JavaScript
import { argbFromHex, rgbaFromArgb, themeFromSourceColor } from "@material/material-color-utilities";
import { PALETTES } from './base';
import { Elevations } from './elevations';
export var ThemeMode;
(function (ThemeMode) {
ThemeMode["Dark"] = "dark";
ThemeMode["Light"] = "light";
})(ThemeMode || (ThemeMode = {}));
export var CoreColor;
(function (CoreColor) {
CoreColor["Primary"] = "primary";
CoreColor["Secondary"] = "secondary";
CoreColor["Tertiary"] = "tertiary";
CoreColor["Error"] = "error";
CoreColor["Neutral"] = "neutral";
CoreColor["NeutralVariant"] = "neutralVariant";
})(CoreColor || (CoreColor = {}));
export var SurfacesLight;
(function (SurfacesLight) {
SurfacesLight["Surface"] = "";
SurfacesLight["SurfaceContainerHighest"] = "--md-sys-color-surface-container-highest";
SurfacesLight["SurfaceContainerHigh"] = "--md-sys-color-surface-container-high";
SurfacesLight["SurfaceContainer"] = "--md-sys-color-surface-container";
SurfacesLight["SurfaceContainerLow"] = "--md-sys-color-surface-container-low";
SurfacesLight["SurfaceContainerLowest"] = "--md-sys-color-surface-container-lowest";
SurfacesLight["SurfaceBright"] = "--md-sys-color-surface-bright";
SurfacesLight[SurfacesLight["SurfaceDim"] = 87] = "SurfaceDim";
})(SurfacesLight || (SurfacesLight = {}));
/**
*
* @param source hex color
* @returns css tokens with dark and light modes
*/
export const tokensFromSource = (source) => {
const theme = themeFromSourceColor(argbFromHex(source));
return {
[ThemeMode.Light]: Object.assign(Object.assign(Object.assign({}, genModTokens(theme, ThemeMode.Light)), genSurfaces(theme, ThemeMode.Light)), Elevations.Light),
[ThemeMode.Dark]: Object.assign(Object.assign(Object.assign({}, genModTokens(theme, ThemeMode.Dark)), genSurfaces(theme, ThemeMode.Dark)), Elevations.Dark),
palettes: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, genPalette(theme, CoreColor.Primary)), genPalette(theme, CoreColor.Secondary)), genPalette(theme, CoreColor.Tertiary)), genPalette(theme, CoreColor.Error)), genPalette(theme, CoreColor.Neutral)), genPalette(theme, CoreColor.NeutralVariant))
};
};
function genModTokens(theme, mode) {
const scheme = theme.schemes[mode];
const variables = {};
Object.entries(scheme.toJSON()).forEach(([key, value]) => {
const token = toKebabCase(key);
const rgb = toRGBString(value);
variables[`--md-sys-color-${token}-${mode}`] = rgb;
});
return variables;
}
/**
* Generate palette tokens from CoreColor
*/
function genPalette(theme, color) {
const palettes = {};
const palette = theme.palettes[color];
PALETTES.forEach(tone => {
const variable = `--md-ref-palette-${toKebabCase(color)}${tone}`;
const value = toRGBString(palette.tone(tone));
palettes[variable] = value;
});
return palettes;
}
/** @See https://m3.material.io/styles/color/the-color-system/key-colors-tones */
const surfaceTones = {
[ThemeMode.Light]: {
surfaceDim: 87,
surface: 98,
surfaceBright: 98,
surfaceContainerLowest: 100,
surfaceContainerLow: 96,
surfaceContainer: 94,
surfaceContainerHigh: 92,
surfaceContainerHighest: 90,
onSurface: 10,
onSurfaceVariant: 30,
},
[ThemeMode.Dark]: {
surfaceDim: 6,
surface: 6,
surfaceBright: 24,
surfaceContainerLowest: 4,
surfaceContainerLow: 10,
surfaceContainer: 12,
surfaceContainerHigh: 17,
surfaceContainerHighest: 22,
onSurface: 90,
onSurfaceVariant: 80,
}
};
function genSurfaces(theme, mode) {
return Object
.entries(surfaceTones[mode])
.reduce((acc, [key, tone]) => {
const variable = `--md-sys-color-${toKebabCase(key)}-${mode}`;
const value = toRGBString(theme.palettes.neutral.tone(tone));
acc[variable] = value;
return acc;
}, {});
}
function toRGBString(color) {
const { r, g, b } = rgbaFromArgb(color);
return `rgb(${r}, ${g}, ${b})`;
}
function toKebabCase(key) {
return key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
//# sourceMappingURL=tokens.js.map