chore: script clean-up for packages and tokens[swc-808]

Author: castastrophe

.gitignore

@@ -31,7 +31,6 @@ custom-elements.json
 packages/*/src/**/*.css.js
 packages/*/custom-elements.json
 packages/**/*.js
-packages/**/spectrum-vars.json
 packages/**/*.js.map
 packages/**/*.d.ts
 packages/**/*.test-vrt.ts
@@ -50,7 +49,6 @@ projects/**/*.d.ts
 
 tools/*/src/**/*.css.js
 tools/*/custom-elements.json
-tools/**/spectrum-vars.json
 tools/**/*.js
 tools/**/*.js.map
 tools/**/*.d.ts

.vscode/settings.json

@@ -1,7 +1,6 @@
 {
     "files.exclude": {
         "**/*.css.ts": { "when": "$(basename)" },
-        "packages/*/src/spectrum-vars.json": true,
         "packages/**/*.js.map": true,
         "packages/**/*.js": { "when": "$(basename).ts" },
         "packages/**/*.dev.js": { "when": "$(basename).js" },

README.md

@@ -34,7 +34,7 @@ Typical development will involve running `yarn storybook`, `yarn test`, and `yar
 Creating a new component from the command line can be done by running the following:
 
 ```bash
-$ yarn new-package
+yarn new-package
 ```
 
 This will scaffold your component's required architecture by prompting you for 2 data points - the desired name for your package and the name of the Spectrum CSS asset from which you will be building.
@@ -92,9 +92,7 @@ The `:nonbreaking` variant lets us release patch updates quickly in cases where
 There are several commands that can be useful in specific scenarios:
 
 -   `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process.
--   `yarn spectrum-vars` to ensure that theme files are up-to-date.
 -   `yarn process-icons` to make sure that the most recent icons are included.
--   `yarn process-spectrum` to process the spectrum CSS style sources into the individual packages.
 -   `yarn build` to make sure the available JS has been built from the current TS source.
 
 ## Linting

package.json

@@ -26,7 +26,6 @@
         "changeset-publish": "yarn prepublishOnly && yarn changeset version && yarn install && yarn lint:versions --fix && yarn update-version && yarn changeset publish --no-git-tag && yarn push-to-remote && yarn create-git-tag && yarn postpublish",
         "update-version": "node ./tasks/update-version.js",
         "chromatic": "chromatic --build-script-name storybook:build # note that --project-token must be set in your env variables",
-        "create-git-tag": "node --no-warnings tasks/create-git-tag.js",
         "custom-element-json": "node tasks/custom-element-json.js",
         "docs:analyze": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/stories/**\" --exclude \"**/icons/**\" --exclude \"**/elements/**\" --outdir projects/documentation --litelement",
         "docs:build": "yarn workspace documentation build",
@@ -50,7 +49,6 @@
         "lint:versions": "node ./scripts/lint-versions.js",
         "new-package": "cd projects/templates && plop",
         "postcustom-element-json": "node ./tasks/run-check-cem.js",
-        "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"",
         "postinstall": "husky || true && patch-package",
         "postpublish": "yarn prepublish:react && yarn publish:react && yarn postpublish:react",
         "postpublish:react": "git reset --hard HEAD^ && git prune && rimraf react",
@@ -65,7 +63,6 @@
         "pretest:bench": "yarn build:tests && test -f test/benchmark/cli.js ||:",
         "pretest:visual": "yarn build && yarn build",
         "process-icons": "wireit",
-        "process-spectrum": "wireit",
         "publish:react": "yarn changeset publish --no-git-tag --tag snapshot --no-push",
         "push-to-remote": "git add . && git commit -m \"chore: release new versions #publish\" && git push",
         "start": "yarn storybook",
@@ -89,9 +86,6 @@
         "test:watch": "yarn test:watch:focus unit",
         "test:watch:flags:focus": "yarn build && run-p build:watch \"test:start --watch --group {1} --config web-test-runner.config.ci-chromium-flags.js\" --",
         "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --",
-        "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup",
-        "update:spectrum-css:cleanup": "yarn lint:packagejson && yarn --ignore-scripts && yarn process-spectrum",
-        "update:spectrum-css:nonbreaking": "node ./scripts/update-spectrum-css.js || yarn update:spectrum-css:cleanup",
         "verify-build-artifacts": "node ./scripts/verify-build-artifacts.js",
         "vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js",
         "vrt:quick-link": "yarn netlify deploy --alias=vrt --dir=projects/vrt-quick-link"
@@ -212,14 +206,10 @@
         },
         "build:css": {
             "command": "node ./tasks/build-css.js",
-            "dependencies": [
-                "process-spectrum"
-            ],
             "files": [
                 "packages/**/*.css",
                 "tools/**/*.css",
-                "tasks/build-css.js",
-                "tasks/css-tools.js"
+                "tasks/build-css.js"
             ],
             "output": [
                 "packages/**/*.css.ts",
@@ -385,33 +375,6 @@
                 "icons:workflow"
             ]
         },
-        "process-spectrum": {
-            "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn format:css",
-            "files": [
-                "tasks/process-spectrum.js",
-                "packages/**/spectrum-config.js",
-                "tools/**/spectrum-config.js",
-                "node_modules/@spectrum-css/**/index-vars.css",
-                "scripts/generate-tokens.js",
-                "scripts/generate-tokens-wrapper.js",
-                "node_modules/@spectrum-css/**/*.css",
-                "scripts/spectrum-vars.js",
-                "tools/styles/package.json",
-                ".prettierrc.yaml",
-                ".stylelintrc.json"
-            ],
-            "output": [
-                "packages/*/src/spectrum-*.css",
-                "tools/*/src/spectrum-*.css",
-                "tools/styles/*.css",
-                "tools/styles/express/*.css",
-                "!tools/styles/scale-*.css",
-                "!tools/styles/theme-*.css",
-                "!tools/styles/express/scale-*.css",
-                "!tools/styles/express/theme-*.css"
-            ],
-            "clean": false
-        },
         "storybook": {
             "command": "storybook dev -p 8080 -c storybook",
             "service": true,

packages/action-group/src/action-group.css

@@ -16,29 +16,16 @@ governing permissions and limitations under the License.
 :host([size='xs']) {
     --spectrum-actiongroup-horizontal-spacing-regular: var(
         --spectrum-spacing-75
-    ); /* .spectrum-ActionGroup--sizeS */
+    );
 
     --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
 }
 
-/**
- * The following styles corrects issues found in the Spectrum CSS output
- * that are tracked via: https://github.com/adobe/spectrum-css/issues/795
- */
-
 :host([dir][compact][vertical]) ::slotted(:nth-child(n)) {
     margin-right: 0;
     margin-left: 0;
 }
 
-/**
- * End Spectrum CSS #795 fixes.
- */
-
-/**
- * The following styles correct realities outlined in https://github.com/adobe/spectrum-web-components/issues/1434
- */
-
 :host([justified]) ::slotted(:not([role])),
 :host([vertical]) ::slotted(:not([role])) {
     display: flex;
@@ -47,13 +34,11 @@ governing permissions and limitations under the License.
 }
 
 :host([compact]:not([quiet])) ::slotted(:not([role])) {
-    /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item */
     --overriden-border-radius: 0;
     --mod-actionbutton-border-radius: var(--overriden-border-radius);
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --overriden-border-radius: var(
             --mod-actiongroup-border-radius,
             var(--spectrum-actiongroup-border-radius)
@@ -66,7 +51,6 @@ governing permissions and limitations under the License.
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --overriden-border-radius: 0 0
         var(
             --mod-actiongroup-border-radius,
@@ -80,7 +64,6 @@ governing permissions and limitations under the License.
 
 :host([dir='ltr'][compact]:not([quiet], [vertical]))
     ::slotted(:not([role]):first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --overriden-border-radius: var(
             --mod-actiongroup-border-radius,
             var(--spectrum-actiongroup-border-radius)
@@ -94,7 +77,6 @@ governing permissions and limitations under the License.
 
 :host([dir='rtl'][compact]:not([quiet], [vertical]))
     ::slotted(:not([role]):first-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --overriden-border-radius: 0
         var(
             --mod-actiongroup-border-radius,
@@ -109,7 +91,6 @@ governing permissions and limitations under the License.
 
 :host([dir='ltr'][compact]:not([quiet], [vertical]))
     ::slotted(:not([role]):last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --overriden-border-radius: 0
         var(
             --mod-actiongroup-border-radius,
@@ -124,7 +105,6 @@ governing permissions and limitations under the License.
 
 :host([dir='rtl'][compact]:not([quiet], [vertical]))
     ::slotted(:not([role]):last-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --overriden-border-radius: var(
             --mod-actiongroup-border-radius,
             var(--spectrum-actiongroup-border-radius)
@@ -141,7 +121,6 @@ governing permissions and limitations under the License.
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --mod-actionbutton-focus-ring-border-radius: var(
             --spectrum-alias-component-border-radius
         )
@@ -153,7 +132,6 @@ governing permissions and limitations under the License.
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --mod-actionbutton-focus-ring-border-radius: 0 0
         var(
             --mod-actiongroup-border-radius,
@@ -166,7 +144,6 @@ governing permissions and limitations under the License.
 }
 
 :host([dir='ltr'][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --mod-actionbutton-focus-ring-border-radius: var(
             --spectrum-alias-component-border-radius
         )
@@ -178,7 +155,6 @@ governing permissions and limitations under the License.
 }
 
 :host([dir='rtl'][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --mod-actionbutton-focus-ring-border-radius: 0
         var(
             --mod-actiongroup-border-radius,
@@ -192,7 +168,6 @@ governing permissions and limitations under the License.
 }
 
 :host([dir='ltr'][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --mod-actionbutton-focus-ring-border-radius: 0
         var(
             --mod-actiongroup-border-radius,
@@ -206,7 +181,6 @@ governing permissions and limitations under the License.
 }
 
 :host([dir='rtl'][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --mod-actionbutton-focus-ring-border-radius: var(
             --spectrum-alias-component-border-radius
         )

packages/button/src/button-base.css

@@ -21,10 +21,6 @@ governing permissions and limitations under the License.
 }
 
 :host([dir]) {
-    /* spectrum-css uses "-webkit-appearance: button" to workaround an
-     * iOS and Safari issue. However, it results in incorrect styling
-     * when applied in :host
-     */
     -webkit-appearance: none; /* stylelint-disable-line */
 }
 

packages/card/src/card.css

@@ -35,7 +35,7 @@ governing permissions and limitations under the License.
     margin-right: auto;
 }
 
-/* The description slot has a psuedo-element that also needs to receive the font styling. 
+/* The description slot has a psuedo-element that also needs to receive the font styling.
 We need to add the declaration to the slot as well */
 slot[name='description'] {
     font-size: var(
@@ -54,8 +54,7 @@ slot[name='description'] {
     display: block;
 
     /* Since we're using <img> tags instead of background-image for the cover photo,
-    we need an additional object-fit property to preserve the aspect ratio of the image
-    In spectrum-css, background-size is used */
+    we need an additional object-fit property to preserve the aspect ratio of the image */
     object-fit: cover;
 }
 
@@ -81,15 +80,14 @@ sp-popover {
 }
 
 /**
- * Allow that the heading element will take specified use of the available width whether 
+ * Allow that the heading element will take specified use of the available width whether
  * "actions" are supplied to the element or not.
  **/
 .title {
     width: var(--spectrum-card-title-width);
 }
 
 .subtitle {
-    /* Override until https://github.com/adobe/spectrum-css/issues/1054 is fixed */
     text-transform: none;
 }
 

packages/icons-workflow/package.json

@@ -60,8 +60,6 @@
         "case": "^1.6.1",
         "cheerio": "^1.0.0-rc.2",
         "fast-glob": "^3.2.12",
-        "fs": "^0.0.1-security",
-        "path": "^0.12.7",
         "prettier": "^3.0.0"
     },
     "types": "./src/index.d.ts",

packages/radio/src/radio.css

@@ -21,13 +21,6 @@ governing permissions and limitations under the License.
     pointer-events: none;
 }
 
-/**
- * Work around for https://github.com/adobe/spectrum-css/issues/2251
- **/
 :host([dir='rtl']) #button:after {
     transform: translateX(50%) translateY(-50%);
 }
-
-/**
- * End workaround
- **/

packages/slider/src/slider.css

@@ -13,12 +13,10 @@ governing permissions and limitations under the License.
 @import url('./spectrum-slider.css');
 @import url('./slider-overrides.css');
 
-/*
+/**
  * Removes blue outline from :host when it is being focused.
- * This situation is not addressed in spectrum-css because the slider element itself
- * is not intended to receive focus.
- * This is not the case with web-components. The :host will receive focus when
- * interacting with the slider via the mouse.
+ * The :host will receive focus when interacting with the
+ * slider via the mouse.
 */
 :host(:focus) {
     outline: 0;
@@ -95,11 +93,6 @@ governing permissions and limitations under the License.
     transform: translate(50%, -50%);
 }
 
-/*
- * The following three declarationsa required while https://github.com/adobe/spectrum-css/issues/521
- * waits to be addressed at the Spectrum CSS level.
- */
-
 .track:before {
     background-size: var(--spectrum-slider-track-background-size) !important;
 }

packages/swatch/src/swatch.css

@@ -13,10 +13,6 @@ governing permissions and limitations under the License.
 @import url('./spectrum-swatch.css');
 @import url('./swatch-overrides.css');
 
-/**
- * Begin work around for https://github.com/adobe/spectrum-css/issues/1460
- */
-
 .fill:before {
     background: var(--spectrum-picked-color, transparent);
 }
@@ -28,7 +24,3 @@ governing permissions and limitations under the License.
 :host .is-image .fill:before {
     background: #0000;
 }
-
-/**
- * End workaround for https://github.com/adobe/spectrum-css/issues/1460
- */

packages/switch/src/switch-legacy.css

@@ -11,9 +11,6 @@ governing permissions and limitations under the License.
 */
 
 #switch::before {
-    /* This rule includes all of the transitions from spectrum-css except the
-     * one for the transform attribute, which causes issue in Edge.
-     */
     transition:
         background var(--spectrum-animation-duration-100, 0.13s) ease-in-out,
         border var(--spectrum-animation-duration-100, 0.13s) ease-in-out,

packages/tabs/src/tabs.css

@@ -55,11 +55,6 @@ governing permissions and limitations under the License.
     color: var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled));
 }
 
-/*
- * TODO remove after next tabs release
- * While https://github.com/adobe/spectrum-css/issues/641 goes unaddressed,
- * then we'll need to place this at `top: 0;` ourselves.
- */
 :host([direction='vertical-right']) #list #selection-indicator,
 :host([direction='vertical']) #list #selection-indicator {
     inset-block-start: 0;