diff --git a/.changeset/eight-horses-grow.md b/.changeset/eight-horses-grow.md new file mode 100644 index 00000000000..9f66eb9c966 --- /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 96e8e35a615..4e50c1bddf1 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 27a87393516..182fe66b4a4 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 bf3f2e19f8b..69813be5802 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 = () => ( ( {loading ? ( - + ) : checked ? ( ) : null}