Add keylines to colour styles page

nationalarchives · Dec 9, 2024 · 14feb64 · 14feb64
1 parent 9bcf17b
commit 14feb64
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/src/styles/colours/index.md b/src/styles/colours/index.md
@@ -64,14 +64,16 @@ Always use the provided TNA colour palette.
 
 ### Extra web colour palette
 
-| Colour                 | Light theme                                                                     | Dark theme                                                                      |
-| ---------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
-| Page background        | <span class="tna-ds-colour-swatch" style="background:#f4f4f4"></span> `#f4f4f4` | <span class="tna-ds-colour-swatch" style="background:#212223"></span> `#212223` |
-| Tinted background      | <span class="tna-ds-colour-swatch" style="background:#d9d9d6"></span> `#d9d9d6` | <span class="tna-ds-colour-swatch" style="background:#323334"></span> `#323334` |
-| Contrasting background | <span class="tna-ds-colour-swatch" style="background:#1e1e1e"></span> `#1e1e1e` | <span class="tna-ds-colour-swatch" style="background:#101112"></span> `#101112` |
-| Base font              | <span class="tna-ds-colour-swatch" style="background:#343338"></span> `#343338` | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` |
-| Links                  | <span class="tna-ds-colour-swatch" style="background:#0062a8"></span> `#0062a8` | <span class="tna-ds-colour-swatch" style="background:#00b0ff"></span> `#00b0ff` |
-| Visited links          | <span class="tna-ds-colour-swatch" style="background:#4c2c92"></span> `#4c2c92` | <span class="tna-ds-colour-swatch" style="background:#aa88ff"></span> `#aa88ff` |
+| Colour                 | Light theme                                                                         | Dark theme                                                                          |
+| ---------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| Page background        | <span class="tna-ds-colour-swatch" style="background:#f4f4f4"></span> `#f4f4f4`     | <span class="tna-ds-colour-swatch" style="background:#212223"></span> `#212223`     |
+| Tinted background      | <span class="tna-ds-colour-swatch" style="background:#d9d9d6"></span> `#d9d9d6`     | <span class="tna-ds-colour-swatch" style="background:#323334"></span> `#323334`     |
+| Contrasting background | <span class="tna-ds-colour-swatch" style="background:#1e1e1e"></span> `#1e1e1e`     | <span class="tna-ds-colour-swatch" style="background:#101112"></span> `#101112`     |
+| Base font              | <span class="tna-ds-colour-swatch" style="background:#343338"></span> `#343338`     | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff`     |
+| Keylines               | <span class="tna-ds-colour-swatch" style="background:#26262a40"></span> `#26262a40` | <span class="tna-ds-colour-swatch" style="background:#ffffff40"></span> `#ffffff40` |
+| Dark keylines          | <span class="tna-ds-colour-swatch" style="background:#26262a"></span> `#26262a`     | <span class="tna-ds-colour-swatch" style="background:#ffffffbf"></span> `#ffffffbf` |
+| Links                  | <span class="tna-ds-colour-swatch" style="background:#0062a8"></span> `#0062a8`     | <span class="tna-ds-colour-swatch" style="background:#00b0ff"></span> `#00b0ff`     |
+| Visited links          | <span class="tna-ds-colour-swatch" style="background:#4c2c92"></span> `#4c2c92`     | <span class="tna-ds-colour-swatch" style="background:#aa88ff"></span> `#aa88ff`     |
 
 Ou full list of web colours can be found in the [colour variables for TNA Frontend](https://github.com/nationalarchives/tna-frontend/blob/main/src/nationalarchives/variables/_colour.scss).