From ef5026e98ddd9625371722672a27a6299eff63be Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 9 Jul 2020 17:22:30 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Merge=20PR=20#45967=20(@types/th?=
 =?UTF-8?q?eme-ui):=20add=20highlight=20color=20by=20@hasparus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* (@types/theme-ui): add highlight color

* (@types/theme-ui): test colors
---
 types/theme-ui/index.d.ts         | 15 ++++++++++-----
 types/theme-ui/theme-ui-tests.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/types/theme-ui/index.d.ts b/types/theme-ui/index.d.ts
index 5340960c2d..8dfe590b3c 100644
--- a/types/theme-ui/index.d.ts
+++ b/types/theme-ui/index.d.ts
@@ -63,16 +63,21 @@ export type ColorMode = {
      */
     secondary?: CSS.ColorProperty;
 
+    /**
+     * A contrast color for emphasizing UI
+     */
+    accent?: CSS.ColorProperty;
+
+    /**
+     * A background color for highlighting text
+     */
+    highlight?: CSS.ColorProperty;
+
     /**
      * A faint color for backgrounds, borders, and accents that do not require
      * high contrast with the background color
      */
     muted?: CSS.ColorProperty;
-
-    /**
-     * A contrast color for emphasizing UI
-     */
-    accent?: CSS.ColorProperty;
 };
 
 export interface Theme extends Omit<StyledSystemTheme, 'colors' | 'buttons'> {
diff --git a/types/theme-ui/theme-ui-tests.tsx b/types/theme-ui/theme-ui-tests.tsx
index 8ce9820763..f5374de43d 100644
--- a/types/theme-ui/theme-ui-tests.tsx
+++ b/types/theme-ui/theme-ui-tests.tsx
@@ -3,6 +3,7 @@ import { Flex, jsx, css, InitializeColorMode, ColorMode, Styled, SxStyleProp, Th
 
 export const Component = () => {
     const { theme, colorMode, setColorMode } = useThemeUI();
+
     return (
         <>
             <InitializeColorMode />
@@ -203,3 +204,26 @@ function cssUtility() {
 
     css(styleObject)(theme);
 }
+
+{
+    const colorMode: ColorMode = {} as any;
+
+    // test: text and background are required
+
+    // $ExpectType string
+    colorMode.text;
+    // $ExpectType string
+    colorMode.background;
+
+    // test: arbitrary keys can hold colors or color scales
+
+    const seriousPink = colorMode.seriousPink;
+    if (typeof seriousPink !== 'string' && Array.isArray(seriousPink)) {
+        const [light, medium, dark]: string[] = seriousPink;
+    }
+
+    // test: interoperable base colors don't contain nested scales
+
+    // $ExpectType (string | undefined)[]
+    const baseColors = [colorMode.primary, colorMode.secondary, colorMode.muted, colorMode.highlight, colorMode.accent];
+}