feat: s2 styles and icons

Author: castastrophe

.circleci/config.yml

@@ -79,8 +79,6 @@ commands:
                   at: /
     run-regressions:
         parameters:
-            regression_system:
-                type: string
             regression_color:
                 type: string
             regression_scale:
@@ -91,9 +89,9 @@ commands:
             - restore_cache:
                   name: Restore Golden Images Cache
                   keys:
-                      - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
                       - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
-                      - v2-golden-images-main-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
+                      - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
+                      - v2-golden-images-main-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
                       - v2-golden-images-main-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
             - run:
                   name: Count baseline images
@@ -102,7 +100,7 @@ commands:
                   when: always
                   name: VRT Run
                   command: |
-                      yarn test:ci --config web-test-runner.config.vrt.js --group vrt-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>
+                      yarn test:ci --config web-test-runner.config.vrt.js --group vrt-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>
             # store results and artifacts before rearranging things for the new cache.
             - store_test_results:
                   path: /root/project/results/
@@ -124,7 +122,7 @@ commands:
                   name: Create review site
                   command: |
                       branch=$(git symbolic-ref --short HEAD)
-                      node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="<< parameters.regression_system >> << parameters.regression_color >> << parameters.regression_scale >> << parameters.regression_dir >>"
+                      node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="<< parameters.regression_color >> << parameters.regression_scale >> << parameters.regression_dir >>"
                       yarn rollup -c test/visual/rollup.config.js
             - install-azcopy
             - run:
@@ -198,12 +196,12 @@ commands:
                   name: Build Golden Images Revision Cache
                   paths:
                       - test/visual/screenshots-baseline
-                  key: v2-golden-images-{{ .Revision }}-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
+                  key: v2-golden-images-{{ .Revision }}-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
             - save_cache:
                   name: Build Golden Images Branch Cache
                   paths:
                       - test/visual/screenshots-baseline
-                  key: v2-golden-images-{{ .Branch }}-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
+                  key: v2-golden-images-{{ .Branch }}-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
 
 jobs:
     test-chromium:
@@ -432,8 +430,6 @@ jobs:
     visual:
         executor: node
         parameters:
-            system:
-                type: string
             color:
                 type: string
             scale:
@@ -443,7 +439,6 @@ jobs:
         steps:
             - downstream
             - run-regressions:
-                  regression_system: << parameters.system >>
                   regression_color: << parameters.color >>
                   regression_scale: << parameters.scale >>
                   regression_dir: << parameters.dir >>
@@ -466,10 +461,9 @@ workflows:
                           # Beta docs are only published from main
                           only: main
             - visual:
-                  name: << matrix.system >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
+                  name: << matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
                   matrix:
                       parameters:
-                          system: [spectrum, express, spectrum-two]
                           color: [light]
                           scale: [medium]
                           dir: [ltr]
@@ -478,10 +472,9 @@ workflows:
                           # Forked pull requests have CIRCLE_BRANCH set to pull/XXX
                           ignore: /pull\/[0-9]+/
             - visual:
-                  name: << matrix.system >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
+                  name: << matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
                   matrix:
                       parameters:
-                          system: [spectrum, express, spectrum-two]
                           color: [dark]
                           scale: [large]
                           dir: [rtl]

.github/scripts/build-preview-urls-comment.js

@@ -23,56 +23,26 @@ export const buildPreviewURLComment = (prNumber) => {
 
     const previewCombinations = [
         {
-            system: 'Spectrum',
             color: 'Light',
             scale: 'Medium',
             direction: 'LTR',
-            urlPath: 'spectrum-light-medium-ltr',
+            urlPath: 'light-medium-ltr',
         },
         {
-            system: 'Spectrum',
             color: 'Dark',
             scale: 'Large',
             direction: 'RTL',
-            urlPath: 'spectrum-dark-large-rtl',
-        },
-        {
-            system: 'Express',
-            color: 'Light',
-            scale: 'Medium',
-            direction: 'LTR',
-            urlPath: 'express-light-medium-ltr',
-        },
-        {
-            system: 'Express',
-            color: 'Dark',
-            scale: 'Large',
-            direction: 'RTL',
-            urlPath: 'express-dark-large-rtl',
-        },
-        {
-            system: 'Spectrum-two',
-            color: 'Light',
-            scale: 'Medium',
-            direction: 'LTR',
-            urlPath: 'spectrum-two-light-medium-ltr',
-        },
-        {
-            system: 'Spectrum-two',
-            color: 'Dark',
-            scale: 'Large',
-            direction: 'RTL',
-            urlPath: 'spectrum-two-dark-large-rtl',
+            urlPath: 'dark-large-rtl',
         },
     ];
 
     // Generate preview links for each combination
     previewCombinations.forEach(
-        ({ system, color, scale, direction, urlPath }) => {
+        ({ color, scale, direction, urlPath }) => {
             const vrtUrl = `${baseUrl}/${prHash}/${urlPath}/review/`;
 
             previewLinks.push(`
-- [${system} | ${color} | ${scale} | ${direction}](${vrtUrl})`);
+- [${color} | ${scale} | ${direction}](${vrtUrl})`);
         }
     );
 
@@ -98,7 +68,7 @@ ${previewLinks.join('')}
 
 *Deployed to Azure Blob Storage: \`${prHash}\`*
 
-If the changes are expected, update the <code>current_golden_images_cache</code> hash in the circleci config to accept the new images. Instructions are included in that file. 
+If the changes are expected, update the <code>current_golden_images_cache</code> hash in the circleci config to accept the new images. Instructions are included in that file.
 If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.
 `;
     return comment;

.gitignore

@@ -1,4 +1,4 @@
-# logging / private config
+# Logging / private config
 yarn-error.log
 build-storybook.log
 .DS_STORE
@@ -12,72 +12,74 @@ tach-results.*
 .gitconfig
 .env
 
-# documentation
+# Include the cursor guides in the repo
+!.cursor
+
+# Ignore the local-specific cursor config
+.cursor/mcp.json
+
+# Documentation
 documentation/components/searchIndex.json
 documentation/api-docs
 documentation/dist
 searchIndex.json
 
-# dependency folders
+# Dependency folders
 coverage
 lib
 
-# build artifacts
+# Build artifacts
 custom-elements.json
+packages/*/custom-elements.json
+tools/*/custom-elements.json
+react
 
+# Not included in the repo
 !packages/icons-workflow/bin/build.js
 !packages/icons-workflow/src/DefaultIcon.ts
 
+# Generated assets
 packages/*/src/**/*.css.js
-packages/*/custom-elements.json
 packages/**/*.js
 packages/**/*.js.map
 packages/**/*.d.ts
 packages/**/*.test-vrt.ts
-!packages/**/*/spectrum-config.js
-!packages/**/*/spectrum-config.v1.js
-!packages/*/test/global.d.ts
-!packages/*/global.d.ts
-!packages/*/local.d.ts
-
-react
-
+packages/**/*.css.ts
+projects/**/*.css.ts
 projects/**/*.js
 projects/**/*.js.map
 projects/**/*.d.ts
-!projects/*/global.d.ts
-
+tools/**/*.css.ts
 tools/*/src/**/*.css.js
-tools/*/custom-elements.json
 tools/**/*.js
 tools/**/*.js.map
 tools/**/*.d.ts
 tools/**/*.test-vrt.ts
-!tools/**/*/spectrum-config.js
+
+# Include manual typescript declarations
+!packages/*/test/global.d.ts
+!packages/*/global.d.ts
+!packages/*/local.d.ts
+!projects/*/global.d.ts
 !tools/*/test/global.d.ts
 !tools/*/global.d.ts
 !tools/*/local.d.ts
-!tools/base/src/version.js
 !tools/base/src/version.d.ts
+!test/global.d.ts
+
+# Keep the version file
+!tools/base/src/version.js
 
-# cache directories
+# Cache directories
 .wireit
 .eslintcache
 .stylelintcache
 
+# Generated reporting outputes
 stats.html
-
-# typescript assets
-!test/global.d.ts
 *.tsbuildinfo
 
-# built css assets
-packages/**/*.css.ts
-projects/**/*.css.ts
-tools/**/*.css.ts
-styles/**/*.css.ts
-
-# test assets
+# Test assets
 TESTS.xml
 test-results.xml
 test/benchmark/cli.cjs
@@ -89,22 +91,24 @@ test/visual/src/data.json
 test/**/*.js
 test/**/*.js.map
 test/**/*.d.ts
-!test/visual/**/*.js
 test/visual/test.js
 test-results
 
+# Keep the visual files in history
+!test/visual/**/*.js
+
 # npm assets
 node_modules
 npm-debug.log
 package-lock.json
 
-# Chromatic
+# Chromatic logging outputs
 chromatic.log
 chromatic-build-*.xml
 chromatic-diagnostics*.json
 chromatic.config.json
 
-# yarn
+# Build tooling assets
 .pnp.*
 .yarn/*
 !.yarn/patches

.stylelintignore

@@ -1,7 +1,11 @@
+# Node modules
 node_modules
-task
+
+# Build artifacts
+dist
+
+# Ignore all files
 *.*
+
+# Except CSS files
 !*.css
-projects/example-project/dist
-tools/styles
-spectrum-*.css