diff --git a/types/styled-theming/index.d.ts b/types/styled-theming/index.d.ts index fab32a7617..0faa964c12 100644 --- a/types/styled-theming/index.d.ts +++ b/types/styled-theming/index.d.ts @@ -1,14 +1,17 @@ // Type definitions for styled-theming 2.2 // Project: https://github.com/styled-components/styled-theming#readme // Definitions by: Arjan Jassal +// Hieu Ho // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.7 +// TypeScript Version: 2.9 + +import { FlattenInterpolation, ThemeProps, ThemedStyledProps } from "styled-components"; declare function theme(name: string, values: theme.ThemeMap): theme.ThemeSet; declare namespace theme { type ThemeValueFn = (props: object) => string; - type ThemeValue = string | ThemeValueFn; + type ThemeValue = string | ThemeValueFn | FlattenInterpolation> | FlattenInterpolation>; interface ThemeMap { [key: string]: ThemeValue; diff --git a/types/styled-theming/package.json b/types/styled-theming/package.json new file mode 100644 index 0000000000..72419b912c --- /dev/null +++ b/types/styled-theming/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "csstype": "^2.2.0" + } +} diff --git a/types/styled-theming/styled-theming-tests.ts b/types/styled-theming/styled-theming-tests.ts index 2d9e947009..bfcf6767d4 100644 --- a/types/styled-theming/styled-theming-tests.ts +++ b/types/styled-theming/styled-theming-tests.ts @@ -1,4 +1,5 @@ import theme from "styled-theming"; +import { css } from "styled-components"; const textColor = theme("mode", { dark: "white", @@ -11,3 +12,24 @@ const backgroundColor = theme.variants("mode", "variant", { success: { light: "green", dark: "darkgreen" }, warning: { light: "orange", dark: "darkorange" } }); + +const cssTheme = theme("mode", { + dark: css` + background: gray; + `, + light: css` + background: white; + ` +}); + +interface cssProps { + visible: boolean; +} +const cssPropsTheme = theme("mode", { + dark: css` + visibility: ${(props: cssProps) => props.visible ? 'visible' : 'hidden'}; + `, + light: css` + background: white; + ` +});