git.iko.soy/rowtype-yoga/psfp
on 982389d help sign in
rowtype-yoga/psfp/components/src/Yoga/Theme.purs
142 lines 5.7 kB history raw
1module Yoga.Theme where
3import Prelude
4import CSS (CSSVariable, Size, contrast, darken, desaturate, isLight, lighten, reference, rotateHue, unitless, variable, (!*))
5import CSS.Size (Calc, (!/))
6import Color (Color)
7import Color as Color
8import Data.Maybe (fromMaybe)
9import Data.Symbol (SProxy(..))
10import Record.Builder as RB
11import Yoga.Theme.Types (Theme, CSSTheme)
13increaseContrast ∷ Color -> Color -> Color
14increaseContrast contrastWith = go 0
15 where
16 modify = if isLight contrastWith then darken else lighten
17 go i col =
18 if contrast contrastWith col >= 7.5 || i >= 20 then
19 col
20 else
21 go (i + 1) (modify 0.1 col)
23withAlpha ∷ Number -> Color -> Color
24withAlpha alpha c1 = Color.rgba' r g b alpha
25 where
26 { r, g, b } = Color.toRGBA' c1
28unsafeWithAlpha ∷ Number -> String -> String
29unsafeWithAlpha alpha s1 =
30 fromMaybe "yellow" do
31 c1 <- Color.fromHexString s1
32 let
33 { r, g, b } = Color.toRGBA' c1
34 pure $ Color.cssStringRGBA (Color.rgba' r g b alpha)
36unsafeAlaColor ∷ (Color -> Color) -> String -> String
37unsafeAlaColor fn s1 =
38 fromMaybe "hotpink" do
39 c1 <- Color.fromHexString s1
40 pure $ Color.toHexString (fn c1)
42f ∷ ∀ fieldName. SProxy fieldName
43f = SProxy
45fromTheme ∷ Theme -> CSSTheme
46fromTheme theme =
47 RB.build
48 ( {- background -} RB.insert (f ∷ _ "backgroundColourLighter")
49 (theme.backgroundColour # lighter)
50 >>> RB.insert (f ∷ _ "backgroundColourLightest")
51 (theme.backgroundColour # lighter # lighter)
52 >>> RB.insert (f ∷ _ "backgroundColourDarker")
53 (theme.backgroundColour # darker)
54 >>> RB.insert (f ∷ _ "backgroundColourDarkest")
55 (theme.backgroundColour # darker # darker)
56 >>> RB.insert (f ∷ _ "interfaceColourLighter")
57 (theme.interfaceColour # lighter)
58 >>> RB.insert (f ∷ _ "interfaceColourLightest")
59 (theme.interfaceColour # lighter >>> lighter)
60 >>> RB.insert (f ∷ _ "interfaceColourDarker")
61 (theme.interfaceColour # darker)
62 >>> RB.insert (f ∷ _ "interfaceColourDarkest")
63 (theme.interfaceColour # darker >>> darker)
64 -- foreground
66 >>> RB.insert (f ∷ _ "textColourLighter")
67 (theme.textColour # lighter)
68 >>> RB.insert (f ∷ _ "textColourLightest")
69 (theme.textColour # lighter >>> lighter)
70 >>> RB.insert (f ∷ _ "textColourDarker")
71 (theme.textColour # darker)
72 >>> RB.insert (f ∷ _ "textColourDarkest")
73 (theme.textColour # darker >>> darker)
74 -- highlight
76 >>> RB.insert (f ∷ _ "highlightColourDark")
77 (theme.highlightColour # darken 0.2 # desaturate 0.35)
78 >>> RB.insert (f ∷ _ "highlightColourRotatedForwards")
79 (theme.highlightColour # rotateHue (20.0))
80 >>> RB.insert (f ∷ _ "highlightColourRotatedBackwards")
81 (theme.highlightColour # rotateHue (-20.0))
82 -- altHighlight
84 >>> RB.insert (f ∷ _ "altHighlightColourDark")
85 (theme.altHighlightColour # darken 0.2)
86 -- fonts
88 -- >>> RB.modify (f ∷ _ "textFontFamily") (intercalate ",")
90 -- >>> RB.modify (f ∷ _ "headingFontFamily") (intercalate ",")
92 -- >>> RB.modify (f ∷ _ "codeFontFamily") (intercalate ",")
94 >>> RB.insert (f ∷ _ "isLight") isLightTheme
95 -- variables
97 >>> RB.insert (f ∷ _ "fontWeightBold") "300"
98 >>> RB.insert (f ∷ _ "ratioVar") (ratio)
99 >>> RB.insert (f ∷ _ "s0Var") (s0)
100 >>> RB.modify (f ∷ _ "s0") (const $ reference s0)
101 >>> RB.modify (f ∷ _ "ratio") (const $ reference ratio)
102 >>> RB.insert (f ∷ _ "s1Var") s1
103 >>> RB.insert (f ∷ _ "s2Var") s2
104 >>> RB.insert (f ∷ _ "s3Var") s3
105 >>> RB.insert (f ∷ _ "s4Var") s4
106 >>> RB.insert (f ∷ _ "s5Var") s5
107 >>> RB.insert (f ∷ _ "s_1Var") s_1
108 >>> RB.insert (f ∷ _ "s_2Var") s_2
109 >>> RB.insert (f ∷ _ "s_3Var") s_3
110 >>> RB.insert (f ∷ _ "s_4Var") s_4
111 >>> RB.insert (f ∷ _ "s_5Var") s_5
112 >>> RB.insert (f ∷ _ "s1") (reference s1)
113 >>> RB.insert (f ∷ _ "s2") (reference s2)
114 >>> RB.insert (f ∷ _ "s3") (reference s3)
115 >>> RB.insert (f ∷ _ "s4") (reference s4)
116 >>> RB.insert (f ∷ _ "s5") (reference s5)
117 >>> RB.insert (f ∷ _ "s_1") (reference s_1)
118 >>> RB.insert (f ∷ _ "s_2") (reference s_2)
119 >>> RB.insert (f ∷ _ "s_3") (reference s_3)
120 >>> RB.insert (f ∷ _ "s_4") (reference s_4)
121 >>> RB.insert (f ∷ _ "s_5") (reference s_5)
122 )
123 theme
124 where
125 ratio ∷ CSSVariable (Size Calc)
126 ratio = variable "ratio" (unitless theme.ratio !* unitless 1.0)
127 s5 = variable "s5" (reference s4 !* reference ratio)
128 s4 = variable "s4" (reference s3 !* reference ratio)
129 s3 = variable "s3" (reference s2 !* reference ratio)
130 s2 = variable "s2" (reference s1 !* reference ratio)
131 s1 = variable "s1" (reference s0 !* reference ratio)
132 s0 = variable "s0" (theme.s0)
133 s_1 = variable "s-1" (reference s0 !/ reference ratio)
134 s_2 = variable "s-2" (reference s_1 !/ reference ratio)
135 s_3 = variable "s-3" (reference s_2 !/ reference ratio)
136 s_4 = variable "s-4" (reference s_3 !/ reference ratio)
137 s_5 = variable "s-5" (reference s_4 !/ reference ratio)
138 isLightTheme = isLight theme.backgroundColour
139 lighter ∷ Color -> Color
140 lighter = if isLightTheme then lighten 0.04 else lighten 0.02
141 darker ∷ Color -> Color
142 darker = if isLightTheme then darken 0.01 else darken 0.01