New customization API

[vmarcosp]

Customization API

• Spacing
• Border Radius
• Breakpoints
• ZIndex
• CSS in JS Library

Drafts

1. Using a .js config file (ancestor.config.js)

Generating the customization file using a .js config file.

// ancestor.config.js
export default {
 breakpoints: {
   xs: 0,
   sm: 400,
   lg: 720,
 },
 spacing: v => v * 8,
 zIndex: {
   base: 0,
   above: 5,
   aboveAll, 
 }
}

// Ancestor.res
module AncestorX = Ancestor.Make({
  type breakpoints<'a> = {
    xs?: 'a,
    sm?: 'a,
    lg?: 'a,
  }
  type fields = Xs | Sm | Lg
  let encode = breakpoints => [
    (Xs, breakpoints.xs),
    (Sm, breakpoints.sm),
    (Lg, breakpoints.lg),
  ]
  let sizeByBreakpoints = breakpoint =>
    switch breakpoint {
    | Xs => 0
    | Sm => 400
    | Lg => 1280
    }


  type zIndex = [ #base | #above | #aboveAll]
  let zIndex = v => switch v {
   | #base => 0
   | #above => 5
   | #aboveAll => 10
  }

  type colors = Ancestor_Css.Color.t
  let colors = v => v

  type spacing = int
  let spacing = spacing => #px(spacing * 8)

  type radius = int
  let radius = radius => #px(radius * 8)


  let css = Ancestor_Emotion.css
})

2. Using a PPX

Generating the breakpoints record using a PPX.

// Ancestor.res
module AncestorX = Ancestor.Make({
  @ancestor.breakpoints
  type breakpoints = Xs | Sm | Lg
  let sizeByBreakpoints = breakpoint =>
    switch breakpoint {
    | Xs => 0
    | Sm => 400
    | Lg => 1280
   }


  type zIndex = [ #base | #above | #aboveAll]
  let zIndex = v => switch v {
   | #base => 0
   | #above => 5
   | #aboveAll => 10
  }

  type colors = Ancestor_Css.Color.t
  let colors = v => v

  type spacing = int
  let spacing = spacing => #px(spacing * 8)

  type radius = int
  let radius = radius => #px(radius * 8)


  let css = Ancestor_Emotion.css
})