20e0552 · rowtype-yoga/ry-blocks

src/Yoga/Block.purs+10−6

compare with main

unifiedsplit

@@ -1,17 +1,18 @@

1module Yoga.Block where

2

3+import Prim.Row (class Union)

4+import React.Basic (ReactComponent)

5+import Yoga.Block.Atom.Icon as Icon

6+import Yoga.Block.Atom.Range as Range

7+import Yoga.Block.Atom.Segmented as Segmented

8+import Yoga.Block.Container as Container

3import Yoga.Block.Layout.Box as Box

9import Yoga.Block.Layout.Box as Box

4import Yoga.Block.Layout.Centre as Centre

10import Yoga.Block.Layout.Centre as Centre

5import Yoga.Block.Layout.Cluster as Cluster

11import Yoga.Block.Layout.Cluster as Cluster

6−import Yoga.Block.Container as Container

7import Yoga.Block.Layout.Imposter as Imposter

12import Yoga.Block.Layout.Imposter as Imposter

8−import Yoga.Block.Modal as Modal

9−import Yoga.Block.Atom.Range as Range

10−import Yoga.Block.Atom.Segmented as Segmented

11import Yoga.Block.Layout.Sidebar as Sidebar

13import Yoga.Block.Layout.Sidebar as Sidebar

12import Yoga.Block.Layout.Stack as Stack

14import Yoga.Block.Layout.Stack as Stack

13−import Prim.Row (class Union)

15+import Yoga.Block.Modal as Modal

14−import React.Basic (ReactComponent)

15

16

16box ∷ ∀ p q. Union p q Box.Props => ReactComponent { | p }

17box ∷ ∀ p q. Union p q Box.Props => ReactComponent { | p }

17box = Box.component

18box = Box.component

@@ -25,6 +26,9 @@ cluster = Cluster.component

25container ∷ ∀ p q. Union p q Container.Props => ReactComponent { | p }

26container ∷ ∀ p q. Union p q Container.Props => ReactComponent { | p }

26container = Container.component

27container = Container.component

27

28

29+icon ∷ ∀ p q. Union p q Icon.Props => ReactComponent { | Icon.MandatoryProps p }

30+icon = Icon.component

31+

28imposter ∷ ∀ p q. Union p q Imposter.Props => ReactComponent { | p }

32imposter ∷ ∀ p q. Union p q Imposter.Props => ReactComponent { | p }

29imposter = Imposter.component

33imposter = Imposter.component

30

34

src/Yoga/Block/Atom/Button/Story.purs+28−4

@@ -1,15 +1,21 @@

1module Yoga.Block.Atom.Button.Story where

2

3−import Prelude

3+import Prelude hiding (div)

4import Effect (Effect)

5import Effect.Unsafe (unsafePerformEffect)

6import React.Basic (JSX, element, fragment)

7+import React.Basic.DOM (css)

7import React.Basic.DOM as R

8import React.Basic.DOM as R

9+import React.Basic.Emotion (str)

8import React.Basic.Emotion as E

10import React.Basic.Emotion as E

9import React.Basic.Events (handler_)

11import React.Basic.Events (handler_)

12+import Yoga (div, (/>), (</), (</>))

13+import Yoga.Block as Block

14+import Yoga.Block.Atom.Button.Types as ButtonType

10import Yoga.Block.Atom.Button.View as Button

15import Yoga.Block.Atom.Button.View as Button

16+import Yoga.Block.Container.Style (colour)

11import Yoga.Block.Container.Style as Styles

17import Yoga.Block.Container.Style as Styles

12−import Yoga ((</), (/>))

18+import Yoga.Block.Icon.SVG as Icon

13

19

14default ∷

20default ∷

15 { decorators ∷ Array (Effect JSX -> JSX)

21 { decorators ∷ Array (Effect JSX -> JSX)

@@ -32,7 +38,25 @@ button = do

32 $ fragment

38 $ fragment

33 [ R.div_

39 [ R.div_

34 [ R.h1_ [ R.text "Button Examples" ]

40 [ R.h1_ [ R.text "Button Examples" ]

35− , R.h2_ [ R.text "Generic Button" ]

41+ , R.h2_ [ R.text "Button types" ]

36− , Button.component </ { onClick: handler_ mempty } /> [ R.text "Click" ]

42+ , Block.cluster </ { space: "var(--s-1)" }

43+ /> [ div </ {}

44+ /> [ Button.component </ { buttonType: ButtonType.Generic } /> [ R.text "Generic" ]

45+ , Button.component </ { buttonType: ButtonType.Primary } /> [ R.text "Primary" ]

46+ ]

47+ ]

48+ , R.h2_ [ R.text "Button shapes" ]

49+ , Block.cluster </ { space: "var(--s-1)" }

50+ /> [ div </ {}

51+ /> [ Button.component </ { buttonType: ButtonType.Generic, buttonShape: ButtonType.Pill } /> [ R.text "Generic" ]

52+ , Button.component </ { buttonType: ButtonType.Primary, buttonShape: ButtonType.Pill } /> [ R.text "Primary" ]

53+ ]

54+ ]

55+ , R.h2_ [ R.text "Icon button" ]

56+ , Block.cluster </ { space: "var(--s-1)" }

57+ /> [ div </ {}

58+ /> [ Button.component </ {} /> [ Block.icon </> { icon: Icon.questionMark, size: str "var(--s2)", colour: str colour.highlight } ]

59+ ]

60+ ]

37 ]

61 ]

38 ]

62 ]

src/Yoga/Block/Atom/Button/Style.purs+61−28

@@ -9,39 +9,72 @@ type Props f r =

9 | r

10 )

11

12−button ∷ Style

12+gradientBackground ∷ StyleProperty

13−button =

13+gradientBackground =

14+ str

15+ $ i "linear-gradient(0deg,"

16+ colour.highlightDarker

17+ ","

18+ colour.highlightLighter

19+ "),linear-gradient(225deg,"

20+ colour.highlightRotatedBackwards

21+ ","

22+ colour.highlightRotatedForwards

23+ ")"

24+

25+buttonContainer ∷ Style

26+buttonContainer =

14 css

27 css

15− { background:

28+ { background: str colour.interfaceBackground

16− str

29+ , boxShadow: str "0 1px 4px rgba(0,0,0,0.30)"

17− $ i "linear-gradient(180deg,"

30+ , borderTop: str $ i "1px solid " colour.interfaceBackgroundHighlight

18− colour.highlightLighter

31+ , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

19− ","

32+ , display: inlineFlex

20− colour.highlightDarker

21− "), linear-gradient(225deg,"

22− colour.highlightRotatedBackwards

23− ","

24− colour.highlightRotatedForwards

25− ")"

26− , color: str colour.highlightText

27− , fontSize: var "--s0"

28− , fontFamily: var "--mainFont"

29− , fontWeight: str "550"

30− , padding: str "var(--s-1) var(--s0)"

33+ , padding: str "2px"

31− , borderRadius: var "--s0"

34+ , justifyContent: center

32− , border: str $ "var(--s-5) solid " <> colour.interfaceBackgroundShadow

35+ , alignItems: center

33− , borderWidth: _0

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

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

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

35 nest

38 nest

36 { borderRadius: var "--s1"

39 { borderRadius: var "--s1"

37− , padding: str "var(--s-1) var(--s1)"

38− }

39− , """&[data-button-shape="square"]""":

40+ , "& > button":

40− nest

41+ nest

41− { borderRadius: _0

42− , padding: str "var(--s-1) var(--s1)"

42+ { padding: str "calc(var(--s-1) * 0.8) var(--s0)"

43+ }

43 }

44 }

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

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

45 nest

46 nest

46− {}

47+ { background: gradientBackground

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

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

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

51+ , borderColor: str "transparent"

52+ , "& > button":

53+ nest

54+ { color: str colour.highlightText

55+ }

56+ }

57+ }

58+

59+backgroundAnimation ∷ StyleProperty

60+backgroundAnimation =

61+ keyframes

62+ $ { "from": css { backgroundPosition: str "0% 50%" }

63+ , "to": css { backgroundPosition: str "100% 50%" }

64+ }

65+

66+button ∷ Style

67+button =

68+ css

69+ { background: str "transparent"

70+ , color: str colour.text

71+ , boxSizing: borderBox

72+ , fontSize: var "--s0"

73+ , fontFamily: var "--mainFont"

74+ , fontWeight: str "500"

75+ , letterSpacing: str "calc(var(--s-5)*0.2)"

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

77+ , border: none

78+ , userSelect: none

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

47 }

80 }

src/Yoga/Block/Atom/Button/Types.purs+18−2

@@ -4,6 +4,22 @@ import Prelude

4

5data ButtonType

6 = Primary

7− | Secondary

8 | Generic

7 | Generic

8+

9−derive instance eqHTMLButton ∷ Eq ButtonType

9+derive instance eqButtonType ∷ Eq ButtonType

10+

11+renderButtonType ∷ ButtonType -> String

12+renderButtonType = case _ of

13+ Primary -> "primary"

14+ Generic -> "generic"

15+

16+data ButtonShape

17+ = Rounded

18+ | Pill

19+

20+derive instance eqButtonShape ∷ Eq ButtonShape

21+

22+renderButtonShape ∷ ButtonShape -> String

23+renderButtonShape = case _ of

24+ Rounded -> "rounded"

25+ Pill -> "pill"

src/Yoga/Block/Atom/Button/View.purs+20−11

@@ -2,13 +2,15 @@ module Yoga.Block.Atom.Button.View where

2

3import Yoga.Prelude.View

4import Data.Symbol (SProxy(..))

5−import Record.Builder as RB

5+import Foreign.Object as Object

6import Yoga.Block.Atom.Button.Style as Style

7−import Yoga.Block.Atom.Button.Types (ButtonType)

7+import Yoga.Block.Atom.Button.Types (ButtonShape, ButtonType, renderButtonShape, renderButtonType)

8+import Yoga.Block.Atom.Button.Types as Button

8import Yoga.Block.Internal (ButtonProps, emotionButton)

9import Yoga.Block.Internal (ButtonProps, emotionButton)

9

10

10type PropsF f =

11type PropsF f =

11 ( buttonType ∷ f ButtonType

12 ( buttonType ∷ f ButtonType

13+ , buttonShape ∷ f ButtonShape

12 | Style.Props f ButtonProps

14 | Style.Props f ButtonProps

13 )

15 )

14

16

@@ -28,13 +30,20 @@ rawComponent ∷ ∀ p. ReactComponent { | p }

28rawComponent =

30rawComponent =

29 mkForwardRefComponent "Button" do

31 mkForwardRefComponent "Button" do

30 \(props ∷ { | PropsOptional }) propsRef -> React.do

32 \(props ∷ { | PropsOptional }) propsRef -> React.do

31− pure

33+ let

32− $ emotionButton propsRef

34+ _data =

33− ( props

35+ Object.fromHomogeneous

34− # RB.build

36+ { "button-type": renderButtonType (props.buttonType ?|| Button.Generic)

35− ( RB.delete (key ∷ _ "css") >>> RB.delete (key ∷ _ "buttonType")

37+ , "button-shape": renderButtonShape (props.buttonShape ?|| Button.Rounded)

36− )

37− )

38− { className: "ry-button"

39− , css: Style.button

40 }

38 }

39+ pure $ div

40+ </* { css: Style.buttonContainer

41+ , className: "ry-button-container"

42+ , _data

43+ }

44+ /> [ emotionButton propsRef

45+ props

46+ { className: "ry-button"

47+ , css: Style.button

48+ }

49+ ]

src/Yoga/Block/Atom/Icon.purs+1−1

@@ -2,4 +2,4 @@ module Yoga.Block.Atom.Icon

2 ( module Yoga.Block.Atom.Icon.View

3 ) where

4

5−import Yoga.Block.Atom.Icon.View (component, Props)

5+import Yoga.Block.Atom.Icon.View (component, Props, MandatoryProps)

src/Yoga/Block/Atom/Icon/View.purs+10−10

@@ -3,18 +3,18 @@ module Yoga.Block.Atom.Icon.View where

3import Yoga.Prelude.View

4import Yoga.Block.Atom.Icon.Style as Style

5

6−type Props

6+type Props =

7− = PropsF Id

7+ PropsF Id

8

9−type MandatoryProps r

9+type MandatoryProps r =

10− = ( icon ∷ JSX

10+ ( icon ∷ JSX

11− | r

11+ | r

12− )

12+ )

13

14−type PropsF f

14+type PropsF f =

15− = ( className ∷ f String

15+ ( className ∷ f String

16− | Style.Props f (MandatoryProps ())

16+ | Style.Props f (MandatoryProps ())

17− )

17+ )

18

19component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }

20component = rawComponent

src/Yoga/Block/Atom/Input/Style.purs+15−5

@@ -4,10 +4,10 @@ import Yoga.Prelude.Style

4import Data.Interpolate (i)

5import Yoga.Block.Container.Style (colour)

6

7−type Props f r

7+type Props f r =

8− = ( css ∷ f Style

8+ ( css ∷ f Style

9− | r

9+ | r

10− )

10+ )

11

12leftIconSize ∷ StyleProperty

13leftIconSize = var "--left-icon-size"

@@ -78,7 +78,17 @@ labelSmall =

78 }

79 , """&[data-has-focus="true"] > span""":

80 nest

81− { background: str colour.highlight

81+ { background:

82+ str

83+ $ i "linear-gradient(225deg,"

84+ colour.highlightLighter

85+ ","

86+ colour.highlightDarker

87+ "), linear-gradient(225deg,"

88+ colour.highlightRotatedBackwards

89+ ","

90+ colour.highlightRotatedForwards

91+ ")"

82 , color: str colour.highlightText

92 , color: str colour.highlightText

83 }

93 }

84 }

94 }

src/Yoga/Block/Atom/Input/View.purs+96−30

@@ -1,13 +1,18 @@

1module Yoga.Block.Atom.Input.View where

2

3import Yoga.Prelude.View

4+import Data.Array as Array

5+import Data.Interpolate (i)

6+import Data.Semigroup.Foldable (intercalateMap)

4import Data.String.NonEmpty (NonEmptyString)

7import Data.String.NonEmpty (NonEmptyString)

5import Data.String.NonEmpty as NonEmptyString

8import Data.String.NonEmpty as NonEmptyString

6import Data.Symbol (SProxy(..))

9import Data.Symbol (SProxy(..))

10+import Debug.Trace (spy)

7import Foreign.Object (Object)

11import Foreign.Object (Object)

8import Foreign.Object as Object

12import Foreign.Object as Object

9import Framer.Motion as M

13import Framer.Motion as M

14+import Partial.Unsafe (unsafeCrashWith)

10−import React.Basic.DOM (css)

15+import React.Basic.DOM (CSS, css)

11import React.Basic.DOM as R

16import React.Basic.DOM as R

12import React.Basic.Hooks as React

17import React.Basic.Hooks as React

13import Web.HTML.HTMLInputElement as InputElement

18import Web.HTML.HTMLInputElement as InputElement

@@ -18,19 +23,19 @@ import Yoga.Block.Atom.Input.Types as HTMLInput

18import Yoga.Block.Icon.SVG as SVGIcon

23import Yoga.Block.Icon.SVG as SVGIcon

19import Yoga.Block.Internal.OptionalProp (asMaybe)

24import Yoga.Block.Internal.OptionalProp (asMaybe)

20

25

21−type PropsF f

26+type PropsF f =

22− = ( leading ∷ f JSX

27+ ( leading ∷ f JSX

23− , trailing ∷ f JSX

28+ , trailing ∷ f JSX

24− , label ∷ f NonEmptyString

29+ , label ∷ f NonEmptyString

25− , type ∷ f HTMLInput

30+ , type ∷ f HTMLInput

26− | Style.Props f InputProps

31+ | Style.Props f InputProps

27− )

32+ )

28

33

29−type Props

34+type Props =

30− = PropsF Id

35+ PropsF Id

31

36

32−type PropsOptional

37+type PropsOptional =

33− = PropsF OptionalProp

38+ PropsF OptionalProp

34

39

35component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }

40component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }

36component = rawComponent

41component = rawComponent

@@ -47,6 +52,68 @@ mkLeftIcon icon =

47 }

52 }

48 ]

53 ]

49

54

55+containerVariants ∷

56+ { blurred ∷ CSS

57+ , focussed ∷ CSS

58+ }

59+containerVariants =

60+ { focussed:

61+ css

62+ { clipPath

63+ , transition: { duration: 1.3 }

64+ }

65+ , blurred:

66+ css

67+ { clipPath:

68+ drawPathUntil (Array.length path) path

69+ }

70+ }

71+ where

72+ clipPath = 3 Array... (Array.length path / 2 + 1) <#> \ln -> drawPathUntil (ln * 2) path

73+

74+type Point =

75+ { x ∷ Int, y ∷ Int }

76+

77+p ∷ Int -> Int -> Point

78+p x y = { x, y }

79+

80+drawPathUntil ∷ Int -> Array Point -> String

81+drawPathUntil idx thePath = do

82+ let fn { x, y } = i x "%" " " y "%"

83+ let firstFew = Array.take idx thePath

84+ let lastFew = Array.drop idx thePath $> (Array.last firstFew # fromMaybe' \_ -> unsafeCrashWith "ogod")

85+ let rendered = intercalate "," $ fn <$> (firstFew <> lastFew)

86+ spy "polybius" $ i "polygon(" rendered ")"

87+

88+path ∷ Array Point

89+path = mkPath 5

90+

91+mkPath ∷ Int -> Array Point

92+mkPath d = do

93+ let

94+ inside =

95+ [ p d d

96+ , p (100 - d) d

97+ , p (100 - d) (100 - d)

98+ , p d (100 - d)

99+ , p d d

100+ ]

101+ outside =

102+ [ p d 0

103+ , p 100 0

104+ , p 100 100

105+ , p 0 100

106+ , p 0 0

107+ , p d 0 -- one turn, starting way back

108+ ]

109+ inside <> outside <> (Array.reverse inside)

110+

111+containerVariantLabels ∷

112+ { blurred ∷ M.VariantLabel

113+ , focussed ∷ M.VariantLabel

114+ }

115+containerVariantLabels = M.makeVariantLabels containerVariants

116+

50rawComponent ∷ ∀ p. ReactComponent { | p }

117rawComponent ∷ ∀ p. ReactComponent { | p }

51rawComponent =

118rawComponent =

52 mkForwardRefComponent "Input" do

119 mkForwardRefComponent "Input" do

@@ -54,8 +121,7 @@ rawComponent =

54 inputBbox /\ setInputBbox <- useState' (zero ∷ DOMRect)

121 inputBbox /\ setInputBbox <- useState' (zero ∷ DOMRect)

55 hasFocus /\ setHasFocus <- useState' false

122 hasFocus /\ setHasFocus <- useState' false

56 backupRef ∷ NodeRef <- useRef null -- [TODO] test this

123 backupRef ∷ NodeRef <- useRef null -- [TODO] test this

57− let

58− ref = forwardedRefAsMaybe propsRef # fromMaybe backupRef

124+ let ref = forwardedRefAsMaybe propsRef # fromMaybe backupRef

59 useEffectOnce do

125 useEffectOnce do

60 maybeBBox <- getBoundingBoxFromRef ref

126 maybeBBox <- getBoundingBoxFromRef ref

61 for_ maybeBBox setInputBbox

127 for_ maybeBBox setInputBbox

@@ -73,8 +139,7 @@ rawComponent =

73 maybeBBox <- getBoundingBoxFromRef leftIconRef

139 maybeBBox <- getBoundingBoxFromRef leftIconRef

74 for_ maybeBBox (setLeftIconBbox <<< Just)

140 for_ maybeBBox (setLeftIconBbox <<< Just)

75 mempty

141 mempty

76− let

77− (maybeValue ∷ Maybe String) = cast props.value # opToMaybe

142+ let (maybeValue ∷ Maybe String) = cast props.value # opToMaybe

78 hasValue /\ setHasValue <- useState' ((maybeValue # isJust) && (maybeValue /= Just ""))

143 hasValue /\ setHasValue <- useState' ((maybeValue # isJust) && (maybeValue /= Just ""))

79 let

144 let

80 aria ∷ Object String

145 aria ∷ Object String

@@ -138,22 +203,25 @@ rawComponent =

138 ( const do

203 ( const do

139 when hasFocus $ setHasFocus false

204 when hasFocus $ setHasFocus false

140 el <- getHTMLElementFromRef ref

205 el <- getHTMLElementFromRef ref

141− let

142− inputEl = InputElement.fromHTMLElement =<< el

206+ let inputEl = InputElement.fromHTMLElement =<< el

143 for_ inputEl \ie -> do

207 for_ inputEl \ie -> do

144 v <- InputElement.value ie

208 v <- InputElement.value ie

145 setHasValue (v /= "")

209 setHasValue (v /= "")

146 )

210 )

147 onFocus = handler preventDefault (const $ unless hasFocus $ setHasFocus true)

211 onFocus = handler preventDefault (const $ unless hasFocus $ setHasFocus true)

148 inputWrapper =

212 inputWrapper =

149− div

213+ M.div

214+ </* M.motion

215+ { variants: M.variants containerVariants

216+ , animate: M.animate if hasFocus then containerVariantLabels.focussed else containerVariantLabels.blurred

217+ }

150− </* { className: "ry-input-wrapper"

218+ { className: "ry-input-wrapper"

151− , css: Style.inputWrapper props

219+ , css: Style.inputWrapper props

152− , _data:

220+ , _data:

153− Object.fromHomogeneous

221+ Object.fromHomogeneous

154− { "invalid": aria # Object.lookup "invalid" # fromMaybe ""

222+ { "invalid": aria # Object.lookup "invalid" # fromMaybe ""

155− }

223+ }

156− }

224+ }

157 /> [ leading # foldMap \l -> div </ { ref: leftIconRef } /> [ l ]

225 /> [ leading # foldMap \l -> div </ { ref: leftIconRef } /> [ l ]

158 , emotionInput

226 , emotionInput

159 ref

227 ref

@@ -230,10 +298,8 @@ password =

230 ]

298 ]

231 ]

299 ]

232 ]

300 ]

233− let

234− trailing = props.trailing ?|| eyeCon

301+ let trailing = props.trailing ?|| eyeCon

235− let

236− leading = props.leading ?|| mempty

302+ let leading = props.leading ?|| mempty

237 pure

303 pure

238 $ div

304 $ div

239 </* { className: "ry-input-wrapper"

305 </* { className: "ry-input-wrapper"

src/Yoga/Block/Container/Style.purs+10−9

@@ -89,8 +89,8 @@ mkGlobal maybeMode =

89 }

90 , "::selection":

91 nest

92− { background: str colour.highlight

92+ { color: str colour.highlightText

93− , colour: str colour.highlightText

93+ , background: str colour.highlight

94 }

95 , "*, *:before, *:after":

96 nested

@@ -133,8 +133,8 @@ defaultColours =

133 , required

134 , interfaceBackground: lightBg

135 , interfaceTextDisabled: darken 0.33 lightBg

136− , interfaceBackgroundHighlight: darken 0.07 lightBg

136+ , interfaceBackgroundHighlight: lighten 0.05 lightBg

137− , interfaceBackgroundShadow: darken 0.1 lightBg

137+ , interfaceBackgroundShadow: darken 0.04 lightBg

138 , inputBackground: lightBg

139 , inputBorder: darken 0.1 lightBg

140 , highlight

@@ -166,10 +166,10 @@ defaultColours =

166 , background100: lighten 1.0 darkBg

167 , textInverted: darkBg

168 , backgroundInverted: lightBg

169− , interfaceBackground: lighten 0.4 darkBg

169+ , interfaceBackground: interfaceBackgroundDark

170 , interfaceTextDisabled: lighten 0.8 darkBg

171− , interfaceBackgroundHighlight: lighten 0.5 darkBg

171+ , interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark

172− , interfaceBackgroundShadow: lighten 0.4 darkBg

172+ , interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark

173 , inputBackground: darkBg

174 , inputBorder: lighten 0.17 darkBg

175 , success

@@ -188,11 +188,12 @@ defaultColours =

188 }

189 }

190 where

191− -- highlight = Color.rgb 0x00 0x99 0xFF

192− highlight = Color.hsl 350.0 0.93 0.67

191+ highlight = Color.hsl 270.0 0.90 0.62

193

192

194 highlightDark = Color.rgb 0x88 0x33 0xFF

193 highlightDark = Color.rgb 0x88 0x33 0xFF

195

194

195+ interfaceBackgroundDark = Color.hsl 240.0 0.10 0.33

196+

196 highlightText = Color.rgb 0xFF 0xFF 0xFF

197 highlightText = Color.rgb 0xFF 0xFF 0xFF

197

198

198 success = Color.rgb 20 200 60

199 success = Color.rgb 20 200 60

src/Yoga/Block/Icon/SVG/Icon.purs+2

@@ -6,6 +6,7 @@ module Yoga.Block.Icon.SVG

6 , module Yoga.Block.Icon.SVG.EyeOpen

7 , module Yoga.Block.Icon.SVG.Key

8 , module Yoga.Block.Icon.SVG.SimpleKey

9+ , module Yoga.Block.Icon.SVG.QuestionMark

9 ) where

10 ) where

10

11

11import Yoga.Block.Icon.SVG.On (on)

12import Yoga.Block.Icon.SVG.On (on)

@@ -15,3 +16,4 @@ import Yoga.Block.Icon.SVG.EyeClosed (eyeClosed)

15import Yoga.Block.Icon.SVG.EyeOpen (eyeOpen)

16import Yoga.Block.Icon.SVG.EyeOpen (eyeOpen)

16import Yoga.Block.Icon.SVG.Key (key)

17import Yoga.Block.Icon.SVG.Key (key)

17import Yoga.Block.Icon.SVG.SimpleKey (simpleKey)

18import Yoga.Block.Icon.SVG.SimpleKey (simpleKey)

19+import Yoga.Block.Icon.SVG.QuestionMark (questionMark)

src/Yoga/Block/Icon/SVG/QuestionMark.purs+16−20

@@ -1,25 +1,21 @@

1module Yoga.Block.Icon.SVG.QuestionMark where

2

3import React.Basic (JSX)

4−import React.Basic.DOM as R

5import React.Basic.DOM.SVG as SVG

4import React.Basic.DOM.SVG as SVG

6

5

7−questionMark :: JSX

6+questionMark ∷ JSX

8−questionMark = SVG.svg

7+questionMark =

8+ SVG.svg

9− { viewBox: "0 0 100 100"

9+ { viewBox: "0 0 100 100"

10− , xmlns: "http://www.w3.org/2000/svg"

10+ , xmlns: "http://www.w3.org/2000/svg"

11− , fillRule: "evenodd"

11+ , fillRule: "evenodd"

12− , clipRule: "evenodd"

12+ , clipRule: "evenodd"

13− , strokeLinejoin: "round"

13+ , strokeLinejoin: "round"

14− , strokeMiterlimit: "2"

14+ , strokeMiterlimit: "2"

15− , children:

15+ , children:

16− [ SVG.path

16+ [ SVG.path

17− { fill: "none"

18− , d: "M0 0h100v100H0z"

19− }

20− , SVG.path

21− { d: "M50 10.037c22.056 0 39.963 17.907 39.963 39.963S72.056 89.963 50 89.963 10.037 72.056 10.037 50 27.944 10.037 50 10.037zM48.871 77.03c2.87 0 5.326-2.384 5.351-5.351-.025-2.918-2.481-5.301-5.351-5.301-2.967 0-5.374 2.383-5.35 5.301-.024 2.967 2.383 5.351 5.35 5.351zm-4.255-15.176h8.098v-.632c.049-5.156 1.727-7.515 5.691-9.947 4.474-2.675 7.271-6.323 7.271-11.892 0-8.22-6.396-13.375-15.686-13.375-8.512 0-15.418 4.718-15.661 13.959h8.657c.219-4.572 3.526-6.761 6.955-6.761 3.721 0 6.713 2.481 6.713 6.299 0 3.405-2.262 5.739-5.205 7.587-4.304 2.676-6.785 5.375-6.833 14.13v.632z"

17+ { d: "M50 10.037c22.056 0 39.963 17.907 39.963 39.963S72.056 89.963 50 89.963 10.037 72.056 10.037 50 27.944 10.037 50 10.037zM48.871 77.03c2.87 0 5.326-2.384 5.351-5.351-.025-2.918-2.481-5.301-5.351-5.301-2.967 0-5.374 2.383-5.35 5.301-.024 2.967 2.383 5.351 5.35 5.351zm-4.255-15.176h8.098v-.632c.049-5.156 1.727-7.515 5.691-9.947 4.474-2.675 7.271-6.323 7.271-11.892 0-8.22-6.396-13.375-15.686-13.375-8.512 0-15.418 4.718-15.661 13.959h8.657c.219-4.572 3.526-6.761 6.955-6.761 3.721 0 6.713 2.481 6.713 6.299 0 3.405-2.262 5.739-5.205 7.587-4.304 2.676-6.785 5.375-6.833 14.13v.632z"

22− , fill: "#333"

18+ , fill: "var(--stroke-colour)"

23− }

19+ }

24− ]

20+ ]

25− }

21+ }

src/Yoga/Block/Layout/Cluster/Style.purs+4−2

@@ -13,6 +13,8 @@ type Props f r =

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

14cluster props = styles <>? props.css

15 where

16+ space = props.space ?|| "var(--s1)"

17+

16 styles =

18 styles =

17 css

19 css

18 { "& > *":

20 { "& > *":

@@ -21,10 +23,10 @@ cluster props = styles <>? props.css

21 , flexWrap: wrap

23 , flexWrap: wrap

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

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

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

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

24− , margin: "calc(" <> props.space ?|| "var(--s1)" <> "/2 * -1)" # str

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

25 }

27 }

26 , "& > * > *":

28 , "& > * > *":

27 nest

29 nest

28− { margin: "calc(" <> props.space ?|| "var(--s1)" <> "/2)" # str

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

29 }

31 }

30 }

32 }