From cbf9df95a2e2a298866317039bbe1b54c5b127a9 Mon Sep 17 00:00:00 2001
From: David Daniell <david@tinynumbers.com>
Date: Thu, 27 Jun 2019 12:16:48 -0400
Subject: [PATCH] support returning CSS interpolation from styled-theming
 ThemeValueFn (#36468)

---
 types/styled-theming/index.d.ts              |  9 +++++--
 types/styled-theming/styled-theming-tests.ts | 27 ++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/types/styled-theming/index.d.ts b/types/styled-theming/index.d.ts
index 0faa964c12..921083f5c1 100644
--- a/types/styled-theming/index.d.ts
+++ b/types/styled-theming/index.d.ts
@@ -2,6 +2,7 @@
 // Project: https://github.com/styled-components/styled-theming#readme
 // Definitions by: Arjan Jassal <https://github.com/ArjanJ>
 //                 Hieu Ho <https://github.com/hieuhlc>
+//                 David Daniell <https://github.com/tinynumbers>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.9
 
@@ -10,8 +11,12 @@ import { FlattenInterpolation, ThemeProps, ThemedStyledProps } from "styled-comp
 declare function theme(name: string, values: theme.ThemeMap): theme.ThemeSet;
 
 declare namespace theme {
-    type ThemeValueFn = (props: object) => string;
-    type ThemeValue = string | ThemeValueFn | FlattenInterpolation<ThemeProps<any>> | FlattenInterpolation<ThemedStyledProps<any, any>>;
+    type ThemeValueResult =
+        string
+        | FlattenInterpolation<ThemeProps<any>>
+        | FlattenInterpolation<ThemedStyledProps<any, any>>;
+    type ThemeValueFn = (props: object) => ThemeValueResult;
+    type ThemeValue = ThemeValueFn | ThemeValueResult;
 
     interface ThemeMap {
         [key: string]: ThemeValue;
diff --git a/types/styled-theming/styled-theming-tests.ts b/types/styled-theming/styled-theming-tests.ts
index bfcf6767d4..3981ba5203 100644
--- a/types/styled-theming/styled-theming-tests.ts
+++ b/types/styled-theming/styled-theming-tests.ts
@@ -33,3 +33,30 @@ const cssPropsTheme = theme("mode", {
         background: white;
     `
 });
+
+interface buttonProps {
+    hidden?: boolean;
+}
+
+const button = theme.variants('mode', 'type', {
+    primary: {
+        light: (props: buttonProps) =>
+            css`
+              background: ${props.hidden ? 'transparent' : 'blue'};
+            `,
+        dark: (props: buttonProps) =>
+            css`
+              background: ${props.hidden ? 'transparent' : 'black'};
+            `,
+    },
+    secondary: {
+        light: (props: buttonProps) =>
+            css`
+              background: ${props.hidden ? 'transparent' : 'skyblue'};
+            `,
+        dark: (props: buttonProps) =>
+            css`
+              background: ${props.hidden ? 'transparent' : 'grey'};
+            `,
+    },
+});