Docs: Organise CSS custom properties table

lmc-eu · Jan 31, 2022 · 98eed8e · 98eed8e
1 parent 8f33481
commit 98eed8e
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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)}