Use color tokens in FourOhFour styles

Fixes #1309 Signed-off-by: James Taylor <jamest@uk.ibm.com>
carbon-design-system · Feb 15, 2024 · 230d6dc · 230d6dc
1 parent e4fcaee
commit 230d6dc
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss b/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss
@@ -16,32 +16,28 @@
   animation: gradient 2s ease infinite;
 }
 
-:global(.container--dark) .link {
-  color: $gray-10;
-}
-
 .list .link {
   @include type-style('body-short-02');
   margin-bottom: $spacing-03;
   position: relative;
   display: inline-block;
   transition: color $transition-base;
-  color: $text-01;
+  color: $link-primary;
   text-decoration: none;
   margin-left: $spacing-05;
 
   &:hover {
-    color: $blue-40;
+    color: $link-primary-hover;
     &::before {
-      color: $blue-40;
+      color: $link-primary-hover;
     }
   }
 
   &:before {
     content: '\21B3'; //"↳"
     position: absolute;
     left: -$spacing-05;
-    color: $text-01;
+    color: $link-primary;
     transition: color $transition-base;
     cursor: pointer;
   }
@@ -62,6 +58,8 @@
 }
 
 .container {
+  background-color: $background;
+  color: $text-primary;
   margin: 0;
   max-width: 100%;
   min-height: calc(100vh - 455px);