From cd1c0a03d37b1f2c01df17bebc3564277b6a8d8e Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@reservix.de>
Date: Mon, 8 Jul 2019 22:08:19 +0200
Subject: [PATCH] Allow interpolation in fontWeight + fix selector usage
 (#36649)

---
 types/styled-system__css/index.d.ts           | 10 +++++-----
 .../styled-system__css-tests.ts               | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/types/styled-system__css/index.d.ts b/types/styled-system__css/index.d.ts
index 80cdc3ac68..88ce00968e 100644
--- a/types/styled-system__css/index.d.ts
+++ b/types/styled-system__css/index.d.ts
@@ -37,7 +37,7 @@ export interface CSSProperties extends CSS.StandardProperties<number | string>,
 /**
  * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...)
  */
-export type CSSPseudoSelectorProps = { [Key in CSS.SimplePseudos]?: ResponsiveStyleProps<CSSProperties> };
+export type CSSPseudoSelectorProps<Properties> = { [Key in CSS.SimplePseudos]?: ResponsiveStyleProps<Properties> };
 
 /**
  * Color system properties.
@@ -93,7 +93,7 @@ export type SpaceProps = ResponsiveStyleProps<{
 export type TypographyProps = ResponsiveStyleProps<{
     fontFamily: CSS.FontFamilyProperty;
     fontSize: CSS.FontSizeProperty<number>;
-    fontWeight: CSS.FontWeightProperty;
+    fontWeight: CSS.FontWeightProperty | string;
     lineHeight: CSS.LineHeightProperty<string>;
     letterSpacing: CSS.LetterSpacingProperty<string | number>;
 }>;
@@ -180,14 +180,14 @@ export type Theme<Styles extends string = never> = {
     sizes?: ThemeValue<CSS.HeightProperty<{}> | CSS.WidthProperty<{}>>;
 } & { [key in Styles]: ThemeValue<SystemStyleObject> };
 
+type StyleObject = ResponsiveStyleProps<Omit<CSSProperties, 'boxShadow' | 'fontWeight'>> & StyleProps;
+
 /**
  * The `SystemStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
  * such that properties that are part of the `Theme` will be transformed to
  * their corresponding values. Other valid CSS properties are also allowed.
  */
-export type SystemStyleObject = ResponsiveStyleProps<Omit<CSSProperties, 'boxShadow'>> &
-    CSSPseudoSelectorProps &
-    StyleProps;
+export type SystemStyleObject = StyleObject & CSSPseudoSelectorProps<StyleObject>;
 
 /**
  * Transforms `input` to a style object that can be processed by CSS-in-JS
diff --git a/types/styled-system__css/styled-system__css-tests.ts b/types/styled-system__css/styled-system__css-tests.ts
index 101396254f..b3686cbb21 100644
--- a/types/styled-system__css/styled-system__css-tests.ts
+++ b/types/styled-system__css/styled-system__css-tests.ts
@@ -129,3 +129,22 @@ css({
 css({
     variant: 'text.title',
 });
+
+css({
+    fontWeight: 'regular',
+    bg: 'secondary',
+});
+
+css({
+    bg: 'primary',
+
+    ':hover': {
+        bg: 'secondary',
+    },
+
+    ':disabled': {
+        color: 'gray',
+        bg: 'white',
+        cursor: 'auto',
+    },
+});