Merge pull request #880 from sophiiae/fix-import-colors

* fix(core, angular, react, vue, svelt): update radar color when option changes * fix(core): fix import colors issue * style(core): renaming * improvement(core): add warning if color scale group doesn't exist Co-authored-by: Fei <[email protected]>
carbon-design-system · Nov 16, 2020 · 33a3f5b · 33a3f5b
1 parent 681ec23
commit 33a3f5b
Show file tree

Hide file tree

Showing 4 changed files with 273 additions and 273 deletions.
diff --git a/packages/core/src/components/graphs/radar.ts b/packages/core/src/components/graphs/radar.ts
@@ -506,7 +506,7 @@ export class Radar extends Component {
 						.attr("opacity", 1)
 						.attr("transform", `translate(${c.x}, ${c.y})`)
 						.attr("d", (group) => radialLineGenerator(group.data))
-				);
+				)
 			},
 			(exit) =>
 				exit.call((selection) =>

diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
@@ -652,6 +652,12 @@ export class ChartModel {
 		const options = this.getOptions();
 		const userProvidedScale = Tools.getProperty(options, "color", "scale");
 
+		Object.keys(userProvidedScale).forEach(dataGroup => {
+			if (!this.allDataGroups.includes(dataGroup)) {
+				console.warn(`"${dataGroup}" does not exist in data groups.`);
+			}
+		})
+
 		/**
 		 * Go through allDataGroups. If a data group has a color value provided
 		 * by the user, add that to the color range

diff --git a/packages/core/src/styles/color-palatte.scss b/packages/core/src/styles/color-palatte.scss
@@ -0,0 +1,243 @@
+@function getColorValue($color, $scale) {
+	@return map-get(map-get($ibm-color-map, $color), $scale);
+}
+
+$white-theme-colors: (
+	"1": (
+		"1": (
+			"1": getColorValue("purple", 70)
+		),
+		"2": (
+			"1": getColorValue("blue", 80)
+		),
+		"3": (
+			"1": getColorValue("cyan", 50)
+		),
+		"4": (
+			"1": getColorValue("teal", 60)
+		)
+	),
+	"2": (
+		"1": (
+			"1": getColorValue("purple", 70),
+			"2": getColorValue("teal", 50)
+		),
+		"2": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("red", 90)
+		),
+		"3": (
+			"1": getColorValue("magenta", 70),
+			"2": getColorValue("red", 90)
+		),
+		"4": (
+			"1": getColorValue("cyan", 50),
+			"2": getColorValue("teal", 70)
+		),
+		"5": (
+			"1": getColorValue("teal", 50),
+			"2": getColorValue("blue", 80)
+		)
+	),
+	"3": (
+		"1": (
+			"1": getColorValue("magenta", 50),
+			"2": getColorValue("cyan", 50),
+			"3": getColorValue("purple", 70)
+		),
+		"2": (
+			"1": getColorValue("magenta", 70),
+			"2": getColorValue("red", 50),
+			"3": getColorValue("red", 90)
+		),
+		"3": (
+			"1": getColorValue("purple", 50),
+			"2": getColorValue("teal", 70),
+			"3": getColorValue("blue", 80)
+		),
+		"4": (
+			"1": getColorValue("purple", 50),
+			"2": getColorValue("teal", 70),
+			"3": getColorValue("magenta", 70)
+		),
+		"5": (
+			"1": getColorValue("cyan", 90),
+			"2": getColorValue("purple", 70),
+			"3": getColorValue("teal", 50)
+		)
+	),
+	"4": (
+		"1": (
+			"1": getColorValue("purple", 70),
+			"2": getColorValue("cyan", 90),
+			"3": getColorValue("teal", 50),
+			"4": getColorValue("magenta", 50)
+		),
+		"2": (
+			"1": getColorValue("magenta", 70),
+			"2": getColorValue("red", 50),
+			"3": getColorValue("red", 90),
+			"4": getColorValue("purple", 50)
+		),
+		"3": (
+			"1": getColorValue("teal", 50),
+			"2": getColorValue("blue", 80),
+			"3": getColorValue("purple", 50),
+			"4": getColorValue("magenta", 70)
+		)
+	),
+	"5": (
+		"1": (
+			"1": getColorValue("purple", 70),
+			"2": getColorValue("cyan", 50),
+			"3": getColorValue("teal", 70),
+			"4": getColorValue("magenta", 70),
+			"5": getColorValue("red", 90)
+		),
+		"2": (
+			"1": getColorValue("blue", 80),
+			"2": getColorValue("teal", 50),
+			"3": getColorValue("magenta", 70),
+			"4": getColorValue("red", 90),
+			"5": getColorValue("purple", 50)
+		)
+	),
+	"14": (
+		"1": (
+			"1": getColorValue("purple", 70),
+			"2": getColorValue("cyan", 50),
+			"3": getColorValue("teal", 70),
+			"4": getColorValue("magenta", 70),
+			"5": getColorValue("red", 50),
+			"6": getColorValue("red", 90),
+			"7": getColorValue("green", 60),
+			"8": getColorValue("blue", 80),
+			"9": getColorValue("magenta", 50),
+			"10": #b28600, //yellow 50, update when available in carbon color
+			"11": getColorValue("teal", 50),
+			"12": getColorValue("cyan", 90),
+			"13": #8a3800, //orange 70, update when available in carbon color
+			"14": getColorValue("purple", 50)
+		)
+	)
+);
+
+$dark-theme-colors: (
+	"1": (
+		"1": (
+			"1": getColorValue("purple", 30)
+		),
+		"2": (
+			"1": getColorValue("blue", 50)
+		),
+		"3": (
+			"1": getColorValue("cyan", 40)
+		),
+		"4": (
+			"1": getColorValue("teal", 40)
+		)
+	),
+	"2": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("teal", 40)
+		),
+		"2": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("magenta", 40)
+		),
+		"3": (
+			"1": getColorValue("magenta", 40),
+			"2": getColorValue("red", 10)
+		),
+		"4": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("cyan", 20)
+		),
+		"5": (
+			"1": getColorValue("teal", 60),
+			"2": getColorValue("green", 30)
+		)
+	),
+	"3": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("cyan", 20)
+		),
+		"2": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("magenta", 40),
+			"3": getColorValue("red", 10)
+		),
+		"3": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("purple", 30)
+		),
+		"4": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("green", 30),
+			"3": getColorValue("red", 10)
+		),
+		"5": (
+			"1": getColorValue("teal", 60),
+			"2": getColorValue("green", 30),
+			"3": getColorValue("cyan", 20)
+		)
+	),
+	"4": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("cyan", 20),
+			"4": getColorValue("blue", 50)
+		),
+		"2": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("purple", 30),
+			"4": getColorValue("red", 10)
+		),
+		"3": (
+			"1": getColorValue("teal", 60),
+			"2": getColorValue("red", 10),
+			"3": getColorValue("cyan", 40),
+			"4": getColorValue("green", 30)
+		)
+	),
+	"5": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("cyan", 20),
+			"4": getColorValue("blue", 50),
+			"5": getColorValue("magenta", 40)
+		),
+		"2": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("purple", 30),
+			"4": getColorValue("red", 10),
+			"5": getColorValue("green", 30)
+		)
+	),
+	"14": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("cyan", 40),
+			"3": getColorValue("teal", 60),
+			"4": getColorValue("magenta", 40),
+			"5": getColorValue("red", 50),
+			"6": getColorValue("red", 10),
+			"7": getColorValue("green", 30),
+			"8": getColorValue("blue", 50),
+			"9": getColorValue("magenta", 60),
+			"10": #d2a106, //yellow 40, update when available in carbon color
+			"11": getColorValue("teal", 40),
+			"12": getColorValue("cyan", 20),
+			"13": #ba4e00, //orange 60, update when available in carbon color
+			"14": getColorValue("purple", 30)
+		)
+	)
+);