feat(core): Colors, themes & more design updates (#261)

* Update demo site to use carbon v10 * Add themes * Fix lint issues * Add padding between slices for pie & donut * Updater innerRadius of donut chart * Show all themes on demo site * Trigger build * Multiply blending mode for line chart lines * Scatter chart fill and point size updates * Fix lint issues * Update main palette * Fix main theme * Add new light themes * Use @carbon/elements, and add a dark theme * Replace with default colors, and add theme selector * feat(Color palettes and design updates):
carbon-design-system · May 9, 2019 · b0b9070 · b0b9070
1 parent 0fe47a8
commit b0b9070
Show file tree

Hide file tree

Showing 13 changed files with 184 additions and 246 deletions.
diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts
@@ -1,17 +1,11 @@
-export const colors = window["isExperimental"] ?
-	[
-		"#418cff", // Blue 60
-		"#3dbb61", // Green 40
-		"#ee538b", // Magenta 50
-		"#0058a1", // Cyan 70
-		"#fb4b53", // Red 50
-		"#8a3ffc", // Purple 60
-		"#00bab6" // Teal 40
-	]:
-	[
-		"#00a68f",
-		"#3b1a40",
-		"#473793",
-		"#3c6df0",
-		"#56D2BB"
-	];
+import { colorPalettes } from "../../src/index";
+
+const urlParams = new URLSearchParams(window.location.search);
+
+// Grab "theme" param from query string
+let themeToUse = colorPalettes.DEFAULT;
+if (urlParams.has("theme") && colorPalettes[urlParams.get("theme")]) {
+    themeToUse = colorPalettes[urlParams.get("theme")];
+}
+
+export const colors = themeToUse;
diff --git a/packages/core/demo/demo-data/line.ts b/packages/core/demo/demo-data/line.ts
@@ -132,9 +132,6 @@ export const lineOptions = {
 			]
 		}
 	},
-	points: {
-		radius: 4
-	},
 	legendClickable: true,
 	containerResizable: true
 };

diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
@@ -20,7 +20,7 @@
 
 	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700" rel="stylesheet">
 
-	<link href="https://unpkg.com/carbon-components@9.61.1/css/carbon-components.css" rel="stylesheet">
+	<link href="https://unpkg.com/carbon-components@10.1.0/css/carbon-components.css" rel="stylesheet">
 </head>
 
 <body>
@@ -34,42 +34,52 @@ <h1>Carbon Charts</h1>
 			<h3>A reusable framework-agnostic D3 charting library.</h3>
 
 			<div class="links">
-				<a class="bx--btn bx--btn--primary" href="https://github.com/carbon-design-system/carbon-charts" target="_blank">
+				<a class="bx--btn bx--btn--primary" href="https://github.com/carbon-design-system/carbon-charts"
+					target="_blank">
 					Repository
 				</a>
 
-				<a class="bx--btn bx--btn--primary" href="https://carbon-design-system.github.io/carbon-charts/documentation/" target="_blank">
+				<a class="bx--btn bx--btn--primary"
+					href="https://carbon-design-system.github.io/carbon-charts/documentation/" target="_blank">
 					Docs
 				</a>
 
-				<a class="bx--btn bx--btn--primary" href="https://carbon-design-system.github.io/carbon-charts/angular" target="_blank">
-					<svg class="angular" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-						viewBox="0 0 250 250" style="enable-background:new 0 0 250 250; fill: #fff;" xml:space="preserve">
+				<a class="bx--btn bx--btn--primary" href="https://carbon-design-system.github.io/carbon-charts/angular"
+					target="_blank">
+					<svg class="angular" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250"
+						style="enable-background:new 0 0 250 250; fill: #fff;" xml:space="preserve">
 						<g>
-							<polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 	"/>
+							<polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 	" />
 							<path d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0
-								l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z"/>
+								l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z" />
 						</g>
 					</svg>
 
 					Angular
 				</a>
 
-				<a class="bx--btn bx--btn--primary" href="https://carbon-design-system.github.io/carbon-charts/react" target="_blank">
+				<a class="bx--btn bx--btn--primary" href="https://carbon-design-system.github.io/carbon-charts/react"
+					target="_blank">
 					<svg class="react" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700.9 595.3" style="fill: #fff;">
 						<g>
-							<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" />
+							<path
+								d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" />
 							<circle cx="420.9" cy="296.5" r="45.7" />
 						</g>
 					</svg>
 
 					React
 				</a>
 
-				<a class="bx--btn bx--btn--primary last" href="https://carbon-design-system.github.io/carbon-charts/vue" target="_blank">
-					<svg class="vue" viewBox="0 0 197 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-					  <polygon fill="#ffffff" points="157.06 0 98.16 102.01 39.23 0 0 0 98.16 170.02 196.32 0 120.83 0"></polygon>
-					  <polygon fill="#ffffff" points="98.16 28.93 81.35 0 75.5 0 98.16 39.26 120.82 0 114.973219 0"></polygon>
+				<a class="bx--btn bx--btn--primary last" href="https://carbon-design-system.github.io/carbon-charts/vue"
+					target="_blank">
+					<svg class="vue" viewBox="0 0 197 170" version="1.1" xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink">
+						<polygon fill="#ffffff"
+							points="157.06 0 98.16 102.01 39.23 0 0 0 98.16 170.02 196.32 0 120.83 0"></polygon>
+						<polygon fill="#ffffff" points="98.16 28.93 81.35 0 75.5 0 98.16 39.26 120.82 0 114.973219 0">
+						</polygon>
 					</svg>
 
 					Vue
@@ -78,21 +88,36 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
 		</div>
 	</header>
 
-	<div class="experimental-switch">
-		<fieldset class="bx--fieldset experimental-switch">
-			<legend class="bx--label">
-				Experimental Mode
-			</legend>
-
-			<div class="bx--form-item">
-				<input class="bx--toggle" id="toggleInput" type="checkbox">
-				<label class="bx--toggle__label" for="toggleInput">
-					<span class="bx--toggle__text--left">Off</span>
-					<span class="bx--toggle__appearance"></span>
-					<span class="bx--toggle__text--right">On</span>
-				</label>
+	<div class="options">
+		<div class="bx--form-item theme-selector">
+			<div class="bx--dropdown__wrapper">
+				<label for="dropdown-id" class="bx--label">Theme</label>
+				<ul data-dropdown data-value id="dropdown-id" class="bx--dropdown " tabindex="0">
+					<li class="bx--dropdown-text">
+						Choose a theme </li>
+					<li class="bx--dropdown__arrow-container">
+						<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;"
+							xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16"
+							viewBox="0 0 16 16" aria-hidden="true">
+							<path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path>
+						</svg>
+					</li>
+					<li>
+						<ul class="bx--dropdown-list">
+							<li data-option data-value="DEFAULT" class="bx--dropdown-item">
+								<a class="bx--dropdown-link" href="#" tabindex="-1">Light UI - Primary</a>
+							</li>
+							<li data-option data-value="LIGHT_2" class="bx--dropdown-item">
+								<a class="bx--dropdown-link" href="#" tabindex="-1">Light UI - Secondary</a>
+							</li>
+							<li data-option data-value="DARK_1" class="bx--dropdown-item">
+								<a class="bx--dropdown-link" href="#" tabindex="-1">Dark UI - Primary</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
 			</div>
-		</fieldset>
+		</div>
 	</div>
 
 	<!-- Combo Chart -->
@@ -150,7 +175,8 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
 	</div>
 
 	<div class="demo-chart-holder has-actions" id="classy-simple-bar-accessible-chart-holder"></div>
-	<div class="chart-demo-actions" id="actions-simple-bar-accessible" role="region" aria-label="Simple accessible bar chart actions">
+	<div class="chart-demo-actions" id="actions-simple-bar-accessible" role="region"
+		aria-label="Simple accessible bar chart actions">
 		<button class="bx--btn bx--btn--primary" id="change-data-simple-bar-accessible" type="button">
 			Update Data
 		</button>
@@ -183,7 +209,8 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
 	</div>
 
 	<div class="demo-chart-holder has-actions" id="classy-stacked-bar-accessible-chart-holder"></div>
-	<div class="chart-demo-actions" id="actions-stacked-bar-accessible" role="region" aria-label="Stacked accessible bar chart actions">
+	<div class="chart-demo-actions" id="actions-stacked-bar-accessible" role="region"
+		aria-label="Stacked accessible bar chart actions">
 		<button class="bx--btn bx--btn--primary" id="change-data-stacked-bar-accessible" type="button">
 			Update Data
 		</button>
@@ -233,12 +260,13 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
 			Update Data
 		</button>
 
- 		<button class="bx--btn bx--btn--primary change-data-promise" type="button" data-promise-delay="2000">
+		<button class="bx--btn bx--btn--primary change-data-promise" type="button" data-promise-delay="2000">
 			Promise
 		</button>
 	</div>
 </body>
 
-<script src="https://unpkg.com/carbon-components@9.8.0/scripts/carbon-components.min.js" type="text/javascript"></script>
+<script src="https://unpkg.com/carbon-components@10.1.0/scripts/carbon-components.min.js"
+	type="text/javascript"></script>
 
-</html>
+</html>
diff --git a/packages/core/demo/index.scss b/packages/core/demo/index.scss
@@ -10,46 +10,6 @@ body {
 	font-family: "IBM Plex Sans", Arial, sans-serif;
 }
 
-h1 {
-	font-weight: 600;
-}
-
-h3 {
-	margin-bottom: 40px;
-}
-
-.button {
-	display: table;
-	padding: 12px 15px;
-    margin-bottom: 10px;
-	background: #0063ff;
-	color: #fff;
-	border: none;
-	font-size: 15px;
-    text-decoration: none;
-}
-
-// Carbon overrides
-$due_blue: #0063ff;
-
-.bx--btn--primary {
-	background: $due_blue;
-	outline: none !important;
-    border: none !important;
-
-	&:hover {
-		background: #0059e4;
-	}
-
-	&:active {
-		background: #003992;
-	}
-}
-
-.bx--overflow-menu-options {
-	outline: none;
-}
-
 header.m-demo-header {
 	margin-bottom: 20px;
 	padding: 50px 0;
@@ -83,6 +43,8 @@ header.m-demo-header {
 				.bx--btn {
 					float: left;
 					margin-right: 5px;
+					max-height: 30px;
+					padding-right: 15px;
 
 					&.last {
 						margin-right: 0;
@@ -112,7 +74,16 @@ header.m-demo-header {
 		}
 
 		h1 {
-			margin-bottom: 5px;
+			font-size: 2.25rem;
+			font-weight: 600;
+			margin-top: 20px;
+			margin-bottom: 10px;
+		}
+
+		h3 {
+			font-size: 1.25rem;
+			font-weight: 300;
+			margin-bottom: 45px;
 		}
 	}
 }
@@ -186,14 +157,13 @@ header.m-demo-header {
 	}
 }
 
-div.experimental-switch {
+div.options {
 	display: table;
     width: 100%;
 	max-width: 800px;
 	margin: auto;
 	margin-bottom: 30px;
 	padding: 30px;
-	padding-bottom: 0;
 	background-color: #fff;
-    box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1);
+	box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1);
 }