From 6e727242b7cc5f6112f485bca0f3fbda1a4dcb17 Mon Sep 17 00:00:00 2001
From: Zohar Manor-Abel <zohar.manor-abel@diamond.ac.uk>
Date: Mon, 12 Oct 2026 14:52:15 +0100
Subject: [PATCH] Align disabled and read-only styling between input and select

- Soften disabled and read-only surface tokens (light and dark)
- Pass `disabled` to FormControl in the Select story so the label is disabled
- Document the different read-only props on TextField and Select
---
 changelog.md                                    | 2 +-
 src/components/MUI/Inputs/Select.stories.tsx    | 6 ++++++
 src/components/MUI/Inputs/TextField.stories.tsx | 7 ++++++-
 src/components/MUI/Inputs/TextFieldGuidance.mdx | 8 ++++++++
 src/styles/diamondDS/DiamondDSTokens.css        | 8 ++++----
 5 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/changelog.md b/changelog.md
index 8b94370f..6454079d 100644
--- a/changelog.md
+++ b/changelog.md
@@ -16,7 +16,7 @@
 ### Fixed
 
 - Skipped `logos` in MUI CSS variable generation, removing a console error.
-- Read-only inputs (TextField, Select, Autocomplete) are now visually distinct from editable and disabled ones, across outlined, filled and standard variants. Dark-mode `--ds-border-subtle` and disabled tokens are retuned.
+- Read-only inputs (TextField, Select, Autocomplete) are now visually distinct from editable and disabled ones, across outlined, filled and standard variants. Dark-mode `--ds-border-subtle` and disabled tokens are retuned, and disabled and read-only backgrounds are subtler. Per MUI, read-only is set with `slotProps.input` on TextField but the top-level `readOnly` on Select.
 - `DiamondDSIntegrations.mrtOptions()` now suppresses Material React Table's hardcoded bottom toolbar shadow, matching the shadow suppression already applied to the table's Paper.
 - Fixed _ImageColourSchemeSwitch_ (and so _Logo_) showing the light image when the OS is dark and no mode has been picked, by reading the resolved `colorScheme` instead of `mode`.
 
diff --git a/src/components/MUI/Inputs/Select.stories.tsx b/src/components/MUI/Inputs/Select.stories.tsx
index d75dcfae..cf11e6c5 100644
--- a/src/components/MUI/Inputs/Select.stories.tsx
+++ b/src/components/MUI/Inputs/Select.stories.tsx
@@ -54,6 +54,7 @@ const renderSelectWithLabel = (args: SelectArgs) => (
     variant={args.variant}
     color={args.color}
     size={args.size}
+    disabled={args.disabled}
     sx={{ minWidth: 200 }}
   >
     {args.label && <InputLabel id="demo-select-label">{args.label}</InputLabel>}
@@ -88,6 +89,11 @@ export const FilledAndStandard: Story = {
   ),
 };
 
+/**
+ * Set read-only with the top-level `readOnly` prop on `Select`, not through
+ * `inputProps` or `slotProps.input`. Only the top-level prop applies the
+ * read-only styling, so the other routes leave the field looking editable.
+ */
 export const States: Story = {
   render: (args: SelectArgs) => (
     <Box style={{ display: "grid", gap: 12 }}>
diff --git a/src/components/MUI/Inputs/TextField.stories.tsx b/src/components/MUI/Inputs/TextField.stories.tsx
index 725027c0..0270c417 100644
--- a/src/components/MUI/Inputs/TextField.stories.tsx
+++ b/src/components/MUI/Inputs/TextField.stories.tsx
@@ -139,6 +139,11 @@ export const LiveInstrumentInput: Story = {
   ),
 };
 
+/**
+ * TextField has no top-level `readOnly` prop. Set it with
+ * `slotProps={{ input: { readOnly: true } }}`, not `inputProps`, which does not
+ * apply the read-only styling.
+ */
 export const States: Story = {
   render: (args) => (
     <Box style={{ display: "grid", gap: 12 }}>
@@ -149,7 +154,7 @@ export const States: Story = {
         label="Read-only"
         value="Current value"
         helperText="Value can be viewed and copied but not edited"
-        InputProps={{ readOnly: true }}
+        slotProps={{ input: { readOnly: true } }}
       />
 
       <TextField
diff --git a/src/components/MUI/Inputs/TextFieldGuidance.mdx b/src/components/MUI/Inputs/TextFieldGuidance.mdx
index 4ff567fb..b9839178 100644
--- a/src/components/MUI/Inputs/TextFieldGuidance.mdx
+++ b/src/components/MUI/Inputs/TextFieldGuidance.mdx
@@ -227,6 +227,14 @@ import * as TextFieldStories from "./TextField.stories";
   unavailable.
 </p>
 
+<div className="ds-note">
+  <strong>Read-only is set differently on similar MUI fields.</strong> On{" "}
+  <strong>Select</strong>, use the top-level <code>readOnly</code> prop. On{" "}
+  <strong>TextField</strong>, which has no top-level <code>readOnly</code>, use{" "}
+  <code>slotProps={"{{ input: { readOnly: true } }}"}</code>. Don't use{" "}
+  <code>inputProps</code> on either: it doesn't apply the read-only styling.
+</div>
+
 <p>
   Disabled and error states should remain clearly visible and should not be
   overridden by hover or focus styling.
diff --git a/src/styles/diamondDS/DiamondDSTokens.css b/src/styles/diamondDS/DiamondDSTokens.css
index 2caa9446..f0067233 100644
--- a/src/styles/diamondDS/DiamondDSTokens.css
+++ b/src/styles/diamondDS/DiamondDSTokens.css
@@ -44,7 +44,7 @@
 
   --ds-surface-container: #eef1f5;
   --ds-surface-container-high: #e6e9f0;
-  --ds-surface-disabled: rgba(26, 28, 35, 0.08);
+  --ds-surface-disabled: rgba(26, 28, 35, 0.06);
   --ds-surface-readonly: rgba(26, 28, 35, 0.04);
 
   --ds-on-surface: #1a1c23;
@@ -289,14 +289,14 @@
 
   --ds-surface-container: #222632;
   --ds-surface-container-high: #2c3140;
-  --ds-surface-disabled: rgba(232, 234, 240, 0.12);
-  --ds-surface-readonly: rgba(232, 234, 240, 0.08);
+  --ds-surface-disabled: rgba(232, 234, 240, 0.08);
+  --ds-surface-readonly: rgba(232, 234, 240, 0.06);
 
   --ds-on-surface: #e8eaf0;
   --ds-on-surface-variant: #b6bcc9;
   --ds-on-surface-subtle: #979eae;
   --ds-on-surface-muted: #7c8394;
-  --ds-on-surface-disabled: rgba(232, 234, 240, 0.32);
+  --ds-on-surface-disabled: rgba(232, 234, 240, 0.34);
   --ds-control-disabled: rgba(232, 234, 240, 0.3);
   --ds-on-solid: #ffffff;