@mindlogic-ai/logician-ui 4.0.0 → 5.0.0-alpha.0

package/src/theme/Palette.stories.tsx

@@ -1,13 +1,7 @@
-import {
-  Box,
-  Separator,
-  Flex,
-  Grid,
-  VStack,
-} from '@chakra-ui/react';
+import { Box, Separator, Flex, Grid, VStack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 import { readableColor } from 'polished';
-import { MouseEventHandler, useState } from 'react';
+import { Fragment, MouseEventHandler, useState } from 'react';
 
 import { Tooltip } from '../components/Tooltip';
 import {
@@ -20,61 +14,11 @@ import {
   Subtitle,
   Text,
 } from '../components/Typography';
-import { colors, semanticTokens } from './colors';
-
-/**
- * Helper function to resolve a semantic token reference to its actual hex value.
- * E.g., '{colors.blue.500}' -> '#1751D0'
- */
-const resolveTokenReference = (reference: string | undefined): string => {
-  if (!reference) return '';
-  // Scale reference, e.g. '{colors.blue.500}' or '{colors.gray.1500}'.
-  const scaleMatch = reference.match(/^\{colors\.(\w+)\.(\w+)\}$/);
-  if (scaleMatch) {
-    const [, colorName, shade] = scaleMatch;
-    const colorScale = (colors as any)[colorName];
-    if (colorScale && colorScale[shade]) {
-      return colorScale[shade].value;
-    }
-    return reference;
-  }
-  // Flat reference with no shade, e.g. '{colors.white}' / '{colors.black}'.
-  const flatMatch = reference.match(/^\{colors\.(\w+)\}$/);
-  if (flatMatch) {
-    const entry = (colors as any)[flatMatch[1]];
-    if (entry && typeof entry.value === 'string') {
-      return entry.value;
-    }
-  }
-  // Already a hex value or unknown format.
-  return reference;
-};
-
-/**
- * A semantic token `value` is either a plain reference string (legacy) or a
- * mode-conditional object with any of `base` / `_light` / `_dark`. Resolve it to
- * concrete light/dark hex codes so the palette can show both modes side by side.
- */
-type TokenValue =
-  | string
-  | { base?: string; _light?: string; _dark?: string };
-
-const resolveTokenValue = (
-  value: TokenValue | undefined
-): { light: string; dark: string } => {
-  if (!value) return { light: '', dark: '' };
-  if (typeof value === 'string') {
-    const hex = resolveTokenReference(value);
-    return { light: hex, dark: hex };
-  }
-  // A `_light` / `_dark` condition wins over `base` in its mode; fall back to
-  // `base` (then the other mode) when a token omits one, so tokens declared with
-  // only `_light`/`_dark` (e.g. `*.DEFAULT`, `border.subtle`) resolve too.
-  return {
-    light: resolveTokenReference(value._light ?? value.base ?? value._dark),
-    dark: resolveTokenReference(value._dark ?? value.base ?? value._light),
-  };
-};
+import {
+  DEPRECATED_ALIASES,
+  getSwatchGroups,
+  type Swatch,
+} from './paletteSwatches';
 
 const meta = {
   title: 'Setup/Theme',
@@ -82,33 +26,15 @@ const meta = {
     docs: {
       description: {
         component: `
-## Golden Ratio Color System
-
-A mathematically harmonious color palette designed using the golden ratio (φ ≈ 1.618)
-to create visually balanced color relationships.
-
-### Design Principles
+## BAZE colour system (5.0)
 
-1. **Accessibility First**: All semantic color combinations meet WCAG 2.1 AA standards
-2. **Cool Gray Foundation**: Slate-based grays with blue undertone for modern feel
-3. **Consistent Scale**: Each color has 50/100/200/300/500/600/700/800/900 steps
+Three layers; components read only the last one.
 
-### Semantic Tokens
+1. **Raw scales** — \`ink\` / \`inkDark\`, \`sand\` / \`sandDark\`, \`slate\` / \`slateDark\` (1–12), \`coral\`, and 12 system hues. Values come from \`scripts/palette/generate.mjs\`.
+2. **Semantic steps** — \`neutral.1–12\` and \`secondary.1–12\`, filled by the theme option: \`createLogicianTheme({ neutral: 'ink' | 'slate', secondary: 'sand' })\` (or \`<LogicianProvider theme={…}>\`).
+3. **Role tokens** — \`bg.*\`, \`layer.*\`, \`fg.*\`, \`border.*\`, \`primary.*\`, \`action.*\`, status \`{bg,border,fg,solid,onSolid}\`, \`category.*\` …
 
-- **Primary** (Blue): Main brand interactions
-- **Secondary** (Violet): Supporting accent elements
-- **Success** (Green): Positive feedback
-- **Warning** (Gold): Cautionary feedback
-- **Danger** (Rose): Error/destructive feedback
-
-### Primitive Palettes
-
-- **Blue**: Primary brand color
-- **Rose**: Danger/error states
-- **Green**: Success states
-- **Violet**: Secondary/accent
-- **Gold**: Warning states
-- **Gray**: Neutral tones (slate-based with cool blue undertone)
+Every value below is shown in light and dark. Contrast is audited in CI (\`contrast.test.ts\`) in light, dark and both high-contrast modes. The 4.x names still resolve as aliases until 6.0 and are listed at the bottom, not in the grid. Setup/Theme/BAZE Palette shows the raw scales and every role in all four modes.
         `,
       },
     },
@@ -128,13 +54,7 @@ const safeReadableColor = (color: string) => {
   }
 };
 
-const SwatchHalf = ({
-  label,
-  hex,
-}: {
-  label: string;
-  hex: string;
-}) => {
+const SwatchHalf = ({ label, hex }: { label: string; hex: string }) => {
   const [wasCopied, setWasCopied] = useState<boolean>();
   const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
     navigator.clipboard.writeText(hex);
@@ -172,21 +92,12 @@ const SwatchHalf = ({
   );
 };
 
-const ColorCard = ({
-  color,
-  shade,
-  shadeValue,
-}: {
-  color: string;
-  shade: string;
-  shadeValue: TokenValue;
-}) => {
-  // Resolve to concrete light/dark hex so both modes are visible at once.
-  const { light, dark } = resolveTokenValue(shadeValue);
+const ColorCard = ({ swatch }: { swatch: Swatch }) => {
+  const { light, dark } = swatch;
   const hasDark = dark !== light;
 
   return (
-    <Flex flexDir="column" align="stretch" key={shade} p={2}>
+    <Flex flexDir="column" align="stretch" p={2}>
       <Flex
         borderRadius="md"
         overflow="hidden"
@@ -204,7 +115,7 @@ const ColorCard = ({
         textAlign="center"
         wordBreak="break-word"
       >
-        {color}.{shade}
+        {swatch.path}
       </Text>
     </Flex>
   );
@@ -241,7 +152,7 @@ const PrimitiveColorCard = ({
           borderRadius="md"
           boxShadow="sm"
           border="1px solid"
-          borderColor="gray.200"
+          borderColor="border.subtle"
           as="button"
           transition="transform 0.1s ease-in-out"
           // @ts-expect-error as prop
@@ -261,408 +172,74 @@ const PrimitiveColorCard = ({
           )}
         </Flex>
       </Tooltip>
-      <Text color="gray.1200" mt={1} textStyle="subtext">
+      <Text color="fg.default" mt={1} textStyle="subtext">
         {name}.{shade}
       </Text>
     </Flex>
   );
 };
 
-/**
- * Semantic tokens provide meaning-based color references for UI elements.
- * These are the recommended colors to use in components.
- */
-export const SemanticTokens: Story = {
-  name: 'Semantic Tokens',
-  render: () => {
-    return (
-      <VStack gap={6} align="flex-start" w="full">
-        <Box>
-          <H4 color="gray.1300" mb={2}>
-            Semantic Color Tokens
-          </H4>
-          <Subtext color="gray.700">
-            Use these tokens in components for consistent theming. Click to copy
-            hex value.
-          </Subtext>
-        </Box>
+// Colour stories moved to `BazePalette.stories.tsx` (Setup/Theme/BAZE Palette) in 5.0.
 
-        <Separator />
-
-        {Object.entries(semanticTokens.colors)
-          .filter(([color]) => !color.startsWith('chakra'))
-          .map(([color, shades]) => (
-            <Flex key={color} gap={4} align="flex-start" wrap="wrap" w="full">
-              <H4
-                mt={2}
-                w="120px"
-                flexShrink={0}
-                textTransform="capitalize"
-                color="gray.1200"
-              >
-                {color}
-              </H4>
-              <Grid templateColumns="repeat(auto-fill, minmax(132px, 1fr))" gap={2} flex="1" minW="0">
-                {Object.entries(shades).flatMap(([shade, shadeValue]) => {
-                  const node = shadeValue as any;
-                  // Leaf token: render its value directly.
-                  if (node && node.value !== undefined) {
-                    return [
-                      <ColorCard
-                        key={shade}
-                        color={color}
-                        shade={shade}
-                        shadeValue={node.value as TokenValue}
-                      />,
-                    ];
-                  }
-                  // Nested group (e.g. bg.invalid → bg.invalid.subtle): render
-                  // each leaf beneath it as `<shade>.<sub>`.
-                  if (node && typeof node === 'object') {
-                    return Object.entries(node)
-                      .filter(([, sub]) => (sub as any)?.value !== undefined)
-                      .map(([subShade, sub]) => (
-                        <ColorCard
-                          key={`${shade}.${subShade}`}
-                          color={color}
-                          shade={`${shade}.${subShade}`}
-                          shadeValue={(sub as any).value as TokenValue}
-                        />
-                      ));
-                  }
-                  return [];
-                })}
-              </Grid>
-            </Flex>
-          ))}
-      </VStack>
-    );
-  },
-};
-
-/**
- * Primitive colors are the raw color values organized by hue.
- * Use semantic tokens when possible, but these are available for edge cases.
- */
-export const PrimitiveColors: Story = {
-  name: 'Primitive Colors',
-  render: () => {
-    const primitiveColors = {
-      blue: colors.blue,
-      rose: colors.rose,
-      green: colors.green,
-      violet: colors.violet,
-      gold: colors.gold,
-    };
-
-    return (
-      <VStack gap={6} align="flex-start" w="full">
-        <Box>
-          <H4 color="gray.1300" mb={2}>
-            Primitive Color Palettes
-          </H4>
-          <Subtext color="gray.700">
-            Raw color values organized by hue. Prefer semantic tokens when
-            possible.
-          </Subtext>
-        </Box>
-
-        <Separator />
-
-        {Object.entries(primitiveColors).map(([name, shades]) => (
-          <Box key={name} w="full">
-            <Subtitle
-              color="gray.1100"
-              textTransform="capitalize"
-              mb={2}
-              fontWeight="semibold"
-            >
-              {name}
-            </Subtitle>
-            <Flex gap={1} wrap="wrap">
-              {Object.entries(shades).map(([shade, hex]) => {
-                const hexValue = hex
-                  ? (typeof hex === 'object' && 'value' in hex
-                    ? (hex as any).value as string
-                    : hex as string)
-                  : '';
-                return (
-                  <PrimitiveColorCard
-                    key={shade}
-                    name={name}
-                    shade={shade}
-                    hex={hexValue}
-                  />
-                );
-              })}
-            </Flex>
-          </Box>
-        ))}
-      </VStack>
-    );
-  },
-};
-
-/**
- * Extended gray scale with 16 shades (0-1500) for fine-grained control.
- * Based on a cool slate palette with subtle blue undertone.
- */
-export const GrayScale: Story = {
-  name: 'Gray Scale (Slate)',
-  render: () => {
-    return (
-      <VStack gap={6} align="flex-start" w="full">
-        <Box>
-          <H4 color="gray.1300" mb={2}>
-            Gray Scale (Slate-based)
-          </H4>
-          <Subtext color="gray.700">
-            Extended 16-shade gray scale with cool blue undertone. Optimized for
-            WCAG contrast ratios.
-          </Subtext>
-        </Box>
-
-        <Separator />
-
-        <Grid templateColumns="repeat(auto-fill, minmax(80px, 1fr))" gap={2}>
-          {Object.entries(colors.gray).map(([shade, hex]) => {
-            const hexValue = hex
-              ? (typeof hex === 'object' && 'value' in hex
-                ? (hex as any).value as string
-                : hex as string)
-              : '';
-            return (
-              <PrimitiveColorCard
-                key={shade}
-                name="gray"
-                shade={shade}
-                hex={hexValue}
-              />
-            );
-          })}
-        </Grid>
-
-        <Box mt={4} p={4} bg="gray.50" borderRadius="md" w="full">
-          <Subtitle color="gray.1100" mb={2} fontWeight="semibold">
-            Recommended Usage
-          </Subtitle>
-          <VStack align="flex-start" gap={1}>
-            <Subtext color="gray.800">
-              • <strong>gray.0-200</strong>: Backgrounds, subtle borders
-            </Subtext>
-            <Subtext color="gray.800">
-              • <strong>gray.300-500</strong>: Borders, disabled states,
-              placeholders
-            </Subtext>
-            <Subtext color="gray.800">
-              • <strong>gray.600-800</strong>: Secondary text, icons
-            </Subtext>
-            <Subtext color="gray.800">
-              • <strong>gray.900-1200</strong>: Primary text, headings
-            </Subtext>
-            <Subtext color="gray.800">
-              • <strong>gray.1300-1500</strong>: High-contrast text, dark
-              backgrounds
-            </Subtext>
-          </VStack>
-        </Box>
-      </VStack>
-    );
-  },
-};
-
-/**
- * Contrast ratio reference for accessibility compliance.
- */
-export const ContrastReference: Story = {
-  name: 'Contrast Reference',
-  render: () => {
-    const contrastPairs = [
-      {
-        bg: 'primary.extralight',
-        text: 'primary.dark',
-        label: 'primary.extralight + dark',
-        ratio: '7.2:1',
-        badge: 'AAA',
-      },
-      {
-        bg: 'primary.main',
-        text: 'white',
-        label: 'primary.main + white',
-        ratio: '5.9:1',
-        badge: 'AA',
-      },
-      {
-        bg: 'danger.extralight',
-        text: 'danger.dark',
-        label: 'danger.extralight + dark',
-        ratio: '7.4:1',
-        badge: 'AAA',
-      },
-      {
-        bg: 'danger.main',
-        text: 'white',
-        label: 'danger.main + white',
-        ratio: '5.9:1',
-        badge: 'AA',
-      },
-      {
-        bg: 'success.extralight',
-        text: 'success.dark',
-        label: 'success.extralight + dark',
-        ratio: '6.1:1',
-        badge: 'AA',
-      },
-      {
-        bg: 'warning.extralight',
-        text: 'warning.dark',
-        label: 'warning.extralight + dark',
-        ratio: '5.8:1',
-        badge: 'AA',
-      },
-      {
-        bg: 'gray.0',
-        text: 'gray.1300',
-        label: 'gray.0 + gray.1300',
-        ratio: '11.2:1',
-        badge: 'AAA',
-      },
-      {
-        bg: 'gray.50',
-        text: 'gray.900',
-        label: 'gray.50 + gray.900',
-        ratio: '6.2:1',
-        badge: 'AA',
-      },
-    ];
-
-    return (
-      <VStack gap={6} align="flex-start" w="full">
-        <Box>
-          <H4 color="gray.1300" mb={2}>
-            WCAG Contrast Reference
-          </H4>
-          <Subtext color="gray.700">
-            All semantic color combinations meet WCAG 2.1 AA standards (4.5:1
-            minimum).
-          </Subtext>
-        </Box>
-
-        <Separator />
-
-        <Grid templateColumns="repeat(auto-fill, minmax(240px, 1fr))" gap={4}>
-          {contrastPairs.map((pair) => (
-            <Box
-              key={pair.label}
-              borderRadius="lg"
-              overflow="hidden"
-              border="1px solid"
-              borderColor="gray.200"
-            >
-              <Flex
-                bg={pair.bg}
-                p={6}
-                justify="center"
-                align="center"
-                minH="80px"
-              >
-                <Text color={pair.text} fontWeight="semibold">
-                  Sample Text
-                </Text>
-              </Flex>
-              <Flex
-                p={3}
-                bg="gray.50"
-                justify="space-between"
-                align="center"
-                borderTop="1px solid"
-                borderColor="gray.200"
-              >
-                <Subtext color="gray.800">{pair.label}</Subtext>
-                <Flex align="center" gap={2}>
-                  <Text fontFamily="mono" textStyle="subtext" color="gray.700">
-                    {pair.ratio}
-                  </Text>
-                  <Box
-                    px={2}
-                    py={0.5}
-                    borderRadius="sm"
-                    bg={pair.badge === 'AAA' ? 'success.extralight' : 'gold.100'}
-                    color={pair.badge === 'AAA' ? 'success.dark' : 'gold.700'}
-                  >
-                    <Text fontSize="10px" fontWeight="bold">
-                      {pair.badge}
-                    </Text>
-                  </Box>
-                </Flex>
-              </Flex>
-            </Box>
-          ))}
-        </Grid>
-      </VStack>
-    );
-  },
-};
-
-/**
- * Typography components showcasing the font size scale.
- * Each component uses responsive em units for scalability.
- */
 export const FontSizes: Story = {
   name: 'Font Sizes',
   render: () => {
     const typographyItems = [
       {
-        component: <H1 color="gray.1200">H1 - Page titles</H1>,
+        component: <H1 color="fg.default">H1 - Page titles</H1>,
         name: 'H1',
         token: 'h1',
         base: '2.4rem',
         md: '3rem',
       },
       {
-        component: <H2 color="gray.1200">H2 - Section headers</H2>,
+        component: <H2 color="fg.default">H2 - Section headers</H2>,
         name: 'H2',
         token: 'h2',
         base: '2rem',
         md: '2.5rem',
       },
       {
-        component: <H3 color="gray.1200">H3 - Subsection headers</H3>,
+        component: <H3 color="fg.default">H3 - Subsection headers</H3>,
         name: 'H3',
         token: 'h3',
         base: '1.5rem',
         md: '1.75rem',
       },
       {
-        component: <H4 color="gray.1200">H4 - Card titles</H4>,
+        component: <H4 color="fg.default">H4 - Card titles</H4>,
         name: 'H4',
         token: 'h4',
         base: '1.25rem',
         md: '1.44rem',
       },
       {
-        component: <H5 color="gray.1200">H5 - Small headings</H5>,
+        component: <H5 color="fg.default">H5 - Small headings</H5>,
         name: 'H5',
         token: 'h5',
         base: '1.1rem',
         md: '1.2rem',
       },
       {
-        component: <Text color="gray.1200">Text - Body text</Text>,
+        component: <Text color="fg.default">Text - Body text</Text>,
         name: 'Text',
         token: 'p',
         base: '0.875rem',
         md: '1rem',
       },
       {
-        component: <Subtitle color="gray.1200">Subtitle - Subtitle text</Subtitle>,
+        component: (
+          <Subtitle color="fg.default">Subtitle - Subtitle text</Subtitle>
+        ),
         name: 'Subtitle',
         token: 'subtitle',
         base: '0.875rem',
         md: '1rem',
       },
       {
-        component: <Subtext color="gray.800">Subtext - Helper text, captions</Subtext>,
+        component: (
+          <Subtext color="fg.muted">Subtext - Helper text, captions</Subtext>
+        ),
         name: 'Subtext',
         token: 'subtext',
         base: '0.805rem',
@@ -673,11 +250,12 @@ export const FontSizes: Story = {
     return (
       <VStack gap={6} align="flex-start" w="full">
         <Box>
-          <H4 color="gray.1300" mb={2}>
+          <H4 color="fg.default" mb={2}>
             Typography Components
           </H4>
-          <Subtext color="gray.700">
-            Responsive typography using em units. Use the token with fontSize prop on any component.
+          <Subtext color="fg.muted">
+            Responsive typography using em units. Use the token with fontSize
+            prop on any component.
           </Subtext>
         </Box>
 
@@ -686,17 +264,17 @@ export const FontSizes: Story = {
         {/* Header row */}
         <Flex w="full" px={4} gap={4} display={{ base: 'none', md: 'flex' }}>
           <Box flex="1" minW="300px">
-            <Subtext color="gray.600" fontWeight="semibold">
+            <Subtext color="fg.subtle" fontWeight="semibold">
               Component
             </Subtext>
           </Box>
           <Box w="80px" textAlign="center">
-            <Subtext color="gray.600" fontWeight="semibold">
+            <Subtext color="fg.subtle" fontWeight="semibold">
               Token
             </Subtext>
           </Box>
           <Box w="120px" textAlign="right">
-            <Subtext color="gray.600" fontWeight="semibold">
+            <Subtext color="fg.subtle" fontWeight="semibold">
               Size (mobile → desktop)
             </Subtext>
           </Box>
@@ -709,7 +287,7 @@ export const FontSizes: Story = {
               py={4}
               px={4}
               borderBottom="1px solid"
-              borderColor="gray.100"
+              borderColor="border.subtle"
               align="center"
               justify="space-between"
               wrap="wrap"
@@ -732,7 +310,13 @@ export const FontSizes: Story = {
                 >
                   {item.token}
                 </Box>
-                <Text w="120px" fontFamily="mono" textStyle="subtext" color="gray.600" textAlign="right">
+                <Text
+                  w="120px"
+                  fontFamily="mono"
+                  textStyle="subtext"
+                  color="fg.subtle"
+                  textAlign="right"
+                >
                   {item.base} → {item.md}
                 </Text>
               </Flex>
@@ -740,15 +324,15 @@ export const FontSizes: Story = {
           ))}
         </VStack>
 
-        <Box mt={4} p={4} bg="gray.50" borderRadius="md" w="full">
-          <Subtitle color="gray.1100" mb={2} fontWeight="semibold">
+        <Box mt={4} p={4} bg="bg.subtle" borderRadius="md" w="full">
+          <Subtitle color="fg.default" mb={2} fontWeight="semibold">
             Usage
           </Subtitle>
           <Box
             as="pre"
             p={3}
-            bg="gray.800"
-            color="gray.100"
+            bg="bg.inverse"
+            color="fg.inverse"
             borderRadius="md"
             textStyle="subtext"
             overflow="auto"
@@ -769,52 +353,54 @@ import { H1, Text, Subtext } from '@mindlogic-ai/logician-ui';
   },
 };
 
-// Keep the original Default story for backwards compatibility
+const AliasTable = () => (
+  <Box w="full" mt={6}>
+    <H4 color="fg.default" mb={2}>
+      4.x aliases (removed in 6.0)
+    </H4>
+    <Grid templateColumns="max-content max-content" columnGap={6} rowGap={1}>
+      {Object.entries(DEPRECATED_ALIASES).map(([alias, target]) => (
+        <Fragment key={alias}>
+          <Text fontFamily="mono" color="fg.muted">
+            {alias}
+          </Text>
+          <Text fontFamily="mono" color="fg.default">
+            → {target}
+          </Text>
+        </Fragment>
+      ))}
+    </Grid>
+  </Box>
+);
+
+/** Every 5.0 semantic colour, resolved to hex in light and dark. */
 export const Default: Story = {
-  render: () => {
-    return (
-      <VStack gap={4} align="flex-start" w="full">
-        {Object.entries(semanticTokens.colors)
-          .filter(([color]) => !color.startsWith('chakra'))
-          .map(([color, shades]) => (
-            <Flex key={color} gap={4} align="flex-start" w="full">
-              <H4 mt={2} w="120px" flexShrink={0} textTransform="capitalize" color="gray.1200">
-                {color}
-              </H4>
-              <Grid templateColumns="repeat(auto-fill, minmax(132px, 1fr))" gap={2} flex="1" minW="0">
-                {Object.entries(shades).flatMap(([shade, shadeValue]) => {
-                  const node = shadeValue as any;
-                  // Leaf token: render its value directly.
-                  if (node && node.value !== undefined) {
-                    return [
-                      <ColorCard
-                        key={shade}
-                        color={color}
-                        shade={shade}
-                        shadeValue={node.value as TokenValue}
-                      />,
-                    ];
-                  }
-                  // Nested group (e.g. bg.invalid → bg.invalid.subtle): render
-                  // each leaf beneath it as `<shade>.<sub>`.
-                  if (node && typeof node === 'object') {
-                    return Object.entries(node)
-                      .filter(([, sub]) => (sub as any)?.value !== undefined)
-                      .map(([subShade, sub]) => (
-                        <ColorCard
-                          key={`${shade}.${subShade}`}
-                          color={color}
-                          shade={`${shade}.${subShade}`}
-                          shadeValue={(sub as any).value as TokenValue}
-                        />
-                      ));
-                  }
-                  return [];
-                })}
-              </Grid>
-            </Flex>
-          ))}
-      </VStack>
-    );
-  },
+  render: () => (
+    <VStack gap={4} align="flex-start" w="full">
+      {getSwatchGroups().map(([group, swatches]: [string, Swatch[]]) => (
+        <Flex key={group} gap={4} align="flex-start" w="full">
+          <H4
+            mt={2}
+            w="120px"
+            flexShrink={0}
+            textTransform="capitalize"
+            color="fg.default"
+          >
+            {group}
+          </H4>
+          <Grid
+            templateColumns="repeat(auto-fill, minmax(132px, 1fr))"
+            gap={2}
+            flex="1"
+            minW="0"
+          >
+            {swatches.map((s) => (
+              <ColorCard key={s.path} swatch={s} />
+            ))}
+          </Grid>
+        </Flex>
+      ))}
+      <AliasTable />
+    </VStack>
+  ),
 };