1
1
mirror of https://github.com/anoma/juvix.git synced 2024-12-12 14:28:08 +03:00
juvix/assets/css/juvix-catppuchin.css
Jan Mas Rovira bd3b7f1401
Improve css of html documentation and allow different themes (#2931)
1. Refactors css theme to only use variables as source for colors to
make it easier to define themes. In order to define a theme, the
following variables need to be defined (these variables have been taken
mostly from the catppuchin theme):
```
  /* Code */
  --ju-inductive: var(--ctp-green);
  --ju-constructor: var(--ctp-mauve);
  --ju-function: var(--ctp-yellow);
  --ju-module: var(--ctp-lavender);
  --ju-axiom: var(--ctp-red);
  --ju-string: var(--ctp-flamingo);
  --ju-keyword: var(--ctp-sky);
  --ju-delimiter: var(--ctp-overlay2);
  --ju-var: var(--ctp-text);
  --ju-fixity: var(--ctp-sapphire);
  --ju-comment: var(--ctp-rosewater);
  --ju-judoc: var(--ctp-teal);
  --ju-number: var(--ctp-peach);

  /* Text */
  --ju-text: var(--ctp-text);
  --ju-subtext1: var(--ctp-subtext1);
  --ju-subtext0: var(--ctp-subtext0);

  /* Overlay */
  --ju-overlay0: var(--ctp-overlay0);
  --ju-overlay1: var(--ctp-overlay1);
  --ju-overlay2: var(--ctp-overlay2);

  /* Surface */
  --ju-surface0: var(--ctp-surface0);
  --ju-surface1: var(--ctp-surface1);
  --ju-surface2: var(--ctp-surface2);

  /* Panes */
  --ju-base: var(--ctp-base);
  --ju-mantle: var(--ctp-mantle);
  --ju-crust: var(--ctp-mantle);

  /* Theme */
  --ju-main: var(--ctp-maroon);
  --ju-main-link: var(--ctp-maroon);
  --ju-main-link-visited: var(--ctp-flamingo);
  --ju-warning: var(--ctp-red);
```
2. When changing theme, the judoc documentation will also use that
theme, as opposed to only the source code.
3. Added highlighting for module names.
4. When hovering a juvix code element (axiom, constructor, inductive,
etc.), the underline will be of the correct color for the kind. Before
it was always a fixed color.
2024-08-02 16:16:33 +02:00

43 lines
1.1 KiB
CSS

:root {
/* Code */
--ju-inductive: var(--ctp-green);
--ju-constructor: var(--ctp-mauve);
--ju-function: var(--ctp-yellow);
--ju-module: var(--ctp-lavender);
--ju-axiom: var(--ctp-red);
--ju-string: var(--ctp-flamingo);
--ju-keyword: var(--ctp-sky);
--ju-delimiter: var(--ctp-overlay2);
--ju-var: var(--ctp-text);
--ju-fixity: var(--ctp-sapphire);
--ju-comment: var(--ctp-rosewater);
--ju-judoc: var(--ctp-teal);
--ju-number: var(--ctp-peach);
/* Text */
--ju-text: var(--ctp-text);
--ju-subtext1: var(--ctp-subtext1);
--ju-subtext0: var(--ctp-subtext0);
/* Overlay */
--ju-overlay0: var(--ctp-overlay0);
--ju-overlay1: var(--ctp-overlay1);
--ju-overlay2: var(--ctp-overlay2);
/* Surface */
--ju-surface0: var(--ctp-surface0);
--ju-surface1: var(--ctp-surface1);
--ju-surface2: var(--ctp-surface2);
/* Panes */
--ju-base: var(--ctp-base);
--ju-mantle: var(--ctp-mantle);
--ju-crust: var(--ctp-mantle);
/* Theme */
--ju-main: var(--ctp-maroon);
--ju-main-link: var(--ctp-maroon);
--ju-main-link-visited: var(--ctp-flamingo);
--ju-warning: var(--ctp-red);
}