feat(feat(core): Color palettes):

.gitignore

@@ -1,12 +1,11 @@
 dist
-demo/bundle
+**/demo/bundle
+**/demo/dist
 node_modules
 .DS_Store
 .vscode/
 .idea/
 *.log
-!packages/core/demo/
-demo
 storybook-dist
 package-lock.json
 .cache/

packages/core/demo/chart-types.ts

@@ -0,0 +1,97 @@
+const {
+	// Bar
+	groupedBarOptions,
+	groupedBarData,
+	simpleBarOptions,
+	simpleBarData,
+	stackedBarData,
+	stackedBarOptions,
+	// Pie & donut
+	pieOptions,
+	pieData,
+	donutOptions,
+	// Line
+	curvedLineOptions,
+	curvedLineData,
+	lineData,
+	lineOptions,
+	scatterData,
+	// Combo
+	comboData,
+	comboOptions
+} = require("./demo-data/index");
+
+export const chartTypes = [
+	{
+		id: "grouped-bar",
+		name: "Grouped Bar",
+		options: groupedBarOptions,
+		data: groupedBarData
+	},
+	{
+		id: "simple-bar",
+		name: "Bar",
+		options: simpleBarOptions,
+		data: simpleBarData
+	},
+	{
+		id: "combo",
+		name: "Combo",
+		options: comboOptions,
+		data: comboData
+	},
+	{
+		id: "stacked-bar",
+		name: "Bar",
+		options: stackedBarOptions,
+		data: stackedBarData
+	},
+	{
+		id: "simple-bar-accessible",
+		name: "Accessible Bar",
+		options: Object.assign({}, simpleBarOptions, {accessibility: true}),
+		data: simpleBarData
+	},
+	{
+		id: "stacked-bar-accessible",
+		name: "Bar",
+		options: Object.assign({}, stackedBarOptions, {accessibility: true}),
+		data: stackedBarData
+	},
+	{
+		id: "curved-line",
+		name: "Curved Line",
+		options: curvedLineOptions,
+		data: curvedLineData
+	},
+	{
+		id: "line",
+		name: "Line",
+		options: lineOptions,
+		data: lineData
+	},
+	{
+		id: "line-step",
+		name: "Step",
+		options: Object.assign({}, lineOptions, {curve: "curveStepAfter"}),
+		data: lineData
+	},
+	{
+		id: "pie",
+		name: "pie",
+		options: pieOptions,
+		data: pieData
+	},
+	{
+		id: "donut",
+		name: "donut",
+		options: donutOptions,
+		data: pieData
+	},
+	{
+		id: "scatter",
+		name: "scatter",
+		options: lineOptions,
+		data: scatterData
+	}
+];

packages/core/demo/demo-options.ts

@@ -0,0 +1,46 @@
+import { colorPalettes } from "../src/index";
+
+export const setOrUpdateParam = (name, value) => {
+    const params = new URLSearchParams(location.search)
+
+    // Remove any existing "theme" param
+    if (params.has(name)) {
+        params.delete(name);
+    }
+
+    params.append(name, value);
+
+    location.search = params.toString();
+};
+
+// Theme selector
+const initializeThemeSelector = () => {
+    const dropdownOptions = Array.prototype.slice.call(
+        document.querySelectorAll("div.theme-selector a.bx--dropdown-link")
+    );
+
+    // Set click listeners for the dropdown options
+    dropdownOptions.forEach(dropdownOption => {
+        dropdownOption.addEventListener("click", e => {
+            e.preventDefault();
+
+            setOrUpdateParam("theme", e.target.parentNode.getAttribute("data-value"));
+        });
+    });
+
+    // Set state for current theme
+    const params = new URLSearchParams(location.search)
+    let themeName;
+    if (params.has("theme") && colorPalettes[params.get("theme")]) {
+        themeName = params.get("theme");
+    } else {
+        themeName = "DEFAULT";
+    }
+    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;
+};
+
+export const initializeDemoOptions = () => {
+    initializeThemeSelector();
+};