npm - @avento-space/ts-ui - Versions diffs - 1.2.2 → 1.2.3 - Mend

@avento-space/ts-ui 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/{card.wc-pFLgjfwm.d.ts → card.wc-CLzyZAbJ.d.ts} +32 -0
package/dist/{chunk-ICB6OBEZ.js → chunk-2UKGVIH2.js} +277 -277
package/dist/chunk-2UKGVIH2.js.map +1 -0
package/dist/chunk-NJHLJNRI.js +4983 -0
package/dist/chunk-NJHLJNRI.js.map +1 -0
package/dist/{chunk-QTANS5ZS.js → chunk-NUMML2ZR.js} +4 -4
package/dist/{chunk-QTANS5ZS.js.map → chunk-NUMML2ZR.js.map} +1 -1
package/dist/{chunk-RQZ7KDYP.js → chunk-PIXJHFME.js} +273 -67
package/dist/chunk-PIXJHFME.js.map +1 -0
package/dist/components/index.d.ts +1 -1
package/dist/components/index.js +2 -2
package/dist/define.js +4 -4
package/dist/icons/index.js +2 -2
package/dist/index.d.ts +1 -1
package/dist/index.js +4 -4
package/dist/react/index.d.ts +4 -2
package/dist/react/index.js +66 -8
package/dist/react/index.js.map +1 -1
package/package.json +7 -3
package/dist/chunk-ICB6OBEZ.js.map +0 -1
package/dist/chunk-RATTHYIP.js +0 -4855
package/dist/chunk-RATTHYIP.js.map +0 -1
package/dist/chunk-RQZ7KDYP.js.map +0 -1

package/dist/{chunk-ICB6OBEZ.js → chunk-2UKGVIH2.js} RENAMED Viewed

@@ -96,7 +96,7 @@ button {
   font-size: 14px;
   line-height: 1;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -106,43 +106,43 @@ button {
   outline: none;
 }
 button:focus-visible {
-  box-shadow: 0 0 0 2px #3b82f6;
+  box-shadow: 0 0 0 2px var(--u-color-focus);
 }
 button:disabled {
   opacity: .5;
   cursor: not-allowed;
 }
 .btn-primary {
-  background: #3b82f6;
+  background: var(--u-color-primary);
   color: #fff;
-  border-color: #2563eb;
+  border-color: var(--u-color-primary-hover);
 }
 .btn-primary:hover:not(:disabled) {
-  background: #2563eb;
+  background: var(--u-color-primary-hover);
 }
 .btn-secondary {
-  background: #f3f4f6;
-  color: #374151;
-  border-color: #9ca3af;
+  background: var(--u-color-bg-hover);
+  color: var(--u-color-text-secondary);
+  border-color: var(--u-color-border);
 }
 .btn-secondary:hover:not(:disabled) {
   background: #e5e7eb;
 }
 .btn-ghost {
   background: transparent;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   border-color: transparent;
 }
 .btn-ghost:hover:not(:disabled) {
-  background: #f3f4f6;
+  background: var(--u-color-bg-hover);
 }
 .btn-danger {
-  background: #ef4444;
+  background: var(--u-color-danger);
   color: #fff;
-  border-color: #ef4444;
+  border-color: var(--u-color-danger);
 }
 .btn-danger:hover:not(:disabled) {
-  background: #dc2626;
+  background: var(--u-color-danger-hover);
 }
 .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
 .btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
@@ -184,23 +184,23 @@ input {
   font-size: 14px;
   line-height: 1.5;
   padding: 8px 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-md);
   outline: none;
   width: 100%;
   box-sizing: border-box;
-  background: #fff;
-  color: #111827;
+  background: var(--u-color-bg);
+  color: var(--u-color-text);
   transition: border-color .15s;
 }
-input::placeholder { color: #4b5563; }
+input::placeholder { color: var(--u-color-text-muted); }
 input:focus {
   border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
 input:disabled {
-  background: #f9fafb;
-  color: #4b5563;
+  background: var(--u-color-bg-muted);
+  color: var(--u-color-text-muted);
   cursor: not-allowed;
 }
 `;
@@ -225,7 +225,7 @@ ul, ol {
 .list-empty {
   padding: 24px;
   text-align: center;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
 `;
@@ -266,9 +266,9 @@ var textStyles = `
 .text-semibold { font-weight: 600; }
 .text-bold { font-weight: 700; }
 .text-default { color: inherit; }
-.text-muted { color: #4b5563; }
+.text-muted { color: var(--u-color-text-muted); }
 .text-accent { color: #2563eb; }
-.text-danger { color: #ef4444; }
+.text-danger { color: var(--u-color-danger); }
 .text-success { color: #16a34a; }
 .text-left { text-align: left; }
 .text-center { text-align: center; }
@@ -317,7 +317,7 @@ var overlayStyles = `
 [part="overlay"] {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.5);
+  background: var(--u-color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -343,11 +343,11 @@ var fieldStyles = `
 .field-label {
   font-size: 0.875rem;
   font-weight: 500;
-  color: #374151;
+  color: var(--u-color-text-secondary);
 }
 .field-label-required::after {
   content: ' *';
-  color: #ef4444;
+  color: var(--u-color-danger);
 }
 .field-content {
   display: flex;
@@ -355,11 +355,11 @@ var fieldStyles = `
 }
 .field-hint {
   font-size: 0.75rem;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
 .field-error {
   font-size: 0.75rem;
-  color: #ef4444;
+  color: var(--u-color-danger);
 }
 .hidden {
   display: none;
@@ -378,7 +378,7 @@ var checkboxStyles = `
   gap: 8px;
   cursor: pointer;
 }
-:host(:focus-visible) .checkbox-indicator { outline: 2px solid #3b82f6; outline-offset: 2px; }
+:host(:focus-visible) .checkbox-indicator { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
 input {
   position: absolute;
   opacity: 0;
@@ -392,15 +392,15 @@ input {
   justify-content: center;
   width: 18px;
   height: 18px;
-  border: 2px solid #9ca3af;
-  border-radius: 4px;
+  border: 2px solid var(--u-color-border);
+  border-radius: var(--u-radius-sm);
   transition: all .15s;
   flex-shrink: 0;
   box-sizing: border-box;
 }
 .checkbox-indicator.checked {
-  background: #3b82f6;
-  border-color: #2563eb;
+  background: var(--u-color-primary);
+  border-color: var(--u-color-primary-hover);
   color: #fff;
 }
 .checkbox-indicator svg {
@@ -412,7 +412,7 @@ input {
 }
 .checkbox-label {
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--u-color-text-secondary);
 }
 :host([disabled]) [part="checkbox"] {
   opacity: 0.5;
@@ -436,13 +436,13 @@ var selectStyles = `
   font-size: 14px;
   line-height: 1.5;
   padding: 8px 32px 8px 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-md);
   outline: none;
   width: 100%;
   box-sizing: border-box;
-  background: #fff;
-  color: #111827;
+  background: var(--u-color-bg);
+  color: var(--u-color-text);
   transition: border-color .15s;
   appearance: none;
   -webkit-appearance: none;
@@ -453,15 +453,15 @@ var selectStyles = `
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
 .select:disabled {
-  background: #f9fafb;
-  color: #4b5563;
+  background: var(--u-color-bg-muted);
+  color: var(--u-color-text-muted);
   cursor: not-allowed;
 }
 .select-arrow {
   position: absolute;
   right: 8px;
   pointer-events: none;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   display: flex;
   align-items: center;
 }
@@ -482,21 +482,21 @@ var linkStyles = `
   border-radius: 2px;
 }
 [part="link"]:focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid var(--u-color-focus);
   outline-offset: 2px;
 }
 .link-default { color: #2563eb; }
 .link-default:hover { color: #2563eb; text-decoration: underline; }
-.link-accent { color: #374151; font-weight: 500; }
-.link-accent:hover { color: #111827; text-decoration: underline; }
-.link-muted { color: #4b5563; }
-.link-muted:hover { color: #374151; text-decoration: underline; }
-.link-danger { color: #ef4444; }
-.link-danger:hover { color: #dc2626; text-decoration: underline; }
+.link-accent { color: var(--u-color-text-secondary); font-weight: 500; }
+.link-accent:hover { color: var(--u-color-text); text-decoration: underline; }
+.link-muted { color: var(--u-color-text-muted); }
+.link-muted:hover { color: var(--u-color-text-secondary); text-decoration: underline; }
+.link-danger { color: var(--u-color-danger); }
+.link-danger:hover { color: var(--u-color-danger-hover); text-decoration: underline; }
 .link-underline-always { text-decoration: underline; }
 .link-underline-none:hover { text-decoration: none; }
 .link-disabled {
-  color: #4b5563 !important;
+  color: var(--u-color-text-muted) !important;
   cursor: not-allowed;
   pointer-events: none;
   text-decoration: none !important;
@@ -539,7 +539,7 @@ var tooltipStyles = `
   color: #fff;
   font-size: 0.75rem;
   padding: 6px 10px;
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   pointer-events: none;
   line-height: 1.4;
   max-width: 200px;
@@ -577,25 +577,25 @@ textarea {
   font-size: 14px;
   line-height: 1.5;
   padding: 8px 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-md);
   outline: none;
   width: 100%;
   box-sizing: border-box;
-  background: #fff;
-  color: #111827;
+  background: var(--u-color-bg);
+  color: var(--u-color-text);
   transition: border-color .15s;
   resize: vertical;
   min-height: 60px;
 }
-textarea::placeholder { color: #4b5563; }
+textarea::placeholder { color: var(--u-color-text-muted); }
 textarea:focus {
   border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
 textarea:disabled {
-  background: #f9fafb;
-  color: #4b5563;
+  background: var(--u-color-bg-muted);
+  color: var(--u-color-text-muted);
   cursor: not-allowed;
 }
 `;
@@ -614,9 +614,9 @@ var radioStyles = `
   gap: 8px;
   cursor: pointer;
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--u-color-text-secondary);
 }
-:host(:focus-visible) .radio-circle { outline: 2px solid #3b82f6; outline-offset: 2px; }
+:host(:focus-visible) .radio-circle { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
 input[type="radio"] {
   position: absolute;
   opacity: 0;
@@ -630,15 +630,15 @@ input[type="radio"] {
   justify-content: center;
   width: 18px;
   height: 18px;
-  border: 2px solid #9ca3af;
+  border: 2px solid var(--u-color-border);
   border-radius: 50%;
   transition: all .15s;
   flex-shrink: 0;
   box-sizing: border-box;
 }
 .radio-circle.checked {
-  border-color: #2563eb;
-  background: #3b82f6;
+  border-color: var(--u-color-primary-hover);
+  background: var(--u-color-primary);
   box-shadow: inset 0 0 0 3px #fff;
 }
 :host([disabled]) [part="radio"] {
@@ -656,7 +656,7 @@ var switchStyles = `
   display: inline-flex;
   cursor: pointer;
 }
-:host(:focus-visible) .switch-track { outline: 2px solid #3b82f6; outline-offset: 3px; }
+:host(:focus-visible) .switch-track { outline: 2px solid var(--u-color-focus); outline-offset: 3px; }
 input {
   position: absolute;
   opacity: 0;
@@ -673,7 +673,7 @@ input {
   transition: background .2s;
 }
 .switch-track.checked {
-  background: #3b82f6;
+  background: var(--u-color-primary);
 }
 .switch-thumb {
   position: absolute;
@@ -681,7 +681,7 @@ input {
   left: 2px;
   width: 18px;
   height: 18px;
-  background: #fff;
+  background: var(--u-color-bg);
   border-radius: 50%;
   transition: transform .2s;
   box-shadow: 0 1px 2px rgba(0,0,0,.15);
@@ -703,12 +703,12 @@ var labelStyles = `
 [part="label"] {
   font-size: 0.875rem;
   font-weight: 500;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   cursor: default;
 }
 .label-required::after {
   content: ' *';
-  color: #ef4444;
+  color: var(--u-color-danger);
 }
 `;
@@ -732,25 +732,25 @@ var treeStyles = `
   gap: 4px;
   padding: 4px 8px;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--u-radius-sm);
 }
-.tree-row:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
+.tree-row:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
 .tree-row:hover {
-  background: #f3f4f6;
+  background: var(--u-color-bg-hover);
 }
 .tree-toggle {
   width: 16px;
   flex-shrink: 0;
   text-align: center;
   font-size: 12px;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
 .tree-toggle-spacer {
   width: 16px;
   flex-shrink: 0;
 }
 .tree-label {
-  color: #374151;
+  color: var(--u-color-text-secondary);
 }
 .tree-children {
   list-style: none;
@@ -776,27 +776,27 @@ var tableStyles = `
 .table th {
   text-align: left;
   padding: 10px 12px;
-  border-bottom: 2px solid #e5e7eb;
+  border-bottom: 2px solid var(--u-color-border-lighter);
   font-weight: 600;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   white-space: nowrap;
-  background: #f9fafb;
+  background: var(--u-color-bg-muted);
 }
 .table th.sortable {
   cursor: pointer;
   user-select: none;
 }
-.table th.sortable:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
+.table th.sortable:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
 .table th.sortable:hover {
-  background: #f3f4f6;
+  background: var(--u-color-bg-hover);
 }
 .table td {
   padding: 10px 12px;
-  border-bottom: 1px solid #e5e7eb;
-  color: #4b5563;
+  border-bottom: 1px solid var(--u-color-border-lighter);
+  color: var(--u-color-text-muted);
 }
 .table tr:hover td {
-  background: #f9fafb;
+  background: var(--u-color-bg-muted);
 }
 `;
@@ -820,22 +820,22 @@ var breadcrumbStyles = `
   display: flex;
   align-items: center;
   gap: 4px;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
 .breadcrumb-item a {
-  color: #2563eb;
+  color: var(--u-color-primary-text);
   text-decoration: none;
 }
-.breadcrumb-item a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 2px; }
+.breadcrumb-item a:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
 .breadcrumb-item a:hover {
   text-decoration: underline;
 }
 .breadcrumb-item[aria-current="page"] {
-  color: #111827;
+  color: var(--u-color-text);
   font-weight: 500;
 }
 .breadcrumb-separator {
-  color: #d1d5db;
+  color: var(--u-color-border-light);
   margin: 0 2px;
 }
 `;
@@ -856,13 +856,13 @@ var tabsStyles = `
   outline: none;
 }
 .tablist-underline {
-  border-bottom: 1px solid #d1d5db;
+  border-bottom: 1px solid var(--u-color-border-light);
 }
 .tablist-underline .tab-indicator {
   position: absolute;
   bottom: 0;
   height: 2px;
-  background: #3b82f6;
+  background: var(--u-color-primary);
   transition: left .2s ease, width .2s ease;
   border-radius: 1px;
 }
@@ -888,7 +888,7 @@ var tabsStyles = `
   border: none;
   background: none;
   cursor: pointer;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   transition: all .15s;
   outline: none;
   display: inline-flex;
@@ -901,14 +901,14 @@ var tabsStyles = `
   border-radius: 0;
 }
 .tab-trigger:hover:not(:disabled):not(.active) {
-  color: #374151;
+  color: var(--u-color-text-secondary);
 }
 .tab-trigger.active {
-  color: #2563eb;
+  color: var(--u-color-primary-text);
   font-weight: 500;
 }
 .tab-trigger:focus-visible {
-  box-shadow: inset 0 0 0 2px #3b82f6;
+  box-shadow: inset 0 0 0 2px var(--u-color-focus);
 }
 .tab-trigger:disabled {
   opacity: .4;
@@ -931,21 +931,21 @@ var tabsStyles = `
   padding: 6px 14px;
 }
 .tablist-pills .tab-trigger:hover:not(:disabled) {
-  background: #f3f4f6;
+  background: var(--u-color-bg-hover);
 }
 .tablist-pills .tab-trigger.active {
-  background: #eff6ff;
-  color: #2563eb;
+  background: var(--u-color-bg-selected);
+  color: var(--u-color-primary-text);
 }
 .tablist-buttons .tab-trigger {
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   padding: 6px 14px;
 }
 .tablist-buttons .tab-trigger:hover:not(:disabled) {
-  background: #f3f4f6;
+  background: var(--u-color-bg-hover);
 }
 .tablist-buttons .tab-trigger.active {
-  background: #3b82f6;
+  background: var(--u-color-primary);
   color: #fff;
 }
 [part="tabpanels"] {
@@ -1067,7 +1067,7 @@ var modalStyles = `
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.5);
+  background: var(--u-color-overlay);
   z-index: 9998;
   animation: u-modal-fade-in .15s ease;
 }
@@ -1081,8 +1081,8 @@ var modalStyles = `
   padding: 16px;
 }
 .modal-wrapper {
-  background: #fff;
-  border-radius: 12px;
+  background: var(--u-color-bg);
+  border-radius: var(--u-radius-2xl);
   box-shadow: 0 20px 60px rgba(0,0,0,.15);
   display: flex;
   flex-direction: column;
@@ -1100,13 +1100,13 @@ var modalStyles = `
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--u-color-border-lighter);
   gap: 12px;
 }
 .modal-title {
   font-weight: 600;
   font-size: 1.125rem;
-  color: #111827;
+  color: var(--u-color-text);
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -1117,18 +1117,18 @@ var modalStyles = `
   background: none;
   border: none;
   cursor: pointer;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   padding: 4px;
   line-height: 1;
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: color .15s, background .15s;
 }
-.modal-close:hover { color: #374151; background: #f3f4f6; }
-.modal-close:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.modal-close:hover { color: var(--u-color-text-secondary); background: var(--u-color-bg-hover); }
+.modal-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
 .modal-close svg {
   width: 18px;
   height: 18px;
@@ -1137,7 +1137,7 @@ var modalStyles = `
   padding: 20px;
   overflow-y: auto;
   flex: 1;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   font-size: 0.875rem;
   line-height: 1.6;
 }
@@ -1147,11 +1147,11 @@ var modalStyles = `
   justify-content: flex-end;
   gap: 8px;
   padding: 12px 20px;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--u-color-border-lighter);
 }
 .modal-mobile.modal-wrapper {
   max-height: calc(100vh - 32px) !important;
-  border-radius: 10px;
+  border-radius: var(--u-radius-xl);
 }
 `;
@@ -1163,7 +1163,7 @@ var drawerStyles = `
 .drawer-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.5);
+  background: var(--u-color-overlay);
   z-index: 9998;
 }
 .drawer {
@@ -1175,22 +1175,22 @@ var drawerStyles = `
 .drawer-top { top: 0; left: 0; width: 100%; }
 .drawer-bottom { bottom: 0; left: 0; width: 100%; }
 .drawer-content {
-  background: #fff;
+  background: var(--u-color-bg);
   display: flex;
   flex-direction: column;
   box-shadow: 0 0 40px rgba(0,0,0,.1);
 }
-.drawer-right .drawer-content { height: 100%; transform: translateX(100%); transition: transform .25s ease; border-radius: 12px 0 0 12px; }
-.drawer-left .drawer-content { height: 100%; transform: translateX(-100%); transition: transform .25s ease; border-radius: 0 12px 12px 0; }
-.drawer-top .drawer-content { width: 100%; transform: translateY(-100%); transition: transform .25s ease; border-radius: 0 0 12px 12px; }
-.drawer-bottom .drawer-content { width: 100%; transform: translateY(100%); transition: transform .25s ease; border-radius: 12px 12px 0 0; }
+.drawer-right .drawer-content { height: 100%; transform: translateX(100%); transition: transform .25s ease; border-radius: var(--u-radius-2xl) 0 0 var(--u-radius-2xl); }
+.drawer-left .drawer-content { height: 100%; transform: translateX(-100%); transition: transform .25s ease; border-radius: 0 var(--u-radius-2xl) var(--u-radius-2xl) 0; }
+.drawer-top .drawer-content { width: 100%; transform: translateY(-100%); transition: transform .25s ease; border-radius: 0 0 var(--u-radius-2xl) var(--u-radius-2xl); }
+.drawer-bottom .drawer-content { width: 100%; transform: translateY(100%); transition: transform .25s ease; border-radius: var(--u-radius-2xl) var(--u-radius-2xl) 0 0; }
 .drawer-open .drawer-content { transform: translate(0,0); }
 .drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--u-color-border-lighter);
   font-weight: 600;
   font-size: 1.125rem;
 }
@@ -1199,14 +1199,14 @@ var drawerStyles = `
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   padding: 0;
   line-height: 1;
 }
-.drawer-close:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
-.drawer-close:hover { color: #374151; }
-.drawer-body { padding: 20px; overflow-y: auto; flex: 1; color: #4b5563; font-size: 0.875rem; }
-.drawer-footer { padding: 12px 20px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px; justify-content: flex-end; }
+.drawer-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
+.drawer-close:hover { color: var(--u-color-text-secondary); }
+.drawer-body { padding: 20px; overflow-y: auto; flex: 1; color: var(--u-color-text-muted); font-size: 0.875rem; }
+.drawer-footer { padding: 12px 20px; border-top: 1px solid var(--u-color-border-lighter); display: flex; gap: 8px; justify-content: flex-end; }
 `;
 // src/components/styles/popover.ts
@@ -1224,12 +1224,12 @@ var popoverStyles = `
   filter: drop-shadow(0 8px 24px rgba(0,0,0,.14));
 }
 .popover-content {
-  background: #fff;
-  border: 1px solid #d1d5db;
-  border-radius: 10px;
+  background: var(--u-color-bg);
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-xl);
   padding: 8px;
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   min-width: 160px;
   animation: u-popover-in .15s ease;
 }
@@ -1241,8 +1241,8 @@ var popoverStyles = `
   position: absolute;
   width: 10px;
   height: 10px;
-  background: #fff;
-  border: 1px solid #d1d5db;
+  background: var(--u-color-bg);
+  border: 1px solid var(--u-color-border-light);
   transform: rotate(45deg);
   z-index: -1;
 }
@@ -1264,9 +1264,9 @@ var dropdownStyles = `
 .dropdown-menu {
   position: fixed;
   z-index: 99999;
-  background: #fff;
-  border: 1px solid #d1d5db;
-  border-radius: 10px;
+  background: var(--u-color-bg);
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-xl);
   box-shadow: 0 8px 24px rgba(0,0,0,.14);
   padding: 4px;
   min-width: 180px;
@@ -1288,9 +1288,9 @@ var dropdownStyles = `
   border: none;
   background: none;
   cursor: pointer;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   text-align: left;
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   transition: background .1s;
   display: flex;
   align-items: center;
@@ -1298,11 +1298,11 @@ var dropdownStyles = `
   width: 100%;
   box-sizing: border-box;
 }
-.dropdown-item:hover { background: #f3f4f6; }
-.dropdown-item:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
-.dropdown-item.selected { color: #2563eb; font-weight: 500; background: #eff6ff; }
+.dropdown-item:hover { background: var(--u-color-bg-hover); }
+.dropdown-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
+.dropdown-item.selected { color: var(--u-color-primary-hover); font-weight: 500; background: var(--u-color-bg-selected); }
 .dropdown-item:disabled { opacity: 0.4; cursor: not-allowed; }
-.dropdown-item-active { background: #eff6ff; color: #2563eb; }
+.dropdown-item-active { background: var(--u-color-bg-selected); color: var(--u-color-primary-hover); }
 .dropdown-item-icon {
   width: 16px;
   height: 16px;
@@ -1310,7 +1310,7 @@ var dropdownStyles = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
 .dropdown-item-icon svg {
   width: 16px;
@@ -1327,28 +1327,28 @@ var dropdownStyles = `
 .dropdown-item-desc {
   display: block;
   font-size: 0.75rem;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   line-height: 1.3;
   margin-top: 1px;
 }
 .dropdown-item-shortcut {
   font-size: 0.75rem;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   padding: 2px 6px;
-  background: #f3f4f6;
-  border-radius: 4px;
+  background: var(--u-color-bg-hover);
+  border-radius: var(--u-radius-sm);
   font-family: inherit;
   flex-shrink: 0;
 }
 .dropdown-group-label {
   font-size: 0.75rem;
   font-weight: 600;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 8px 12px 4px;
 }
-.dropdown-divider { height: 1px; background: #f3f4f6; margin: 4px 0; }
+.dropdown-divider { height: 1px; background: var(--u-color-bg-hover); margin: 4px 0; }
 `;
 // src/components/styles/accordion.ts
@@ -1357,12 +1357,12 @@ var accordionStyles = `
   display: block;
 }
 [part="accordion"] {
-  border: 1px solid #9ca3af;
-  border-radius: 8px;
+  border: 1px solid var(--u-color-border);
+  border-radius: var(--u-radius-lg);
   overflow: hidden;
 }
 .accordion-item {
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--u-color-border-lighter);
 }
 .accordion-item:last-child { border-bottom: none; }
 .accordion-header {
@@ -1373,16 +1373,16 @@ var accordionStyles = `
   cursor: pointer;
   font-weight: 500;
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   transition: background .15s;
   user-select: none;
 }
-.accordion-header:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
-.accordion-header:hover { background: #f9fafb; }
+.accordion-header:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
+.accordion-header:hover { background: var(--u-color-bg-muted); }
 .accordion-icon {
   transition: transform .2s;
   font-size: 12px;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
 .accordion-item[open] .accordion-icon { transform: rotate(180deg); }
 .accordion-content {
@@ -1392,7 +1392,7 @@ var accordionStyles = `
 .accordion-body {
   padding: 0 16px 12px;
   font-size: 0.875rem;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
 `;
@@ -1404,8 +1404,8 @@ var calendarStyles = `
 .calendar {
   font-size: 0.875rem;
   width: 280px;
-  background: #fff;
-  border-radius: 8px;
+  background: var(--u-color-bg);
+  border-radius: var(--u-radius-lg);
   box-shadow: 0 4px 20px rgba(0,0,0,.08);
   padding: 16px;
 }
@@ -1417,12 +1417,12 @@ var calendarStyles = `
 }
 .cal-title {
   font-weight: 600;
-  color: #111827;
+  color: var(--u-color-text);
 }
 .cal-nav-btn {
   background: none;
-  border: 1px solid #9ca3af;
-  border-radius: 6px;
+  border: 1px solid var(--u-color-border);
+  border-radius: var(--u-radius-md);
   width: 32px;
   height: 32px;
   cursor: pointer;
@@ -1430,20 +1430,20 @@ var calendarStyles = `
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   transition: all .15s;
 }
-.cal-nav-btn:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
+.cal-nav-btn:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
 .cal-nav-btn:hover {
-  background: #f3f4f6;
-  color: #374151;
+  background: var(--u-color-bg-hover);
+  color: var(--u-color-text-secondary);
 }
 .cal-day-names {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   font-size: 0.75rem;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   font-weight: 500;
   margin-bottom: 8px;
 }
@@ -1458,21 +1458,21 @@ var calendarStyles = `
 .cal-day {
   background: none;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   width: 100%;
   aspect-ratio: 1;
   cursor: pointer;
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   transition: all .1s;
   font-family: inherit;
 }
-.cal-day:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
-.cal-day:hover { background: #f3f4f6; }
+.cal-day:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
+.cal-day:hover { background: var(--u-color-bg-hover); }
 .cal-day-empty { pointer-events: none; }
-.cal-today { font-weight: 600; color: #2563eb; }
-.cal-selected { background: #3b82f6; color: #fff; font-weight: 600; }
-.cal-selected:hover { background: #2563eb; }
+.cal-today { font-weight: 600; color: var(--u-color-primary-text); }
+.cal-selected { background: var(--u-color-primary); color: #fff; font-weight: 600; }
+.cal-selected:hover { background: var(--u-color-primary-hover); }
 .cal-disabled { opacity: 0.3; pointer-events: none; }
 `;
@@ -1483,8 +1483,8 @@ var dataTableStyles = `
 }
 .data-table {
   font-size: 0.875rem;
-  border: 1px solid #9ca3af;
-  border-radius: 8px;
+  border: 1px solid var(--u-color-border);
+  border-radius: var(--u-radius-lg);
   overflow: hidden;
 }
 .dt-toolbar {
@@ -1492,62 +1492,62 @@ var dataTableStyles = `
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid #9ca3af;
-  background: #f9fafb;
+  border-bottom: 1px solid var(--u-color-border);
+  background: var(--u-color-bg-muted);
 }
 .dt-search-input {
   font-family: inherit;
   font-size: 0.875rem;
   padding: 6px 12px;
-  border: 1px solid #9ca3af;
-  border-radius: 6px;
+  border: 1px solid var(--u-color-border);
+  border-radius: var(--u-radius-md);
   outline: none;
   width: 200px;
 }
 .dt-search-input:focus {
-  border-color: #2563eb;
+  border-color: var(--u-color-primary-text);
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
-.dt-page-info { color: #4b5563; font-size: 0.8rem; }
+.dt-page-info { color: var(--u-color-text-muted); font-size: 0.8rem; }
 .dt-table-wrapper { overflow-x: auto; }
 .dt-table { width: 100%; border-collapse: collapse; }
 .dt-table th {
   text-align: left;
   padding: 10px 12px;
-  border-bottom: 2px solid #e5e7eb;
+  border-bottom: 2px solid var(--u-color-border-lighter);
   font-weight: 600;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   white-space: nowrap;
-  background: #f9fafb;
+  background: var(--u-color-bg-muted);
 }
 .dt-table th.dt-sortable { cursor: pointer; user-select: none; }
-.dt-table th.dt-sortable:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
-.dt-table th.dt-sortable:hover { background: #f3f4f6; }
-.dt-table td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; color: #4b5563; }
-.dt-table tr:hover td { background: #f9fafb; }
-.dt-row-selected td { background: #eff6ff; }
+.dt-table th.dt-sortable:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
+.dt-table th.dt-sortable:hover { background: var(--u-color-bg-hover); }
+.dt-table td { padding: 10px 12px; border-bottom: 1px solid var(--u-color-border-lighter); color: var(--u-color-text-muted); }
+.dt-table tr:hover td { background: var(--u-color-bg-muted); }
+.dt-row-selected td { background: var(--u-color-bg-selected); }
 .dt-col-check { width: 40px; }
-.dt-empty { text-align: center; color: #4b5563; padding: 32px; }
+.dt-empty { text-align: center; color: var(--u-color-text-muted); padding: 32px; }
 .dt-pagination {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 16px;
-  border-top: 1px solid #9ca3af;
-  background: #f9fafb;
+  border-top: 1px solid var(--u-color-border);
+  background: var(--u-color-bg-muted);
 }
 .dt-page-btn {
   font-family: inherit;
   font-size: 0.8rem;
   padding: 6px 12px;
-  border: 1px solid #9ca3af;
-  border-radius: 6px;
-  background: #fff;
+  border: 1px solid var(--u-color-border);
+  border-radius: var(--u-radius-md);
+  background: var(--u-color-bg);
   cursor: pointer;
-  color: #374151;
+  color: var(--u-color-text-secondary);
 }
-.dt-page-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
-.dt-page-btn:hover { background: #f3f4f6; }
+.dt-page-btn:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
+.dt-page-btn:hover { background: var(--u-color-bg-hover); }
 .dt-page-numbers { display: flex; gap: 4px; }
 .dt-page-num {
   font-family: inherit;
@@ -1555,14 +1555,14 @@ var dataTableStyles = `
   width: 32px;
   height: 32px;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   background: none;
   cursor: pointer;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
-.dt-page-num:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
-.dt-page-num:hover { background: #f3f4f6; }
-.dt-page-num.active { background: #3b82f6; color: #fff; font-weight: 600; }
+.dt-page-num:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
+.dt-page-num:hover { background: var(--u-color-bg-hover); }
+.dt-page-num.active { background: var(--u-color-primary); color: #fff; font-weight: 600; }
 `;
 // src/components/styles/command-palette.ts
@@ -1573,7 +1573,7 @@ var commandPaletteStyles = `
 .cp-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.4);
+  background: var(--u-color-overlay);
   z-index: 99999;
 }
 .cp-dialog {
@@ -1586,8 +1586,8 @@ var commandPaletteStyles = `
   max-width: calc(100vw - 32px);
 }
 .cp-dialog-inner {
-  background: #fff;
-  border-radius: 12px;
+  background: var(--u-color-bg);
+  border-radius: var(--u-radius-2xl);
   box-shadow: 0 20px 60px rgba(0,0,0,.2);
   overflow: hidden;
 }
@@ -1595,25 +1595,25 @@ var commandPaletteStyles = `
   display: flex;
   align-items: center;
   padding: 12px 16px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--u-color-border-lighter);
   gap: 8px;
 }
-.cp-search-icon { font-size: 1rem; color: #4b5563; }
+.cp-search-icon { font-size: 1rem; color: var(--u-color-text-muted); }
 .cp-search-input {
   flex: 1;
   border: none;
   outline: none;
   font-family: inherit;
   font-size: 1rem;
-  color: #111827;
+  color: var(--u-color-text);
   background: none;
 }
 .cp-shortcut-hint {
   font-size: 0.75rem;
   padding: 2px 6px;
-  background: #f3f4f6;
-  border-radius: 4px;
-  color: #4b5563;
+  background: var(--u-color-bg-hover);
+  border-radius: var(--u-radius-sm);
+  color: var(--u-color-text-muted);
   font-family: inherit;
 }
 .cp-results {
@@ -1625,7 +1625,7 @@ var commandPaletteStyles = `
   padding: 8px 12px 4px;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -1639,31 +1639,31 @@ var commandPaletteStyles = `
   background: none;
   cursor: pointer;
   text-align: left;
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   font-family: inherit;
   box-sizing: border-box;
 }
-.cp-item:hover { background: #f3f4f6; }
-.cp-item:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
-.cp-item-active { background: #eff6ff; }
-.cp-item-label { font-size: 0.875rem; color: #111827; flex: 1; }
-.cp-item-desc { font-size: 0.75rem; color: #4b5563; flex: 1; }
+.cp-item:hover { background: var(--u-color-bg-hover); }
+.cp-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
+.cp-item-active { background: var(--u-color-bg-selected); }
+.cp-item-label { font-size: 0.875rem; color: var(--u-color-text); flex: 1; }
+.cp-item-desc { font-size: 0.75rem; color: var(--u-color-text-muted); flex: 1; }
 .cp-item-shortcut {
   font-size: 0.75rem;
   padding: 2px 6px;
-  background: #f3f4f6;
-  border-radius: 4px;
-  color: #4b5563;
+  background: var(--u-color-bg-hover);
+  border-radius: var(--u-radius-sm);
+  color: var(--u-color-text-muted);
   font-family: inherit;
 }
-.cp-empty { padding: 24px; text-align: center; color: #4b5563; font-size: 0.875rem; }
+.cp-empty { padding: 24px; text-align: center; color: var(--u-color-text-muted); font-size: 0.875rem; }
 .cp-footer {
   display: flex;
   gap: 16px;
   padding: 8px 16px;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--u-color-border-lighter);
   font-size: 0.75rem;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
 }
 `;
@@ -1679,13 +1679,13 @@ var comboboxStyles = `
 .combobox-input-wrapper {
   display: flex;
   align-items: center;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-md);
   transition: border-color .15s;
-  background: #fff;
+  background: var(--u-color-bg);
 }
 .combobox-input-wrapper:focus-within {
-  border-color: #2563eb;
+  border-color: var(--u-color-primary-hover);
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
 .combobox-input {
@@ -1697,14 +1697,14 @@ var comboboxStyles = `
   background: none;
   width: 100%;
   box-sizing: border-box;
-  color: #111827;
+  color: var(--u-color-text);
 }
 .combobox-toggle {
   background: none;
   border: none;
   padding: 0 8px;
   cursor: pointer;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   font-size: 12px;
   display: flex;
   align-items: center;
@@ -1712,8 +1712,8 @@ var comboboxStyles = `
 .combobox-listbox {
   position: fixed;
   z-index: 99999;
-  background: #fff;
-  border-radius: 6px;
+  background: var(--u-color-bg);
+  border-radius: var(--u-radius-md);
   box-shadow: 0 4px 20px rgba(0,0,0,.1);
   max-height: 240px;
   overflow-y: auto;
@@ -1728,15 +1728,15 @@ var comboboxStyles = `
   border: none;
   background: none;
   cursor: pointer;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   text-align: left;
-  border-radius: 4px;
+  border-radius: var(--u-radius-sm);
   box-sizing: border-box;
 }
-.combobox-option:hover { background: #f3f4f6; }
-.combobox-option.active { color: #2563eb; font-weight: 500; }
-.combobox-option:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
-.combobox-empty { padding: 12px; text-align: center; color: #4b5563; font-size: 0.875rem; }
+.combobox-option:hover { background: var(--u-color-bg-hover); }
+.combobox-option.active { color: var(--u-color-primary-hover); font-weight: 500; }
+.combobox-option:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
+.combobox-empty { padding: 12px; text-align: center; color: var(--u-color-text-muted); font-size: 0.875rem; }
 `;
 // src/components/styles/toast.ts
@@ -1768,29 +1768,29 @@ var toastStyles = `
   align-items: flex-start;
   gap: 12px;
   padding: 14px 16px;
-  border-radius: 8px;
+  border-radius: var(--u-radius-lg);
   box-shadow: 0 8px 24px rgba(0,0,0,.12);
   font-size: 0.875rem;
   min-width: 280px;
   max-width: 400px;
   animation: u-slide-in-right .2s ease;
-  background: #fff;
-  border: 1px solid #9ca3af;
+  background: var(--u-color-bg);
+  border: 1px solid var(--u-color-border);
 }
 .toast-exit {
   animation: u-slide-out-right .2s ease forwards;
 }
-.toast-info { border-left: 4px solid #3b82f6; }
+.toast-info { border-left: 4px solid var(--u-color-primary); }
 .toast-success { border-left: 4px solid #16a34a; }
 .toast-warning { border-left: 4px solid #d97706; }
-.toast-error { border-left: 4px solid #ef4444; }
+.toast-error { border-left: 4px solid var(--u-color-danger); }
 .toast-body { flex: 1; }
-.toast-title { font-weight: 600; color: #111827; }
-.toast-desc { color: #4b5563; margin-top: 4px; font-size: 0.8rem; }
+.toast-title { font-weight: 600; color: var(--u-color-text); }
+.toast-desc { color: var(--u-color-text-muted); margin-top: 4px; font-size: 0.8rem; }
 .toast-action {
   background: none;
   border: none;
-  color: #2563eb;
+  color: var(--u-color-primary-hover);
   cursor: pointer;
   font-weight: 500;
   font-family: inherit;
@@ -1799,20 +1799,20 @@ var toastStyles = `
   padding: 0;
   margin-top: 4px;
 }
-.toast-action:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 2px; }
-.toast-action:hover { color: #2563eb; }
+.toast-action:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
+.toast-action:hover { color: var(--u-color-primary-hover); }
 .toast-close {
   background: none;
   border: none;
   cursor: pointer;
-  color: #4b5563;
+  color: var(--u-color-text-muted);
   font-size: 1.2rem;
   padding: 0;
   line-height: 1;
   flex-shrink: 0;
 }
-.toast-close:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 2px; }
-.toast-close:hover { color: #374151; }
+.toast-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
+.toast-close:hover { color: var(--u-color-text-secondary); }
 `;
 // src/components/styles/context-menu.ts
@@ -1827,9 +1827,9 @@ var contextMenuStyles = `
 .cm-menu {
   position: fixed;
   z-index: 99999;
-  background: #fff;
-  border: 1px solid #d1d5db;
-  border-radius: 10px;
+  background: var(--u-color-bg);
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-xl);
   box-shadow: 0 8px 24px rgba(0,0,0,.14);
   padding: 4px;
   min-width: 180px;
@@ -1852,9 +1852,9 @@ var contextMenuStyles = `
   border: none;
   background: none;
   cursor: pointer;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   text-align: left;
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   transition: background .1s;
   display: flex;
   align-items: center;
@@ -1862,12 +1862,12 @@ var contextMenuStyles = `
   width: 100%;
   box-sizing: border-box;
 }
-.cm-item:hover { background: #f3f4f6; }
-.cm-item:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
+.cm-item:hover { background: var(--u-color-bg-hover); }
+.cm-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
 .cm-item:disabled { opacity: 0.4; cursor: not-allowed; }
 .cm-item-icon { width: 16px; text-align: center; font-size: 1rem; flex-shrink: 0; }
 .cm-item-label { flex: 1; }
-.cm-divider { height: 1px; background: #f3f4f6; margin: 4px 0; }
+.cm-divider { height: 1px; background: var(--u-color-bg-hover); margin: 4px 0; }
 `;
 // src/components/styles/sortable.ts
@@ -1883,13 +1883,13 @@ var sortableStyles = `
 .sortable-dragging {
   opacity: 0.9;
   box-shadow: 0 8px 24px rgba(0,0,0,.15);
-  border-radius: 6px;
+  border-radius: var(--u-radius-md);
   cursor: grabbing;
 }
-.sortable-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.sortable-item:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
 .sortable-placeholder {
-  border: 2px dashed #d1d5db;
-  border-radius: 6px;
+  border: 2px dashed var(--u-color-border-light);
+  border-radius: var(--u-radius-md);
   opacity: 0.5;
   box-sizing: border-box;
   transition: height 0.15s ease, margin 0.15s ease;
@@ -1929,7 +1929,7 @@ var badgeStyles = `
   border-radius: 999px;
 }
 .badge-square {
-  border-radius: 4px;
+  border-radius: var(--u-radius-sm);
 }
 .badge-sm {
   font-size: 0.6875rem;
@@ -1950,11 +1950,11 @@ var badgeStyles = `
   min-width: 24px;
 }
 .badge-default {
-  background: #f3f4f6;
-  color: #374151;
+  background: var(--u-color-bg-hover);
+  color: var(--u-color-text-secondary);
 }
 .badge-primary {
-  background: #eff6ff;
+  background: var(--u-color-bg-selected);
   color: #2563eb;
 }
 .badge-success {
@@ -2009,25 +2009,25 @@ var cardStyles = `
   overflow: hidden;
 }
 .card-default {
-  background: #fff;
-  border: 1px solid #d1d5db;
-  border-radius: 12px;
+  background: var(--u-color-bg);
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-2xl);
   box-shadow: 0 1px 3px rgba(0,0,0,.05);
 }
 .card-outlined {
   background: transparent;
-  border: 1px solid #d1d5db;
-  border-radius: 12px;
+  border: 1px solid var(--u-color-border-light);
+  border-radius: var(--u-radius-2xl);
 }
 .card-elevated {
-  background: #fff;
+  background: var(--u-color-bg);
   border: 1px solid transparent;
-  border-radius: 12px;
+  border-radius: var(--u-radius-2xl);
   box-shadow: 0 4px 16px rgba(0,0,0,.08);
 }
 .card-hoverable:hover {
   box-shadow: 0 8px 24px rgba(0,0,0,.12);
-  border-color: #9ca3af;
+  border-color: var(--u-color-border);
   transform: translateY(-2px);
 }
 .card-image {
@@ -2046,22 +2046,22 @@ var cardStyles = `
   border-radius: 0;
 }
 .card-image-top {
-  border-radius: 12px 12px 0 0;
+  border-radius: var(--u-radius-2xl) var(--u-radius-2xl) 0 0;
 }
 .card-image-bottom {
-  border-radius: 0 0 12px 12px;
+  border-radius: 0 0 var(--u-radius-2xl) var(--u-radius-2xl);
 }
 [part="header"] {
   padding: 16px 20px 0;
   font-weight: 600;
   font-size: 1rem;
-  color: #111827;
+  color: var(--u-color-text);
 }
 [part="content"] {
   padding: 16px 20px;
   flex: 1;
   min-width: 0;
-  color: #374151;
+  color: var(--u-color-text-secondary);
   font-size: 0.875rem;
   line-height: 1.6;
 }
@@ -2083,5 +2083,5 @@ var cardStyles = `
 `;
 export { UElement, accordionStyles, animateKeyframes, badgeStyles, boxStyles, breadcrumbStyles, buttonStyles, calendarStyles, cardStyles, checkboxStyles, comboboxStyles, commandPaletteStyles, containerStyles, contextMenuStyles, dataTableStyles, dialogStyles, drawerStyles, dropdownStyles, fieldStyles, formStyles, gridStyles, iconStyles, inputStyles, labelStyles, linkStyles, listStyles, modalStyles, overlayStyles, popoverStyles, presenceStyles, radioStyles, selectStyles, sortableStyles, stackStyles, switchStyles, tableStyles, tabsStyles, textStyles, textareaStyles, toastStyles, tooltipStyles, treeStyles, visuallyHiddenStyles };
-//# sourceMappingURL=chunk-ICB6OBEZ.js.map
-//# sourceMappingURL=chunk-ICB6OBEZ.js.map
+//# sourceMappingURL=chunk-2UKGVIH2.js.map
+//# sourceMappingURL=chunk-2UKGVIH2.js.map