feat: changed colour names to be more intuitive

This commit is contained in:
Nick 2024-11-28 00:58:24 -06:00
parent ed73a38cbe
commit 6019079212
10 changed files with 65 additions and 65 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -195,7 +195,7 @@ circumstanceMaker dodgeEntry =
VagueGesture -> VagueGesture ->
"Chose to gesture vaguely instead of engaging" "Chose to gesture vaguely instead of engaging"
) )
, text "." |> el [ F.color colourTheme.nonHighlightedText ] , text "." |> el [ F.color colourTheme.textLightGrey ]
, row [ alignTop, alignLeft ] , row [ alignTop, alignLeft ]
(List.indexedMap (List.indexedMap
(\index2 link -> (\index2 link ->
@ -212,7 +212,7 @@ circumstanceMaker dodgeEntry =
, label = , label =
row [] row []
[ transitionHighlightedLinkHover <| (text (String.fromInt (index2 + 1)) |> el [ F.size 13 ]) [ transitionHighlightedLinkHover <| (text (String.fromInt (index2 + 1)) |> el [ F.size 13 ])
, text ", " |> el [ F.color colourTheme.nonHighlightedText ] , text ", " |> el [ F.color colourTheme.textLightGrey ]
] ]
} }
) )

View file

@ -70,7 +70,7 @@ propositionMaker argument =
"A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate." "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate."
] ]
(text "Proposition:") (text "Proposition:")
|> el [ F.color colourTheme.highlightText ] |> el [ F.color colourTheme.textLightOrange ]
] ]
] ]
, column , column
@ -78,7 +78,7 @@ propositionMaker argument =
[ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ paragraph (paragraphBoldFormat ++ [ F.size 18 ])
[ text argument.propositionTitle [ text argument.propositionTitle
|> el |> el
[ F.color colourTheme.nonHighlightedText [ F.color colourTheme.textLightGrey
, F.regular , F.regular
, F.size 16 , F.size 16
] ]
@ -115,7 +115,7 @@ reductioMaker argument =
"This is the position from which the reductio ad absurdum is derived." "This is the position from which the reductio ad absurdum is derived."
] ]
(text "Reductio:") (text "Reductio:")
|> el [ F.color colourTheme.highlightText ] |> el [ F.color colourTheme.textLightOrange ]
] ]
] ]
, column [ E.width fill, E.alignLeft ] , column [ E.width fill, E.alignLeft ]
@ -148,7 +148,7 @@ summaryMaker argument =
"The following information provides additional context and insight into the reasoning behind the argument." "The following information provides additional context and insight into the reasoning behind the argument."
] ]
(text "Summary:") (text "Summary:")
|> el [ F.color colourTheme.highlightText ] |> el [ F.color colourTheme.textLightOrange ]
] ]
] ]
, column , column
@ -163,7 +163,7 @@ summaryMaker argument =
) )
[ text argument.propositionSummary [ text argument.propositionSummary
|> el |> el
[ F.color colourTheme.nonHighlightedText [ F.color colourTheme.textLightGrey
, F.regular , F.regular
, F.size 16 , F.size 16
] ]
@ -190,7 +190,7 @@ strengthMaker argument =
"This represents my confidence in the soundness of the argument." "This represents my confidence in the soundness of the argument."
] ]
(text "Confidence:") (text "Confidence:")
|> el [ F.color colourTheme.highlightText ] |> el [ F.color colourTheme.textLightOrange ]
] ]
] ]
, column , column
@ -259,7 +259,7 @@ tableMaker argument =
[ spacing 0 [ spacing 0
, D.rounded 10 , D.rounded 10
, D.width 2 , D.width 2
, D.color colourTheme.nonHighlightedDarkText , D.color colourTheme.textDarkGrey
, clip , clip
] ]
{ data = argument.definitionTable { data = argument.definitionTable
@ -273,17 +273,17 @@ tableMaker argument =
, left = 1 , left = 1
, right = 1 , right = 1
} }
, D.color colourTheme.nonHighlightedDarkText , D.color colourTheme.textDarkGrey
, padding 8 , padding 8
, E.width fill , E.width fill
] ]
(text "Definiendum") (text "Definiendum")
|> el [ F.color colourTheme.highlightText ] |> el [ F.color colourTheme.textLightOrange ]
, width = fill |> maximum 50 , width = fill |> maximum 50
, view = , view =
\definition -> \definition ->
row row
[ F.color colourTheme.highlightText [ F.color colourTheme.textLightOrange
, F.bold , F.bold
, D.widthEach , D.widthEach
{ bottom = 1 { bottom = 1
@ -291,7 +291,7 @@ tableMaker argument =
, left = 1 , left = 1
, right = 1 , right = 1
} }
, D.color colourTheme.nonHighlightedDarkText , D.color colourTheme.textDarkGrey
, padding 8 , padding 8
, E.height fill , E.height fill
] ]
@ -309,17 +309,17 @@ tableMaker argument =
, left = 0 , left = 0
, right = 1 , right = 1
} }
, D.color colourTheme.nonHighlightedDarkText , D.color colourTheme.textDarkGrey
, padding 8 , padding 8
, E.width fill , E.width fill
] ]
(text "Definiens") (text "Definiens")
|> el [ F.color colourTheme.highlightText ] |> el [ F.color colourTheme.textLightOrange ]
, width = fill , width = fill
, view = , view =
\definition -> \definition ->
paragraph paragraph
[ F.color colourTheme.nonHighlightedText [ F.color colourTheme.textLightGrey
, F.regular , F.regular
, D.widthEach , D.widthEach
{ bottom = 1 { bottom = 1
@ -327,7 +327,7 @@ tableMaker argument =
, left = 0 , left = 0
, right = 1 , right = 1
} }
, D.color colourTheme.nonHighlightedDarkText , D.color colourTheme.textDarkGrey
, padding 8 , padding 8
, E.height fill , E.height fill
] ]
@ -376,7 +376,7 @@ formalizationMaker argument =
[ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")") [ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")")
, text premiseWithNotation.premise , text premiseWithNotation.premise
|> el |> el
[ F.color colourTheme.nonHighlightedText [ F.color colourTheme.textLightGrey
, F.regular , F.regular
, paddingEach , paddingEach
{ top = 0 { top = 0
@ -388,7 +388,7 @@ formalizationMaker argument =
] ]
, paragraph argumentFormatting , paragraph argumentFormatting
[ text ("(" ++ premiseWithNotation.notation ++ ")") [ text ("(" ++ premiseWithNotation.notation ++ ")")
|> el [ F.color colourTheme.highlightText, F.bold ] |> el [ F.color colourTheme.textLightOrange, F.bold ]
] ]
] ]
) )
@ -398,7 +398,7 @@ formalizationMaker argument =
[ text "C)" [ text "C)"
, text argumentEntry.conclusion , text argumentEntry.conclusion
|> el |> el
[ F.color colourTheme.nonHighlightedText [ F.color colourTheme.textLightGrey
, F.regular , F.regular
, paddingEach , paddingEach
{ top = 0 { top = 0
@ -411,7 +411,7 @@ formalizationMaker argument =
, paragraph argumentFormatting , paragraph argumentFormatting
[ text ("(" ++ argumentEntry.conclusionNotation ++ ")") [ text ("(" ++ argumentEntry.conclusionNotation ++ ")")
|> el |> el
[ F.color colourTheme.highlightText [ F.color colourTheme.textLightOrange
, F.bold , F.bold
] ]
] ]
@ -438,8 +438,8 @@ proofTreeMaker argument =
[ newTabLink [ newTabLink
(paragraphBoldFormat (paragraphBoldFormat
++ [ F.size 18 ++ [ F.size 18
, F.color colourTheme.nonHighlightedText , F.color colourTheme.textLightGrey
, B.color colourTheme.highlightTextHover , B.color colourTheme.textDarkOrange
, paddingEach , paddingEach
{ top = 6 { top = 6
, bottom = 2 , bottom = 2
@ -452,9 +452,9 @@ proofTreeMaker argument =
, E.alignRight , E.alignRight
, transitionStyle , transitionStyle
, mouseOver , mouseOver
[ B.color colourTheme.highlightTextHover [ B.color colourTheme.textDarkOrange
, F.color colourTheme.nonHighlightedText , F.color colourTheme.textLightGrey
, D.color colourTheme.highlightTextHover , D.color colourTheme.textDarkOrange
] ]
] ]
) )

View file

@ -142,8 +142,8 @@ episodeMaker appearanceEntry =
] ]
[ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle) [ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
|> el |> el
[ F.color colourTheme.highlightText [ F.color colourTheme.textLightOrange
, mouseOver [ F.color colourTheme.highlightTextHover ] , mouseOver [ F.color colourTheme.textDarkOrange ]
, transitionStyle , transitionStyle
] ]
] ]

View file

@ -81,7 +81,7 @@ view { toContentMsg, model, content } =
row row
[ E.width fill [ E.width fill
, height fill , height fill
, B.color colourTheme.cardBackground , B.color colourTheme.backgroundDarkGrey
] ]
[ column [ column
[ htmlAttribute (H.style "position" "fixed") [ htmlAttribute (H.style "position" "fixed")
@ -91,12 +91,12 @@ view { toContentMsg, model, content } =
, htmlAttribute (H.style "z-index" "10") -- Ensure navbar stays on top , htmlAttribute (H.style "z-index" "10") -- Ensure navbar stays on top
, htmlAttribute (H.style "transform-style" "preserve-3d") , htmlAttribute (H.style "transform-style" "preserve-3d")
, D.widthEach { top = 0, bottom = 0, left = 0, right = 3 } , D.widthEach { top = 0, bottom = 0, left = 0, right = 3 }
, D.color colourTheme.highlightTextHover , D.color colourTheme.textDarkOrange
] ]
[ column [ column
[ alignLeft [ alignLeft
, height fill , height fill
, F.color colourTheme.nonHighlightedText , F.color colourTheme.textLightGrey
] ]
[ column [ column
[ centerX [ centerX
@ -138,7 +138,7 @@ view { toContentMsg, model, content } =
, left = 0 , left = 0
, right = 0 , right = 0
} }
, D.color colourTheme.nonHighlightedDarkText , D.color colourTheme.textDarkGrey
] ]
none none
] ]
@ -146,7 +146,7 @@ view { toContentMsg, model, content } =
[ padding 20, alignTop, alignLeft ] [ padding 20, alignTop, alignLeft ]
[ column [ column
[ F.bold [ F.bold
, F.color colourTheme.nonHighlightedText , F.color colourTheme.textLightGrey
, F.size 17 , F.size 17
, spacing 8 , spacing 8
] ]
@ -249,7 +249,7 @@ buttonMaker name =
{ url = localhostUrl ++ String.toLower name { url = localhostUrl ++ String.toLower name
, label = , label =
el el
[ mouseOver [ F.color colourTheme.highlightText ] [ mouseOver [ F.color colourTheme.textLightOrange ]
, htmlAttribute <| style "transition" "all 0.1s ease-in-out" , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
] ]
<| <|

View file

@ -76,7 +76,7 @@ rateMaker service =
, alignLeft , alignLeft
] ]
[ paragraph [ F.regular ] [ paragraph [ F.regular ]
[ el [ F.color colourTheme.highlightText ] <| [ el [ F.color colourTheme.textLightOrange ] <|
text service.serviceRate text service.serviceRate
] ]
] ]