@bitforgehq/ui 0.3.0

package/theme.css

@@ -0,0 +1,253 @@
+/*
+ * @bitforgehq/ui — Meadow Sage design tokens.
+ * Source: docs/design/foundations.md (extracted from docs/design/meadow-sage.dc.html).
+ *
+ * Usage (web and mobile apps alike):
+ *   @import 'tailwindcss';
+ *   @import '@bitforgehq/ui/theme.css';
+ *   @theme { --color-primary: #123456; }   <- optional per-app overrides go AFTER this import
+ *
+ * An app that overrides --color-primary also overrides --color-primary-text (primary as text, which
+ * must keep 4.5:1 on bg and surface) and the rest of the brand set, in both @theme and .dark; the
+ * docs site's theme configurator derives all of them, contrast-checked, from one colour.
+ *
+ * Tailwind v4 skips node_modules, so this file registers the compiled library as a source: the
+ * FESM code only, not the source maps beside it (they stay in the package for debugging, but
+ * are ~500 kB of redundant scan input). The path is relative to this stylesheet inside the
+ * published package (dist/ui/theme.css).
+ */
+@source './fesm2022/*.mjs';
+
+/* Class-based dark mode: put `dark` on <html>. Components need no `dark:` classes because every
+   token below is redefined under .dark and utilities resolve to the CSS variables. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Type — Manrope for everything, JetBrains Mono for technical labels. Fonts are loaded by the app. */
+  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+
+  /* Type scale in rem, so a user's font-size preference scales every style together (px at a
+     16 px root in the comments). 8 sizes: display 40, title 28, heading 18, body/label 15,
+     label-sm 14, caption/label-xs 13, micro 12, nano 11. */
+  --text-display: 2.5rem; /* 40/44 */
+  --text-display--line-height: 2.75rem;
+  --text-display--font-weight: 800;
+  --text-display--letter-spacing: -0.03em;
+  --text-title: 1.75rem; /* 28/34 */
+  --text-title--line-height: 2.125rem;
+  --text-title--font-weight: 800;
+  --text-title--letter-spacing: -0.02em;
+  --text-heading: 1.125rem; /* 18/26 */
+  --text-heading--line-height: 1.625rem;
+  --text-heading--font-weight: 700;
+  --text-body: 0.9375rem; /* 15/24 */
+  --text-body--line-height: 1.5rem;
+  --text-body--font-weight: 500;
+  --text-caption: 0.8125rem; /* 13/18 */
+  --text-caption--line-height: 1.125rem;
+  --text-caption--font-weight: 600;
+
+  /* Control and label sizes. No forced weight (except micro); widgets add font-bold/semibold. */
+  --text-label: 0.9375rem; /* 15/20: control labels, list titles */
+  --text-label--line-height: 1.25rem;
+  --text-label-sm: 0.875rem; /* 14/20: md controls, chips */
+  --text-label-sm--line-height: 1.25rem;
+  --text-label-xs: 0.8125rem; /* 13/16: sm controls, avatar md */
+  --text-label-xs--line-height: 1rem;
+  --text-micro: 0.75rem; /* 12/16: badges, help and error text */
+  --text-micro--line-height: 1rem;
+  --text-micro--font-weight: 600;
+  --text-nano: 0.6875rem; /* 11/14: tab labels, avatar sm */
+  --text-nano--line-height: 0.875rem;
+  --text-avatar-lg: 1.625rem; /* 26: initials of the 84 px avatar (84 x 0.31) */
+
+  /* Surfaces */
+  --color-bg: #f7f5ef;
+  --color-surface: #ffffff;
+  --color-surface-muted: #efece5; /* dE 1.9 from bg, so hover rows read on bg */
+  --color-surface-sunken: #efece3;
+  --color-surface-pressed: #e4e0d6; /* pressed neutral surfaces: rows, chips off, segments (text >= 4.5:1) */
+  --color-selected: #efeffd;
+
+  /* Brand */
+  --color-primary: #2b26ba;
+  --color-primary-hover: #241fa3;
+  --color-primary-pressed: #1f1b8c; /* primary filled while pressed */
+  --color-primary-soft: #e6e6fb;
+  --color-primary-soft-hover: #d9d8f8;
+  --color-primary-soft-pressed: #cfcdf6; /* tonal fills and outline/text buttons while pressed */
+  --color-primary-strong: #1a1680;
+  --color-on-primary: #ffffff;
+  --color-primary-text: #2b26ba; /* primary as text (text button, links, focused label): >= 4.5:1 on bg and surface */
+
+  /* Status */
+  --color-success: #1f5a3a;
+  --color-success-soft: #ddefe3;
+  --color-warning: #7a4a12;
+  --color-warning-soft: #fbe6cf;
+  --color-danger: #9a2f1f;
+  --color-danger-soft: #f8dcd6;
+  --color-danger-pressed: #7f2618; /* danger button while pressed, under danger-soft text */
+  --color-danger-border: #c8452f;
+  --color-neutral: #4a5347;
+  --color-neutral-soft: #efece3;
+
+  /* Lines */
+  --color-border: #e4e0d4; /* decorative lines only (dividers, card edges) */
+  --color-border-strong: #8e8e82; /* control boundaries: >= 3:1 on surface and bg */
+  --color-divider: #efece3;
+  /* Toggle off track (>= 3:1), and the border of a read-only off track, where it must hold >= 3:1
+     on both surface (3.28:1) and bg (3.01:1): check both before retuning this token or --color-bg. */
+  --color-control-off: #8d8f84;
+  /* Black in both modes (never the text colour, which is light in dark mode): backdrops, stack dim. */
+  --color-scrim: #000000;
+
+  /* Text */
+  --color-text: #1f2a22;
+  --color-text-secondary: #4a5347;
+  --color-text-muted: #5b6555; /* also placeholders: >= 4.5:1 on surface, surface-sunken, primary-soft, surface-pressed */
+  --color-text-subtle: #869181; /* icons and chevrons only (>= 3:1), never text */
+  --color-text-disabled: #a5aa9f;
+  --color-text-done: #8a9384;
+
+  /* Focus ring (4 px, primary-tinted, >= 3:1 on bg and surface: WCAG 1.4.11) */
+  --color-ring: #8784dc;
+
+  /* Shape */
+  --radius-tile: 12px;
+  --radius-field: 16px;
+  --radius-card: 24px;
+  --radius-checkbox: 7px; /* the design's fixed checkbox radius, not scaled with the others */
+  --radius-control: 9999px; /* pills: buttons, chips, badges, segmented, tab bar, action bar, toggle */
+
+  /* Elevation */
+  --shadow-raised: 0 1px 2px rgb(31 42 34 / 0.06), 0 8px 24px rgb(31 42 34 / 0.08);
+  --shadow-floating: 0 10px 30px rgb(31 42 34 / 0.18);
+  --shadow-segment: 0 1px 3px rgb(31 42 34 / 0.14);
+
+  /* Spacing: semantic steps on top of --spacing (0.25rem). The declared scale is
+     2 4 6 8 10 12 14 16 18 20 24 32 48 px, written as --spacing multiples (0.5 ... 12, with 3.5
+     and 4.5); never arbitrary px. */
+  --spacing-gutter: 1rem; /* 16: screen-edge inset (toast, alert dialog) */
+  --spacing-card: 1.125rem; /* 18: bf-card md, action-bar start */
+  --spacing-card-lg: 1.5rem; /* 24: bf-card lg */
+  --spacing-control-sm: 2rem; /* 32: sm control height (h-8) */
+  --spacing-control-md: 2.5rem; /* 40: md control height (h-10) */
+  --spacing-control-lg: 3rem; /* 48: lg control height (h-12) */
+  --spacing-hit: 2.75rem; /* 44: minimum hit area (min-h-hit) */
+  --spacing-box: 1.375rem; /* 22: checkbox, radio, toggle knob, count badge (size-box) */
+
+  /* Motion: mirrors projects/ui/mobile/motion.ts. */
+  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-md: cubic-bezier(0.2, 0, 0, 1);
+  --ease-settle: cubic-bezier(0.2, 0.8, 0.3, 1);
+
+  /* bf-progress indeterminate: a 40 % stripe runs across the track from the inline start (static
+     under reduced motion); the -rtl pair runs it the other way under dir="rtl". */
+  --animate-progress-indeterminate: bf-progress-indeterminate 1.4s var(--ease-md) infinite;
+  --animate-progress-indeterminate-rtl: bf-progress-indeterminate-rtl 1.4s var(--ease-md) infinite;
+  @keyframes bf-progress-indeterminate {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(250%);
+    }
+  }
+  @keyframes bf-progress-indeterminate-rtl {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(-250%);
+    }
+  }
+
+  /* Safe areas: Capacitor 8.3+ injects --safe-area-inset-* on Android; env() covers iOS and web. */
+  --spacing-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
+  --spacing-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+  --spacing-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
+  --spacing-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
+}
+
+/* Not Tailwind theme namespaces: plain custom properties. Durations mirror mobile/motion.ts;
+   Tailwind v4 has no z-index namespace, so layers are used as z-(--bf-z-*). */
+:root {
+  color-scheme: light; /* native scrollbars and form controls match the light palette */
+  --bf-duration-fast: 150ms; /* colour transitions, reduced-motion fade */
+  --bf-duration-overlay: 260ms; /* overlays, modal depth */
+  --bf-duration-push: 500ms; /* iOS push/pop */
+  --bf-z-sticky: 10; /* translucent header */
+  --bf-z-tabbar: 20; /* floating tab bar */
+  --bf-z-dim: 2; /* stack-outlet dim layer (frames use 0/1/3 around it) */
+  --bf-z-overlay: 1000; /* CDK overlay container (documented, CDK sets it) */
+}
+
+/* Dark palette: neutral grays (no brand tint, so any primary fits) with the indigo brand lifted
+   for dark backgrounds. Status colors are derived (lighter text, deep soft tints). */
+.dark {
+  color-scheme: dark; /* dark scrollbars, form controls and canvas under the dark palette */
+  --color-bg: #111214;
+  --color-surface: #1e2024;
+  --color-surface-muted: #262930;
+  --color-surface-sunken: #18191c; /* distinct from bg and surface, so tracks read on the page */
+  --color-surface-pressed: #2e3139;
+  --color-selected: #1b1c44;
+
+  --color-primary: #8c88f5;
+  --color-primary-hover: #a3a0f8;
+  --color-primary-pressed: #b9b7fb;
+  --color-primary-soft: #23245a;
+  --color-primary-soft-hover: #2d2e6c;
+  --color-primary-soft-pressed: #34357a;
+  --color-primary-strong: #b3b0ff;
+  --color-on-primary: #0c0b3a;
+  --color-primary-text: #8c88f5; /* explicit (not var(--color-primary)) so a .dark sub-tree resolves */
+
+  --color-success: #5cc48a;
+  --color-success-soft: #1d3327;
+  --color-warning: #f0b562;
+  --color-warning-soft: #3a2c16;
+  --color-danger: #f0897a;
+  --color-danger-soft: #3d1f1a;
+  --color-danger-pressed: #f4a497;
+  --color-danger-border: #d3563f;
+  --color-neutral: #b8bbc2;
+  --color-neutral-soft: #24262b;
+
+  --color-border: #2a2c31;
+  --color-border-strong: #686a70;
+  --color-divider: #222429;
+  --color-control-off: #686a70;
+  --color-scrim: #000000;
+
+  --color-text: #ececee;
+  --color-text-secondary: #c9cbd0;
+  --color-text-muted: #9a9da5;
+  --color-text-subtle: #6f727a;
+  --color-text-disabled: #55585f;
+  --color-text-done: #7c7f87;
+
+  --color-ring: #6362af;
+
+  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
+  --shadow-floating: 0 10px 30px rgb(0 0 0 / 0.5);
+  --shadow-segment: 0 1px 3px rgb(0 0 0 / 0.5);
+}
+
+/* ---------- Mobile overlays ---------- */
+/*
+ * Backdrop of `BfOverlayService` overlays (`backdropClass` default). The CDK overlay container,
+ * panes and backdrops render outside every component, so the rule lives here. The structural CDK
+ * rules (`.cdk-overlay-container`, `.cdk-overlay-pane`, `.cdk-overlay-backdrop`, …) are not
+ * repeated: CDK 22 injects them itself the first time an overlay is created.
+ */
+/* The scrim (--color-scrim, black in both modes) at 40 % / 60 %. Literal rgb() because relative
+   colour syntax (rgb(from var(--color-scrim) ...)) needs Safari 16.4+. */
+.bf-overlay-backdrop {
+  background: rgb(0 0 0 / 0.4);
+}
+.dark .bf-overlay-backdrop {
+  background: rgb(0 0 0 / 0.6);
+}

package/types/bitforgehq-ui-icons.d.ts

@@ -0,0 +1,50 @@
+import { IconNode } from "lucide";
+import * as i0 from "@angular/core";
+/**
+ * The size of a `bf-icon`: sm 16, md 20 or lg 24 px.
+ *
+ * @summary The three icon sizes, 16, 20 and 24 pixels, matching the text sizes
+ * @since 0.1.0
+ */
+type BfIconSize = 'sm' | 'md' | 'lg';
+/**
+ * Renders a Lucide icon from its data, tree-shakably and without a registry.
+ * Import the icon you need from `lucide` (e.g. `import { Search } from 'lucide'`) and bind it.
+ * Decorative by default; pass `label` when the icon carries meaning on its own (e.g. an icon-only
+ * control without visible text).
+ *
+ * @example
+ * <bf-icon [icon]="Search" />
+ * <bf-icon [icon]="Search" label="Search" size="lg" />
+ * @summary Tree-shakable Lucide icon renderer, decorative by default or labelled when meaningful
+ * @category Icons
+ * @since 0.1.0
+ */
+export declare class BfIconComponent {
+  /** Lucide icon data, e.g. `Search` from `lucide`. */
+  readonly icon: import("@angular/core").InputSignal<IconNode>;
+  /** Visual size: 16, 20 or 24 px. */
+  readonly size: import("@angular/core").InputSignal<BfIconSize>;
+  /** Accessible name. Leave empty for decorative icons next to visible text. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly px: import("@angular/core").Signal<number>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfIconComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfIconComponent, "bf-icon", never, {
+    "icon": {
+      "alias": "icon";
+      "required": true;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type { BfIconSize };