Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.

Commit

Permalink
feat: implement color palette fabrucs
Browse files Browse the repository at this point in the history
  • Loading branch information
tatinacher committed Jun 30, 2021
1 parent 597264a commit bac5ba1
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 55 deletions.
64 changes: 9 additions & 55 deletions src/lib/global.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import styled from 'styled-components';

import { createPalette } from './palette';

export const Global = styled.div`
* {
font-family: 'Helvetica Neue', sans-serif;
Expand All @@ -10,70 +12,22 @@ export const Global = styled.div`
--bw-1000: 0, 0%, 100%;
/* bw palette */
--bw-100: 249, 7%, 81%;
--bw-200: 240, 7%, 92%;
--bw-300: 240, 9%, 98%;
--bw-400: 245, 6%, 66%;
--bw-500: 247, 7%, 48%;
--bw-600: 248, 7%, 40%;
--bw-700: 251, 7%, 30%;
--bw-800: 249, 7%, 21%;
--bw-900: 240, 7%, 11%;
${createPalette('247, 7%, 48%', 'bw')}
/* primary palette */
--primary-100: 257, 78%, 98%;
--primary-200: 256, 83%, 93%;
--primary-300: 255, 85%, 84%;
--primary-400: 256, 84%, 72%;
--primary-500: 255, 85%, 58%;
--primary-600: 255, 61%, 49%;
--primary-700: 255, 61%, 37%;
--primary-800: 255, 60%, 25%;
--primary-900: 256, 61%, 13%;
${createPalette('255, 85%, 58%', 'primary')}
/* secondary palette */
--secondary-100: 223, 100%, 13%;
--secondary-200: 223, 100%, 22%;
--secondary-300: 223, 100%, 30%;
--secondary-400: 223, 100%, 40%;
--secondary-500: 223, 100%, 46%;
--secondary-600: 223, 100%, 58%;
--secondary-700: 223, 100%, 64%;
--secondary-800: 223, 100%, 78%;
--secondary-900: 223, 100%, 93%;
${createPalette('223, 100%, 46%', 'secondary')}
/* danger palette */
--danger-100: 345, 73%, 96%;
--danger-200: 344, 72%, 87%;
--danger-300: 345, 72%, 74%;
--danger-400: 345, 72%, 57%;
--danger-500: 345, 100%, 42%;
--danger-600: 345, 99%, 33%;
--danger-700: 345, 98%, 25%;
--danger-800: 345, 98%, 16%;
--danger-900: 346, 95%, 8%;
${createPalette('345, 100%, 42%', 'danger')}
/* accent palette */
--accent-100: 0, 100%, 98%;
--accent-200: 358, 95%, 92%;
--accent-300: 358, 97%, 85%;
--accent-400: 358, 97%, 76%;
--accent-500: 359, 96%, 67%;
--accent-600: 359, 53%, 53%;
--accent-700: 358, 47%, 39%;
--accent-800: 359, 47%, 25%;
--accent-900: 0, 46%, 11%;
${createPalette('359, 96%, 67%', 'accent')}
/* success palette */
--success-100: 120, 38%, 97%;
--success-200: 124, 40%, 92%;
--success-300: 125, 38%, 82%;
--success-400: 124, 39%, 73%;
--success-500: 124, 39%, 63%;
--success-600: 124, 23%, 50%;
--success-700: 124, 23%, 36%;
--success-800: 124, 23%, 24%;
--success-900: 124, 23%, 12%;
${createPalette('124, 39%, 63%', 'success')}
/* should be rewritten to formulas */
--woly-main-level: 3;
Expand Down
40 changes: 40 additions & 0 deletions src/lib/palette.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { css } from 'styled-components';

/**
*
* @param color : hsl => "255, 85%, 58%"";
*/

export const getHsl = (color: string) => {
const colors = color.replace(' ', '').split(',');
const hue = Number.parseInt(colors[0], 10);
const saturation = Number.parseFloat(colors[1]);
const lightness = Number.parseFloat(colors[2]);
return { hue, saturation, lightness };
};

const lightnessFn = (number: number, saturation: number) => saturation + 50 - 0.1 * number;

const saturationFn = (number: number, saturation: number) => {
/** for black and white palette => saturation doesn't change */
if (saturation < 30 || number === 500) return saturation;
if (number > 500) return saturation - 30;
return saturation - 10;
};

const COLOR_NUMBERS = [100, 200, 300, 400, 500, 600, 700, 800];

export const createPalette = (color: string, name: string) => {
const hsl = getHsl(color);

const palette = COLOR_NUMBERS.map((number) => {
const saturation = saturationFn(number, hsl.saturation);
const lightness = lightnessFn(number, hsl.lightness);

return `--${name}-${number}: ${hsl.hue}, ${saturation}%, ${lightness}%;`;
});

return css`
${palette}
`;
};

0 comments on commit bac5ba1

Please sign in to comment.