feat(ld-theme): add theme colors as dynamic css custom props

src/liquid/components/index.md

@@ -19,17 +19,19 @@ If you have a suggestion for a new component not listed here, create an [issue o
 |-----------------------------------------------------|-------------------|--------------------|
 | [ld-bg-cells](components/ld-bg-cells)               | done              | done               |
 | [ld-button](components/ld-button/)                  | done              | done               |
+| [ld-checkbox](components/ld-checkbox)               | done              | done               |
 | [ld-heading](components/ld-heading/)                | done              | done               |
-| [ld-paragraph](components/ld-paragraph/)            | done              | done               |
 | [ld-icon](components/ld-icon/)                      | in progress       | done               |
 | [ld-input](components/ld-input/)                    | done              | done               |
 | [ld-input-message](components/ld-input-message/)    | done              | done               |
 | [ld-label](components/ld-label/)                    | done              | done               |
 | [ld-loading](components/ld-loading/)                | done              | done               |
 | [ld-notification](components/ld-notification)       | done              | done               |
+| [ld-paragraph](components/ld-paragraph/)            | done              | done               |
+| [ld-radio](components/ld-radio)                     | done              | done               |
 | [ld-sr-only](components/ld-sr-only/)                | not needed        | done               |
 | [ld-sr-live](components/ld-sr-live/)                | not needed        | done               |
-| [ld-checkbox](components/ld-checkbox)               | done              | done               |
-| [ld-radio](components/ld-radio)                     | done              | done               |
 | [ld-select](components/ld-select)                   | done              | done               |
+| [ld-theme](components/ld-theme)                     | done              | done               |
 | [ld-toggle](components/ld-toggle)                   | done              | done               |
+| [ld-tooltip](components/ld-tooltip)                 | done              | done               |

src/liquid/components/ld-theme/ld-theme.css

@@ -0,0 +1,36 @@
+/* .ld-theme-ocean -> default */
+:root,
+.ld-theme-ocean {
+  --ld-thm-accent: var(--ld-thm-ocean-accent);
+  --ld-thm-bg-primary: var(--ld-thm-ocean-bg-primary);
+  --ld-thm-bg-secondary: var(--ld-thm-ocean-bg-secondary);
+  --ld-thm-highlight: var(--ld-thm-ocean-highlight);
+}
+
+.ld-theme-bubblegum {
+  --ld-thm-accent: var(--ld-thm-bubblegum-accent);
+  --ld-thm-bg-primary: var(--ld-thm-bubblegum-bg-primary);
+  --ld-thm-bg-secondary: var(--ld-thm-bubblegum-bg-secondary);
+  --ld-thm-highlight: var(--ld-thm-bubblegum-highlight);
+}
+
+.ld-theme-shake {
+  --ld-thm-accent: var(--ld-thm-shake-accent);
+  --ld-thm-bg-primary: var(--ld-thm-shake-bg-primary);
+  --ld-thm-bg-secondary: var(--ld-thm-shake-bg-secondary);
+  --ld-thm-highlight: var(--ld-thm-shake-highlight);
+}
+
+.ld-theme-solvent {
+  --ld-thm-accent: var(--ld-thm-solvent-accent);
+  --ld-thm-bg-primary: var(--ld-thm-solvent-bg-primary);
+  --ld-thm-bg-secondary: var(--ld-thm-solvent-bg-secondary);
+  --ld-thm-highlight: var(--ld-thm-solvent-highlight);
+}
+
+.ld-theme-tea {
+  --ld-thm-accent: var(--ld-thm-tea-accent);
+  --ld-thm-bg-primary: var(--ld-thm-tea-bg-primary);
+  --ld-thm-bg-secondary: var(--ld-thm-tea-bg-secondary);
+  --ld-thm-highlight: var(--ld-thm-tea-highlight);
+}

src/liquid/components/ld-theme/readme.md

@@ -49,6 +49,65 @@ In rare cases you will want to have a theming element wrapped by another theming
 </div>
 {% endexample %}
 
+## CSS Custom Properties
+
+You have access to CSS custom properties with a color value depending on the current theme:
+
+```html
+--ld-thm-accent
+--ld-thm-bg-primary
+--ld-thm-bg-secondary
+--ld-thm-highlight
+```
+
+### Examples
+
+The following examples illustrate the variables applied to background color within each theme:
+
+#### Theme Ocean
+
+<div class="ld-theme-ocean">
+  <docs-color var="--ld-thm-accent"></docs-color>
+  <docs-color var="--ld-thm-bg-primary"></docs-color>
+  <docs-color var="--ld-thm-bg-secondary"></docs-color>
+  <docs-color var="--ld-thm-highlight"></docs-color>
+</div>
+
+#### Theme Bubblegum
+
+<div class="ld-theme-bubblegum">
+  <docs-color var="--ld-thm-accent"></docs-color>
+  <docs-color var="--ld-thm-bg-primary"></docs-color>
+  <docs-color var="--ld-thm-bg-secondary"></docs-color>
+  <docs-color var="--ld-thm-highlight"></docs-color>
+</div>
+
+#### Theme Shake
+
+<div class="ld-theme-shake">
+  <docs-color var="--ld-thm-accent"></docs-color>
+  <docs-color var="--ld-thm-bg-primary"></docs-color>
+  <docs-color var="--ld-thm-bg-secondary"></docs-color>
+  <docs-color var="--ld-thm-highlight"></docs-color>
+</div>
+
+#### Theme Solvent
+
+<div class="ld-theme-solvent">
+  <docs-color var="--ld-thm-accent"></docs-color>
+  <docs-color var="--ld-thm-bg-primary"></docs-color>
+  <docs-color var="--ld-thm-bg-secondary"></docs-color>
+  <docs-color var="--ld-thm-highlight"></docs-color>
+</div>
+
+#### Theme Tea
+
+<div class="ld-theme-tea">
+  <docs-color var="--ld-thm-accent"></docs-color>
+  <docs-color var="--ld-thm-bg-primary"></docs-color>
+  <docs-color var="--ld-thm-bg-secondary"></docs-color>
+  <docs-color var="--ld-thm-highlight"></docs-color>
+</div>
 
 <!-- Auto Generated Below -->