From e1451324cc21ea2f4ac15a08496c646d9c90e365 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Tue, 17 May 2022 06:24:23 -0700
Subject: [PATCH] docs: update `Theme`, `DataTable` docs (#1305)

* docs(theme): add note that `Theme` must be used with `all.css`

* docs(data-table): add note that custom widths do not work with `stickyHeader`
---
 docs/src/pages/components/DataTable.svx |  4 ++++
 docs/src/pages/components/Theme.svx     | 14 ++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index f3a933e4..52714f80 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -334,6 +334,10 @@ Specify a `width` or `minWidth` property in the `headers` object to customize th
 
 A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
 
+<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
+  <div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
+</InlineNotification>
+
 <FileSource src="/framed/DataTable/DataTableHeaderWidth" />
 
 ### Sticky header
diff --git a/docs/src/pages/components/Theme.svx b/docs/src/pages/components/Theme.svx
index 395e077f..d0cdc66f 100644
--- a/docs/src/pages/components/Theme.svx
+++ b/docs/src/pages/components/Theme.svx
@@ -1,9 +1,19 @@
 <script>
-  import { Theme } from "carbon-components-svelte";
+  import { InlineNotification, CodeSnippet } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
+
+  let code = `import "carbon-components-svelte/css/all.css";`;
 </script>
 
-This utility component dynamically updates the Carbon theme on the client-side using CSS variables.
+The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">You must use the "all.css" StyleSheet with the <code>Theme</code> component.</div>
+</InlineNotification>
+
+The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
+  
+<CodeSnippet svx-ignore {code} />
 
 ### Default