✨ Add new `cherry` and `sapphire` colour schemes

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Support for icons in menus including support for links styled as an icon by itself or an icon with text
 - Search link can now be fully customised and positioned anywhere in the menu
 - Front matter support for specifying article thumbnails, covers and featured image details (including filename pattern, alt text and caption)
+- Two new colour schemes - `cherry` and `sapphire`
 - Support for SVG assets as article thumbnails, covers and featured images
 - Front matter keywords support on a per article basis
 - Indonesian translation ([#398](https://github.com/jpanther/congo/pull/398))

assets/css/schemes/cherry.css

@@ -0,0 +1,37 @@
+/* Cherry scheme */
+:root {
+  --color-neutral: 255, 255, 255;
+  /* Neutral */
+  --color-neutral-50: 250, 250, 250;
+  --color-neutral-100: 245, 245, 245;
+  --color-neutral-200: 229, 229, 229;
+  --color-neutral-300: 212, 212, 212;
+  --color-neutral-400: 163, 163, 163;
+  --color-neutral-500: 115, 115, 115;
+  --color-neutral-600: 82, 82, 82;
+  --color-neutral-700: 64, 64, 64;
+  --color-neutral-800: 38, 38, 38;
+  --color-neutral-900: 23, 23, 23;
+  /* Rose */
+  --color-primary-50: 255, 241, 242;
+  --color-primary-100: 255, 228, 230;
+  --color-primary-200: 254, 205, 211;
+  --color-primary-300: 253, 164, 175;
+  --color-primary-400: 251, 113, 133;
+  --color-primary-500: 244, 63, 94;
+  --color-primary-600: 225, 29, 72;
+  --color-primary-700: 190, 18, 60;
+  --color-primary-800: 159, 18, 57;
+  --color-primary-900: 136, 19, 55;
+  /* Green */
+  --color-secondary-50: 240, 253, 244;
+  --color-secondary-100: 220, 252, 231;
+  --color-secondary-200: 187, 247, 208;
+  --color-secondary-300: 134, 239, 172;
+  --color-secondary-400: 74, 222, 128;
+  --color-secondary-500: 34, 197, 94;
+  --color-secondary-600: 22, 163, 74;
+  --color-secondary-700: 21, 128, 61;
+  --color-secondary-800: 22, 101, 52;
+  --color-secondary-900: 20, 83, 45;
+}

assets/css/schemes/ocean.css

@@ -1,7 +1,7 @@
 /* Ocean scheme */
 :root {
   --color-neutral: 255, 255, 255;
-  /* Gray */
+  /* Slate */
   --color-neutral-50: 248, 250, 252;
   --color-neutral-100: 241, 245, 249;
   --color-neutral-200: 226, 232, 240;

assets/css/schemes/sapphire.css

@@ -0,0 +1,37 @@
+/* Sapphire scheme */
+:root {
+  --color-neutral: 255, 255, 255;
+  /* Slate */
+  --color-neutral-50: 248, 250, 252;
+  --color-neutral-100: 241, 245, 249;
+  --color-neutral-200: 226, 232, 240;
+  --color-neutral-300: 203, 213, 225;
+  --color-neutral-400: 148, 163, 184;
+  --color-neutral-500: 100, 116, 139;
+  --color-neutral-600: 71, 85, 105;
+  --color-neutral-700: 51, 65, 85;
+  --color-neutral-800: 30, 41, 59;
+  --color-neutral-900: 15, 23, 42;
+  /* Indigo */
+  --color-primary-50: 238, 242, 255;
+  --color-primary-100: 224, 231, 255;
+  --color-primary-200: 199, 210, 254;
+  --color-primary-300: 165, 180, 252;
+  --color-primary-400: 129, 140, 248;
+  --color-primary-500: 99, 102, 241;
+  --color-primary-600: 79, 70, 229;
+  --color-primary-700: 67, 56, 202;
+  --color-primary-800: 55, 48, 163;
+  --color-primary-900: 49, 46, 129;
+  /* Pink */
+  --color-secondary-50: 253, 242, 248;
+  --color-secondary-100: 252, 231, 243;
+  --color-secondary-200: 251, 207, 232;
+  --color-secondary-300: 249, 168, 212;
+  --color-secondary-400: 244, 114, 182;
+  --color-secondary-500: 236, 72, 153;
+  --color-secondary-600: 219, 39, 119;
+  --color-secondary-700: 190, 24, 93;
+  --color-secondary-800: 157, 23, 77;
+  --color-secondary-900: 131, 24, 67;
+}

exampleSite/config/_default/markup.toml

@@ -10,4 +10,4 @@
 
 [tableOfContents]
   startLevel = 2
-  endLevel = 4
+  endLevel = 3

exampleSite/content/docs/configuration/index.md

@@ -119,7 +119,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 <!-- prettier-ignore-start -->
 |Name|Default|Description|
 |---|---|---|
-|`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.|
+|`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `cherry`, `fire`, `ocean`, `sapphire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.|
 |`defaultAppearance`|`"light"`|The default theme appearance, either `light` or `dark`.|
 |`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.|
 |`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.|

exampleSite/content/docs/getting-started/index.md

@@ -30,7 +30,7 @@ The next step is to configure the language settings. Although Congo supports mul
 Locate the `languages.en.toml` file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to `languages.fr.toml`.
 
 {{< alert >}}
-Note that the language code in the language config filename should match the `languageCode` setting in `config.toml`.
+The language code in the language config filename should match the `languageCode` setting in `config.toml`.
 {{< /alert >}}
 
 ```toml
@@ -54,7 +54,11 @@ If you need extra detail, further information about each of these configuration
 
 ## Colour schemes
 
-Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `congo` (default), `avocado`, `fire`, `ocean` and `slate`.
+Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `congo` (default), `avocado`, `cherry`, `fire`, `ocean`, `sapphire` and `slate`.
+
+{{< alert >}}
+The `colourScheme` value should be provided in lowercase.
+{{< /alert >}}
 
 ```toml
 # config/_default/params.toml
@@ -72,6 +76,10 @@ Congo defines a three-colour palette that is used throughout the theme. Each mai
 
 {{< swatches "#78716c" "#84cc16" "#10b981" >}}
 
+#### Cherry
+
+{{< swatches "#737373" "#f43f5e" "#22c55e" >}}
+
 #### Fire
 
 {{< swatches "#78716c" "#f97316" "#f43f5e" >}}
@@ -80,6 +88,10 @@ Congo defines a three-colour palette that is used throughout the theme. Each mai
 
 {{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
 
+#### Sapphire
+
+{{< swatches "#64748b" "#6366f1" "#ec4899" >}}
+
 #### Slate
 
 {{< swatches "#6B7280" "#64748b" "#6B7280" >}}