Skip to content

A tool used to dynamically create accessible themes.

License

Notifications You must be signed in to change notification settings

cebus-org/theme-generator

Repository files navigation

Theme Generator

A tool used to dynamically create accessible themes.

All themes are dynamically generated based on the canvas color to ensure safe contrast ratios.

Installation

  1. Install the themeGenerator.

Using NPM

npm install @calebz/react-theme-generator

Using Yarn

yarn add @calebz/react-theme-generator

Input

import { themeGenerator } from '@calebz/react-theme-generator';

const theme = themeGenerator({
  canvasColor: '#202020',
  semanticColors: {
    inherit: '#908D8D',
    brand: '#2165da',
  },
});

Output

{
  textColor: "#dfdfdf"
  canvasColor: "#202020"
  inherit: "#908D8D"
  brand: "#2165da"
  inheritHover: "#a09d9d"
  inheritPressed: "#a8a6a6"
  inheritBackground: "#3c3b3b"
  inheritBackgroundDisabled: "#636161"
  inheritDisabled: "#585757"
  inheritForegroundHover: "#242424"
  inheritForegroundPressed: "#292929"
  brandHover: "#477ddb"
  brandPressed: "#5a8adc"
  brandBackground: "#20314f"
  brandBackgroundDisabled: "#214990"
  brandDisabled: "#21437d"
  brandForegroundHover: "#202327"
  brandForegroundPressed: "#20262f"
  elevate: "drop-shadow(0 0 2px rgb(223,223,223,0.12))drop-shadow(0 4px 8px rgb(223,223,223,0.14))"
  hoverShadow: "0px 3px 1px -2px rgb(223,223,223,0.2), 0px 2px 2px 0px rgb(223,223,223,0.14), 0px 1px 5px 0px rgb(223,223,223,0.12)"

About

A tool used to dynamically create accessible themes.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published