thread-ui 0.1.10 → 0.2.0

package/dist/styles/panda.css

@@ -774,6 +774,14 @@
     padding: 0.5rem;
 }
 
+  .thread-ui-p_16px {
+    padding: 16px;
+}
+
+  .thread-ui-p_5 {
+    padding: var(--thread-ui-spacing-5);
+}
+
   .thread-ui-p_4px_8px {
     padding: 4px 8px;
 }
@@ -782,14 +790,36 @@
     padding: 8px 16px;
 }
 
-  .thread-ui-p_16px {
-    padding: 16px;
-}
-
   .thread-ui-bg_background {
     background: var(--thread-ui-colors-background);
 }
 
+  .thread-ui-px_16px {
+    padding-inline: 16px;
+}
+
+  .thread-ui-py_8px {
+    padding-block: 8px;
+}
+
+  .thread-ui-bd-w_1px {
+    border-width: 1px;
+}
+
+  .thread-ui-border-style_solid {
+    border-style: solid;
+}
+
+  .thread-ui-bd-c_structure {
+    border-color: var(--thread-ui-colors-structure);
+}
+
+  .thread-ui-trs_colors {
+    transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);
+    transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--transition-duration, 150ms);
+}
+
   .thread-ui-flex_1_1_0\% {
     flex: 1 1 0%;
 }
@@ -838,16 +868,32 @@
     border-width: var(--thread-ui-border-widths-md);
 }
 
-  .thread-ui-bd-c_structure {
-    border-color: var(--thread-ui-colors-structure);
+  .thread-ui-gap_8px {
+    gap: 8px;
 }
 
-  .thread-ui-border-style_solid {
-    border-style: solid;
+  .thread-ui-bdr_6px {
+    border-radius: 6px;
 }
 
-  .thread-ui-gap_8px {
-    gap: 8px;
+  .thread-ui-gap_0\.5rem {
+    gap: 0.5rem;
+}
+
+  .thread-ui-bd-w_sm {
+    border-width: var(--thread-ui-border-widths-sm);
+}
+
+  .thread-ui-my_0\.5rem {
+    margin-block: 0.5rem;
+}
+
+  .thread-ui-gap_0\.75rem {
+    gap: 0.75rem;
+}
+
+  .thread-ui-gap_4px {
+    gap: 4px;
 }
 
   .thread-ui-gap_24px {
@@ -866,14 +912,14 @@
     gap: 16px;
 }
 
-  .thread-ui-py_8px {
-    padding-block: 8px;
-}
-
   .thread-ui-my_20px {
     margin-block: 20px;
 }
 
+  .thread-ui-bdr_lg {
+    border-radius: var(--thread-ui-radii-lg);
+}
+
   .thread-ui-my_16px {
     margin-block: 16px;
 }
@@ -882,10 +928,6 @@
     gap: 3rem;
 }
 
-  .thread-ui-px_16px {
-    padding-inline: 16px;
-}
-
   .thread-ui-my_4px {
     margin-block: 4px;
 }
@@ -914,14 +956,6 @@
     transition: all 150ms ease-in-out;
 }
 
-  .thread-ui-gap_4px {
-    gap: 4px;
-}
-
-  .thread-ui-bd-w_1px {
-    border-width: 1px;
-}
-
   .thread-ui-d_flex {
     display: flex;
 }
@@ -930,14 +964,34 @@
     flex-direction: column;
 }
 
-  .thread-ui-jc_center {
-    justify-content: center;
+  .thread-ui-jc_start {
+    justify-content: start;
 }
 
   .thread-ui-ai_center {
     align-items: center;
 }
 
+  .thread-ui-d_block {
+    display: block;
+}
+
+  .thread-ui-as_flex-start {
+    align-self: flex-start;
+}
+
+  .thread-ui-bg-c_gray\.light {
+    background-color: var(--thread-ui-colors-gray-light);
+}
+
+  .thread-ui-resize_vertical {
+    resize: vertical;
+}
+
+  .thread-ui-jc_center {
+    justify-content: center;
+}
+
   .thread-ui-flex-d_row {
     flex-direction: row;
 }
@@ -1038,10 +1092,6 @@
     position: absolute;
 }
 
-  .thread-ui-d_block {
-    display: block;
-}
-
   .thread-ui-cg_24px {
     column-gap: 24px;
 }
@@ -1115,6 +1165,22 @@
     transform: translate(0, -0.324rem) rotate(-45deg);
 }
 
+  .thread-ui-bg-c_surface {
+    background-color: var(--thread-ui-colors-surface);
+}
+
+  .thread-ui-bg-c_elevated {
+    background-color: var(--thread-ui-colors-elevated);
+}
+
+  .thread-ui-bx-sh_0_1px_2px_0_rgb\(0_0_0_\/_0\.05\) {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+  .thread-ui-bx-sh_none {
+    box-shadow: none;
+}
+
   .thread-ui-bg-c_structure {
     background-color: var(--thread-ui-colors-structure);
 }
@@ -1167,6 +1233,22 @@
     width: 100%;
 }
 
+  .thread-ui-pb_4px {
+    padding-bottom: 4px;
+}
+
+  .thread-ui-mb_8px {
+    margin-bottom: 8px;
+}
+
+  .thread-ui-w_auto {
+    width: auto;
+}
+
+  .thread-ui-min-h_100px {
+    min-height: 100px;
+}
+
   .thread-ui-mr_auto {
     margin-right: auto;
 }
@@ -1259,10 +1341,6 @@
     min-height: 100%;
 }
 
-  .thread-ui-w_auto {
-    width: auto;
-}
-
   .thread-ui-min-w_100\% {
     min-width: 100%;
 }
@@ -1275,6 +1353,42 @@
     padding-right: 0.25rem;
 }
 
+  .thread-ui-w_83\% {
+    width: 83%;
+}
+
+  .thread-ui-max-w_576px {
+    max-width: 576px;
+}
+
+  .thread-ui-max-w_672px {
+    max-width: 672px;
+}
+
+  .thread-ui-max-w_896px {
+    max-width: 896px;
+}
+
+  .thread-ui-max-w_16rem {
+    max-width: 16rem;
+}
+
+  .thread-ui-w_9\/12 {
+    width: 75%;
+}
+
+  .thread-ui-w_10\/12 {
+    width: 83.333333%;
+}
+
+  .thread-ui-max-h_300px {
+    max-height: 300px;
+}
+
+  .thread-ui-ov-y_auto {
+    overflow-y: auto;
+}
+
   .thread-ui-top_0px {
     top: 0px;
 }
@@ -1359,6 +1473,22 @@
     margin-right: 32px;
 }
 
+  .thread-ui-max-w_850px {
+    max-width: 850px;
+}
+
+  .thread-ui-max-w_600px {
+    max-width: 600px;
+}
+
+  .thread-ui-mb_1 {
+    margin-bottom: var(--thread-ui-spacing-1);
+}
+
+  .thread-ui-mb_3 {
+    margin-bottom: var(--thread-ui-spacing-3);
+}
+
   .thread-ui-h_0\.5px {
     height: 0.5px;
 }
@@ -1399,6 +1529,18 @@
     background-color: var(--thread-ui-colors-surface);
 }
 
+  .focus\:thread-ui-ring_none:is(:focus, [data-focus]) {
+    outline: var(--thread-ui-borders-none);
+}
+
+  .focus\:thread-ui-bd-c_transparent:is(:focus, [data-focus]) {
+    border-color: var(--thread-ui-colors-transparent);
+}
+
+  .focus\:thread-ui-bx-sh_0_0_0_2px_\{colors\.blue\.500\}:is(:focus, [data-focus]) {
+    box-shadow: 0 0 0 2px var(--thread-ui-colors-blue-500);
+}
+
   .hover\:thread-ui-bd-c_primary\.main:is(:hover, [data-hover]) {
     border-color: var(--thread-ui-colors-primary-main);
 }
@@ -1435,6 +1577,10 @@
     border-color: var(--thread-ui-colors-white);
 }
 
+  .hover\:thread-ui-bg-c_gray\.main:is(:hover, [data-hover]) {
+    background-color: var(--thread-ui-colors-gray-main);
+}
+
   .hover\:thread-ui-bg-c_surface:is(:hover, [data-hover]) {
     background-color: var(--thread-ui-colors-surface);
 }
@@ -1455,10 +1601,6 @@
     background-color: var(--thread-ui-colors-tertiary-main);
 }
 
-  .hover\:thread-ui-bg-c_gray\.main:is(:hover, [data-hover]) {
-    background-color: var(--thread-ui-colors-gray-main);
-}
-
   .hover\:thread-ui-bg-c_success\.main:is(:hover, [data-hover]) {
     background-color: var(--thread-ui-colors-success-main);
 }
@@ -1547,6 +1689,12 @@
 }
     .md\:thread-ui-max-w_800px {
       max-width: 800px;
+}
+    .md\:thread-ui-max-h_none {
+      max-height: none;
+}
+    .md\:thread-ui-ov-y_visible {
+      overflow-y: visible;
 }
     .md\:thread-ui-pl_48px {
       padding-left: 48px;
@@ -1556,15 +1704,24 @@
 }
     .md\:thread-ui-w_50\% {
       width: 50%;
+}
+    .md\:thread-ui-w_75\% {
+      width: 75%;
 }
 }
 
   @media screen and (min-width: 64rem) {
+    .lg\:thread-ui-p_24px {
+      padding: 24px;
+}
     .lg\:thread-ui-flex_none {
       flex: none;
 }
     .lg\:thread-ui-gap_20px {
       gap: 20px;
+}
+    .lg\:thread-ui-gap_0\.75rem {
+      gap: 0.75rem;
 }
     .lg\:thread-ui-border-style_none {
       border-style: none;
@@ -1580,6 +1737,12 @@
 }
     .lg\:thread-ui-flex-d_row {
       flex-direction: row;
+}
+    .lg\:thread-ui-d_none {
+      display: none;
+}
+    .lg\:thread-ui-flex-d_column-reverse {
+      flex-direction: column-reverse;
 }
     .lg\:thread-ui-jc_flex-start {
       justify-content: flex-start;
@@ -1607,9 +1770,6 @@
 }
     .lg\:thread-ui-jc_center {
       justify-content: center;
-}
-    .lg\:thread-ui-d_none {
-      display: none;
 }
     .lg\:thread-ui-grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1646,6 +1806,21 @@
 }
     .lg\:thread-ui-max-w_1400px {
       max-width: 1400px;
+}
+    .lg\:thread-ui-w_4\/12 {
+      width: 33.333333%;
+}
+    .lg\:thread-ui-mt_0\.75rem {
+      margin-top: 0.75rem;
+}
+    .lg\:thread-ui-w_7\/12 {
+      width: 58.333333%;
+}
+    .lg\:thread-ui-max-h_500px {
+      max-height: 500px;
+}
+    .lg\:thread-ui-ov-y_scroll {
+      overflow-y: scroll;
 }
     .lg\:thread-ui-top_0px {
       top: 0px;