Merge pull request #4059 from uswds/dw-use-proper-color-tokens

James Mejia · web-flow · commit 6513d442514c · 2021-03-03T10:29:47.000-08:00
Use theme reverse colors across reversed components
diff --git a/src/stylesheets/components/_section.scss b/src/stylesheets/components/_section.scss
@@ -13,19 +13,21 @@
 
 .usa-section--dark {
   background-color: color("primary-darker");
-  color: color("white");
+  color: color($theme-text-reverse-color);
 
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
+    // TODO: This should use a theme-able color,
+    // and should probably default to white
     color: color("accent-cool");
   }
 
   p {
-    color: color("white");
+    color: color($theme-text-reverse-color);
   }
 
   a {
diff --git a/src/stylesheets/elements/_buttons.scss b/src/stylesheets/elements/_buttons.scss
@@ -111,9 +111,9 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
   }
 
   &.usa-button--inverse {
-    $button-inverse-color: "base-lighter";
-    $button-inverse-hover-color: "base-lightest";
-    $button-inverse-active-color: "white";
+    $button-inverse-color: $theme-link-reverse-color;
+    $button-inverse-hover-color: $theme-link-reverse-hover-color;
+    $button-inverse-active-color: $theme-link-reverse-active-color;
 
     box-shadow: $button-stroke color("base-lighter");
     color: color($button-inverse-color);
diff --git a/src/stylesheets/elements/typography/_content.scss b/src/stylesheets/elements/typography/_content.scss
@@ -41,18 +41,18 @@
 
   p,
   span {
-    color: color("white");
+    color: color($theme-text-reverse-color);
   }
 
   a {
-    color: color("base-lighter");
+    color: color($theme-link-reverse-color);
 
     &:visited {
-      color: color("base-lighter");
+      color: color($theme-link-reverse-color);
     }
 
     &:hover {
-      color: color("white");
+      color: color($theme-link-reverse-hover-color);
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -41,18 +41,18 @@`
`41`	`41`
`42`	`42`	`p,`
`43`	`43`	`span {`
`44`		`- color: color("white");`
	`44`	`+ color: color($theme-text-reverse-color);`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`a {`
`48`		`- color: color("base-lighter");`
	`48`	`+ color: color($theme-link-reverse-color);`
`49`	`49`
`50`	`50`	`&:visited {`
`51`		`- color: color("base-lighter");`
	`51`	`+ color: color($theme-link-reverse-color);`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`&:hover {`
`55`		`- color: color("white");`
	`55`	`+ color: color($theme-link-reverse-hover-color);`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`	`}`