fix(types): fix missing values in types (#361)

Closes #355

packages/system/src/styles/animations.ts

@@ -1,6 +1,6 @@
 import * as CSS from 'csstype'
 import { style, themeGetter, compose } from '../style'
-import { getDuration, ThemeDuration } from './units'
+import { getDuration, Duration } from './units'
 import { getTimingFunction, ThemeTimingFunction } from './transitions'
 import { ITheme, SystemProp, ThemeNamespaceValue, Theme } from '../types'
 
@@ -25,7 +25,7 @@ export const animation = style<AnimationProps>({
 
 export interface AnimationDurationProps<T extends ITheme = Theme> {
   animationDuration?: SystemProp<
-    ThemeDuration<T> | CSS.Property.AnimationDuration,
+    Duration<T> | CSS.Property.AnimationDuration,
     T
   >
 }

packages/system/src/styles/borders.ts

@@ -2,18 +2,21 @@ import * as CSS from 'csstype'
 import { style, themeGetter, compose } from '../style'
 import { px } from '../unit'
 import { getColor, ThemeColor, Color } from './colors'
-import { getPx } from './units'
+import { getPx, Pixel } from './units'
 import { SystemProp, ITheme, Theme, ThemeNamespaceValue } from '../types'
 
 // Getters
 export type ThemeBorder<T extends ITheme = Theme> = ThemeNamespaceValue<
   'borders',
   T
 >
+type BorderValue = number | string
+export type Border<T extends ITheme = Theme> = BorderValue | ThemeBorder<T>
+
 export const getBorder = themeGetter<ThemeBorder>({
   name: 'border',
   key: 'borders',
-  transform: (value: number | string) => {
+  transform: (value: BorderValue) => {
     const num = Number(value)
     return num > 0 ? `${px(num)} solid` : value
   },
@@ -23,6 +26,7 @@ export type ThemeBorderWidth<T extends ITheme = Theme> = ThemeNamespaceValue<
   'borderWidths',
   T
 >
+export type BorderWidth<T extends ITheme = Theme> = Pixel | ThemeBorderWidth<T>
 export const getBorderWidth = themeGetter<ThemeBorderWidth>({
   name: 'borderWidth',
   key: 'borderWidths',
@@ -49,45 +53,39 @@ export const getBorderStyle = themeGetter<ThemeBorderStyle>({
 // Border
 
 export interface BorderProps<T extends ITheme = Theme> {
-  border?: SystemProp<ThemeBorder<T> | number | CSS.Property.Border, T>
+  border?: SystemProp<Border<T> | CSS.Property.Border, T>
 }
 export const border = style<BorderProps>({
   prop: 'border',
   themeGet: getBorder,
 })
 
 export interface BorderTopProps<T extends ITheme = Theme> {
-  borderTop?: SystemProp<ThemeBorder<T> | number | CSS.Property.BorderTop, T>
+  borderTop?: SystemProp<Border<T> | CSS.Property.BorderTop, T>
 }
 export const borderTop = style<BorderTopProps>({
   prop: 'borderTop',
   themeGet: getBorder,
 })
 
 export interface BorderRightProps<T extends ITheme = Theme> {
-  borderRight?: SystemProp<
-    ThemeBorder<T> | number | CSS.Property.BorderRight,
-    T
-  >
+  borderRight?: SystemProp<Border<T> | CSS.Property.BorderRight, T>
 }
 export const borderRight = style<BorderRightProps>({
   prop: 'borderRight',
   themeGet: getBorder,
 })
 
 export interface BorderBottomProps<T extends ITheme = Theme> {
-  borderBottom?: SystemProp<
-    ThemeBorder<T> | number | CSS.Property.BorderBottom,
-    T
-  >
+  borderBottom?: SystemProp<Border<T> | CSS.Property.BorderBottom, T>
 }
 export const borderBottom = style<BorderBottomProps>({
   prop: 'borderBottom',
   themeGet: getBorder,
 })
 
 export interface BorderLeftProps<T extends ITheme = Theme> {
-  borderLeft?: SystemProp<ThemeBorder<T> | number | CSS.Property.BorderLeft, T>
+  borderLeft?: SystemProp<Border<T> | CSS.Property.BorderLeft, T>
 }
 export const borderLeft = style<BorderLeftProps>({
   prop: 'borderLeft',
@@ -141,21 +139,15 @@ export const borderLeftColor = style<BorderLeftColorProps>({
 })
 
 export interface BorderWidthProps<T extends ITheme = Theme> {
-  borderWidth?: SystemProp<
-    ThemeBorderWidth<T> | number | CSS.Property.BorderWidth,
-    T
-  >
+  borderWidth?: SystemProp<BorderWidth<T> | CSS.Property.BorderWidth, T>
 }
 export const borderWidth = style<BorderWidthProps>({
   prop: 'borderWidth',
   themeGet: getBorderWidth,
 })
 
 export interface BorderTopWidthProps<T extends ITheme = Theme> {
-  borderTopWidth?: SystemProp<
-    ThemeBorderWidth<T> | number | CSS.Property.BorderTopWidth,
-    T
-  >
+  borderTopWidth?: SystemProp<BorderWidth<T> | CSS.Property.BorderTopWidth, T>
 }
 export const borderTopWidth = style<BorderTopWidthProps>({
   prop: 'borderTopWidth',
@@ -164,7 +156,7 @@ export const borderTopWidth = style<BorderTopWidthProps>({
 
 export interface BorderRightWidthProps<T extends ITheme = Theme> {
   borderRightWidth?: SystemProp<
-    ThemeBorderWidth<T> | number | CSS.Property.BorderRightWidth,
+    BorderWidth<T> | CSS.Property.BorderRightWidth,
     T
   >
 }
@@ -175,7 +167,7 @@ export const borderRightWidth = style<BorderRightWidthProps>({
 
 export interface BorderBottomWidthProps<T extends ITheme = Theme> {
   borderBottomWidth?: SystemProp<
-    ThemeBorderWidth<T> | number | CSS.Property.BorderBottomWidth,
+    BorderWidth<T> | CSS.Property.BorderBottomWidth,
     T
   >
 }
@@ -185,10 +177,7 @@ export const borderBottomWidth = style<BorderBottomWidthProps>({
 })
 
 export interface BorderLeftWidthProps<T extends ITheme = Theme> {
-  borderLeftWidth?: SystemProp<
-    ThemeBorderWidth<T> | number | CSS.Property.BorderLeftWidth,
-    T
-  >
+  borderLeftWidth?: SystemProp<BorderWidth<T> | CSS.Property.BorderLeftWidth, T>
 }
 export const borderLeftWidth = style<BorderLeftWidthProps>({
   prop: 'borderLeftWidth',
@@ -257,7 +246,7 @@ export const borderLeftStyle = style<BorderLeftStyleProps>({
 // Outline
 
 export interface OutlineProps<T extends ITheme = Theme> {
-  outline?: SystemProp<ThemeBorder<T> | number | CSS.Property.Outline, T>
+  outline?: SystemProp<Border<T> | CSS.Property.Outline, T>
 }
 export const outline = style<OutlineProps>({
   prop: 'outline',
@@ -273,10 +262,7 @@ export const outlineColor = style<OutlineColorProps>({
 })
 
 export interface OutlineWidthProps<T extends ITheme = Theme> {
-  outlineWidth?: SystemProp<
-    ThemeBorderWidth<T> | number | CSS.Property.OutlineWidth,
-    T
-  >
+  outlineWidth?: SystemProp<BorderWidth<T> | CSS.Property.OutlineWidth, T>
 }
 export const outlineWidth = style<OutlineWidthProps>({
   prop: 'outlineWidth',
@@ -292,10 +278,11 @@ export const outlineStyle = style<OutlineStyleProps>({
 })
 
 export interface OutlineOffsetProps<T extends ITheme = Theme> {
-  outlineOffset?: SystemProp<ThemeBorderWidth<T> | CSS.Property.OutlineOffset, T>
+  outlineOffset?: SystemProp<BorderWidth<T> | CSS.Property.OutlineOffset, T>
 }
 export const outlineOffset = style<OutlineOffsetProps>({
   prop: 'outlineOffset',
+  themeGet: getBorderWidth,
 })
 
 // Radius
@@ -304,6 +291,7 @@ export type ThemeRadius<T extends ITheme = Theme> = ThemeNamespaceValue<
   'radii',
   T
 >
+export type Radius<T extends ITheme = Theme> = Pixel | ThemeRadius<T>
 export const getRadius = themeGetter<ThemeRadius>({
   name: 'radius',
   key: 'radii',
@@ -312,10 +300,7 @@ export const getRadius = themeGetter<ThemeRadius>({
 })
 
 export interface BorderRadiusProps<T extends ITheme = Theme> {
-  borderRadius?: SystemProp<
-    ThemeRadius<T> | number | CSS.Property.BorderRadius,
-    T
-  >
+  borderRadius?: SystemProp<Radius<T> | CSS.Property.BorderRadius, T>
 }
 export const borderRadius = style<BorderRadiusProps>({
   prop: 'borderRadius',
@@ -334,7 +319,7 @@ export const borderRadius = style<BorderRadiusProps>({
 const divideSelector = `& > :not([hidden]) ~ :not([hidden])`
 
 export interface DivideYProps<T extends ITheme = Theme> {
-  divideY?: SystemProp<ThemeBorderWidth<T>, T>
+  divideY?: SystemProp<BorderWidth<T> | true, T>
 }
 export const divideY = style<DivideYProps>({
   prop: 'divideY',
@@ -352,7 +337,7 @@ export const divideY = style<DivideYProps>({
 })
 
 export interface DivideXProps<T extends ITheme = Theme> {
-  divideX?: SystemProp<ThemeBorderWidth<T>, T>
+  divideX?: SystemProp<BorderWidth<T> | true, T>
 }
 export const divideX = style<DivideXProps>({
   prop: 'divideX',
@@ -370,7 +355,7 @@ export const divideX = style<DivideXProps>({
 })
 
 export interface DivideXReverseProps<T extends ITheme = Theme> {
-  divideXReverse?: SystemProp<boolean, T>
+  divideXReverse?: SystemProp<true, T>
 }
 export const divideXReverse = style<DivideXReverseProps>({
   prop: 'divideXReverse',
@@ -382,7 +367,7 @@ export const divideXReverse = style<DivideXReverseProps>({
 })
 
 export interface DivideYReverseProps<T extends ITheme = Theme> {
-  divideYReverse?: SystemProp<boolean, T>
+  divideYReverse?: SystemProp<true, T>
 }
 export const divideYReverse = style<DivideYReverseProps>({
   prop: 'divideYReverse',
@@ -423,14 +408,15 @@ export type ThemeRingWidth<T extends ITheme = Theme> = ThemeNamespaceValue<
   'ringWidths',
   T
 >
+export type RingWidth<T extends ITheme = Theme> = Pixel | ThemeRingWidth<T>
 export const getRingWidth = themeGetter<ThemeRingWidth>({
   name: 'ringWidth',
   key: 'ringWidths',
   compose: getPx,
 })
 
 export interface RingProps<T extends ITheme = Theme> {
-  ring?: SystemProp<ThemeRingWidth<T> | number, T>
+  ring?: SystemProp<RingWidth<T>, T>
 }
 export const ring = style<RingProps>({
   prop: 'ring',
@@ -442,7 +428,7 @@ export const ring = style<RingProps>({
 })
 
 export interface RingInsetProps<T extends ITheme = Theme> {
-  ringInset?: SystemProp<boolean, T>
+  ringInset?: SystemProp<true, T>
 }
 export const ringInset = style<RingInsetProps>({
   prop: 'ringInset',

packages/system/src/styles/flexbox-grids.ts

@@ -4,7 +4,7 @@ import { style, createStyleGenerator, reduceVariants, compose } from '../style'
 import { getPercent } from './units'
 
 export interface RowProps<T extends ITheme = Theme> {
-  row?: SystemProp<boolean, T>
+  row?: SystemProp<true, T>
 }
 export const row = style<RowProps>({
   prop: 'row',

packages/system/src/styles/flexboxes.ts

@@ -1,6 +1,6 @@
 import * as CSS from 'csstype'
 import { style, compose } from '../style'
-import { getPercent } from './units'
+import { getPercent, Percent } from './units'
 import { display, DisplayProps } from './layout'
 import { SystemProp, ITheme, Theme } from '../types'
 
@@ -54,7 +54,7 @@ export const flexShrink = style<FlexShrinkProps>({
 })
 
 export interface FlexBasisProps<T extends ITheme = Theme> {
-  flexBasis?: SystemProp<CSS.Property.FlexBasis | number, T>
+  flexBasis?: SystemProp<Percent | CSS.Property.FlexBasis, T>
 }
 export const flexBasis = style<FlexBasisProps>({
   prop: 'flexBasis',

packages/system/src/styles/grids.ts

@@ -1,26 +1,26 @@
 import * as CSS from 'csstype'
 import { SystemProp, ITheme, Theme, ThemeNamespaceValue } from '../types'
 import { style, compose } from '../style'
-import { getSpace, ThemeSpace } from './space'
+import { getSpace, Space } from './space'
 
 export interface GapProps<T extends ITheme = Theme> {
-  gap?: SystemProp<ThemeSpace<T> | CSS.Property.Gap, T>
+  gap?: SystemProp<Space<T> | CSS.Property.Gap, T>
 }
 export const gap = style<GapProps>({
   prop: 'gap',
   themeGet: getSpace,
 })
 
 export interface ColumnGapProps<T extends ITheme = Theme> {
-  columnGap?: SystemProp<ThemeSpace<T> | CSS.Property.ColumnGap, T>
+  columnGap?: SystemProp<Space<T> | CSS.Property.ColumnGap, T>
 }
 export const columnGap = style<ColumnGapProps>({
   prop: 'columnGap',
   themeGet: getSpace,
 })
 
 export interface RowGapProps<T extends ITheme = Theme> {
-  rowGap?: SystemProp<ThemeSpace<T> | CSS.Property.RowGap, T>
+  rowGap?: SystemProp<Space<T> | CSS.Property.RowGap, T>
 }
 export const rowGap = style<RowGapProps>({
   prop: 'rowGap',

packages/system/src/styles/layout.ts

@@ -8,7 +8,7 @@ import {
   themeGetter,
 } from '../style'
 import { transformNegative } from '../unit'
-import { getPx } from './units'
+import { getPx, Pixel } from './units'
 import { getScreens } from '../theme'
 import { SystemProp, ThemeNamespaceValue, ITheme, Theme } from '../types'
 
@@ -34,7 +34,7 @@ export const boxSizing = style<BoxSizingProps>({
 })
 
 export interface ContainerProps<T extends ITheme = Theme> {
-  container?: SystemProp<boolean, T>
+  container?: SystemProp<true, T>
 }
 export const container = createStyleGenerator<ContainerProps>({
   getStyle: (props) => {
@@ -104,6 +104,7 @@ export type ThemeInset<T extends ITheme = Theme> = ThemeNamespaceValue<
   'inset',
   T
 >
+export type Inset<T extends ITheme = Theme> = Pixel | ThemeInset<T>
 export const getInset = themeGetter<ThemeInset>({
   name: 'inset',
   key: 'inset',
@@ -112,31 +113,31 @@ export const getInset = themeGetter<ThemeInset>({
 })
 
 export interface TopProps<T extends ITheme = Theme> {
-  top?: SystemProp<ThemeInset<T> | number | CSS.Property.Top, T>
+  top?: SystemProp<Inset<T> | CSS.Property.Top, T>
 }
 export const top = style<TopProps>({
   prop: 'top',
   themeGet: getInset,
 })
 
 export interface RightProps<T extends ITheme = Theme> {
-  right?: SystemProp<ThemeInset<T> | number | CSS.Property.Right, T>
+  right?: SystemProp<Inset<T> | CSS.Property.Right, T>
 }
 export const right = style<RightProps>({
   prop: 'right',
   themeGet: getInset,
 })
 
 export interface BottomProps<T extends ITheme = Theme> {
-  bottom?: SystemProp<ThemeInset<T> | number | CSS.Property.Bottom, T>
+  bottom?: SystemProp<Inset<T> | CSS.Property.Bottom, T>
 }
 export const bottom = style<BottomProps>({
   prop: 'bottom',
   themeGet: getInset,
 })
 
 export interface LeftProps<T extends ITheme = Theme> {
-  left?: SystemProp<ThemeInset<T> | number | CSS.Property.Left, T>
+  left?: SystemProp<Inset<T> | CSS.Property.Left, T>
 }
 export const left = style<LeftProps>({
   prop: 'left',