thread-ui 0.1.11 → 0.3.0

package/dist/styled-system/tokens/index.mjs

@@ -1808,39 +1808,39 @@ const tokens = {
     "variable": "var(--thread-ui-breakpoints-2xl)"
   },
   "colors.background": {
-    "value": "var(--thread-ui-colors-background)",
+    "value": "var(--thread-background)",
     "variable": "var(--thread-ui-colors-background)"
   },
   "colors.surface": {
-    "value": "var(--thread-ui-colors-surface)",
+    "value": "var(--thread-surface)",
     "variable": "var(--thread-ui-colors-surface)"
   },
   "colors.elevated": {
-    "value": "var(--thread-ui-colors-elevated)",
+    "value": "var(--thread-elevated)",
     "variable": "var(--thread-ui-colors-elevated)"
   },
   "colors.structure": {
-    "value": "var(--thread-ui-colors-structure)",
+    "value": "var(--thread-structure)",
     "variable": "var(--thread-ui-colors-structure)"
   },
   "colors.text.standard": {
-    "value": "var(--thread-ui-colors-text-standard)",
+    "value": "var(--thread-text-standard)",
     "variable": "var(--thread-ui-colors-text-standard)"
   },
   "colors.text.secondary": {
-    "value": "var(--thread-ui-colors-text-secondary)",
+    "value": "var(--thread-text-secondary)",
     "variable": "var(--thread-ui-colors-text-secondary)"
   },
   "colors.text.disabled": {
-    "value": "var(--thread-ui-colors-text-disabled)",
+    "value": "var(--thread-text-disabled)",
     "variable": "var(--thread-ui-colors-text-disabled)"
   },
   "colors.text.accent": {
-    "value": "var(--thread-ui-colors-text-accent)",
+    "value": "var(--thread-text-accent)",
     "variable": "var(--thread-ui-colors-text-accent)"
   },
   "colors.text.inverted": {
-    "value": "var(--thread-ui-colors-text-inverted)",
+    "value": "var(--thread-text-inverted)",
     "variable": "var(--thread-ui-colors-text-inverted)"
   },
   "spacing.-1": {

package/dist/styles/panda.css

@@ -677,18 +677,6 @@
     --thread-ui-colors-text-inverted: var(--thread-text-inverted);
 }
 
-  .dark {
-    --thread-ui-colors-background: var(--thread-background-dark-mode);
-    --thread-ui-colors-surface: var(--thread-surface-dark-mode);
-    --thread-ui-colors-elevated: var(--thread-elevated-dark-mode);
-    --thread-ui-colors-structure: var(--thread-structure-dark-mode);
-    --thread-ui-colors-text-standard: var(--thread-text-standard-dark-mode);
-    --thread-ui-colors-text-secondary: var(--thread-text-secondary-dark-mode);
-    --thread-ui-colors-text-disabled: var(--thread-text-disabled-dark-mode);
-    --thread-ui-colors-text-accent: var(--thread-text-accent-dark-mode);
-    --thread-ui-colors-text-inverted: var(--thread-text-inverted-dark-mode)
-}
-
   @keyframes spin {
     to {
       transform: rotate(360deg);
@@ -758,10 +746,121 @@
   .thread-ui-button--fullWidth_false {
     width: fit-content;
 }
+
+  .thread-ui-button--color_secondary {
+    border-color: var(--thread-ui-colors-secondary-main);
+    background-color: var(--thread-ui-colors-secondary-main);
+}
+
+  .thread-ui-button--color_secondary:is(:hover, [data-hover]) {
+    border-color: var(--thread-ui-colors-secondary-main);
+    background-color: var(--thread-ui-colors-background);
+    color: var(--thread-ui-colors-secondary-main);
+}
+
+  .thread-ui-button--color_tertiary {
+    border-color: var(--thread-ui-colors-tertiary-main);
+    background-color: var(--thread-ui-colors-tertiary-main);
+}
+
+  .thread-ui-button--color_tertiary:is(:hover, [data-hover]) {
+    border-color: var(--thread-ui-colors-tertiary-main);
+    background-color: var(--thread-ui-colors-background);
+    color: var(--thread-ui-colors-tertiary-main);
+}
+
+  .thread-ui-button--color_black {
+    border-color: var(--thread-ui-colors-white);
+    background-color: var(--thread-ui-colors-black);
+}
+
+  .thread-ui-button--color_black:is(:hover, [data-hover]) {
+    border-color: var(--thread-ui-colors-black);
+    background-color: var(--thread-ui-colors-white);
+    color: var(--thread-ui-colors-black);
+}
+
+  .thread-ui-button--color_gray {
+    border-color: var(--thread-ui-colors-gray-main);
+    background-color: var(--thread-ui-colors-gray-main);
+}
+
+  .thread-ui-button--color_gray:is(:hover, [data-hover]) {
+    border-color: var(--thread-ui-colors-gray-main);
+    background-color: var(--thread-ui-colors-background);
+    color: var(--thread-ui-colors-gray-main);
+}
+
+  .thread-ui-button--color_success {
+    border-color: var(--thread-ui-colors-success-main);
+    background-color: var(--thread-ui-colors-success-main);
+}
+
+  .thread-ui-button--color_success:is(:hover, [data-hover]) {
+    border-color: var(--thread-ui-colors-success-main);
+    background-color: var(--thread-ui-colors-background);
+    color: var(--thread-ui-colors-success-main);
+}
+
+  .thread-ui-button--color_error {
+    border-color: var(--thread-ui-colors-error-main);
+    background-color: var(--thread-ui-colors-error-main);
+}
+
+  .thread-ui-button--color_error:is(:hover, [data-hover]) {
+    border-color: var(--thread-ui-colors-error-main);
+    background-color: var(--thread-ui-colors-background);
+    color: var(--thread-ui-colors-error-main);
+}
+
+  .thread-ui-button--color_info {
+    border-color: var(--thread-ui-colors-info-main);
+    background-color: var(--thread-ui-colors-info-main);
+}
+
+  .thread-ui-button--color_info:is(:hover, [data-hover]) {
+    border-color: var(--thread-ui-colors-info-main);
+    background-color: var(--thread-ui-colors-background);
+    color: var(--thread-ui-colors-info-main);
+}
+
+  .thread-ui-button--color_text {
+    border-color: var(--thread-ui-colors-text-standard);
+    background-color: var(--thread-ui-colors-text-standard);
+}
+
+  .thread-ui-button--color_text:is(:hover, [data-hover]) {
+    border-color: var(--thread-ui-colors-text-standard);
+    background-color: var(--thread-ui-colors-background);
+    color: var(--thread-ui-colors-text-standard);
+}
+
+  .thread-ui-button--size_sm {
+    padding: 4px;
+    font-size: 0.75rem;
+}
+
+  .thread-ui-button--size_lg {
+    padding: 12px;
+    font-size: 1.25rem;
+}
+
+  .thread-ui-button--fullWidth_true {
+    width: 100%;
+}
+
+  .thread-ui-button--disabled_true {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
 }
 
 @layer thread-utilities{
 
+  .thread-ui-p_3 {
+    padding: var(--thread-ui-spacing-3);
+}
+
   .thread-ui-m_auto {
     margin: auto;
 }
@@ -774,6 +873,14 @@
     padding: 0.5rem;
 }
 
+  .thread-ui-p_4 {
+    padding: var(--thread-ui-spacing-4);
+}
+
+  .thread-ui-p_5 {
+    padding: var(--thread-ui-spacing-5);
+}
+
   .thread-ui-p_4px_8px {
     padding: 4px 8px;
 }
@@ -790,6 +897,44 @@
     background: var(--thread-ui-colors-background);
 }
 
+  .thread-ui-bd-w_md {
+    border-width: var(--thread-ui-border-widths-md);
+}
+
+  .thread-ui-bd-c_gray\.light {
+    border-color: var(--thread-ui-colors-gray-light);
+}
+
+  .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-bdr_md {
+    border-radius: var(--thread-ui-radii-md);
+}
+
+  .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%;
 }
@@ -822,32 +967,40 @@
     border-radius: 50%;
 }
 
-  .thread-ui-bdr_4px {
-    border-radius: 4px;
+  .thread-ui-bdr_sm {
+    border-radius: var(--thread-ui-radii-sm);
 }
 
   .thread-ui-mx_0 {
     margin-inline: var(--thread-ui-spacing-0);
 }
 
-  .thread-ui-bdr_md {
-    border-radius: var(--thread-ui-radii-md);
+  .thread-ui-gap_2 {
+    gap: var(--thread-ui-spacing-2);
 }
 
-  .thread-ui-bd-w_md {
-    border-width: var(--thread-ui-border-widths-md);
+  .thread-ui-gap_3 {
+    gap: var(--thread-ui-spacing-3);
 }
 
-  .thread-ui-bd-c_structure {
-    border-color: var(--thread-ui-colors-structure);
+  .thread-ui-gap_0\.5rem {
+    gap: 0.5rem;
 }
 
-  .thread-ui-border-style_solid {
-    border-style: solid;
+  .thread-ui-bd-w_sm {
+    border-width: var(--thread-ui-border-widths-sm);
 }
 
-  .thread-ui-gap_8px {
-    gap: 8px;
+  .thread-ui-my_0\.5rem {
+    margin-block: 0.5rem;
+}
+
+  .thread-ui-gap_0\.75rem {
+    gap: 0.75rem;
+}
+
+  .thread-ui-gap_1 {
+    gap: var(--thread-ui-spacing-1);
 }
 
   .thread-ui-gap_24px {
@@ -858,32 +1011,28 @@
     outline: 2px solid transparent;
 }
 
-  .thread-ui-bdr_sm {
-    border-radius: var(--thread-ui-radii-sm);
-}
-
   .thread-ui-gap_16px {
     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;
 }
 
-  .thread-ui-gap_3rem {
-    gap: 3rem;
+  .thread-ui-gap_12 {
+    gap: var(--thread-ui-spacing-12);
 }
 
-  .thread-ui-px_16px {
-    padding-inline: 16px;
+  .thread-ui-gap_8px {
+    gap: 8px;
 }
 
   .thread-ui-my_4px {
@@ -918,10 +1067,6 @@
     gap: 4px;
 }
 
-  .thread-ui-bd-w_1px {
-    border-width: 1px;
-}
-
   .thread-ui-d_flex {
     display: flex;
 }
@@ -930,14 +1075,67 @@
     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-bdr-ss_lg {
+    border-start-start-radius: var(--thread-ui-radii-lg);
+}
+
+  .thread-ui-bdr-es_lg {
+    border-end-start-radius: var(--thread-ui-radii-lg);
+}
+
+  .thread-ui-bdr-se_lg {
+    border-start-end-radius: var(--thread-ui-radii-lg);
+}
+
+  .thread-ui-bdr-ee_lg {
+    border-end-end-radius: var(--thread-ui-radii-lg);
+}
+
+  .thread-ui-ta_center {
+    text-align: center;
+}
+
+  .thread-ui-fs_sm {
+    font-size: var(--thread-ui-font-sizes-sm);
+}
+
+  .thread-ui-ap_none {
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+  .thread-ui-jc_center {
+    justify-content: center;
+}
+
+  .thread-ui-as_start {
+    align-self: start;
+}
+
+  .thread-ui-resize_vertical {
+    resize: vertical;
+}
+
   .thread-ui-flex-d_row {
     flex-direction: row;
 }
@@ -954,8 +1152,8 @@
     column-count: 2;
 }
 
-  .thread-ui-cg_8px {
-    column-gap: 8px;
+  .thread-ui-cg_2 {
+    column-gap: var(--thread-ui-spacing-2);
 }
 
   .thread-ui-d_inline-block {
@@ -1038,10 +1236,6 @@
     position: absolute;
 }
 
-  .thread-ui-d_block {
-    display: block;
-}
-
   .thread-ui-cg_24px {
     column-gap: 24px;
 }
@@ -1115,6 +1309,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 +1377,30 @@
     width: 100%;
 }
 
+  .thread-ui-pb_4px {
+    padding-bottom: 4px;
+}
+
+  .thread-ui-mb_2 {
+    margin-bottom: var(--thread-ui-spacing-2);
+}
+
+  .thread-ui-h_11 {
+    height: var(--thread-ui-sizes-11);
+}
+
+  .thread-ui-w_16 {
+    width: var(--thread-ui-sizes-16);
+}
+
+  .thread-ui-w_auto {
+    width: auto;
+}
+
+  .thread-ui-min-h_25 {
+    min-height: 25px;
+}
+
   .thread-ui-mr_auto {
     margin-right: auto;
 }
@@ -1227,6 +1461,10 @@
     height: 48px;
 }
 
+  .thread-ui-mt_2 {
+    margin-top: var(--thread-ui-spacing-2);
+}
+
   .thread-ui-h_100\% {
     height: 100%;
 }
@@ -1259,10 +1497,6 @@
     min-height: 100%;
 }
 
-  .thread-ui-w_auto {
-    width: auto;
-}
-
   .thread-ui-min-w_100\% {
     min-width: 100%;
 }
@@ -1275,6 +1509,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 +1629,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;
 }
@@ -1395,10 +1681,39 @@
     top: var(--thread-ui-spacing-0);
 }
 
+  .\[\&\:\:-webkit-outer-spin-button\]\:thread-ui-ap_none::-webkit-outer-spin-button,.\[\&\:\:-webkit-inner-spin-button\]\:thread-ui-ap_none::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+}
+
   .dark .dark\:thread-ui-bg-c_surface {
     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_blue\.500:is(:focus, [data-focus]) {
+    border-color: var(--thread-ui-colors-blue-500);
+}
+
+  .focus\:thread-ui-bd-c_transparent:is(:focus, [data-focus]) {
+    border-color: var(--thread-ui-colors-transparent);
+}
+
+  .focus\:thread-ui-ring-c_gray\.100:is(:focus, [data-focus]) {
+    outline-color: var(--thread-ui-colors-gray-100);
+}
+
+  .focus\:thread-ui-ring-c_blue\.500:is(:focus, [data-focus]) {
+    outline-color: var(--thread-ui-colors-blue-500);
+}
+
+  .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 +1750,10 @@
     border-color: var(--thread-ui-colors-white);
 }
 
+  .hover\:thread-ui-bg-c_gray\.100:is(:hover, [data-hover]) {
+    background-color: var(--thread-ui-colors-gray-100);
+}
+
   .hover\:thread-ui-bg-c_surface:is(:hover, [data-hover]) {
     background-color: var(--thread-ui-colors-surface);
 }
@@ -1547,6 +1866,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,21 +1881,30 @@
 }
     .md\:thread-ui-w_50\% {
       width: 50%;
+}
+    .md\:thread-ui-w_75\% {
+      width: 75%;
 }
 }
 
   @media screen and (min-width: 64rem) {
+    .lg\:thread-ui-p_6 {
+      padding: var(--thread-ui-spacing-6);
+}
     .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;
 }
-    .lg\:thread-ui-gap_1\.5rem {
-      gap: 1.5rem;
+    .lg\:thread-ui-gap_6 {
+      gap: var(--thread-ui-spacing-6);
 }
     .lg\:thread-ui-column-count_4 {
       column-count: 4;
@@ -1580,6 +1914,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 +1947,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 +1983,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;