@pandacss/studio 0.0.0-dev-20250414214914 → 0.0.0-dev-20250416095209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20250414214914",
+  "version": "0.0.0-dev-20250416095209",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -48,16 +48,17 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "6.2.5",
-    "@pandacss/config": "0.0.0-dev-20250414214914",
-    "@pandacss/logger": "0.0.0-dev-20250414214914",
-    "@pandacss/shared": "0.0.0-dev-20250414214914",
-    "@pandacss/token-dictionary": "0.0.0-dev-20250414214914",
-    "@pandacss/types": "0.0.0-dev-20250414214914",
-    "@pandacss/astro-plugin-studio": "0.0.0-dev-20250414214914"
+    "@pandacss/logger": "0.0.0-dev-20250416095209",
+    "@pandacss/config": "0.0.0-dev-20250416095209",
+    "@pandacss/shared": "0.0.0-dev-20250416095209",
+    "@pandacss/token-dictionary": "0.0.0-dev-20250416095209",
+    "@pandacss/astro-plugin-studio": "0.0.0-dev-20250416095209",
+    "@pandacss/types": "0.0.0-dev-20250416095209"
   },
   "devDependencies": {
     "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.19"
+    "@types/react-dom": "18.2.19",
+    "@testing-library/react": "14.2.2"
   },
   "scripts": {
     "panda": "node ../cli/bin.js",

package/src/components/colors.tsx

@@ -1,10 +1,10 @@
-import type { Token } from '@pandacss/token-dictionary'
+import type { Token, TokenExtensions } from '@pandacss/token-dictionary'
 import * as React from 'react'
 import { Grid, HStack, Stack, panda } from '../../styled-system/jsx'
 import { ColorWrapper } from '../components/color-wrapper'
 import { TokenContent } from '../components/token-content'
 import { TokenGroup } from '../components/token-group'
-import { useColorDocs } from '../lib/use-color-docs'
+import { useColorDocs, type ColorToken } from '../lib/use-color-docs'
 import { Input } from './input'
 import { SemanticColorDisplay } from './semantic-color'
 import { StickyTop } from './sticky-top'
@@ -15,33 +15,56 @@ function getColorFromReference(reference: string) {
   return reference.match(/{colors\.(.*?)}/)?.[1]
 }
 
+const SEMANTIC_TOKEN_PRIORITY = ['base', 'light', '_light', 'dark', '_dark']
+
+export function sortSemanticTokens(tokens: string[]) {
+  const ret = tokens.slice()
+  ret.sort((a, b) => {
+    const _a = SEMANTIC_TOKEN_PRIORITY.indexOf(a)
+    const _b = SEMANTIC_TOKEN_PRIORITY.indexOf(b)
+    if (_a !== -1 && _b !== -1) return _a - _b
+    if (_a !== -1) return -1
+    if (_b !== -1) return 1
+    return a.localeCompare(b)
+  })
+
+  return ret
+}
+
+export interface SemanticTokenProps {
+  name: string
+  tokens: Record<string, ColorToken>
+}
+
+export function SemanticToken(props: SemanticTokenProps) {
+  const { name, tokens } = props
+
+  const conditions: string[] = []
+  if (tokens.extensions.conditions) {
+    conditions.push(...sortSemanticTokens(Object.keys(tokens.extensions.conditions)))
+  }
+
+  return (
+    <Stack gap="2" width="full">
+      <HStack gap="1">
+        {conditions.map((cond) => (
+          <SemanticColorDisplay
+            key={cond}
+            value={tokens[cond].value}
+            condition={cond}
+            token={getColorFromReference(tokens.extensions.conditions![cond])}
+          />
+        ))}
+      </HStack>
+      <panda.span fontWeight="semibold">{name}</panda.span>
+    </Stack>
+  )
+}
+
 export default function Colors() {
   const { filterQuery, setFilterQuery, semanticTokens, hasResults, uncategorizedColors, categorizedColors } =
     useColorDocs()
 
-  const renderSemanticTokens = () => {
-    return semanticTokens.map(([name, colors], i) => {
-      return (
-        <Stack gap="2" key={i} width="full">
-          <HStack gap="1">
-            <SemanticColorDisplay
-              value={colors.base.value}
-              condition="base"
-              token={getColorFromReference(colors.extensions.conditions!.base)}
-            />
-            <SemanticColorDisplay
-              value={colors[colors.extensions.condition!].value}
-              condition={colors.extensions.condition!}
-              token={getColorFromReference(colors.extensions.conditions![colors.extensions.condition!])}
-            />
-          </HStack>
-
-          <panda.span fontWeight="semibold">{name}</panda.span>
-        </Stack>
-      )
-    })
-  }
-
   return (
     <TokenGroup>
       <StickyTop>
@@ -60,7 +83,13 @@ export default function Colors() {
 
           <ColorGroup title={UNCATEGORIZED_ID} colors={uncategorizedColors} />
 
-          {!!semanticTokens.length && <ColorGroup title="Semantic Tokens">{renderSemanticTokens()}</ColorGroup>}
+          {!!semanticTokens.length && (
+            <ColorGroup title="Semantic Tokens">
+              {semanticTokens.map(([name, colors], i) => (
+                <SemanticToken key={i} name={name} tokens={colors} />
+              ))}
+            </ColorGroup>
+          )}
 
           {!hasResults && <div>No result found! 🐼</div>}
         </Stack>

package/src/lib/use-color-docs.ts

@@ -10,7 +10,7 @@ interface Color {
   path: string[]
 }
 
-type ColorToken = Token & Color & TokenExtensions
+export type ColorToken = Token & Color & TokenExtensions
 
 const UNCATEGORIZED_ID = 'uncategorized' as const
 

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": ["src"],
+  "include": ["src", "__tests__"],
   "compilerOptions": {
     "jsx": "preserve",
     "customConditions": ["source"]