From 93562c12410f024230da84602b7f0ec56076c7d9 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 16 Jul 2021 08:28:44 -0700
Subject: [PATCH] docs: add styling instructions

---
 README.md                   |  2 +-
 docs/src/pages/index.svelte | 94 ++++++++++++++++++++++++++++++++++---
 2 files changed, 89 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 278dfde9..72fba78e 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ The Carbon Svelte portfolio also includes:
 
 - **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ 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 chart types, powered by d3
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
 
 ## [Documentation](http://ibm.biz/carbon-svelte)
 
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index 31365bbe..c2648c82 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -6,8 +6,15 @@
     Column,
     CodeSnippet,
     Link,
+    Tabs,
+    Tab,
+    TabContent,
+    OutboundLink,
+    RadioButtonGroup,
+    RadioButton,
   } from "carbon-components-svelte";
   import TileCard from "../components/TileCard.svelte";
+  import { theme } from "../store";
   import { metatags } from "@sveltech/routify";
 
   metatags.title = "Carbon Components Svelte";
@@ -16,6 +23,13 @@
 
   const installYarn = "yarn add -D carbon-components-svelte";
   const installNpm = "npm i -D carbon-components-svelte";
+  const themes = {
+    white: "White",
+    g10: "Gray 10",
+    g80: "Gray 80",
+    g90: "Gray 90",
+    g100: "Gray 100",
+  };
 </script>
 
 <Content>
@@ -50,23 +64,85 @@
     </Row>
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
-        <h3>Install</h3>
-        <h4>Installing with yarn:</h4>
+        <h3>Installation</h3>
+        <p>
+          Install <code>carbon-components-svelte</code> as a development dependency
+          in your project.
+        </p>
+        <h4>Using Yarn:</h4>
         <Row noGutter>
           <CodeSnippet code="{installYarn}" />
         </Row>
-        <h4>Using npm:</h4>
+        <h4>Using NPM:</h4>
         <Row noGutter>
           <CodeSnippet code="{installNpm}" />
         </Row>
       </Column>
     </Row>
+    <Row style="margin-bottom: var(--cds-layout-05)">
+      <Column>
+        <h3>Styling</h3>
+        <p>
+          Before importing components, you will need to first apply Carbon
+          component styles. The Carbon Design System supports five themes (2
+          light, 3 dark).
+        </p>
+        <RadioButtonGroup
+          style="margin-top: var(--cds-spacing-08)"
+          legendText="Carbon themes"
+          bind:selected="{$theme}"
+        >
+          {#each ["white", "g10", "g80", "g90", "g100"] as value}
+            <RadioButton labelText="{themes[value]}" value="{value}" />
+          {/each}
+        </RadioButtonGroup>
+      </Column>
+    </Row>
+
+    <Row style="margin-bottom: var(--cds-layout-02)">
+      <Column xlg="{10}" noGutter>
+        <Tabs>
+          <Tab label="CSS StyleSheet" />
+          <Tab label="CDN" />
+          <Tab label="SCSS" />
+          <div slot="content">
+            <TabContent>
+              <p>
+                This library ships with six pre-compiled CSS StyleSheets built
+                from
+                <OutboundLink
+                  size="lg"
+                  href="https://github.com/carbon-design-system/carbon/tree/main/packages/components"
+                >
+                  carbon-components
+                </OutboundLink>.
+              </p>
+            </TabContent>
+            <TabContent>
+              <p>
+                An alternative to loading styles is to link an external
+                StyleSheet from a Content Delivery Networks (CDN) like
+                <OutboundLink size="lg" href="https://unpkg.com/">
+                  unpkg.com
+                </OutboundLink>.
+              </p>
+              <p>
+                This is best suited for rapid prototyping or if your set-up does
+                not use a CSS loader.
+              </p>
+            </TabContent>
+            <TabContent>Content 3</TabContent>
+          </div>
+        </Tabs>
+      </Column>
+    </Row>
+
     <Row>
       <Column>
         <h3>Portfolio</h3>
         <p>
-          The broader Carbon Svelte effort includes libraries for icons,
-          pictograms, and data visualization.
+          The Carbon Svelte portfolio includes packages for icons, pictograms,
+          and data visualization.
         </p>
       </Column>
     </Row>
@@ -106,7 +182,7 @@
         <TileCard
           borderBottom
           title="Carbon Charts Svelte"
-          subtitle="20 chart types, powered by d3"
+          subtitle="20+ charts, powered by d3"
           target="_blank"
           href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
         />
@@ -124,3 +200,9 @@
     </Row>
   </Grid>
 </Content>
+
+<style>
+  p {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>