chore(.ds-input): sync with figma (#3202)

Co-authored-by: Michael Marszalek <[email protected]>

Author: Barsnes

.changeset/fast-toys-explain.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Checkbox**: Reduce border-radius by one size, making them more square.

packages/css/src/input.css

@@ -14,8 +14,8 @@
   --dsc-input-border-style: solid;
   --dsc-input-border-width--toggle: max(var(--ds-border-width-default), calc(var(--ds-size-1) / 2)); /* Allow border-width to grow with font-size */
   --dsc-input-border-width: var(--ds-border-width-default);
-  /* Color  */
-  --dsc-input-color--readonly: var(--ds-color-neutral-text-subtle);
+  /* Color */
+  --dsc-input-color--readonly: var(--ds-color-neutral-text-default);
   --dsc-input-color: var(--ds-color-neutral-text-default);
   /* Stroke is used as the dot in radio, and checkmark in checkboxes */
   --dsc-input-stroke-color: var(--ds-color-base-contrast-default);
@@ -37,7 +37,6 @@
   border-width: var(--dsc-input-border-width);
   border-style: var(--dsc-input-border-style);
   border-color: var(--dsc-input-border-color);
-  box-shadow: var(--dsc-input-box-shadow);
   box-sizing: border-box;
   color: var(--dsc-input-color);
   font-family: inherit;
@@ -153,7 +152,6 @@
   &[type='radio'] {
     border-width: var(--dsc-input-border-width--toggle);
     padding: var(--_dsc-input-spacing--toggle);
-
     flex-shrink: 0; /* Never shrink a toggle input */
     line-height: inherit; /* Inherit line height so we can use 1lh to align with first line of label */
     height: var(--dsc-input-size--toggle);
@@ -186,6 +184,10 @@
     }
   }
 
+  &[type='checkbox'] {
+    border-radius: var(--ds-border-radius-sm);
+  }
+
   &[type='checkbox']:checked {
     background-origin: content-box;
     background-repeat: no-repeat;