fix(typing): Support any valid number for utility props that needs it (…

…#357)

* impr(borders): add typings for the borders namespace

* impr(flexboxes): add typings for the flexboxes namespace

* impr(layout): add typings for the layout namespace

* impr(sizing): add typings for the sizing namespace

* impr(space): add typings for the space namespace

* impr(typography): add typings for the typography namespace

Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>

packages/system/src/styles/borders.ts

@@ -49,39 +49,45 @@ 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',
   themeGet: getBorder,
 })
 
 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',
   themeGet: getBorder,
 })
 
 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',
   themeGet: getBorder,
 })
 
 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',
   themeGet: getBorder,
 })
 
 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',

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',

packages/system/src/styles/layout.ts

@@ -112,31 +112,31 @@ 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',
   themeGet: getInset,
 })
 
 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',
   themeGet: getInset,
 })
 
 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',
   themeGet: getInset,
 })
 
 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',

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',

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
   >
 }