@pandacss/studio 0.0.0-dev-20230918163156 → 0.0.0-dev-20230919112631

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230918163156",
+  "version": "0.0.0-dev-20230919112631",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,19 +33,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.9",
-    "@pandacss/types": "0.0.0-dev-20230918163156",
-    "@pandacss/config": "0.0.0-dev-20230918163156",
-    "@pandacss/shared": "0.0.0-dev-20230918163156",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230918163156",
-    "@pandacss/logger": "0.0.0-dev-20230918163156",
-    "@pandacss/node": "0.0.0-dev-20230918163156"
+    "@pandacss/types": "0.0.0-dev-20230919112631",
+    "@pandacss/config": "0.0.0-dev-20230919112631",
+    "@pandacss/shared": "0.0.0-dev-20230919112631",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230919112631",
+    "@pandacss/logger": "0.0.0-dev-20230919112631",
+    "@pandacss/node": "0.0.0-dev-20230919112631"
   },
   "devDependencies": {
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "4.0.4",
     "execa": "7.2.0",
-    "@pandacss/dev": "0.0.0-dev-20230918163156"
+    "@pandacss/dev": "0.0.0-dev-20230919112631"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/reset.css

@@ -20,7 +20,6 @@
       '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-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -moz-tab-size: 4;
@@ -164,24 +163,39 @@
     font-family: var(--global-font-mono, var(--font-fallback));
   }
 
-  [type='search'] {
+
+  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;
   }
 
-  ::-webkit-search-decoration {
+  ::-webkit-search-decoration,
+  ::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
 
   ::-webkit-file-upload-button {
     -webkit-appearance: button;
+    font: inherit;
   }
 
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
     height: auto;
   }
 
+  input[type='number']{
+    -moz-appearance: textfield;
+  }
+
   :-moz-ui-invalid {
     box-shadow: none;
   }

package/styled-system/styles.css

@@ -11,154 +11,6 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
-  .styles\:text_red\! {
-    color: red !important
-    }
-
-  .styles\:fs_30px\! {
-    font-size: 30px !important
-    }
-
-  .styles\:bg_red\.300 {
-    background: var(--colors-red-300)
-    }
-
-  .styles\:w_20px {
-    width: 20px
-    }
-
-  .styles\:w_70px {
-    width: 70px
-    }
-
-  .styles\:w_50px {
-    width: 50px
-    }
-
-  [dir=rtl] .styles\:rtl\:ml_-4 {
-    margin-left: calc(var(--spacing-4) * -1)
-        }
-
-  .styles\:light\:text_red.light, .light .styles\:light\:text_red {
-    color: red
-        }
-
-  .styles\:dark\:text_green.dark, .dark .styles\:dark\:text_green {
-    color: green
-        }
-
-  .styles\:dark\:opacity_slate400.dark, .dark .styles\:dark\:opacity_slate400 {
-    opacity: slate400
-        }
-
-  .styles\:left_20px,.styles\:\[\&_\>_p\]\:left_20px > p {
-    left: 20px
-        }
-
-  .styles\:\[\&_\>_p\]\:light\:bg_red400 > p.light, .light .styles\:\[\&_\>_p\]\:light\:bg_red400 > p {
-    background: red400
-            }
-
-  .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p.dark, .dark .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p {
-    background: green500
-            }
-
-  [dir=rtl] .styles\:\[\&_\>_p\]\:rtl\:font_sans > p {
-    font: sans
-            }
-
-  .styles\:\[\&\:\:placeholder\]\:left_40px::placeholder {
-    left: 40px
-        }
-
-  .styles\:\[\&\:\:placeholder\]\:bg_red400::placeholder {
-    background: red400
-        }
-
-  .styles\:all_unset {
-    all: unset
-    }
-
-  .styles\:bg_red {
-    background-color: red
-    }
-
-  .styles\:border_none {
-    border: var(--borders-none)
-    }
-
-  .styles\:p_\$3_\$3 {
-    padding: $3 $3
-    }
-
-  .styles\:rounded_\$button {
-    border-radius: $button
-    }
-
-  .styles\:fs_\$xsmall {
-    font-size: $xsmall
-    }
-
-  .styles\:cursor_pointer {
-    cursor: pointer
-    }
-
-  .styles\:\[\&_\+_span\]\:ml_\$2 + span {
-    margin-left: $2
-        }
-
-  .test .styles\:\[\.test_\&\]\:bg_blue {
-    background-color: blue
-        }
-
-  .styles\:\[\&_\.my-class\]\:text_red .my-class,.styles\:\[\&_span\]\:text_red span,.styles\:\[\&_kbd\]\:text_red kbd {
-    color: red
-        }
-
-  .\ \*\:text_token\(colors\.red\.400\) {
-    color: var(--colors-red-400)
-    }
-
-  .\ \*\:border_1px_solid_token\(colors\.blue\.400\) {
-    border: 1px solid var(--colors-blue-400)
-    }
-
-  .\ \*\:background-image_linear-gradient\(token\(colors\.red\.400\)\,_token\(colors\.blue\.400\)\) {
-    background-image: linear-gradient(var(--colors-red-400), var(--colors-blue-400))
-    }
-
-  .\ \*\:text_token\(colors\.red\) {
-    color: colors.red
-    }
-
-  .\ \*\:border_1px_solid_token\(colors\.blue\) {
-    border: 1px solid colors.blue
-    }
-
-  .\ \*\:background-image_linear-gradient\(token\(colors\.red\)\,_token\(colors\.blue\)\) {
-    background-image: linear-gradient(colors.red, colors.blue)
-    }
-
-  .\ \*\:text_token\(colors\.red\,_colors\.blue\) {
-    color: var(colors.red, colors.blue)
-    }
-
-  .\ \*\:text_token\(colors\.magenta\,_pink\) {
-    color: var(colors.magenta, pink)
-    }
-
-  .\ \*\:text_token\(colors\.red\.400\,_colors\.blue\.400\) {
-    color: var(--colors-red-400, var(--colors-blue-400))
-    }
-
-  .\ \*\:text_token\(colors\.doesntexist\.400\,_pink\) {
-    color: var('colors.doesntexist.400', pink)
-    }
-
-  .\[\.\[\@container_\(min-width\:_token\(sizes\.4xl\)\)\]\:text_green\]\:\[\@container_\(min-width\:_token\(sizes\.4xl\,_1280px\)\)\]\:\[\@layer_utilities\]\:text_green {
-    color: green
-    }
-
   .w_26px {
     width: 26px;
   }
@@ -1108,14 +960,6 @@
     outline-color: var(--colors-neutral-400);
     }
 
-  .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:focus, .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:hover {
-    box-shadow: none
-        }
-
-  :focus > .styles\:\[\:focus_\>_\&\]\:text_white {
-    color: var(--colors-white)
-        }
-
   .hover\:bg_gray\.100:where(:hover, [data-hover]) {
     background-color: var(--colors-gray-100);
     }
@@ -1152,18 +996,6 @@
     border-bottom-color: var(--colors-black);
     }
 
-  input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
-    background: red400
-        }
-
-  .styles\:hover\:bg_pink\.400:is(:hover, [data-hover]) {
-    background: var(--colors-pink-400)
-        }
-
-  .styles\:hover\:text_pink\.400:is(:hover, [data-hover]) {
-    color: var(--colors-pink-400)
-        }
-
   .\[\&\:hover\]\:bg_\#4049f0:hover {
     background: #4049f0;
     }
@@ -1176,78 +1008,6 @@
     opacity: 0.8;
       }
 
-  @media screen and (min-width: 40em) {
-    [dir=ltr] .styles\:ltr\:sm\:ml_4 {
-      margin-left: var(--spacing-4)
-        }
-
-    [dir=rtl] .styles\:sm\:rtl\:top_20px {
-      top: 20px
-        }
-            }
-
-  @media screen and (min-width: 40em) {
-    .styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
-      text-align: left
-        }
-            }
-
-  @media screen and (min-width: 40em) {
-    .styles\:sm\:hover\:top_50px:is(:hover, [data-hover]) {
-      top: 50px
-        }
-            }
-
-  @media screen and (min-width: 40em) {
-    [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]).dark, .dark [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]) {
-      font: serif
-                    }
-                        }
-
-  @media screen and (min-width: 40em) {
-    input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
-      font-size: 14px
-        }
-            }
-
-  @media screen and (min-width: 40em) {
-    .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]).dark, .dark .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]) {
-      background: var(--colors-red-300)
-            }
-                }
-
-  @media screen and (min-width: 40em) {
-    .styles\:hover\:disabled\:sm\:bg_red\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-      background: var(--colors-red-300)
-            }
-                }
-
-  @media screen and (min-width: 40em) {
-    .styles\:sm\:w_60px {
-      width: 60px
-    }
-        }
-
-  @media (min-width: 768px) {
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
-      background-color: green
-    }
-
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
-      font-size: $small
-    }
-
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
-      background-color: yellow
-        }
-            }
-
-  @media screen and (min-width: 48em) {
-    .styles\:\[\&_\>_p\]\:md\:left_40px > p,.styles\:md\:left_40px {
-      left: 40px
-    }
-            }
-
   @media screen and (min-width: 768px) {
     .md\:px_6 {
       padding-inline: var(--spacing-6)
@@ -1259,42 +1019,4 @@
       padding-inline: var(--spacing-8)
   }
     }
-
-  @media screen and (min-width: 64em) {
-    .styles\:lg\:top_120px {
-      top: 120px
-    }
-
-    input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
-      font-size: 18px
-        }
-            }
-
-  @media base {
-    .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
-      left: 40px
-        }
-            }
-
-  @media base {
-    @media screen and (min-width: 40em) {
-      .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left:hover {
-        text-align: left
-        }
-                }
-            }
-
-  @media base {
-    .styles\:\[\@media_base\]\:left_40px {
-      left: 40px
-    }
-        }
-
-  @media base {
-    @media screen and (min-width: 40em) {
-      .styles\:\[\@media_base\]\:sm\:text_left {
-        text-align: left
-    }
-            }
-        }
 }

package/styled-system/chunks/..__core____tests____atomic-rule.test.css

@@ -1,216 +0,0 @@
-@layer utilities {
-  .styles\:text_red\! {
-    color: red !important
-    }
-
-  .styles\:fs_30px\! {
-    font-size: 30px !important
-    }
-
-  .styles\:bg_red\.300 {
-    background: var(--colors-red-300)
-    }
-
-  .styles\:w_20px {
-    width: 20px
-    }
-
-  .styles\:w_70px {
-    width: 70px
-    }
-
-  .styles\:w_50px {
-    width: 50px
-    }
-      @media screen and (min-width: 40em) {
-    [dir=ltr] .styles\:ltr\:sm\:ml_4 {
-        margin-left: var(--spacing-4)
-        }
-            }
-    [dir=rtl] .styles\:rtl\:ml_-4 {
-      margin-left: calc(var(--spacing-4) * -1)
-        }
-    .styles\:light\:text_red.light, .light .styles\:light\:text_red {
-      color: red
-        }
-    .styles\:dark\:text_green.dark, .dark .styles\:dark\:text_green {
-      color: green
-        }
-    .styles\:dark\:opacity_slate400.dark, .dark .styles\:dark\:opacity_slate400 {
-      opacity: slate400
-        }
-      @media screen and (min-width: 40em) {
-    [dir=rtl] .styles\:sm\:rtl\:top_20px {
-        top: 20px
-        }
-            }
-    .styles\:left_20px,.styles\:\[\&_\>_p\]\:left_20px > p {
-      left: 20px
-        }
-      @media screen and (min-width: 48em) {
-    .styles\:\[\&_\>_p\]\:md\:left_40px > p {
-        left: 40px
-        }
-            }
-      .styles\:\[\&_\>_p\]\:light\:bg_red400 > p.light, .light .styles\:\[\&_\>_p\]\:light\:bg_red400 > p {
-        background: red400
-            }
-      .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p.dark, .dark .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p {
-        background: green500
-            }
-      [dir=rtl] .styles\:\[\&_\>_p\]\:rtl\:font_sans > p {
-        font: sans
-            }
-    .styles\:\[\&\:\:placeholder\]\:left_40px::placeholder {
-      left: 40px
-        }
-    .styles\:\[\&\:\:placeholder\]\:bg_red400::placeholder {
-      background: red400
-        }
-      @media screen and (min-width: 40em) {
-    .styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
-        text-align: left
-        }
-            }
-
-  .styles\:all_unset {
-    all: unset
-    }
-
-  .styles\:bg_red {
-    background-color: red
-    }
-
-  .styles\:border_none {
-    border: var(--borders-none)
-    }
-
-  .styles\:p_\$3_\$3 {
-    padding: $3 $3
-    }
-
-  .styles\:rounded_\$button {
-    border-radius: $button
-    }
-
-  .styles\:fs_\$xsmall {
-    font-size: $xsmall
-    }
-
-  .styles\:cursor_pointer {
-    cursor: pointer
-    }
-    .styles\:\[\&_\+_span\]\:ml_\$2 + span {
-      margin-left: $2
-        }
-    .test .styles\:\[\.test_\&\]\:bg_blue {
-      background-color: blue
-        }
-    .styles\:\[\&_\.my-class\]\:text_red .my-class,.styles\:\[\&_span\]\:text_red span,.styles\:\[\&_kbd\]\:text_red kbd {
-      color: red
-        }
-    .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:focus, .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:hover {
-      box-shadow: none
-        }
-    :focus > .styles\:\[\:focus_\>_\&\]\:text_white {
-      color: var(--colors-white)
-        }
-      @media screen and (min-width: 40em) {
-    .styles\:sm\:hover\:top_50px:is(:hover, [data-hover]) {
-        top: 50px
-        }
-            }
-            @media screen and (min-width: 40em) {
-          [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]).dark, .dark [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]) {
-              font: serif
-                    }
-                        }
-    input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
-      background: red400
-        }
-      @media screen and (min-width: 40em) {
-    input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
-        font-size: 14px
-        }
-            }
-      @media screen and (min-width: 64em) {
-    input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
-        font-size: 18px
-        }
-            }
-    .styles\:hover\:bg_pink\.400:is(:hover, [data-hover]) {
-      background: var(--colors-pink-400)
-        }
-        @media screen and (min-width: 40em) {
-      .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]).dark, .dark .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]) {
-          background: var(--colors-red-300)
-            }
-                }
-    .styles\:hover\:text_pink\.400:is(:hover, [data-hover]) {
-      color: var(--colors-pink-400)
-        }
-        @media screen and (min-width: 40em) {
-      .styles\:hover\:disabled\:sm\:bg_red\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-          background: var(--colors-red-300)
-            }
-                }
-      @media base {
-    .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
-        left: 40px
-        }
-            }
-      @media base {
-        @media screen and (min-width: 40em) {
-    .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left:hover {
-          text-align: left
-        }
-                }
-            }
-      @media (min-width: 768px) {
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
-        background-color: yellow
-        }
-            }
-    @media screen and (min-width: 40em) {
-
-  .styles\:sm\:w_60px {
-      width: 60px
-    }
-        }
-    @media screen and (min-width: 64em) {
-
-  .styles\:lg\:top_120px {
-      top: 120px
-    }
-        }
-    @media screen and (min-width: 48em) {
-
-  .styles\:md\:left_40px {
-      left: 40px
-    }
-        }
-    @media base {
-
-  .styles\:\[\@media_base\]\:left_40px {
-      left: 40px
-    }
-        }
-    @media base {
-      @media screen and (min-width: 40em) {
-
-  .styles\:\[\@media_base\]\:sm\:text_left {
-        text-align: left
-    }
-            }
-        }
-    @media (min-width: 768px) {
-
-  .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
-      background-color: green
-    }
-
-  .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
-      font-size: $small
-    }
-        }
-}

package/styled-system/chunks/..__core____tests____expand-token-fn.test.css

@@ -1,45 +0,0 @@
-@layer utilities {
-  .\ \*\:text_token\(colors\.red\.400\) {
-    color: var(--colors-red-400)
-    }
-
-  .\ \*\:border_1px_solid_token\(colors\.blue\.400\) {
-    border: 1px solid var(--colors-blue-400)
-    }
-
-  .\ \*\:background-image_linear-gradient\(token\(colors\.red\.400\)\,_token\(colors\.blue\.400\)\) {
-    background-image: linear-gradient(var(--colors-red-400), var(--colors-blue-400))
-    }
-
-  .\ \*\:text_token\(colors\.red\) {
-    color: colors.red
-    }
-
-  .\ \*\:border_1px_solid_token\(colors\.blue\) {
-    border: 1px solid colors.blue
-    }
-
-  .\ \*\:background-image_linear-gradient\(token\(colors\.red\)\,_token\(colors\.blue\)\) {
-    background-image: linear-gradient(colors.red, colors.blue)
-    }
-
-  .\ \*\:text_token\(colors\.red\,_colors\.blue\) {
-    color: var(colors.red, colors.blue)
-    }
-
-  .\ \*\:text_token\(colors\.magenta\,_pink\) {
-    color: var(colors.magenta, pink)
-    }
-
-  .\ \*\:text_token\(colors\.red\.400\,_colors\.blue\.400\) {
-    color: var(--colors-red-400, var(--colors-blue-400))
-    }
-
-  .\ \*\:text_token\(colors\.doesntexist\.400\,_pink\) {
-    color: var('colors.doesntexist.400', pink)
-    }
-
-  .\[\.\[\@container_\(min-width\:_token\(sizes\.4xl\)\)\]\:text_green\]\:\[\@container_\(min-width\:_token\(sizes\.4xl\,_1280px\)\)\]\:\[\@layer_utilities\]\:text_green {
-    color: green
-    }
-}