codexly-ui 0.10.87 → 0.10.89

package/assets/styles/_theme.css

@@ -24,9 +24,15 @@
   --clx-text:        #0f172a; /* slate-900 — body text */
   --clx-text-label:  #475569; /* slate-600 — field labels */
   --clx-text-muted:  #64748b; /* slate-500 — secondary text, body in alerts */
-  --clx-text-subtle: #94a3b8; /* slate-400 — hints, placeholders, idle nav */
+  --clx-text-subtle: #94a3b8; /* slate-400 — hints, idle nav */
   --clx-text-faint:  #cbd5e1; /* slate-300 — out-of-range calendar days */
 
+  /* Fixed input placeholder color — intentionally NOT derived from --clx-text-subtle:
+     a custom theme can set --clx-text-subtle close to --clx-text-label (e.g. via the
+     theme picker), which collapses placeholder/typed-text contrast. Placeholders need
+     a guaranteed-low-contrast color regardless of the user's theme customization. */
+  --clx-placeholder: #94a3b8; /* slate-400 */
+
   /* ── Borders ── */
   --clx-border:      #e2e8f0; /* slate-200 — default input/card border */
   --clx-border-soft: #f1f5f9; /* slate-100 — card/modal header-footer divider */
@@ -63,6 +69,10 @@
   --clx-text-subtle: #64748b; /* slate-500 */
   --clx-text-faint:  #475569; /* slate-600 */
 
+  /* Fixed input placeholder color — see :root definition above for why this is independent
+     of --clx-text-subtle. */
+  --clx-placeholder: #64748b; /* slate-500 */
+
   /* ── Borders ── */
   --clx-border:      #334155; /* slate-700 */
   --clx-border-soft: #1e293b; /* slate-800 */
@@ -87,6 +97,7 @@
   --color-clx-text-muted:  var(--clx-text-muted);
   --color-clx-text-subtle: var(--clx-text-subtle);
   --color-clx-text-faint:  var(--clx-text-faint);
+  --color-clx-placeholder: var(--clx-placeholder);
   --color-clx-border:        var(--clx-border);
   --color-clx-border-soft:   var(--clx-border-soft);
   --color-clx-primary:       var(--clx-primary);

package/assets/styles/styles.css

@@ -9,7 +9,7 @@
 @source inline("text-{black,white}");
 @source inline("focus:ring-2 focus-within:ring-2 ring-2");
 @source inline("{bg,border,text}-clx-{surface,surface-2,surface-3,bg,text,text-label,text-muted,text-subtle,text-faint,border,border-soft}");
-@source inline("placeholder:text-clx-text-subtle");
+@source inline("placeholder:text-clx-placeholder");
 
 /* ── Shared backdrop base ── */
 .clx-modal-backdrop,

package/fesm2022/codexly-ui.mjs

@@ -700,8 +700,10 @@ class ClxSocialIconComponent {
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _size = computed(() => this.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
-    _viewBox = computed(() => SOCIAL_ICON_DEFS[this.platform()].viewBox, ...(ngDevMode ? [{ debugName: "_viewBox" }] : /* istanbul ignore next */ []));
-    _markup = computed(() => this._sanitizer.bypassSecurityTrustHtml(SOCIAL_ICON_DEFS[this.platform()].markup), ...(ngDevMode ? [{ debugName: "_markup" }] : /* istanbul ignore next */ []));
+    _markup = computed(() => {
+        const def = SOCIAL_ICON_DEFS[this.platform()];
+        return this._sanitizer.bypassSecurityTrustHtml(`<svg viewBox="${def.viewBox}" class="w-full h-full">${def.markup}</svg>`);
+    }, ...(ngDevMode ? [{ debugName: "_markup" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => {
         const { color, shade } = parseColorInput(this._color());
         const base = resolveColor(this._color());
@@ -721,14 +723,14 @@ class ClxSocialIconComponent {
         return `inline-flex items-center justify-center rounded-xl transition-colors duration-200 cursor-pointer ${sizeClass} ${cls}`;
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSocialIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxSocialIconComponent, isStandalone: true, selector: "a[clx-social-icon], button[clx-social-icon]", inputs: { platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-label": "platform()" } }, ngImport: i0, template: `<svg [attr.viewBox]="_viewBox()" [innerHTML]="_markup()" class="w-full h-full"></svg>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxSocialIconComponent, isStandalone: true, selector: "a[clx-social-icon], button[clx-social-icon]", inputs: { platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-label": "platform()" } }, ngImport: i0, template: `<span class="w-full h-full [&>svg]:w-full [&>svg]:h-full" [innerHTML]="_markup()"></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSocialIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'a[clx-social-icon], button[clx-social-icon]',
                     standalone: true,
-                    template: `<svg [attr.viewBox]="_viewBox()" [innerHTML]="_markup()" class="w-full h-full"></svg>`,
+                    template: `<span class="w-full h-full [&>svg]:w-full [&>svg]:h-full" [innerHTML]="_markup()"></span>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -2006,7 +2008,8 @@ const CLX_BG_SECTION = 'bg-clx-surface-2'; // card/modal header+footer
 const CLX_BG_ICON_WRAP = 'bg-clx-surface-3'; // empty-state icon wrapper
 const CLX_BG_ADDON = 'bg-clx-surface-3'; // prefix/suffix text addon
 // ── Placeholder ───────────────────────────────────────────────────────────────
-const CLX_PLACEHOLDER = 'placeholder:text-clx-text-subtle';
+// Fixed color independent of --clx-text-subtle — see _theme.css for why.
+const CLX_PLACEHOLDER = 'placeholder:text-clx-placeholder';
 // ── Disabled borders ──────────────────────────────────────────────────────────
 const CLX_BORDER_DISABLED = 'border-clx-border';
 // ── Addon (prefix/suffix text) ────────────────────────────────────────────────