64d8094 · rowtype-yoga/psfp

components/src/React/SyntaxHighlighter/Component.js+22−9

@@ -10,11 +10,21 @@ var purescript = function (hljs) {

1010 }),

1111 ],

1212 };

13− var KEY = {

13+ var ESCAPED_KEY = {

1414 className: "attribute",

15− begin: '"?\\w+"?',

15+ begin: '"',

16+ illegal: '"',

17+ end: '"',

1618 relevance: 0,

1719 };

20+ // var KEY = {

21+ // className: "attribute",

22+ // begin: "[a-z]",

23+ // illegal: ""

24+ // end: "(::|∷)",

25+ // excludeEnd: true,

26+ // relevance: 0,

27+ // };

1828 var CONSTRUCTOR = {

1929 className: "type",

2030 begin: "\\b[A-Z][\\w']*",

@@ -30,10 +40,17 @@ var purescript = function (hljs) {

3040 COMMENT,

3141 ],

3242 };

43+ var VALUE = {};

44+ var KEY_VALUE = {

45+ className: "attribute",

46+ begin: "\\w+",

47+ end: ",|}",

48+ contains: [VALUE],

49+ };

3350 var RECORD = {

3451 begin: "{",

3552 end: "}",

36− contains: LIST.contains,

53+ contains: [KEY_VALUE],

3754 };

3855 return {

3956 name: "PureScript",

@@ -97,13 +114,9 @@ var purescript = function (hljs) {

97114 },

98115 {

99116 className: "symbol",

100− begin: "<-|->|\\:\\:|\\\\|=>|<=|forall|∀|\\:|∷",

117+ begin: "=|<-|->|\\:\\:|\\\\|=>|<=|forall|∀|\\:|∷|{|}|\$|\$|\\[|\\]|,",

118+ invalid: "/",

101119 },

102− // {

103− // begin: "[{,]\\s*",

104− // end: "\\s*(?::{2}|∷)",

105− // contains: [KEY],

106− // },

107120 {

108121 beginKeywords: "default",

109122 end: "$",

components/src/React/SyntaxHighlighter/Component.ts+25−9

@@ -10,12 +10,23 @@ const purescript = (hljs) => {

1010 ],

1111 };

1212

13− var KEY = {

13+ var ESCAPED_KEY = {

1414 className: "attribute",

15− begin: '"?\\w+"?',

15+ begin: '"',

16+ illegal: '"',

17+ end: '"',

1618 relevance: 0,

1719 };

1820

21+ // var KEY = {

22+ // className: "attribute",

23+ // begin: "[a-z]",

24+ // illegal: ""

25+ // end: "(::|∷)",

26+ // excludeEnd: true,

27+ // relevance: 0,

28+ // };

29+

1930 var CONSTRUCTOR = {

2031 className: "type",

2132 begin: "\\b[A-Z][\\w']*", // TODO: other constructors (build-in, infix).

@@ -33,10 +44,19 @@ const purescript = (hljs) => {

3344 ],

3445 };

3546

47+ var VALUE = {};

48+

49+ var KEY_VALUE = {

50+ className: "attribute",

51+ begin: "\\w+",

52+ end: ",|}",

53+ contains: [VALUE],

54+ };

55+

3656 var RECORD = {

3757 begin: "{",

3858 end: "}",

39− contains: LIST.contains,

59+ contains: [KEY_VALUE],

4060 };

4161

4262 return {

@@ -104,13 +124,9 @@ const purescript = (hljs) => {

104124 },

105125 {

106126 className: "symbol",

107− begin: "<-|->|\\:\\:|\\\\|=>|<=|forall|∀|\\:|∷",

127+ begin: "=|<-|->|\\:\\:|\\\\|=>|<=|forall|∀|\\:|∷|{|}|\$|\$|\\[|\\]|,",

128+ invalid: "/",

108129 },

109− // {

110− // begin: "[{,]\\s*",

111− // end: "\\s*(?::{2}|∷)",

112− // contains: [KEY],

113− // },

114130 {

115131 beginKeywords: "default",

116132 end: "$",

components/src/Yoga/Button/Component.purs+15−6

@@ -50,6 +50,7 @@ highlightStyles =

5050 , theme.highlightColourRotatedForwards

5151 ]

5252 , color: Color.cssStringRGBA theme.backgroundColour <> " !important"

53+ , transition: "box-shadow 8.0 ease-in-out"

5354 , boxShadow:

5455 "0 var(--s-5) var(--s-2)" <> (Color.cssStringRGBA $ withAlpha 0.2 Color.black)

5556 , backgroundClip: "border-box"

@@ -106,17 +107,19 @@ styles =

106107 , backgroundClip: "border-box"

107108 , background:

108109 linearGradient (if theme.isLight then "180deg" else "0deg")

109− [ (if theme.isLight then Color.rotateHue 290.0 <<< Color.desaturate 0.33 else darken 0.16) $ more 0.08 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedBackwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedForwards) (if theme.isLight then 0.94 else 0.85))

110− , (if theme.isLight then Color.rotateHue 290.0 <<< Color.desaturate 0.33 else darken 0.16) $ less 0.05 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedForwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedBackwards) (if theme.isLight then 0.84 else 0.70))

110+ [ (if theme.isLight then Color.lighten 0.01 <<< Color.desaturate 0.43 else darken 0.16) $ more 0.08 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedBackwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedForwards) (if theme.isLight then 0.94 else 0.85))

111+ , (if theme.isLight then Color.lighten 0.02 <<< Color.desaturate 0.43 else darken 0.16) $ less 0.05 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedForwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedBackwards) (if theme.isLight then 0.84 else 0.70))

111112 ]

112113 , display: "inline-block"

114+ , transition: "all 0.2s ease-in-out"

113115 }

114116 , btn:

115117 { background:

116118 linearGradient "127deg"

117119 [ (if theme.isLight then darken 0.1 else identity) $ theme.highlightColourRotatedBackwards

118− , (if theme.isLight then darken 0.1 else identity) $ darken 0.2 $ theme.highlightColourRotatedForwards

120+ , (if theme.isLight then darken 0.1 else identity) $ theme.highlightColourRotatedForwards

119121 ]

122+ , transition: "all 0.2s ease-in-out"

120123 , boxShadow:

121124 "0 var(--s-5) var(--s-2)" <> (Color.cssStringRGBA $ withAlpha 0.1 Color.black)

122125 , padding: "calc(var(--s0) - var(--s-4)) var(--s1) calc(var(--s0) - var(--s-5)) var(--s1)"

@@ -161,10 +164,16 @@ styles =

161164 (cssStringRGBA $ withAlpha 0.5 theme.highlightColourRotatedBackwards) ∷

162165 String

163166 , background:

167+ -- linearGradient (if theme.isLight then "0deg" else "180deg")

168+ -- [ less 0.04 $ withAlpha 0.92 theme.backgroundColour

169+ -- , less 0.09 $ withAlpha 0.92 theme.backgroundColour

170+ -- ]

164171 linearGradient (if theme.isLight then "0deg" else "180deg")

165− [ less 0.04 $ withAlpha 0.92 theme.backgroundColour

166− , less 0.09 $ withAlpha 0.92 theme.backgroundColour

167− ]

172+ $ ( Color.darken 0.1

173+ <$> [ (if theme.isLight then Color.lighten 0.01 <<< Color.desaturate 0.43 else darken 0.16) $ more 0.08 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedBackwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedForwards) (if theme.isLight then 0.94 else 0.85))

174+ , (if theme.isLight then Color.lighten 0.02 <<< Color.desaturate 0.43 else darken 0.16) $ less 0.05 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedForwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedBackwards) (if theme.isLight then 0.84 else 0.70))

175+ ]

176+ )

168177 , color: more 0.02 theme.highlightColour

169178 , textFillColor: more 0.02 theme.highlightColour

170179 }

components/src/Yoga/FillInTheGaps/Component.purs+18−3

@@ -1,7 +1,7 @@

11module Yoga.FillInTheGaps.Component where

22

33import Prelude

4−import Data.Array (foldMap, intercalate)

4+import Data.Array (foldMap, foldr, intercalate)

55import Data.Array as A

66import Data.Either (Either(..))

77import Data.Foldable (foldl)

@@ -17,6 +17,7 @@ import Data.String.Regex as Regex

1717import Data.String.Regex.Flags as RegexFlags

1818import Data.String.Regex.Unsafe (unsafeRegex)

1919import Data.Tuple.Nested ((/\))

20+import Debug.Trace (spy)

2021import Effect (Effect)

2122import Effect.Aff (launchAff_)

2223import Effect.Class (liftEffect)

@@ -90,7 +91,7 @@ renderSegments highlighterTheme ic update arrs = R.div_ (A.mapWithIndex renderLi

9091 renderLine i l = R.div_ (A.mapWithIndex (renderSegment i) l)

9192 renderSegment i j s =

9293 if between start end i then case s of

93− Filler s' -> element syntaxHighlighterImpl { style: highlighterTheme, language: "purescript", children: s' }

94+ Filler s' -> element syntaxHighlighterImpl { style: highlighterTheme, language: "purescript", children: spy "ch" s' }

9495 Hole width _ ->

9596 element ic

9697 $ justifill

@@ -135,6 +136,20 @@ toSegment = case _ of

135136 | Regex.test endRegex x -> End

136137 other -> Filler other

137138

139+-- Glues together Filler segments

140+-- [[Filler "line1"], [Filler "line2"]] --> [[Filler "line1\nline2"]]

141+-- [[Filler "line1", Filler "line2"]] --> [[Filler "line1\nline2"]]

142+-- [[Filler "line1", Filler "line2"], [Filler "line3"]] --> [[Filler "line1\nline2\line3"]]

143+smooshFillers ∷ Array (Array Segment) -> Array (Array Segment)

144+smooshFillers = foldl smooshOuter []

145+ where

146+ smooshInner segments segment = case segment, A.unsnoc segments of

147+ Filler f, Just { init, last: Filler prev } -> A.snoc init (Filler (prev <> "\n" <> f))

148+ _, _ -> A.snoc segments segment

149+ smooshOuter acc segs = case foldl smooshInner [] segs, A.unsnoc acc of

150+ [ Filler f ], Just { init, last: [ Filler prev ] } -> A.snoc init [ Filler (prev <> "\n" <> f) ]

151+ _, _ -> A.snoc acc segs

152+

138153type Ctx r

139154 = (Compiler r)

140155

@@ -150,7 +165,7 @@ makeComponent { compileAndRun } = do

150165 let

151166 lines = split (Pattern "\n") code

152167

153− initialSegments = lines <#> \line -> rawSegments line <#> toSegment

168+ initialSegments = smooshFillers (lines <#> \line -> rawSegments line <#> toSegment)

154169 segments /\ modifySegments <- useState initialSegments

155170 result /\ modifyResult <- useState Nothing

156171 cssTheme <- useTheme

components/src/Yoga/FillInTheGaps/Stories.purs+1−29

@@ -30,39 +30,11 @@ stories = do

3030codeWithHoles =

3131 """

3232--result Hello World

33−--start here

3433module Main where

3534import Batteries

3635

37−-- Some dumb comment

38−withHighlighting = do

39− editorComponent <- memo mkEditor

40− component "WithHighlighting" \(props ∷ { code ∷ String }) -> React.do

41− gaps /\ updateGaps <- useState Nothing

42− pure

43− $ fragment

44− [ R.div

45− { style: css { visibility: "hidden" }

46− , children:

47− [ element editorComponent

48− { height: "0"

49− , language: "purescript"

50− , onLoad:

51− \editor -> do

52− let

53− newCtx = ctx { highlight = (monacoHighlighter editor).highlight }

54− gapsi <- FillInTheGaps.makeComponent newCtx

55− updateGaps $ pure <<< pure $ gapsi

56− }

57− ]

58− }

59− , gaps

60− # foldMap \g ->

61− element g { code: codeWithHoles }

62− ]

63−

64−

6536main :: Effect Unit

37+--start here

6638main = log

6739 "{-Hello World-}"

6840--end here

components/src/Yoga/InlineCode/Component.purs+14−7

@@ -6,14 +6,18 @@ import CSS (value)

66import Data.Foldable (fold, intercalate)

77import Data.Maybe (Maybe)

88import Data.String (trim)

9+import Data.Time.Duration (Milliseconds(..))

910import Data.Tuple.Nested ((/\))

1011import Effect (Effect)

12+import Effect.Aff (delay)

13+import Effect.Class (liftEffect)

1114import Foreign.Object as Obj

1215import React.Basic.DOM as R

13−import React.Basic.DOM.Events (preventDefault, targetValue)

14−import React.Basic.Events (handler)

16+import React.Basic.DOM.Events (capture, capture_, preventDefault, targetValue)

17+import React.Basic.Events (handler, handler_)

1518import React.Basic.Hooks (ReactComponent, component, useEffect, useState)

1619import React.Basic.Hooks as React

20+import React.Basic.Hooks.Aff (useAff)

1721import Record.Extra (pick)

1822import Yoga.Helpers ((?||))

1923import Yoga.InlineCode.Styles (styles)

@@ -37,18 +41,22 @@ makeComponent = do

3741 useStyles <- makeStylesJSS styles

3842 component "InlineCode" \props@{ className, onSubmit } -> React.do

3943 value /\ modifyValue <- useState ""

40− useEffect value do

41− onSubmit value

42− pure mempty

4344 classes <- useStyles $ pick props

45+ useAff value do

46+ delay (200.0 # Milliseconds)

47+ onSubmit value # liftEffect

4448 pure

45− $ R.form

49+ $ R.div

4650 { className: classes.form

4751 , children:

4852 [ R.input

4953 { className: intercalate " " [ classes.inlinecode, fold className ]

5054 , maxLength: props.width ?|| 10

5155 , value

56+ , spellCheck: false

57+ , autoComplete: false

58+ , autoCorrect: "off"

59+ , autoCapitalize: "off"

5260 , onChange:

5361 handler targetValue

5462 ( \v -> modifyValue $ const (v ?|| "")

@@ -56,5 +64,4 @@ makeComponent = do

5664 , _data: Obj.singleton "testid" "inline-code"

5765 }

5866 ]

59− , onSubmit: handler preventDefault (const $ mempty)

6067 }

components/src/Yoga/InlineCode/Styles.purs+1−1

@@ -54,7 +54,7 @@ styles = jssClasses go

5454 overflow visible

5555 boxSizing borderBox

5656 verticalAlign baseline

57− background $ withAlpha 0.15 theme.textColour

57+ background $ withAlpha 0.15 theme.grey

5858 border solid s_5 (Color.rgba 0 0 0 0.0)

5959 borderRadius s_2 s_2 s_2 s_2

6060 fontFamily

components/src/Yoga/SVG/Image.purs+1−1

@@ -51,7 +51,7 @@ mkLandingPageBackground = do

5151 , fill: theme.textColour # toHexString

5252 }

5353 , keyword: { fill: theme.green # toHexString }

54− , typeName: { fill: theme.pink # toHexString }

54+ , typeName: { fill: theme.purple # toHexString }

5555 , "@keyframes animatedCursor":

5656 { "0%": { opacity: "0.0" }

5757 , "50%": { opacity: "1.0" }

components/src/Yoga/Theme/Default.purs+11−11

@@ -16,7 +16,7 @@ hex c = c # Color.fromHexString # fromMaybe' \_ -> unsafeCrashWith $ "Invalid he

1616

1717darkTheme ∷ Theme

1818darkTheme =

19− { backgroundColour: Color.hsl 238.0 0.12 0.20

19+ { backgroundColour: Color.hsl 238.0 0.18 0.20

2020 , textColour: Color.hsl 225.0 0.28 0.90

2121 , interfaceColour: Color.hsl 225.0 0.48 0.12

2222 , highlightColour: Color.hsl 285.0 0.88 0.72

@@ -24,11 +24,9 @@ darkTheme =

2424 , textFontFamily: cons' "Rubik" systemFontStack

2525 , headingFontFamily: cons' "Rubik" systemFontStack

2626 , codeFontFamily: cons' "VictorMono" []

27− , yellow: Color.rgb 255 235 149

27+ , yellow: Color.hsl 36.0 0.82 0.76

2828 , green: Color.hsl 84.0 0.617 0.631

29− , pink: Color.hsl 276.0 0.677 0.745

30− , orange: Color.rgb 255 203 139

31− , turquoise: Color.rgb 127 219 202

29+ , purple: Color.hsl 276.0 0.677 0.745

3230 , red: Color.rgb 255 88 116

3331 , blue: Color.rgb 130 170 255

3432 , grey: Color.rgb 150 150 150

@@ -42,13 +40,15 @@ darkTheme =

4240lightTheme ∷ Theme

4341lightTheme =

4442 darkTheme

45− { textColour = Color.hsl 225.0 0.18 0.25

46− -- , backgroundColour = Color.hsl 210.0 0.08 0.87

43+ { textColour = Color.hsl 220.0 0.18 0.30

4744 , backgroundColour = Color.hsl 30.0 0.50 0.96

4845 , interfaceColour = Color.hsl 210.0 0.10 0.89

49− -- , highlightColour = Color.hsl 209.0 0.95 0.69

50− , highlightColour = Color.hsl 350.0 0.90 0.70

46+ , highlightColour = Color.hsl 350.0 0.93 0.62

5147 , altHighlightColour = Color.hsl 84.0 0.617 0.631

52− , green = Color.hsl 84.0 0.617 0.431

53− , pink = Color.hsl 276.0 0.677 0.545

48+ , green = Color.hsl 170.0 0.39 0.40

49+ , purple = Color.hsl 284.0 0.64 0.60

50+ , red = Color.hsl 348.0 0.80 0.58

51+ , yellow = Color.hsl 36.0 0.82 0.46

52+ , blue = Color.hsl 221.0 0.92 0.65

53+ , grey = Color.hsl 270.0 0.10 0.60

5454 }

components/src/Yoga/Theme/Syntax.purs+115−117

@@ -1,127 +1,125 @@

11module Yoga.Theme.Syntax where

22

33import Prelude

4+import Color (ColorSpace(..))

5+import Color as Color

46import Color as Color

57import React.Basic.DOM (css)

68import React.Basic.SyntaxHighlighter.Component (HighlighterTheme)

7−import Yoga.Theme (increaseContrastTo)

89import Yoga.Theme.Types (CSSTheme)

910

1011mkHighlighterTheme ∷ CSSTheme -> HighlighterTheme

1112mkHighlighterTheme theme =

12− let

13− contrasted = increaseContrastTo 6.0 theme.backgroundColour

14− in

15− { hljs:

16− css

17− { display: "inline"

18− , overflowX: "auto"

19− }

20− , "hljs-keyword":

21− css

22− { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-140.0) theme.highlightColour))

23− , fontWeight: "normal"

24− }

25− , "hljs-symbol":

26− css

27− { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-140.0) theme.highlightColour))

28− }

29− , "hljs-type":

30− css

31− { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-80.0) theme.highlightColour))

32− , fontWeight: "normal"

33− }

34− , "hljs-string":

35− css

36− { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-20.0) theme.highlightColour))

37− }

38− , "hljs-title":

39− css

40− { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-120.0) theme.highlightColour))

41− , fontStyle: "normal"

42− }

43− , "hljs-selector-tag":

44− css

45− { color: "yellow"

46− , fontWeight: "bold"

47− }

48− , "hljs-literal":

49− css

50− { color: "green"

51− , fontWeight: "bold"

52− }

53− , "hljs-section":

54− css

55− { color: "darkslateblue"

56− , fontWeight: "bold"

57− }

58− , "hljs-link":

59− css

60− { color: "yellow"

61− }

62− , "hljs-subst":

63− css

64− { color: "#ddd"

65− }

66− , "hljs-name":

67− css

68− { color: "#d88"

69− , fontWeight: "bold"

70− }

71− , "hljs-attribute":

72− css

73− { color: "tomato"

74− }

75− , "hljs-bullet":

76− css

77− { color: "#d88"

78− }

79− , "hljs-built_in":

80− css

81− { color: "#d88"

82− }

83− , "hljs-addition":

84− css

85− { color: "#d88"

86− }

87− , "hljs-variable":

88− css

89− { color: "#d88"

90− }

91− , "hljs-template-tag":

92− css

93− { color: "#d88"

94− }

95− , "hljs-template-variable":

96− css

97− { color: "#d88"

98− }

99− , "hljs-comment":

100− css

101− { color: "#777"

102− }

103− , "hljs-quote":

104− css

105− { color: "#777"

106− }

107− , "hljs-deletion":

108− css

109− { color: "#777"

110− }

111− , "hljs-meta":

112− css

113− { color: "#777"

114− }

115− , "hljs-doctag":

116− css

117− { fontWeight: "bold"

118− }

119− , "hljs-strong":

120− css

121− { fontWeight: "bold"

122− }

123− , "hljs-emphasis":

124− css

125− { fontStyle: "italic"

126− }

127− }

13+ { hljs:

14+ css

15+ { display: "inline"

16+ , overflowX: "auto"

17+ , color: Color.cssStringRGBA $ Color.mix HSL (Color.desaturate 0.5 theme.highlightColour) (Color.desaturate 0.3 theme.textColour) 0.4

18+ }

19+ , "hljs-keyword":

20+ css

21+ { color: Color.cssStringRGBA theme.highlightColour

22+ , fontWeight: "normal"

23+ }

24+ , "hljs-symbol":

25+ css

26+ { color: Color.cssStringRGBA $ theme.highlightColour

27+ }

28+ , "hljs-type":

29+ css

30+ { color: Color.cssStringRGBA theme.highlightColour

31+ , fontWeight: "normal"

32+ }

33+ , "hljs-string":

34+ css

35+ { color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue (-15.0)

36+ }

37+ , "hljs-title":

38+ css

39+ { color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue 15.0

40+ }

41+ , "hljs-comment":

42+ css

43+ { color: Color.cssStringRGBA $ theme.grey

44+ }

45+ , "hljs-selector-tag":

46+ css

47+ { color: "yellow"

48+ , fontWeight: "bold"

49+ }

50+ , "hljs-literal":

51+ css

52+ { color: "green"

53+ , fontWeight: "bold"

54+ }

55+ , "hljs-section":

56+ css

57+ { color: "darkslateblue"

58+ , fontWeight: "bold"

59+ }

60+ , "hljs-link":

61+ css

62+ { color: "yellow"

63+ }

64+ , "hljs-subst":

65+ css

66+ { color: "#ddd"

67+ }

68+ , "hljs-name":

69+ css

70+ { color: "#d88"

71+ , fontWeight: "bold"

72+ }

73+ , "hljs-attribute":

74+ css

75+ { color: "hotpink"

76+ }

77+ , "hljs-bullet":

78+ css

79+ { color: "#d88"

80+ }

81+ , "hljs-built_in":

82+ css

83+ { color: "#d88"

84+ }

85+ , "hljs-addition":

86+ css

87+ { color: "#d88"

88+ }

89+ , "hljs-variable":

90+ css

91+ { color: "#d88"

92+ }

93+ , "hljs-template-tag":

94+ css

95+ { color: "#d88"

96+ }

97+ , "hljs-template-variable":

98+ css

99+ { color: "#d88"

100+ }

101+ , "hljs-quote":

102+ css

103+ { color: "#777"

104+ }

105+ , "hljs-deletion":

106+ css

107+ { color: "#777"

108+ }

109+ , "hljs-meta":

110+ css

111+ { color: "#777"

112+ }

113+ , "hljs-doctag":

114+ css

115+ { fontWeight: "bold"

116+ }

117+ , "hljs-strong":

118+ css

119+ { fontWeight: "bold"

120+ }

121+ , "hljs-emphasis":

122+ css

123+ { fontStyle: "italic"

124+ }

125+ }

components/src/Yoga/Theme/Types.purs+2−6

@@ -16,9 +16,7 @@ type Theme

1616 , codeFontFamily ∷ NonEmptyArray String

1717 , yellow ∷ Color

1818 , green ∷ Color

19− , pink ∷ Color

20− , orange ∷ Color

21− , turquoise ∷ Color

19+ , purple ∷ Color

2220 , red ∷ Color

2321 , blue ∷ Color

2422 , white ∷ Color

@@ -57,9 +55,7 @@ type YogaTheme

5755 , codeFontFamily ∷ NonEmptyArray String

5856 , yellow ∷ Color

5957 , green ∷ Color

60− , pink ∷ Color

61− , orange ∷ Color

62− , turquoise ∷ Color

58+ , purple ∷ Color

6359 , red ∷ Color

6460 , blue ∷ Color

6561 , grey ∷ Color