fix(www): /guidelines/color modal title color for dark mode (#19147)

* fix(www): /guidelines/color modal title color * chore(www): Remove utils/guidelines/theme
gatsbyjs · Oct 30, 2019 · 589c599 · 589c599
1 parent 80db808
commit 589c599
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 40 deletions.
diff --git a/www/src/components/guidelines/color/modal.js b/www/src/components/guidelines/color/modal.js
@@ -164,10 +164,17 @@ const modalContent = (palette, color) => {
             </Box>
           </Column>
           <Column bg="white">
-            <Text as="p" fontFamily="monospace" fontWeight="bold" mr={3} mb={4}>
+            <Text
+              as="p"
+              color="grey.80"
+              fontFamily="monospace"
+              fontWeight="bold"
+              mr={3}
+              mb={4}
+            >
               colors.{color}[{colorNumber}] {c.name && c.name}
             </Text>
-            <Text as="span" fontWeight="body" ml="auto">
+            <Text as="span" color="grey.80" fontWeight="body" ml="auto">
               {c.contrast.colorOnWhite.toFixed(2)} /{` `}
               {getA11yLabel(c.a11y)}
             </Text>
@@ -190,7 +197,7 @@ const ColorModal = ({ palette, color, handleModalClose }) => {
   return (
     <>
       <Flex alignItems="baseline" p={{ xxs: 6, md: 8 }}>
-        <Heading mr={4} mt={0}>
+        <Heading color="black" mr={4} mt={0}>
           {palette[color].name}
         </Heading>
         <CloseButton

diff --git a/www/src/utils/guidelines/color.js b/www/src/utils/guidelines/color.js
@@ -2,7 +2,7 @@ import { rgb as wcag } from "wcag-contrast"
 import hexRgb from "hex-rgb"
 import { normal } from "color-blend"
 
-import theme from "./theme"
+import { colors } from "../../gatsby-plugin-theme-ui"
 
 // adapted from https://github.com/jxnblk/colorable 🙏
 const minimums = {
@@ -78,7 +78,7 @@ export const colorable = function(hex) {
   }
 
   result.a11y = {
-    ...a11y(hex, theme.colors.white),
+    ...a11y(hex, colors.white),
   }
 
   return result

diff --git a/www/src/utils/guidelines/theme.js b/www/src/utils/guidelines/theme.js