Switch color (#2511)

* 💄 Switch er nå action * 📝 changeset * 🐛 Byttet fra action til action-selected
navikt · Nov 23, 2023 · 10bbdb7 · 10bbdb7
1 parent f4458f3
commit 10bbdb7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/.changeset/eight-horses-grow.md b/.changeset/eight-horses-grow.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Switch: Byttet success-farger med action npr checked
diff --git a/@navikt/core/css/form/switch.css b/@navikt/core/css/form/switch.css
@@ -61,7 +61,7 @@
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ac-switch-action, var(--a-surface-action));
+  color: var(--ac-switch-action, var(--a-surface-action-selected));
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -91,23 +91,23 @@
 }
 
 .navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-surface-success));
+  background-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));
 }
 
 .navds-switch__input:hover:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-success-hover));
+  background-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));
 }
 
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-border-success));
+  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
 }
 
 .navds-switch__input:focus-visible ~ .navds-switch__track {
@@ -139,7 +139,7 @@
 
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
-  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -160,11 +160,6 @@
   transform: translateX(1.25rem);
 }
 
-/* Loader */
-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
-  stroke: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
-}
-
 /* Disabled */
 .navds-switch__input:disabled {
   appearance: none;

diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
@@ -401,14 +401,14 @@
     "--ac-select-error-border": "--a-surface-danger"
   },
   "switch": {
-    "--ac-switch-action": "--a-surface-action",
+    "--ac-switch-action": "--a-surface-action-selected",
     "--ac-switch-bg": "--a-surface-neutral",
-    "--ac-switch-checked-bg": "--a-surface-success",
+    "--ac-switch-checked-bg": "--a-surface-action-selected",
     "--ac-switch-hover-bg": "--a-surface-neutral-hover",
-    "--ac-switch-checked-hover-bg": "--a-surface-success-hover",
+    "--ac-switch-checked-hover-bg": "--a-surface-action-selected-hover",
     "--ac-switch-thumb-bg": "--a-surface-default",
     "--ac-switch-thumb-icon": "--a-icon-subtle",
-    "--ac-switch-thumb-icon-checked": "--a-icon-success"
+    "--ac-switch-thumb-icon-checked": "--a-icon-action-selected"
   },
   "textfield": {
     "--ac-textfield-bg": "--a-surface-default",

diff --git a/@navikt/core/react/src/form/Switch.tsx b/@navikt/core/react/src/form/Switch.tsx
@@ -5,11 +5,11 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { FormFieldProps, useFormField } from "./useFormField";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { Loader } from "../loader";
 import { BodyShort } from "../typography";
 import { omit } from "../util";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "./useFormField";
 
 const SelectedIcon = () => (
   <svg
@@ -134,7 +134,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
         <span className="navds-switch__track">
           <span className="navds-switch__thumb">
             {loading ? (
-              <Loader size="xsmall" aria-live="polite" />
+              <Loader
+                size="xsmall"
+                aria-live="polite"
+                variant={checked ? "interaction" : "neutral"}
+              />
             ) : checked ? (
               <SelectedIcon />
             ) : null}