@pandacss/studio 0.27.2 → 0.28.0

package/src/components/overview.tsx

@@ -1,65 +1,85 @@
-import { css } from '../../styled-system/css'
-import { panda, Wrap } from '../../styled-system/jsx'
-import { NavItem } from './nav-item'
+import * as React from 'react'
+import { css, cva } from '../../styled-system/css'
+import { flex, hstack, square, vstack } from '../../styled-system/patterns'
+import { Yums } from '../icons/yums'
+import { Logo } from '../icons/logo'
+import { Wrap } from '../../styled-system/jsx'
 import { navItems } from '../lib/constants'
-import { Logo } from './logo'
 
-export function Overview() {
+const buttonRecipe = cva({
+  base: {
+    display: 'inline-flex',
+    px: '6',
+    py: '3',
+    fontWeight: 'medium',
+    fontSize: '2xl',
+    rounded: 'sm',
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: 'yellow.300',
+        color: 'black',
+      },
+      outline: {
+        borderWidth: '1px',
+        color: 'yellow.300',
+      },
+    },
+  },
+})
+
+export default function Overview() {
   return (
-    <panda.div display="flex" flexDir="column">
-      <panda.span fontWeight="bold" fontSize="2xl" px="8" py="4" display="flex" gap="2">
+    <div
+      className={flex({
+        direction: 'column',
+        minH: 'dvh',
+        borderTopWidth: '8px',
+        borderTopColor: 'accent',
+      })}
+    >
+      <div className={vstack({ px: '8', py: '12dvh', mb: '10', flex: '1' })}>
         <Logo />
-      </panda.span>
-      <panda.div px="8" py="24" mb="10" background="card">
-        <panda.span display="block" fontSize="3xl" fontWeight="semibold" mb="6">
-          Design System
-        </panda.span>
-        <p>Build great products, faster.</p>
-        <panda.a
-          href="/colors"
-          className={css({
-            background: '#646cff',
-            color: 'white',
-            width: 'fit-content',
-            fontSize: 'small',
-            fontWeight: 'semibold',
-            px: '6',
-            py: '1',
-            borderRadius: 'sm',
-            marginTop: '6',
-            transition: 'all 0.2s ease',
-            display: 'block',
-            '&:hover': {
-              background: '#4049f0',
-              boxShadow: 'lg',
-            },
-          })}
-        >
-          Explore
-        </panda.a>
-      </panda.div>
-      <Wrap gap="6" p="8" my="2">
-        <div>
-          <panda.span display="block">TOKENS</panda.span>
-          <Wrap my="2" p="0" gap="6">
-            {navItems
-              .filter((k) => k.type === 'token')
-              .map((data, index) => (
-                <NavItem key={index} {...data} />
-              ))}
-          </Wrap>
+
+        <div className={vstack({ my: '10', textAlign: 'center' })}>
+          <Yums className={css({ fontSize: '24rem' })} />
+          <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>
-        <div>
-          <panda.span display="block">PLAYGROUND</panda.span>
-          <Wrap my="2" p="0" gap="6">
-            {navItems
-              .filter((k) => k.type === 'playground')
-              .map((data, index) => (
-                <NavItem key={index} {...data} />
-              ))}
-          </Wrap>
+
+        <div className={hstack({ gap: '6' })}>
+          <a href="/colors" className={buttonRecipe({ variant: 'solid' })}>
+            Get Started
+          </a>
+          <a href="https://panda-css.com?ref=studio" target="_blank" className={buttonRecipe({ variant: 'outline' })}>
+            View Docs
+          </a>
         </div>
-      </Wrap>
-    </panda.div>
+
+        <Wrap mt="20" p="0" gap="6" justify="center">
+          {navItems
+            .filter((k) => k.type === 'token')
+            .map((item, index) => (
+              <div key={index}>
+                <a
+                  title={item.label}
+                  href={`/${item.id}`}
+                  className={square({
+                    size: '20',
+                    fontSize: '2xl',
+                    fontWeight: 'medium',
+                    color: 'accent',
+                    borderWidth: '1px',
+                    borderColor: 'card',
+                  })}
+                >
+                  <item.icon />
+                </a>
+              </div>
+            ))}
+        </Wrap>
+      </div>
+    </div>
   )
 }

package/src/components/radii.tsx

@@ -1,12 +1,13 @@
+import * as React from 'react'
 import { toPx } from '@pandacss/shared'
 import { Grid, panda, Stack } from '../../styled-system/jsx'
-import context from '../lib/panda.context'
+import * as context from '../lib/panda-context'
 import { getSortedSizes } from '../lib/sizes-sort'
 import { TokenGroup } from './token-group'
 
-const radii = context.getCategory('radii')
+const radii = context.getTokens('radii')
 
-export function Radii() {
+export default function Radii() {
   return (
     <TokenGroup>
       {radii && (
@@ -14,14 +15,14 @@ export function Radii() {
           {getSortedSizes([...radii.values()])
             .sort((a, b) => parseFloat(toPx(a.value)!) - parseFloat(toPx(b.value)!))
             .map((size, index) => (
-              <Stack direction="column" align="center" key={index}>
+              <Stack direction="column" key={index}>
                 <panda.div
                   width="80px"
                   height="80px"
                   background="rgba(255, 192, 203, 0.5)"
                   style={{ borderRadius: size.value }}
                 />
-                <Stack gap="1" align="center">
+                <Stack gap="1">
                   <b>{size.extensions.prop}</b>
                   <panda.span opacity="0.7">{size.value}</panda.span>
                 </Stack>

package/src/components/semantic-color.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react'
 import { Flex, panda } from '../../styled-system/jsx'
 import { ColorWrapper } from './color-wrapper'
-import context from '../lib/panda.context'
+import * as context from '../lib/panda-context'
 
 const getSemanticColorValue = (variable: string): string => {
   const _name = variable.match(/var\(\s*--(.*?)\s*\)/)
@@ -22,7 +23,7 @@ const getSemanticColorValue = (variable: string): string => {
 const cleanCondition = (condition: string) => condition.replace(/^_/, '')
 
 export function SemanticColorDisplay(props: { value: string; condition: string; token?: string }) {
-  const { value, condition, token } = props
+  const { value, condition } = props
 
   const tokenValue = getSemanticColorValue(value)
 
@@ -44,10 +45,7 @@ export function SemanticColorDisplay(props: { value: string; condition: string;
           {cleanCondition(condition)}
         </panda.span>
       </ColorWrapper>
-      <panda.div fontWeight="medium" mt="2">
-        {token} &nbsp;
-      </panda.div>
-      <panda.div opacity="0.7" fontSize="sm" textTransform="uppercase">
+      <panda.div opacity="0.7" fontSize="sm">
         {value} {value !== tokenValue && `- ${tokenValue}`}
       </panda.div>
     </Flex>

package/src/components/side-nav-item.astro

@@ -18,7 +18,7 @@ const isActive = Astro.url.pathname.startsWith(href)
     fontSize="md"
     fontWeight="medium"
     aria-current={isActive ? 'page' : undefined}
-    color={{ _hover: 'yellow.300', _currentPage: 'yellow.300' }}
+    color={{ _hover: 'accent', _currentPage: 'accent' }}
   >
     <slot />
   </panda.a>

package/src/components/side-nav.astro

@@ -1,7 +1,7 @@
 ---
 import { navItems } from '../lib/constants'
 import { panda, Stack } from '../../styled-system/jsx'
-import NavItem from './side-nav-item.astro'
+import SideNavItem from './side-nav-item.astro'
 ---
 
 <panda.nav marginTop="8">
@@ -12,7 +12,7 @@ import NavItem from './side-nav-item.astro'
         {
           navItems
             .filter((item) => item.type === 'token')
-            .map((item) => <NavItem href={`/${item.id}`}>{item.label}</NavItem>)
+            .map((item) => <SideNavItem href={`/${item.id}`}>{item.label}</SideNavItem>)
         }
       </panda.ul>
     </div>
@@ -22,7 +22,7 @@ import NavItem from './side-nav-item.astro'
         {
           navItems
             .filter((item) => item.type === 'playground')
-            .map((item) => <NavItem href={`/${item.id}`}>{item.label}</NavItem>)
+            .map((item) => <SideNavItem href={`/${item.id}`}>{item.label}</SideNavItem>)
         }
       </panda.ul>
     </div>

package/src/components/sizes.tsx

@@ -1,21 +1,22 @@
+import * as React from 'react'
 import { toPx } from '@pandacss/shared'
 import { Fragment } from 'react'
 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'
 
 export interface SizesProps {
-  sizes: Map<string, any>
+  sizes: Token[]
 }
 
 const contentRegex = /^(min|max|fit)-content$/
 const unitRegex = /(ch|%)$/
 
-export function Sizes(props: SizesProps) {
-  const { sizes: tokens } = props
-  const values = Array.from(tokens.values())
+export default function Sizes(props: SizesProps) {
+  const { sizes } = props
 
-  const sizes = getSortedSizes(values).filter(
+  const sortedSizes = getSortedSizes(sizes).filter(
     (token) =>
       // remove negative values
       !token.extensions.isNegative &&
@@ -35,7 +36,7 @@ export function Sizes(props: SizesProps) {
           Pixels
         </panda.span>
         <panda.hr gridColumn="span 5 / span 5" />
-        {sizes
+        {sortedSizes
           .sort((a, b) => a.extensions.prop - b.extensions.prop)
           .map((size, index) => (
             <Fragment key={index}>

package/src/components/sticky-top.tsx

@@ -0,0 +1,10 @@
+import { panda } from '../../styled-system/jsx'
+
+export const StickyTop = panda('div', {
+  base: {
+    position: 'sticky',
+    top: '6',
+    zIndex: '1',
+    mb: '4',
+  },
+})

package/src/components/test-score.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { HStack } from '../../styled-system/jsx'
+import { ErrorIcon, SuccessIcon } from './icons'
+
+interface TestScore {
+  WCAG_AA: boolean
+  WCAG_AAA: boolean
+}
+
+interface TestScoreProps {
+  score: TestScore
+  size: 'regular' | 'large'
+}
+
+export function TestScore(props: TestScoreProps) {
+  const { score, size } = 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>
+    </>
+  )
+}

package/src/components/text-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 { TextStylesIcon } from './icons'
 import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
 
-export function TextStyles() {
+export default function TextStyles() {
   const textStyles = Object.entries(context.textStyles)
 
   return (

package/src/components/theme-toggle.astro

@@ -17,7 +17,7 @@ const buttonStyles = hstack({
 const iconStyles = css({
     cursor: 'pointer',
     '&.active': {
-        color: 'yellow.300',
+        color: 'accent',
     },
 })
 ---

package/src/components/token-content.tsx

@@ -1,5 +1,9 @@
-import { type HTMLPandaProps, panda } from '../../styled-system/jsx'
+import { panda } from '../../styled-system/jsx'
 
-export function TokenContent(props: HTMLPandaProps<'div'>) {
-  return <panda.div display="flex" flexDir="column" gap="12" {...props} />
-}
+export const TokenContent = panda('div', {
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12',
+  },
+})

package/src/components/token-group.tsx

@@ -1,6 +1,11 @@
-import type { HTMLPandaProps } from '../../styled-system/jsx'
 import { panda } from '../../styled-system/jsx'
 
-export function TokenGroup(props: HTMLPandaProps<'div'>) {
-  return <panda.div display="flex" flexDir="column" gap="3" width="full" marginTop="5" {...props} />
-}
+export const TokenGroup = panda('div', {
+  base: {
+    display: 'flex',
+    flexDir: 'column',
+    gap: '3',
+    width: 'full',
+    marginTop: '5',
+  },
+})

package/src/components/typography-playground.tsx

@@ -1,23 +1,24 @@
+import type { Token } from '@pandacss/token-dictionary'
+import * as React from 'react'
 import { useState } from 'react'
 import { Stack, panda } from '../../styled-system/jsx'
-import context from '../lib/panda.context'
+import * as context from '../lib/panda-context'
+import { Select } from './input'
 import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
-import type { Token } from '@pandacss/token-dictionary'
 
-const getFirstToken = <T extends Map<string, any>>(token?: T) =>
-  token ? Array.from(token.values())[0].extensions.prop : {}
 const tokens = Object.fromEntries<Map<string, Token> | undefined>(context.tokens.categoryMap)
 
 const defaultConfig = {
-  fontSize: getFirstToken(tokens.fontSizes),
-  letterSpacing: getFirstToken(tokens.letterSpacings),
-  fontWeight: getFirstToken(tokens.fontWeights),
-  lineHeight: getFirstToken(tokens.lineHeights),
+  fontSize: '',
+  letterSpacing: '',
+  fontWeight: '',
+  lineHeight: '',
 }
 
-export function TypographyPlayground() {
+export default function TypographyPlayground() {
   const [config, setConfig] = useState(defaultConfig)
+
   const configValues = Object.entries(config).reduce(
     (acc, [token, label]) => ({
       ...acc,
@@ -38,18 +39,18 @@ export function TypographyPlayground() {
     updateConfig(key, event.currentTarget.value)
   }
 
-  const renderTokenSwitch = (token: keyof typeof defaultConfig) => {
-    const _token = tokens[`${token}s`]
-    if (!_token) return
-    const values = Array.from(_token.values())
+  const renderTokenSwitch = (token: any) => {
+    const currentTokens = tokens[`${token}s`]
+    if (!currentTokens) return
+    const values = Array.from(currentTokens.values())
     return (
-      <panda.select background="card" value={config[token]} onChange={(e) => onChangeConfig(e, token)}>
+      <Select value={config[token]} onChange={(e) => onChangeConfig(e, token)}>
         {values.map((token) => (
           <option key={token.value} value={token.extensions.prop}>
             {`${token.extensions.prop} (${token.value})`}
           </option>
         ))}
-      </panda.select>
+      </Select>
     )
   }
 
@@ -67,7 +68,7 @@ export function TypographyPlayground() {
             width="fit-content"
             style={configValues}
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Write type-safe styles with ease using Panda CSS
           </panda.div>
 
           <Stack gap="4">

package/src/{components → icons}/logo.tsx

@@ -1,4 +1,9 @@
-export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
+import * as React from 'react'
+import { logo } from '../lib/panda-context'
+
+export function Logo(props: React.ComponentProps<'svg'>) {
+  if (logo) return <img src={logo} width="16" alt="logo" />
+
   return (
     <svg width="124" height="34" viewBox="0 0 124 34" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path

package/src/icons/moon.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import type { ComponentProps } from 'react'
 
 export const MoonIcon = (props: ComponentProps<'svg'>) => (

package/src/icons/sun.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import type { ComponentProps } from 'react'
 
 export const SunIcon = (props: ComponentProps<'svg'>) => (