removal: darkest theme references

.circleci/config.yml

@@ -218,7 +218,7 @@ jobs:
                   keys:
                       - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-hcm-
                       - v2-golden-images-main-hcm-
-                      - v2-golden-images-main-classic-lightest-medium-ltr-
+                      - v2-golden-images-main-classic-light-medium-ltr-
             - run:
                   name: Count baseline images
                   command: find test/visual/screenshots-baseline -type f | wc -l > count_start.txt
@@ -322,7 +322,7 @@ workflows:
                   matrix:
                       parameters:
                           theme: [classic, express]
-                          color: [lightest, light, dark, darkest]
+                          color: [light, dark]
                           scale: [medium, large]
                           dir: [ltr, rtl]
                   filters:

CHANGELOG.md

@@ -1028,7 +1028,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 -   **action-menu:** update spectrum css input ([62a5065](https://github.com/adobe/spectrum-web-components/commit/62a50651a3c797598f8d76330e87f2824cdabbc5))
 -   **actionbar:** add actionbar component package ([36dd7e9](https://github.com/adobe/spectrum-web-components/commit/36dd7e943a8b825b947f0053ddbe31b69ca27062))
 -   **actionbar:** update spectrum css input ([8c888aa](https://github.com/adobe/spectrum-web-components/commit/8c888aa883490fe8e6a070f799095284128a609a))
--   add "darkest" theme styles ([fe38025](https://github.com/adobe/spectrum-web-components/commit/fe38025d2b631f07834789c936efe7ffcbc1a628))
 -   add and use icons-ui package ([d9c3ab2](https://github.com/adobe/spectrum-web-components/commit/d9c3ab212b4f756334e857fc513ccbf0a4dff9cc))
 -   add badge component ([cabfdfe](https://github.com/adobe/spectrum-web-components/commit/cabfdfe7b7eb00c3868ec26afab524cef1c2fcbd))
 -   add dialog, dialog-wrapped, and underlay elements ([3df9050](https://github.com/adobe/spectrum-web-components/commit/3df9050f65bd3a95f9b986aa728cfc1a2eaee432))

packages/card/src/spectrum-card.css

@@ -69,6 +69,10 @@ governing permissions and limitations under the License.
     --spectrum-card-selected-background-opacity: 0.1;
 }
 
+:host .spectrum--darkest {
+    --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
+}
+
 :host([variant='quiet']),
 :host([variant='gallery']) {
     --mod-card-content-margin-top: var(

projects/css-custom-vars-viewer/scripts/parse-json.js

@@ -53,7 +53,6 @@ spectrumColours.forEach((colour) => {
                     sets: {
                         light: info.sets.light.value,
                         dark: info.sets.dark.value,
-                        darkest: info.sets.darkest.value,
                         wireframe: info.sets.wireframe.value,
                     },
                 });

projects/css-custom-vars-viewer/src/CssTable.ts

@@ -32,7 +32,6 @@ export interface Item extends TableItem {
     sets: {
         light: string;
         dark: string;
-        darkest: string;
         wireframe: string;
     };
 }
@@ -64,7 +63,7 @@ export class CssTable extends SpectrumElement {
     copiedText = '';
 
     @property({ type: String, attribute: 'color-theme' })
-    colorTheme: 'light' | 'dark' | 'darkest' | 'wireframe' = 'light';
+    colorTheme: 'light' | 'dark' | 'wireframe' = 'light';
 
     @property({ type: Array })
     public items: Item[] = [];

projects/css-custom-vars-viewer/src/CustomVarsViewer.ts

@@ -47,7 +47,6 @@ export interface Item extends TableItem {
     sets: {
         light: string;
         dark: string;
-        darkest: string;
         wireframe: string;
     };
 }
@@ -138,7 +137,6 @@ export class CustomVarsViewer extends SpectrumElement {
                 >
                     <sp-menu-item value="light">Light</sp-menu-item>
                     <sp-menu-item value="dark">Dark</sp-menu-item>
-                    <sp-menu-item value="darkest">Darkest</sp-menu-item>
                     <sp-menu-item value="wireframe">Wireframe</sp-menu-item>
                 </sp-picker>
             </div>

projects/documentation/src/components/layout.ts

@@ -85,36 +85,24 @@ const isNarrowMediaQuery = matchMedia('screen and (max-width: 960px)');
 const lazyStyleFragment = (name: Color | Scale, flavor: ThemeVariant): void => {
     var fragmentName = `${name}-${flavor}`;
     switch (fragmentName) {
-        case 'darkest-spectrum':
-            import('@spectrum-web-components/theme/theme-darkest.js');
-            break;
         case 'dark-spectrum':
             import('@spectrum-web-components/theme/theme-dark.js');
             break;
         case 'light-spectrum':
             import('@spectrum-web-components/theme/theme-light.js');
             break;
-        case 'lightest-spectrum':
-            import('@spectrum-web-components/theme/theme-lightest.js');
-            break;
         case 'medium-spectrum':
             import('@spectrum-web-components/theme/scale-medium.js');
             break;
         case 'large-spectrum':
             import('@spectrum-web-components/theme/scale-large.js');
             break;
-        case 'darkest-express':
-            import('@spectrum-web-components/theme/express/theme-darkest.js');
-            break;
         case 'dark-express':
             import('@spectrum-web-components/theme/express/theme-dark.js');
             break;
         case 'light-express':
             import('@spectrum-web-components/theme/express/theme-light.js');
             break;
-        case 'lightest-express':
-            import('@spectrum-web-components/theme/express/theme-lightest.js');
-            break;
         case 'medium-express':
             import('@spectrum-web-components/theme/express/scale-medium.js');
             break;
@@ -392,10 +380,8 @@ export class LayoutElement extends LitElement {
                         value=${this.color}
                         @change=${this.updateColor}
                     >
-                        <sp-menu-item value="lightest">Lightest</sp-menu-item>
                         <sp-menu-item value="light">Light</sp-menu-item>
                         <sp-menu-item value="dark">Dark</sp-menu-item>
-                        <sp-menu-item value="darkest">Darkest</sp-menu-item>
                     </sp-picker>
                 </div>
                 <div class="theme-control">
@@ -525,17 +511,11 @@ export class LayoutElement extends LitElement {
                 ...this.querySelectorAll('code-example'),
             ] as CodeExample[];
             examples.forEach((example) => {
-                example.codeTheme =
-                    this.color === 'dark' || this.color === 'darkest'
-                        ? 'dark'
-                        : 'light';
+                example.codeTheme = this.color === 'dark' ? 'dark' : 'light';
             });
             (
                 document.querySelector('html') as HTMLHtmlElement
-            ).style.colorScheme =
-                this.color === 'dark' || this.color === 'darkest'
-                    ? 'dark'
-                    : 'light';
+            ).style.colorScheme = this.color === 'dark' ? 'dark' : 'light';
         }
         if (changes.has('scale')) {
             if (window.localStorage) {

projects/documentation/src/getting-started.ts

@@ -10,5 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/theme/theme-lightest.js';
 import '@spectrum-web-components/theme/scale-medium.js';

projects/story-decorator/src/StoryDecorator.ts

@@ -341,10 +341,8 @@ export class StoryDecorator extends SpectrumElement {
                 .value=${this.color}
                 @change=${this.updateTheme}
             >
-                <sp-menu-item value="lightest">Lightest</sp-menu-item>
                 <sp-menu-item value="light">Light</sp-menu-item>
                 <sp-menu-item value="dark">Dark</sp-menu-item>
-                <sp-menu-item value="darkest">Darkest</sp-menu-item>
             </sp-picker>
         `;
     }

scripts/spectrum-vars.js

@@ -140,7 +140,7 @@ const spectrumPaths = [
 ];
 
 // sources to use from spectrum-css
-const themes = ['lightest', 'light', 'dark', 'darkest'];
+const themes = ['light', 'dark'];
 const scales = ['medium', 'large'];
 const cores = ['global'];
 const processes = [];
@@ -152,7 +152,6 @@ spectrumPaths.forEach((spectrumPath, i) => {
     const isExpress = i === 1;
     if (isExpress) packageDir.push('express');
     themes.forEach((theme) => {
-        if (isExpress && ['lightest', 'darkest'].includes(theme)) return;
         const srcPath = path.join(spectrumPath, `spectrum-${theme}.css`);
         const dstPath = path.resolve(
             path.join(

tasks/build-preview-urls-comment.js

@@ -56,7 +56,7 @@ export const buildPreviewURLComment = (ref) => {
     const previewLinks = [];
     const themes = ['Classic', 'Express'];
     const scales = ['Medium', 'Large'];
-    const colors = ['Lightest', 'Light', 'Dark', 'Darkest'];
+    const colors = ['Light', 'Dark', 'Darkest'];
     const directions = ['LTR', 'RTL'];
     previewLinks.push(
         `- [High Contrast Mode | Medium | LTR](https://${getHash(

tasks/process-spectrum.js

@@ -50,8 +50,7 @@ const isThemeOnlyRule = (rule) => {
         rule.value.selectors?.[0][0].name === 'spectrum--express' ||
         rule.value.selectors?.[0][0].name === 'spectrum' ||
         rule.value.selectors?.[0][0].name === 'spectrum--light' ||
-        rule.value.selectors?.[0][0].name === 'spectrum--dark' ||
-        rule.value.selectors?.[0][0].name === 'spectrum--darkest'
+        rule.value.selectors?.[0][0].name === 'spectrum--dark'
     );
 };
 

test/benchmark/helpers.ts

@@ -14,7 +14,6 @@ import { html, LitElement, render, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/scale-large.js';
-import '@spectrum-web-components/theme/theme-lightest.js';
 
 declare global {
     interface Window {
@@ -124,7 +123,7 @@ export const measureFixtureCreation = async (
     const templates = new Array<TemplateResult>(opts.numRenders).fill(template);
     const renderContainer = document.createElement('sp-theme');
     renderContainer.scale = 'large';
-    renderContainer.color = 'lightest';
+    renderContainer.color = 'light';
 
     document.body.appendChild(renderContainer);
     const start = window.tachometerStart === 'page' ? 0 : performance.now();

test/visual/review.js

@@ -29,7 +29,7 @@ const getHash = (context) => {
 const vrts = [];
 const themes = ['Classic', 'Express'];
 const scales = ['Medium', 'Large'];
-const colors = ['Lightest', 'Light', 'Dark', 'Darkest'];
+const colors = ['Light', 'Dark', 'Darkest'];
 const directions = ['LTR', 'RTL'];
 vrts.push([
     `High Contrast Mode | Medium | LTR`,

test/visual/test.ts

@@ -205,7 +205,7 @@ export const regressVisuals = async (name: string, stories: TestsType) => {
         if (color && scale && dir) {
             test(stories, name, color, scale, dir);
         } else {
-            const colors: Color[] = ['lightest', 'light', 'dark', 'darkest'];
+            const colors: Color[] = ['light', 'dark'];
             const scales: Scale[] = ['medium', 'large'];
             const directions: ('ltr' | 'rtl')[] = ['ltr', 'rtl'];
             colors.forEach((color: Color) => {

tools/styles/CHANGELOG.md

@@ -445,8 +445,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Features
 
--   add "darkest" theme styles ([fe38025](https://github.com/adobe/spectrum-web-components/commit/fe38025))
-
 ## [0.4.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/styles@0.4.2...@spectrum-web-components/styles@0.4.3) (2020-01-06)
 
 **Note:** Version bump only for package @spectrum-web-components/styles

tools/styles/README.md

@@ -16,7 +16,7 @@ yarn add @spectrum-web-components/styles
 ## Theme packages
 
 ```
-@import '@spectrum-web-components/styles/all-medium-darkest.css';
+@import '@spectrum-web-components/styles/all-medium-dark.css';
 ```
 
 This file brings together the global variables and font settings with the "Darkest" color set and "Medium" scale system specification.
@@ -33,18 +33,6 @@ This file brings together the global variables and font settings with the "Dark"
 
 This file brings together the global variables and font settings with the "Light" color set and "Medium" scale system specification.
 
-```
-@import '@spectrum-web-components/styles/all-medium-lightest.css';
-```
-
-This file brings together the global 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 global variables and font settings with the "Darkest" color set and "Large" scale system specification.
-
 ```
 @import '@spectrum-web-components/styles/all-large-dark.css';
 ```
@@ -57,20 +45,8 @@ This file brings together the global variables and font settings with the "Dark"
 
 This file brings together the global variables and font settings with the "Light" color set and "Large" scale system specification.
 
-```
-@import '@spectrum-web-components/styles/all-large-lightest.css';
-```
-
-This file brings together the global variables and font settings with the "Lightest" color set and "Large" scale system specification.
-
 ## Color sets
 
-### Darkest
-
-```
-@import '@spectrum-web-components/styles/theme-darkest.css';
-```
-
 This file provides only the variables needed to power a color palette featuring colors found in the "Darkest" theme.
 
 ### Dark
@@ -89,14 +65,6 @@ This file provides only the variables needed to power a color palette featuring
 
 This file provides only the variables needed to power a color palette featuring colors found in the "Light" theme.
 
-### Lightest
-
-```
-@import '@spectrum-web-components/styles/theme-lightest.css';
-```
-
-This file provides only the variables needed to power a color palette featuring colors found in the "Lightest" theme.
-
 ## Scale
 
 ### Medium

tools/styles/all-large-lightest.css

@@ -12,5 +12,4 @@ governing permissions and limitations under the License.
 
 @import 'core-global.css';
 @import 'typography.css';
-@import 'theme-lightest.css';
 @import 'scale-large.css';

tools/styles/all-medium-lightest.css

@@ -12,5 +12,4 @@ governing permissions and limitations under the License.
 
 @import 'core-global.css';
 @import 'typography.css';
-@import 'theme-lightest.css';
 @import 'scale-medium.css';

tools/styles/exports.json

@@ -1,13 +1,9 @@
 {
     ".": "./src/spectrum-base.css.js",
     "./all-large-dark.css": "./all-large-dark.css",
-    "./all-large-darkest.css": "./all-large-darkest.css",
     "./all-large-light.css": "./all-large-light.css",
-    "./all-large-lightest.css": "./all-large-lightest.css",
     "./all-medium-dark.css": "./all-medium-dark.css",
-    "./all-medium-darkest.css": "./all-medium-darkest.css",
     "./all-medium-light.css": "./all-medium-light.css",
-    "./all-medium-lightest.css": "./all-medium-lightest.css",
     "./core-global.css": "./core-global.css",
     "./express/core-global.css": "./express/core-global.css",
     "./scale-large.css": "./scale-large.css",
@@ -16,12 +12,8 @@
     "./express/scale-medium.css": "./express/scale-medium.css",
     "./theme-dark.css": "./theme-dark.css",
     "./express/theme-dark.css": "./express/theme-dark.css",
-    "./theme-darkest.css": "./theme-darkest.css",
-    "./express/theme-darkest.css": "./express/theme-darkest.css",
     "./theme-light.css": "./theme-light.css",
     "./express/theme-light.css": "./express/theme-light.css",
-    "./theme-lightest.css": "./theme-lightest.css",
-    "./express/theme-lightest.css": "./express/theme-lightest.css",
     "./typography.css": "./typography.css",
     "./body.js": "./body.js",
     "./code.js": "./code.js",