chore: add story

chakra-ui · Mar 9, 2022 · ab16166 · ab16166
1 parent 00d5d15
commit ab16166
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -56,7 +56,20 @@ const withChakra = (StoryFn: Function, context: StoryContext) => {
   }, [dir])
 
   return (
-    <ChakraProvider theme={extendTheme({ direction: dir })}>
+    <ChakraProvider
+      theme={extendTheme({
+        direction: dir,
+        semanticTokens: {
+          colors: {
+            semantic: {
+              default: "red.500",
+              _light: "red.500",
+              _dark: "blue.400",
+            },
+          },
+        },
+      })}
+    >
       <div dir={dir} id="story-wrapper" style={{ minHeight: "100vh" }}>
         <ColorModeToggleBar />
         <StoryFn />

diff --git a/packages/system/stories/system.stories.tsx b/packages/system/stories/system.stories.tsx
@@ -195,3 +195,22 @@ export const WithCSSVarToken = () => {
     </chakra.div>
   )
 }
+
+export const WithSemanticTokens = () => {
+  return (
+    <div>
+      <chakra.p color="semantic">I am in the default color mode</chakra.p>
+      <div data-theme="light">
+        <chakra.p color="semantic">I am forced to light mode (red)</chakra.p>
+      </div>
+      <div data-theme="dark">
+        <chakra.p color="semantic">I am forced to dark mode (blue)</chakra.p>
+        <div data-theme="light">
+          <chakra.p pl="4" color="semantic">
+            I am nested and forced to light mode (red)
+          </chakra.p>
+        </div>
+      </div>
+    </div>
+  )
+}