fix(Input): readonly color contrast (#2621)

Fixes #2604 Switch styling comes later in #2561
digdir · Oct 16, 2024 · 31c036d · 31c036d
1 parent 8a6ff15
commit 31c036d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/.changeset/friendly-cups-kiss.md b/.changeset/friendly-cups-kiss.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Input: Sufficient color contrast for readonly
diff --git a/packages/css/input.css b/packages/css/input.css
@@ -12,7 +12,7 @@
   --dsc-input-border-width: 1px;
   --dsc-input-color--checked: var(--ds-color-accent-contrast-default);
   --dsc-input-color--invalid: var(--ds-color-danger-contrast-default);
-  --dsc-input-color--readonly: var(--ds-color-neutral-border-default);
+  --dsc-input-color--readonly: var(--ds-color-neutral-text-subtle);
   --dsc-input-color: var(--ds-color-neutral-text-default);
   --dsc-input-padding: var(--ds-spacing-2) var(--ds-spacing-3);
   --dsc-input-size--switch: var(--ds-sizing-7);

diff --git a/packages/react/src/components/form/Input/Input.stories.tsx b/packages/react/src/components/form/Input/Input.stories.tsx
@@ -696,6 +696,20 @@ export const Switch: StoryFn<typeof Input> = (args) => (
       <Input {...args} size='sm' name='sm-disabled' disabled defaultChecked />
       Disabled checked
     </Label>
+    {/* <Label weight='regular' size='sm'>
+      <Input {...args} size='sm' name='sm-invalid' aria-invalid='true' />
+      Invalid
+    </Label>
+    <Label weight='regular' size='sm'>
+      <Input
+        {...args}
+        size='sm'
+        name='sm-invalid'
+        aria-invalid='true'
+        defaultChecked
+      />
+      Invalid checked
+    </Label> */}
     <Label weight='regular' size='sm'>
       <Input {...args} size='sm' name='sm-readonly' readOnly />
       Read-only
@@ -723,6 +737,20 @@ export const Switch: StoryFn<typeof Input> = (args) => (
       <Input {...args} size='md' name='md-disabled' disabled defaultChecked />
       Disabled checked
     </Label>
+    {/* <Label weight='regular' size='md'>
+      <Input {...args} size='md' name='md-invalid' aria-invalid='true' />
+      Invalid
+    </Label>
+    <Label weight='regular' size='md'>
+      <Input
+        {...args}
+        size='md'
+        name='md-invalid'
+        aria-invalid='true'
+        defaultChecked
+      />
+      Invalid checked
+    </Label> */}
     <Label weight='regular' size='md'>
       <Input {...args} size='md' name='md-readonly' readOnly />
       Read-only
@@ -750,6 +778,20 @@ export const Switch: StoryFn<typeof Input> = (args) => (
       <Input {...args} size='lg' name='lg-disabled' disabled defaultChecked />
       Disabled checked
     </Label>
+    {/* <Label weight='regular' size='lg'>
+      <Input {...args} size='lg' name='lg-invalid' aria-invalid='true' />
+      Invalid
+    </Label>
+    <Label weight='regular' size='lg'>
+      <Input
+        {...args}
+        size='lg'
+        name='lg-invalid'
+        aria-invalid='true'
+        defaultChecked
+      />
+      Invalid checked
+    </Label> */}
     <Label weight='regular' size='lg'>
       <Input {...args} size='lg' name='lg-readonly' readOnly />
       Read-only