@pandacss/studio 0.27.3 → 0.29.0

package/dist/studio.js

@@ -48,7 +48,8 @@ async function buildStudio({ outDir, configPath }) {
     await astro.build({
       outDir,
       root: appPath,
-      integrations: [react(), studio()]
+      integrations: [react(), studio()],
+      devToolbar: { enabled: false }
     });
   } catch (error) {
     console.log(error);
@@ -67,7 +68,8 @@ async function serveStudio({ configPath, port, host, outDir }) {
       server: {
         port: port ? Number(port) : void 0,
         host
-      }
+      },
+      devToolbar: { enabled: false }
     });
   } catch (error) {
     console.log(error);
@@ -81,7 +83,8 @@ async function previewStudio({ outDir }) {
     await astro.preview({
       outDir,
       root: appPath,
-      integrations: [react(), studio()]
+      integrations: [react(), studio()],
+      devToolbar: { enabled: false }
     });
   } catch (error) {
     console.log(error);

package/dist/studio.mjs

@@ -18,7 +18,8 @@ async function buildStudio({ outDir, configPath }) {
     await astro.build({
       outDir,
       root: appPath,
-      integrations: [react(), studio()]
+      integrations: [react(), studio()],
+      devToolbar: { enabled: false }
     });
   } catch (error) {
     console.log(error);
@@ -37,7 +38,8 @@ async function serveStudio({ configPath, port, host, outDir }) {
       server: {
         port: port ? Number(port) : void 0,
         host
-      }
+      },
+      devToolbar: { enabled: false }
     });
   } catch (error) {
     console.log(error);
@@ -51,7 +53,8 @@ async function previewStudio({ outDir }) {
     await astro.preview({
       outDir,
       root: appPath,
-      integrations: [react(), studio()]
+      integrations: [react(), studio()],
+      devToolbar: { enabled: false }
     });
   } catch (error) {
     console.log(error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.27.3",
+  "version": "0.29.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -30,6 +30,7 @@
     "src",
     "public",
     "styled-system",
+    "tsconfig.json",
     "*.ts",
     "*.mjs"
   ],
@@ -43,16 +44,16 @@
   "license": "MIT",
   "dependencies": {
     "@astrojs/react": "2.3.2",
-    "astro": "4.0.6",
+    "astro": "4.2.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "vite": "5.0.7",
-    "@pandacss/config": "0.27.3",
-    "@pandacss/logger": "0.27.3",
-    "@pandacss/shared": "0.27.3",
-    "@pandacss/token-dictionary": "0.27.3",
-    "@pandacss/types": "0.27.3",
-    "@pandacss/astro-plugin-studio": "0.27.3"
+    "vite": "5.0.12",
+    "@pandacss/config": "0.29.0",
+    "@pandacss/logger": "0.29.0",
+    "@pandacss/shared": "0.29.0",
+    "@pandacss/token-dictionary": "0.29.0",
+    "@pandacss/types": "0.29.0",
+    "@pandacss/astro-plugin-studio": "0.29.0"
   },
   "devDependencies": {
     "@types/react": "18.2.42",

package/panda.config.ts

@@ -55,41 +55,19 @@ export default {
           border: {
             value: { base: '{colors.neutral.300}', _dark: '{colors.neutral.700}' },
           },
+          accent: {
+            value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.300}' },
+          },
         },
       },
     },
   },
-  patterns: {
-    extend: {
-      styledLink: {
-        properties: {},
-        transform: (props: any) => ({
-          display: 'inline-flex',
-          alignItems: 'center',
-          opacity: '0.5',
-          borderBottom: '1px solid transparent',
-          cursor: 'pointer',
-          _hover: { opacity: 1, borderBottomColor: 'black' },
-          ...props,
-        }),
-      },
-    },
-  },
-  staticCss: {
-    css: [
-      {
-        properties: {
-          color: ['red.400'],
-        },
-      },
-    ],
-  },
   globalCss: {
     ':root': {
       '--global-color-border': 'colors.border',
       '--global-color-placeholder': 'colors.neutral.500',
       fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
-      fontSize: 'md',
+      fontSize: '0.84em',
       lineHeight: 'normal',
       fontWeight: 'normal',
       colorScheme: 'light dark',
@@ -104,7 +82,7 @@ export default {
 
     body: {
       margin: 0,
-      minHeight: '100vh',
+      minHeight: '100dvh',
     },
   },
 } satisfies Config

package/src/components/color-constrast.tsx

@@ -1,46 +1,51 @@
-import { useState } from 'react'
+import * as React from 'react'
 import { HStack, Stack, VStack, panda } from '../../styled-system/jsx'
 import { getContrastPairs, getContrastRatio } from '../lib/color'
-import context from '../lib/panda.context'
-import { ErrorIcon, SuccessIcon } from './icons'
+import * as context from '../lib/panda-context'
+import { Select } from './input'
+import { TestScore } from './test-score'
 import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
 
-function TestScore(props: { score: { WCAG_AA: boolean; WCAG_AAA: boolean }; size: 'regular' | 'large' }) {
-  const { score, size } = props
+interface ColorSelectProps {
+  title: string
+  value: string
+  colors: {
+    label: string
+    value: string
+  }[]
+  onChange: (value: string) => void
+}
+
+function ColorSelect(props: ColorSelectProps) {
+  const { title, colors, onChange, value } = props
   return (
-    <>
-      <HStack justify="space-between" fontWeight="medium">
-        <HStack gap="2">
-          <span>{score.WCAG_AA ? <SuccessIcon /> : <ErrorIcon />}</span>
-          <span>AA</span>
-        </HStack>
-        <span>{size === 'regular' ? '4.5:1' : '3:1'}</span>
-      </HStack>
-      <HStack justify="space-between" fontWeight="medium">
-        <HStack gap="2">
-          <span>{score.WCAG_AAA ? <SuccessIcon /> : <ErrorIcon />}</span>
-          <span>AAA</span>
-        </HStack>
-        <span>{size === 'regular' ? '7:1' : '4.5:1'}</span>
-      </HStack>
-    </>
+    <Stack flex="1">
+      <panda.span fontWeight="semibold">{title}</panda.span>
+      <panda.div
+        display="flex"
+        flexDirection="column"
+        borderWidth="1px"
+        borderColor="card"
+        pt="16"
+        style={{ background: value }}
+      />
+      <Select value={value} onChange={(e) => onChange(e.currentTarget.value)}>
+        {colors.map((color) => (
+          <option key={color.label} value={color.label}>
+            {color.label}
+          </option>
+        ))}
+      </Select>
+    </Stack>
   )
 }
 
-export function ColorContrastChecker() {
-  const colorsMap = context.getCategory('colors')
-  const values = Array.from(colorsMap.values())
-
-  const colors = values
-    .filter((color) => !color.isConditional && !color.extensions.isVirtual)
-    .map((color) => ({
-      label: color.extensions.prop,
-      value: color.value,
-    }))
+export default function ColorContrastChecker() {
+  const colors = context.colors
 
-  const [foreground, setForeGround] = useState('#000000')
-  const [background, setBackground] = useState('#ffffff')
+  const [foreground, setForeGround] = React.useState('#000000')
+  const [background, setBackground] = React.useState('#ffffff')
 
   const activeForeground = (colors.find((col) => col.label === foreground)?.value || foreground) as string
   const activeBackground = (colors.find((col) => col.label === background)?.value || background) as string
@@ -52,40 +57,8 @@ export function ColorContrastChecker() {
     <TokenGroup>
       <TokenContent>
         <HStack gap="3" p="2">
-          <panda.div
-            display="flex"
-            flexDirection="column"
-            borderWidth="1px"
-            borderColor="card"
-            flex="1"
-            pt="16"
-            style={{ background: activeForeground }}
-          >
-            <select value={foreground} onChange={(e: any) => setForeGround(e.currentTarget.value)}>
-              {colors.map((color) => (
-                <option key={color.label} value={color.label}>
-                  {color.label}
-                </option>
-              ))}
-            </select>
-          </panda.div>
-          <panda.div
-            display="flex"
-            flexDirection="column"
-            borderWidth="1px"
-            borderColor="card"
-            flex="1"
-            pt="16"
-            style={{ background: activeBackground }}
-          >
-            <select value={background} onChange={(e: any) => setBackground(e.currentTarget.value)}>
-              {colors.map((color) => (
-                <option key={color.label} value={color.label}>
-                  {color.label}
-                </option>
-              ))}
-            </select>
-          </panda.div>
+          <ColorSelect title="Background" value={activeBackground} onChange={setBackground} colors={colors} />
+          <ColorSelect title="Foreground" value={activeForeground} onChange={setForeGround} colors={colors} />
         </HStack>
 
         <HStack

package/src/components/color-wrapper.tsx

@@ -1,25 +1,22 @@
-import { type HTMLPandaProps, panda } from '../../styled-system/jsx'
+import { panda } from '../../styled-system/jsx'
 
-export function ColorWrapper(props: HTMLPandaProps<'div'>) {
-  return (
-    <panda.div
-      width="full"
-      height="10"
-      borderRadius="sm"
-      position="relative"
-      overflow="hidden"
-      shadow="inset"
-      _before={{
-        content: "''",
-        position: 'absolute',
-        borderRadius: 'sm',
-        width: '100%',
-        height: '100%',
-        backgroundSize: '24px',
-        zIndex: '-1',
-        backgroundImage: 'check',
-      }}
-      {...props}
-    />
-  )
-}
+export const ColorWrapper = panda('div', {
+  base: {
+    width: 'full',
+    height: '10',
+    borderRadius: 'sm',
+    position: 'relative',
+    overflow: 'hidden',
+    shadow: 'inset',
+    _before: {
+      content: "''",
+      position: 'absolute',
+      borderRadius: 'sm',
+      width: '100%',
+      height: '100%',
+      backgroundSize: '24px',
+      zIndex: '-1',
+      backgroundImage: 'check',
+    },
+  },
+})

package/src/components/colors.tsx

@@ -1,3 +1,5 @@
+import type { Token } 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'
@@ -5,6 +7,7 @@ import { TokenGroup } from '../components/token-group'
 import { useColorDocs } from '../lib/use-color-docs'
 import { Input } from './input'
 import { SemanticColorDisplay } from './semantic-color'
+import { StickyTop } from './sticky-top'
 
 const UNCATEGORIZED_ID = 'uncategorized' as const
 
@@ -12,14 +15,14 @@ function getColorFromReference(reference: string) {
   return reference.match(/{colors\.(.*?)}/)?.[1]
 }
 
-export function Colors() {
+export default function Colors() {
   const { filterQuery, setFilterQuery, semanticTokens, hasResults, uncategorizedColors, categorizedColors } =
     useColorDocs()
 
   const renderSemanticTokens = () => {
     return semanticTokens.map(([name, colors], i) => {
       return (
-        <Stack gap="1" key={i} width="full">
+        <Stack gap="2" key={i} width="full">
           <HStack gap="1">
             <SemanticColorDisplay
               value={colors.base.value}
@@ -38,68 +41,72 @@ export function Colors() {
       )
     })
   }
-  const renderColors = (values: any[]) => {
-    return values?.map((color, i) => {
-      return (
-        <Stack gap="1" key={i}>
-          <ColorWrapper style={{ background: color.value }} />
-          <Stack mt="2" gap="0.5">
-            <panda.div fontWeight="medium">{color.extensions.prop}</panda.div>
-            <panda.div opacity="0.7" fontSize="sm" textTransform="uppercase">
-              {color.value}
-            </panda.div>
-          </Stack>
-        </Stack>
-      )
-    })
-  }
 
   return (
     <TokenGroup>
-      <panda.div mb="3.5" position="sticky" top="0" zIndex="1">
+      <StickyTop>
         <Input
           value={filterQuery}
           onChange={(e) => setFilterQuery(e.target.value)}
           placeholder="Filter tokens by text, property or value"
         />
-      </panda.div>
+      </StickyTop>
+
       <TokenContent>
         <Stack gap="10">
-          {!!categorizedColors.length &&
-            categorizedColors.map(([category, colors]) => (
-              <div key={category}>
-                <panda.span fontWeight="medium" textTransform="capitalize" fontSize="xl">
-                  {category}
-                </panda.span>
+          {categorizedColors.map(([category, colors]) => (
+            <ColorGroup key={category} title={category} colors={colors} />
+          ))}
+
+          <ColorGroup title={UNCATEGORIZED_ID} colors={uncategorizedColors} />
+
+          {!!semanticTokens.length && <ColorGroup title="Semantic Tokens">{renderSemanticTokens()}</ColorGroup>}
 
-                <Grid gap="4" minChildWidth="13rem" my="5" mx="0" key={category}>
-                  {renderColors(colors)}
-                </Grid>
-              </div>
-            ))}
-          {!!uncategorizedColors?.length && (
-            <div>
-              <panda.span fontWeight="medium" textTransform="capitalize" fontSize="xl">
-                {UNCATEGORIZED_ID}
-              </panda.span>
-              <Grid gap="4" minChildWidth="13rem" my="5" mx="0">
-                {renderColors(uncategorizedColors)}
-              </Grid>
-            </div>
-          )}
-          {!!semanticTokens.length && (
-            <div>
-              <panda.span fontWeight="medium" textTransform="capitalize" fontSize="xl">
-                Semantic tokens
-              </panda.span>
-              <Grid gap="4" minChildWidth="30rem" my="5" mx="0">
-                {renderSemanticTokens()}
-              </Grid>
-            </div>
-          )}
           {!hasResults && <div>No result found! 🐼</div>}
         </Stack>
       </TokenContent>
     </TokenGroup>
   )
 }
+
+function PrimitiveColors(props: { values?: Token[] }) {
+  const { values = [] } = props
+  return values.map((color, i) => {
+    return (
+      <Stack gap="1" key={i}>
+        <ColorWrapper style={{ background: color.value }} />
+        <Stack mt="2" gap="0.5">
+          <panda.div fontWeight="medium">{color.extensions.prop}</panda.div>
+          <panda.div opacity="0.7" fontSize="sm" textTransform="uppercase">
+            {color.value}
+          </panda.div>
+        </Stack>
+      </Stack>
+    )
+  })
+}
+
+function ColorGroup(props: { colors?: Token[]; title: string; children?: React.ReactNode }) {
+  const { children, colors, title } = props
+
+  const isEmpty = colors == null || colors.length === 0
+
+  if (!children && isEmpty) return null
+
+  return (
+    <div>
+      <panda.span fontWeight="medium" textTransform="capitalize" fontSize="xl">
+        {title}
+      </panda.span>
+      {children ? (
+        <Stack gap="10" mt="10">
+          {children}
+        </Stack>
+      ) : (
+        <Grid gap="4" minChildWidth="13rem" my="5" mx="0">
+          <PrimitiveColors values={colors} />
+        </Grid>
+      )}
+    </div>
+  )
+}

package/src/components/empty-state.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { panda, Stack } from '../../styled-system/jsx'
 
 interface EmptyStateProps {
@@ -6,13 +7,14 @@ interface EmptyStateProps {
   icon: React.ReactElement
 }
 
-export function EmptyState({ title, children, icon }: EmptyStateProps) {
+export function EmptyState(props: EmptyStateProps) {
+  const { title, children, icon } = props
   return (
     <Stack align="center" gap="5" justify="center" height="full" minHeight="40vh">
       <panda.span fontSize="5xl">{icon}</panda.span>
       <Stack opacity="0.8" align="center">
         <panda.span fontWeight="semibold">{title}</panda.span>
-        <p>{children}</p>
+        <div>{children}</div>
       </Stack>
     </Stack>
   )

package/src/components/font-family.tsx

@@ -1,17 +1,17 @@
+import * as React from 'react'
 import { Flex, HStack, Square, Stack, panda } from '../../styled-system/jsx'
-import context from '../lib/panda.context'
+import * as context from '../lib/panda-context'
 
-const fonts = context.getCategory('fonts')
+const fonts = context.getTokens('fonts')
 
 const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
 const symbols = Array.from({ length: 10 }, (_, i) => String.fromCharCode(48 + i))
 const specials = ['@', '#', '$', '%', '&', '!', '?', '+', '-']
 
 export const FontFamily = () => {
-  const values = Array.from(fonts.values())
   return (
     <Stack gap="10">
-      {values.map((font) => (
+      {fonts.map((font) => (
         <Stack key={font.name} gap="8">
           <HStack gap="10" style={{ fontFamily: font.value }}>
             <panda.p fontSize="100px" fontWeight="bold" lineHeight="1">

package/src/components/font-tokens.tsx

@@ -1,50 +1,41 @@
-import { Fragment, useState } from 'react'
+import type { Token } from '@pandacss/token-dictionary'
+import * as React from 'react'
 import { HStack, panda, Stack } from '../../styled-system/jsx'
 import { TokenContent } from '../components/token-content'
 import { TokenGroup } from '../components/token-group'
 import { Input, Textarea } from './input'
+import { StickyTop } from './sticky-top'
 
 interface FontTokensProps {
   text?: string
   largeText?: boolean
   token: string
-  fontTokens: Map<string, any>
+  fontTokens: Token[]
   css?: any
 }
 
-export function FontTokens(props: FontTokensProps) {
+export default function FontTokens(props: FontTokensProps) {
   const { text: textProp = 'Hello World', largeText = false, token, fontTokens } = props
-  const [text, setText] = useState(textProp)
 
-  const values = Array.from(fontTokens.values())
+  const [text, setText] = React.useState(textProp)
+
+  const handleChange = (event: React.ChangeEvent<any>) => {
+    setText(event.target.value)
+  }
 
   return (
     <TokenGroup>
-      <panda.div mb="3.5" position="sticky" top="0" zIndex={1}>
+      <StickyTop>
         {largeText ? (
-          <Textarea
-            resize="vertical"
-            onChange={(event) => {
-              setText(event.currentTarget.value)
-            }}
-            rows={5}
-            value={text}
-            placeholder="Preview Text"
-          />
+          <Textarea resize="vertical" onChange={handleChange} rows={5} value={text} placeholder="Preview Text" />
         ) : (
-          <Input
-            value={text}
-            onChange={(event) => {
-              setText(event.currentTarget.value)
-            }}
-            placeholder="Preview Text"
-          />
+          <Input value={text} onChange={handleChange} placeholder="Preview Text" />
         )}
-      </panda.div>
+      </StickyTop>
 
       <TokenContent>
-        {values.map((fontToken) => (
-          <Fragment key={fontToken.extensions.prop}>
+        {fontTokens.map((fontToken) => (
+          <React.Fragment key={fontToken.extensions.prop}>
             <Stack gap="3.5">
               <HStack gap="1">
                 <panda.span fontWeight="medium">{fontToken.extensions.prop}</panda.span>
@@ -61,7 +52,7 @@ export function FontTokens(props: FontTokensProps) {
                 {text}
               </panda.span>
             </Stack>
-          </Fragment>
+          </React.Fragment>
         ))}
       </TokenContent>
     </TokenGroup>

package/src/components/icons.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react'
+
 export function ErrorIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="red">

package/src/components/input.tsx

@@ -3,9 +3,9 @@ import { panda } from '../../styled-system/jsx'
 
 export const inputRecipe = cva({
   base: {
-    bg: 'transparent',
+    bg: 'card',
     width: 'full',
-    px: '4',
+    px: '3',
     py: '2',
     rounded: 'md',
     color: { base: 'neutral.600', _dark: 'neutral.300' },
@@ -25,3 +25,5 @@ export const inputRecipe = cva({
 export const Input = panda('input', inputRecipe)
 
 export const Textarea = panda('textarea', inputRecipe)
+
+export const Select = panda('select', inputRecipe)

package/src/components/layer-styles.tsx

@@ -1,11 +1,12 @@
+import * as React from 'react'
 import { panda } from '../../styled-system/jsx'
-import context from '../lib/panda.context'
+import * as context from '../lib/panda-context'
 import { EmptyState } from './empty-state'
 import { LayerStylesIcon } from './icons'
 import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
 
-export function LayerStyles() {
+export default function LayerStyles() {
   const values = Object.entries(context.layerStyles)
 
   return (
@@ -29,7 +30,7 @@ export function LayerStyles() {
           ))
         ) : (
           <EmptyState title="No Layer Styles" icon={<LayerStylesIcon />}>
-            The config does not contain any Layer Styles
+            The panda config does not contain any layer styles
           </EmptyState>
         )}
       </TokenContent>