@pandacss/studio 0.3.2 → 0.5.0

package/styled-system/chunks/src__components__colors.css

@@ -36,7 +36,7 @@
   }
 
   .top_0 {
-    top: 0;
+    top: var(--spacing-0);
   }
 
   .z_1 {
@@ -100,6 +100,6 @@
   }
 
   .mx_0 {
-    margin-inline: 0;
+    margin-inline: var(--spacing-0);
   }
 }

package/styled-system/chunks/src__components__font-tokens.css

@@ -8,7 +8,7 @@
   }
 
   .top_0 {
-    top: 0;
+    top: var(--spacing-0);
   }
 
   .z_1 {

package/styled-system/chunks/src__components__input.css

@@ -1,4 +1,66 @@
 @layer utilities {
+  .dark\:text_neutral\.300 {
+    &.dark,
+    .dark & {
+      color: var(--colors-neutral-300);
+    }
+  }
+
+  .focusWithin\:outline-style_solid {
+    &:focus-within {
+      outline-style: solid;
+    }
+  }
+
+  .focusWithin\:ring_2px {
+    &:focus-within {
+      outline-width: 2px;
+    }
+  }
+
+  .focusWithin\:ring_2px {
+    &:focus-within {
+      outline-offset: 2px;
+    }
+  }
+
+  .focusWithin\:ring_neutral\.400 {
+    &:focus-within {
+      outline-color: var(--colors-neutral-400);
+    }
+  }
+
+  .dark\:text_neutral\.300 {
+    &.dark,
+    .dark & {
+      color: var(--colors-neutral-300);
+    }
+  }
+
+  .focusWithin\:outline-style_solid {
+    &:focus-within {
+      outline-style: solid;
+    }
+  }
+
+  .focusWithin\:ring_2px {
+    &:focus-within {
+      outline-width: 2px;
+    }
+  }
+
+  .focusWithin\:ring_2px {
+    &:focus-within {
+      outline-offset: 2px;
+    }
+  }
+
+  .focusWithin\:ring_neutral\.400 {
+    &:focus-within {
+      outline-color: var(--colors-neutral-400);
+    }
+  }
+
   .bg_transparent {
     background: var(--colors-transparent);
   }

package/styled-system/chunks/src__components__layer-styles.css

@@ -12,6 +12,32 @@
     }
   }
 
+  .divide-y_1px {
+    & > :not([hidden]) ~ :not([hidden]) {
+      border-top-width: 1px;
+      border-bottom-width: 0px;
+    }
+  }
+
+  .divide_card {
+    & > :not([hidden]) ~ :not([hidden]) {
+      border-color: var(--colors-card);
+    }
+  }
+
+  .divide-y_1px {
+    & > :not([hidden]) ~ :not([hidden]) {
+      border-top-width: 1px;
+      border-bottom-width: 0px;
+    }
+  }
+
+  .divide_card {
+    & > :not([hidden]) ~ :not([hidden]) {
+      border-color: var(--colors-card);
+    }
+  }
+
   .px_1 {
     padding-inline: var(--spacing-1);
   }

package/styled-system/chunks/src__components__nav-item.css

@@ -1,4 +1,16 @@
 @layer utilities {
+  .hover\:shadow_lg {
+    &:where(:hover, [data-hover]) {
+      box-shadow: var(--shadows-lg);
+    }
+  }
+
+  .hover\:shadow_lg {
+    &:where(:hover, [data-hover]) {
+      box-shadow: var(--shadows-lg);
+    }
+  }
+
   .w_60 {
     width: var(--sizes-60);
   }
@@ -55,6 +67,66 @@
     }
   }
 
+  .\[\&_svg\]\:font_normal {
+    & svg {
+      font-weight: var(--font-weights-normal);
+    }
+  }
+
+  .\[\&_svg\]\:fs_xx-large {
+    & svg {
+      font-size: xx-large;
+    }
+  }
+
+  .\[\&_svg\]\:mb_6 {
+    & svg {
+      margin-bottom: var(--spacing-6);
+    }
+  }
+
+  .\[\&_svg\]\:h_6 {
+    & svg {
+      height: var(--sizes-6);
+    }
+  }
+
+  .\[\&_svg\]\:w_6 {
+    & svg {
+      width: var(--sizes-6);
+    }
+  }
+
+  .\[\&_svg\]\:font_normal {
+    & svg {
+      font-weight: var(--font-weights-normal);
+    }
+  }
+
+  .\[\&_svg\]\:fs_xx-large {
+    & svg {
+      font-size: xx-large;
+    }
+  }
+
+  .\[\&_svg\]\:mb_6 {
+    & svg {
+      margin-bottom: var(--spacing-6);
+    }
+  }
+
+  .\[\&_svg\]\:h_6 {
+    & svg {
+      height: var(--sizes-6);
+    }
+  }
+
+  .\[\&_svg\]\:w_6 {
+    & svg {
+      width: var(--sizes-6);
+    }
+  }
+
   .font_semibold {
     font-weight: var(--font-weights-semibold);
   }

package/styled-system/chunks/src__components__overview.css

@@ -108,7 +108,31 @@
   }
 
   .p_0 {
-    padding: 0;
+    padding: var(--spacing-0);
+  }
+
+  .\[\&\:hover\]\:bg_\#4049f0 {
+    &:hover {
+      background: #4049f0;
+    }
+  }
+
+  .\[\&\:hover\]\:shadow_lg {
+    &:hover {
+      box-shadow: var(--shadows-lg);
+    }
+  }
+
+  .\[\&\:hover\]\:bg_\#4049f0 {
+    &:hover {
+      background: #4049f0;
+    }
+  }
+
+  .\[\&\:hover\]\:shadow_lg {
+    &:hover {
+      box-shadow: var(--shadows-lg);
+    }
   }
 
   .\[\&\:hover\]\:bg_\#4049f0 {

package/styled-system/chunks/src__components__side-nav-item.css

@@ -1,4 +1,28 @@
 @layer utilities {
+  .hover\:text_yellow\.300 {
+    &:where(:hover, [data-hover]) {
+      color: var(--colors-yellow-300);
+    }
+  }
+
+  .currentPage\:text_yellow\.300 {
+    &[aria-current='page'] {
+      color: var(--colors-yellow-300);
+    }
+  }
+
+  .hover\:text_yellow\.300 {
+    &:where(:hover, [data-hover]) {
+      color: var(--colors-yellow-300);
+    }
+  }
+
+  .currentPage\:text_yellow\.300 {
+    &[aria-current='page'] {
+      color: var(--colors-yellow-300);
+    }
+  }
+
   .d_block {
     display: block;
   }

package/styled-system/chunks/src__components__side-nav.css

@@ -24,7 +24,7 @@
   }
 
   .p_0 {
-    padding: 0;
+    padding: var(--spacing-0);
   }
 
   .my_2 {
@@ -32,7 +32,7 @@
   }
 
   .mx_0 {
-    margin-inline: 0;
+    margin-inline: var(--spacing-0);
   }
 
   .d_flex {

package/styled-system/chunks/src__components__theme-toggle.css

@@ -1,4 +1,16 @@
 @layer utilities {
+  .\[\&\.active\]\:text_yellow\.300 {
+    &.active {
+      color: var(--colors-yellow-300);
+    }
+  }
+
+  .\[\&\.active\]\:text_yellow\.300 {
+    &.active {
+      color: var(--colors-yellow-300);
+    }
+  }
+
   .cursor_pointer {
     cursor: pointer;
   }

package/styled-system/chunks/src__components__token-analyzer.css

@@ -3,6 +3,138 @@
     padding-block: 20px;
   }
 
+  .\[\&_li\]\:cursor_pointer {
+    & li {
+      cursor: pointer;
+    }
+  }
+
+  .hover\:opacity_0\.8 {
+    &:where(:hover, [data-hover]) {
+      opacity: 0.8;
+    }
+  }
+
+  .hover\:bg_border {
+    &:where(:hover, [data-hover]) {
+      background-color: var(--colors-border);
+    }
+  }
+
+  .hover\:bg_border {
+    &:where(:hover, [data-hover]) {
+      background: var(--colors-border);
+    }
+  }
+
+  .hover\:opacity_0\.6 {
+    &:where(:hover, [data-hover]) {
+      opacity: 0.6;
+    }
+  }
+
+  .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);
+    }
+  }
+
+  .\[\&_li\]\:cursor_pointer {
+    & li {
+      cursor: pointer;
+    }
+  }
+
+  .hover\:opacity_0\.8 {
+    &:where(:hover, [data-hover]) {
+      opacity: 0.8;
+    }
+  }
+
+  .hover\:bg_border {
+    &:where(:hover, [data-hover]) {
+      background-color: var(--colors-border);
+    }
+  }
+
+  .hover\:bg_border {
+    &:where(:hover, [data-hover]) {
+      background: var(--colors-border);
+    }
+  }
+
+  .hover\:opacity_0\.6 {
+    &:where(:hover, [data-hover]) {
+      opacity: 0.6;
+    }
+  }
+
+  .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);
+    }
+  }
+
   .p_4px_8px {
     padding: 4px 8px;
   }
@@ -88,7 +220,7 @@
   }
 
   .p_0 {
-    padding: 0;
+    padding: var(--spacing-0);
   }
 
   .hover\:bg_border {
@@ -260,4 +392,20 @@
       }
     }
   }
+
+  .\[\&_li\]\:hover\:opacity_0\.8 {
+    & li {
+      &:where(:hover, [data-hover]) {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .\[\&_li\]\:hover\:opacity_0\.8 {
+    & li {
+      &:where(:hover, [data-hover]) {
+        opacity: 0.8;
+      }
+    }
+  }
 }

package/styled-system/chunks/src__layouts__Sidebar.css

@@ -110,4 +110,28 @@
       padding-inline: var(--spacing-8);
     }
   }
+
+  .md\:px_6 {
+    @media screen and (min-width: 768px) {
+      padding-inline: var(--spacing-6);
+    }
+  }
+
+  .lg\:px_8 {
+    @media screen and (min-width: 1024px) {
+      padding-inline: var(--spacing-8);
+    }
+  }
+
+  .md\:px_6 {
+    @media screen and (min-width: 768px) {
+      padding-inline: var(--spacing-6);
+    }
+  }
+
+  .lg\:px_8 {
+    @media screen and (min-width: 1024px) {
+      padding-inline: var(--spacing-8);
+    }
+  }
 }

package/styled-system/css/css.mjs

@@ -265,6 +265,14 @@ const classNameMap = {
   stroke: 'stroke',
   srOnly: 'sr',
   debug: 'debug',
+  appearance: 'appearance',
+  backfaceVisibility: 'backface',
+  clipPath: 'clip-path',
+  hyphens: 'hyphens',
+  mask: 'mask',
+  maskImage: 'mask-image',
+  maskSize: 'mask-size',
+  textSizeAdjust: 'text-size-adjust',
   textStyle: 'textStyle',
 }
 

package/styled-system/global.css

@@ -55,7 +55,7 @@
   }
 
   body {
-    margin: 0;
+    margin: var(--spacing-0);
     min-height: 100vh;
   }
 }

package/styled-system/helpers.mjs

@@ -3,6 +3,18 @@ function isObject(value) {
   return typeof value === 'object' && value != null && !Array.isArray(value)
 }
 
+// src/astish.ts
+var newRule = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g
+var ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g
+var astish = (val, tree = [{}]) => {
+  const block = newRule.exec(val.replace(ruleClean, ''))
+  if (!block) return tree[0]
+  if (block[4]) tree.shift()
+  else if (block[3]) tree.unshift((tree[0][block[3]] = tree[0][block[3]] || {}))
+  else tree[0][block[1]] = block[2]
+  return astish(val, tree)
+}
+
 // src/compact.ts
 function compact(value) {
   return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0))
@@ -175,6 +187,28 @@ function createMergeCss(context) {
   return { mergeCss, assignCss }
 }
 
+// src/memo.ts
+var memo = (fn) => {
+  const cache = /* @__PURE__ */ new Map()
+  const get = (...args) => {
+    const key = JSON.stringify(args)
+    if (cache.has(key)) {
+      return cache.get(key)
+    }
+    const result = fn(...args)
+    cache.set(key, result)
+    return result
+  }
+  return get
+}
+
+// src/hypenate.ts
+var dashCaseRegex = /[A-Z]/g
+var hypenateProperty = memo((property) => {
+  if (property.startsWith('--')) return property
+  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`)
+})
+
 // src/normalize-html.ts
 var htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
 function convert(key) {
@@ -203,29 +237,8 @@ function splitProps(props, ...keys) {
   const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key))
   return keys.map(fn).concat(split(dKeys))
 }
-
-// src/memo.ts
-var memo = (fn) => {
-  const cache = /* @__PURE__ */ new Map()
-  const get = (...args) => {
-    const key = JSON.stringify(args)
-    if (cache.has(key)) {
-      return cache.get(key)
-    }
-    const result = fn(...args)
-    cache.set(key, result)
-    return result
-  }
-  return get
-}
-
-// src/hypenate.ts
-var dashCaseRegex = /[A-Z]/g
-var hypenateProperty = memo((property) => {
-  if (property.startsWith('--')) return property
-  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`)
-})
 export {
+  astish,
   compact,
   createCss,
   createMergeCss,

package/styled-system/jsx/is-valid-prop.mjs

@@ -348,6 +348,14 @@ var userGenerated = [
   'stroke',
   'srOnly',
   'debug',
+  'appearance',
+  'backfaceVisibility',
+  'clipPath',
+  'hyphens',
+  'mask',
+  'maskImage',
+  'maskSize',
+  'textSizeAdjust',
   'colorPalette',
   'textStyle',
   '_hover',
@@ -682,7 +690,6 @@ var allCssProperties = [
   'clip',
   'clipPath',
   'color',
-  'printColorAdjust',
   'colorScheme',
   'columnCount',
   'columnFill',
@@ -700,6 +707,9 @@ var allCssProperties = [
   'containIntrinsicHeight',
   'containIntrinsicInlineSize',
   'containIntrinsicWidth',
+  'container',
+  'containerName',
+  'containerType',
   'content',
   'contentVisibility',
   'counterIncrement',
@@ -724,6 +734,7 @@ var allCssProperties = [
   'fontKerning',
   'fontLanguageOverride',
   'fontOpticalSizing',
+  'fontPalette',
   'fontVariationSettings',
   'fontSize',
   'fontSizeAdjust',
@@ -735,6 +746,7 @@ var allCssProperties = [
   'fontVariantAlternates',
   'fontVariantCaps',
   'fontVariantEastAsian',
+  'fontVariantEmoji',
   'fontVariantLigatures',
   'fontVariantNumeric',
   'fontVariantPosition',
@@ -878,6 +890,7 @@ var allCssProperties = [
   'paddingLeft',
   'paddingRight',
   'paddingTop',
+  'page',
   'pageBreakAfter',
   'pageBreakBefore',
   'pageBreakInside',
@@ -889,6 +902,7 @@ var allCssProperties = [
   'placeSelf',
   'pointerEvents',
   'position',
+  'printColorAdjust',
   'quotes',
   'resize',
   'right',
@@ -980,6 +994,7 @@ var allCssProperties = [
   'unicodeBidi',
   'userSelect',
   'verticalAlign',
+  'viewTransitionName',
   'visibility',
   'whiteSpace',
   'widows',
@@ -1001,7 +1016,8 @@ function memo(fn) {
     return cache[arg]
   }
 }
+var selectorRegex = /&|@/
 var isCssProperty = memo((prop) => {
-  return properties.has(prop) || prop.startsWith('--')
+  return properties.has(prop) || prop.startsWith('--') || selectorRegex.test(prop)
 })
 export { allCssProperties, isCssProperty }