Add palettes

NEWS.md

@@ -2,11 +2,11 @@
 
 * **Breaking change** – new framework for colour palettes:
   * Palettes are defined using CSS variables following the [base16](https://github.com/chriskempson/base16) system
-  * Added 2 new palettes: `base16-dark` and `base16-light`
+  * Added 14 new palettes: `apprentice`, `base16-dark`, `base16-light`, `dracula`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`.
   * The default palette is `base16-dark`
   * The `mode` parameter is no longer needed
-  * If you were using one of the old named palettes (`gruvbox-dark` or `gruvbox-light`), the change will be seamless
+  * If you were using one of the old named palettes (`gruvbox-dark` or `gruvbox-light`), the change will be seamless.
-  * If you were using a custom palette, you will need to redefine it using the new framework
+  * If you were using a custom palette, you will need to redefine it using the new framework. See README for further details.
 * Added a table of contents (thanks @dashv, #47)
 * Added multilanguage support with a language switcher (thanks @bedefaced)
 * Made the site header and nav wrap more efficiently on narrow screens (thanks @m-dev672, #32)

README.md

@@ -41,7 +41,15 @@ See `exampleSite/config.toml` for the theme-specific parameters you need to add
 
 ### Colour palettes
 
-Colour palettes for the theme are defined using the [base16 system](https://github.com/chriskempson/base16):
+risotto uses the [base16 framework](https://github.com/chriskempson/base16) to define colour schemes that can be used with the `theme.palette` parameter.
+A selection of 16 palettes (10 dark, 6 light) are bundled with the theme: `apprentice`, `base16-dark`, `base16-light`, `dracula`, `gruvbox-dark`, `gruvbox-light`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`.
+The default is `base16-dark`.
+
+<!-- TODO: add screenshots of default themes -->
+
+The easiest way to use other base16 styles is to place .css file from https://github.com/monicfenga/base16-styles/tree/master/css-variables and place it in your `static/css/palettes` directory.
+
+Or to define a wholly custom theme, you will need to define the following CSS variables for the following base16 colours (see [base16-dark.css](blob/main/static/css/palettes/base16-dark.css) for an example):
 
 | Base | Default colour | Used for | Examples |
 | ---- | -------------- | -------- | -------- |
@@ -63,3 +71,4 @@ Colour palettes for the theme are defined using the [base16 system](https://gith
 | 0F   | Brown          |          |          |
 
 For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light).
+Note that not all colours are currently used in the theme.

static/css/palettes/apprentice.css

@@ -0,0 +1,20 @@
+/* Apprentice by romainl */
+
+:root {
+  --base00: #262626;
+  --base01: #AF5F5F;
+  --base02: #5F875F;
+  --base03: #87875F;
+  --base04: #5F87AF;
+  --base05: #5F5F87;
+  --base06: #5F8787;
+  --base07: #6C6C6C;
+  --base08: #444444;
+  --base09: #FF8700;
+  --base0A: #87AF87;
+  --base0B: #FFFFAF;
+  --base0C: #87AFD7;
+  --base0D: #8787AF;
+  --base0E: #5FAFAF;
+  --base0F: #BCBCBC;
+}

static/css/palettes/dracula.css

@@ -0,0 +1,20 @@
+/* Dracula by Mike Barkmin (http://github.com/mikebarkmin) based on Dracula Theme (http://github.com/dracula) */
+
+:root {
+  --base00: #282936;
+  --base01: #3a3c4e;
+  --base02: #4d4f68;
+  --base03: #626483;
+  --base04: #62d6e8;
+  --base05: #e9e9f4;
+  --base06: #f1f2f8;
+  --base07: #f7f7fb;
+  --base08: #ea51b2;
+  --base09: #b45bcf;
+  --base0A: #00f769;
+  --base0B: #ebff87;
+  --base0C: #a1efe4;
+  --base0D: #62d6e8;
+  --base0E: #b45bcf;
+  --base0F: #00f769;
+}

static/css/palettes/material.css

@@ -0,0 +1,20 @@
+/* Material by Nate Peterson */
+
+:root {
+  --base00: #263238;
+  --base01: #2E3C43;
+  --base02: #314549;
+  --base03: #546E7A;
+  --base04: #B2CCD6;
+  --base05: #EEFFFF;
+  --base06: #EEFFFF;
+  --base07: #FFFFFF;
+  --base08: #F07178;
+  --base09: #F78C6C;
+  --base0A: #FFCB6B;
+  --base0B: #C3E88D;
+  --base0C: #89DDFF;
+  --base0D: #82AAFF;
+  --base0E: #C792EA;
+  --base0F: #FF5370;
+}

static/css/palettes/papercolor-dark.css

@@ -0,0 +1,20 @@
+/* PaperColor Dark by Jon Leopard (http://github.com/jonleopard) based on PaperColor Theme (https://github.com/NLKNguyen/papercolor-theme) */
+
+:root {
+  --base00: #1c1c1c;
+  --base01: #af005f;
+  --base02: #5faf00;
+  --base03: #d7af5f;
+  --base04: #5fafd7;
+  --base05: #808080;
+  --base06: #d7875f;
+  --base07: #d0d0d0;
+  --base08: #585858;
+  --base09: #5faf5f;
+  --base0A: #afd700;
+  --base0B: #af87d7;
+  --base0C: #ffaf00;
+  --base0D: #ff5faf;
+  --base0E: #00afaf;
+  --base0F: #5f8787;
+}

static/css/palettes/papercolor-light.css

@@ -0,0 +1,20 @@
+/* PaperColor Light by Jon Leopard (http://github.com/jonleopard) based on PaperColor Theme (https://github.com/NLKNguyen/papercolor-theme) */
+
+:root {
+  --base00: #eeeeee;
+  --base01: #af0000;
+  --base02: #008700;
+  --base03: #5f8700;
+  --base04: #0087af;
+  --base05: #444444;
+  --base06: #005f87;
+  --base07: #878787;
+  --base08: #bcbcbc;
+  --base09: #d70000;
+  --base0A: #d70087;
+  --base0B: #8700af;
+  --base0C: #d75f00;
+  --base0D: #d75f00;
+  --base0E: #005faf;
+  --base0F: #005f87;
+}

static/css/palettes/solarized-dark.css

@@ -0,0 +1,20 @@
+/* Solarized Dark by Ethan Schoonover (modified by aramisgithub) */
+
+:root {
+  --base00: #002b36;
+  --base01: #073642;
+  --base02: #586e75;
+  --base03: #657b83;
+  --base04: #839496;
+  --base05: #93a1a1;
+  --base06: #eee8d5;
+  --base07: #fdf6e3;
+  --base08: #dc322f;
+  --base09: #cb4b16;
+  --base0A: #b58900;
+  --base0B: #859900;
+  --base0C: #2aa198;
+  --base0D: #268bd2;
+  --base0E: #6c71c4;
+  --base0F: #d33682;
+}

static/css/palettes/solarized-light.css

@@ -0,0 +1,20 @@
+/* Solarized Light by Ethan Schoonover (modified by aramisgithub) */
+
+:root {
+  --base00: #fdf6e3;
+  --base01: #eee8d5;
+  --base02: #93a1a1;
+  --base03: #839496;
+  --base04: #657b83;
+  --base05: #586e75;
+  --base06: #073642;
+  --base07: #002b36;
+  --base08: #dc322f;
+  --base09: #cb4b16;
+  --base0A: #b58900;
+  --base0B: #859900;
+  --base0C: #2aa198;
+  --base0D: #268bd2;
+  --base0E: #6c71c4;
+  --base0F: #d33682;
+}

static/css/palettes/tender.css

@@ -0,0 +1,20 @@
+/* tender by Jacobo Tabernero (https://github/com/jacoborus/tender.vim) */
+
+:root {
+  --base00: #282828;
+  --base01: #383838;
+  --base02: #484848;
+  --base03: #4c4c4c;
+  --base04: #b8b8b8;
+  --base05: #eeeeee;
+  --base06: #e8e8e8;
+  --base07: #feffff;
+  --base08: #f43753;
+  --base09: #dc9656;
+  --base0A: #ffc24b;
+  --base0B: #c9d05c;
+  --base0C: #73cef4;
+  --base0D: #b3deef;
+  --base0E: #d3b987;
+  --base0F: #a16946;
+}

static/css/palettes/tokyo-night-dark.css

@@ -0,0 +1,20 @@
+/* Tokyo Night Dark by Michaël Ball */
+
+:root {
+  --base00: #1A1B26;
+  --base01: #16161E;
+  --base02: #2F3549;
+  --base03: #444B6A;
+  --base04: #787C99;
+  --base05: #A9B1D6;
+  --base06: #CBCCD1;
+  --base07: #D5D6DB;
+  --base08: #C0CAF5;
+  --base09: #A9B1D6;
+  --base0A: #0DB9D7;
+  --base0B: #9ECE6A;
+  --base0C: #B4F9F8;
+  --base0D: #2AC3DE;
+  --base0E: #BB9AF7;
+  --base0F: #F7768E;
+}

static/css/palettes/tokyo-night-light.css

@@ -0,0 +1,20 @@
+/* Tokyo Night Light by Michaël Ball */
+
+:root {
+  --base00: #D5D6DB;
+  --base01: #CBCCD1;
+  --base02: #DFE0E5;
+  --base03: #9699A3;
+  --base04: #4C505E;
+  --base05: #343B59;
+  --base06: #1A1B26;
+  --base07: #1A1B26;
+  --base08: #343B58;
+  --base09: #965027;
+  --base0A: #166775;
+  --base0B: #485E30;
+  --base0C: #3E6968;
+  --base0D: #34548A;
+  --base0E: #5A4A78;
+  --base0F: #8C4351;
+}

static/css/palettes/windows-95-light.css

@@ -0,0 +1,20 @@
+/* Windows 95 Light by Fergus Collins (https://github.com/C-Fergus) */
+
+:root {
+  --base00: #fcfcfc;
+  --base01: #e0e0e0;
+  --base02: #c4c4c4;
+  --base03: #a8a8a8;
+  --base04: #7e7e7e;
+  --base05: #545454;
+  --base06: #2a2a2a;
+  --base07: #000000;
+  --base08: #a80000;
+  --base09: #fcfc54;
+  --base0A: #a85400;
+  --base0B: #00a800;
+  --base0C: #00a8a8;
+  --base0D: #0000a8;
+  --base0E: #a800a8;
+  --base0F: #54fc54;
+}

static/css/palettes/windows-95.css

@@ -0,0 +1,20 @@
+/* Windows 95 by Fergus Collins (https://github.com/C-Fergus) */
+
+:root {
+  --base00: #000000;
+  --base01: #1C1C1C;
+  --base02: #383838;
+  --base03: #545454;
+  --base04: #7e7e7e;
+  --base05: #a8a8a8;
+  --base06: #d2d2d2;
+  --base07: #fcfcfc;
+  --base08: #fc5454;
+  --base09: #a85400;
+  --base0A: #fcfc54;
+  --base0B: #54fc54;
+  --base0C: #54fcfc;
+  --base0D: #5454fc;
+  --base0E: #fc54fc;
+  --base0F: #00a800;
+}