feat(ld-theme): ld-theme component and theming docs

.eleventy.js

@@ -56,6 +56,7 @@ module.exports = function (eleventyConfig) {
       stacked,
       opened,
       brand,
+      themable = true,
       heighlight,
       heighlightCssComponent
     ) {
@@ -74,6 +75,7 @@ module.exports = function (eleventyConfig) {
       output += `${stacked ? ' stacked' : ''}`
       output += `${opened ? ' opened' : ''}`
       output += `${brand ? ' brand' : ''}`
+      output += `${themable ? ' themable' : ''}`
       output += '>\n'
       output += `<div slot="code">\n\n`
       output += `\`\`\`${lang}${

src/docs/components/docs-example/docs-example.tsx

@@ -24,6 +24,9 @@ export class DocsExample {
   /** Themed background. */
   @Prop() brand = false
 
+  /** Enables theme switch. */
+  @Prop() themable = false
+
   /** Current theme. */
   @State() currentTheme: ThemeName = ThemeName.ocean
 
@@ -60,7 +63,7 @@ export class DocsExample {
     }
 
     let clShow = 'docs-example__show'
-    if (this.currentTheme) {
+    if (this.themable && this.currentTheme) {
       clShow += ' ld-theme-' + this.currentTheme.toLowerCase()
     }
     if (this.stacked) clShow += ' docs-example__show--stacked'
@@ -78,7 +81,7 @@ export class DocsExample {
               <docs-switch-web-css></docs-switch-web-css>
             )}
             <div class="docs-example__tool-buttons">
-              <docs-pick-theme />
+              {this.themable && <docs-pick-theme />}
               <docs-copy-to-cb
                 textToCopy={decodeURIComponent(
                   this.isWebComponent ? this.code : this.codeCssComponent

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

@@ -436,6 +436,23 @@ You can align the text inside the button using the `align-text` propperty.
 | `target`         | `target`          | The `target` attributed can be used in conjunction with the `href` attribute. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) for more information on the `target` attribute. | `"_blank" \| "_parent" \| "_self" \| "_top"`                                                          | `undefined` |
 
 
+## Dependencies
+
+### Used by
+
+ - docs-copy-to-cb
+ - docs-edit-on-github
+ - docs-toggle-code
+
+### Graph
+```mermaid
+graph TD;
+  docs-copy-to-cb --> ld-button
+  docs-edit-on-github --> ld-button
+  docs-toggle-code --> ld-button
+  style ld-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -236,6 +236,19 @@ Here are some examples on how you can apply different colors on headings:
 | `visualLevel`        | `visual-level` | The heading style. Overrides the style inferred from the heading level.                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "b1" \| "b2" \| "b3" \| "b4" \| "b5" \| "b6" \| "xb1" \| "xb2" \| "xb3" \| "xh1" \| "xh2" \| "xh3" \| "xh4" \| "xh5" \| "xh6"` | `undefined` |
 
 
+## Dependencies
+
+### Used by
+
+ - docs-nav
+
+### Graph
+```mermaid
+graph TD;
+  docs-nav --> ld-heading
+  style ld-heading fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -65,6 +65,23 @@ Liquid's icons use the [`currentColor`](https://developer.mozilla.org/en-US/docs
 |      | (optional) Custom SVG icon (only valid without name prop). |
 
 
+## Dependencies
+
+### Used by
+
+ - docs-copy-to-cb
+ - docs-edit-on-github
+ - docs-toggle-code
+
+### Graph
+```mermaid
+graph TD;
+  docs-copy-to-cb --> ld-icon
+  docs-edit-on-github --> ld-icon
+  docs-toggle-code --> ld-icon
+  style ld-icon fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -342,6 +342,19 @@ If you'd rather like to use the CSS component, inspect and copy the markup and C
 | `"start"` | The purpose of this slot is to add icons or buttons to the input, __justifying the item to the end of the component__. Styling for `ld-icon` and `ld-button` is provided within the `ld-input` component. If you choose to place something different into the slot, you will probably need to adjust some styles on the slotted item in order to make it fit right.   |
 
 
+## Dependencies
+
+### Used by
+
+ - docs-search
+
+### Graph
+```mermaid
+graph TD;
+  docs-search --> ld-input
+  style ld-input fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

src/liquid/components/ld-sr-only/readme.md

@@ -28,6 +28,25 @@ The CSS class `ld-sr-only` works the same way as its web component counterpart,
 <!-- Auto Generated Below -->
 
 
+## Dependencies
+
+### Used by
+
+ - docs-copy-to-cb
+ - docs-pick-theme
+ - docs-switch-web-css
+ - docs-toggle-code
+
+### Graph
+```mermaid
+graph TD;
+  docs-copy-to-cb --> ld-sr-only
+  docs-pick-theme --> ld-sr-only
+  docs-switch-web-css --> ld-sr-only
+  docs-toggle-code --> ld-sr-only
+  style ld-sr-only fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,19 @@
+import '../../components' // type definitions for type checks and intelliSense
+import { Component, h, Host, Prop } from '@stencil/core'
+
+@Component({
+  tag: 'ld-theme',
+  shadow: false,
+})
+export class LdTheme {
+  /** The theme name. */
+  @Prop() name: 'ocean' | 'solvent' | 'bubblegum' | 'shake' | 'tea' = 'ocean'
+
+  render() {
+    return (
+      <Host class={`ld-theme-${this.name}`}>
+        <slot></slot>
+      </Host>
+    )
+  }
+}

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

@@ -0,0 +1,63 @@
+---
+eleventyNavigation:
+  key: Theme
+  parent: Components
+layout: layout.njk
+title: Theme
+permalink: liquid/components/ld-theme/
+---
+
+# Theme
+
+Liquid comes with multiple themes for theming its UI components. Most of the examples in the documentation have a theme switch built in, which you can use to switch between the available themes. In the following examples this switch is turned off. Instead, the examples show how you can apply a theme yourself.
+
+## How to apply a theme
+
+You apply a theme by wrapping whatever needs to be themed in an `ld-theme` component, or an element with a CSS theme class.
+
+{% example 'html', false, false, false, false %}
+<ld-theme name="bubblegum">
+  <ld-button>Text</ld-button>
+</ld-theme>
+
+<!-- CSS component -->
+
+<div class="ld-theme-bubblegum">
+  <button class="ld-button">Text</button>
+</div>
+{% endexample %}
+
+## Theme inception
+
+In rare cases you will want to have a theming element wrapped by another theming element. Liquid supports a one level theme inception, which should be sufficiant for most edge cases. You can **not** wrap a theme in a theme in a theme... So, here is an example of a one level theme inception:
+
+{% example 'html', false, false, false, false %}
+<ld-theme name="bubblegum">
+  <ld-theme name="tea">
+    <ld-button>Text</ld-button>
+  </ld-theme>
+</ld-theme>
+
+<!-- CSS component -->
+
+<div class="ld-theme-bubblegum">
+  <div class="ld-theme-tea">
+    <button class="ld-button">Text</button>
+  </div>
+</div>
+{% endexample %}
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description     | Type                                                      | Default   |
+| -------- | --------- | --------------- | --------------------------------------------------------- | --------- |
+| `name`   | `name`    | The theme name. | `"bubblegum" \| "ocean" \| "shake" \| "solvent" \| "tea"` | `'ocean'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/liquid/components/ld-theme/test/ld-theme.spec.ts

@@ -0,0 +1,23 @@
+import { newSpecPage } from '@stencil/core/testing'
+import { LdTheme } from '../ld-theme'
+
+describe('ld-theme', () => {
+  it('renders default theme', async () => {
+    const page = await newSpecPage({
+      components: [LdTheme],
+      html: `<ld-theme>yolo</ld-theme>`,
+    })
+    expect(page.root).toEqualHtml(
+      `<ld-theme class="ld-theme-ocean">yolo</ld-theme>`
+    )
+  })
+  it('renders explicit theme', async () => {
+    const page = await newSpecPage({
+      components: [LdTheme],
+      html: `<ld-theme name="tea">yolo</ld-theme>`,
+    })
+    expect(page.root).toEqualHtml(
+      `<ld-theme class="ld-theme-tea" name="tea">yolo</ld-theme>`
+    )
+  })
+})