docs: use all.css for prefixed styles (#1221)

* docs: remove .bx--content override

* docs(ui-shell): add note on UI Shell theming

* docs(grid): touch up grid examples

* docs(theme): wrap localStorage in try catch

So that the site still works in Safari with all cookies blocked.

* docs: use prefixed all.css

Without vendor prefixes, some styles are lost in Safari.

* docs: remove svelte-preprocess from svelte.config.js

docs/package.json

@@ -9,28 +9,21 @@
     "build:svite": "vite build"
   },
   "devDependencies": {
-    "@sveltech/routify": "^1.9.9",
+    "@sveltech/routify": "^1.9.10",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.33",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
-    "autoprefixer": "^10.2.3",
-    "carbon-components": "10.56.0",
-    "carbon-components-10.47": "npm:carbon-components@10.47",
     "carbon-components-svelte": "../",
-    "carbon-icons-svelte": "^10.44.3",
+    "carbon-icons-svelte": "^10.45.1",
     "clipboard-copy": "^4.0.1",
     "cross-env": "^7.0.3",
     "mdsvex": "^0.9.8",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.13",
+    "prettier": "^2.6.2",
-    "prettier": "^2.5.1",
+    "prettier-plugin-svelte": "^2.6.0",
-    "prettier-plugin-svelte": "^2.5.1",
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.27.0",
     "remark-slug": "^6.0.0",
-    "sass": "^1.42.1",
+    "svelte": "^3.46.6",
-    "svelte": "^3.44.3",
+    "vite": "^2.9.1"
-    "svelte-hmr": "0.11.1",
-    "svelte-preprocess": "^4.3.2",
-    "vite": "^2.7.10"
   },
   "routify": {
     "routifyDir": ".routify",

docs/src/components/Preview.svelte

@@ -47,7 +47,7 @@
   </div>
 </div>
 
-<style global>
+<style>
   .preview {
     margin-bottom: var(--cds-layout-04);
     margin-left: -1rem;
@@ -55,91 +55,10 @@
     max-width: 56rem;
   }
 
-  .code-override .bx--snippet {
-    max-width: none;
-  }
-
-  .code-override .bx--copy-btn,
-  .code-override .bx--snippet,
-  .code-override button.bx--btn.bx--snippet-btn--expand {
-    background-color: #262626;
-    color: #f4f4f4;
-  }
-
-  .code-override .bx--copy-btn:hover,
-  .code-override button.bx--btn.bx--snippet-btn--expand:hover {
-    background-color: #393939;
-  }
-
-  .code-override .bx--snippet__icon {
-    fill: #f4f4f4;
-  }
-
-  .code-override .bx--snippet-container pre {
-    font-size: var(--cds-code-02-font-size);
-    line-height: var(--cds-code-02-line-height);
-    letter-spacing: var(--cds-code-02-letter-spacing);
-    cursor: text;
-  }
-
-  .code-override .bx--snippet--multi .bx--snippet-container pre {
-    overflow-x: auto;
-  }
-
-  .token.tag,
-  .token.operator {
-    color: #6ea6ff;
-  }
-
-  .token.attr-name {
-    color: #3ddbd9; /* teal 30 */
-  }
-
-  .token.function {
-    color: #9ef0f0;
-  }
-
-  .token.token.language-javascript,
-  .token.attr-value {
-    color: #d4bbff; /* purple 30 */
-  }
-
-  .token.keyword {
-    color: #bb8eff;
-  }
-
-  .token.punctuation {
-    color: #a8a8a8; /* gray 40 */
-  }
-
-  .token.script .token.language-javascript {
-    color: #3ddbd9; /* teal 30 */
-  }
-
-  .token.string {
-    color: #fa75a6;
-  }
-
-  .token.boolean {
-    color: #bb8eff;
-  }
-
-  .token.number {
-    color: #a7f0ba;
-  }
-
-  .token.comment {
-    color: #bebebe;
-  }
-
   .code-override {
     border: 1px solid #262626;
   }
 
-  html[theme="g90"] .code-override {
-    border: 1px solid var(--cds-ui-03);
-  }
-
   .preview-viewer {
     border: 1px solid var(--cds-ui-03);
     border-bottom: 0;

docs/src/components/Theme.svelte

@@ -9,14 +9,20 @@
   const isValidTheme = (value) => themes.includes(value);
 
   onMount(() => {
-    const persisted_theme = localStorage.getItem(persistKey);
+    try {
-    if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
+      const persisted_theme = localStorage.getItem(persistKey);
+      if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
+    } catch (e) {}
   });
 
   afterUpdate(() => {
     if (isValidTheme($theme)) {
       document.documentElement.setAttribute("theme", $theme);
-      if (persist) localStorage.setItem(persistKey, $theme);
+      if (persist) {
+        try {
+          localStorage.setItem(persistKey, $theme);
+        } catch (e) {}
+      }
     }
   });
 </script>

docs/src/global.css

@@ -0,0 +1,268 @@
+html[theme="g90"] .code-override {
+  border: 1px solid var(--cds-ui-03);
+}
+
+.code-override .bx--snippet {
+  max-width: none;
+}
+
+.code-override .bx--copy-btn,
+.code-override .bx--snippet,
+.code-override button.bx--btn.bx--snippet-btn--expand {
+  background-color: #262626;
+  color: #f4f4f4;
+}
+
+.code-override .bx--copy-btn:hover,
+.code-override button.bx--btn.bx--snippet-btn--expand:hover {
+  background-color: #393939;
+}
+
+.code-override .bx--snippet__icon {
+  fill: #f4f4f4;
+}
+
+.code-override .bx--snippet-container pre {
+  font-size: var(--cds-code-02-font-size);
+  line-height: var(--cds-code-02-line-height);
+  letter-spacing: var(--cds-code-02-letter-spacing);
+  cursor: text;
+}
+
+.code-override .bx--snippet--multi .bx--snippet-container pre {
+  overflow-x: auto;
+}
+
+.token.tag,
+.token.operator {
+  color: #6ea6ff;
+}
+
+.token.attr-name {
+  color: #3ddbd9; /* teal 30 */
+}
+
+.token.function {
+  color: #9ef0f0;
+}
+
+.token.token.language-javascript,
+.token.attr-value {
+  color: #d4bbff; /* purple 30 */
+}
+
+.token.keyword {
+  color: #bb8eff;
+}
+
+.token.punctuation {
+  color: #a8a8a8; /* gray 40 */
+}
+
+.token.script .token.language-javascript {
+  color: #3ddbd9; /* teal 30 */
+}
+
+.token.string {
+  color: #fa75a6;
+}
+
+.token.boolean {
+  color: #bb8eff;
+}
+
+.token.number {
+  color: #a7f0ba;
+}
+
+.token.comment {
+  color: #bebebe;
+}
+
+.override-tabs a.bx--tabs__nav-link,
+.override-tabs a.bx--tabs__nav-link:focus,
+.override-tabs a.bx--tabs__nav-link:active {
+  width: auto !important;
+}
+
+#select-theme {
+  width: auto;
+}
+
+.prose > p > .bx--link {
+  font-size: inherit;
+  text-decoration: underline;
+}
+
+.prose .toc {
+  margin-bottom: var(--cds-layout-01);
+}
+
+.table {
+  position: sticky;
+  max-height: calc(100vh - 3rem);
+  top: 3rem;
+  padding-top: var(--cds-spacing-05);
+  padding-bottom: var(--cds-spacing-05);
+  padding-left: var(--cds-spacing-08);
+  overflow-y: auto;
+}
+
+[data-components] {
+  z-index: 2;
+  position: relative;
+  display: flex;
+}
+
+[data-components] .bx--grid {
+  width: 100%;
+}
+
+@media (max-width: 1056px) {
+  .table {
+    display: none;
+  }
+}
+
+.preview-viewer > .bx--aspect-ratio,
+.preview-viewer [data-outline] {
+  outline: 1px solid var(--cds-interactive-04);
+}
+
+[data-outline] {
+  position: relative;
+}
+
+[data-outline] ~ [data-outline] {
+  margin-top: var(--cds-spacing-08);
+}
+
+#select-theme {
+  width: auto;
+}
+
+.prose > p > .bx--link {
+  font-size: inherit;
+}
+
+.prose .toc {
+  margin-bottom: var(--cds-layout-01);
+}
+
+.table {
+  position: sticky;
+  max-height: calc(100vh - 3rem);
+  top: 3rem;
+  padding-top: var(--cds-spacing-05);
+  padding-bottom: var(--cds-spacing-05);
+  padding-left: var(--cds-spacing-08);
+  overflow-y: auto;
+}
+
+.bx--side-nav__overlay-active {
+  z-index: calc(10 + 1); /** supersede the z-index of code snippets */
+}
+
+.body-short-01 {
+  font-size: var(--cds-body-short-01-font-size);
+  font-weight: var(--cds-body-short-01-font-weight);
+  letter-spacing: var(--cds-body-short-01-letter-spacing);
+  line-height: var(--cds-body-short-01-line-height);
+}
+
+.bx--col > h1 {
+  font-size: var(--cds-display-01-font-size);
+  font-weight: var(--cds-display-01-font-weight);
+  letter-spacing: var(--cds-display-01-letter-spacing);
+  line-height: var(--cds-display-01-line-height);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.big-paragraph {
+  font-size: var(--cds-expressive-heading-03-font-size);
+  font-weight: var(--cds-expressive-heading-03-font-weight);
+  letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+  line-height: var(--cds-expressive-heading-03-line-height);
+  margin-top: var(--cds-layout-03);
+  margin-bottom: var(--cds-layout-06);
+}
+
+.big-link,
+.bx--col > .big-paragraph > code {
+  font-size: var(--cds-expressive-heading-03-font-size);
+  font-weight: var(--cds-expressive-heading-03-font-weight);
+  letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+  line-height: var(--cds-expressive-heading-03-line-height);
+}
+
+.bx--col > p {
+  max-width: 44rem;
+}
+
+.bx--col > p > code {
+  font-size: var(--cds-code-02-font-size);
+  font-weight: var(--cds-code-02-font-weight);
+  line-height: var(--cds-code-02-line-height);
+  letter-spacing: var(--cds-code-02-letter-spacing);
+  background-color: var(--cds-ui-03);
+  border-radius: 0.25rem;
+  padding: 0 var(--cds-spacing-02);
+}
+
+.bx--col > h2 {
+  font-size: var(--cds-expressive-heading-05-font-size);
+  font-weight: var(--cds-expressive-heading-05-font-weight);
+  letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
+  line-height: var(--cds-expressive-heading-05-line-height);
+  padding-top: var(--cds-layout-04);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > h3 {
+  font-size: var(--cds-expressive-heading-04-font-size);
+  font-weight: var(--cds-expressive-heading-04-font-weight);
+  letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
+  line-height: var(--cds-expressive-heading-04-line-height);
+  padding-top: var(--cds-layout-04);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > h4 {
+  font-size: var(--cds-expressive-heading-02-font-size);
+  font-weight: var(--cds-expressive-heading-02-font-weight);
+  letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
+  line-height: var(--cds-expressive-heading-02-line-height);
+  padding-top: var(--cds-layout-04);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > p {
+  margin-bottom: var(--cds-layout-02);
+}
+
+main.bx--content {
+  min-height: calc(100vh - 3rem - 3rem);
+}
+
+@media (max-width: 1056px) {
+  .bx--side-nav ~ .bx--content {
+    margin-left: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .bx--side-nav--expanded ~ .bx--content {
+    white-space: nowrap;
+    min-width: 28rem;
+  }
+}
+
+@media (min-width: 1057px) {
+  .bx--side-nav__navigation {
+    z-index: 1;
+  }
+}
+
+.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
+  max-height: 144rem;
+}

docs/src/index.js

@@ -1,5 +1,6 @@
 import App from "./App.svelte";
-import "../../css/all.scss";
+import "../../css/all.css";
+import "./global.css";
 
 const app = new App({ target: document.body });
 

docs/src/layouts/ComponentLayout.svelte

@@ -149,36 +149,7 @@
   </Column>
 </Content>
 
-<style global>
+<style>
-  .override-tabs a.bx--tabs__nav-link,
-  .override-tabs a.bx--tabs__nav-link:focus,
-  .override-tabs a.bx--tabs__nav-link:active {
-    width: auto !important;
-  }
-
-  #select-theme {
-    width: auto;
-  }
-
-  .prose > p > .bx--link {
-    font-size: inherit;
-    text-decoration: underline;
-  }
-
-  .prose .toc {
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .table {
-    position: sticky;
-    max-height: calc(100vh - 3rem);
-    top: 3rem;
-    padding-top: var(--cds-spacing-05);
-    padding-bottom: var(--cds-spacing-05);
-    padding-left: var(--cds-spacing-08);
-    overflow-y: auto;
-  }
-
   .bar {
     display: flex;
     justify-content: space-between;
@@ -186,16 +157,6 @@
     border-bottom: 1px solid var(--cds-ui-03);
   }
 
-  [data-components] {
-    z-index: 2;
-    position: relative;
-    display: flex;
-  }
-
-  [data-components] .bx--grid {
-    width: 100%;
-  }
-
   .toc h5 {
     margin-bottom: var(--cds-spacing-03);
   }
@@ -205,25 +166,8 @@
   }
 
   @media (max-width: 1056px) {
-    .table {
-      display: none;
-    }
-
     .toc.mobile {
       display: block;
     }
   }
-
-  .preview-viewer > .bx--aspect-ratio,
-  .preview-viewer [data-outline] {
-    outline: 1px solid var(--cds-interactive-04);
-  }
-
-  [data-outline] {
-    position: relative;
-  }
-
-  [data-outline] ~ [data-outline] {
-    margin-top: var(--cds-spacing-08);
-  }
 </style>

docs/src/layouts/Recipe.svelte

@@ -64,29 +64,7 @@
   </Column>
 </Content>
 
-<style global>
+<style>
-  #select-theme {
-    width: auto;
-  }
-
-  .prose > p > .bx--link {
-    font-size: inherit;
-  }
-
-  .prose .toc {
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .table {
-    position: sticky;
-    max-height: calc(100vh - 3rem);
-    top: 3rem;
-    padding-top: var(--cds-spacing-05);
-    padding-bottom: var(--cds-spacing-05);
-    padding-left: var(--cds-spacing-08);
-    overflow-y: auto;
-  }
-
   .bar {
     display: flex;
     justify-content: space-between;
@@ -94,16 +72,6 @@
     border-bottom: 1px solid var(--cds-ui-03);
   }
 
-  [data-components] {
-    z-index: 2;
-    position: relative;
-    display: flex;
-  }
-
-  [data-components] .bx--grid {
-    width: 100%;
-  }
-
   .toc h5 {
     margin-bottom: var(--cds-spacing-03);
   }
@@ -113,10 +81,6 @@
   }
 
   @media (max-width: 1056px) {
-    .table {
-      display: none;
-    }
-
     .toc.mobile {
       display: block;
     }

docs/src/pages/_layout.svelte

@@ -146,106 +146,7 @@
   <slot />
 </Theme>
 
-<style global>
+<style>
-  .bx--side-nav__overlay-active {
-    z-index: calc(10 + 1); /** supersede the z-index of code snippets */
-  }
-
-  .body-short-01 {
-    font-size: var(--cds-body-short-01-font-size);
-    font-weight: var(--cds-body-short-01-font-weight);
-    letter-spacing: var(--cds-body-short-01-letter-spacing);
-    line-height: var(--cds-body-short-01-line-height);
-  }
-
-  .bx--col > h1 {
-    font-size: var(--cds-display-01-font-size);
-    font-weight: var(--cds-display-01-font-weight);
-    letter-spacing: var(--cds-display-01-letter-spacing);
-    line-height: var(--cds-display-01-line-height);
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .big-paragraph {
-    font-size: var(--cds-expressive-heading-03-font-size);
-    font-weight: var(--cds-expressive-heading-03-font-weight);
-    letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
-    line-height: var(--cds-expressive-heading-03-line-height);
-    margin-top: var(--cds-layout-03);
-    margin-bottom: var(--cds-layout-06);
-  }
-
-  .big-link,
-  .bx--col > .big-paragraph > code {
-    font-size: var(--cds-expressive-heading-03-font-size);
-    font-weight: var(--cds-expressive-heading-03-font-weight);
-    letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
-    line-height: var(--cds-expressive-heading-03-line-height);
-  }
-
-  .bx--col > p {
-    max-width: 44rem;
-  }
-
-  .bx--col > p > code {
-    font-size: var(--cds-code-02-font-size);
-    font-weight: var(--cds-code-02-font-weight);
-    line-height: var(--cds-code-02-line-height);
-    letter-spacing: var(--cds-code-02-letter-spacing);
-    background-color: var(--cds-ui-03);
-    border-radius: 0.25rem;
-    padding: 0 var(--cds-spacing-02);
-  }
-
-  .bx--col > h2 {
-    font-size: var(--cds-expressive-heading-05-font-size);
-    font-weight: var(--cds-expressive-heading-05-font-weight);
-    letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
-    line-height: var(--cds-expressive-heading-05-line-height);
-    padding-top: var(--cds-layout-04);
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .bx--col > h3 {
-    font-size: var(--cds-expressive-heading-04-font-size);
-    font-weight: var(--cds-expressive-heading-04-font-weight);
-    letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
-    line-height: var(--cds-expressive-heading-04-line-height);
-    padding-top: var(--cds-layout-04);
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .bx--col > h4 {
-    font-size: var(--cds-expressive-heading-02-font-size);
-    font-weight: var(--cds-expressive-heading-02-font-weight);
-    letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
-    line-height: var(--cds-expressive-heading-02-line-height);
-    padding-top: var(--cds-layout-04);
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .bx--col > p {
-    margin-bottom: var(--cds-layout-02);
-  }
-
-  main.bx--content {
-    background: none;
-    min-height: calc(100vh - 3rem - 3rem);
-  }
-
-  @media (max-width: 1056px) {
-    .bx--side-nav ~ .bx--content {
-      margin-left: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-
-    .bx--side-nav--expanded ~ .bx--content {
-      white-space: nowrap;
-      min-width: 28rem;
-    }
-  }
-
   .platform-name {
     display: flex;
     align-items: baseline;
@@ -265,14 +166,4 @@
       display: none;
     }
   }
-
-  @media (min-width: 1057px) {
-    .bx--side-nav__navigation {
-      z-index: 1;
-    }
-  }
-
-  .bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
-    max-height: 144rem;
-  }
 </style>

docs/src/pages/components/UIShell.svx

@@ -23,9 +23,18 @@ components: ["Header",
 ---
 
 <script>
+   import { InlineNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    Currently, the UI Shell is not themable and only supports dark mode.
+  </div>
+</InlineNotification>
+
+Open the following examples in a new tab to experience them in full.
+
 ### Header
 
 <FileSource src="/framed/UIShell/Header" />

docs/src/pages/framed/Grid/AspectRatioColumns.svelte

@@ -4,17 +4,7 @@
 
 <Grid>
   <Row>
-    <Column
+    <Column aspectRatio="2x1">2x1</Column>
-      aspectRatio="2x1"
+    <Column aspectRatio="2x1">2x1</Column>
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      2x1
-    </Column>
-    <Column
-      aspectRatio="2x1"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      2x1
-    </Column>
   </Row>
 </Grid>

docs/src/pages/framed/Grid/CondensedGrid.svelte

@@ -4,9 +4,9 @@
 
 <Grid condensed>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>

docs/src/pages/framed/Grid/FullWidthGrid.svelte

@@ -4,9 +4,9 @@
 
 <Grid fullWidth>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>

docs/src/pages/framed/Grid/Grid.svelte

@@ -4,9 +4,9 @@
 
 <Grid>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>

docs/src/pages/framed/Grid/NarrowGrid.svelte

@@ -4,9 +4,9 @@
 
 <Grid narrow>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>

docs/src/pages/framed/Grid/OffsetColumns.svelte

@@ -4,29 +4,9 @@
 
 <Grid>
   <Row>
-    <Column
+    <Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column>
-      sm="{{ span: 1, offset: 3 }}"
+    <Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column>
-      style="outline: 1px solid var(--cds-interactive-04)"
+    <Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column>
-    >
+    <Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column>
-      Offset 3
-    </Column>
-    <Column
-      sm="{{ span: 2, offset: 2 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 2
-    </Column>
-    <Column
-      sm="{{ span: 3, offset: 1 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 1
-    </Column>
-    <Column
-      sm="{{ span: 4, offset: 0 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 0
-    </Column>
   </Row>
 </Grid>

docs/src/pages/framed/Grid/PaddedGrid.svelte

@@ -2,28 +2,48 @@
   import { Grid, Row, Column } from "carbon-components-svelte";
 </script>
 
-<Grid narrow padding>
+<div>Adding padding to Grid applies it to all child columns:</div>
+
+<Grid padding>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>
 
-<Grid narrow>
+<div>Adding padding to a Row only applies its child columns:</div>
+
+<Grid>
   <Row padding>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
   </Row>
   <Row>
-    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+    <Column>Column</Column>
-      Column
+    <Column>Column</Column>
-    </Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
   </Row>
 </Grid>
+
+<div>Adding padding to a specific column only applies it to the column:</div>
+
+<Grid>
+  <Row>
+    <Column padding>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+  </Row>
+</Grid>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+    padding: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/Grid/ResponsiveGrid.svelte

@@ -4,37 +4,9 @@
 
 <Grid>
   <Row>
-    <Column
+    <Column sm="{1}" md="{4}" lg="{8}">sm: 1, md: 4, lg: 8</Column>
-      sm="{1}"
+    <Column sm="{1}" md="{2}" lg="{2}">sm: 1, md: 2, lg: 2</Column>
-      md="{4}"
+    <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
-      lg="{8}"
+    <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      sm: 1, md: 4, lg: 8
-    </Column>
-    <Column
-      sm="{1}"
-      md="{2}"
-      lg="{2}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      sm: 1, md: 2, lg: 2
-    </Column>
-    <Column
-      sm="{1}"
-      md="{1}"
-      lg="{1}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      sm: 1, md: 1, lg: 1
-    </Column>
-    <Column
-      sm="{1}"
-      md="{1}"
-      lg="{1}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      sm: 1, md: 1, lg: 1
-    </Column>
   </Row>
 </Grid>

docs/src/pages/framed/_reset.svelte

@@ -21,4 +21,8 @@
     width: 100%;
     padding: var(--cds-spacing-06) var(--cds-spacing-05);
   }
+
+  :global(.framed [class^="bx--col"]) {
+    outline: 1px solid var(--cds-interactive-04);
+  }
 </style>

docs/svelte.config.js

@@ -128,20 +128,18 @@ const NODE_ENV = process.env.NODE_ENV || "production";
 module.exports = {
   extensions: [".svelte", ".svx"],
   preprocess: [
-    require("svelte-preprocess")({
+    {
-      typescript: false,
+      markup: ({ filename, content }) => {
-      replace: [
+        if (/node_modules/.test(filename) || !filename.endsWith(".svelte"))
-        ["process.env.VERSION", JSON.stringify(pkg.version)],
+          return;
-        ["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
+        return {
-      ],
+          code: content.replace(
-      postcss: {
+            /process.env.VERSION/g,
-        plugins: [
+            JSON.stringify(pkg.version)
-          require("autoprefixer")({
+          ),
-            overrideBrowserslist: ["last 1 version", "ie >= 11"],
+        };
-          }),
-        ],
       },
-    }),
+    },
     mdsvex({
       remarkPlugins: [plugin, slug, carbonify],
       layout: {

examples/sapper/src/routes/_error.svelte

@@ -1,8 +1,6 @@
 <script>
   export let status;
   export let error;
-
-  const dev = process.env.NODE_ENV === "development";
 </script>
 
 <svelte:head>
@@ -12,7 +10,3 @@
 <h1>{status}</h1>
 
 <p>{error.message}</p>
-
-{#if dev && error.stack}
-  <pre>{error.stack}</pre>
-{/if}

render.yaml

@@ -2,7 +2,7 @@ services:
   - type: web
     name: carbon-components-svelte
     env: static
-    buildCommand: cd docs; yarn; yarn build
+    buildCommand: yarn; yarn build:css; cd docs; yarn; yarn build
     staticPublishPath: docs/dist
     pullRequestPreviewsEnabled: true
     routes:

tests/AspectRatio.test.svelte

@@ -2,34 +2,6 @@
   import { AspectRatio, Tile } from "../types";
 </script>
 
-<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
-  2x1
-</AspectRatio>
-
-<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
-  16x9
-</AspectRatio>
-
-<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
-  4x3
-</AspectRatio>
-
-<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
-  1x1
-</AspectRatio>
-
-<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
-  3x4
-</AspectRatio>
-
-<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
-  9x16
-</AspectRatio>
-
-<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
-  1x2
-</AspectRatio>
-
 <AspectRatio ratio="16x9">
   <Tile style="height: 100%">Content</Tile>
 </AspectRatio>