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

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 867c424b27081b9e23b1ab8e7f6b1423a6bb754f
+        default: 4c5799f8273b709eada1adbdb6f4b890678c449b
     wireit_cache_name:
         type: string
         default: wireit
@@ -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-spectrum-lightest-medium-ltr-
             - run:
                   name: Count baseline images
                   command: find test/visual/screenshots-baseline -type f | wc -l > count_start.txt
@@ -321,11 +321,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"

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';

scripts/spectrum-tokens.js → scripts/generate-tokens-wrapper.js

@@ -9,25 +9,26 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-
 import fg from 'fast-glob';
 import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const tokensRoot = path.join(
-    __dirname,
-    '..',
-    'node_modules',
-    '@spectrum-css',
-    'tokens',
-    'dist',
-    'css',
-    '**',
-    '*.css'
-);
+const tokensRoot = (tokensDir) => {
+    return path.join(
+        __dirname,
+        '..',
+        'node_modules',
+        '@spectrum-css',
+        tokensDir,
+        'dist',
+        'css',
+        '**',
+        '*.css'
+    );
+};
 
 /** @todo Could generate this from CSS packages that have @spectrum-css/tokens as a dependency */
 const tokenPackages = [
@@ -123,55 +124,66 @@ const removeImporantComments = (css) => {
     return css.replaceAll(importantCommentRegExp, '');
 };
 
-const processTokens = (srcPath) => {
+const processTokens = (srcPath, tokensDir) => {
     let css = fs.readFileSync(srcPath, 'utf8');
     const fileName = srcPath.split(path.sep + 'css' + path.sep).at(-1);
     css = removeImporantComments(targetHost(css));
 
+    // s2 doesn't need express tokens
+    if (tokensDir === 'tokens-v2' && fileName.startsWith('express')) {
+        return;
+    }
+
     fs.writeFileSync(
-        path.join(__dirname, '..', 'tools', 'styles', 'tokens', fileName),
+        path.join(__dirname, '..', 'tools', 'styles', tokensDir, fileName),
         css
     );
 };
 
-const processPackages = async (srcPath, index) => {
+const processPackages = async (srcPath, tokensDir, index) => {
     const packageName = tokenPackages[index];
-    const expressPath = path.join(srcPath, 'express.css');
     const spectrumPath = path.join(srcPath, 'spectrum.css');
 
-    // check if expressPath exists
-    if (fs.existsSync(expressPath)) {
-        let express = fs.readFileSync(expressPath, 'utf8');
-        express = removeImporantComments(targetHost(express));
+    // check if spectrumPath exists
+    if (fs.existsSync(spectrumPath)) {
+        let spectrum = fs.readFileSync(spectrumPath, 'utf8');
+        spectrum = removeImporantComments(targetHost(spectrum));
         fs.appendFileSync(
             path.join(
                 __dirname,
                 '..',
                 'tools',
                 'styles',
-                'tokens',
-                'express',
+                tokensDir,
+                'spectrum',
                 'global-vars.css'
             ),
-            express
+            spectrum
         );
     }
 
-    // check if spectrumPath exists
-    if (fs.existsSync(spectrumPath)) {
-        let spectrum = fs.readFileSync(spectrumPath, 'utf8');
-        spectrum = removeImporantComments(targetHost(spectrum));
+    // spectrum-2 doesn't need express package tokens
+    if (tokensDir === 'tokens-v2') {
+        return;
+    }
+
+    const expressPath = path.join(srcPath, 'express.css');
+
+    // check if expressPath exists
+    if (fs.existsSync(expressPath)) {
+        let express = fs.readFileSync(expressPath, 'utf8');
+        express = removeImporantComments(targetHost(express));
         fs.appendFileSync(
             path.join(
                 __dirname,
                 '..',
                 'tools',
                 'styles',
-                'tokens',
-                'spectrum',
+                tokensDir,
+                'express',
                 'global-vars.css'
             ),
-            spectrum
+            express
         );
     }
 
@@ -199,24 +211,33 @@ const processPackages = async (srcPath, index) => {
     }
 };
 
-const spectrumTokens = async () => {
+/**
+ * Core entry function
+ */
+export async function generateTokensWrapper(spectrumVersion) {
+    const tokensDir = spectrumVersion === 'spectrum' ? 'tokens' : 'tokens-v2';
     fs.mkdirSync(
-        path.join(__dirname, '..', 'tools', 'styles', 'tokens', 'spectrum'),
+        path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'spectrum'),
         {
             recursive: true,
         }
     );
-    fs.mkdirSync(
-        path.join(__dirname, '..', 'tools', 'styles', 'tokens', 'express'),
-        {
-            recursive: true,
-        }
-    );
-    for (const tokensPath of await fg([`${tokensRoot}`])) {
-        processTokens(tokensPath);
+
+    if (spectrumVersion === 'spectrum') {
+        fs.mkdirSync(
+            path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'express'),
+            {
+                recursive: true,
+            }
+        );
+    }
+
+    for (const tokensPath of await fg([`${tokensRoot(tokensDir)}`])) {
+        processTokens(tokensPath, tokensDir);
     }
-    const processes = packagePaths.map(processPackages);
-    await Promise.all(processes);
-};
 
-spectrumTokens();
+    const processes = packagePaths.map((path, index) => {
+        return processPackages(path, tokensDir, index);
+    });
+    await Promise.all(processes);
+}

scripts/generate-tokens.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+/*
+Copyright 2022 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 { generateTokensWrapper } from './generate-tokens-wrapper.js';
+
+(async () => {
+    await generateTokensWrapper('spectrum');
+    await generateTokensWrapper('spectrum-two');
+})();