fix(Switch): adjust design (#2929)

- Fixes #2664 --------- Co-authored-by: Barsnes <[email protected]>
digdir · Dec 20, 2024 · da5696a · da5696a
1 parent 31ef0f5
commit da5696a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 32 deletions.
diff --git a/.changeset/great-cameras-check.md 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
@@ -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'],