@burdenoff/fe-libs 2026.510.126

package/src/shared/styles/app-shell.css

@@ -0,0 +1,298 @@
+/**
+ * Shared App Shell Stylesheet
+ *
+ * All product app shells should import this as their base stylesheet:
+ *
+ *   @import "tailwindcss";
+ *   @import '@burdenoff/fe-libs/shared/tokens/tokens.css';
+ *   @import '@burdenoff/fe-libs/shared/styles/app-shell.css';
+ *
+ * Then add product-specific overrides below.
+ */
+
+/* ============================================
+ * @theme — Tailwind v4 theme configuration
+ * Maps fe-libs design tokens to Tailwind utilities
+ * ============================================ */
+@theme {
+  /* Background colors */
+  --color-bg-canvas: var(--color-bg-canvas);
+  --color-bg-surface: var(--color-bg-surface);
+  --color-bg-elevated: var(--color-bg-elevated);
+  --color-bg-sunken: var(--color-bg-sunken);
+  --color-bg-inverse: var(--color-bg-inverse);
+  --color-bg-overlay: var(--color-bg-overlay);
+  --color-bg-accent: var(--color-bg-accent);
+  --color-bg-accentSubtle: var(--color-bg-accentSubtle);
+  --color-bg-disabled: var(--color-bg-disabled);
+
+  /* Text colors */
+  --color-text-primary: var(--color-text-primary);
+  --color-text-secondary: var(--color-text-secondary);
+  --color-text-muted: var(--color-text-muted);
+  --color-text-inverse: var(--color-text-inverse);
+  --color-text-link: var(--color-text-link);
+  --color-text-linkHover: var(--color-text-linkHover);
+  --color-text-placeholder: var(--color-text-placeholder);
+  --color-text-disabled: var(--color-text-disabled);
+
+  /* Border colors */
+  --color-border-subtle: #E5E7EB;
+  --color-border-default: #D1D5DB;
+  --color-border-strong: #9CA3AF;
+  --color-border-focus: #2563EB;
+  --color-border-error: #DC2626;
+  --color-border: #D1D5DB;
+
+  /* Action colors */
+  --color-action-primary-bg: var(--color-action-primary-bg);
+  --color-action-primary-bgHover: var(--color-action-primary-bgHover);
+  --color-action-primary-bgActive: var(--color-action-primary-bgActive);
+  --color-action-primary-text: var(--color-action-primary-text);
+  --color-action-secondary-bg: var(--color-action-secondary-bg);
+  --color-action-secondary-bgHover: var(--color-action-secondary-bgHover);
+  --color-action-secondary-text: var(--color-action-secondary-text);
+  --color-action-ghost-bgHover: var(--color-action-ghost-bgHover);
+  --color-action-ghost-text: var(--color-action-ghost-text);
+  --color-action-danger-bg: var(--color-action-danger-bg);
+
+  /* Status colors */
+  --color-status-success-bg: var(--color-status-success-bg);
+  --color-status-success-bgSubtle: var(--color-status-success-bgSubtle);
+  --color-status-success-text: var(--color-status-success-text);
+  --color-status-error-bg: var(--color-status-error-bg);
+  --color-status-error-text: var(--color-status-error-text);
+  --color-status-warning-bg: var(--color-status-warning-bg);
+  --color-status-info-bg: var(--color-status-info-bg);
+
+  /* Semantic surface aliases */
+  --color-surface: var(--color-bg-surface);
+  --color-surface-elevated: var(--color-bg-elevated);
+  --color-surface-sunken: var(--color-bg-sunken);
+  --color-surface-canvas: var(--color-bg-canvas);
+  --color-surface-hover: var(--color-bg-sunken);
+  --color-surface-inverse: var(--color-bg-inverse);
+
+  /* Semantic content aliases */
+  --color-content-primary: var(--color-text-primary);
+  --color-content-secondary: var(--color-text-secondary);
+  --color-content-tertiary: var(--color-text-muted);
+  --color-content-muted: var(--color-text-muted);
+  --color-content-inverse: var(--color-text-inverse);
+  --color-content-placeholder: var(--color-text-placeholder);
+  --color-content-disabled: var(--color-text-disabled);
+
+  /* Semantic accent aliases */
+  --color-accent-primary: var(--color-action-primary-bg);
+  --color-accent-hover: var(--color-action-primary-bgHover);
+  --color-accent-active: var(--color-action-primary-bgActive);
+  --color-accent-muted: var(--color-bg-accent);
+
+  /* Accent color tokens */
+  --color-accent-blue: var(--color-accent-blue);
+  --color-accent-blue-hover: var(--color-accent-blue-hover);
+  --color-accent-blue-subtle: var(--color-accent-blue-subtle);
+  --color-accent-purple: var(--color-accent-purple);
+  --color-accent-purple-hover: var(--color-accent-purple-hover);
+  --color-accent-purple-subtle: var(--color-accent-purple-subtle);
+  --color-accent-teal: var(--color-accent-teal);
+  --color-accent-teal-hover: var(--color-accent-teal-hover);
+  --color-accent-teal-subtle: var(--color-accent-teal-subtle);
+  --color-accent-indigo: var(--color-accent-indigo);
+  --color-accent-indigo-hover: var(--color-accent-indigo-hover);
+  --color-accent-indigo-subtle: var(--color-accent-indigo-subtle);
+
+  /* Semantic aliases */
+  --color-bg-muted: var(--color-bg-muted);
+  --color-border-hover: var(--color-border-hover);
+
+  /* Status hover tokens */
+  --color-status-success-text-hover: var(--color-status-success-text-hover);
+  --color-status-warning-text-hover: var(--color-status-warning-text-hover);
+  --color-status-error-text-hover: var(--color-status-error-text-hover);
+
+  /* Status shortcuts */
+  --color-success: var(--color-status-success-bg);
+  --color-success-subtle: var(--color-status-success-bgSubtle);
+  --color-error: var(--color-status-error-bg);
+  --color-warning: var(--color-status-warning-bg);
+  --color-info: var(--color-status-info-bg);
+
+  /* Spacing */
+  --spacing-card-padding: var(--space-cardPadding);
+  --spacing-section-gap: var(--space-sectionGap);
+  --spacing-form-gap: var(--space-formGap);
+  --spacing-control-gap: var(--space-controlGap);
+  --spacing-list-gap: var(--space-listGap);
+  --spacing-icon-gap: var(--space-iconGap);
+
+  /* Control heights */
+  --height-control-sm: var(--size-controlHeight-sm);
+  --height-control-md: var(--size-controlHeight-md);
+  --height-control-lg: var(--size-controlHeight-lg);
+
+  /* Icon sizes */
+  --width-icon-sm: var(--size-icon-sm);
+  --height-icon-sm: var(--size-icon-sm);
+  --width-icon-md: var(--size-icon-md);
+  --height-icon-md: var(--size-icon-md);
+  --width-icon-lg: var(--size-icon-lg);
+  --height-icon-lg: var(--size-icon-lg);
+
+  /* Typography */
+  --font-size-body-sm: var(--font-size-body-sm);
+  --font-size-body-md: var(--font-size-body-md);
+  --font-size-body-lg: var(--font-size-body-lg);
+  --font-size-heading-h1: var(--font-size-heading-h1);
+  --font-size-heading-h2: var(--font-size-heading-h2);
+  --font-size-heading-h3: var(--font-size-heading-h3);
+  --font-size-heading-h4: var(--font-size-heading-h4);
+  --font-family-body: var(--font-family-body);
+  --font-family-heading: var(--font-family-heading);
+  --font-family-mono: var(--font-family-mono);
+  --font-weight-regular: var(--font-weight-regular);
+  --font-weight-medium: var(--font-weight-medium);
+  --font-weight-semibold: var(--font-weight-semibold);
+  --font-weight-bold: var(--font-weight-bold);
+
+  /* Border radius */
+  --radius-button: var(--radius-button);
+  --radius-input: var(--radius-input);
+  --radius-card: var(--radius-card);
+  --radius-pill: 9999px;
+
+  /* shadcn/ui compatible colors */
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accent);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-destructive: var(--color-status-error-bg);
+  --color-card: var(--color-bg-surface);
+  --color-card-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-elevated);
+  --color-popover-foreground: var(--color-text-primary);
+
+  /* Legacy kebab-case status aliases */
+  --color-status-success-bg-subtle: var(--color-status-success-bgSubtle);
+  --color-status-success-border: var(--color-status-success-border, #6EE7B7);
+  --color-status-error-bg-subtle: var(--color-status-error-bgSubtle);
+  --color-status-error-border: var(--color-status-error-border, #FCA5A5);
+  --color-status-warning-bg-subtle: var(--color-status-warning-bgSubtle);
+  --color-status-warning-border: var(--color-status-warning-border, #FDE047);
+  --color-status-info-bg-subtle: var(--color-status-info-bgSubtle);
+  --color-status-info-border: var(--color-status-info-border, #93C5FD);
+}
+
+/* ============================================
+ * Base styles using semantic tokens
+ * ============================================ */
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    border-color: var(--color-border-default);
+  }
+
+  html {
+    width: 100%;
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    min-height: 100vh;
+    min-height: 100dvh;
+    color: var(--color-text-primary);
+    background: var(--color-bg-canvas);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-body-md);
+    line-height: var(--font-lineHeight-normal);
+    font-feature-settings: "rlig" 1, "calt" 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  #root {
+    width: 100%;
+    max-width: 100vw;
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding-top: env(safe-area-inset-top);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
+    display: flex;
+    flex-direction: column;
+  }
+
+  img,
+  video,
+  canvas,
+  svg:not(.react-flow svg):not(.react-flow__background):not(.react-flow__marker) {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  /* React Flow edge overrides */
+  .react-flow__edges {
+    width: 100% !important;
+    height: 100% !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    pointer-events: none;
+  }
+
+  .react-flow__edges svg {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: none !important;
+    overflow: visible !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+  }
+
+  .react-flow__marker {
+    max-width: none !important;
+    overflow: visible !important;
+  }
+
+  input,
+  textarea,
+  select,
+  button {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  div,
+  section,
+  article,
+  aside,
+  header,
+  footer,
+  main,
+  nav {
+    min-width: 0;
+  }
+
+  pre,
+  code {
+    max-width: 100%;
+    overflow-x: auto;
+    word-wrap: break-word;
+  }
+
+  table {
+    max-width: 100%;
+    table-layout: fixed;
+  }
+}

package/src/shared/styles/index.css

@@ -0,0 +1,213 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  /* Color tokens using semantic naming */
+  --color-background: oklch(100% 0 0);
+  --color-foreground: oklch(14.5% 0.04 285.82);
+  --color-card: oklch(100% 0 0);
+  --color-card-foreground: oklch(14.5% 0.04 285.82);
+  --color-popover: oklch(100% 0 0);
+  --color-popover-foreground: oklch(14.5% 0.04 285.82);
+  --color-primary: oklch(20.5% 0.04 285.82);
+  --color-primary-foreground: oklch(98.5% 0.01 285.82);
+  --color-secondary: oklch(96.9% 0.02 285.82);
+  --color-secondary-foreground: oklch(20.5% 0.04 285.82);
+  --color-muted: oklch(96.9% 0.02 285.82);
+  --color-muted-foreground: oklch(55.6% 0.03 285.82);
+  --color-accent: oklch(96.9% 0.02 285.82);
+  --color-accent-foreground: oklch(20.5% 0.04 285.82);
+  --color-destructive: oklch(57.7% 0.24 27.32);
+  --color-destructive-foreground: oklch(98.5% 0.01 285.82);
+  --color-border: oklch(91.4% 0.02 285.82);
+  --color-input: oklch(91.4% 0.02 285.82);
+  --color-ring: oklch(70.7% 0.02 285.82);
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
+
+  /* Border radius */
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  @theme {
+    --color-background: oklch(14.5% 0.04 285.82);
+    --color-foreground: oklch(98.5% 0.01 285.82);
+    --color-card: oklch(14.5% 0.04 285.82);
+    --color-card-foreground: oklch(98.5% 0.01 285.82);
+    --color-popover: oklch(14.5% 0.04 285.82);
+    --color-popover-foreground: oklch(98.5% 0.01 285.82);
+    --color-primary: oklch(98.5% 0.01 285.82);
+    --color-primary-foreground: oklch(20.5% 0.04 285.82);
+    --color-secondary: oklch(26.9% 0.04 285.82);
+    --color-secondary-foreground: oklch(98.5% 0.01 285.82);
+    --color-muted: oklch(26.9% 0.04 285.82);
+    --color-muted-foreground: oklch(70.7% 0.02 285.82);
+    --color-accent: oklch(26.9% 0.04 285.82);
+    --color-accent-foreground: oklch(98.5% 0.01 285.82);
+    --color-destructive: oklch(57.7% 0.24 27.32);
+    --color-destructive-foreground: oklch(98.5% 0.01 285.82);
+    --color-border: oklch(26.9% 0.04 285.82);
+    --color-input: oklch(26.9% 0.04 285.82);
+    --color-ring: oklch(83.9% 0.02 285.82);
+  }
+}
+
+/* Base styles */
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+/* Animation keyframes */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/shared/tokens/build/brands/fluidgrids.css

@@ -0,0 +1,6 @@
+/* FluidGrids brand overrides - Auto-generated */
+[data-brand="fluidgrids"] {
+  --color-action-primary-bg: #0891B2;
+  --color-action-primary-bg-hover: #0E7490;
+  --color-action-primary-bg-active: #155E75;
+}

package/src/shared/tokens/build/brands/healthybowl.css

@@ -0,0 +1,6 @@
+/* HealthyBowl brand overrides - Auto-generated */
+[data-brand="healthybowl"] {
+  --color-action-primary-bg: #16A34A;
+  --color-action-primary-bg-hover: #15803D;
+  --color-action-primary-bg-active: #166534;
+}

package/src/shared/tokens/build/brands/tenant.css

@@ -0,0 +1,6 @@
+/* Tenant brand overrides - Auto-generated */
+[data-brand="tenant"] {
+  --color-action-primary-bg: #9333EA;
+  --color-action-primary-bg-hover: #7E22CE;
+  --color-action-primary-bg-active: #6B21A8;
+}

package/src/shared/tokens/build/brands/vibecontrols.css

@@ -0,0 +1,6 @@
+/* VibeControls brand overrides - Auto-generated */
+[data-brand="vibecontrols"] {
+  --color-action-primary-bg: #9333EA;
+  --color-action-primary-bgHover: #7E22CE;
+  --color-action-primary-bgActive: #6B21A8;
+}

package/src/shared/tokens/build/brands/workspaces.css

@@ -0,0 +1,6 @@
+/* Workspaces brand overrides - Auto-generated */
+[data-brand="workspaces"] {
+  --color-action-primary-bg: #2563EB;
+  --color-action-primary-bg-hover: #1D4ED8;
+  --color-action-primary-bg-active: #1E40AF;
+}