feat(shadow): added support for shadow tokens

Author: vmarcosp

packages/css/.storybook/preview-head.html

@@ -16,6 +16,10 @@
   html {
     font-size: 10px;
   }
+
+  :root {
+    --cool-shadow: 1px 2px 0 0 #f36;
+  }
 </style>
 
 <link rel="preconnect" href="https://fonts.googleapis.com" />

packages/css/__tests__/AncestorCss_Custom.res

@@ -15,29 +15,9 @@ include 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
-  },
-  {
-    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
-  },
+  AncestorCss.Defaults.Spacing,
+  AncestorCss.Defaults.Radius,
+  AncestorCss.Defaults.ZIndex,
+  AncestorCss.Defaults.Typography,
+  AncestorCss.Defaults.Shadows,
 )

packages/css/src/AncestorCss.res

@@ -1,3 +1,6 @@
+/*
+ *  NOTE: AncestorCss defaults.
+ */
 module Defaults = {
   let identity = v => v
 
@@ -65,6 +68,21 @@ module Defaults = {
     include LineHeight
     include LetterSpacing
   }
+
+  module BoxShadows = {
+    type boxShadow = AncestorCss_WrappedTypes.BoxShadow.t
+    let boxShadow = identity
+  }
+
+  module TextShadows = {
+    type textShadow = AncestorCss_WrappedTypes.TextShadow.t
+    let textShadow = identity
+  }
+
+  module Shadows = {
+    include BoxShadows
+    include TextShadows
+  }
 }
 
 module Make = (
@@ -74,16 +92,10 @@ module Make = (
   CustomRadius: AncestorCss_Config.Radius,
   CustomZIndex: AncestorCss_Config.ZIndex,
   CustomTypography: AncestorCss_Config.Typography,
+  CustomShadows: AncestorCss_Config.Shadows,
 ) => {
   include CssJs
 
-  module TokenizedShadow = {
-    let box = (~x=?, ~y=?, ~blur=?, ~spread=?, ~inset=?, color) =>
-      CssJs.Shadow.box(~x?, ~y?, ~blur?, ~spread?, ~inset?, color)
-
-    let text = (~x=?, ~y=?, ~blur=?, color) => CssJs.Shadow.text(~x?, ~y?, ~blur?, color)
-  }
-
   let zIndex = x => Css_Js_Core.zIndex(x->CustomZIndex.zIndex)
   /*
    * Colors
@@ -190,6 +202,51 @@ module Make = (
   let lineHeight = x => x->CustomTypography.lineHeight->Css_Js_Core.lineHeight
   let letterSpacing = x => x->CustomTypography.letterSpacing->Css_Js_Core.letterSpacing
 
+  /*
+   * Shadows
+   */
+  module TokenizedShadow = {
+    let box = (~x=?, ~y=?, ~blur=?, ~spread=?, ~inset=?, color) =>
+      CssJs.Shadow.box(~x?, ~y?, ~blur?, ~spread?, ~inset?, color)
+
+    let text = (~x=?, ~y=?, ~blur=?, color) => CssJs.Shadow.text(~x?, ~y?, ~blur?, color)
+  }
+  let boxShadow = x => x->CustomShadows.boxShadow->CssJs.boxShadow
+  let textShadow = x => x->CustomShadows.textShadow->CssJs.textShadow
+  /*
+   *  HACK: Unfortunately we need to override these two fucntions
+   *  because we can't convert an array of tokens into an array of box-shadows.
+   */
+  let boxShadows = x => {
+    let value =
+      x
+      ->Js.Array2.map(CustomShadows.boxShadow)
+      ->Js.Array2.map(x =>
+        switch x {
+        | #...Css_Js_Core.Shadow.t as value => Css_Js_Core.Shadow.toString(value)
+        | #...Css_AtomicTypes.Var.t as value => Css_AtomicTypes.Var.toString(value)
+        }
+      )
+      ->Js.Array2.joinWith(", ")
+
+    CssJs.unsafe("boxShadow", value)
+  }
+
+  let textShadows = x => {
+    let value =
+      x
+      ->Js.Array2.map(CustomShadows.textShadow)
+      ->Js.Array2.map(x =>
+        switch x {
+        | #...Css_Js_Core.Shadow.t as value => Css_Js_Core.Shadow.toString(value)
+        | #...Css_AtomicTypes.Var.t as value => Css_AtomicTypes.Var.toString(value)
+        }
+      )
+      ->Js.Array2.joinWith(", ")
+
+    CssJs.unsafe("textShadow", value)
+  }
+
   /*
    * Aliases to make the DX compatible with @ancestor-ui/core
    */

packages/css/src/AncestorCss_Config.res

@@ -36,3 +36,11 @@ module type Typography = {
   let lineHeight: lineHeight => AncestorCss_WrappedTypes.LineHeight.t
   let letterSpacing: letterSpacing => Css_AtomicTypes.Length.t
 }
+
+module type Shadows = {
+  type textShadow
+  type boxShadow
+
+  let textShadow: textShadow => AncestorCss_WrappedTypes.TextShadow.t
+  let boxShadow: boxShadow => AncestorCss_WrappedTypes.BoxShadow.t
+}

packages/css/src/AncestorCss_Stories.res

@@ -13,6 +13,19 @@ module CustomCss = AncestorCss.Make(
   AncestorCss.Defaults.Radius,
   AncestorCss.Defaults.ZIndex,
   AncestorCss.Defaults.Typography,
+  {
+    include AncestorCss.Defaults.TextShadows
+    type boxShadow = [
+      | #simple
+      | #cool
+    ]
+
+    let boxShadow = x =>
+      switch x {
+      | #simple => CssJs.Shadow.box(~x=1->#px, ~y=2->#px, #hex("363636"))
+      | #cool => #var("--cool-shadow")
+      }
+  },
 )
 
 let overview = () => {
@@ -21,9 +34,12 @@ let overview = () => {
   let className = style(. [
     width(124->#px),
     height(124->#px),
+    boxShadow(#cool),
+    bgColor(#secondary),
     breakpoint(
       #sm,
       [
+        boxShadow(#simple),
         bgColor(#primary),
         padding(4),
         borderRadius(2),

packages/css/src/AncestorCss_WrappedTypes.res

@@ -68,3 +68,25 @@ module Color = {
 
   let toRule: t => CssJs.rule = CssJs.color
 }
+
+module BoxShadow = {
+  type t = [
+    | #none
+    | #shadow(CssJs.Shadow.value<CssJs.Shadow.box>)
+    | #var(string)
+    | #varDefault(string, string)
+  ]
+
+  let toRule: t => CssJs.rule = CssJs.boxShadow
+}
+
+module TextShadow = {
+  type t = [
+    | #none
+    | #shadow(CssJs.Shadow.value<CssJs.Shadow.text>)
+    | #var(string)
+    | #varDefault(string, string)
+  ]
+
+  let toRule: t => CssJs.rule = CssJs.textShadow
+}