feat: enhance Storybook setup with custom DocsContainer and global st…

…yles for theme colors

.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import { DocsContainer } from "@storybook/blocks";
 import { ThemeProvider } from "@zendeskgarden/react-theming";
 import React from "react";
 import { GlobalStyle } from "../src/stories/shared/globalStyle";
@@ -12,6 +13,14 @@ export const decorators = [
   ),
 ];
 
+const CustomDocsContainer = ({ children, context }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <DocsContainer context={context}>{children}</DocsContainer>
+    </ThemeProvider>
+  );
+};
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -22,6 +31,8 @@ export const parameters = {
   },
   docs: {
     inlineStories: true,
+
+    container: CustomDocsContainer,
   },
   options: {
     storySort: {

src/stories/shared/globalStyle.ts

@@ -3,6 +3,7 @@ import { createGlobalStyle } from "styled-components";
 import "@zendeskgarden/css-bedrock"; //This package provides a mostly reasonable CSS reset layered on top of modern-normalize.
 
 import { theme } from "../theme";
+import { getColor } from "../theme/utils";
 
 const GlobalStyle = createGlobalStyle`
   ::-webkit-scrollbar-track:hover {
@@ -25,6 +26,17 @@ const GlobalStyle = createGlobalStyle`
     border-radius: 25px;
   }
 
+  :root {
+    --zd-palette-primary: ${getColor(theme.colors.primaryHue, 600)};
+    --zd-palette-danger: ${getColor(theme.colors.dangerHue, 600)};
+    --zd-palette-warning: ${getColor(theme.colors.warningHue, 600)};
+    --zd-palette-success: ${getColor(theme.colors.successHue, 600)};
+    --zd-palette-neutral: ${getColor(theme.colors.neutralHue, 600)};
+    --zd-palette-info: ${getColor(theme.colors.infoHue, 600)};
+    --zd-palette-chrome: ${getColor(theme.colors.chromeHue, 600)};
+    --zd-palette-accent: ${getColor(theme.colors.accentHue, 600)};
+  }
+
   /* This stuff is for Firefox */
   * {
     scrollbar-color: ${theme.palette.blue["200"]} #FFFFFF;

src/stories/theme/colors.mdx

@@ -0,0 +1,25 @@
+import {
+  ColorItem,
+  ColorPalette,
+  DocsContainer,
+  Meta,
+} from "@storybook/blocks";
+import { colors } from "./colors";
+import { palette } from "./palette";
+
+<Meta title="Theme/Colors" />
+
+<ColorPalette>
+  {Object.keys(palette).map((k) => {
+    return (
+      <>
+        <ColorItem
+          title={`zd.colors.${k}`}
+          colors={
+            typeof palette[k] === "string" ? { [k]: palette[k] } : palette[k]
+          }
+        />
+      </>
+    );
+  })}
+</ColorPalette>

src/stories/theme/palette.mdx

@@ -0,0 +1,13 @@
+import {
+  ColorItem,
+  ColorPalette,
+  DocsContainer,
+  Meta,
+  Story,
+} from "@storybook/blocks";
+import { colors } from "./colors";
+
+import PaletteComponent from "./paletteComponent";
+
+<Meta title="Theme/Palette" />
+<PaletteComponent />