Use base16 framework for palettes

README.md

@@ -18,12 +18,6 @@ If your site is already a git repository, you can add the theme as a submodule i
 git submodule add https://github.com/joeroe/risotto.git themes/risotto
 ```
 
-## Configure
-
-To use the theme, add `theme = risotto` to your site's `config.toml` or `config.yaml`.
-
-See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `config.toml` or `config.yaml` to configure the theme.
-
 ## Update
 
 If you installed the theme using `git clone`, pull the repository to get the latest version:
@@ -39,3 +33,33 @@ Or, if you added it as a git submodule:
 git submodule update --remote
 ```
 
+## Configure
+
+To use the theme, add `theme = risotto` to your site's `config.toml` or `config.yaml`.
+
+See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `config.toml` or `config.yaml` to configure the theme.
+
+### Colour palettes
+
+Colour palettes for the theme are defined using the [base16 system](https://github.com/chriskempson/base16):
+
+| Base | Default colour | Used for | Examples |
+| ---- | -------------- | -------- | -------- |
+| 00   | Dark           | Background | Page background          |
+| 01   | │              | Alt. background | Content background          |
+| 02   | │              | In-text backgrounds | `<pre>`, `<code>`, `<kbd>`, `<samp>` |
+| 03   | │              | Muted text | `:before` & `:marker` symbols |
+| 04   | │              | Alt. foreground | Aside text          |
+| 05   | │              | Foreground         | Content text         |
+| 06   | │              |          |          |
+| 07   | Light          |          |          |
+| 08   | Red            |          |          |
+| 09   | Orange         |          |          |
+| 0A   | Yellow         | Highlights | Selected text, `<mark>` |
+| 0B   | Green          | Primary accent | Logo          |
+| 0C   | Cyan           | Active links | `a:active`, `a:hover`         |
+| 0D   | Blue           | Links    | `a:link`, `a:visited`         |
+| 0E   | Magenta        |          |          |
+| 0F   | Brown          |          |          |
+
+For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light).

exampleSite/config.toml

@@ -18,8 +18,7 @@ sectionPagesMenu = "main"
 noindex = false
 
 [params.theme]
-palette = "gruvbox-dark"
+palette = "gruvbox-light"
-mode = "dark-mode"
 
 # Sidebar: about/bio
 [params.about]

layouts/partials/head.html

@@ -12,7 +12,6 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css" integrity="sha512-b1ASx0WHgVFL5ZQhTgiPWX+68KjS38Jk87jg7pe+qC7q9YkEtFq0z7xCglv7qGIs/68d3mAp+StfC8WKC5SSAg==" crossorigin="anonymous" />
 
 <!-- risotto -->
-<link rel="stylesheet" href="{{ printf "css/colour/%s.css" .Site.Params.theme.palette | absURL }}">
+<link rel="stylesheet" href="{{ printf "css/palettes/%s.css" .Site.Params.theme.palette | absURL }}">
-<link rel="stylesheet" href="{{ printf "css/colour/%s.css" .Site.Params.theme.mode | absURL }}">
 <link rel="stylesheet" href="{{ "css/risotto.css" | absURL }}">
 <link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">

static/css/colour/dark-mode.css

@@ -1,10 +0,0 @@
-:root {
-    --bg: var(--black);
-    --dark-bg: var(--dark-black);
-    --bright-bg: var(--bright-black);
-    --fg: var(--white);
-    --bright-fg: var(--bright-white);
-    --logo-bg: var(--green);
-    --logo-hover: var(--bright-green);
-    --highlight-bg: var(--yellow);
-}

static/css/colour/gruvbox-dark.css

@@ -1,29 +0,0 @@
-/* gruvbox dark mode
- * https://github.com/morhetz/gruvbox
- */
-:root {
-    --dark-black: #1d2021;
-    --black: #282828;
-    --bright-black: #928374;
-    
-    --white: #ebdbb2;
-    --bright-white: #fbf1c7;
-    
-    --red: #cc241d;
-    --green: #98971a;
-    --yellow: #d79921;
-    --blue: #458588;
-    --magenta: #b16286;
-    --cyan: #689d6a;
-    --orange: #d65d0e;
-    --gray: #928374;
-    
-    --bright-red: #fb4934;
-    --bright-green: #b8bb26;
-    --bright-yellow: #fabd2f;
-    --bright-blue: #83a598;
-    --bright-magenta: #d3869b;
-    --bright-cyan: #8ec07c;
-    --bright-orange: #fe8019;
-    --bright-gray: #a89984;
-}

static/css/colour/gruvbox-light.css

@@ -1,30 +0,0 @@
-/* gruvbox light mode
- * https://github.com/morhetz/gruvbox
- */
-:root {
-    --dark-black: #282828;
-    --black: #3c3836;
-    --bright-black: #928374;
-    
-    --white: #fbf1c7;
-    --bright-white: #f9f5d7;
-
-    --red: #9d0006;
-    --green: #79740e;
-    --yellow: #b57614;
-    --blue: #076678;
-    --magenta: #8f3f71;
-    --cyan: #427b58;
-    --orange: #af3a03;
-    --gray: #7c6f64;
-
-    --dark-white: #f2e5bc;
-    --bright-red: #cc241d;
-    --bright-green: #98971a;
-    --bright-yellow: #d79921;
-    --bright-blue: #458588;
-    --bright-magenta: #b16286;
-    --bright-cyan: #689d6a;
-    --bright-orange: #d65d0e;
-    --bright-gray: #928374;
-}

static/css/colour/light-mode.css

@@ -1,10 +0,0 @@
-:root {
-    --bg: var(--white);
-    --dark-bg: var(--dark-white);
-    --bright-bg: var(--bright-black);
-    --fg: var(--black);
-    --bright-fg: var(--bright-black);
-    --logo-bg: var(--green);
-    --logo-hover: var(--bright-green);
-    --highlight-bg: var(--yellow);
-}

static/css/colours.css

@@ -0,0 +1,17 @@
+:root {
+	/* Background */
+	--bg: var(--base00);
+	--off-bg: var(--base01);
+	--inner-bg: var(--base02);
+
+	/* Text */
+	--fg: var(--base05);
+	--off-fg: var(--base04);
+	--muted: var(--base03);
+	--link: var(--base0D);
+	--hover: var(--base0C);
+	--highlight: var(--base0A);
+
+	/* Logo */
+	--logo: var(--base0B);
+}

static/css/footer.css

@@ -1,5 +1,5 @@
 .page__footer {
-    color: var(--bright-bg);
+    color: var(--off-fg);
 }
 
 .page__footer p {

static/css/layout.css

@@ -41,14 +41,14 @@
 /* Body + aside */
 .page__body {
     grid-area: body;
-    background-color: var(--bg);
+    background-color: var(--off-bg);
-    box-shadow: 0 0 0 1rem var(--bg);
+    box-shadow: 0 0 0 1rem var(--off-bg);
     overflow-wrap: break-word;
 }
 
 .page__aside {
     grid-area: aside;
-    color: var(--bright-bg);
+    color: var(--off-fg);
 }
 
 /* Footer */

static/css/logo.css

@@ -11,7 +11,8 @@
 
 .page__logo-inner {
     display: block;
-    background: var(--logo-bg);
+    background: var(--logo);
+    opacity: 0.90;
     padding: 0.25rem;
 }
 
@@ -22,7 +23,7 @@ a.page__logo-inner:link, a.page__logo-inner:visited {
 
 a.page__logo-inner:hover,
 a.page__logo-inner:active {
-    background: var(--logo-hover);
+    opacity: 1;
 }
 
 .page__logo-inner:before {

static/css/palettes/base16-dark.css

@@ -0,0 +1,22 @@
+/* base16 default dark
+ * https://github.com/chriskempson/base16-default-schemes
+ */
+
+:root {
+	--base00: #181818;
+	--base01: #282828;
+	--base02: #383838;
+	--base03: #585858;
+	--base04: #b8b8b8;
+	--base05: #d8d8d8;
+	--base06: #e8e8e8;
+	--base07: #f8f8f8;
+	--base08: #ab4642;
+	--base09: #dc9656;
+	--base0A: #f7ca88;
+	--base0B: #a1b56c;
+	--base0C: #86c1b9;
+	--base0D: #7cafc2;
+	--base0E: #ba8baf;
+	--base0F: #a16946;
+}

static/css/palettes/base16-light.css

@@ -0,0 +1,22 @@
+/* base16 default light
+ * https://github.com/chriskempson/base16-default-schemes
+ */
+
+:root {
+	--base00: #f8f8f8;
+	--base01: #e8e8e8;
+	--base02: #d8d8d8;
+	--base03: #b8b8b8;
+	--base04: #585858;
+	--base05: #383838;
+	--base06: #282828;
+	--base07: #181818;
+	--base08: #ab4642;
+	--base09: #dc9656;
+	--base0A: #f7ca88;
+	--base0B: #a1b56c;
+	--base0C: #86c1b9;
+	--base0D: #7cafc2;
+	--base0E: #ba8baf;
+	--base0F: #a16946;
+}

static/css/palettes/gruvbox-dark.css

@@ -0,0 +1,23 @@
+/* gruvbox dark
+ * https://github.com/morhetz/gruvbox
+ * base16: https://github.com/dawikur/base16-gruvbox-scheme
+ */
+
+:root {
+	--base00: #282828;
+	--base01: #3c3836;
+	--base02: #504945;
+	--base03: #665c54;
+	--base04: #bdae93;
+	--base05: #d5c4a1;
+	--base06: #ebdbb2;
+	--base07: #fbf1c7;
+	--base08: #fb4934;
+	--base09: #fe8019;
+	--base0A: #fabd2f;
+	--base0B: #b8bb26;
+	--base0C: #8ec07c;
+	--base0D: #83a598;
+	--base0E: #d3869b;
+	--base0F: #d65d0e;
+}

static/css/palettes/gruvbox-light.css

@@ -0,0 +1,23 @@
+/* gruvbox light
+ * https://github.com/morhetz/gruvbox
+ * base16: https://github.com/dawikur/base16-gruvbox-scheme
+ */
+
+:root {
+	--base00: #fbf1c7;
+	--base01: #ebdbb2;
+	--base02: #d5c4a1;
+	--base03: #bdae93;
+	--base04: #665c54;
+	--base05: #504945;
+	--base06: #3c3836;
+	--base07: #282828;
+	--base08: #9d0006;
+	--base09: #af3a03;
+	--base0A: #b57614;
+	--base0B: #79740e;
+	--base0C: #427b58;
+	--base0D: #076678;
+	--base0E: #8f3f71;
+	--base0F: #d65d0e;
+}

static/css/risotto.css

@@ -1,3 +1,4 @@
+@import 'colours.css';
 @import 'typography.css';
 @import 'layout.css';
 @import 'header.css';
@@ -6,6 +7,6 @@
 @import 'footer.css';
 
 body {
-    background-color: var(--dark-bg);
+    background-color: var(--bg);
     color: var(--fg);
 }

static/css/typography.css

@@ -52,7 +52,7 @@ h3:before,
 h4:before, 
 h5:before, 
 h6:before {
-    color: var(--bright-bg);
+    color: var(--muted);
 }
 
 h1:first-child {
@@ -67,11 +67,11 @@ p {
 /* Links */
 
 a:link, a:visited {
-    color: var(--fg);
+    color: var(--link);
 }
 
 a:hover, a:active {
-    color: var(--bright-fg);
+    color: var(--hover);
 }
 
 /* Lists */
@@ -94,11 +94,11 @@ ol ol {
 
 ul li::marker {
     content: '∗\00A0';
-    color: var(--bright-bg);
+    color: var(--muted);
 }
 
 ol li::marker {
-    color: var(--bright-bg);
+    color: var(--muted);
 }
 
 dt {
@@ -129,7 +129,7 @@ blockquote::before {
     position: absolute;
     left: -1.5rem;
     content: ">";
-    color: var(--bright-bg);
+    color: var(--muted);
 }
 
 .twitter-tweet::before {
@@ -143,9 +143,9 @@ pre,
 code, 
 kbd,
 samp {
-    background: var(--dark-bg) !important;
+    background: var(--inner-bg) !important;
     font-family: var(--font-monospace);
-    color: var(--bright-bg);
+    color: var(--off-fg);
 }
 
 pre {
@@ -163,7 +163,7 @@ strong {
 /* Highlighting */
 ::selection,
 mark {
-    background-color: var(--highlight-bg);
+    background-color: var(--highlight);
     color: var(--bg);
 }
 
@@ -175,7 +175,7 @@ hr {
 
 hr:after {
     content: '---';
-    color: var(--bright-bg);
+    color: var(--muted);
 }