@pandacss/generator 0.36.0 → 0.37.0

package/dist/index.js

@@ -3696,7 +3696,9 @@ function generateStyleProps(ctx) {
       if (strictPropertyList.has(key)) {
         union.push([utilityValue, "CssVars"].join(" | "));
       } else {
-        union.push([utilityValue, ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | "));
+        union.push(
+          [utilityValue, "CssVars", ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | ")
+        );
       }
     } else {
       union.push([strictPropertyList.has(key) ? "CssVars" : "", cssFallback].filter(Boolean).join(" | "));
@@ -3971,7 +3973,7 @@ function generateThemes(ctx) {
   if (!themes)
     return;
   const { tokens, conditions } = ctx;
-  return Object.entries(themes).map(([name, themeVariant]) => {
+  return Object.entries(themes).map(([name, _themeVariant]) => {
     const results = [];
     const condName = ctx.conditions.getThemeName(name);
     for (const [key, values] of tokens.view.vars.entries()) {
@@ -3988,7 +3990,6 @@ function generateThemes(ctx) {
         (0, import_shared5.compact)({
           name,
           id: getThemeId(name),
-          dataAttr: themeVariant.attribute || name,
           css: results.join("\n\n")
         }),
         null,
@@ -4025,7 +4026,7 @@ function generateThemesIndex(ctx, files) {
       throw new Error('No head found in doc')
     }
 
-    el.dataset.pandaTheme = theme.dataAttr
+    el.dataset.pandaTheme = theme.name
 
     head.appendChild(sheet)
     sheet.innerHTML = theme.css
@@ -4046,7 +4047,6 @@ function generateThemesIndex(ctx, files) {
         return `'${f.name}': {
           id: string,
           name: '${f.name}',
-          dataAttr: '${theme.attribute || f.name}',
           css: string
         }`;
       }).join("\n")}
@@ -4518,39 +4518,7 @@ var generateArtifacts = (ctx, ids) => {
 var generateGlobalCss = (ctx, sheet) => {
   const { globalCss = {} } = ctx.config;
   sheet.processGlobalCss({
-    ":root": {
-      "--made-with-panda": `'\u{1F43C}'`
-    },
-    "*, *::before, *::after, ::backdrop": {
-      "--blur": "/*-*/ /*-*/",
-      "--brightness": "/*-*/ /*-*/",
-      "--contrast": "/*-*/ /*-*/",
-      "--grayscale": "/*-*/ /*-*/",
-      "--hue-rotate": "/*-*/ /*-*/",
-      "--invert": "/*-*/ /*-*/",
-      "--saturate": "/*-*/ /*-*/",
-      "--sepia": "/*-*/ /*-*/",
-      "--drop-shadow": "/*-*/ /*-*/",
-      "--backdrop-blur": "/*-*/ /*-*/",
-      "--backdrop-brightness": "/*-*/ /*-*/",
-      "--backdrop-contrast": "/*-*/ /*-*/",
-      "--backdrop-grayscale": "/*-*/ /*-*/",
-      "--backdrop-hue-rotate": "/*-*/ /*-*/",
-      "--backdrop-invert": "/*-*/ /*-*/",
-      "--backdrop-opacity": "/*-*/ /*-*/",
-      "--backdrop-saturate": "/*-*/ /*-*/",
-      "--backdrop-sepia": "/*-*/ /*-*/",
-      "--scroll-snap-strictness": "proximity",
-      "--border-spacing-x": 0,
-      "--border-spacing-y": 0,
-      "--translate-x": 0,
-      "--translate-y": 0,
-      "--rotate": 0,
-      "--skew-x": 0,
-      "--skew-y": 0,
-      "--scale-x": 1,
-      "--scale-y": 1
-    }
+    ":root": { "--made-with-panda": `'\u{1F43C}'` }
   });
   sheet.processGlobalCss(globalCss);
 };
@@ -4600,93 +4568,141 @@ function generateResetCss(ctx, sheet) {
     selector = `&${scope}`;
   }
   const scoped = {
-    "*": { margin: "0px", padding: "0px", font: "inherit" },
-    "*, *::before, *::after": {
+    "*, ::before, ::after, ::backdrop, ::first-letter, ::file-selector-button": {
+      margin: "0px",
+      padding: "0px",
       boxSizing: "border-box",
       borderWidth: "0px",
       borderStyle: "solid",
       borderColor: "var(--global-color-border, currentColor)"
     },
-    hr: { height: "0px", color: "inherit", borderTopWidth: "1px" },
-    body: { height: "100%" },
-    img: { borderStyle: "none" },
-    "img,  svg,  video,  canvas,  audio,  iframe,  embed,  object": {
+    hr: {
+      height: "0px",
+      color: "inherit",
+      borderTopWidth: "1px"
+    },
+    body: {
+      height: "100%",
+      lineHeight: "inherit"
+    },
+    img: {
+      borderStyle: "none"
+    },
+    "img, svg, video, canvas, audio, iframe, embed, object": {
       display: "block",
       verticalAlign: "middle"
     },
-    "img,  video": { maxWidth: "100%", height: "auto" },
-    "p,  h1,  h2,  h3,  h4,  h5,  h6": { overflowWrap: "break-word" },
-    "ol,  ul": { listStyle: "none" },
-    "code,  kbd,  pre,  samp": { fontSize: "1em" },
-    "button,  [type='button'],  [type='reset'],  [type='submit']": {
-      WebkitAppearance: "button",
-      backgroundColor: "transparent",
-      backgroundImage: "none"
+    "img, video": {
+      maxWidth: "100%",
+      height: "auto"
+    },
+    "h1, h2, h3, h4, h5, h6": {
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textWrap: "balance"
+    },
+    "p, h1, h2, h3, h4, h5, h6": {
+      overflowWrap: "break-word"
+    },
+    "ol, ul, menu": {
+      listStyle: "none"
+    },
+    "button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button": {
+      appearance: "button"
+    },
+    "button, input, optgroup, select, textarea, ::file-selector-button": {
+      font: "inherit",
+      fontFeatureSettings: "inherit",
+      fontVariationSettings: "inherit",
+      letterSpacing: "inherit",
+      color: "inherit",
+      background: "transparent"
+    },
+    "::placeholder": {
+      opacity: 1,
+      "--placeholder-fallback": "color-mix(in srgb, currentColor 50%, transparent)",
+      color: "var(--global-color-placeholder, var(--placeholder-fallback))"
+    },
+    "select, textarea, input:where(:not([type='button'], [type='reset'], [type='submit']))": {
+      borderWidth: "1px",
+      borderStyle: "solid"
+    },
+    textarea: {
+      resize: "vertical"
     },
-    "button,  input,  optgroup,  select,  textarea": { color: "inherit" },
-    "button,  select": { textTransform: "none" },
     table: {
       textIndent: "0px",
       borderColor: "inherit",
       borderCollapse: "collapse"
     },
-    "input::placeholder,  textarea::placeholder": {
-      opacity: 1,
-      color: "var(--global-color-placeholder, #9ca3af)"
+    summary: {
+      display: "list-item"
     },
-    textarea: { resize: "vertical" },
-    summary: { display: "list-item" },
-    small: { fontSize: "80%" },
-    "sub,  sup": {
+    small: {
+      fontSize: "80%"
+    },
+    "sub, sup": {
       fontSize: "75%",
       lineHeight: 0,
       position: "relative",
       verticalAlign: "baseline"
     },
-    sub: { bottom: "-0.25em" },
-    sup: { top: "-0.5em" },
-    dialog: { padding: "0px" },
-    a: { color: "inherit", textDecoration: "inherit" },
-    "abbr:where([title])": { textDecoration: "underline dotted" },
-    "b,  strong": { fontWeight: "bolder" },
-    "code,  kbd,  samp,  pre": {
-      fontSize: "1em",
-      "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
-      fontFamily: "var(--global-font-mono, var(--font-mono-fallback))"
+    sub: {
+      bottom: "-0.25em"
     },
-    'input[type="text"],  input[type="email"],  input[type="search"],  input[type="password"]': {
-      WebkitAppearance: "none",
-      MozAppearance: "none"
+    sup: {
+      top: "-0.5em"
     },
-    "input[type='search']": {
-      WebkitAppearance: "textfield",
-      outlineOffset: "-2px"
+    dialog: {
+      padding: "0px"
     },
-    "::-webkit-search-decoration,  ::-webkit-search-cancel-button": {
-      WebkitAppearance: "none"
+    a: {
+      color: "inherit",
+      textDecoration: "inherit"
     },
-    "::-webkit-file-upload-button": {
-      WebkitAppearance: "button",
-      font: "inherit"
+    "abbr:where([title])": {
+      textDecoration: "underline dotted"
+    },
+    "b, strong": {
+      fontWeight: "bolder"
+    },
+    "code, kbd, samp, pre": {
+      "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
+      fontFamily: "var(--global-font-mono, var(--font-mono-fallback))",
+      fontSize: "1em",
+      fontFeatureSettings: "normal",
+      fontVariationSettings: "normal"
     },
-    'input[type="number"]::-webkit-inner-spin-button,  input[type="number"]::-webkit-outer-spin-button': {
+    progress: {
+      verticalAlign: "baseline"
+    },
+    "::-webkit-search-decoration, ::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    },
+    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
       height: "auto"
     },
-    "input[type='number']": { MozAppearance: "textfield" },
-    ":-moz-ui-invalid": { boxShadow: "none" },
-    ":-moz-focusring": { outline: "auto" },
-    "[hidden]": { display: "none !important" }
+    ":-moz-ui-invalid": {
+      boxShadow: "none"
+    },
+    ":-moz-focusring": {
+      outline: "auto"
+    },
+    "[hidden]": {
+      display: "none !important"
+    }
   };
   const reset = {
-    [scope || "html"]: {
-      lineHeight: 1.5,
+    [scope || "html, :host"]: {
+      lineHeight: "1.5",
       "--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'",
       WebkitTextSizeAdjust: "100%",
       WebkitFontSmoothing: "antialiased",
       MozOsxFontSmoothing: "grayscale",
       MozTabSize: "[4]",
       tabSize: "[4]",
-      fontFamily: "var(--global-font-body, var(--font-fallback))"
+      fontFamily: "var(--global-font-body, var(--font-fallback))",
+      WebkitTapHighlightColor: "transparent"
     }
   };
   if (level === "element") {

package/dist/index.mjs

@@ -3660,7 +3660,9 @@ function generateStyleProps(ctx) {
       if (strictPropertyList.has(key)) {
         union.push([utilityValue, "CssVars"].join(" | "));
       } else {
-        union.push([utilityValue, ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | "));
+        union.push(
+          [utilityValue, "CssVars", ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | ")
+        );
       }
     } else {
       union.push([strictPropertyList.has(key) ? "CssVars" : "", cssFallback].filter(Boolean).join(" | "));
@@ -3935,7 +3937,7 @@ function generateThemes(ctx) {
   if (!themes)
     return;
   const { tokens, conditions } = ctx;
-  return Object.entries(themes).map(([name, themeVariant]) => {
+  return Object.entries(themes).map(([name, _themeVariant]) => {
     const results = [];
     const condName = ctx.conditions.getThemeName(name);
     for (const [key, values] of tokens.view.vars.entries()) {
@@ -3952,7 +3954,6 @@ function generateThemes(ctx) {
         compact2({
           name,
           id: getThemeId(name),
-          dataAttr: themeVariant.attribute || name,
           css: results.join("\n\n")
         }),
         null,
@@ -3989,7 +3990,7 @@ function generateThemesIndex(ctx, files) {
       throw new Error('No head found in doc')
     }
 
-    el.dataset.pandaTheme = theme.dataAttr
+    el.dataset.pandaTheme = theme.name
 
     head.appendChild(sheet)
     sheet.innerHTML = theme.css
@@ -4010,7 +4011,6 @@ function generateThemesIndex(ctx, files) {
         return `'${f.name}': {
           id: string,
           name: '${f.name}',
-          dataAttr: '${theme.attribute || f.name}',
           css: string
         }`;
       }).join("\n")}
@@ -4482,39 +4482,7 @@ var generateArtifacts = (ctx, ids) => {
 var generateGlobalCss = (ctx, sheet) => {
   const { globalCss = {} } = ctx.config;
   sheet.processGlobalCss({
-    ":root": {
-      "--made-with-panda": `'\u{1F43C}'`
-    },
-    "*, *::before, *::after, ::backdrop": {
-      "--blur": "/*-*/ /*-*/",
-      "--brightness": "/*-*/ /*-*/",
-      "--contrast": "/*-*/ /*-*/",
-      "--grayscale": "/*-*/ /*-*/",
-      "--hue-rotate": "/*-*/ /*-*/",
-      "--invert": "/*-*/ /*-*/",
-      "--saturate": "/*-*/ /*-*/",
-      "--sepia": "/*-*/ /*-*/",
-      "--drop-shadow": "/*-*/ /*-*/",
-      "--backdrop-blur": "/*-*/ /*-*/",
-      "--backdrop-brightness": "/*-*/ /*-*/",
-      "--backdrop-contrast": "/*-*/ /*-*/",
-      "--backdrop-grayscale": "/*-*/ /*-*/",
-      "--backdrop-hue-rotate": "/*-*/ /*-*/",
-      "--backdrop-invert": "/*-*/ /*-*/",
-      "--backdrop-opacity": "/*-*/ /*-*/",
-      "--backdrop-saturate": "/*-*/ /*-*/",
-      "--backdrop-sepia": "/*-*/ /*-*/",
-      "--scroll-snap-strictness": "proximity",
-      "--border-spacing-x": 0,
-      "--border-spacing-y": 0,
-      "--translate-x": 0,
-      "--translate-y": 0,
-      "--rotate": 0,
-      "--skew-x": 0,
-      "--skew-y": 0,
-      "--scale-x": 1,
-      "--scale-y": 1
-    }
+    ":root": { "--made-with-panda": `'\u{1F43C}'` }
   });
   sheet.processGlobalCss(globalCss);
 };
@@ -4564,93 +4532,141 @@ function generateResetCss(ctx, sheet) {
     selector = `&${scope}`;
   }
   const scoped = {
-    "*": { margin: "0px", padding: "0px", font: "inherit" },
-    "*, *::before, *::after": {
+    "*, ::before, ::after, ::backdrop, ::first-letter, ::file-selector-button": {
+      margin: "0px",
+      padding: "0px",
       boxSizing: "border-box",
       borderWidth: "0px",
       borderStyle: "solid",
       borderColor: "var(--global-color-border, currentColor)"
     },
-    hr: { height: "0px", color: "inherit", borderTopWidth: "1px" },
-    body: { height: "100%" },
-    img: { borderStyle: "none" },
-    "img,  svg,  video,  canvas,  audio,  iframe,  embed,  object": {
+    hr: {
+      height: "0px",
+      color: "inherit",
+      borderTopWidth: "1px"
+    },
+    body: {
+      height: "100%",
+      lineHeight: "inherit"
+    },
+    img: {
+      borderStyle: "none"
+    },
+    "img, svg, video, canvas, audio, iframe, embed, object": {
       display: "block",
       verticalAlign: "middle"
     },
-    "img,  video": { maxWidth: "100%", height: "auto" },
-    "p,  h1,  h2,  h3,  h4,  h5,  h6": { overflowWrap: "break-word" },
-    "ol,  ul": { listStyle: "none" },
-    "code,  kbd,  pre,  samp": { fontSize: "1em" },
-    "button,  [type='button'],  [type='reset'],  [type='submit']": {
-      WebkitAppearance: "button",
-      backgroundColor: "transparent",
-      backgroundImage: "none"
+    "img, video": {
+      maxWidth: "100%",
+      height: "auto"
+    },
+    "h1, h2, h3, h4, h5, h6": {
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textWrap: "balance"
+    },
+    "p, h1, h2, h3, h4, h5, h6": {
+      overflowWrap: "break-word"
+    },
+    "ol, ul, menu": {
+      listStyle: "none"
+    },
+    "button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button": {
+      appearance: "button"
+    },
+    "button, input, optgroup, select, textarea, ::file-selector-button": {
+      font: "inherit",
+      fontFeatureSettings: "inherit",
+      fontVariationSettings: "inherit",
+      letterSpacing: "inherit",
+      color: "inherit",
+      background: "transparent"
+    },
+    "::placeholder": {
+      opacity: 1,
+      "--placeholder-fallback": "color-mix(in srgb, currentColor 50%, transparent)",
+      color: "var(--global-color-placeholder, var(--placeholder-fallback))"
+    },
+    "select, textarea, input:where(:not([type='button'], [type='reset'], [type='submit']))": {
+      borderWidth: "1px",
+      borderStyle: "solid"
+    },
+    textarea: {
+      resize: "vertical"
     },
-    "button,  input,  optgroup,  select,  textarea": { color: "inherit" },
-    "button,  select": { textTransform: "none" },
     table: {
       textIndent: "0px",
       borderColor: "inherit",
       borderCollapse: "collapse"
     },
-    "input::placeholder,  textarea::placeholder": {
-      opacity: 1,
-      color: "var(--global-color-placeholder, #9ca3af)"
+    summary: {
+      display: "list-item"
     },
-    textarea: { resize: "vertical" },
-    summary: { display: "list-item" },
-    small: { fontSize: "80%" },
-    "sub,  sup": {
+    small: {
+      fontSize: "80%"
+    },
+    "sub, sup": {
       fontSize: "75%",
       lineHeight: 0,
       position: "relative",
       verticalAlign: "baseline"
     },
-    sub: { bottom: "-0.25em" },
-    sup: { top: "-0.5em" },
-    dialog: { padding: "0px" },
-    a: { color: "inherit", textDecoration: "inherit" },
-    "abbr:where([title])": { textDecoration: "underline dotted" },
-    "b,  strong": { fontWeight: "bolder" },
-    "code,  kbd,  samp,  pre": {
-      fontSize: "1em",
-      "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
-      fontFamily: "var(--global-font-mono, var(--font-mono-fallback))"
+    sub: {
+      bottom: "-0.25em"
     },
-    'input[type="text"],  input[type="email"],  input[type="search"],  input[type="password"]': {
-      WebkitAppearance: "none",
-      MozAppearance: "none"
+    sup: {
+      top: "-0.5em"
     },
-    "input[type='search']": {
-      WebkitAppearance: "textfield",
-      outlineOffset: "-2px"
+    dialog: {
+      padding: "0px"
     },
-    "::-webkit-search-decoration,  ::-webkit-search-cancel-button": {
-      WebkitAppearance: "none"
+    a: {
+      color: "inherit",
+      textDecoration: "inherit"
     },
-    "::-webkit-file-upload-button": {
-      WebkitAppearance: "button",
-      font: "inherit"
+    "abbr:where([title])": {
+      textDecoration: "underline dotted"
+    },
+    "b, strong": {
+      fontWeight: "bolder"
+    },
+    "code, kbd, samp, pre": {
+      "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
+      fontFamily: "var(--global-font-mono, var(--font-mono-fallback))",
+      fontSize: "1em",
+      fontFeatureSettings: "normal",
+      fontVariationSettings: "normal"
     },
-    'input[type="number"]::-webkit-inner-spin-button,  input[type="number"]::-webkit-outer-spin-button': {
+    progress: {
+      verticalAlign: "baseline"
+    },
+    "::-webkit-search-decoration, ::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    },
+    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
       height: "auto"
     },
-    "input[type='number']": { MozAppearance: "textfield" },
-    ":-moz-ui-invalid": { boxShadow: "none" },
-    ":-moz-focusring": { outline: "auto" },
-    "[hidden]": { display: "none !important" }
+    ":-moz-ui-invalid": {
+      boxShadow: "none"
+    },
+    ":-moz-focusring": {
+      outline: "auto"
+    },
+    "[hidden]": {
+      display: "none !important"
+    }
   };
   const reset = {
-    [scope || "html"]: {
-      lineHeight: 1.5,
+    [scope || "html, :host"]: {
+      lineHeight: "1.5",
       "--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'",
       WebkitTextSizeAdjust: "100%",
       WebkitFontSmoothing: "antialiased",
       MozOsxFontSmoothing: "grayscale",
       MozTabSize: "[4]",
       tabSize: "[4]",
-      fontFamily: "var(--global-font-body, var(--font-fallback))"
+      fontFamily: "var(--global-font-body, var(--font-fallback))",
+      WebkitTapHighlightColor: "transparent"
     }
   };
   if (level === "element") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.35",
     "ts-pattern": "5.0.8",
-    "@pandacss/core": "0.36.0",
-    "@pandacss/is-valid-prop": "^0.36.0",
-    "@pandacss/logger": "0.36.0",
-    "@pandacss/shared": "0.36.0",
-    "@pandacss/token-dictionary": "0.36.0",
-    "@pandacss/types": "0.36.0"
+    "@pandacss/core": "0.37.0",
+    "@pandacss/is-valid-prop": "^0.37.0",
+    "@pandacss/logger": "0.37.0",
+    "@pandacss/shared": "0.37.0",
+    "@pandacss/token-dictionary": "0.37.0",
+    "@pandacss/types": "0.37.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"