Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 17 commits into from
May 9, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
73e2344
Update demo site to use carbon v10
theiliad Apr 28, 2019
1421b99
Add themes
theiliad Apr 28, 2019
3b6d14a
Fix lint issues
theiliad Apr 28, 2019
38eb428
Add padding between slices for pie & donut
theiliad Apr 28, 2019
a0e347b
Updater innerRadius of donut chart
theiliad Apr 28, 2019
b2ceafb
Show all themes on demo site
theiliad Apr 29, 2019
12b3135
Trigger build
theiliad Apr 29, 2019
fb17384
Multiply blending mode for line chart lines
theiliad Apr 30, 2019
ae0d1f6
Scatter chart fill and point size updates
theiliad Apr 30, 2019
d016a3e
Fix lint issues
theiliad Apr 30, 2019
71470ea
Update main palette
theiliad May 3, 2019
26066b4
Fix main theme
theiliad May 7, 2019
361977f
Merge branch 'master' of https://github.com/carbon-design-system/carb…
theiliad May 7, 2019
e41f3f6
Add new light themes
theiliad May 7, 2019
c32b6da
Use @carbon/elements, and add a dark theme
theiliad May 7, 2019
aee454a
Replace with default colors, and add theme selector
theiliad May 8, 2019
9f6fde8
feat(Color palettes and design updates):
theiliad May 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 11 additions & 17 deletions packages/core/demo/demo-data/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 0 additions & 3 deletions packages/core/demo/demo-data/line.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,9 +132,6 @@ export const lineOptions = {
]
}
},
points: {
radius: 4
},
legendClickable: true,
containerResizable: true
};
Expand Down
94 changes: 61 additions & 33 deletions packages/core/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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 -->
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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/[email protected]/scripts/carbon-components.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]/scripts/carbon-components.min.js"
type="text/javascript"></script>

</html>
</html>
58 changes: 14 additions & 44 deletions packages/core/demo/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
}
Expand Down Expand Up @@ -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);
}
Loading