ec683df · rowtype-yoga/ry-blocks

git.iko.soy/rowtype-yoga/ry-blocks

on main help sign in

Colours

ec683dfMark Eibes6 years ago

src/Yoga/Block/Atom/Button/Story.purs+2−1

compare with main

unifiedsplit

@@ -9,6 +9,7 @@ import React.Basic.Emotion as E

9import React.Basic.Events (handler_)

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

11import Yoga.Block.Container.Style as Styles

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

13default ∷

14default ∷

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

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

@@ -32,6 +33,6 @@ button = do

32 [ R.div_

33 [ R.div_

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

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

34 , R.h2_ [ R.text "Generic Button" ]

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

35− , element Button.component { value: "A Generic Button", onClick: handler_ mempty }

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

36 ]

37 ]

38 ]

src/Yoga/Block/Atom/Button/Style.purs+42−6

@@ -1,11 +1,47 @@

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

3import Yoga.Prelude.Style

4+import Data.Interpolate (i)

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

5−type Props f r

7+type Props f r =

6− = ( css ∷ f Style

8+ ( css ∷ f Style

7− | r

9+ | r

8− )

10+ )

10−button :: Style

12+button ∷ Style

11−button = css {}

13+button =

14+ css

15+ { background:

16+ str

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

18+ colour.highlightLighter

19+ ","

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

31+ , borderRadius: var "--s0"

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

33+ , borderWidth: _0

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

35+ nest

36+ { borderRadius: var "--s1"

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

38+ }

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

40+ nest

41+ { borderRadius: _0

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

43+ }

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

45+ nest

46+ {}

47+ }

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

@@ -7,18 +7,18 @@ import Yoga.Block.Atom.Button.Style as Style

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

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

10−type PropsF f

10+type PropsF f =

11− = ( buttonType ∷ f ButtonType

11+ ( buttonType ∷ f ButtonType

12− | Style.Props f ButtonProps

12+ | Style.Props f ButtonProps

13− )

13+ )

15−type Props

15+type Props =

16− = PropsF Id

16+ PropsF Id

18−type PropsOptional

18+type PropsOptional =

19− = PropsF OptionalProp

19+ PropsF OptionalProp

21−key :: forall t1. SProxy t1

21+key ∷ ∀ t1. SProxy t1

22key = SProxy

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

@@ -32,7 +32,7 @@ rawComponent =

32 $ emotionButton propsRef

33 ( props

34 # RB.build

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

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

36 )

37 )

38 { className: "ry-button"

src/Yoga/Block/Atom/Popover/Story.purs+231−222

@@ -60,237 +60,246 @@ popover = do

60 ]

61 ]

62 where

63− mkAutosuggest ∷ Effect (ReactComponent {})

63+ mkAutosuggest ∷ Effect (ReactComponent {})

64− mkAutosuggest = do

64+ mkAutosuggest = do

65− motionStack <- Motion.custom Stack.component

65+ motionStack <- Motion.custom Stack.component

66− motionPopover <- Motion.custom Popover.component

66+ motionPopover <- Motion.custom Popover.component

67− reactComponent "PopoverExample" \props -> React.do

67+ reactComponent "PopoverExample" \props -> React.do

68− referenceElement /\ setReferenceElement <- React.useState' nullRef

68+ referenceElement /\ setReferenceElement <- React.useState' nullRef

69− text /\ setText <- React.useState' ""

69+ text /\ setText <- React.useState' ""

70− visible /\ setVisible <- React.useState' false

70+ visible /\ setVisible <- React.useState' false

71− let

71+ let

72− matchingAuthors =

72+ matchingAuthors =

73− authors

73+ authors

74+ # Array.filter

75+ ( \a ->

74− # Array.filter (\a -> String.contains (String.Pattern (String.toLower text)) (String.toLower a))

76+ String.contains (String.Pattern (String.toLower text))

77+ (String.toLower a)

78+ )

75− let

79+ let

76− inputWrapper =

80+ inputWrapper =

77− R.div'

81+ R.div'

78− </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)

82+ </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)

79− }

83+ }

80− input =

84+ input =

81− Input.component

85+ Input.component

82− </> { id: "author"

86+ </> { id: "author"

83− , type: HTMLInput.Text

87+ , type: HTMLInput.Text

84− , label: nes (SProxy ∷ _ "Author")

88+ , label: nes (SProxy ∷ _ "Author")

85− , placeholder: "e.g. William Shakespeare"

89+ , placeholder: "e.g. William Shakespeare"

86− , value: text

90+ , value: text

87− , style: css { width: "280px" }

91+ , style: css { width: "280px" }

88− , onChange: handler targetValue $ traverse_ setText

92+ , onChange: handler targetValue $ traverse_ setText

89− , onBlur: handler_ (setVisible false)

93+ , onBlur: handler_ (setVisible false)

90− , onFocus: handler_ (setVisible true)

94+ , onFocus: handler_ (setVisible true)

91− , trailing: R.text "▼"

95+ , trailing: R.text "▼"

92− , autoComplete: "off"

96+ , autoComplete: "off"

93− }

94− pop children =

95− elementKeyed motionPopover

96− $ Motion.motion

97− { initial: Motion.initial $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }

98− , exit: Motion.exit $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }

99− , animate: Motion.animate $ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }

100− , transition:

101− Motion.transition

102− $ { type: "spring"

103− , stiffness: 200.0

104− , damping: 20.0

105− , mass: 0.7

106− , delay: 0.3

107− }

108 }

97 }

98+ pop children =

99+ elementKeyed motionPopover

100+ $ Motion.motion

101+ { initial:

102+ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }

103+ , exit:

104+ css { clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }

105+ , animate:

106+ css

107+ { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"

108+ }

109+ , transition:

110+ Motion.transition

111+ $ { type: "spring"

112+ , stiffness: 200.0

113+ , damping: 20.0

114+ , mass: 0.7

115+ , delay: 0.3

116+ }

117+ }

109− { placement: Placement Placement.Bottom (Just Placement.Start)

118+ { placement: Placement Placement.Bottom (Just Placement.Start)

110− , referenceElement

119+ , referenceElement

120+ , style:

121+ css

122+ { boxShadow: "0px 9px 12px rgba(40,40,40,0.5)"

123+ , background: "rgba(50,50,70, 0.7)"

124+ , borderRadius: "9px"

125+ , borderTop: "solid 1px rgba(80,80,100,1.0)"

126+ , overflowY: "scroll"

127+ , maxHeight: "400px"

128+ , width: "300px"

129+ }

130+ , key: "popover"

131+ , children

132+ }

133+ box =

134+ Box.component

111− , style:

135+ </ { style:

112 css

136 css

113− { boxShadow: "0px 9px 12px rgba(40,40,40,0.5)"

114− , background: "rgba(50,50,70, 0.7)"

115− , borderRadius: "9px"

116− , borderTop: "solid 1px rgba(80,80,100,1.0)"

117− , overflowY: "scroll"

118− , maxHeight: "400px"

119− , width: "300px"

120− }

137+ {}

121− , key: "popover"

122− , children

123 }

138 }

124− box =

139+ stack =

125− Box.component

140+ motionStack

126− </ { style:

141+ </ Motion.motion {}

127− css

142+ -- { variants: Motion.variants containerVariants

143+ -- , animate: Motion.animate (if visible then containerVariant.visible else containerVariant.hidden)

144+ -- , layout: Motion.layout true

145+ -- }

128 {}

146 {}

129− }

147+ entry a =

130− stack =

148+ Motion.div

131− motionStack

149+ </ { key: a

132− </ Motion.motion {}

133− -- { variants: Motion.variants containerVariants

134− -- , animate: Motion.animate (if visible then containerVariant.visible else containerVariant.hidden)

135 -- , layout: Motion.layout true

150 -- , layout: Motion.layout true

136− -- }

137− {}

138− entry a =

139− Motion.div

140− </ { key: a

141− -- , layout: Motion.layout true

142− -- , variants: Motion.variants itemVariants

151+ -- , variants: Motion.variants itemVariants

143− }

152+ }

144− /> [ R.text a ]

153+ /> [ R.text a ]

145− pure

154+ pure

146− $ fragment

155+ $ fragment

147− [ inputWrapper [ input ]

156+ [ inputWrapper [ input ]

148− , animatePresence

157+ , animatePresence

149− </ {}

158+ </ {}

150− /> [ guard visible

159+ /> [ guard visible

151− $ pop

160+ $ pop

152− [ box

161+ [ box

153− [ stack (entry <$> matchingAuthors)

162+ [ stack (entry <$> matchingAuthors)

154− ]

163+ ]

155− ]

164+ ]

156− ]

165+ ]

157− ]

166+ ]

158− where

167+ where

159− itemVariants ∷

168+ itemVariants ∷

160− { hidden ∷ CSS

169+ { hidden ∷ CSS

161− , visible ∷ CSS

170+ , visible ∷ CSS

162− }

163− itemVariants =

164− { visible:

165− css

166− { left: 0

167 }

171 }

172+ itemVariants =

173+ { visible:

174+ css

175+ { left: 0

176+ }

168− , hidden:

177+ , hidden:

169− css

178+ css

170− { left: -20

179+ { left: -20

180+ }

171 }

181 }

172− }

173

182

174− containerVariants ∷

183+ containerVariants ∷

175− { hidden ∷ CSS

184+ { hidden ∷ CSS

176− , visible ∷ CSS

185+ , visible ∷ CSS

177− }

178− containerVariants =

179− { visible:

180− css

181− { transition: { when: "beforeChildren" }

182− , staggerChildren: 0.3

183− , opacity: 1

184 }

186 }

185− , hidden:

187+ containerVariants =

188+ { visible:

186− css

189+ css

190+ { transition: { when: "beforeChildren" }

191+ , staggerChildren: 0.3

192+ , opacity: 1

193+ }

194+ , hidden:

195+ css

187− { transition: { when: "afterChildren" }

196+ { transition: { when: "afterChildren" }

188− , opacity: 0

197+ , opacity: 0

198+ }

189 }

199 }

190− }

191

200

192− containerVariant ∷

201+ containerVariant ∷

193− { hidden ∷ Motion.VariantLabel

202+ { hidden ∷ Motion.VariantLabel

194− , visible ∷ Motion.VariantLabel

203+ , visible ∷ Motion.VariantLabel

195− }

204+ }

196− containerVariant = Motion.makeVariantLabels containerVariants

205+ containerVariant = Motion.makeVariantLabels containerVariants

197

206

198− authors =

207+ authors =

199− [ "William Shakespeare"

208+ [ "William Shakespeare"

200− , "Agatha Christie"

209+ , "Agatha Christie"

201− , "Barbara Cartland"

210+ , "Barbara Cartland"

202− , "Danielle Steel"

211+ , "Danielle Steel"

203− , "Harold Robbins"

212+ , "Harold Robbins"

204− , "Georges Simenon"

213+ , "Georges Simenon"

205− , "Enid Blyton"

214+ , "Enid Blyton"

206− , "Sidney Sheldon"

215+ , "Sidney Sheldon"

207− , "J. K. Rowling"

216+ , "J. K. Rowling"

208− , "Gilbert Patten"

217+ , "Gilbert Patten"

209− , "Dr. Seuss"

218+ , "Dr. Seuss"

210− , "Eiichiro Oda"

219+ , "Eiichiro Oda"

211− , "Leo Tolstoy"

220+ , "Leo Tolstoy"

212− , "Corín Tellado"

221+ , "Corín Tellado"

213− , "Jackie Collins"

222+ , "Jackie Collins"

214− , "Horatio Alger"

223+ , "Horatio Alger"

215− , "R. L. Stine"

224+ , "R. L. Stine"

216− , "Dean Koontz"

225+ , "Dean Koontz"

217− , "Nora Roberts"

226+ , "Nora Roberts"

218− , "Alexander Pushkin"

227+ , "Alexander Pushkin"

219− , "Stephen King"

228+ , "Stephen King"

220− , "Paulo Coelho"

229+ , "Paulo Coelho"

221− , "Jeffrey Archer"

230+ , "Jeffrey Archer"

222− , "Louis L'Amour"

231+ , "Louis L'Amour"

223− , "Jirō Akagawa"

232+ , "Jirō Akagawa"

224− , "René Goscinny"

233+ , "René Goscinny"

225− , "Erle Stanley Gardner"

234+ , "Erle Stanley Gardner"

226− , "Edgar Wallace"

235+ , "Edgar Wallace"

227− , "Jin Yong"

236+ , "Jin Yong"

228− , "Janet Dailey"

237+ , "Janet Dailey"

229− , "Robert Ludlum"

238+ , "Robert Ludlum"

230− , "Akira Toriyama"

239+ , "Akira Toriyama"

231− , "Osamu Tezuka"

240+ , "Osamu Tezuka"

232− , "James Patterson"

241+ , "James Patterson"

233− , "Frédéric Dard"

242+ , "Frédéric Dard"

234− , "Stan and Jan Berenstain"

243+ , "Stan and Jan Berenstain"

235− , "Roald Dahl"

244+ , "Roald Dahl"

236− , "John Grisham"

245+ , "John Grisham"

237− , "Zane Grey"

246+ , "Zane Grey"

238− , "Irving Wallace"

247+ , "Irving Wallace"

239− , "J. R. R. Tolkien"

248+ , "J. R. R. Tolkien"

240− , "Masashi Kishimoto"

249+ , "Masashi Kishimoto"

241− , "Karl May"

250+ , "Karl May"

242− , "Carter Brown"

251+ , "Carter Brown"

243− , "Mickey Spillane"

252+ , "Mickey Spillane"

244− , "C. S. Lewis"

253+ , "C. S. Lewis"

245− , "Kyotaro Nishimura"

254+ , "Kyotaro Nishimura"

246− , "Mitsuru Adachi"

255+ , "Mitsuru Adachi"

247− , "Rumiko Takahashi"

256+ , "Rumiko Takahashi"

248− , "Gosho Aoyama"

257+ , "Gosho Aoyama"

249− , "Dan Brown"

258+ , "Dan Brown"

250− , "Ann M. Martin"

259+ , "Ann M. Martin"

251− , "Ryōtarō Shiba"

260+ , "Ryōtarō Shiba"

252− , "Arthur Hailey"

261+ , "Arthur Hailey"

253− , "Gérard de Villiers"

262+ , "Gérard de Villiers"

254− , "Beatrix Potter"

263+ , "Beatrix Potter"

255− , "Michael Crichton"

264+ , "Michael Crichton"

256− , "Richard Scarry"

265+ , "Richard Scarry"

257− , "Clive Cussler"

266+ , "Clive Cussler"

258− , "Alistair MacLean"

267+ , "Alistair MacLean"

259− , "Ken Follett"

268+ , "Ken Follett"

260− , "Astrid Lindgren"

269+ , "Astrid Lindgren"

261− , "Debbie Macomber"

270+ , "Debbie Macomber"

262− , "EL James"

271+ , "EL James"

263− , "Tite Kubo"

272+ , "Tite Kubo"

264− , "Eiji Yoshikawa"

273+ , "Eiji Yoshikawa"

265− , "Catherine Cookson"

274+ , "Catherine Cookson"

266− , "Stephenie Meyer"

275+ , "Stephenie Meyer"

267− , "Norman Bridwell"

276+ , "Norman Bridwell"

268− , "David Baldacci"

277+ , "David Baldacci"

269− , "Nicholas Sparks"

278+ , "Nicholas Sparks"

270− , "Hirohiko Araki"

279+ , "Hirohiko Araki"

271− , "Evan Hunter"

280+ , "Evan Hunter"

272− , "Andrew Neiderman"

281+ , "Andrew Neiderman"

273− , "Roger Hargreaves"

282+ , "Roger Hargreaves"

274− , "Anne Rice"

283+ , "Anne Rice"

275− , "Robin Cook"

284+ , "Robin Cook"

276− , "Wilbur Smith"

285+ , "Wilbur Smith"

277− , "Erskine Caldwell"

286+ , "Erskine Caldwell"

278− , "Judith Krantz"

287+ , "Judith Krantz"

279− , "Eleanor Hibbert"

288+ , "Eleanor Hibbert"

280− , "Lewis Carroll"

289+ , "Lewis Carroll"

281− , "Denise Robins"

290+ , "Denise Robins"

282− , "Cao Xueqin"

291+ , "Cao Xueqin"

283− , "Ian Fleming"

292+ , "Ian Fleming"

284− , "Hermann Hesse"

293+ , "Hermann Hesse"

285− , "Rex Stout"

294+ , "Rex Stout"

286− , "Anne Golon"

295+ , "Anne Golon"

287− , "Frank G. Slaughter"

296+ , "Frank G. Slaughter"

288− , "Edgar Rice Burroughs"

297+ , "Edgar Rice Burroughs"

289− , "John Creasey"

298+ , "John Creasey"

290− , "James A. Michener"

299+ , "James A. Michener"

291− , "Yasuo Uchida"

300+ , "Yasuo Uchida"

292− , "Seiichi Morimura"

301+ , "Seiichi Morimura"

293− , "Mary Higgins Clark"

302+ , "Mary Higgins Clark"

294− , "Penny Jordan"

303+ , "Penny Jordan"

295− , "Patricia Cornwell"

304+ , "Patricia Cornwell"

296− ]

305+ ]

src/Yoga/Block/Container/Style.purs+20−1

@@ -90,6 +90,7 @@ mkGlobal maybeMode =

90 , "::selection":

91 nest

92 { background: str colour.highlight

93+ , colour: str colour.highlightText

93 }

94 }

94 , "*, *:before, *:after":

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

95 nested

96 nested

@@ -98,6 +99,11 @@ mkGlobal maybeMode =

98 }

99 }

100 }

100

101

102+withAlpha ∷ Number -> Color -> Color

103+withAlpha alpha c1 = Color.rgba' r g b alpha

104+ where

105+ { r, g, b } = Color.toRGBA' c1

106+

101defaultColours ∷ Colours

107defaultColours ∷ Colours

102defaultColours =

108defaultColours =

103 { light:

109 { light:

@@ -132,6 +138,10 @@ defaultColours =

132 , inputBackground: lightBg

138 , inputBackground: lightBg

133 , inputBorder: darken 0.1 lightBg

139 , inputBorder: darken 0.1 lightBg

134 , highlight

140 , highlight

141+ , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)

142+ , highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)

143+ , highlightRotatedForwards: highlight # rotateHue 30.0

144+ , highlightRotatedBackwards: highlight # rotateHue (-30.0)

135 , highlightText

145 , highlightText

136 , text: textLightTheme

146 , text: textLightTheme

137 , placeholderText: lighten 0.4 darkBg

147 , placeholderText: lighten 0.4 darkBg

@@ -168,13 +178,18 @@ defaultColours =

168 , invalid

178 , invalid

169 , invalidText

179 , invalidText

170 , highlight: highlightDark

180 , highlight: highlightDark

181+ , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)

182+ , highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)

183+ , highlightRotatedForwards: highlightDark # rotateHue 30.0

184+ , highlightRotatedBackwards: highlightDark # rotateHue (-30.0)

171 , highlightText

185 , highlightText

172 , text: lightBg

186 , text: lightBg

173 , placeholderText: darken 0.4 lightBg

187 , placeholderText: darken 0.4 lightBg

174 }

188 }

175 }

189 }

176 where

190 where

177− highlight = Color.rgb 0x00 0x99 0xFF

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

192+ highlight = Color.hsl 350.0 0.93 0.67

178

193

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

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

180

195

@@ -222,6 +237,10 @@ type FlatTheme a =

222 , inputBackground ∷ a

237 , inputBackground ∷ a

223 , inputBorder ∷ a

238 , inputBorder ∷ a

224 , highlight ∷ a

239 , highlight ∷ a

240+ , highlightRotatedBackwards ∷ a

241+ , highlightRotatedForwards ∷ a

242+ , highlightDarker ∷ a

243+ , highlightLighter ∷ a

225 , highlightText ∷ a

244 , highlightText ∷ a

226 , success ∷ a

245 , success ∷ a

227 , successText ∷ a

246 , successText ∷ a