From fe07c053d2ab36ec6cb9bf797dcc520dd74ae55d Mon Sep 17 00:00:00 2001 From: Jan Mas Rovira Date: Thu, 1 Aug 2024 18:32:03 +0200 Subject: [PATCH] Improve css themes (#2921) This pr: - Removes the light `ayu` theme. - Adds the light `latte` theme (this now becomes the default theme). - Adds the dark `frappe` theme. - Adds the dark `moccha` theme. - Refactor all source themes to use css variables instead of inlined color definitions. This makes it much easier to maintain. --- app/Commands/Html/Options.hs | 2 +- assets/css/source-ayu-light.css | 76 ------------- assets/css/source-frappe.css | 106 ++++++++++++++++++ assets/css/source-latte.css | 106 ++++++++++++++++++ assets/css/source-macchiato.css | 62 +++++++--- assets/css/source-mocha.css | 106 ++++++++++++++++++ assets/css/source-nord.css | 54 ++++++--- .../Compiler/Backend/Html/Data/Options.hs | 23 +++- src/Juvix/Compiler/Backend/Html/Extra.hs | 16 ++- .../Backend/Html/Translation/FromTyped.hs | 4 +- .../Html/Translation/FromTyped/Source.hs | 6 - 11 files changed, 437 insertions(+), 124 deletions(-) delete mode 100644 assets/css/source-ayu-light.css create mode 100644 assets/css/source-frappe.css create mode 100644 assets/css/source-latte.css create mode 100644 assets/css/source-mocha.css diff --git a/app/Commands/Html/Options.hs b/app/Commands/Html/Options.hs index 18d126bc59..409fa270c4 100644 --- a/app/Commands/Html/Options.hs +++ b/app/Commands/Html/Options.hs @@ -47,7 +47,7 @@ parseHtml = do (eitherReader parseTheme) ( long "theme" <> metavar "THEME" - <> value Ayu + <> value Latte <> showDefault <> help ("Theme for syntax highlighting. " <> availableStr) <> completeWith (map show allThemes) diff --git a/assets/css/source-ayu-light.css b/assets/css/source-ayu-light.css deleted file mode 100644 index 4dcc7aacb2..0000000000 --- a/assets/css/source-ayu-light.css +++ /dev/null @@ -1,76 +0,0 @@ -/* Color palette based on https://github.com/ayu-theme/ayu-colors */ -body { - background-color: #f8f9fa; -} - -.ju-inductive { - color: #86b300; -} - -.ju-constructor { - color: #a37acc; -} - -.ju-function { - color: #f2ae49; -} - -.ju-axiom { - color: #f07171; -} - -.ju-string { - color: #f07171; -} - -.ju-keyword { - color: #399ee6; -} - -.ju-delimiter { - color: #787b80; -} - -.ju-comment { - color: #ba919966; -} - -.ju-judoc { - color: #8b2252; -} - -.ju-var { - color: #5c6166; -} - -.ju-fixity { - color: #ed9366; -} - -.ju-number { - color: #000000; -} - -.ju-define { - font-weight: bold; -} - -a:hover, -a.hover-highlight { - background-color: #dadbdc; -} - -a:link, -a:visited { - text-decoration: none; -} - -footer { - color: gray -} - -footer a { - color: gray; - font-size: small; - font-weight: bold; -} diff --git a/assets/css/source-frappe.css b/assets/css/source-frappe.css new file mode 100644 index 0000000000..f00de235ac --- /dev/null +++ b/assets/css/source-frappe.css @@ -0,0 +1,106 @@ +/* Color palette based on https://github.com/catppuccin/catppuccin#-palette */ + +:root { + --ctp-frappe-rosewater: #f2d5cf; + --ctp-frappe-flamingo: #eebebe; + --ctp-frappe-pink: #f4b8e4; + --ctp-frappe-mauve: #ca9ee6; + --ctp-frappe-red: #e78284; + --ctp-frappe-maroon: #ea999c; + --ctp-frappe-peach: #ef9f76; + --ctp-frappe-yellow: #e5c890; + --ctp-frappe-green: #a6d189; + --ctp-frappe-teal: #81c8be; + --ctp-frappe-sky: #99d1db; + --ctp-frappe-sapphire: #85c1dc; + --ctp-frappe-blue: #8caaee; + --ctp-frappe-lavender: #babbf1; + --ctp-frappe-text: #c6d0f5; + --ctp-frappe-subtext1: #b5bfe2; + --ctp-frappe-subtext0: #a5adce; + --ctp-frappe-overlay2: #949cbb; + --ctp-frappe-overlay1: #838ba7; + --ctp-frappe-overlay0: #737994; + --ctp-frappe-surface2: #626880; + --ctp-frappe-surface1: #51576d; + --ctp-frappe-surface0: #414559; + --ctp-frappe-base: #303446; + --ctp-frappe-mantle: #292c3c; + --ctp-frappe-crust: #232634; +} + +body { + background-color: var(--ctp-frappe-base); +} + +.ju-inductive { + color: var(--ctp-frappe-green); +} + +.ju-constructor { + color: var(--ctp-frappe-mauve); +} + +.ju-function { + color: var(--ctp-frappe-yellow); +} + +.ju-axiom { + color: var(--ctp-frappe-red); +} + +.ju-string { + color: var(--ctp-frappe-flamingo); +} + +.ju-keyword { + color: var(--ctp-frappe-sky); +} + +.ju-delimiter { + color: var(--ctp-frappe-overlay2); +} + +.ju-var { + color: var(--ctp-frappe-text); +} + +.ju-fixity { + color: var(--ctp-frappe-sapphire); +} + +.ju-comment { + color: var(--ctp-frappe-rosewater); +} + +.ju-judoc { + color: var(--ctp-frappe-teal); +} + +.ju-number { + color: var(--ctp-frappe-subtext1); +} + +.ju-define { + font-weight: bold; +} + +a:link, +a:visited { + text-decoration: none; +} + +a:hover, +a.hover-highlight { + background-color: var(--ctp-frappe-mantle); +} + +footer { + color: var(--ctp-frappe-subtext1); +} + +footer a { + color: var(--ctp-frappe-subtext1); + font-size: small; + font-weight: bold; +} diff --git a/assets/css/source-latte.css b/assets/css/source-latte.css new file mode 100644 index 0000000000..8b341dec1f --- /dev/null +++ b/assets/css/source-latte.css @@ -0,0 +1,106 @@ +/* Color palette based on https://github.com/catppuccin/catppuccin#-palette */ + +:root { + --ctp-latte-rosewater: #dc8a78; + --ctp-latte-flamingo: #dd7878; + --ctp-latte-pink: #ea76cb; + --ctp-latte-mauve: #8839ef; + --ctp-latte-red: #d20f39; + --ctp-latte-maroon: #e64553; + --ctp-latte-peach: #fe640b; + --ctp-latte-yellow: #df8e1d; + --ctp-latte-green: #40a02b; + --ctp-latte-teal: #179299; + --ctp-latte-sky: #04a5e5; + --ctp-latte-sapphire: #209fb5; + --ctp-latte-blue: #1e66f5; + --ctp-latte-lavender: #7287fd; + --ctp-latte-text: #4c4f69; + --ctp-latte-subtext1: #5c5f77; + --ctp-latte-subtext0: #6c6f85; + --ctp-latte-overlay2: #7c7f93; + --ctp-latte-overlay1: #8c8fa1; + --ctp-latte-overlay0: #9ca0b0; + --ctp-latte-surface2: #acb0be; + --ctp-latte-surface1: #bcc0cc; + --ctp-latte-surface0: #ccd0da; + --ctp-latte-base: #eff1f5; + --ctp-latte-mantle: #e6e9ef; + --ctp-latte-crust: #dce0e8; +} + +body { + background-color: var(--ctp-latte-base); +} + +.ju-inductive { + color: var(--ctp-latte-green); +} + +.ju-constructor { + color: var(--ctp-latte-mauve); +} + +.ju-function { + color: var(--ctp-latte-yellow); +} + +.ju-axiom { + color: var(--ctp-latte-red); +} + +.ju-string { + color: var(--ctp-latte-flamingo); +} + +.ju-keyword { + color: var(--ctp-latte-sky); +} + +.ju-delimiter { + color: var(--ctp-latte-overlay2); +} + +.ju-var { + color: var(--ctp-latte-text); +} + +.ju-fixity { + color: var(--ctp-latte-sapphire); +} + +.ju-comment { + color: var(--ctp-latte-rosewater); +} + +.ju-judoc { + color: var(--ctp-latte-teal); +} + +.ju-number { + color: var(--ctp-latte-subtext1); +} + +.ju-define { + font-weight: bold; +} + +a:link, +a:visited { + text-decoration: none; +} + +a:hover, +a.hover-highlight { + background-color: var(--ctp-latte-mantle); +} + +footer { + color: var(--ctp-latte-subtext1); +} + +footer a { + color: var(--ctp-latte-subtext1); + font-size: small; + font-weight: bold; +} diff --git a/assets/css/source-macchiato.css b/assets/css/source-macchiato.css index 0c7880c1d1..841190c7d7 100644 --- a/assets/css/source-macchiato.css +++ b/assets/css/source-macchiato.css @@ -1,54 +1,84 @@ /* Color palette based on https://github.com/catppuccin/catppuccin#-palette */ + +:root { + --ctp-macchiato-rosewater: #f4dbd6; + --ctp-macchiato-flamingo: #f0c6c6; + --ctp-macchiato-pink: #f5bde6; + --ctp-macchiato-mauve: #c6a0f6; + --ctp-macchiato-red: #ed8796; + --ctp-macchiato-maroon: #ee99a0; + --ctp-macchiato-peach: #f5a97f; + --ctp-macchiato-yellow: #eed49f; + --ctp-macchiato-green: #a6da95; + --ctp-macchiato-teal: #8bd5ca; + --ctp-macchiato-sky: #91d7e3; + --ctp-macchiato-sapphire: #7dc4e4; + --ctp-macchiato-blue: #8aadf4; + --ctp-macchiato-lavender: #b7bdf8; + --ctp-macchiato-text: #cad3f5; + --ctp-macchiato-subtext1: #b8c0e0; + --ctp-macchiato-subtext0: #a5adcb; + --ctp-macchiato-overlay2: #939ab7; + --ctp-macchiato-overlay1: #8087a2; + --ctp-macchiato-overlay0: #6e738d; + --ctp-macchiato-surface2: #5b6078; + --ctp-macchiato-surface1: #494d64; + --ctp-macchiato-surface0: #363a4f; + --ctp-macchiato-base: #24273a; + --ctp-macchiato-mantle: #1e2030; + --ctp-macchiato-crust: #181926; +} + body { - background-color: #24273a; + background-color: var(--ctp-macchiato-base); } .ju-inductive { - color: #a6da95; + color: var(--ctp-macchiato-green); } .ju-constructor { - color: #c6a0f6; + color: var(--ctp-macchiato-mauve); } .ju-function { - color: #eed49f; + color: var(--ctp-macchiato-yellow); } .ju-axiom { - color: #ed8796; + color: var(--ctp-macchiato-red); } .ju-string { - color: #ee99a0; + color: var(--ctp-macchiato-flamingo); } .ju-keyword { - color: #7dc4e4; + color: var(--ctp-macchiato-sky); } .ju-delimiter { - color: #939ab7 ; + color: var(--ctp-macchiato-overlay2); } .ju-var { - color: #cad3f5; + color: var(--ctp-macchiato-text); } .ju-fixity { - color: #f5a97f; + color: var(--ctp-macchiato-sapphire); } .ju-comment { - color: #a5adcb; + color: var(--ctp-macchiato-rosewater); } .ju-judoc { - color: #8bd5ca; + color: var(--ctp-macchiato-teal); } .ju-number { - color: #b8c0e0; + color: var(--ctp-macchiato-subtext1); } .ju-define { @@ -62,15 +92,15 @@ a:visited { a:hover, a.hover-highlight { - background-color: #4c566a; + background-color: var(--ctp-macchiato-mantle); } footer { - color: gray + color: var(--ctp-macchiato-subtext1); } footer a { - color: gray; + color: var(--ctp-macchiato-subtext1); font-size: small; font-weight: bold; } diff --git a/assets/css/source-mocha.css b/assets/css/source-mocha.css new file mode 100644 index 0000000000..22bd595dca --- /dev/null +++ b/assets/css/source-mocha.css @@ -0,0 +1,106 @@ +/* Color palette based on https://github.com/catppuccin/catppuccin#-palette */ + +:root { + --ctp-mocha-rosewater: #f5e0dc; + --ctp-mocha-flamingo: #f2cdcd; + --ctp-mocha-pink: #f5c2e7; + --ctp-mocha-mauve: #cba6f7; + --ctp-mocha-red: #f38ba8; + --ctp-mocha-maroon: #eba0ac; + --ctp-mocha-peach: #fab387; + --ctp-mocha-yellow: #f9e2af; + --ctp-mocha-green: #a6e3a1; + --ctp-mocha-teal: #94e2d5; + --ctp-mocha-sky: #89dceb; + --ctp-mocha-sapphire: #74c7ec; + --ctp-mocha-blue: #89b4fa; + --ctp-mocha-lavender: #b4befe; + --ctp-mocha-text: #cdd6f4; + --ctp-mocha-subtext1: #bac2de; + --ctp-mocha-subtext0: #a6adc8; + --ctp-mocha-overlay2: #9399b2; + --ctp-mocha-overlay1: #7f849c; + --ctp-mocha-overlay0: #6c7086; + --ctp-mocha-surface2: #585b70; + --ctp-mocha-surface1: #45475a; + --ctp-mocha-surface0: #313244; + --ctp-mocha-base: #1e1e2e; + --ctp-mocha-mantle: #181825; + --ctp-mocha-crust: #11111b; +} + +body { + background-color: var(--ctp-mocha-base); +} + +.ju-inductive { + color: var(--ctp-mocha-green); +} + +.ju-constructor { + color: var(--ctp-mocha-mauve); +} + +.ju-function { + color: var(--ctp-mocha-yellow); +} + +.ju-axiom { + color: var(--ctp-mocha-red); +} + +.ju-string { + color: var(--ctp-mocha-flamingo); +} + +.ju-keyword { + color: var(--ctp-mocha-sky); +} + +.ju-delimiter { + color: var(--ctp-mocha-overlay2); +} + +.ju-var { + color: var(--ctp-mocha-text); +} + +.ju-fixity { + color: var(--ctp-mocha-sapphire); +} + +.ju-comment { + color: var(--ctp-mocha-rosewater); +} + +.ju-judoc { + color: var(--ctp-mocha-teal); +} + +.ju-number { + color: var(--ctp-mocha-subtext1); +} + +.ju-define { + font-weight: bold; +} + +a:link, +a:visited { + text-decoration: none; +} + +a:hover, +a.hover-highlight { + background-color: var(--ctp-mocha-mantle); +} + +footer { + color: var(--ctp-mocha-subtext1); +} + +footer a { + color: var(--ctp-mocha-subtext1); + font-size: small; + font-weight: bold; +} diff --git a/assets/css/source-nord.css b/assets/css/source-nord.css index d220855120..0dab106780 100644 --- a/assets/css/source-nord.css +++ b/assets/css/source-nord.css @@ -1,42 +1,62 @@ /* Color palette based on https://www.nordtheme.com/ */ + +:root { + --nord0: #2e3440; + --nord1: #3b4252; + --nord2: #434c5e; + --nord3: #4c566a; + --nord4: #d8dee9; + --nord5: #e5e9f0; + --nord6: #eceff4; + --nord7: #8fbcbb; + --nord8: #88c0d0; + --nord9: #81a1c1; + --nord10: #5e81ac; + --nord11: #bf616a; + --nord12: #d08770; + --nord13: #ebcb8b; + --nord14: #a3be8c; + --nord15: #b48ead; +} + body { - background-color: #2e3440; + background-color: var(--nord0); } .ju-inductive { - color: #a3be8c; + color: var(--nord14); } .ju-constructor { - color: #b48ead; + color: var(--nord15); } .ju-function { - color: #ebcb8b; + color: var(--nord13); } .ju-axiom { - color: #bf616a; + color: var(--nord11); } .ju-string { - color: #bf616a; + color: var(--nord11); } .ju-keyword { - color: #81a1c1; + color: var(--nord9); } .ju-delimiter { - color: #5e81ac; + color: var(--nord10); } .ju-var { - color: #d8dee9; + color: var(--nord4); } .ju-fixity { - color: #d08770; + color: var(--nord12); } .ju-comment { @@ -44,11 +64,15 @@ body { } .ju-judoc { - color: #8fbcbb; + color: var(--nord7); } .ju-number { - color: #d8dee9; + color: var(--nord4); +} + +.ju-meta { + color: var(--nord6); } .ju-define { @@ -62,15 +86,15 @@ a:visited { a:hover, a.hover-highlight { - background-color: #4c566a; + background-color: var(--nord3); } footer { - color: gray + color: var(--nord4) } footer a { - color: gray; + color: var(--nord4); font-size: small; font-weight: bold; } diff --git a/src/Juvix/Compiler/Backend/Html/Data/Options.hs b/src/Juvix/Compiler/Backend/Html/Data/Options.hs index 0755e9122e..fa921a9b94 100644 --- a/src/Juvix/Compiler/Backend/Html/Data/Options.hs +++ b/src/Juvix/Compiler/Backend/Html/Data/Options.hs @@ -39,15 +39,19 @@ defaultHtmlOptions = data Theme = Nord - | Ayu | Macchiato + | Latte + | Frappe + | Mocha deriving stock (Enum, Eq, Ord, Bounded, Data) instance Show Theme where show = \case Nord -> "nord" - Ayu -> "ayu" Macchiato -> "macchiato" + Latte -> "latte" + Frappe -> "frappe" + Mocha -> "mocha" data ThemeLight = Dark @@ -58,12 +62,23 @@ themeLight :: Theme -> ThemeLight themeLight = \case Nord -> Dark Macchiato -> Dark - Ayu -> Light + Latte -> Light + Frappe -> Dark + Mocha -> Dark data HtmlKind = HtmlDoc | HtmlSrc - | HtmlOnly + | -- | Only source is generated but without the -src suffix. TODO I think this + -- option is only useful for mkDocs. This constructor should be removed and + -- the logic should be handled from the VSCode plugin. + HtmlOnly deriving stock (Data) +kindSuffix :: HtmlKind -> String +kindSuffix = \case + HtmlDoc -> "" + HtmlSrc -> "-src" + HtmlOnly -> "" + makeLenses ''HtmlOptions diff --git a/src/Juvix/Compiler/Backend/Html/Extra.hs b/src/Juvix/Compiler/Backend/Html/Extra.hs index 6ff6bc38f2..3b802f8176 100644 --- a/src/Juvix/Compiler/Backend/Html/Extra.hs +++ b/src/Juvix/Compiler/Backend/Html/Extra.hs @@ -57,22 +57,30 @@ toggleJs = jsLink "toggle.js" linuwialCss :: (Members '[Reader HtmlOptions] r) => Sem r Html linuwialCss = cssLink "linuwial.css" -ayuCss :: (Members '[Reader HtmlOptions] r) => Sem r Html -ayuCss = cssLink "source-ayu-light.css" - nordCss :: (Members '[Reader HtmlOptions] r) => Sem r Html nordCss = cssLink "source-nord.css" +latteCss :: (Members '[Reader HtmlOptions] r) => Sem r Html +latteCss = cssLink "source-latte.css" + macchiatoCss :: (Members '[Reader HtmlOptions] r) => Sem r Html macchiatoCss = cssLink "source-macchiato.css" +frappeCss :: (Members '[Reader HtmlOptions] r) => Sem r Html +frappeCss = cssLink "source-frappe.css" + +mochaCss :: (Members '[Reader HtmlOptions] r) => Sem r Html +mochaCss = cssLink "source-mocha.css" + themeCss :: (Members '[Reader HtmlOptions] r) => Sem r Html themeCss = do theme <- asks (^. htmlOptionsTheme) case theme of - Ayu -> ayuCss Nord -> nordCss Macchiato -> macchiatoCss + Latte -> latteCss + Frappe -> frappeCss + Mocha -> mochaCss highlightJs :: (Members '[Reader HtmlOptions] r) => Sem r Html highlightJs = jsLink "highlight.js" diff --git a/src/Juvix/Compiler/Backend/Html/Translation/FromTyped.hs b/src/Juvix/Compiler/Backend/Html/Translation/FromTyped.hs index e68db98509..da4ab02992 100644 --- a/src/Juvix/Compiler/Backend/Html/Translation/FromTyped.hs +++ b/src/Juvix/Compiler/Backend/Html/Translation/FromTyped.hs @@ -223,7 +223,7 @@ topModulePath = (^. modulePath . S.nameConcrete) topTemplate :: forall r. (Members '[Reader EntryPoint, Reader HtmlOptions] r) => Html -> Html -> Sem r Html topTemplate rightMenu' content' = do mathJax <- mathJaxCdn - ayuTheme <- ayuCss + latteTheme <- latteCss judocTheme <- linuwialCss toggle <- toggleJs let mhead :: Html @@ -238,7 +238,7 @@ topTemplate rightMenu' content' = do ! Attr.content "width=device-width, initial-scale=1" <> mathJax <> livejs - <> ayuTheme + <> latteTheme <> judocTheme <> toggle diff --git a/src/Juvix/Compiler/Backend/Html/Translation/FromTyped/Source.hs b/src/Juvix/Compiler/Backend/Html/Translation/FromTyped/Source.hs index 7264efe068..223cfc63b8 100644 --- a/src/Juvix/Compiler/Backend/Html/Translation/FromTyped/Source.hs +++ b/src/Juvix/Compiler/Backend/Html/Translation/FromTyped/Source.hs @@ -36,12 +36,6 @@ data CssColor | JuComment | JuJudoc -kindSuffix :: HtmlKind -> String -kindSuffix = \case - HtmlDoc -> "" - HtmlSrc -> "-src" - HtmlOnly -> "" - data GenSourceHtmlArgs = GenSourceHtmlArgs { _genSourceHtmlArgsConcreteOpts :: Options, _genSourceHtmlArgsAssetsDir :: Text,