* Storybook Boilerplate setup * Inital Setup * First story * Color Design System * Badge Story + Comp * Checkbox UI + Stories * Update Red colors + Button Group * Switch+Stories / Default brand color * Update Version + Button Group combined * Compact Butotn Group * Tidy up Selectors * Adds Tooltip to Button * TextInput * Update SB * Prefix Input * Match text area styles * Prefix Controls * Update spacing on text area * Text Input Suffix * Color Picker * Update storybook * Icon Suffix/Prefix * Datepicker + move components to monorepo * Text color on labels * Move Radio over to monorepo * Move CustomBranding to calcom/ib * Radio * IconBadge Component * Update radio indicator background * Disabled radio state * Delete yarn.lock * Revert "Delete yarn.lock" This reverts commit 9b99d244b70872153a16bec1f1f3bc651e94be7a. * Fix webhook test * Replace old toast location * Update radio path * Empty State * Update Badge.tsx * Update Badge.tsx * Banner Component+story * Creation Modal * Creation Dialog updated * Button hover dialog * Confirmation Modal * Datepicker (Booking) * PageHeader * Fix border width * PageHeader update search bar * Fix input height * Fix button group size * Add spacing between badges - font smoothing * Update button position on banner * Banner update * Fixing focus state on suffix/prefix inputs * Implement A11y addon * Add aria label * error && "text-red-800" * Fix button hover * Change colors * Generate snapshot tests for on hover button * Revert colors to demo * Change colors * Fix Linear Issues * Form Stepper component * Add padding back to input * Move ui to UI_V2 * Use V2 * Update imports for v1 * Update imports for v1 * Upgrade to nextjs in storybook root * Update website submodule * Avatar Groups * Fix webpack again * Vertical Tab Item [WIP] - active state on small item is not working currently * Vertical Tab Group * Add Github action * Fix website submodule * Fix GH action * Rename Workflow * Adds lint report for CI * Lint report fixes * NavigationItem comments * VerticalTabItem type fixes * Fix avatar blur * Fix comments * Adding isEmbed to window object * Disable components that use router mock. * Load inter via google fonts * Started select * Adding base Breadcrumb * Update readme * Formatting * Fixes * Dependencies matching * Linting * Update FormStep.stories.tsx * Linting * Update MultiSelectCheckboxes.tsx Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
164 lines
4.0 KiB
JavaScript
164 lines
4.0 KiB
JavaScript
const tailwindcssPaletteGenerator = (input) => {
|
|
// addColor function
|
|
const addColor = (color) => {
|
|
let colorParams = {
|
|
hex: "",
|
|
name: "",
|
|
shades: params.shades,
|
|
};
|
|
|
|
// check input params
|
|
if (typeof color === "string") colorParams.hex = color;
|
|
if (typeof color === "object" && Array.isArray(color)) {
|
|
colorParams.name = color.shift();
|
|
colorParams.hex = color.shift();
|
|
}
|
|
if (typeof color === "object" && !Array.isArray(color)) {
|
|
if (Object.keys(color).length === 1) {
|
|
colorParams.name = Object.keys(color)[0];
|
|
colorParams.hex = Object.values(color)[0];
|
|
}
|
|
if (Object.keys(color).length !== 1) colorParams = Object.assign(colorParams, color);
|
|
}
|
|
|
|
// check if string is invalid
|
|
if (!/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/.test(colorParams.hex)) return;
|
|
|
|
// add hash tag if needed
|
|
if (!/^#/.test(colorParams.hex)) colorParams.hex = "#" + colorParams.hex;
|
|
|
|
// if no name present, get a default name
|
|
if (colorParams.name === "") colorParams.name = params.colorNames.shift();
|
|
|
|
// set palette name
|
|
palette[colorParams.name] = {};
|
|
|
|
// generate shades
|
|
Object.keys(colorParams.shades).forEach((shade) => {
|
|
palette[colorParams.name][shade] =
|
|
colorParams.shades[shade].type === "lighten"
|
|
? lighten(colorParams.hex, colorParams.shades[shade].intensity)
|
|
: darken(colorParams.hex, colorParams.shades[shade].intensity);
|
|
});
|
|
};
|
|
|
|
// darken function
|
|
const darken = (hex, intensity) => {
|
|
// get r, g, b values
|
|
let { r, g, b } = hexToRgb(hex);
|
|
|
|
// darken the r, g, b values
|
|
r = Math.round(r * (1 - intensity));
|
|
g = Math.round(g * (1 - intensity));
|
|
b = Math.round(b * (1 - intensity));
|
|
|
|
// return the new hex color
|
|
return rgbToHex(r, g, b);
|
|
};
|
|
|
|
// lighten function
|
|
const lighten = (hex, intensity) => {
|
|
// get r, g, b values
|
|
let { r, g, b } = hexToRgb(hex);
|
|
|
|
// lighten the r, g, b values
|
|
r = Math.round(r + (255 - r) * intensity);
|
|
g = Math.round(g + (255 - g) * intensity);
|
|
b = Math.round(b + (255 - b) * intensity);
|
|
|
|
// return the new hex color
|
|
return rgbToHex(r, g, b);
|
|
};
|
|
|
|
// hexToRgb function
|
|
const hexToRgb = (string) => {
|
|
// get the r,g,b values
|
|
const [r, g, b] = string
|
|
.replace("#", "")
|
|
.match(/.{1,2}/g)
|
|
.map((a) => parseInt(a, 16));
|
|
|
|
return { r, g, b };
|
|
};
|
|
|
|
// rgbToHex function
|
|
const rgbToHex = (r, g, b) => `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
|
|
|
// toHex function
|
|
const toHex = (n) => `0${n.toString(16)}`.slice(-2).toUpperCase();
|
|
|
|
// initiate palette
|
|
const palette = {};
|
|
|
|
// set default params
|
|
let params = {
|
|
colors: [],
|
|
colorNames: [
|
|
"primary",
|
|
"secondary",
|
|
"tertiary",
|
|
"quaternary",
|
|
"quinary",
|
|
"senary",
|
|
"septenary",
|
|
"octonary",
|
|
"nonary",
|
|
"denary",
|
|
],
|
|
shades: {
|
|
50: {
|
|
intensity: 0.95,
|
|
type: "lighten",
|
|
},
|
|
100: {
|
|
intensity: 0.9,
|
|
type: "lighten",
|
|
},
|
|
200: {
|
|
intensity: 0.75,
|
|
type: "lighten",
|
|
},
|
|
300: {
|
|
intensity: 0.6,
|
|
type: "lighten",
|
|
},
|
|
400: {
|
|
intensity: 0.3,
|
|
type: "lighten",
|
|
},
|
|
500: {
|
|
intensity: 0,
|
|
type: "lighten",
|
|
},
|
|
600: {
|
|
intensity: 0.1,
|
|
type: "darken",
|
|
},
|
|
700: {
|
|
intensity: 0.25,
|
|
type: "darken",
|
|
},
|
|
800: {
|
|
intensity: 0.4,
|
|
type: "darken",
|
|
},
|
|
900: {
|
|
intensity: 0.51,
|
|
type: "darken",
|
|
},
|
|
},
|
|
};
|
|
|
|
// check input params
|
|
if (typeof input === "string") params.colors.push(input);
|
|
if (typeof input === "object" && Array.isArray(input)) params.colors = input;
|
|
if (typeof input === "object" && !Array.isArray(input)) params = Object.assign(params, input);
|
|
|
|
// loop through colors
|
|
params.colors.forEach(addColor);
|
|
|
|
return palette;
|
|
};
|
|
|
|
module.exports = tailwindcssPaletteGenerator;
|