feat(typography): added typography tokens and improved the tokenization api

Author: vmarcosp

packages/css/__tests__/AncestorCss_Custom.res

@@ -27,4 +27,17 @@ include AncestorCss.Make(
     type zIndex = int
     let zIndex = v => v
   },
+  {
+    type fontFamily = AncestorCss_WrappedTypes.FontFamily.t
+    type fontSize = Css_AtomicTypes.Length.t
+    type fontWeight = Css_AtomicTypes.FontWeight.t
+    type lineHeight = AncestorCss_WrappedTypes.LineHeight.t
+    type letterSpacing = Css_AtomicTypes.Length.t
+
+    let fontFamily = v => v
+    let fontSize = v => v
+    let fontWeight = v => v
+    let lineHeight = v => v
+    let letterSpacing = v => v
+  },
 )

packages/css/src/AncestorCss.res

@@ -1,9 +1,79 @@
+module Defaults = {
+  let identity = v => v
+
+  module Breakpoints = {
+    type breakpoints = [#xs | #sm | #md | #lg | #xl]
+    let sizeByBreakpoints = breakpoint =>
+      switch breakpoint {
+      | #xs => 0
+      | #sm => 475
+      | #md => 920
+      | #lg => 1280
+      | #xl => 1920
+      }
+  }
+
+  module Colors = {
+    type colors = AncestorCss_WrappedTypes.Color.t
+    let colors = identity
+  }
+
+  module Spacing = {
+    type spacing = int
+    let spacing = v => #px(v * 8)
+  }
+
+  module Radius = {
+    type radius = int
+    let radius = v => #px(v * 8)
+  }
+
+  module ZIndex = {
+    type zIndex = int
+    let zIndex = identity
+  }
+
+  module FontSize = {
+    type fontSize = Css_AtomicTypes.Length.t
+    let fontSize = identity
+  }
+
+  module FontFamily = {
+    type fontFamily = AncestorCss_WrappedTypes.FontFamily.t
+    let fontFamily = identity
+  }
+
+  module FontWeight = {
+    type fontWeight = Css_AtomicTypes.FontWeight.t
+    let fontWeight = identity
+  }
+
+  module LineHeight = {
+    type lineHeight = AncestorCss_WrappedTypes.LineHeight.t
+    let lineHeight = identity
+  }
+
+  module LetterSpacing = {
+    type letterSpacing = Css_AtomicTypes.Length.t
+    let letterSpacing = identity
+  }
+
+  module Typography: AncestorCss_Config.Typography = {
+    include FontSize
+    include FontFamily
+    include FontWeight
+    include LineHeight
+    include LetterSpacing
+  }
+}
+
 module Make = (
   Breakpoints: AncestorCss_Config.Breakpoints,
   CustomColors: AncestorCss_Config.Colors,
   CustomSpacing: AncestorCss_Config.Spacing,
   CustomRadius: AncestorCss_Config.Radius,
   CustomZIndex: AncestorCss_Config.ZIndex,
+  CustomTypography: AncestorCss_Config.Typography,
 ) => {
   include CssJs
 
@@ -111,6 +181,15 @@ module Make = (
       styles,
     )
 
+  /*
+   * Typography
+   */
+  let fontFamily = x => x->CustomTypography.fontFamily->Css_Js_Core.fontFamily
+  let fontSize = x => x->CustomTypography.fontSize->Css_Js_Core.fontSize
+  let fontWeight = x => x->CustomTypography.fontWeight->Css_Js_Core.fontWeight
+  let lineHeight = x => x->CustomTypography.lineHeight->Css_Js_Core.lineHeight
+  let letterSpacing = x => x->CustomTypography.letterSpacing->Css_Js_Core.letterSpacing
+
   /*
    * Aliases to make the DX compatible with @ancestor-ui/core
    */

packages/css/src/AncestorCss_Config.res

@@ -15,10 +15,24 @@ module type ZIndex = {
 
 module type Colors = {
   type colors
-  let colors: colors => Css_AtomicTypes.Color.t
+  let colors: colors => AncestorCss_WrappedTypes.Color.t
 }
 
 module type Breakpoints = {
   type breakpoints
   let sizeByBreakpoints: breakpoints => int
 }
+
+module type Typography = {
+  type fontFamily
+  type fontSize
+  type fontWeight
+  type lineHeight
+  type letterSpacing
+
+  let fontFamily: fontFamily => AncestorCss_WrappedTypes.FontFamily.t
+  let fontSize: fontSize => Css_AtomicTypes.Length.t
+  let fontWeight: fontWeight => Css_AtomicTypes.FontWeight.t
+  let lineHeight: lineHeight => AncestorCss_WrappedTypes.LineHeight.t
+  let letterSpacing: letterSpacing => Css_AtomicTypes.Length.t
+}

packages/css/src/AncestorCss_Stories.res

@@ -1,13 +1,6 @@
 let default = Storybook.story(~title="Basic usage", ~excludeStories=["CustomCss"], ())
 module CustomCss = AncestorCss.Make(
-  {
-    type breakpoints = [#xs | #sm]
-    let sizeByBreakpoints = v =>
-      switch v {
-      | #xs => 0
-      | #sm => 470
-      }
-  },
+  AncestorCss.Defaults.Breakpoints,
   {
     type colors = [#primary | #secondary]
     let colors = (x: colors) =>
@@ -16,18 +9,10 @@ module CustomCss = AncestorCss.Make(
       | #secondary => #hex("363636")
       }
   },
-  {
-    type spacing = int
-    let spacing = v => #px(v * 8)
-  },
-  {
-    type radius = int
-    let radius = v => #px(v * 8)
-  },
-  {
-    type zIndex = int
-    let zIndex = v => v
-  },
+  AncestorCss.Defaults.Spacing,
+  AncestorCss.Defaults.Radius,
+  AncestorCss.Defaults.ZIndex,
+  AncestorCss.Defaults.Typography,
 )
 
 let overview = () => {

packages/css/src/AncestorCss_WrappedTypes.res

@@ -0,0 +1,70 @@
+module LineHeight = {
+  type t = [
+    | #ch(float)
+    | #em(float)
+    | #ex(float)
+    | #rem(float)
+    | #vh(float)
+    | #vw(float)
+    | #vmin(float)
+    | #vmax(float)
+    | #px(int)
+    | #pxFloat(float)
+    | #cm(float)
+    | #mm(float)
+    | #inch(float)
+    | #pc(float)
+    | #pt(int)
+    | #zero
+    | #calc([#add | #sub | #mult], Css_AtomicTypes.Length.t, Css_AtomicTypes.Length.t)
+    | #percent(float)
+    | #var(string)
+    | #varDefault(string, string)
+    | #normal
+    | #abs(float)
+    | #initial
+    | #inherit_
+    | #unset
+  ]
+
+  let toRule: t => CssJs.rule = CssJs.lineHeight
+}
+
+module FontFamily = {
+  type t = [
+    | #custom(string)
+    | #serif
+    | #sansSerif
+    | #cursive
+    | #fantasy
+    | #monospace
+    | #systemUi
+    | #emoji
+    | #math
+    | #fangsong
+    | #var(string)
+    | #varDefault(string, string)
+    | #initial
+    | #inherit_
+    | #unset
+  ]
+
+  let toRule: t => CssJs.rule = CssJs.fontFamily
+}
+
+module Color = {
+  open Css_AtomicTypes
+  type t = [
+    | #rgb(int, int, int)
+    | #rgba(int, int, int, [#num(float) | Percentage.t])
+    | #hsl(Angle.t, Percentage.t, Percentage.t)
+    | #hsla(Angle.t, Percentage.t, Percentage.t, [#num(float) | Percentage.t])
+    | #hex(string)
+    | #transparent
+    | #currentColor
+    | #var(string)
+    | #varDefault(string, string)
+  ]
+
+  let toRule: t => CssJs.rule = CssJs.color
+}