@pandacss/studio 0.3.0 → 0.3.2

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Segun Adebayo
+Copyright (c) 2023 Segun Adebayo
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -32,19 +32,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.3.9",
-    "@pandacss/types": "0.3.0",
-    "@pandacss/config": "0.3.0",
-    "@pandacss/shared": "0.3.0",
-    "@pandacss/token-dictionary": "0.3.0",
-    "@pandacss/logger": "0.3.0",
-    "@pandacss/node": "0.3.0"
+    "@pandacss/types": "0.3.2",
+    "@pandacss/config": "0.3.2",
+    "@pandacss/shared": "0.3.2",
+    "@pandacss/token-dictionary": "0.3.2",
+    "@pandacss/logger": "0.3.2",
+    "@pandacss/node": "0.3.2"
   },
   "devDependencies": {
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
     "@vitejs/plugin-react": "4.0.0",
     "execa": "7.1.1",
-    "@pandacss/dev": "0.3.0"
+    "@pandacss/dev": "0.3.2"
   },
   "scripts": {
     "codegen": "panda",

package/src/components/analyzer/category-utilities.tsx

@@ -12,7 +12,15 @@ import { css, cx } from '../../../styled-system/css'
 import { ReportItemLink } from './report-item-link'
 import { SortIcon } from './sort-icon'
 
-const selectOptionClass = css({ padding: '4px 8px', bg: 'white' })
+const selectOptionClass = css({
+  padding: '4px 8px',
+  bg: 'card',
+  rounded: 'md',
+  '& li': {
+    cursor: 'pointer',
+    _hover: { opacity: 0.8 },
+  },
+})
 
 type SortBy = 'property name' | 'tokens count'
 const defaultOption = { label: 'tokens count', value: 'tokens count' as SortBy }
@@ -40,9 +48,9 @@ export const ByCategory = ({ byCategory }: { byCategory: Record<string, number[]
             {({ selectedOption }) => (
               <>
                 <SelectTrigger>
-                  <panda.button display="flex" alignItems="center">
+                  <panda.button display="flex" alignItems="center" cursor="pointer" _hover={{ opacity: 0.6 }}>
                     Sort by {selectedOption?.label}
-                    <panda.div w="26px" ml="2">
+                    <panda.div w="26px" ml="2" color="text">
                       <SortIcon />
                     </panda.div>
                   </panda.button>
@@ -121,7 +129,7 @@ const CategoryUtilities = ({
     })
 
   return (
-    <Stack key={category} p="4" bg="card" color="text" gap="2" className={className}>
+    <Stack key={category} p="4" bg="card" color="text" rounded="md" gap="2" className={className}>
       <panda.h4>
         <panda.a className={styledLink({})} href={getUtilityLink({ category })}>
           <TextWithCount count={values.length}>

package/src/components/analyzer/data-combobox.tsx

@@ -11,7 +11,9 @@ import {
 } from '@ark-ui/react'
 import { useEffect, useState } from 'react'
 import { css } from '../../../styled-system/css'
-import { panda } from '../../../styled-system/jsx'
+import { Flex, panda } from '../../../styled-system/jsx'
+import { ChevronDownIcon, XMarkIcon } from '../icons'
+import { inputRecipe } from '../input'
 
 export type DataComboboxOption = {
   value: string
@@ -44,22 +46,17 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
         return (
           <>
             <ComboboxControl>
-              <panda.div display="flex" flexDirection="column">
+              <panda.div display="flex" flexDirection="column" gap="2">
                 {label && (
                   <ComboboxLabel>
                     <panda.span fontWeight="bold">{label}</panda.span>
                   </ComboboxLabel>
                 )}
-                <panda.div
-                  display="flex"
-                  _focus={{
-                    border: '1px solid token(colors.blue.400, blue)',
-                  }}
-                >
+                <panda.div display="flex" position="relative" isolation="isolate">
                   <ComboboxInput
                     defaultValue={props.defaultValue}
                     placeholder={props.placeholder ?? 'Search...'}
-                    className={css({ width: 'full', p: 2 })}
+                    className={inputRecipe()}
                     onChange={(e) => {
                       const value = e.target.value
                       if (!value) {
@@ -72,24 +69,47 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
                       setOptions(filterFn(value))
                     }}
                   />
-                  {state.selectedValue && (
-                    <panda.span
-                      px="2"
-                      mr="-2"
-                      cursor="pointer"
-                      userSelect="none"
-                      fontSize="lg"
-                      fontWeight="bold"
-                      onClick={() => state.clearValue()}
-                    >
-                      X
-                    </panda.span>
-                  )}
-                  <ComboboxTrigger>
-                    <panda.span ml="auto" px="2" cursor="pointer">
-                      {state.isOpen ? '▲' : '▼'}
-                    </panda.span>
-                  </ComboboxTrigger>
+                  <Flex
+                    top="0px"
+                    right="0px"
+                    align="center"
+                    justify="center"
+                    position="absolute"
+                    zIndex="2"
+                    height="full"
+                  >
+                    {state.selectedValue && (
+                      <panda.span
+                        display="flex"
+                        px="2"
+                        cursor="pointer"
+                        userSelect="none"
+                        onClick={() => state.clearValue()}
+                        alignItems="center"
+                      >
+                        <XMarkIcon />
+                      </panda.span>
+                    )}
+                    <ComboboxTrigger>
+                      <panda.span
+                        ml="auto"
+                        p="2"
+                        display="flex"
+                        cursor="pointer"
+                        borderLeft="solid 1px"
+                        borderColor="border"
+                        color="text"
+                      >
+                        <panda.span
+                          data-expanded={state.isOpen ? '' : undefined}
+                          transform={{ _expanded: 'rotate(180deg)' }}
+                          transition="all .2s ease"
+                        >
+                          <ChevronDownIcon />
+                        </panda.span>
+                      </panda.span>
+                    </ComboboxTrigger>
+                  </Flex>
                 </panda.div>
               </panda.div>
             </ComboboxControl>
@@ -104,6 +124,7 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
                     listStyle: 'none',
                     rounded: 'md',
                     border: '1px solid token(colors.border)',
+                    shadow: 'sm',
                   })}
                 >
                   {/* TODO virtualization */}
@@ -114,6 +135,8 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
                       label={option.label}
                       className={css({
                         padding: '4px 8px',
+                        rounded: 'md',
+                        wordWrap: 'break-word',
                         _highlighted: {
                           bg: 'border',
                         },

package/src/components/analyzer/data-table.tsx

@@ -9,8 +9,7 @@ export function DataTable<T>({ list, columns }: { list: T[]; columns: ReadonlyAr
   return (
     <panda.div>
       <Grid
-        style={{ gridTemplateColumns: `80px repeat(auto-fit, minmax(30px, 1fr))` }}
-        // gridTemplateColumns="repeat(auto-fit, minmax(30px, 1fr))"
+        gridTemplateColumns="80px repeat(auto-fit, minmax(30px, 1fr))"
         w="full"
         fontWeight="bold"
         fontSize="lg"
@@ -23,15 +22,12 @@ export function DataTable<T>({ list, columns }: { list: T[]; columns: ReadonlyAr
       <panda.div className={flex({ direction: 'column', gap: '2' })}>
         {list.map((item, index) => {
           return (
-            <Grid
-              style={{ gridTemplateColumns: `80px repeat(auto-fit, minmax(30px, 1fr))` }}
-              // gridTemplateColumns="repeat(auto-fit, minmax(30px, 1fr))"
-              w="full"
-              key={index}
-            >
+            <Grid gridTemplateColumns="80px repeat(auto-fit, minmax(30px, 1fr))" w="full" key={index}>
               {columns.map((column) => {
                 return (
-                  <panda.div key={column.accessor}>{column.cell?.(item) ?? (item as any)[column.accessor]}</panda.div>
+                  <panda.div key={column.accessor} wordBreak="break-word">
+                    {column.cell?.(item) ?? (item as any)[column.accessor]}
+                  </panda.div>
                 )
               })}
             </Grid>

package/src/components/analyzer/external-icon.tsx

@@ -1,7 +1,7 @@
 /** @see https://iconmonstr.com/share-11-svg/ */
 export const ExternalIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100%" viewBox="0 0 24 24">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
       <path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" />
     </svg>
   )

package/src/components/analyzer/report-item-columns.tsx

@@ -29,7 +29,7 @@ export const reportItemColumns = [
           {!item.isKnown && (
             <QuickTooltip
               tooltip={
-                <panda.span p="2" bgColor="white" border="1px solid rgba(0, 0, 0, 0.1)">
+                <panda.span p="2" bgColor="card" border="1px solid token(colors.border)" shadow="sm" rounded="md">
                   unknown token
                 </panda.span>
               }

package/src/components/analyzer/report-item-link.tsx

@@ -78,7 +78,7 @@ export const ReportItemOpenInEditorLink = ({ withRange, ...reportItem }: ReportI
       </panda.a>
       <QuickTooltip
         tooltip={
-          <panda.span p="2" bgColor="card" border="border">
+          <panda.span p="2" bgColor="card" border="1px solid token(colors.border)" shadow="sm" rounded="md">
             Click to open in editor
           </panda.span>
         }

package/src/components/analyzer/truncated-text.tsx

@@ -17,7 +17,9 @@ export const TruncatedText = ({
           </panda.span>
         }
       >
-        <panda.span {...props}>{text.substring(0, characters) + '...'}</panda.span>
+        <panda.span color="text" {...props}>
+          {text.substring(0, characters) + '...'}
+        </panda.span>
       </QuickTooltip>
     )
   }

package/src/components/analyzer/utility-details.tsx

@@ -10,7 +10,7 @@ import {
 import { useState } from 'react'
 
 import { css, cx } from '../../../styled-system/css'
-import { Wrap, panda } from '../../../styled-system/jsx'
+import { Flex, Wrap, panda } from '../../../styled-system/jsx'
 import { styledLink } from '../../../styled-system/patterns'
 
 import { analysisData } from '../../lib/analysis-data'
@@ -23,6 +23,7 @@ import { getReportInfosFrom } from './get-report-infos-from'
 import { reportItemColumns } from './report-item-columns'
 import { Section } from './section'
 import { TextWithCount } from './text-with-count'
+import { XMarkIcon } from '../icons'
 
 export const UtilityDetails = () => {
   const search = new URLSearchParams(window.location.search)
@@ -110,7 +111,34 @@ const UtilityFilters = () => {
 
   return (
     <panda.div mb="4">
-      <panda.h3>Filters</panda.h3>
+      <Flex>
+        <panda.h3>Filters</panda.h3>
+        {infos.hasParam && (
+          <panda.button
+            ml="auto"
+            cursor="pointer"
+            userSelect="none"
+            bg="card"
+            px="3"
+            py="2"
+            rounded="md"
+            _hover={{ opacity: 0.8 }}
+            onClick={() => {
+              updateSearchParam('value', undefined)
+              updateSearchParam('category', undefined)
+              updateSearchParam('propName', undefined)
+              updateSearchParam('from', undefined)
+              updateSearchParam('filepath', undefined)
+              setParams({})
+              setResetKey((k) => k + 1)
+            }}
+          >
+            <panda.span display="flex" gap="2" alignItems="center">
+              <XMarkIcon width="16" height="16" /> Clear filters
+            </panda.span>
+          </panda.button>
+        )}
+      </Flex>
       <Wrap key={resetKey}>
         <DataCombobox
           label="Token name"
@@ -157,28 +185,6 @@ const UtilityFilters = () => {
           }}
           defaultValue={String(infos.params.filepath ?? '')}
         />
-        {infos.hasParam && (
-          <panda.span
-            display="block"
-            alignSelf="flex-end"
-            mt="2"
-            cursor="pointer"
-            userSelect="none"
-            fontSize="lg"
-            fontWeight="bold"
-            onClick={() => {
-              updateSearchParam('value', undefined)
-              updateSearchParam('category', undefined)
-              updateSearchParam('propName', undefined)
-              updateSearchParam('from', undefined)
-              updateSearchParam('filepath', undefined)
-              setParams({})
-              setResetKey((k) => k + 1)
-            }}
-          >
-            [X] Clear filters
-          </panda.span>
-        )}
       </Wrap>
     </panda.div>
   )
@@ -249,7 +255,7 @@ const ReportItemMatchingFiltersTable = (infos: Infos) => {
               title={
                 <>
                   <SelectLabel>By </SelectLabel>
-                  <SelectTrigger>
+                  <SelectTrigger asChild>
                     <button>{selectedOption?.label}</button>
                   </SelectTrigger>
                 </>

package/src/components/color-item.tsx

@@ -28,7 +28,7 @@ export const ColorItem = ({
       {children}
 
       {tokenName !== value && (
-        <panda.div opacity={0.1}>
+        <panda.div opacity={0.7}>
           <panda.span>{value}</panda.span>
         </panda.div>
       )}

package/src/components/colors.tsx

@@ -8,6 +8,10 @@ import { SemanticColorDisplay } from './semantic-color'
 
 const UNCATEGORIZED_ID = 'uncategorized' as const
 
+function getColorFromReference(reference: string) {
+  return reference.match(/{colors\.(.*?)}/)?.[1]
+}
+
 export function Colors() {
   const { filterQuery, setFilterQuery, semanticTokens, hasResults, uncategorizedColors, categorizedColors } =
     useColorDocs()
@@ -17,14 +21,19 @@ export function Colors() {
       return (
         <Stack gap="1" 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])}
             />
-            <SemanticColorDisplay value={colors.base.value} condition="base" />
           </HStack>
 
-          <panda.span fontWeight="medium">{name}</panda.span>
+          <panda.span fontWeight="semibold">{name}</panda.span>
         </Stack>
       )
     })
@@ -83,7 +92,7 @@ export function Colors() {
               <panda.span fontWeight="medium" textTransform="capitalize" fontSize="xl">
                 Semantic tokens
               </panda.span>
-              <Grid gap="4" minChildWidth="13rem" my="5" mx="0">
+              <Grid gap="4" minChildWidth="30rem" my="5" mx="0">
                 {renderSemanticTokens()}
               </Grid>
             </div>

package/src/components/icons.tsx

@@ -205,3 +205,52 @@ export function ColorContrastIcon() {
     </svg>
   )
 }
+
+export function ChevronUpIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      width="12"
+      height="12"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+    </svg>
+  )
+}
+
+export function ChevronDownIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      width="12"
+      height="12"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+    </svg>
+  )
+}
+
+export function XMarkIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      width="12"
+      height="12"
+      {...props}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  )
+}

package/src/components/input.tsx

@@ -1,7 +1,7 @@
 import { cva } from '../../styled-system/css'
 import { panda } from '../../styled-system/jsx'
 
-const recipe = cva({
+export const inputRecipe = cva({
   base: {
     bg: 'transparent',
     width: 'full',
@@ -22,6 +22,6 @@ const recipe = cva({
   variants: {},
 })
 
-export const Input = panda('input', recipe)
+export const Input = panda('input', inputRecipe)
 
-export const Textarea = panda('textarea', recipe)
+export const Textarea = panda('textarea', inputRecipe)

package/src/components/semantic-color.tsx

@@ -1,27 +1,33 @@
-import { panda } from '../../styled-system/jsx'
+import { Flex, panda } from '../../styled-system/jsx'
 import { ColorWrapper } from './color-wrapper'
 
 // remove initial underscore
 const cleanCondition = (condition: string) => condition.replace(/^_/, '')
 
-export function SemanticColorDisplay(props: { value: string; condition: string }) {
-  const { value, condition } = props
+export function SemanticColorDisplay(props: { value: string; condition: string; token?: string }) {
+  const { value, condition, token } = props
   return (
-    <ColorWrapper height="12" style={{ background: value }}>
-      <panda.span
-        fontWeight="medium"
-        fontSize="sm"
-        minW="5"
-        bg="neutral.800"
-        px="1"
-        py="1"
-        color="white"
-        roundedBottomRight="sm"
-        borderWidth="1px"
-        borderColor="neutral.700"
-      >
-        {cleanCondition(condition)}
-      </panda.span>
-    </ColorWrapper>
+    <Flex direction="column" w="full">
+      <ColorWrapper height="12" style={{ background: value }}>
+        <panda.span
+          fontWeight="medium"
+          fontSize="sm"
+          minW="5"
+          bg="neutral.800"
+          px="1"
+          py="1"
+          color="white"
+          roundedBottomRight="sm"
+          borderWidth="1px"
+          borderColor="neutral.700"
+        >
+          {cleanCondition(condition)}
+        </panda.span>
+      </ColorWrapper>
+      {token && <panda.div fontWeight="medium">{token}</panda.div>}
+      <panda.div opacity="0.7" fontSize="sm" textTransform="uppercase">
+        {value}
+      </panda.div>
+    </Flex>
   )
 }

package/src/components/token-analyzer.tsx

@@ -152,6 +152,7 @@ const HeadlineSummary = () => {
 
 const selectOptionClass = css({
   padding: '4px 8px',
+  bg: 'card',
   rounded: 'md',
   '& li': {
     cursor: 'pointer',
@@ -284,16 +285,16 @@ const FilesAccordionList = () => {
             {({ selectedOption }) => (
               <>
                 <SelectTrigger>
-                  <panda.button display="flex" alignItems="center">
+                  <panda.button display="flex" alignItems="center" cursor="pointer" _hover={{ opacity: 0.6 }}>
                     Sort by {selectedOption?.label}
-                    <panda.div w="26px" ml="2" color="text">
+                    <panda.div w="5" ml="2" color="text">
                       <SortIcon />
                     </panda.div>
                   </panda.button>
                 </SelectTrigger>
                 <Portal>
                   <SelectPositioner>
-                    <SelectContent className={cx(selectOptionClass, css({ listStyle: 'none', bg: 'card' }))}>
+                    <SelectContent className={cx(selectOptionClass, css({ listStyle: 'none' }))}>
                       <SelectOption className={selectOptionClass} value="name" label="name" />
                       <SelectOption className={selectOptionClass} value="tokens count" label="tokens count" />
                       <SelectOption className={selectOptionClass} value="file path" label="file path" />
@@ -329,7 +330,7 @@ const FilesAccordionList = () => {
               {(props) => (
                 <>
                   <AccordionTrigger asChild>
-                    <panda.button display="flex" bg="none" w="full" pt="6" pl="6" pr="4" cursor="pointer">
+                    <panda.button display="flex" bg="none" w="full" pt="6" pl="6" pr="4" cursor="pointer" color="text">
                       <panda.a
                         className={styledLink({})}
                         href={getFileLink({ filepath })}
@@ -374,7 +375,8 @@ const FilesAccordionList = () => {
                                 py="2"
                                 px="4"
                                 transition="all 0.2s ease"
-                                _hover={{ bg: 'gray.100' }}
+                                _hover={{ bg: 'border' }}
+                                rounded="md"
                               >
                                 <TruncatedText text={key} />
                               </ColorItem>

package/src/layouts/Layout.astro

@@ -10,7 +10,7 @@ import context from '../lib/panda.context'
     <Head />
     <Fragment set:html={context.inject.head} />
     <meta name="generator" content={Astro.generator} />
-    <title>Panda Playground</title>
+    <title>Panda Studio</title>
   </head>
   <body>
     <Fragment set:html={context.inject.body} />

package/src/layouts/Sidebar.astro

@@ -24,8 +24,8 @@ const { title } = Astro.props
     <SideNav />
   </Stack>
 
-  <Container width="full">
-    <panda.div overflow="auto" px="4" pt="14" pb="8">
+  <Container width="full" overflow="auto">
+    <panda.div px="4" pt="14" pb="8">
       <panda.h1 fontSize="3xl" fontWeight="semibold" mb="8" letterSpacing="tight">
         {title}
       </panda.h1>