Merge pull request #63 from adobe/cuberoot/theme-components

Provide a theme component for setting the color and scale

documentation/components/theme.md

@@ -0,0 +1,149 @@
+## Overview
+
+An **sp-theme** sets the rendering theme for all child components.
+The Spectrum design system supports four color themes and two different
+scales. `spectrum-web-components` currently supports two of the four
+color themes (dark and light) one one of the scales (medium).
+
+## Light theme
+
+```html demo
+<style type="text/css">
+    #example {
+        width: 500px;
+        padding: 3em;
+        background-color: var(--spectrum-alias-background-color-default);
+        color: var(--spectrum-alias-text-color);
+    }
+
+    #buttons {
+        margin-top: 2em;
+    }
+</style>
+<sp-theme color="light">
+    <div id="example">
+        <div>
+            <sp-slider
+                value="5"
+                step="1"
+                min="1"
+                max="11"
+                label="Volume"
+                id="volume-slider"
+            ></sp-slider>
+        </div>
+        <div><sp-switch>Overdrive</sp-switch></div>
+        <div id="buttons">
+            <sp-button variant="primary">Cancel</sp-button>
+            <sp-button variant="cta">Continue</sp-button>
+        </div>
+    </div>
+</sp-theme>
+```
+
+## Dark theme
+
+```html demo
+<style type="text/css">
+    #example {
+        width: 500px;
+        padding: 3em;
+        background-color: var(--spectrum-alias-background-color-default);
+        color: var(--spectrum-alias-text-color);
+    }
+
+    #buttons {
+        margin-top: 2em;
+    }
+</style>
+<sp-theme color="dark">
+    <div id="example">
+        <div>
+            <sp-slider
+                value="5"
+                step="1"
+                min="1"
+                max="11"
+                label="Volume"
+                id="volume-slider"
+            ></sp-slider>
+        </div>
+        <div><sp-switch>Overdrive</sp-switch></div>
+        <div id="buttons">
+            <sp-button variant="primary">Cancel</sp-button>
+            <sp-button variant="cta">Continue</sp-button>
+        </div>
+    </div>
+</sp-theme>
+```
+
+## Embedding themes
+
+There are a few cases where it is necessary to embed one theme within another.
+For example, if you have an application that is using a dark theme that is
+previewing or editing content that will be displayed in a light theme.
+
+If you only want to change colors, you can use the `sp-theme-dark` or
+`sp-theme-light` class instead. They are a little lighter weight than
+the full `sp-theme` class. You should still use `sp-theme` at the root
+because it installs extra styles that do not change between colors.
+
+```html
+<style type="text/css">
+    #outer {
+        width: 500px;
+        padding: 3em;
+        background-color: var(--spectrum-alias-background-color-default);
+        color: var(--spectrum-alias-text-color);
+    }
+
+    #inner {
+        margin-top: 2em;
+        padding: 2em;
+        background-color: var(--spectrum-alias-background-color-default);
+        color: var(--spectrum-alias-text-color);
+    }
+
+    #buttons {
+        margin-top: 2em;
+    }
+</style>
+<sp-theme color="dark">
+    <div id="outer">
+        <div>
+            <sp-slider
+                value="5"
+                step="1"
+                min="1"
+                max="11"
+                label="Volume"
+                id="volume-slider"
+            ></sp-slider>
+        </div>
+        <div><sp-switch>Overdrive</sp-switch></div>
+        <div id="buttons">
+            <sp-button variant="primary">Cancel</sp-button>
+            <sp-button variant="cta">Continue</sp-button>
+        </div>
+        <sp-theme-light>
+            <div id="inner">
+                <div>
+                    <sp-slider
+                        value="5"
+                        step="1"
+                        min="1"
+                        max="11"
+                        label="Volume"
+                        id="volume-slider"
+                    ></sp-slider>
+                </div>
+                <div><sp-switch>Overdrive</sp-switch></div>
+                <div id="buttons">
+                    <sp-button variant="primary">Cancel</sp-button>
+                    <sp-button variant="cta">Continue</sp-button>
+                </div>
+            </div>
+        </sp-theme-light>
+    </div>
+</sp-theme>
+```

documentation/src/components/layout.css

@@ -30,6 +30,8 @@ governing permissions and limitations under the License.
     flex: 1 1 auto;
     padding-bottom: 40px;
     height: 100%;
+    background-color: var(--spectrum-alias-background-color-default);
+    color: var(--spectrum-alias-text-color);
 }
 
 #body #layout-content {

documentation/src/components/layout.ts

@@ -28,7 +28,7 @@ export class LayoutElement extends RouteComponent {
 
     render() {
         return html`
-            <div id="app">
+            <sp-theme color="light" scale="medium" id="app">
                 <div id="body">
                     <docs-side-nav id="side-nav"></docs-side-nav>
                     <div id="layout-content">
@@ -37,7 +37,7 @@ export class LayoutElement extends RouteComponent {
                         </div>
                     </div>
                 </div>
-            </div>
+            </sp-theme>
         `;
     }
 }

documentation/src/main.css

@@ -15,6 +15,5 @@ body {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background-color: var(--spectrum-alias-background-color-default);
-    color: var(--spectrum-alias-text-color);
+    margin: 0;
 }

documentation/src/utils/spectrum.ts

@@ -1,4 +1,3 @@
-import '../../../styles/all-medium-light.css';
 import * as Spectrum from '../../../src/index';
 import * as MediumIcons from '../../../src/icons/icons-medium';
 

src/index.ts

@@ -26,6 +26,7 @@ export * from './sidenav';
 export * from './switch';
 export * from './tab';
 export * from './tab-list';
+export * from './themes';
 export * from './overlay-root';
 export * from './overlay-trigger';
 export * from './popover';

src/themes/index.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2018 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+export * from './theme-dark';
+export * from './scale-medium';
+
+import { ThemeDark } from './theme-dark';
+import { ThemeLight } from './theme-light';
+import { ScaleMedium } from './scale-medium';
+import { Theme } from './theme';
+
+if (!customElements.get('sp-theme-dark')) {
+    customElements.define('sp-theme-dark', ThemeDark);
+}
+
+if (!customElements.get('sp-theme-light')) {
+    customElements.define('sp-theme-light', ThemeLight);
+}
+
+if (!customElements.get('sp-scale-medium')) {
+    customElements.define('sp-scale-medium', ScaleMedium);
+}
+
+if (!customElements.get('sp-theme')) {
+    customElements.define('sp-theme', Theme);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-theme-dark': ThemeDark;
+        'sp-theme-light': ThemeLight;
+        'sp-scale-medium': ScaleMedium;
+        'sp-theme': Theme;
+    }
+}

src/themes/scale-medium.css

@@ -0,0 +1,17 @@
+/*
+Copyright 2018 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import '../../styles/scale-medium/all.css';
+
+:host {
+    display: block;
+}

src/themes/scale-medium.ts

@@ -0,0 +1,26 @@
+/*
+Copyright 2018 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { LitElement, CSSResultArray, html, TemplateResult } from 'lit-element';
+import mediumStyles from './scale-medium.css';
+
+export class ScaleMedium extends LitElement {
+    public static get styles(): CSSResultArray {
+        return [mediumStyles];
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <slot></slot>
+        `;
+    }
+}

src/themes/theme-dark.css

@@ -0,0 +1,17 @@
+/*
+Copyright 2018 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import '../../styles/theme-dark/all.css';
+
+:host {
+    display: block;
+}

src/themes/theme-dark.ts

@@ -0,0 +1,26 @@
+/*
+Copyright 2018 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { LitElement, CSSResultArray, html, TemplateResult } from 'lit-element';
+import darkStyles from './theme-dark.css';
+
+export class ThemeDark extends LitElement {
+    public static get styles(): CSSResultArray {
+        return [darkStyles];
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <slot></slot>
+        `;
+    }
+}

src/themes/theme-light.css

@@ -0,0 +1,17 @@
+/*
+Copyright 2018 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import '../../styles/theme-light/all.css';
+
+:host {
+    display: block;
+}

src/themes/theme-light.ts

@@ -0,0 +1,26 @@
+/*
+Copyright 2018 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { LitElement, CSSResultArray, html, TemplateResult } from 'lit-element';
+import lightStyles from './theme-light.css';
+
+export class ThemeLight extends LitElement {
+    public static get styles(): CSSResultArray {
+        return [lightStyles];
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <slot></slot>
+        `;
+    }
+}