@hero-design/colors 7.24.0 → 7.25.0

package/es/index.js

@@ -701,6 +701,8 @@ const BASE_COLORS = {
   darkBlue: '#25006e',
   maasstrichtBlue: '#001f23',
   ultramarineBlue: '#4568fb',
+  royalBlue: '#5a68e2',
+  frenchSky: '#8999ff',
   aliceBlue: '#ecf0ff',
   jordyBlue: '#92abfc',
   cornflowerBlue: '#5d80f0',
@@ -741,14 +743,14 @@ const {
   blue,
   ultramarineBlue: ultramarineBlue$1,
   green,
-  grey: grey$2,
+  grey: grey$1,
   grotesqueGreen,
-  deepSaffron: deepSaffron$2,
+  deepSaffron: deepSaffron$1,
   pink,
   purple,
-  vermilion: vermilion$2,
+  vermilion: vermilion$1,
   smalt,
-  violet: violet$1,
+  violet: violet$2,
   yellow
 } = colorScales;
 const palette$6 = {
@@ -772,30 +774,30 @@ const palette$6 = {
   greenLight30: green.lighten30,
   greenLight75: green.lighten75,
   greenLight90: green.lighten90,
-  grey: grey$2.base,
-  greyDark15: grey$2.darken15,
-  greyDark30: grey$2.darken30,
-  greyDark45: grey$2.darken45,
-  greyDark60: grey$2.darken60,
-  greyDark75: grey$2.darken75,
-  greyLight45: grey$2.lighten45,
-  greyLight60: grey$2.lighten60,
-  greyLight75: grey$2.lighten75,
-  greyLight85: grey$2.lighten85,
-  greyLight90: grey$2.lighten90,
-  greyLight95: grey$2.lighten95,
+  grey: grey$1.base,
+  greyDark15: grey$1.darken15,
+  greyDark30: grey$1.darken30,
+  greyDark45: grey$1.darken45,
+  greyDark60: grey$1.darken60,
+  greyDark75: grey$1.darken75,
+  greyLight45: grey$1.lighten45,
+  greyLight60: grey$1.lighten60,
+  greyLight75: grey$1.lighten75,
+  greyLight85: grey$1.lighten85,
+  greyLight90: grey$1.lighten90,
+  greyLight95: grey$1.lighten95,
   grotesqueGreen: grotesqueGreen.base,
   grotesqueGreenDark45: grotesqueGreen.darken45,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
-  orange: deepSaffron$2.base,
-  orangeDark15: deepSaffron$2.darken15,
-  orangeDark30: deepSaffron$2.darken30,
-  orangeDark75: deepSaffron$2.darken75,
-  orangeLight30: deepSaffron$2.lighten30,
-  orangeLight75: deepSaffron$2.lighten75,
-  orangeLight90: deepSaffron$2.lighten90,
+  orange: deepSaffron$1.base,
+  orangeDark15: deepSaffron$1.darken15,
+  orangeDark30: deepSaffron$1.darken30,
+  orangeDark75: deepSaffron$1.darken75,
+  orangeLight30: deepSaffron$1.lighten30,
+  orangeLight75: deepSaffron$1.lighten75,
+  orangeLight90: deepSaffron$1.lighten90,
   pink: pink.base,
   pinkDark15: pink.darken15,
   pinkDark30: pink.darken30,
@@ -807,30 +809,30 @@ const palette$6 = {
   pinkLight90: pink.lighten90,
   purple: purple.base,
   purpleDark15: purple.darken15,
-  red: vermilion$2.base,
-  redDark15: vermilion$2.darken15,
-  redDark30: vermilion$2.darken30,
-  redDark75: vermilion$2.darken75,
-  redLight15: vermilion$2.lighten15,
-  redLight30: vermilion$2.lighten30,
-  redLight60: vermilion$2.lighten60,
-  redLight75: vermilion$2.lighten75,
-  redLight90: vermilion$2.lighten90,
+  red: vermilion$1.base,
+  redDark15: vermilion$1.darken15,
+  redDark30: vermilion$1.darken30,
+  redDark75: vermilion$1.darken75,
+  redLight15: vermilion$1.lighten15,
+  redLight30: vermilion$1.lighten30,
+  redLight60: vermilion$1.lighten60,
+  redLight75: vermilion$1.lighten75,
+  redLight90: vermilion$1.lighten90,
   smalt: smalt.base,
   smaltDark75: smalt.darken75,
   smaltLight30: smalt.lighten30,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$1.base,
-  violetDark15: violet$1.darken15,
-  violetDark30: violet$1.darken30,
-  violetDark45: violet$1.darken45,
-  violetDark75: violet$1.darken75,
-  violetLight30: violet$1.lighten30,
-  violetLight60: violet$1.lighten60,
-  violetLight75: violet$1.lighten75,
-  violetLight90: violet$1.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,
   yellow: yellow.base,
   yellowDark15: yellow.darken15,
   yellowDark75: yellow.darken75,
@@ -840,13 +842,13 @@ const palette$6 = {
 
 const {
   maasstrichtBlue,
-  grey: grey$1,
-  pastelRed: pastelRed$1,
+  grey,
+  pastelRed,
   mellowApricot,
-  emerald: emerald$1,
+  emerald,
   vodka,
-  vermilion: vermilion$1,
-  deepSaffron: deepSaffron$1,
+  vermilion,
+  deepSaffron,
   pineGreen,
   ultramarineBlue,
   sonicSilver,
@@ -860,23 +862,23 @@ const {
 const palette$5 = {
   black: '#000000',
   white: '#ffffff',
-  greyLight95: grey$1.lighten95,
-  greyLight90: grey$1.lighten90,
-  greyLight75: grey$1.lighten75,
-  greyLight45: grey$1.lighten45,
-  greyLight30: grey$1.lighten30,
-  grey: grey$1.base,
+  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$1.base,
+  pastelRed: pastelRed.base,
   mellowApricot: mellowApricot.base,
-  emerald: emerald$1.base,
+  emerald: emerald.base,
   vodka: vodka.base,
-  vermilion: vermilion$1.base,
-  deepSaffron: deepSaffron$1.base,
+  vermilion: vermilion.base,
+  deepSaffron: deepSaffron.base,
   pineGreen: pineGreen.base,
   ultramarineBlue: ultramarineBlue.base,
   sonicSilver: sonicSilver.base,
@@ -889,35 +891,16 @@ const palette$5 = {
 };
 
 const {
-  emerald,
-  blue1,
-  nightBlue,
-  darkBlue,
-  grey,
-  deepSaffron,
-  peach,
-  vermilion,
-  pastelRed,
+  violet: violet$1,
   mauve: mauve$1
 } = colorScales;
 const palette$4 = Object.assign(Object.assign({}, palette$5), {
-  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$1.base
+  violet: violet$1.base,
+  violetLight20: violet$1.lighten20,
+  violetLight30: violet$1.lighten30,
+  violetLight90: violet$1.lighten90,
+  mauve: mauve$1.base,
+  mauveLight80: mauve$1.lighten80
 });
 
 const {
@@ -927,6 +910,7 @@ const {
 } = colorScales;
 const palette$3 = Object.assign(Object.assign({}, palette$5), {
   apple: apple.base,
+  appleLight10: apple.lighten10,
   hitPink: hitPink.base,
   hitPinkLight30: hitPink.lighten30,
   hitPinkLight50: hitPink.lighten50,
@@ -941,6 +925,7 @@ const {
   mauve
 } = colorScales;
 const palette$2 = Object.assign(Object.assign({}, palette$5), {
+  scarletGumLight20: scarletGum.lighten20,
   scarletGumLight30: scarletGum.lighten30,
   scarletGumLight50: scarletGum.lighten50,
   scarletGumLight80: scarletGum.lighten80,
@@ -955,18 +940,18 @@ const palette$2 = Object.assign(Object.assign({}, palette$5), {
 });
 
 const {
-  jordyBlue,
-  cornflowerBlue,
-  paua
+  royalBlue,
+  frenchSky
 } = colorScales;
 const palette$1 = Object.assign(Object.assign({}, palette$5), {
-  jordyBlueLight30: jordyBlue.lighten30,
-  jordyBlueLight50: jordyBlue.lighten50,
-  jordyBlueLight70: jordyBlue.lighten70,
-  jordyBlueLight90: jordyBlue.lighten90,
-  jordyBlue: jordyBlue.base,
-  cornflowerBlue: cornflowerBlue.base,
-  paua: paua.base
+  royalBlue: royalBlue.base,
+  royalBlueLight10: royalBlue.lighten10,
+  royalBlueLight80: royalBlue.lighten80,
+  royalBlueLight90: royalBlue.lighten90,
+  royalBlueDark30: royalBlue.darken30,
+  frenchSky: frenchSky.base,
+  frenchSkyLight70: frenchSky.lighten70,
+  frenchSkyLight80: frenchSky.lighten80
 });
 
 const {
@@ -977,9 +962,12 @@ const palette = Object.assign(Object.assign({}, palette$5), {
   goldLight20: gold.lighten20,
   goldLight50: gold.lighten50,
   goldLight70: gold.lighten70,
+  goldLight80: gold.lighten80,
   goldLight90: gold.lighten90,
   gold: gold.base,
   violet: violet.base,
+  violetLight20: violet.lighten20,
+  violetLight30: violet.lighten30,
   violetLight50: violet.lighten50,
   violetLight80: violet.lighten80,
   violetLight90: violet.lighten90

package/lib/index.js

@@ -709,6 +709,8 @@ const BASE_COLORS = {
   darkBlue: '#25006e',
   maasstrichtBlue: '#001f23',
   ultramarineBlue: '#4568fb',
+  royalBlue: '#5a68e2',
+  frenchSky: '#8999ff',
   aliceBlue: '#ecf0ff',
   jordyBlue: '#92abfc',
   cornflowerBlue: '#5d80f0',
@@ -749,14 +751,14 @@ const {
   blue,
   ultramarineBlue: ultramarineBlue$1,
   green,
-  grey: grey$2,
+  grey: grey$1,
   grotesqueGreen,
-  deepSaffron: deepSaffron$2,
+  deepSaffron: deepSaffron$1,
   pink,
   purple,
-  vermilion: vermilion$2,
+  vermilion: vermilion$1,
   smalt,
-  violet: violet$1,
+  violet: violet$2,
   yellow
 } = colorScales;
 const palette$6 = {
@@ -780,30 +782,30 @@ const palette$6 = {
   greenLight30: green.lighten30,
   greenLight75: green.lighten75,
   greenLight90: green.lighten90,
-  grey: grey$2.base,
-  greyDark15: grey$2.darken15,
-  greyDark30: grey$2.darken30,
-  greyDark45: grey$2.darken45,
-  greyDark60: grey$2.darken60,
-  greyDark75: grey$2.darken75,
-  greyLight45: grey$2.lighten45,
-  greyLight60: grey$2.lighten60,
-  greyLight75: grey$2.lighten75,
-  greyLight85: grey$2.lighten85,
-  greyLight90: grey$2.lighten90,
-  greyLight95: grey$2.lighten95,
+  grey: grey$1.base,
+  greyDark15: grey$1.darken15,
+  greyDark30: grey$1.darken30,
+  greyDark45: grey$1.darken45,
+  greyDark60: grey$1.darken60,
+  greyDark75: grey$1.darken75,
+  greyLight45: grey$1.lighten45,
+  greyLight60: grey$1.lighten60,
+  greyLight75: grey$1.lighten75,
+  greyLight85: grey$1.lighten85,
+  greyLight90: grey$1.lighten90,
+  greyLight95: grey$1.lighten95,
   grotesqueGreen: grotesqueGreen.base,
   grotesqueGreenDark45: grotesqueGreen.darken45,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
-  orange: deepSaffron$2.base,
-  orangeDark15: deepSaffron$2.darken15,
-  orangeDark30: deepSaffron$2.darken30,
-  orangeDark75: deepSaffron$2.darken75,
-  orangeLight30: deepSaffron$2.lighten30,
-  orangeLight75: deepSaffron$2.lighten75,
-  orangeLight90: deepSaffron$2.lighten90,
+  orange: deepSaffron$1.base,
+  orangeDark15: deepSaffron$1.darken15,
+  orangeDark30: deepSaffron$1.darken30,
+  orangeDark75: deepSaffron$1.darken75,
+  orangeLight30: deepSaffron$1.lighten30,
+  orangeLight75: deepSaffron$1.lighten75,
+  orangeLight90: deepSaffron$1.lighten90,
   pink: pink.base,
   pinkDark15: pink.darken15,
   pinkDark30: pink.darken30,
@@ -815,30 +817,30 @@ const palette$6 = {
   pinkLight90: pink.lighten90,
   purple: purple.base,
   purpleDark15: purple.darken15,
-  red: vermilion$2.base,
-  redDark15: vermilion$2.darken15,
-  redDark30: vermilion$2.darken30,
-  redDark75: vermilion$2.darken75,
-  redLight15: vermilion$2.lighten15,
-  redLight30: vermilion$2.lighten30,
-  redLight60: vermilion$2.lighten60,
-  redLight75: vermilion$2.lighten75,
-  redLight90: vermilion$2.lighten90,
+  red: vermilion$1.base,
+  redDark15: vermilion$1.darken15,
+  redDark30: vermilion$1.darken30,
+  redDark75: vermilion$1.darken75,
+  redLight15: vermilion$1.lighten15,
+  redLight30: vermilion$1.lighten30,
+  redLight60: vermilion$1.lighten60,
+  redLight75: vermilion$1.lighten75,
+  redLight90: vermilion$1.lighten90,
   smalt: smalt.base,
   smaltDark75: smalt.darken75,
   smaltLight30: smalt.lighten30,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$1.base,
-  violetDark15: violet$1.darken15,
-  violetDark30: violet$1.darken30,
-  violetDark45: violet$1.darken45,
-  violetDark75: violet$1.darken75,
-  violetLight30: violet$1.lighten30,
-  violetLight60: violet$1.lighten60,
-  violetLight75: violet$1.lighten75,
-  violetLight90: violet$1.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,
   yellow: yellow.base,
   yellowDark15: yellow.darken15,
   yellowDark75: yellow.darken75,
@@ -848,13 +850,13 @@ const palette$6 = {
 
 const {
   maasstrichtBlue,
-  grey: grey$1,
-  pastelRed: pastelRed$1,
+  grey,
+  pastelRed,
   mellowApricot,
-  emerald: emerald$1,
+  emerald,
   vodka,
-  vermilion: vermilion$1,
-  deepSaffron: deepSaffron$1,
+  vermilion,
+  deepSaffron,
   pineGreen,
   ultramarineBlue,
   sonicSilver,
@@ -868,23 +870,23 @@ const {
 const palette$5 = {
   black: '#000000',
   white: '#ffffff',
-  greyLight95: grey$1.lighten95,
-  greyLight90: grey$1.lighten90,
-  greyLight75: grey$1.lighten75,
-  greyLight45: grey$1.lighten45,
-  greyLight30: grey$1.lighten30,
-  grey: grey$1.base,
+  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$1.base,
+  pastelRed: pastelRed.base,
   mellowApricot: mellowApricot.base,
-  emerald: emerald$1.base,
+  emerald: emerald.base,
   vodka: vodka.base,
-  vermilion: vermilion$1.base,
-  deepSaffron: deepSaffron$1.base,
+  vermilion: vermilion.base,
+  deepSaffron: deepSaffron.base,
   pineGreen: pineGreen.base,
   ultramarineBlue: ultramarineBlue.base,
   sonicSilver: sonicSilver.base,
@@ -897,35 +899,16 @@ const palette$5 = {
 };
 
 const {
-  emerald,
-  blue1,
-  nightBlue,
-  darkBlue,
-  grey,
-  deepSaffron,
-  peach,
-  vermilion,
-  pastelRed,
+  violet: violet$1,
   mauve: mauve$1
 } = colorScales;
 const palette$4 = Object.assign(Object.assign({}, palette$5), {
-  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$1.base
+  violet: violet$1.base,
+  violetLight20: violet$1.lighten20,
+  violetLight30: violet$1.lighten30,
+  violetLight90: violet$1.lighten90,
+  mauve: mauve$1.base,
+  mauveLight80: mauve$1.lighten80
 });
 
 const {
@@ -935,6 +918,7 @@ const {
 } = colorScales;
 const palette$3 = Object.assign(Object.assign({}, palette$5), {
   apple: apple.base,
+  appleLight10: apple.lighten10,
   hitPink: hitPink.base,
   hitPinkLight30: hitPink.lighten30,
   hitPinkLight50: hitPink.lighten50,
@@ -949,6 +933,7 @@ const {
   mauve
 } = colorScales;
 const palette$2 = Object.assign(Object.assign({}, palette$5), {
+  scarletGumLight20: scarletGum.lighten20,
   scarletGumLight30: scarletGum.lighten30,
   scarletGumLight50: scarletGum.lighten50,
   scarletGumLight80: scarletGum.lighten80,
@@ -963,18 +948,18 @@ const palette$2 = Object.assign(Object.assign({}, palette$5), {
 });
 
 const {
-  jordyBlue,
-  cornflowerBlue,
-  paua
+  royalBlue,
+  frenchSky
 } = colorScales;
 const palette$1 = Object.assign(Object.assign({}, palette$5), {
-  jordyBlueLight30: jordyBlue.lighten30,
-  jordyBlueLight50: jordyBlue.lighten50,
-  jordyBlueLight70: jordyBlue.lighten70,
-  jordyBlueLight90: jordyBlue.lighten90,
-  jordyBlue: jordyBlue.base,
-  cornflowerBlue: cornflowerBlue.base,
-  paua: paua.base
+  royalBlue: royalBlue.base,
+  royalBlueLight10: royalBlue.lighten10,
+  royalBlueLight80: royalBlue.lighten80,
+  royalBlueLight90: royalBlue.lighten90,
+  royalBlueDark30: royalBlue.darken30,
+  frenchSky: frenchSky.base,
+  frenchSkyLight70: frenchSky.lighten70,
+  frenchSkyLight80: frenchSky.lighten80
 });
 
 const {
@@ -985,9 +970,12 @@ const palette = Object.assign(Object.assign({}, palette$5), {
   goldLight20: gold.lighten20,
   goldLight50: gold.lighten50,
   goldLight70: gold.lighten70,
+  goldLight80: gold.lighten80,
   goldLight90: gold.lighten90,
   gold: gold.base,
   violet: violet.base,
+  violetLight20: violet.lighten20,
+  violetLight30: violet.lighten30,
   violetLight50: violet.lighten50,
   violetLight80: violet.lighten80,
   violetLight90: violet.lighten90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/colors",
-  "version": "7.24.0",
+  "version": "7.25.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.24.0",
-    "prettier-config-hd": "7.24.0",
+    "eslint-config-hd": "7.25.0",
+    "prettier-config-hd": "7.25.0",
     "rollup": "^2.70.1"
   },
   "prettier": "prettier-config-hd"

package/src/colorScales/createColorScales.ts

@@ -1,25 +1,7 @@
 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,
+  5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
 ] as const;
 
 type LIGHTEN_STEPS = `lighten${typeof STEPS[number]}`;

package/src/colorScales/index.ts

@@ -8,6 +8,8 @@ const BASE_COLORS = {
   darkBlue: '#25006e',
   maasstrichtBlue: '#001f23',
   ultramarineBlue: '#4568fb',
+  royalBlue: '#5a68e2',
+  frenchSky: '#8999ff',
   aliceBlue: '#ecf0ff',
   jordyBlue: '#92abfc',
   cornflowerBlue: '#5d80f0',

package/src/eBensPalette/index.ts

@@ -1,48 +1,18 @@
 import colorScales from '../colorScales';
 import defaultMobilePalette from '../defaultMobilePalette';
 
-const {
-  emerald,
-  blue1,
-  nightBlue,
-  darkBlue,
-  grey,
-  deepSaffron,
-  peach,
-  vermilion,
-  pastelRed,
-  mauve,
-} = colorScales;
+const { violet, mauve } = colorScales;
 
 const palette = {
   ...defaultMobilePalette,
 
-  nightBlue: nightBlue.base,
-
-  blueLight60: blue1.lighten60, // lightBlue
-  blue: blue1.base,
-
-  darkBlue: darkBlue.base,
-  darkBlueDark15: darkBlue.darken15,
-
-  green: emerald.base,
-
-  greyDark45: grey.darken45, // grey
-  greyDark75: grey.darken75, // darkGrey
-  greyLight30: grey.lighten30, // greyDisable
-  greyLight45: grey.lighten45, // greyDisable
-  greyLight90: grey.lighten90, // greyBackground
-
-  orangeLight30: deepSaffron.lighten30, // orange
-
-  peach: peach.base,
-  peachLight75: peach.lighten75, // peachLight
-
-  red: vermilion.base,
-
-  pastelRed: pastelRed.base, // redLight
+  violet: violet.base,
+  violetLight20: violet.lighten20,
+  violetLight30: violet.lighten30,
+  violetLight90: violet.lighten90,
 
   mauve: mauve.base,
+  mauveLight80: mauve.lighten80,
 };
 
 export default palette;

package/src/jobsPalette/index.ts

@@ -7,6 +7,7 @@ const palette = {
   ...defaultMobilePalette,
 
   apple: apple.base,
+  appleLight10: apple.lighten10,
 
   hitPink: hitPink.base,
   hitPinkLight30: hitPink.lighten30,

package/src/swagPalette/index.ts

@@ -6,6 +6,7 @@ const { scarletGum, violet1, mauve } = colorScales;
 const palette = {
   ...defaultMobilePalette,
 
+  scarletGumLight20: scarletGum.lighten20,
   scarletGumLight30: scarletGum.lighten30,
   scarletGumLight50: scarletGum.lighten50,
   scarletGumLight80: scarletGum.lighten80,