@plurid/utilities.themes v0.1.2

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:

• night
• dusk
• dawn
• light

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.

Demo

Usage

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" | "depict" | "deview";

    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;
}