@pandacss/studio 0.37.0 → 0.37.2

package/astro.config.mjs

@@ -1,9 +1,8 @@
-import react from '@astrojs/react'
 import studio from '@pandacss/astro-plugin-studio'
 import { defineConfig } from 'astro/config'
 
 // https://astro.build/config
 export default defineConfig({
   devToolbar: { enabled: true },
-  integrations: [react(), studio()],
+  integrations: [studio()],
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.37.0",
+  "version": "0.37.2",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -47,13 +47,13 @@
     "astro": "4.4.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "vite": "5.1.3",
-    "@pandacss/config": "0.37.0",
-    "@pandacss/logger": "0.37.0",
-    "@pandacss/shared": "0.37.0",
-    "@pandacss/token-dictionary": "0.37.0",
-    "@pandacss/types": "0.37.0",
-    "@pandacss/astro-plugin-studio": "0.37.0"
+    "vite": "5.1.7",
+    "@pandacss/config": "0.37.2",
+    "@pandacss/logger": "0.37.2",
+    "@pandacss/shared": "0.37.2",
+    "@pandacss/token-dictionary": "0.37.2",
+    "@pandacss/types": "0.37.2",
+    "@pandacss/astro-plugin-studio": "0.37.2"
   },
   "devDependencies": {
     "@types/react": "18.2.55",

package/src/components/colors.tsx

@@ -27,12 +27,12 @@ export default function Colors() {
             <SemanticColorDisplay
               value={colors.base.value}
               condition="base"
-              token={getColorFromReference(colors.extensions.conditions.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])}
+              value={colors[colors.extensions.condition!].value}
+              condition={colors.extensions.condition!}
+              token={getColorFromReference(colors.extensions.conditions![colors.extensions.condition!])}
             />
           </HStack>
 

package/src/components/font-family.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { Flex, HStack, Square, Stack, panda } from '../../styled-system/jsx'
 import * as context from '../lib/panda-context'
+import { EmptyState } from './empty-state'
+import { TypographyIcon } from './icons'
 
 const fonts = context.getTokens('fonts')
 
@@ -9,6 +11,14 @@ const symbols = Array.from({ length: 10 }, (_, i) => String.fromCharCode(48 + i)
 const specials = ['@', '#', '$', '%', '&', '!', '?', '+', '-']
 
 export const FontFamily = () => {
+  if (fonts.length === 0) {
+    return (
+      <EmptyState title="No Tokens" icon={<TypographyIcon />}>
+        The panda config does not contain any font family
+      </EmptyState>
+    )
+  }
+
   return (
     <Stack gap="10">
       {fonts.map((font) => (

package/src/components/font-tokens.tsx

@@ -5,6 +5,8 @@ import { TokenContent } from '../components/token-content'
 import { TokenGroup } from '../components/token-group'
 import { Input, Textarea } from './input'
 import { StickyTop } from './sticky-top'
+import { EmptyState } from './empty-state'
+import { TypographyIcon, XMarkIcon } from './icons'
 
 interface FontTokensProps {
   text?: string
@@ -23,6 +25,14 @@ export default function FontTokens(props: FontTokensProps) {
     setText(event.target.value)
   }
 
+  if (fontTokens.length === 0) {
+    return (
+      <EmptyState title="No Tokens" icon={<TypographyIcon />}>
+        The panda config does not contain any `{token}` tokens
+      </EmptyState>
+    )
+  }
+
   return (
     <TokenGroup>
       <StickyTop>

package/src/components/overview.tsx

@@ -44,7 +44,7 @@ export default function Overview() {
         <Logo />
 
         <div className={vstack({ my: '10', textAlign: 'center' })}>
-          <Yums className={css({ fontSize: '24rem' })} />
+          <Yums className={css({ fontSize: '24rem', h: '300px' })} />
           <span className={css({ fontSize: '7xl', letterSpacing: 'tighter', fontWeight: 'medium' })}>Panda Studio</span>
           <p className={css({ fontSize: '2xl' })}>Live documentation for your design tokens (colors, fonts, etc.)</p>
         </div>

package/src/components/semantic-color.tsx

@@ -3,29 +3,13 @@ import { Flex, panda } from '../../styled-system/jsx'
 import { ColorWrapper } from './color-wrapper'
 import * as context from '../lib/panda-context'
 
-const getSemanticColorValue = (variable: string): string => {
-  const _name = variable?.match(/var\(\s*--(.*?)\s*\)/)
-  if (!_name) return variable
-
-  const name = _name[1].replaceAll('-', '.')
-  const token = context.tokens.getByName(name)
-
-  if (!token) {
-    const defaultToken = context.tokens.getByName(`${name}.default`)
-    return getSemanticColorValue(defaultToken?.value)
-  }
-
-  if (token.value.startsWith('var(--')) return getSemanticColorValue(token.value)
-  return token.value
-}
-
 // remove initial underscore
 const cleanCondition = (condition: string) => condition.replace(/^_/, '')
 
 export function SemanticColorDisplay(props: { value: string; condition: string; token?: string }) {
   const { value, condition } = props
 
-  const tokenValue = getSemanticColorValue(value)
+  const tokenValue = context.tokens.deepResolveReference(value)
 
   return (
     <Flex direction="column" w="full">

package/src/components/sizes.tsx

@@ -5,16 +5,19 @@ import { Grid, panda } from '../../styled-system/jsx'
 import { getSortedSizes } from '../lib/sizes-sort'
 import { TokenGroup } from './token-group'
 import type { Token } from '@pandacss/token-dictionary'
+import { EmptyState } from './empty-state'
+import { SizesIcon } from './icons'
 
 export interface SizesProps {
   sizes: Token[]
+  name: string
 }
 
 const contentRegex = /^(min|max|fit)-content$/
 const unitRegex = /(ch|%)$/
 
 export default function Sizes(props: SizesProps) {
-  const { sizes } = props
+  const { sizes, name } = props
 
   const sortedSizes = getSortedSizes(sizes).filter(
     (token) =>
@@ -27,6 +30,14 @@ export default function Sizes(props: SizesProps) {
       !unitRegex.test(token.value),
   )
 
+  if (sortedSizes.length === 0) {
+    return (
+      <EmptyState title="No Tokens" icon={<SizesIcon />}>
+        The panda config does not contain any `{name}`` tokens
+      </EmptyState>
+    )
+  }
+
   return (
     <TokenGroup>
       <Grid display="grid" columnGap="10" rowGap="2.5" columns={5}>

package/src/components/text-styles.tsx

@@ -5,6 +5,7 @@ import { EmptyState } from './empty-state'
 import { TextStylesIcon } from './icons'
 import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
+import type { Dict } from '../../styled-system/types'
 
 export default function TextStyles() {
   const textStyles = Object.entries(context.textStyles)
@@ -18,7 +19,7 @@ export default function TextStyles() {
               <panda.div borderColor="card">
                 <panda.span fontWeight="medium">{name}</panda.span>
               </panda.div>
-              <panda.div flex="auto" my="3" style={styles} truncate>
+              <panda.div flex="auto" my="3" style={removeEscapeHatchSyntax(styles)} truncate>
                 Panda textStyles are time saving
               </panda.div>
             </panda.div>
@@ -32,3 +33,15 @@ export default function TextStyles() {
     </TokenGroup>
   )
 }
+
+const removeEscapeHatchSyntax = (styles: Dict) => {
+  return Object.fromEntries(
+    Object.entries(styles).map(([key, value]) => {
+      if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') {
+        return [key, value.slice(1, -1)]
+      }
+
+      return [key, value]
+    }),
+  )
+}

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

@@ -1,4 +1,4 @@
-import type { Token } from '@pandacss/token-dictionary'
+import type { Token, TokenExtensions } from '@pandacss/token-dictionary'
 import { useState } from 'react'
 import * as context from './panda-context'
 
@@ -10,33 +10,36 @@ interface Color {
   path: string[]
 }
 
-type ColorToken = Token & Color
+type ColorToken = Token & Color & TokenExtensions
 
 const UNCATEGORIZED_ID = 'uncategorized' as const
 
-const groupByColorPalette = (colors: Token[], filterMethod?: (token: ColorToken) => boolean) => {
+const groupByColorPalette = (colors: ColorToken[], filterMethod?: (token: ColorToken) => boolean) => {
   const values = colors.filter((color) => !color.isConditional && !color.extensions.isVirtual)
 
-  return values.reduce<Record<string, any>>((acc, color) => {
-    if (!filterMethod?.(color)) return acc
+  return values.reduce(
+    (acc, color) => {
+      if (!filterMethod?.(color)) return acc
 
-    const colorPalette = color.extensions.colorPalette || UNCATEGORIZED_ID
+      const colorPalette = color.extensions.colorPalette || UNCATEGORIZED_ID
 
-    if (!(colorPalette in acc)) {
-      acc[colorPalette] = []
-    }
+      if (!(colorPalette in acc)) {
+        acc[colorPalette] = []
+      }
 
-    const exists = (acc[colorPalette] as any[]).find((tok) => tok.name === color.name)
-    if (!exists) acc[colorPalette].push(color)
+      const exists = (acc[colorPalette] as any[]).find((tok) => tok.name === color.name)
+      if (!exists) acc[colorPalette].push(color)
 
-    return acc
-  }, {})
+      return acc
+    },
+    {} as Record<string, ColorToken[]>,
+  )
 }
 
-const getSemanticTokens = (allTokens: ColorToken[], filterMethod?: (token: ColorToken) => boolean) => {
+const getSemanticTokens = (allTokens: Token[], filterMethod?: (token: ColorToken) => boolean) => {
   const semanticTokens = allTokens.filter(
     (token) => token.type === 'color' && token.isConditional && !token.extensions?.isVirtual,
-  )
+  ) as ColorToken[]
   return semanticTokens
     .reduce((acc, nxt) => {
       if (!filterMethod) {
@@ -50,7 +53,7 @@ const getSemanticTokens = (allTokens: ColorToken[], filterMethod?: (token: Color
       }
       return acc
     }, [] as ColorToken[])
-    .reduce<Record<string, any>>(
+    .reduce<Record<string, ColorToken>>(
       (acc, nxt) => ({
         ...acc,
         [nxt.extensions?.prop]: {
@@ -85,14 +88,17 @@ export const useColorDocs = () => {
       .some((prop) => prop.includes(filterQuery))
   }
 
-  const colorsInCategories = groupByColorPalette(colors, filterMethod)
+  const colorsInCategories = groupByColorPalette(colors as ColorToken[], filterMethod)
   const uncategorizedColors = colorsInCategories[UNCATEGORIZED_ID]
 
   const categorizedColors = Object.entries<any[]>(colorsInCategories).filter(
     ([category]) => category !== UNCATEGORIZED_ID,
   )
 
-  const semanticTokens = Object.entries<Record<string, any>>(getSemanticTokens(allTokens, filterMethod))
+  const semanticTokens = Object.entries<Record<string, any>>(getSemanticTokens(allTokens, filterMethod)) as [
+    string,
+    Record<string, ColorToken>,
+  ][]
   const hasResults =
     !!categorizedColors.length || !!uncategorizedColors?.length || !!Object.values(semanticTokens).length
 

package/src/pages/sizes.astro

@@ -1,5 +1,5 @@
 ---
-import Sizes  from '../components/sizes'
+import Sizes from '../components/sizes'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
 import * as context from '../lib/panda-context'
@@ -9,7 +9,6 @@ const tokens = context.getTokens('sizes')
 
 <Layout>
   <Sidebar title="Sizes">
-    <Sizes sizes={tokens} client:load />
+    <Sizes sizes={tokens} name="sizes" client:load />
   </Sidebar>
 </Layout>
-

package/src/pages/spacing.astro

@@ -1,5 +1,5 @@
 ---
-import Sizes  from '../components/sizes'
+import Sizes from '../components/sizes'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
 import * as context from '../lib/panda-context'
@@ -8,7 +8,7 @@ const tokens = context.getTokens('spacing')
 ---
 
 <Layout>
-    <Sidebar title="Spacing">
-        <Sizes sizes={tokens} client:load />
-    </Sidebar>
+  <Sidebar title="Spacing">
+    <Sizes sizes={tokens} name="spacing" client:load />
+  </Sidebar>
 </Layout>

package/styled-system/css/cva.mjs

@@ -11,9 +11,10 @@ const defaults = (conf) => ({
 
 export function cva(config) {
   const { base, variants, defaultVariants, compoundVariants } = defaults(config)
+  const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) })
 
   function resolve(props = {}) {
-    const computedVariants = { ...defaultVariants, ...compact(props) }
+    const computedVariants = getVariantProps(props)
     let variantCss = { ...base }
     for (const [key, value] of Object.entries(computedVariants)) {
       if (variants[key]?.[value]) {
@@ -57,6 +58,7 @@ export function cva(config) {
     config,
     merge,
     splitVariantProps,
+    getVariantProps
   })
 }
 

package/styled-system/css/sva.mjs

@@ -1,4 +1,4 @@
-import { getSlotRecipes, memo, splitProps } from '../helpers.mjs';
+import { compact, getSlotRecipes, memo, splitProps } from '../helpers.mjs';
 import { cva } from './cva.mjs';
 import { cx } from './cx.mjs';
 
@@ -6,6 +6,7 @@ const slotClass = (className, slot) => className + '__' + slot
 
 export function sva(config) {
   const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+  const defaultVariants = config.defaultVariants ?? {}
 
   function svaFn(props) {
     const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))])
@@ -23,6 +24,7 @@ export function sva(config) {
   function splitVariantProps(props) {
     return splitProps(props, variantKeys);
   }
+  const getVariantProps = (variants) => ({ ...(defaultVariants || {}), ...compact(variants) })
 
   const variantMap = Object.fromEntries(
     Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
@@ -34,5 +36,6 @@ export function sva(config) {
     variantMap,
     variantKeys,
     splitVariantProps,
+    getVariantProps,
   })
 }

package/styled-system/helpers.mjs

@@ -229,7 +229,7 @@ var patternFns = {
   isCssUnit
 };
 var getPatternStyles = (pattern, styles) => {
-  if (!pattern.defaultValues)
+  if (!pattern?.defaultValues)
     return styles;
   const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;
   return Object.assign({}, defaults, compact(styles));

package/styled-system/styles.css

@@ -707,7 +707,6 @@
 }
 
 @layer utilities{
-
   .d_flex {
     display: flex;
 }
@@ -957,6 +956,10 @@
     margin-block: var(--spacing-10);
 }
 
+  .h_300px {
+    height: 300px;
+}
+
   .tracking_tighter {
     letter-spacing: var(--letter-spacings-tighter);
 }
@@ -1422,4 +1425,4 @@
       padding-inline: var(--spacing-8);
 }
 }
-}
+}

package/styled-system/types/prop-type.d.ts

@@ -208,7 +208,7 @@ type WithColorOpacityModifier<T> = T extends string ? `${T}/${string}` : T
 type ImportantMark = "!" | "!important"
 type WhitespaceImportant = ` ${ImportantMark}`
 type Important = ImportantMark | WhitespaceImportant
-type WithImportant<T> = T extends string ? `${T}${Important}${string}` : T
+type WithImportant<T> = T extends string ? `${T}${Important}` & { __important?: true } : T;
 
 /**
  * Only relevant when using `strictTokens` or `strictPropertyValues` in your config.
@@ -226,7 +226,7 @@ type WithImportant<T> = T extends string ? `${T}${Important}${string}` : T
  * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens
  * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
  */
-export type WithEscapeHatch<T> = T | `[${string}]` | (T extends string ? WithColorOpacityModifier<string> | WithImportant<T> : T)
+export type WithEscapeHatch<T> = T | `[${string}]` | WithColorOpacityModifier<T> | WithImportant<T>
 
 /**
  * Will restrict the value of properties that have predefined values to those values only.

package/styled-system/types/recipe.d.ts

@@ -46,6 +46,7 @@ export interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVa
   splitVariantProps<Props extends RecipeSelection<T>>(
     props: Props,
   ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
+  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
 }
 
 type OneOrMore<T> = T | Array<T>
@@ -122,7 +123,10 @@ export interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVaria
   raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>
   variantKeys: (keyof T)[]
   variantMap: RecipeVariantMap<T>
-  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]
+  splitVariantProps<Props extends RecipeSelection<T>>(
+    props: Props,
+  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
+  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
 }
 
 export type SlotRecipeCompoundVariant<S extends string, T> = T & {