feat(Colors.stories): create story for semantic colors

Author: TylerAPfledderer

src/components/BaseStories/Colors.stories.tsx

@@ -1,8 +1,12 @@
-import type { ReactNode } from "react"
-import { Box, HStack, Square, Stack, Text } from "@chakra-ui/react"
+import { type ReactNode } from "react"
+import capitalize from "lodash/capitalize"
+import { Box, Flex, HStack, Square, Stack, Text } from "@chakra-ui/react"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import colors from "@/@chakra-ui/foundations/colors"
+import semanticTokens from "@/@chakra-ui/semanticTokens"
+
+import Heading from "../Heading"
 
 const meta = {
   title: "Design System/Colors",
@@ -77,3 +81,59 @@ const ColorGroupWrapper = ({
     </Box>
   )
 }
+
+export const SemanticScheme: StoryObj = {
+  parameters: {
+    chromatic: {
+      modes: {
+        darkMode: {
+          colorMode: "dark",
+        },
+        lightMode: {
+          colorMode: "light",
+        },
+      },
+    },
+  },
+  render: () => {
+    const tokenNames = ["primary", "body", "background"] as const
+    const deprecatedTokens = {
+      primary: ["light", "dark", "pressed"],
+      body: ["inverted"],
+      background: [],
+    }
+    return (
+      <Flex direction="column" gap="16">
+        {tokenNames.map((tokenName) => {
+          const currentDeprecatedTokens = deprecatedTokens[
+            tokenName
+          ] as string[]
+
+          return (
+            <Flex key={tokenName} direction="column" gap="4">
+              <Heading>{capitalize(tokenName)}</Heading>
+              <HStack gap="8">
+                {Object.keys(semanticTokens["colors"][tokenName])
+                  .filter((key) => !currentDeprecatedTokens.includes(key))
+                  .map((key) => (
+                    <Flex key={key} direction="column" gap="2">
+                      <Square
+                        border={
+                          tokenName === "background" && key === "base"
+                            ? "1px solid"
+                            : undefined
+                        }
+                        size="20"
+                        bg={`${tokenName}.${key}`}
+                      ></Square>
+                      <Text>{key}</Text>
+                    </Flex>
+                  ))}
+              </HStack>
+            </Flex>
+          )
+        })}
+      </Flex>
+    )
+  },
+}