From 4422e943c77f7ee747f4694d4fb288306a1247a0 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Mon, 15 Apr 2024 14:03:13 +0200 Subject: [PATCH] use new tokens --- .../components/Accordion/Accordion.module.css | 12 ++++++------ .../react/src/components/Card/Card.module.css | 18 +++++++++--------- .../src/components/Spinner/Spinner.module.css | 2 +- .../react/src/components/Tag/Tag.module.css | 6 +++--- .../components/form/Switch/Switch.module.css | 4 ++-- 5 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/react/src/components/Accordion/Accordion.module.css b/packages/react/src/components/Accordion/Accordion.module.css index 193381fa36..dfb7f9e3d2 100644 --- a/packages/react/src/components/Accordion/Accordion.module.css +++ b/packages/react/src/components/Accordion/Accordion.module.css @@ -70,21 +70,21 @@ .first .accordionButton { --fds-accordion-border-color: var(--fds-semantic-border-first-default); - background: var(--fds-semantic-surface-first-light); + background: var(--fds-semantic-surface-first-subtle); } .second, .second .accordionButton { --fds-accordion-border-color: var(--fds-semantic-border-second-default); - background: var(--fds-semantic-surface-second-light); + background: var(--fds-semantic-surface-second-subtle); } .third, .third .accordionButton { --fds-accordion-border-color: var(--fds-semantic-border-third-default); - background: var(--fds-semantic-surface-third-light); + background: var(--fds-semantic-surface-third-subtle); } .first .item:where(.open) .accordionButton, @@ -119,15 +119,15 @@ } .first .accordionButton:hover { - background-color: var(--fds-semantic-surface-first-light-hover); + background-color: var(--fds-semantic-surface-first-subtle-hover); } .second .accordionButton:hover { - background-color: var(--fds-semantic-surface-second-light-hover); + background-color: var(--fds-semantic-surface-second-subtle-hover); } .third .accordionButton:hover { - background-color: var(--fds-semantic-surface-third-light-hover); + background-color: var(--fds-semantic-surface-third-subtle-hover); } } } diff --git a/packages/react/src/components/Card/Card.module.css b/packages/react/src/components/Card/Card.module.css index 5a8a15d59d..735f929a23 100644 --- a/packages/react/src/components/Card/Card.module.css +++ b/packages/react/src/components/Card/Card.module.css @@ -114,41 +114,41 @@ } .first { - background-color: var(--fds-semantic-surface-first-light); + background-color: var(--fds-semantic-surface-first-subtle); border: 1px solid var(--fds-semantic-border-neutral-subtle); } .first.linkCard:hover { - background-color: var(--fds-semantic-surface-first-light-hover); + background-color: var(--fds-semantic-surface-first-subtle-hover); } .first.linkCard:active { - background-color: var(--fds-semantic-surface-first-light-active); + background-color: var(--fds-semantic-surface-first-subtle-active); } .second { - background-color: var(--fds-semantic-surface-second-light); + background-color: var(--fds-semantic-surface-second-subtle); border: 1px solid var(--fds-semantic-border-neutral-subtle); } .second.linkCard:hover { - background-color: var(--fds-semantic-surface-second-light-hover); + background-color: var(--fds-semantic-surface-second-subtle-hover); } .second.linkCard:active { - background-color: var(--fds-semantic-surface-second-light-active); + background-color: var(--fds-semantic-surface-second-subtle-active); } .third { - background-color: var(--fds-semantic-surface-third-light); + background-color: var(--fds-semantic-surface-third-subtle); border: 1px solid var(--fds-semantic-border-neutral-subtle); } .third.linkCard:hover { - background-color: var(--fds-semantic-surface-third-light-hover); + background-color: var(--fds-semantic-surface-third-subtle-hover); } .third.linkCard:active { - background-color: var(--fds-semantic-surface-third-light-active); + background-color: var(--fds-semantic-surface-third-subtle-active); } } diff --git a/packages/react/src/components/Spinner/Spinner.module.css b/packages/react/src/components/Spinner/Spinner.module.css index e8d2b840aa..51f7b06a8d 100644 --- a/packages/react/src/components/Spinner/Spinner.module.css +++ b/packages/react/src/components/Spinner/Spinner.module.css @@ -41,7 +41,7 @@ } .invertedBackground { - stroke: var(--fds-semantic-surface-neutral-dark); + stroke: var(--fds-semantic-surface-neutral-strong); } @keyframes rotate-animation { diff --git a/packages/react/src/components/Tag/Tag.module.css b/packages/react/src/components/Tag/Tag.module.css index 2720e8e158..6fcf3fca83 100644 --- a/packages/react/src/components/Tag/Tag.module.css +++ b/packages/react/src/components/Tag/Tag.module.css @@ -59,17 +59,17 @@ } .first { - --fdsc-tag-background: var(--fds-semantic-surface-first-light); + --fdsc-tag-background: var(--fds-semantic-surface-first-subtle); --fdsc-tag-text: var(--fds-semantic-text-neutral-default); } .second { - --fdsc-tag-background: var(--fds-semantic-surface-second-light); + --fdsc-tag-background: var(--fds-semantic-surface-second-subtle); --fdsc-tag-text: var(--fds-semantic-text-neutral-default); } .third { - --fdsc-tag-background: var(--fds-semantic-surface-third-light); + --fdsc-tag-background: var(--fds-semantic-surface-third-subtle); --fdsc-tag-text: var(--fds-semantic-text-neutral-default); } } diff --git a/packages/react/src/components/form/Switch/Switch.module.css b/packages/react/src/components/form/Switch/Switch.module.css index 3535aac206..5434f78da3 100644 --- a/packages/react/src/components/form/Switch/Switch.module.css +++ b/packages/react/src/components/form/Switch/Switch.module.css @@ -32,7 +32,7 @@ margin: auto; overflow: visible; border-radius: var(--fds-border_radius-full); - background-color: var(--fds-semantic-surface-neutral-dark); + background-color: var(--fds-semantic-surface-neutral-strong); transition: background-color var(--fds-transition) ease; margin-right: var(--fds-spacing-1); } @@ -206,7 +206,7 @@ } .input:not(:checked, :disabled, [readonly]):hover + .label .track { - background-color: var(--fds-semantic-surface-neutral-dark-hover); + background-color: var(--fds-semantic-surface-neutral-strong-hover); } .input:not(:disabled, [readonly]):checked:hover + .label .track {