mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Improve colours as usual
This commit is contained in:
parent
557f3bbba6
commit
ef317eb73e
@ -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
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user