8e1d098 · rowtype-yoga/ry-blocks

src/Yoga/Block.purs+7−2

compare with main

unifiedsplit

@@ -2,9 +2,11 @@ module Yoga.Block where

2

3import Prim.Row (class Lacks, class Union)

4import React.Basic (JSX, ReactComponent)

5+import React.Basic as React

5−import Yoga (el, leaf)

6+import Yoga (el)

6import Yoga.Block.Atom.Button as Button

7import Yoga.Block.Atom.Button as Button

7import Yoga.Block.Atom.Icon as Icon

8import Yoga.Block.Atom.Icon as Icon

9+import Yoga.Block.Atom.Image as Image

8import Yoga.Block.Atom.Input as Input

10import Yoga.Block.Atom.Input as Input

9import Yoga.Block.Atom.Range as Range

11import Yoga.Block.Atom.Range as Range

10import Yoga.Block.Atom.Segmented as Segmented

12import Yoga.Block.Atom.Segmented as Segmented

@@ -85,6 +87,9 @@ icon = Icon.component

85input ∷ ∀ p q. Union p q Input.Props ⇒ ReactComponent { | p }

87input ∷ ∀ p q. Union p q Input.Props ⇒ ReactComponent { | p }

86input = Input.component

88input = Input.component

87

89

90+image :: forall p q. Union p q Image.Props => { | p } -> JSX

91+image = React.element Image.component

92+

88imposter ∷ ∀ p q. Union p q Imposter.Props ⇒ ReactComponent { | p }

93imposter ∷ ∀ p q. Union p q Imposter.Props ⇒ ReactComponent { | p }

89imposter = Imposter.component

94imposter = Imposter.component

90

95

@@ -98,7 +103,7 @@ segmented' ∷ ReactComponent Segmented.Props

98segmented' = Segmented.component

103segmented' = Segmented.component

99

104

100segmented ∷ Segmented.Props → JSX

105segmented ∷ Segmented.Props → JSX

101−segmented = leaf Segmented.component

106+segmented = React.element Segmented.component

102

107

103sidebar' ∷ ∀ p q. Union p q Sidebar.Props ⇒ ReactComponent { sidebar ∷ JSX, children ∷ Array JSX | p }

108sidebar' ∷ ∀ p q. Union p q Sidebar.Props ⇒ ReactComponent { sidebar ∷ JSX, children ∷ Array JSX | p }

104sidebar' = Sidebar.component

109sidebar' = Sidebar.component

src/Yoga/Block/Atom/Button/Style.purs+89−89

@@ -37,92 +37,92 @@ backgroundAnimation =

37

38button ∷ Style

39button =

40− css

40+ inlineFlex <>

41+ css

41− { background: str colour.backgroundLayer5

42+ { background: str colour.backgroundLayer5

42− , borderWidth: int 0

43+ , borderWidth: int 0

43− , position: relative

44+ , position: relative

44− , overflow: hidden

45+ , overflow: hidden

45− , boxShadow: str "0 1px 4px rgba(100,100,120,0.3), 0 1px 2px rgba(100,100,100,0.2)"

46+ , 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)"

47+ , padding: str "calc(var(--s-1) * 0.8) var(--s0)"

48− , paddingBottom: str "calc(var(--s-1) * 0.8 + 1px)"

48+ , paddingBottom: str "calc(var(--s-1) * 0.8 + 1px)"

49− , justifyContent: center

49+ , justifyContent: center

50− , alignItems: center

50+ , alignItems: center

51− , borderRadius: var "--s-1"

51+ , borderRadius: var "--s-1"

52− , color: str colour.text

52+ , color: str colour.text

53− , touchAction: manipulation

53+ , touchAction: manipulation

54− , boxSizing: borderBox

54+ , boxSizing: borderBox

55− , fontSize: str size.text.interactive

55+ , fontSize: str size.text.interactive

56− , fontFamily: var "--mainFont"

56+ , fontFamily: var "--mainFont"

57− , fontWeight: str "500"

57+ , fontWeight: str "500"

58− , letterSpacing: str "calc(var(--s-5)* (-0.1))"

58+ , letterSpacing: str "calc(var(--s-5)* (-0.1))"

59− , userSelect: none

59+ , userSelect: none

60− , transition: str "all 0.2s ease-out" <> str "transform 50ms ease-in"

60+ , transition: str "all 0.2s ease-out" <> str "transform 50ms ease-in"

61− , "& > .ry-drip": nested (zIndex 0)

61+ , "& > .ry-drip": nested (zIndex 0)

62− , "& > :not(.ry-drip)": nested (zIndex 1)

62+ , "& > :not(.ry-drip)": nested (zIndex 1)

63− , """&[data-button-shape="flat"]""":

63+ , """&[data-button-shape="flat"]""":

64− nested $ hover (background' col.highlightAlpha10) <> css

64+ nested $ hover (background' col.highlightAlpha10) <> css

65− { background: str "transparent"

65+ { background: str "transparent"

66− , boxShadow: none

66+ , boxShadow: none

67− , color: str colour.highlightTextOnBackground

67+ , color: str colour.highlightTextOnBackground

68− , "&:active":

68+ , "&:active":

69− nest

69+ nest

70− { boxShadow: none

70+ { boxShadow: none

71− }

71+ }

72− , """&[data-button-type="primary"]""":

72+ , """&[data-button-type="primary"]""":

73− nest

73+ nest

74− { background: str colour.highlight

74+ { background: str colour.highlight

75− , boxShadow: none

75+ , boxShadow: none

76− }

76+ }

77− }

77+ }

78− , """&[data-button-shape="pill"]""":

78+ , """&[data-button-shape="pill"]""":

79− nest

79+ nest

80− { borderRadius: str "calc(var(--s1) * 0.85)"

80+ { borderRadius: str "calc(var(--s1) * 0.85)"

81− , padding: str "calc(var(--s-1) * 0.85) var(--s0)"

81+ , padding: str "calc(var(--s-1) * 0.85) var(--s0)"

82− , paddingBottom: str "calc(var(--s-1))"

82+ , paddingBottom: str "calc(var(--s-1))"

83− }

83+ }

84− , """&[data-button-type="primary"]""":

84+ , """&[data-button-type="primary"]""":

85− nest

85+ nest

86− { background: gradientBackground

86+ { background: gradientBackground

87− , backgroundSize: str "200% 200%"

87+ , backgroundSize: str "200% 200%"

88− , fontWeight: str "500"

88+ , fontWeight: str "500"

89− , letterSpacing: str "calc(var(--s-5)* (0.1))"

89+ , letterSpacing: str "calc(var(--s-5)* (0.1))"

90− , animation: backgroundAnimation <> str " alternate ease-out 10s infinite"

90+ , animation: backgroundAnimation <> str " alternate ease-out 10s infinite"

91− , boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"

91+ , boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"

92− , borderColor: str "transparent"

92+ , borderColor: str "transparent"

93− , color: str colour.highlightText

93+ , color: str colour.highlightText

94− , "&:focus-visible":

94+ , "&:focus-visible":

95− nest

95+ nest

96− { borderColor: col.background

96+ { borderColor: col.background

97− }

97+ }

98− , "&:active":

98+ , "&:active":

99− nest

99+ nest

100− { boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"

100+ { boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"

101− }

101+ }

102− }

102+ }

103− , """&[data-button-type="dangerous"]""":

103+ , """&[data-button-type="dangerous"]""":

104− nest

104+ nest

105− { color: str $ colour.interfaceDangerousText

105+ { color: str $ colour.interfaceDangerousText

106− , background: str $ colour.interfaceBackgroundDangerous

106+ , background: str $ colour.interfaceBackgroundDangerous

107− , fontWeight: str "500"

107+ , fontWeight: str "500"

108− , letterSpacing: str "calc(var(--s-5) * -0.10)"

108+ , letterSpacing: str "calc(var(--s-5) * -0.10)"

109− }

109+ }

110− , "&:focus": nest { outline: none }

110+ , "&:focus": nest { outline: none }

111− , "&:focus-visible":

111+ , "&:focus-visible":

112− nest

112+ nest

113− { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

113+ { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

114− }

114+ }

115− , "&:active":

115+ , "&:active":

116− nest

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)))"

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)"

118+ , transform: str "scale3d(0.96,0.96,0.36)"

119− , transition: str "transform 100ms ease"

119+ , transition: str "transform 100ms ease"

120− }

120+ }

121− , "&:disabled, &:disabled:active":

121+ , "&:disabled, &:disabled:active":

122− nest

122+ nest

123− { color: str colour.interfaceTextDisabled

123+ { color: str colour.interfaceTextDisabled

124− , boxShadow: none

124+ , boxShadow: none

125− , background: str colour.interfaceBackgroundDisabled

125+ , background: str colour.interfaceBackgroundDisabled

126− , transform: str "none"

126+ , transform: str "none"

127− }

127+ }

128− }

128+ }

src/Yoga/Block/Atom/Checkbox/Style.purs+12−12

@@ -10,15 +10,15 @@ type Props f r =

10

11checkmark ∷ Style

12checkmark =

13− css

14− { display: block

13+ block <>

14+ css

15− , path: nested $ css

15+ { path: nested $ css

16− { transformOrigin: str "50% 50%"

16+ { transformOrigin: str "50% 50%"

17− , strokeDasharray: int 48

17+ , strokeDasharray: int 48

18− , strokeDashoffset: int 48

18+ , strokeDashoffset: int 48

19− , animation: str

19+ , animation: str

20− "checkmarkAnimation .25s cubic-bezier(0.65, 0, 0.45, 1) forwards"

20+ "checkmarkAnimation .25s cubic-bezier(0.65, 0, 0.45, 1) forwards"

21− , animationName: keyframes

21+ , animationName: keyframes

22− { to: css { strokeDashoffset: int 0 } }

22+ { to: css { strokeDashoffset: int 0 } }

23− }

23+ }

24− }

24+ }

src/Yoga/Block/Atom/CodeInput/Style.purs+14−16

@@ -13,10 +13,10 @@ type Props f r =

13codeInput ∷ ∀ p. { maxLength ∷ OptionalProp Int | Props OptionalProp p } -> Style

14codeInput props = styles <>? props.css

15 where

16− styles =

16+ styles =

17+ overflowVisible <>

17 css

18 css

18− { overflow: visible

19− , boxSizing: borderBox

19+ { boxSizing: borderBox

20 , verticalAlign: baseline

21 , background: str colour.inputBackground

22 , border: str $ i "solid 1px " colour.inputBorder

@@ -28,21 +28,22 @@ codeInput props = styles <>? props.css

28 , padding: str "calc(var(--s-4) - 1px)"

29 , color: str colour.text

30 , "&:focus":

31− nest

31+ nest

32− { outline: none

32+ { outline: none

33− }

33+ }

34 , "&:focus-visible":

35− nest

35+ nest

36− { animation: plopAnimation <> str " 260ms ease-in"

36+ { animation: plopAnimation <> str " 260ms ease-in"

37− , border: str $ "solid var(--s-4) " <> colour.highlight

37+ , border: str $ "solid var(--s-4) " <> colour.highlight

38− , padding: _0

38+ , padding: _0

39− }

39+ }

40 }

41

42plopAnimation ∷ StyleProperty

43plopAnimation =

44 keyframes

45+ $

45− $ { "from": css { transform: str "scale3d(0.85,0.85,0.85)" }

46+ { "from": css { transform: str "scale3d(0.85,0.85,0.85)" }

46 , "33%": css { transform: str "scale3d(1.07,1.07,1.07)" }

47 , "33%": css { transform: str "scale3d(1.07,1.07,1.07)" }

47 , "67.7%": css { transform: str "scale3d(0.93,0.93,0.93)" }

48 , "67.7%": css { transform: str "scale3d(0.93,0.93,0.93)" }

48 , "86.7%": css { transform: str "scale3d(1.02,1.02,1.02)" }

49 , "86.7%": css { transform: str "scale3d(1.02,1.02,1.02)" }

@@ -50,7 +51,4 @@ plopAnimation =

50 }

51 }

51

52

52codeInputWrapper ∷ Style

53codeInputWrapper ∷ Style

53−codeInputWrapper =

54+codeInputWrapper = inlineBlock

54− css

55− { display: inlineBlock

56− }

src/Yoga/Block/Atom/Icon/Style.purs+18−18

@@ -18,24 +18,24 @@ type Props f r =

18

19span ∷ ∀ r. { | Props OptionalProp r } -> Style

20span props =

21+ inlineFlex <>

21− css

22+ css

22− { "--stroke-colour": strokeColour

23+ { "--stroke-colour": strokeColour

23− , "--fill-colour": fillColour

24+ , "--fill-colour": fillColour

24− , margin: _0

25+ , margin: _0

25− , padding: _0

26+ , padding: _0

26− , display: inlineFlex

27− , justifyContent: center

27+ , justifyContent: center

28− , alignItems: center

28+ , alignItems: center

29− , width: auto

29+ , width: auto

30− , height: auto

30+ , height: auto

31− , "& > svg":

31+ , "& > svg":

32− nest

32+ nest

33− { width

33+ { width

34− , height

34+ , height

35− , margin: _0

35+ , margin: _0

36− , padding: _0

36+ , padding: _0

37− }

37+ }

38− }

38+ }

39 where

40

41 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

34gapSize = "var(--s-3)"

35

36iconContainer ∷ Style

37−iconContainer =

37+iconContainer = inlineFlex <> itemsCenter

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− }

45

38

46labelAndInputWrapper ∷ Style

39labelAndInputWrapper ∷ Style

47labelAndInputWrapper =

40labelAndInputWrapper =

@@ -58,15 +51,13 @@ labelAndInputWrapper =

58

51

59labelContainer ∷ Style

52labelContainer ∷ Style

60labelContainer =

53labelContainer =

61− css

62− { position: absolute

63− , overflow: visible

64− , left: _0

65− , top: _0

66− , display: inlineBlock

54+ inlineBlock

55+ <> positionAbsolute

56+ <> overflowVisible

57+ <> pointerEventsNone

67− , zIndex: str "2"

58+ <> zIndex 2

68− , pointerEvents: none

59+ <> left 0

69− }

60+ <> top 0

70

61

71labelSmall ∷ String -> String -> Style

62labelSmall ∷ String -> String -> Style

72labelSmall background textColour =

63labelSmall background textColour =

@@ -118,47 +109,42 @@ labelSmallFocusBackground =

118

109

119labelLarge ∷ { left ∷ Number, width ∷ Number } -> Style

110labelLarge ∷ { left ∷ Number, width ∷ Number } -> Style

120labelLarge { left, width } =

111labelLarge { left, width } =

121− css

112+ overflowXHidden <>

113+ css

122− { fontSize: str "calc(var(--input-size-factor) * 15px)"

114+ { fontSize: str "calc(var(--input-size-factor) * 15px)"

123− , padding: _0

115+ , padding: _0

124− , whiteSpace: nowrap -- force on one line

116+ , whiteSpace: nowrap -- force on one line

125− -- , height: str "calc(var(--s0) * 1.2)"

117+ -- , height: str "calc(var(--s0) * 1.2)"

126− , letterSpacing: em (-0.011)

118+ , letterSpacing: em (-0.011)

127− , maxWidth: str $ i "calc(" width "px - 2ch)"

119+ , maxWidth: str $ i "calc(" width "px - 2ch)"

128− , marginTop: str "calc(7px * var(--input-size-factor))"

120+ , marginTop: str "calc(7px * var(--input-size-factor))"

129− , marginLeft: str $ i left "px"

121+ , marginLeft: str $ i left "px"

130− , marginRight: var "--input-side-padding"

122+ , marginRight: var "--input-side-padding"

131− , color: str colour.textPaler3

123+ , color: str colour.textPaler3

132− , fontWeight: str "400"

124+ , fontWeight: str "400"

133− , overflowX: str "hidden"

134− , textOverflow: str "ellipsis"

125+ , textOverflow: str "ellipsis"

135− , overflowY: visible

136− , scrollbarWidth: none

126+ , scrollbarWidth: none

137− , "&::-webkit-scrollbar": nested $ css

127+ , "&::-webkit-scrollbar": nested $ css

138− { display: none }

128+ { display: none }

139− -- , fontWeight: str "600"

129+ -- , fontWeight: str "600"

140− , """&[data-required="true"]:after""":

130+ , """&[data-required="true"]:after""":

141− nest

131+ nest

142− { content: str "'*'"

132+ { content: str "'*'"

143− , color: str colour.required

133+ , color: str colour.required

144− , fontFamily: str "Helvetica, Arial, Inter, sans-serif"

134+ , fontFamily: str "Helvetica, Arial, Inter, sans-serif"

145− , lineHeight: str "calc(var(--s0) * 0.85 * var(--input-size-factor))"

135+ , lineHeight: str "calc(var(--s0) * 0.85 * var(--input-size-factor))"

146− }

136+ }

147− }

137+ }

148

138

149rightIconContainer ∷ Style

139rightIconContainer ∷ Style

150rightIconContainer =

140rightIconContainer =

151 iconContainer

141 iconContainer

142+ <> inlineFlex

152 <> css

143 <> css

153− { display: inlineFlex

154− , alignItems: center

144+ { alignItems: center

155 , justifyContent: center

145 , justifyContent: center

156 , "& > *":

146 , "& > *":

157− nest

147+ nested $ inlineFlex <> itemsCenter <> justifyCenter

158− { display: inlineFlex

159− , alignItems: center

160− , justifyContent: center

161− }

162 , ".ry-icon":

148 , ".ry-icon":

163 nest

149 nest

164 { "--stroke-colour": str colour.text

150 { "--stroke-colour": str colour.text

@@ -180,52 +166,52 @@ inputContainer ∷ ∀ r. { | Props OptionalProp r } -> Style

180inputContainer props = theCss <>? props.css

166inputContainer props = theCss <>? props.css

181 where

167 where

182 theCss =

168 theCss =

169+ flex <>

183− css

170+ css

184− { "--left-icon-size": var "--s0"

171+ { "--left-icon-size": var "--s0"

185− , "--right-icon-size": str "calc(var(--s0) * 1.2)"

172+ , "--right-icon-size": str "calc(var(--s0) * 1.2)"

186− , "--input-size-factor": str ((props.sizeVariant ?|| SizeMedium) # sizeVariantToFactor)

173+ , "--input-size-factor": str ((props.sizeVariant ?|| SizeMedium) # sizeVariantToFactor)

187− , "--input-side-padding": str "calc(var(--s-1) * var(--input-size-factor) * 1.2)"

174+ , "--input-side-padding": str "calc(var(--s-1) * var(--input-size-factor) * 1.2)"

188− , "--input-top-padding": str "calc(6px)"

175+ , "--input-top-padding": str "calc(6px)"

189− , "--input-bottom-padding": str "calc(6px)"

176+ , "--input-bottom-padding": str "calc(6px)"

190− , letterSpacing: em (-0.011)

177+ , letterSpacing: em (-0.011)

191− , position: relative

178+ , position: relative

192− , cursor: str "text"

179+ , cursor: str "text"

193− , boxSizing: borderBox

180+ , boxSizing: borderBox

194− , "--base-height": str "calc(38px * var(--input-size-factor))"

181+ , "--base-height": str "calc(38px * var(--input-size-factor))"

195− , height: str "var(--base-height)"

182+ , height: str "var(--base-height)"

196− , display: flex

197− , """&[data-invalid="false"]""":

183+ , """&[data-invalid="false"]""":

198− nest

184+ nest

199− { borderColor: str colour.success

185+ { borderColor: str colour.success

200− , marginTop: str "-1px"

186+ , marginTop: str "-1px"

201− , marginBottom: str "-1px"

187+ , marginBottom: str "-1px"

202− , "--border-width": str "2px"

188+ , "--border-width": str "2px"

203− }

189+ }

204− , """&[data-invalid="true"]""":

190+ , """&[data-invalid="true"]""":

205− nest

191+ nest

206− { borderColor: str colour.invalid

192+ { borderColor: str colour.invalid

207− -- , marginTop: str "-1px"

193+ -- , marginTop: str "-1px"

208− -- , marginBottom: str "-1px"

194+ -- , marginBottom: str "-1px"

209− -- , marginLeft: str "-1px"

195+ -- , marginLeft: str "-1px"

210− , "--border-width": str "2px"

196+ , "--border-width": str "2px"

211− }

197+ }

212− , "&:focus-within":

198+ , "&:focus-within":

213− nest

199+ nest

214− { "--border-width": str "2px"

200+ { "--border-width": str "2px"

215− , borderColor: str colour.highlight

201+ , borderColor: str colour.highlight

216− -- , boxSizing: borderBox

202+ -- , boxSizing: borderBox

217− }

203+ }

218− , alignItems: center

204+ , alignItems: center

219− , justifyContent: center

205+ , justifyContent: center

220− , border: str $ "var(--border-width) solid " <> colour.inputBorder

206+ , border: str $ "var(--border-width) solid " <> colour.inputBorder

221− , paddingLeft: str "calc((var(--input-side-padding) - var(--border-width)) )"

207+ , paddingLeft: str "calc((var(--input-side-padding) - var(--border-width)) )"

222− , paddingRight: str "calc((var(--input-side-padding) - var(--border-width)) )"

208+ , paddingRight: str "calc((var(--input-side-padding) - var(--border-width)) )"

223− , paddingTop: str "calc((var(--input-top-padding) - var(--border-width)) )"

209+ , paddingTop: str "calc((var(--input-top-padding) - var(--border-width)) )"

224− , paddingBottom: str "calc((var(--input-bottom-padding)) - var(--border-width))"

210+ , paddingBottom: str "calc((var(--input-bottom-padding)) - var(--border-width))"

225− , gap: str "calc(var(--input-side-padding) / 2)"

211+ , gap: str "calc(var(--input-side-padding) / 2)"

226− , borderRadius: var "--input-border-radius"

212+ , borderRadius: var "--input-border-radius"

227− , overflow: visible

213+ , overflow: str "visible"

228− }

214+ }

229

215

230ploppedFocusWithin ∷ Style

216ploppedFocusWithin ∷ Style

231ploppedFocusWithin = css

217ploppedFocusWithin = css

@@ -264,7 +250,7 @@ containerContainer props = css

264 , borderRadius: var "--input-border-radius"

250 , borderRadius: var "--input-border-radius"

265 , boxSizing: contentBox

251 , boxSizing: contentBox

266 , display: grid

252 , display: grid

267− , overflow: visible

253+ , overflow: str "visible"

268 }

254 }

269

255

270inputWrapper ∷ Style

256inputWrapper ∷ Style

@@ -289,7 +275,7 @@ input props =

289 , width: _100percent

275 , width: _100percent

290 , minWidth: _0

276 , minWidth: _0

291 , margin: _0

277 , margin: _0

292− , overflowY: visible

278+ , overflowY: str "visible"

293 , "--padding-top": str "calc(6px * var(--input-size-factor))"

279 , "--padding-top": str "calc(6px * var(--input-size-factor))"

294 , "--padding-bottom": str "calc(6px * var(--input-size-factor))"

280 , "--padding-bottom": str "calc(6px * var(--input-size-factor))"

295 , paddingTop: var "--padding-top"

281 , paddingTop: var "--padding-top"

src/Yoga/Block/Atom/Range/Style.purs+6−6

@@ -14,12 +14,12 @@ range ∷ ∀ p. { | Props OptionalProp p } → Style

14range props = styles <>? props.css

15 where

16 styles =

17+ inlineBlock <>

17− css

18+ css

18− { position: str "relative"

19+ { position: str "relative"

19− , height: str "var(--s0)"

20+ , height: str "var(--s0)"

20− , display: inlineBlock

21− , boxSizing: borderBox

21+ , boxSizing: borderBox

22− }

22+ }

23

24container ∷ Style

25container =

src/Yoga/Block/Atom/Segmented/Style.purs+56−60

@@ -13,7 +13,7 @@ type Props f r =

13cluster ∷ Style

14cluster =

15 css

16− { overflow: visible

16+ { overflow: str "visible"

17 , display: str "inline-flex"

18 , userSelect: none

19 , padding: _0

@@ -24,50 +24,46 @@ segmented ∷ Style

24segmented = styles

25 where

26 styles =

27+ flex <>

27− css

28+ css

28− { borderWidth: _0

29+ { borderWidth: _0

29− , margin: _0

30+ , margin: _0

30− , width: auto

31+ , width: auto

31− , display: flex

32− , boxSizing: borderBox

32+ , boxSizing: borderBox

33− , flex: str "1"

33+ , flex: str "1"

34− , minHeight: str "min-content"

34+ , minHeight: str "min-content"

35− , background: str colour.backgroundLayer2

35+ , background: str colour.backgroundLayer2

36− , boxShadow: str "inset 0 1 0 rgba(0,0,0,0.1)"

36+ , boxShadow: str "inset 0 1 0 rgba(0,0,0,0.1)"

37− , borderRadius: str "calc(var(--s-1) * 0.8)"

37+ , borderRadius: str "calc(var(--s-1) * 0.8)"

38− , border: str $ i "1px solid " colour.backgroundLayer1

38+ , border: str $ i "1px solid " colour.backgroundLayer1

39− , borderBottom: str $ i "1px solid " colour.backgroundLayer1

39+ , borderBottom: str $ i "1px solid " colour.backgroundLayer1

40− , padding: _0

40+ , padding: _0

41− , overflow: visible

41+ , overflow: str "visible"

42− , userSelect: none

42+ , userSelect: none

43− }

43+ }

44

45activeElementWrapper ∷ Style

46activeElementWrapper =

47− css

47+ positionRelative <> boxSizingBorderBox <> width 0

48− { position: relative

48+ <> pXY 0

49− , boxSizing: borderBox

49+ <> mXY 0

50− , width: str "0"

50+ <> css { overflow: str "visible" }

51− , overflow: visible

52− , padding: _0

53− , margin: _0

54− }

55

51

56activeElement ∷ Style

52activeElement ∷ Style

57activeElement =

53activeElement =

54+ block <>

58− css

55+ css

59− { position: absolute

56+ { position: absolute

60− , boxSizing: borderBox

57+ , boxSizing: borderBox

61− , display: block

62− , borderRadius: str "calc(var(--s-1) * 0.8)"

58+ , borderRadius: str "calc(var(--s-1) * 0.8)"

63− , background: str colour.backgroundLayer4

59+ , background: str colour.backgroundLayer4

64− , borderTop: str $ i "1px solid " colour.backgroundLayer5

60+ , borderTop: str $ i "1px solid " colour.backgroundLayer5

65− , borderBottom: str $ i "1px solid " colour.backgroundLayer3

61+ , borderBottom: str $ i "1px solid " colour.backgroundLayer3

66− , boxShadow: str "0 1px 2px rgba(20,20,20,0.67)"

62+ , boxShadow: str "0 1px 2px rgba(20,20,20,0.67)"

67− , padding: _0

63+ , padding: _0

68− , margin: _0

64+ , margin: _0

69− , zIndex: str "3"

65+ , zIndex: str "3"

70− }

66+ }

71

67

72button ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style

68button ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style

73button _ =

69button _ =

@@ -75,7 +71,7 @@ button _ =

75 { background: color transparent

71 { background: color transparent

76 , appearance: none

72 , appearance: none

77 , color: str colour.text

73 , color: str colour.text

78− , overflow: visible

74+ , overflow: str "visible"

79 , border: none

75 , border: none

80 , padding: _0

76 , padding: _0

81 , fontSize: str "var(--s0)"

77 , fontSize: str "var(--s0)"

@@ -86,31 +82,31 @@ button _ =

86 , "&:active": nest { outline: str "0" }

82 , "&:active": nest { outline: str "0" }

87 , "&:focus": nest { outline: none }

83 , "&:focus": nest { outline: none }

88 , "&:focus > .ry-segmented-button__content":

84 , "&:focus > .ry-segmented-button__content":

89− nest

85+ nest

90− { borderColor: str colour.highlight

86+ { borderColor: str colour.highlight

91− , transition: str "all 0.083s ease 0.083s"

87+ , transition: str "all 0.083s ease 0.083s"

92− }

88+ }

93 , userSelect: none

89 , userSelect: none

94 }

90 }

95

91

96buttonContent ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style

92buttonContent ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style

97buttonContent { isFirst, isLast } =

93buttonContent { isFirst, isLast } =

94+ flex <>

98− css

95+ css

99− { "&:active": nest { outline: str "0" }

96+ { "&:active": nest { outline: str "0" }

100− , "&:focus": nest { outline: none }

97+ , "&:focus": nest { outline: none }

101− , margin: _0

98+ , margin: _0

102− , paddingTop: str "var(--s-5)"

99+ , paddingTop: str "var(--s-5)"

103− , paddingBottom: str "var(--s-4)"

100+ , paddingBottom: str "var(--s-4)"

104− , paddingLeft: str if isFirst then edgePadding else inBetweenPadding

101+ , paddingLeft: str if isFirst then edgePadding else inBetweenPadding

105− , paddingRight: str if isLast then edgePadding else inBetweenPadding

102+ , paddingRight: str if isLast then edgePadding else inBetweenPadding

106− , borderRadius: str "calc(var(--s-1) * 0.75)"

103+ , borderRadius: str "calc(var(--s-1) * 0.75)"

107− , border: str $ i borderSize " solid transparent"

104+ , border: str $ i borderSize " solid transparent"

108− , display: flex

109− , alignItems: center

105+ , alignItems: center

110− , justifyContent: center

106+ , justifyContent: center

111− , overflow: visible

107+ , overflow: str "visible"

112− , userSelect: none

108+ , userSelect: none

113− }

109+ }

114 where

110 where

115 borderSize = "var(--s-4)"

111 borderSize = "var(--s-4)"

116

112

src/Yoga/Block/Atom/Segmented/View.purs+1−1

@@ -59,7 +59,7 @@ component =

59 for_ itemRefs do blurAtIndex activeIndex

60 updateIndex toIndex

61 for_ itemRefs do focusAtIndex toIndex

62− useKeyDown case _ of

62+ useKeyDown $ \_ _ -> case _ of

63 Key.Right ->

64 when (activeIndex < maxIndex) do

65 updateTo (activeIndex + 1)

src/Yoga/Block/Atom/Toggle/Style.purs+34−34

@@ -18,9 +18,9 @@ button =

18 , "&:focus": nest { outline: str "none" }

19 , border: str $ "1px solid " <> colour.backgroundLayer2

20 , "&:focus-visible":

21− nest

21+ nest

22− { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

22+ { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

23− }

23+ }

24 , borderRadius: str "calc(var(--s2) / 2)"

25 , height: var "--s2"

26 , width: str "calc(var(--s2) + var(--s1))"

@@ -51,22 +51,22 @@ theToggle =

51

52toggleTextContainer ∷ Style

53toggleTextContainer =

54+ flex <>

54− css

55+ css

55− { width: _100percent

56+ { width: _100percent

56− , border: none

57+ , border: none

57− , fontWeight: str "bold"

58+ , fontWeight: str "bold"

58− , position: absolute

59+ , position: absolute

59− , top: str "1px"

60+ , top: str "1px"

60− , fontSize: str "calc(var(--s2)*0.5)"

61+ , fontSize: str "calc(var(--s2)*0.5)"

61− , lineHeight: str "calc(var(--s2)*0.5)"

62+ , lineHeight: str "calc(var(--s2)*0.5)"

62− , textAlign: center

63+ , textAlign: center

63− , height: var "--s2"

64+ , height: var "--s2"

64− , display: flex

65− , justifyContent: center

65+ , justifyContent: center

66− , alignItems: center

66+ , alignItems: center

67− , margin: _0

67+ , margin: _0

68− , padding: _0

68+ , padding: _0

69− }

69+ }

70

71successTextColour ∷ StyleProperty

72successTextColour = str colour.successText

@@ -76,18 +76,18 @@ disabledTextColour = str colour.interfaceTextDisabled

76

77toggleText ∷ Style

78toggleText =

79+ flex <>

79− css

80+ css

80− { textAlign: str "left"

81+ { textAlign: str "left"

81− , margin: _0

82+ , margin: _0

82− , padding: _0

83+ , padding: _0

83− , width: str "50%"

84+ , width: str "50%"

84− , height: str "100%"

85+ , height: str "100%"

85− , display: flex

86− , justifyContent: center

86+ , justifyContent: center

87− , alignItems: center

87+ , alignItems: center

88− , color: disabledTextColour

88+ , color: disabledTextColour

89− , "& > *":

89+ , "& > *":

90− nest

90+ nest

91− { color: successTextColour

91+ { color: successTextColour

92− }

92+ }

93− }

93+ }

src/Yoga/Block/Container/Style.purs+25−6

@@ -45,8 +45,8 @@ foreign import data ComputedStyle ∷ Type

45

46foreign import getComputedStyleImpl ∷ EffectFn2 Element Window ComputedStyle

47

48−getComputedStyle ∷ Element → Window → Effect ComputedStyle

48+getComputedStyle ∷ Window → Element → Effect ComputedStyle

49−getComputedStyle = runEffectFn2 getComputedStyleImpl

49+getComputedStyle = flip (runEffectFn2 getComputedStyleImpl)

50

51foreign import getPropertyValueImpl ∷ EffectFn2 String ComputedStyle String -- Not sure it always returns a string

52

@@ -71,7 +71,7 @@ getDarkOrLightMode =

71 runMaybeT do

72 win ← window # lift

73 docElem ∷ Element ← getDocumentElement

74− computedStyle ← getComputedStyle docElem win # lift

74+ computedStyle ← getComputedStyle win docElem # lift

75 pv ← getPropertyValue "--theme-variant" computedStyle # lift

76 if pv == "dark" then

77 DarkMode # pure

@@ -294,13 +294,13 @@ defaultColours =

294 , backgroundAlpha50: withAlpha 0.5 darkBg

295 , backgroundAlpha75: withAlpha 0.75 darkBg

296 , backgroundInverted: lightBg

297− , backgroundLayer1: lighten 0.04 >>> saturate 0.1 $ darkBg

297+ , backgroundLayer1: lighten 0.10 >>> saturate 0.1 $ darkBg

298 , backgroundLayer2: lighten 0.13 >>> saturate 0.04 $ darkBg

299 , backgroundLayer3: lighten 0.15 >>> saturate 0.02 $ darkBg

300 , backgroundLayer4: lighten 0.19 >>> saturate 0.00 $ darkBg

301 , backgroundLayer5: lighten 0.23 >>> saturate 0.00 $ darkBg

302 , backgroundBright1: darkBg

303− , backgroundBright2: lighten 0.04 >>> saturate 0.1 $ darkBg

303+ , backgroundBright2: lighten 0.10 >>> saturate 0.1 $ darkBg

304 , backgroundBright3: lighten 0.13 >>> saturate 0.04 $ darkBg

305 , backgroundBright4: lighten 0.15 >>> saturate 0.02 $ darkBg

306 , backgroundBright5: lighten 0.19 >>> saturate 0.00 $ darkBg

@@ -354,7 +354,7 @@ defaultColours =

354 }

355 }

356 where

357− darkBg = Color.hsl 210.0 0.21 0.02

357+ darkBg = Color.hsl 210.0 0.21 0.04

358 -- highlightBase = Color.hsla 275.0 0.82 0.4

359 -- brightPurpleBase = Color.hsla 275.0 0.82 0.4

360 -- highlightMurmurasBase = Color.hsla 220.0 0.60 0.5

@@ -469,6 +469,11 @@ instance makeCSSVarLabels' ∷

469makeCSSVarLabels ∷ ∀ a b. HMapWithIndex MakeCSSVarLabels a b ⇒ a → b

470makeCSSVarLabels = hmapWithIndex MakeCSSVarLabels

471

472+colourVariableName ∷ FlatTheme String

473+colourVariableName =

474+ hmap (\(x :: String) -> x)

475+ $ makeCSSVarLabels defaultColours.light

476+

472colour ∷ FlatTheme String

477colour ∷ FlatTheme String

473colour =

478colour =

474 hmap (\x → "var(" <> x <> ")")

479 hmap (\x → "var(" <> x <> ")")

@@ -479,6 +484,20 @@ colourWithAlpha =

479 hmap (\x → \alpha -> "rgba(var(--rgb-" <> String.drop 2 x <> "), " <> show alpha <> ")")

484 hmap (\x → \alpha -> "rgba(var(--rgb-" <> String.drop 2 x <> "), " <> show alpha <> ")")

480 $ makeCSSVarLabels defaultColours.light

485 $ makeCSSVarLabels defaultColours.light

481

486

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+

482col ∷ FlatTheme StyleProperty

501col ∷ FlatTheme StyleProperty

483col = colour # mapRecord str

502col = colour # mapRecord str

484

503

src/Yoga/Block/Hook/Key.purs+36−3

@@ -1,13 +1,43 @@

1module Yoga.Block.Hook.Key where

2

3+import Prelude

4+

5+import Data.Array (foldl)

3import Data.Maybe (Maybe(..))

6import 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

5

12

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

7

14

8−getKeyCode ∷ Event -> Maybe Int

15+getKeyCode ∷ KeyboardEvent -> Maybe Int

9getKeyCode = getKeyImpl Just Nothing

16getKeyCode = getKeyImpl Just Nothing

10

17

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+

11data KeyCode

41data KeyCode

12 = Return

42 = Return

13 | Escape

43 | Escape

@@ -20,6 +50,9 @@ data KeyCode

20 | Delete

50 | Delete

21 | Backspace

51 | Backspace

22

52

53+derive instance Eq KeyCode

54+derive instance Ord KeyCode

55+

23keyCodeToInt ∷ KeyCode -> Int

56keyCodeToInt ∷ KeyCode -> Int

24keyCodeToInt = case _ of

57keyCodeToInt = case _ of

25 Backspace -> 8

58 Backspace -> 8

src/Yoga/Block/Hook/UseKeyDown.purs+11−5

@@ -1,29 +1,35 @@

1module Yoga.Block.Hook.UseKeyDown where

2

3import Prelude

4+

5+import Data.Foldable (traverse_)

4import Data.Maybe (Maybe(..))

6import Data.Maybe (Maybe(..))

5import Data.Newtype (class Newtype)

7import Data.Newtype (class Newtype)

8+import Data.Set (Set)

6import Effect (Effect)

9import Effect (Effect)

7−import Yoga.Block.Hook.Key (KeyCode, getKeyCode, intToKeyCode)

8import React.Basic.Hooks (Hook, UseEffect, coerceHook, useEffectAlways)

10import React.Basic.Hooks (Hook, UseEffect, coerceHook, useEffectAlways)

9import Web.Event.Event (EventType(..))

11import Web.Event.Event (EventType(..))

10import Web.Event.EventTarget (addEventListener, eventListener, removeEventListener)

12import Web.Event.EventTarget (addEventListener, eventListener, removeEventListener)

11import Web.HTML (window)

13import Web.HTML (window)

12import Web.HTML.Window as Win

14import 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)

13

18

14newtype UseKeyDown hooks = UseKeyDown

19newtype UseKeyDown hooks = UseKeyDown

15 (UseEffect Unit hooks)

20 (UseEffect Unit hooks)

16

21

17−derive instance ntUseKeyDown ∷ Newtype (UseKeyDown hooks) _

22+derive instance Newtype (UseKeyDown hooks) _

18

23

19−useKeyDown ∷ (KeyCode -> Effect Unit) -> Hook UseKeyDown Unit

24+useKeyDown ∷ (KeyboardEvent -> Set Modifier -> KeyCode -> Effect Unit) -> Hook UseKeyDown Unit

20useKeyDown doWhat = do

25useKeyDown doWhat = do

21 coerceHook React.do

26 coerceHook React.do

22 useEffectAlways do

27 useEffectAlways do

23 listener <-

28 listener <-

24− eventListener \event -> do

29+ eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event -> do

30+ let modifiers = getModifiers event

25 case getKeyCode event >>= intToKeyCode of

31 case getKeyCode event >>= intToKeyCode of

26− Just keyCode -> doWhat keyCode

32+ Just keyCode -> doWhat event modifiers keyCode

27 Nothing -> pure unit

33 Nothing -> pure unit

28 win <- window

34 win <- window

29 addEventListener eventTypeKeyDown listener false (Win.toEventTarget win)

35 addEventListener eventTypeKeyDown listener false (Win.toEventTarget win)

src/Yoga/Block/Hook/UseKeyUp.purs+11−5

@@ -1,29 +1,35 @@

1module Yoga.Block.Hook.UseKeyUp where

2

3import Prelude

4+

5+import Data.Foldable (traverse_)

4import Data.Maybe (Maybe(..))

6import Data.Maybe (Maybe(..))

5import Data.Newtype (class Newtype)

7import Data.Newtype (class Newtype)

8+import Data.Set (Set)

6import Effect (Effect)

9import Effect (Effect)

7import React.Basic.Hooks (Hook, UseEffect, coerceHook, useEffectOnce)

10import React.Basic.Hooks (Hook, UseEffect, coerceHook, useEffectOnce)

8import Web.Event.Event (EventType(..))

11import Web.Event.Event (EventType(..))

9import Web.Event.EventTarget (addEventListener, eventListener, removeEventListener)

12import Web.Event.EventTarget (addEventListener, eventListener, removeEventListener)

10import Web.HTML (window)

13import Web.HTML (window)

11import Web.HTML.Window as Win

14import Web.HTML.Window as Win

15+import Web.UIEvent.KeyboardEvent (KeyboardEvent)

16+import Web.UIEvent.KeyboardEvent as KeyboardEvent

12−import Yoga.Block.Hook.Key (KeyCode, getKeyCode, intToKeyCode)

17+import Yoga.Block.Hook.Key (KeyCode, Modifier, getKeyCode, getModifiers, intToKeyCode)

13

18

14newtype UseKeyUp hooks = UseKeyUp

19newtype UseKeyUp hooks = UseKeyUp

15 (UseEffect Unit hooks)

20 (UseEffect Unit hooks)

16

21

17−derive instance ntUseKeyUp ∷ Newtype (UseKeyUp hooks) _

22+derive instance Newtype (UseKeyUp hooks) _

18

23

19−useKeyUp ∷ (KeyCode -> Effect Unit) -> Hook UseKeyUp Unit

24+useKeyUp ∷ (KeyboardEvent -> Set Modifier -> KeyCode -> Effect Unit) -> Hook UseKeyUp Unit

20useKeyUp doWhat = do

25useKeyUp doWhat = do

21 coerceHook React.do

26 coerceHook React.do

22 useEffectOnce do

27 useEffectOnce do

23 listener <-

28 listener <-

24− eventListener \event -> do

29+ eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event -> do

30+ let modifiers = getModifiers event

25 case getKeyCode event >>= intToKeyCode of

31 case getKeyCode event >>= intToKeyCode of

26− Just keyCode -> doWhat keyCode

32+ Just keyCode -> doWhat event modifiers keyCode

27 Nothing -> pure unit

33 Nothing -> pure unit

28 win <- window

34 win <- window

29 addEventListener eventTypeKeyUp listener false (Win.toEventTarget win)

35 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

3import Yoga.Prelude.Style

4

5type Props :: forall k. (Type -> k) -> Row k -> Row k

6−type Props f r

6+type Props f r =

7− = ( css ∷ f Style

7+ ( css ∷ f Style

8− , maxWidth ∷ f StyleProperty

8+ , maxWidth ∷ f StyleProperty

9− , andText ∷ f Boolean

9+ , andText ∷ f Boolean

10− , gutters ∷ f StyleProperty

10+ , gutters ∷ f StyleProperty

11− , padding ∷ f StyleProperty

11+ , padding ∷ f StyleProperty

12− | r

12+ | r

13− )

13+ )

14

15centre ∷ ∀ p. { | Props OptionalProp p } -> Style

16centre props = styles <>? props.css

17 where

18 styles =

19+ ( if isTruthy props.andText then textCenter

20+ else textLeft

21+ ) <>

19− css

22+ css

20− { padding: props.padding ?|| (0 # px)

23+ { padding: props.padding ?|| (0 # px)

21− , boxSizing: contentBox

24+ , boxSizing: contentBox

22− , marginLeft: auto

25+ , marginLeft: auto

23− , marginRight: auto

26+ , marginRight: auto

24− , maxWidth: props.maxWidth ?|| (60.0 # ch)

27+ , maxWidth: props.maxWidth ?|| (60.0 # ch)

25− , textAlign: if props.andText # isTruthy then center else left

26− , paddingLeft: props.gutters ?|| _0

28+ , paddingLeft: props.gutters ?|| _0

27− , paddingRight: props.gutters ?|| _0

29+ , paddingRight: props.gutters ?|| _0

28− }

30+ }

src/Yoga/Block/Layout/Cluster/Style.purs+11−10

@@ -19,15 +19,16 @@ cluster props = styles <>? props.css

19 styles =

20 css

21 { "& > *":

22− nest

22+ nested

23− { display: flex

23+ $ flex

24+ <> css

24− , flexWrap: wrap

25+ { flexWrap: wrap

25− , alignItems: (str <$> props.align) ?|| center

26+ , alignItems: (str <$> props.align) ?|| center

26− , justifyContent: (str <$> props.justify) ?|| flexStart

27+ , justifyContent: (str <$> props.justify) ?|| flexStart

27− , margin: "calc(" <> space <> " / 2 * -1)" # str

28+ , margin: "calc(" <> space <> " / 2 * -1)" # str

28− }

29+ }

29 , "& > * > *":

30 , "& > * > *":

30− nest

31+ nest

31− { margin: "calc(" <> space <> " / 2)" # str

32+ { margin: "calc(" <> space <> " / 2)" # str

32− }

33+ }

33 }

34 }

src/Yoga/Block/Layout/Cover/Style.purs+15−16

@@ -3,13 +3,13 @@ module Yoga.Block.Layout.Cover.Style where

3import Yoga.Prelude.Style

4

5type Props :: forall k. (Type -> k) -> Row k -> Row k

6−type Props f r

6+type Props f r =

7− = ( css ∷ f Style

7+ ( css ∷ f Style

8− , padding ∷ f StyleProperty

8+ , padding ∷ f StyleProperty

9− , margin ∷ f StyleProperty

9+ , margin ∷ f StyleProperty

10− , minHeight ∷ f StyleProperty

10+ , minHeight ∷ f StyleProperty

11− | r

11+ | r

12− )

12+ )

13

14defaultMargin :: StyleProperty

15defaultMargin = 1.0 # rem

@@ -20,14 +20,13 @@ cover props = styles <>? props.css

20 padding = props.padding ?|| _0

21 minHeight = props.minHeight ?|| (100.0 # percent)

22 styles =

23+ flexCol <>

23− css

24+ css

24− { display: flex

25− , flexDirection: column

26− , minHeight

25+ { minHeight

27− , padding

26+ , padding

28− }

27+ }

29−

28+

30−header ∷ ∀ p. { | Props OptionalProp p } -> Style

29+header ∷ ∀ p. { | Props OptionalProp p } -> Style

31header props = css { marginTop: _0, marginBottom: props.margin ?|| defaultMargin }

30header props = css { marginTop: _0, marginBottom: props.margin ?|| defaultMargin }

32

31

33main ∷ Style

32main ∷ Style

@@ -37,4 +36,4 @@ footer ∷ ∀ p. { | Props OptionalProp p } -> Style

37footer props = css { marginBottom: _0, marginTop: props.margin ?|| defaultMargin }

36footer props = css { marginBottom: _0, marginTop: props.margin ?|| defaultMargin }

38

37

39invisible :: Style

38invisible :: 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

45 css

46 { overflow: hidden

47 , "& > *":

48− nest

48+ nested

49− { display: flex

49+ $ flex

50+ <> css

50− , flexWrap: if props.reverseOnWrap # isTruthy then str "wrap-reverse" else wrap

51+ { flexWrap: if props.reverseOnWrap # isTruthy then str "wrap-reverse" else wrap

51− , margin: "calc(" <> space <> " / 2 * -1)" # str

52+ , margin: "calc(" <> space <> " / 2 * -1)" # str

52− , alignItems: props.noStretch # foldMap if _ then str "flex-start" else mempty

53+ , alignItems: props.noStretch # foldMap if _ then str "flex-start" else mempty

53− }

54+ }

54 , "& > * > *":

55 , "& > * > *":

55 nest

56 nest

56 { margin: "calc(" <> space <> " / 2)" # str

57 { 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

3import Yoga.Prelude.Style

4

5type Props ∷ forall k. (Type -> k) -> Row k -> Row k

6−type Props f r

6+type Props f r =

7− = ( css ∷ f Style

7+ ( css ∷ f Style

8− , space ∷ f StyleProperty

8+ , space ∷ f StyleProperty

9− , splitAfter ∷ f Int

9+ , splitAfter ∷ f Int

10− | r

10+ | r

11− )

11+ )

12

13stack ∷ ∀ p. { | Props OptionalProp p } -> Style

14stack props = splitStyles <> styles <>? props.css

15 where

16 styles =

17− css

18− { display: flex

17+ flex <>

18+ css

19− , margin: _0

19+ { margin: _0

20− , flexDirection: column

20+ , flexDirection: column

21− , justifyContent: flexStart

21+ , justifyContent: flexStart

22− , "& > *":

22+ , "& > *":

23− nest

23+ nest

24− { marginTop: _0

24+ { marginTop: _0

25− , marginBottom: _0

25+ , marginBottom: _0

26− }

26+ }

27− , "& > * + *":

27+ , "& > * + *":

28− nest

28+ nest

29− { margin: _0

29+ { margin: _0

30− , marginTop: props.space ?|| (1.5 # rem)

30+ , marginTop: props.space ?|| (1.5 # rem)

31− }

31+ }

32− }

32+ }

33

34 splitStyles = props.splitAfter # foldMap \n -> onlyChildStyle <> nthChildStyle n

35 where

src/Yoga/Block/Layout/Switcher/Style.purs+21−19

@@ -6,13 +6,13 @@ import Foreign.Object as Object

6import Unsafe.Coerce (unsafeCoerce)

7

8type Props ∷ ∀ k. (Type → k) → Row k → Row k

9−type Props f r

9+type Props f r =

10− = ( css ∷ f Style

10+ ( css ∷ f Style

11− , space ∷ f String

11+ , space ∷ f String

12− , threshold ∷ f String

12+ , threshold ∷ f String

13− , limit ∷ f Int

13+ , limit ∷ f Int

14− | r

14+ | r

15− )

15+ )

16

17switcher ∷ ∀ p. { | Props OptionalProp p } → Style

18switcher props = styles <>? props.css

@@ -24,6 +24,7 @@ switcher props = styles <>? props.css

24 lastKey ∷ String

25 lastKey =

26 "" -- this is for readability

27+

27 <> i "& > * > :nth-last-child(n+" (limit + 1) "), "

28 <> i "& > * > :nth-last-child(n+" (limit + 1) "), "

28 <> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"

29 <> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"

29

30

@@ -36,17 +37,18 @@ switcher props = styles <>? props.css

36 styles =

37 styles =

37 nthLastChild

38 nthLastChild

38 <> css

39 <> css

39− { "& > *":

40+ { "& > *":

40− nest

41+ nested

41− { display: flex

42+ $ flex

43+ <> css

42− , flexWrap: wrap

44+ { flexWrap: wrap

43 , margin: i "calc((" space " / 2) * -1)" # str

45 , margin: i "calc((" space " / 2) * -1)" # str

44 }

46 }

45− , "& > * > *":

47+ , "& > * > *":

46− nest

48+ nest

47− { flexGrow: str "1"

49+ { flexGrow: str "1"

48− , flexBasis:

50+ , flexBasis:

49− i "calc((" threshold " - (100% - " space ")) * 999)" # str

51+ i "calc((" threshold " - (100% - " space ")) * 999)" # str

50− , margin: "calc(" <> space <> " / 2)" # str

52+ , margin: "calc(" <> space <> " / 2)" # str

51− }

53+ }

52− }

54+ }

src/Yoga/Block/Molecule/Modal/View.purs+16−13

@@ -28,7 +28,7 @@ component ∷ ReactComponent Props

28component =

29 unsafePerformEffect

30 $ reactComponent "Modal Wrapper" \{ content, isOpen, onDismiss, target } -> React.do

31− useKeyDown case _ of

31+ useKeyDown $ \_ _ -> case _ of

32 KeyCode.Escape -> onDismiss

33 _ -> mempty

34 clickAwayRef <- React.useRef Nullable.null

@@ -36,7 +36,8 @@ component =

36 toRender ∷ JSX

37 toRender =

38 R.div' </ {}

39+ />

39− /> [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

40+ [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

40 , Motion.animatePresence </ {} /> [ guard isOpen $ element window { clickAwayRef, onDismiss, content } ]

41 , Motion.animatePresence </ {} /> [ guard isOpen $ element window { clickAwayRef, onDismiss, content } ]

41 ]

42 ]

42 pure (createPortal toRender target)

43 pure (createPortal toRender target)

@@ -46,7 +47,8 @@ clickaway =

46 unsafePerformEffect

47 unsafePerformEffect

47 $ reactComponent "Modal Clickaway" \{ theRef, onDismiss } -> React.do

48 $ reactComponent "Modal Clickaway" \{ theRef, onDismiss } -> React.do

48 pure $ Emotion.elementKeyed Motion.div

49 pure $ Emotion.elementKeyed Motion.div

50+ $

49− $ { key: "ry-modal-clickaway"

51+ { key: "ry-modal-clickaway"

50 , onClick: handler_ onDismiss

52 , onClick: handler_ onDismiss

51 , className: "ry-modal-clickaway"

53 , className: "ry-modal-clickaway"

52 , css: Style.clickaway

54 , css: Style.clickaway

@@ -68,16 +70,17 @@ window =

68 , ref: imposterRef

70 , ref: imposterRef

69 , onClick: handler_ onDismiss

71 , onClick: handler_ onDismiss

70 , children:

72 , children:

71− [ Motion.div

73+ [ Motion.div

74+ </*

72− </* { className: "ry-modal"

75+ { className: "ry-modal"

73− , css: Style.modal

76+ , css: Style.modal

74− , drag: Motion.prop true

77+ , drag: Motion.prop true

75− , dragMomentum: Motion.prop false

78+ , dragMomentum: Motion.prop false

76− , dragConstraints: Motion.prop clickAwayRef

79+ , dragConstraints: Motion.prop clickAwayRef

77− , onClick: handler stopPropagation mempty

80+ , onClick: handler stopPropagation mempty

78− }

81+ }

79− /> [ content ]

82+ /> [ content ]

80− ]

83+ ]

81 }

84 }

82 `withMotion`

85 `withMotion`

83 { initial: css { transform: "translate(-50%, -50%) scale3d(0.1,0.1,0.1)", opacity: 0 }

86 { 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

32fadeBlock background = css

33 { zIndex: str $ "1"

34 , position: relative

35− , "&:after": nest

35+ , "&:after": nest

36− { position: absolute

36+ { position: absolute

37− , content: str "''"

37+ , content: str "''"

38− , right: str "0"

38+ , right: str "0"

39− , width: str "calc(var(--s3))"

39+ , width: str "calc(var(--s3))"

40− , height: str "100%"

40+ , height: str "100%"

41− , overflow: str "visible"

41+ , overflow: str "visible"

42− , background: str

42+ , background: str

43− $ "linear-gradient(90deg, "<>

43+ $ "linear-gradient(90deg, "

44− bgTransparent <>" 0%, " <>

44+ <> bgTransparent

45+ <> " 0%, "

46+ <> bg

45− bg <> " 90%, " <>

47+ <> " 90%, "

48+ <> bg

46− bg <> " 100%)"

49+ <> " 100%)"

47− , zIndex: str $ "2"

50+ , zIndex: str $ "2"

48− }

51+ }

49 }

52 }

50 where

53 where

51 bg = (cssStringRGBA <$> background) ?|| colour.background

54 bg = (cssStringRGBA <$> background) ?|| colour.background

@@ -56,14 +59,14 @@ expandedText = styles

56 where

59 where

57 styles =

60 styles =

58 css

61 css

59− { }

62+ {}

60

63

61label ∷ Style

64label ∷ Style

62label = styles

65label = styles

63 where

66 where

64 styles =

67 styles =

68+ inlineBlock <>

65− css

69+ css

66− { whiteSpace: nowrap

70+ { whiteSpace: nowrap

67− , display: inlineBlock

68− , float: str "right"

71+ , float: str "right"

69− }

72+ }

src/Yoga/Block/Molecule/Sheet/View.purs+1−1

@@ -39,7 +39,7 @@ component =

39 unsafePerformEffect

40 $ reactComponent "Sheet Wrapper" \{ header, content, footer, isOpen, onDismiss, containerId, clickAwayId } -> React.do

41 renderInPortal <- useRenderInPortal containerId

42− useKeyDown case _ of

42+ useKeyDown $ \_ _ -> case _ of

43 KeyCode.Escape -> onDismiss

44 _ -> mempty

45 let

src/Yoga/Block/Molecule/TableOfContents/Style.purs+31−31

@@ -51,22 +51,22 @@ theTableOfContents =

51

52tableOfContentsTextContainer ∷ Style

53tableOfContentsTextContainer =

54+ flex <>

54− css

55+ css

55− { width: _100percent

56+ { width: _100percent

56− , border: none

57+ , border: none

57− , fontWeight: str "bold"

58+ , fontWeight: str "bold"

58− , position: absolute

59+ , position: absolute

59− , top: str "1px"

60+ , top: str "1px"

60− , fontSize: str "calc(var(--s2) * 0.5)"

61+ , fontSize: str "calc(var(--s2) * 0.5)"

61− , lineHeight: str "calc(var(--s2) * 0.5)"

62+ , lineHeight: str "calc(var(--s2) * 0.5)"

62− , textAlign: center

63+ , textAlign: center

63− , height: var "--s2"

64+ , height: var "--s2"

64− , display: flex

65− , justifyContent: center

65+ , justifyContent: center

66− , alignItems: center

66+ , alignItems: center

67− , margin: _0

67+ , margin: _0

68− , padding: _0

68+ , padding: _0

69− }

69+ }

70

71successTextColour ∷ StyleProperty

72successTextColour = str colour.successText

@@ -76,18 +76,18 @@ disabledTextColour = str colour.interfaceTextDisabled

76

77tableOfContentsText ∷ Style

78tableOfContentsText =

79+ flex <>

79− css

80+ css

80− { textAlign: str "left"

81+ { textAlign: str "left"

81− , margin: _0

82+ , margin: _0

82− , padding: _0

83+ , padding: _0

83− , width: str "50%"

84+ , width: str "50%"

84− , height: str "100%"

85+ , height: str "100%"

85− , display: flex

86− , justifyContent: center

86+ , justifyContent: center

87− , alignItems: center

87+ , alignItems: center

88− , color: disabledTextColour

88+ , color: disabledTextColour

89− , "& > *":

89+ , "& > *":

90− nest

90+ nest

91− { color: successTextColour

91+ { color: successTextColour

92− }

92+ }

93− }

93+ }

src/Yoga/Block/Quark/Skeleton/Style.purs+2−4

@@ -6,11 +6,9 @@ import Fahrtwind (transform)

6import Yoga.Block.Container.Style (col, colourWithAlpha)

7

8skeletonBox ∷ Style

9−skeletonBox = css

9+skeletonBox = inlineBlock <> overflowHidden <> css

10− { display: inlineBlock

11− , height: em 1.0

10+ { height: em 1.0

12 , position: relative

11 , position: relative

13− , overflow: hidden

14 , backgroundColor: str (colourWithAlpha.textPaler4 0.33)

12 , backgroundColor: str (colourWithAlpha.textPaler4 0.33)

15 , "&::after": nest

13 , "&::after": nest

16 { position: absolute

14 { position: absolute

src/Yoga/Prelude/Default.purs+1−1

@@ -14,7 +14,7 @@ module Yoga.Prelude.Default

14 , runMaybeT_

15 ) where

16

17−import Prelude

17+import Prelude hiding (top, bottom)

18import Control.Alt ((<|>))

19import Control.Monad.Maybe.Trans (MaybeT(..), runMaybeT)

20import Control.Monad.Trans.Class (lift)

src/Yoga/Prelude/Style.purs+6−4

@@ -4,10 +4,12 @@ module Yoga.Prelude.Style

4 , module Color

5 , module Yoga.Block.Internal.OptionalProp

6 , module Yoga.Block.Internal.CSS

7+ , module Fahrtwind

7 ) where

8 ) where

8

9

9−import Yoga.Prelude.Default

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)

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)

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)

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)

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)

12import Yoga.Block.Internal.OptionalProp (Id, OptionalProp(..), appendIfDefined, getOr, getOrFlipped, ifTrue, isTruthy, maybeToOp, opToMaybe, unsafeUnOptional, (<>?), (?||))

14import 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)