Merge pull request #1 from nandorojo/nandorojo/injection

complete theme injection
hasparus · Oct 1, 2020 · 1ccc26b · 1ccc26b
2 parents d28935f + ecd2e0b
commit 1ccc26b
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 3 deletions.
diff --git a/packages/css/src/scales.ts b/packages/css/src/scales.ts
@@ -89,6 +89,17 @@ export interface ColorScaleCSSProperties {
 
 const opacities = {
   opacity: 'opacities',
+} as const
+
+
+// by excluding Array<any>, we remove Array's "push", "pop" methods, etc.
+type Opacities = 
+| Exclude<keyof Exclude<FinalTheme['opacities'], undefined>, keyof Array<any>>
+| CSS.Globals
+
+export interface OpacitiesCSSProperties {
+  // TODO add comment
+  opacity?: Opacities
 }
 
 const space = {
@@ -135,8 +146,79 @@ const space = {
   gap: 'space',
   columnGap: 'space',
   rowGap: 'space',
+} as const
+
+type Space = 
+| Exclude<keyof Exclude<FinalTheme['space'], undefined>, keyof Array<any>>
+| CSS.Globals
+
+export interface SpaceCSSProperties {
+  /**
+   * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin
+   */
+  margin?: Space,
+  /**
+   * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
+   */
+  marginTop?: Space,
+  marginRight?: Space,
+  marginBottom?: Space,
+  marginLeft?: Space,
+  marginX?: Space,
+  marginY?: Space,
+  marginBlock?: Space,
+  marginBlockEnd?: Space,
+  marginBlockStart?: Space,
+  marginInline?: Space,
+  marginInlineEnd?: Space,
+  marginInlineStart?: Space,
+  padding?: Space,
+  paddingTop?: Space,
+  paddingRight?: Space,
+  paddingBottom?: Space,
+  paddingLeft?: Space,
+  paddingX?: Space,
+  paddingY?: Space,
+  paddingBlock?: Space,
+  paddingBlockEnd?: Space,
+  paddingBlockStart?: Space,
+  paddingInline?: Space,
+  paddingInlineEnd?: Space,
+  paddingInlineStart?: Space,
+  inset?: Space,
+  insetBlock?: Space,
+  insetBlockEnd?: Space,
+  insetBlockStart?: Space,
+  insetInline?: Space,
+  insetInlineEnd?: Space,
+  insetInlineStart?: Space,
+  top?: Space,
+  right?: Space,
+  bottom?: Space,
+  left?: Space,
+  gridGap?: Space,
+  gridColumnGap?: Space,
+  gridRowGap?: Space,
+  gap?: Space,
+  columnGap?: Space,
+  rowGap?: Space,
 }
 
+
 const sizes = {
   width: 'sizes',
   minWidth: 'sizes',
@@ -152,6 +234,27 @@ const sizes = {
   maxInlineSize: 'sizes',
   minBlockSize: 'sizes',
   minInlineSize: 'sizes',
+} as const
+
+type Sizes = 
+| Exclude<keyof Exclude<FinalTheme['sizes'], undefined>, keyof Array<any>>
+| CSS.Globals
+
+export interface SizesCSSProperties {
+  width?: Sizes
+  minWidth?: Sizes
+  maxWidth?: Sizes
+  height?: Sizes
+  minHeight?: Sizes
+  maxHeight?: Sizes
+  flexBasis?: Sizes
+  size?: Sizes
+  blockSize?: Sizes
+  inlineSize?: Sizes
+  maxBlockSize?: Sizes
+  maxInlineSize?: Sizes
+  minBlockSize?: Sizes
+  minInlineSize?: Sizes
 }
 
 const borders = {
@@ -160,12 +263,26 @@ const borders = {
   borderRight: 'borders',
   borderBottom: 'borders',
   borderLeft: 'borders',
+} as const
+
+type Borders = 
+| Exclude<keyof Exclude<FinalTheme['borders'], undefined>, keyof Array<any>>
+| CSS.Globals
+
+export interface BordersCSSProperties {
+  border?: Borders
+  borderTop?: Borders
+  borderRight?: Borders
+  borderBottom?: Borders
+  borderLeft?: Borders
 }
 
 export const scales = {
   ...colors,
   ...opacities,
   ...space,
+  ...borders,
+  ...sizes,
   fontFamily: 'fonts',
   fontSize: 'fontSizes',
   fontWeight: 'fontWeights',

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
@@ -1,6 +1,6 @@
 import * as CSS from 'csstype'
 
-import { ColorScaleCSSProperties } from './scales'
+import { BordersCSSProperties, ColorScaleCSSProperties, OpacitiesCSSProperties, SizesCSSProperties, SpaceCSSProperties } from './scales'
 
 type StandardCSSProperties = CSS.Properties<number | string>
 
@@ -324,7 +324,7 @@ interface AliasesCSSProperties {
   size?: StandardCSSProperties['width']
 }
 
-interface OverwriteCSSProperties extends ColorScaleCSSProperties {
+interface OverwriteCSSProperties extends ColorScaleCSSProperties, OpacitiesCSSProperties, SpaceCSSProperties, BordersCSSProperties, SizesCSSProperties {
   /**
    * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
    * element, blur and spread radii, and color.
@@ -445,7 +445,7 @@ interface OverwriteCSSProperties extends ColorScaleCSSProperties {
  */
 export interface ThemeUIExtendedCSSProperties
   extends Omit<CSSProperties, keyof OverwriteCSSProperties>,
-    AliasesCSSProperties,
+    Omit<AliasesCSSProperties, keyof OverwriteCSSProperties>,
     OverwriteCSSProperties {}
 
 export type StylePropertyValue<T> =