rowtype-yoga/ry-blocks
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/ry-blocks.git synced 2024-09-11 21:38:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve colours as usual

Browse Source
This commit is contained in:
Mark Eibes 2022-07-03 22:48:13 +02:00
parent 557f3bbba6
commit ef317eb73e
3 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/Yoga/Block/Container/Story.purs
View File

@ -28,7 +28,12 @@ container =
[ el Box.component { style: css { background: colour.backgroundLayer3 } }
[ el Box.component { style: css { background: colour.backgroundLayer4 } }
[ el Box.component { style: css { background: colour.backgroundLayer5 } }
[]
[ R.div { style: css { color: colour.text }, children: [ R.text "Text" ] }
, R.div { style: css { color: colour.textPaler1 }, children: [ R.text "Text Paler 1" ] }
, R.div { style: css { color: colour.textPaler2 }, children: [ R.text "Text Paler 2" ] }
, R.div { style: css { color: colour.textPaler3 }, children: [ R.text "Text Paler 3" ] }
, R.div { style: css { color: colour.textPaler4 }, children: [ R.text "Text Paler 4" ] }
]
]
]
]
@ -44,6 +49,16 @@ container =
}
[ R.text "Highlight" ]
]
, Block.stack { space: E.str "10px" }
[ Block.box
{ style:
css
{ background: colour.background
, color: colour.highlightTextOnBackground
}
}
[ R.text "Highlight Text on Background" ]
]
, Block.box
{ style:
css

21
src/Yoga/Block/Container/Style.purs
View File

@ -265,6 +265,7 @@ defaultColours =
, highlightRotatedBackwards: highlight # rotateHue (-13.0) # darken 0.05
, highlightRotatedForwards: highlight # rotateHue 3.0 # lighten 0.05 # saturate 0.1
, highlightText
, highlightTextOnBackground: highlight # rotateHue (-10.0) # darken 0.15 # saturate 0.1
, inputBackground: lightBg
, inputBorder: darken 0.07 >>> desaturate 0.2 $ lightBg
, interfaceBackground
@ -288,10 +289,10 @@ defaultColours =
, textPaler3: text # lighten 0.3
, textPaler4: text # lighten 0.4
, textInverted: lightBg
, textInvertedPaler1: lightBg # darken 0.1
, textInvertedPaler2: lightBg # darken 0.2
, textInvertedPaler3: lightBg # darken 0.3
, textInvertedPaler4: lightBg # darken 0.4
, textInvertedPaler1: textDark # darken 0.1 # desaturate 0.2
, textInvertedPaler2: textDark # darken 0.2 # desaturate 0.24
, textInvertedPaler3: textDark # darken 0.3 # desaturate 0.30
, textInvertedPaler4: textDark # darken 0.4 # desaturate 0.30
, boxShadow: boxShadowLight
}
, dark:
@ -329,6 +330,7 @@ defaultColours =
, highlightRotatedBackwards: highlightDark # rotateHue (-30.0)
, highlightRotatedForwards: highlightDark # rotateHue 30.0
, highlightText
, highlightTextOnBackground: highlightDark # rotateHue (-20.0) # lighten 0.14 # saturate 0.8
, inputBackground: darkBg # saturate 0.1 # lighten 0.2
, inputBorder: darkBg # saturate 0.1 # lighten 0.25
, interfaceBackground: interfaceBackgroundDark
@ -347,10 +349,10 @@ defaultColours =
, success: successDark
, successText
, text: textDark
, textPaler1: textDark # darken 0.1 # desaturate 0.25
, textPaler2: textDark # darken 0.2 # desaturate 0.25
, textPaler3: textDark # darken 0.3 # desaturate 0.25
, textPaler4: textDark # darken 0.4 # desaturate 0.25
, textPaler1: textDark # darken 0.1 # desaturate 0.2
, textPaler2: textDark # darken 0.2 # desaturate 0.24
, textPaler3: textDark # darken 0.3 # desaturate 0.30
, textPaler4: textDark # darken 0.4 # desaturate 0.30
, textInverted: darkBg
, textInvertedPaler1: darkBg # lighten 0.1
, textInvertedPaler2: darkBg # lighten 0.2
@ -371,7 +373,7 @@ defaultColours =
highlightDarkBase = Color.hsla 265.0 1.00 0.6
highlightDark = Color.hsla 262.0 1.00 0.63 1.0
highlightDark = Color.hsla 258.0 1.00 0.63 1.0
highlightText = Color.rgb 0xFF 0xFF 0xFF
@ -464,6 +466,7 @@ type FlatTheme a =
, highlightLighter ∷ a
, highlightDisabled ∷ a
, highlightText ∷ a
, highlightTextOnBackground :: a
, success ∷ a
, successText ∷ a
, invalid ∷ a

1
src/Yoga/Block/Internal.js
View File

@ -4,7 +4,6 @@ export function mkForwardRefComponent(displayName) {
return (renderFn) => {
const component = (props, ref) => renderFn(props)(ref)()
component.displayName = displayName
component.whyDidYouRender = true
return forwardRef(component)
}
}