feat: add "darkest" theme styles

packages/styles/README.md

@@ -16,6 +16,12 @@ yarn add @spectrum-web-components/styles
 
 ## Theme packages
 
+```
+@import '@spectrum-web-components/styles/all-medium-darkest.css';
+```
+
+This file brings together the globals variables and font settings with the "Darkest" color set and "Medium" scale system specification.
+
 ```
 @import '@spectrum-web-components/styles/all-medium-dark.css';
 ```
@@ -34,6 +40,12 @@ This file brings together the globals variables and font settings with the "Ligh
 
 This file brings together the globals variables and font settings with the "Lightest" color set and "Medium" scale system specification.
 
+```
+@import '@spectrum-web-components/styles/all-large-darkest.css';
+```
+
+This file brings together the globals variables and font settings with the "Darkest" color set and "Large" scale system specification.
+
 ```
 @import '@spectrum-web-components/styles/all-large-dark.css';
 ```
@@ -54,6 +66,14 @@ This file brings together the globals variables and font settings with the "Ligh
 
 ## Color sets
 
+### Darkest
+
+```
+@import '@spectrum-web-components/styles/theme-darkest.css';
+```
+
+This file provides only the variables needed to power a color pallet featuring colors found in the "Darkest" theme.
+
 ### Dark
 
 ```

packages/styles/all-large-darkest.css

@@ -0,0 +1,16 @@
+/*
+Copyright 2019 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 'core-global.css';
+@import 'fonts.css';
+@import 'theme-darkest.css';
+@import 'scale-large.css';

packages/styles/all-medium-darkest.css

@@ -0,0 +1,16 @@
+/*
+Copyright 2019 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 'core-global.css';
+@import 'fonts.css';
+@import 'theme-darkest.css';
+@import 'scale-medium.css';

packages/styles/theme-darkest.css

@@ -0,0 +1,163 @@
+/*
+Copyright 2019 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.
+*/
+
+/* stylelint-disable */
+:root,
+:host {
+    --spectrum-global-color-celery-400: rgb(61, 167, 78);
+    --spectrum-global-color-celery-500: rgb(68, 181, 86);
+    --spectrum-global-color-celery-600: rgb(75, 195, 95);
+    --spectrum-global-color-celery-700: rgb(81, 210, 103);
+    --spectrum-global-color-chartreuse-400: rgb(124, 195, 63);
+    --spectrum-global-color-chartreuse-500: rgb(133, 208, 68);
+    --spectrum-global-color-chartreuse-600: rgb(142, 222, 73);
+    --spectrum-global-color-chartreuse-700: rgb(155, 236, 84);
+    --spectrum-global-color-yellow-400: rgb(210, 178, 0);
+    --spectrum-global-color-yellow-500: rgb(223, 191, 0);
+    --spectrum-global-color-yellow-600: rgb(237, 204, 0);
+    --spectrum-global-color-yellow-700: rgb(250, 217, 0);
+    --spectrum-global-color-magenta-400: rgb(202, 41, 150);
+    --spectrum-global-color-magenta-500: rgb(216, 55, 144);
+    --spectrum-global-color-magenta-600: rgb(226, 73, 157);
+    --spectrum-global-color-magenta-700: rgb(236, 90, 170);
+    --spectrum-global-color-fuchsia-400: rgb(177, 48, 189);
+    --spectrum-global-color-fuchsia-500: rgb(192, 56, 204);
+    --spectrum-global-color-fuchsia-600: rgb(207, 62, 220);
+    --spectrum-global-color-fuchsia-700: rgb(217, 81, 229);
+    --spectrum-global-color-purple-400: rgb(134, 76, 204);
+    --spectrum-global-color-purple-500: rgb(146, 86, 217);
+    --spectrum-global-color-purple-600: rgb(157, 100, 225);
+    --spectrum-global-color-purple-700: rgb(168, 115, 223);
+    --spectrum-global-color-indigo-400: rgb(92, 92, 224);
+    --spectrum-global-color-indigo-500: rgb(103, 103, 236);
+    --spectrum-global-color-indigo-600: rgb(117, 117, 241);
+    --spectrum-global-color-indigo-700: rgb(130, 130, 246);
+    --spectrum-global-color-seafoam-400: rgb(22, 135, 140);
+    --spectrum-global-color-seafoam-500: rgb(27, 149, 154);
+    --spectrum-global-color-seafoam-600: rgb(32, 163, 168);
+    --spectrum-global-color-seafoam-700: rgb(35, 178, 184);
+    --spectrum-global-color-red-400: rgb(215, 55, 63);
+    --spectrum-global-color-red-500: rgb(227, 72, 80);
+    --spectrum-global-color-red-600: rgb(236, 91, 98);
+    --spectrum-global-color-red-700: rgb(247, 109, 116);
+    --spectrum-global-color-orange-400: rgb(218, 123, 17);
+    --spectrum-global-color-orange-500: rgb(230, 134, 25);
+    --spectrum-global-color-orange-600: rgb(242, 148, 35);
+    --spectrum-global-color-orange-700: rgb(249, 164, 63);
+    --spectrum-global-color-green-400: rgb(38, 142, 108);
+    --spectrum-global-color-green-500: rgb(45, 157, 120);
+    --spectrum-global-color-green-600: rgb(51, 171, 132);
+    --spectrum-global-color-green-700: rgb(57, 185, 144);
+    --spectrum-global-color-blue-400: rgb(20, 115, 230);
+    --spectrum-global-color-blue-500: rgb(38, 128, 235);
+    --spectrum-global-color-blue-600: rgb(55, 142, 240);
+    --spectrum-global-color-blue-700: rgb(75, 156, 245);
+    --spectrum-global-color-gray-50: rgb(8, 8, 8);
+    --spectrum-global-color-gray-75: rgb(26, 26, 26);
+    --spectrum-global-color-gray-100: rgb(30, 30, 30);
+    --spectrum-global-color-gray-200: rgb(44, 44, 44);
+    --spectrum-global-color-gray-300: rgb(57, 57, 57);
+    --spectrum-global-color-gray-400: rgb(73, 73, 73);
+    --spectrum-global-color-gray-500: rgb(92, 92, 92);
+    --spectrum-global-color-gray-600: rgb(124, 124, 124);
+    --spectrum-global-color-gray-700: rgb(162, 162, 162);
+    --spectrum-global-color-gray-800: rgb(200, 200, 200);
+    --spectrum-global-color-gray-900: rgb(239, 239, 239);
+    --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.6);
+    --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.8);
+    --spectrum-alias-background-color-hover-overlay: rgba(239, 239, 239, 0.08);
+    --spectrum-alias-highlight-hover: rgba(239, 239, 239, 0.08);
+    --spectrum-alias-highlight-active: rgba(239, 239, 239, 0.15);
+    --spectrum-alias-highlight-selected: rgba(38, 128, 235, 0.2);
+    --spectrum-alias-highlight-selected-hover: rgba(38, 128, 235, 0.3);
+    --spectrum-alias-text-highlight-color: rgba(38, 128, 235, 0.3);
+    --spectrum-alias-background-color-quickactions: rgba(30, 30, 30, 0.9);
+    --spectrum-alias-radial-reaction-color-default: rgba(200, 200, 200, 0.6);
+    --spectrum-alias-pasteboard-background-color: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-appframe-border-color: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-appframe-separator-color: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-colorarea-border-color: rgba(239, 239, 239, 0.1);
+    --spectrum-colorarea-border-color-hover: rgba(239, 239, 239, 0.1);
+    --spectrum-colorarea-border-color-down: rgba(239, 239, 239, 0.1);
+    --spectrum-colorarea-border-color-key-focus: rgba(239, 239, 239, 0.1);
+    --spectrum-colorslider-border-color: rgba(239, 239, 239, 0.1);
+    --spectrum-colorslider-border-color-hover: rgba(239, 239, 239, 0.1);
+    --spectrum-colorslider-border-color-down: rgba(239, 239, 239, 0.1);
+    --spectrum-colorslider-border-color-key-focus: rgba(239, 239, 239, 0.1);
+    --spectrum-colorslider-vertical-border-color: rgba(239, 239, 239, 0.1);
+    --spectrum-colorslider-vertical-border-color-hover: rgba(
+        239,
+        239,
+        239,
+        0.1
+    );
+    --spectrum-colorslider-vertical-border-color-down: rgba(239, 239, 239, 0.1);
+    --spectrum-colorslider-vertical-border-color-key-focus: rgba(
+        239,
+        239,
+        239,
+        0.1
+    );
+    --spectrum-colorwheel-border-color: rgba(239, 239, 239, 0.1);
+    --spectrum-colorwheel-border-color-hover: rgba(239, 239, 239, 0.1);
+    --spectrum-colorwheel-border-color-down: rgba(239, 239, 239, 0.1);
+    --spectrum-colorwheel-border-color-key-focus: rgba(239, 239, 239, 0.1);
+    --spectrum-miller-column-item-background-color-selected: rgba(
+        38,
+        128,
+        235,
+        0.1
+    );
+    --spectrum-miller-column-item-background-color-selected-hover: rgba(
+        38,
+        128,
+        235,
+        0.2
+    );
+    --spectrum-tabs-compact-selection-indicator-color: var(
+        --spectrum-global-color-blue-500
+    );
+    --spectrum-tabs-compact-vertical-rule-color: var(
+        --spectrum-global-color-gray-200
+    );
+    --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var(
+        --spectrum-global-color-blue-500
+    );
+    --spectrum-tabs-compact-vertical-emphasized-rule-color: var(
+        --spectrum-global-color-gray-200
+    );
+    --spectrum-tabs-emphasized-selection-indicator-color: var(
+        --spectrum-global-color-blue-500
+    );
+    --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var(
+        --spectrum-global-color-blue-500
+    );
+    --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var(
+        --spectrum-global-color-blue-500
+    );
+    --spectrum-tabs-quiet-emphasized-selection-indicator-color: var(
+        --spectrum-global-color-blue-500
+    );
+    --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var(
+        --spectrum-global-color-blue-500
+    );
+    --spectrum-well-background-color: rgba(200, 200, 200, 0.02);
+    --spectrum-well-border-color: rgba(239, 239, 239, 0.05);
+}
+
+/* stylelint-enable */

packages/theme/README.md

@@ -15,6 +15,42 @@ npm install @spectrum-web-components/themes
 yarn add @spectrum-web-components/themes
 ```
 
+## Quick start
+
+The default import of this packages `import '@spectrum-web-components/themes';` will get you started using the `<sp-theme>` wrapper element, and includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`). Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empower you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See "Advanced usage" below for instructions on tuning the performance of an application that leverages this package.
+
+## Advanced usage
+
+Once you've moved beyond the prototype phases of an application, it is likely that you will only use one combinatin of `color` and `scale` in your application, and even when you don't you will likely benefit from lazily loading variants that you don't leverage by default. For single combination applications or to power a _default_ theme, the following imports can be used to ensure only the code your application requires is loaded:
+
+```js
+// Power a site using <sp-theme color="darkest" scale="large">
+import '@spectrum-web-components/themes/lib/theme-darkest.js';
+import '@spectrum-web-components/themes/lib/scale-large.js';
+
+import '@spectrum-web-components/themes/lib/theme.js';
+```
+
+When subsequent theme variants are needed you can ensure those are lazily loaded by leveraging dynamic imports via something like the following:
+
+```js
+const themeElement = document.querySelector('sp-theme');
+
+const updateTheme = async (color, scale) => {
+    Promise.all([
+        import(`@spectrum-web-components/themes/lib/theme-${color}.js`),
+        import(`@spectrum-web-components/themes/lib/scale-${scale}.js`),
+    ]).then(() => {
+        themeElement.color = color;
+        themeElement.scale = scale;
+    });
+};
+
+updateTheme('light', 'medium');
+```
+
+When bundling your application, be sure to consult the documentation of your bundler for the correct way to ensure proper packaging of the sort of programattic dependancy graph that this will create.
+
 ## Light theme
 
 ```html demo

packages/theme/src/index.ts

@@ -12,19 +12,8 @@ governing permissions and limitations under the License.
 export * from './theme.js';
 
 import './theme-dark.js';
+import './theme-darkest.js';
 import './theme-light.js';
 import './theme-lightest.js';
 import './scale-medium.js';
 import './scale-large.js';
-import { Theme } from './theme.js';
-
-/* istanbul ignore else */
-if (!customElements.get('sp-theme')) {
-    customElements.define('sp-theme', Theme);
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'sp-theme': Theme;
-    }
-}

packages/theme/src/theme-darkest.css

@@ -0,0 +1,13 @@
+/*
+Copyright 2019 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 '@spectrum-web-components/styles/theme-darkest.css';

packages/theme/src/theme-darkest.ts

@@ -0,0 +1,16 @@
+/*
+Copyright 2019 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 darkStyles from './theme-darkest.css.js';
+import { Theme } from './theme';
+
+Theme.registerThemeFragment('darkest', 'color', darkStyles);

packages/theme/src/theme.ts

@@ -226,3 +226,14 @@ export class Theme extends HTMLElement {
 }
 
 Theme.registerThemeFragment('core', 'core', coreStyles);
+
+/* istanbul ignore else */
+if (!customElements.get('sp-theme')) {
+    customElements.define('sp-theme', Theme);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-theme': Theme;
+    }
+}

scripts/spectrum-vars.js

@@ -95,7 +95,8 @@ const themes = [
     'lightest',
     'light',
     'dark',
-    /*'darkest', 'lightest', 'middark', 'midlight'*/
+    'darkest',
+    /*'middark', 'midlight'*/
 ];
 const scales = ['medium', 'large'];
 const cores = ['global'];