chordia-ui 3.3.2 → 3.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/chat/ChatHistoryPanel.jsx

@@ -101,15 +101,15 @@ export default function ChatHistoryPanel({
                 padding: "4px 10px",
                 fontSize: "11px",
                 fontWeight: 600,
-                color: "var(--rail-discovery, #5E88B0)",
-                background: "rgba(94, 136, 176, 0.08)",
+                color: "var(--Base-Strong, #0B0B0B)",
+                background: "#ECEEF2",
                 border: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
                 borderRadius: "6px",
                 cursor: "pointer",
                 transition: "all 0.15s ease",
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = "rgba(94, 136, 176, 0.14)";
+                e.currentTarget.style.background = "#ECEEF2";
               }}
               onMouseLeave={(e) => {
                 e.currentTarget.style.background = "rgba(94, 136, 176, 0.08)";

package/src/components/chat/ChatInterface.jsx

@@ -461,12 +461,12 @@ export default function ChatInterface({
               padding: "10px 16px",
               background:
                 inputValue.trim() && !isSending
-                  ? "var(--rail-discovery, #5E88B0)"
-                  : "var(--border-subtle, rgba(52,58,64,0.08))",
+                  ? "var(--Base-Strong, #0B0B0B)"
+                  : "#ECEEF2",
               color:
                 inputValue.trim() && !isSending
-                  ? "rgba(255, 255, 255, 0.95)"
-                  : "var(--text-faint, rgba(30,33,37,0.36))",
+                  ? "white"
+                  : "var(--text-base)",
               border: "none",
               borderRadius: "var(--radius-md, 8px)",
               cursor:
@@ -479,16 +479,16 @@ export default function ChatInterface({
               transition: "all 0.15s ease",
               height: "42px",
             }}
-            onMouseEnter={(e) => {
-              if (inputValue.trim() && !isSending) {
-                e.currentTarget.style.background = "rgba(94, 136, 176, 1)";
-              }
-            }}
-            onMouseLeave={(e) => {
-              if (inputValue.trim() && !isSending) {
-                e.currentTarget.style.background = "var(--rail-discovery, #5E88B0)";
-              }
-            }}
+            // onMouseEnter={(e) => {
+            //   if (inputValue.trim() && !isSending) {
+            //     e.currentTarget.style.background = "var(--Base-Strong, #0B0B0B)";
+            //   }
+            // }}
+            // onMouseLeave={(e) => {
+            //   if (inputValue.trim() && !isSending) {
+            //     e.currentTarget.style.background = "#ECEEF2";
+            //   }
+            // }}
           >
             {isSending ? (
               <>

package/src/components/common/MessageThread.jsx

@@ -840,8 +840,8 @@ const renderMessageTree = (message, depth = 0) => {
                       ? "white"
                       : "rgba(30, 33, 37, 0.45)",
                     background: editContent?.trim()
-                      ? "#5e88b0"
-                      : "rgba(30, 33, 37, 0.1)",
+                      ? "var(--Base-Strong, #0B0B0B)"
+                      : "#ECEEF2",
                     border: "none",
                     borderRadius: "6px",
                     cursor: editContent?.trim() ? "pointer" : "not-allowed",
@@ -850,18 +850,18 @@ const renderMessageTree = (message, depth = 0) => {
                     gap: "6px",
                     transition: "all 0.15s ease",
                   }}
-                  onMouseEnter={(e) => {
-                    if (editContent?.trim()) {
-                      e.currentTarget.style.background = "#4d7290";
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (editContent?.trim()) {
-                      e.currentTarget.style.background = "#5e88b0";
-                    }
-                  }}
+                  // onMouseEnter={(e) => {
+                  //   if (editContent?.trim()) {
+                  //     e.currentTarget.style.background = "#4d7290";
+                  //   }
+                  // }}
+                  // onMouseLeave={(e) => {
+                  //   if (editContent?.trim()) {
+                  //     e.currentTarget.style.background = "#5e88b0";
+                  //   }
+                  // }}
                 >
-                  Save
+                  Edit
                 </button>
               </div>
             </div>
@@ -951,8 +951,8 @@ const renderMessageTree = (message, depth = 0) => {
                         : "rgba(30, 33, 37, 0.45)",
                     background:
                       replyDraft.trim() && !isSending
-                        ? "#5e88b0"
-                        : "rgba(30, 33, 37, 0.12)",
+                        ? "var(--Base-Strong, #0B0B0B)"
+                        : "#ECEEF2",
                     border: "none",
                     borderRadius: "6px",
                     cursor:
@@ -961,7 +961,7 @@ const renderMessageTree = (message, depth = 0) => {
                         : "not-allowed",
                   }}
                 >
-                  Send
+                  Reply
                 </button>
               </div>
             </div>
@@ -1116,7 +1116,7 @@ const renderMessageTree = (message, depth = 0) => {
                   fontSize: "12px",
                   fontWeight: 600,
                   color: "white",
-                  background: "#5e88b0",
+                  background: "var(--Base-Strong, #0B0B0B)",
                   border: "none",
                   borderRadius: "6px",
                   cursor: "pointer",
@@ -2253,8 +2253,8 @@ const renderMessageTree = (message, depth = 0) => {
                   padding: "8px 16px",
                   background:
                     messageInput.trim() && !isSending
-                      ? "#5e88b0"
-                      : "rgba(30, 33, 37, 0.1)",
+                      ? "var(--Base-Strong, #0B0B0B)"
+                      : "#ECEEF2",
                   border: "none",
                   borderRadius: "6px",
                   color:

package/src/components/data/DataTable.jsx

@@ -791,8 +791,9 @@ export default function DataTable({
           style={{
             width: column.width || "auto",
             minWidth: column.width || "auto",
+            backgroundColor: "var(--primary-foreground)",
           }}
-          className="sticky top-[57px] z-10 bg-[var(--paper-elevated)] border-b border-[var(--border-strong)] px-4 py-2 text-left"
+          className="sticky top-[57px] z-10 border-b border-[var(--border-strong)] px-4 py-2 text-left"
         >
           {isFilterable ? (
             <div className="relative">
@@ -810,8 +811,8 @@ export default function DataTable({
                 }}
                 onKeyDown={(e) => e.stopPropagation()}
                 onMouseDown={(e) => e.stopPropagation()}
-                className="w-full pl-7 pr-2 py-1.5 text-xs border border-[var(--border)] rounded bg-[var(--paper)] text-[var(--text-ink)] placeholder:text-[var(--text-faint)] focus:outline-none focus:border-[var(--border-hover)] focus:ring-1 focus:ring-[var(--focus)] transition-colors"
-                style={{ fontFamily: 'var(--font-sans)' }}
+                className="w-full pl-7 pr-2 py-1.5 text-xs border border-[var(--border)] rounded text-[var(--text-ink)] placeholder:text-[var(--text-faint)] focus:outline-none focus:border-[var(--border-hover)] focus:ring-1 focus:ring-[var(--focus)] transition-colors"
+                style={{ fontFamily: 'var(--font-sans)', backgroundColor: "var(--primary-foreground)" }}
                 autoComplete="off"
               />
             </div>
@@ -839,7 +840,7 @@ export default function DataTable({
           width: column.width || 'auto',
           borderRight: '1px solid rgba(52, 58, 64, 0.06)',
           userSelect: 'none',
-          background: 'rgba(255, 255, 255, 0.95)',
+          background: 'var(--primary-foreground)',
           borderBottom: '1px solid rgba(52, 58, 64, 0.12)',
           position: 'sticky',
           top: 0,
@@ -887,7 +888,7 @@ export default function DataTable({
   const columnDropdownMenu = isColumnDropdownOpen ? (
     <div
       ref={columnDropdownMenuRef}
-      className="flex flex-col bg-white overflow-auto z-[49] min-w-[220px]"
+      className="flex flex-col overflow-auto z-[49] min-w-[220px]"
       style={{
         position: "fixed",
         top: `${columnDropdownPosition.top}px`,
@@ -895,6 +896,7 @@ export default function DataTable({
         width: columnDropdownPosition.width || 220,
         maxHeight: `400px`,
         fontFamily: 'var(--font-sans)',
+        backgroundColor: "var(--primary-foreground)",
         borderRadius: '0 0 8px 8px', // Rounded corners only on bottom
         boxShadow: '4px 4px 6px 0px #6D70681A, -4px 0px 6px 0px #6D70681A',
         border: '1px solid rgba(52, 58, 64, 0.12)',
@@ -1046,7 +1048,7 @@ export default function DataTable({
   ) : null;
 
   return (
-    <div className="w-full" style={{top:'130px', position: 'sticky', zIndex: 35, backgroundColor: "#F4F1E6"}}>
+    <div className="w-full" style={{top:'130px', position: 'sticky', zIndex: 35, backgroundColor: "var(--primary-foreground)"}}>
       {/* Column Visibility Dropdown and Filters */}
       {columns.length > 0 && (
         <div 
@@ -1054,7 +1056,7 @@ export default function DataTable({
           style={{
             position: "sticky",
             zIndex: 35,
-            backgroundColor: "#F4F1E6",
+            backgroundColor: "var(--primary-foreground)",
           }}
         >
           <div className="flex items-center gap-3 flex-wrap">
@@ -1066,10 +1068,11 @@ export default function DataTable({
               </div>
               <div
                 ref={columnDropdownRef}
-                className="inline-flex items-center justify-between gap-2 px-4 py-2.5 bg-white/80 cursor-pointer hover:bg-white transition-colors text-sm font-medium text-gray-900 border border-gray-300 min-w-[220px]"
+                className="inline-flex items-center justify-between gap-2 px-4 py-2.5 cursor-pointer transition-colors text-sm font-medium text-gray-900 border border-gray-300 min-w-[220px]"
                 onClick={() => setIsColumnDropdownOpen(!isColumnDropdownOpen)}
                 style={{ 
                   fontFamily: 'var(--font-sans)',
+                  backgroundColor: "var(--primary-foreground)",
                   borderRadius: isColumnDropdownOpen ? '8px 8px 0 0' : '8px', // Rounded top corners when open, all corners when closed
                 }}
               >
@@ -1109,9 +1112,9 @@ export default function DataTable({
         >
           <div className="rounded-t-[14px]" style={{
             border: '1px solid rgba(52, 58, 64, 0.12)',
-            borderBottom: 'none',
+            borderBottom: '1px solid rgba(52, 58, 64, 0.12)',
             overflow: 'hidden',
-            background: 'rgba(255, 255, 255, 0.82)',
+            background: 'var(--primary-foreground)',
             position: 'relative',
             top:'0.5rem'
           }}>
@@ -1181,7 +1184,7 @@ export default function DataTable({
                             key={`filter-${columnId}`}
                             style={{
                               padding: '8px 14px',
-                              background: 'rgba(244, 241, 230, 0.35)',
+                              background: 'var(--primary-foreground)',
                               borderBottom: '1px solid rgba(52, 58, 64, 0.10)',
                               position: 'sticky',
                               top: '41px',
@@ -1208,18 +1211,18 @@ export default function DataTable({
                                     fontSize: '11.5px',
                                     border: '1px solid rgba(52, 58, 64, 0.16)',
                                     borderRadius: '6px',
-                                    background: 'rgba(255, 255, 255, 0.85)',
+                                    background: 'var(--primary-foreground)',
                                     color: 'rgba(30, 33, 37, 0.78)',
                                     outline: 'none',
                                     fontFamily: 'var(--font-sans)',
                                   }}
                                   onFocus={(e) => {
                                     e.target.style.borderColor = 'rgba(231, 212, 162, 0.65)';
-                                    e.target.style.background = 'rgba(255, 255, 255, 1)';
+                                    e.target.style.background = 'var(--primary-foreground)';
                                   }}
                                   onBlur={(e) => {
                                     e.target.style.borderColor = 'rgba(52, 58, 64, 0.16)';
-                                    e.target.style.background = 'rgba(255, 255, 255, 0.85)';
+                                    e.target.style.background = 'var(--primary-foreground)';
                                   }}
                                   autoComplete="off"
                                 />
@@ -1340,7 +1343,7 @@ export default function DataTable({
       ) : null}
 
       {(isServerSidePagination ? totalCount > 0 : sortedData.length > 0) && (
-        <div className="border-t border-gray-200 bg-white rounded-b-[14px]">
+        <div className="border-t border-gray-200 rounded-b-[14px]" style={{ backgroundColor: "var(--primary-foreground)" }}>
           <Pagination
             page={page}
             pageSizeOptions={[5,10, 20, 50, 100]}

package/src/components/layout/SplitPane.jsx

@@ -174,6 +174,8 @@ export default function SplitPane({
             overflow: "hidden",
             transition: dragging ? "none" : "width 0.2s ease",
             height: "100%",
+            border: "1px solid",
+            borderColor: "var(--border-subtle)",
           }}
         >
           {!collapsed && left}

package/src/components/login/LoginPage.jsx

@@ -484,7 +484,7 @@ export default function LoginPage({
         alignItems: 'center', padding: '32px 72px', position: 'relative', background: 'white',
         overflowY: 'auto', minHeight: 0,
       }}>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%', maxWidth: 360, gap: 28 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%', maxWidth: 360, gap: 28, flex: 1 }}>
 
           {view === 'signup' ? (
             /* ── Sign Up ── */
@@ -534,8 +534,8 @@ export default function LoginPage({
                 </Field>
 
                 {signupError && (
-                  <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', padding: 8, gap: 6, width: '100%', boxSizing: 'border-box', background: 'var(--color-error-bg)', borderRadius: 5, fontSize: 15, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text)', fontFamily: FF }}>
-                    <svg width="17" height="17" viewBox="0 0 24 24" fill="var(--color-text)" style={{ flexShrink: 0 }}>
+                  <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', padding: 8, gap: 6, width: '100%', boxSizing: 'border-box', background: 'var(--color-error-bg)', borderRadius: 5, fontSize: 14, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text)', fontFamily: FF }}>
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--color-text)" style={{ flexShrink: 0 }}>
                       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                     </svg>
                     {signupError}
@@ -808,7 +808,7 @@ export default function LoginPage({
                 </div>
 
                 <NavRow text="Not a member yet?" linkText="Sign Up" onClick={() => { setView('signup'); onSignUp?.(); }} />
-                <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={16} />
+                <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={0} />
               </div>
             </div>
           )}

package/src/components/primitives/SmallButton.jsx

@@ -10,24 +10,32 @@ export default function SmallButton({
 }) {
   const variantStyles = {
     primary: {
-      backgroundColor: 'var(--rail-tone)',
+      backgroundColor: 'var(--Base-Strong, #0B0B0B)',
       color: 'white',
-      border: 'none'
+      border: 'none',
+      fontSize: '16px',
+      fontWeight: 600,
     },
     secondary: {
       backgroundColor: 'transparent',
       border: '1px solid var(--border)',
-      color: 'var(--text-base)'
+      color: 'var(--text-base)',
+      fontSize: '16px',
+      fontWeight: 600,
     },
     ghost: {
       backgroundColor: 'transparent',
       border: 'none',
-      color: 'var(--text-muted)'
+      color: 'var(--text-muted)',
+      fontSize: '16px',
+      fontWeight: 600,
     },
     danger: {
       backgroundColor: 'var(--rail-signal-churn)',
       color: 'white',
-      border: 'none'
+      border: 'none',
+      fontSize: '16px',
+      fontWeight: 600,
     }
   };
 
@@ -59,7 +67,7 @@ export default function SmallButton({
   const handleMouseEnter = (e) => {
     if (disabled) return;
     if (variant === 'secondary' || variant === 'ghost') {
-      e.currentTarget.style.backgroundColor = 'var(--hover-warm)';
+      e.currentTarget.style.backgroundColor = '#ECEEF2';
     } else if (variant === 'danger') {
       e.currentTarget.style.opacity = '0.85';
     }