m3-svelte
Version:
M3 Svelte implements the Material 3 design system in Svelte. See the [website](https://ktibow.github.io/m3-svelte/) for demos and usage instructions.
89 lines (88 loc) • 2.31 kB
JavaScript
export const pairs = [
["primary", "onPrimary"],
["primaryContainer", "onPrimaryContainer"],
["secondary", "onSecondary"],
["secondaryContainer", "onSecondaryContainer"],
["tertiary", "onTertiary"],
["tertiaryContainer", "onTertiaryContainer"],
["background", "onBackground"],
["surface", "onSurface"],
["inverseSurface", "inverseOnSurface"],
["surfaceVariant", "onSurfaceVariant"],
["error", "onError"],
["errorContainer", "onErrorContainer"],
];
export const colors = [
"primary",
"onPrimary",
"primaryContainer",
"onPrimaryContainer",
"inversePrimary",
"secondary",
"onSecondary",
"secondaryContainer",
"onSecondaryContainer",
"tertiary",
"onTertiary",
"tertiaryContainer",
"onTertiaryContainer",
"error",
"onError",
"errorContainer",
"onErrorContainer",
"background",
"onBackground",
"surface",
"onSurface",
"surfaceVariant",
"onSurfaceVariant",
"inverseSurface",
"inverseOnSurface",
"outline",
"outlineVariant",
"shadow",
"scrim",
"surfaceDim",
"surfaceBright",
"surfaceContainerLowest",
"surfaceContainerLow",
"surfaceContainer",
"surfaceContainerHigh",
"surfaceContainerHighest",
"surfaceTint",
];
/**
* @returns A string of CSS code with custom properties representing the color scheme values.
* */
export const genCSS = (light, dark) => {
const genColorVariable = (name, argb) => {
const kebabCase = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
const red = (argb >> 16) & 255;
const green = (argb >> 8) & 255;
const blue = argb & 255;
return `--m3-scheme-${kebabCase}: ${red} ${green} ${blue};`;
};
const lightColors = Object.entries(light)
.map(([name, argb]) => genColorVariable(name, argb))
.join("\n");
const darkColors = Object.entries(dark)
.map(([name, argb]) => genColorVariable(name, argb))
.join("\n");
const colors = `@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
}
:root, ::backdrop {
${lightColors}
}
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
:root, ::backdrop {
${darkColors}
}
}`;
return colors;
};