Skip to content

Commit

Permalink
Docs: Organise CSS custom properties table
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamkudrna @OndraM
adamkudrna authored and OndraM committed Jan 31, 2022
1 parent 8f33481 commit 98eed8e
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 56 deletions.
100 changes: 50 additions & 50 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
26 changes: 24 additions & 2 deletions examples/theming.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down
19 changes: 15 additions & 4 deletions src/scss/theme/_default.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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});
Expand All @@ -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)}
Expand Down

0 comments on commit 98eed8e

Please sign in to comment.