From ee127a16066e4deb08fd39765f44238e3653ddd3 Mon Sep 17 00:00:00 2001
From: Kamal Bennani <kamal.bennani@aircall.io>
Date: Tue, 15 Mar 2022 23:35:38 +0100
Subject: [PATCH 1/6] impr(borders): add typings for the borders namespace

---
 packages/system/src/styles/borders.ts | 43 ++++++++++++++++++---------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/system/src/styles/borders.ts b/packages/system/src/styles/borders.ts
index 076a8006..c7ef1df2 100644
--- a/packages/system/src/styles/borders.ts
+++ b/packages/system/src/styles/borders.ts
@@ -49,7 +49,7 @@ export const getBorderStyle = themeGetter<ThemeBorderStyle>({
 // Border
 
 export interface BorderProps<T extends ITheme = Theme> {
-  border?: SystemProp<ThemeBorder<T> | CSS.Property.Border, T>
+  border?: SystemProp<ThemeBorder<T> | number | CSS.Property.Border, T>
 }
 export const border = style<BorderProps>({
   prop: 'border',
@@ -57,7 +57,7 @@ export const border = style<BorderProps>({
 })
 
 export interface BorderTopProps<T extends ITheme = Theme> {
-  borderTop?: SystemProp<ThemeBorder<T> | CSS.Property.BorderTop, T>
+  borderTop?: SystemProp<ThemeBorder<T> | number | CSS.Property.BorderTop, T>
 }
 export const borderTop = style<BorderTopProps>({
   prop: 'borderTop',
@@ -65,7 +65,10 @@ export const borderTop = style<BorderTopProps>({
 })
 
 export interface BorderRightProps<T extends ITheme = Theme> {
-  borderRight?: SystemProp<ThemeBorder<T> | CSS.Property.BorderRight, T>
+  borderRight?: SystemProp<
+    ThemeBorder<T> | number | CSS.Property.BorderRight,
+    T
+  >
 }
 export const borderRight = style<BorderRightProps>({
   prop: 'borderRight',
@@ -73,7 +76,10 @@ export const borderRight = style<BorderRightProps>({
 })
 
 export interface BorderBottomProps<T extends ITheme = Theme> {
-  borderBottom?: SystemProp<ThemeBorder<T> | CSS.Property.BorderBottom, T>
+  borderBottom?: SystemProp<
+    ThemeBorder<T> | number | CSS.Property.BorderBottom,
+    T
+  >
 }
 export const borderBottom = style<BorderBottomProps>({
   prop: 'borderBottom',
@@ -81,7 +87,7 @@ export const borderBottom = style<BorderBottomProps>({
 })
 
 export interface BorderLeftProps<T extends ITheme = Theme> {
-  borderLeft?: SystemProp<ThemeBorder<T> | CSS.Property.BorderLeft, T>
+  borderLeft?: SystemProp<ThemeBorder<T> | number | CSS.Property.BorderLeft, T>
 }
 export const borderLeft = style<BorderLeftProps>({
   prop: 'borderLeft',
@@ -135,7 +141,10 @@ export const borderLeftColor = style<BorderLeftColorProps>({
 })
 
 export interface BorderWidthProps<T extends ITheme = Theme> {
-  borderWidth?: SystemProp<ThemeBorderWidth<T> | CSS.Property.BorderWidth, T>
+  borderWidth?: SystemProp<
+    ThemeBorderWidth<T> | number | CSS.Property.BorderWidth,
+    T
+  >
 }
 export const borderWidth = style<BorderWidthProps>({
   prop: 'borderWidth',
@@ -144,7 +153,7 @@ export const borderWidth = style<BorderWidthProps>({
 
 export interface BorderTopWidthProps<T extends ITheme = Theme> {
   borderTopWidth?: SystemProp<
-    ThemeBorderWidth<T> | CSS.Property.BorderTopWidth,
+    ThemeBorderWidth<T> | number | CSS.Property.BorderTopWidth,
     T
   >
 }
@@ -155,7 +164,7 @@ export const borderTopWidth = style<BorderTopWidthProps>({
 
 export interface BorderRightWidthProps<T extends ITheme = Theme> {
   borderRightWidth?: SystemProp<
-    ThemeBorderWidth<T> | CSS.Property.BorderRightWidth,
+    ThemeBorderWidth<T> | number | CSS.Property.BorderRightWidth,
     T
   >
 }
@@ -166,7 +175,7 @@ export const borderRightWidth = style<BorderRightWidthProps>({
 
 export interface BorderBottomWidthProps<T extends ITheme = Theme> {
   borderBottomWidth?: SystemProp<
-    ThemeBorderWidth<T> | CSS.Property.BorderBottomWidth,
+    ThemeBorderWidth<T> | number | CSS.Property.BorderBottomWidth,
     T
   >
 }
@@ -177,7 +186,7 @@ export const borderBottomWidth = style<BorderBottomWidthProps>({
 
 export interface BorderLeftWidthProps<T extends ITheme = Theme> {
   borderLeftWidth?: SystemProp<
-    ThemeBorderWidth<T> | CSS.Property.BorderLeftWidth,
+    ThemeBorderWidth<T> | number | CSS.Property.BorderLeftWidth,
     T
   >
 }
@@ -248,7 +257,7 @@ export const borderLeftStyle = style<BorderLeftStyleProps>({
 // Outline
 
 export interface OutlineProps<T extends ITheme = Theme> {
-  outline?: SystemProp<ThemeBorder<T> | CSS.Property.Outline, T>
+  outline?: SystemProp<ThemeBorder<T> | number | CSS.Property.Outline, T>
 }
 export const outline = style<OutlineProps>({
   prop: 'outline',
@@ -264,7 +273,10 @@ export const outlineColor = style<OutlineColorProps>({
 })
 
 export interface OutlineWidthProps<T extends ITheme = Theme> {
-  outlineWidth?: SystemProp<ThemeBorderWidth<T> | CSS.Property.OutlineWidth, T>
+  outlineWidth?: SystemProp<
+    ThemeBorderWidth<T> | number | CSS.Property.OutlineWidth,
+    T
+  >
 }
 export const outlineWidth = style<OutlineWidthProps>({
   prop: 'outlineWidth',
@@ -293,7 +305,10 @@ export const getRadius = themeGetter<ThemeRadius>({
 })
 
 export interface BorderRadiusProps<T extends ITheme = Theme> {
-  borderRadius?: SystemProp<ThemeRadius<T> | CSS.Property.BorderRadius, T>
+  borderRadius?: SystemProp<
+    ThemeRadius<T> | number | CSS.Property.BorderRadius,
+    T
+  >
 }
 export const borderRadius = style<BorderRadiusProps>({
   prop: 'borderRadius',
@@ -408,7 +423,7 @@ export const getRingWidth = themeGetter<ThemeRingWidth>({
 })
 
 export interface RingProps<T extends ITheme = Theme> {
-  ring?: SystemProp<ThemeRingWidth<T>, T>
+  ring?: SystemProp<ThemeRingWidth<T> | number, T>
 }
 export const ring = style<RingProps>({
   prop: 'ring',

From af065e2bb4fc4c0851ea38b9ee6cea4d9facf6b8 Mon Sep 17 00:00:00 2001
From: Kamal Bennani <kamal.bennani@aircall.io>
Date: Tue, 15 Mar 2022 23:35:54 +0100
Subject: [PATCH 2/6] impr(flexboxes): add typings for the flexboxes namespace

---
 packages/system/src/styles/flexboxes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/system/src/styles/flexboxes.ts b/packages/system/src/styles/flexboxes.ts
index 2e80ecae..9c55028f 100644
--- a/packages/system/src/styles/flexboxes.ts
+++ b/packages/system/src/styles/flexboxes.ts
@@ -54,7 +54,7 @@ export const flexShrink = style<FlexShrinkProps>({
 })
 
 export interface FlexBasisProps<T extends ITheme = Theme> {
-  flexBasis?: SystemProp<CSS.Property.FlexBasis, T>
+  flexBasis?: SystemProp<CSS.Property.FlexBasis | number, T>
 }
 export const flexBasis = style<FlexBasisProps>({
   prop: 'flexBasis',

From 8b21457f6a56889e1238f629b9b5c67445303aeb Mon Sep 17 00:00:00 2001
From: Kamal Bennani <kamal.bennani@aircall.io>
Date: Tue, 15 Mar 2022 23:36:17 +0100
Subject: [PATCH 3/6] impr(layout): add typings for the layout namespace

---
 packages/system/src/styles/layout.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/system/src/styles/layout.ts b/packages/system/src/styles/layout.ts
index 1302a2fb..ccca9e6b 100644
--- a/packages/system/src/styles/layout.ts
+++ b/packages/system/src/styles/layout.ts
@@ -112,7 +112,7 @@ export const getInset = themeGetter<ThemeInset>({
 })
 
 export interface TopProps<T extends ITheme = Theme> {
-  top?: SystemProp<ThemeInset<T> | CSS.Property.Top, T>
+  top?: SystemProp<ThemeInset<T> | number | CSS.Property.Top, T>
 }
 export const top = style<TopProps>({
   prop: 'top',
@@ -120,7 +120,7 @@ export const top = style<TopProps>({
 })
 
 export interface RightProps<T extends ITheme = Theme> {
-  right?: SystemProp<ThemeInset<T> | CSS.Property.Right, T>
+  right?: SystemProp<ThemeInset<T> | number | CSS.Property.Right, T>
 }
 export const right = style<RightProps>({
   prop: 'right',
@@ -128,7 +128,7 @@ export const right = style<RightProps>({
 })
 
 export interface BottomProps<T extends ITheme = Theme> {
-  bottom?: SystemProp<ThemeInset<T> | CSS.Property.Bottom, T>
+  bottom?: SystemProp<ThemeInset<T> | number | CSS.Property.Bottom, T>
 }
 export const bottom = style<BottomProps>({
   prop: 'bottom',
@@ -136,7 +136,7 @@ export const bottom = style<BottomProps>({
 })
 
 export interface LeftProps<T extends ITheme = Theme> {
-  left?: SystemProp<ThemeInset<T> | CSS.Property.Left, T>
+  left?: SystemProp<ThemeInset<T> | number | CSS.Property.Left, T>
 }
 export const left = style<LeftProps>({
   prop: 'left',

From c654c7b9f8fa3714866183d0540cff2ba869d608 Mon Sep 17 00:00:00 2001
From: Kamal Bennani <kamal.bennani@aircall.io>
Date: Tue, 15 Mar 2022 23:36:31 +0100
Subject: [PATCH 4/6] impr(sizing): add typings for the sizing namespace

---
 packages/system/src/styles/sizing.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/system/src/styles/sizing.ts b/packages/system/src/styles/sizing.ts
index 50059921..5e06bf1c 100644
--- a/packages/system/src/styles/sizing.ts
+++ b/packages/system/src/styles/sizing.ts
@@ -18,7 +18,7 @@ export const getSize = themeGetter<ThemeSize>({
 // Styles
 
 export interface WidthProps<T extends ITheme = Theme> {
-  w?: SystemProp<ThemeSize<T> | CSS.Property.Width, T>
+  w?: SystemProp<ThemeSize<T> | number | CSS.Property.Width, T>
 }
 export const width = style<WidthProps>({
   prop: 'w',
@@ -27,7 +27,7 @@ export const width = style<WidthProps>({
 })
 
 export interface HeightProps<T extends ITheme = Theme> {
-  h?: SystemProp<ThemeSize<T> | CSS.Property.Height, T>
+  h?: SystemProp<ThemeSize<T> | number | CSS.Property.Height, T>
 }
 export const height = style<HeightProps>({
   prop: 'h',
@@ -36,7 +36,7 @@ export const height = style<HeightProps>({
 })
 
 type MaxWidthProp<T extends ITheme> = SystemProp<
-  ThemeSize<T> | CSS.Property.MaxWidth,
+  ThemeSize<T> | number | CSS.Property.MaxWidth,
   T
 >
 export interface MaxWidthProps<T extends ITheme = Theme> {
@@ -50,7 +50,7 @@ export const maxWidth = style<MaxWidthProps>({
 })
 
 type MaxHeightProp<T extends ITheme> = SystemProp<
-  ThemeSize<T> | CSS.Property.MaxHeight,
+  ThemeSize<T> | number | CSS.Property.MaxHeight,
   T
 >
 export interface MaxHeightProps<T extends ITheme = Theme> {
@@ -64,7 +64,7 @@ export const maxHeight = style<MaxHeightProps>({
 })
 
 export interface MinWidthProps<T extends ITheme = Theme> {
-  minWidth?: SystemProp<ThemeSize<T> | CSS.Property.MinWidth, T>
+  minWidth?: SystemProp<ThemeSize<T> | number | CSS.Property.MinWidth, T>
 }
 export const minWidth = style<MinWidthProps>({
   prop: ['minWidth', 'minW'],
@@ -73,7 +73,7 @@ export const minWidth = style<MinWidthProps>({
 })
 
 type MinHeightProp<T extends ITheme> = SystemProp<
-  ThemeSize<T> | CSS.Property.MinHeight,
+  ThemeSize<T> | number | CSS.Property.MinHeight,
   T
 >
 export interface MinHeightProps<T extends ITheme = Theme> {
@@ -87,7 +87,7 @@ export const minHeight = style<MinHeightProps>({
 })
 
 export interface MaskSizeProps<T extends ITheme = Theme> {
-  maskSize?: SystemProp<ThemeSize<T> | CSS.Property.MaskSize, T>
+  maskSize?: SystemProp<ThemeSize<T> | number | CSS.Property.MaskSize, T>
 }
 export const maskSize = style<MaskSizeProps>({
   prop: 'maskSize',

From d2d51f9138a786faf138e02d3c1df9642b3244ca Mon Sep 17 00:00:00 2001
From: Kamal Bennani <kamal.bennani@aircall.io>
Date: Tue, 15 Mar 2022 23:36:44 +0100
Subject: [PATCH 5/6] impr(space): add typings for the space namespace

---
 packages/system/src/styles/space.ts | 36 ++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/system/src/styles/space.ts b/packages/system/src/styles/space.ts
index 31e8c677..0781fb9b 100644
--- a/packages/system/src/styles/space.ts
+++ b/packages/system/src/styles/space.ts
@@ -19,7 +19,7 @@ export const getSpace = themeGetter<ThemeSpace>({
 // Margin
 
 type MarginProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.Margin,
+  ThemeSpace<T> | number | CSS.Property.Margin,
   T
 >
 export interface MarginProps<T extends ITheme = Theme> {
@@ -33,7 +33,7 @@ export const margin = style({
 })
 
 type MarginTopProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.MarginTop,
+  ThemeSpace<T> | number | CSS.Property.MarginTop,
   T
 >
 export interface MarginTopProps<T extends ITheme = Theme> {
@@ -47,7 +47,7 @@ export const marginTop = style<MarginTopProps>({
 })
 
 type MarginRightProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.MarginRight,
+  ThemeSpace<T> | number | CSS.Property.MarginRight,
   T
 >
 export interface MarginRightProps<T extends ITheme = Theme> {
@@ -61,7 +61,7 @@ export const marginRight = style<MarginRightProps>({
 })
 
 type MarginBottomProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.MarginBottom,
+  ThemeSpace<T> | number | CSS.Property.MarginBottom,
   T
 >
 export interface MarginBottomProps<T extends ITheme = Theme> {
@@ -75,7 +75,7 @@ export const marginBottom = style<MarginBottomProps>({
 })
 
 type MarginLeftProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.MarginLeft,
+  ThemeSpace<T> | number | CSS.Property.MarginLeft,
   T
 >
 export interface MarginLeftProps<T extends ITheme = Theme> {
@@ -90,7 +90,9 @@ export const marginLeft = style<MarginLeftProps>({
 
 export interface MarginXProps<T extends ITheme = Theme> {
   mx?: SystemProp<
-    ThemeSpace<T> | (CSS.Property.MarginLeft & CSS.Property.MarginRight),
+    | ThemeSpace<T>
+    | number
+    | (CSS.Property.MarginLeft & CSS.Property.MarginRight),
     T
   >
 }
@@ -102,7 +104,9 @@ export const mx = style<MarginXProps>({
 
 export interface MarginYProps<T extends ITheme = Theme> {
   my?: SystemProp<
-    ThemeSpace<T> | (CSS.Property.MarginTop & CSS.Property.MarginBottom),
+    | ThemeSpace<T>
+    | number
+    | (CSS.Property.MarginTop & CSS.Property.MarginBottom),
     T
   >
 }
@@ -115,7 +119,7 @@ export const my = style<MarginYProps>({
 // Padding
 
 type PaddingProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.Padding,
+  ThemeSpace<T> | number | CSS.Property.Padding,
   T
 >
 export interface PaddingProps<T extends ITheme = Theme> {
@@ -129,7 +133,7 @@ export const padding = style<PaddingProps>({
 })
 
 type PaddingTopProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.PaddingTop,
+  ThemeSpace<T> | number | CSS.Property.PaddingTop,
   T
 >
 export interface PaddingTopProps<T extends ITheme = Theme> {
@@ -143,7 +147,7 @@ export const paddingTop = style<PaddingTopProps>({
 })
 
 type PaddingRightProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.PaddingRight,
+  ThemeSpace<T> | number | CSS.Property.PaddingRight,
   T
 >
 export interface PaddingRightProps<T extends ITheme = Theme> {
@@ -157,7 +161,7 @@ export const paddingRight = style<PaddingRightProps>({
 })
 
 type PaddingBottomProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.PaddingBottom,
+  ThemeSpace<T> | number | CSS.Property.PaddingBottom,
   T
 >
 export interface PaddingBottomProps<T extends ITheme = Theme> {
@@ -171,7 +175,7 @@ export const paddingBottom = style<PaddingBottomProps>({
 })
 
 type PaddingLeftProp<T extends ITheme> = SystemProp<
-  ThemeSpace<T> | CSS.Property.PaddingLeft,
+  ThemeSpace<T> | number | CSS.Property.PaddingLeft,
   T
 >
 export interface PaddingLeftProps<T extends ITheme = Theme> {
@@ -186,7 +190,9 @@ export const paddingLeft = style<PaddingLeftProps>({
 
 export interface PaddingXProps<T extends ITheme = Theme> {
   px?: SystemProp<
-    ThemeSpace<T> | (CSS.Property.PaddingLeft & CSS.Property.PaddingRight),
+    | ThemeSpace<T>
+    | number
+    | (CSS.Property.PaddingLeft & CSS.Property.PaddingRight),
     T
   >
 }
@@ -198,7 +204,9 @@ export const px = style<PaddingXProps>({
 
 export interface PaddingYProps<T extends ITheme = Theme> {
   py?: SystemProp<
-    ThemeSpace<T> | (CSS.Property.PaddingTop & CSS.Property.PaddingBottom),
+    | ThemeSpace<T>
+    | number
+    | (CSS.Property.PaddingTop & CSS.Property.PaddingBottom),
     T
   >
 }

From 8deae1b3b97c9c54daef787f3aabbfb086b08598 Mon Sep 17 00:00:00 2001
From: Kamal Bennani <kamal.bennani@aircall.io>
Date: Tue, 15 Mar 2022 23:37:05 +0100
Subject: [PATCH 6/6] impr(typography): add typings for the typography
 namespace

---
 packages/system/src/styles/typography.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/system/src/styles/typography.ts b/packages/system/src/styles/typography.ts
index 93f0a907..03aabed9 100644
--- a/packages/system/src/styles/typography.ts
+++ b/packages/system/src/styles/typography.ts
@@ -66,7 +66,7 @@ export const fontFamily = style<FontFamilyProps>({
 })
 
 export interface FontSizeProps<T extends ITheme = Theme> {
-  fontSize?: SystemProp<ThemeFontSize<T> | CSS.Property.FontSize, T>
+  fontSize?: SystemProp<ThemeFontSize<T> | number | CSS.Property.FontSize, T>
 }
 export const fontSize = style<FontSizeProps>({
   prop: 'fontSize',
@@ -98,7 +98,7 @@ export const fontStyle = style<FontStyleProps>({
 
 export interface LetterSpacingProps<T extends ITheme = Theme> {
   letterSpacing?: SystemProp<
-    ThemeLetterSpacing<T> | CSS.Property.LetterSpacing,
+    ThemeLetterSpacing<T> | number | CSS.Property.LetterSpacing,
     T
   >
 }