From 9be9c6c99bf86d27c5dce1c0d184d54a889e9a19 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 1 Jan 2022 09:54:37 -0800
Subject: [PATCH] refactor(docs): re-use styles from css/all.scss

---
 docs/src/App.svelte | 84 ---------------------------------------------
 docs/src/index.js   |  1 +
 2 files changed, 1 insertion(+), 84 deletions(-)
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
index ac77060f..e2d19ce3 100644
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@@ -4,87 +4,3 @@
 </script>
 
 <Router routes="{routes}" />
-
-<style lang="scss" global>
-  // This is a recipe for dynamic, client-side theming
-  // All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
-
-  $feature-flags: (
-    // Custom CSS properties must be enabled to dynamically switch themes
-    enable-css-custom-properties: true,
-    ui-shell: true,
-    grid-columns-16: true
-  );
-
-  $css--font-face: true;
-  $css--helpers: true;
-  $css--body: true;
-  $css--use-layer: true;
-  $css--reset: true;
-  $css--default-type: true;
-  $css--plex: true;
-
-  // Use all Carbon themes
-  @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
-  @import "carbon-components/scss/globals/scss/component-tokens";
-  @import "carbon-components/src/components/tag/tag";
-  @import "carbon-components/src/components/notification/inline-notification";
-  @import "carbon-components/src/components/notification/toast-notification";
-  @import "carbon-components-10.47/src/components/popover/popover";
-
-  // The default theme is "white" (White)
-  :root {
-    @include carbon--theme($carbon--theme--white, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g10" to use the Gray 10 theme
-  // <html theme="g10">
-  :root[theme="g10"] {
-    @include carbon--theme($carbon--theme--g10, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g80" to use the Gray 90 theme
-  // <html theme="g80">
-  :root[theme="g80"] {
-    @include carbon--theme($carbon--theme--g80, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g90" to use the Gray 90 theme
-  // <html theme="g90">
-  :root[theme="g90"] {
-    @include carbon--theme($carbon--theme--g90, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g100" to use the Gray 100 theme
-  // <html theme="g100">
-  :root[theme="g100"] {
-    @include carbon--theme($carbon--theme--g100, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Programmatically update the theme in JavaScript:
-  // document.documentElement.setAttribute("theme", "g90");
-
-  @import "carbon-components/scss/globals/scss/_css--reset";
-  @import "carbon-components/scss/globals/scss/_css--font-face";
-  @import "carbon-components/scss/globals/scss/_css--helpers";
-  @import "carbon-components/scss/globals/scss/_css--body";
-  @import "carbon-components/scss/globals/grid/grid";
-
-  // Import all component styles
-  @import "carbon-components/scss/globals/scss/styles";
-</style>
diff --git a/docs/src/index.js b/docs/src/index.js
index aba70f6a..41ae7b9c 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -1,4 +1,5 @@
 import App from "./App.svelte";
+import "../../css/all.scss";
 
 const app = new App({ target: document.body });
 
