@byline/ui 0.9.3 → 0.10.1

package/src/styles/functional/functional.css

@@ -0,0 +1,6 @@
+@import "./colors.css";
+@import "./surfaces.css";
+@import "./typography.css";
+@import "./borders.css";
+@import "./grid-flex.css";
+@import "./shadcn-compat.css";

package/src/styles/functional/grid-flex.css

@@ -0,0 +1,52 @@
+@layer byline-functional {
+  :root {
+    /* ========================================
+       GRID SYSTEM
+    ======================================== */
+    --grid-columns-2: 2;
+    --grid-columns-3: 3;
+    --grid-columns-4: 4;
+    --grid-columns-5: 5;
+    --grid-columns-6: 6;
+    --grid-columns-7: 7;
+    --grid-columns-8: 8;
+    --grid-columns-9: 9;
+    --grid-columns-10: 10;
+    --grid-columns-11: 11;
+    --grid-columns-12: 12;
+    --grid-gap-sm: 8px;
+    --grid-gap-md: 16px;
+    --grid-gap-lg: 24px;
+    --grid-column-size-xs: 240px;
+    --grid-column-size-sm: 260px;
+    --grid-column-size-md: 320px;
+    --grid-column-size-lg: 480px;
+
+    /* ========================================
+       GAP SYSTEM (For Grid & Flexbox)
+    ======================================== */
+    --gap-0: var(--spacing-0);
+    --gap-1: var(--spacing-4);
+    --gap-2: var(--spacing-8);
+    --gap-3: var(--spacing-12);
+    --gap-4: var(--spacing-16);
+    --gap-5: var(--spacing-20);
+    --gap-6: var(--spacing-6);
+    --gap-8: var(--spacing-8);
+    --gap-10: var(--spacing-40);
+    --gap-12: var(--spacing-48);
+    --gap-16: var(--spacing-64);
+    --gap-20: var(--spacing-80);
+    --gap-24: var(--spacing-96);
+    --gap-32: var(--spacing-128);
+
+    /* ========================================
+       FLEXBOX HELPERS
+    ======================================== */
+    --flex-row: row;
+    --flex-column: column;
+    --flex-wrap: wrap;
+    --flex-nowrap: nowrap;
+    --flex-center: center;
+  }
+}

package/src/styles/functional/shadcn-compat.css

@@ -0,0 +1,90 @@
+/**
+ * SHADCN COMPATIBILITY ALIAS LAYER
+ *
+ * Additive translation layer that maps Infonomic semantic tokens onto the
+ * naming ShadCN-style UI snippets and AI-generated markup expect. The
+ * Infonomic token model remains the source of truth - these aliases are
+ * strictly for compatibility with consumer apps that register Tailwind
+ * semantic utilities (bg-card, text-muted-foreground, border-border, etc.).
+ *
+ * Important notes on mapping intent:
+ * - ShadCN `accent` is an interactive neutral surface, NOT a brand accent.
+ *   It is mapped to --surface-subtle-hover, not --accent.
+ * - ShadCN `muted` is a subdued surface, NOT Infonomic's --muted text token.
+ *   Surface aliases use --surface-subtle*; text aliases use --text-subtle.
+ * - ShadCN `primary` is a high-emphasis action surface, matched to
+ *   --fill-primary-strong (not the raw --primary palette token).
+ * - ShadCN's default dark theme inverts `primary` toward near-white.
+ *   The Infonomic mapping intentionally keeps `primary` brand-tinted in
+ *   dark mode via --fill-primary-strong, which itself swaps per mode.
+ *
+ * Mode switching is handled entirely by the underlying functional tokens:
+ * --surface-panel, --fill-primary-strong, --text, etc. all redefine
+ * themselves in .dark and .not-dark scopes, so the var() chains here
+ * resolve to the correct values automatically. No per-mode duplication
+ * of the --shadcn-* aliases is required.
+ *
+ * This file is imported after the rest of the functional layer so the
+ * aliases always resolve against the current mode's semantic values.
+ */
+
+@layer byline-functional {
+  :root {
+    /* Core surface + content roles */
+    --shadcn-background: var(--background);
+    --shadcn-foreground: var(--foreground);
+
+    --shadcn-card: var(--surface-panel);
+    --shadcn-card-foreground: var(--text);
+
+    --shadcn-popover: var(--surface-panel-elevated);
+    --shadcn-popover-foreground: var(--text);
+
+    --shadcn-primary: var(--fill-primary-strong);
+    --shadcn-primary-foreground: var(--text-on-primary-strong);
+
+    --shadcn-secondary: var(--fill-secondary-strong);
+    --shadcn-secondary-foreground: var(--text-on-secondary-strong);
+
+    --shadcn-muted: var(--surface-subtle-hover);
+    --shadcn-muted-foreground: var(--text-subtle);
+
+    --shadcn-accent: var(--surface-subtle-hover);
+    --shadcn-accent-foreground: var(--text);
+
+    --shadcn-destructive: var(--fill-danger-strong);
+    --shadcn-destructive-foreground: var(--text-on-danger-strong);
+
+    --shadcn-border: var(--border-color);
+    --shadcn-input: var(--field-border);
+    --shadcn-ring: var(--focus-ring);
+
+    /* Radius scale - mapped to the uikit's base radius tokens so
+       rounded-sm/md/lg/xl utilities land on uikit values rather than
+       Tailwind defaults. --shadcn-radius is the ShadCN base alias. */
+    --shadcn-radius-sm: var(--border-radius-sm);
+    --shadcn-radius-md: var(--border-radius-md);
+    --shadcn-radius-lg: var(--border-radius-lg);
+    --shadcn-radius-xl: var(--border-radius-xl);
+    --shadcn-radius: var(--shadcn-radius-md);
+
+    /* Chart palette - five sequential hues for the ShadCN Chart component.
+       Uses functional intent base tokens so dark-mode shades inherit. */
+    --shadcn-chart-1: var(--primary);
+    --shadcn-chart-2: var(--secondary);
+    --shadcn-chart-3: var(--info);
+    --shadcn-chart-4: var(--warning);
+    --shadcn-chart-5: var(--success);
+
+    /* Sidebar primitive - mirrors the core surface/content roles within
+       the sidebar's own token namespace. */
+    --shadcn-sidebar: var(--surface-panel);
+    --shadcn-sidebar-foreground: var(--text);
+    --shadcn-sidebar-primary: var(--fill-primary-strong);
+    --shadcn-sidebar-primary-foreground: var(--text-on-primary-strong);
+    --shadcn-sidebar-accent: var(--surface-subtle-hover);
+    --shadcn-sidebar-accent-foreground: var(--text);
+    --shadcn-sidebar-border: var(--border-color);
+    --shadcn-sidebar-ring: var(--focus-ring);
+  }
+}

package/src/styles/functional/surfaces.css

@@ -0,0 +1,132 @@
+/**
+ * SURFACE FUNCTIONAL TOKENS
+ *
+ * Semantic tokens for surfaces, backgrounds, shadows, and depth.
+ * These tokens define the canvas on which content sits.
+ */
+
+@layer byline-functional {
+  :root {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --shadow: var(--shadow-md);
+    --loader-color: currentColor;
+
+    /* SURFACE TOKENS (for panels, dropdowns, menus, lists)
+       ----------------------------------------------------------------- */
+
+    /* Panel/container backgrounds */
+    --surface-panel: var(--canvas-25);
+    --surface-panel-elevated: white;
+    /* For dropdowns/popovers with shadow */
+    --surface-panel-border: var(--border-color);
+
+    /* Item backgrounds (default transparent, inherits panel) */
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-50);
+    --surface-item-active: var(--canvas-100);
+
+    /* Item text colors */
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-400);
+
+    /* Subtle neutral surface - generic role used by components that need
+       a muted background without adopting any intent color. Also the
+       mapping target for ShadCN-style muted/accent tokens. */
+    --surface-subtle: var(--canvas-50);
+    --surface-subtle-hover: var(--canvas-100);
+    --surface-subtle-active: var(--canvas-200);
+
+    /* Panel scrollers */
+    --surface-panel-scrollbar: var(--gray-50);
+    --surface-panel-scrollbar-thumb: var(--primary-100);
+  }
+
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
+   * We rely on the consuming application to detect a user's 
+   * preferred color scheme - either by header or cookie, and to set 
+   * a root html class accordingly (for now), which unfortunately means
+   * relying on either a server-side render or JS to set the theme
+   * on initial load.
+   */
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"]::backdrop {
+    --background: var(--canvas-900);
+    --foreground: var(--gray-50);
+    --shadow: var(--shadow-lg);
+    --loader-color: currentColor;
+
+    /* SURFACE TOKENS (Dark Mode)
+       ----------------------------------------------------------------- */
+
+    /* Panel/container backgrounds - slightly elevated from canvas-900 base */
+    --surface-panel: var(--canvas-800);
+    --surface-panel-elevated: var(--canvas-800);
+    --surface-panel-border: var(--border-color);
+
+    /* Item backgrounds - lighter than panel for hover/active */
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-700);
+    --surface-item-active: var(--canvas-600);
+
+    /* Item text colors */
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-500);
+
+    /* Subtle neutral surface */
+    --surface-subtle: var(--canvas-800);
+    --surface-subtle-hover: var(--canvas-700);
+    --surface-subtle-active: var(--canvas-600);
+
+    /* Panel scrollers */
+    --surface-panel-scrollbar: var(--canvas-700);
+    --surface-panel-scrollbar-thumb: var(--primary-400);
+  }
+
+  /* ===================================================================
+   * .NOT-DARK OVERRIDE
+   * .not-dark override: Forces light mode tokens by re-declaring :root values.
+   * This duplication is intentional - it ensures .not-dark always wins over .dark
+   * regardless of DOM order, without needing complex :not() selectors.
+   * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
+  */
+  .not-dark {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --shadow: var(--shadow-md);
+    --loader-color: currentColor;
+
+    /* SURFACE TOKENS (Force Light Mode)
+       ----------------------------------------------------------------- */
+
+    /* Panel/container backgrounds - identical to :root */
+    --surface-panel: var(--canvas-25);
+    --surface-panel-elevated: white;
+    --surface-panel-border: var(--border-color);
+
+    /* Item backgrounds */
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-50);
+    --surface-item-active: var(--canvas-100);
+
+    /* Item text colors */
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-400);
+
+    /* Subtle neutral surface */
+    --surface-subtle: var(--canvas-50);
+    --surface-subtle-hover: var(--canvas-100);
+    --surface-subtle-active: var(--canvas-200);
+
+    /* Panel scrollers */
+    --surface-panel-scrollbar: var(--gray-50);
+    --surface-panel-scrollbar-thumb: var(--primary-100);
+  }
+}

package/src/styles/functional/typography.css

@@ -0,0 +1,54 @@
+/**
+ * TYPOGRAPHY FUNCTIONAL TOKENS
+ *
+ * Semantic tokens for text colors and typography-related variables.
+ * Separate from typography.css in the typography/ directory which defines
+ * actual typographic styles and scales.
+ */
+
+@layer byline-functional {
+  :root {
+    --text: var(--gray-900);
+    --headings: var(--primary-700);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+
+    /* Generic text-role tokens - for components that need a subdued or
+       placeholder-style foreground without adopting any intent color. */
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
+  }
+
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute.
+   * We rely on the consuming application to detect a user's
+   * preferred color scheme - either by header or cookie, and to set
+   * a root html class accordingly (for now), which unfortunately means
+   * relying on either a server-side render or JS to set the theme
+   * on initial load.
+   */
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"]::backdrop {
+    --text: var(--gray-50);
+    --headings: var(--gray-50);
+    --muted: oklch(from var(--foreground) calc(l * 0.75) c h);
+
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
+  }
+
+  /* ===================================================================
+   * .NOT-DARK OVERRIDE
+   * .not-dark override: Forces light mode tokens by re-declaring :root values.
+   * This duplication is intentional - it ensures .not-dark always wins over .dark
+   * regardless of DOM order, without needing complex :not() selectors.
+   * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
+  */
+  .not-dark {
+    --text: var(--gray-900);
+    --headings: var(--primary-800);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
+  }
+}

package/src/styles/local-fonts.css

@@ -0,0 +1,98 @@
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter/Inter-VariableFont_opsz_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto/Roboto-VariableFont_wdth_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-stretch: 75% 100%;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto/Roboto-Italic-VariableFont_wdth_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-stretch: 75% 100%;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("/fonts/Rubik/Rubik-VariableFont_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("/fonts/Rubik/Rubik-Italic-VariableFont_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Public Sans";
+  src: url("/fonts/Public_Sans/PublicSans-VariableFont_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Public Sans";
+  src: url("/fonts/Public_Sans/PublicSans-Italic-VariableFont_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Merriweather";
+  src: url("/fonts/Merriweather/Merriweather-VariableFont_opsz,wdth,wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Merriweather";
+  src: url("/fonts/Merriweather/Merriweather-Italic-VariableFont_opsz,wdth,wght.woff2")
+    format("woff2");
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("/fonts/Source_Code_Pro/SourceCodePro-VariableFont_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("/fonts/Source_Code_Pro/SourceCodePro-Italic-VariableFont_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}