@pandacss/node 0.0.0-dev-20230124104736 → 0.0.0-dev-20230125082549

package/dist/index.d.ts

@@ -50,6 +50,7 @@ declare function createContext(conf: LoadConfigResult, io?: IO): {
         format(file: string): string;
         write(file: string, css: string): Promise<void[]>;
         rm(file: string): Promise<void>;
+        empty(): Promise<void>;
         glob: string[];
     };
     files: string[];
@@ -147,6 +148,7 @@ declare function createContext(conf: LoadConfigResult, io?: IO): {
         file: string;
     } | undefined)[]>;
     hash?: boolean | undefined;
+    prefix?: string | undefined;
     separator?: "-" | "_" | "=" | undefined;
     static?: _pandacss_types.StaticCssOptions | undefined;
     minify?: boolean | undefined;
@@ -158,7 +160,6 @@ declare function createContext(conf: LoadConfigResult, io?: IO): {
     presets?: string[] | undefined;
     preflight?: boolean | undefined;
     clean?: boolean | undefined;
-    cssVarPrefix?: string | undefined;
     watch?: boolean | undefined;
     poll?: boolean | undefined;
     globalCss?: _pandacss_types.GlobalStyleObject | undefined;
@@ -208,6 +209,7 @@ declare class Builder {
             format(file: string): string;
             write(file: string, css: string): Promise<void[]>;
             rm(file: string): Promise<void>;
+            empty(): Promise<void>;
             glob: string[];
         };
         files: string[];
@@ -305,6 +307,7 @@ declare class Builder {
             file: string;
         } | undefined)[]>;
         hash?: boolean | undefined;
+        prefix?: string | undefined;
         separator?: "-" | "_" | "=" | undefined;
         static?: _pandacss_types.StaticCssOptions | undefined;
         minify?: boolean | undefined;
@@ -316,7 +319,6 @@ declare class Builder {
         presets?: string[] | undefined;
         preflight?: boolean | undefined;
         clean?: boolean | undefined;
-        cssVarPrefix?: string | undefined;
         watch?: boolean | undefined;
         poll?: boolean | undefined;
         globalCss?: _pandacss_types.GlobalStyleObject | undefined;
@@ -358,6 +360,7 @@ declare function loadConfigAndCreateContext(options?: {
         format(file: string): string;
         write(file: string, css: string): Promise<void[]>;
         rm(file: string): Promise<void>;
+        empty(): Promise<void>;
         glob: string[];
     };
     files: string[];
@@ -455,6 +458,7 @@ declare function loadConfigAndCreateContext(options?: {
         file: string;
     } | undefined)[]>;
     hash?: boolean | undefined;
+    prefix?: string | undefined;
     separator?: "-" | "_" | "=" | undefined;
     static?: _pandacss_types.StaticCssOptions | undefined;
     minify?: boolean | undefined;
@@ -466,7 +470,6 @@ declare function loadConfigAndCreateContext(options?: {
     presets?: string[] | undefined;
     preflight?: boolean | undefined;
     clean?: boolean | undefined;
-    cssVarPrefix?: string | undefined;
     watch?: boolean | undefined;
     poll?: boolean | undefined;
     globalCss?: _pandacss_types.GlobalStyleObject | undefined;

package/dist/index.js

@@ -209,7 +209,7 @@ function generateCssFn(ctx) {
     export declare function css(styles: SystemStyleObject): string
     `,
     js: import_outdent2.outdent`
-    ${ctx.getImport("createCss, createMergeCss, withoutSpace", "../helpers")}
+    ${ctx.getImport("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.getImport("sortConditions, finalizeConditions", "./conditions")}
 
     const classNameMap = ${stringify(utility.entries())}
@@ -224,7 +224,7 @@ function generateCssFn(ctx) {
 
     function transform(prop, value) {
       const key = resolveShorthand(prop)
-      const propKey = classNameMap[key] || prop
+      const propKey = classNameMap[key] || hypenateProperty(key)
       const className = \`$\{propKey}${separator}$\{withoutSpace(value)}\`
       return { className }
     }
@@ -237,6 +237,7 @@ function generateCssFn(ctx) {
         breakpoints: { keys: breakpointKeys }
       },
       utility: {
+        prefix: ${ctx.prefix ? JSON.stringify(ctx.prefix) : void 0},
         transform,
         hasShorthand,
         resolveShorthand,
@@ -426,47 +427,39 @@ function generatePreactLayoutGrid() {
     import { FunctionComponent } from 'preact'
 
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
     `,
     js: import_outdent6.outdent`
+    import { h } from 'preact'
+
     export function LayoutGrid(props) {
-        const { count = 12, margin, gutter = '24px', maxWidth } = props
-        const hasMaxWidth = maxWidth != null;
-        return (
-          <div
-            style={{
-              display: 'grid',
-              gap: gutter,
-              gridTemplateColumns: \`repeat(\${count}, 1fr)\`,
-              height: '100%',
-              width: '100%',
-              position: 'absolute',
-              inset: '0',
-              pointerEvents: 'none',
-              maxWidth: hasMaxWidth ? maxWidth : 'initial',
-              marginInline: hasMaxWidth ? 'auto' : undefined,
-              paddingInline: !hasMaxWidth ? margin : undefined,
-            }}
-          >
-            {Array.from({ length: count }).map((_, i) => (
-              <span
-                key={i}
-                style={{
-                  display: 'flex',
-                  background: 'rgba(255, 0, 0, 0.1)',
-                  height: '100%',
-                }}
-              />
-            ))}
-          </div>
-        );
-      }
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
+      const hasMaxWidth = maxWidth != null
+      return h('div', {
+        className: 'panda-layout-grid',
+        style: {
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
+        },
+        children: Array.from({ length: count }).map((_, i) =>
+        h('span', {
+            'data-variant': outline ? 'outline' : 'bg',
+            key: i,
+            className: 'panda-layout-grid__item',
+          }),
+        ),
+      });
+    }
     `
   };
 }
@@ -628,10 +621,11 @@ function generateReactLayoutGrid() {
     import type { FunctionComponent } from 'react'
 
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
@@ -640,30 +634,22 @@ function generateReactLayoutGrid() {
     import { createElement } from 'react'
 
     export function LayoutGrid(props) {
-      const { count = 12, margin, gutter = '24px', maxWidth } = props
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
       const hasMaxWidth = maxWidth != null
       return createElement('div', {
+        className: 'panda-layout-grid',
         style: {
-          display: 'grid',
-          gap: gutter,
-          gridTemplateColumns: \`repeat(\${count}, 1fr)\`,
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-          inset: '0',
-          pointerEvents: 'none',
-          maxWidth: hasMaxWidth ? maxWidth : 'initial',
-          marginInline: hasMaxWidth ? 'auto' : undefined,
-          paddingInline: !hasMaxWidth ? margin : undefined,
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
         },
         children: Array.from({ length: count }).map((_, i) =>
           createElement('span', {
+            'data-variant': outline ? 'outline' : 'bg',
             key: i,
-            style: {
-              display: 'flex',
-              background: 'rgba(255, 0, 0, 0.1)',
-              height: '100%',
-            },
+            className: 'panda-layout-grid__item',
           }),
         ),
       })
@@ -838,10 +824,11 @@ function generateSolidLayoutGrid() {
     import type { ParentProps } from 'solid-js'
     
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: ParentProps<LayoutGridProps>
@@ -850,21 +837,16 @@ function generateSolidLayoutGrid() {
     import { createComponent, For } from 'solid-js/web'
 
     export function LayoutGrid(props) {
-      const { count = 12, margin, gutter = '24px', maxWidth } = props
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
       const hasMaxWidth = maxWidth != null
       return createComponent('div', {
+        className: 'panda-layout-grid',
         style: {
-          display: 'grid',
-          gap: gutter,
-          'grid-template-columns': \`repeat(\${count}, 1fr)\`,
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-          inset: '0',
-          'pointer-events': 'none',
-          'max-width': hasMaxWidth ? maxWidth : 'initial',
-          'margin-inline': hasMaxWidth ? 'auto' : undefined,
-          'padding-inline': !hasMaxWidth ? margin : undefined,
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
         },
         get children() {
           return createComponent(For, {
@@ -873,11 +855,8 @@ function generateSolidLayoutGrid() {
             },
             children: () =>
               createComponent('span', {
-                style: {
-                  display: 'flex',
-                  background: 'rgba(255, 0, 0, 0.1)',
-                  height: '100%',
-                },
+                'data-variant': outline ? 'outline' : 'bg',
+                className: 'panda-layout-grid__item',
               }),
           })
         },
@@ -1160,6 +1139,7 @@ function generateRecipes(ctx) {
       const context = {
         hash: ${hash ? "true" : "false"},
         utility: {
+          prefix: ${ctx.prefix ? JSON.stringify(ctx.prefix) : void 0},
           transform,
         }
       }
@@ -1415,21 +1395,22 @@ function generateTokenJs(dict) {
     js: import_outdent21.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
-  export function token(path) {
-    const { value } = tokens[path] || {}
-    return value
+  export function token(path, fallback) {
+    return tokens[path]?.value || fallback
   }
   
-  function tokenVar(path) {
-    const { variable } = tokens[path] || {}
-    return variable
+  function tokenVar(path, fallback) {
+    return tokens[path]?.variable || fallback
   }
 
   token.var = tokenVar
   `,
     dts: import_outdent21.default`
   import type { Token } from '../types/token'
-  export declare function token(path: Token): string & { var: (path: Token) => string }
+
+  export declare function token(path: Token, fallback?: string): string & {
+    var: (path: Token, fallback?: string) => string
+  }
   `
   };
 }
@@ -1585,7 +1566,7 @@ function setupPatterns(ctx) {
     return;
   const index = {
     js: import_outdent23.default.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
-    dts: import_outdent23.default.string(files.map((file) => `export { ${file.name} } from './${file.name}'`).join("\n"))
+    dts: import_outdent23.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -1834,7 +1815,7 @@ function createContext(conf, io = fileSystem) {
   const {
     cwd: cwdProp = process.cwd(),
     conditions: conditionsProp = {},
-    cssVarPrefix,
+    prefix,
     cssVarRoot = ":where(:root, :host)",
     outdir,
     exclude: excludeProp = [],
@@ -1871,11 +1852,12 @@ function createContext(conf, io = fileSystem) {
     tokens: tokensProp,
     breakpoints,
     semanticTokens,
-    prefix: cssVarPrefix
+    prefix
   });
   const hasTokens = !tokens.isEmpty;
   import_logger4.logger.debug({ type: "ctx:token", msg: tokens.allNames });
   const utility = new import_core3.Utility({
+    prefix,
     tokens,
     config: utilities,
     separator
@@ -2038,6 +2020,9 @@ function createContext(conf, io = fileSystem) {
       const fileName = chunks.format(file);
       return io.rm((0, import_path2.join)(paths.chunk, fileName));
     },
+    empty() {
+      return (0, import_fs_extra2.emptyDir)(paths.chunk);
+    },
     glob: [`${paths.chunk}/**/*.css`]
   };
   function getFiles() {
@@ -2100,6 +2085,30 @@ function createContext(conf, io = fileSystem) {
     sheet.processGlobalCss({
       ":root": {
         "--made-with-panda": `'\u{1F43C}'`
+      },
+      ".panda-layout-grid": {
+        display: "grid",
+        gap: "var(--gutter)",
+        gridTemplateColumns: "repeat(var(--count), 1fr)",
+        height: "100%",
+        width: "100%",
+        position: "absolute",
+        inset: "0",
+        pointerEvents: "none",
+        maxWidth: "var(--max-width)",
+        marginInline: "var(--margin-x)",
+        paddingInline: "var(--padding-x)"
+      },
+      ".panda-layout-grid__item": {
+        display: "flex",
+        "--color": "rgba(255, 0, 0, 0.1)",
+        height: "100%",
+        "&[data-variant=bg]": {
+          background: "var(--color)"
+        },
+        "&[data-variant=outline]": {
+          borderInline: "1px solid var(--color)"
+        }
       }
     });
     if (globalCss) {

package/dist/index.mjs

@@ -162,7 +162,7 @@ function generateCssFn(ctx) {
     export declare function css(styles: SystemStyleObject): string
     `,
     js: outdent2`
-    ${ctx.getImport("createCss, createMergeCss, withoutSpace", "../helpers")}
+    ${ctx.getImport("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.getImport("sortConditions, finalizeConditions", "./conditions")}
 
     const classNameMap = ${stringify(utility.entries())}
@@ -177,7 +177,7 @@ function generateCssFn(ctx) {
 
     function transform(prop, value) {
       const key = resolveShorthand(prop)
-      const propKey = classNameMap[key] || prop
+      const propKey = classNameMap[key] || hypenateProperty(key)
       const className = \`$\{propKey}${separator}$\{withoutSpace(value)}\`
       return { className }
     }
@@ -190,6 +190,7 @@ function generateCssFn(ctx) {
         breakpoints: { keys: breakpointKeys }
       },
       utility: {
+        prefix: ${ctx.prefix ? JSON.stringify(ctx.prefix) : void 0},
         transform,
         hasShorthand,
         resolveShorthand,
@@ -379,47 +380,39 @@ function generatePreactLayoutGrid() {
     import { FunctionComponent } from 'preact'
 
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
     `,
     js: outdent6`
+    import { h } from 'preact'
+
     export function LayoutGrid(props) {
-        const { count = 12, margin, gutter = '24px', maxWidth } = props
-        const hasMaxWidth = maxWidth != null;
-        return (
-          <div
-            style={{
-              display: 'grid',
-              gap: gutter,
-              gridTemplateColumns: \`repeat(\${count}, 1fr)\`,
-              height: '100%',
-              width: '100%',
-              position: 'absolute',
-              inset: '0',
-              pointerEvents: 'none',
-              maxWidth: hasMaxWidth ? maxWidth : 'initial',
-              marginInline: hasMaxWidth ? 'auto' : undefined,
-              paddingInline: !hasMaxWidth ? margin : undefined,
-            }}
-          >
-            {Array.from({ length: count }).map((_, i) => (
-              <span
-                key={i}
-                style={{
-                  display: 'flex',
-                  background: 'rgba(255, 0, 0, 0.1)',
-                  height: '100%',
-                }}
-              />
-            ))}
-          </div>
-        );
-      }
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
+      const hasMaxWidth = maxWidth != null
+      return h('div', {
+        className: 'panda-layout-grid',
+        style: {
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
+        },
+        children: Array.from({ length: count }).map((_, i) =>
+        h('span', {
+            'data-variant': outline ? 'outline' : 'bg',
+            key: i,
+            className: 'panda-layout-grid__item',
+          }),
+        ),
+      });
+    }
     `
   };
 }
@@ -581,10 +574,11 @@ function generateReactLayoutGrid() {
     import type { FunctionComponent } from 'react'
 
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
@@ -593,30 +587,22 @@ function generateReactLayoutGrid() {
     import { createElement } from 'react'
 
     export function LayoutGrid(props) {
-      const { count = 12, margin, gutter = '24px', maxWidth } = props
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
       const hasMaxWidth = maxWidth != null
       return createElement('div', {
+        className: 'panda-layout-grid',
         style: {
-          display: 'grid',
-          gap: gutter,
-          gridTemplateColumns: \`repeat(\${count}, 1fr)\`,
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-          inset: '0',
-          pointerEvents: 'none',
-          maxWidth: hasMaxWidth ? maxWidth : 'initial',
-          marginInline: hasMaxWidth ? 'auto' : undefined,
-          paddingInline: !hasMaxWidth ? margin : undefined,
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
         },
         children: Array.from({ length: count }).map((_, i) =>
           createElement('span', {
+            'data-variant': outline ? 'outline' : 'bg',
             key: i,
-            style: {
-              display: 'flex',
-              background: 'rgba(255, 0, 0, 0.1)',
-              height: '100%',
-            },
+            className: 'panda-layout-grid__item',
           }),
         ),
       })
@@ -791,10 +777,11 @@ function generateSolidLayoutGrid() {
     import type { ParentProps } from 'solid-js'
     
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: ParentProps<LayoutGridProps>
@@ -803,21 +790,16 @@ function generateSolidLayoutGrid() {
     import { createComponent, For } from 'solid-js/web'
 
     export function LayoutGrid(props) {
-      const { count = 12, margin, gutter = '24px', maxWidth } = props
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
       const hasMaxWidth = maxWidth != null
       return createComponent('div', {
+        className: 'panda-layout-grid',
         style: {
-          display: 'grid',
-          gap: gutter,
-          'grid-template-columns': \`repeat(\${count}, 1fr)\`,
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-          inset: '0',
-          'pointer-events': 'none',
-          'max-width': hasMaxWidth ? maxWidth : 'initial',
-          'margin-inline': hasMaxWidth ? 'auto' : undefined,
-          'padding-inline': !hasMaxWidth ? margin : undefined,
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
         },
         get children() {
           return createComponent(For, {
@@ -826,11 +808,8 @@ function generateSolidLayoutGrid() {
             },
             children: () =>
               createComponent('span', {
-                style: {
-                  display: 'flex',
-                  background: 'rgba(255, 0, 0, 0.1)',
-                  height: '100%',
-                },
+                'data-variant': outline ? 'outline' : 'bg',
+                className: 'panda-layout-grid__item',
               }),
           })
         },
@@ -1113,6 +1092,7 @@ function generateRecipes(ctx) {
       const context = {
         hash: ${hash ? "true" : "false"},
         utility: {
+          prefix: ${ctx.prefix ? JSON.stringify(ctx.prefix) : void 0},
           transform,
         }
       }
@@ -1368,21 +1348,22 @@ function generateTokenJs(dict) {
     js: outdent21`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
-  export function token(path) {
-    const { value } = tokens[path] || {}
-    return value
+  export function token(path, fallback) {
+    return tokens[path]?.value || fallback
   }
   
-  function tokenVar(path) {
-    const { variable } = tokens[path] || {}
-    return variable
+  function tokenVar(path, fallback) {
+    return tokens[path]?.variable || fallback
   }
 
   token.var = tokenVar
   `,
     dts: outdent21`
   import type { Token } from '../types/token'
-  export declare function token(path: Token): string & { var: (path: Token) => string }
+
+  export declare function token(path: Token, fallback?: string): string & {
+    var: (path: Token, fallback?: string) => string
+  }
   `
   };
 }
@@ -1538,7 +1519,7 @@ function setupPatterns(ctx) {
     return;
   const index = {
     js: outdent23.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
-    dts: outdent23.string(files.map((file) => `export { ${file.name} } from './${file.name}'`).join("\n"))
+    dts: outdent23.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -1794,7 +1775,7 @@ function createContext(conf, io = fileSystem) {
   const {
     cwd: cwdProp = process.cwd(),
     conditions: conditionsProp = {},
-    cssVarPrefix,
+    prefix,
     cssVarRoot = ":where(:root, :host)",
     outdir,
     exclude: excludeProp = [],
@@ -1831,11 +1812,12 @@ function createContext(conf, io = fileSystem) {
     tokens: tokensProp,
     breakpoints,
     semanticTokens,
-    prefix: cssVarPrefix
+    prefix
   });
   const hasTokens = !tokens.isEmpty;
   logger4.debug({ type: "ctx:token", msg: tokens.allNames });
   const utility = new Utility({
+    prefix,
     tokens,
     config: utilities,
     separator
@@ -1998,6 +1980,9 @@ function createContext(conf, io = fileSystem) {
       const fileName = chunks.format(file);
       return io.rm(join2(paths.chunk, fileName));
     },
+    empty() {
+      return emptyDir(paths.chunk);
+    },
     glob: [`${paths.chunk}/**/*.css`]
   };
   function getFiles() {
@@ -2060,6 +2045,30 @@ function createContext(conf, io = fileSystem) {
     sheet.processGlobalCss({
       ":root": {
         "--made-with-panda": `'\u{1F43C}'`
+      },
+      ".panda-layout-grid": {
+        display: "grid",
+        gap: "var(--gutter)",
+        gridTemplateColumns: "repeat(var(--count), 1fr)",
+        height: "100%",
+        width: "100%",
+        position: "absolute",
+        inset: "0",
+        pointerEvents: "none",
+        maxWidth: "var(--max-width)",
+        marginInline: "var(--margin-x)",
+        paddingInline: "var(--padding-x)"
+      },
+      ".panda-layout-grid__item": {
+        display: "flex",
+        "--color": "rgba(255, 0, 0, 0.1)",
+        height: "100%",
+        "&[data-variant=bg]": {
+          background: "var(--color)"
+        },
+        "&[data-variant=outline]": {
+          borderInline: "1px solid var(--color)"
+        }
       }
     });
     if (globalCss) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20230124104736",
+  "version": "0.0.0-dev-20230125082549",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,15 +30,15 @@
     "javascript-stringify": "2.1.0",
     "ts-pattern": "4.1.3",
     "ts-morph": "17.0.1",
-    "@pandacss/types": "0.0.0-dev-20230124104736",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230124104736",
-    "@pandacss/error": "0.0.0-dev-20230124104736",
-    "@pandacss/parser": "0.0.0-dev-20230124104736",
-    "@pandacss/shared": "0.0.0-dev-20230124104736",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230124104736",
-    "@pandacss/logger": "0.0.0-dev-20230124104736",
-    "@pandacss/core": "0.0.0-dev-20230124104736",
-    "@pandacss/config": "0.0.0-dev-20230124104736"
+    "@pandacss/types": "0.0.0-dev-20230125082549",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230125082549",
+    "@pandacss/error": "0.0.0-dev-20230125082549",
+    "@pandacss/parser": "0.0.0-dev-20230125082549",
+    "@pandacss/shared": "0.0.0-dev-20230125082549",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230125082549",
+    "@pandacss/logger": "0.0.0-dev-20230125082549",
+    "@pandacss/core": "0.0.0-dev-20230125082549",
+    "@pandacss/config": "0.0.0-dev-20230125082549"
   },
   "devDependencies": {
     "@types/fs-extra": "11.0.1",
@@ -46,7 +46,7 @@
     "@types/glob-parent": "^5.1.1",
     "@types/pluralize": "0.0.29",
     "@types/lodash.merge": "4.6.7",
-    "@pandacss/fixture": "0.0.0-dev-20230124104736"
+    "@pandacss/fixture": "0.0.0-dev-20230125082549"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",