@pandacss/studio 0.20.1 → 0.22.0

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

@@ -58,6 +58,7 @@ 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"];
@@ -115,6 +116,11 @@ 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"];
@@ -200,6 +206,7 @@ interface PropertyValueTypes {
 	scrollSnapMarginRight: Tokens["spacing"];
 	fill: Tokens["colors"];
 	stroke: Tokens["colors"];
+	strokeWidth: Tokens["borderWidths"];
 	srOnly: boolean;
 	debug: boolean;
 	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";
@@ -303,8 +310,18 @@ interface PropertyValueTypes {
 }
 
 
-export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-  ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
-  : T extends keyof CssProperties
-  ? ConditionalValue<CssProperties[T] | (string & {})>
-  : ConditionalValue<string | number>
+
+  type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
+    ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
+    : never;
+
+  type CssPropertyValue<T extends string> = T extends keyof CssProperties
+    ? ConditionalValue<CssProperties[T] | (string & {})>
+    : never;
+
+  export type PropertyValue<T extends string> = T extends keyof PropertyTypes
+    ? PropertyTypeValue<T>
+    : T extends keyof CssProperties
+      ? CssPropertyValue<T>
+      : ConditionalValue<string | number>
+  

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

@@ -1,4 +1,5 @@
 /* eslint-disable */
+import type {  RecipeRule  } from './static-css';
 import type {  SystemStyleObject, DistributiveOmit, Pretty  } from './system-types';
 
 type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
@@ -63,6 +64,10 @@ export interface RecipeDefinition<T extends RecipeVariantRecord> {
    * The styles to apply when a combination of variants is selected.
    */
   compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]
+  /**
+   * Variants to pre-generate, will be include in the final `config.staticCss`
+   */
+  staticCss?: RecipeRule[]
 }
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>

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

@@ -0,0 +1,39 @@
+/* eslint-disable */
+interface CssRule {
+  /**
+   * The css properties to generate utilities for.
+   * @example ['margin', 'padding']
+   */
+  properties: {
+    [property: string]: string[]
+  }
+  /**
+   * The css conditions to generate utilities for.
+   * @example ['hover', 'focus']
+   */
+  conditions?: string[]
+  /**
+   * Whether to generate responsive utilities.
+   */
+  responsive?: boolean
+}
+
+export type RecipeRule =
+  | '*'
+  | ({
+      conditions?: string[]
+      responsive?: boolean
+    } & { [variant: string]: boolean | string[] })
+
+export interface StaticCssOptions {
+  /**
+   * The css utility classes to generate.
+   */
+  css?: CssRule[]
+  /**
+   * The css recipes to generate.
+   */
+  recipes?: {
+    [recipe: string]: RecipeRule[]
+  }
+}

package/styled-system/chunks/src__components__color-constrast.css

@@ -1,106 +0,0 @@
-@layer utilities {
-
-  .pt_16 {
-    padding-top: var(--spacing-16)
-    }
-
-  .gap_5 {
-    gap: var(--spacing-5)
-    }
-
-  .mt_10 {
-    margin-top: var(--spacing-10)
-    }
-
-  .font_bold {
-    font-weight: var(--font-weights-bold)
-    }
-
-  .fs_4xl {
-    font-size: var(--font-sizes-4xl)
-    }
-
-  .opacity_0\.5 {
-    opacity: 0.5
-    }
-
-  .justify_space-between {
-    justify-content: space-between
-    }
-
-  .font_medium {
-    font-weight: var(--font-weights-medium)
-    }
-
-  .gap_2 {
-    gap: var(--spacing-2)
-    }
-
-  .gap_3 {
-    gap: var(--spacing-3)
-    }
-
-  .justify_center {
-    justify-content: center
-    }
-
-  .gap_10px {
-    gap: 10px
-    }
-
-  .flex_row {
-    flex-direction: row
-    }
-
-  .font_semibold {
-    font-weight: var(--font-weights-semibold)
-    }
-
-  .fs_2xl {
-    font-size: var(--font-sizes-2xl)
-    }
-
-  .p_2 {
-    padding: var(--spacing-2)
-    }
-
-  .ring_none {
-    outline: var(--borders-none)
-    }
-
-  .border-width_1px {
-    border-width: 1px
-    }
-
-  .border_card {
-    border-color: var(--colors-card)
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .gap_2\.5 {
-    gap: var(--spacing-2\.5)
-    }
-
-  .text_center {
-    text-align: center
-    }
-
-  .d_flex {
-    display: flex
-    }
-
-  .flex_column {
-    flex-direction: column
-    }
-
-  .gap_4 {
-    gap: var(--spacing-4)
-    }
-
-  .flex_1 {
-    flex: 1 1 0%
-    }
-}

package/styled-system/chunks/src__components__color-wrapper.css

@@ -1,58 +0,0 @@
-@layer utilities {
-
-  .w_full {
-    width: var(--sizes-full)
-    }
-
-  .h_10 {
-    height: var(--sizes-10)
-    }
-
-  .rounded_sm {
-    border-radius: var(--radii-sm)
-    }
-
-  .pos_relative {
-    position: relative
-    }
-
-  .overflow_hidden {
-    overflow: hidden
-    }
-
-  .shadow_inset {
-    box-shadow: var(--shadows-inset)
-    }
-
-  .before\:content_\'\'::before {
-    content: ''
-        }
-
-  .before\:pos_absolute::before {
-    position: absolute
-        }
-
-  .before\:rounded_sm::before {
-    border-radius: var(--radii-sm)
-        }
-
-  .before\:w_100\%::before {
-    width: 100%
-        }
-
-  .before\:h_100\%::before {
-    height: 100%
-        }
-
-  .before\:bg_24px::before {
-    background-size: 24px
-        }
-
-  .before\:z_-1::before {
-    z-index: -1
-        }
-
-  .before\:bg-img_check::before {
-    background-image: var(--assets-check)
-        }
-}

package/styled-system/chunks/src__components__colors.css

@@ -1,106 +0,0 @@
-@layer utilities {
-
-  .font_semibold {
-    font-weight: var(--font-weights-semibold)
-    }
-
-  .text_capitalize {
-    text-transform: capitalize
-    }
-
-  .fs_xl {
-    font-size: var(--font-sizes-xl)
-    }
-
-  .font_medium {
-    font-weight: var(--font-weights-medium)
-    }
-
-  .opacity_0\.7 {
-    opacity: 0.7
-    }
-
-  .fs_sm {
-    font-size: var(--font-sizes-sm)
-    }
-
-  .text_uppercase {
-    text-transform: uppercase
-    }
-
-  .mb_3\.5 {
-    margin-bottom: var(--spacing-3\.5)
-    }
-
-  .pos_sticky {
-    position: sticky
-    }
-
-  .top_0 {
-    top: var(--spacing-0)
-    }
-
-  .z_1 {
-    z-index: 1
-    }
-
-  .w_full {
-    width: var(--sizes-full)
-    }
-
-  .gap_0\.5 {
-    gap: var(--spacing-0\.5)
-    }
-
-  .mt_2 {
-    margin-top: var(--spacing-2)
-    }
-
-  .flex_column {
-    flex-direction: column
-    }
-
-  .gap_10 {
-    gap: var(--spacing-10)
-    }
-
-  .d_flex {
-    display: flex
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .gap_1 {
-    gap: var(--spacing-1)
-    }
-
-  .flex_row {
-    flex-direction: row
-    }
-
-  .grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\) {
-    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr))
-    }
-
-  .d_grid {
-    display: grid
-    }
-
-  .grid-cols_repeat\(auto-fit\,_minmax\(30rem\,_1fr\)\) {
-    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr))
-    }
-
-  .gap_4 {
-    gap: var(--spacing-4)
-    }
-
-  .my_5 {
-    margin-block: var(--spacing-5)
-    }
-
-  .mx_0 {
-    margin-inline: var(--spacing-0)
-    }
-}

package/styled-system/chunks/src__components__empty-state.css

@@ -1,46 +0,0 @@
-@layer utilities {
-
-  .fs_5xl {
-    font-size: var(--font-sizes-5xl)
-    }
-
-  .font_semibold {
-    font-weight: var(--font-weights-semibold)
-    }
-
-  .justify_center {
-    justify-content: center
-    }
-
-  .gap_5 {
-    gap: var(--spacing-5)
-    }
-
-  .h_full {
-    height: var(--sizes-full)
-    }
-
-  .min-h_40vh {
-    min-height: 40vh
-    }
-
-  .d_flex {
-    display: flex
-    }
-
-  .flex_column {
-    flex-direction: column
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .gap_10px {
-    gap: 10px
-    }
-
-  .opacity_0\.8 {
-    opacity: 0.8
-    }
-}

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

@@ -1,86 +0,0 @@
-@layer utilities {
-
-  .fs_100px {
-    font-size: 100px
-    }
-
-  .font_bold {
-    font-weight: var(--font-weights-bold)
-    }
-
-  .leading_1 {
-    line-height: 1
-    }
-
-  .font_semibold {
-    font-weight: var(--font-weights-semibold)
-    }
-
-  .opacity_0\.7 {
-    opacity: 0.7
-    }
-
-  .gap_8 {
-    gap: var(--spacing-8)
-    }
-
-  .flex_column {
-    flex-direction: column
-    }
-
-  .gap_10px {
-    gap: 10px
-    }
-
-  .gap_10 {
-    gap: var(--spacing-10)
-    }
-
-  .flex_row {
-    flex-direction: row
-    }
-
-  .flex-wrap_wrap {
-    flex-wrap: wrap
-    }
-
-  .fs_24px {
-    font-size: 24px
-    }
-
-  .mt_8 {
-    margin-top: var(--spacing-8)
-    }
-
-  .text_uppercase {
-    text-transform: uppercase
-    }
-
-  .d_flex {
-    display: flex
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .justify_center {
-    justify-content: center
-    }
-
-  .flex_0_0_auto {
-    flex: 0 0 auto
-    }
-
-  .w_8 {
-    width: var(--sizes-8)
-    }
-
-  .h_8 {
-    height: var(--sizes-8)
-    }
-
-  .text_lowercase {
-    text-transform: lowercase
-    }
-}

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

@@ -1,62 +0,0 @@
-@layer utilities {
-
-  .mb_3\.5 {
-    margin-bottom: var(--spacing-3\.5)
-    }
-
-  .pos_sticky {
-    position: sticky
-    }
-
-  .top_0 {
-    top: var(--spacing-0)
-    }
-
-  .z_1 {
-    z-index: 1
-    }
-
-  .resize_vertical {
-    resize: vertical
-    }
-
-  .font_medium {
-    font-weight: var(--font-weights-medium)
-    }
-
-  .opacity_0\.4 {
-    opacity: 0.4
-    }
-
-  .fs_4xl {
-    font-size: var(--font-sizes-4xl)
-    }
-
-  .leading_normal {
-    line-height: var(--line-heights-normal)
-    }
-
-  .flex_column {
-    flex-direction: column
-    }
-
-  .gap_3\.5 {
-    gap: var(--spacing-3\.5)
-    }
-
-  .d_flex {
-    display: flex
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .gap_1 {
-    gap: var(--spacing-1)
-    }
-
-  .flex_row {
-    flex-direction: row
-    }
-}

package/styled-system/chunks/src__components__input.css

@@ -1,58 +0,0 @@
-@layer utilities {
-
-  .bg_transparent {
-    background: var(--colors-transparent)
-    }
-
-  .w_full {
-    width: var(--sizes-full)
-    }
-
-  .px_4 {
-    padding-inline: var(--spacing-4)
-    }
-
-  .py_2 {
-    padding-block: var(--spacing-2)
-    }
-
-  .rounded_md {
-    border-radius: var(--radii-md)
-    }
-
-  .text_neutral\.600 {
-    color: var(--colors-neutral-600)
-    }
-
-  .dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300 {
-    color: var(--colors-neutral-300)
-        }
-
-  .shadow_sm {
-    box-shadow: var(--shadows-sm)
-    }
-
-  .border-width_1px {
-    border-width: 1px
-    }
-
-  .border_border {
-    border-color: var(--colors-border)
-    }
-
-  .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)
-        }
-}

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

@@ -1,63 +0,0 @@
-@layer utilities {
-
-  .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)
-    }
-
-  .py_2\.5 {
-    padding-block: var(--spacing-2\.5)
-    }
-
-  .border_card {
-    border-color: var(--colors-card)
-    }
-
-  .fs_small {
-    font-size: small
-    }
-
-  .mt_1\.5 {
-    margin-top: var(--spacing-1\.5)
-    }
-
-  .px_4 {
-    padding-inline: var(--spacing-4)
-    }
-
-  .py_2 {
-    padding-block: var(--spacing-2)
-    }
-
-  .bg_card {
-    background: var(--colors-card)
-    }
-
-  .mt_5 {
-    margin-top: var(--spacing-5)
-    }
-
-  .flex_auto {
-    flex: 1 1 auto
-    }
-
-  .my_3 {
-    margin-block: var(--spacing-3)
-    }
-
-  .h_20 {
-    height: var(--sizes-20)
-    }
-
-  .font_medium {
-    font-weight: var(--font-weights-medium)
-    }
-}