From 92d988e438e86a8b5df68d71067438e18d040221 Mon Sep 17 00:00:00 2001 From: Joe Roe Date: Wed, 3 May 2023 16:57:55 +0200 Subject: [PATCH] Add palettes --- NEWS.md | 6 +++--- README.md | 11 ++++++++++- static/css/palettes/apprentice.css | 20 ++++++++++++++++++++ static/css/palettes/dracula.css | 20 ++++++++++++++++++++ static/css/palettes/material.css | 20 ++++++++++++++++++++ static/css/palettes/papercolor-dark.css | 20 ++++++++++++++++++++ static/css/palettes/papercolor-light.css | 20 ++++++++++++++++++++ static/css/palettes/solarized-dark.css | 20 ++++++++++++++++++++ static/css/palettes/solarized-light.css | 20 ++++++++++++++++++++ static/css/palettes/tender.css | 20 ++++++++++++++++++++ static/css/palettes/tokyo-night-dark.css | 20 ++++++++++++++++++++ static/css/palettes/tokyo-night-light.css | 20 ++++++++++++++++++++ static/css/palettes/windows-95-light.css | 20 ++++++++++++++++++++ static/css/palettes/windows-95.css | 20 ++++++++++++++++++++ 14 files changed, 253 insertions(+), 4 deletions(-) create mode 100644 static/css/palettes/apprentice.css create mode 100644 static/css/palettes/dracula.css create mode 100644 static/css/palettes/material.css create mode 100644 static/css/palettes/papercolor-dark.css create mode 100644 static/css/palettes/papercolor-light.css create mode 100644 static/css/palettes/solarized-dark.css create mode 100644 static/css/palettes/solarized-light.css create mode 100644 static/css/palettes/tender.css create mode 100644 static/css/palettes/tokyo-night-dark.css create mode 100644 static/css/palettes/tokyo-night-light.css create mode 100644 static/css/palettes/windows-95-light.css create mode 100644 static/css/palettes/windows-95.css diff --git a/NEWS.md b/NEWS.md index 8a021b0..a014f91 100644 --- a/NEWS.md +++ b/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 a custom palette, you will need to redefine it using the new framework + * 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. 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) diff --git a/README.md b/README.md index f0768d0..916601a 100644 --- a/README.md +++ b/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`. + + + +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. diff --git a/static/css/palettes/apprentice.css b/static/css/palettes/apprentice.css new file mode 100644 index 0000000..303d1c7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/dracula.css b/static/css/palettes/dracula.css new file mode 100644 index 0000000..66f1abc --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/material.css b/static/css/palettes/material.css new file mode 100644 index 0000000..60bfafb --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/papercolor-dark.css b/static/css/palettes/papercolor-dark.css new file mode 100644 index 0000000..d289932 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/papercolor-light.css b/static/css/palettes/papercolor-light.css new file mode 100644 index 0000000..7eeb7f5 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/solarized-dark.css b/static/css/palettes/solarized-dark.css new file mode 100644 index 0000000..a646595 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/solarized-light.css b/static/css/palettes/solarized-light.css new file mode 100644 index 0000000..dfb92c1 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/tender.css b/static/css/palettes/tender.css new file mode 100644 index 0000000..77fbe87 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/tokyo-night-dark.css b/static/css/palettes/tokyo-night-dark.css new file mode 100644 index 0000000..760d2fe --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/tokyo-night-light.css b/static/css/palettes/tokyo-night-light.css new file mode 100644 index 0000000..66e73c8 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/windows-95-light.css b/static/css/palettes/windows-95-light.css new file mode 100644 index 0000000..70cfeeb --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/css/palettes/windows-95.css b/static/css/palettes/windows-95.css new file mode 100644 index 0000000..5b44cf8 --- /dev/null +++ b/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; +} \ No newline at end of file