@@ -3,6 +3,7 @@ module Yoga.Block.Container.Style where
33import Yoga.Prelude.Style
44
55import Color as Color
6+import Data.String as String
67import Data.Symbol (class IsSymbol, reflectSymbol)
78import Effect.Uncurried (EffectFn2, runEffectFn2)
89import Foreign.Object (Object)
@@ -25,10 +26,10 @@ data DarkOrLightMode
2526derive instance eqDarkOrLightMode ∷ Eq DarkOrLightMode
2627
2728lightModeStyle ∷ Style
28−lightModeStyle = unsafeCoerce lightModeVariables
29+lightModeStyle = unsafeCoerce (lightModeVariables <> lightModeRGBVariables)
2930
3031darkModeStyle ∷ Style
31−darkModeStyle = unsafeCoerce darkModeVariables
32+darkModeStyle = unsafeCoerce (darkModeVariables <> darkModeRGBVariables)
3233
3334darkMode ∷ Style
3435darkMode = mkGlobal (Just DarkMode)
@@ -256,7 +257,7 @@ defaultColours =
256257 , highlightRotatedBackwards: highlight # rotateHue (-13.0) # darken 0.05
257258 , highlightRotatedForwards: highlight # rotateHue 3.0 # lighten 0.05 # saturate 0.1
258259 , highlightText
259− , highlightTextOnBackground: highlight # darken 0.1 # saturate 0.1
260+ , highlightTextOnBackground: highlight # rotateHue 3.0 # darken 0.15 # desaturate 0.1
260261 , inputBackground: lightBg
261262 , inputBorder: darken 0.07 >>> desaturate 0.2 $ lightBg
262263 , interfaceBackground
@@ -354,62 +355,36 @@ defaultColours =
354355 }
355356 where
356357 darkBg = Color.hsl 210.0 0.21 0.02
357−
358358 -- highlightBase = Color.hsla 275.0 0.82 0.4
359359 -- brightPurpleBase = Color.hsla 275.0 0.82 0.4
360360 -- highlightMurmurasBase = Color.hsla 220.0 0.60 0.5
361− highlightBase = Color.hsla 244.0 0.9 0.62
362−
361+ highlightBase = Color.hsla 252.0 0.9 0.62
363362 highlight = highlightBase 1.0
364−
365363 highlightDarkBase = Color.hsla 240.0 1.00 0.6
366−
367364 highlightDark = Color.hsla 240.0 1.00 0.63 1.0
368−
369365 highlightText = highlight # lighten 0.36 # saturate 0.4
370−
371366 interfaceBackground = lightBg
372−
373367 interfaceBackgroundDangerous = interfaceBackground
374−
375368 interfaceBackgroundDangerousDark = Color.hsl 340.0 0.55 0.30
376−
377369 interfaceBackgroundDark = lighten 0.14 >>> saturate 0.12 $ darkBg
378−
379370 interfaceDangerousText = invalid
380−
381371 interfaceDangerousTextDark = Color.hsl 340.0 1.0 0.90
382−
383372 invalidDark = Color.rgb 230 30 60
384−
385373 invalid = Color.rgb 173 0 69
386−
387374 invalidText = Color.white
388−
389375 invalidTextDark = successText
390−
391376 -- lightBg = Color.hsl 240.0 0.5 0.982
392377 -- lightBg = Color.hsl 230.0 0.5 0.982
393378 lightBg = Color.hsl 205.0 0.13 0.982
394−
395379 link = Color.hsl 320.0 1.0 0.33
396−
397380 linkDark = Color.hsl 265.0 1.0 0.83
398−
399381 required = Color.rgb 200 50 80
400−
401382 success = Color.rgb 10 150 25
402−
403383 successDark = Color.rgb 20 200 60
404−
405384 successText = Color.rgb 250 250 250
406−
407385 text = lightBg # darken 0.8
408−
409386 textDark = Color.rgb 204 212 220
410−
411387 boxShadowLight = Color.rgba 0 0 0 0.2
412−
413388 boxShadowDark = Color.rgba 0 0 0 0.6
414389
415390type FlatTheme a =
@@ -499,6 +474,11 @@ colour =
499474 hmap (\x → "var(" <> x <> ")")
500475 $ makeCSSVarLabels defaultColours.light
501476
477+colourWithAlpha ∷ FlatTheme (Number -> String)
478+colourWithAlpha =
479+ hmap (\x → \alpha -> "rgba(var(--rgb-" <> String.drop 2 x <> "), " <> show alpha <> ")")
480+ $ makeCSSVarLabels defaultColours.light
481+
502482col ∷ FlatTheme StyleProperty
503483col = colour # mapRecord str
504484
@@ -537,6 +517,32 @@ darkModeVariables =
537517 # Object.foldMap \k v →
538518 Object.singleton ("--" <> k) (str (Color.cssStringRGBA v))
539519
520+lightModeRGBVariables :: Object StyleProperty
521+lightModeRGBVariables =
522+ Object.fromHomogeneous defaultColours.light
523+ # Object.foldMap \k v →
524+ Object.singleton ("--rgb-" <> k) (str (rgb v))
525+ where
526+ rgb theCol = red <> ", " <> green <> ", " <> blue
527+ where
528+ c = toRGBA theCol
529+ red = show c.r
530+ green = show c.g
531+ blue = show c.b
532+
533+darkModeRGBVariables :: Object StyleProperty
534+darkModeRGBVariables =
535+ Object.fromHomogeneous defaultColours.dark
536+ # Object.foldMap \k v →
537+ Object.singleton ("--rgb-" <> k) (str (rgb v))
538+ where
539+ rgb theCol = red <> ", " <> green <> ", " <> blue
540+ where
541+ c = toRGBA theCol
542+ red = show c.r
543+ green = show c.g
544+ blue = show c.b
545+
540546variables ∷ Style
541547variables =
542548 css