@carbon/charts 1.9.0-next.0 → 1.9.0-next.2

package/scss/demos.scss

@@ -0,0 +1,427 @@
+$charts-prefix: 'cc';
+
+// Variables picked up by @carbon/styles/scss/config in imports
+$prefix: 'cds'; // Default value
+$css--default-type: false; // Do not include default type
+$css--reset: false; // Do not include reset CSS
+
+// IBM Plex font for demo is loaded in .storybook/preview-head.html - don't include here
+@use '@carbon/styles/scss/config' with (
+	$css--font-face: false
+);
+@use '@carbon/styles'; // primarily needed for toolbar
+@use '@carbon/styles/scss/type' as *; // used on line 230
+
+// Custom charting tokens
+@use '@carbon/styles/scss/theme';
+@import 'tokens';
+@include theme.add-component-tokens($custom-charting-tokens);
+@import '@carbon/styles/scss/components/button/tokens.scss';
+
+@mixin default_transition { // used by colors
+	transition: all 0.1s ease-out;
+}
+@import '@carbon/colors';
+@import 'colors';
+
+@import '@carbon/import-once/scss';
+@import 'components';
+
+@import 'graphs';
+@import 'type';
+@import 'chart-holder';
+
+.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+	overflow: visible;
+}
+
+html {
+	@include styles.theme(styles.$white);
+}
+
+html[data-carbon-theme='g10'] {
+	@include styles.theme(styles.$g10);
+}
+
+html[data-carbon-theme='g90'] {
+	@include styles.theme(styles.$g90);
+}
+
+html[data-carbon-theme='g100'] {
+	@include styles.theme(styles.$g100);
+}
+
+div.container {
+	color: theme.$text-primary;
+	background-color: theme.$background;
+	font-family: 'IBM Plex Sans', Arial, sans-serif;
+	padding: 30px;
+
+	div#color-palette-picker,
+	div#projection-picker {
+		max-width: 18rem;
+		margin-top: 2rem;
+	}
+
+	#chart-demo {
+		max-width: 700px;
+	}
+
+	.cds--grid {
+		padding: 0;
+
+		.cds--row .chart-demo {
+			margin-bottom: 60px;
+		}
+	}
+
+	h3 {
+		margin: 0;
+		font-weight: 700;
+
+		b.component {
+			margin-right: 10px;
+		}
+
+		span.cds--tag.component-name {
+			font-size: 0.55em;
+			vertical-align: middle;
+			padding: 0.25em 1em;
+			border-radius: 1em;
+			font-weight: 600;
+		}
+	}
+
+	div.theme-picker {
+		margin-top: 15px;
+	}
+
+	p.props {
+		b {
+			font-weight: 700;
+		}
+	}
+
+	// Replace with Carbon .scss imports
+	div.cds--snippet--multi {
+		background-color: black;
+		color: white;
+
+		pre {
+			padding: 2em !important;
+			-moz-tab-size: 4;
+			tab-size: 4;
+			line-height: 1.4;
+		}
+
+		.cds--snippet-container pre::after {
+			display: none;
+		}
+
+		.token.tag {
+			color: #6ea6ff;
+		}
+
+		.token.attr-name {
+			color: #92eeee;
+		}
+
+		.token.attr-value {
+			color: #bb8eff;
+		}
+	}
+
+	.cds--snippet--multi .cds--snippet-container pre code {
+		font-size: 14px;
+	}
+
+	.cds--snippet--multi.cds--snippet--expand .cds--snippet-container,
+	.cds--snippet--multi.cds--snippet--expand .cds--snippet-container pre {
+		padding-bottom: 0;
+	}
+
+	div.demo-desktop-only {
+		@media screen and (max-width: 768px) {
+			position: relative;
+			overflow: hidden;
+
+			&:before {
+				content: ' ';
+				display: block;
+				position: absolute;
+				z-index: 2;
+				top: 0;
+				left: 0;
+				background: #f4f4f4;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		div.cp-message {
+			display: none;
+
+			@media screen and (max-width: 768px) {
+				position: absolute;
+				z-index: 2;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				display: block;
+				font-weight: bold;
+				text-align: center;
+			}
+		}
+	}
+
+	&.intro {
+		padding: 0;
+
+		.container-welcome {
+			padding: 0 !important;
+		}
+
+		.welcome__container {
+			width: 100vw;
+			min-height: 100vh;
+			padding: 3rem;
+			padding-bottom: 5rem;
+			background-color: #000;
+
+			@media screen and (max-width: 768px) {
+				&:before {
+					position: absolute;
+					display: block;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					background: rgba(0, 0, 0, 0.45);
+					content: ' ';
+					z-index: 1;
+				}
+			}
+		}
+
+		.welcome__content {
+			position: relative;
+			z-index: 2;
+		}
+
+		.welcome__heading {
+			@include type-style('productive-heading-07');
+
+			color: theme.$text-inverse;
+		}
+
+		.welcome__heading--subtitle {
+			font-weight: 600;
+		}
+
+		.welcome__heading--other {
+			@include type-style('productive-heading-04');
+
+			font-weight: 600;
+			color: #4587fd;
+		}
+
+		h5 {
+			margin-top: 2em;
+		}
+
+		span.netlify {
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			padding: 1em 1.5em;
+			padding-left: 3rem;
+			border-top-right-radius: 2em;
+			font-size: 13px;
+			vertical-align: middle;
+			background-color: #292929;
+			color: #bcbcbc;
+
+			a {
+				color: #fff;
+				font-weight: 700;
+			}
+		}
+	}
+
+	.marginTop {
+		margin-top: 10px;
+
+		&-15 {
+			margin-top: 15px;
+		}
+
+		&-30 {
+			margin-top: 30px;
+		}
+
+		&-45 {
+			margin-top: 45px;
+		}
+	}
+
+	hr {
+		margin-bottom: 75px;
+		margin-top: 25px;
+	}
+}
+
+.resource-card-group {
+	display: flex;
+	flex-wrap: wrap;
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: 30px;
+	max-width: 700px;
+
+	.#{$prefix}--col-md-6.#{$prefix}--col-lg-6 {
+		border: 1px solid theme.$background;
+		padding: 0;
+	}
+
+	.#{$prefix}--col-lg-6 {
+		width: 100%;
+	}
+
+	@media (min-width: 42rem) {
+		.#{$prefix}--col-md-6 {
+			display: block;
+			max-width: 75%;
+			flex: 0 0 75%;
+		}
+	}
+
+	@media (min-width: 66rem) {
+		.#{$prefix}--col-lg-6 {
+			display: block;
+			max-width: 50%;
+			flex: 0 0 50%;
+		}
+	}
+}
+
+.#{$prefix}--aspect-ratio--object {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.#{$prefix}--resource-card .#{$prefix}--tile {
+	background: theme.$layer-01;
+	height: 100%;
+	padding: 1rem 25% 1rem 1rem;
+	position: relative;
+	transition: background 70ms;
+	text-decoration: none;
+}
+
+.#{$prefix}--resource-card .#{$prefix}--tile:hover {
+	background: theme.$background-hover;
+}
+
+.#{$prefix}--resource-card__title {
+	@include type-style('productive-heading-03');
+	text-decoration: none;
+	color: theme.$text-primary;
+}
+
+.#{$prefix}--resource-card__subtitle {
+	@include type-style('heading-01');
+	font-weight: 400;
+	text-decoration: none;
+	color: theme.$text-primary;
+}
+
+.#{$prefix}--resource-card__icon--img {
+	position: absolute;
+	bottom: 1rem;
+	left: 1rem;
+	min-width: 32px;
+	min-height: 32px;
+	display: flex;
+	align-items: flex-end;
+}
+
+.#{$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper,
+.#{$prefix}--resource-card__icon--img img[src*='gif'],
+.#{$prefix}--resource-card__icon--img img[src*='svg'] {
+	margin-bottom: 0;
+}
+
+.#{$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper {
+	position: static !important; //important needed to override inline style added by Gatsby
+}
+
+.#{$prefix}--resource-card__icon--action {
+	position: absolute;
+	bottom: 1rem;
+	right: 1rem;
+	width: 20px;
+	height: 20px;
+}
+
+.#{$prefix}--resource-card .#{$prefix}--resource-card__icon--action svg {
+	fill: theme.$icon-primary;
+}
+
+// Dark
+.#{$prefix}--resource-card--dark .#{$prefix}--tile {
+	background: $gray-90; //$background for gray 90 theme
+}
+
+.#{$prefix}--resource-card--dark .#{$prefix}--tile:hover {
+	background: $gray-80; //$background-hover for gray 90 theme
+}
+
+.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__title,
+.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__subtitle {
+	color: theme.$text-on-color;
+}
+
+.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__icon--action svg {
+	fill: $gray-10;
+}
+
+// Disabled
+.#{$prefix}--resource-card--disabled .#{$prefix}--tile:hover {
+	background: theme.$layer-01;
+	cursor: not-allowed;
+}
+
+.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__title,
+.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__subtitle {
+	color: theme.$icon-on-color-disabled;
+}
+
+.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__icon--action svg {
+	fill: theme.$icon-disabled;
+}
+
+.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__icon--img {
+	filter: grayscale(100%);
+	opacity: 0.5;
+}
+
+// Disabled dark
+.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark .#{$prefix}--tile:hover {
+	background: $gray-90; //$background for gray 90 theme
+}
+
+.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
+	.#{$prefix}--resource-card__title,
+.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
+	.#{$prefix}--resource-card__subtitle {
+	color: $gray-50; //$icon-on-color-disabled for gray 90
+}
+
+.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
+	.#{$prefix}--resource-card__icon--action
+	svg {
+	fill: $gray-70; //$disabled-02 for gray 90
+}

package/scss/index.scss

@@ -0,0 +1,31 @@
+$charts-prefix: 'cc';
+
+// Variables picked up by @carbon/styles/scss/config in imports
+$prefix: 'cds'; // Default value
+$css--body: false; // Do not emit styles for body element
+$css--default-type: false; // Do not include default type
+$css--font-face: false; // Do not include font face mixins from scss/fonts
+$css--reset: false; // Do not include reset CSS
+
+// Custom charting tokens
+@use '@carbon/styles/scss/theme' as theme;
+@import 'tokens';
+@include theme.add-component-tokens($custom-charting-tokens);
+@import '@carbon/styles/scss/components/button/tokens';
+
+@mixin default_transition { // used by ./colors
+	transition: all 0.1s ease-out;
+}
+@import '@carbon/colors';
+@import 'colors'; // mixins, color palette, color maps, tooltip and legend color settings
+
+@import '@carbon/import-once/scss'; // exports mixin
+@import 'components'; // use exports mixin to ensure component modules only loaded once
+
+@import 'graphs'; // chart-specific
+@import 'type'; // font size, fill, color, weight (but not family)
+@import 'chart-holder'; // container settings
+
+.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+	overflow: visible;
+}

package/dist/styles/styles.scss

@@ -1,40 +0,0 @@
-$charts-prefix: 'cc';
-
-$css--reset: false;
-$css--default-type: false;
-
-$prefix: 'cds';
-
-// Carbon Charts expects the user to load IBM Plex on their own per the storybooks
-@use '@carbon/styles/scss/config' with (
-	$css--font-face: false
-);
-
-@use '@carbon/styles';
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/theme';
-
-// Custom charting tokens
-@import './tokens';
-@include theme.add-component-tokens($custom-charting-tokens);
-
-@import '@carbon/import-once/scss/import-once';
-
-// Carbon imports
-@import '@carbon/colors/index.scss';
-@import '@carbon/styles/scss/components/button/_tokens.scss';
-
-@mixin default_transition {
-	transition: all 0.1s ease-out;
-}
-
-// Internal
-@import './colors.scss';
-@import './components/index.scss';
-@import './graphs/index.scss';
-@import './type';
-@import './chart-holder';
-
-.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-	overflow: visible;
-}