Align disabled and read-only styling between input and select

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`.
 

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 }}>

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

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.

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;