use new tokens

digdir · Apr 15, 2024 · 4422e94 · 4422e94
1 parent 769b197
commit 4422e94
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {