From 98eed8e022065bcab7fa146cd48b7964d9d91bb9 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Fri, 28 Jan 2022 19:31:49 +0100
Subject: [PATCH] Docs: Organise CSS custom properties table

---
 README.md                    | 100 +++++++++++++++++------------------
 examples/theming.html        |  26 ++++++++-
 src/scss/theme/_default.scss |  19 +++++--
 3 files changed, 89 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index 12d228d9..21e8a5ae 100644
--- a/README.md
+++ b/README.md
@@ -346,56 +346,56 @@ anywhere in your stylesheet (the order of which is not important):
 <details>
 <summary>Full list of available CSS custom properties:</summary>
 
-| CSS custom property                      | Description                                       |
-|------------------------------------------|---------------------------------------------------|
-| `--lmcccm-font-family`                   | Base font family                                  |
-| `--lmcccm-base-font-size`                | Base font size                                    |
-| `--lmcccm-bg`                            | Bar background color                              |
-| `--lmcccm-text`                          | Text color                                        |
-| `--lmcccm-link-text`                     | Link text color                                   |
-| `--lmcccm-link-text-decoration`          | Link text decoration                              |
-| `--lmcccm-link-hover-text`               | Link text color on hover                          |
-| `--lmcccm-link-hover-text-decoration`    | Link text decoration on hover                     |
-| `--lmcccm-link-active-text`              | Link text color in active state                   |
-| `--lmcccm-btn-font-weight`               | Button font weight                                |
-| `--lmcccm-btn-text-transform`            | Button text transform                             |
-| `--lmcccm-btn-border-width`              | Button border width                               |
-| `--lmcccm-btn-border-style`              | Button border style                               |
-| `--lmcccm-btn-border-radius`             | Button border radius                              |
-| `--lmcccm-btn-primary-border`            | Primary button border color                       |
-| `--lmcccm-btn-primary-bg`                | Primary button background color                   |
-| `--lmcccm-btn-primary-text`              | Primary button text color                         |
-| `--lmcccm-btn-primary-hover-border`      | Primary button border color on hover              |
-| `--lmcccm-btn-primary-hover-bg`          | Primary button background color on hover          |
-| `--lmcccm-btn-primary-hover-text`        | Primary button text color on hover                |
-| `--lmcccm-btn-primary-active-border`     | Primary button border color in active state       |
-| `--lmcccm-btn-primary-active-bg`         | Primary button background color in active state   |
-| `--lmcccm-btn-primary-active-text`       | Primary button text color in active state         |
-| `--lmcccm-btn-secondary-border`          | Secondary button border color                     |
-| `--lmcccm-btn-secondary-bg`              | Secondary button background color                 |
-| `--lmcccm-btn-secondary-text`            | Secondary button text color                       |
-| `--lmcccm-btn-secondary-hover-border`    | Secondary button border color on hover            |
-| `--lmcccm-btn-secondary-hover-bg`        | Secondary button background color on hover        |
-| `--lmcccm-btn-secondary-hover-text`      | Secondary button text color on hover              |
-| `--lmcccm-btn-secondary-active-border`   | Secondary button border color in active state     |
-| `--lmcccm-btn-secondary-active-bg`       | Secondary button background color in active state |
-| `--lmcccm-btn-secondary-active-text`     | Secondary button text color in active state       |
-| `--lmcccm-toggle-bg-off`                 | Toggle background in unselected state             |
-| `--lmcccm-toggle-bg-on`                  | Toggle background in selected state               |
-| `--lmcccm-toggle-bg-readonly`            | Toggle background in readonly state               |
-| `--lmcccm-toggle-knob-bg`                | Toggle knob color                                 |
-| `--lmcccm-toggle-knob-icon-color`        | Toggle knob icon color                            |
-| `--lmcccm-backdrop-color`                | Backdrop color                                    |
-| `--lmcccm-modal-max-width`               | Maximum width of settings modal                   |
-| `--lmcccm-modal-max-height`              | Maximum height of settings modal                  |
-| `--lmcccm-modal-border-radius`           | Settings modal border radius                      |
-| `--lmcccm-modal-bg`                      | Settings modal background color                   |
-| `--lmcccm-modal-text`                    | Settings modal text color                         |
-| `--lmcccm-modal-section-border`          | Border color of settings modal sections           |
-| `--lmcccm-cookie-category-border-radius` | Cookie category block border radius               |
-| `--lmcccm-cookie-category-bg`            | Cookie category block background color            |
-| `--lmcccm-cookie-category-hover-bg`      | Cookie category block background color on hover   |
-| `--lmcccm-cookie-table-border`           | Cookie table border color                         |
+| Category | CSS custom property                      | Description                                                     |
+|----------|------------------------------------------|-----------------------------------------------------------------|
+| Common   | `--lmcccm-font-family`                   | Base font family                                                |
+|          | `--lmcccm-base-font-size`                | Base font size                                                  |
+|          | `--lmcccm-bg`                            | Common background color                                         |
+|          | `--lmcccm-text`                          | Common text color                                               |
+|          | `--lmcccm-backdrop-color`                | Backdrop color                                                  |
+| Links    | `--lmcccm-link-text`                     | Link text color                                                 |
+|          | `--lmcccm-link-text-decoration`          | Link text decoration                                            |
+|          | `--lmcccm-link-hover-text`               | Link text color on hover                                        |
+|          | `--lmcccm-link-hover-text-decoration`    | Link text decoration on hover                                   |
+|          | `--lmcccm-link-active-text`              | Link text color in active state                                 |
+| Buttons  | `--lmcccm-btn-font-weight`               | Button font weight                                              |
+|          | `--lmcccm-btn-text-transform`            | Button text transform                                           |
+|          | `--lmcccm-btn-border-width`              | Button border width                                             |
+|          | `--lmcccm-btn-border-style`              | Button border style                                             |
+|          | `--lmcccm-btn-border-radius`             | Button border radius                                            |
+|          | `--lmcccm-btn-primary-border`            | Primary button border color                                     |
+|          | `--lmcccm-btn-primary-bg`                | Primary button background color                                 |
+|          | `--lmcccm-btn-primary-text`              | Primary button text color                                       |
+|          | `--lmcccm-btn-primary-hover-border`      | Primary button border color on hover                            |
+|          | `--lmcccm-btn-primary-hover-bg`          | Primary button background color on hover                        |
+|          | `--lmcccm-btn-primary-hover-text`        | Primary button text color on hover                              |
+|          | `--lmcccm-btn-primary-active-border`     | Primary button border color in active state                     |
+|          | `--lmcccm-btn-primary-active-bg`         | Primary button background color in active state                 |
+|          | `--lmcccm-btn-primary-active-text`       | Primary button text color in active state                       |
+|          | `--lmcccm-btn-secondary-border`          | Secondary button border color                                   |
+|          | `--lmcccm-btn-secondary-bg`              | Secondary button background color                               |
+|          | `--lmcccm-btn-secondary-text`            | Secondary button text color                                     |
+|          | `--lmcccm-btn-secondary-hover-border`    | Secondary button border color on hover                          |
+|          | `--lmcccm-btn-secondary-hover-bg`        | Secondary button background color on hover                      |
+|          | `--lmcccm-btn-secondary-hover-text`      | Secondary button text color on hover                            |
+|          | `--lmcccm-btn-secondary-active-border`   | Secondary button border color in active state                   |
+|          | `--lmcccm-btn-secondary-active-bg`       | Secondary button background color in active state               |
+|          | `--lmcccm-btn-secondary-active-text`     | Secondary button text color in active state                     |
+| Toggle   | `--lmcccm-toggle-bg-off`                 | Toggle background in unselected state                           |
+|          | `--lmcccm-toggle-bg-on`                  | Toggle background in selected state                             |
+|          | `--lmcccm-toggle-bg-readonly`            | Toggle background in readonly state                             |
+|          | `--lmcccm-toggle-knob-bg`                | Toggle knob color                                               |
+|          | `--lmcccm-toggle-knob-icon-color`        | Toggle knob icon color                                          |
+| Modal    | `--lmcccm-modal-max-width`               | Maximum width of settings modal                                 |
+|          | `--lmcccm-modal-max-height`              | Maximum height of settings modal (box mode only)                |
+|          | `--lmcccm-modal-border-radius`           | Settings modal border radius (box mode only)                    |
+|          | `--lmcccm-modal-bg`                      | Settings modal background color (defaults to common background) |
+|          | `--lmcccm-modal-text`                    | Settings modal text color (defaults to common text color)       |
+|          | `--lmcccm-modal-section-border`          | Border color of settings modal sections                         |
+| Cookies  | `--lmcccm-cookie-category-border-radius` | Cookie category block border radius                             |
+|          | `--lmcccm-cookie-category-bg`            | Cookie category block background color                          |
+|          | `--lmcccm-cookie-category-hover-bg`      | Cookie category block background color on hover                 |
+|          | `--lmcccm-cookie-table-border`           | Cookie table border color                                       |
 
 </details>
 
diff --git a/examples/theming.html b/examples/theming.html
index a2d582b1..3ee9c551 100644
--- a/examples/theming.html
+++ b/examples/theming.html
@@ -22,13 +22,19 @@
 
     <style>
         .custom-theme {
+            /* Common */
             --lmcccm-font-family: 'Noto Sans', 'Roboto', 'Open Sans', system-ui, sans-serif;
             --lmcccm-base-font-size: 14px;
             --lmcccm-bg: rgb(255, 255, 255);
             --lmcccm-text: rgb(72, 72, 72);
+            --lmcccm-backdrop-color: rgba(0, 0, 0, 0.5);
+
+            /* Links */
             --lmcccm-link-text: var(--lmcccm-text);
             --lmcccm-link-hover-text: rgb(17, 17, 17);
             --lmcccm-link-active-text: var(--lmcccm-link-hover-text);
+
+            /* Buttons */
             --lmcccm-btn-font-weight: 700;
             --lmcccm-btn-border-radius: 1.25em;
             --lmcccm-btn-primary-border: transparent;
@@ -46,11 +52,16 @@
             --lmcccm-btn-secondary-hover-text: var(--lmcccm-btn-secondary-text);
             --lmcccm-btn-secondary-active-border: rgb(17, 17, 17);
             --lmcccm-btn-secondary-active-text: var(--lmcccm-btn-secondary-text);
+
+            /* Toggle */
             --lmcccm-toggle-bg-off: rgb(146, 146, 146);
             --lmcccm-toggle-bg-on: rgb(0, 88, 163);
-            --lmcccm-backdrop-color: rgba(0, 0, 0, 0.5);
+
+            /* Modal */
             --lmcccm-modal-border-radius: 1.4em;
             --lmcccm-modal-section-border: rgb(216, 216, 216);
+
+            /* Cookies */
             --lmcccm-cookie-category-border-radius: 1.4em;
             --lmcccm-cookie-category-bg: rgb(245, 245, 245);
             --lmcccm-cookie-category-hover-bg: rgb(223, 223, 223);
@@ -145,13 +156,19 @@ <h2 class="mt-4 mt-md-5 mb-3">Without Spirit Design System</h2>
                 <details class="mb-4">
                     <summary class="link-primary">Show source</summary>
                     <pre class="mt-4"><code class="language-css">:root {
+    /* Common */
     --lmcccm-font-family: 'Noto Sans', 'Roboto', 'Open Sans', system-ui, sans-serif;
     --lmcccm-base-font-size: 14px;
     --lmcccm-bg: rgb(255, 255, 255);
     --lmcccm-text: rgb(72, 72, 72);
+    --lmcccm-backdrop-color: rgba(0, 0, 0, 0.5);
+
+    /* Links */
     --lmcccm-link-text: var(--lmcccm-text);
     --lmcccm-link-hover-text: rgb(17, 17, 17);
     --lmcccm-link-active-text: var(--lmcccm-link-hover-text);
+
+    /* Buttons */
     --lmcccm-btn-font-weight: 700;
     --lmcccm-btn-border-radius: 1.25em;
     --lmcccm-btn-primary-border: transparent;
@@ -169,11 +186,16 @@ <h2 class="mt-4 mt-md-5 mb-3">Without Spirit Design System</h2>
     --lmcccm-btn-secondary-hover-text: var(--lmcccm-btn-secondary-text);
     --lmcccm-btn-secondary-active-border: rgb(17, 17, 17);
     --lmcccm-btn-secondary-active-text: var(--lmcccm-btn-secondary-text);
+
+    /* Toggle */
     --lmcccm-toggle-bg-off: rgb(146, 146, 146);
     --lmcccm-toggle-bg-on: rgb(0, 88, 163);
-    --lmcccm-backdrop-color: rgba(0, 0, 0, 0.5);
+
+    /* Modal */
     --lmcccm-modal-border-radius: 1.4em;
     --lmcccm-modal-section-border: rgb(216, 216, 216);
+
+    /* Cookies */
     --lmcccm-cookie-category-border-radius: 1.4em;
     --lmcccm-cookie-category-bg: rgb(245, 245, 245);
     --lmcccm-cookie-category-hover-bg: rgb(223, 223, 223);
diff --git a/src/scss/theme/_default.scss b/src/scss/theme/_default.scss
index 318427ac..a37fbfea 100644
--- a/src/scss/theme/_default.scss
+++ b/src/scss/theme/_default.scss
@@ -11,15 +11,21 @@
 @use '../tools/units';
 
 :root {
+    // Common
     --lmcccm-p-font-family: var(--lmcccm-font-family, #{tokens.$font-family-default});
     --lmcccm-p-base-font-size: var(--lmcccm-base-font-size, #{units.rem2em(tokens.$font-size-base)});
     --lmcccm-p-bg: var(--lmcccm-bg, #{tokens.$background-basic});
     --lmcccm-p-text: var(--lmcccm-text, #{tokens.$text-primary-default});
+    --lmcccm-p-backdrop-color: var(--lmcccm-backdrop-color, #{tokens.$background-backdrop});
+
+    // Links
     --lmcccm-p-link-text: var(--lmcccm-link-text, #{tokens.$action-link-primary-default});
     --lmcccm-p-link-text-decoration: var(--lmcccm-link-text-decoration, underline);
     --lmcccm-p-link-hover-text: var(--lmcccm-link-hover-text, #{tokens.$action-link-primary-hover});
     --lmcccm-p-link-hover-text-decoration: var(--lmcccm-link-hover-text-decoration, underline);
     --lmcccm-p-link-active-text: var(--lmcccm-link-active-text, #{tokens.$action-link-primary-active});
+
+    // Buttons
     --lmcccm-p-btn-font-weight: var(--lmcccm-btn-font-weight, #{tokens.$font-weight-semibold});
     --lmcccm-p-btn-text-transform: var(--lmcccm-btn-text-transform, initial);
     --lmcccm-p-btn-border-width: var(--lmcccm-btn-border-width, #{tokens.$border-width-1});
@@ -43,21 +49,26 @@
     --lmcccm-p-btn-secondary-active-border: var(--lmcccm-btn-secondary-active-border, #{tokens.$action-primary-active});
     --lmcccm-p-btn-secondary-active-bg: var(--lmcccm-btn-secondary-active-bg, transparent);
     --lmcccm-p-btn-secondary-active-text: var(--lmcccm-btn-secondary-active-text, #{tokens.$action-primary-active});
+
+    // Toggle
     --lmcccm-p-toggle-bg-off: var(--lmcccm-toggle-bg-off, #{tokens.$action-unselected-default});
     --lmcccm-p-toggle-bg-on: var(--lmcccm-toggle-bg-on, #{tokens.$action-selected-default});
-    --lmcccm-p-toggle-bg-readonly: var(--lmcccm-toggle-bg-readonly, #c4c4c4);
+    --lmcccm-p-toggle-bg-readonly: var(--lmcccm-toggle-bg-readonly, #{tokens.$gray-500});
     --lmcccm-p-toggle-knob-bg: var(--lmcccm-toggle-knob-bg, #{tokens.$background-basic});
     --lmcccm-p-toggle-knob-icon-color: var(--lmcccm-toggle-knob-icon-color, #{tokens.$background-basic});
-    --lmcccm-p-backdrop-color: var(--lmcccm-backdrop-color, #{tokens.$background-backdrop});
+
+    // Modal
     --lmcccm-p-modal-max-width: var(
         --lmcccm-modal-max-width,
         min(50em, calc(100vw - #{units.rem2em(tokens.$space-8)}))
     );
     --lmcccm-p-modal-max-height: var(--lmcccm-modal-max-height, 37em);
     --lmcccm-p-modal-border-radius: var(--lmcccm-modal-border-radius, #{units.rem2em(tokens.$radius-2)});
-    --lmcccm-p-modal-bg: var(--lmcccm-modal-bg, #{tokens.$background-basic});
-    --lmcccm-p-modal-text: var(--lmcccm-modal-text, #{tokens.$text-primary-default});
+    --lmcccm-p-modal-bg: var(--lmcccm-modal-bg, var(--lmcccm-p-bg));
+    --lmcccm-p-modal-text: var(--lmcccm-modal-text, var(--lmcccm-p-text));
     --lmcccm-p-modal-section-border: var(--lmcccm-modal-section-border, #{tokens.$border-main-default});
+
+    // Cookies
     --lmcccm-p-cookie-category-border-radius: var(
         --lmcccm-cookie-category-border-radius,
         #{units.rem2em(tokens.$radius-1)}