64d8094 · rowtype-yoga/psfp

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

compare with master

unifiedsplit

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

10 }),

11 ],

12 };

13− var KEY = {

13+ var ESCAPED_KEY = {

14 className: "attribute",

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

15+ begin: '"',

16+ illegal: '"',

17+ end: '"',

16 relevance: 0,

18 relevance: 0,

17 };

19 };

20+ // var KEY = {

21+ // className: "attribute",

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

23+ // illegal: ""

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

25+ // excludeEnd: true,

26+ // relevance: 0,

27+ // };

18 var CONSTRUCTOR = {

28 var CONSTRUCTOR = {

19 className: "type",

29 className: "type",

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

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

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

30 COMMENT,

40 COMMENT,

31 ],

41 ],

32 };

42 };

43+ var VALUE = {};

44+ var KEY_VALUE = {

45+ className: "attribute",

46+ begin: "\\w+",

47+ end: ",|}",

48+ contains: [VALUE],

49+ };

33 var RECORD = {

50 var RECORD = {

34 begin: "{",

51 begin: "{",

35 end: "}",

52 end: "}",

36− contains: LIST.contains,

53+ contains: [KEY_VALUE],

37 };

54 };

38 return {

55 return {

39 name: "PureScript",

56 name: "PureScript",

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

97 },

114 },

98 {

115 {

99 className: "symbol",

116 className: "symbol",

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

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

118+ invalid: "/",

101 },

119 },

102− // {

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

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

105− // contains: [KEY],

106− // },

107 {

120 {

108 beginKeywords: "default",

121 beginKeywords: "default",

109 end: "$",

122 end: "$",

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

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

10 ],

11 };

12

13− var KEY = {

13+ var ESCAPED_KEY = {

14 className: "attribute",

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

15+ begin: '"',

16+ illegal: '"',

17+ end: '"',

16 relevance: 0,

18 relevance: 0,

17 };

19 };

18

20

21+ // var KEY = {

22+ // className: "attribute",

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

24+ // illegal: ""

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

26+ // excludeEnd: true,

27+ // relevance: 0,

28+ // };

29+

19 var CONSTRUCTOR = {

30 var CONSTRUCTOR = {

20 className: "type",

31 className: "type",

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

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

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

33 ],

44 ],

34 };

45 };

35

46

47+ var VALUE = {};

48+

49+ var KEY_VALUE = {

50+ className: "attribute",

51+ begin: "\\w+",

52+ end: ",|}",

53+ contains: [VALUE],

54+ };

55+

36 var RECORD = {

56 var RECORD = {

37 begin: "{",

57 begin: "{",

38 end: "}",

58 end: "}",

39− contains: LIST.contains,

59+ contains: [KEY_VALUE],

40 };

60 };

41

61

42 return {

62 return {

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

104 },

124 },

105 {

125 {

106 className: "symbol",

126 className: "symbol",

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

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

128+ invalid: "/",

108 },

129 },

109− // {

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

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

112− // contains: [KEY],

113− // },

114 {

130 {

115 beginKeywords: "default",

131 beginKeywords: "default",

116 end: "$",

132 end: "$",

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

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

50 , theme.highlightColourRotatedForwards

51 ]

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

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

53 , boxShadow:

54 , boxShadow:

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

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

55 , backgroundClip: "border-box"

56 , backgroundClip: "border-box"

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

106 , backgroundClip: "border-box"

107 , backgroundClip: "border-box"

107 , background:

108 , background:

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

109 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.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))

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))

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))

111 ]

112 ]

112 , display: "inline-block"

113 , display: "inline-block"

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

113 }

115 }

114 , btn:

116 , btn:

115 { background:

117 { background:

116 linearGradient "127deg"

118 linearGradient "127deg"

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

119 [ (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

119 ]

121 ]

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

120 , boxShadow:

123 , boxShadow:

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

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

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

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

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

161 (cssStringRGBA $ withAlpha 0.5 theme.highlightColourRotatedBackwards) ∷

164 (cssStringRGBA $ withAlpha 0.5 theme.highlightColourRotatedBackwards) ∷

162 String

165 String

163 , background:

166 , 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+ -- ]

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

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

165− [ less 0.04 $ withAlpha 0.92 theme.backgroundColour

172+ $ ( Color.darken 0.1

166− , less 0.09 $ withAlpha 0.92 theme.backgroundColour

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))

167− ]

175+ ]

176+ )

168 , color: more 0.02 theme.highlightColour

177 , color: more 0.02 theme.highlightColour

169 , textFillColor: more 0.02 theme.highlightColour

178 , textFillColor: more 0.02 theme.highlightColour

170 }

179 }

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

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

1module Yoga.FillInTheGaps.Component where

2

3import Prelude

4−import Data.Array (foldMap, intercalate)

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

5import Data.Array as A

6import Data.Either (Either(..))

7import Data.Foldable (foldl)

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

17import Data.String.Regex.Flags as RegexFlags

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

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

20+import Debug.Trace (spy)

20import Effect (Effect)

21import Effect (Effect)

21import Effect.Aff (launchAff_)

22import Effect.Aff (launchAff_)

22import Effect.Class (liftEffect)

23import Effect.Class (liftEffect)

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

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

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

91 renderSegment i j s =

92 renderSegment i j s =

92 if between start end i then case s of

93 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' }

94 Hole width _ ->

95 Hole width _ ->

95 element ic

96 element ic

96 $ justifill

97 $ justifill

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

135 | Regex.test endRegex x -> End

136 | Regex.test endRegex x -> End

136 other -> Filler other

137 other -> Filler other

137

138

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+

138type Ctx r

153type Ctx r

139 = (Compiler r)

154 = (Compiler r)

140

155

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

150 let

165 let

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

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

152

167

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

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

154 segments /\ modifySegments <- useState initialSegments

169 segments /\ modifySegments <- useState initialSegments

155 result /\ modifyResult <- useState Nothing

170 result /\ modifyResult <- useState Nothing

156 cssTheme <- useTheme

171 cssTheme <- useTheme

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

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

30codeWithHoles =

31 """

32--result Hello World

33−--start here

34module Main where

33module Main where

35import Batteries

34import Batteries

36

35

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−

65main :: Effect Unit

36main :: Effect Unit

37+--start here

66main = log

38main = log

67 "{-Hello World-}"

39 "{-Hello World-}"

68--end here

40--end here

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

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

6import Data.Foldable (fold, intercalate)

7import Data.Maybe (Maybe)

8import Data.String (trim)

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

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

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

10import Effect (Effect)

11import Effect (Effect)

12+import Effect.Aff (delay)

13+import Effect.Class (liftEffect)

11import Foreign.Object as Obj

14import Foreign.Object as Obj

12import React.Basic.DOM as R

15import React.Basic.DOM as R

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

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

14−import React.Basic.Events (handler)

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

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

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

16import React.Basic.Hooks as React

19import React.Basic.Hooks as React

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

17import Record.Extra (pick)

21import Record.Extra (pick)

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

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

19import Yoga.InlineCode.Styles (styles)

23import Yoga.InlineCode.Styles (styles)

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

37 useStyles <- makeStylesJSS styles

41 useStyles <- makeStylesJSS styles

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

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

39 value /\ modifyValue <- useState ""

43 value /\ modifyValue <- useState ""

40− useEffect value do

41− onSubmit value

42− pure mempty

43 classes <- useStyles $ pick props

44 classes <- useStyles $ pick props

45+ useAff value do

46+ delay (200.0 # Milliseconds)

47+ onSubmit value # liftEffect

44 pure

48 pure

45− $ R.form

49+ $ R.div

46 { className: classes.form

50 { className: classes.form

47 , children:

51 , children:

48 [ R.input

52 [ R.input

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

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

50 , maxLength: props.width ?|| 10

54 , maxLength: props.width ?|| 10

51 , value

55 , value

56+ , spellCheck: false

57+ , autoComplete: false

58+ , autoCorrect: "off"

59+ , autoCapitalize: "off"

52 , onChange:

60 , onChange:

53 handler targetValue

61 handler targetValue

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

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

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

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

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

57 }

65 }

58 ]

66 ]

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

60 }

67 }

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

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

54 overflow visible

55 boxSizing borderBox

56 verticalAlign baseline

57− background $ withAlpha 0.15 theme.textColour

57+ background $ withAlpha 0.15 theme.grey

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

59 borderRadius s_2 s_2 s_2 s_2

60 fontFamily

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

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

51 , fill: theme.textColour # toHexString

52 }

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

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

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

55 , "@keyframes animatedCursor":

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

57 , "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

16

17darkTheme ∷ Theme

18darkTheme =

19− { backgroundColour: Color.hsl 238.0 0.12 0.20

19+ { backgroundColour: Color.hsl 238.0 0.18 0.20

20 , textColour: Color.hsl 225.0 0.28 0.90

21 , interfaceColour: Color.hsl 225.0 0.48 0.12

22 , highlightColour: Color.hsl 285.0 0.88 0.72

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

24 , textFontFamily: cons' "Rubik" systemFontStack

25 , headingFontFamily: cons' "Rubik" systemFontStack

26 , codeFontFamily: cons' "VictorMono" []

27− , yellow: Color.rgb 255 235 149

27+ , yellow: Color.hsl 36.0 0.82 0.76

28 , green: Color.hsl 84.0 0.617 0.631

29− , pink: Color.hsl 276.0 0.677 0.745

29+ , purple: Color.hsl 276.0 0.677 0.745

30− , orange: Color.rgb 255 203 139

31− , turquoise: Color.rgb 127 219 202

32 , red: Color.rgb 255 88 116

30 , red: Color.rgb 255 88 116

33 , blue: Color.rgb 130 170 255

31 , blue: Color.rgb 130 170 255

34 , grey: Color.rgb 150 150 150

32 , grey: Color.rgb 150 150 150

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

42lightTheme ∷ Theme

40lightTheme ∷ Theme

43lightTheme =

41lightTheme =

44 darkTheme

42 darkTheme

45− { textColour = Color.hsl 225.0 0.18 0.25

43+ { textColour = Color.hsl 220.0 0.18 0.30

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

47 , backgroundColour = Color.hsl 30.0 0.50 0.96

44 , backgroundColour = Color.hsl 30.0 0.50 0.96

48 , interfaceColour = Color.hsl 210.0 0.10 0.89

45 , 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

51 , altHighlightColour = Color.hsl 84.0 0.617 0.631

47 , altHighlightColour = Color.hsl 84.0 0.617 0.631

52− , green = Color.hsl 84.0 0.617 0.431

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

53− , pink = Color.hsl 276.0 0.677 0.545

52+ , blue = Color.hsl 221.0 0.92 0.65

53+ , grey = Color.hsl 270.0 0.10 0.60

54 }

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

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

1module Yoga.Theme.Syntax where

2

3import Prelude

4+import Color (ColorSpace(..))

5+import Color as Color

4import Color as Color

6import Color as Color

5import React.Basic.DOM (css)

7import React.Basic.DOM (css)

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

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

7−import Yoga.Theme (increaseContrastTo)

8import Yoga.Theme.Types (CSSTheme)

9import Yoga.Theme.Types (CSSTheme)

9

10

10mkHighlighterTheme ∷ CSSTheme -> HighlighterTheme

11mkHighlighterTheme ∷ CSSTheme -> HighlighterTheme

11mkHighlighterTheme theme =

12mkHighlighterTheme theme =

12− let

13− contrasted = increaseContrastTo 6.0 theme.backgroundColour

14− in

15− { hljs:

13+ { hljs:

16− css

14+ css

17− { display: "inline"

15+ { display: "inline"

18− , overflowX: "auto"

16+ , overflowX: "auto"

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

19− }

18+ }

20− , "hljs-keyword":

19+ , "hljs-keyword":

21− css

20+ css

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

21+ { color: Color.cssStringRGBA theme.highlightColour

23− , fontWeight: "normal"

22+ , fontWeight: "normal"

24− }

23+ }

25− , "hljs-symbol":

24+ , "hljs-symbol":

26− css

25+ css

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

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

28− }

27+ }

29− , "hljs-type":

28+ , "hljs-type":

30− css

29+ css

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

30+ { color: Color.cssStringRGBA theme.highlightColour

32− , fontWeight: "normal"

31+ , fontWeight: "normal"

33− }

32+ }

34− , "hljs-string":

33+ , "hljs-string":

35− css

34+ css

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

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

37− }

36+ }

38− , "hljs-title":

37+ , "hljs-title":

39− css

38+ css

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

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

41− , fontStyle: "normal"

40+ }

41+ , "hljs-comment":

42+ css

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

42− }

44+ }

43− , "hljs-selector-tag":

45+ , "hljs-selector-tag":

44− css

46+ css

45− { color: "yellow"

47+ { color: "yellow"

46− , fontWeight: "bold"

48+ , fontWeight: "bold"

47− }

49+ }

48− , "hljs-literal":

50+ , "hljs-literal":

49− css

51+ css

50− { color: "green"

52+ { color: "green"

51− , fontWeight: "bold"

53+ , fontWeight: "bold"

52− }

54+ }

53− , "hljs-section":

55+ , "hljs-section":

54− css

56+ css

55− { color: "darkslateblue"

57+ { color: "darkslateblue"

56− , fontWeight: "bold"

58+ , fontWeight: "bold"

57− }

59+ }

58− , "hljs-link":

60+ , "hljs-link":

59− css

61+ css

60− { color: "yellow"

62+ { color: "yellow"

61− }

63+ }

62− , "hljs-subst":

64+ , "hljs-subst":

63− css

65+ css

64− { color: "#ddd"

66+ { color: "#ddd"

65− }

67+ }

66− , "hljs-name":

68+ , "hljs-name":

67− css

69+ css

68− { color: "#d88"

70+ { color: "#d88"

69− , fontWeight: "bold"

71+ , fontWeight: "bold"

70− }

72+ }

71− , "hljs-attribute":

73+ , "hljs-attribute":

72− css

74+ css

73− { color: "tomato"

75+ { color: "hotpink"

74− }

76+ }

75− , "hljs-bullet":

77+ , "hljs-bullet":

76− css

78+ css

77− { color: "#d88"

79+ { color: "#d88"

78− }

80+ }

79− , "hljs-built_in":

81+ , "hljs-built_in":

80− css

82+ css

81− { color: "#d88"

83+ { color: "#d88"

82− }

84+ }

83− , "hljs-addition":

85+ , "hljs-addition":

84− css

86+ css

85− { color: "#d88"

87+ { color: "#d88"

86− }

88+ }

87− , "hljs-variable":

89+ , "hljs-variable":

88− css

90+ css

89− { color: "#d88"

91+ { color: "#d88"

90− }

92+ }

91− , "hljs-template-tag":

93+ , "hljs-template-tag":

92− css

94+ css

93− { color: "#d88"

95+ { color: "#d88"

94− }

96+ }

95− , "hljs-template-variable":

97+ , "hljs-template-variable":

96− css

98+ css

97− { color: "#d88"

99+ { color: "#d88"

98− }

99− , "hljs-comment":

100− css

101− { color: "#777"

102− }

100+ }

103− , "hljs-quote":

101+ , "hljs-quote":

104− css

102+ css

105− { color: "#777"

103+ { color: "#777"

106− }

104+ }

107− , "hljs-deletion":

105+ , "hljs-deletion":

108− css

106+ css

109− { color: "#777"

107+ { color: "#777"

110− }

108+ }

111− , "hljs-meta":

109+ , "hljs-meta":

112− css

110+ css

113− { color: "#777"

111+ { color: "#777"

114− }

112+ }

115− , "hljs-doctag":

113+ , "hljs-doctag":

116− css

114+ css

117− { fontWeight: "bold"

115+ { fontWeight: "bold"

118− }

116+ }

119− , "hljs-strong":

117+ , "hljs-strong":

120− css

118+ css

121− { fontWeight: "bold"

119+ { fontWeight: "bold"

122− }

120+ }

123− , "hljs-emphasis":

121+ , "hljs-emphasis":

124− css

122+ css

125− { fontStyle: "italic"

123+ { fontStyle: "italic"

126− }

124+ }

127− }

125+ }

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

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

16 , codeFontFamily ∷ NonEmptyArray String

17 , yellow ∷ Color

18 , green ∷ Color

19− , pink ∷ Color

20− , orange ∷ Color

21− , turquoise ∷ Color

19+ , purple ∷ Color

22 , red ∷ Color

20 , red ∷ Color

23 , blue ∷ Color

21 , blue ∷ Color

24 , white ∷ Color

22 , white ∷ Color

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

57 , codeFontFamily ∷ NonEmptyArray String

55 , codeFontFamily ∷ NonEmptyArray String

58 , yellow ∷ Color

56 , yellow ∷ Color

59 , green ∷ Color

57 , green ∷ Color

60− , pink ∷ Color

61− , orange ∷ Color

62− , turquoise ∷ Color

58+ , purple ∷ Color

63 , red ∷ Color

59 , red ∷ Color

64 , blue ∷ Color

60 , blue ∷ Color

65 , grey ∷ Color

61 , grey ∷ Color