feat(overlay,commons): deprecate overlay; migrate references to commons

.github/workflows/build.yml

@@ -105,7 +105,7 @@ jobs:
 
  - name: Reset nx cache to prevent cross-machine errors
  shell: bash
- run: yarn cache:clean
+ run: yarn nx reset
 
  ## --- BUILD --- ##
  - name: Build components

.github/workflows/production.yml

@@ -1,4 +1,12 @@
 name: Build and verify production
+ # -------------------------------------------------------------
+ # This workflow will build and verify pull requests. It will:
+ # - Build the main branch
+ # - Report on the compiled output
+ # - Run visual regression tests
+ # - Publish the PR branch to Netlify
+ # -------------------------------------------------------------
+
 
 on:
  push:
@@ -16,32 +24,54 @@ defaults:
  run:
  shell: bash
 
-# todo: this could add deploy steps as well
 jobs:
+ # -------------------------------------------------------------
+ # Validate build for various environments
+ # -------------------------------------------------------------
  build:
+ name: Build
  strategy:
  fail-fast: false
  matrix:
  system:
  - macos-latest
  - ubuntu-latest
+ # - windows-latest
  node-version:
  - 18
- name: Build
  uses: ./.github/workflows/build.yml
  with:
- ref: ${{ github.sha }}
  system: ${{ matrix.system }}
  node-version: ${{ matrix.node-version }}
  secrets: inherit
 
- # Run VRT on ALL pushes to main
+ # -------------------------------------------------------------
+ # Report on the compiled assets
+ # -------------------------------------------------------------
+ report:
+ name: Report
+ needs: [build]
+ uses: ./.github/workflows/compare-results.yml
+ with:
+ base-sha: ${{ needs.build.outputs.base-sha }}
+ head-sha: ${{ needs.build.outputs.head-sha }}
+ secrets: inherit
+
+ # -------------------------------------------------------------
+ # RUN VISUAL REGRESSION TESTS --- #
+ # Run VRT on all pushes to main
+ # -------------------------------------------------------------
+
  vrt:
  name: Testing
  needs: [build]
  uses: ./.github/workflows/vrt.yml
  secrets: inherit
 
+ # -------------------------------------------------------------
+ # PUBLISH TO NETLIFY --- #
+ # Publish to netlify by leveraging the previous build and then building the site as well
+ # -------------------------------------------------------------
  publish_site:
  name: Publish
  # The build step ensures we are leveraging the cache for the build
@@ -52,6 +82,7 @@ jobs:
  secrets: inherit
 
  todo_to_issue:
+ name: Add issues for new TODOs
  runs-on: ubuntu-latest
  timeout-minutes: 5
  steps:

.github/workflows/publish-site.yml

@@ -75,31 +75,20 @@ jobs:
 
  - name: Reset nx cache to prevent cross-machine errors
  shell: bash
- run: yarn cache:clean
+ run: yarn nx reset
 
  ## --- BUILD --- ##
- - name: Check for built assets
- continue-on-error: true
- id: download
- uses: actions/download-artifact@v4
- with:
- path: |
- components/*/dist/**
- tokens/dist/**
- ui-icons/dist/**
- name: ubuntu-latest-node18-compiled-assets-${{ steps.set-SHAs.outputs.head }}
-
- - name: Build storybook site
- if: ${{ inputs.storybook-url == '' }}
- shell: bash
- run: yarn ci:storybook --output-dir ../dist/preview
-
  - name: Build docs site
  shell: bash
  run: yarn build:site
  env:
  CHROMATIC_URL: ${{ inputs.storybook-url }}
 
+ - name: Build storybook site
+ if: ${{ inputs.storybook-url == '' }}
+ shell: bash
+ run: yarn ci:storybook --output-dir ../dist/preview
+
  ## --- DEPLOY WEBSITE TO NETLIFY --- ##
  - name: Deploy
  uses: nwtgck/actions-netlify@v2

README.md

@@ -331,7 +331,7 @@ yarn start
 
 This will spin up the local development environment ([Storybook](https://storybook.js.org/docs/web-components/get-started/introduction)). Editing any of the `.css` or the `.stories.js` files in `components/*` will live reload in your browser.
 
-This project is leveraging caching from [Nx](https://nx.dev/) to speed up the build process. If you are seeing unexpected results, you can clear the cache by running `yarn cache:clean`.
+This project is leveraging caching from [Nx](https://nx.dev/) to speed up the build process. If you are seeing unexpected results, you can clear the cache by running `yarn nx reset`.
 
 ### Tasks
 

components/actionbutton/index.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "../commons/basebutton-coretokens.css";
+@import "@spectrum-css/commons/basebutton.css";
 
 .spectrum-ActionButton {
  --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
@@ -26,13 +26,13 @@ governing permissions and limitations under the License.
  --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
  --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
  --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
- 
+
  &.is-selected {
  --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
  --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
  --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
  --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
- 
+
  --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50));
  --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50));
  --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50));
@@ -43,7 +43,7 @@ governing permissions and limitations under the License.
  --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
  --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
  --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
- 
+
  --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
  --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
  --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
@@ -158,7 +158,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-ActionButton {
- @inherit: %spectrum-BaseButton;
+ @extend %spectrum-BaseButton;
  position: relative;
 
  min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
@@ -203,11 +203,11 @@ governing permissions and limitations under the License.
 }
 
 a.spectrum-ActionButton {
- @inherit: %spectrum-AnchorButton;
+ @extend %spectrum-AnchorButton;
 }
 
 .spectrum-ActionButton-icon {
- @inherit: %spectrum-ButtonIcon;
+ @extend %spectrum-ButtonIcon;
 
  inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
  block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
@@ -235,7 +235,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton-label {
- @inherit: %spectrum-ButtonLabel;
+ @extend %spectrum-ButtonLabel;
  pointer-events: none;
 
  font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size));

components/alertdialog/index.css

@@ -61,10 +61,12 @@ governing permissions and limitations under the License.
  }
 
  &--warning {
+ /* @passthrough */
  --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
  }
 
  &--error {
+ /* @passthrough */
  --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
  }
 }

components/button/index.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "../commons/basebutton-coretokens.css";
+@import "@spectrum-css/commons/basebutton.css";
 
 /* default for all buttons */
 .spectrum-Button {
@@ -92,8 +92,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Button {
- @inherit: %spectrum-BaseButton;
- @inherit: %spectrum-ButtonWithFocusRing;
+ @extend %spectrum-BaseButton;
+ @extend %spectrum-ButtonWithFocusRing;
 
  border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius));
  border-width: var(--mod-button-border-width, var(--spectrum-button-border-width));
@@ -149,11 +149,11 @@ governing permissions and limitations under the License.
 }
 
 a.spectrum-Button {
- @inherit: %spectrum-AnchorButton;
+ @extend %spectrum-AnchorButton;
 }
 
 .spectrum-Button-label {
- @inherit: %spectrum-ButtonLabel;
+ @extend %spectrum-ButtonLabel;
  padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
  padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
  white-space: nowrap;
@@ -204,7 +204,7 @@ a.spectrum-Button {
 /* former skin.css, applied / copied from actionbutton/index.css */
 
 .spectrum-Button {
- @inherit: %spectrum-BaseButton;
+ @extend %spectrum-BaseButton;
 
  background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
  border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));

components/closebutton/index.css

@@ -15,7 +15,7 @@ governing permissions and limitations under the License.
  * .spectrum-Closebutton::after is the Focus ring
  */
 
-@import "../commons/basebutton-coretokens.css";
+@import "@spectrum-css/commons/basebutton.css";
 
 .spectrum-CloseButton {
  /* Hardcoded tokens */
@@ -127,11 +127,11 @@ governing permissions and limitations under the License.
 }
 
 a.spectrum-CloseButton {
- @inherit: %spectrum-AnchorButton;
+ @extend %spectrum-AnchorButton;
 }
 
 .spectrum-CloseButton {
- @inherit: %spectrum-BaseButton;
+ @extend %spectrum-BaseButton;
 
  block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-height));
  inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-width));