@md3tail/theme
Version:
An open source plugin based on tailwindcss built with Material Desing 3
33 lines (32 loc) • 1.81 kB
TypeScript
/**
* material 3 base colors
*/
declare const COLORS: readonly ["primary", "on-primary", "primary-container", "on-primary-container", "secondary", "on-secondary", "secondary-container", "on-secondary-container", "tertiary", "on-tertiary", "tertiary-container", "on-tertiary-container", "error", "on-error", "error-container", "on-error-container", "background", "on-background", "surface", "surface-container", "surface-container-lowest", "surface-container-low", "surface-container-high", "surface-container-highest", "surface-tint", "on-surface", "surface-variant", "on-surface-variant", "inverse-surface", "inverse-on-surface", "inverse-primary", "shadow", "outline-variant", "scrim", "outline"];
/**
* State layers of colors
* @See https://m3.material.io/foundations/interaction/states/overview
*/
declare const STATES: readonly ["hover", "press", "focus", "drag"];
/**
* A color which has a palette
* @See https://m3.material.io/styles/color/the-color-system/key-colors-tones
*/
declare const CORE_COLORS: readonly ["primary", "secondary", "tertiary", "error"];
/**
* One core color becomes thirteen tones
* @See https://m3.material.io/styles/color/the-color-system/key-colors-tones
*/
declare const PALETTES: readonly [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100];
export type Color = typeof COLORS[number];
type State = typeof STATES[number];
type CoreColor = typeof CORE_COLORS[number];
type Palette = typeof PALETTES[number];
/**
* Only color which has `on-` prefix
*/
type GetStatelessColors<T = Color> = T extends `on-${infer R}` ? R : never;
type StatefullColors = GetStatelessColors<Color>;
export type MD3StateColor = `${StatefullColors}-${State}`;
export type MD3PalleteColor = `${CoreColor}${Palette}`;
export type MD3Color = Color | MD3StateColor | MD3PalleteColor;
export {};