{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-story",
  "title": "Color Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Design system documentation and examples for color tokens and themes",
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "registry/tokens/color-story/color-base.stories.tsx",
      "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\ntype Swatch = {\n  name: string;\n  colors: Record<string, string>;\n};\n\nconst SwatchList = ({ colors }: { colors: Record<string, string> }) => {\n  return (\n    <div className=\"flex overflow-clip rounded-md border shadow\">\n      {Object.entries(colors).map(([name, value], idx) => {\n        const styles = getComputedStyle(document.documentElement);\n        const color = styles.getPropertyValue(value);\n\n        return (\n          <div\n            key={idx}\n            className=\"bg-background flex w-full flex-col gap-1 pb-3\"\n          >\n            <div className=\"h-16 w-full\" style={{ backgroundColor: color }} />\n            <p className=\"text-center font-semibold\">{name}</p>\n            <p className=\"text-center text-xs opacity-70\">{value}</p>\n            <p className=\"text-center text-xs\">{color}</p>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\n/**\n * Color tokens for the design system\n */\nconst meta: Meta<{\n  swatch: Swatch[];\n}> = {\n  title: \"design/base/Color\",\n  argTypes: {},\n  render: (args) => (\n    <Table>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Name</TableHead>\n          <TableHead>\n            <span className=\"sr-only\">Swatch</span>\n          </TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {args.swatch.map(({ name, colors }) => (\n          <TableRow key={name}>\n            <TableCell>{name}</TableCell>\n            <TableCell>\n              <SwatchList colors={colors} />\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  ),\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * Functional color tokens are used to define the core colors of the design system.\n * These colors are used throughout the application for backgrounds, text, borders, etc.\n */\nexport const Functional: Story = {\n  args: {\n    swatch: [\n      {\n        name: \"Background\",\n        colors: {\n          default: \"--background\",\n          foreground: \"--foreground\",\n        },\n      },\n      {\n        name: \"Primary\",\n        colors: {\n          default: \"--primary\",\n          foreground: \"--primary-foreground\",\n        },\n      },\n      {\n        name: \"Secondary\",\n        colors: {\n          default: \"--secondary\",\n          foreground: \"--secondary-foreground\",\n        },\n      },\n      {\n        name: \"Accent\",\n        colors: {\n          default: \"--accent\",\n          foreground: \"--accent-foreground\",\n        },\n      },\n      {\n        name: \"Muted\",\n        colors: {\n          default: \"--muted\",\n          foreground: \"--muted-foreground\",\n        },\n      },\n\n      {\n        name: \"Destructive\",\n        colors: {\n          default: \"--destructive\",\n        },\n      },\n    ],\n  },\n};\n\n/**\n * Component color tokens are used to define the colors of specific components in the design system.\n * These colors are used to style components like buttons, inputs, and alerts.\n */\nexport const Component: Story = {\n  args: {\n    swatch: [\n      {\n        name: \"Border\",\n        colors: {\n          default: \"--border\",\n          ring: \"--ring\",\n        },\n      },\n      {\n        name: \"Card\",\n        colors: {\n          default: \"--card\",\n          foreground: \"--card-foreground\",\n        },\n      },\n      {\n        name: \"Input\",\n        colors: {\n          default: \"--input\",\n        },\n      },\n      {\n        name: \"Popover\",\n        colors: {\n          default: \"--popover\",\n          foreground: \"--popover-foreground\",\n        },\n      },\n      {\n        name: \"Chart\",\n        colors: {\n          \"1\": \"--chart-1\",\n          \"2\": \"--chart-2\",\n          \"3\": \"--chart-3\",\n          \"4\": \"--chart-4\",\n          \"5\": \"--chart-5\",\n        },\n      },\n      {\n        name: \"Sidebar\",\n        colors: {\n          background: \"--sidebar\",\n          foreground: \"--sidebar-foreground\",\n          primary: \"--sidebar-primary\",\n          \"primary-foreground\": \"--sidebar-primary-foreground\",\n          accent: \"--sidebar-accent\",\n          \"accent-foreground\": \"--sidebar-accent-foreground\",\n          border: \"--sidebar-border\",\n          ring: \"--sidebar-ring\",\n        },\n      },\n    ],\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "design",
    "tokens",
    "storybook",
    "color"
  ],
  "type": "registry:component"
}