ngx-com 0.0.21 → 0.1.0

package/styles/tokens.css

@@ -0,0 +1,277 @@
+@theme {
+
+  /* ─── Colors ─── */
+
+  /* Primary */
+  --color-primary-50: oklch(0.97 0.014 264);
+  --color-primary-100: oklch(0.93 0.034 264);
+  --color-primary-200: oklch(0.86 0.068 264);
+  --color-primary-300: oklch(0.76 0.12 264);
+  --color-primary-400: oklch(0.66 0.18 264);
+  --color-primary-500: oklch(0.55 0.24 264);
+  --color-primary-600: oklch(0.48 0.22 264);
+  --color-primary-700: oklch(0.40 0.19 264);
+  --color-primary-800: oklch(0.33 0.15 264);
+  --color-primary-900: oklch(0.27 0.11 264);
+  --color-primary-950: oklch(0.20 0.08 264);
+
+  /* Accent */
+  --color-accent-50: oklch(0.97 0.014 333);
+  --color-accent-100: oklch(0.93 0.04 333);
+  --color-accent-200: oklch(0.86 0.09 333);
+  --color-accent-300: oklch(0.76 0.16 333);
+  --color-accent-400: oklch(0.69 0.22 333);
+  --color-accent-500: oklch(0.48 0.24 333);
+  --color-accent-600: oklch(0.42 0.22 333);
+  --color-accent-700: oklch(0.45 0.20 333);
+  --color-accent-800: oklch(0.37 0.16 333);
+  --color-accent-900: oklch(0.30 0.12 333);
+  --color-accent-950: oklch(0.22 0.08 333);
+
+  /* Warn */
+  --color-warn-50: oklch(0.97 0.014 25);
+  --color-warn-100: oklch(0.93 0.04 25);
+  --color-warn-200: oklch(0.86 0.09 25);
+  --color-warn-300: oklch(0.76 0.16 25);
+  --color-warn-400: oklch(0.66 0.21 25);
+  --color-warn-500: oklch(0.50 0.24 25);
+  --color-warn-600: oklch(0.44 0.21 25);
+  --color-warn-700: oklch(0.42 0.17 25);
+  --color-warn-800: oklch(0.35 0.13 25);
+  --color-warn-900: oklch(0.28 0.09 25);
+  --color-warn-950: oklch(0.21 0.06 25);
+
+  /* Neutral / Surface */
+  --color-surface-50: oklch(0.985 0.002 280);
+  --color-surface-100: oklch(0.965 0.004 280);
+  --color-surface-200: oklch(0.93 0.006 280);
+  --color-surface-300: oklch(0.87 0.008 280);
+  --color-surface-400: oklch(0.71 0.01 280);
+  --color-surface-500: oklch(0.55 0.012 280);
+  --color-surface-600: oklch(0.45 0.012 280);
+  --color-surface-700: oklch(0.37 0.012 280);
+  --color-surface-800: oklch(0.27 0.008 280);
+  --color-surface-900: oklch(0.21 0.006 280);
+  --color-surface-950: oklch(0.14 0.004 280);
+
+  /* Success */
+  --color-success-100: oklch(0.94 0.05 145);
+  --color-success-400: oklch(0.72 0.20 145);
+  --color-success-500: oklch(0.48 0.17 145);
+  --color-success-600: oklch(0.42 0.15 145);
+  --color-success-800: oklch(0.32 0.12 145);
+
+  /* ═══════════════════════════════════════════════════════════
+     Semantic tokens — component-level contracts
+     ═══════════════════════════════════════════════════════════ */
+
+  /* ─── Global ─── */
+  --color-background: var(--color-surface-50);
+  --color-foreground: var(--color-surface-900);
+
+  /* ─── Primary ─── */
+  --color-primary: var(--color-primary-500);
+  --color-primary-foreground: var(--color-primary-50);
+  --color-primary-hover: var(--color-primary-600);
+  --color-primary-subtle: var(--color-primary-100);
+  --color-primary-subtle-foreground: var(--color-primary-900);
+
+  /* ─── Accent ─── */
+  --color-accent: var(--color-accent-500);
+  --color-accent-foreground: oklch(1 0 0);
+  --color-accent-hover: var(--color-accent-600);
+  --color-accent-subtle: var(--color-accent-100);
+  --color-accent-subtle-foreground: var(--color-accent-800);
+
+  /* ─── Warn ─── */
+  --color-warn: var(--color-warn-500);
+  --color-warn-foreground: oklch(1 0 0);
+  --color-warn-hover: var(--color-warn-600);
+  --color-warn-subtle: var(--color-warn-100);
+  --color-warn-subtle-foreground: var(--color-warn-800);
+
+  /* ─── Success ─── */
+  --color-success: var(--color-success-500);
+  --color-success-foreground: oklch(1 0 0);
+  --color-success-hover: var(--color-success-600);
+  --color-success-subtle: var(--color-success-100);
+  --color-success-subtle-foreground: var(--color-success-800);
+
+  /* ─── Muted (for subdued UI elements) ─── */
+  --color-muted: var(--color-surface-200);
+  --color-muted-foreground: var(--color-surface-700);
+  --color-muted-hover: var(--color-surface-300);
+
+  /* ─── Colored Border Subtle (alerts, banners) ─── */
+  --color-primary-border-subtle: var(--color-primary-200);
+  --color-success-border-subtle: oklch(0.86 0.10 145);
+  --color-warn-border-subtle: var(--color-warn-200);
+
+  /* ─── Subtle Surface Hover (close buttons on subtle backgrounds) ─── */
+  --color-primary-subtle-hover: var(--color-primary-200);
+  --color-success-subtle-hover: oklch(0.86 0.08 145);
+  --color-warn-subtle-hover: var(--color-warn-200);
+
+  /* ─── Muted Foreground in Colored Contexts (close buttons, secondary text) ─── */
+  --color-primary-subtle-foreground-muted: var(--color-primary-600);
+  --color-success-subtle-foreground-muted: var(--color-success-600);
+  --color-warn-subtle-foreground-muted: var(--color-warn-600);
+  --color-warn-foreground-muted: oklch(1 0 0 / 0.65);
+  --color-success-foreground-muted: oklch(1 0 0 / 0.65);
+
+  /* ─── Foreground Wash (faint hover on solid-color surfaces) ─── */
+  --color-warn-foreground-wash: oklch(1 0 0 / 0.10);
+
+  /* ─── Progress Track (bar on colored surfaces) ─── */
+  --color-success-foreground-track: oklch(1 0 0 / 0.30);
+  --color-warn-subtle-foreground-track: var(--color-warn-500);
+  --color-warn-foreground-track: oklch(1 0 0 / 0.30);
+  --color-primary-subtle-foreground-track: var(--color-primary-500);
+
+  /* ─── Table ─── */
+  --color-muted-stripe: var(--color-surface-100);
+  --color-overlay: oklch(0.985 0.002 280 / 0.60);
+
+  /* ─── Border & Ring ─── */
+  --color-border: var(--color-surface-300);
+  --color-border-subtle: var(--color-surface-200);
+  --color-ring: var(--color-primary-500);
+
+  /* ─── Overlay / Popover ─── */
+  --color-backdrop: oklch(0 0 0 / 0.8);
+  --color-popover: var(--color-surface-50);
+  --color-popover-foreground: var(--color-surface-900);
+
+  /* ─── Card ─── */
+  --color-card: var(--color-surface-50);
+  --color-card-foreground: var(--color-surface-900);
+
+  /* ─── Tooltip (dark bg, light text) ─── */
+  --color-tooltip: var(--color-surface-900);
+  --color-tooltip-foreground: var(--color-surface-50);
+
+  /* ─── Input ─── */
+  --color-input-border: var(--color-surface-300);
+  --color-input-background: var(--color-surface-50);
+  --color-input-foreground: var(--color-surface-900);
+  --color-input-placeholder: var(--color-surface-500);
+  --color-input-disabled: var(--color-surface-100);
+
+  /* ─── Placeholder / Disabled ─── */
+  --color-placeholder: var(--color-surface-500);
+  --color-disabled: var(--color-surface-300);
+  --color-disabled-foreground: var(--color-surface-500);
+
+  /* ─── Typography ─── */
+
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular,
+    Menlo, monospace;
+
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+  --text-5xl: 3.125rem;
+  --text-5xl--line-height: 1;
+  --text-5xl--letter-spacing: -0.025em;
+
+  /* ─── Spacing ─── */
+
+  --spacing: 0.25rem;
+
+  /* ─── Border Radius (Primitive) ─── */
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-pill: 9999px;
+
+  /* ─── Border Radius (Semantic) ─── */
+
+  /* Interactive Controls */
+  --radius-control-sm: var(--radius-md);   /* Small buttons, footer buttons */
+  --radius-control: var(--radius-md);      /* Default/large buttons, icon buttons */
+
+  /* Form Inputs */
+  --radius-input: var(--radius-md);        /* Input fields, triggers, selects */
+
+  /* Containers */
+  --radius-card: var(--radius-lg);         /* Cards, panels */
+  --radius-collapsible: var(--radius-md);  /* Collapsible containers and triggers */
+
+  /* Overlays */
+  --radius-overlay: var(--radius-lg);      /* Dropdown panels, datepicker panels */
+  --radius-popover: var(--radius-xl);      /* Popovers, menus, tooltips */
+
+  /* Indicators */
+  --radius-badge: var(--radius-md);        /* Badges (default/lg sizes) */
+  --radius-badge-sm: var(--radius-sm);     /* Small badges */
+  --radius-tag: var(--radius-sm);          /* Multi-select tags */
+
+  /* Calendar */
+  --radius-calendar: var(--radius-lg);     /* Calendar container */
+  --radius-calendar-cell: var(--radius-lg); /* Year/multi-year cells */
+
+  /* Small Interactive Elements */
+  --radius-interactive-sm: var(--radius-sm); /* Checkboxes, close/clear buttons */
+
+  /* Tabs */
+  --radius-tab-list: var(--radius-lg);     /* Tab header/list container */
+  --radius-tab: var(--radius-md);          /* Individual tab items */
+
+  /* Media */
+  --radius-media: var(--radius-md);        /* Media elements, inset images */
+
+  /* ─── Shadows ─── */
+
+  --shadow-xs: 0 1px 2px oklch(0.14 0.004 280 / 0.05);
+  --shadow-sm: 0 1px 3px oklch(0.14 0.004 280 / 0.1), 0 1px 2px oklch(0.14 0.004 280 / 0.06);
+  --shadow-md: 0 4px 6px oklch(0.14 0.004 280 / 0.1), 0 2px 4px oklch(0.14 0.004 280 / 0.06);
+  --shadow-lg: 0 10px 15px oklch(0.14 0.004 280 / 0.1), 0 4px 6px oklch(0.14 0.004 280 / 0.05);
+  --shadow-xl: 0 20px 25px oklch(0.14 0.004 280 / 0.1), 0 8px 10px oklch(0.14 0.004 280 / 0.04);
+
+  /* ─── Semantic Shadows ─── */
+  --shadow-card: var(--shadow-md);
+  --shadow-overlay: var(--shadow-lg);
+  --shadow-dialog: var(--shadow-xl);
+
+  /* ─── Icon Sizes ─── */
+  /* Used by com-icon CVA size variant. Values = Lucide's size prop (px). */
+  --size-icon-xs: 0.75rem;   /* 12px — inline micro icons */
+  --size-icon-sm: 1rem;      /* 16px — inline with text-sm */
+  --size-icon-md: 1.25rem;   /* 20px — inline with text-base */
+  --size-icon-lg: 1.5rem;    /* 24px — default standalone, Lucide default */
+  --size-icon-xl: 2rem;      /* 32px — emphasis / hero */
+  --size-icon-2xl: 2.5rem;   /* 40px — large feature icons */
+
+  /* ─── Transitions ─── */
+
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ─── Transition Durations ─── */
+  --duration-fast: 100ms;
+  --duration-normal: 150ms;
+  --duration-slow: 200ms;
+
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-slide-up: slide-up 0.3s ease-out;
+  --animate-scale-in: scale-in 0.2s var(--ease-spring);
+}

package/styles/utilities.css

@@ -0,0 +1,16 @@
+/* Toast overlay pane — clicks pass through to content below */
+.com-toast-overlay {
+  pointer-events: none;
+}
+
+/* ─── Standalone Text Color Overrides ─── */
+/* text-success and text-warn need darker shades for text contrast on bg-background */
+
+@layer utilities {
+  .text-success {
+    color: var(--color-success-600);
+  }
+  .text-warn {
+    color: var(--color-warn-600);
+  }
+}

package/types/ngx-com-components-alert.d.ts

@@ -6,9 +6,9 @@ type AlertVariant = 'info' | 'success' | 'warning' | 'destructive';
 /**
  * CVA variants for the alert container.
  *
- * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,
- *         `--color-success-subtle`, `--color-success-subtle-foreground`,
- *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`, `--color-primary-border-subtle`,
+ *         `--color-success-subtle`, `--color-success-subtle-foreground`, `--color-success-border-subtle`,
+ *         `--color-warn-subtle`, `--color-warn-subtle-foreground`, `--color-warn-border-subtle`,
  *         `--color-warn`, `--color-warn-foreground`,
  *         `--radius-card`
  */
@@ -18,7 +18,11 @@ declare const alertVariants: (props?: {
 /**
  * CVA variants for the alert close button.
  *
- * @tokens `--color-ring`, `--radius-card`
+ * @tokens `--color-ring`, `--radius-card`,
+ *         `--color-primary-subtle-foreground-muted`, `--color-primary-subtle-hover`,
+ *         `--color-success-subtle-foreground-muted`, `--color-success-subtle-hover`,
+ *         `--color-warn-subtle-foreground-muted`, `--color-warn-subtle-hover`,
+ *         `--color-warn-foreground-muted`, `--color-warn-foreground-wash`
  */
 declare const alertCloseButtonVariants: (props?: {
     variant?: AlertVariant;
@@ -31,6 +35,8 @@ type AlertVariants = VariantProps<typeof alertVariants>;
  * When present, the alert suppresses the default auto-mapped icon
  * and renders this projected content instead.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-alert variant="success">
@@ -129,6 +135,8 @@ declare class ComAlertTitle {
  *
  * Inherits text color from the parent alert variant.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-alert>
@@ -146,6 +154,8 @@ declare class ComAlertDescription {
  *
  * Container for action buttons. Place buttons inside.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-alert variant="destructive">

package/types/ngx-com-components-avatar.d.ts

@@ -78,6 +78,8 @@ interface AvatarTemplateContext {
  * default icon fallback — the template has full control over the content.
  * Use this for company logos, emoji avatars, or custom graphics.
  *
+ * @tokens none
+ *
  * @example Company logo
  * ```html
  * <com-avatar name="Acme Corp" size="lg" color="primary">