git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
Changes to the code
commit8e1d09855d96ea727c6a1e687d1498b11e18c739 authorMark Eibes <mark.eibes@gmail.com> dateMon 25 Jul 2022, 10:33 (4 years ago) parentac97ca3
33 files changed+769−521
src/Yoga/Block.purs+7−2 src/Yoga/Block/Atom/Button/Style.purs+89−89 src/Yoga/Block/Atom/Checkbox/Style.purs+12−12 src/Yoga/Block/Atom/CodeInput/Style.purs+14−16 src/Yoga/Block/Atom/Icon/Style.purs+18−18 src/Yoga/Block/Atom/Image.purs+5 src/Yoga/Block/Atom/Image/FFI.js+4 src/Yoga/Block/Atom/Image/FFI.purs+8 src/Yoga/Block/Atom/Image/Style.purs+12 src/Yoga/Block/Atom/Image/Types.purs+96 src/Yoga/Block/Atom/Image/View.purs+63 src/Yoga/Block/Atom/Input/Style.purs+85−99 src/Yoga/Block/Atom/Range/Style.purs+6−6 src/Yoga/Block/Atom/Segmented/Style.purs+56−60 src/Yoga/Block/Atom/Segmented/View.purs+1−1 src/Yoga/Block/Atom/Toggle/Style.purs+34−34 src/Yoga/Block/Container/Style.purs+25−6 src/Yoga/Block/Hook/Key.purs+36−3 src/Yoga/Block/Hook/UseKeyDown.purs+11−5 src/Yoga/Block/Hook/UseKeyUp.purs+11−5 src/Yoga/Block/Layout/Centre/Style.purs+20−18 src/Yoga/Block/Layout/Cluster/Style.purs+11−10 src/Yoga/Block/Layout/Cover/Style.purs+15−16 src/Yoga/Block/Layout/Sidebar/Style.purs+7−6 src/Yoga/Block/Layout/Stack/Style.purs+22−22 src/Yoga/Block/Layout/Switcher/Style.purs+21−19 src/Yoga/Block/Molecule/Modal/View.purs+16−13 src/Yoga/Block/Molecule/ReadMore/Style.purs+23−20 src/Yoga/Block/Molecule/Sheet/View.purs+1−1 src/Yoga/Block/Molecule/TableOfContents/Style.purs+31−31 src/Yoga/Block/Quark/Skeleton/Style.purs+2−4 src/Yoga/Prelude/Default.purs+1−1 src/Yoga/Prelude/Style.purs+6−4
src/Yoga/Block.purs+7−2
@@ -2,9 +2,11 @@ module Yoga.Block where
22
33import Prim.Row (class Lacks, class Union)
44import React.Basic (JSX, ReactComponent)
5−import Yoga (el, leaf)
5+import React.Basic as React
6+import Yoga (el)
67import Yoga.Block.Atom.Button as Button
78import Yoga.Block.Atom.Icon as Icon
9+import Yoga.Block.Atom.Image as Image
810import Yoga.Block.Atom.Input as Input
911import Yoga.Block.Atom.Range as Range
1012import Yoga.Block.Atom.Segmented as Segmented
@@ -85,6 +87,9 @@ icon = Icon.component
8587input ∷ ∀ p q. Union p q Input.Props ⇒ ReactComponent { | p }
8688input = Input.component
8789
90+image :: forall p q. Union p q Image.Props => { | p } -> JSX
91+image = React.element Image.component
92+
8893imposter ∷ ∀ p q. Union p q Imposter.Props ⇒ ReactComponent { | p }
8994imposter = Imposter.component
9095
@@ -98,7 +103,7 @@ segmented' ∷ ReactComponent Segmented.Props
98103segmented' = Segmented.component
99104
100105segmented ∷ Segmented.Props → JSX
101−segmented = leaf Segmented.component
106+segmented = React.element Segmented.component
102107
103108sidebar' ∷ ∀ p q. Union p q Sidebar.Props ⇒ ReactComponent { sidebar ∷ JSX, children ∷ Array JSX | p }
104109sidebar' = Sidebar.component
src/Yoga/Block/Atom/Button/Style.purs+89−89
@@ -37,92 +37,92 @@ backgroundAnimation =
3737
3838button ∷ Style
3939button =
40− css
41− { background: str colour.backgroundLayer5
42− , borderWidth: int 0
43− , position: relative
44− , overflow: hidden
45− , boxShadow: str "0 1px 4px rgba(100,100,120,0.3), 0 1px 2px rgba(100,100,100,0.2)"
46− , display: inlineFlex
47− , padding: str "calc(var(--s-1) * 0.8) var(--s0)"
48− , paddingBottom: str "calc(var(--s-1) * 0.8 + 1px)"
49− , justifyContent: center
50− , alignItems: center
51− , borderRadius: var "--s-1"
52− , color: str colour.text
53− , touchAction: manipulation
54− , boxSizing: borderBox
55− , fontSize: str size.text.interactive
56− , fontFamily: var "--mainFont"
57− , fontWeight: str "500"
58− , letterSpacing: str "calc(var(--s-5)* (-0.1))"
59− , userSelect: none
60− , transition: str "all 0.2s ease-out" <> str "transform 50ms ease-in"
61− , "& > .ry-drip": nested (zIndex 0)
62− , "& > :not(.ry-drip)": nested (zIndex 1)
63− , """&[data-button-shape="flat"]""":
64− nested $ hover (background' col.highlightAlpha10) <> css
65− { background: str "transparent"
66− , boxShadow: none
67− , color: str colour.highlightTextOnBackground
68− , "&:active":
69− nest
70− { boxShadow: none
71− }
72− , """&[data-button-type="primary"]""":
73− nest
74− { background: str colour.highlight
75− , boxShadow: none
76− }
77− }
78− , """&[data-button-shape="pill"]""":
79− nest
80− { borderRadius: str "calc(var(--s1) * 0.85)"
81− , padding: str "calc(var(--s-1) * 0.85) var(--s0)"
82− , paddingBottom: str "calc(var(--s-1))"
83− }
84− , """&[data-button-type="primary"]""":
85− nest
86− { background: gradientBackground
87− , backgroundSize: str "200% 200%"
88− , fontWeight: str "500"
89− , letterSpacing: str "calc(var(--s-5)* (0.1))"
90− , animation: backgroundAnimation <> str " alternate ease-out 10s infinite"
91− , boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"
92− , borderColor: str "transparent"
93− , color: str colour.highlightText
94− , "&:focus-visible":
95− nest
96− { borderColor: col.background
97− }
98− , "&:active":
99− nest
100− { boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"
101− }
102− }
103− , """&[data-button-type="dangerous"]""":
104− nest
105− { color: str $ colour.interfaceDangerousText
106− , background: str $ colour.interfaceBackgroundDangerous
107− , fontWeight: str "500"
108− , letterSpacing: str "calc(var(--s-5) * -0.10)"
109− }
110− , "&:focus": nest { outline: none }
111− , "&:focus-visible":
112− nest
113− { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
114− }
115− , "&:active":
116− nest
117− { boxShadow: str $ "inset 0 1px calc(var(--s0) * var(--dark-mode) + var(--s-2) * var(--light-mode)) rgba(0,0,0, calc(0.18 * var(--dark-mode) + 0.09 * var(--light-mode)))"
118− , transform: str "scale3d(0.96,0.96,0.36)"
119− , transition: str "transform 100ms ease"
120− }
121− , "&:disabled, &:disabled:active":
122− nest
123− { color: str colour.interfaceTextDisabled
124− , boxShadow: none
125− , background: str colour.interfaceBackgroundDisabled
126− , transform: str "none"
127− }
128− }
40+ inlineFlex <>
41+ css
42+ { background: str colour.backgroundLayer5
43+ , borderWidth: int 0
44+ , position: relative
45+ , overflow: hidden
46+ , boxShadow: str "0 1px 4px rgba(100,100,120,0.3), 0 1px 2px rgba(100,100,100,0.2)"
47+ , padding: str "calc(var(--s-1) * 0.8) var(--s0)"
48+ , paddingBottom: str "calc(var(--s-1) * 0.8 + 1px)"
49+ , justifyContent: center
50+ , alignItems: center
51+ , borderRadius: var "--s-1"
52+ , color: str colour.text
53+ , touchAction: manipulation
54+ , boxSizing: borderBox
55+ , fontSize: str size.text.interactive
56+ , fontFamily: var "--mainFont"
57+ , fontWeight: str "500"
58+ , letterSpacing: str "calc(var(--s-5)* (-0.1))"
59+ , userSelect: none
60+ , transition: str "all 0.2s ease-out" <> str "transform 50ms ease-in"
61+ , "& > .ry-drip": nested (zIndex 0)
62+ , "& > :not(.ry-drip)": nested (zIndex 1)
63+ , """&[data-button-shape="flat"]""":
64+ nested $ hover (background' col.highlightAlpha10) <> css
65+ { background: str "transparent"
66+ , boxShadow: none
67+ , color: str colour.highlightTextOnBackground
68+ , "&:active":
69+ nest
70+ { boxShadow: none
71+ }
72+ , """&[data-button-type="primary"]""":
73+ nest
74+ { background: str colour.highlight
75+ , boxShadow: none
76+ }
77+ }
78+ , """&[data-button-shape="pill"]""":
79+ nest
80+ { borderRadius: str "calc(var(--s1) * 0.85)"
81+ , padding: str "calc(var(--s-1) * 0.85) var(--s0)"
82+ , paddingBottom: str "calc(var(--s-1))"
83+ }
84+ , """&[data-button-type="primary"]""":
85+ nest
86+ { background: gradientBackground
87+ , backgroundSize: str "200% 200%"
88+ , fontWeight: str "500"
89+ , letterSpacing: str "calc(var(--s-5)* (0.1))"
90+ , animation: backgroundAnimation <> str " alternate ease-out 10s infinite"
91+ , boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"
92+ , borderColor: str "transparent"
93+ , color: str colour.highlightText
94+ , "&:focus-visible":
95+ nest
96+ { borderColor: col.background
97+ }
98+ , "&:active":
99+ nest
100+ { boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"
101+ }
102+ }
103+ , """&[data-button-type="dangerous"]""":
104+ nest
105+ { color: str $ colour.interfaceDangerousText
106+ , background: str $ colour.interfaceBackgroundDangerous
107+ , fontWeight: str "500"
108+ , letterSpacing: str "calc(var(--s-5) * -0.10)"
109+ }
110+ , "&:focus": nest { outline: none }
111+ , "&:focus-visible":
112+ nest
113+ { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
114+ }
115+ , "&:active":
116+ nest
117+ { boxShadow: str $ "inset 0 1px calc(var(--s0) * var(--dark-mode) + var(--s-2) * var(--light-mode)) rgba(0,0,0, calc(0.18 * var(--dark-mode) + 0.09 * var(--light-mode)))"
118+ , transform: str "scale3d(0.96,0.96,0.36)"
119+ , transition: str "transform 100ms ease"
120+ }
121+ , "&:disabled, &:disabled:active":
122+ nest
123+ { color: str colour.interfaceTextDisabled
124+ , boxShadow: none
125+ , background: str colour.interfaceBackgroundDisabled
126+ , transform: str "none"
127+ }
128+ }
src/Yoga/Block/Atom/Checkbox/Style.purs+12−12
@@ -10,15 +10,15 @@ type Props f r =
1010
1111checkmark ∷ Style
1212checkmark =
13− css
14− { display: block
15− , path: nested $ css
16− { transformOrigin: str "50% 50%"
17− , strokeDasharray: int 48
18− , strokeDashoffset: int 48
19− , animation: str
20− "checkmarkAnimation .25s cubic-bezier(0.65, 0, 0.45, 1) forwards"
21− , animationName: keyframes
22− { to: css { strokeDashoffset: int 0 } }
23− }
24− }
13+ block <>
14+ css
15+ { path: nested $ css
16+ { transformOrigin: str "50% 50%"
17+ , strokeDasharray: int 48
18+ , strokeDashoffset: int 48
19+ , animation: str
20+ "checkmarkAnimation .25s cubic-bezier(0.65, 0, 0.45, 1) forwards"
21+ , animationName: keyframes
22+ { to: css { strokeDashoffset: int 0 } }
23+ }
24+ }
src/Yoga/Block/Atom/CodeInput/Style.purs+14−16
@@ -13,10 +13,10 @@ type Props f r =
1313codeInput ∷ ∀ p. { maxLength ∷ OptionalProp Int | Props OptionalProp p } -> Style
1414codeInput props = styles <>? props.css
1515 where
16− styles =
16+ styles =
17+ overflowVisible <>
1718 css
18− { overflow: visible
19− , boxSizing: borderBox
19+ { boxSizing: borderBox
2020 , verticalAlign: baseline
2121 , background: str colour.inputBackground
2222 , border: str $ i "solid 1px " colour.inputBorder
@@ -28,21 +28,22 @@ codeInput props = styles <>? props.css
2828 , padding: str "calc(var(--s-4) - 1px)"
2929 , color: str colour.text
3030 , "&:focus":
31− nest
32− { outline: none
33− }
31+ nest
32+ { outline: none
33+ }
3434 , "&:focus-visible":
35− nest
36− { animation: plopAnimation <> str " 260ms ease-in"
37− , border: str $ "solid var(--s-4) " <> colour.highlight
38− , padding: _0
39− }
35+ nest
36+ { animation: plopAnimation <> str " 260ms ease-in"
37+ , border: str $ "solid var(--s-4) " <> colour.highlight
38+ , padding: _0
39+ }
4040 }
4141
4242plopAnimation ∷ StyleProperty
4343plopAnimation =
4444 keyframes
45− $ { "from": css { transform: str "scale3d(0.85,0.85,0.85)" }
45+ $
46+ { "from": css { transform: str "scale3d(0.85,0.85,0.85)" }
4647 , "33%": css { transform: str "scale3d(1.07,1.07,1.07)" }
4748 , "67.7%": css { transform: str "scale3d(0.93,0.93,0.93)" }
4849 , "86.7%": css { transform: str "scale3d(1.02,1.02,1.02)" }
@@ -50,7 +51,4 @@ plopAnimation =
5051 }
5152
5253codeInputWrapper ∷ Style
53−codeInputWrapper =
54− css
55− { display: inlineBlock
56− }
54+codeInputWrapper = inlineBlock
src/Yoga/Block/Atom/Icon/Style.purs+18−18
@@ -18,24 +18,24 @@ type Props f r =
1818
1919span ∷ ∀ r. { | Props OptionalProp r } -> Style
2020span props =
21− css
22− { "--stroke-colour": strokeColour
23− , "--fill-colour": fillColour
24− , margin: _0
25− , padding: _0
26− , display: inlineFlex
27− , justifyContent: center
28− , alignItems: center
29− , width: auto
30− , height: auto
31− , "& > svg":
32− nest
33− { width
34− , height
35− , margin: _0
36− , padding: _0
37− }
38− }
21+ inlineFlex <>
22+ css
23+ { "--stroke-colour": strokeColour
24+ , "--fill-colour": fillColour
25+ , margin: _0
26+ , padding: _0
27+ , justifyContent: center
28+ , alignItems: center
29+ , width: auto
30+ , height: auto
31+ , "& > svg":
32+ nest
33+ { width
34+ , height
35+ , margin: _0
36+ , padding: _0
37+ }
38+ }
3939 where
4040
4141 strokeColour = (props.stroke <|> props.colour) ?|| (str colour.text)
src/Yoga/Block/Atom/Image.pursnew file+5
@@ -0,0 +1,5 @@
1+module Yoga.Block.Atom.Image
2+ ( module Yoga.Block.Atom.Image.View
3+ ) where
4+
5+import Yoga.Block.Atom.Image.View (component, Props, PropsNoChildren)
src/Yoga/Block/Atom/Image/FFI.jsnew file+4
@@ -0,0 +1,4 @@
1+export const setFallbackImgSrc = src => e => () => {
2+ e.onerror = null
3+ e.src = src
4+}
src/Yoga/Block/Atom/Image/FFI.pursnew file+8
@@ -0,0 +1,8 @@
1+module Yoga.Block.Atom.Image.FFI where
2+
3+import Prelude
4+
5+import Effect (Effect)
6+import Web.Event.EventTarget (EventTarget)
7+
8+foreign import setFallbackImgSrc ∷ String → EventTarget → Effect Unit
src/Yoga/Block/Atom/Image/Style.pursnew file+12
@@ -0,0 +1,12 @@
1+module Yoga.Block.Atom.Image.Style where
2+
3+import Yoga.Prelude.Style
4+
5+type Props :: forall k. (Type -> k) -> Row k -> Row k
6+type Props f r =
7+ ( css ∷ f Style
8+ | r
9+ )
10+
11+style :: forall r. { | Props OptionalProp r } -> Style
12+style props = css {} <>? props.css
src/Yoga/Block/Atom/Image/Types.pursnew file+96
@@ -0,0 +1,96 @@
1+module Yoga.Block.Atom.Image.Types
2+ ( CrossOrigin
3+ , Decoding
4+ , Loading
5+ , ReferrerPolicy
6+ , crossOriginAnonymous
7+ , crossOriginUseCredentials
8+ , decodingAsync
9+ , decodingSync
10+ , loadingEager
11+ , loadingLazy
12+ , refererPolicyNoReferrerWhenDowngrade
13+ , referrerPolicyNever
14+ , referrerPolicyNoReferrer
15+ , referrerPolicyOrigin
16+ , referrerPolicyOriginWhenCrossOrigin
17+ , referrerPolicySameOrigin
18+ , referrerPolicySameOriginWhenCrossOrigin
19+ , referrerPolicyStrictOrigin
20+ , referrerPolicyStrictOriginWhenCrossOrigin
21+ , referrerPolicyUnsafeUrl
22+ ) where
23+
24+import Prelude
25+
26+newtype CrossOrigin = CrossOrigin String
27+
28+derive instance Eq CrossOrigin
29+derive instance Ord CrossOrigin
30+derive newtype instance Show CrossOrigin
31+
32+crossOriginAnonymous :: CrossOrigin
33+crossOriginAnonymous = CrossOrigin "anonymous"
34+
35+crossOriginUseCredentials :: CrossOrigin
36+crossOriginUseCredentials = CrossOrigin "use-credentials"
37+
38+newtype Decoding = Decoding String
39+
40+derive instance Eq Decoding
41+derive instance Ord Decoding
42+derive newtype instance Show Decoding
43+
44+decodingSync :: Decoding
45+decodingSync = Decoding "sync"
46+
47+decodingAsync :: Decoding
48+decodingAsync = Decoding "async"
49+
50+newtype Loading = Loading String
51+
52+derive instance Eq Loading
53+derive instance Ord Loading
54+derive newtype instance Show Loading
55+
56+loadingEager :: Loading
57+loadingEager = Loading "eager"
58+
59+loadingLazy :: Loading
60+loadingLazy = Loading "lazy"
61+
62+newtype ReferrerPolicy = ReferrerPolicy String
63+
64+derive instance Eq ReferrerPolicy
65+derive instance Ord ReferrerPolicy
66+derive newtype instance Show ReferrerPolicy
67+
68+referrerPolicyNoReferrer ∷ ReferrerPolicy
69+referrerPolicyNoReferrer = ReferrerPolicy "no-referrer"
70+
71+refererPolicyNoReferrerWhenDowngrade ∷ ReferrerPolicy
72+refererPolicyNoReferrerWhenDowngrade = ReferrerPolicy "no-referrer-when-downgrade"
73+
74+referrerPolicyOrigin ∷ ReferrerPolicy
75+referrerPolicyOrigin = ReferrerPolicy "origin"
76+
77+referrerPolicyOriginWhenCrossOrigin ∷ ReferrerPolicy
78+referrerPolicyOriginWhenCrossOrigin = ReferrerPolicy "origin-when-cross-origin"
79+
80+referrerPolicyUnsafeUrl ∷ ReferrerPolicy
81+referrerPolicyUnsafeUrl = ReferrerPolicy "unsafe-url"
82+
83+referrerPolicyStrictOrigin ∷ ReferrerPolicy
84+referrerPolicyStrictOrigin = ReferrerPolicy "strict-origin"
85+
86+referrerPolicyStrictOriginWhenCrossOrigin ∷ ReferrerPolicy
87+referrerPolicyStrictOriginWhenCrossOrigin = ReferrerPolicy "strict-origin-when-cross-origin"
88+
89+referrerPolicySameOrigin ∷ ReferrerPolicy
90+referrerPolicySameOrigin = ReferrerPolicy "same-origin"
91+
92+referrerPolicySameOriginWhenCrossOrigin ∷ ReferrerPolicy
93+referrerPolicySameOriginWhenCrossOrigin = ReferrerPolicy "same-origin-when-cross-origin"
94+
95+referrerPolicyNever ∷ ReferrerPolicy
96+referrerPolicyNever = ReferrerPolicy "never"
src/Yoga/Block/Atom/Image/View.pursnew file+63
@@ -0,0 +1,63 @@
1+module Yoga.Block.Atom.Image.View where
2+
3+import Yoga.Prelude.View
4+
5+import Effect.Unsafe (unsafePerformEffect)
6+import React.Basic.DOM (unsafeCreateDOMComponent)
7+import Yoga.Block.Atom.Image.FFI (setFallbackImgSrc)
8+import Yoga.Block.Atom.Image.Style as Style
9+import Yoga.Block.Atom.Image.Types (CrossOrigin, Decoding, Loading, ReferrerPolicy)
10+
11+type PropsF :: forall k. (Type -> k) -> Row k -> Row k
12+type PropsF f r =
13+ ( alt :: f (Maybe String)
14+ , decoding :: f Decoding
15+ , loading :: f Loading
16+ , onLoad :: f EventHandler
17+ , crossOrigin :: f CrossOrigin
18+ , referrerPolicy :: f ReferrerPolicy
19+ , width :: f Int
20+ , height :: f Int
21+ , fallbackSrc :: f String
22+ , sizes :: f (Array String)
23+ , srcset :: f (Array String)
24+ | Style.Props f r
25+ )
26+
27+type PropsNoChildren = PropsF Id ()
28+
29+type Props =
30+ PropsF Id (src :: String)
31+
32+type PropsOptional =
33+ PropsF OptionalProp ()
34+
35+component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
36+component = rawComponent
37+
38+rawComponent ∷ ∀ p. ReactComponent { | p }
39+rawComponent = mkForwardRefComponent "Image" do
40+ \(props :: { | PropsF OptionalProp Props }) ref -> pure
41+ $ img
42+ </*>
43+ ( { className: "ry-img"
44+ , css: Style.style props
45+ , referrerPolicy: props.referrerPolicy
46+ , decoding: props.decoding
47+ , loading: props.loading
48+ , crossOrigin: props.crossOrigin
49+ , width: props.width <#> show
50+ , height: props.height <#> show
51+ , alt: props.alt <#> fromMaybe ""
52+ , onError: props.fallbackSrc <#>
53+ \src -> handler target (setFallbackImgSrc src)
54+ , sizes: props.sizes <#> intercalate ","
55+ , src: props.src
56+ , srcset: props.srcset <#> intercalate ","
57+ , onLoad: props.onLoad
58+ , ref
59+ } # deleteUndefineds
60+ )
61+ where
62+ img = unsafePerformEffect
63+ $ unsafeCreateDOMComponent "img"
src/Yoga/Block/Atom/Input/Style.purs+85−99
@@ -34,14 +34,7 @@ gapSize ∷ String
3434gapSize = "var(--s-3)"
3535
3636iconContainer ∷ Style
37−iconContainer =
38− css
39− { display: inlineFlex
40− , alignItems: center
41− -- , padding: str "0px 10px"
42− -- , background: str $ colour.interfaceBackground
43− -- , borderLeft: str $ "1px solid " <> colour.interfaceBackgroundShadow
44− }
37+iconContainer = inlineFlex <> itemsCenter
4538
4639labelAndInputWrapper ∷ Style
4740labelAndInputWrapper =
@@ -58,15 +51,13 @@ labelAndInputWrapper =
5851
5952labelContainer ∷ Style
6053labelContainer =
61− css
62− { position: absolute
63− , overflow: visible
64− , left: _0
65− , top: _0
66− , display: inlineBlock
67− , zIndex: str "2"
68− , pointerEvents: none
69− }
54+ inlineBlock
55+ <> positionAbsolute
56+ <> overflowVisible
57+ <> pointerEventsNone
58+ <> zIndex 2
59+ <> left 0
60+ <> top 0
7061
7162labelSmall ∷ String -> String -> Style
7263labelSmall background textColour =
@@ -118,47 +109,42 @@ labelSmallFocusBackground =
118109
119110labelLarge ∷ { left ∷ Number, width ∷ Number } -> Style
120111labelLarge { left, width } =
121− css
122− { fontSize: str "calc(var(--input-size-factor) * 15px)"
123− , padding: _0
124− , whiteSpace: nowrap -- force on one line
125− -- , height: str "calc(var(--s0) * 1.2)"
126− , letterSpacing: em (-0.011)
127− , maxWidth: str $ i "calc(" width "px - 2ch)"
128− , marginTop: str "calc(7px * var(--input-size-factor))"
129− , marginLeft: str $ i left "px"
130− , marginRight: var "--input-side-padding"
131− , color: str colour.textPaler3
132− , fontWeight: str "400"
133− , overflowX: str "hidden"
134− , textOverflow: str "ellipsis"
135− , overflowY: visible
136− , scrollbarWidth: none
137− , "&::-webkit-scrollbar": nested $ css
138− { display: none }
139− -- , fontWeight: str "600"
140− , """&[data-required="true"]:after""":
141− nest
142− { content: str "'*'"
143− , color: str colour.required
144− , fontFamily: str "Helvetica, Arial, Inter, sans-serif"
145− , lineHeight: str "calc(var(--s0) * 0.85 * var(--input-size-factor))"
146− }
147− }
112+ overflowXHidden <>
113+ css
114+ { fontSize: str "calc(var(--input-size-factor) * 15px)"
115+ , padding: _0
116+ , whiteSpace: nowrap -- force on one line
117+ -- , height: str "calc(var(--s0) * 1.2)"
118+ , letterSpacing: em (-0.011)
119+ , maxWidth: str $ i "calc(" width "px - 2ch)"
120+ , marginTop: str "calc(7px * var(--input-size-factor))"
121+ , marginLeft: str $ i left "px"
122+ , marginRight: var "--input-side-padding"
123+ , color: str colour.textPaler3
124+ , fontWeight: str "400"
125+ , textOverflow: str "ellipsis"
126+ , scrollbarWidth: none
127+ , "&::-webkit-scrollbar": nested $ css
128+ { display: none }
129+ -- , fontWeight: str "600"
130+ , """&[data-required="true"]:after""":
131+ nest
132+ { content: str "'*'"
133+ , color: str colour.required
134+ , fontFamily: str "Helvetica, Arial, Inter, sans-serif"
135+ , lineHeight: str "calc(var(--s0) * 0.85 * var(--input-size-factor))"
136+ }
137+ }
148138
149139rightIconContainer ∷ Style
150140rightIconContainer =
151141 iconContainer
142+ <> inlineFlex
152143 <> css
153− { display: inlineFlex
154− , alignItems: center
144+ { alignItems: center
155145 , justifyContent: center
156146 , "& > *":
157− nest
158− { display: inlineFlex
159− , alignItems: center
160− , justifyContent: center
161− }
147+ nested $ inlineFlex <> itemsCenter <> justifyCenter
162148 , ".ry-icon":
163149 nest
164150 { "--stroke-colour": str colour.text
@@ -180,52 +166,52 @@ inputContainer ∷ ∀ r. { | Props OptionalProp r } -> Style
180166inputContainer props = theCss <>? props.css
181167 where
182168 theCss =
183− css
184− { "--left-icon-size": var "--s0"
185− , "--right-icon-size": str "calc(var(--s0) * 1.2)"
186− , "--input-size-factor": str ((props.sizeVariant ?|| SizeMedium) # sizeVariantToFactor)
187− , "--input-side-padding": str "calc(var(--s-1) * var(--input-size-factor) * 1.2)"
188− , "--input-top-padding": str "calc(6px)"
189− , "--input-bottom-padding": str "calc(6px)"
190− , letterSpacing: em (-0.011)
191− , position: relative
192− , cursor: str "text"
193− , boxSizing: borderBox
194− , "--base-height": str "calc(38px * var(--input-size-factor))"
195− , height: str "var(--base-height)"
196− , display: flex
197− , """&[data-invalid="false"]""":
198− nest
199− { borderColor: str colour.success
200− , marginTop: str "-1px"
201− , marginBottom: str "-1px"
202− , "--border-width": str "2px"
203− }
204− , """&[data-invalid="true"]""":
205− nest
206− { borderColor: str colour.invalid
207− -- , marginTop: str "-1px"
208− -- , marginBottom: str "-1px"
209− -- , marginLeft: str "-1px"
210− , "--border-width": str "2px"
211− }
212− , "&:focus-within":
213− nest
214− { "--border-width": str "2px"
215− , borderColor: str colour.highlight
216− -- , boxSizing: borderBox
217− }
218− , alignItems: center
219− , justifyContent: center
220− , border: str $ "var(--border-width) solid " <> colour.inputBorder
221− , paddingLeft: str "calc((var(--input-side-padding) - var(--border-width)) )"
222− , paddingRight: str "calc((var(--input-side-padding) - var(--border-width)) )"
223− , paddingTop: str "calc((var(--input-top-padding) - var(--border-width)) )"
224− , paddingBottom: str "calc((var(--input-bottom-padding)) - var(--border-width))"
225− , gap: str "calc(var(--input-side-padding) / 2)"
226− , borderRadius: var "--input-border-radius"
227− , overflow: visible
228− }
169+ flex <>
170+ css
171+ { "--left-icon-size": var "--s0"
172+ , "--right-icon-size": str "calc(var(--s0) * 1.2)"
173+ , "--input-size-factor": str ((props.sizeVariant ?|| SizeMedium) # sizeVariantToFactor)
174+ , "--input-side-padding": str "calc(var(--s-1) * var(--input-size-factor) * 1.2)"
175+ , "--input-top-padding": str "calc(6px)"
176+ , "--input-bottom-padding": str "calc(6px)"
177+ , letterSpacing: em (-0.011)
178+ , position: relative
179+ , cursor: str "text"
180+ , boxSizing: borderBox
181+ , "--base-height": str "calc(38px * var(--input-size-factor))"
182+ , height: str "var(--base-height)"
183+ , """&[data-invalid="false"]""":
184+ nest
185+ { borderColor: str colour.success
186+ , marginTop: str "-1px"
187+ , marginBottom: str "-1px"
188+ , "--border-width": str "2px"
189+ }
190+ , """&[data-invalid="true"]""":
191+ nest
192+ { borderColor: str colour.invalid
193+ -- , marginTop: str "-1px"
194+ -- , marginBottom: str "-1px"
195+ -- , marginLeft: str "-1px"
196+ , "--border-width": str "2px"
197+ }
198+ , "&:focus-within":
199+ nest
200+ { "--border-width": str "2px"
201+ , borderColor: str colour.highlight
202+ -- , boxSizing: borderBox
203+ }
204+ , alignItems: center
205+ , justifyContent: center
206+ , border: str $ "var(--border-width) solid " <> colour.inputBorder
207+ , paddingLeft: str "calc((var(--input-side-padding) - var(--border-width)) )"
208+ , paddingRight: str "calc((var(--input-side-padding) - var(--border-width)) )"
209+ , paddingTop: str "calc((var(--input-top-padding) - var(--border-width)) )"
210+ , paddingBottom: str "calc((var(--input-bottom-padding)) - var(--border-width))"
211+ , gap: str "calc(var(--input-side-padding) / 2)"
212+ , borderRadius: var "--input-border-radius"
213+ , overflow: str "visible"
214+ }
229215
230216ploppedFocusWithin ∷ Style
231217ploppedFocusWithin = css
@@ -264,7 +250,7 @@ containerContainer props = css
264250 , borderRadius: var "--input-border-radius"
265251 , boxSizing: contentBox
266252 , display: grid
267− , overflow: visible
253+ , overflow: str "visible"
268254 }
269255
270256inputWrapper ∷ Style
@@ -289,7 +275,7 @@ input props =
289275 , width: _100percent
290276 , minWidth: _0
291277 , margin: _0
292− , overflowY: visible
278+ , overflowY: str "visible"
293279 , "--padding-top": str "calc(6px * var(--input-size-factor))"
294280 , "--padding-bottom": str "calc(6px * var(--input-size-factor))"
295281 , paddingTop: var "--padding-top"
src/Yoga/Block/Atom/Range/Style.purs+6−6
@@ -14,12 +14,12 @@ range ∷ ∀ p. { | Props OptionalProp p } → Style
1414range props = styles <>? props.css
1515 where
1616 styles =
17− css
18− { position: str "relative"
19− , height: str "var(--s0)"
20− , display: inlineBlock
21− , boxSizing: borderBox
22− }
17+ inlineBlock <>
18+ css
19+ { position: str "relative"
20+ , height: str "var(--s0)"
21+ , boxSizing: borderBox
22+ }
2323
2424container ∷ Style
2525container =
src/Yoga/Block/Atom/Segmented/Style.purs+56−60
@@ -13,7 +13,7 @@ type Props f r =
1313cluster ∷ Style
1414cluster =
1515 css
16− { overflow: visible
16+ { overflow: str "visible"
1717 , display: str "inline-flex"
1818 , userSelect: none
1919 , padding: _0
@@ -24,50 +24,46 @@ segmented ∷ Style
2424segmented = styles
2525 where
2626 styles =
27− css
28− { borderWidth: _0
29− , margin: _0
30− , width: auto
31− , display: flex
32− , boxSizing: borderBox
33− , flex: str "1"
34− , minHeight: str "min-content"
35− , background: str colour.backgroundLayer2
36− , boxShadow: str "inset 0 1 0 rgba(0,0,0,0.1)"
37− , borderRadius: str "calc(var(--s-1) * 0.8)"
38− , border: str $ i "1px solid " colour.backgroundLayer1
39− , borderBottom: str $ i "1px solid " colour.backgroundLayer1
40− , padding: _0
41− , overflow: visible
42− , userSelect: none
43− }
27+ flex <>
28+ css
29+ { borderWidth: _0
30+ , margin: _0
31+ , width: auto
32+ , boxSizing: borderBox
33+ , flex: str "1"
34+ , minHeight: str "min-content"
35+ , background: str colour.backgroundLayer2
36+ , boxShadow: str "inset 0 1 0 rgba(0,0,0,0.1)"
37+ , borderRadius: str "calc(var(--s-1) * 0.8)"
38+ , border: str $ i "1px solid " colour.backgroundLayer1
39+ , borderBottom: str $ i "1px solid " colour.backgroundLayer1
40+ , padding: _0
41+ , overflow: str "visible"
42+ , userSelect: none
43+ }
4444
4545activeElementWrapper ∷ Style
4646activeElementWrapper =
47− css
48− { position: relative
49− , boxSizing: borderBox
50− , width: str "0"
51− , overflow: visible
52− , padding: _0
53− , margin: _0
54− }
47+ positionRelative <> boxSizingBorderBox <> width 0
48+ <> pXY 0
49+ <> mXY 0
50+ <> css { overflow: str "visible" }
5551
5652activeElement ∷ Style
5753activeElement =
58− css
59− { position: absolute
60− , boxSizing: borderBox
61− , display: block
62− , borderRadius: str "calc(var(--s-1) * 0.8)"
63− , background: str colour.backgroundLayer4
64− , borderTop: str $ i "1px solid " colour.backgroundLayer5
65− , borderBottom: str $ i "1px solid " colour.backgroundLayer3
66− , boxShadow: str "0 1px 2px rgba(20,20,20,0.67)"
67− , padding: _0
68− , margin: _0
69− , zIndex: str "3"
70− }
54+ block <>
55+ css
56+ { position: absolute
57+ , boxSizing: borderBox
58+ , borderRadius: str "calc(var(--s-1) * 0.8)"
59+ , background: str colour.backgroundLayer4
60+ , borderTop: str $ i "1px solid " colour.backgroundLayer5
61+ , borderBottom: str $ i "1px solid " colour.backgroundLayer3
62+ , boxShadow: str "0 1px 2px rgba(20,20,20,0.67)"
63+ , padding: _0
64+ , margin: _0
65+ , zIndex: str "3"
66+ }
7167
7268button ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style
7369button _ =
@@ -75,7 +71,7 @@ button _ =
7571 { background: color transparent
7672 , appearance: none
7773 , color: str colour.text
78− , overflow: visible
74+ , overflow: str "visible"
7975 , border: none
8076 , padding: _0
8177 , fontSize: str "var(--s0)"
@@ -86,31 +82,31 @@ button _ =
8682 , "&:active": nest { outline: str "0" }
8783 , "&:focus": nest { outline: none }
8884 , "&:focus > .ry-segmented-button__content":
89− nest
90− { borderColor: str colour.highlight
91− , transition: str "all 0.083s ease 0.083s"
92− }
85+ nest
86+ { borderColor: str colour.highlight
87+ , transition: str "all 0.083s ease 0.083s"
88+ }
9389 , userSelect: none
9490 }
9591
9692buttonContent ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style
9793buttonContent { isFirst, isLast } =
98− css
99− { "&:active": nest { outline: str "0" }
100− , "&:focus": nest { outline: none }
101− , margin: _0
102− , paddingTop: str "var(--s-5)"
103− , paddingBottom: str "var(--s-4)"
104− , paddingLeft: str if isFirst then edgePadding else inBetweenPadding
105− , paddingRight: str if isLast then edgePadding else inBetweenPadding
106− , borderRadius: str "calc(var(--s-1) * 0.75)"
107− , border: str $ i borderSize " solid transparent"
108− , display: flex
109− , alignItems: center
110− , justifyContent: center
111− , overflow: visible
112− , userSelect: none
113− }
94+ flex <>
95+ css
96+ { "&:active": nest { outline: str "0" }
97+ , "&:focus": nest { outline: none }
98+ , margin: _0
99+ , paddingTop: str "var(--s-5)"
100+ , paddingBottom: str "var(--s-4)"
101+ , paddingLeft: str if isFirst then edgePadding else inBetweenPadding
102+ , paddingRight: str if isLast then edgePadding else inBetweenPadding
103+ , borderRadius: str "calc(var(--s-1) * 0.75)"
104+ , border: str $ i borderSize " solid transparent"
105+ , alignItems: center
106+ , justifyContent: center
107+ , overflow: str "visible"
108+ , userSelect: none
109+ }
114110 where
115111 borderSize = "var(--s-4)"
116112
src/Yoga/Block/Atom/Segmented/View.purs+1−1
@@ -59,7 +59,7 @@ component =
5959 for_ itemRefs do blurAtIndex activeIndex
6060 updateIndex toIndex
6161 for_ itemRefs do focusAtIndex toIndex
62− useKeyDown case _ of
62+ useKeyDown $ \_ _ -> case _ of
6363 Key.Right ->
6464 when (activeIndex < maxIndex) do
6565 updateTo (activeIndex + 1)
src/Yoga/Block/Atom/Toggle/Style.purs+34−34
@@ -18,9 +18,9 @@ button =
1818 , "&:focus": nest { outline: str "none" }
1919 , border: str $ "1px solid " <> colour.backgroundLayer2
2020 , "&:focus-visible":
21− nest
22− { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
23− }
21+ nest
22+ { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
23+ }
2424 , borderRadius: str "calc(var(--s2) / 2)"
2525 , height: var "--s2"
2626 , width: str "calc(var(--s2) + var(--s1))"
@@ -51,22 +51,22 @@ theToggle =
5151
5252toggleTextContainer ∷ Style
5353toggleTextContainer =
54− css
55− { width: _100percent
56− , border: none
57− , fontWeight: str "bold"
58− , position: absolute
59− , top: str "1px"
60− , fontSize: str "calc(var(--s2)*0.5)"
61− , lineHeight: str "calc(var(--s2)*0.5)"
62− , textAlign: center
63− , height: var "--s2"
64− , display: flex
65− , justifyContent: center
66− , alignItems: center
67− , margin: _0
68− , padding: _0
69− }
54+ flex <>
55+ css
56+ { width: _100percent
57+ , border: none
58+ , fontWeight: str "bold"
59+ , position: absolute
60+ , top: str "1px"
61+ , fontSize: str "calc(var(--s2)*0.5)"
62+ , lineHeight: str "calc(var(--s2)*0.5)"
63+ , textAlign: center
64+ , height: var "--s2"
65+ , justifyContent: center
66+ , alignItems: center
67+ , margin: _0
68+ , padding: _0
69+ }
7070
7171successTextColour ∷ StyleProperty
7272successTextColour = str colour.successText
@@ -76,18 +76,18 @@ disabledTextColour = str colour.interfaceTextDisabled
7676
7777toggleText ∷ Style
7878toggleText =
79− css
80− { textAlign: str "left"
81− , margin: _0
82− , padding: _0
83− , width: str "50%"
84− , height: str "100%"
85− , display: flex
86− , justifyContent: center
87− , alignItems: center
88− , color: disabledTextColour
89− , "& > *":
90− nest
91− { color: successTextColour
92− }
93− }
79+ flex <>
80+ css
81+ { textAlign: str "left"
82+ , margin: _0
83+ , padding: _0
84+ , width: str "50%"
85+ , height: str "100%"
86+ , justifyContent: center
87+ , alignItems: center
88+ , color: disabledTextColour
89+ , "& > *":
90+ nest
91+ { color: successTextColour
92+ }
93+ }
src/Yoga/Block/Container/Style.purs+25−6
@@ -45,8 +45,8 @@ foreign import data ComputedStyle ∷ Type
4545
4646foreign import getComputedStyleImpl ∷ EffectFn2 Element Window ComputedStyle
4747
48−getComputedStyle ∷ Element → Window → Effect ComputedStyle
49−getComputedStyle = runEffectFn2 getComputedStyleImpl
48+getComputedStyle ∷ Window → Element → Effect ComputedStyle
49+getComputedStyle = flip (runEffectFn2 getComputedStyleImpl)
5050
5151foreign import getPropertyValueImpl ∷ EffectFn2 String ComputedStyle String -- Not sure it always returns a string
5252
@@ -71,7 +71,7 @@ getDarkOrLightMode =
7171 runMaybeT do
7272 win ← window # lift
7373 docElem ∷ Element ← getDocumentElement
74− computedStyle ← getComputedStyle docElem win # lift
74+ computedStyle ← getComputedStyle win docElem # lift
7575 pv ← getPropertyValue "--theme-variant" computedStyle # lift
7676 if pv == "dark" then
7777 DarkMode # pure
@@ -294,13 +294,13 @@ defaultColours =
294294 , backgroundAlpha50: withAlpha 0.5 darkBg
295295 , backgroundAlpha75: withAlpha 0.75 darkBg
296296 , backgroundInverted: lightBg
297− , backgroundLayer1: lighten 0.04 >>> saturate 0.1 $ darkBg
297+ , backgroundLayer1: lighten 0.10 >>> saturate 0.1 $ darkBg
298298 , backgroundLayer2: lighten 0.13 >>> saturate 0.04 $ darkBg
299299 , backgroundLayer3: lighten 0.15 >>> saturate 0.02 $ darkBg
300300 , backgroundLayer4: lighten 0.19 >>> saturate 0.00 $ darkBg
301301 , backgroundLayer5: lighten 0.23 >>> saturate 0.00 $ darkBg
302302 , backgroundBright1: darkBg
303− , backgroundBright2: lighten 0.04 >>> saturate 0.1 $ darkBg
303+ , backgroundBright2: lighten 0.10 >>> saturate 0.1 $ darkBg
304304 , backgroundBright3: lighten 0.13 >>> saturate 0.04 $ darkBg
305305 , backgroundBright4: lighten 0.15 >>> saturate 0.02 $ darkBg
306306 , backgroundBright5: lighten 0.19 >>> saturate 0.00 $ darkBg
@@ -354,7 +354,7 @@ defaultColours =
354354 }
355355 }
356356 where
357− darkBg = Color.hsl 210.0 0.21 0.02
357+ darkBg = Color.hsl 210.0 0.21 0.04
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
@@ -469,6 +469,11 @@ instance makeCSSVarLabels' ∷
469469makeCSSVarLabels ∷ ∀ a b. HMapWithIndex MakeCSSVarLabels a b ⇒ a → b
470470makeCSSVarLabels = hmapWithIndex MakeCSSVarLabels
471471
472+colourVariableName ∷ FlatTheme String
473+colourVariableName =
474+ hmap (\(x :: String) -> x)
475+ $ makeCSSVarLabels defaultColours.light
476+
472477colour ∷ FlatTheme String
473478colour =
474479 hmap (\x → "var(" <> x <> ")")
@@ -479,6 +484,20 @@ colourWithAlpha =
479484 hmap (\x → \alpha -> "rgba(var(--rgb-" <> String.drop 2 x <> "), " <> show alpha <> ")")
480485 $ makeCSSVarLabels defaultColours.light
481486
487+colourWithDarkLightAlpha ∷ FlatTheme ({ darkAlpha :: Number, lightAlpha :: Number } -> String)
488+colourWithDarkLightAlpha =
489+ hmap
490+ ( \x → \{ darkAlpha, lightAlpha } ->
491+ "rgba(var(--rgb-" <> String.drop 2 x <> "),"
492+ <> " calc("
493+ <> (show lightAlpha <> " * var(--light-mode)")
494+ <> " + "
495+ <> (show darkAlpha <> " * var(--dark-mode)")
496+ <> ")" -- calc
497+ <> ")" -- rgba
498+ )
499+ $ makeCSSVarLabels defaultColours.light
500+
482501col ∷ FlatTheme StyleProperty
483502col = colour # mapRecord str
484503
src/Yoga/Block/Hook/Key.purs+36−3
@@ -1,13 +1,43 @@
11module Yoga.Block.Hook.Key where
22
3+import Prelude
4+
5+import Data.Array (foldl)
36import Data.Maybe (Maybe(..))
4−import Web.Event.Event (Event)
7+import Data.Set (Set)
8+import Data.Set as Set
9+import Data.Tuple.Nested ((/\))
10+import Web.UIEvent.KeyboardEvent (KeyboardEvent)
11+import Web.UIEvent.KeyboardEvent as KeyboardEvent
512
6−foreign import getKeyImpl ∷ ∀ a. (a -> Maybe a) -> Maybe a -> Event -> Maybe Int
13+foreign import getKeyImpl ∷ ∀ a. (a -> Maybe a) -> Maybe a -> KeyboardEvent -> Maybe Int
714
8−getKeyCode ∷ Event -> Maybe Int
15+getKeyCode ∷ KeyboardEvent -> Maybe Int
916getKeyCode = getKeyImpl Just Nothing
1017
18+getModifiers :: KeyboardEvent -> Set Modifier
19+getModifiers event =
20+ foldl fn Set.empty
21+ [ KeyboardEvent.metaKey /\ Command
22+ , KeyboardEvent.altKey /\ Alt
23+ , KeyboardEvent.shiftKey /\ Shift
24+ , KeyboardEvent.ctrlKey /\ Control
25+ ]
26+
27+ where
28+ fn acc (check /\ key) =
29+ if check event then Set.insert key acc
30+ else acc
31+
32+data Modifier
33+ = Shift
34+ | Command
35+ | Control
36+ | Alt
37+
38+derive instance Eq Modifier
39+derive instance Ord Modifier
40+
1141data KeyCode
1242 = Return
1343 | Escape
@@ -20,6 +50,9 @@ data KeyCode
2050 | Delete
2151 | Backspace
2252
53+derive instance Eq KeyCode
54+derive instance Ord KeyCode
55+
2356keyCodeToInt ∷ KeyCode -> Int
2457keyCodeToInt = case _ of
2558 Backspace -> 8
src/Yoga/Block/Hook/UseKeyDown.purs+11−5
@@ -1,29 +1,35 @@
11module Yoga.Block.Hook.UseKeyDown where
22
33import Prelude
4+
5+import Data.Foldable (traverse_)
46import Data.Maybe (Maybe(..))
57import Data.Newtype (class Newtype)
8+import Data.Set (Set)
69import Effect (Effect)
7−import Yoga.Block.Hook.Key (KeyCode, getKeyCode, intToKeyCode)
810import React.Basic.Hooks (Hook, UseEffect, coerceHook, useEffectAlways)
911import Web.Event.Event (EventType(..))
1012import Web.Event.EventTarget (addEventListener, eventListener, removeEventListener)
1113import Web.HTML (window)
1214import Web.HTML.Window as Win
15+import Web.UIEvent.KeyboardEvent (KeyboardEvent, metaKey)
16+import Web.UIEvent.KeyboardEvent as KeyboardEvent
17+import Yoga.Block.Hook.Key (KeyCode, Modifier, getKeyCode, getModifiers, intToKeyCode)
1318
1419newtype UseKeyDown hooks = UseKeyDown
1520 (UseEffect Unit hooks)
1621
17−derive instance ntUseKeyDown ∷ Newtype (UseKeyDown hooks) _
22+derive instance Newtype (UseKeyDown hooks) _
1823
19−useKeyDown ∷ (KeyCode -> Effect Unit) -> Hook UseKeyDown Unit
24+useKeyDown ∷ (KeyboardEvent -> Set Modifier -> KeyCode -> Effect Unit) -> Hook UseKeyDown Unit
2025useKeyDown doWhat = do
2126 coerceHook React.do
2227 useEffectAlways do
2328 listener <-
24− eventListener \event -> do
29+ eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event -> do
30+ let modifiers = getModifiers event
2531 case getKeyCode event >>= intToKeyCode of
26− Just keyCode -> doWhat keyCode
32+ Just keyCode -> doWhat event modifiers keyCode
2733 Nothing -> pure unit
2834 win <- window
2935 addEventListener eventTypeKeyDown listener false (Win.toEventTarget win)
src/Yoga/Block/Hook/UseKeyUp.purs+11−5
@@ -1,29 +1,35 @@
11module Yoga.Block.Hook.UseKeyUp where
22
33import Prelude
4+
5+import Data.Foldable (traverse_)
46import Data.Maybe (Maybe(..))
57import Data.Newtype (class Newtype)
8+import Data.Set (Set)
69import Effect (Effect)
710import React.Basic.Hooks (Hook, UseEffect, coerceHook, useEffectOnce)
811import Web.Event.Event (EventType(..))
912import Web.Event.EventTarget (addEventListener, eventListener, removeEventListener)
1013import Web.HTML (window)
1114import Web.HTML.Window as Win
12−import Yoga.Block.Hook.Key (KeyCode, getKeyCode, intToKeyCode)
15+import Web.UIEvent.KeyboardEvent (KeyboardEvent)
16+import Web.UIEvent.KeyboardEvent as KeyboardEvent
17+import Yoga.Block.Hook.Key (KeyCode, Modifier, getKeyCode, getModifiers, intToKeyCode)
1318
1419newtype UseKeyUp hooks = UseKeyUp
1520 (UseEffect Unit hooks)
1621
17−derive instance ntUseKeyUp ∷ Newtype (UseKeyUp hooks) _
22+derive instance Newtype (UseKeyUp hooks) _
1823
19−useKeyUp ∷ (KeyCode -> Effect Unit) -> Hook UseKeyUp Unit
24+useKeyUp ∷ (KeyboardEvent -> Set Modifier -> KeyCode -> Effect Unit) -> Hook UseKeyUp Unit
2025useKeyUp doWhat = do
2126 coerceHook React.do
2227 useEffectOnce do
2328 listener <-
24− eventListener \event -> do
29+ eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event -> do
30+ let modifiers = getModifiers event
2531 case getKeyCode event >>= intToKeyCode of
26− Just keyCode -> doWhat keyCode
32+ Just keyCode -> doWhat event modifiers keyCode
2733 Nothing -> pure unit
2834 win <- window
2935 addEventListener eventTypeKeyUp listener false (Win.toEventTarget win)
src/Yoga/Block/Layout/Centre/Style.purs+20−18
@@ -3,26 +3,28 @@ module Yoga.Block.Layout.Centre.Style where
33import Yoga.Prelude.Style
44
55type Props :: forall k. (Type -> k) -> Row k -> Row k
6−type Props f r
7− = ( css ∷ f Style
8− , maxWidth ∷ f StyleProperty
9− , andText ∷ f Boolean
10− , gutters ∷ f StyleProperty
11− , padding ∷ f StyleProperty
12− | r
13− )
6+type Props f r =
7+ ( css ∷ f Style
8+ , maxWidth ∷ f StyleProperty
9+ , andText ∷ f Boolean
10+ , gutters ∷ f StyleProperty
11+ , padding ∷ f StyleProperty
12+ | r
13+ )
1414
1515centre ∷ ∀ p. { | Props OptionalProp p } -> Style
1616centre props = styles <>? props.css
1717 where
1818 styles =
19− css
20− { padding: props.padding ?|| (0 # px)
21− , boxSizing: contentBox
22− , marginLeft: auto
23− , marginRight: auto
24− , maxWidth: props.maxWidth ?|| (60.0 # ch)
25− , textAlign: if props.andText # isTruthy then center else left
26− , paddingLeft: props.gutters ?|| _0
27− , paddingRight: props.gutters ?|| _0
28− }
19+ ( if isTruthy props.andText then textCenter
20+ else textLeft
21+ ) <>
22+ css
23+ { padding: props.padding ?|| (0 # px)
24+ , boxSizing: contentBox
25+ , marginLeft: auto
26+ , marginRight: auto
27+ , maxWidth: props.maxWidth ?|| (60.0 # ch)
28+ , paddingLeft: props.gutters ?|| _0
29+ , paddingRight: props.gutters ?|| _0
30+ }
src/Yoga/Block/Layout/Cluster/Style.purs+11−10
@@ -19,15 +19,16 @@ cluster props = styles <>? props.css
1919 styles =
2020 css
2121 { "& > *":
22− nest
23− { display: flex
24− , flexWrap: wrap
25− , alignItems: (str <$> props.align) ?|| center
26− , justifyContent: (str <$> props.justify) ?|| flexStart
27− , margin: "calc(" <> space <> " / 2 * -1)" # str
28− }
22+ nested
23+ $ flex
24+ <> css
25+ { flexWrap: wrap
26+ , alignItems: (str <$> props.align) ?|| center
27+ , justifyContent: (str <$> props.justify) ?|| flexStart
28+ , margin: "calc(" <> space <> " / 2 * -1)" # str
29+ }
2930 , "& > * > *":
30− nest
31− { margin: "calc(" <> space <> " / 2)" # str
32− }
31+ nest
32+ { margin: "calc(" <> space <> " / 2)" # str
33+ }
3334 }
src/Yoga/Block/Layout/Cover/Style.purs+15−16
@@ -3,13 +3,13 @@ module Yoga.Block.Layout.Cover.Style where
33import Yoga.Prelude.Style
44
55type Props :: forall k. (Type -> k) -> Row k -> Row k
6−type Props f r
7− = ( css ∷ f Style
8− , padding ∷ f StyleProperty
9− , margin ∷ f StyleProperty
10− , minHeight ∷ f StyleProperty
11− | r
12− )
6+type Props f r =
7+ ( css ∷ f Style
8+ , padding ∷ f StyleProperty
9+ , margin ∷ f StyleProperty
10+ , minHeight ∷ f StyleProperty
11+ | r
12+ )
1313
1414defaultMargin :: StyleProperty
1515defaultMargin = 1.0 # rem
@@ -20,14 +20,13 @@ cover props = styles <>? props.css
2020 padding = props.padding ?|| _0
2121 minHeight = props.minHeight ?|| (100.0 # percent)
2222 styles =
23− css
24− { display: flex
25− , flexDirection: column
26− , minHeight
27− , padding
28− }
29−
30−header ∷ ∀ p. { | Props OptionalProp p } -> Style
23+ flexCol <>
24+ css
25+ { minHeight
26+ , padding
27+ }
28+
29+header ∷ ∀ p. { | Props OptionalProp p } -> Style
3130header props = css { marginTop: _0, marginBottom: props.margin ?|| defaultMargin }
3231
3332main ∷ Style
@@ -37,4 +36,4 @@ footer ∷ ∀ p. { | Props OptionalProp p } -> Style
3736footer props = css { marginBottom: _0, marginTop: props.margin ?|| defaultMargin }
3837
3938invisible :: Style
40−invisible = css { visibility: hidden }
39+invisible = css { visibility: hidden }
src/Yoga/Block/Layout/Sidebar/Style.purs+7−6
@@ -45,12 +45,13 @@ sidebar props = styles <>? props.css
4545 css
4646 { overflow: hidden
4747 , "& > *":
48− nest
49− { display: flex
50− , flexWrap: if props.reverseOnWrap # isTruthy then str "wrap-reverse" else wrap
51− , margin: "calc(" <> space <> " / 2 * -1)" # str
52− , alignItems: props.noStretch # foldMap if _ then str "flex-start" else mempty
53− }
48+ nested
49+ $ flex
50+ <> css
51+ { flexWrap: if props.reverseOnWrap # isTruthy then str "wrap-reverse" else wrap
52+ , margin: "calc(" <> space <> " / 2 * -1)" # str
53+ , alignItems: props.noStretch # foldMap if _ then str "flex-start" else mempty
54+ }
5455 , "& > * > *":
5556 nest
5657 { margin: "calc(" <> space <> " / 2)" # str
src/Yoga/Block/Layout/Stack/Style.purs+22−22
@@ -3,33 +3,33 @@ module Yoga.Block.Layout.Stack.Style where
33import Yoga.Prelude.Style
44
55type Props ∷ forall k. (Type -> k) -> Row k -> Row k
6−type Props f r
7− = ( css ∷ f Style
8− , space ∷ f StyleProperty
9− , splitAfter ∷ f Int
10− | r
11− )
6+type Props f r =
7+ ( css ∷ f Style
8+ , space ∷ f StyleProperty
9+ , splitAfter ∷ f Int
10+ | r
11+ )
1212
1313stack ∷ ∀ p. { | Props OptionalProp p } -> Style
1414stack props = splitStyles <> styles <>? props.css
1515 where
1616 styles =
17− css
18− { display: flex
19− , margin: _0
20− , flexDirection: column
21− , justifyContent: flexStart
22− , "& > *":
23− nest
24− { marginTop: _0
25− , marginBottom: _0
26− }
27− , "& > * + *":
28− nest
29− { margin: _0
30− , marginTop: props.space ?|| (1.5 # rem)
31− }
32− }
17+ flex <>
18+ css
19+ { margin: _0
20+ , flexDirection: column
21+ , justifyContent: flexStart
22+ , "& > *":
23+ nest
24+ { marginTop: _0
25+ , marginBottom: _0
26+ }
27+ , "& > * + *":
28+ nest
29+ { margin: _0
30+ , marginTop: props.space ?|| (1.5 # rem)
31+ }
32+ }
3333
3434 splitStyles = props.splitAfter # foldMap \n -> onlyChildStyle <> nthChildStyle n
3535 where
src/Yoga/Block/Layout/Switcher/Style.purs+21−19
@@ -6,13 +6,13 @@ import Foreign.Object as Object
66import Unsafe.Coerce (unsafeCoerce)
77
88type Props ∷ ∀ k. (Type → k) → Row k → Row k
9−type Props f r
10− = ( css ∷ f Style
11− , space ∷ f String
12− , threshold ∷ f String
13− , limit ∷ f Int
14− | r
15− )
9+type Props f r =
10+ ( css ∷ f Style
11+ , space ∷ f String
12+ , threshold ∷ f String
13+ , limit ∷ f Int
14+ | r
15+ )
1616
1717switcher ∷ ∀ p. { | Props OptionalProp p } → Style
1818switcher props = styles <>? props.css
@@ -24,6 +24,7 @@ switcher props = styles <>? props.css
2424 lastKey ∷ String
2525 lastKey =
2626 "" -- this is for readability
27+
2728 <> i "& > * > :nth-last-child(n+" (limit + 1) "), "
2829 <> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"
2930
@@ -36,17 +37,18 @@ switcher props = styles <>? props.css
3637 styles =
3738 nthLastChild
3839 <> css
39− { "& > *":
40− nest
41− { display: flex
42− , flexWrap: wrap
40+ { "& > *":
41+ nested
42+ $ flex
43+ <> css
44+ { flexWrap: wrap
4345 , margin: i "calc((" space " / 2) * -1)" # str
4446 }
45− , "& > * > *":
46− nest
47− { flexGrow: str "1"
48− , flexBasis:
49− i "calc((" threshold " - (100% - " space ")) * 999)" # str
50− , margin: "calc(" <> space <> " / 2)" # str
51− }
52− }
47+ , "& > * > *":
48+ nest
49+ { flexGrow: str "1"
50+ , flexBasis:
51+ i "calc((" threshold " - (100% - " space ")) * 999)" # str
52+ , margin: "calc(" <> space <> " / 2)" # str
53+ }
54+ }
src/Yoga/Block/Molecule/Modal/View.purs+16−13
@@ -28,7 +28,7 @@ component ∷ ReactComponent Props
2828component =
2929 unsafePerformEffect
3030 $ reactComponent "Modal Wrapper" \{ content, isOpen, onDismiss, target } -> React.do
31− useKeyDown case _ of
31+ useKeyDown $ \_ _ -> case _ of
3232 KeyCode.Escape -> onDismiss
3333 _ -> mempty
3434 clickAwayRef <- React.useRef Nullable.null
@@ -36,7 +36,8 @@ component =
3636 toRender ∷ JSX
3737 toRender =
3838 R.div' </ {}
39− /> [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]
39+ />
40+ [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]
4041 , Motion.animatePresence </ {} /> [ guard isOpen $ element window { clickAwayRef, onDismiss, content } ]
4142 ]
4243 pure (createPortal toRender target)
@@ -46,7 +47,8 @@ clickaway =
4647 unsafePerformEffect
4748 $ reactComponent "Modal Clickaway" \{ theRef, onDismiss } -> React.do
4849 pure $ Emotion.elementKeyed Motion.div
49− $ { key: "ry-modal-clickaway"
50+ $
51+ { key: "ry-modal-clickaway"
5052 , onClick: handler_ onDismiss
5153 , className: "ry-modal-clickaway"
5254 , css: Style.clickaway
@@ -68,16 +70,17 @@ window =
6870 , ref: imposterRef
6971 , onClick: handler_ onDismiss
7072 , children:
71− [ Motion.div
72− </* { className: "ry-modal"
73− , css: Style.modal
74− , drag: Motion.prop true
75− , dragMomentum: Motion.prop false
76− , dragConstraints: Motion.prop clickAwayRef
77− , onClick: handler stopPropagation mempty
78− }
79− /> [ content ]
80− ]
73+ [ Motion.div
74+ </*
75+ { className: "ry-modal"
76+ , css: Style.modal
77+ , drag: Motion.prop true
78+ , dragMomentum: Motion.prop false
79+ , dragConstraints: Motion.prop clickAwayRef
80+ , onClick: handler stopPropagation mempty
81+ }
82+ /> [ content ]
83+ ]
8184 }
8285 `withMotion`
8386 { initial: css { transform: "translate(-50%, -50%) scale3d(0.1,0.1,0.1)", opacity: 0 }
src/Yoga/Block/Molecule/ReadMore/Style.purs+23−20
@@ -32,20 +32,23 @@ fadeBlock :: OptionalProp Color -> Style
3232fadeBlock background = css
3333 { zIndex: str $ "1"
3434 , position: relative
35− , "&:after": nest
36− { position: absolute
37− , content: str "''"
38− , right: str "0"
39− , width: str "calc(var(--s3))"
40− , height: str "100%"
41− , overflow: str "visible"
42− , background: str
43− $ "linear-gradient(90deg, "<>
44− bgTransparent <>" 0%, " <>
45− bg <> " 90%, " <>
46− bg <> " 100%)"
47− , zIndex: str $ "2"
48− }
35+ , "&:after": nest
36+ { position: absolute
37+ , content: str "''"
38+ , right: str "0"
39+ , width: str "calc(var(--s3))"
40+ , height: str "100%"
41+ , overflow: str "visible"
42+ , background: str
43+ $ "linear-gradient(90deg, "
44+ <> bgTransparent
45+ <> " 0%, "
46+ <> bg
47+ <> " 90%, "
48+ <> bg
49+ <> " 100%)"
50+ , zIndex: str $ "2"
51+ }
4952 }
5053 where
5154 bg = (cssStringRGBA <$> background) ?|| colour.background
@@ -56,14 +59,14 @@ expandedText = styles
5659 where
5760 styles =
5861 css
59− { }
62+ {}
6063
6164label ∷ Style
6265label = styles
6366 where
6467 styles =
65− css
66− { whiteSpace: nowrap
67− , display: inlineBlock
68− , float: str "right"
69− }
68+ inlineBlock <>
69+ css
70+ { whiteSpace: nowrap
71+ , float: str "right"
72+ }
src/Yoga/Block/Molecule/Sheet/View.purs+1−1
@@ -39,7 +39,7 @@ component =
3939 unsafePerformEffect
4040 $ reactComponent "Sheet Wrapper" \{ header, content, footer, isOpen, onDismiss, containerId, clickAwayId } -> React.do
4141 renderInPortal <- useRenderInPortal containerId
42− useKeyDown case _ of
42+ useKeyDown $ \_ _ -> case _ of
4343 KeyCode.Escape -> onDismiss
4444 _ -> mempty
4545 let
src/Yoga/Block/Molecule/TableOfContents/Style.purs+31−31
@@ -51,22 +51,22 @@ theTableOfContents =
5151
5252tableOfContentsTextContainer ∷ Style
5353tableOfContentsTextContainer =
54− css
55− { width: _100percent
56− , border: none
57− , fontWeight: str "bold"
58− , position: absolute
59− , top: str "1px"
60− , fontSize: str "calc(var(--s2) * 0.5)"
61− , lineHeight: str "calc(var(--s2) * 0.5)"
62− , textAlign: center
63− , height: var "--s2"
64− , display: flex
65− , justifyContent: center
66− , alignItems: center
67− , margin: _0
68− , padding: _0
69− }
54+ flex <>
55+ css
56+ { width: _100percent
57+ , border: none
58+ , fontWeight: str "bold"
59+ , position: absolute
60+ , top: str "1px"
61+ , fontSize: str "calc(var(--s2) * 0.5)"
62+ , lineHeight: str "calc(var(--s2) * 0.5)"
63+ , textAlign: center
64+ , height: var "--s2"
65+ , justifyContent: center
66+ , alignItems: center
67+ , margin: _0
68+ , padding: _0
69+ }
7070
7171successTextColour ∷ StyleProperty
7272successTextColour = str colour.successText
@@ -76,18 +76,18 @@ disabledTextColour = str colour.interfaceTextDisabled
7676
7777tableOfContentsText ∷ Style
7878tableOfContentsText =
79− css
80− { textAlign: str "left"
81− , margin: _0
82− , padding: _0
83− , width: str "50%"
84− , height: str "100%"
85− , display: flex
86− , justifyContent: center
87− , alignItems: center
88− , color: disabledTextColour
89− , "& > *":
90− nest
91− { color: successTextColour
92− }
93− }
79+ flex <>
80+ css
81+ { textAlign: str "left"
82+ , margin: _0
83+ , padding: _0
84+ , width: str "50%"
85+ , height: str "100%"
86+ , justifyContent: center
87+ , alignItems: center
88+ , color: disabledTextColour
89+ , "& > *":
90+ nest
91+ { color: successTextColour
92+ }
93+ }
src/Yoga/Block/Quark/Skeleton/Style.purs+2−4
@@ -6,11 +6,9 @@ import Fahrtwind (transform)
66import Yoga.Block.Container.Style (col, colourWithAlpha)
77
88skeletonBox ∷ Style
9−skeletonBox = css
10− { display: inlineBlock
11− , height: em 1.0
9+skeletonBox = inlineBlock <> overflowHidden <> css
10+ { height: em 1.0
1211 , position: relative
13− , overflow: hidden
1412 , backgroundColor: str (colourWithAlpha.textPaler4 0.33)
1513 , "&::after": nest
1614 { position: absolute
src/Yoga/Prelude/Default.purs+1−1
@@ -14,7 +14,7 @@ module Yoga.Prelude.Default
1414 , runMaybeT_
1515 ) where
1616
17−import Prelude
17+import Prelude hiding (top, bottom)
1818import Control.Alt ((<|>))
1919import Control.Monad.Maybe.Trans (MaybeT(..), runMaybeT)
2020import Control.Monad.Trans.Class (lift)
src/Yoga/Prelude/Style.purs+6−4
@@ -4,10 +4,12 @@ module Yoga.Prelude.Style
44 , module Color
55 , module Yoga.Block.Internal.OptionalProp
66 , module Yoga.Block.Internal.CSS
7+ , module Fahrtwind
78 ) where
89
9−import Yoga.Prelude.Default
10−import React.Basic.Emotion (class IsStyle, class IsStyleProperty, Style, StyleProperty, absolute, auto, baseline, block, borderBox, center, ch, ch2, ch4, cm, cm2, cm4, color, column, contentBox, css, default, element, elementKeyed, ellipsis, em, em2, em4, ex, ex2, ex4, fallbacks, fixed, flex, flexEnd, flexStart, global, grid, hidden, important, inches, inches2, inches4, inherit, initial, inlineBlock, inlineFlex, inlineGrid, int, keyframes, manipulation, maxContent, merge, minContent, mm, mm2, mm4, nested, none, nowrap, num, pc, pc2, pc4, percent, percent2, percent4, pointer, preWrap, prop, pt, pt2, pt4, px, px', px2, px2', px4, px4', relative, rem, rem2, rem4, revert, row, scroll, solid, spaceAround, spaceBetween, spaceEvenly, sticky, str, stretch, style, underline, unset, url, var, vh, vh2, vh4, visible, vmax, vmax2, vmax4, vmin, vmin2, vmin4, vw, vw2, vw4, wrap)
11−import Color (Color, ColorSpace(..), Interpolator, black, brightness, complementary, contrast, cssStringHSLA, cssStringRGBA, darken, desaturate, distance, fromHexString, fromInt, graytone, hsl, hsla, hsv, hsva, isLight, isReadable, lab, lch, lighten, luminance, mix, mixCubehelix, rgb, rgb', rgba, rgba', rotateHue, saturate, textColor, toGray, toHSLA, toHSVA, toHexString, toLCh, toLab, toRGBA, toRGBA', toXYZ, white, xyz)
10+import Yoga.Prelude.Default (class Applicative, class Apply, class Bind, class BooleanAlgebra, class Bounded, class Category, class CommutativeRing, class Discard, class DivisionRing, class Eq, class EuclideanRing, class Field, class Functor, class HeytingAlgebra, class Monad, class Monoid, class Ord, class Ring, class Semigroup, class Semigroupoid, class Semiring, class Show, type (~>), Effect, Either(..), Maybe(..), MaybeT(..), Ordering(..), Unit, Void, absurd, add, ap, append, apply, between, bind, clamp, compare, comparing, compose, conj, const, degree, discard, disj, div, eq, flap, flip, fold, foldMap, foldMapWithIndex, for_, fromMaybe, fromMaybe', gcd, guard, hush, identity, ifM, intercalate, isJust, join, lcm, lift, liftA1, liftEffect, liftM1, map, mapWithIndex, max, maybe, mempty, min, mod, mul, negate, not, notEq, note, one, otherwise, pure, recip, runMaybeT, runMaybeT_, show, sub, traverse_, unit, unless, unlessM, void, when, whenM, zero, (#), ($), ($>), (&&), (*), (*>), (+), (-), (/), (/=), (<), (<#>), (<$), (<$>), (<*), (<*>), (<<<), (<=), (<=<), (<>), (<@>), (<|>), (=<<), (==), (>), (>=), (>=>), (>>=), (>>>), (||))
11+import Fahrtwind (BlendMode(..), TailwindColor, acceptClicks, active, afterElement, alignSelfCenter, alignSelfEnd, alignSelfStart, amber, attributeValueStyle, background, background', backgroundBlendMode, backgroundImage, backgroundImage', backgroundNoRepeat, backgroundPosition, backgroundRepeat, backgroundRepeatX, backgroundRepeatY, backgroundSize, backgroundSize', base, basePopper, beforeElement, black, blendModeToStyleProperty, block, blue, blueGray, blurredBackground, blurredBackground', border, borderBottom, borderCol, borderCol', borderLeft, borderNone, borderRight, borderSolid, borderTop, bottom, bottom', boxSizingBorderBox, boxSizingContentBox, checked, content, coolGray, cursorAuto, cursorDefault, cursorHelp, cursorMove, cursorNotAllowed, cursorPointer, cursorText, cursorWait, cyan, default, disabled, displayGrid, displayNone, divideCol, divideX, divideXReverse, divideY, divideYReverse, emerald, empty, enabled, evenChild, fadeInAndOutAnimationName, first, firstChild, firstLetter, firstLine, firstOfType, flex, flexCol, flexGrow, flexNoWrap, flexRow, flexShrink, flexWrap, flexWrapReverse, focus, focusWithin, fontBlack, fontBold, fontExtrabold, fontExtralight, fontFamilyOrMono, fontFamilyOrSans, fontFamilyOrSerif, fontLight, fontMedium, fontNormal, fontSemiMedium, fontSemibold, fontSize, fontSize', fontThin, fuchsia, full, fullscreen, gap, globalStyles, gray, green, headShakeAnimationName, height, height', heightFull, heightScreen, hover, hue, ignoreClicks, inRange, indeterminate, indigo, infiniteSpinAnimation, inlineBlock, inlineFlex, inlineGrid, invalid, invisible, isolate, isolationAuto, itemsAround, itemsBetween, itemsCenter, itemsEnd, itemsEvenly, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifySelfCenter, justifySelfEnd, justifySelfStart, justifyStart, lastChild, lastOfType, left, left', level3, level3Popper, level4, level4Popper, level5, level5Popper, lightBlue, lightness, lime, lineHeight, lineHeight', linearGradient, linearGradientStops, linearGradientStopsString, linearGradientString, link, m', mB, mB', mL, mL', mR, mR', mT, mT', mX, mX', mXAuto, mXY, mY, mY', maxHeight, maxHeight', maxWidth, maxWidth', minHeight, minHeight', minWidth, minWidth', mixBlendMode, mkRotate, mkShadow, mkTranslate, nest, notification, notificationPopper, nthChild, nthOfType, oddChild, onlyChild, onlyOfType, opacity, optional, orange, outOfRange, outlineNone, overflowHidden, overflowScroll, overflowVisible, overflowXHidden, overflowXScroll, overflowYHidden, overflowYScroll, overlay, overlayPopper, p', pB, pB', pL, pL', pR, pR', pT, pT', pX, pX', pXY, pY, pY', pink, placeholder, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionStatic, positionSticky, pseudoLeft, pseudoRight, purple, readOnly, readWrite, red, required, right, right', root, rose, rotate, rounded, rounded2xl, rounded3xl, roundedDefault, roundedFull, roundedLg, roundedMd, roundedNone, roundedSm, roundedXl, saturation, scaleAnimationName, scope, screen2xl, screenHeight, screenLg, screenMd, screenSm, screenWidth, screenXl, selection, shadow, shadow', shadowDefault, shadowDefaultCol, shadowLg, shadowLgCol, shadowMd, shadowMdCol, shadowSm, shadowSmCol, shadowXl, shadowXlCol, shadowXxl, shadowXxlCol, shadows, spinAnimationName, svgBackgroundImage, target, teal, templateCols, templateRows, text2xl, text3xl, text4xl, text5xl, text6xl, text7xl, text8xl, text9xl, textBase, textCenter, textCol, textCol', textDefault, textJustify, textLeft, textLg, textOverflowEllipsis, textRight, textSized, textSm, textTransformUppercase, textXl, textXs, top, top', topmost, tracking, trackingNormal, trackingTight, trackingTighter, trackingWide, trackingWider, trackingWidest, transform, transform', transformMany, transition, transition', transitionRec, translate, trueGray, underline, userSelectNone, userSelectText, valid, variables, violet, visible, visited, warmGray, white, width, width', widthAndHeight, widthAndHeight', widthFull, widthScreen, withAlpha, withHue, withLightness, withSaturation, yellow, zIndex)
12+import React.Basic.Emotion (class IsStyle, class IsStyleProperty, Style, StyleProperty, absolute, auto, baseline, borderBox, center, ch, ch2, ch4, cm, cm2, cm4, color, column, contentBox, css, element, elementKeyed, ellipsis, em, em2, em4, ex, ex2, ex4, fallbacks, fixed, flexEnd, flexStart, global, grid, hidden, important, inches, inches2, inches4, inherit, initial, int, keyframes, manipulation, maxContent, merge, minContent, mm, mm2, mm4, nested, none, nowrap, num, pc, pc2, pc4, percent, percent2, percent4, pointer, preWrap, prop, pt, pt2, pt4, px, px', px2, px2', px4, px4', relative, rem, rem2, rem4, revert, row, scroll, solid, spaceAround, spaceBetween, spaceEvenly, sticky, str, stretch, style, unset, url, var, vh, vh2, vh4, vmax, vmax2, vmax4, vmin, vmin2, vmin4, vw, vw2, vw4, wrap)
13+import Color (Color, ColorSpace(..), Interpolator, brightness, complementary, contrast, cssStringHSLA, cssStringRGBA, darken, desaturate, distance, fromHexString, fromInt, graytone, hsl, hsla, hsv, hsva, isLight, isReadable, lab, lch, lighten, luminance, mix, mixCubehelix, rgb, rgb', rgba, rgba', rotateHue, saturate, toGray, toHSLA, toHSVA, toHexString, toLCh, toLab, toRGBA, toRGBA', toXYZ, xyz)
1214import Yoga.Block.Internal.OptionalProp (Id, OptionalProp(..), appendIfDefined, getOr, getOrFlipped, ifTrue, isTruthy, maybeToOp, opToMaybe, unsafeUnOptional, (<>?), (?||))
13−import Yoga.Block.Internal.CSS (_0, _100percent, left, nest, nestDynamic, transparent, (~:))
15+import Yoga.Block.Internal.CSS (_0, _100percent, nestDynamic, (~:), transparent)