From e022583af0c77a56ac0c6096e4aa438ef94704ea Mon Sep 17 00:00:00 2001
From: Lee Calcote <lee.calcote@layer5.io>
Date: Wed, 1 Jul 2026 10:54:56 -0500
Subject: [PATCH 1/3] fix(theme): contained buttons honor
 color=error/success/warning

The MuiButton styleOverride painted every .MuiButton-contained with the brand
(keppel) background regardless of the `color` prop and defined no containedError,
so `<Button variant="contained" color="error">` rendered brand green. Every
destructive action across consuming apps was silently miscoloured, and callers
had to fight it with per-site sx specificity hacks.

Add &.MuiButton-containedError / containedSuccess / containedWarning rules using
the matching palette.background.{error,success,warning} tokens, layered after the
brand &.MuiButton-contained rule so they win on source order at equal
specificity; the higher-specificity .Mui-disabled rules still win when disabled.
primary/default and secondary are unchanged, so only the currently-broken
semantic-contained buttons change.

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
---
 src/__testing__/theme.test.ts           | 48 +++++++++++++++++++++++++
 src/theme/components/button.modifier.ts | 32 ++++++++++++++++-
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/src/__testing__/theme.test.ts b/src/__testing__/theme.test.ts
index 305fecc00..3c3fa5a51 100644
--- a/src/__testing__/theme.test.ts
+++ b/src/__testing__/theme.test.ts
@@ -3,6 +3,7 @@ import {
   readableTextColor,
   SistentDefaultPrimitivePaletteLight
 } from '../theme';
+import { MuiButton } from '../theme/components/button.modifier';
 
 const LIGHT_INK = SistentDefaultPrimitivePaletteLight.primaryInverted; // charcoal[100] ≈ near-white
 const DARK_INK = SistentDefaultPrimitivePaletteLight.foreground; // charcoal[10] ≈ near-black
@@ -81,3 +82,50 @@ describe('createCustomTheme contrast derivation', () => {
     expect(theme.palette.mode).toBe('light');
   });
 });
+
+describe('MuiButton contained honors the semantic color prop', () => {
+  // The MuiButton override function computes styles from the active theme.
+  // Call it directly (MUI would call it as `root({ theme, ownerState })`) so the
+  // assertions read the resolved backgroundColor per contained variant.
+  const rootStyles = (mode: 'light' | 'dark') => {
+    const theme = createCustomTheme(mode);
+    const root = MuiButton.styleOverrides!.root as (arg: { theme: typeof theme }) => Record<
+      string,
+      { backgroundColor?: string; ['&:hover']?: { backgroundColor?: string } }
+    >;
+    return { theme, styles: root({ theme }) };
+  };
+
+  it('paints color="error" contained buttons with the error background, not the brand (keppel)', () => {
+    const { theme, styles } = rootStyles('light');
+    const contained = styles['&.MuiButton-contained'];
+    const containedError = styles['&.MuiButton-containedError'];
+
+    expect(containedError).toBeDefined();
+    // Uses the semantic error background…
+    expect(containedError.backgroundColor).toBe(theme.palette.background.error.default);
+    expect(containedError['&:hover']?.backgroundColor).toBe(
+      theme.palette.background.error.hover
+    );
+    // …and is NOT the brand background that `&.MuiButton-contained` sets — the
+    // regression that made `<Button variant="contained" color="error">` green.
+    expect(containedError.backgroundColor).not.toBe(contained.backgroundColor);
+  });
+
+  it('also honors success and warning contained buttons', () => {
+    const { theme, styles } = rootStyles('light');
+    expect(styles['&.MuiButton-containedSuccess'].backgroundColor).toBe(
+      theme.palette.background.success.default
+    );
+    expect(styles['&.MuiButton-containedWarning'].backgroundColor).toBe(
+      theme.palette.background.warning.default
+    );
+  });
+
+  it('resolves the error background in dark mode too', () => {
+    const { theme, styles } = rootStyles('dark');
+    expect(styles['&.MuiButton-containedError'].backgroundColor).toBe(
+      theme.palette.background.error.default
+    );
+  });
+});
diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts
index eb85adb8d..80cb9b1e0 100644
--- a/src/theme/components/button.modifier.ts
+++ b/src/theme/components/button.modifier.ts
@@ -5,7 +5,7 @@ export const MuiButton: Components<Theme>['MuiButton'] = {
     root: ({ theme }) => {
       const {
         palette: {
-          background: { brand, hover },
+          background: { brand, hover, error, success, warning },
           text: { disabled, constant, neutral: TextNeutral },
           border: { neutral }
         },
@@ -22,6 +22,36 @@ export const MuiButton: Components<Theme>['MuiButton'] = {
             backgroundColor: brand?.hover
           }
         },
+        // Contained buttons default to the brand colour above. Honour the
+        // semantic `color` prop so destructive / success / warning actions are
+        // not silently painted brand (keppel) — the long-standing gap that made
+        // `<Button variant="contained" color="error">` render green. These
+        // rules share the `&.MuiButton-contained` selector's (0,0,2,0)
+        // specificity and follow it in source order, so a `color="error"`
+        // button (which carries BOTH classes) resolves to the error colour;
+        // the higher-specificity `.Mui-disabled` rules below still win when
+        // disabled.
+        '&.MuiButton-containedError': {
+          color: constant?.white,
+          backgroundColor: error?.default,
+          '&:hover': {
+            backgroundColor: error?.hover
+          }
+        },
+        '&.MuiButton-containedSuccess': {
+          color: constant?.white,
+          backgroundColor: success?.default,
+          '&:hover': {
+            backgroundColor: success?.hover
+          }
+        },
+        '&.MuiButton-containedWarning': {
+          color: constant?.white,
+          backgroundColor: warning?.default,
+          '&:hover': {
+            backgroundColor: warning?.hover
+          }
+        },
         '&.MuiButton-outlined': {
           border: `1px solid ${neutral?.default}`,
           '&:hover': {

From d2e8e8cf9f7b37d9ada2513c2e96a050138533c3 Mon Sep 17 00:00:00 2001
From: Lee Calcote <lee.calcote@layer5.io>
Date: Wed, 1 Jul 2026 11:21:50 -0500
Subject: [PATCH 2/3] fix(theme): readable label colour and info variant for
 contained buttons

Review follow-up:
- Derive the label colour with theme.palette.getContrastText per background so a
  light background (notably the yellow warning) keeps a readable dark label
  instead of an unreadable hardcoded white one (WCAG contrast).
- Add &.MuiButton-containedInfo so color="info" contained buttons also honour the
  semantic colour instead of the brand green.
- Extend the theme test to cover the info background and the contrast-derived
  label colour.

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
---
 src/__testing__/theme.test.ts           | 19 +++++++++++--
 src/theme/components/button.modifier.ts | 37 +++++++++++++++++--------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/__testing__/theme.test.ts b/src/__testing__/theme.test.ts
index 3c3fa5a51..68c7e9f57 100644
--- a/src/__testing__/theme.test.ts
+++ b/src/__testing__/theme.test.ts
@@ -91,7 +91,7 @@ describe('MuiButton contained honors the semantic color prop', () => {
     const theme = createCustomTheme(mode);
     const root = MuiButton.styleOverrides!.root as (arg: { theme: typeof theme }) => Record<
       string,
-      { backgroundColor?: string; ['&:hover']?: { backgroundColor?: string } }
+      { color?: string; backgroundColor?: string; ['&:hover']?: { backgroundColor?: string } }
     >;
     return { theme, styles: root({ theme }) };
   };
@@ -112,7 +112,7 @@ describe('MuiButton contained honors the semantic color prop', () => {
     expect(containedError.backgroundColor).not.toBe(contained.backgroundColor);
   });
 
-  it('also honors success and warning contained buttons', () => {
+  it('also honors success, warning, and info contained buttons', () => {
     const { theme, styles } = rootStyles('light');
     expect(styles['&.MuiButton-containedSuccess'].backgroundColor).toBe(
       theme.palette.background.success.default
@@ -120,6 +120,21 @@ describe('MuiButton contained honors the semantic color prop', () => {
     expect(styles['&.MuiButton-containedWarning'].backgroundColor).toBe(
       theme.palette.background.warning.default
     );
+    expect(styles['&.MuiButton-containedInfo'].backgroundColor).toBe(
+      theme.palette.background.info.default
+    );
+  });
+
+  it('derives a readable (WCAG) label colour per background, not a hardcoded white', () => {
+    const { theme, styles } = rootStyles('light');
+    // The light yellow warning background must get dark text, not an unreadable
+    // white one - getContrastText picks per luminance.
+    expect(styles['&.MuiButton-containedWarning'].color).toBe(
+      theme.palette.getContrastText(theme.palette.background.warning.default)
+    );
+    expect(styles['&.MuiButton-containedError'].color).toBe(
+      theme.palette.getContrastText(theme.palette.background.error.default)
+    );
   });
 
   it('resolves the error background in dark mode too', () => {
diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts
index 80cb9b1e0..e8db2524d 100644
--- a/src/theme/components/button.modifier.ts
+++ b/src/theme/components/button.modifier.ts
@@ -5,7 +5,7 @@ export const MuiButton: Components<Theme>['MuiButton'] = {
     root: ({ theme }) => {
       const {
         palette: {
-          background: { brand, hover, error, success, warning },
+          background: { brand, hover, error, success, warning, info },
           text: { disabled, constant, neutral: TextNeutral },
           border: { neutral }
         },
@@ -23,35 +23,48 @@ export const MuiButton: Components<Theme>['MuiButton'] = {
           }
         },
         // Contained buttons default to the brand colour above. Honour the
-        // semantic `color` prop so destructive / success / warning actions are
-        // not silently painted brand (keppel) — the long-standing gap that made
-        // `<Button variant="contained" color="error">` render green. These
-        // rules share the `&.MuiButton-contained` selector's (0,0,2,0)
-        // specificity and follow it in source order, so a `color="error"`
-        // button (which carries BOTH classes) resolves to the error colour;
-        // the higher-specificity `.Mui-disabled` rules below still win when
-        // disabled.
+        // semantic `color` prop so error / success / warning / info actions are
+        // not silently painted brand (keppel) - the long-standing gap that made
+        // `<Button variant="contained" color="error">` render green. Text colour
+        // is derived per-background with getContrastText so a light background
+        // (notably the yellow warning) keeps a readable dark label instead of an
+        // unreadable white one (WCAG). These rules share the
+        // `&.MuiButton-contained` selector's (0,0,2,0) specificity and follow it
+        // in source order, so a semantic-colour button (which carries BOTH
+        // classes) resolves to its colour; the higher-specificity `.Mui-disabled`
+        // rules below still win when disabled.
         '&.MuiButton-containedError': {
-          color: constant?.white,
+          color: error?.default ? theme.palette.getContrastText(error.default) : constant?.white,
           backgroundColor: error?.default,
           '&:hover': {
             backgroundColor: error?.hover
           }
         },
         '&.MuiButton-containedSuccess': {
-          color: constant?.white,
+          color: success?.default
+            ? theme.palette.getContrastText(success.default)
+            : constant?.white,
           backgroundColor: success?.default,
           '&:hover': {
             backgroundColor: success?.hover
           }
         },
         '&.MuiButton-containedWarning': {
-          color: constant?.white,
+          color: warning?.default
+            ? theme.palette.getContrastText(warning.default)
+            : constant?.white,
           backgroundColor: warning?.default,
           '&:hover': {
             backgroundColor: warning?.hover
           }
         },
+        '&.MuiButton-containedInfo': {
+          color: info?.default ? theme.palette.getContrastText(info.default) : constant?.white,
+          backgroundColor: info?.default,
+          '&:hover': {
+            backgroundColor: info?.hover
+          }
+        },
         '&.MuiButton-outlined': {
           border: `1px solid ${neutral?.default}`,
           '&:hover': {

From d738417ef426bdb38a1950c6d0ebf6616ea4676f Mon Sep 17 00:00:00 2001
From: Lee Calcote <lee.calcote@layer5.io>
Date: Wed, 1 Jul 2026 11:38:44 -0500
Subject: [PATCH 3/3] style: ASCII punctuation in button-modifier comments

Replace em-dashes / ellipses with plain ASCII in the comments touched by the
semantic-colour change (no non-ASCII punctuation in code).

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
---
 src/__testing__/theme.test.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/__testing__/theme.test.ts b/src/__testing__/theme.test.ts
index 68c7e9f57..c3e2ec9b0 100644
--- a/src/__testing__/theme.test.ts
+++ b/src/__testing__/theme.test.ts
@@ -29,7 +29,7 @@ describe('readableTextColor', () => {
 describe('createCustomTheme contrast derivation', () => {
   it('derives readable body text when a brand omits the contrast tokens', () => {
     // Only base colors provided; background is dark. The derived foreground
-    // (text.default) must be light so text stays readable — not the Layer5
+    // (text.default) must be light so text stays readable - not the Layer5
     // default dark ink.
     const theme = createCustomTheme('light', {
       navigationBar: '#101010',
@@ -58,7 +58,7 @@ describe('createCustomTheme contrast derivation', () => {
 
   it('keeps default contrast tokens for base colors the caller did not customize', () => {
     // Only `background` is overridden, so its contrast token (foreground)
-    // re-derives — but `primary` is untouched, so its contrast token must
+    // re-derives - but `primary` is untouched, so its contrast token must
     // keep the default ink rather than silently re-deriving from KEPPEL.
     const theme = createCustomTheme('light', { background: '#000000' });
 
@@ -102,12 +102,12 @@ describe('MuiButton contained honors the semantic color prop', () => {
     const containedError = styles['&.MuiButton-containedError'];
 
     expect(containedError).toBeDefined();
-    // Uses the semantic error background…
+    // Uses the semantic error background...
     expect(containedError.backgroundColor).toBe(theme.palette.background.error.default);
     expect(containedError['&:hover']?.backgroundColor).toBe(
       theme.palette.background.error.hover
     );
-    // …and is NOT the brand background that `&.MuiButton-contained` sets — the
+    // ...and is NOT the brand background that `&.MuiButton-contained` sets - the
     // regression that made `<Button variant="contained" color="error">` green.
     expect(containedError.backgroundColor).not.toBe(contained.backgroundColor);
   });