fix(styles,theme): add S2 tokens and theme

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 00f8d230a15ce013f289abbe80bc64cd9e90963b
+        default: c5a1a42567a3c179a5e89f57c99e12c1058d682a
     wireit_cache_name:
         type: string
         default: wireit
@@ -229,7 +229,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-spectrum-lightest-medium-ltr-
             - run:
                   name: Count baseline images
                   command: find test/visual/screenshots-baseline -type f | wc -l > count_start.txt
@@ -333,11 +333,24 @@ workflows:
                   name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
                   matrix:
                       parameters:
-                          theme: [classic, express]
+                          theme: [spectrum, express]
                           color: [lightest, light, dark, darkest]
                           scale: [medium, large]
                           dir: [ltr, rtl]
                   filters:
                       branches:
                           # Forked pull requests have CIRCLE_BRANCH set to pull/XXX
                           ignore: /pull\/[0-9]+/
+            - visual:
+                  name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
+                  matrix:
+                      parameters:
+                          # Spectrum-two doesn't support the lightest and darkest themes
+                          theme: [spectrum-two]
+                          color: [light, dark]
+                          scale: [medium, large]
+                          dir: [ltr, rtl]
+                  filters:
+                      branches:
+                          # Forked pull requests have CIRCLE_BRANCH set to pull/XXX
+                          ignore: /pull\/[0-9]+/

package.json

@@ -369,13 +369,13 @@
             ]
         },
         "process-spectrum": {
-            "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/spectrum-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"",
+            "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"",
             "files": [
                 "tasks/process-spectrum.js",
                 "packages/**/spectrum-config.js",
                 "tools/**/spectrum-config.js",
                 "node_modules/@spectrum-css/**/index-vars.css",
-                "scripts/spectrum-tokens.js",
+                "scripts/generate-tokens.js",
                 "node_modules/@spectrum-css/**/*.css",
                 "scripts/spectrum-vars.js",
                 "tools/styles/package.json"

packages/action-bar/src/ActionBar.ts

@@ -23,7 +23,7 @@ import '@spectrum-web-components/button/sp-close-button.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import actionBarStyles from './action-bar.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
+import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 export const actionBarVariants = ['sticky', 'fixed'];
 
 /**

packages/overlay/src/slottable-request-directive.ts

@@ -15,7 +15,10 @@ import {
     render,
     TemplateResult,
 } from '@spectrum-web-components/base';
-import { AsyncDirective, directive } from '@spectrum-web-components/base/src/async-directive.js';
+import {
+    AsyncDirective,
+    directive,
+} from '@spectrum-web-components/base/src/async-directive.js';
 import {
     removeSlottableRequest,
     SlottableRequestEvent,

projects/documentation/content/guides/generating-components.md

@@ -43,7 +43,7 @@ Outside of your new package, you will need to manually add information about you
 
 Open `tsconfig-all.json`, find "references", and add an entry for your package (`{ "path": "packages/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-all.json` config is used to build types for the project in parallel with the JS build that is handled outside of `tsc`. This will ensure that the types for your new package are available throughout the library, include at demonstration and test time.
 
-Open `tsconfig-react-wrapper.json`, find "references", and add an entry for your package (`{ "path": "react/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar").  The `tsconfig-react-wrapper.json` config is used to build types for the `@swc-react` project, so that consumers can benefit of type definitions for SWC components even when using the React wrapper.
+Open `tsconfig-react-wrapper.json`, find "references", and add an entry for your package (`{ "path": "react/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-react-wrapper.json` config is used to build types for the `@swc-react` project, so that consumers can benefit of type definitions for SWC components even when using the React wrapper.
 
 Include a listing for your package in `bundle/elements.ts` and `bundle/src/index.js`. Then, confirm that your new package is already listed in `tools/bundle/package.json`. The `bundle` package makes it possible to build demo projects with _all_ of the components from the library registered in a single place, and is also leveraged for ease of component consumption in the documentation site build.
 

projects/documentation/src/components/layout.ts

@@ -93,42 +93,50 @@ const lazyStyleFragment = (
 ): void => {
     var fragmentName = `${name}-${system}`;
     switch (fragmentName) {
-        case 'darkest-spectrum':
-            import('@spectrum-web-components/theme/theme-darkest.js');
-            break;
-        case 'dark-spectrum':
+        case 'dark-spectrum' || 'darkest-spectrum':
             import('@spectrum-web-components/theme/theme-dark.js');
             break;
-        case 'light-spectrum':
+        case 'light-spectrum' || 'lightest-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':
+        case 'dark-express' || 'darkest-express':
             import('@spectrum-web-components/theme/express/theme-dark.js');
             break;
-        case 'light-express':
+        case 'light-express' || 'lightest-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;
         case 'large-express':
             import('@spectrum-web-components/theme/express/scale-large.js');
             break;
+        case 'light-spectrum-two':
+            import(
+                '@spectrum-web-components/theme/spectrum-two/theme-light-core-tokens.js'
+            );
+            break;
+        case 'dark-spectrum-two':
+            import(
+                '@spectrum-web-components/theme/spectrum-two/theme-dark-core-tokens.js'
+            );
+            break;
+        case 'medium-spectrum-two':
+            import(
+                '@spectrum-web-components/theme/spectrum-two/scale-medium-core-tokens.js'
+            );
+            break;
+        case 'large-spectrum-two':
+            import(
+                '@spectrum-web-components/theme/spectrum-two/scale-large-core-tokens.js'
+            );
+            break;
     }
 };
 
@@ -346,6 +354,9 @@ export class LayoutElement extends LitElement {
                     >
                         <sp-menu-item value="spectrum">Spectrum</sp-menu-item>
                         <sp-menu-item value="express">Express</sp-menu-item>
+                        <sp-menu-item value="spectrum-two">
+                            Spectrum 2
+                        </sp-menu-item>
                     </sp-picker>
                 </div>
                 <div class="theme-control">
@@ -356,10 +367,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">
@@ -483,17 +492,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;
             });
             (
                 document.querySelector('html') as HTMLHtmlElement
-            ).style.colorScheme =
-                this.color === 'dark' || this.color === 'darkest'
-                    ? 'dark'
-                    : 'light';
+            ).style.colorScheme = this.color;
         }
         if (changes.has('scale')) {
             if (window.localStorage) {

projects/story-decorator/src/StoryDecorator.ts

@@ -25,6 +25,7 @@ import {
 import { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
+import '@spectrum-web-components/theme/src/spectrum-two/themes-core-tokens.js';
 import '@spectrum-web-components/theme/src/express/themes.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/picker/sp-picker.js';
@@ -317,8 +318,9 @@ export class StoryDecorator extends SpectrumElement {
                 .value=${this.system}
                 @change=${this.updateTheme}
             >
-                <sp-menu-item value="spectrum">Classic</sp-menu-item>
+                <sp-menu-item value="spectrum">Spectrum</sp-menu-item>
                 <sp-menu-item value="express">Express</sp-menu-item>
+                <sp-menu-item value="spectrum-two">Spectrum 2</sp-menu-item>
             </sp-picker>
         `;
     }
@@ -335,10 +337,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>
         `;
     }

projects/vrt-quick-link/404.html

@@ -233,7 +233,7 @@
         return temp.toLowerCase();
     };
     const { pathname, search } = window.location;
-    const flavor = search ? search.slice(1) : 'classic';
+    const flavor = search ? search.slice(1) : 'spectrum';
     const destColor = 'light';
     const destScale = 'medium';
     const destDir = 'ltr';