@pandacss/studio 0.34.3 → 0.36.0

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

@@ -1,11 +1,10 @@
 /* eslint-disable */
-import type { ConditionalValue } from './conditions';
+import type { Conditional } from './conditions';
 import type { CssProperties } from './system-types';
 import type { Tokens } from '../tokens/index';
 
-interface PropertyValueTypes {
+export interface UtilityValues {
 	aspectRatio: Tokens["aspectRatios"];
-	zIndex: Tokens["zIndex"];
 	top: Tokens["spacing"];
 	left: Tokens["spacing"];
 	insetInline: Tokens["spacing"];
@@ -56,7 +55,6 @@ interface PropertyValueTypes {
 	marginInline: "auto" | Tokens["spacing"];
 	marginInlineEnd: "auto" | Tokens["spacing"];
 	marginInlineStart: "auto" | Tokens["spacing"];
-	outlineWidth: Tokens["borderWidths"];
 	outlineColor: Tokens["colors"];
 	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
@@ -94,8 +92,8 @@ interface PropertyValueTypes {
 	background: Tokens["colors"];
 	backgroundColor: Tokens["colors"];
 	backgroundImage: Tokens["assets"];
-	backgroundGradient: Tokens["gradients"] | "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
-	textGradient: Tokens["gradients"] | "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	gradientFrom: Tokens["colors"];
 	gradientTo: Tokens["colors"];
 	gradientVia: Tokens["colors"];
@@ -115,27 +113,18 @@ interface PropertyValueTypes {
 	borderEndEndRadius: Tokens["radii"];
 	borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
 	border: Tokens["borders"];
-	borderWidth: Tokens["borderWidths"];
-	borderTopWidth: Tokens["borderWidths"];
-	borderLeftWidth: Tokens["borderWidths"];
-	borderRightWidth: Tokens["borderWidths"];
-	borderBottomWidth: Tokens["borderWidths"];
 	borderColor: Tokens["colors"];
 	borderInline: Tokens["borders"];
-	borderInlineWidth: Tokens["borderWidths"];
 	borderInlineColor: Tokens["colors"];
 	borderBlock: Tokens["borders"];
-	borderBlockWidth: Tokens["borderWidths"];
 	borderBlockColor: Tokens["colors"];
 	borderLeft: Tokens["borders"];
 	borderLeftColor: Tokens["colors"];
 	borderInlineStart: Tokens["borders"];
-	borderInlineStartWidth: Tokens["borderWidths"];
 	borderInlineStartColor: Tokens["colors"];
 	borderRight: Tokens["borders"];
 	borderRightColor: Tokens["colors"];
 	borderInlineEnd: Tokens["borders"];
-	borderInlineEndWidth: Tokens["borderWidths"];
 	borderInlineEndColor: Tokens["colors"];
 	borderTop: Tokens["borders"];
 	borderTopColor: Tokens["colors"];
@@ -145,11 +134,9 @@ interface PropertyValueTypes {
 	borderBlockEndColor: Tokens["colors"];
 	borderBlockStart: Tokens["borders"];
 	borderBlockStartColor: Tokens["colors"];
-	opacity: Tokens["opacity"];
 	boxShadow: Tokens["shadows"];
 	boxShadowColor: Tokens["colors"];
 	filter: "auto";
-	dropShadow: Tokens["dropShadows"];
 	blur: Tokens["blurs"];
 	backdropFilter: "auto";
 	backdropBlur: Tokens["blurs"];
@@ -161,7 +148,6 @@ interface PropertyValueTypes {
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
-	animationName: Tokens["animationName"];
 	animationDelay: Tokens["durations"];
 	scale: "auto" | CssProperties["scale"];
 	translate: "auto" | CssProperties["translate"];
@@ -201,212 +187,50 @@ interface PropertyValueTypes {
 	scrollSnapMarginRight: Tokens["spacing"];
 	fill: Tokens["colors"];
 	stroke: Tokens["colors"];
-	strokeWidth: Tokens["borderWidths"];
 	srOnly: boolean;
 	debug: boolean;
-	containerName: Tokens["containerNames"] | CssProperties["containerName"];
+	containerName: CssProperties["containerName"];
 	colorPalette: "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "stone" | "zinc" | "gray" | "slate" | "neutral" | "text" | "bg" | "card" | "border" | "accent";
 	textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
 }
 
 
 
-  type CssValue<T> = T extends keyof CssProperties ? CssProperties[T] : never
+type WithColorOpacityModifier<T> = T extends string ? `${T}/${string}` : T
 
-  type Shorthand<T> = T extends keyof PropertyValueTypes ? PropertyValueTypes[T] | CssValue<T> : CssValue<T>
+type ImportantMark = "!" | "!important"
+type WhitespaceImportant = ` ${ImportantMark}`
+type Important = ImportantMark | WhitespaceImportant
+type WithImportant<T> = T extends string ? `${T}${Important}${string}` : T
 
-  export interface PropertyTypes extends PropertyValueTypes {
-  
-	pos: Shorthand<"position">;
-	insetX: Shorthand<"insetInline">;
-	insetY: Shorthand<"insetBlock">;
-	insetEnd: Shorthand<"insetInlineEnd">;
-	end: Shorthand<"insetInlineEnd">;
-	insetStart: Shorthand<"insetInlineStart">;
-	start: Shorthand<"insetInlineStart">;
-	flexDir: Shorthand<"flexDirection">;
-	p: Shorthand<"padding">;
-	pl: Shorthand<"paddingLeft">;
-	pr: Shorthand<"paddingRight">;
-	pt: Shorthand<"paddingTop">;
-	pb: Shorthand<"paddingBottom">;
-	py: Shorthand<"paddingBlock">;
-	paddingY: Shorthand<"paddingBlock">;
-	paddingX: Shorthand<"paddingInline">;
-	px: Shorthand<"paddingInline">;
-	pe: Shorthand<"paddingInlineEnd">;
-	paddingEnd: Shorthand<"paddingInlineEnd">;
-	ps: Shorthand<"paddingInlineStart">;
-	paddingStart: Shorthand<"paddingInlineStart">;
-	ml: Shorthand<"marginLeft">;
-	mr: Shorthand<"marginRight">;
-	mt: Shorthand<"marginTop">;
-	mb: Shorthand<"marginBottom">;
-	m: Shorthand<"margin">;
-	my: Shorthand<"marginBlock">;
-	marginY: Shorthand<"marginBlock">;
-	mx: Shorthand<"marginInline">;
-	marginX: Shorthand<"marginInline">;
-	me: Shorthand<"marginInlineEnd">;
-	marginEnd: Shorthand<"marginInlineEnd">;
-	ms: Shorthand<"marginInlineStart">;
-	marginStart: Shorthand<"marginInlineStart">;
-	ringWidth: Shorthand<"outlineWidth">;
-	ringColor: Shorthand<"outlineColor">;
-	ring: Shorthand<"outline">;
-	ringOffset: Shorthand<"outlineOffset">;
-	w: Shorthand<"width">;
-	minW: Shorthand<"minWidth">;
-	maxW: Shorthand<"maxWidth">;
-	h: Shorthand<"height">;
-	minH: Shorthand<"minHeight">;
-	maxH: Shorthand<"maxHeight">;
-	textShadowColor: Shorthand<"textShadowColor">;
-	bgPosition: Shorthand<"backgroundPosition">;
-	bgPositionX: Shorthand<"backgroundPositionX">;
-	bgPositionY: Shorthand<"backgroundPositionY">;
-	bgAttachment: Shorthand<"backgroundAttachment">;
-	bgClip: Shorthand<"backgroundClip">;
-	bg: Shorthand<"background">;
-	bgColor: Shorthand<"backgroundColor">;
-	bgOrigin: Shorthand<"backgroundOrigin">;
-	bgImage: Shorthand<"backgroundImage">;
-	bgRepeat: Shorthand<"backgroundRepeat">;
-	bgBlendMode: Shorthand<"backgroundBlendMode">;
-	bgSize: Shorthand<"backgroundSize">;
-	bgGradient: Shorthand<"backgroundGradient">;
-	rounded: Shorthand<"borderRadius">;
-	roundedTopLeft: Shorthand<"borderTopLeftRadius">;
-	roundedTopRight: Shorthand<"borderTopRightRadius">;
-	roundedBottomRight: Shorthand<"borderBottomRightRadius">;
-	roundedBottomLeft: Shorthand<"borderBottomLeftRadius">;
-	roundedTop: Shorthand<"borderTopRadius">;
-	roundedRight: Shorthand<"borderRightRadius">;
-	roundedBottom: Shorthand<"borderBottomRadius">;
-	roundedLeft: Shorthand<"borderLeftRadius">;
-	roundedStartStart: Shorthand<"borderStartStartRadius">;
-	roundedStartEnd: Shorthand<"borderStartEndRadius">;
-	roundedStart: Shorthand<"borderStartRadius">;
-	roundedEndStart: Shorthand<"borderEndStartRadius">;
-	roundedEndEnd: Shorthand<"borderEndEndRadius">;
-	roundedEnd: Shorthand<"borderEndRadius">;
-	borderX: Shorthand<"borderInline">;
-	borderXWidth: Shorthand<"borderInlineWidth">;
-	borderXColor: Shorthand<"borderInlineColor">;
-	borderY: Shorthand<"borderBlock">;
-	borderYWidth: Shorthand<"borderBlockWidth">;
-	borderYColor: Shorthand<"borderBlockColor">;
-	borderStart: Shorthand<"borderInlineStart">;
-	borderStartWidth: Shorthand<"borderInlineStartWidth">;
-	borderStartColor: Shorthand<"borderInlineStartColor">;
-	borderEnd: Shorthand<"borderInlineEnd">;
-	borderEndWidth: Shorthand<"borderInlineEndWidth">;
-	borderEndColor: Shorthand<"borderInlineEndColor">;
-	shadow: Shorthand<"boxShadow">;
-	shadowColor: Shorthand<"boxShadowColor">;
-	x: Shorthand<"translateX">;
-	y: Shorthand<"translateY">;
-	scrollMarginY: Shorthand<"scrollMarginBlock">;
-	scrollMarginX: Shorthand<"scrollMarginInline">;
-	scrollPaddingY: Shorthand<"scrollPaddingBlock">;
-	scrollPaddingX: Shorthand<"scrollPaddingInline">;
-}
-
-type StrictableProps =
-  | 'alignContent'
-  | 'alignItems'
-  | 'alignSelf'
-  | 'all'
-  | 'animationComposition'
-  | 'animationDirection'
-  | 'animationFillMode'
-  | 'appearance'
-  | 'backfaceVisibility'
-  | 'backgroundAttachment'
-  | 'backgroundClip'
-  | 'borderCollapse'
-  | 'border'
-  | 'borderBlock'
-  | 'borderBlockEnd'
-  | 'borderBlockStart'
-  | 'borderBottom'
-  | 'borderInline'
-  | 'borderInlineEnd'
-  | 'borderInlineStart'
-  | 'borderLeft'
-  | 'borderRight'
-  | 'borderTop'
-  | 'borderBlockEndStyle'
-  | 'borderBlockStartStyle'
-  | 'borderBlockStyle'
-  | 'borderBottomStyle'
-  | 'borderInlineEndStyle'
-  | 'borderInlineStartStyle'
-  | 'borderInlineStyle'
-  | 'borderLeftStyle'
-  | 'borderRightStyle'
-  | 'borderTopStyle'
-  | 'boxDecorationBreak'
-  | 'boxSizing'
-  | 'breakAfter'
-  | 'breakBefore'
-  | 'breakInside'
-  | 'captionSide'
-  | 'clear'
-  | 'columnFill'
-  | 'columnRuleStyle'
-  | 'contentVisibility'
-  | 'direction'
-  | 'display'
-  | 'emptyCells'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'float'
-  | 'fontKerning'
-  | 'forcedColorAdjust'
-  | 'isolation'
-  | 'lineBreak'
-  | 'mixBlendMode'
-  | 'objectFit'
-  | 'outlineStyle'
-  | 'overflow'
-  | 'overflowX'
-  | 'overflowY'
-  | 'overflowBlock'
-  | 'overflowInline'
-  | 'overflowWrap'
-  | 'pointerEvents'
-  | 'position'
-  | 'resize'
-  | 'scrollBehavior'
-  | 'touchAction'
-  | 'transformBox'
-  | 'transformStyle'
-  | 'userSelect'
-  | 'visibility'
-  | 'wordBreak'
-  | 'writingMode'
+/**
+ * Only relevant when using `strictTokens` or `strictPropertyValues` in your config.
+ * - Allows you to use an escape hatch (e.g. `[123px]`) to use any string as a value.
+ * - Allows you to use a color opacity modifier (e.g. `red/300`) with known color values.
+ * - Allows you to use an important mark (e.g. `!` or `!important`) in the value.
+ *
+ * This is useful when you want to use a value that is not defined in the config or want to opt-out of the defaults.
+ *
+ * @example
+ * css({
+ *   fontSize: '[123px]', // ⚠️ will not throw even if you haven't defined 123px as a token
+ * })
+ *
+ * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens
+ * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
+ */
+export type WithEscapeHatch<T> = T | `[${string}]` | (T extends string ? WithColorOpacityModifier<string> | WithImportant<T> : T)
 
-type WithEscapeHatch<T> = T | `[${string}]`
-
-type FilterVagueString<Key, Value> = Value extends boolean
+/**
+ * Will restrict the value of properties that have predefined values to those values only.
+ *
+ * @example
+ * css({
+ *   display: 'abc', // ❌ will throw
+ * })
+ *
+ * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
+ */
+export type OnlyKnown<Key, Value> = Value extends boolean
   ? Value
-  : Key extends StrictableProps
-    ? Value extends `${infer _}` ? Value : never
-    : Value
-
-type PropOrCondition<Key, Value> = ConditionalValue<Value | (string & {})>
-
-type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
-  ? PropOrCondition<T, PropertyTypes[T] | CssValue<T>>
-  : never;
-
-type CssPropertyValue<T extends string> = T extends keyof CssProperties
-  ? PropOrCondition<T, CssProperties[T]>
-  : never;
-
-export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-  ? PropertyTypeValue<T>
-  : T extends keyof CssProperties
-    ? CssPropertyValue<T>
-    : PropOrCondition<T, string | number>
+  : Value extends `${infer _}` ? Value : never

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

@@ -81,7 +81,7 @@ export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefi
 
 interface RecipeConfigMeta {
   /**
-   * The name of the recipe.
+   * The class name of the recipe.
    */
   className: string
   /**
@@ -133,6 +133,10 @@ export interface SlotRecipeDefinition<
   S extends string = string,
   T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
 > {
+  /**
+   * An optional class name that can be used to target slots in the DOM.
+   */
+  className?: string
   /**
    * The parts/slots of the recipe.
    */

package/styled-system/types/static-css.d.ts

@@ -44,4 +44,8 @@ export interface StaticCssOptions {
   patterns?: {
     [pattern: string]: PatternRule[]
   }
+  /**
+   * The CSS themes to generate
+   */
+  themes?: string[]
 }