Skip to content
This repository was archived by the owner on Jan 27, 2024. It is now read-only.

Commit 23d6c8c

Browse files
committed
feat(typography): added typography tokens and improved the tokenization api
1 parent 28c39d8 commit 23d6c8c

File tree

5 files changed

+182
-21
lines changed

5 files changed

+182
-21
lines changed

packages/css/__tests__/AncestorCss_Custom.res

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,17 @@ include AncestorCss.Make(
2727
type zIndex = int
2828
let zIndex = v => v
2929
},
30+
{
31+
type fontFamily = AncestorCss_WrappedTypes.FontFamily.t
32+
type fontSize = Css_AtomicTypes.Length.t
33+
type fontWeight = Css_AtomicTypes.FontWeight.t
34+
type lineHeight = AncestorCss_WrappedTypes.LineHeight.t
35+
type letterSpacing = Css_AtomicTypes.Length.t
36+
37+
let fontFamily = v => v
38+
let fontSize = v => v
39+
let fontWeight = v => v
40+
let lineHeight = v => v
41+
let letterSpacing = v => v
42+
},
3043
)

packages/css/src/AncestorCss.res

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,79 @@
1+
module Defaults = {
2+
let identity = v => v
3+
4+
module Breakpoints = {
5+
type breakpoints = [#xs | #sm | #md | #lg | #xl]
6+
let sizeByBreakpoints = breakpoint =>
7+
switch breakpoint {
8+
| #xs => 0
9+
| #sm => 475
10+
| #md => 920
11+
| #lg => 1280
12+
| #xl => 1920
13+
}
14+
}
15+
16+
module Colors = {
17+
type colors = AncestorCss_WrappedTypes.Color.t
18+
let colors = identity
19+
}
20+
21+
module Spacing = {
22+
type spacing = int
23+
let spacing = v => #px(v * 8)
24+
}
25+
26+
module Radius = {
27+
type radius = int
28+
let radius = v => #px(v * 8)
29+
}
30+
31+
module ZIndex = {
32+
type zIndex = int
33+
let zIndex = identity
34+
}
35+
36+
module FontSize = {
37+
type fontSize = Css_AtomicTypes.Length.t
38+
let fontSize = identity
39+
}
40+
41+
module FontFamily = {
42+
type fontFamily = AncestorCss_WrappedTypes.FontFamily.t
43+
let fontFamily = identity
44+
}
45+
46+
module FontWeight = {
47+
type fontWeight = Css_AtomicTypes.FontWeight.t
48+
let fontWeight = identity
49+
}
50+
51+
module LineHeight = {
52+
type lineHeight = AncestorCss_WrappedTypes.LineHeight.t
53+
let lineHeight = identity
54+
}
55+
56+
module LetterSpacing = {
57+
type letterSpacing = Css_AtomicTypes.Length.t
58+
let letterSpacing = identity
59+
}
60+
61+
module Typography: AncestorCss_Config.Typography = {
62+
include FontSize
63+
include FontFamily
64+
include FontWeight
65+
include LineHeight
66+
include LetterSpacing
67+
}
68+
}
69+
170
module Make = (
271
Breakpoints: AncestorCss_Config.Breakpoints,
372
CustomColors: AncestorCss_Config.Colors,
473
CustomSpacing: AncestorCss_Config.Spacing,
574
CustomRadius: AncestorCss_Config.Radius,
675
CustomZIndex: AncestorCss_Config.ZIndex,
76+
CustomTypography: AncestorCss_Config.Typography,
777
) => {
878
include CssJs
979

@@ -111,6 +181,15 @@ module Make = (
111181
styles,
112182
)
113183

184+
/*
185+
* Typography
186+
*/
187+
let fontFamily = x => x->CustomTypography.fontFamily->Css_Js_Core.fontFamily
188+
let fontSize = x => x->CustomTypography.fontSize->Css_Js_Core.fontSize
189+
let fontWeight = x => x->CustomTypography.fontWeight->Css_Js_Core.fontWeight
190+
let lineHeight = x => x->CustomTypography.lineHeight->Css_Js_Core.lineHeight
191+
let letterSpacing = x => x->CustomTypography.letterSpacing->Css_Js_Core.letterSpacing
192+
114193
/*
115194
* Aliases to make the DX compatible with @ancestor-ui/core
116195
*/

packages/css/src/AncestorCss_Config.res

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,24 @@ module type ZIndex = {
1515

1616
module type Colors = {
1717
type colors
18-
let colors: colors => Css_AtomicTypes.Color.t
18+
let colors: colors => AncestorCss_WrappedTypes.Color.t
1919
}
2020

2121
module type Breakpoints = {
2222
type breakpoints
2323
let sizeByBreakpoints: breakpoints => int
2424
}
25+
26+
module type Typography = {
27+
type fontFamily
28+
type fontSize
29+
type fontWeight
30+
type lineHeight
31+
type letterSpacing
32+
33+
let fontFamily: fontFamily => AncestorCss_WrappedTypes.FontFamily.t
34+
let fontSize: fontSize => Css_AtomicTypes.Length.t
35+
let fontWeight: fontWeight => Css_AtomicTypes.FontWeight.t
36+
let lineHeight: lineHeight => AncestorCss_WrappedTypes.LineHeight.t
37+
let letterSpacing: letterSpacing => Css_AtomicTypes.Length.t
38+
}

packages/css/src/AncestorCss_Stories.res

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
let default = Storybook.story(~title="Basic usage", ~excludeStories=["CustomCss"], ())
22
module CustomCss = AncestorCss.Make(
3-
{
4-
type breakpoints = [#xs | #sm]
5-
let sizeByBreakpoints = v =>
6-
switch v {
7-
| #xs => 0
8-
| #sm => 470
9-
}
10-
},
3+
AncestorCss.Defaults.Breakpoints,
114
{
125
type colors = [#primary | #secondary]
136
let colors = (x: colors) =>
@@ -16,18 +9,10 @@ module CustomCss = AncestorCss.Make(
169
| #secondary => #hex("363636")
1710
}
1811
},
19-
{
20-
type spacing = int
21-
let spacing = v => #px(v * 8)
22-
},
23-
{
24-
type radius = int
25-
let radius = v => #px(v * 8)
26-
},
27-
{
28-
type zIndex = int
29-
let zIndex = v => v
30-
},
12+
AncestorCss.Defaults.Spacing,
13+
AncestorCss.Defaults.Radius,
14+
AncestorCss.Defaults.ZIndex,
15+
AncestorCss.Defaults.Typography,
3116
)
3217

3318
let overview = () => {
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
module LineHeight = {
2+
type t = [
3+
| #ch(float)
4+
| #em(float)
5+
| #ex(float)
6+
| #rem(float)
7+
| #vh(float)
8+
| #vw(float)
9+
| #vmin(float)
10+
| #vmax(float)
11+
| #px(int)
12+
| #pxFloat(float)
13+
| #cm(float)
14+
| #mm(float)
15+
| #inch(float)
16+
| #pc(float)
17+
| #pt(int)
18+
| #zero
19+
| #calc([#add | #sub | #mult], Css_AtomicTypes.Length.t, Css_AtomicTypes.Length.t)
20+
| #percent(float)
21+
| #var(string)
22+
| #varDefault(string, string)
23+
| #normal
24+
| #abs(float)
25+
| #initial
26+
| #inherit_
27+
| #unset
28+
]
29+
30+
let toRule: t => CssJs.rule = CssJs.lineHeight
31+
}
32+
33+
module FontFamily = {
34+
type t = [
35+
| #custom(string)
36+
| #serif
37+
| #sansSerif
38+
| #cursive
39+
| #fantasy
40+
| #monospace
41+
| #systemUi
42+
| #emoji
43+
| #math
44+
| #fangsong
45+
| #var(string)
46+
| #varDefault(string, string)
47+
| #initial
48+
| #inherit_
49+
| #unset
50+
]
51+
52+
let toRule: t => CssJs.rule = CssJs.fontFamily
53+
}
54+
55+
module Color = {
56+
open Css_AtomicTypes
57+
type t = [
58+
| #rgb(int, int, int)
59+
| #rgba(int, int, int, [#num(float) | Percentage.t])
60+
| #hsl(Angle.t, Percentage.t, Percentage.t)
61+
| #hsla(Angle.t, Percentage.t, Percentage.t, [#num(float) | Percentage.t])
62+
| #hex(string)
63+
| #transparent
64+
| #currentColor
65+
| #var(string)
66+
| #varDefault(string, string)
67+
]
68+
69+
let toRule: t => CssJs.rule = CssJs.color
70+
}

0 commit comments

Comments
 (0)