Unicornix - themeable and accessible color palette generation

1. Think color, any color
2. Select it from the list
3. 🦄 🌈 🚀
4. Done!

Get light and dark semantic design color tokens are ready in any required format!

Available formats (more to come!):

• JSON
• Javascript
• CSS
• CSS variables in JS
• SCSS/SASS
• Design Tokens (W3 group)
• Tokens Studio (Figma)
• Style Dictionary
• Style Dictionary V3 (legacy)
• Tailwind

CLI Usage (recommended)

Uni-Command operation:

npx unicornix

First Launch

You will be prompted with several checkbox-like and occasionally input-like questions,
that help you to build and customize the theme to your liking AND output a config for the future runs.

Config Launch

You can further on customize the config file (see options below) and bypass the wizard.
Depending on your system, config file can be named either unicornix.config.js (type: module) or unicornix.config.cjs.
It should be placed in the folder of the script execution to function.
Output will be produced in the .unicornix folder in the same location.

To restart the wizard simply delete or rename the config file.

Config Options

theme

The theme object allows you to specify the color palette for various elements of your theme.
Each property accepts a string representing a color. Available colors:

Main Palette

• magenta
• purple
• violet
• indigo
• blue
• sky
• aqua
• mint
• emerald
• green
• lime
• acid
• yellow
• amber
• orange
• fire
• red
• ruby
• pink

Neutral Palette

• gray_colder
• gray_cold
• gray
• gray_warm
• gray_warmer

Muted Palette

• red_muted
• orange_muted
• yellow_muted
• green_muted
• sky_muted
• blue_muted
• purple_muted

Example:

{
  theme: {
    neutral: "gray_cold",
    accent: "pink",
    safe: "green",
    info: "sky",
    warning: "amber",
    alert: "red",
    content: "gray_cold",
    background: "gray_cold"
  }
}

output

The output array allows you to specify the formats in which the themes output should be generated.
At least one format is required. The available options are:

• json - themes object
• js - javascript object
• css - custom properties aka CSS variables in theme scope
• cssref - javascript references of CSS variables, output in .js
• scss - SCSS (SASS) variables for all themes
• dtg - design tokens W3 Group format, output in .json
• studio - Figma Tokens Studio format, output in .json
• dict - Style Dictionary format, output in .json
• dict3 - Style Dictionary legacy (v3) format, output in .json
• tw - javascript object to use in Tailwind theme configuration

Example:

{
  output: ['json', 'css', 'cssref'];
}

options

The options object allows you to configure additional settings that are applied to specific output formats.

• cssNamespace: (Optional) Namespace for (S)CSS variables. Only applies to css and scss formats
• cssColorPrefix: (Optional) Prefix for (S)CSS variables. Only applies to css and scss formats
• cssDataSelector: (Optional) Data selector for CSS variables. Only applies to css format
• cssSelector: (Optional) Additional CSS selector. Only applies to css format
• scssVariableCase: (Optional) Case format for SCSS variables. Only applies to scss format.
  The available formats are:
  • kebab: Example: $my-variable
  • camel: Example: $myVariable
  • snake: Example: $my_variable
• twTheme: (Optional) Theme to be used as primary in Tailwind output. Only applies to tw format.

Example:

{
  options: {
    cssNamespace: "awsm",
    cssColorPrefix: "color",
    cssDataSelector: "theme",
    cssSelector: "",
    scssVariableCase: "kebab"
    twTheme: "light"
  }
}

Helper Constants

For more convenient and less error-prone experience,
you can take advantage of the exported constants:

import { COLOR } from 'unicornix';

export default {
  theme: {
    neutral: COLOR.gray_cold,
    accent: COLOR.pink,
    safe: COLOR.green,
    info: COLOR.sky,
    warning: COLOR.amber,
    alert: COLOR.red,
    content: COLOR.gray_cold,
    background: COLOR.gray_cold,
  },
};

Also available:

• THEME - dictionary for available themes, i.e. THEME.dark
• OUTPUT - dictionary for the output option, i.e. OUTPUT.studio
• OPTION_CASE - dictionary for the variable text case, i.e. OPTION_CASE.kebab

Module Usage

Installation

npm i -D unicornix

Colors

light: ColorGamma
dark: ColorGamma

type ColorGamma = {
  '50': ColorValue;
  '100': ColorValue;
  '200': ColorValue;
  '300': ColorValue;
  '400': ColorValue;
  '500': ColorValue;
  '600': ColorValue;
  '700': ColorValue;
  '800': ColorValue;
  '900': ColorValue;
  '950': ColorValue;
};

Example:

import { light, dark } from 'unicornix';

const lightPinkAccent = light.pink[700]; // #941548
const darkMintSoft = dark.mint[200]; // #012d26

Palette

getPalette(color, theme): ColorPalette

Parameters:

• color (string): The color name for which to retrieve the palette.
• theme (string): The theme name ('light', 'dark').

Returns: (Object): An object containing palette values for the specified color and theme.

type ColorPalette = {
  backdrop: ColorValue;
  surface: ColorValue;
  soft: ColorValue;
  border: ColorValue;
  tone: ColorValue;
  strong: ColorValue;
  base: ColorValue;
  accent: ColorValue;
  subtle: ColorValue;
  muted: ColorValue;
  content: ColorValue;
  contrast: ColorValue;
  gamma: ColorGamma;
};

Example:

import { getPalette, COLOR, THEME } from 'unicornix';

const darkLimePalette = getPalette(COLOR.lime, THEME.dark);
const { strong, contrast } = darkLimePalette; // #547f13, #ffffff

Themes

createThemes({ accent, ... }: CollectionColorsMap): ThemeCollection

type ThemeCollection = Record<'light' | 'dark', ColorTokens>;

interface ColorTokens {
  neutral: ColorPalette;
  accent: ColorPalette;
  safe: ColorPalette;
  info: ColorPalette;
  warning: ColorPalette;
  alert: ColorPalette;
  content: ColorContent;
  background: ColorBackground;
}

License

This project is licensed under the MIT License