https://github.com/cebus-org/theme-generator

A tool used to dynamically create accessible themes.
https://github.com/cebus-org/theme-generator

Last synced: about 1 month ago
JSON representation

A tool used to dynamically create accessible themes.

• Host: GitHub
• URL: https://github.com/cebus-org/theme-generator
• Owner: cebus-org
• License: mit
• Created: 2022-04-12T03:22:38.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-16T19:46:46.000Z (3 months ago)
• Last Synced: 2024-10-18T13:28:20.463Z (3 months ago)
• Language: TypeScript
• Size: 152 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```tsx

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

const theme = themeGenerator({

  canvasColor: '#202020',

  semanticColors: {

    inherit: '#908D8D',

    brand: '#2165da',

  },

});

```

## Output

```tsx

{

  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)"

```