Update styles documentation (#126)

* Update/embed styles examples and some editing for consistency
* Refinements to examples and text

Author: Steve Orvell

packages/lit-dev-content/site/_includes/projects/docs/components/style/basic/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/style/basic/my-element.ts

@@ -0,0 +1,14 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = css`
+    p {
+      color: green;
+    }
+  `;
+  protected render() {
+    return html`<p>I am green!</p>`;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/basic/project.json

@@ -0,0 +1,13 @@
+{
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/host/index.html

@@ -0,0 +1,4 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>
+<my-element class="blue"></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/style/host/my-element.ts

@@ -0,0 +1,20 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators/custom-element';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      background-color: lightgray;
+      padding: 8px;
+    }
+    :host(.blue) {
+      background-color: aliceblue;
+      color: darkgreen;
+    }
+  `;
+  protected render() {
+    return html`Hello World`;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/host/project.json

@@ -0,0 +1,12 @@
+{
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/maps/index.html

@@ -0,0 +1,3 @@
+<script src="./my-element.js" type="module"></script>
+
+<my-element></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/style/maps/my-element.ts

@@ -0,0 +1,23 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { classMap } from 'lit/directives/class-map';
+import { styleMap } from 'lit/directives/style-map';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = css`
+    .someclass { border: 1px solid red; padding: 4px; }
+    .anotherclass { background-color: navy; }
+  `;
+  @property()
+  classes = { someclass: true, anotherclass: true };
+  @property()
+  styles = { color: 'lightgreen', fontFamily: 'Roboto' };
+  protected render() {
+    return html`
+      <div class=${classMap(this.classes)} style=${styleMap(this.styles)}>
+        Some content
+      </div>
+    `;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/maps/project.json

@@ -0,0 +1,12 @@
+{
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/slottedselector/index.html

@@ -0,0 +1,6 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element>
+  <p>Slotted paragraph</p>
+  <span slot="hi">Slotted span inside a div</span>
+</my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/style/slottedselector/my-element.ts

@@ -0,0 +1,17 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = css`
+    ::slotted(*) { font-family: Roboto; }
+    ::slotted(p) { color: blue; }
+    div ::slotted(*) { color: red; }
+  `;
+  protected render() {
+    return html`
+      <slot></slot>
+      <div><slot name="hi"></slot></div>
+    `;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/slottedselector/project.json

@@ -0,0 +1,12 @@
+{
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/superstyles/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/style/superstyles/my-element.ts

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+import { customElement } from 'lit/decorators';
+import { SuperElement } from './super-element.js';
+
+@customElement('my-element')
+export class MyElement extends SuperElement {
+  static get styles() {
+    return [
+      super.styles,
+      css`div {
+        color: red;
+      }`
+    ];
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/superstyles/project.json

@@ -0,0 +1,13 @@
+{
+  "files": {
+    "my-element.ts": {},
+    "super-element.ts": {},
+    "index.html": {}
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/superstyles/super-element.ts

@@ -0,0 +1,17 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators';
+
+@customElement('super-element')
+export class SuperElement extends LitElement {
+  static styles = css`
+    div {
+      border: 1px solid gray;
+      padding: 8px;
+    }
+  `;
+  protected render() {
+    return html`
+      <div>Content</div>
+    `;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/theming/index.html

@@ -0,0 +1,20 @@
+<script type="module" src="./my-element.js"></script>
+
+<style>
+  html {
+    --theme-primary: green;
+    --theme-secondary: aliceblue;
+    --theme-warning: red;
+    --theme-font-family: Roboto;
+  }
+  my-element {
+    --my-element-text-color: var(--theme-primary);
+    --my-element-background-color: var(--theme-secondary);
+    --my-element-font-family: var(--theme-font-family);
+  }
+  .warning {
+    --my-element-text-color: var(--theme-warning);
+  }
+</style>
+<my-element></my-element>
+<my-element class="warning"></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/style/theming/my-element.ts

@@ -0,0 +1,19 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = css`
+    :host {
+      color: var(--my-element-text-color, black);
+      background: var(--my-element-background-color, white);
+      font-family: var(--my-element-font-family, Roboto);
+      display: block;
+      padding: 8px;
+      margin: 8px;
+    }
+  `;
+  protected render() {
+    return html`<div>Hello World</div>`;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/style/theming/project.json

@@ -0,0 +1,12 @@
+{
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
+  }
+}