From 10bbdb730ba79544fa65e1aacebd865be8672a05 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Thu, 23 Nov 2023 13:57:06 +0100
Subject: [PATCH] Switch color (#2511)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :lipstick: Switch er nå action

* :memo: changeset

* :bug: Byttet fra action til action-selected
---
 .changeset/eight-horses-grow.md        |  6 ++++++
 @navikt/core/css/form/switch.css       | 15 +++++----------
 @navikt/core/css/tokens.json           |  8 ++++----
 @navikt/core/react/src/form/Switch.tsx | 10 +++++++---
 4 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/eight-horses-grow.md

diff --git a/.changeset/eight-horses-grow.md b/.changeset/eight-horses-grow.md
new file mode 100644
index 0000000000..9f66eb9c96
--- /dev/null
+++ 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
index 96e8e35a61..4e50c1bddf 100644
--- 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,7 +91,7 @@
 }
 
 .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 {
@@ -99,7 +99,7 @@
 }
 
 .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 {
@@ -107,7 +107,7 @@
 }
 
 .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
index 27a8739351..182fe66b4a 100644
--- 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
index bf3f2e19f8..69813be580 100644
--- 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}