@fairmint/ui 0.3.9 → 0.3.11

package/dist/theme/index.d.ts

@@ -166,35 +166,90 @@ export declare const theme: {
  * --mantine-* variables directly. All light/dark switching is centralised here.
  */
 export declare const fairmintCssVariables: CSSVariablesResolver;
-/**
- * Typed JS references to every --fairmint-* CSS custom property.
- * Use these in component code instead of raw "var(--fairmint-...)" strings so
- * that renaming a token requires one change here rather than hunting every file.
- *
- * Each value includes a CSS fallback derived from the light-mode token value so
- * that components degrade gracefully when cssVariablesResolver is not wired up
- * (e.g. bare MantineProvider in tests or custom setups). Dark-mode fidelity is
- * lost without the resolver, but nothing renders invisibly.
- */
 export declare const fairmintVars: {
+    /** Canvas background for the app shell. */
+    readonly colorBgCanvas: string;
+    /** Primary raised surface. */
+    readonly colorBgSurface: string;
+    /** Secondary surface used for fields, rows, and subtle containers. */
+    readonly colorBgSurfaceSecondary: string;
+    /** Hover surface. */
+    readonly colorBgHover: string;
+    /** Selected surface. */
+    readonly colorBgSelected: string;
+    /** Subtle brand surface. */
+    readonly colorBgBrandSubtle: string;
+    /** Hovered subtle brand surface. */
+    readonly colorBgBrandSubtleHover: string;
+    /** Disabled surface. */
+    readonly colorBgDisabled: string;
     /** Primary body/heading text — titles on tinted surfaces (Chip Banner). */
     readonly colorTextPrimary: `var(--fairmint-color-text-primary, ${string})`;
     /** Secondary / muted text — subtitles, supporting labels. Adapts to color scheme. */
     readonly colorTextSecondary: `var(--fairmint-color-text-secondary, ${string})`;
     /** Tertiary / faint text — timestamps, metadata. Adapts to color scheme. */
     readonly colorTextTertiary: `var(--fairmint-color-text-tertiary, ${string})`;
+    /** Text on filled controls. */
+    readonly colorTextInverse: string;
+    /** Disabled text. */
+    readonly colorTextDisabled: string;
+    /** Primary icon and stroke color. */
+    readonly colorIconPrimary: string;
+    /** Secondary icon and stroke color. */
+    readonly colorIconSecondary: string;
+    /** Tertiary icon and stroke color. */
+    readonly colorIconTertiary: string;
+    /** Icon color on filled or dark surfaces. */
+    readonly colorIconInverse: string;
+    /** Disabled icon and stroke color. */
+    readonly colorIconDisabled: string;
+    /** Default border. */
+    readonly colorBorderDefault: string;
+    /** Focus border/ring color. */
+    readonly colorBorderFocus: string;
+    /** Disabled border. */
+    readonly colorBorderDisabled: string;
+    /** Brand action color. */
+    readonly colorBrandPrimary: string;
+    /** Hovered brand action color. */
+    readonly colorBrandPrimaryHover: string;
+    /** Pressed brand action color. */
+    readonly colorBrandPrimaryActive: string;
+    /** Fairmint blue brand accent. */
+    readonly colorBrandBlue: string;
+    /** Fairmint purple brand accent. */
+    readonly colorBrandPurple: string;
     /** Background tint for selected / active rows. Adapts to color scheme. */
     readonly colorSurfaceSelected: `var(--fairmint-color-surface-selected, ${string})`;
     /** Icon/text drawn on top of colorSurfaceSelected (e.g. a checkmark in a selected badge). Adapts to color scheme. */
     readonly colorIconOnSurfaceSelected: `var(--fairmint-color-icon-on-surface-selected, ${string})`;
-    /** Primary raised surface (cards/panels). Adapts to color scheme. Matches PR #88's naming. */
-    readonly colorBgSurface: "var(--fairmint-color-bg-surface, #ffffff)";
-    /** Secondary surface for fields/rows/badges on a card. Adapts to color scheme. Matches PR #88's naming. */
-    readonly colorBgSurfaceSecondary: `var(--fairmint-color-bg-surface-secondary, ${string})`;
-    /** Default hairline border for cards/panels. Adapts to color scheme. Matches PR #88's naming. */
-    readonly colorBorderDefault: `var(--fairmint-color-border-default, ${string})`;
+    /** Semantic status roles. */
+    readonly colorSuccessBg: string;
+    readonly colorSuccessText: string;
+    readonly colorSuccessBorder: string;
+    readonly colorSuccessSolid: string;
+    readonly colorSuccessSolidHover: string;
+    readonly colorWarningBg: string;
+    readonly colorWarningText: string;
+    readonly colorWarningBorder: string;
+    readonly colorWarningSolid: string;
+    readonly colorWarningSolidHover: string;
+    readonly colorErrorBg: string;
+    readonly colorErrorBgSubtle: string;
+    readonly colorErrorText: string;
+    readonly colorErrorBorder: string;
+    readonly colorErrorSolid: string;
+    readonly colorErrorSolidHover: string;
+    readonly colorErrorSolidMuted: string;
+    readonly colorInfoBg: string;
+    readonly colorInfoText: string;
+    readonly colorInfoBorder: string;
+    readonly colorInfoSolid: string;
+    readonly colorInfoSolidHover: string;
+    /** Decorative watermark color. */
+    readonly colorWatermark: string;
     /** Large decorative watermark on error/empty pages. Adapts to color scheme. */
-    readonly watermarkColor: `var(--fairmint-watermark-color, ${string})`;
+    readonly watermarkColor: string;
     /** Heading font family (Plus Jakarta Sans). */
     readonly fontHeadings: "var(--fairmint-font-headings, \"Plus Jakarta Sans\", sans-serif)";
     /** Body font family (Inter). */
@@ -404,6 +459,19 @@ export declare const neutralColors: {
     readonly 800: "#1C2536";
     readonly 900: "#111927";
 };
+/** Dark neutral ramp used by the semantic dark-mode CSS variables. */
+export declare const darkNeutralColors: {
+    readonly 50: "#F5F7FA";
+    readonly 100: "#E2E7ED";
+    readonly 200: "#B8C2D0";
+    readonly 300: "#8D99A8";
+    readonly 400: "#748093";
+    readonly 500: "#5C687A";
+    readonly 600: "#2F3746";
+    readonly 700: "#1F2A39";
+    readonly 800: "#1B2431";
+    readonly 900: "#0F141C";
+};
 /** Semantic colors for status-based styling. */
 export declare const semanticColors: {
     readonly success: "#10B981";

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAe,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIhG;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAiIX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;CAIb,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EhB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,oBAuCjC,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY;IACvB,2EAA2E;;IAE3E,qFAAqF;;IAErF,4EAA4E;;IAE5E,0EAA0E;;IAE1E,qHAAqH;;IAErH,8FAA8F;;IAE9F,2GAA2G;;IAE3G,iGAAiG;;IAEjG,+EAA+E;;IAE/E,+CAA+C;;IAE/C,gCAAgC;;CAExB,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kCAAkC,CAChD,WAAW,GAAE,OAAO,GAAG,MAAM,GAAG,MAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOjD;AAED,qDAAqD;AACrD,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW;;CAEd,CAAC;AAEX,gGAAgG;AAChG,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,iGAAiG;AACjG,eAAO,MAAM,aAAa;;;;;;;;;;;CAWhB,CAAC;AAEX,gDAAgD;AAChD,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AACnD,YAAY,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAe,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIhG;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAqLX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;CAIb,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FhB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,oBAwMjC,CAAC;AAcH,eAAO,MAAM,YAAY;IACvB,2CAA2C;;IAE3C,8BAA8B;;IAE9B,sEAAsE;;IAEtE,qBAAqB;;IAErB,wBAAwB;;IAExB,4BAA4B;;IAE5B,oCAAoC;;IAEpC,wBAAwB;;IAExB,2EAA2E;;IAE3E,qFAAqF;;IAErF,4EAA4E;;IAE5E,+BAA+B;;IAE/B,qBAAqB;;IAErB,qCAAqC;;IAErC,uCAAuC;;IAEvC,sCAAsC;;IAEtC,6CAA6C;;IAE7C,sCAAsC;;IAEtC,sBAAsB;;IAEtB,+BAA+B;;IAE/B,uBAAuB;;IAEvB,0BAA0B;;IAE1B,kCAAkC;;IAElC,kCAAkC;;IAElC,kCAAkC;;IAElC,oCAAoC;;IAEpC,0EAA0E;;IAE1E,qHAAqH;;IAErH,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;IAuB7B,kCAAkC;;IAElC,+EAA+E;;IAE/E,+CAA+C;;IAE/C,gCAAgC;;CAExB,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kCAAkC,CAChD,WAAW,GAAE,OAAO,GAAG,MAAM,GAAG,MAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOjD;AAED,qDAAqD;AACrD,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW;;CAEd,CAAC;AAEX,gGAAgG;AAChG,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,iGAAiG;AACjG,eAAO,MAAM,aAAa;;;;;;;;;;;CAWhB,CAAC;AAEX,sEAAsE;AACtE,eAAO,MAAM,iBAAiB;;;;;;;;;;;CAWpB,CAAC;AAEX,gDAAgD;AAChD,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AACnD,YAAY,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC"}

package/dist/theme/index.js

@@ -18,7 +18,7 @@ const indigo = [
   "#4F46E5",
   "#4338CA",
   "#3730A3",
-  "#312E81"
+  "#253974"
 ];
 const neutral = [
   "#F8F9FA",
@@ -32,6 +32,49 @@ const neutral = [
   "#1C2536",
   "#111927"
 ];
+const darkNeutral = [
+  "#FFFFFF",
+  "#E7E9F0",
+  "#B8C2D0",
+  "#9DA4AE",
+  "#8F99AB",
+  "#6C737F",
+  "#2F3746",
+  "#1B1D21",
+  "#17191D",
+  "#111214"
+];
+const charcoalDark = {
+  canvas: "#111214",
+  surface: "#17191D",
+  chrome: "#1B1D21",
+  control: "#202329",
+  selected: "#2F3746",
+  brandSubtle: "#111927",
+  textPrimary: "#FFFFFF",
+  textSecondary: "#9DA4AE",
+  textTertiary: "#8F99AB",
+  textDisabled: "#6C737F",
+  iconSecondary: "#B8C2D0",
+  border: "#2F3746",
+  focus: "#A5B4FC",
+  primary: "#6366F1",
+  primaryHover: "#818CF8",
+  primaryActive: "#A5B4FC",
+  successBg: "#163E38",
+  successText: "#6FE3BE",
+  successBorder: "#2F3746",
+  successSolid: "#34D399",
+  successSolidHover: "#6FE3BE",
+  warningBg: "#402A12",
+  warningText: "#FDB022",
+  warningBorder: "#6E4515",
+  warningSolid: "#DC6803",
+  warningSolidHover: "#E5A34A",
+  infoBg: "#172B45",
+  infoText: "#22CCEE",
+  infoBorder: "#23476B"
+};
 const fairmintBlue = [
   "#e6f0ff",
   "#cce0ff",
@@ -110,7 +153,23 @@ const typography = {
 };
 const theme = createTheme({
   primaryColor: "indigo",
-  colors: { indigo, gray: neutral, fairmintBlue, fairmintPurple, success, warning, error, info },
+  // Mantine defaults to a darker shade for dark-mode filled/light variants
+  // (primaryShade: { light: 6, dark: 8 }), but our brand indigo (index 5,
+  // #6366F1) is the same accent in both color schemes — pin a single shade
+  // so unwrapped Mantine components (color="indigo") don't drift into a
+  // different, more saturated purple in dark mode.
+  primaryShade: 5,
+  colors: {
+    indigo,
+    gray: neutral,
+    darkGray: darkNeutral,
+    fairmintBlue,
+    fairmintPurple,
+    success,
+    warning,
+    error,
+    info
+  },
   fontFamily: typography.fontFamily,
   headings: {
     fontFamily: typography.headingFontFamily,
@@ -144,6 +203,9 @@ const theme = createTheme({
         }
       }
     },
+    Input: {
+      classNames: { input: "fairmint-input" }
+    },
     TextInput: {
       defaultProps: { size: "md" }
     },
@@ -187,58 +249,284 @@ const fairmintCssVariables = () => ({
     "--fairmint-interactive-focus-ring": indigo[5]
   },
   light: {
+    "--fairmint-interactive-focus-ring": indigo[5],
+    "--fairmint-color-bg-canvas": commonColors.white,
+    "--fairmint-color-bg-surface": commonColors.white,
+    "--fairmint-color-bg-surface-secondary": neutral[0],
+    "--fairmint-color-bg-hover": neutral[0],
+    "--fairmint-color-bg-selected": indigo[0],
+    "--fairmint-color-bg-brand-subtle": indigo[0],
+    "--fairmint-color-bg-brand-subtle-hover": indigo[1],
+    "--fairmint-color-bg-disabled": neutral[2],
     "--fairmint-watermark-color": neutral[1],
     "--fairmint-color-text-primary": neutral[9],
     "--fairmint-color-text-secondary": neutral[5],
     "--fairmint-color-text-tertiary": neutral[4],
+    "--fairmint-color-text-inverse": commonColors.white,
+    "--fairmint-color-text-disabled": neutral[6],
+    "--fairmint-color-icon-primary": neutral[9],
+    "--fairmint-color-icon-secondary": neutral[5],
+    "--fairmint-color-icon-tertiary": neutral[4],
+    "--fairmint-color-icon-inverse": commonColors.white,
+    "--fairmint-color-icon-disabled": neutral[6],
+    "--fairmint-color-border-default": neutral[2],
+    "--fairmint-color-border-focus": indigo[5],
+    "--fairmint-color-border-disabled": neutral[3],
+    "--fairmint-color-brand-primary": indigo[6],
+    "--fairmint-color-brand-primary-hover": indigo[7],
+    "--fairmint-color-brand-primary-active": indigo[7],
+    "--fairmint-color-brand-blue": fairmintBlue[5],
+    "--fairmint-color-brand-purple": fairmintPurple[5],
+    "--fairmint-color-watermark": neutral[1],
     "--fairmint-color-surface-selected": indigo[0],
     "--fairmint-color-icon-on-surface-selected": indigo[6],
-    "--fairmint-color-bg-surface": "#ffffff",
-    "--fairmint-color-bg-surface-secondary": neutral[0],
-    "--fairmint-color-border-default": neutral[2],
     "--fairmint-interactive-hover-shadow": `0 2px 6px ${neutral[9]}0F`,
-    "--fairmint-interactive-hover-bg": neutral[0]
+    "--fairmint-interactive-hover-bg": neutral[0],
+    "--fairmint-color-success-bg": success[0],
+    "--fairmint-color-success-text": success[7],
+    "--fairmint-color-success-border": success[2],
+    "--fairmint-color-success-solid": success[7],
+    "--fairmint-color-success-solid-hover": success[7],
+    "--fairmint-color-warning-bg": warning[0],
+    "--fairmint-color-warning-text": warning[7],
+    "--fairmint-color-warning-border": warning[2],
+    "--fairmint-color-warning-solid": warning[7],
+    "--fairmint-color-warning-solid-hover": warning[7],
+    "--fairmint-color-error-bg": error[0],
+    "--fairmint-color-error-bg-subtle": error[1],
+    "--fairmint-color-error-text": error[7],
+    "--fairmint-color-error-border": error[2],
+    "--fairmint-color-error-solid": error[7],
+    "--fairmint-color-error-solid-hover": error[8],
+    "--fairmint-color-error-solid-muted": error[4],
+    "--fairmint-color-info-bg": info[0],
+    "--fairmint-color-info-text": info[7],
+    "--fairmint-color-info-border": info[2],
+    "--fairmint-color-info-solid": info[7],
+    "--fairmint-color-info-solid-hover": info[7]
   },
   dark: {
-    "--fairmint-watermark-color": neutral[7],
-    "--fairmint-color-text-primary": neutral[0],
-    "--fairmint-color-text-secondary": neutral[4],
-    "--fairmint-color-text-tertiary": neutral[5],
-    // Approved charcoal dark-mode values from PR #88 (agent/fairmint-ui-dark-mode-storybook),
-    // copied ahead of that merge so token names/values match and don't drift or conflict.
-    // "selected" reuses the same muted slate as "border" in #88's palette — a
-    // saturated indigo[9] fill here reads as too bold/inconsistent with the
-    // rest of the muted charcoal scale.
-    "--fairmint-color-surface-selected": "#2F3746",
+    "--fairmint-interactive-focus-ring": charcoalDark.focus,
+    "--fairmint-color-bg-canvas": charcoalDark.canvas,
+    "--fairmint-color-bg-surface": charcoalDark.surface,
+    "--fairmint-color-bg-surface-secondary": charcoalDark.chrome,
+    "--fairmint-color-bg-hover": charcoalDark.control,
+    "--fairmint-color-bg-selected": charcoalDark.selected,
+    "--fairmint-color-bg-brand-subtle": charcoalDark.brandSubtle,
+    "--fairmint-color-bg-brand-subtle-hover": charcoalDark.control,
+    "--fairmint-color-bg-disabled": charcoalDark.control,
+    "--fairmint-watermark-color": charcoalDark.control,
+    "--fairmint-color-text-primary": charcoalDark.textPrimary,
+    "--fairmint-color-text-secondary": charcoalDark.textSecondary,
+    "--fairmint-color-text-tertiary": charcoalDark.textTertiary,
+    "--fairmint-color-text-inverse": neutral[9],
+    "--fairmint-color-text-disabled": charcoalDark.textDisabled,
+    "--fairmint-color-icon-primary": charcoalDark.textPrimary,
+    "--fairmint-color-icon-secondary": charcoalDark.iconSecondary,
+    "--fairmint-color-icon-tertiary": charcoalDark.textTertiary,
+    "--fairmint-color-icon-inverse": charcoalDark.textPrimary,
+    "--fairmint-color-icon-disabled": charcoalDark.textDisabled,
+    "--fairmint-color-border-default": charcoalDark.border,
+    "--fairmint-color-border-focus": charcoalDark.focus,
+    "--fairmint-color-border-disabled": charcoalDark.border,
+    "--fairmint-color-brand-primary": charcoalDark.primary,
+    "--fairmint-color-brand-primary-hover": charcoalDark.primaryHover,
+    "--fairmint-color-brand-primary-active": charcoalDark.primaryActive,
+    "--fairmint-color-brand-blue": fairmintBlue[5],
+    "--fairmint-color-brand-purple": fairmintPurple[5],
+    "--fairmint-color-watermark": charcoalDark.control,
+    "--fairmint-color-surface-selected": charcoalDark.selected,
     // indigo[6] (the light-mode value) is too dark to read against the
     // dark selected surface — use a light indigo instead.
     "--fairmint-color-icon-on-surface-selected": indigo[2],
-    "--fairmint-color-bg-surface": "#17191D",
-    "--fairmint-color-bg-surface-secondary": "#1B1D21",
-    "--fairmint-color-border-default": "#2F3746",
-    "--fairmint-interactive-hover-shadow": `0 2px 6px ${neutral[0]}1A`,
-    "--fairmint-interactive-hover-bg": neutral[8]
+    "--fairmint-interactive-hover-shadow": "0 2px 6px #00000066",
+    "--fairmint-interactive-hover-bg": charcoalDark.surface,
+    "--fairmint-color-success-bg": charcoalDark.successBg,
+    "--fairmint-color-success-text": charcoalDark.successText,
+    "--fairmint-color-success-border": charcoalDark.successBorder,
+    "--fairmint-color-success-solid": charcoalDark.successSolid,
+    "--fairmint-color-success-solid-hover": charcoalDark.successSolidHover,
+    "--fairmint-color-warning-bg": charcoalDark.warningBg,
+    "--fairmint-color-warning-text": charcoalDark.warningText,
+    "--fairmint-color-warning-border": charcoalDark.warningBorder,
+    "--fairmint-color-warning-solid": charcoalDark.warningSolid,
+    "--fairmint-color-warning-solid-hover": charcoalDark.warningSolidHover,
+    "--fairmint-color-error-bg": error[9],
+    "--fairmint-color-error-bg-subtle": error[8],
+    "--fairmint-color-error-text": error[2],
+    "--fairmint-color-error-border": error[7],
+    "--fairmint-color-error-solid": error[7],
+    "--fairmint-color-error-solid-hover": error[8],
+    "--fairmint-color-error-solid-muted": error[5],
+    "--fairmint-color-info-bg": charcoalDark.infoBg,
+    "--fairmint-color-info-text": charcoalDark.infoText,
+    "--fairmint-color-info-border": charcoalDark.infoBorder,
+    "--fairmint-color-info-solid": charcoalDark.primary,
+    "--fairmint-color-info-solid-hover": charcoalDark.primaryHover,
+    // Mantine primitives used by the shared component wrappers. These keep
+    // Button, Badge, Alert, Loader, and form controls on the same semantic
+    // roles instead of falling back to Mantine's default dark palette.
+    "--mantine-color-body": charcoalDark.canvas,
+    "--mantine-color-text": charcoalDark.textPrimary,
+    "--mantine-color-bright": charcoalDark.textPrimary,
+    "--mantine-color-dimmed": charcoalDark.textSecondary,
+    "--mantine-color-placeholder": "#969BA5",
+    "--mantine-color-default": charcoalDark.surface,
+    "--mantine-color-default-hover": charcoalDark.control,
+    "--mantine-color-default-color": charcoalDark.textPrimary,
+    "--mantine-color-default-border": charcoalDark.border,
+    "--mantine-color-disabled": charcoalDark.control,
+    "--mantine-color-disabled-color": charcoalDark.textDisabled,
+    "--mantine-color-disabled-border": charcoalDark.border,
+    "--mantine-primary-color-filled": charcoalDark.primary,
+    "--mantine-primary-color-filled-hover": charcoalDark.primaryHover,
+    "--mantine-primary-color-light": charcoalDark.brandSubtle,
+    "--mantine-primary-color-light-hover": charcoalDark.control,
+    "--mantine-primary-color-light-color": charcoalDark.primaryActive,
+    "--mantine-primary-color-3": charcoalDark.primaryActive,
+    "--mantine-primary-color-4": charcoalDark.primaryActive,
+    "--mantine-primary-color-6": charcoalDark.primary,
+    "--mantine-primary-color-7": charcoalDark.primaryHover,
+    "--mantine-primary-color-8": charcoalDark.primaryHover,
+    "--mantine-primary-color-9": charcoalDark.brandSubtle,
+    "--mantine-color-indigo-3": charcoalDark.primaryActive,
+    "--mantine-color-indigo-4": charcoalDark.primaryActive,
+    "--mantine-color-indigo-6": charcoalDark.primary,
+    "--mantine-color-indigo-7": charcoalDark.primaryHover,
+    "--mantine-color-indigo-8": charcoalDark.primaryHover,
+    "--mantine-color-indigo-9": charcoalDark.brandSubtle,
+    "--mantine-color-indigo-text": charcoalDark.primaryActive,
+    "--mantine-color-indigo-filled": charcoalDark.primary,
+    "--mantine-color-indigo-filled-hover": charcoalDark.primaryHover,
+    "--mantine-color-indigo-light": charcoalDark.brandSubtle,
+    "--mantine-color-indigo-light-hover": charcoalDark.control,
+    "--mantine-color-indigo-light-color": charcoalDark.primaryActive,
+    "--mantine-color-indigo-outline": charcoalDark.focus,
+    "--mantine-color-indigo-outline-hover": charcoalDark.control,
+    "--mantine-color-gray-light": charcoalDark.control,
+    "--mantine-color-gray-light-color": charcoalDark.textSecondary,
+    "--mantine-color-gray-filled": charcoalDark.border,
+    "--mantine-color-gray-filled-hover": charcoalDark.iconSecondary,
+    "--mantine-color-gray-4": charcoalDark.iconSecondary,
+    "--mantine-color-gray-5": charcoalDark.textTertiary,
+    "--mantine-color-gray-6": charcoalDark.textSecondary,
+    "--mantine-color-gray-7": charcoalDark.border,
+    "--mantine-color-gray-8": charcoalDark.chrome,
+    "--mantine-color-gray-9": charcoalDark.canvas,
+    "--mantine-color-success-light": charcoalDark.successBg,
+    "--mantine-color-success-light-color": charcoalDark.successText,
+    "--mantine-color-success-filled": charcoalDark.successSolid,
+    "--mantine-color-success-filled-hover": charcoalDark.successSolidHover,
+    "--mantine-color-warning-light": charcoalDark.warningBg,
+    "--mantine-color-warning-light-color": charcoalDark.warningText,
+    "--mantine-color-warning-filled": charcoalDark.warningSolid,
+    "--mantine-color-warning-filled-hover": charcoalDark.warningSolidHover,
+    "--mantine-color-info-light": charcoalDark.infoBg,
+    "--mantine-color-info-light-color": charcoalDark.infoText,
+    "--mantine-color-info-filled": charcoalDark.primary,
+    "--mantine-color-info-filled-hover": charcoalDark.primaryHover,
+    "--mantine-color-error-2": error[2],
+    "--mantine-color-error-3": error[3],
+    "--mantine-color-error-4": error[4],
+    "--mantine-color-error-6": error[6],
+    "--mantine-color-error-7": error[7],
+    "--mantine-color-error-8": error[8],
+    "--mantine-color-error-9": error[9],
+    "--mantine-color-error-text": error[2],
+    "--mantine-color-error-filled": error[7],
+    "--mantine-color-error-filled-hover": error[6],
+    "--mantine-color-error-light": error[9],
+    "--mantine-color-error-light-hover": error[8],
+    "--mantine-color-error-light-color": error[2],
+    "--mantine-color-error-outline": error[7],
+    "--mantine-color-error-outline-hover": error[8]
   }
 });
+const fairmintVar = (name, fallback) => `var(--fairmint-${name}, ${fallback})`;
 const fairmintVars = {
+  /** Canvas background for the app shell. */
+  colorBgCanvas: fairmintVar("color-bg-canvas", "#ffffff"),
+  /** Primary raised surface. */
+  colorBgSurface: fairmintVar("color-bg-surface", "#ffffff"),
+  /** Secondary surface used for fields, rows, and subtle containers. */
+  colorBgSurfaceSecondary: fairmintVar("color-bg-surface-secondary", neutral[0]),
+  /** Hover surface. */
+  colorBgHover: fairmintVar("color-bg-hover", neutral[0]),
+  /** Selected surface. */
+  colorBgSelected: fairmintVar("color-bg-selected", indigo[0]),
+  /** Subtle brand surface. */
+  colorBgBrandSubtle: fairmintVar("color-bg-brand-subtle", indigo[0]),
+  /** Hovered subtle brand surface. */
+  colorBgBrandSubtleHover: fairmintVar("color-bg-brand-subtle-hover", indigo[1]),
+  /** Disabled surface. */
+  colorBgDisabled: fairmintVar("color-bg-disabled", neutral[2]),
   /** Primary body/heading text — titles on tinted surfaces (Chip Banner). */
   colorTextPrimary: `var(--fairmint-color-text-primary, ${neutral[9]})`,
   /** Secondary / muted text — subtitles, supporting labels. Adapts to color scheme. */
   colorTextSecondary: `var(--fairmint-color-text-secondary, ${neutral[5]})`,
   /** Tertiary / faint text — timestamps, metadata. Adapts to color scheme. */
   colorTextTertiary: `var(--fairmint-color-text-tertiary, ${neutral[4]})`,
+  /** Text on filled controls. */
+  colorTextInverse: fairmintVar("color-text-inverse", "#ffffff"),
+  /** Disabled text. */
+  colorTextDisabled: fairmintVar("color-text-disabled", neutral[6]),
+  /** Primary icon and stroke color. */
+  colorIconPrimary: fairmintVar("color-icon-primary", neutral[9]),
+  /** Secondary icon and stroke color. */
+  colorIconSecondary: fairmintVar("color-icon-secondary", neutral[5]),
+  /** Tertiary icon and stroke color. */
+  colorIconTertiary: fairmintVar("color-icon-tertiary", neutral[4]),
+  /** Icon color on filled or dark surfaces. */
+  colorIconInverse: fairmintVar("color-icon-inverse", "#ffffff"),
+  /** Disabled icon and stroke color. */
+  colorIconDisabled: fairmintVar("color-icon-disabled", neutral[6]),
+  /** Default border. */
+  colorBorderDefault: fairmintVar("color-border-default", neutral[2]),
+  /** Focus border/ring color. */
+  colorBorderFocus: fairmintVar("color-border-focus", indigo[5]),
+  /** Disabled border. */
+  colorBorderDisabled: fairmintVar("color-border-disabled", neutral[3]),
+  /** Brand action color. */
+  colorBrandPrimary: fairmintVar("color-brand-primary", indigo[6]),
+  /** Hovered brand action color. */
+  colorBrandPrimaryHover: fairmintVar("color-brand-primary-hover", indigo[7]),
+  /** Pressed brand action color. */
+  colorBrandPrimaryActive: fairmintVar("color-brand-primary-active", indigo[7]),
+  /** Fairmint blue brand accent. */
+  colorBrandBlue: fairmintVar("color-brand-blue", fairmintBlue[5]),
+  /** Fairmint purple brand accent. */
+  colorBrandPurple: fairmintVar("color-brand-purple", fairmintPurple[5]),
   /** Background tint for selected / active rows. Adapts to color scheme. */
   colorSurfaceSelected: `var(--fairmint-color-surface-selected, ${indigo[0]})`,
   /** Icon/text drawn on top of colorSurfaceSelected (e.g. a checkmark in a selected badge). Adapts to color scheme. */
   colorIconOnSurfaceSelected: `var(--fairmint-color-icon-on-surface-selected, ${indigo[6]})`,
-  /** Primary raised surface (cards/panels). Adapts to color scheme. Matches PR #88's naming. */
-  colorBgSurface: "var(--fairmint-color-bg-surface, #ffffff)",
-  /** Secondary surface for fields/rows/badges on a card. Adapts to color scheme. Matches PR #88's naming. */
-  colorBgSurfaceSecondary: `var(--fairmint-color-bg-surface-secondary, ${neutral[0]})`,
-  /** Default hairline border for cards/panels. Adapts to color scheme. Matches PR #88's naming. */
-  colorBorderDefault: `var(--fairmint-color-border-default, ${neutral[2]})`,
+  /** Semantic status roles. */
+  colorSuccessBg: fairmintVar("color-success-bg", success[0]),
+  colorSuccessText: fairmintVar("color-success-text", success[7]),
+  colorSuccessBorder: fairmintVar("color-success-border", success[2]),
+  colorSuccessSolid: fairmintVar("color-success-solid", success[7]),
+  colorSuccessSolidHover: fairmintVar("color-success-solid-hover", success[7]),
+  colorWarningBg: fairmintVar("color-warning-bg", warning[0]),
+  colorWarningText: fairmintVar("color-warning-text", warning[7]),
+  colorWarningBorder: fairmintVar("color-warning-border", warning[2]),
+  colorWarningSolid: fairmintVar("color-warning-solid", warning[7]),
+  colorWarningSolidHover: fairmintVar("color-warning-solid-hover", warning[7]),
+  colorErrorBg: fairmintVar("color-error-bg", error[0]),
+  colorErrorBgSubtle: fairmintVar("color-error-bg-subtle", error[1]),
+  colorErrorText: fairmintVar("color-error-text", error[7]),
+  colorErrorBorder: fairmintVar("color-error-border", error[2]),
+  colorErrorSolid: fairmintVar("color-error-solid", error[5]),
+  colorErrorSolidHover: fairmintVar("color-error-solid-hover", error[6]),
+  colorErrorSolidMuted: fairmintVar("color-error-solid-muted", error[4]),
+  colorInfoBg: fairmintVar("color-info-bg", info[0]),
+  colorInfoText: fairmintVar("color-info-text", info[7]),
+  colorInfoBorder: fairmintVar("color-info-border", info[2]),
+  colorInfoSolid: fairmintVar("color-info-solid", info[7]),
+  colorInfoSolidHover: fairmintVar("color-info-solid-hover", info[7]),
+  /** Decorative watermark color. */
+  colorWatermark: fairmintVar("color-watermark", neutral[1]),
   /** Large decorative watermark on error/empty pages. Adapts to color scheme. */
-  watermarkColor: `var(--fairmint-watermark-color, ${neutral[1]})`,
+  watermarkColor: fairmintVar("color-watermark", neutral[1]),
   /** Heading font family (Plus Jakarta Sans). */
   fontHeadings: `var(--fairmint-font-headings, ${typography.headingFontFamily})`,
   /** Body font family (Inter). */
@@ -288,6 +576,18 @@ const neutralColors = {
   800: "#1C2536",
   900: "#111927"
 };
+const darkNeutralColors = {
+  50: "#F5F7FA",
+  100: "#E2E7ED",
+  200: "#B8C2D0",
+  300: "#8D99A8",
+  400: "#748093",
+  500: "#5C687A",
+  600: "#2F3746",
+  700: "#1F2A39",
+  800: "#1B2431",
+  900: "#0F141C"
+};
 const semanticColors = {
   success: "#10B981",
   warning: "#F79009",
@@ -298,6 +598,7 @@ export {
   brandColors,
   commonColors,
   createFairmintMantineProviderProps,
+  darkNeutralColors,
   fairmintCssVariables,
   fairmintVars,
   fontSizes,