@carbon/charts-svelte 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.1.0...v1.2.0) (2022-06-13)
+
+
+### Features
+
+* **svelte:** add theme prop ([#1389](https://github.com/carbon-design-system/carbon-charts/issues/1389)) ([b2ff145](https://github.com/carbon-design-system/carbon-charts/commit/b2ff14578ec3e1c319adedb4c8bf96e9a3766a9b))
+
+
+
+
+
 # [1.1.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.0.4...v1.1.0) (2022-06-08)
 
 **Note:** Version bump only for package @carbon/charts-svelte

package/README.md

@@ -224,20 +224,20 @@ module.exports = {
 
 ## Usage
 
-Import chart styles from `@carbon/charts`:
+Styles must be imported from both `@carbon/charts` and `@carbon/styles`.
 
--   `@carbon/charts/styles.css`: White theme
--   `@carbon/charts/styles-g10.css`: Gray 10 theme
--   `@carbon/charts/styles-g90.css`: Gray 90 theme
--   `@carbon/charts/styles-g100.css`: Gray 100 theme
+```js
+import '@carbon/styles/css/styles.css';
+import '@carbon/charts/styles.css';
+```
 
 ### Basic
 
 ```svelte
 <script>
+  import "@carbon/styles/css/styles.css";
+  import "@carbon/charts/styles.css";
   import { BarChartSimple } from "@carbon/charts-svelte";
-  import "@carbon/charts/styles.min.css";
-  import "carbon-components/css/carbon-components.min.css";
 </script>
 
 <BarChartSimple
@@ -260,6 +260,30 @@ Import chart styles from `@carbon/charts`:
 
 ```
 
+### Theming
+
+`@carbon/styles` uses
+[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+for dynamic, client-side theming. Update the Carbon theme using the `theme`
+prop.
+
+Supported themes include:
+
+-   `"white"`
+-   `"g10"` (Gray 10)
+-   `"g90"` (Gray 90)
+-   `"g100"` (Gray 100)
+
+The default theme is `"white"`.
+
+```svelte
+<BarChartSimple
+  theme="g90"
+  data={/* ... */}
+  options={/* ... */}
+/>
+```
+
 ### Dispatched events
 
 Each Svelte chart component dispatches the following events:
@@ -287,9 +311,9 @@ Dynamically import a chart and instantiate it using the
 
 ```svelte
 <script>
+  import "@carbon/styles/css/styles.css";
+  import "@carbon/charts/styles.css";
   import { onMount } from "svelte";
-  import "@carbon/charts/styles.min.css";
-  import "carbon-components/css/carbon-components.min.css";
 
   let chart;
 
@@ -327,10 +351,10 @@ that fires when hovering over a bar.
 
 ```svelte
 <script>
+  import "@carbon/styles/css/styles.css";
+  import "@carbon/charts/styles.css";
   import { onMount } from "svelte";
   import { BarChartSimple } from "@carbon/charts-svelte";
-  import "@carbon/charts/styles.min.css";
-  import "carbon-components/css/carbon-components.min.css";
 
   let chart;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts-svelte",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Carbon charting components for Svelte",
   "type": "module",
   "main": "./src/index.js",
@@ -50,7 +50,7 @@
   },
   "homepage": "https://github.com/carbon-design-system/carbon-charts#readme",
   "dependencies": {
-    "@carbon/charts": "^1.1.0",
+    "@carbon/charts": "^1.2.0",
     "@carbon/telemetry": "0.1.0"
   },
   "peerDependencies": {

package/src/BaseChart.svelte

@@ -24,6 +24,12 @@
 	 */
 	export let options = {};
 
+  /**
+	 * Specify the Carbon theme
+	 * @type {"white" | "g10" | "g90" | "g100"}
+	 */
+	export let theme = "white";
+
 	/** Specify the id for the chart holder element */
 	export let id = "chart-" + Math.random().toString(36);
 
@@ -70,4 +76,4 @@
 	}
 </script>
 
-<div {...$$restProps} bind:this={ref} {id} />
+<div {...$$restProps} data-carbon-theme={theme} bind:this={ref} {id} />

package/types/BaseChart.d.ts

@@ -32,6 +32,12 @@ export interface BaseChartProps<Chart = BC, ChartOptions = BaseChartOptions, Cha
    */
   options?: ChartOptions;
 
+  /**
+   * Specify the Carbon theme
+   * @default "white"
+   */
+  theme?: "white" | "g10" | "g90" | "g100";
+
   /**
    * Specify the id for the chart holder element
    * @default "chart-" + Math.random().toString(36)