From da5696a2e2ead5acad5df2a12ac5ab64effabab6 Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Fri, 20 Dec 2024 13:56:15 +0100
Subject: [PATCH] fix(Switch): adjust design (#2929)

- Fixes #2664

---------

Co-authored-by: Barsnes <tobias.barsnes@digdir.no>
---
 .changeset/great-cameras-check.md |  5 +++++
 packages/css/src/input.css        | 35 +++----------------------------
 2 files changed, 8 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/great-cameras-check.md

diff --git a/.changeset/great-cameras-check.md b/.changeset/great-cameras-check.md
new file mode 100644
index 0000000000..79b6202516
--- /dev/null
+++ b/.changeset/great-cameras-check.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Switch: Adjust design to better align with radio and checkbox
diff --git a/packages/css/src/input.css b/packages/css/src/input.css
index c411c7f277..cdc96873dd 100644
--- a/packages/css/src/input.css
+++ b/packages/css/src/input.css
@@ -2,7 +2,6 @@
   --dsc-input-background--checked: var(--dsc-input-border-color--checked);
   --dsc-input-background--invalid: var(--dsc-input-border-color--invalid);
   --dsc-input-background--readonly: var(--ds-color-neutral-background-subtle);
-  --dsc-input-background--switch: var(--ds-color-neutral-border-default);
   --dsc-input-background: var(--ds-color-neutral-background-default);
   --dsc-input-border-color--checked: var(--ds-color-base-default);
   --dsc-input-border-color--invalid: var(--ds-color-danger-border-strong);
@@ -15,7 +14,6 @@
   --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);
   --dsc-input-size--toggle: var(--ds-sizing-6);
   --dsc-input-size: var(--ds-sizing-12);
   --dsc-input-stroke: 0.055em;
@@ -76,11 +74,6 @@
     font-size: inherit; /* Ensure inheriting font-size */
   }
 
-  /* Change switch background with low specificity to allow states to overwrite */
-  &:where([role='switch']) {
-    --dsc-input-background: var(--dsc-input-background--switch);
-  }
-
   &:is(select) {
     padding-right: 2.4em;
     background: linear-gradient(45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4)) calc(100% - 1.2em + var(--dsc-input-stroke))
@@ -231,42 +224,20 @@
    * Switch
    */
   &[role='switch']:is([type='radio'], [type='checkbox']) {
-    --dsc-input-color: transparent; /* Hide checkmark */
-    --dsc-input-padding: var(--ds-sizing-1);
-    --dsc-input-size: var(--dsc-input-size--switch);
-    --circle-color: var(--dsc-input-color--checked);
     --circle-position: left;
 
     border-radius: var(--ds-border-radius-full);
-    padding-left: var(--dsc-input-size); /* Push checkmark to right side */
     transition: 0.2s background-position;
-    width: calc((var(--dsc-input-size) - var(--dsc-input-border-width)) * 2); /* Subtract border-width to make background-image math correct */
-    background: var(--check-left), var(--check-right), radial-gradient(circle closest-side, var(--circle-color) 95%, transparent 100%) var(--circle-position) /
-      50% 100% no-repeat padding-box, var(--dsc-input-background);
+    width: calc(var(--dsc-input-size) * 2);
+    background: radial-gradient(circle closest-side, currentcolor 95%, transparent 100%) var(--circle-position) / calc(50% - var(--dsc-input-padding) * 2) 100%
+      no-repeat content-box, var(--dsc-input-background);
 
     &:checked {
-      --dsc-input-color: var(--dsc-input-border-color);
       --circle-position: right;
     }
 
-    &[readonly] {
-      --circle-color: var(--dsc-input-color--readonly);
-    }
-
     @media (forced-colors: active) {
-      --circle-color: CanvasText;
-      --dsc-input-background: Canvas;
-      --dsc-input-border-color: ButtonText;
-
       forced-color-adjust: none; /* To be able to draw switch */
-      background: var(--check-left), var(--check-right), radial-gradient(circle closest-side, var(--circle-color) 95%, transparent 100%) var(--circle-position)
-        / 50% 100% no-repeat padding-box, var(--dsc-input-background);
-
-      &:checked {
-        --circle-color: CanvasText;
-        --dsc-input-background: LinkText;
-        --dsc-input-border-color: LinkText;
-      }
 
       &:disabled,
       &[aria-disabled='true'],