1
1
mirror of https://github.com/anoma/juvix.git synced 2024-12-13 11:16:48 +03:00
juvix/assets/css/mocha.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

31 lines
745 B
CSS

/* Color palette based on https://github.com/catppuccin/catppuccin#-palette */
:root {
--ctp-rosewater: #f5e0dc;
--ctp-flamingo: #f2cdcd;
--ctp-pink: #f5c2e7;
--ctp-mauve: #cba6f7;
--ctp-red: #f38ba8;
--ctp-maroon: #eba0ac;
--ctp-peach: #fab387;
--ctp-yellow: #f9e2af;
--ctp-green: #a6e3a1;
--ctp-teal: #94e2d5;
--ctp-sky: #89dceb;
--ctp-sapphire: #74c7ec;
--ctp-blue: #89b4fa;
--ctp-lavender: #b4befe;
--ctp-text: #cdd6f4;
--ctp-subtext1: #bac2de;
--ctp-subtext0: #a6adc8;
--ctp-overlay2: #9399b2;
--ctp-overlay1: #7f849c;
--ctp-overlay0: #6c7086;
--ctp-surface2: #585b70;
--ctp-surface1: #45475a;
--ctp-surface0: #313244;
--ctp-base: #1e1e2e;
--ctp-mantle: #181825;
--ctp-crust: #11111b;
}