@thangk/easythemer/src/constants.ts

Easily generate shades from a colour palette for use in your app

import type { ChannelParams, ShadeFactorsSet, ShadeOption } from "./types";

export enum TYPE {
  HSL = "HSL",
  CHANNEL_PARAMS = "ChannelParams",
  SHADE_OPTION = "ShadeOption",
  SHADES_SET = "ShadesSet",
  SHADE_FACTORS_SET = "ShadeFactorsSet",
  USE_THEMER_PROP = "UseThemerProp",
}

export const BOUND_LIMITS = {
  MAX_UPPERBOUND_DIVIDER: 5,
  MIN_UPPERBOUND_DIVIDER: 1,
  MAX_LOWERBOUND_DIVIDER: 5,
  MIN_LOWERBOUND_DIVIDER: 1,
  MAX_UPPERBOUND_PADDING: 0.9,
  MIN_UPPERBOUND_PADDING: 0.1,
  MAX_LOWERBOUND_PADDING: 0.9,
  MIN_LOWERBOUND_PADDING: 0.1,
};

export const HSL_LIMITS = {
  MAX_H: 360,
  MIN_H: 0,
  MAX_S: 100,
  MIN_S: 0,
  MAX_L: 100,
  MIN_L: 0,
};

export const defaultChannelParams: ChannelParams = {
  type: TYPE.CHANNEL_PARAMS,
  upperboundDivider: 3,
  lowerboundDivider: 3,
  upperboundPadding: 0.9,
  lowerboundPadding: 0.6,
  useBounds: false,
  channel: "h",
};

export const defaultShadeOption: ShadeOption = {
  type: TYPE.SHADE_OPTION,
  optionName: "orange",
  hex: "#ff670f",
  generateShades: true,
  channelParams: [
    {
      ...defaultChannelParams,
      channel: "h",
    },
    {
      ...defaultChannelParams,
      channel: "s",
    },
    {
      ...defaultChannelParams,
      useBounds: true,
      channel: "l",
    },
  ],
};

export const defaultShadeFactorsSet: ShadeFactorsSet = {
  type: TYPE.SHADE_FACTORS_SET,
  setName: "default",
  shadeFactors: {
    lightest: 3,
    lighter: 2,
    light: 1,
    normal: 0,
    dark: -1,
    darker: -2,
    darkest: -3,
  },
};