thread-ui 0.2.0 → 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,8 +873,8 @@
     padding: 0.5rem;
 }
 
-  .thread-ui-p_16px {
-    padding: 16px;
+  .thread-ui-p_4 {
+    padding: var(--thread-ui-spacing-4);
 }
 
   .thread-ui-p_5 {
@@ -790,10 +889,22 @@
     padding: 8px 16px;
 }
 
+  .thread-ui-p_16px {
+    padding: 16px;
+}
+
   .thread-ui-bg_background {
     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;
 }
@@ -814,6 +925,10 @@
     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));
@@ -852,28 +967,20 @@
     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-bd-w_md {
-    border-width: var(--thread-ui-border-widths-md);
-}
-
-  .thread-ui-gap_8px {
-    gap: 8px;
+  .thread-ui-gap_2 {
+    gap: var(--thread-ui-spacing-2);
 }
 
-  .thread-ui-bdr_6px {
-    border-radius: 6px;
+  .thread-ui-gap_3 {
+    gap: var(--thread-ui-spacing-3);
 }
 
   .thread-ui-gap_0\.5rem {
@@ -892,8 +999,8 @@
     gap: 0.75rem;
 }
 
-  .thread-ui-gap_4px {
-    gap: 4px;
+  .thread-ui-gap_1 {
+    gap: var(--thread-ui-spacing-1);
 }
 
   .thread-ui-gap_24px {
@@ -904,10 +1011,6 @@
     outline: 2px solid transparent;
 }
 
-  .thread-ui-bdr_sm {
-    border-radius: var(--thread-ui-radii-sm);
-}
-
   .thread-ui-gap_16px {
     gap: 16px;
 }
@@ -924,8 +1027,12 @@
     margin-block: 16px;
 }
 
-  .thread-ui-gap_3rem {
-    gap: 3rem;
+  .thread-ui-gap_12 {
+    gap: var(--thread-ui-spacing-12);
+}
+
+  .thread-ui-gap_8px {
+    gap: 8px;
 }
 
   .thread-ui-my_4px {
@@ -956,6 +1063,10 @@
     transition: all 150ms ease-in-out;
 }
 
+  .thread-ui-gap_4px {
+    gap: 4px;
+}
+
   .thread-ui-d_flex {
     display: flex;
 }
@@ -984,14 +1095,47 @@
     background-color: var(--thread-ui-colors-gray-light);
 }
 
-  .thread-ui-resize_vertical {
-    resize: vertical;
+  .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;
 }
@@ -1008,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 {
@@ -1237,16 +1381,24 @@
     padding-bottom: 4px;
 }
 
-  .thread-ui-mb_8px {
-    margin-bottom: 8px;
+  .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_100px {
-    min-height: 100px;
+  .thread-ui-min-h_25 {
+    min-height: 25px;
 }
 
   .thread-ui-mr_auto {
@@ -1309,6 +1461,10 @@
     height: 48px;
 }
 
+  .thread-ui-mt_2 {
+    margin-top: var(--thread-ui-spacing-2);
+}
+
   .thread-ui-h_100\% {
     height: 100%;
 }
@@ -1525,6 +1681,11 @@
     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);
 }
@@ -1533,10 +1694,22 @@
     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);
 }
@@ -1577,8 +1750,8 @@
     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_gray\.100:is(:hover, [data-hover]) {
+    background-color: var(--thread-ui-colors-gray-100);
 }
 
   .hover\:thread-ui-bg-c_surface:is(:hover, [data-hover]) {
@@ -1601,6 +1774,10 @@
     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);
 }
@@ -1711,8 +1888,8 @@
 }
 
   @media screen and (min-width: 64rem) {
-    .lg\:thread-ui-p_24px {
-      padding: 24px;
+    .lg\:thread-ui-p_6 {
+      padding: var(--thread-ui-spacing-6);
 }
     .lg\:thread-ui-flex_none {
       flex: none;
@@ -1726,8 +1903,8 @@
     .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;

package/dist/styles/thread.css

@@ -1,4 +1,4 @@
-/* Custom Theme Implementation */
+/* Thread Theme Implementation */
 :root {
 	/* Generic Theme Elements */
 	--thread-primary-light: #5a7d6a;
@@ -73,8 +73,21 @@
 	--thread-text-inverted: var(--thread-text-inverted-light-mode);
 }
 
+:root[data-theme='light'] {
+	/* Light Mode Color Override */
+	--thread-background: var(--thread-background-light-mode);
+	--thread-surface: var(--thread-surface-light-mode);
+	--thread-elevated: var(--thread-elevated-light-mode);
+	--thread-structure: var(--thread-structure-light-mode);
+	--thread-text-standard: var(--thread-text-standard-light-mode);
+	--thread-text-secondary: var(--thread-text-secondary-light-mode);
+	--thread-text-disabled: var(--thread-text-disabled-light-mode);
+	--thread-text-accent: var(--thread-text-accent-light-mode);
+	--thread-text-inverted: var(--thread-text-inverted-light-mode);
+}
+
 :root[data-theme='dark'] {
-	/* Apply Dark Mode Colors */
+	/* Dark Mode Color Override */
 	--thread-background: var(--thread-background-dark-mode);
 	--thread-surface: var(--thread-surface-dark-mode);
 	--thread-elevated: var(--thread-elevated-dark-mode);

package/dist/theme/default-theme.js

@@ -67,9 +67,9 @@ export const DefaultThreadTheme = {
     },
     // Sizing
     borderRadius: {
-        sm: '0.25rem',
-        md: '0.375rem',
-        lg: '0.5rem',
+        sm: '0.25rem', // 4px
+        md: '0.375rem', // 6px
+        lg: '0.5rem', // 8px
     },
     borderSize: {
         sm: '1px',

package/dist/theme/default-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../../src/theme/default-theme.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAoB;IAClD,gBAAgB;IAChB,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,SAAS,EAAE;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,QAAQ,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,iBAAiB;IACjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,gBAAgB;IAChB,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,KAAK,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,IAAI,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,4BAA4B;IAC5B,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,yBAAyB;IACzB,IAAI,EAAE;QACL,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,SAAS,EAAE,2BAA2B;QAC9C,QAAQ,EAAE,SAAS,EAAE,sCAAsC;KAC3D;IACD,YAAY;IACZ,WAAW,EAAE;QACZ,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,MAAM;KACX;IACD,SAAS;IACT,YAAY,EAAE;QACb,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,UAAU;QACd,EAAE,EAAE,QAAQ;KACZ;IACD,UAAU,EAAE;QACX,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;KACT;IACD,mBAAmB;IACnB,QAAQ,EAAE;QACT,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;QACpB,IAAI,EAAE;YACL,QAAQ,EAAE,SAAS;YACnB,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,SAAS;YACnB,MAAM,EAAE,SAAS,EAAE,2BAA2B;YAC9C,QAAQ,EAAE,SAAS,EAAE,uCAAuC;SAC5D;KACD;CACD,CAAC"}
+{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../../src/theme/default-theme.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAoB;IAClD,gBAAgB;IAChB,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,SAAS,EAAE;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,QAAQ,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,iBAAiB;IACjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,gBAAgB;IAChB,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,KAAK,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,IAAI,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,4BAA4B;IAC5B,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,yBAAyB;IACzB,IAAI,EAAE;QACL,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,SAAS,EAAE,2BAA2B;QAC9C,QAAQ,EAAE,SAAS,EAAE,sCAAsC;KAC3D;IACD,YAAY;IACZ,WAAW,EAAE;QACZ,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,MAAM;KACX;IACD,SAAS;IACT,YAAY,EAAE;QACb,EAAE,EAAE,SAAS,EAAE,MAAM;QACrB,EAAE,EAAE,UAAU,EAAE,MAAM;QACtB,EAAE,EAAE,QAAQ,EAAE,MAAM;KACpB;IACD,UAAU,EAAE;QACX,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;KACT;IACD,mBAAmB;IACnB,QAAQ,EAAE;QACT,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;QACpB,IAAI,EAAE;YACL,QAAQ,EAAE,SAAS;YACnB,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,SAAS;YACnB,MAAM,EAAE,SAAS,EAAE,2BAA2B;YAC9C,QAAQ,EAAE,SAAS,EAAE,uCAAuC;SAC5D;KACD;CACD,CAAC"}

package/dist/theme/generate-override-css.d.ts

@@ -0,0 +1,7 @@
+import { ThemeConfig } from '../types';
+/**
+ * Generates a CSS :root block containing only the variable declarations
+ * for values present in the provided ThemeConfig override.
+ */
+export declare function generateOverrideCss(overrides: ThemeConfig): string;
+//# sourceMappingURL=generate-override-css.d.ts.map

package/dist/theme/generate-override-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-override-css.d.ts","sourceRoot":"","sources":["../../src/theme/generate-override-css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AAOzD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,CA+ClE"}

package/dist/theme/generate-override-css.js

@@ -0,0 +1,66 @@
+import { PrefixedDarkModeVariables, PrefixedLightModeVariables, ThemeCssVariableNames, } from '../theme/css-name-configurations/theme-css-names';
+/**
+ * Generates a CSS :root block containing only the variable declarations
+ * for values present in the provided ThemeConfig override.
+ */
+export function generateOverrideCss(overrides) {
+    const vars = [];
+    const lightModeKeySet = new Set(Object.keys(PrefixedLightModeVariables));
+    const overrideKeys = Object.keys(overrides);
+    overrideKeys.forEach((key) => {
+        if (key === 'darkMode')
+            return; // handled separately below
+        const overrideValue = overrides[key];
+        if (overrideValue === undefined)
+            return;
+        if (lightModeKeySet.has(key)) {
+            // ── Light mode surface / text keys ─────────────────────────────────
+            const variableName = PrefixedLightModeVariables[key];
+            collectVars(variableName, overrideValue, vars);
+        }
+        else {
+            // ── Generic keys (palette, breakpoints, sizing, etc.) ──────────────
+            // Cast to keyof Theme — darkMode and light mode keys are already
+            // excluded above, so the remaining keys are all valid Theme keys
+            const variableName = ThemeCssVariableNames[key];
+            if (!variableName)
+                return;
+            collectVars(variableName, overrideValue, vars);
+        }
+    });
+    // ── Dark mode keys ──────────────────────────────────────────────────────
+    if (overrides.darkMode) {
+        const darkModeKeys = Object.keys(overrides.darkMode);
+        darkModeKeys.forEach((key) => {
+            const overrideValue = overrides.darkMode[key];
+            if (overrideValue === undefined)
+                return;
+            const variableName = PrefixedDarkModeVariables[key];
+            if (!variableName)
+                return;
+            collectVars(variableName, overrideValue, vars);
+        });
+    }
+    if (vars.length === 0)
+        return '';
+    return `:root {\n${vars.join('\n')}\n}`;
+}
+/**
+ * Recursively collects CSS variable declarations.
+ */
+function collectVars(variableNameOrMap, value, acc) {
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        // Nested object — recurse into each provided key
+        Object.keys(value).forEach((nestedKey) => {
+            const nestedVariableName = variableNameOrMap[nestedKey];
+            const nestedValue = value[nestedKey];
+            if (nestedVariableName !== undefined && nestedValue !== undefined) {
+                collectVars(nestedVariableName, nestedValue, acc);
+            }
+        });
+    }
+    else if (typeof value === 'string' && typeof variableNameOrMap === 'string') {
+        acc.push(`    ${variableNameOrMap}: ${value};`);
+    }
+}
+//# sourceMappingURL=generate-override-css.js.map

package/dist/theme/generate-override-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-override-css.js","sourceRoot":"","sources":["../../src/theme/generate-override-css.ts"],"names":[],"mappings":"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"}

package/dist/theme/index.d.ts

@@ -1,2 +1,4 @@
 export { ThreadTheme } from './thread-theme';
+export { ThreadScript } from './thread-script';
+export { ThemeProvider } from './theme-provider';
 //# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/theme/index.js

@@ -1,2 +1,4 @@
 export { ThreadTheme } from './thread-theme';
+export { ThreadScript } from './thread-script';
+export { ThemeProvider } from './theme-provider';
 //# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/theme/theme-mode.d.ts

@@ -0,0 +1,6 @@
+export type ThreadMode = 'light' | 'dark' | 'system';
+export declare const THREAD_MODE_STORAGE_KEY: "thread-mode";
+export declare const VALID_MODES: ThreadMode[];
+export declare function isValidMode(value: unknown): value is ThreadMode;
+export declare function applyModeToDocument(mode: ThreadMode): void;
+//# sourceMappingURL=theme-mode.d.ts.map

package/dist/theme/theme-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mode.d.ts","sourceRoot":"","sources":["../../src/theme/theme-mode.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAErD,eAAO,MAAM,uBAAuB,EAAG,aAAsB,CAAC;AAE9D,eAAO,MAAM,WAAW,EAAE,UAAU,EAAgC,CAAC;AAErE,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,CAE/D;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAQ1D"}

package/dist/theme/theme-mode.js

@@ -0,0 +1,17 @@
+export const THREAD_MODE_STORAGE_KEY = 'thread-mode';
+export const VALID_MODES = ['light', 'dark', 'system'];
+export function isValidMode(value) {
+    return typeof value === 'string' && VALID_MODES.includes(value);
+}
+export function applyModeToDocument(mode) {
+    if (mode === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+    }
+    else if (mode === 'light') {
+        document.documentElement.setAttribute('data-theme', 'light');
+    }
+    else {
+        document.documentElement.removeAttribute('data-theme');
+    }
+}
+//# sourceMappingURL=theme-mode.js.map