@alchemyalcove/color-schema

Ether Color Schema

Usage no npm install needed!

<script type="module">
  import alchemyalcoveColorSchema from 'https://cdn.skypack.dev/@alchemyalcove/color-schema';
</script>

README

AlchemyAlcove Color Schema

Create a color schema for Ether component library.

CircleCI

3.0KB download size minified.

This project has 4 dependencies.

ColorCalculator

BasicFunctions

RGBtoHSL

HSLtoRGB

Color Schema

Install

npm install --save @alchemyalcove/color-schema

Use

ColorSchema exports a schema object for the Ether component library. Pass any part of the color schema in and it will calculate the rest of the colors based on these. Any first tier colors that are not provided will be populated based on FlatUI colors

import Schema from "@alchemyalcove/color-schema";

Schema()

Would result in the following color schema:

{
    "background": "#ECF0F1",
    "danger": "#C0392B",
    "dangerHighlight": "#D14233",
    "grayedOut": "#7F8C8D",
    "primary": "#2CF366",
    "primaryHighlight": "#44F477",
    "secondary": "#7F8C8D",
    "secondaryHighlight": "#8C9899",
    "success": "#2ECC71",
    "successHighlight": "#3FD37E",
    "text": "#000000",
    "textOnDanger": "#FFFFFF",
    "textOnDangerHighlight": "#FFFFFF",
    "textOnPrimary": "#000000",
    "textOnPrimaryHighlight": "#000000",
    "textOnSecondary": "#000000",
    "textOnSecondaryHighlight": "#000000",
    "textOnSuccess": "#000000",
    "textOnSuccessHighlight": "#000000",
    "textOnWarning": "#000000",
    "textOnWarningHighlight": "#000000",
    "warning": "#F1C40F",
    "warningHighlight": "#F2C927"
}

Pass these results into setVariables on the Ether and it will setup all your colors. ColorSchema should always provide all needed colors for the Ether project.