[Switch] Updated default design to better reflect unchecked state (#3468

) * WIP Switch update * 💄 Updated Switch to reflect unchecked state better * 📝 Synced token for switch
navikt · Dec 20, 2024 · db828bd · db828bd
1 parent 443b129
commit db828bd
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 32 deletions.
diff --git a/.changeset/big-crabs-walk.md b/.changeset/big-crabs-walk.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Switch: Update switch to better reflect unchecked state.
diff --git a/@navikt/core/css/form/switch.css b/@navikt/core/css/form/switch.css
@@ -72,12 +72,15 @@
 .navds-switch__track {
   width: 2.75rem;
   height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ac-switch-bg, var(--a-surface-default));
+  border: 2px solid var(--a-border-default);
   position: absolute;
   top: var(--a-spacing-3);
   left: 0;
   border-radius: var(--a-border-radius-full);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: background-color, border-color;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .navds-switch--small > .navds-switch__track {
@@ -92,18 +95,20 @@
 
 .navds-switch__input:checked ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
+  border-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
 }
 
 .navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-subtle));
 }
 
-.navds-switch__input:hover:checked ~ .navds-switch__track {
+.navds-switch__input:hover:checked:not(:disabled) ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
+  border-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
 }
 
 .navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ac-switch-bg, var(--a-surface-default));
 }
 
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
@@ -129,15 +134,15 @@
 
 /* Thumb */
 .navds-switch__thumb {
-  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-neutral));
   color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
   border-radius: var(--a-border-radius-full);
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   position: absolute;
   transform: translateX(0);
-  left: var(--a-spacing-05);
-  top: var(--a-spacing-05);
+  left: 0.0625rem;
+  top: 0.0625rem;
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
@@ -147,6 +152,11 @@
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+  background-color: var(--a-surface-default);
+  width: 1.25rem;
+  height: 1.25rem;
+  left: 0;
+  top: 0;
 }
 
 .navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
@@ -195,6 +205,7 @@
 .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
 .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
   background-color: var(--a-surface-neutral-moderate);
+  border-color: var(--a-border-subtle);
 }
 
 .navds-switch--readonly > .navds-switch__label-wrapper,
@@ -212,12 +223,12 @@
 }
 
 .navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-subtle);
-  box-shadow: 0 0 0 2px var(--a-border-default);
+  background-color: var(--a-surface-neutral);
 }
 
 .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-subtle);
+  color: var(--a-icon-on-neutral);
+  background-color: var(--a-surface-neutral);
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -237,7 +248,9 @@
   }
 
   .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb {
+  .navds-switch--readonly .navds-switch__thumb,
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
     background-color: fieldtext;
   }
 
@@ -246,11 +259,8 @@
     color: field;
   }
 
-  .navds-switch__track {
-    width: calc(2.75rem + 4px);
-    height: calc(1.5rem + 4px);
-    top: var(--a-spacing-3);
-    border: 2px solid fieldtext;
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: graytext;
   }
 
   .navds-switch__input:focus-visible ~ .navds-switch__track {
@@ -264,6 +274,7 @@
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
     background-color: graytext;
+    border-color: graytext;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {

diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
@@ -411,11 +411,11 @@
   },
   "switch": {
     "--ac-switch-action": "--a-surface-action-selected",
-    "--ac-switch-bg": "--a-surface-neutral",
+    "--ac-switch-bg": "--a-surface-default",
     "--ac-switch-checked-bg": "--a-surface-action-selected",
-    "--ac-switch-hover-bg": "--a-surface-neutral-hover",
+    "--ac-switch-hover-bg": "--a-surface-subtle",
     "--ac-switch-checked-hover-bg": "--a-surface-action-selected-hover",
-    "--ac-switch-thumb-bg": "--a-surface-default",
+    "--ac-switch-thumb-bg": "--a-surface-neutral",
     "--ac-switch-thumb-icon": "--a-icon-subtle",
     "--ac-switch-thumb-icon-checked": "--a-icon-action-selected"
   },

diff --git a/@navikt/core/react/src/form/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx
@@ -6,7 +6,6 @@ import React, {
   useState,
 } from "react";
 import { Loader } from "../../loader";
-import { useThemeInternal } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -69,8 +68,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       defaultChecked ?? checkedProp ?? false,
     );
 
-    const themeContext = useThemeInternal(false);
-
     useEffect(() => {
       checkedProp !== undefined && setChecked(checkedProp);
     }, [checkedProp]);
@@ -121,13 +118,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               <Loader
                 size="xsmall"
                 aria-live="polite"
-                variant={
-                  checked
-                    ? "interaction"
-                    : themeContext
-                      ? "inverted"
-                      : "neutral"
-                }
+                variant={checked ? "interaction" : "inverted"}
               />
             ) : (
               <svg