@burdenoff/fe-libs 2026.619.2 → 2026.623.2

package/src/shared/tokens/build/themes.css

@@ -0,0 +1,304 @@
+/* Boff UI — Expressive & Accessibility Themes
+ *
+ * These four themes extend the light/dark base defined in semantic.css. They
+ * are selected via `data-theme="<name>"` on the document root and live in the
+ * `themes` CSS @layer (imported AFTER `brands` in tokens.css), so an expressive
+ * theme may set its own accent (--color-action-primary-*) and win over the
+ * per-brand accent. forest/ocean/sunset/high-contrast are all dark-family; the
+ * host ThemeProvider also adds the Tailwind `.dark` class for them, so any
+ * token a theme does NOT override inherits the dark base (and var()/color-mix
+ * derived tokens — accent-soft, focus ring, shadow glow, back-compat aliases —
+ * recompute automatically against the theme's accent).
+ *
+ * Rule: never change spacing, type scale, layout, or component behavior per
+ * theme — only color/surface/elevation/glass/accent/focus.
+ */
+
+/* ============================ FOREST ============================ *
+ * Immersive farm / nature. Deep green-charcoal surfaces, green accent. */
+[data-theme='forest'] {
+  color-scheme: dark;
+
+  --color-bg-canvas: #0A130D;
+  --color-bg-surface: #122019;
+  --color-bg-elevated: #192C22;
+  --color-bg-sunken: #060C09;
+  --color-bg-inverse: #EDF6F0;
+  --color-bg-overlay: rgba(4, 10, 7, 0.72);
+  --color-bg-accent: #0E2A1B;
+  --color-bg-accentSubtle: #0B3D26;
+  --color-bg-disabled: #192C22;
+
+  --color-text-primary: #EDF6F0;
+  --color-text-secondary: #B0C7B9;
+  --color-text-tertiary: #87A292;
+  --color-text-muted: #87A292;
+  --color-text-inverse: #0A130D;
+  --color-text-link: #6EE7A8;
+  --color-text-linkHover: #9CF0C2;
+  --color-text-placeholder: #6A8576;
+  --color-text-disabled: #56705F;
+
+  --color-border-default: #294437;
+  --color-border-subtle: #1B2E24;
+  --color-border-strong: #3B5A49;
+
+  /* Deeper green so WHITE button text is legible (vivid #22C55E only takes dark
+   * text — which reads poorly on the saturated fill). #22C55E stays the chart/
+   * accent-icon hue below. */
+  --color-action-primary-bg: #15803D;
+  --color-action-primary-bgHover: #1B9E4B;
+  --color-action-primary-bgActive: #0F5C2E;
+  --color-action-primary-bgDisabled: #1F3A2C;
+  --color-action-primary-text: #FFFFFF;
+  --color-action-primary-border: #15803D;
+
+  --color-action-secondary-bg: #19271F;
+  --color-action-secondary-bgHover: #21342A;
+  --color-action-secondary-bgActive: #2A4234;
+  --color-action-secondary-bgDisabled: #19271F;
+  --color-action-secondary-text: #EDF6F0;
+  --color-action-secondary-border: #294437;
+
+  --color-action-ghost-bgHover: #19271F;
+  --color-action-ghost-bgActive: #21342A;
+  --color-action-ghost-text: #B0C7B9;
+
+  --color-overlay-tooltipBg: #21342A;
+  --color-overlay-popoverBg: #19271F;
+  --color-surface-glass: rgba(18, 32, 25, 0.66);
+
+  /* Brand accent palette follows the theme accent in expressive themes, so
+   * components that used the vibecontrols purple now adopt the theme hue. */
+  --color-accent-purple: var(--color-action-primary-bg);
+  --color-accent-purple-hover: var(--color-action-primary-bgHover);
+  --color-accent-purple-subtle: var(--color-accent-soft);
+
+  --color-chart-1: #22C55E;
+  --color-chart-2: #2DD4BF;
+  --color-chart-positive: #34D399;
+}
+
+/* ============================ OCEAN ============================ *
+ * Analytical / calm. Deep blue surfaces, blue accent. */
+[data-theme='ocean'] {
+  color-scheme: dark;
+
+  --color-bg-canvas: #091018;
+  --color-bg-surface: #10192A;
+  --color-bg-elevated: #182740;
+  --color-bg-sunken: #060B12;
+  --color-bg-inverse: #EEF3FB;
+  --color-bg-overlay: rgba(3, 8, 16, 0.72);
+  --color-bg-accent: #0E2440;
+  --color-bg-accentSubtle: #0B335C;
+  --color-bg-disabled: #182740;
+
+  --color-text-primary: #EEF3FB;
+  --color-text-secondary: #AAB9CE;
+  --color-text-tertiary: #8493AB;
+  --color-text-muted: #8493AB;
+  --color-text-inverse: #091018;
+  --color-text-link: #7AB6FF;
+  --color-text-linkHover: #A8CFFF;
+  --color-text-placeholder: #687893;
+  --color-text-disabled: #586278;
+
+  --color-border-default: #233246;
+  --color-border-subtle: #172333;
+  --color-border-strong: #34465E;
+
+  --color-action-primary-bg: #2563EB;
+  --color-action-primary-bgHover: #3B82F6;
+  --color-action-primary-bgActive: #1D4ED8;
+  --color-action-primary-bgDisabled: #1B2D4A;
+  --color-action-primary-text: #FFFFFF;
+  --color-action-primary-border: #2563EB;
+
+  --color-action-secondary-bg: #16243A;
+  --color-action-secondary-bgHover: #1E3150;
+  --color-action-secondary-bgActive: #26406A;
+  --color-action-secondary-bgDisabled: #16243A;
+  --color-action-secondary-text: #EEF3FB;
+  --color-action-secondary-border: #233246;
+
+  --color-action-ghost-bgHover: #16243A;
+  --color-action-ghost-bgActive: #1E3150;
+  --color-action-ghost-text: #AAB9CE;
+
+  --color-overlay-tooltipBg: #1E3150;
+  --color-overlay-popoverBg: #182740;
+  --color-surface-glass: rgba(16, 25, 42, 0.66);
+
+  --color-accent-purple: var(--color-action-primary-bg);
+  --color-accent-purple-hover: var(--color-action-primary-bgHover);
+  --color-accent-purple-subtle: var(--color-accent-soft);
+
+  --color-chart-1: #3B82F6;
+  --color-chart-2: #22D3EE;
+  --color-chart-positive: #34D399;
+}
+
+/* ============================ SUNSET ============================ *
+ * Warm / energetic. Plum-warm surfaces, orange accent. */
+[data-theme='sunset'] {
+  color-scheme: dark;
+
+  --color-bg-canvas: #15101C;
+  --color-bg-surface: #20182A;
+  --color-bg-elevated: #2C2138;
+  --color-bg-sunken: #0F0B16;
+  --color-bg-inverse: #F6EEF3;
+  --color-bg-overlay: rgba(12, 7, 18, 0.72);
+  --color-bg-accent: #3A1E12;
+  --color-bg-accentSubtle: #4A2410;
+  --color-bg-disabled: #2C2138;
+
+  --color-text-primary: #F6EEF3;
+  --color-text-secondary: #C8B6C6;
+  --color-text-tertiary: #A290A0;
+  --color-text-muted: #A290A0;
+  --color-text-inverse: #15101C;
+  --color-text-link: #FBA56A;
+  --color-text-linkHover: #FDC9A0;
+  --color-text-placeholder: #82707F;
+  --color-text-disabled: #6B5C69;
+
+  --color-border-default: #3A2C44;
+  --color-border-subtle: #251B30;
+  --color-border-strong: #4E3C5A;
+
+  /* Deeper orange so WHITE button text is legible (vivid #F97316 only takes
+   * dark text). #F97316 stays the chart/accent-icon hue below. */
+  --color-action-primary-bg: #C2410C;
+  --color-action-primary-bgHover: #EA580C;
+  --color-action-primary-bgActive: #9A3412;
+  --color-action-primary-bgDisabled: #45301F;
+  --color-action-primary-text: #FFFFFF;
+  --color-action-primary-border: #C2410C;
+
+  --color-action-secondary-bg: #271B30;
+  --color-action-secondary-bgHover: #33243F;
+  --color-action-secondary-bgActive: #3F2D4E;
+  --color-action-secondary-bgDisabled: #271B30;
+  --color-action-secondary-text: #F6EEF3;
+  --color-action-secondary-border: #3A2C44;
+
+  --color-action-ghost-bgHover: #271B30;
+  --color-action-ghost-bgActive: #33243F;
+  --color-action-ghost-text: #C8B6C6;
+
+  --color-overlay-tooltipBg: #33243F;
+  --color-overlay-popoverBg: #2C2138;
+  --color-surface-glass: rgba(32, 24, 42, 0.66);
+
+  --color-accent-purple: var(--color-action-primary-bg);
+  --color-accent-purple-hover: var(--color-action-primary-bgHover);
+  --color-accent-purple-subtle: var(--color-accent-soft);
+
+  --color-chart-1: #F97316;
+  --color-chart-2: #FB7185;
+  --color-chart-positive: #34D399;
+}
+
+/* ======================= HIGH CONTRAST ======================= *
+ * Accessibility-first. Pure black/white, vivid green accent, yellow focus.
+ * No translucency / blur (solid surfaces for maximum legibility). */
+[data-theme='high-contrast'] {
+  color-scheme: dark;
+
+  --color-bg-canvas: #000000;
+  --color-bg-surface: #0A0A0A;
+  --color-bg-elevated: #141414;
+  --color-bg-sunken: #000000;
+  --color-bg-inverse: #FFFFFF;
+  --color-bg-overlay: rgba(0, 0, 0, 0.85);
+  --color-bg-accent: #052E16;
+  --color-bg-accentSubtle: #06351A;
+  --color-bg-disabled: #1A1A1A;
+
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #EDEDED;
+  --color-text-tertiary: #D4D4D4;
+  --color-text-muted: #D4D4D4;
+  --color-text-inverse: #000000;
+  --color-text-link: #6FB3FF;
+  --color-text-linkHover: #A8D1FF;
+  --color-text-placeholder: #BFBFBF;
+  --color-text-disabled: #8A8A8A;
+
+  --color-border-default: #6B6B6B;
+  --color-border-subtle: #4A4A4A;
+  --color-border-strong: #9A9A9A;
+  --color-border-hover: #9A9A9A;
+
+  --color-action-primary-bg: #00E676;
+  --color-action-primary-bgHover: #4DFF9D;
+  --color-action-primary-bgActive: #00C853;
+  --color-action-primary-bgDisabled: #1A1A1A;
+  --color-action-primary-text: #000000;
+  --color-action-primary-border: #00E676;
+
+  --color-action-secondary-bg: #1A1A1A;
+  --color-action-secondary-bgHover: #262626;
+  --color-action-secondary-bgActive: #333333;
+  --color-action-secondary-bgDisabled: #1A1A1A;
+  --color-action-secondary-text: #FFFFFF;
+  --color-action-secondary-border: #6B6B6B;
+
+  --color-action-ghost-bgHover: #1A1A1A;
+  --color-action-ghost-bgActive: #262626;
+  --color-action-ghost-text: #EDEDED;
+
+  --color-action-danger-bg: #FF453A;
+  --color-action-danger-bgHover: #FF6961;
+  --color-action-danger-bgActive: #E0352B;
+  --color-action-danger-text: #000000;
+  --color-action-danger-border: #FF453A;
+
+  --color-status-success-bg: #00C853;
+  --color-status-success-bgSubtle: #052E16;
+  --color-status-success-text: #4DFF9D;
+  --color-status-success-border: #00C853;
+  --color-status-warning-bg: #FFB300;
+  --color-status-warning-bgSubtle: #2E2305;
+  --color-status-warning-text: #FFE000;
+  --color-status-warning-border: #FFB300;
+  --color-status-error-bg: #FF453A;
+  --color-status-error-bgSubtle: #2E0606;
+  --color-status-error-text: #FF8A80;
+  --color-status-error-border: #FF453A;
+  --color-status-info-bg: #2196F3;
+  --color-status-info-bgSubtle: #06243A;
+  --color-status-info-text: #6FB3FF;
+  --color-status-info-border: #2196F3;
+
+  --color-overlay-scrim: rgba(0, 0, 0, 0.85);
+  --color-overlay-tooltipBg: #141414;
+  --color-overlay-tooltipText: #FFFFFF;
+  --color-overlay-popoverBg: #141414;
+
+  --color-chart-1: #00E676;
+  --color-chart-2: #29B6F6;
+  --color-chart-3: #FFEE58;
+  --color-chart-4: #FF7043;
+  --color-chart-5: #EC407A;
+  --color-chart-grid: #4A4A4A;
+  --color-chart-axis: #BFBFBF;
+  --color-chart-positive: #4DFF9D;
+  --color-chart-negative: #FF8A80;
+
+  /* Solid surfaces — no glass/blur in high contrast */
+  --color-surface-glass: #0A0A0A;
+  --color-border-glass: #6B6B6B;
+  --blur-glass: 0px;
+
+  /* Brand accent palette follows the theme accent (solid, no translucency) */
+  --color-accent-purple: #00E676;
+  --color-accent-purple-hover: #4DFF9D;
+  --color-accent-purple-subtle: #06351A;
+
+  /* Vivid yellow focus ring */
+  --color-focus-ring: #FFFF00;
+  --shadow-focus: 0 0 0 3px rgba(255, 255, 0, 0.55);
+}

package/src/shared/tokens/tokens.css

@@ -20,3 +20,8 @@
 @import './build/brands/healthybowl.css' layer(brands);
 @import './build/brands/fluidgrids.css' layer(brands);
 @import './build/brands/vibecontrols.css' layer(brands);
+
+/* Boff UI expressive + accessibility themes (forest/ocean/sunset/high-contrast).
+ * Imported into the `themes` layer LAST so an expressive theme's accent wins
+ * over the per-brand accent. See build/themes.css. */
+@import './build/themes.css' layer(themes);