From 589c599f9e4c494e6aa867ded162650805327c95 Mon Sep 17 00:00:00 2001
From: Florian Kissling <21834+fk@users.noreply.github.com>
Date: Wed, 30 Oct 2019 15:53:43 +0100
Subject: [PATCH] fix(www): /guidelines/color modal title color for dark mode
 (#19147)

* fix(www): /guidelines/color modal title color

* chore(www): Remove utils/guidelines/theme
---
 www/src/components/guidelines/color/modal.js | 13 ++++++--
 www/src/utils/guidelines/color.js            |  4 +--
 www/src/utils/guidelines/theme.js            | 35 --------------------
 3 files changed, 12 insertions(+), 40 deletions(-)
 delete mode 100644 www/src/utils/guidelines/theme.js

diff --git a/www/src/components/guidelines/color/modal.js b/www/src/components/guidelines/color/modal.js
index 4e9176b4a9f8a..f05ccedf9bff2 100644
--- 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
index 6c70872a14b4d..a7faeda278bf3 100644
--- 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
deleted file mode 100644
index 88e3662d907be..0000000000000
--- a/www/src/utils/guidelines/theme.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-  breakpoints,
-  fonts,
-  colors,
-  letterSpacings,
-  lineHeights,
-  radii,
-  fontWeights,
-  shadows,
-  borders,
-  fontSizes,
-  space,
-  zIndices,
-  sizes,
-  transition,
-} from "../../gatsby-plugin-theme-ui"
-
-const theme = {
-  colors: colors,
-  breakpoints: breakpoints,
-  borders: borders,
-  fonts: fonts,
-  fontSizes: fontSizes,
-  fontWeights: fontWeights,
-  letterSpacings: letterSpacings,
-  lineHeights: lineHeights,
-  radii: radii,
-  space: space,
-  shadows: shadows,
-  zIndices: zIndices,
-  sizes: sizes,
-  transition: transition,
-}
-
-export default theme