@pandacss/studio 0.0.0-dev-20230614111156 → 0.0.0-dev-20230614113002

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230614111156",
+  "version": "0.0.0-dev-20230614113002",
   "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.0.0-dev-20230614111156",
-    "@pandacss/config": "0.0.0-dev-20230614111156",
-    "@pandacss/shared": "0.0.0-dev-20230614111156",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230614111156",
-    "@pandacss/logger": "0.0.0-dev-20230614111156",
-    "@pandacss/node": "0.0.0-dev-20230614111156"
+    "@pandacss/types": "0.0.0-dev-20230614113002",
+    "@pandacss/config": "0.0.0-dev-20230614113002",
+    "@pandacss/shared": "0.0.0-dev-20230614113002",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230614113002",
+    "@pandacss/logger": "0.0.0-dev-20230614113002",
+    "@pandacss/node": "0.0.0-dev-20230614113002"
   },
   "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.0.0-dev-20230614111156"
+    "@pandacss/dev": "0.0.0-dev-20230614113002"
   },
   "scripts": {
     "codegen": "panda",

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

@@ -1,4 +1,4 @@
-import { Grid, panda, Wrap } from '../../../styled-system/jsx'
+import { Grid, panda, Stack, Wrap } from '../../../styled-system/jsx'
 import { gridItem, styledLink } from '../../../styled-system/patterns'
 import { getReportItem, getUtilityLink } from '../../lib/get-report-item'
 import { groupBy } from '../../lib/group-in'
@@ -121,11 +121,11 @@ const CategoryUtilities = ({
     })
 
   return (
-    <panda.div key={category} p="4" bg="gray.50" className={className}>
+    <Stack key={category} p="4" bg="card" color="text" gap="2" className={className}>
       <panda.h4>
         <panda.a className={styledLink({})} href={getUtilityLink({ category })}>
           <TextWithCount count={values.length}>
-            <TruncatedText text={category} />
+            <TruncatedText text={category} fontWeight="semibold" />
           </TextWithCount>
         </panda.a>
       </panda.h4>
@@ -141,6 +141,6 @@ const CategoryUtilities = ({
           )
         })}
       </Wrap>
-    </panda.div>
+    </Stack>
   )
 }

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

@@ -39,7 +39,7 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
   }, [allOptions])
 
   return (
-    <Combobox openOnClick {...props}>
+    <Combobox openOnClick {...props} className={css({ m: 4 })}>
       {(state: any) => {
         return (
           <>
@@ -50,11 +50,16 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
                     <panda.span fontWeight="bold">{label}</panda.span>
                   </ComboboxLabel>
                 )}
-                <panda.div display="flex" border="1px solid token(colors.blue.400, blue)">
+                <panda.div
+                  display="flex"
+                  _focus={{
+                    border: '1px solid token(colors.blue.400, blue)',
+                  }}
+                >
                   <ComboboxInput
                     defaultValue={props.defaultValue}
                     placeholder={props.placeholder ?? 'Search...'}
-                    className={css({ width: 'full' })}
+                    className={css({ width: 'full', p: 2 })}
                     onChange={(e) => {
                       const value = e.target.value
                       if (!value) {
@@ -95,9 +100,10 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
                     maxHeight: '300px',
                     overflow: 'auto',
                     padding: '4px 8px',
-                    bg: 'white',
+                    bg: 'card',
                     listStyle: 'none',
-                    border: '1px solid token(colors.blue.400, blue)',
+                    rounded: 'md',
+                    border: '1px solid token(colors.border)',
                   })}
                 >
                   {/* TODO virtualization */}
@@ -109,7 +115,7 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
                       className={css({
                         padding: '4px 8px',
                         _highlighted: {
-                          outline: '1px solid token(colors.blue.400, blue)',
+                          bg: 'border',
                         },
                       })}
                     />

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="white" border="1px solid rgba(0, 0, 0, 0.1)">
+          <panda.span p="2" bgColor="card" border="border">
             Click to open in editor
           </panda.span>
         }

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

@@ -1,7 +1,10 @@
 export const SortIcon = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path d="M15.344 17.778a.75.75 0 0 0-.75-.75h-5.16a.75.75 0 0 0 0 1.5h5.16a.75.75 0 0 0 .75-.75zm2.206-4a.75.75 0 0 0-.75-.75H7.204a.75.75 0 0 0 0 1.5H16.8a.75.75 0 0 0 .75-.75zm2.45-4a.75.75 0 0 0-.75-.75H4.75a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 .75-.75zm2-4a.75.75 0 0 0-.75-.75H2.75a.75.75 0 0 0 0 1.5h18.5a.75.75 0 0 0 .75-.75z" />
+      <path
+        d="M15.344 17.778a.75.75 0 0 0-.75-.75h-5.16a.75.75 0 0 0 0 1.5h5.16a.75.75 0 0 0 .75-.75zm2.206-4a.75.75 0 0 0-.75-.75H7.204a.75.75 0 0 0 0 1.5H16.8a.75.75 0 0 0 .75-.75zm2.45-4a.75.75 0 0 0-.75-.75H4.75a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 .75-.75zm2-4a.75.75 0 0 0-.75-.75H2.75a.75.75 0 0 0 0 1.5h18.5a.75.75 0 0 0 .75-.75z"
+        stroke="currentColor"
+      />
     </svg>
   )
 }

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

@@ -12,7 +12,7 @@ export const TruncatedText = ({
     return (
       <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 rgba(0, 0, 0, 0.1)">
             {truncate(text, 80)}
           </panda.span>
         }
@@ -22,5 +22,5 @@ export const TruncatedText = ({
     )
   }
 
-  return text as unknown as JSX.Element
+  return <panda.span {...props}>{text}</panda.span>
 }

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

@@ -223,7 +223,14 @@ const UsedInFiles = () => {
   )
 }
 
-const selectOptionClass = css({ padding: '4px 8px', bg: 'white' })
+const selectOptionClass = css({
+  padding: '4px 8px',
+  rounded: 'md',
+  '& li': {
+    cursor: 'pointer',
+    _hover: { opacity: 0.8 },
+  },
+})
 
 const ReportItemMatchingFiltersTable = (infos: Infos) => {
   const tokenName = infos.params.value
@@ -252,7 +259,7 @@ const ReportItemMatchingFiltersTable = (infos: Infos) => {
                   Found ({infos[value].length}) matches{' '}
                 </panda.span>
               }
-              bg="gray.50"
+              bg="card"
             >
               <DataTable list={infos[value]} columns={columns} />
               <>

package/src/components/token-analyzer.tsx

@@ -152,7 +152,11 @@ const HeadlineSummary = () => {
 
 const selectOptionClass = css({
   padding: '4px 8px',
-  bg: 'white',
+  rounded: 'md',
+  '& li': {
+    cursor: 'pointer',
+    _hover: { opacity: 0.8 },
+  },
 })
 
 const MostUsedList = () => {
@@ -169,7 +173,7 @@ const MostUsedList = () => {
                 </SelectTrigger>
               </>
             }
-            bg="gray.50"
+            bg="card"
           >
             {mostUsedByName[selectedOption?.value as keyof typeof mostUsedByName]}
             <>
@@ -231,7 +235,7 @@ const ColorPalette = () => {
   return (
     <Section
       title={<TextWithCount count={analysisData.stats.mostUseds.colors.length}>Color palette</TextWithCount>}
-      bg="gray.50"
+      bg="card"
     >
       <Wrap gap="2" fontSize="sm">
         {analysisData.stats.mostUseds.colors.map(({ key, count }) => (
@@ -241,7 +245,8 @@ const ColorPalette = () => {
             py="2"
             px="4"
             transition="all 0.2s ease"
-            _hover={{ bgColor: 'gray.100' }}
+            rounded="md"
+            _hover={{ bgColor: 'border' }}
           >
             <TextWithCount count={count}>
               <TruncatedText text={key} />
@@ -281,14 +286,14 @@ const FilesAccordionList = () => {
                 <SelectTrigger>
                   <panda.button display="flex" alignItems="center">
                     Sort by {selectedOption?.label}
-                    <panda.div w="26px" ml="2">
+                    <panda.div w="26px" ml="2" color="text">
                       <SortIcon />
                     </panda.div>
                   </panda.button>
                 </SelectTrigger>
                 <Portal>
                   <SelectPositioner>
-                    <SelectContent className={cx(selectOptionClass, css({ listStyle: 'none' }))}>
+                    <SelectContent className={cx(selectOptionClass, css({ listStyle: 'none', bg: 'card' }))}>
                       <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" />
@@ -301,7 +306,7 @@ const FilesAccordionList = () => {
         </panda.div>
       }
     >
-      <Accordion className={stack({ gap: '2', px: '2', fontSize: 'sm', width: 'full', debug: false })} multiple>
+      <Accordion className={stack({ gap: '2', px: '2', fontSize: 'sm', width: 'full' })} multiple>
         {sorted.map(([filepath, reportItemIdList]) => {
           const values = reportItemIdList.map(getReportItem)
           const localMaps =
@@ -314,17 +319,17 @@ const FilesAccordionList = () => {
               key={filepath}
               value={filepath}
               className={css({
-                p: '4',
                 width: 'full',
                 rounded: 'md',
-                _hover: { bgColor: 'gray.50' },
+                bg: 'card',
+                _hover: { opacity: '0.8' },
                 cursor: 'pointer',
               })}
             >
               {(props) => (
                 <>
-                  <AccordionTrigger>
-                    <panda.button display="flex" bg="none" w="full" p="2" cursor="pointer">
+                  <AccordionTrigger asChild>
+                    <panda.button display="flex" bg="none" w="full" pt="6" pl="6" pr="4" cursor="pointer">
                       <panda.a
                         className={styledLink({})}
                         href={getFileLink({ filepath })}
@@ -342,7 +347,7 @@ const FilesAccordionList = () => {
                       <panda.span ml="2">{props.isOpen ? '▲' : '▼'}</panda.span>
                     </panda.button>
                   </AccordionTrigger>
-                  <AccordionContent className={css({ p: '2' })}>
+                  <AccordionContent className={css({ p: '6', cursor: 'default' })}>
                     <panda.div>
                       <panda.h5>Utilities</panda.h5>
                       <Wrap gap="2" mt="4">

package/styled-system/chunks/src__components__analyzer__category-utilities.css

@@ -7,6 +7,178 @@
     background: var(--colors-white);
   }
 
+  .bg_gray\.50 {
+    background: var(--colors-gray-50);
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
   .list-style_none {
     list-style: none;
   }
@@ -27,12 +199,8 @@
     margin-left: var(--spacing-2);
   }
 
-  .p_4 {
-    padding: var(--spacing-4);
-  }
-
-  .bg_gray\.50 {
-    background: var(--colors-gray-50);
+  .font_semibold {
+    font-weight: var(--font-weights-semibold);
   }
 
   .d_grid {
@@ -51,6 +219,22 @@
     grid-column: span 2;
   }
 
+  .flex_column {
+    flex-direction: column;
+  }
+
+  .p_4 {
+    padding: var(--spacing-4);
+  }
+
+  .bg_card {
+    background: var(--colors-card);
+  }
+
+  .text_text {
+    color: var(--colors-text);
+  }
+
   .d_inline-flex {
     display: inline-flex;
   }