codexly-ui 0.0.94 → 0.0.96

package/assets/styles/_theme.css

@@ -79,6 +79,8 @@
   --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-border:      var(--clx-border);
-  --color-clx-border-soft: var(--clx-border-soft);
+  --color-clx-border:        var(--clx-border);
+  --color-clx-border-soft:   var(--clx-border-soft);
+  --color-clx-primary:       var(--clx-primary);
+  --color-clx-primary-light: var(--clx-primary-light);
 }

package/fesm2022/codexly-ui.mjs

@@ -140,6 +140,15 @@ const CLX_COLOR_HEX = {
     neutral: '#737373', stone: '#78716c', white: '#ffffff',
     slate100: '#f1f5f9', slate200: '#e2e8f0', slate300: '#cbd5e1', slate400: '#94a3b8',
 };
+// ── Hex values at shade-100 (for soft backgrounds) ────────────────────────────
+const CLX_COLOR_HEX_100 = {
+    red: '#fee2e2', orange: '#ffedd5', amber: '#fef3c7', yellow: '#fef9c3',
+    lime: '#dcfce7', green: '#dcfce7', emerald: '#d1fae5', teal: '#ccfbf1',
+    cyan: '#cffafe', sky: '#e0f2fe', blue: '#dbeafe', indigo: '#e0e7ff',
+    violet: '#ede9fe', purple: '#f3e8ff', fuchsia: '#fae8ff', pink: '#fce7f3',
+    rose: '#ffe4e6', slate: '#f1f5f9', gray: '#f3f4f6', zinc: '#f4f4f5',
+    neutral: '#f5f5f5', stone: '#f5f5f4', white: '#ffffff',
+};
 
 const BADGE_SIZE_MAP = {
     xs: 'text-[10px] px-1.5 py-0.5',
@@ -226,6 +235,18 @@ class ClxThemeService {
                 return;
             document.documentElement.setAttribute('data-clx-theme', this.isDark() ? 'dark' : 'light');
         });
+        effect(() => {
+            if (!this._isBrowser)
+                return;
+            const primaryColor = this._config().primaryColor;
+            if (!primaryColor)
+                return;
+            const { color } = parseColorInput(primaryColor);
+            const hex500 = CLX_COLOR_HEX[color] ?? CLX_COLOR_HEX.indigo;
+            const hex100 = CLX_COLOR_HEX_100[color] ?? CLX_COLOR_HEX_100.indigo;
+            document.documentElement.style.setProperty('--clx-primary', hex500);
+            document.documentElement.style.setProperty('--clx-primary-light', hex100);
+        });
         if (this._isBrowser) {
             const mq = window.matchMedia('(prefers-color-scheme: dark)');
             mq.addEventListener('change', e => this._sysDark.set(e.matches));
@@ -11447,7 +11468,7 @@ class ClxAppLayoutComponent {
         const isOverlay = isDesktopCollapsed && hovered;
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
-            'bg-slate-900 overflow-hidden shrink-0',
+            'bg-clx-surface border-r border-clx-border overflow-hidden shrink-0',
             'transition-[width,transform] duration-300 ease-in-out',
             isOverlay ? 'shadow-2xl' : '',
             'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
@@ -11675,7 +11696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
 const NAV_ITEM_L1 = 'px-6 py-3';
 const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
-const NAV_ITEM_IDLE = 'text-slate-400';
+const NAV_ITEM_IDLE = 'text-clx-text-subtle';
 // ── Children container ─────────────────────────────────────────────────────────
 const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
 const NAV_CHILDREN_INNER = 'overflow-hidden';
@@ -11723,7 +11744,7 @@ class ClxMenuItemComponent {
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-slate-500'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-clx-text-subtle'"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11736,7 +11757,7 @@ class ClxMenuItemComponent {
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-slate-500'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11761,7 +11782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-slate-500'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-clx-text-subtle'"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11774,7 +11795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-slate-500'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11984,10 +12005,10 @@ class ClxNavGroupComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-clx-text-subtle select-none">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
-        <span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
+        <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
       </span>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -11999,10 +12020,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     standalone: true,
                     template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-clx-text-subtle select-none">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
-        <span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
+        <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
       </span>
     }
   `,
@@ -14852,5 +14873,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map