git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
Improve colours as usual
commitef317eb73e1a463d7a4449cea8e530f21ea75a2c authorMark Eibes <mark.eibes@gmail.com> dateSun 3 Jul 2022, 22:48 (4 years ago) parent557f3bb
3 files changed+28−11
compare with main
unifiedsplit
src/Yoga/Block/Container/Story.purs+16−1 src/Yoga/Block/Container/Style.purs+12−9 src/Yoga/Block/Internal.js−1
src/Yoga/Block/Container/Story.purs+16−1
@@ -28,7 +28,12 @@ container =
2828 [ el Box.component { style: css { background: colour.backgroundLayer3 } }
2929 [ el Box.component { style: css { background: colour.backgroundLayer4 } }
3030 [ el Box.component { style: css { background: colour.backgroundLayer5 } }
31− []
31+ [ R.div { style: css { color: colour.text }, children: [ R.text "Text" ] }
32+ , R.div { style: css { color: colour.textPaler1 }, children: [ R.text "Text Paler 1" ] }
33+ , R.div { style: css { color: colour.textPaler2 }, children: [ R.text "Text Paler 2" ] }
34+ , R.div { style: css { color: colour.textPaler3 }, children: [ R.text "Text Paler 3" ] }
35+ , R.div { style: css { color: colour.textPaler4 }, children: [ R.text "Text Paler 4" ] }
36+ ]
3237 ]
3338 ]
3439 ]
@@ -44,6 +49,16 @@ container =
4449 }
4550 [ R.text "Highlight" ]
4651 ]
52+ , Block.stack { space: E.str "10px" }
53+ [ Block.box
54+ { style:
55+ css
56+ { background: colour.background
57+ , color: colour.highlightTextOnBackground
58+ }
59+ }
60+ [ R.text "Highlight Text on Background" ]
61+ ]
4762 , Block.box
4863 { style:
4964 css
src/Yoga/Block/Container/Style.purs+12−9
@@ -265,6 +265,7 @@ defaultColours =
265265 , highlightRotatedBackwards: highlight # rotateHue (-13.0) # darken 0.05
266266 , highlightRotatedForwards: highlight # rotateHue 3.0 # lighten 0.05 # saturate 0.1
267267 , highlightText
268+ , highlightTextOnBackground: highlight # rotateHue (-10.0) # darken 0.15 # saturate 0.1
268269 , inputBackground: lightBg
269270 , inputBorder: darken 0.07 >>> desaturate 0.2 $ lightBg
270271 , interfaceBackground
@@ -288,10 +289,10 @@ defaultColours =
288289 , textPaler3: text # lighten 0.3
289290 , textPaler4: text # lighten 0.4
290291 , textInverted: lightBg
291− , textInvertedPaler1: lightBg # darken 0.1
292− , textInvertedPaler2: lightBg # darken 0.2
293− , textInvertedPaler3: lightBg # darken 0.3
294− , textInvertedPaler4: lightBg # darken 0.4
292+ , textInvertedPaler1: textDark # darken 0.1 # desaturate 0.2
293+ , textInvertedPaler2: textDark # darken 0.2 # desaturate 0.24
294+ , textInvertedPaler3: textDark # darken 0.3 # desaturate 0.30
295+ , textInvertedPaler4: textDark # darken 0.4 # desaturate 0.30
295296 , boxShadow: boxShadowLight
296297 }
297298 , dark:
@@ -329,6 +330,7 @@ defaultColours =
329330 , highlightRotatedBackwards: highlightDark # rotateHue (-30.0)
330331 , highlightRotatedForwards: highlightDark # rotateHue 30.0
331332 , highlightText
333+ , highlightTextOnBackground: highlightDark # rotateHue (-20.0) # lighten 0.14 # saturate 0.8
332334 , inputBackground: darkBg # saturate 0.1 # lighten 0.2
333335 , inputBorder: darkBg # saturate 0.1 # lighten 0.25
334336 , interfaceBackground: interfaceBackgroundDark
@@ -347,10 +349,10 @@ defaultColours =
347349 , success: successDark
348350 , successText
349351 , text: textDark
350− , textPaler1: textDark # darken 0.1 # desaturate 0.25
351− , textPaler2: textDark # darken 0.2 # desaturate 0.25
352− , textPaler3: textDark # darken 0.3 # desaturate 0.25
353− , textPaler4: textDark # darken 0.4 # desaturate 0.25
352+ , textPaler1: textDark # darken 0.1 # desaturate 0.2
353+ , textPaler2: textDark # darken 0.2 # desaturate 0.24
354+ , textPaler3: textDark # darken 0.3 # desaturate 0.30
355+ , textPaler4: textDark # darken 0.4 # desaturate 0.30
354356 , textInverted: darkBg
355357 , textInvertedPaler1: darkBg # lighten 0.1
356358 , textInvertedPaler2: darkBg # lighten 0.2
@@ -371,7 +373,7 @@ defaultColours =
371373
372374 highlightDarkBase = Color.hsla 265.0 1.00 0.6
373375
374− highlightDark = Color.hsla 262.0 1.00 0.63 1.0
376+ highlightDark = Color.hsla 258.0 1.00 0.63 1.0
375377
376378 highlightText = Color.rgb 0xFF 0xFF 0xFF
377379
@@ -464,6 +466,7 @@ type FlatTheme a =
464466 , highlightLighter ∷ a
465467 , highlightDisabled ∷ a
466468 , highlightText ∷ a
469+ , highlightTextOnBackground :: a
467470 , success ∷ a
468471 , successText ∷ a
469472 , invalid ∷ a
src/Yoga/Block/Internal.js−1
@@ -4,7 +4,6 @@ export function mkForwardRefComponent(displayName) {
44 return (renderFn) => {
55 const component = (props, ref) => renderFn(props)(ref)()
66 component.displayName = displayName
7− component.whyDidYouRender = true
87 return forwardRef(component)
98 }
109}