Merge pull request #356 from theiliad/theiliad-update-palette

Update color palettes
carbon-design-system · Oct 2, 2019 · 287f537 · 287f537
2 parents 8623931 + 2aa2f66
commit 287f537
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 41 deletions.
diff --git a/packages/angular/stories/helpers/commons.ts b/packages/angular/stories/helpers/commons.ts
@@ -11,11 +11,18 @@ export const randomizeValue = (currentVal, negativeValueAllowed?) => {
 };
 
 export const colors = [
-	"#8a3ffc",
-	"#20d5d2",
+	"#6e32c9",
+	"#1191e6",
+	"#006161",
+	"#a11950",
+	"#fb4b53",
+	"#570408",
+	"#198038",
+	"#003d73",
 	"#ee538b",
-	"#30b0ff",
-	"#760a3a",
-	"#d0b0ff",
-	"#003d73"
+	"#b28600",
+	"#009c98",
+	"#002b50",
+	"#8a3800",
+	"#a66efa"
 ];
diff --git a/packages/core/src/services/colorPalettes.ts b/packages/core/src/services/colorPalettes.ts
@@ -1,36 +1,44 @@
 import colors from "./colors";
 
+// TODO - Some hardcoded values aren't available
+// in @carbon/colors yet. We should look at adding those
+// colors
 export const WHITE = [
-	colors.purple(60),
-	colors.teal(30),
-	colors.magenta(50),
-	colors.cyan(40),
-	colors.magenta(80),
-	colors.purple(30),
-	colors.cyan(80)
-];
-
-export const WHITE_2 = [
-	colors.purple(60),
-	colors.magenta(30),
+	colors.purple(70),
+	colors.cyan(50),
 	colors.teal(70),
-	colors.cyan(40),
 	colors.magenta(70),
-	colors.teal(30),
-	colors.cyan(80)
+	colors.red(50),
+	colors.red(90),
+	colors.green(60),
+	colors.blue(80),
+	colors.magenta(50),
+	"#b28600", // Yellow 50
+	colors.teal(50),
+	colors.cyan(90),
+	"#8a3800", // Orange 70
+	colors.purple(50)
 ];
 
-export const G10 = [
+export const DARK = [
 	colors.purple(60),
-	colors.teal(30),
-	colors.magenta(50),
-	colors.green(40),
-	colors.purple(20),
+	colors.cyan(40),
 	colors.teal(60),
-	colors.magenta(30)
+	colors.magenta(40),
+	colors.red(50),
+	colors.red(10),
+	colors.green(30),
+	colors.blue(50),
+	colors.magenta(60),
+	"#d2a106", // Yellow 40
+	colors.teal(40),
+	colors.cyan(20),
+	"#ba4e00", // Orange 60
+	colors.purple(30)
 ];
 
-export const G90 = G10;
-export const G100 = G10;
+export const G10 = WHITE;
+export const G90 = DARK;
+export const G100 = DARK;
 
 export const DEFAULT = WHITE;
diff --git a/packages/core/src/services/colors.ts b/packages/core/src/services/colors.ts
@@ -1,4 +1,5 @@
 import {
+	blue,
 	cyan,
 	green,
 	magenta,
@@ -10,6 +11,7 @@ import {
 const getColor = (obj, shade) => obj[shade];
 
 export default {
+	blue: shade => getColor(blue, shade),
 	cyan: shade => getColor(cyan, shade),
 	green: shade => getColor(green, shade),
 	magenta: shade => getColor(magenta, shade),

diff --git a/packages/react/helpers/commons.js b/packages/react/helpers/commons.js
@@ -7,11 +7,18 @@ export const randomizeValue = currentVal => {
 };
 
 export const colors = [
-	"#8a3ffc",
-	"#20d5d2",
+	"#6e32c9",
+	"#1191e6",
+	"#006161",
+	"#a11950",
+	"#fb4b53",
+	"#570408",
+	"#198038",
+	"#003d73",
 	"#ee538b",
-	"#30b0ff",
-	"#760a3a",
-	"#d0b0ff",
-	"#003d73"
+	"#b28600",
+	"#009c98",
+	"#002b50",
+	"#8a3800",
+	"#a66efa"
 ];
diff --git a/packages/vue/helpers/commons.js b/packages/vue/helpers/commons.js
@@ -7,11 +7,18 @@ export const randomizeValue = currentVal => {
 };
 
 export const colors = [
-	"#8a3ffc",
-	"#20d5d2",
+	"#6e32c9",
+	"#1191e6",
+	"#006161",
+	"#a11950",
+	"#fb4b53",
+	"#570408",
+	"#198038",
+	"#003d73",
 	"#ee538b",
-	"#30b0ff",
-	"#760a3a",
-	"#d0b0ff",
-	"#003d73"
+	"#b28600",
+	"#009c98",
+	"#002b50",
+	"#8a3800",
+	"#a66efa"
 ];