removal: lightest 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, darkest]
                           scale: [medium, large]
                           dir: [ltr, rtl]
                   filters:

projects/documentation/src/components/layout.ts

@@ -94,9 +94,6 @@ const lazyStyleFragment = (name: Color | Scale, flavor: ThemeVariant): void => {
         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;
@@ -112,9 +109,6 @@ const lazyStyleFragment = (name: Color | Scale, flavor: ThemeVariant): void => {
         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,7 +386,6 @@ 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>

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,7 +341,6 @@ 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>

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', 'darkest'];
 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(

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', 'darkest'];
             const scales: Scale[] = ['medium', 'large'];
             const directions: ('ltr' | 'rtl')[] = ['ltr', 'rtl'];
             colors.forEach((color: Color) => {

tools/styles/README.md

@@ -33,12 +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';
 ```
@@ -57,12 +51,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 "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
@@ -89,14 +77,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

@@ -3,11 +3,9 @@
     "./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",
@@ -20,8 +18,6 @@
     "./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",

tools/styles/package.json

@@ -25,11 +25,9 @@
         "./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",
@@ -42,8 +40,6 @@
         "./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": {
             "development": "./body.dev.js",
@@ -117,5 +113,5 @@
     "sideEffects": [
         "./**/*.css"
     ],
-    "style": "all-medium-lightest.css"
+    "style": "all-medium-light.css"
 }

tools/theme/README.md

@@ -1,6 +1,6 @@
 ## Description
 
-`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different scales (`medium` and `large`) to support desktop & mobile UI.
+`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`light`, `dark`, and `darkest`) and two different scales (`medium` and `large`) to support desktop & mobile UI.
 
 ### Usage
 
@@ -18,7 +18,7 @@ import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
 ```
 
-The above import statements do two things: the first will get you started using the `<sp-theme>` wrapper element, and the second includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`) for the Spectrum Classic theme. Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empowers 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 the "Advanced usage" section below for instructions on tuning the performance of an application that leverages this package.
+The above import statements do two things: the first will get you started using the `<sp-theme>` wrapper element, and the second includes all four (4) color options (`light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`) for the Spectrum Classic theme. Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empowers 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 the "Advanced usage" section below for instructions on tuning the performance of an application that leverages this package.
 
 Below are more ways to import the different scale and color options individually, in case you didn't want to import all of them as we did above. You'll use these statements in combination with the side effectful registration import statement `import '@spectrum-web-components/theme/sp-theme.js'`.
 
@@ -40,13 +40,11 @@ Or you can import the themes and scales individually:
 import '@spectrum-web-components/theme/theme-darkest.js';
 import '@spectrum-web-components/theme/theme-dark.js';
 import '@spectrum-web-components/theme/theme-light.js';
-import '@spectrum-web-components/theme/theme-lightest.js';
 import '@spectrum-web-components/theme/scale-medium.js';
 import '@spectrum-web-components/theme/scale-large.js';
 import '@spectrum-web-components/theme/express/theme-darkest.js';
 import '@spectrum-web-components/theme/express/theme-dark.js';
 import '@spectrum-web-components/theme/express/theme-light.js';
-import '@spectrum-web-components/theme/express/theme-lightest.js';
 import '@spectrum-web-components/theme/express/scale-medium.js';
 import '@spectrum-web-components/theme/express/scale-large.js';
 ```

tools/theme/exports.json

@@ -6,7 +6,6 @@
     "./sp-theme.js": "./sp-theme.js",
     "./scale-medium.js": "./scale-medium.js",
     "./scale-large.js": "./scale-large.js",
-    "./theme-lightest.js": "./theme-lightest.js",
     "./theme-light.js": "./theme-light.js",
     "./theme-dark.js": "./theme-dark.js",
     "./theme-darkest.js": "./theme-darkest.js"

tools/theme/package.json

@@ -38,7 +38,6 @@
         "./src/theme-dark.css.js": "./src/theme-dark.css.js",
         "./src/theme-darkest.css.js": "./src/theme-darkest.css.js",
         "./src/theme-light.css.js": "./src/theme-light.css.js",
-        "./src/theme-lightest.css.js": "./src/theme-lightest.css.js",
         "./src/theme.css.js": "./src/theme.css.js",
         "./src/themes.js": {
             "development": "./src/themes.dev.js",
@@ -65,10 +64,6 @@
             "development": "./express/theme-light.dev.js",
             "default": "./express/theme-light.js"
         },
-        "./express/theme-lightest.js": {
-            "development": "./express/theme-lightest.dev.js",
-            "default": "./express/theme-lightest.js"
-        },
         "./src/express/core.js": {
             "development": "./src/express/core.dev.js",
             "default": "./src/express/core.js"
@@ -98,10 +93,6 @@
             "development": "./scale-large.dev.js",
             "default": "./scale-large.js"
         },
-        "./theme-lightest.js": {
-            "development": "./theme-lightest.dev.js",
-            "default": "./theme-lightest.js"
-        },
         "./theme-light.js": {
             "development": "./theme-light.dev.js",
             "default": "./theme-light.js"

tools/theme/src/Theme.ts

@@ -47,11 +47,9 @@ type FragmentMap = Map<string, { name: string; styles: CSSResultGroup }>;
 export type ThemeFragmentMap = Map<FragmentType, FragmentMap>;
 export type Color =
     | 'light'
-    | 'lightest'
     | 'dark'
     | 'darkest'
     | 'light-express'
-    | 'lightest-express'
     | 'dark-express'
     | 'darkest-express';
 export type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';
@@ -60,11 +58,9 @@ const ThemeVariantValues = ['spectrum', 'express'];
 const ScaleValues = ['medium', 'large', 'medium-express', 'large-express'];
 const ColorValues = [
     'light',
-    'lightest',
     'dark',
     'darkest',
     'light-express',
-    'lightest-express',
     'dark-express',
     'darkest-express',
 ];
@@ -198,7 +194,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
      * The Spectrum color stops to apply to content scoped by this `sp-theme` element.
      *
      * A value is requried.
-     * @type {"lightest" | "light" | "dark" | "darkest" | ""}
+     * @type {"light" | "dark" | "darkest" | ""}
      * @attr
      */
     get color(): Color | '' {

tools/theme/src/express/themes.ts

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 import '../../express/theme-light.js';
-import '../../express/theme-lightest.js';
 import '../../express/theme-dark.js';
 import '../../express/theme-darkest.js';
 import '../../express/scale-medium.js';

tools/theme/src/themes.ts

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 import '../theme-light.js';
-import '../theme-lightest.js';
 import '../theme-dark.js';
 import '../theme-darkest.js';
 import '../scale-medium.js';