feat: changed colour names to be more intuitive

frontend/src/Config/CardFormat.elm

@@ -30,7 +30,7 @@ cardMaker =
     column
         [ E.width <| px 650
         , D.width 5
-        , D.color colourTheme.cardBackground
+        , D.color colourTheme.backgroundDarkGrey
         , D.roundEach
             { topLeft = 32
             , topRight = 32
@@ -45,7 +45,7 @@ cardFormatter =
     column
         [ E.height fill
         , E.width fill
-        , B.color colourTheme.cardBackground
+        , B.color colourTheme.backgroundDarkGrey
         , paddingEach
             { top = 10
             , bottom = 10
@@ -87,8 +87,8 @@ cardImageMaker image =
         [ column
             [ D.rounded 100
             , D.width 5
-            , D.color colourTheme.cardBackground
-            , B.color colourTheme.cardBackground
+            , D.color colourTheme.backgroundDarkGrey
+            , B.color colourTheme.backgroundDarkGrey
             ]
             [ E.image
                 [ alignRight
@@ -108,7 +108,7 @@ cardTitleMaker title =
     row
         (nonHighlightedTitleFormat
             ++ [ F.size 20
-               , B.color colourTheme.highlightTextHover
+               , B.color colourTheme.textDarkOrange
                , paddingEach
                     { top = 6
                     , bottom = 3

frontend/src/Config/Colour.elm

@@ -7,13 +7,13 @@ import Html.Attributes as H exposing (style)
 
 
 type alias Theme =
-    { nonHighlightedText : Color
-    , nonHighlightedDarkText : Color
-    , highlightText : Color
-    , highlightTextHover : Color
-    , backgroundColour : Color
+    { textLightGrey : Color
+    , textDarkGrey : Color
+    , textLightOrange : Color
+    , textDarkOrange : Color
+    , backgroundLightGrey : Color
     , debugColour : Color
-    , cardBackground : Color
+    , backgroundDarkGrey : Color
     , barGreen : Color
     , barRed : Color
     , transparent : Color
@@ -22,13 +22,13 @@ type alias Theme =
 
 colourTheme : Theme
 colourTheme =
-    { nonHighlightedText = rgb255 212 212 212
-    , nonHighlightedDarkText = rgb255 126 126 126
-    , highlightText = rgb255 204 102 0
-    , highlightTextHover = rgb255 120 60 0
-    , backgroundColour = rgb255 40 40 40
+    { textLightGrey = rgb255 212 212 212
+    , textDarkGrey = rgb255 126 126 126
+    , textLightOrange = rgb255 204 102 0
+    , textDarkOrange = rgb255 120 60 0
+    , backgroundLightGrey = rgb255 40 40 40
     , debugColour = rgb255 227 28 121
-    , cardBackground = rgb255 30 30 30
+    , backgroundDarkGrey = rgb255 30 30 30
     , barGreen = rgb255 0 102 0
     , barRed = rgb255 102 0 0
     , transparent = rgba 1 1 1 0

frontend/src/Config/Format.elm

@@ -14,7 +14,7 @@ topLevelContainer =
     el
         [ E.width fill
         , height fill
-        , B.color colourTheme.backgroundColour
+        , B.color colourTheme.backgroundLightGrey
         ]
 
 
@@ -35,7 +35,7 @@ transitionStyle =
 transitionHighlightedLinkHover : Element msg -> Element msg
 transitionHighlightedLinkHover =
     el
-        [ mouseOver [ F.color colourTheme.highlightTextHover ]
+        [ mouseOver [ F.color colourTheme.textDarkOrange ]
         , transitionStyle
         ]
 
@@ -43,7 +43,7 @@ transitionHighlightedLinkHover =
 transitionNonHighlightedLinkHover : Element msg -> Element msg
 transitionNonHighlightedLinkHover =
     el
-        [ mouseOver [ F.color colourTheme.highlightText ]
+        [ mouseOver [ F.color colourTheme.textLightOrange ]
         , transitionStyle
         ]
 
@@ -57,7 +57,7 @@ transitionNonHighlightedLinkHoverWithMove content =
         (el
             [ centerX
             , centerY
-            , mouseOver [ F.color colourTheme.highlightText, F.size 25 ]
+            , mouseOver [ F.color colourTheme.textLightOrange, F.size 25 ]
             , transitionStyle
             ]
             content
@@ -84,14 +84,14 @@ titleFormat =
 
 nonHighlightedTitleFormat : List (Attr () msg)
 nonHighlightedTitleFormat =
-    [ F.color colourTheme.nonHighlightedText
+    [ F.color colourTheme.textLightGrey
     ]
         ++ titleFormat
 
 
 highlightedTitleFormat : List (Attr () msg)
 highlightedTitleFormat =
-    [ F.color colourTheme.highlightText
+    [ F.color colourTheme.textLightOrange
     ]
         ++ titleFormat
 
@@ -105,7 +105,7 @@ paragraphLinkFormat : { url : String, label : Element msg } -> Element msg
 paragraphLinkFormat =
     newTabLink
         [ paragraphFontSize
-        , F.color colourTheme.highlightText
+        , F.color colourTheme.textLightOrange
         ]
 
 
@@ -116,7 +116,7 @@ paragraphSpacing =
 
 paragraphText : List (Attr () msg)
 paragraphText =
-    [ F.color colourTheme.nonHighlightedText
+    [ F.color colourTheme.textLightGrey
     , paragraphSpacing
     , paragraphFontSize
     ]
@@ -124,7 +124,7 @@ paragraphText =
 
 paragraphHightlightedBoldText : List (Attr () msg)
 paragraphHightlightedBoldText =
-    [ F.color colourTheme.highlightText
+    [ F.color colourTheme.textLightOrange
     , F.bold
     , paragraphSpacing
     , paragraphFontSize

frontend/src/Config/StrengthBar.elm

@@ -23,7 +23,7 @@ barMaker getTooltip num =
         ([ E.height <| px 12
          , E.width fill
          , D.rounded 10
-         , D.color colourTheme.nonHighlightedDarkText
+         , D.color colourTheme.textDarkGrey
          , D.width 2
          , B.gradient
             { angle = 90

frontend/src/Config/ToolTip.elm

@@ -27,10 +27,10 @@ tooltip content =
                         , F.size 15
                         , F.center
                         , F.regular
-                        , B.color colourTheme.backgroundColour
-                        , F.color colourTheme.nonHighlightedText
+                        , B.color colourTheme.backgroundLightGrey
+                        , F.color colourTheme.textLightGrey
                         , padding 15
-                        , D.color colourTheme.highlightText
+                        , D.color colourTheme.textLightOrange
                         , D.rounded 5
                         , D.width 2
                         , D.shadow