adding in carbon/themes

packages/core/build.sh

@@ -7,4 +7,5 @@ tsc
 cp *.md dist/
 cp package.json dist/
 cp src/style.scss dist/style.scss
+cp src/themes dist/themes
 node-sass dist/style.scss > dist/style.css

packages/core/demo/demo-options.ts

@@ -38,7 +38,16 @@ const initializeThemeSelector = () => {
     }
     const dropdownDefaultOption = document.querySelector("div.theme-selector li.bx--dropdown-text");
     const selectedOption = dropdownOptions.find(dO => dO.parentNode.getAttribute("data-value") === themeName);
-    dropdownDefaultOption.innerHTML = selectedOption.innerText;
+	dropdownDefaultOption.innerHTML = selectedOption.innerText;
+
+	// Set dark theme on the window
+	switch (themeName) {
+		case "DARK_1":
+			document.body.classList.add("carbon--dark");
+			break;
+		default:
+			break;
+	}
 };
 
 export const initializeDemoOptions = () => {

packages/core/demo/index.scss

@@ -167,3 +167,24 @@ div.options {
 	background-color: #fff;
 	box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1);
 }
+//**********************************************
+// Dark Theme
+//***********************************************
+
+$gray100: #171717;
+$gray90: #282828;
+$gray10: #f3f3f3;
+
+body.carbon--dark {
+  background-color: $gray100;
+  div.content {
+    color: $gray10;
+  }
+  div.options {
+    background: $gray90;
+    box-shadow: 0 15px 34px -11px rgba(14, 34, 65, 0.123);
+  }
+  div.demo-chart-holder {
+    background: $gray90;
+  }
+}

packages/core/package.json

@@ -44,6 +44,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@carbon/colors": "10.1.1",
+    "@carbon/themes": "^10.3.1",
     "@carbon/utils-position": "1.1.0",
     "babel-polyfill": "6.26.0",
     "resize-observer-polyfill": "1.5.0"

packages/core/src/base-axis-chart.ts

@@ -64,6 +64,8 @@ export class BaseAxisChart extends BaseChart {
 			// Draw the x & y grid
 			this.drawXGrid();
 			this.drawYGrid();
+			// Draw the backdrop
+			this.drawBackdrop();
 
 			this.addOrUpdateLegend();
 		} else {
@@ -387,10 +389,7 @@ export class BaseAxisChart extends BaseChart {
 				.attr("y1", this.y(0))
 				.attr("y2", this.y(0))
 				.attr("x1", 0)
-				.attr("x2", chartSize.width)
-				.attr("stroke", Configuration.scales.domain.color)
-				.attr("fill", Configuration.scales.domain.color)
-				.attr("stroke-width", Configuration.scales.domain.strokeWidth);
+				.attr("x2", chartSize.width);
 		}
 
 		const tickHeight = this.getLargestTickHeight(yAxisRef.selectAll(".tick"));
@@ -473,6 +472,21 @@ export class BaseAxisChart extends BaseChart {
 		}
 	}
 
+	drawBackdrop() {
+		// Get height from the grid
+		const xgrid = this.innerWrap.select(".x.grid").node().getBBox().height;
+		const ygrid = this.innerWrap.select(".y.grid").node().getBBox();
+
+		this.innerWrap
+			.append("rect")
+			.classed("chart-grid-backdrop", true)
+			.attr("x", ygrid.x)
+			.attr("y", ygrid.y)
+			.attr("width", ygrid.width)
+			.attr("height", xgrid)
+			.lower();
+	}
+
 	addOrUpdateThresholds(yGrid, animate?) {
 		const t = animate === false ? this.getInstantTransition() : this.getDefaultTransition();
 

packages/core/src/base-chart.ts

@@ -415,7 +415,8 @@ export class BaseChart {
 			chartId = this.id;
 			container = parent.append("div");
 			container.attr("chart-id", chartId)
-				.classed("chart-wrapper", true);
+				.classed("chart-wrapper", true)
+				.classed(`carbon--theme--${this.options.theme}`, true);
 			if (container.select(".legend-wrapper").nodes().length === 0) {
 				const legendWrapper = container.append("div")
 					.attr("class", "legend-wrapper")

packages/core/src/configuration.ts

@@ -20,6 +20,13 @@ export enum ChartType {
 	COMBO = "combo"
 }
 
+/**
+ * enum of all supported chart themes
+ */
+export enum ChartTheme {
+	LIGHT = "white",
+	DARK = "g100"
+}
 /**
  * enum of all possible tooltip sizes
  */
@@ -90,6 +97,10 @@ export interface BaseChartOptions {
 	 * array of hex colors for the chart to render from
 	 */
 	colors: Array<string>;
+	/**
+	 * supported chart theme
+	 */
+	theme?: ChartTheme;
 	/**
 	 * tooltip configuration
 	 */
@@ -145,6 +156,7 @@ const baseOptions: BaseChartOptions = {
 		formatter: null,
 		targetsToSkip: ["rect", "circle", "path"]
 	},
+	theme: ChartTheme.LIGHT,
 	overlay: {
 		types: {
 			loading: "loading",

packages/core/src/style.scss

@@ -1,3 +1,5 @@
+@import "./themes/styles-white.scss";
+@import "./themes/styles-g100.scss";
 $gray_60: #595859;
 
 $default_transition: all .1s ease-out;
@@ -24,22 +26,24 @@ div.chart-holder {
 		/*
 		Axes
 		*/
-		g.yAxes.axis {
-			path.domain {
+		g.yAxes {
+			line.domain {
+				stroke-width: 1px;
+			}
+			.axis path.domain {
 				stroke: none;
 			}
 		}
 
 		g.x.axis {
 			path.domain {
-				stroke: #959595;
-				stroke-width: 2;
+				stroke-width: 1px;
 			}
 		}
 
 		g.x.grid, g.y.grid {
 			g.tick line {
-				stroke: rgb(236, 238, 239);
+				stroke-width: 1px;
 			}
 		}
 
@@ -61,19 +65,22 @@ div.chart-holder {
 			}
 		}
 	}
-
+	g.tick text {
+		font-family: "IBM Plex Sans Condensed";
+	}
 	text {
 		font-size: 12px;
-		fill: $gray_60;
-		stroke: $gray_60;
+		line-height: 16px;
 		stroke-width: .3;
 		@include fonts();
-
+		font-weight: 400;
 		&.title{
 			font-size: 18px;
 			font-weight: bold;
 		}
-
+		&.chart-label {
+			font-family: "IBM Plex Sans Condensed";
+		}
 		&.donut {
 			&-figure {
 				font-size: 24px;

packages/core/src/themes/styles-g100.scss

@@ -0,0 +1,36 @@
+
+@import "../../node_modules/@carbon/themes/scss/themes";
+$gray_50: #8c8c8c;
+
+.carbon--theme--g100 {
+  @include carbon--theme($carbon--theme--g100) {
+    svg.chart-svg {
+      g.inner-wrap {
+        rect.chart-grid-backdrop {
+          fill: #000;
+        }
+        .chart-wrapper text {
+          fill: $ui-05;
+          stroke: $ui-05;
+        }
+        g.x.grid,
+        g.y.grid {
+          g.tick line {
+            stroke: $ui-01;
+          }
+        }
+        .yAxes line.domain {
+          stroke: $ui-04;
+        }
+        text {
+			fill: $gray_50;
+			stroke: $gray_50;
+			&.axis-label {
+			  fill: $text-01;
+			  stroke: $text-01;
+			}
+		  }
+      }
+    }
+  }
+}

packages/core/src/themes/styles-white.scss

@@ -0,0 +1,25 @@
+@import "../../node_modules/@carbon/themes/scss/themes";
+$gray_60: #6f6f6f;
+
+.carbon--theme--white {
+  rect.chart-grid-backdrop {
+    fill: none;
+  }
+  g.x.grid,
+  g.y.grid {
+    g.tick line {
+      stroke: $ui-01;
+    }
+  }
+  .yAxes line.domain, path.domain {
+    stroke: $ui-04;
+  }
+  text {
+	fill: $gray_60;
+	stroke: $gray_60;
+    &.axis-label {
+      fill: $text-01;
+      stroke: $text-01;
+    }
+  }
+}

yarn.lock

@@ -1088,6 +1088,18 @@
   resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.1.1.tgz#854c33ccdf02ac319c06923268ba89cf83a58c93"
   integrity sha512-hni1iN0FUfQgnATqAT971WMAosl9YK7kQqp1V0vkF3d8rB/id+Y3K1GhDsXLKPfEAxdgE4+swGvID9tAY+a9kQ==
 
+"@carbon/[email protected]":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.2.0.tgz#a9b0f2372fdf231a34b070ec8cff3f9d7a044fbd"
+  integrity sha512-WH6IQNt/HfqExMhTcgIBJN6Cqunrr+udtEKZAE3k8eMlBceKpiidfzgVNbAVKAujGjgwDR60XF+gQGRbteCWUg==
+
+"@carbon/themes@^10.3.1":
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-10.3.1.tgz#f951af77d49bc8146f691a290f1d76afa27da0a3"
+  integrity sha512-5UviZgzQriksQIBgrJ6I/qkmI8pR3GWw4WQ+tdHyw5LpDstzwxRIUf3emz/lBEPPxsEYOaf31nJ4DOFETMCr0Q==
+  dependencies:
+    "@carbon/colors" "10.2.0"
+
 "@carbon/[email protected]":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@carbon/utils-position/-/utils-position-1.1.0.tgz#dbe6fe48ada221db20f1dfc8973ae4aec2caeeae"