style(input): add border on hover (#4125)

Author: Barsnes

.changeset/rude-snails-report.md

@@ -0,0 +1,9 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**input**: Add outline on `:hover` when not `:focus-visible`, `:disabled` or `[readonly]`. This adds a few new CSS variables:
+- `--dsc-input-outline-color--hover`
+- `--dsc-input-outline-color--toggle--hover`
+- `--dsc-input-outline-width--hover`
+- `--dsc-input-outline-style--hover`

packages/css/src/input.css

@@ -14,6 +14,11 @@
   --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);
+  /* hover */
+  --dsc-input-outline-color--hover: var(--ds-color-neutral-border-default);
+  --dsc-input-outline-color--toggle--hover: var(--dsc-input-accent-color);
+  --dsc-input-outline-width--hover: var(--ds-border-width-default);
+  --dsc-input-outline-style--hover: solid;
   /* Color */
   --dsc-input-color--readonly: var(--ds-color-neutral-text-default);
   --dsc-input-color: var(--ds-color-neutral-text-default);
@@ -51,6 +56,20 @@
   @composes ds-print-preserve from './base.css';
   @composes ds-focus from './base.css';
 
+  &:not(:focus-visible, :disabled, [readonly]):hover {
+    outline-color: var(--dsc-input-outline-color--hover);
+    outline-width: var(--dsc-input-outline-width--hover);
+    outline-style: var(--dsc-input-outline-style--hover);
+
+    &:is(:checked, :indeterminate:where([type='checkbox'])):not([aria-invalid='true']) {
+      outline-color: var(--dsc-input-outline-color--toggle--hover);
+    }
+
+    &:is([aria-invalid='true']) {
+      outline-color: var(--dsc-input-accent-color--invalid);
+    }
+  }
+
   @media (forced-colors: active) {
     border-color: ButtonText;
     background-color: Canvas;