diff --git a/README.md b/README.md index 17967c57bb..0dae3e8eb0 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Design systems facilitate design and development through reuse, consistency, and The Carbon Svelte portfolio also includes: -- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components +- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components - **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3 - **[Carbon Preprocess Svelte](https://github.com/IBM/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte index deb57cd7b3..ed7875470a 100644 --- a/docs/src/layouts/ComponentLayout.svelte +++ b/docs/src/layouts/ComponentLayout.svelte @@ -158,6 +158,7 @@ .prose > p > .bx--link { font-size: inherit; + text-decoration: underline; } .prose .toc { diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index 0a94746d9c..53df99bfcd 100644 --- a/docs/src/pages/index.svelte +++ b/docs/src/pages/index.svelte @@ -29,7 +29,17 @@ g80: "Gray 80", g90: "Gray 90", g100: "Gray 100", + all: "All", }; + + const cssImportAll = `import "carbon-components-svelte/css/all.css";`; + const cssThemeToggle = ` @@ -74,11 +90,6 @@

Installation

-

- Install - carbon-components-svelte - as a development dependency in your project. -

Using Yarn:

@@ -89,7 +100,7 @@
- +

Styling

@@ -109,8 +120,8 @@ - - + + @@ -144,10 +155,8 @@ unpkg.com .

-

- This is best suited for rapid prototyping or if your set-up does - not use a CSS loader. -

+

This is best suited for rapid prototyping.

+
HTML

@@ -155,6 +164,14 @@

+
svelte:head
+ + +

+ +

+
+

@@ -182,7 +199,39 @@ - + + +

Dynamic theming

+

Use the "all.css" StyleSheet for dynamic, client-side theming.

+ + +

+ +

+
+
+

+ Programmatically switch between each of the five Carbon themes by + setting the "theme" attribute on the HTML element. +

+ + +

+ +

+
+
+

+ You can use the + + Theme utility component + + to update the theme at runtime. +

+
+
+ +

Portfolio

@@ -206,7 +255,7 @@ diff --git a/package.json b/package.json index a636f99347..76a065f165 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "publish-examples": "node scripts/publish-examples" }, "dependencies": { - "carbon-icons-svelte": "^10.27.0", + "carbon-icons-svelte": "^10.36.0", "flatpickr": "4.6.9" }, "devDependencies": { @@ -44,7 +44,7 @@ "rollup-plugin-terser": "^7.0.2", "sass": "^1.32.6", "sveld": "^0.8.2", - "svelte": "^3.32.1", + "svelte": "^3.40.1", "svelte-check": "^1.1.32", "typescript": "^4.1.3" }, diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte index 2cf3d63b6c..944be5e812 100644 --- a/src/Accordion/Accordion.svelte +++ b/src/Accordion/Accordion.svelte @@ -30,6 +30,7 @@ setContext("Accordion", { disableItems }); + {#if skeleton} +

  • +