@pandacss/studio 0.0.0-dev-20230621093308 → 0.0.0-dev-20230621094608

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230621093308",
+  "version": "0.0.0-dev-20230621094608",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -32,19 +32,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.3.9",
-    "@pandacss/types": "0.0.0-dev-20230621093308",
-    "@pandacss/config": "0.0.0-dev-20230621093308",
-    "@pandacss/shared": "0.0.0-dev-20230621093308",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230621093308",
-    "@pandacss/logger": "0.0.0-dev-20230621093308",
-    "@pandacss/node": "0.0.0-dev-20230621093308"
+    "@pandacss/types": "0.0.0-dev-20230621094608",
+    "@pandacss/config": "0.0.0-dev-20230621094608",
+    "@pandacss/shared": "0.0.0-dev-20230621094608",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230621094608",
+    "@pandacss/logger": "0.0.0-dev-20230621094608",
+    "@pandacss/node": "0.0.0-dev-20230621094608"
   },
   "devDependencies": {
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
     "@vitejs/plugin-react": "4.0.0",
     "execa": "7.1.1",
-    "@pandacss/dev": "0.0.0-dev-20230621093308"
+    "@pandacss/dev": "0.0.0-dev-20230621094608"
   },
   "scripts": {
     "codegen": "panda",

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

@@ -0,0 +1,363 @@
+@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;
+  }
+
+  .styles\:ltr\:sm\:ml_4 {
+    [dir='ltr'] & {
+      @media screen and (min-width: 640px) {
+        margin-left: var(--spacing-4);
+      }
+    }
+  }
+
+  .styles\:rtl\:ml_-4 {
+    [dir='rtl'] & {
+      margin-left: calc(var(--spacing-4) * -1);
+    }
+  }
+
+  .styles\:light\:text_red {
+    &.light,
+    .light & {
+      color: red;
+    }
+  }
+
+  .styles\:dark\:text_green {
+    &.dark,
+    .dark & {
+      color: green;
+    }
+  }
+
+  .styles\:dark\:opacity_slate400 {
+    &.dark,
+    .dark & {
+      opacity: slate400;
+    }
+  }
+
+  .styles\:sm\:rtl\:top_20px {
+    [dir='rtl'] & {
+      @media screen and (min-width: 640px) {
+        top: 20px;
+      }
+    }
+  }
+
+  .styles\:left_20px {
+    left: 20px;
+  }
+
+  .styles\:\[\&_\>_p\]\:left_20px {
+    & > p {
+      left: 20px;
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:md\:left_40px {
+    & > p {
+      @media screen and (min-width: 768px) {
+        left: 40px;
+      }
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:light\:bg_red400 {
+    & > p {
+      &.light,
+      .light & {
+        background: red400;
+      }
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:dark\:bg_green500 {
+    & > p {
+      &.dark,
+      .dark & {
+        background: green500;
+      }
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:rtl\:font_sans {
+    & > p {
+      [dir='rtl'] & {
+        font: sans;
+      }
+    }
+  }
+
+  .styles\:\[\&\:\:placeholder\]\:left_40px {
+    &::placeholder {
+      left: 40px;
+    }
+  }
+
+  .styles\:\[\&\:\:placeholder\]\:bg_red400 {
+    &::placeholder {
+      background: red400;
+    }
+  }
+
+  .styles\:\[\&\:\:placeholder\]\:sm\:text_left {
+    &::placeholder {
+      @media screen and (min-width: 640px) {
+        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;
+    }
+  }
+
+  .styles\:\[\.test_\&\]\:bg_blue {
+    .test & {
+      background-color: blue;
+    }
+  }
+
+  .styles\:\[\&_\.my-class\]\:text_red {
+    & .my-class {
+      color: red;
+    }
+  }
+
+  .styles\:\[\&_span\]\:text_red {
+    & span {
+      color: red;
+    }
+  }
+
+  .styles\:\[\&_kbd\]\:text_red {
+    & kbd {
+      color: red;
+    }
+  }
+
+  .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none {
+    &:focus,
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  .styles\:\[\:focus_\>_\&\]\:text_white {
+    :focus > & {
+      color: var(--colors-white);
+    }
+  }
+
+  .styles\:sm\:hover\:top_50px {
+    &:where(:hover, [data-hover]) {
+      @media screen and (min-width: 640px) {
+        top: 50px;
+      }
+    }
+  }
+
+  .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif {
+    & > p {
+      &:where(:hover, [data-hover]) {
+        [dir='ltr'] & {
+          &.dark,
+          .dark & {
+            @media screen and (min-width: 640px) {
+              font: serif;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .styles\:\[input\:hover_\&\]\:bg_red400 {
+    input:hover & {
+      background: red400;
+    }
+  }
+
+  .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
+    input:hover & {
+      @media screen and (min-width: 640px) {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
+    input:hover & {
+      @media screen and (min-width: 1024px) {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .styles\:hover\:bg_pink\.400 {
+    &:where(:hover, [data-hover]) {
+      background: var(--colors-pink-400);
+    }
+  }
+
+  .styles\:hover\:sm\:dark\:bg_red\.300 {
+    &:where(:hover, [data-hover]) {
+      &.dark,
+      .dark & {
+        @media screen and (min-width: 640px) {
+          background: var(--colors-red-300);
+        }
+      }
+    }
+  }
+
+  .styles\:hover\:text_pink\.400 {
+    &:where(:hover, [data-hover]) {
+      color: var(--colors-pink-400);
+    }
+  }
+
+  .styles\:hover\:disabled\:sm\:bg_red\.300 {
+    &:where(:hover, [data-hover]) {
+      &:where(:disabled, [disabled], [data-disabled]) {
+        @media screen and (min-width: 640px) {
+          background: var(--colors-red-300);
+        }
+      }
+    }
+  }
+
+  .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px {
+    &:hover {
+      @media base {
+        left: 40px;
+      }
+    }
+  }
+
+  .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left {
+    &:hover {
+      @media base {
+        @media screen and (min-width: 640px) {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow {
+    &:hover {
+      @media (min-width: 768px) {
+        background-color: yellow;
+      }
+    }
+  }
+
+  .styles\:sm\:w_60px {
+    @media screen and (min-width: 640px) {
+      width: 60px;
+    }
+  }
+
+  .styles\:sm\:w_60px {
+    @media screen and (min-width: 640px) {
+      width: 60px;
+    }
+  }
+
+  .styles\:lg\:top_120px {
+    @media screen and (min-width: 1024px) {
+      top: 120px;
+    }
+  }
+
+  .styles\:md\:left_40px {
+    @media screen and (min-width: 768px) {
+      left: 40px;
+    }
+  }
+
+  .styles\:\[\@media_base\]\:left_40px {
+    @media base {
+      left: 40px;
+    }
+  }
+
+  .styles\:\[\@media_base\]\:sm\:text_left {
+    @media base {
+      @media screen and (min-width: 640px) {
+        text-align: left;
+      }
+    }
+  }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
+    @media (min-width: 768px) {
+      background-color: green;
+    }
+  }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
+    @media (min-width: 768px) {
+      background-color: green;
+    }
+  }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
+    @media (min-width: 768px) {
+      font-size: $small;
+    }
+  }
+}

package/styled-system/styles.css

@@ -11,6 +11,118 @@
 @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;
+  }
+
   .w_26px {
     width: 26px;
   }
@@ -960,6 +1072,15 @@
     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);
   }
@@ -996,6 +1117,18 @@
     border-bottom-color: var(--colors-black);
   }
 
+  input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
+    background: red400;
+  }
+
+  .styles\:hover\:bg_pink\.400:where(:hover, [data-hover]) {
+    background: var(--colors-pink-400);
+  }
+
+  .styles\:hover\:text_pink\.400:where(:hover, [data-hover]) {
+    color: var(--colors-pink-400);
+  }
+
   .\[\&\:hover\]\:bg_\#4049f0:hover {
     background: #4049f0;
   }
@@ -1008,15 +1141,143 @@
     opacity: 0.8;
   }
 
+  @media screen and (min-width: 640px) {
+    [dir='ltr'] .styles\:ltr\:sm\:ml_4 {
+      margin-left: var(--spacing-4);
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    [dir='rtl'] .styles\:sm\:rtl\:top_20px {
+      top: 20px;
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    .styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
+      text-align: left;
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    .styles\:sm\:hover\:top_50px:where(:hover, [data-hover]) {
+      top: 50px;
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    [dir='ltr'] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:where(:hover, [data-hover]).dark,
+    .dark [dir='ltr'] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:where(:hover, [data-hover]) {
+      font: serif;
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
+      font-size: 14px;
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    .styles\:hover\:sm\:dark\:bg_red\.300:where(:hover, [data-hover]).dark,
+    .dark .styles\:hover\:sm\:dark\:bg_red\.300:where(:hover, [data-hover]) {
+      background: var(--colors-red-300);
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    .styles\:hover\:disabled\:sm\:bg_red\.300:where(:hover, [data-hover]):where(
+        :disabled,
+        [disabled],
+        [data-disabled]
+      ) {
+      background: var(--colors-red-300);
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    .styles\:sm\:w_60px {
+      width: 60px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
+      background-color: yellow;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
+      background-color: green;
+    }
+
+    .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
+      font-size: $small;
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    .styles\:\[\&_\>_p\]\:md\:left_40px > p {
+      left: 40px;
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    .styles\:md\:left_40px {
+      left: 40px;
+    }
+  }
+
   @media screen and (min-width: 768px) {
     .md\:px_6 {
       padding-inline: var(--spacing-6);
     }
   }
 
+  @media screen and (min-width: 1024px) {
+    input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
+      font-size: 18px;
+    }
+  }
+
+  @media screen and (min-width: 1024px) {
+    .styles\:lg\:top_120px {
+      top: 120px;
+    }
+  }
+
   @media screen and (min-width: 1024px) {
     .lg\:px_8 {
       padding-inline: var(--spacing-8);
     }
   }
+
+  @media base {
+    .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
+      left: 40px;
+    }
+  }
+
+  @media base {
+    @media screen and (min-width: 640px) {
+      .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: 640px) {
+      .styles\:\[\@media_base\]\:sm\:text_left {
+        text-align: left;
+      }
+    }
+  }
 }