46f147a · rowtype-yoga/ry-blocks

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

on main help sign in

Segmented

46f147aMark Eibes6 years ago

src/Yoga/Block/Atom/Button/Style.purs+58−58

compare with main

unifiedsplit

@@ -4,10 +4,10 @@ import Yoga.Prelude.Style

4import Data.Interpolate (i)

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

7−type Props f r

7+type Props f r =

8− = ( css ∷ f Style

8+ ( css ∷ f Style

9− | r

9+ | r

10− )

10+ )

12gradientBackground ∷ StyleProperty

13gradientBackground =

@@ -34,11 +34,11 @@ backgroundAnimation =

34button ∷ Style

35button =

36 css

37− { background: str colour.interfaceBackground

37+ { background: str colour.backgroundLayer4

38 , boxShadow: str "0 1px 4px rgba(0,0,0,0.30)"

39 , border: str $ i "1px solid transparent"

40− , borderTop: str $ i "1px solid " colour.interfaceBackgroundHighlight

40+ , borderTop: str $ i "1px solid " colour.backgroundLayer5

41− , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

41+ , borderBottom: str $ i "1px solid " colour.backgroundLayer3

42 , display: inlineFlex

43 , padding: str "calc(var(--s-1) * 0.8) var(--s0)"

44 , paddingBottom: str "calc(var(--s-1) * 0.8 + 1px)"

@@ -54,61 +54,61 @@ button =

54 , userSelect: none

55 , transition: str "all 0.2s ease-out" <> str "transform 50ms ease-in"

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

57− nest

57+ nest

58− { borderRadius: str "calc(var(--s1) * 0.85)"

58+ { borderRadius: str "calc(var(--s1) * 0.85)"

59− , padding: str "calc(var(--s-1) * 0.85) var(--s0)"

59+ , padding: str "calc(var(--s-1) * 0.85) var(--s0)"

60− , paddingBottom: str "calc(var(--s-1))"

60+ , paddingBottom: str "calc(var(--s-1))"

61− }

61+ }

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

63− nest

63+ nest

64− { background: gradientBackground

64+ { background: gradientBackground

65− , backgroundSize: str "200% 200%"

65+ , backgroundSize: str "200% 200%"

66− , fontWeight: str "600"

66+ , fontWeight: str "600"

67− , letterSpacing: str "calc(var(--s-5)* (0.1))"

67+ , letterSpacing: str "calc(var(--s-5)* (0.1))"

68− , animation: backgroundAnimation <> str " alternate ease-out 10s infinite"

68+ , animation: backgroundAnimation <> str " alternate ease-out 10s infinite"

69− , boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"

69+ , boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"

70− , borderColor: str "transparent"

70+ , borderColor: str "transparent"

71− , color: str colour.highlightText

71+ , color: str colour.highlightText

72− , """&:focus-visible""":

72+ , """&:focus-visible""":

73− nest

73+ nest

74− { borderColor: str "inherit"

74+ { borderColor: str "inherit"

75− }

75+ }

76− , """&:active""":

76+ , """&:active""":

77− nest

77+ nest

78− { boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"

78+ { boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"

79− , border: str $ i "1px solid transparent"

79+ , border: str $ i "1px solid transparent"

80− }

80+ }

81− , "&:disabled":

81+ , "&:disabled":

82− nest

82+ nest

83− { background: str colour.highlightDisabled

83+ { background: str colour.highlightDisabled

84− }

84+ }

85− }

85+ }

86 , """&[data-button-type="dangerous"]""":

87− nest

87+ nest

88− { color: str $ colour.interfaceDangerousText

88+ { color: str $ colour.interfaceDangerousText

89− , background: str $ colour.interfaceBackgroundDangerous

89+ , background: str $ colour.interfaceBackgroundDangerous

90− , fontWeight: str "600"

90+ , fontWeight: str "600"

91− , letterSpacing: str "calc(var(--s-5) * -0.10)"

91+ , letterSpacing: str "calc(var(--s-5) * -0.10)"

92− }

92+ }

93 , """&:focus""": nest { outline: none }

94 , """&:focus-visible""":

95− nest

95+ nest

96− { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

96+ { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

97− }

97+ }

98 , """&:active""":

99− nest

99+ nest

100− { boxShadow: str $ "inset 0 1px var(--s-1) rgba(0,0,0,0.20)"

100+ { boxShadow: str $ "inset 0 1px var(--s-1) rgba(0,0,0,0.20)"

101− , borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow

101+ , borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow

102− , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

102+ , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

103− , transform: str "scale3d(0.95,0.95,0.95)"

103+ , transform: str "scale3d(0.95,0.95,0.95)"

104− , transition: str "transform 50ms ease"

104+ , transition: str "transform 50ms ease"

105− }

105+ }

106 , "&:disabled":

107− nest

107+ nest

108− { color: str colour.interfaceTextDisabled

108+ { color: str colour.interfaceTextDisabled

109− , boxShadow: none

109+ , boxShadow: none

110− , background: str colour.interfaceBackgroundDisabled

110+ , background: str colour.interfaceBackgroundDisabled

111− , borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow

111+ , borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow

112− , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

112+ , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

113− }

113+ }

114 }

src/Yoga/Block/Atom/Input/Style.purs+40−40

@@ -153,46 +153,46 @@ leftIconContainer =

153inputContainer ∷ ∀ r. { | Props OptionalProp r } -> Style

154inputContainer props = theCss <>? props.css

155 where

156− theCss =

156+ theCss =

157− css

157+ css

158− { position: relative

158+ { position: relative

159− , boxSizing: borderBox

159+ , boxSizing: borderBox

160− , backgroundColor: str colour.inputBackground

160+ , backgroundColor: str colour.inputBackground

161− , display: flex

161+ , display: flex

162− , width: str "calc(var(--s4) * 2)"

162+ , width: str "calc(var(--s4) * 2)"

163− , "--left-icon-size": var "--s0"

163+ , "--left-icon-size": var "--s0"

164− , "--right-icon-size": str "calc(var(--s0) * 1.2)"

164+ , "--right-icon-size": str "calc(var(--s0) * 1.2)"

165− , "--input-border-radius": var "--s-1"

165+ , "--input-border-radius": var "--s-1"

166− , "--input-side-padding": var "--s-1"

166+ , "--input-side-padding": var "--s-1"

167− , "--input-top-padding": var "--s-5"

167+ , "--input-top-padding": var "--s-5"

168− , "--input-bottom-padding": var "--s-5"

168+ , "--input-bottom-padding": var "--s-5"

169− , alignItems: center

169+ , alignItems: center

170− , justifyContent: center

170+ , justifyContent: center

171− , paddingLeft: str "calc(var(--input-side-padding) - var(--border-width))"

171+ , paddingLeft: str "calc(var(--input-side-padding) - var(--border-width))"

172− , paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"

172+ , paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"

173− , paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"

173+ , paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"

174− , paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"

174+ , paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"

175− , gap: str "calc(var(--input-side-padding) / 2)"

175+ , gap: str "calc(var(--input-side-padding) / 2)"

176− , "--border-width": str "1px"

176+ , "--border-width": str "1px"

177− , border: str $ "var(--border-width) solid " <> colour.inputBorder

177+ , border: str $ "var(--border-width) solid " <> colour.inputBorder

178− , borderRadius: var "--input-border-radius"

178+ , borderRadius: var "--input-border-radius"

179− , """&[data-invalid="false"]""":

179+ , """&[data-invalid="false"]""":

180− nest

180+ nest

181− { borderColor: str colour.success

181+ { borderColor: str colour.success

182− , "--border-width": str "var(--s-5)"

182+ , "--border-width": str "2px"

183− }

183+ }

184− , """&[data-invalid="true"]""":

184+ , """&[data-invalid="true"]""":

185− nest

185+ nest

186− { borderColor: str colour.invalid

186+ { borderColor: str colour.invalid

187− , "--border-width": str "var(--s-5)"

187+ , "--border-width": str "2px)"

188− }

188+ }

189− , "&:focus-within":

189+ , "&:focus-within":

190− nest

190+ nest

191− { "--border-width": str "var(--s-5)"

191+ { "--border-width": str "2px"

192− , borderColor: str colour.highlight

192+ , borderColor: str colour.highlight

193− , transition: str "border-color 0s linear 0.1s"

193+ , transition: str "border-color 0s linear 0.1s"

194− }

194+ }

195− }

195+ }

196

197inputWrapper ∷ Style

198inputWrapper =

src/Yoga/Block/Atom/Segmented/Style.purs+19−12

@@ -13,9 +13,10 @@ cluster ∷ Style

13cluster =

14 css

15 { overflow: visible

16− , flex: str "1"

17 , display: str "inline-flex"

16 , display: str "inline-flex"

18 , userSelect: none

17 , userSelect: none

18+ , padding: _0

19+ , margin: _0

19 }

20 }

21segmented ∷ Style

22segmented ∷ Style

@@ -27,13 +28,14 @@ segmented = styles

27 , margin: _0

28 , margin: _0

28 , width: auto

29 , width: auto

29 , display: flex

30 , display: flex

31+ , boxSizing: borderBox

30 , flex: str "1"

32 , flex: str "1"

31 , minHeight: str "min-content"

33 , minHeight: str "min-content"

32− , background: str colour.backgroundLayer3

34+ , background: str colour.backgroundLayer2

33 , boxShadow: str "inset 0 1 0 rgba(0,0,0,0.1)"

35 , boxShadow: str "inset 0 1 0 rgba(0,0,0,0.1)"

34 , borderRadius: str "calc(var(--s-1) * 0.8)"

36 , borderRadius: str "calc(var(--s-1) * 0.8)"

35− , border: str $ i "1px solid " colour.interfaceBackground

37+ , border: str $ i "1px solid " colour.backgroundLayer1

36− , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

38+ , borderBottom: str $ i "1px solid " colour.backgroundLayer1

37 , padding: _0

39 , padding: _0

38 , overflow: visible

40 , overflow: visible

39 , userSelect: none

41 , userSelect: none

@@ -43,21 +45,27 @@ activeElementWrapper ∷ Style

43activeElementWrapper =

45activeElementWrapper =

44 css

46 css

45 { position: relative

47 { position: relative

48+ , boxSizing: borderBox

46 , width: str "0"

49 , width: str "0"

50+ , height: str "100%"

47 , overflow: visible

51 , overflow: visible

52+ , padding: _0

53+ , margin: _0

48 }

54 }

50activeElement ∷ Style

56activeElement ∷ Style

51activeElement =

57activeElement =

52 css

58 css

53 { position: absolute

59 { position: absolute

60+ , boxSizing: borderBox

54 , display: block

61 , display: block

55 , borderRadius: str "calc(var(--s-1) * 0.8)"

62 , borderRadius: str "calc(var(--s-1) * 0.8)"

56− , background: str colour.backgroundLayer5

63+ , background: str colour.backgroundLayer4

57− , borderTop: str $ i "1px solid " colour.interfaceBackgroundHighlight

64+ , borderTop: str $ i "1px solid " colour.backgroundLayer5

58− , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

65+ , borderBottom: str $ i "1px solid " colour.backgroundLayer3

59 , boxShadow: str "0 1px 2px rgba(20,20,20,0.67)"

66 , boxShadow: str "0 1px 2px rgba(20,20,20,0.67)"

60 , padding: _0

67 , padding: _0

68+ , margin: _0

61 , zIndex: str "3"

69 , zIndex: str "3"

62 }

70 }

@@ -71,8 +79,7 @@ button { isFirst, isLast } =

71 , border: none

79 , border: none

72 , padding: _0

80 , padding: _0

73 , fontSize: str "var(--s0)"

81 , fontSize: str "var(--s0)"

74− , marginLeft: _0

82+ , margin: _0

75− , marginRight: _0

76 , boxSizing: borderBox

83 , boxSizing: borderBox

77 , zIndex: str "3"

84 , zIndex: str "3"

78 , minWidth: var "--s2"

85 , minWidth: var "--s2"

@@ -91,15 +98,15 @@ buttonContent { isFirst, isLast } =

91 css

98 css

92 { "&:active": nest { outline: str "0" }

99 { "&:active": nest { outline: str "0" }

93 , "&:focus": nest { outline: none }

100 , "&:focus": nest { outline: none }

101+ , margin: _0

94− , paddingTop: str "1px"

102+ , paddingTop: str "var(--s-5)"

95− , paddingBottom: str "1px"

103+ , paddingBottom: str "var(--s-4)"

96 , paddingLeft: str if isFirst then edgePadding else inBetweenPadding

104 , paddingLeft: str if isFirst then edgePadding else inBetweenPadding

97 , paddingRight: str if isLast then edgePadding else inBetweenPadding

105 , paddingRight: str if isLast then edgePadding else inBetweenPadding

98 , borderRadius: str "calc(var(--s-1) * 0.75)"

106 , borderRadius: str "calc(var(--s-1) * 0.75)"

99 , border: str $ i borderSize " solid transparent"

107 , border: str $ i borderSize " solid transparent"

100 , display: flex

108 , display: flex

101 , alignItems: center

109 , alignItems: center

102− , outlineRight: str "1px solid red"

103 , justifyContent: center

110 , justifyContent: center

104 , overflow: visible

111 , overflow: visible

105 , userSelect: none

112 , userSelect: none

src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs+7−2

@@ -98,10 +98,15 @@ component =

98 }

99 , onDragStart:

100 Motion.onDragStart \_ pi -> do

101+ maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)

102+ for_ maybeBbox \bbox ->

101− setDragX (Just pi.point.x)

103+ setDragX (Just (pi.point.x - bbox.left))

102 , onDrag:

104 , onDrag:

103 Motion.onDrag \_ pi -> do

105 Motion.onDrag \_ pi -> do

104− when (isJust maybeDragX) $ setDragX (Just pi.point.x)

106+ when (isJust maybeDragX) do

107+ maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)

108+ for_ maybeBbox \bbox ->

109+ setDragX (Just (pi.point.x - bbox.left))

105 , onDragEnd:

110 , onDragEnd:

106 Motion.onDragEnd \_ pi -> do

111 Motion.onDragEnd \_ pi -> do

107 let

112 let

src/Yoga/Block/Atom/Toggle/Style.purs+1−1

@@ -38,7 +38,7 @@ theToggle =

38 css

39 { width: str "calc(var(--s2) * 0.85)"

40 , height: str "calc(var(--s2) * 0.85)"

41− , background: str $ colour.interfaceBackground

41+ , background: str $ colour.backgroundLayer4

42 , border: none

43 , borderRadius: str $ "calc(var(--s2) / 2)"

44 , position: absolute

src/Yoga/Block/Container/Style.purs+201−201

@@ -31,113 +31,113 @@ mkGlobal ∷ Maybe DarkOrLightMode -> Style

31mkGlobal maybeMode =

32 css

33 { "body, html":

34− nested

34+ nested

35− $ css

35+ $ css

36− { minHeight: 100.0 # vh

36+ { minHeight: 100.0 # vh

37− , minWidth: 100.0 # vw

37+ , minWidth: 100.0 # vw

38− , lineHeight: str "1.15"

38+ , lineHeight: str "1.15"

39− , "WebkitTextSizeAdjust": _100percent

39+ , "WebkitTextSizeAdjust": _100percent

40− , transition: str "background,color 0.33s ease-in"

40+ , transition: str "background,color 0.33s ease-in"

41− }

41+ }

42 , ":root":

43− nested $ variables

43+ nested $ variables

44− <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }

44+ <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }

45 , html:

46− nested

46+ nested

47− $ css

47+ $ css

48− { boxSizing: str "border-box"

48+ { boxSizing: str "border-box"

49− }

49+ }

50 , body:

51− nested

51+ nested

52− $ css

52+ $ css

53− { fontFamily: str "var(--main-font)"

53+ { fontFamily: str "var(--main-font)"

54− , background: str colour.background

54+ , background: str colour.background

55− , color: str colour.text

55+ , color: str colour.text

56− , margin: str "0"

56+ , margin: str "0"

57− }

57+ }

58− <> case maybeMode of

58+ <> case maybeMode of

59− Nothing -> autoSwitchColourTheme

59+ Nothing -> autoSwitchColourTheme

60− Just DarkMode -> darkModeStyle

60+ Just DarkMode -> darkModeStyle

61− Just LightMode -> lightModeStyle

61+ Just LightMode -> lightModeStyle

62 , "pre,code":

63− nest

63+ nest

64− { fontFamily: str "var(--mono-font)"

64+ { fontFamily: str "var(--mono-font)"

65− }

65+ }

66 , "h1,h2,h3,h4":

67− nest

67+ nest

68− { lineHeight: var "--line-height-small"

68+ { lineHeight: var "--line-height-small"

69− , fontWeight: str "700"

69+ , fontWeight: str "700"

70− , marginTop: str "var(--s-3)"

70+ , marginTop: str "var(--s-3)"

71− }

71+ }

72 , h1:

73− nested

73+ nested

74− $ css

74+ $ css

75− { "--h1size": str "calc( min( var(--s2) + 2vw , var(--s4) ) )"

75+ { "--h1size": str "calc( min( var(--s2) + 2vw , var(--s4) ) )"

76− , fontSize: var "--h1size"

76+ , fontSize: var "--h1size"

77− , letterSpacing: str "calc(var(--h1size) * -0.04)"

77+ , letterSpacing: str "calc(var(--h1size) * -0.04)"

78− }

78+ }

79 , h2:

80− nested

80+ nested

81− $ css

81+ $ css

82− { "--h2size": str "calc( min( var(--s1) + 2vw , var(--s3) ) )"

82+ { "--h2size": str "calc( min( (var(--s1)*1.1) + 2vw , var(--s3) ) )"

83− , fontSize: var "--h2size"

83+ , fontSize: var "--h2size"

84− , letterSpacing: str "calc(var(--h2size) * -0.035)"

84+ , letterSpacing: str "calc(var(--h2size) * -0.035)"

85− }

85+ }

86 , h3:

87− nested

87+ nested

88− $ css

88+ $ css

89− { "--h3size": str "calc( min( var(--s0) + 2vw , var(--s2) ) )"

89+ { "--h3size": str "calc( min( var(--s0) + 2vw , var(--s2) ) )"

90− , fontSize: var "--h3size"

90+ , fontSize: var "--h3size"

91− , letterSpacing: str "calc(var(--h3size) * -0.03)"

91+ , letterSpacing: str "calc(var(--h3size) * -0.03)"

92− }

92+ }

93 , p:

94− nested

94+ nested

95− $ css

95+ $ css

96− { "--psize": str "calc( min( var(--s-2) + 2.7vw , var(--s0)*1.1 ) )"

96+ { "--psize": str "calc( min( (var(--s-1) * 1.7) + 0.7vw , var(--s0)*1.1 ) )"

97− , fontSize: var "--psize"

97+ , fontSize: var "--psize"

98− , letterSpacing: str "calc(var(--psize) * -0.03)"

98+ , letterSpacing: str "calc(var(--psize) * -0.03)"

99− }

99+ }

100 , a:

101− nest

101+ nest

102− { color: str colour.text

102+ { color: str colour.text

103− , textDecorationColor: str colour.text

103+ , textDecorationColor: str colour.text

104− , "&:hover":

104+ , "&:hover":

105− nest

105+ nest

106− { color: str colour.text

106+ { color: str colour.text

107− , textDecorationColor: str colour.highlight

107+ , textDecorationColor: str colour.highlight

108− }

108+ }

109− , "&:visited":

109+ , "&:visited":

110− nest

110+ nest

111− { color: str colour.text

111+ { color: str colour.text

112− , textDecorationColor: str colour.backgroundLayer1

112+ , textDecorationColor: str colour.backgroundLayer1

113− }

113+ }

114− }

114+ }

115 , "::selection":

116− nest

116+ nest

117− { color: str colour.highlightText

117+ { color: str colour.highlightText

118− , background: str colour.highlight

118+ , background: str colour.highlight

119− }

119+ }

120 , "*, *:before, *:after":

121− nested

121+ nested

122− $ css

122+ $ css

123− { boxSizing: str "inherit"

123+ { boxSizing: str "inherit"

124− , "::selection":

124+ , "::selection":

125− nest

125+ nest

126− { color: str colour.highlightText

126+ { color: str colour.highlightText

127− , background: str colour.highlight

127+ , background: str colour.highlight

128− }

128+ }

129− , fontFeatureSettings:

129+ , fontFeatureSettings:

130− str

130+ str

131− $ intercalate ","

131+ $ intercalate ","

132− $ show

132+ $ show

133− <$> [ "ss03" -- curved r

133+ <$> [ "ss03" -- curved r

134− , "cv03" -- open six

134+ , "cv03" -- open six

135− , "cv04" -- open nine

135+ , "cv04" -- open nine

136− -- , "cv05" -- lower case l with tail

136+ -- , "cv05" -- lower case l with tail

137− , "cv07" -- German double-s

137+ , "cv07" -- German double-s

138− , "cv09" -- Flat top three

138+ , "cv09" -- Flat top three

139− ]

139+ ]

140− }

140+ }

141 }

142

143withAlpha ∷ Number -> Color -> Color

@@ -148,74 +148,74 @@ withAlpha alpha c1 = Color.rgba' r g b alpha

148defaultColours ∷ Colours

149defaultColours =

150 { light:

151− { background: lightBg

151+ { background: lightBg

152− , backgroundLayer1: darken 0.20 >>> saturate 0.04 $ lightBg

152+ , backgroundLayer1: darken 0.12 >>> rotateHue (0.0) >>> saturate 0.01 $ lightBg

153− , backgroundLayer2: darken 0.15 >>> saturate 0.07 $ lightBg

153+ , backgroundLayer2: darken 0.09 >>> rotateHue (0.0) >>> saturate 0.02 $ lightBg

154− , backgroundLayer3: darken 0.10 >>> saturate 0.09 $ lightBg

154+ , backgroundLayer3: darken 0.06 >>> rotateHue (0.0) >>> saturate 0.03 $ lightBg

155− , backgroundLayer4: darken 0.05 >>> saturate 0.12 $ lightBg

155+ , backgroundLayer4: darken 0.03 >>> rotateHue (0.0) >>> saturate 0.04 $ lightBg

156− , backgroundLayer5: lightBg

156+ , backgroundLayer5: lightBg

157− , backgroundInverted: darken 0.85 lightBg

157+ , backgroundInverted: darken 0.85 lightBg

158− , textInverted: lightBg

158+ , textInverted: lightBg

159− , success

159+ , success

160− , successText

160+ , successText

161− , invalid

161+ , invalid

162− , invalidText

162+ , invalidText

163− , required

163+ , required

164− , interfaceBackground

164+ , interfaceBackground

165− , interfaceBackgroundDangerous

165+ , interfaceBackgroundDangerous

166− , interfaceDangerousText

166+ , interfaceDangerousText

167− , interfaceBackgroundDisabled: darken 0.03 lightBg

167+ , interfaceBackgroundDisabled: darken 0.03 lightBg

168− , interfaceTextDisabled: darken 0.30 lightBg

168+ , interfaceTextDisabled: darken 0.30 lightBg

169− , interfaceBackgroundHighlight: lighten 0.05 lightBg

169+ , interfaceBackgroundHighlight: lighten 0.05 lightBg

170− , highlightDisabled: (desaturate 0.80 >>> lighten 0.28) highlight

170+ , highlightDisabled: (desaturate 0.80 >>> lighten 0.28) highlight

171− , interfaceBackgroundShadow: darken 0.04 lightBg

171+ , interfaceBackgroundShadow: darken 0.04 lightBg

172− , inputBackground: lightBg

172+ , inputBackground: lightBg

173− , inputBorder: darken 0.1 lightBg

173+ , inputBorder: darken 0.1 lightBg

174− , highlight

174+ , highlight

175− , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)

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

176− , highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)

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

177− , highlightRotatedForwards: highlight # rotateHue 30.0

177+ , highlightRotatedForwards: highlight # rotateHue 30.0

178− , highlightRotatedBackwards: highlight # rotateHue (-30.0)

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

179− , highlightText

179+ , highlightText

180− , text: textLightTheme

180+ , text: textLightTheme

181− , placeholderText: lighten 0.4 darkBg

181+ , placeholderText: lighten 0.4 darkBg

182− }

182+ }

183 , dark:

184− { background: darkBg

184+ { background: darkBg

185− , backgroundLayer1: lighten 0.30 >>> saturate 0.07 $ darkBg

185+ , backgroundLayer5: lighten 0.30 >>> saturate 0.07 $ darkBg

186− , backgroundLayer2: lighten 0.21 >>> saturate 0.08 $ darkBg

186+ , backgroundLayer4: lighten 0.21 >>> saturate 0.08 $ darkBg

187− , backgroundLayer3: lighten 0.14 >>> saturate 0.12 $ darkBg

187+ , backgroundLayer3: lighten 0.14 >>> saturate 0.12 $ darkBg

188− , backgroundLayer4: lighten 0.07 >>> saturate 0.18 $ darkBg

188+ , backgroundLayer2: lighten 0.07 >>> saturate 0.18 $ darkBg

189− , backgroundLayer5: darkBg

189+ , backgroundLayer1: darkBg

190− , textInverted: darkBg

190+ , textInverted: darkBg

191− , backgroundInverted: lightBg

191+ , backgroundInverted: lightBg

192− , interfaceBackground: interfaceBackgroundDark

192+ , interfaceBackground: interfaceBackgroundDark

193− , interfaceBackgroundDangerous: interfaceBackgroundDangerousDark

193+ , interfaceBackgroundDangerous: interfaceBackgroundDangerousDark

194− , interfaceDangerousText: interfaceDangerousTextDark

194+ , interfaceDangerousText: interfaceDangerousTextDark

195− , interfaceBackgroundDisabled: darken 0.3 interfaceBackgroundDark

195+ , interfaceBackgroundDisabled: darken 0.3 interfaceBackgroundDark

196− , interfaceTextDisabled: (desaturate 0.3 >>> lighten 0.25) interfaceBackgroundDark

196+ , interfaceTextDisabled: (desaturate 0.3 >>> lighten 0.25) interfaceBackgroundDark

197− , interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark

197+ , interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark

198− , interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark

198+ , interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark

199− , inputBackground: darkBg

199+ , inputBackground: darkBg

200− , inputBorder: lighten 0.17 darkBg

200+ , inputBorder: lighten 0.17 darkBg

201− , success: successDark

201+ , success: successDark

202− , successText

202+ , successText

203− , required

203+ , required

204− , invalid

204+ , invalid

205− , invalidText

205+ , invalidText

206− , highlight: highlightDark

206+ , highlight: highlightDark

207− , highlightDisabled: (desaturate 0.76 >>> darken 0.32) highlightDark

207+ , highlightDisabled: (desaturate 0.76 >>> darken 0.32) highlightDark

208− , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)

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

209− , highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)

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

210− , highlightRotatedForwards: highlightDark # rotateHue 30.0

210+ , highlightRotatedForwards: highlightDark # rotateHue 30.0

211− , highlightRotatedBackwards: highlightDark # rotateHue (-30.0)

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

212− , highlightText

212+ , highlightText

213− , text: lightBg

213+ , text: lightBg

214− , placeholderText: darken 0.4 lightBg

214+ , placeholderText: darken 0.4 lightBg

215− }

215+ }

216 }

217 where

218− highlight = Color.hsl 270.0 0.90 0.62

218+ highlight = Color.hsl 320.0 0.62 0.49

219

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

221

@@ -247,48 +247,48 @@ defaultColours =

247

248 textLightTheme = Color.rgb 16 16 32

249

250− darkBg = Color.hsl 240.0 0.07 0.14

250+ darkBg = Color.hsl 240.0 0.07 0.10

251−

251+

252− lightBg = Color.hsl 240.0 0.05 0.97

252+ lightBg = Color.hsl 5.0 0.27 0.99

253−

253+

254−type FlatTheme a

254+type FlatTheme a =

255− = { background ∷ a

255+ { background ∷ a

256− , backgroundLayer1 ∷ a

256+ , backgroundLayer1 ∷ a

257− , backgroundLayer2 ∷ a

257+ , backgroundLayer2 ∷ a

258− , backgroundLayer3 ∷ a

258+ , backgroundLayer3 ∷ a

259− , backgroundLayer4 ∷ a

259+ , backgroundLayer4 ∷ a

260− , backgroundLayer5 ∷ a

260+ , backgroundLayer5 ∷ a

261− , backgroundInverted ∷ a

261+ , backgroundInverted ∷ a

262− , interfaceBackground ∷ a

262+ , interfaceBackground ∷ a

263− , interfaceBackgroundDangerous ∷ a

263+ , interfaceBackgroundDangerous ∷ a

264− , interfaceDangerousText ∷ a

264+ , interfaceDangerousText ∷ a

265− , interfaceBackgroundDisabled ∷ a

265+ , interfaceBackgroundDisabled ∷ a

266− , interfaceTextDisabled ∷ a

266+ , interfaceTextDisabled ∷ a

267− , interfaceBackgroundHighlight ∷ a

267+ , interfaceBackgroundHighlight ∷ a

268− , interfaceBackgroundShadow ∷ a

268+ , interfaceBackgroundShadow ∷ a

269− , inputBackground ∷ a

269+ , inputBackground ∷ a

270− , inputBorder ∷ a

270+ , inputBorder ∷ a

271− , highlight ∷ a

271+ , highlight ∷ a

272− , highlightRotatedBackwards ∷ a

272+ , highlightRotatedBackwards ∷ a

273− , highlightRotatedForwards ∷ a

273+ , highlightRotatedForwards ∷ a

274− , highlightDarker ∷ a

274+ , highlightDarker ∷ a

275− , highlightLighter ∷ a

275+ , highlightLighter ∷ a

276− , highlightDisabled ∷ a

276+ , highlightDisabled ∷ a

277− , highlightText ∷ a

277+ , highlightText ∷ a

278− , success ∷ a

278+ , success ∷ a

279− , successText ∷ a

279+ , successText ∷ a

280− , invalid ∷ a

280+ , invalid ∷ a

281− , invalidText ∷ a

281+ , invalidText ∷ a

282− , required ∷ a

282+ , required ∷ a

283− , text ∷ a

283+ , text ∷ a

284− , textInverted ∷ a

284+ , textInverted ∷ a

285− , placeholderText ∷ a

285+ , placeholderText ∷ a

286− }

286+ }

287

288−type Colours

288+type Colours =

289− = { dark ∷ FlatTheme Color

289+ { dark ∷ FlatTheme Color

290− , light ∷ FlatTheme Color

290+ , light ∷ FlatTheme Color

291− }

291+ }

292

293data MakeCSSVarLabels

294 = MakeCSSVarLabels