feat(colors): add legends and improve layout

components/layout/content-section.tsx

@@ -7,6 +7,7 @@ export default function ContentSection({ className, children }: BasicComponentPr
       display="flex"
       gap="4"
       flexDir="column"
+      maxW="100vw"
       p="10"
       borderBottom="1px solid"
       borderBottomColor="gray.border1"

modules/color-system/components/color-scale-editor.tsx

@@ -24,9 +24,9 @@ export default function ColorScaleEditor({ fg, config, onChange }: ColorScaleEdi
     <PandaDiv
       css={{
         display: 'grid',
-        gridTemplateColumns: 'minmax(120px, 1fr) repeat(11, minmax(60px, 1fr))',
+        gridTemplateColumns: 'minmax(120px, 1fr) repeat(10, minmax(50px, 1fr))',
         gap: '2',
-        maxWidth: '900px',
+        // maxWidth: '900px',
         '& .label': {
           display: 'flex',
           flexDirection: 'column',

modules/color-system/components/color-scale-legend.tsx

@@ -0,0 +1,72 @@
+import { PandaDiv } from '@/modules/design-system/components/panda'
+
+export default function ColorScaleLegend({ levels }: { levels: Readonly<string[]> }) {
+  return (
+    <PandaDiv
+      css={{
+        display: 'grid',
+        gridTemplateColumns: 'minmax(120px, 1fr) repeat(10, minmax(50px, 1fr))',
+        gap: '2',
+        // maxWidth: '900px',
+        '& .label': {
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          px: '2',
+          py: '2',
+        },
+        '& .subtitle': {
+          fontWeight: 'normal',
+          color: 'fg.muted',
+        },
+        '& .label:not(:first-child)': {
+          justifyContent: 'center',
+        },
+        '&.legend': {
+          fontSize: 'xxs',
+          textAlign: 'center',
+        },
+      }}
+    >
+      <span />
+      {levels.map((level) => (
+        <PandaDiv
+          key={level}
+          // className={monoFontClass}
+          data-level={level}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            px: '2',
+            py: '4',
+            // borderWidth: '1px',
+            // borderColor: 'gray.fg1',
+            borderRadius: 'sm',
+            fontSize: 'sm',
+            textAlign: 'center',
+            justifyContent: 'center',
+            height: '3rem',
+            '& span': {
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              position: 'absolute',
+              inset: '0',
+              padding: '1',
+              // background: 'alpha.dark.600',
+              _dark: {
+                // background: 'alpha.light.600',
+              },
+              color: 'contrast.100',
+              fontSize: 'sm',
+              fontWeight: 'bold',
+              textAlign: 'center',
+            },
+          }}
+        >
+          <span>{level}</span>
+        </PandaDiv>
+      ))}
+    </PandaDiv>
+  )
+}

modules/color-system/components/color-scale-level-editor.tsx

@@ -106,7 +106,7 @@ export default function ColorScaleLevelEditor({ config, level, fg, scheme, onCha
           fontSize: 'sm',
           textAlign: 'center',
           justifyContent: 'center',
-          aspectRatio: '4/3',
+          height: '3rem',
           '--bgch': 'repeating-conic-gradient(#99999955 0% 25%, transparent 0% 50%)',
           // color: 'gray.fg2',
           bgImage: 'linear-gradient(var(--bg), var(--bg)), var(--bgch)',

modules/color-system/components/color-system-lab.tsx

@@ -1,9 +1,12 @@
 'use client'
 
+import { PandaDiv } from '@/modules/design-system/components/panda'
+import { colorLevelAliases, colorLevels } from '../constants'
 import { useColorSystem } from '../global-state'
 import { formatColorConfig, parseColor } from '../lib/color-manipulation'
 import type { ColorActionPayload, ColorLevelKey } from '../types'
 import ColorScaleEditor from './color-scale-editor'
+import ColorScaleLegend from './color-scale-legend'
 
 export default function ColorSystemLab() {
   const [colorSystem, setColorSystem] = useColorSystem()
@@ -43,12 +46,18 @@ export default function ColorSystemLab() {
     })
   }
 
-  return Object.entries(colorSystem).map(([name, colorConfig]) => (
-    <ColorScaleEditor
-      key={name}
-      fg={colorConfig.group === 'contrast' ? convertedBgColor : convertedFgColor}
-      config={colorConfig}
-      onChange={handleChange}
-    />
-  ))
+  return (
+    <PandaDiv display="flex" gap="4" flexDir="column" maxW="920px" marginX="auto">
+      <ColorScaleLegend levels={colorLevels} />
+      {Object.entries(colorSystem).map(([name, colorConfig]) => (
+        <ColorScaleEditor
+          key={name}
+          fg={colorConfig.group === 'contrast' ? convertedBgColor : convertedFgColor}
+          config={colorConfig}
+          onChange={handleChange}
+        />
+      ))}
+      <ColorScaleLegend levels={colorLevelAliases} />
+    </PandaDiv>
+  )
 }

modules/color-system/components/panda-preset-renderer.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@/lib/utils'
 import { css } from '@/styled-system/css'
 import { monoFontClass } from '@/ui/lib/fonts'
 import { useState } from 'react'
@@ -34,11 +35,20 @@ export default function PandaPresetRenderer({ buttonClassName }: { buttonClassNa
       </PrimaryButtonSm>
       <div
         className={css({
-          maxHeight: '500px',
-          overflowY: 'auto',
+          maxWidth: '100%',
+          overflow: 'auto',
         })}
       >
-        <pre className={monoFontClass}>{presetCode}</pre>
+        <pre
+          className={cn(
+            monoFontClass,
+            css({
+              maxHeight: '500px',
+            }),
+          )}
+        >
+          {presetCode}
+        </pre>
       </div>
     </>
   )