mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-11-08 23:07:08 +03:00
Segmented
This commit is contained in:
Mark Eibes
parent
89527fa26e
commit
46f147a5e2
@ -4,10 +4,10 @@ import Yoga.Prelude.Style
|
||||
import Data.Interpolate (i)
|
||||
import Yoga.Block.Container.Style (colour)
|
||||
|
||||
type Props f r
|
||||
= ( css ∷ f Style
|
||||
| r
|
||||
)
|
||||
type Props f r =
|
||||
( css ∷ f Style
|
||||
| r
|
||||
)
|
||||
|
||||
gradientBackground ∷ StyleProperty
|
||||
gradientBackground =
|
||||
@ -34,11 +34,11 @@ backgroundAnimation =
|
||||
button ∷ Style
|
||||
button =
|
||||
css
|
||||
{ background: str colour.interfaceBackground
|
||||
{ background: str colour.backgroundLayer4
|
||||
, boxShadow: str "0 1px 4px rgba(0,0,0,0.30)"
|
||||
, border: str $ i "1px solid transparent"
|
||||
, borderTop: str $ i "1px solid " colour.interfaceBackgroundHighlight
|
||||
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, borderTop: str $ i "1px solid " colour.backgroundLayer5
|
||||
, borderBottom: str $ i "1px solid " colour.backgroundLayer3
|
||||
, display: inlineFlex
|
||||
, padding: str "calc(var(--s-1) * 0.8) var(--s0)"
|
||||
, paddingBottom: str "calc(var(--s-1) * 0.8 + 1px)"
|
||||
@ -54,61 +54,61 @@ button =
|
||||
, userSelect: none
|
||||
, transition: str "all 0.2s ease-out" <> str "transform 50ms ease-in"
|
||||
, """&[data-button-shape="pill"]""":
|
||||
nest
|
||||
{ borderRadius: str "calc(var(--s1) * 0.85)"
|
||||
, padding: str "calc(var(--s-1) * 0.85) var(--s0)"
|
||||
, paddingBottom: str "calc(var(--s-1))"
|
||||
}
|
||||
nest
|
||||
{ borderRadius: str "calc(var(--s1) * 0.85)"
|
||||
, padding: str "calc(var(--s-1) * 0.85) var(--s0)"
|
||||
, paddingBottom: str "calc(var(--s-1))"
|
||||
}
|
||||
, """&[data-button-type="primary"]""":
|
||||
nest
|
||||
{ background: gradientBackground
|
||||
, backgroundSize: str "200% 200%"
|
||||
, fontWeight: str "600"
|
||||
, letterSpacing: str "calc(var(--s-5)* (0.1))"
|
||||
, animation: backgroundAnimation <> str " alternate ease-out 10s infinite"
|
||||
, boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"
|
||||
, borderColor: str "transparent"
|
||||
, color: str colour.highlightText
|
||||
, """&:focus-visible""":
|
||||
nest
|
||||
{ borderColor: str "inherit"
|
||||
}
|
||||
, """&:active""":
|
||||
nest
|
||||
{ boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"
|
||||
, border: str $ i "1px solid transparent"
|
||||
}
|
||||
, "&:disabled":
|
||||
nest
|
||||
{ background: str colour.highlightDisabled
|
||||
}
|
||||
}
|
||||
nest
|
||||
{ background: gradientBackground
|
||||
, backgroundSize: str "200% 200%"
|
||||
, fontWeight: str "600"
|
||||
, letterSpacing: str "calc(var(--s-5)* (0.1))"
|
||||
, animation: backgroundAnimation <> str " alternate ease-out 10s infinite"
|
||||
, boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"
|
||||
, borderColor: str "transparent"
|
||||
, color: str colour.highlightText
|
||||
, """&:focus-visible""":
|
||||
nest
|
||||
{ borderColor: str "inherit"
|
||||
}
|
||||
, """&:active""":
|
||||
nest
|
||||
{ boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"
|
||||
, border: str $ i "1px solid transparent"
|
||||
}
|
||||
, "&:disabled":
|
||||
nest
|
||||
{ background: str colour.highlightDisabled
|
||||
}
|
||||
}
|
||||
, """&[data-button-type="dangerous"]""":
|
||||
nest
|
||||
{ color: str $ colour.interfaceDangerousText
|
||||
, background: str $ colour.interfaceBackgroundDangerous
|
||||
, fontWeight: str "600"
|
||||
, letterSpacing: str "calc(var(--s-5) * -0.10)"
|
||||
}
|
||||
nest
|
||||
{ color: str $ colour.interfaceDangerousText
|
||||
, background: str $ colour.interfaceBackgroundDangerous
|
||||
, fontWeight: str "600"
|
||||
, letterSpacing: str "calc(var(--s-5) * -0.10)"
|
||||
}
|
||||
, """&:focus""": nest { outline: none }
|
||||
, """&:focus-visible""":
|
||||
nest
|
||||
{ boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
|
||||
}
|
||||
nest
|
||||
{ boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
|
||||
}
|
||||
, """&:active""":
|
||||
nest
|
||||
{ boxShadow: str $ "inset 0 1px var(--s-1) rgba(0,0,0,0.20)"
|
||||
, borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, transform: str "scale3d(0.95,0.95,0.95)"
|
||||
, transition: str "transform 50ms ease"
|
||||
}
|
||||
nest
|
||||
{ boxShadow: str $ "inset 0 1px var(--s-1) rgba(0,0,0,0.20)"
|
||||
, borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, transform: str "scale3d(0.95,0.95,0.95)"
|
||||
, transition: str "transform 50ms ease"
|
||||
}
|
||||
, "&:disabled":
|
||||
nest
|
||||
{ color: str colour.interfaceTextDisabled
|
||||
, boxShadow: none
|
||||
, background: str colour.interfaceBackgroundDisabled
|
||||
, borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
}
|
||||
nest
|
||||
{ color: str colour.interfaceTextDisabled
|
||||
, boxShadow: none
|
||||
, background: str colour.interfaceBackgroundDisabled
|
||||
, borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,46 +153,46 @@ leftIconContainer =
|
||||
inputContainer ∷ ∀ r. { | Props OptionalProp r } -> Style
|
||||
inputContainer props = theCss <>? props.css
|
||||
where
|
||||
theCss =
|
||||
css
|
||||
{ position: relative
|
||||
, boxSizing: borderBox
|
||||
, backgroundColor: str colour.inputBackground
|
||||
, display: flex
|
||||
, width: str "calc(var(--s4) * 2)"
|
||||
, "--left-icon-size": var "--s0"
|
||||
, "--right-icon-size": str "calc(var(--s0) * 1.2)"
|
||||
, "--input-border-radius": var "--s-1"
|
||||
, "--input-side-padding": var "--s-1"
|
||||
, "--input-top-padding": var "--s-5"
|
||||
, "--input-bottom-padding": var "--s-5"
|
||||
, alignItems: center
|
||||
, justifyContent: center
|
||||
, paddingLeft: str "calc(var(--input-side-padding) - var(--border-width))"
|
||||
, paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"
|
||||
, paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"
|
||||
, paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"
|
||||
, gap: str "calc(var(--input-side-padding) / 2)"
|
||||
, "--border-width": str "1px"
|
||||
, border: str $ "var(--border-width) solid " <> colour.inputBorder
|
||||
, borderRadius: var "--input-border-radius"
|
||||
, """&[data-invalid="false"]""":
|
||||
nest
|
||||
{ borderColor: str colour.success
|
||||
, "--border-width": str "var(--s-5)"
|
||||
}
|
||||
, """&[data-invalid="true"]""":
|
||||
nest
|
||||
{ borderColor: str colour.invalid
|
||||
, "--border-width": str "var(--s-5)"
|
||||
}
|
||||
, "&:focus-within":
|
||||
nest
|
||||
{ "--border-width": str "var(--s-5)"
|
||||
, borderColor: str colour.highlight
|
||||
, transition: str "border-color 0s linear 0.1s"
|
||||
}
|
||||
}
|
||||
theCss =
|
||||
css
|
||||
{ position: relative
|
||||
, boxSizing: borderBox
|
||||
, backgroundColor: str colour.inputBackground
|
||||
, display: flex
|
||||
, width: str "calc(var(--s4) * 2)"
|
||||
, "--left-icon-size": var "--s0"
|
||||
, "--right-icon-size": str "calc(var(--s0) * 1.2)"
|
||||
, "--input-border-radius": var "--s-1"
|
||||
, "--input-side-padding": var "--s-1"
|
||||
, "--input-top-padding": var "--s-5"
|
||||
, "--input-bottom-padding": var "--s-5"
|
||||
, alignItems: center
|
||||
, justifyContent: center
|
||||
, paddingLeft: str "calc(var(--input-side-padding) - var(--border-width))"
|
||||
, paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"
|
||||
, paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"
|
||||
, paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"
|
||||
, gap: str "calc(var(--input-side-padding) / 2)"
|
||||
, "--border-width": str "1px"
|
||||
, border: str $ "var(--border-width) solid " <> colour.inputBorder
|
||||
, borderRadius: var "--input-border-radius"
|
||||
, """&[data-invalid="false"]""":
|
||||
nest
|
||||
{ borderColor: str colour.success
|
||||
, "--border-width": str "2px"
|
||||
}
|
||||
, """&[data-invalid="true"]""":
|
||||
nest
|
||||
{ borderColor: str colour.invalid
|
||||
, "--border-width": str "2px)"
|
||||
}
|
||||
, "&:focus-within":
|
||||
nest
|
||||
{ "--border-width": str "2px"
|
||||
, borderColor: str colour.highlight
|
||||
, transition: str "border-color 0s linear 0.1s"
|
||||
}
|
||||
}
|
||||
|
||||
inputWrapper ∷ Style
|
||||
inputWrapper =
|
||||
|
||||
@ -13,9 +13,10 @@ cluster ∷ Style
|
||||
cluster =
|
||||
css
|
||||
{ overflow: visible
|
||||
, flex: str "1"
|
||||
, display: str "inline-flex"
|
||||
, userSelect: none
|
||||
, padding: _0
|
||||
, margin: _0
|
||||
}
|
||||
|
||||
segmented ∷ Style
|
||||
@ -27,13 +28,14 @@ segmented = styles
|
||||
, margin: _0
|
||||
, width: auto
|
||||
, display: flex
|
||||
, boxSizing: borderBox
|
||||
, flex: str "1"
|
||||
, minHeight: str "min-content"
|
||||
, background: str colour.backgroundLayer3
|
||||
, background: str colour.backgroundLayer2
|
||||
, boxShadow: str "inset 0 1 0 rgba(0,0,0,0.1)"
|
||||
, borderRadius: str "calc(var(--s-1) * 0.8)"
|
||||
, border: str $ i "1px solid " colour.interfaceBackground
|
||||
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, border: str $ i "1px solid " colour.backgroundLayer1
|
||||
, borderBottom: str $ i "1px solid " colour.backgroundLayer1
|
||||
, padding: _0
|
||||
, overflow: visible
|
||||
, userSelect: none
|
||||
@ -43,21 +45,27 @@ activeElementWrapper ∷ Style
|
||||
activeElementWrapper =
|
||||
css
|
||||
{ position: relative
|
||||
, boxSizing: borderBox
|
||||
, width: str "0"
|
||||
, height: str "100%"
|
||||
, overflow: visible
|
||||
, padding: _0
|
||||
, margin: _0
|
||||
}
|
||||
|
||||
activeElement ∷ Style
|
||||
activeElement =
|
||||
css
|
||||
{ position: absolute
|
||||
, boxSizing: borderBox
|
||||
, display: block
|
||||
, borderRadius: str "calc(var(--s-1) * 0.8)"
|
||||
, background: str colour.backgroundLayer5
|
||||
, borderTop: str $ i "1px solid " colour.interfaceBackgroundHighlight
|
||||
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
|
||||
, background: str colour.backgroundLayer4
|
||||
, borderTop: str $ i "1px solid " colour.backgroundLayer5
|
||||
, borderBottom: str $ i "1px solid " colour.backgroundLayer3
|
||||
, boxShadow: str "0 1px 2px rgba(20,20,20,0.67)"
|
||||
, padding: _0
|
||||
, margin: _0
|
||||
, zIndex: str "3"
|
||||
}
|
||||
|
||||
@ -71,8 +79,7 @@ button { isFirst, isLast } =
|
||||
, border: none
|
||||
, padding: _0
|
||||
, fontSize: str "var(--s0)"
|
||||
, marginLeft: _0
|
||||
, marginRight: _0
|
||||
, margin: _0
|
||||
, boxSizing: borderBox
|
||||
, zIndex: str "3"
|
||||
, minWidth: var "--s2"
|
||||
@ -91,15 +98,15 @@ buttonContent { isFirst, isLast } =
|
||||
css
|
||||
{ "&:active": nest { outline: str "0" }
|
||||
, "&:focus": nest { outline: none }
|
||||
, paddingTop: str "1px"
|
||||
, paddingBottom: str "1px"
|
||||
, margin: _0
|
||||
, paddingTop: str "var(--s-5)"
|
||||
, paddingBottom: str "var(--s-4)"
|
||||
, paddingLeft: str if isFirst then edgePadding else inBetweenPadding
|
||||
, paddingRight: str if isLast then edgePadding else inBetweenPadding
|
||||
, borderRadius: str "calc(var(--s-1) * 0.75)"
|
||||
, border: str $ i borderSize " solid transparent"
|
||||
, display: flex
|
||||
, alignItems: center
|
||||
, outlineRight: str "1px solid red"
|
||||
, justifyContent: center
|
||||
, overflow: visible
|
||||
, userSelect: none
|
||||
|
||||
@ -98,10 +98,15 @@ component =
|
||||
}
|
||||
, onDragStart:
|
||||
Motion.onDragStart \_ pi -> do
|
||||
setDragX (Just pi.point.x)
|
||||
maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
|
||||
for_ maybeBbox \bbox ->
|
||||
setDragX (Just (pi.point.x - bbox.left))
|
||||
, onDrag:
|
||||
Motion.onDrag \_ pi -> do
|
||||
when (isJust maybeDragX) $ setDragX (Just pi.point.x)
|
||||
when (isJust maybeDragX) do
|
||||
maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
|
||||
for_ maybeBbox \bbox ->
|
||||
setDragX (Just (pi.point.x - bbox.left))
|
||||
, onDragEnd:
|
||||
Motion.onDragEnd \_ pi -> do
|
||||
let
|
||||
|
||||
@ -38,7 +38,7 @@ theToggle =
|
||||
css
|
||||
{ width: str "calc(var(--s2) * 0.85)"
|
||||
, height: str "calc(var(--s2) * 0.85)"
|
||||
, background: str $ colour.interfaceBackground
|
||||
, background: str $ colour.backgroundLayer4
|
||||
, border: none
|
||||
, borderRadius: str $ "calc(var(--s2) / 2)"
|
||||
, position: absolute
|
||||
|
||||
@ -31,113 +31,113 @@ mkGlobal ∷ Maybe DarkOrLightMode -> Style
|
||||
mkGlobal maybeMode =
|
||||
css
|
||||
{ "body, html":
|
||||
nested
|
||||
$ css
|
||||
{ minHeight: 100.0 # vh
|
||||
, minWidth: 100.0 # vw
|
||||
, lineHeight: str "1.15"
|
||||
, "WebkitTextSizeAdjust": _100percent
|
||||
, transition: str "background,color 0.33s ease-in"
|
||||
}
|
||||
nested
|
||||
$ css
|
||||
{ minHeight: 100.0 # vh
|
||||
, minWidth: 100.0 # vw
|
||||
, lineHeight: str "1.15"
|
||||
, "WebkitTextSizeAdjust": _100percent
|
||||
, transition: str "background,color 0.33s ease-in"
|
||||
}
|
||||
, ":root":
|
||||
nested $ variables
|
||||
<> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }
|
||||
nested $ variables
|
||||
<> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }
|
||||
, html:
|
||||
nested
|
||||
$ css
|
||||
{ boxSizing: str "border-box"
|
||||
}
|
||||
nested
|
||||
$ css
|
||||
{ boxSizing: str "border-box"
|
||||
}
|
||||
, body:
|
||||
nested
|
||||
$ css
|
||||
{ fontFamily: str "var(--main-font)"
|
||||
, background: str colour.background
|
||||
, color: str colour.text
|
||||
, margin: str "0"
|
||||
}
|
||||
<> case maybeMode of
|
||||
Nothing -> autoSwitchColourTheme
|
||||
Just DarkMode -> darkModeStyle
|
||||
Just LightMode -> lightModeStyle
|
||||
nested
|
||||
$ css
|
||||
{ fontFamily: str "var(--main-font)"
|
||||
, background: str colour.background
|
||||
, color: str colour.text
|
||||
, margin: str "0"
|
||||
}
|
||||
<> case maybeMode of
|
||||
Nothing -> autoSwitchColourTheme
|
||||
Just DarkMode -> darkModeStyle
|
||||
Just LightMode -> lightModeStyle
|
||||
, "pre,code":
|
||||
nest
|
||||
{ fontFamily: str "var(--mono-font)"
|
||||
}
|
||||
nest
|
||||
{ fontFamily: str "var(--mono-font)"
|
||||
}
|
||||
, "h1,h2,h3,h4":
|
||||
nest
|
||||
{ lineHeight: var "--line-height-small"
|
||||
, fontWeight: str "700"
|
||||
, marginTop: str "var(--s-3)"
|
||||
}
|
||||
nest
|
||||
{ lineHeight: var "--line-height-small"
|
||||
, fontWeight: str "700"
|
||||
, marginTop: str "var(--s-3)"
|
||||
}
|
||||
, h1:
|
||||
nested
|
||||
$ css
|
||||
{ "--h1size": str "calc( min( var(--s2) + 2vw , var(--s4) ) )"
|
||||
, fontSize: var "--h1size"
|
||||
, letterSpacing: str "calc(var(--h1size) * -0.04)"
|
||||
}
|
||||
nested
|
||||
$ css
|
||||
{ "--h1size": str "calc( min( var(--s2) + 2vw , var(--s4) ) )"
|
||||
, fontSize: var "--h1size"
|
||||
, letterSpacing: str "calc(var(--h1size) * -0.04)"
|
||||
}
|
||||
, h2:
|
||||
nested
|
||||
$ css
|
||||
{ "--h2size": str "calc( min( var(--s1) + 2vw , var(--s3) ) )"
|
||||
, fontSize: var "--h2size"
|
||||
, letterSpacing: str "calc(var(--h2size) * -0.035)"
|
||||
}
|
||||
nested
|
||||
$ css
|
||||
{ "--h2size": str "calc( min( (var(--s1)*1.1) + 2vw , var(--s3) ) )"
|
||||
, fontSize: var "--h2size"
|
||||
, letterSpacing: str "calc(var(--h2size) * -0.035)"
|
||||
}
|
||||
, h3:
|
||||
nested
|
||||
$ css
|
||||
{ "--h3size": str "calc( min( var(--s0) + 2vw , var(--s2) ) )"
|
||||
, fontSize: var "--h3size"
|
||||
, letterSpacing: str "calc(var(--h3size) * -0.03)"
|
||||
}
|
||||
nested
|
||||
$ css
|
||||
{ "--h3size": str "calc( min( var(--s0) + 2vw , var(--s2) ) )"
|
||||
, fontSize: var "--h3size"
|
||||
, letterSpacing: str "calc(var(--h3size) * -0.03)"
|
||||
}
|
||||
, p:
|
||||
nested
|
||||
$ css
|
||||
{ "--psize": str "calc( min( var(--s-2) + 2.7vw , var(--s0)*1.1 ) )"
|
||||
, fontSize: var "--psize"
|
||||
, letterSpacing: str "calc(var(--psize) * -0.03)"
|
||||
}
|
||||
nested
|
||||
$ css
|
||||
{ "--psize": str "calc( min( (var(--s-1) * 1.7) + 0.7vw , var(--s0)*1.1 ) )"
|
||||
, fontSize: var "--psize"
|
||||
, letterSpacing: str "calc(var(--psize) * -0.03)"
|
||||
}
|
||||
, a:
|
||||
nest
|
||||
{ color: str colour.text
|
||||
, textDecorationColor: str colour.text
|
||||
, "&:hover":
|
||||
nest
|
||||
{ color: str colour.text
|
||||
, textDecorationColor: str colour.highlight
|
||||
}
|
||||
, "&:visited":
|
||||
nest
|
||||
{ color: str colour.text
|
||||
, textDecorationColor: str colour.backgroundLayer1
|
||||
}
|
||||
}
|
||||
nest
|
||||
{ color: str colour.text
|
||||
, textDecorationColor: str colour.text
|
||||
, "&:hover":
|
||||
nest
|
||||
{ color: str colour.text
|
||||
, textDecorationColor: str colour.highlight
|
||||
}
|
||||
, "&:visited":
|
||||
nest
|
||||
{ color: str colour.text
|
||||
, textDecorationColor: str colour.backgroundLayer1
|
||||
}
|
||||
}
|
||||
, "::selection":
|
||||
nest
|
||||
{ color: str colour.highlightText
|
||||
, background: str colour.highlight
|
||||
}
|
||||
nest
|
||||
{ color: str colour.highlightText
|
||||
, background: str colour.highlight
|
||||
}
|
||||
, "*, *:before, *:after":
|
||||
nested
|
||||
$ css
|
||||
{ boxSizing: str "inherit"
|
||||
, "::selection":
|
||||
nest
|
||||
{ color: str colour.highlightText
|
||||
, background: str colour.highlight
|
||||
}
|
||||
, fontFeatureSettings:
|
||||
str
|
||||
$ intercalate ","
|
||||
$ show
|
||||
<$> [ "ss03" -- curved r
|
||||
, "cv03" -- open six
|
||||
, "cv04" -- open nine
|
||||
-- , "cv05" -- lower case l with tail
|
||||
, "cv07" -- German double-s
|
||||
, "cv09" -- Flat top three
|
||||
]
|
||||
}
|
||||
nested
|
||||
$ css
|
||||
{ boxSizing: str "inherit"
|
||||
, "::selection":
|
||||
nest
|
||||
{ color: str colour.highlightText
|
||||
, background: str colour.highlight
|
||||
}
|
||||
, fontFeatureSettings:
|
||||
str
|
||||
$ intercalate ","
|
||||
$ show
|
||||
<$> [ "ss03" -- curved r
|
||||
, "cv03" -- open six
|
||||
, "cv04" -- open nine
|
||||
-- , "cv05" -- lower case l with tail
|
||||
, "cv07" -- German double-s
|
||||
, "cv09" -- Flat top three
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
withAlpha ∷ Number -> Color -> Color
|
||||
@ -148,74 +148,74 @@ withAlpha alpha c1 = Color.rgba' r g b alpha
|
||||
defaultColours ∷ Colours
|
||||
defaultColours =
|
||||
{ light:
|
||||
{ background: lightBg
|
||||
, backgroundLayer1: darken 0.20 >>> saturate 0.04 $ lightBg
|
||||
, backgroundLayer2: darken 0.15 >>> saturate 0.07 $ lightBg
|
||||
, backgroundLayer3: darken 0.10 >>> saturate 0.09 $ lightBg
|
||||
, backgroundLayer4: darken 0.05 >>> saturate 0.12 $ lightBg
|
||||
, backgroundLayer5: lightBg
|
||||
, backgroundInverted: darken 0.85 lightBg
|
||||
, textInverted: lightBg
|
||||
, success
|
||||
, successText
|
||||
, invalid
|
||||
, invalidText
|
||||
, required
|
||||
, interfaceBackground
|
||||
, interfaceBackgroundDangerous
|
||||
, interfaceDangerousText
|
||||
, interfaceBackgroundDisabled: darken 0.03 lightBg
|
||||
, interfaceTextDisabled: darken 0.30 lightBg
|
||||
, interfaceBackgroundHighlight: lighten 0.05 lightBg
|
||||
, highlightDisabled: (desaturate 0.80 >>> lighten 0.28) highlight
|
||||
, interfaceBackgroundShadow: darken 0.04 lightBg
|
||||
, inputBackground: lightBg
|
||||
, inputBorder: darken 0.1 lightBg
|
||||
, highlight
|
||||
, highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)
|
||||
, highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)
|
||||
, highlightRotatedForwards: highlight # rotateHue 30.0
|
||||
, highlightRotatedBackwards: highlight # rotateHue (-30.0)
|
||||
, highlightText
|
||||
, text: textLightTheme
|
||||
, placeholderText: lighten 0.4 darkBg
|
||||
}
|
||||
{ background: lightBg
|
||||
, backgroundLayer1: darken 0.12 >>> rotateHue (0.0) >>> saturate 0.01 $ lightBg
|
||||
, backgroundLayer2: darken 0.09 >>> rotateHue (0.0) >>> saturate 0.02 $ lightBg
|
||||
, backgroundLayer3: darken 0.06 >>> rotateHue (0.0) >>> saturate 0.03 $ lightBg
|
||||
, backgroundLayer4: darken 0.03 >>> rotateHue (0.0) >>> saturate 0.04 $ lightBg
|
||||
, backgroundLayer5: lightBg
|
||||
, backgroundInverted: darken 0.85 lightBg
|
||||
, textInverted: lightBg
|
||||
, success
|
||||
, successText
|
||||
, invalid
|
||||
, invalidText
|
||||
, required
|
||||
, interfaceBackground
|
||||
, interfaceBackgroundDangerous
|
||||
, interfaceDangerousText
|
||||
, interfaceBackgroundDisabled: darken 0.03 lightBg
|
||||
, interfaceTextDisabled: darken 0.30 lightBg
|
||||
, interfaceBackgroundHighlight: lighten 0.05 lightBg
|
||||
, highlightDisabled: (desaturate 0.80 >>> lighten 0.28) highlight
|
||||
, interfaceBackgroundShadow: darken 0.04 lightBg
|
||||
, inputBackground: lightBg
|
||||
, inputBorder: darken 0.1 lightBg
|
||||
, highlight
|
||||
, highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)
|
||||
, highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)
|
||||
, highlightRotatedForwards: highlight # rotateHue 30.0
|
||||
, highlightRotatedBackwards: highlight # rotateHue (-30.0)
|
||||
, highlightText
|
||||
, text: textLightTheme
|
||||
, placeholderText: lighten 0.4 darkBg
|
||||
}
|
||||
, dark:
|
||||
{ background: darkBg
|
||||
, backgroundLayer1: lighten 0.30 >>> saturate 0.07 $ darkBg
|
||||
, backgroundLayer2: lighten 0.21 >>> saturate 0.08 $ darkBg
|
||||
, backgroundLayer3: lighten 0.14 >>> saturate 0.12 $ darkBg
|
||||
, backgroundLayer4: lighten 0.07 >>> saturate 0.18 $ darkBg
|
||||
, backgroundLayer5: darkBg
|
||||
, textInverted: darkBg
|
||||
, backgroundInverted: lightBg
|
||||
, interfaceBackground: interfaceBackgroundDark
|
||||
, interfaceBackgroundDangerous: interfaceBackgroundDangerousDark
|
||||
, interfaceDangerousText: interfaceDangerousTextDark
|
||||
, interfaceBackgroundDisabled: darken 0.3 interfaceBackgroundDark
|
||||
, interfaceTextDisabled: (desaturate 0.3 >>> lighten 0.25) interfaceBackgroundDark
|
||||
, interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark
|
||||
, interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark
|
||||
, inputBackground: darkBg
|
||||
, inputBorder: lighten 0.17 darkBg
|
||||
, success: successDark
|
||||
, successText
|
||||
, required
|
||||
, invalid
|
||||
, invalidText
|
||||
, highlight: highlightDark
|
||||
, highlightDisabled: (desaturate 0.76 >>> darken 0.32) highlightDark
|
||||
, highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)
|
||||
, highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)
|
||||
, highlightRotatedForwards: highlightDark # rotateHue 30.0
|
||||
, highlightRotatedBackwards: highlightDark # rotateHue (-30.0)
|
||||
, highlightText
|
||||
, text: lightBg
|
||||
, placeholderText: darken 0.4 lightBg
|
||||
}
|
||||
{ background: darkBg
|
||||
, backgroundLayer5: lighten 0.30 >>> saturate 0.07 $ darkBg
|
||||
, backgroundLayer4: lighten 0.21 >>> saturate 0.08 $ darkBg
|
||||
, backgroundLayer3: lighten 0.14 >>> saturate 0.12 $ darkBg
|
||||
, backgroundLayer2: lighten 0.07 >>> saturate 0.18 $ darkBg
|
||||
, backgroundLayer1: darkBg
|
||||
, textInverted: darkBg
|
||||
, backgroundInverted: lightBg
|
||||
, interfaceBackground: interfaceBackgroundDark
|
||||
, interfaceBackgroundDangerous: interfaceBackgroundDangerousDark
|
||||
, interfaceDangerousText: interfaceDangerousTextDark
|
||||
, interfaceBackgroundDisabled: darken 0.3 interfaceBackgroundDark
|
||||
, interfaceTextDisabled: (desaturate 0.3 >>> lighten 0.25) interfaceBackgroundDark
|
||||
, interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark
|
||||
, interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark
|
||||
, inputBackground: darkBg
|
||||
, inputBorder: lighten 0.17 darkBg
|
||||
, success: successDark
|
||||
, successText
|
||||
, required
|
||||
, invalid
|
||||
, invalidText
|
||||
, highlight: highlightDark
|
||||
, highlightDisabled: (desaturate 0.76 >>> darken 0.32) highlightDark
|
||||
, highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)
|
||||
, highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)
|
||||
, highlightRotatedForwards: highlightDark # rotateHue 30.0
|
||||
, highlightRotatedBackwards: highlightDark # rotateHue (-30.0)
|
||||
, highlightText
|
||||
, text: lightBg
|
||||
, placeholderText: darken 0.4 lightBg
|
||||
}
|
||||
}
|
||||
where
|
||||
highlight = Color.hsl 270.0 0.90 0.62
|
||||
highlight = Color.hsl 320.0 0.62 0.49
|
||||
|
||||
highlightDark = Color.rgb 0x88 0x33 0xFF
|
||||
|
||||
@ -247,48 +247,48 @@ defaultColours =
|
||||
|
||||
textLightTheme = Color.rgb 16 16 32
|
||||
|
||||
darkBg = Color.hsl 240.0 0.07 0.14
|
||||
darkBg = Color.hsl 240.0 0.07 0.10
|
||||
|
||||
lightBg = Color.hsl 240.0 0.05 0.97
|
||||
lightBg = Color.hsl 5.0 0.27 0.99
|
||||
|
||||
type FlatTheme a
|
||||
= { background ∷ a
|
||||
, backgroundLayer1 ∷ a
|
||||
, backgroundLayer2 ∷ a
|
||||
, backgroundLayer3 ∷ a
|
||||
, backgroundLayer4 ∷ a
|
||||
, backgroundLayer5 ∷ a
|
||||
, backgroundInverted ∷ a
|
||||
, interfaceBackground ∷ a
|
||||
, interfaceBackgroundDangerous ∷ a
|
||||
, interfaceDangerousText ∷ a
|
||||
, interfaceBackgroundDisabled ∷ a
|
||||
, interfaceTextDisabled ∷ a
|
||||
, interfaceBackgroundHighlight ∷ a
|
||||
, interfaceBackgroundShadow ∷ a
|
||||
, inputBackground ∷ a
|
||||
, inputBorder ∷ a
|
||||
, highlight ∷ a
|
||||
, highlightRotatedBackwards ∷ a
|
||||
, highlightRotatedForwards ∷ a
|
||||
, highlightDarker ∷ a
|
||||
, highlightLighter ∷ a
|
||||
, highlightDisabled ∷ a
|
||||
, highlightText ∷ a
|
||||
, success ∷ a
|
||||
, successText ∷ a
|
||||
, invalid ∷ a
|
||||
, invalidText ∷ a
|
||||
, required ∷ a
|
||||
, text ∷ a
|
||||
, textInverted ∷ a
|
||||
, placeholderText ∷ a
|
||||
}
|
||||
type FlatTheme a =
|
||||
{ background ∷ a
|
||||
, backgroundLayer1 ∷ a
|
||||
, backgroundLayer2 ∷ a
|
||||
, backgroundLayer3 ∷ a
|
||||
, backgroundLayer4 ∷ a
|
||||
, backgroundLayer5 ∷ a
|
||||
, backgroundInverted ∷ a
|
||||
, interfaceBackground ∷ a
|
||||
, interfaceBackgroundDangerous ∷ a
|
||||
, interfaceDangerousText ∷ a
|
||||
, interfaceBackgroundDisabled ∷ a
|
||||
, interfaceTextDisabled ∷ a
|
||||
, interfaceBackgroundHighlight ∷ a
|
||||
, interfaceBackgroundShadow ∷ a
|
||||
, inputBackground ∷ a
|
||||
, inputBorder ∷ a
|
||||
, highlight ∷ a
|
||||
, highlightRotatedBackwards ∷ a
|
||||
, highlightRotatedForwards ∷ a
|
||||
, highlightDarker ∷ a
|
||||
, highlightLighter ∷ a
|
||||
, highlightDisabled ∷ a
|
||||
, highlightText ∷ a
|
||||
, success ∷ a
|
||||
, successText ∷ a
|
||||
, invalid ∷ a
|
||||
, invalidText ∷ a
|
||||
, required ∷ a
|
||||
, text ∷ a
|
||||
, textInverted ∷ a
|
||||
, placeholderText ∷ a
|
||||
}
|
||||
|
||||
type Colours
|
||||
= { dark ∷ FlatTheme Color
|
||||
, light ∷ FlatTheme Color
|
||||
}
|
||||
type Colours =
|
||||
{ dark ∷ FlatTheme Color
|
||||
, light ∷ FlatTheme Color
|
||||
}
|
||||
|
||||
data MakeCSSVarLabels
|
||||
= MakeCSSVarLabels
|
||||
|
||||
Loading…
Reference in New Issue
Block a user