@hero-design/colors 7.14.1 → 7.15.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-@hero-design/colors:build: cache hit, replaying output a59b1afaec6c7429
+@hero-design/colors:build: cache hit, replaying output f6261c1d0aa44e7b
 @hero-design/colors:build: $ yarn build:js && yarn build:types
 @hero-design/colors:build: $ rollup -c
 @hero-design/colors:build: 
@@ -12,5 +12,5 @@
 @hero-design/colors:build: src/index.ts
 @hero-design/colors:build: 
 @hero-design/colors:build: Consumers of your bundle will have to use chunk['default'] to access their default export, which may not be what you want. Use `output.exports: 'named'` to disable this warning
-@hero-design/colors:build: created lib/index.js, es/index.js in 2.9s
+@hero-design/colors:build: created lib/index.js, es/index.js in 1.4s
 @hero-design/colors:build: $ tsc --emitDeclarationOnly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/colors",
-  "version": "7.14.1",
+  "version": "7.15.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/types/baseColors/index.d.ts

@@ -0,0 +1,45 @@
+declare const BASE_COLORS: {
+    readonly grey: {
+        base: string;
+    } & {
+        lighten5: string;
+        lighten10: string;
+        lighten15: string;
+        lighten20: string;
+        lighten25: string;
+        lighten30: string;
+        lighten35: string;
+        lighten40: string;
+        lighten45: string;
+        lighten50: string;
+        lighten55: string;
+        lighten60: string;
+        lighten65: string;
+        lighten70: string;
+        lighten75: string;
+        lighten80: string;
+        lighten85: string;
+        lighten90: string;
+        lighten95: string;
+        darken5: string;
+        darken10: string;
+        darken15: string;
+        darken20: string;
+        darken25: string;
+        darken30: string;
+        darken35: string;
+        darken40: string;
+        darken45: string;
+        darken50: string;
+        darken55: string;
+        darken60: string;
+        darken65: string;
+        darken70: string;
+        darken75: string;
+        darken80: string;
+        darken85: string;
+        darken90: string;
+        darken95: string;
+    };
+};
+export default BASE_COLORS;

package/types/baseColors/utils.d.ts

@@ -0,0 +1,10 @@
+declare const STEPS: readonly [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95];
+declare type LIGHTEN_STEPS = `lighten${typeof STEPS[number]}`;
+declare type DARKEN_STEPS = `darken${typeof STEPS[number]}`;
+declare type ColorScales = {
+    base: string;
+} & {
+    [k in LIGHTEN_STEPS | DARKEN_STEPS]: string;
+};
+declare const createColorScales: (base: string) => ColorScales;
+export { createColorScales };

package/types/colorScales/createColorScales.js

@@ -0,0 +1,34 @@
+import Values from 'values.js';
+const STEPS = [
+    5,
+    10,
+    15,
+    20,
+    25,
+    30,
+    35,
+    40,
+    45,
+    50,
+    55,
+    60,
+    65,
+    70,
+    75,
+    80,
+    85,
+    90,
+    95,
+];
+const createColorScales = (base) => {
+    const colorValues = new Values(base);
+    return {
+        ...STEPS.reduce((acc, step) => ({
+            ...acc,
+            [`lighten${step}`]: colorValues.tint(step).hexString(),
+            [`darken${step}`]: colorValues.shade(step).hexString(),
+        }), {}),
+        base: colorValues.hexString(),
+    };
+};
+export default createColorScales;

package/types/colorScales/index.js

@@ -0,0 +1,43 @@
+import createColorScales from './createColorScales';
+const BASE_COLORS = {
+    antiFlashWhite: '#f1f2f3',
+    blue: '#1dbeee',
+    blue1: '#5a68e2',
+    nightBlue: '#353957',
+    darkBlue: '#25006e',
+    maasstrichtBlue: '#001f23',
+    ultramarineBlue: '#4568fb',
+    aliceBlue: '#ecf0ff',
+    jordyBlue: '#92abfc',
+    cornflowerBlue: '#5d80f0',
+    paua: '#130066',
+    green: '#01b39c',
+    emerald: '#5ace7d',
+    pineGreen: '#017d6d',
+    honeydew: '#f0fef4',
+    grey: '#a3a6ac',
+    currant: '#48000a',
+    sonicSilver: '#737479',
+    grotesqueGreen: '#6af293',
+    mellowApricot: '#ffbe71',
+    deepSaffron: '#ffa234',
+    pink: '#fe56aa',
+    hitPink: '#ffad79',
+    apple: '#e3602a',
+    purple: '#be83cf',
+    scarletGum: '#401960',
+    vodka: '#b5c3fd',
+    peach: '#f8ac7d',
+    pastelRed: '#f46363',
+    vermilion: '#de350b',
+    linen: '#fcebe7',
+    smalt: '#003580',
+    violet: '#7622d7',
+    violet1: '#8505a2',
+    mauve: '#c38cee',
+    yellow: '#fadb14',
+    seashell: '#ebf4ff',
+    gold: '#ffd500',
+};
+const colorScales = Object.entries(BASE_COLORS).reduce((acc, [key, value]) => ({ ...acc, [key]: createColorScales(value) }), {});
+export default colorScales;

package/types/defaultMobilePalette/index.js

@@ -0,0 +1,32 @@
+import colorScales from '../colorScales';
+const { maasstrichtBlue, grey, pastelRed, mellowApricot, emerald, vodka, vermilion, deepSaffron, pineGreen, ultramarineBlue, sonicSilver, linen, seashell, honeydew, aliceBlue, antiFlashWhite, } = colorScales;
+const palette = {
+    black: '#000000',
+    white: '#ffffff',
+    greyLight95: grey.lighten95,
+    greyLight90: grey.lighten90,
+    greyLight75: grey.lighten75,
+    greyLight45: grey.lighten45,
+    greyLight30: grey.lighten30,
+    grey: grey.base,
+    maasstrichtBlueLight90: maasstrichtBlue.lighten90,
+    maasstrichtBlueLight80: maasstrichtBlue.lighten80,
+    maasstrichtBlueLight50: maasstrichtBlue.lighten50,
+    maasstrichtBlueLight30: maasstrichtBlue.lighten30,
+    maasstrichtBlue: maasstrichtBlue.base,
+    pastelRed: pastelRed.base,
+    mellowApricot: mellowApricot.base,
+    emerald: emerald.base,
+    vodka: vodka.base,
+    vermilion: vermilion.base,
+    deepSaffron: deepSaffron.base,
+    pineGreen: pineGreen.base,
+    ultramarineBlue: ultramarineBlue.base,
+    sonicSilver: sonicSilver.base,
+    linen: linen.base,
+    seashell: seashell.base,
+    honeydew: honeydew.base,
+    aliceBlue: aliceBlue.base,
+    antiFlashWhite: antiFlashWhite.base,
+};
+export default palette;

package/types/defaultWebPalette/index.js

@@ -0,0 +1,89 @@
+import colorScales from '../colorScales';
+const { blue, ultramarineBlue, green, grey, grotesqueGreen, deepSaffron, pink, purple, vermilion, smalt, violet, yellow, } = colorScales;
+const palette = {
+    black: '#000000',
+    white: '#ffffff',
+    blue: blue.base,
+    blueDark30: blue.darken30,
+    blueDark75: blue.darken75,
+    blueLight30: blue.lighten30,
+    blueLight75: blue.lighten75,
+    blueLight90: blue.lighten90,
+    dodgerBlue: ultramarineBlue.base,
+    dodgerBlueDark30: ultramarineBlue.darken30,
+    dodgerBlueLight30: ultramarineBlue.lighten30,
+    dodgerBlueLight75: ultramarineBlue.lighten75,
+    dodgerBlueLight90: ultramarineBlue.lighten90,
+    green: green.base,
+    greenDark15: green.darken15,
+    greenDark30: green.darken30,
+    greenDark75: green.darken75,
+    greenLight30: green.lighten30,
+    greenLight75: green.lighten75,
+    greenLight90: green.lighten90,
+    grey: grey.base,
+    greyDark15: grey.darken15,
+    greyDark30: grey.darken30,
+    greyDark45: grey.darken45,
+    greyDark60: grey.darken60,
+    greyDark75: grey.darken75,
+    greyLight45: grey.lighten45,
+    greyLight60: grey.lighten60,
+    greyLight75: grey.lighten75,
+    greyLight85: grey.lighten85,
+    greyLight90: grey.lighten90,
+    greyLight95: grey.lighten95,
+    grotesqueGreen: grotesqueGreen.base,
+    grotesqueGreenDark45: grotesqueGreen.darken45,
+    grotesqueGreenLight60: grotesqueGreen.lighten60,
+    grotesqueGreenLight75: grotesqueGreen.lighten75,
+    grotesqueGreenLight90: grotesqueGreen.lighten90,
+    orange: deepSaffron.base,
+    orangeDark15: deepSaffron.darken15,
+    orangeDark30: deepSaffron.darken30,
+    orangeDark75: deepSaffron.darken75,
+    orangeLight30: deepSaffron.lighten30,
+    orangeLight75: deepSaffron.lighten75,
+    orangeLight90: deepSaffron.lighten90,
+    pink: pink.base,
+    pinkDark15: pink.darken15,
+    pinkDark30: pink.darken30,
+    pinkDark45: pink.darken45,
+    pinkDark75: pink.darken75,
+    pinkLight30: pink.lighten30,
+    pinkLight45: pink.lighten45,
+    pinkLight75: pink.lighten75,
+    pinkLight90: pink.lighten90,
+    purple: purple.base,
+    purpleDark15: purple.darken15,
+    red: vermilion.base,
+    redDark15: vermilion.darken15,
+    redDark30: vermilion.darken30,
+    redDark75: vermilion.darken75,
+    redLight15: vermilion.lighten15,
+    redLight30: vermilion.lighten30,
+    redLight60: vermilion.lighten60,
+    redLight75: vermilion.lighten75,
+    redLight90: vermilion.lighten90,
+    smalt: smalt.base,
+    smaltDark75: smalt.darken75,
+    smaltLight30: smalt.lighten30,
+    smaltLight45: smalt.lighten45,
+    smaltLight75: smalt.lighten75,
+    smaltLight90: smalt.lighten90,
+    violet: violet.base,
+    violetDark15: violet.darken15,
+    violetDark30: violet.darken30,
+    violetDark45: violet.darken45,
+    violetDark75: violet.darken75,
+    violetLight30: violet.lighten30,
+    violetLight60: violet.lighten60,
+    violetLight75: violet.lighten75,
+    violetLight90: violet.lighten90,
+    yellow: yellow.base,
+    yellowDark15: yellow.darken15,
+    yellowDark75: yellow.darken75,
+    yellowLight60: yellow.lighten60,
+    yellowLight90: yellow.lighten90,
+};
+export default palette;

package/types/eBensPalette/index.js

@@ -0,0 +1,24 @@
+import colorScales from '../colorScales';
+import defaultMobilePalette from '../defaultMobilePalette';
+const { emerald, blue1, nightBlue, darkBlue, grey, deepSaffron, peach, vermilion, pastelRed, mauve, } = colorScales;
+const palette = {
+    ...defaultMobilePalette,
+    nightBlue: nightBlue.base,
+    blueLight60: blue1.lighten60,
+    blue: blue1.base,
+    darkBlue: darkBlue.base,
+    darkBlueDark15: darkBlue.darken15,
+    green: emerald.base,
+    greyDark45: grey.darken45,
+    greyDark75: grey.darken75,
+    greyLight30: grey.lighten30,
+    greyLight45: grey.lighten45,
+    greyLight90: grey.lighten90,
+    orangeLight30: deepSaffron.lighten30,
+    peach: peach.base,
+    peachLight75: peach.lighten75,
+    red: vermilion.base,
+    pastelRed: pastelRed.base,
+    mauve: mauve.base,
+};
+export default palette;

package/types/ehBrand/index.d.ts

@@ -0,0 +1,87 @@
+declare const palette: {
+    black: string;
+    blue: string;
+    blueDark30: string;
+    blueDark75: string;
+    blueLight30: string;
+    blueLight75: string;
+    blueLight90: string;
+    dodgerBlue: string;
+    dodgerBlueDark30: string;
+    dodgerBlueLight30: string;
+    dodgerBlueLight75: string;
+    dodgerBlueLight90: string;
+    green: string;
+    greenDark15: string;
+    greenDark30: string;
+    greenDark75: string;
+    greenLight30: string;
+    greenLight75: string;
+    greenLight90: string;
+    grey: string;
+    greyDark15: string;
+    greyDark30: string;
+    greyDark45: string;
+    greyDark60: string;
+    greyDark75: string;
+    greyLight45: string;
+    greyLight60: string;
+    greyLight75: string;
+    greyLight85: string;
+    greyLight90: string;
+    greyLight95: string;
+    grotesqueGreen: string;
+    grotesqueGreenDark45: string;
+    grotesqueGreenLight60: string;
+    grotesqueGreenLight75: string;
+    grotesqueGreenLight90: string;
+    orange: string;
+    orangeDark15: string;
+    orangeDark30: string;
+    orangeDark75: string;
+    orangeLight30: string;
+    orangeLight75: string;
+    orangeLight90: string;
+    pink: string;
+    pinkDark15: string;
+    pinkDark30: string;
+    pinkDark45: string;
+    pinkDark75: string;
+    pinkLight30: string;
+    pinkLight45: string;
+    pinkLight75: string;
+    pinkLight90: string;
+    purple: string;
+    purpleDark15: string;
+    red: string;
+    redDark15: string;
+    redDark30: string;
+    redDark75: string;
+    redLight15: string;
+    redLight30: string;
+    redLight60: string;
+    redLight75: string;
+    redLight90: string;
+    smalt: string;
+    smaltDark75: string;
+    smaltLight30: string;
+    smaltLight45: string;
+    smaltLight75: string;
+    smaltLight90: string;
+    violet: string;
+    violetDark15: string;
+    violetDark30: string;
+    violetDark45: string;
+    violetDark75: string;
+    violetLight30: string;
+    violetLight60: string;
+    violetLight75: string;
+    violetLight90: string;
+    white: string;
+    yellow: string;
+    yellowDark15: string;
+    yellowDark75: string;
+    yellowLight60: string;
+    yellowLight90: string;
+};
+export default palette;

package/types/finTechBrand/index.d.ts

@@ -0,0 +1,2 @@
+declare const palette: {};
+export default palette;

package/types/index.js

@@ -0,0 +1,10 @@
+import colorScales from './colorScales';
+import defaultWebPalette from './defaultWebPalette';
+import defaultMobilePalette from './defaultMobilePalette';
+import eBensPalette from './eBensPalette';
+import jobsPalette from './jobsPalette';
+import swagPalette from './swagPalette';
+import walletPalette from './walletPalette';
+import workPalette from './workPalette';
+export { colorScales, defaultWebPalette, defaultMobilePalette, eBensPalette, jobsPalette, swagPalette, walletPalette, workPalette, };
+export default defaultWebPalette;

package/types/jobsPalette/index.js

@@ -0,0 +1,9 @@
+import colorScales from '../colorScales';
+import defaultMobilePalette from '../defaultMobilePalette';
+const { apple, currant } = colorScales;
+const palette = {
+    ...defaultMobilePalette,
+    apple: apple.base,
+    currant: currant.base,
+};
+export default palette;

package/types/swagPalette/index.js

@@ -0,0 +1,17 @@
+import colorScales from '../colorScales';
+import defaultMobilePalette from '../defaultMobilePalette';
+const { scarletGum, violet1 } = colorScales;
+const palette = {
+    ...defaultMobilePalette,
+    scarletGumLight30: scarletGum.lighten30,
+    scarletGumLight50: scarletGum.lighten50,
+    scarletGumLight80: scarletGum.lighten80,
+    scarletGumLight90: scarletGum.lighten90,
+    scarletGum: scarletGum.base,
+    violetLight30: violet1.lighten30,
+    violetLight50: violet1.lighten50,
+    violetLight80: violet1.lighten80,
+    violetLight90: violet1.lighten90,
+    violet: violet1.base,
+};
+export default palette;

package/types/walletPalette/index.js

@@ -0,0 +1,14 @@
+import colorScales from '../colorScales';
+import defaultMobilePalette from '../defaultMobilePalette';
+const { jordyBlue, cornflowerBlue, paua } = colorScales;
+const palette = {
+    ...defaultMobilePalette,
+    jordyBlueLight30: jordyBlue.lighten30,
+    jordyBlueLight50: jordyBlue.lighten50,
+    jordyBlueLight70: jordyBlue.lighten70,
+    jordyBlueLight90: jordyBlue.lighten90,
+    jordyBlue: jordyBlue.base,
+    cornflowerBlue: cornflowerBlue.base,
+    paua: paua.base,
+};
+export default palette;

package/types/workPalette/index.js

@@ -0,0 +1,12 @@
+import colorScales from '../colorScales';
+import defaultMobilePalette from '../defaultMobilePalette';
+const { gold } = colorScales;
+const palette = {
+    ...defaultMobilePalette,
+    goldLight20: gold.lighten20,
+    goldLight50: gold.lighten50,
+    goldLight70: gold.lighten70,
+    goldLight90: gold.lighten90,
+    gold: gold.base,
+};
+export default palette;