@hero-design/colors 7.25.1 → 7.26.0

package/lib/index.js

@@ -689,59 +689,68 @@ Values.VERSION = 'v2.1.1';
 
 var Values$1 = Values;
 
-const STEPS = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95];
+const mixColor = color => {
+  const colorValues = new Values$1(color);
+  return {
+    tint: step => colorValues.tint(step).hexString(),
+    shade: step => colorValues.shade(step).hexString(),
+    base: colorValues.hexString()
+  };
+};
 
+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$1(base);
+  const mixed = mixColor(base);
   return Object.assign(Object.assign({}, STEPS.reduce((acc, step) => Object.assign(Object.assign({}, acc), {
-    [`lighten${step}`]: colorValues.tint(step).hexString(),
-    [`darken${step}`]: colorValues.shade(step).hexString()
+    [`lighten${step}`]: mixed.tint(step),
+    [`darken${step}`]: mixed.shade(step)
   }), {})), {
-    base: colorValues.hexString()
+    base: mixed.base
   });
 };
 
 const BASE_COLORS = {
+  aliceBlue: '#ecf0ff',
   antiFlashWhite: '#f1f2f3',
-  blue: '#1dbeee',
+  apple: '#e3602a',
   blue1: '#5a68e2',
-  nightBlue: '#353957',
+  blue: '#1dbeee',
+  cornflowerBlue: '#5d80f0',
+  currant: '#48000a',
   darkBlue: '#25006e',
-  maasstrichtBlue: '#001f23',
-  ultramarineBlue: '#4568fb',
-  royalBlue: '#5a68e2',
+  deepSaffron: '#ffa234',
+  emerald: '#5ace7d',
   frenchSky: '#8999ff',
-  aliceBlue: '#ecf0ff',
-  jordyBlue: '#92abfc',
-  cornflowerBlue: '#5d80f0',
-  paua: '#130066',
+  gold: '#ffd500',
   green: '#01b39c',
-  emerald: '#5ace7d',
-  pineGreen: '#017d6d',
-  honeydew: '#f0fef4',
   grey: '#a3a6ac',
-  currant: '#48000a',
-  sonicSilver: '#737479',
   grotesqueGreen: '#6af293',
+  hitPink: '#ffad79',
+  honeydew: '#f0fef4',
+  jordyBlue: '#92abfc',
+  linen: '#fcebe7',
+  maasstrichtBlue: '#001f23',
+  mauve: '#c38cee',
   mellowApricot: '#ffbe71',
-  deepSaffron: '#ffa234',
+  nightBlue: '#353957',
+  pastelRed: '#f46363',
+  paua: '#130066',
+  peach: '#f8ac7d',
+  pineGreen: '#017d6d',
   pink: '#fe56aa',
-  hitPink: '#ffad79',
-  apple: '#e3602a',
   purple: '#be83cf',
+  royalBlue: '#5a68e2',
   scarletGum: '#401960',
-  vodka: '#b5c3fd',
-  peach: '#f8ac7d',
-  pastelRed: '#f46363',
-  vermilion: '#de350b',
-  linen: '#fcebe7',
+  seashell: '#fff6eb',
+  silverChalice: '#abacaf',
   smalt: '#003580',
-  violet: '#7622d7',
+  sonicSilver: '#737479',
+  ultramarineBlue: '#4568fb',
+  vermilion: '#de350b',
   violet1: '#8505a2',
-  mauve: '#c38cee',
-  yellow: '#fadb14',
-  seashell: '#fff6eb',
-  gold: '#ffd500'
+  violet: '#7622d7',
+  vodka: '#b5c3fd',
+  yellow: '#fadb14'
 };
 const colorScales = Object.entries(BASE_COLORS).reduce((acc, [key, value]) => Object.assign(Object.assign({}, acc), {
   [key]: createColorScales(value)
@@ -758,7 +767,7 @@ const {
   purple,
   vermilion: vermilion$1,
   smalt,
-  violet: violet$2,
+  violet: violet$3,
   yellow
 } = colorScales;
 const palette$6 = {
@@ -832,15 +841,15 @@ const palette$6 = {
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$2.base,
-  violetDark15: violet$2.darken15,
-  violetDark30: violet$2.darken30,
-  violetDark45: violet$2.darken45,
-  violetDark75: violet$2.darken75,
-  violetLight30: violet$2.lighten30,
-  violetLight60: violet$2.lighten60,
-  violetLight75: violet$2.lighten75,
-  violetLight90: violet$2.lighten90,
+  violet: violet$3.base,
+  violetDark15: violet$3.darken15,
+  violetDark30: violet$3.darken30,
+  violetDark45: violet$3.darken45,
+  violetDark75: violet$3.darken75,
+  violetLight30: violet$3.lighten30,
+  violetLight60: violet$3.lighten60,
+  violetLight75: violet$3.lighten75,
+  violetLight90: violet$3.lighten90,
   yellow: yellow.base,
   yellowDark15: yellow.darken15,
   yellowDark75: yellow.darken75,
@@ -849,23 +858,33 @@ const palette$6 = {
 };
 
 const {
-  maasstrichtBlue,
+  aliceBlue,
+  antiFlashWhite,
+  apple: apple$1,
+  currant: currant$1,
+  darkBlue,
+  deepSaffron,
+  emerald,
+  gold: gold$1,
   grey,
-  pastelRed,
+  honeydew,
+  linen,
+  maasstrichtBlue,
+  mauve: mauve$2,
   mellowApricot,
-  emerald,
-  vodka,
-  vermilion,
-  deepSaffron,
+  nightBlue,
+  pastelRed,
   pineGreen,
-  ultramarineBlue,
-  sonicSilver,
-  linen,
+  royalBlue: royalBlue$1,
+  scarletGum: scarletGum$1,
   seashell,
-  honeydew,
-  aliceBlue,
-  antiFlashWhite,
-  apple: apple$1
+  silverChalice,
+  sonicSilver,
+  ultramarineBlue,
+  vermilion,
+  violet: violet$2,
+  violet1: violet1$1,
+  vodka
 } = colorScales;
 const palette$5 = {
   black: '#000000',
@@ -882,11 +901,17 @@ const palette$5 = {
   maasstrichtBlueLight30: maasstrichtBlue.lighten30,
   maasstrichtBlue: maasstrichtBlue.base,
   pastelRed: pastelRed.base,
+  pastelRedLight20: pastelRed.lighten20,
   mellowApricot: mellowApricot.base,
+  mellowApricotLight20: mellowApricot.lighten20,
   emerald: emerald.base,
+  emeraldLight20: emerald.lighten20,
+  emeraldDark20: emerald.darken20,
   vodka: vodka.base,
+  vodkaLight20: vodka.lighten20,
   vermilion: vermilion.base,
   deepSaffron: deepSaffron.base,
+  deepSaffronDark20: deepSaffron.darken20,
   pineGreen: pineGreen.base,
   ultramarineBlue: ultramarineBlue.base,
   sonicSilver: sonicSilver.base,
@@ -895,7 +920,20 @@ const palette$5 = {
   honeydew: honeydew.base,
   aliceBlue: aliceBlue.base,
   antiFlashWhite: antiFlashWhite.base,
-  apple: apple$1.base
+  apple: apple$1.base,
+  currant: currant$1.base,
+  nightBlue: nightBlue.base,
+  darkBlue: darkBlue.base,
+  royalBlue: royalBlue$1.base,
+  royalBlueDark20: royalBlue$1.darken20,
+  goldDark40: gold$1.darken40,
+  mauve: mauve$2.base,
+  violet: violet$2.base,
+  violetLight30: violet$2.lighten30,
+  violet1: violet1$1.base,
+  scarletGum: scarletGum$1.base,
+  silverChalice: silverChalice.base,
+  silverChaliceLight20: silverChalice.lighten20
 };
 
 const {
@@ -987,6 +1025,7 @@ exports.defaultMobilePalette = palette$5;
 exports.defaultWebPalette = palette$6;
 exports.eBensPalette = palette$4;
 exports.jobsPalette = palette$3;
+exports.mixColor = mixColor;
 exports.swagPalette = palette$2;
 exports.walletPalette = palette$1;
 exports.workPalette = palette;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/colors",
-  "version": "7.25.1",
+  "version": "7.26.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,8 +23,8 @@
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.1",
-    "eslint-config-hd": "7.25.1",
-    "prettier-config-hd": "7.25.1",
+    "eslint-config-hd": "7.26.0",
+    "prettier-config-hd": "7.26.0",
     "rollup": "^2.70.1"
   },
   "prettier": "prettier-config-hd"

package/src/colorScales/createColorScales.ts

@@ -1,4 +1,4 @@
-import Values from 'values.js';
+import mixColor from './mixColor';
 
 const STEPS = [
   5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
@@ -13,18 +13,18 @@ type ColorScales = { base: string } & {
 };
 
 const createColorScales = (base: string): ColorScales => {
-  const colorValues = new Values(base);
+  const mixed = mixColor(base);
 
   return {
     ...STEPS.reduce(
       (acc, step) => ({
         ...acc,
-        [`lighten${step}`]: colorValues.tint(step).hexString(),
-        [`darken${step}`]: colorValues.shade(step).hexString(),
+        [`lighten${step}`]: mixed.tint(step),
+        [`darken${step}`]: mixed.shade(step),
       }),
       {} as Omit<ColorScales, 'base'>
     ),
-    base: colorValues.hexString(),
+    base: mixed.base,
   };
 };
 

package/src/colorScales/index.ts

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

package/src/colorScales/mixColor.ts

@@ -0,0 +1,12 @@
+import Values from 'values.js';
+
+const mixColor = (color: string) => {
+  const colorValues = new Values(color);
+  return {
+    tint: (step: number) => colorValues.tint(step).hexString(),
+    shade: (step: number) => colorValues.shade(step).hexString(),
+    base: colorValues.hexString(),
+  };
+};
+
+export default mixColor;

package/src/defaultMobilePalette/index.ts

@@ -1,23 +1,33 @@
 import colorScales from '../colorScales';
 
 const {
-  maasstrichtBlue,
+  aliceBlue,
+  antiFlashWhite,
+  apple,
+  currant,
+  darkBlue,
+  deepSaffron,
+  emerald,
+  gold,
   grey,
-  pastelRed,
+  honeydew,
+  linen,
+  maasstrichtBlue,
+  mauve,
   mellowApricot,
-  emerald,
-  vodka,
-  vermilion,
-  deepSaffron,
+  nightBlue,
+  pastelRed,
   pineGreen,
-  ultramarineBlue,
-  sonicSilver,
-  linen,
+  royalBlue,
+  scarletGum,
   seashell,
-  honeydew,
-  aliceBlue,
-  antiFlashWhite,
-  apple,
+  silverChalice,
+  sonicSilver,
+  ultramarineBlue,
+  vermilion,
+  violet,
+  violet1,
+  vodka,
 } = colorScales;
 
 const palette = {
@@ -38,11 +48,23 @@ const palette = {
   maasstrichtBlue: maasstrichtBlue.base,
 
   pastelRed: pastelRed.base,
+  pastelRedLight20: pastelRed.lighten20,
+
   mellowApricot: mellowApricot.base,
+  mellowApricotLight20: mellowApricot.lighten20,
+
   emerald: emerald.base,
+  emeraldLight20: emerald.lighten20,
+  emeraldDark20: emerald.darken20,
+
   vodka: vodka.base,
+  vodkaLight20: vodka.lighten20,
+
   vermilion: vermilion.base,
+
   deepSaffron: deepSaffron.base,
+  deepSaffronDark20: deepSaffron.darken20,
+
   pineGreen: pineGreen.base,
   ultramarineBlue: ultramarineBlue.base,
   sonicSilver: sonicSilver.base,
@@ -52,6 +74,25 @@ const palette = {
   aliceBlue: aliceBlue.base,
   antiFlashWhite: antiFlashWhite.base,
   apple: apple.base,
+  currant: currant.base,
+  nightBlue: nightBlue.base,
+  darkBlue: darkBlue.base,
+
+  royalBlue: royalBlue.base,
+  royalBlueDark20: royalBlue.darken20,
+
+  goldDark40: gold.darken40,
+
+  mauve: mauve.base,
+
+  violet: violet.base,
+  violetLight30: violet.lighten30,
+  violet1: violet1.base,
+
+  scarletGum: scarletGum.base,
+
+  silverChalice: silverChalice.base,
+  silverChaliceLight20: silverChalice.lighten20,
 };
 
 export default palette;

package/src/index.ts

@@ -1,4 +1,4 @@
-import colorScales from './colorScales';
+import colorScales, { mixColor } from './colorScales';
 import defaultWebPalette from './defaultWebPalette';
 
 import defaultMobilePalette from './defaultMobilePalette';
@@ -9,6 +9,7 @@ import walletPalette from './walletPalette';
 import workPalette from './workPalette';
 
 export {
+  mixColor,
   colorScales,
   defaultWebPalette,
   defaultMobilePalette,

package/types/colorScales/index.d.ts

@@ -1,4 +1,5 @@
-declare const colorScales: Record<"antiFlashWhite" | "blue" | "blue1" | "nightBlue" | "darkBlue" | "maasstrichtBlue" | "ultramarineBlue" | "royalBlue" | "frenchSky" | "aliceBlue" | "jordyBlue" | "cornflowerBlue" | "paua" | "green" | "emerald" | "pineGreen" | "honeydew" | "grey" | "currant" | "sonicSilver" | "grotesqueGreen" | "mellowApricot" | "deepSaffron" | "pink" | "hitPink" | "apple" | "purple" | "scarletGum" | "vodka" | "peach" | "pastelRed" | "vermilion" | "linen" | "smalt" | "violet" | "violet1" | "mauve" | "yellow" | "seashell" | "gold", {
+import mixColor from './mixColor';
+declare const colorScales: Record<"aliceBlue" | "antiFlashWhite" | "apple" | "blue1" | "blue" | "cornflowerBlue" | "currant" | "darkBlue" | "deepSaffron" | "emerald" | "frenchSky" | "gold" | "green" | "grey" | "grotesqueGreen" | "hitPink" | "honeydew" | "jordyBlue" | "linen" | "maasstrichtBlue" | "mauve" | "mellowApricot" | "nightBlue" | "pastelRed" | "paua" | "peach" | "pineGreen" | "pink" | "purple" | "royalBlue" | "scarletGum" | "seashell" | "silverChalice" | "smalt" | "sonicSilver" | "ultramarineBlue" | "vermilion" | "violet1" | "violet" | "vodka" | "yellow", {
     base: string;
 } & {
     lighten5: string;
@@ -40,4 +41,5 @@ declare const colorScales: Record<"antiFlashWhite" | "blue" | "blue1" | "nightBl
     darken90: string;
     darken95: string;
 }>;
+export { mixColor };
 export default colorScales;

package/types/colorScales/mixColor.d.ts

@@ -0,0 +1,6 @@
+declare const mixColor: (color: string) => {
+    tint: (step: number) => string;
+    shade: (step: number) => string;
+    base: string;
+};
+export default mixColor;

package/types/defaultMobilePalette/index.d.ts

@@ -13,11 +13,17 @@ declare const palette: {
     maasstrichtBlueLight30: string;
     maasstrichtBlue: string;
     pastelRed: string;
+    pastelRedLight20: string;
     mellowApricot: string;
+    mellowApricotLight20: string;
     emerald: string;
+    emeraldLight20: string;
+    emeraldDark20: string;
     vodka: string;
+    vodkaLight20: string;
     vermilion: string;
     deepSaffron: string;
+    deepSaffronDark20: string;
     pineGreen: string;
     ultramarineBlue: string;
     sonicSilver: string;
@@ -27,5 +33,18 @@ declare const palette: {
     aliceBlue: string;
     antiFlashWhite: string;
     apple: string;
+    currant: string;
+    nightBlue: string;
+    darkBlue: string;
+    royalBlue: string;
+    royalBlueDark20: string;
+    goldDark40: string;
+    mauve: string;
+    violet: string;
+    violetLight30: string;
+    violet1: string;
+    scarletGum: string;
+    silverChalice: string;
+    silverChaliceLight20: string;
 };
 export default palette;

package/types/eBensPalette/index.d.ts

@@ -19,11 +19,17 @@ declare const palette: {
     maasstrichtBlueLight30: string;
     maasstrichtBlue: string;
     pastelRed: string;
+    pastelRedLight20: string;
     mellowApricot: string;
+    mellowApricotLight20: string;
     emerald: string;
+    emeraldLight20: string;
+    emeraldDark20: string;
     vodka: string;
+    vodkaLight20: string;
     vermilion: string;
     deepSaffron: string;
+    deepSaffronDark20: string;
     pineGreen: string;
     ultramarineBlue: string;
     sonicSilver: string;
@@ -33,5 +39,15 @@ declare const palette: {
     aliceBlue: string;
     antiFlashWhite: string;
     apple: string;
+    currant: string;
+    nightBlue: string;
+    darkBlue: string;
+    royalBlue: string;
+    royalBlueDark20: string;
+    goldDark40: string;
+    violet1: string;
+    scarletGum: string;
+    silverChalice: string;
+    silverChaliceLight20: string;
 };
 export default palette;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import colorScales from './colorScales';
+import colorScales, { mixColor } from './colorScales';
 import defaultWebPalette from './defaultWebPalette';
 import defaultMobilePalette from './defaultMobilePalette';
 import eBensPalette from './eBensPalette';
@@ -6,5 +6,5 @@ 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 { mixColor, colorScales, defaultWebPalette, defaultMobilePalette, eBensPalette, jobsPalette, swagPalette, walletPalette, workPalette, };
 export default defaultWebPalette;

package/types/jobsPalette/index.d.ts

@@ -21,11 +21,17 @@ declare const palette: {
     maasstrichtBlueLight30: string;
     maasstrichtBlue: string;
     pastelRed: string;
+    pastelRedLight20: string;
     mellowApricot: string;
+    mellowApricotLight20: string;
     emerald: string;
+    emeraldLight20: string;
+    emeraldDark20: string;
     vodka: string;
+    vodkaLight20: string;
     vermilion: string;
     deepSaffron: string;
+    deepSaffronDark20: string;
     pineGreen: string;
     ultramarineBlue: string;
     sonicSilver: string;
@@ -34,5 +40,17 @@ declare const palette: {
     honeydew: string;
     aliceBlue: string;
     antiFlashWhite: string;
+    nightBlue: string;
+    darkBlue: string;
+    royalBlue: string;
+    royalBlueDark20: string;
+    goldDark40: string;
+    mauve: string;
+    violet: string;
+    violetLight30: string;
+    violet1: string;
+    scarletGum: string;
+    silverChalice: string;
+    silverChaliceLight20: string;
 };
 export default palette;

package/types/swagPalette/index.d.ts

@@ -25,11 +25,17 @@ declare const palette: {
     maasstrichtBlueLight30: string;
     maasstrichtBlue: string;
     pastelRed: string;
+    pastelRedLight20: string;
     mellowApricot: string;
+    mellowApricotLight20: string;
     emerald: string;
+    emeraldLight20: string;
+    emeraldDark20: string;
     vodka: string;
+    vodkaLight20: string;
     vermilion: string;
     deepSaffron: string;
+    deepSaffronDark20: string;
     pineGreen: string;
     ultramarineBlue: string;
     sonicSilver: string;
@@ -39,5 +45,14 @@ declare const palette: {
     aliceBlue: string;
     antiFlashWhite: string;
     apple: string;
+    currant: string;
+    nightBlue: string;
+    darkBlue: string;
+    royalBlue: string;
+    royalBlueDark20: string;
+    goldDark40: string;
+    violet1: string;
+    silverChalice: string;
+    silverChaliceLight20: string;
 };
 export default palette;