@@ -31,113 +31,113 @@ mkGlobal ∷ Maybe DarkOrLightMode -> Style
3131mkGlobal maybeMode =
3232 css
3333 { "body, html":
34− nested
35− $ css
36− { minHeight: 100.0 # vh
37− , minWidth: 100.0 # vw
38− , lineHeight: str "1.15"
39− , "WebkitTextSizeAdjust": _100percent
40− , transition: str "background,color 0.33s ease-in"
41− }
34+ nested
35+ $ css
36+ { minHeight: 100.0 # vh
37+ , minWidth: 100.0 # vw
38+ , lineHeight: str "1.15"
39+ , "WebkitTextSizeAdjust": _100percent
40+ , transition: str "background,color 0.33s ease-in"
41+ }
4242 , ":root":
43− nested $ variables
44− <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }
43+ nested $ variables
44+ <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }
4545 , html:
46− nested
47− $ css
48− { boxSizing: str "border-box"
49− }
46+ nested
47+ $ css
48+ { boxSizing: str "border-box"
49+ }
5050 , body:
51− nested
52− $ css
53− { fontFamily: str "var(--main-font)"
54− , background: str colour.background
55− , color: str colour.text
56− , margin: str "0"
57− }
58− <> case maybeMode of
59− Nothing -> autoSwitchColourTheme
60− Just DarkMode -> darkModeStyle
61− Just LightMode -> lightModeStyle
51+ nested
52+ $ css
53+ { fontFamily: str "var(--main-font)"
54+ , background: str colour.background
55+ , color: str colour.text
56+ , margin: str "0"
57+ }
58+ <> case maybeMode of
59+ Nothing -> autoSwitchColourTheme
60+ Just DarkMode -> darkModeStyle
61+ Just LightMode -> lightModeStyle
6262 , "pre,code":
63− nest
64− { fontFamily: str "var(--mono-font)"
65− }
63+ nest
64+ { fontFamily: str "var(--mono-font)"
65+ }
6666 , "h1,h2,h3,h4":
67− nest
68− { lineHeight: var "--line-height-small"
69− , fontWeight: str "700"
70− , marginTop: str "var(--s-3)"
71− }
67+ nest
68+ { lineHeight: var "--line-height-small"
69+ , fontWeight: str "700"
70+ , marginTop: str "var(--s-3)"
71+ }
7272 , h1:
73− nested
74− $ css
75− { "--h1size": str "calc( min( var(--s2) + 2vw , var(--s4) ) )"
76− , fontSize: var "--h1size"
77− , letterSpacing: str "calc(var(--h1size) * -0.04)"
78− }
73+ nested
74+ $ css
75+ { "--h1size": str "calc( min( var(--s2) + 2vw , var(--s4) ) )"
76+ , fontSize: var "--h1size"
77+ , letterSpacing: str "calc(var(--h1size) * -0.04)"
78+ }
7979 , h2:
80− nested
81− $ css
82− { "--h2size": str "calc( min( var(--s1) + 2vw , var(--s3) ) )"
83− , fontSize: var "--h2size"
84− , letterSpacing: str "calc(var(--h2size) * -0.035)"
85− }
80+ nested
81+ $ css
82+ { "--h2size": str "calc( min( (var(--s1)*1.1) + 2vw , var(--s3) ) )"
83+ , fontSize: var "--h2size"
84+ , letterSpacing: str "calc(var(--h2size) * -0.035)"
85+ }
8686 , h3:
87− nested
88− $ css
89− { "--h3size": str "calc( min( var(--s0) + 2vw , var(--s2) ) )"
90− , fontSize: var "--h3size"
91− , letterSpacing: str "calc(var(--h3size) * -0.03)"
92− }
87+ nested
88+ $ css
89+ { "--h3size": str "calc( min( var(--s0) + 2vw , var(--s2) ) )"
90+ , fontSize: var "--h3size"
91+ , letterSpacing: str "calc(var(--h3size) * -0.03)"
92+ }
9393 , p:
94− nested
95− $ css
96− { "--psize": str "calc( min( var(--s-2) + 2.7vw , var(--s0)*1.1 ) )"
97− , fontSize: var "--psize"
98− , letterSpacing: str "calc(var(--psize) * -0.03)"
99− }
94+ nested
95+ $ css
96+ { "--psize": str "calc( min( (var(--s-1) * 1.7) + 0.7vw , var(--s0)*1.1 ) )"
97+ , fontSize: var "--psize"
98+ , letterSpacing: str "calc(var(--psize) * -0.03)"
99+ }
100100 , a:
101− nest
102− { color: str colour.text
103− , textDecorationColor: str colour.text
104− , "&:hover":
105− nest
106− { color: str colour.text
107− , textDecorationColor: str colour.highlight
108− }
109− , "&:visited":
110− nest
111− { color: str colour.text
112− , textDecorationColor: str colour.backgroundLayer1
113− }
114− }
101+ nest
102+ { color: str colour.text
103+ , textDecorationColor: str colour.text
104+ , "&:hover":
105+ nest
106+ { color: str colour.text
107+ , textDecorationColor: str colour.highlight
108+ }
109+ , "&:visited":
110+ nest
111+ { color: str colour.text
112+ , textDecorationColor: str colour.backgroundLayer1
113+ }
114+ }
115115 , "::selection":
116− nest
117− { color: str colour.highlightText
118− , background: str colour.highlight
119− }
116+ nest
117+ { color: str colour.highlightText
118+ , background: str colour.highlight
119+ }
120120 , "*, *:before, *:after":
121− nested
122− $ css
123− { boxSizing: str "inherit"
124− , "::selection":
125− nest
126− { color: str colour.highlightText
127− , background: str colour.highlight
128− }
129− , fontFeatureSettings:
130− str
131− $ intercalate ","
132− $ show
133− <$> [ "ss03" -- curved r
134− , "cv03" -- open six
135− , "cv04" -- open nine
136− -- , "cv05" -- lower case l with tail
137− , "cv07" -- German double-s
138− , "cv09" -- Flat top three
139− ]
140− }
121+ nested
122+ $ css
123+ { boxSizing: str "inherit"
124+ , "::selection":
125+ nest
126+ { color: str colour.highlightText
127+ , background: str colour.highlight
128+ }
129+ , fontFeatureSettings:
130+ str
131+ $ intercalate ","
132+ $ show
133+ <$> [ "ss03" -- curved r
134+ , "cv03" -- open six
135+ , "cv04" -- open nine
136+ -- , "cv05" -- lower case l with tail
137+ , "cv07" -- German double-s
138+ , "cv09" -- Flat top three
139+ ]
140+ }
141141 }
142142
143143withAlpha ∷ Number -> Color -> Color
@@ -148,74 +148,74 @@ withAlpha alpha c1 = Color.rgba' r g b alpha
148148defaultColours ∷ Colours
149149defaultColours =
150150 { light:
151− { background: lightBg
152− , backgroundLayer1: darken 0.20 >>> saturate 0.04 $ lightBg
153− , backgroundLayer2: darken 0.15 >>> saturate 0.07 $ lightBg
154− , backgroundLayer3: darken 0.10 >>> saturate 0.09 $ lightBg
155− , backgroundLayer4: darken 0.05 >>> saturate 0.12 $ lightBg
156− , backgroundLayer5: lightBg
157− , backgroundInverted: darken 0.85 lightBg
158− , textInverted: lightBg
159− , success
160− , successText
161− , invalid
162− , invalidText
163− , required
164− , interfaceBackground
165− , interfaceBackgroundDangerous
166− , interfaceDangerousText
167− , interfaceBackgroundDisabled: darken 0.03 lightBg
168− , interfaceTextDisabled: darken 0.30 lightBg
169− , interfaceBackgroundHighlight: lighten 0.05 lightBg
170− , highlightDisabled: (desaturate 0.80 >>> lighten 0.28) highlight
171− , interfaceBackgroundShadow: darken 0.04 lightBg
172− , inputBackground: lightBg
173− , inputBorder: darken 0.1 lightBg
174− , highlight
175− , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)
176− , highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)
177− , highlightRotatedForwards: highlight # rotateHue 30.0
178− , highlightRotatedBackwards: highlight # rotateHue (-30.0)
179− , highlightText
180− , text: textLightTheme
181− , placeholderText: lighten 0.4 darkBg
182− }
151+ { background: lightBg
152+ , backgroundLayer1: darken 0.12 >>> rotateHue (0.0) >>> saturate 0.01 $ lightBg
153+ , backgroundLayer2: darken 0.09 >>> rotateHue (0.0) >>> saturate 0.02 $ lightBg
154+ , backgroundLayer3: darken 0.06 >>> rotateHue (0.0) >>> saturate 0.03 $ lightBg
155+ , backgroundLayer4: darken 0.03 >>> rotateHue (0.0) >>> saturate 0.04 $ lightBg
156+ , backgroundLayer5: lightBg
157+ , backgroundInverted: darken 0.85 lightBg
158+ , textInverted: lightBg
159+ , success
160+ , successText
161+ , invalid
162+ , invalidText
163+ , required
164+ , interfaceBackground
165+ , interfaceBackgroundDangerous
166+ , interfaceDangerousText
167+ , interfaceBackgroundDisabled: darken 0.03 lightBg
168+ , interfaceTextDisabled: darken 0.30 lightBg
169+ , interfaceBackgroundHighlight: lighten 0.05 lightBg
170+ , highlightDisabled: (desaturate 0.80 >>> lighten 0.28) highlight
171+ , interfaceBackgroundShadow: darken 0.04 lightBg
172+ , inputBackground: lightBg
173+ , inputBorder: darken 0.1 lightBg
174+ , highlight
175+ , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)
176+ , highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)
177+ , highlightRotatedForwards: highlight # rotateHue 30.0
178+ , highlightRotatedBackwards: highlight # rotateHue (-30.0)
179+ , highlightText
180+ , text: textLightTheme
181+ , placeholderText: lighten 0.4 darkBg
182+ }
183183 , dark:
184− { background: darkBg
185− , backgroundLayer1: lighten 0.30 >>> saturate 0.07 $ darkBg
186− , backgroundLayer2: lighten 0.21 >>> saturate 0.08 $ darkBg
187− , backgroundLayer3: lighten 0.14 >>> saturate 0.12 $ darkBg
188− , backgroundLayer4: lighten 0.07 >>> saturate 0.18 $ darkBg
189− , backgroundLayer5: darkBg
190− , textInverted: darkBg
191− , backgroundInverted: lightBg
192− , interfaceBackground: interfaceBackgroundDark
193− , interfaceBackgroundDangerous: interfaceBackgroundDangerousDark
194− , interfaceDangerousText: interfaceDangerousTextDark
195− , interfaceBackgroundDisabled: darken 0.3 interfaceBackgroundDark
196− , interfaceTextDisabled: (desaturate 0.3 >>> lighten 0.25) interfaceBackgroundDark
197− , interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark
198− , interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark
199− , inputBackground: darkBg
200− , inputBorder: lighten 0.17 darkBg
201− , success: successDark
202− , successText
203− , required
204− , invalid
205− , invalidText
206− , highlight: highlightDark
207− , highlightDisabled: (desaturate 0.76 >>> darken 0.32) highlightDark
208− , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)
209− , highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)
210− , highlightRotatedForwards: highlightDark # rotateHue 30.0
211− , highlightRotatedBackwards: highlightDark # rotateHue (-30.0)
212− , highlightText
213− , text: lightBg
214− , placeholderText: darken 0.4 lightBg
215− }
184+ { background: darkBg
185+ , backgroundLayer5: lighten 0.30 >>> saturate 0.07 $ darkBg
186+ , backgroundLayer4: lighten 0.21 >>> saturate 0.08 $ darkBg
187+ , backgroundLayer3: lighten 0.14 >>> saturate 0.12 $ darkBg
188+ , backgroundLayer2: lighten 0.07 >>> saturate 0.18 $ darkBg
189+ , backgroundLayer1: darkBg
190+ , textInverted: darkBg
191+ , backgroundInverted: lightBg
192+ , interfaceBackground: interfaceBackgroundDark
193+ , interfaceBackgroundDangerous: interfaceBackgroundDangerousDark
194+ , interfaceDangerousText: interfaceDangerousTextDark
195+ , interfaceBackgroundDisabled: darken 0.3 interfaceBackgroundDark
196+ , interfaceTextDisabled: (desaturate 0.3 >>> lighten 0.25) interfaceBackgroundDark
197+ , interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark
198+ , interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark
199+ , inputBackground: darkBg
200+ , inputBorder: lighten 0.17 darkBg
201+ , success: successDark
202+ , successText
203+ , required
204+ , invalid
205+ , invalidText
206+ , highlight: highlightDark
207+ , highlightDisabled: (desaturate 0.76 >>> darken 0.32) highlightDark
208+ , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)
209+ , highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)
210+ , highlightRotatedForwards: highlightDark # rotateHue 30.0
211+ , highlightRotatedBackwards: highlightDark # rotateHue (-30.0)
212+ , highlightText
213+ , text: lightBg
214+ , placeholderText: darken 0.4 lightBg
215+ }
216216 }
217217 where
218− highlight = Color.hsl 270.0 0.90 0.62
218+ highlight = Color.hsl 320.0 0.62 0.49
219219
220220 highlightDark = Color.rgb 0x88 0x33 0xFF
221221
@@ -247,48 +247,48 @@ defaultColours =
247247
248248 textLightTheme = Color.rgb 16 16 32
249249
250− darkBg = Color.hsl 240.0 0.07 0.14
251−
252− lightBg = Color.hsl 240.0 0.05 0.97
253−
254−type FlatTheme a
255− = { background ∷ a
256− , backgroundLayer1 ∷ a
257− , backgroundLayer2 ∷ a
258− , backgroundLayer3 ∷ a
259− , backgroundLayer4 ∷ a
260− , backgroundLayer5 ∷ a
261− , backgroundInverted ∷ a
262− , interfaceBackground ∷ a
263− , interfaceBackgroundDangerous ∷ a
264− , interfaceDangerousText ∷ a
265− , interfaceBackgroundDisabled ∷ a
266− , interfaceTextDisabled ∷ a
267− , interfaceBackgroundHighlight ∷ a
268− , interfaceBackgroundShadow ∷ a
269− , inputBackground ∷ a
270− , inputBorder ∷ a
271− , highlight ∷ a
272− , highlightRotatedBackwards ∷ a
273− , highlightRotatedForwards ∷ a
274− , highlightDarker ∷ a
275− , highlightLighter ∷ a
276− , highlightDisabled ∷ a
277− , highlightText ∷ a
278− , success ∷ a
279− , successText ∷ a
280− , invalid ∷ a
281− , invalidText ∷ a
282− , required ∷ a
283− , text ∷ a
284− , textInverted ∷ a
285− , placeholderText ∷ a
286− }
250+ darkBg = Color.hsl 240.0 0.07 0.10
251+
252+ lightBg = Color.hsl 5.0 0.27 0.99
253+
254+type FlatTheme a =
255+ { background ∷ a
256+ , backgroundLayer1 ∷ a
257+ , backgroundLayer2 ∷ a
258+ , backgroundLayer3 ∷ a
259+ , backgroundLayer4 ∷ a
260+ , backgroundLayer5 ∷ a
261+ , backgroundInverted ∷ a
262+ , interfaceBackground ∷ a
263+ , interfaceBackgroundDangerous ∷ a
264+ , interfaceDangerousText ∷ a
265+ , interfaceBackgroundDisabled ∷ a
266+ , interfaceTextDisabled ∷ a
267+ , interfaceBackgroundHighlight ∷ a
268+ , interfaceBackgroundShadow ∷ a
269+ , inputBackground ∷ a
270+ , inputBorder ∷ a
271+ , highlight ∷ a
272+ , highlightRotatedBackwards ∷ a
273+ , highlightRotatedForwards ∷ a
274+ , highlightDarker ∷ a
275+ , highlightLighter ∷ a
276+ , highlightDisabled ∷ a
277+ , highlightText ∷ a
278+ , success ∷ a
279+ , successText ∷ a
280+ , invalid ∷ a
281+ , invalidText ∷ a
282+ , required ∷ a
283+ , text ∷ a
284+ , textInverted ∷ a
285+ , placeholderText ∷ a
286+ }
287287
288−type Colours
289− = { dark ∷ FlatTheme Color
290− , light ∷ FlatTheme Color
291− }
288+type Colours =
289+ { dark ∷ FlatTheme Color
290+ , light ∷ FlatTheme Color
291+ }
292292
293293data MakeCSSVarLabels
294294 = MakeCSSVarLabels