codexly-ui 0.1.7 → 0.1.9

package/assets/styles/_theme.css

@@ -42,8 +42,6 @@
   /* ── Theme accents (overridden dynamically by ClxThemeService) ── */
   --clx-secondary:        #64748b; /* slate-500 */
   --clx-secondary-light:  #f1f5f9; /* slate-100 */
-  --clx-text-base:         #64748b; /* slate-500 */
-  --clx-text-base-light:   #f1f5f9; /* slate-100 */
 }
 
 /* ── Dark theme ───────────────────────────────────────────────────────────── */
@@ -95,6 +93,4 @@
   --color-clx-primary-light: var(--clx-primary-light);
   --color-clx-secondary:       var(--clx-secondary);
   --color-clx-secondary-light: var(--clx-secondary-light);
-  --color-clx-text-base:       var(--clx-text-base);
-  --color-clx-text-base-light: var(--clx-text-base-light);
 }

package/fesm2022/codexly-ui.mjs

@@ -402,7 +402,7 @@ class ClxThemeService {
             const cfg = this._config();
             this._applyColorVar('--clx-primary', '--clx-primary-light', cfg.primaryColor);
             this._applyColorVar('--clx-secondary', '--clx-secondary-light', cfg.secondaryColor);
-            this._applyColorVar('--clx-text-base', '--clx-text-base-light', cfg.textColor);
+            this._applyTextColor(cfg.textColor, this.isDark());
         });
         effect(() => {
             if (!this._isBrowser)
@@ -434,6 +434,19 @@ class ClxThemeService {
             document.documentElement.style.setProperty(lightVarName, resolvePaletteHex(color, 100));
         }
     }
+    _applyTextColor(input, dark) {
+        if (!input)
+            return;
+        const { color } = parseColorInput(input);
+        const shades = dark
+            ? { text: 100, label: 300, muted: 400, subtle: 500, faint: 600 }
+            : { text: 900, label: 600, muted: 500, subtle: 400, faint: 300 };
+        document.documentElement.style.setProperty('--clx-text', resolvePaletteHex(color, shades.text));
+        document.documentElement.style.setProperty('--clx-text-label', resolvePaletteHex(color, shades.label));
+        document.documentElement.style.setProperty('--clx-text-muted', resolvePaletteHex(color, shades.muted));
+        document.documentElement.style.setProperty('--clx-text-subtle', resolvePaletteHex(color, shades.subtle));
+        document.documentElement.style.setProperty('--clx-text-faint', resolvePaletteHex(color, shades.faint));
+    }
     _applyFont(family) {
         const option = CLX_FONT_CATALOG.find(f => f.value === family);
         if (!option)
@@ -5754,7 +5767,7 @@ class ClxModalComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxModalComponent, isStandalone: true, selector: "clx-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
     <!-- Header -->
     <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 text-clx-text-label">
         <ng-content select="[clx-modal-title]" />
       </div>
       @if (showClose()) {
@@ -5815,7 +5828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     <!-- Header -->
     <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 text-clx-text-label">
         <ng-content select="[clx-modal-title]" />
       </div>
       @if (showClose()) {
@@ -12427,7 +12440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 // ── Base classes ─────────────────────────────────────────────────────────────
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';
 const TABLE_HEADER_CELL_CLASS = 'px-4 py-3 font-semibold whitespace-nowrap';
-const TABLE_CELL_CLASS = 'px-4 py-3 border-b border-slate-100 text-slate-700';
+const TABLE_CELL_CLASS = 'px-4 py-3 border-b border-clx-border-soft text-clx-text-label';
 const TABLE_ROW_CLASS = '';
 // ── Alignment ────────────────────────────────────────────────────────────────
 const TABLE_ALIGN_MAP = {