There are four shade-oriented base themes, three color-oriented base themes, and multiple plurid-oriented product themes.
The four shade-oriented base themes consist of:
nightduskdawnlight
where the lightness increases from the night to light,
and the three color-oriented base themes are:
-
ponton- blue-based -
jaune- yellow-based -
furor- red-based.
The four shade-oriented base themes are inspired by radical-style-interfaces.
A theme can be further more classified based on the theme type (dark or bright). A dark theme will have the primary color darker than the secondary color, whereas a bright theme will have the primary color brighter than the secondary color.
The themes are intended to be used for CSS-in-JS styling along with react, styled-components, or other packages.
interface Theme {
type: "dark" | "bright";
name: "generated"
| "night" | "dusk" | "dawn" | "light"
| "ponton" | "jaune" | "furor"
| "plurid"
| "deback" | "decode" | "defile" | "deleaf"
| "delook" | "deloss" | "demail" | "denote"
| "depack" | "depict" | "deself" | "desite"
| "detime" | "detour" | "detune" | "deturn"
| "deveil" | "devert" | "deview" | "dewiki";
baseColor: string;
baseColorInverted: string;
backgroundColorDark: string;
backgroundColorBright: string;
backgroundColorPrimary: string;
backgroundColorPrimaryAlpha: string;
backgroundColorPrimaryInverted: string;
backgroundColorSecondary: string;
backgroundColorSecondaryAlpha: string;
backgroundColorSecondaryInverted: string;
backgroundColorTertiary: string;
backgroundColorTertiaryAlpha: string;
backgroundColorTertiaryInverted: string;
backgroundColorQuaternary: string;
backgroundColorQuaternaryAlpha: string;
backgroundColorQuaternaryInverted: string;
colorPrimary: string;
colorPrimaryInverted: string;
colorSecondary: string;
colorSecondaryInverted: string;
colorTertiary: string;
colorTertiaryInverted: string;
boxShadowUmbra: string;
boxShadowUmbraColor: string;
boxShadowUmbraInset: string;
boxShadowPenumbra: string;
boxShadowPenumbraColor: string;
boxShadowPenumbraInset: string;
boxShadowAntumbra: string;
boxShadowAntumbraColor: string;
boxShadowAntumbraInset: string;
fontFamilySansSerif: string;
fontFamilySerif: string;
fontFamilyMonospace: string;
}A color can be decomposed into it's constituents (hue, saturation, lightness, alpha) using the decomposeColor utility function.