@pandacss/studio 0.36.1 → 0.37.1

package/styled-system/styles.css

@@ -1,24 +1,21 @@
 @layer reset, base, tokens, recipes, utilities;
 
 @layer reset{
-  html {
+  html,:host {
     --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -moz-tab-size: 4;
     tab-size: 4;
+    -webkit-tap-highlight-color: transparent;
     line-height: 1.5;
     font-family: var(--global-font-body, var(--font-fallback));
 }
 
-  * {
+  *,::before,::after,::backdrop,::first-letter,::file-selector-button {
     margin: 0px;
     padding: 0px;
-    font: inherit;
-}
-
-  *,*::before,*::after {
     box-sizing: border-box;
     border-width: 0px;
     border-style: solid;
@@ -33,6 +30,7 @@
 
   body {
     height: 100%;
+    line-height: inherit;
 }
 
   img {
@@ -49,47 +47,55 @@
     height: auto;
 }
 
+  h1,h2,h3,h4,h5,h6 {
+    text-wrap: balance;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
   p,h1,h2,h3,h4,h5,h6 {
     overflow-wrap: break-word;
 }
 
-  ol,ul {
+  ol,ul,menu {
     list-style: none;
 }
 
-  code,kbd,pre,samp {
-    font-size: 1em;
-}
-
-  button,[type='button'],[type='reset'],[type='submit'] {
+  button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {
+    appearance: button;
     -webkit-appearance: button;
-    background-color: var(--colors-transparent);
-    background-image: none;
 }
 
-  button,input,optgroup,select,textarea {
+  button,input,optgroup,select,textarea,::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
     color: inherit;
+    background: var(--colors-transparent);
 }
 
-  button,select {
-    text-transform: none;
-}
-
-  table {
-    text-indent: 0px;
-    border-collapse: collapse;
-    border-color: inherit;
+  ::placeholder {
+    opacity: 1;
+    --placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent);
+    color: var(--global-color-placeholder, var(--placeholder-fallback));
 }
 
-  input::placeholder,textarea::placeholder {
-    opacity: 1;
-    color: var(--global-color-placeholder, #9ca3af);
+  select,textarea,input:where(:not([type='button'], [type='reset'], [type='submit'])) {
+    border-width: 1px;
+    border-style: solid;
 }
 
   textarea {
     resize: vertical;
 }
 
+  table {
+    text-indent: 0px;
+    border-collapse: collapse;
+    border-color: inherit;
+}
+
   summary {
     display: list-item;
 }
@@ -132,37 +138,24 @@
 
   code,kbd,samp,pre {
     --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
-    font-size: 1em;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
     font-family: var(--global-font-mono, var(--font-mono-fallback));
+    font-size: 1em;
 }
 
-  input[type="text"],input[type="email"],input[type="search"],input[type="password"] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
-
-  input[type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
+  progress {
+    vertical-align: baseline;
 }
 
   ::-webkit-search-decoration,::-webkit-search-cancel-button {
     -webkit-appearance: none;
 }
 
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-}
-
-  input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
+  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
     height: auto;
 }
 
-  input[type='number'] {
-    -moz-appearance: textfield;
-}
-
   :-moz-ui-invalid {
     box-shadow: none;
 }
@@ -179,9 +172,28 @@
 @layer base{
   :root {
     --made-with-panda: '🐼';
+    --global-color-border: var(--colors-border);
+    --global-color-placeholder: var(--colors-neutral-500);
+    color-scheme: light dark;
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 0.84em;
+    line-height: var(--line-heights-normal);
+    font-weight: var(--font-weights-normal);
+}
+
+  body {
+    margin: var(--spacing-0);
+    min-height: 100dvh;
+    background: var(--colors-bg);
+    color: var(--colors-text);
 }
 
-  *,*::before,*::after,::backdrop {
+  a {
+    color: unset;
+    text-decoration: none;
+}
+
+  *,::before,::after,::backdrop {
     --blur: /*-*/ /*-*/;
     --brightness: /*-*/ /*-*/;
     --contrast: /*-*/ /*-*/;
@@ -200,39 +212,22 @@
     --backdrop-opacity: /*-*/ /*-*/;
     --backdrop-saturate: /*-*/ /*-*/;
     --backdrop-sepia: /*-*/ /*-*/;
+    --gradient-from-position: /*-*/ /*-*/;
+    --gradient-to-position: /*-*/ /*-*/;
+    --gradient-via-position: /*-*/ /*-*/;
     --scroll-snap-strictness: proximity;
     --border-spacing-x: 0;
     --border-spacing-y: 0;
     --translate-x: 0;
     --translate-y: 0;
     --rotate: 0;
+    --rotate-x: 0;
+    --rotate-y: 0;
     --skew-x: 0;
     --skew-y: 0;
     --scale-x: 1;
     --scale-y: 1;
 }
-
-  :root {
-    --global-color-border: var(--colors-border);
-    --global-color-placeholder: var(--colors-neutral-500);
-    color-scheme: light dark;
-    color: var(--colors-text);
-    background: var(--colors-bg);
-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-    font-size: 0.84em;
-    line-height: var(--line-heights-normal);
-    font-weight: var(--font-weights-normal);
-}
-
-  a {
-    color: unset;
-    text-decoration: none;
-}
-
-  body {
-    margin: var(--spacing-0);
-    min-height: 100dvh;
-}
 }
 
 @layer tokens{
@@ -656,7 +651,7 @@
     --colors-neutral-800: #262626;
     --colors-neutral-900: #171717;
     --colors-neutral-950: #0a0a0a;
-    --assets-check: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A');
+    --assets-check: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A");
     --breakpoints-sm: 640px;
     --breakpoints-md: 768px;
     --breakpoints-lg: 1024px;
@@ -712,7 +707,6 @@
 }
 
 @layer utilities{
-
   .d_flex {
     display: flex;
 }
@@ -753,7 +747,7 @@
     gap: var(--spacing-2\.5);
 }
 
-  .text_center {
+  .text-align_center {
     text-align: center;
 }
 
@@ -797,7 +791,7 @@
     gap: var(--spacing-0\.5);
 }
 
-  .text_capitalize {
+  .text-transform_capitalize {
     text-transform: capitalize;
 }
 
@@ -805,7 +799,7 @@
     opacity: 0.7;
 }
 
-  .text_uppercase {
+  .text-transform_uppercase {
     text-transform: uppercase;
 }
 
@@ -849,7 +843,7 @@
     height: var(--sizes-8);
 }
 
-  .text_lowercase {
+  .text-transform_lowercase {
     text-transform: lowercase;
 }
 
@@ -894,7 +888,7 @@
     border-bottom-width: 0px;
 }
 
-  .divide_card > :not([hidden]) ~ :not([hidden]) {
+  .divide-color_card > :not([hidden]) ~ :not([hidden]) {
     border-color: var(--colors-card);
 }
 
@@ -962,6 +956,10 @@
     margin-block: var(--spacing-10);
 }
 
+  .h_300px {
+    height: 300px;
+}
+
   .tracking_tighter {
     letter-spacing: var(--letter-spacings-tighter);
 }
@@ -1140,11 +1138,11 @@
     flex-direction: column;
 }
 
-  .font_semibold {
+  .fw_semibold {
     font-weight: var(--font-weights-semibold);
 }
 
-  .font_bold {
+  .fw_bold {
     font-weight: var(--font-weights-bold);
 }
 
@@ -1188,7 +1186,7 @@
     margin-top: var(--spacing-2);
 }
 
-  .font_medium {
+  .fw_medium {
     font-weight: var(--font-weights-medium);
 }
 
@@ -1292,7 +1290,7 @@
     margin-bottom: var(--spacing-8);
 }
 
-  .list_none {
+  .list-type_none {
     list-style-type: none;
 }
 
@@ -1376,7 +1374,7 @@
     z-index: -1;
 }
 
-  .dark\:text_neutral\.300.dark,.dark .dark\:text_neutral\.300 {
+  .dark .dark\:text_neutral\.300 {
     color: var(--colors-neutral-300);
 }
 
@@ -1388,7 +1386,7 @@
     content: '';
 }
 
-  .before\:bg_24px::before {
+  .before\:bg-size_24px::before {
     background-size: 24px;
 }
 
@@ -1396,7 +1394,7 @@
     background-image: var(--assets-check);
 }
 
-  .focusWithin\:ring_2px:focus-within {
+  .focusWithin\:ring-offset_2px:focus-within {
     outline-offset: 2px;
 }
 
@@ -1404,11 +1402,11 @@
     outline-style: solid;
 }
 
-  .focusWithin\:ring_2px:focus-within {
+  .focusWithin\:ring-width_2px:focus-within {
     outline-width: 2px;
 }
 
-  .focusWithin\:ring_neutral\.400:focus-within {
+  .focusWithin\:ring-color_neutral\.400:focus-within {
     outline-color: var(--colors-neutral-400);
 }
 
@@ -1416,13 +1414,13 @@
     color: var(--colors-accent);
 }
 
-  @media screen and (min-width: 48em) {
+  @media screen and (min-width: 48rem) {
     .md\:px_6 {
       padding-inline: var(--spacing-6);
 }
 }
 
-  @media screen and (min-width: 64em) {
+  @media screen and (min-width: 64rem) {
     .lg\:px_8 {
       padding-inline: var(--spacing-8);
 }

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

@@ -150,9 +150,9 @@ export interface Conditions {
 	"_landscape": string
 	/** `@media (orientation: portrait)` */
 	"_portrait": string
-	/** ` &.dark, .dark &` */
+	/** `.dark &` */
 	"_dark": string
-	/** ` &.light, .light &` */
+	/** `.light &` */
 	"_light": string
 	/** `@media (prefers-color-scheme: dark)` */
 	"_osDark": string
@@ -178,6 +178,8 @@ export interface Conditions {
 	"_horizontal": string
 	/** `&[data-orientation=vertical]` */
 	"_vertical": string
+	/** `@starting-style` */
+	"_starting": string
 	/** `@media screen and (min-width: 40rem)` */
 	"sm": string
 	/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */

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

@@ -55,11 +55,11 @@ export interface UtilityValues {
 	marginInline: "auto" | Tokens["spacing"];
 	marginInlineEnd: "auto" | Tokens["spacing"];
 	marginInlineStart: "auto" | Tokens["spacing"];
+	spaceX: "auto" | Tokens["spacing"] | CssProperties["marginInlineStart"];
+	spaceY: "auto" | Tokens["spacing"] | CssProperties["marginBlockStart"];
 	outlineColor: Tokens["colors"];
 	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
-	divideX: string;
-	divideY: string;
 	divideColor: Tokens["colors"];
 	divideStyle: CssProperties["borderStyle"];
 	width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
@@ -140,7 +140,7 @@ export interface UtilityValues {
 	blur: Tokens["blurs"];
 	backdropFilter: "auto";
 	backdropBlur: Tokens["blurs"];
-	borderSpacing: Tokens["spacing"];
+	borderSpacing: Tokens["spacing"] | "auto";
 	borderSpacingX: Tokens["spacing"];
 	borderSpacingY: Tokens["spacing"];
 	transitionTimingFunction: Tokens["easings"];
@@ -148,11 +148,18 @@ export interface UtilityValues {
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
+	animationTimingFunction: Tokens["easings"];
+	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];
+	rotate: "auto" | "auto-3d" | CssProperties["rotate"];
+	rotateX: CssProperties["rotate"];
+	rotateY: CssProperties["rotate"];
+	rotateZ: CssProperties["rotate"];
 	scale: "auto" | CssProperties["scale"];
-	translate: "auto" | CssProperties["translate"];
+	translate: "auto" | "auto-3d" | CssProperties["translate"];
 	translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
 	translateY: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
+	translateZ: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
 	accentColor: Tokens["colors"];
 	caretColor: Tokens["colors"];
 	scrollbar: "visible" | "hidden";

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,7 @@ 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>>]
+  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
 }
 
 export type SlotRecipeCompoundVariant<S extends string, T> = T & {