Merge remote-tracking branch 'origin/trunk' into dev/32575-add-generic-fallback-image-payments-task

.github/workflows/build-release-zip-file.yml

@@ -9,22 +9,22 @@ on:
 jobs:
   build:
     name: Build release zip file
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
-      - name: Checkout code
+      - name: Checkout code.
         uses: actions/checkout@v3
-        with:
+
-          ref: ${{ github.event.inputs.ref || github.ref }}
+      - name: Install PNPM
-      - name: Build the zip file
+        run: npm install -g pnpm
-        id: build
+
-        uses: woocommerce/action-build@trunk
+      - name: Build zip
-      - name: Unzip the file (prevents double zip problem)
+        run: pnpm nx build-zip woocommerce
-        run: unzip ${{ steps.build.outputs.zip_path }} -d zipfile
+
       - name: Upload the zip file as an artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           name: woocommerce
-          path: zipfile
+          path: plugins/woocommerce/woocommerce.zip
           retention-days: 7

.github/workflows/build-release.yml

@@ -5,27 +5,31 @@ on:
 jobs:
   build:
     name: Build release asset
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
-      - name: Checkout code
+      - name: Checkout code.
         uses: actions/checkout@v3
-      - name: Build
+
-        id: build
+      - name: Install PNPM
-        uses: woocommerce/action-build@trunk
+        run: npm install -g pnpm
+
+      - name: Build zip
+        run: pnpm nx build-zip woocommerce
+
       - name: Upload release asset
         uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ github.event.release.upload_url }}
-          asset_path: ${{ steps.build.outputs.zip_path }}
+          asset_path: plugins/woocommerce/woocommerce.zip
           asset_name: woocommerce.zip
           asset_content_type: application/zip
   update-code-reference:
     if: github.event.release.prerelease == false && github.event.release.draft == false && github.repository_owner == 'woocommerce'
     name: Update Code Reference
     needs: build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Invoke Code Reference build and deploy workflow
         uses: aurelien-baudet/workflow-dispatch@v2
@@ -38,7 +42,7 @@ jobs:
   run-release-smoke-tests:
     name: Execute Smoke test release
     needs: build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Invoke release smoke testing workflow
         uses: aurelien-baudet/workflow-dispatch@v2

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
   test:
     name: PHP ${{ matrix.php }} WP ${{ matrix.wp }}
     timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     continue-on-error: ${{ matrix.wp == 'nightly' }}
     strategy:
       fail-fast: false
@@ -60,8 +60,8 @@ jobs:
           path: |
             ~/.pnpm-store
             plugins/woocommerce/packages
-            plugins/woocommerce/vendor
+            plugins/woocommerce/**/vendor
-          key: ${{ runner.os }}-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
 
       - name: Install PNPM
         run: npm install -g pnpm
@@ -79,9 +79,9 @@ jobs:
       - name: Add PHP8 Compatibility.
         run: |
           if [ "$(php -r "echo version_compare(PHP_VERSION,'8.0','>=');")" ]; then
+             cd plugins/woocommerce
              curl -L https://github.com/woocommerce/phpunit/archive/add-compatibility-with-php8-to-phpunit-7.zip -o /tmp/phpunit-7.5-fork.zip
              unzip -d /tmp/phpunit-7.5-fork /tmp/phpunit-7.5-fork.zip
-             cd plugins/woocommerce
              composer bin phpunit config --unset platform
              composer bin phpunit config repositories.0 '{"type": "path", "url": "/tmp/phpunit-7.5-fork/phpunit-add-compatibility-with-php8-to-phpunit-7", "options": {"symlink": false}}'
              composer bin phpunit require --dev -W phpunit/phpunit:@dev --ignore-platform-reqs

.github/workflows/mirrors.yml

@@ -6,42 +6,51 @@ jobs:
   build:
     if: github.repository == 'woocommerce/woocommerce'
     name: Build WooCommerce zip
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
-      - name: Checkout code
+      - name: Checkout code.
         uses: actions/checkout@v3
-      - name: Build
+
-        id: build
+      - name: Install PNPM
-        uses: woocommerce/action-build@trunk
+        run: npm install -g pnpm
-        env:
+
-          BUILD_ENV: mirrors
+      - name: Build zip
-      - name: Upload PR zip
+        run: pnpm nx build-zip woocommerce
-        uses: actions/upload-artifact@v2
+
+      - name: Upload the zip file as an artifact
+        uses: actions/upload-artifact@v3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           name: woocommerce
-          path: ${{ steps.build.outputs.zip_path }}
+          path: plugins/woocommerce/woocommerce.zip
           retention-days: 7
+
   mirror:
     if: github.repository == 'woocommerce/woocommerce'
     name: Push to Mirror
-    runs-on: ubuntu-latest
     needs: [build]
+    runs-on: ubuntu-20.04
     steps:
       - name: Create directories
         run: |
           mkdir -p tmp/woocommerce-build
           mkdir -p monorepo
+
       - name: Checkout monorepo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           path: monorepo
+
+      - name: Copy Composer over to production
+        run: cp monorepo/plugins/woocommerce/composer.json tmp/woocommerce-build
+
       - name: Download WooCommerce ZIP
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: woocommerce
           path: tmp/woocommerce-build
+
       - name: Extract and replace WooCommerce zip.
         working-directory: tmp/woocommerce-build
         run: |
@@ -49,11 +58,13 @@ jobs:
           unzip woocommerce.zip -d woocommerce/woocommerce-production
           mv woocommerce/woocommerce-production/woocommerce/* woocommerce/woocommerce-production
           rm -rf woocommerce/woocommerce-production/woocommerce
+
       - name: Set up mirror
         working-directory: tmp/woocommerce-build
         run: |
           touch mirrors.txt
           echo "woocommerce/woocommerce-production" >> mirrors.txt
+
       - name: Push to mirror
         uses: Automattic/action-push-to-mirrors@v1
         with:

.github/workflows/nightly-builds.yml

@@ -10,15 +10,19 @@ jobs:
       fail-fast: false
       matrix:
         build: [trunk]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
         with:
           ref: ${{ matrix.build }}
-      - name: Build
+
-        id: build
+      - name: Install PNPM
-        uses: woocommerce/action-build@trunk
+        run: npm install -g pnpm
+
+      - name: Build zip
+        run: pnpm nx build-zip woocommerce
+
       - name: Deploy nightly build
         uses: WebFreak001/deploy-nightly@v1.1.0
         env:
@@ -26,13 +30,13 @@ jobs:
         with:
           upload_url: https://uploads.github.com/repos/${{ github.repository }}/releases/25945111/assets{?name,label}
           release_id: 25945111
-          asset_path: ${{ steps.build.outputs.zip_path }}
+          asset_path: plugins/woocommerce/woocommerce.zip
           asset_name: woocommerce-${{ matrix.build }}-nightly.zip
           asset_content_type: application/zip
           max_releases: 1
   update:
     name: Update nightly tag commit ref
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Update nightly tag
         uses: richardsimko/github-tag-action@v1.0.5

.github/workflows/pr-build-and-e2e-tests.yml

@@ -1,83 +1,46 @@
-name: Build zip for PR
+name: Run tests against PR
 on: pull_request
 concurrency: 
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-    build:
-        name: Build zip for PR
-        runs-on: ubuntu-latest
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@v3
-
-            - name: Build
-              id: build
-              uses: woocommerce/action-build@trunk
-              env:
-                  BUILD_ENV: e2e
-
-            - name: Upload PR zip
-              uses: actions/upload-artifact@v3
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-              with:
-                  name: woocommerce
-                  path: ${{ steps.build.outputs.zip_path }}
-                  retention-days: 7
-
     e2e-tests-run:
         name: Runs E2E tests.
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
-        needs: [build]
         steps:
-            - name: Create dirs.
-              run: |
-                  mkdir -p code/woocommerce
-                  mkdir -p package/woocommerce
-                  mkdir -p tmp/woocommerce
-
             - name: Checkout code.
               uses: actions/checkout@v3
-              with:
-                  path: package/woocommerce
-
-            - name: Move current directory to code. We will install zip file in this dir later.
-              run: mv ./package/woocommerce/plugins/woocommerce/* ./code/woocommerce
-
-            - name: Download WooCommerce ZIP.
-              uses: actions/download-artifact@v3
-              with:
-                  name: woocommerce
-                  path: tmp
-
-            - name: Extract and replace WooCommerce zip.
-              working-directory: tmp
-              run: |
-                  unzip woocommerce.zip -d woocommerce
-                  mv woocommerce/woocommerce/* ../package/woocommerce/plugins/woocommerce/
 
             - name: Cache modules
               uses: actions/cache@v3
+              id: cache-deps
               with:
                 path: |
                   ~/.pnpm-store
-                key: ${{ runner.os }}-npm-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  plugins/woocommerce/packages
+                  plugins/woocommerce/**/vendor
+                key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
 
             - name: Install PNPM
               run: npm install -g pnpm
 
             - name: Install dependencies
-              working-directory: package/woocommerce
               run: pnpm install
 
+            - name: Install Composer dependencies
+              if: steps.cache-deps.outputs.cache-hit != 'true'
+              run: pnpm nx composer-install-no-dev woocommerce
+
+            - name: Run build
+              run: pnpm nx build woocommerce
+
             - name: Load docker images and start containers.
-              working-directory: package/woocommerce/plugins/woocommerce
+              working-directory: plugins/woocommerce
               run: pnpm exec wc-e2e docker:up
 
             - name: Run tests command.
-              working-directory: package/woocommerce/plugins/woocommerce
+              working-directory: plugins/woocommerce
               env:
                   WC_E2E_SCREENSHOTS: 1
                   E2E_SLACK_TOKEN: ${{ secrets.E2E_SLACK_TOKEN }}
@@ -89,63 +52,48 @@ jobs:
               if: always()
               with:
                   name: E2E Screenshots
-                  path: package/woocommerce/plugins/woocommerce/tests/e2e/screenshots
+                  path: plugins/woocommerce/tests/e2e/screenshots
                   if-no-files-found: ignore
                   retention-days: 5
 
     api-tests-run:
         name: Runs API tests.
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
-        needs: [build]
         steps:
-            - name: Create dirs.
-              run: |
-                  mkdir -p code/woocommerce
-                  mkdir -p package/woocommerce
-                  mkdir -p tmp/woocommerce
-
             - name: Checkout code.
               uses: actions/checkout@v3
-              with:
-                  path: package/woocommerce
-
-            - name: Move current directory to code. We will install zip file in this dir later.
-              run: mv ./package/woocommerce/plugins/woocommerce/* ./code/woocommerce
-
-            - name: Download WooCommerce ZIP.
-              uses: actions/download-artifact@v3
-              with:
-                  name: woocommerce
-                  path: tmp
-
-            - name: Extract and replace WooCommerce zip.
-              working-directory: tmp
-              run: |
-                  unzip woocommerce.zip -d woocommerce
-                  mv woocommerce/woocommerce/* ../package/woocommerce/plugins/woocommerce/
 
             - name: Cache modules
               uses: actions/cache@v3
+              id: cache-deps
               with:
                 path: |
                   ~/.pnpm-store
-                key: ${{ runner.os }}-npm-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  plugins/woocommerce/packages
+                  plugins/woocommerce/**/vendor
+                key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
 
             - name: Install PNPM
               run: npm install -g pnpm
 
             - name: Install dependencies
-              working-directory: package/woocommerce
               run: pnpm install
 
+            - name: Install Composer dependencies
+              if: steps.cache-deps.outputs.cache-hit != 'true'
+              run: pnpm nx composer-install woocommerce
+
+            - name: Run build
+              run: pnpm nx build woocommerce
+
             - name: Load docker images and start containers.
-              working-directory: package/woocommerce/plugins/woocommerce
+              working-directory: plugins/woocommerce
               run: pnpm exec wc-e2e docker:up
 
             - name: Run tests command.
-              working-directory: package/woocommerce/plugins/woocommerce
+              working-directory: plugins/woocommerce
               env:
-                  BASE_URL: http://localhost:8084
+                  BASE_URL: http://localhost:8086
                   USER_KEY: admin
                   USER_SECRET: password
               run: pnpm exec wc-api-tests test api
@@ -155,62 +103,47 @@ jobs:
               with:
                   name: api-test-report---pr-${{ github.event.number }}
                   path: |
-                      package/woocommerce/packages/js/api-core-tests/allure-results
+                      packages/js/api-core-tests/allure-results
-                      package/woocommerce/packages/js/api-core-tests/allure-report
+                      packages/js/api-core-tests/allure-report
                   retention-days: 7
 
     k6-tests-run:
         name: Runs k6 Performance tests
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
-        needs: [build]
         steps:
-            - name: Create dirs.
-              run: |
-                  mkdir -p code/woocommerce
-                  mkdir -p package/woocommerce
-                  mkdir -p tmp/woocommerce
-
             - name: Checkout code.
               uses: actions/checkout@v3
-              with:
-                  path: package/woocommerce
-
-            - name: Move current directory to code. We will install zip file in this dir later.
-              run: mv ./package/woocommerce/plugins/woocommerce/* ./code/woocommerce
-
-            - name: Download WooCommerce ZIP.
-              uses: actions/download-artifact@v3
-              with:
-                  name: woocommerce
-                  path: tmp
-
-            - name: Extract and replace WooCommerce zip.
-              working-directory: tmp
-              run: |
-                  unzip woocommerce.zip -d woocommerce
-                  mv woocommerce/woocommerce/* ../package/woocommerce/plugins/woocommerce/
 
             - name: Cache modules
               uses: actions/cache@v3
+              id: cache-deps
               with:
                 path: |
                   ~/.pnpm-store
-                key: ${{ runner.os }}-npm-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  plugins/woocommerce/packages
+                  plugins/woocommerce/**/vendor
+                key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
 
             - name: Install PNPM
               run: npm install -g pnpm
 
             - name: Install dependencies
-              working-directory: package/woocommerce
               run: pnpm install
 
+            - name: Install Composer dependencies
+              if: steps.cache-deps.outputs.cache-hit != 'true'
+              run: pnpm nx composer-install woocommerce
+
+            - name: Run build
+              run: pnpm nx build woocommerce
+
             - name: Workaround to use initialization file with prepopulated data.
-              working-directory: package/woocommerce/plugins/woocommerce/tests/e2e/docker
+              working-directory: plugins/woocommerce/tests/e2e/docker
               run: |
                   cp init-sample-products.sh initialize.sh
 
             - name: Load docker images and start containers.
-              working-directory: package/woocommerce/plugins/woocommerce
+              working-directory: plugins/woocommerce
               run: pnpm exec wc-e2e docker:up
 
             - name: Install k6
@@ -219,4 +152,4 @@ jobs:
 
             - name: Run k6 tests
               run: |
-                  ./k6 run package/woocommerce/plugins/woocommerce/tests/performance/tests/gh-action-pr-requests.js
+                  ./k6 run plugins/woocommerce/tests/performance/tests/gh-action-pr-requests.js

.github/workflows/pr-code-coverage.yml

@@ -11,7 +11,7 @@ jobs:
   test:
     name: Code coverage (PHP 7.4, WP Latest)
     timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     services:
       database:
         image: mysql:5.6
@@ -46,8 +46,8 @@ jobs:
           path: |
             ~/.pnpm-store
             plugins/woocommerce/packages
-            plugins/woocommerce/vendor
+            plugins/woocommerce/**/vendor
-          key: ${{ runner.os }}-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
 
       - name: Install PNPM
         run: npm install -g pnpm

.github/workflows/pr-code-sniff.yml

@@ -11,7 +11,7 @@ jobs:
   test:
     name: Code sniff (PHP 7.4, WP Latest)
     timeout-minutes: 15
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -36,8 +36,8 @@ jobs:
           path: |
             ~/.pnpm-store
             plugins/woocommerce/packages
-            plugins/woocommerce/vendor
+            plugins/woocommerce/**/vendor
-          key: ${{ runner.os }}-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
 
       - name: Install PNPM
         run: npm install -g pnpm

.github/workflows/pr-lint-monorepo.yml

@@ -6,7 +6,7 @@ concurrency:
 jobs:
   changelogger_used:
     name: Changelogger use
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     timeout-minutes: 5
     steps:
       - uses: actions/checkout@v3

.github/workflows/pr-lint-test-js.yml

@@ -13,7 +13,7 @@ concurrency:
 jobs:
   lint-test-js:
     name: Lint and Test JS
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     steps:
       - name: Check out repository code
         uses: actions/checkout@v3

.github/workflows/pr-project-label.yml

@@ -10,7 +10,7 @@ concurrency:
 
 jobs:
   label_project:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
     - uses: actions/labeler@v3
       with:

.github/workflows/pr-smoke-test.yml

@@ -13,7 +13,7 @@ jobs:
     prcheck:
         name: Smoke test a pull request.
         if: "${{ contains(github.event.label.name, 'run: smoke tests') }}"
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
         steps:
             - name: Create dirs.
               run: |
@@ -33,8 +33,8 @@ jobs:
                 path: |
                   ~/.pnpm-store
                   package/woocommerce/plugins/woocommerce/packages
-                  package/woocommerce/plugins/woocommerce/vendor
+                  package/woocommerce/plugins/woocommerce/**/vendor
-                key: ${{ runner.os }}-smoke-test-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
+                key: ${{ runner.os }}-smoke-test-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
 
             - name: Install PNPM
               run: npm install -g pnpm

.github/workflows/pr-unit-tests.yml

@@ -12,7 +12,7 @@ jobs:
   test:
     name: PHP ${{ matrix.php }} WP ${{ matrix.wp }}
     timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     continue-on-error: ${{ matrix.wp == 'nightly' }}
     strategy:
       fail-fast: false
@@ -58,8 +58,8 @@ jobs:
           path: |
             ~/.pnpm-store
             plugins/woocommerce/packages
-            plugins/woocommerce/vendor
+            plugins/woocommerce/**/vendor
-          key: ${{ runner.os }}-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
 
       - name: Install PNPM
         run: npm install -g pnpm
@@ -78,9 +78,9 @@ jobs:
       - name: Add PHP8 Compatibility.
         run: |
           if [ "$(php -r "echo version_compare(PHP_VERSION,'8.0','>=');")" ]; then
+             cd plugins/woocommerce
              curl -L https://github.com/woocommerce/phpunit/archive/add-compatibility-with-php8-to-phpunit-7.zip -o /tmp/phpunit-7.5-fork.zip
              unzip -d /tmp/phpunit-7.5-fork /tmp/phpunit-7.5-fork.zip
-             cd plugins/woocommerce
              composer bin phpunit config --unset platform
              composer bin phpunit config repositories.0 '{"type": "path", "url": "/tmp/phpunit-7.5-fork/phpunit-add-compatibility-with-php8-to-phpunit-7", "options": {"symlink": false}}'
              composer bin phpunit require --dev -W phpunit/phpunit:@dev --ignore-platform-reqs

.github/workflows/pull-request-post-merge-processing.yml

@@ -7,7 +7,7 @@ jobs:
   process-pull-request-after-merge:
     name: "Process a pull request after it's merged"
     if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: "Get the action scripts"
         run: |

.github/workflows/release-code-freeze.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   maybe-create-next-milestone-and-release-branch:
     name: "Maybe create next milestone and release branch"
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: "Get the action script"
         run: |

.github/workflows/smoke-test-daily-site-check.yml

@@ -5,7 +5,7 @@ on:
 
 jobs:
   ping_site:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     name: Check site and notify if not found
     steps:
     - name: Check site status

.github/workflows/smoke-test-daily.yml

@@ -5,14 +5,13 @@ on:
 jobs:
     login-run:
         name: Daily smoke test on trunk.
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
         steps:
             - name: Create dirs.
               run: |
                   mkdir -p code/woocommerce
                   mkdir -p package/woocommerce
                   mkdir -p tmp/woocommerce
-                  mkdir -p node_modules
 
             - name: Checkout code.
               uses: actions/checkout@v3
@@ -54,16 +53,16 @@ jobs:
 
     build:
         name: Build zip for PR
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-20.04
         steps:
             - name: Checkout code
               uses: actions/checkout@v3
 
-            - name: Build
+            - name: Install PNPM
-              id: build
+              run: npm install -g pnpm
-              uses: woocommerce/action-build@trunk
+
-              env:
+            - name: Build zip
-                  BUILD_ENV: e2e
+              run: pnpm nx build-zip woocommerce
 
             - name: Upload PR zip
               uses: actions/upload-artifact@v3
@@ -71,12 +70,12 @@ jobs:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               with:
                   name: woocommerce
-                  path: ${{ steps.build.outputs.zip_path }}
+                  path: plugins/woocommerce/woocommerce.zip
                   retention-days: 7
 
     test-plugins:
         name: Smoke tests with ${{ matrix.plugin }} plugin installed
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
         needs: [build]
         strategy:
             fail-fast: false
@@ -101,10 +100,9 @@ jobs:
                   mkdir -p code/woocommerce
                   mkdir -p package/woocommerce
                   mkdir -p tmp/woocommerce
-                  mkdir -p node_modules
 
             - name: Checkout code.
-              uses: actions/checkout@v2
+              uses: actions/checkout@v3
               with:
                   path: package/woocommerce
 

.github/workflows/smoke-test-release.yml

@@ -8,7 +8,7 @@ on:
 jobs:
     login-run:
         name: Daily smoke test on release.
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
         steps:
             - name: Create dirs.
               run: |
@@ -57,7 +57,7 @@ jobs:
                   pnpm exec wc-api-tests test api
     test-wp-version:
         name: Smoke test on L-${{ matrix.wp }} WordPress version
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
         strategy:
             matrix:
                 wp: ['1', '2']
@@ -118,7 +118,7 @@ jobs:
 
     test-plugins:
         name: Smoke tests with ${{ matrix.plugin }} plugin installed
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-20.04
         strategy:
             fail-fast: false
             matrix:

.github/workflows/stalebot.yml

@@ -7,7 +7,7 @@ jobs:
   stale:
     if: |
       ! contains(github.event.issue.labels.*.name, 'type: enhancement')
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - uses: actions/stale@v3
         with:

.github/workflows/triage-label.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   add_label:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - uses: actions/checkout@v3
       - uses: actions-ecosystem/action-add-labels@v1

.github/workflows/triage-replies.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   add-dev-comment:
     if: "github.event.label.name == 'needs: developer feedback'"
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     permissions:
       issues: write
     steps:
@@ -26,7 +26,7 @@ jobs:
             })              
   add-reproduction-comment:
     if: "github.event.label.name == 'status: reproduction'"
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     permissions:
       issues: write
     steps:
@@ -45,7 +45,7 @@ jobs:
             })
   add-support-comment:
     if: "github.event.label.name == 'type: support request'"
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     permissions:
       issues: write
     steps:
@@ -85,7 +85,7 @@ jobs:
                 })
   add-votes-comment:
     if: "github.event.label.name == 'needs: votes'"
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     permissions:
       issues: write
     steps:
@@ -120,7 +120,7 @@ jobs:
                 })
   fill-template-comment:
     if: "github.event.label.name == 'needs: template'"
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     permissions:
       issues: write
     steps:

.github/workflows/update-feedback-labels.yml

@@ -9,7 +9,7 @@ jobs:
       github.event.issue &&
       github.event.issue.state == 'open' &&
       contains(github.event.issue.labels.*.name, 'needs: author feedback')
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
     - name: Add has feedback
       uses: actions-ecosystem/action-add-labels@v1

package.json

@@ -1,54 +1,84 @@
 {
-  "name": "woocommerce-monorepo",
+	"name": "woocommerce-monorepo",
-  "title": "WooCommerce Monorepo",
+	"title": "WooCommerce Monorepo",
-  "description": "Monorepo for the WooCommerce ecosystem",
+	"description": "Monorepo for the WooCommerce ecosystem",
-  "homepage": "https://woocommerce.com/",
+	"homepage": "https://woocommerce.com/",
-  "private": true,
+	"private": true,
-  "repository": {
+	"repository": {
-    "type": "git",
+		"type": "git",
-    "url": "https://github.com/woocommerce/woocommerce.git"
+		"url": "https://github.com/woocommerce/woocommerce.git"
-  },
+	},
-  "author": "Automattic",
+	"author": "Automattic",
-  "license": "GPL-3.0-or-later",
+	"license": "GPL-3.0-or-later",
-  "bugs": {
+	"bugs": {
-    "url": "https://github.com/woocommerce/woocommerce/issues"
+		"url": "https://github.com/woocommerce/woocommerce/issues"
-  },
+	},
-  "scripts": {
+	"scripts": {
-    "preinstall": "npx only-allow pnpm",
+		"build-storybook": "build-storybook  -c ./tools/storybook/.storybook",
-    "postinstall": "pnpm git:update-hooks",
+		"preinstall": "npx only-allow pnpm",
-    "git:update-hooks": "rm -r .git/hooks && mkdir -p .git/hooks && husky install",
+		"postinstall": "pnpm git:update-hooks",
-    "create-extension": "node ./tools/create-extension/index.js"
+		"git:update-hooks": "rm -r .git/hooks && mkdir -p .git/hooks && husky install",
-  },
+		"storybook": "./tools/storybook/import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true start-storybook -c ./tools/storybook/.storybook -p 6007 --ci",
-  "devDependencies": {
+		"storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook",
-    "@automattic/nx-composer": "^0.1.0",
+		"create-extension": "node ./tools/create-extension/index.js"
-    "@nrwl/cli": "^13.3.4",
+	},
-    "@nrwl/devkit": "^13.1.4",
+	"devDependencies": {
-    "@nrwl/linter": "^13.3.4",
+		"@automattic/nx-composer": "^0.1.0",
-    "@nrwl/tao": "13.3.4",
+		"@babel/preset-env": "^7.16.11",
-    "@nrwl/web": "^13.3.4",
+		"@babel/runtime": "^7.17.2",
-    "@nrwl/workspace": "^13.3.4",
+		"@nrwl/cli": "^13.3.4",
-    "@types/node": "14.14.33",
+		"@nrwl/devkit": "^13.1.4",
-    "@woocommerce/eslint-plugin": "workspace:*",
+		"@nrwl/linter": "^13.3.4",
-    "@wordpress/eslint-plugin": "^11.0.0",
+		"@nrwl/tao": "13.3.4",
-    "@wordpress/prettier-config": "^1.1.1",
+		"@nrwl/web": "^13.3.4",
-    "chalk": "^4.1.2",
+		"@nrwl/workspace": "^13.3.4",
-    "glob": "^7.2.0",
+		"@storybook/addon-a11y": "^6.4.19",
-    "husky": "^7.0.4",
+		"@storybook/addon-actions": "^6.4.19",
-    "jest": "^27.3.1",
+		"@storybook/addon-console": "^1.2.3",
-    "lint-staged": "^12.3.7",
+		"@storybook/addon-controls": "^6.4.19",
-    "mkdirp": "^1.0.4",
+		"@storybook/addon-docs": "^6.4.19",
-    "node-stream-zip": "^1.15.0",
+		"@storybook/addon-knobs": "^6.4.0",
-    "prettier": "npm:wp-prettier@^2.2.1-beta-1",
+		"@storybook/addon-links": "^6.4.19",
-    "request": "^2.88.2",
+		"@storybook/addon-storysource": "^6.4.19",
-    "typescript": "4.2.4"
+		"@storybook/addon-viewport": "^6.4.19",
-  },
+		"@storybook/addons": "^6.4.19",
-  "dependencies": {
+		"@storybook/api": "^6.4.19",
-    "@babel/core": "7.12.9",
+		"@storybook/builder-webpack5": "^6.4.19",
-    "@wordpress/babel-plugin-import-jsx-pragma": "^3.1.0",
+		"@storybook/components": "^6.4.19",
-    "@wordpress/babel-preset-default": "^6.4.1",
+		"@storybook/core-events": "^6.4.19",
-    "fs-extra": "^10.0.1",
+		"@storybook/manager-webpack5": "^6.4.19",
-    "lodash": "^4.17.21",
+		"@storybook/react": "^6.4.19",
-    "promptly": "^3.2.0",
+		"@storybook/theming": "^6.4.19",
-    "wp-textdomain": "1.0.1"
+		"@types/node": "14.14.33",
-  }
+		"@woocommerce/eslint-plugin": "workspace:*",
+		"@wordpress/data": "^6.3.0",
+		"@wordpress/eslint-plugin": "^11.0.0",
+		"@wordpress/prettier-config": "^1.1.1",
+		"babel-loader": "^8.2.3",
+		"chalk": "^4.1.2",
+		"core-js": "^3.21.1",
+		"css-loader": "^6.7.0",
+		"glob": "^7.2.0",
+		"husky": "^7.0.4",
+		"jest": "^27.3.1",
+		"lint-staged": "^12.3.7",
+		"moment": "^2.29.1",
+		"mkdirp": "^1.0.4",
+		"node-stream-zip": "^1.15.0",
+		"prettier": "npm:wp-prettier@^2.2.1-beta-1",
+		"postcss-loader": "^3.0.0",
+		"regenerator-runtime": "^0.13.9",
+		"request": "^2.88.2",
+		"sass": "^1.49.9",
+		"sass-loader": "^10.2.1",
+		"typescript": "4.2.4",
+		"webpack": "^5.70.0"
+	},
+	"dependencies": {
+		"@babel/core": "7.12.9",
+		"@wordpress/babel-plugin-import-jsx-pragma": "^3.1.0",
+		"@wordpress/babel-preset-default": "^6.4.1",
+		"lodash": "^4.17.21",
+		"wp-textdomain": "1.0.1"
+	}
 }

packages/js/e2e-environment/CHANGELOG.md

@@ -31,6 +31,7 @@
 
 ## Changed
 
+- Updated `external.md` with instructions to manually set up sites for e2e testing.
 - Updated `getLatestReleaseZipUrl()` to allow passing in an authorization token and simplified arguments to just the repository name
 - Updated `deleteDownloadedPluginFiles()` to also be able to delete directories.
 

packages/js/e2e-environment/external.md

@@ -1,6 +1,6 @@
-# Using an External Container for End to End Testing
+# Using an External Environment for End to End Testing
 
-This document provides general instructions for using `@woocommerce/e2e-environment` with your hosting container. 
+This document provides general instructions for using `@woocommerce/e2e-environment` with your WooCommerce environment. Whether you're using a non-standard Docker configuration, a locally-hosted WC install, or a WC install hosted externally, these instructions should point you to what is needed for configuration.
 
 ## Prerequisites
 
@@ -14,10 +14,11 @@ The test sequencer uses a `ready` page to determine that the testing environment
 wp post create --post_type=page --post_status=publish --post_title='Ready' --post_content='E2E-tests.'
 ```
 
+If you don't have shell access to your test site, simply create a Page with the title `Ready` and the content `E2E-tests.` through the WP Admin.
+
 ### Project Initialization
 
-Each project will have its own begin test state and initialization script. For example, a project might start testing expecting that the [sample products](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/sample-data) have already been imported. Below is the WP CLI equivalent initialization script for WooCommerce Core E2E testing:
+Each project will have its own begin test state and initialization script. For example, a project might start testing expecting that the [sample products](https://github.com/woocommerce/woocommerce/tree/trunk/sample-data) have already been imported. Below is the WP CLI equivalent initialization script for WooCommerce Core E2E testing (which expects certain users to be present and that WC is installed and active):
-
 
 ```
 wp core install --url=http://localhost:8084 --admin_user=admin --admin_password=password --admin_email=wooadmin@example.org
@@ -30,6 +31,15 @@ wp user create customer customer@woocommercecoree2etestsuite.com \
 	--last_name='Smith'
 ```
 
+Again, if you don't have shell access to your test site, through WP Admin ensure that:
+
+1. WooCommerce is installed and activated.
+2. TwentyNineteen is installed and the active theme.
+3. You have an admin user set up (if their credentials differ from u/ `admin` and p/ `password` be sure to update `/plugins/woocommerce/tests/e2e/config/default.json`)
+4. You have a customer user set up named 'Jane Smith'. This user should be a `subscriber` and again make sure their username and password are reflected in `/plugins/woocommerce/tests/e2e/config/default.json`.
+
+You should then be able to run the e2e tests by running `pnpm nx test-e2e woocommerce`.
+
 ### Test Sequencer Setup
 
 The test sequencer needs to know the particulars of your test install to run the tests. The sequencer reads these settings from `/plugins/woocommerce/tests/e2e/config/default.json`.

packages/js/e2e-utils/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+	root: true,
 	parser: '@typescript-eslint/parser',
 	env: {
 		'jest/globals': true,

packages/js/e2e-utils/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Unreleased
 
+## Fixed
+
+- Added the `root: true` flag to `e2e-utils` ESLint config file so that ESLint ignores other ancestor config files when checking that package. This solves a version conflict when running ESLint.
+
 ## Added
 
 - `createSimpleDownloadableProduct` component which creates a simple downloadable product, containing four parameters for title, price, download name and download limit.

packages/js/e2e-utils/package.json

@@ -46,10 +46,5 @@
     "build": "pnpm run clean && pnpm run compile",
     "prepare": "pnpm run build",
     "lint": "eslint src"
-  },
-  "lint-staged": {
-	"*.(t|j)s?(x)": [
-		"eslint --fix"
-	]
   }
 }

packages/js/e2e-utils/src/flows/shopper.js

@@ -267,11 +267,11 @@ const shopper = {
 		// Single search results may go directly to product page
 		if ( await page.waitForSelector( 'h2.entry-title' ) ) {
 			await expect( page ).toMatchElement( 'h2.entry-title', {
-				text: prouductName,
+        text: prouductName
-			} );
+      } );
-			await expect( page ).toClick( 'h2.entry-title', {
+			await expect( page ).toClick( 'h2.entry-title > a' , {
-				text: prouductName,
+        text: prouductName
-			} );
+      } );
 		}
 		await page.waitForSelector( 'h1.entry-title' );
 		await expect( page.title() ).resolves.toMatch( prouductName );

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/CardList.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { List } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import './cards.scss';
+
+type Card = {
+	key: string;
+	title: string;
+	content: string;
+	before: JSX.Element;
+};
+
+type CardListProps = {
+	items: Card[];
+};
+
+const CardList: React.FC< CardListProps > = ( { items } ) => {
+	return (
+		<div className="woocommerce-products-card-list">
+			<List items={ items } />
+		</div>
+	);
+};
+
+export default CardList;

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/cards.scss

@@ -0,0 +1,70 @@
+.woocommerce-products-card-list {
+	a {
+		color: #007cba;
+	}
+
+	.woocommerce-list__item {
+		float: left;
+		border-radius: 3px;
+		border: 1px solid #dcdcde;
+		width: 263px;
+		height: 226px;
+		margin: 12px;
+		text-align: center;
+		align-items: start;
+
+		&:hover {
+			background-color: #fff;
+			border: 1.5px solid #007cba;
+		}
+
+		.woocommerce-list__item-inner {
+			padding-top: 40px;
+			flex-flow: wrap;
+			justify-content: center;
+		}
+
+		&:not(.transitions-disabled) {
+			&.woocommerce-list__item-enter {
+				transform: none;
+			}
+
+			&.woocommerce-list__item-enter-active {
+				transform: none;
+			}
+
+			&.woocommerce-list__item-exit-active {
+				display: none;
+			}
+		}
+
+		> .woocommerce-list__item-inner {
+			box-shadow: none;
+		}
+	}
+
+	.woocommerce-list__item-text {
+		margin-top: 16px;
+		.woocommerce-list__item-content {
+			margin-top: 16px;
+		}
+	}
+
+	.woocommerce-list__item-before {
+		background: #f0f6fc;
+		padding: 8px;
+		border-radius: 50%;
+	}
+
+	.woocommerce-list__item-title {
+		color: $gray-900;
+		line-height: 16px;
+		font-weight: 600;
+	}
+
+	.woocommerce-list__item-content {
+		color: $gray-700;
+		line-height: 16px;
+		font-weight: 400;
+	}
+}

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/importTypes.tsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PageIcon from 'gridicons/dist/pages';
+import ReblogIcon from 'gridicons/dist/reblog';
+
+export const importTypes = [
+	{
+		key: 'from-csv' as const,
+		title: __( 'FROM A CSV FILE', 'woocommerce' ),
+		content: __(
+			'Import all products at once by uploading a CSV file.',
+			'woocommerce'
+		),
+		before: <PageIcon />,
+	},
+	{
+		key: 'from-cart2cart' as const,
+		title: __( 'FROM CART2CART', 'woocommerce' ),
+		content: __(
+			'Migrate all store data like products, customers, orders and much more in no time and in a fully automated way',
+			'woocommerce'
+		),
+		before: <ReblogIcon />,
+	},
+];

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { WooOnboardingTask } from '@woocommerce/onboarding';
+import { registerPlugin } from '@wordpress/plugins';
+
+/**
+ * Internal dependencies
+ */
+import CardList from './CardList';
+import { importTypes } from './importTypes';
+
+const Products = () => {
+	return (
+		<div>
+			<h1>Import products</h1>
+			<CardList items={ importTypes } />
+		</div>
+	);
+};
+
+registerPlugin( 'wc-admin-onboarding-task-products', {
+	// @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated.
+	scope: 'woocommerce-tasks',
+	render: () => (
+		// @ts-expect-error WooOnboardingTask is a pure JS component.
+		<WooOnboardingTask id="products">
+			<Products />
+		</WooOnboardingTask>
+	),
+} );

plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import ProductIcon from 'gridicons/dist/product';
+import CloudOutlineIcon from 'gridicons/dist/cloud-outline';
+import TypesIcon from 'gridicons/dist/types';
+import CalendarIcon from 'gridicons/dist/calendar';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Link from './icon/link_24px.svg';
+import Widget from './icon/widgets_24px.svg';
+
+export const productTypes = Object.freeze( [
+	{
+		key: 'physical' as const,
+		title: __( 'Physical product', 'woocommerce' ),
+		content: __(
+			'A tangible item that gets delivered to customers.',
+			'woocommerce'
+		),
+		before: <ProductIcon />,
+		after: <Icon icon={ chevronRight } />,
+	},
+	{
+		key: 'digital' as const,
+		title: __( 'Digital product', 'woocommerce' ),
+		content: __(
+			'A digital product like service, downloadable book, music or video.',
+			'woocommerce'
+		),
+		before: <CloudOutlineIcon />,
+		after: <Icon icon={ chevronRight } />,
+	},
+	{
+		key: 'variable' as const,
+		title: __( 'Variable product', 'woocommerce' ),
+		content: __(
+			'A product with variations like color or size.',
+			'woocommerce'
+		),
+		before: <TypesIcon />,
+		after: <Icon icon={ chevronRight } />,
+	},
+	{
+		key: 'subscription' as const,
+		title: __( 'Subscription product', 'woocommerce' ),
+		content: __(
+			'Item that customers receive on a regular basis.',
+			'woocommerce'
+		),
+		before: <CalendarIcon />,
+		after: <Icon icon={ chevronRight } />,
+	},
+	{
+		key: 'grouped' as const,
+		title: __( 'Grouped product', 'woocommerce' ),
+		content: __( 'A collection of related products.', 'woocommerce' ),
+		before: <img src={ Widget } alt="Widget" />,
+		after: <Icon icon={ chevronRight } />,
+	},
+	{
+		key: 'external' as const,
+		title: __( 'External product', 'woocommerce' ),
+		content: __( 'Link a product to an external website.', 'woocommerce' ),
+		before: <img src={ Link } alt="Link" />,
+		after: <Icon icon={ chevronRight } />,
+	},
+] );
+
+export type ProductType = typeof productTypes[ number ];
+export type ProductTypeKey = ProductType[ 'key' ];

plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg

@@ -0,0 +1,8 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1133_132681" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="7" width="21" height="10">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 15H7.5C5.85 15 4.5 13.65 4.5 12C4.5 10.35 5.85 9 7.5 9H11.5V7H7.5C4.74 7 2.5 9.24 2.5 12C2.5 14.76 4.74 17 7.5 17H11.5V15ZM17.5 7H13.5V9H17.5C19.15 9 20.5 10.35 20.5 12C20.5 13.65 19.15 15 17.5 15H13.5V17H17.5C20.26 17 22.5 14.76 22.5 12C22.5 9.24 20.26 7 17.5 7ZM16.5 11H8.5V13H16.5V11Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1133_132681)">
+<rect x="0.5" width="24" height="24" fill="#007CBA"/>
+</g>
+</svg>

plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg

@@ -0,0 +1,8 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1133_132667" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 2.34497L10.84 7.99497V3.65497H2.84003V11.655H10.84V7.99497L16.5 13.655H12.84V21.655H20.84V13.655H16.5L22.16 7.99497L16.5 2.34497ZM19.33 8.00497L16.5 5.17497L13.67 8.00497L16.5 10.835L19.33 8.00497ZM8.84003 9.65497V5.65497H4.84003V9.65497H8.84003ZM18.84 15.655V19.655H14.84V15.655H18.84ZM8.84003 19.655V15.655H4.84003V19.655H8.84003ZM2.84003 13.655H10.84V21.655H2.84003V13.655Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1133_132667)">
+<rect x="0.5" width="24" height="24" fill="#007CBA"/>
+</g>
+</svg>

plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.scss

@@ -0,0 +1,6 @@
+.woocommerce-task-products {
+	display: flex;
+	flex-direction: column;
+	width: 550px;
+	margin: auto;
+}

plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { WooOnboardingTask } from '@woocommerce/onboarding';
+import { registerPlugin } from '@wordpress/plugins';
+
+/**
+ * Internal dependencies
+ */
+import { getProductTypes } from './utils';
+import './index.scss';
+import Stack from './stack';
+
+const Products = () => {
+	const productTypes = getProductTypes();
+	return (
+		<div className="woocommerce-task-products">
+			<Stack items={ productTypes } />
+		</div>
+	);
+};
+
+registerPlugin( 'wc-admin-onboarding-task-products', {
+	// @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated.
+	scope: 'woocommerce-tasks',
+	render: () => (
+		// @ts-expect-error WooOnboardingTask is a pure JS component.
+		<WooOnboardingTask id="products">
+			<Products />
+		</WooOnboardingTask>
+	),
+} );

plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.scss

@@ -0,0 +1,61 @@
+.woocommerce-products-stack {
+	a {
+		text-decoration: none;
+		color: #007cba;
+	}
+
+	.woocommerce-list__item {
+		margin-top: 8px;
+		border-radius: 3px;
+		border: 1px solid #dcdcde;
+
+		&:hover {
+			background-color: #fff;
+			border: 1.5px solid #007cba;
+		}
+
+		&:not(.transitions-disabled) {
+			&.woocommerce-list__item-enter {
+				transform: none;
+			}
+
+			&.woocommerce-list__item-enter-active {
+				transform: none;
+			}
+
+			&.woocommerce-list__item-exit-active {
+				display: none;
+			}
+		}
+	}
+
+	.woocommerce-list__item-before {
+		background: #f0f6fc;
+		padding: 8px;
+		border-radius: 50%;
+	}
+
+	.woocommerce-list__item-title {
+		color: $gray-900;
+		line-height: 16px;
+		font-weight: 600;
+	}
+
+	.woocommerce-list__item-content {
+		color: $gray-700;
+		line-height: 16px;
+		font-weight: 400;
+	}
+
+	.woocommerce-list__item-after {
+		svg {
+			fill: $gray-600;
+		}
+	}
+
+	.woocommerce-stack-other-options {
+		margin-top: 20px;
+		color: $gray-700;
+		line-height: 16px;
+	}
+}

plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { List, Link } from '@woocommerce/components';
+import interpolateComponents from '@automattic/interpolate-components';
+import { getAdminLink } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import { ProductType } from './constants';
+import './stack.scss';
+
+type StackProps = {
+	items: ProductType[];
+};
+
+const Stack: React.FC< StackProps > = ( { items } ) => {
+	return (
+		<div className="woocommerce-products-stack">
+			<List items={ items } />
+			<div className="woocommerce-stack-other-options">
+				{ interpolateComponents( {
+					mixedString: __(
+						'Can’t find your product type? {{sbLink}}Start Blank{{/sbLink}} or {{LspLink}}Load Sample Products{{/LspLink}} to see what they look like in your store.',
+						'woocommerce'
+					),
+					components: {
+						sbLink: (
+							<Link
+								onClick={ () => {
+									window.location = getAdminLink(
+										'post-new.php?post_type=product&wc_onboarding_active_task=products&tutorial=true'
+									);
+									return false;
+								} }
+								href=""
+								type="wc-admin"
+							>
+								<></>
+							</Link>
+						),
+						LspLink: (
+							// TODO: Update this to the load sample product.
+							<Link href="" type="wc-admin">
+								<></>
+							</Link>
+						),
+					},
+				} ) }
+			</div>
+		</div>
+	);
+};
+
+export default Stack;

plugins/woocommerce-admin/client/tasks/fills/experimental-products/utils.tsx

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { productTypes, ProductTypeKey } from './constants';
+
+export const getProductTypes = ( exclude: ProductTypeKey[] = [] ) =>
+	productTypes.filter(
+		( productType ) => ! exclude.includes( productType.key )
+	);

plugins/woocommerce-admin/client/tasks/fills/index.js

@@ -1,12 +1,31 @@
 /**
  * Internal dependencies
  */
+import { getAdminSetting } from '~/utils/admin-settings';
+
 import './PaymentGatewaySuggestions';
 import './shipping';
 import './Marketing';
-import './products';
 import './appearance';
 import './connect';
 import './tax';
 import './woocommerce-payments';
 import './purchase';
+
+const onboardingData = getAdminSetting( 'onboarding' );
+
+if (
+	window.wcAdminFeatures &&
+	window.wcAdminFeatures[ 'experimental-import-products-task' ] &&
+	onboardingData?.profile?.selling_venues &&
+	onboardingData?.profile?.selling_venues !== 'no'
+) {
+	import( './experimental-import-products' );
+} else if (
+	window.wcAdminFeatures &&
+	window.wcAdminFeatures[ 'experimental-products-task' ]
+) {
+	import( './experimental-products' );
+} else {
+	import( './products' );
+}

plugins/woocommerce-admin/client/typings/global.d.ts

@@ -9,6 +9,7 @@ declare global {
 			analytics: boolean;
 			coupons: boolean;
 			'customer-effort-score-tracks': boolean;
+			'experimental-products-task': boolean;
 			homescreen: boolean;
 			marketing: boolean;
 			'minified-js': boolean;

plugins/woocommerce-admin/package.json

@@ -12,7 +12,6 @@
 		"analyze": "cross-env NODE_ENV=production ANALYZE=true webpack",
 		"prebuild": "pnpm run install-if-deps-outdated",
 		"build": "WC_ADMIN_PHASE=core pnpm run build:feature-config && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack",
-		"build-storybook": "build-storybook  -c ./storybook/.storybook",
 		"build:feature-config": "php ../woocommerce/bin/generate-feature-config.php",
 		"build:packages": "cross-env NODE_ENV=production pnpm run:packages -- build",
 		"clean": "rimraf ../woocommerce/assets/client/admin/* && pnpm run:packages -- clean --parallel",
@@ -44,8 +43,6 @@
 		"prestart": "pnpm run install-if-deps-outdated",
 		"start": "cross-env WC_ADMIN_PHASE=development pnpm run build:packages && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm run:packages -- start --parallel\"",
 		"start:package": "pnpm run:packages -- start --parallel",
-		"storybook": "./bin/import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true start-storybook -c ./storybook/.storybook -p 6007 --ci",
-		"storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook",
 		"pretest": "pnpm run -s install-if-no-packages",
 		"test": "pnpm nx build @woocommerce/js-tests && pnpm run test:client",
 		"test-staged": "pnpm run test:client -- --bail --findRelatedTests",
@@ -121,23 +118,6 @@
 		"@babel/preset-typescript": "^7.16.7",
 		"@babel/runtime": "^7.17.2",
 		"@octokit/core": "^3.5.1",
-		"@storybook/addon-a11y": "^6.4.19",
-		"@storybook/addon-actions": "^6.4.19",
-		"@storybook/addon-console": "^1.2.3",
-		"@storybook/addon-controls": "^6.4.19",
-		"@storybook/addon-docs": "^6.4.19",
-		"@storybook/addon-knobs": "^6.4.0",
-		"@storybook/addon-links": "^6.4.19",
-		"@storybook/addon-storysource": "^6.4.19",
-		"@storybook/addon-viewport": "^6.4.19",
-		"@storybook/addons": "^6.4.19",
-		"@storybook/api": "^6.4.19",
-		"@storybook/builder-webpack5": "^6.4.19",
-		"@storybook/components": "^6.4.19",
-		"@storybook/core-events": "^6.4.19",
-		"@storybook/manager-webpack5": "^6.4.19",
-		"@storybook/react": "^6.4.19",
-		"@storybook/theming": "^6.4.19",
 		"@testing-library/dom": "^8.11.3",
 		"@testing-library/jest-dom": "^5.16.2",
 		"@testing-library/react": "^12.1.3",

plugins/woocommerce-admin/webpack.config.js

@@ -140,7 +140,7 @@ const webpackConfig = {
 	plugins: [
 		...styleConfig.plugins,
 		// Runs TypeScript type checker on a separate process.
-		new ForkTsCheckerWebpackPlugin(),
+		! process.env.STORYBOOK && new ForkTsCheckerWebpackPlugin(),
 		new CustomTemplatedPathPlugin( {
 			modulename( outputPath, data ) {
 				const entryName = get( data, [ 'chunk', 'name' ] );

plugins/woocommerce/bin/build-zip.sh

@@ -16,7 +16,8 @@ echo "Running JS Build..."
 pnpm run build || exit "$?"
 echo "Cleaning up PHP dependencies..."
 composer install --no-dev || exit "$?"
-
+echo "Run makepot..."
+composer run-script makepot || exit "$?"
 echo "Syncing files..."
 rsync -rc --exclude-from="$PROJECT_PATH/.distignore" "$PROJECT_PATH/" "$DEST_PATH/" --delete --delete-excluded
 

plugins/woocommerce/changelog/add-32772-exp-product-tasks-feature-flag

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add experimental product task feature flag & experimental-products component

plugins/woocommerce/changelog/add-32789-add-experimental-import-products

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add experimental import product task feature flag & experimental-import products component

plugins/woocommerce/changelog/add-product-stack

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add experimental product stack component

plugins/woocommerce/changelog/fix-32028-settings-method-exists-fatal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix possible fatal error during install on PHP 8.x

plugins/woocommerce/changelog/fix-32754-inactive-downloads

@@ -0,0 +1,5 @@
+Significance: patch
+Type: tweak
+Comment: We're adding extra protections to a newly introduced feature; a further changelog entry is not needed.
+
+

plugins/woocommerce/changelog/fix-e2e-tests

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Related to QOL
+
+

plugins/woocommerce/changelog/fix-hook_removal_from_32460

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: This fixes a bug that was introduced in a PR targetting the same Woo version.
+
+

plugins/woocommerce/changelog/fix-storybook-location

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Move Storybook to better monorepo location

plugins/woocommerce/changelog/pr-31788

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add formatting rules for Latvian postcodes.

plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.3

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update to WooCommerce Blocks 7.4.3

plugins/woocommerce/client/admin/config/core.json

@@ -4,13 +4,15 @@
 		"analytics": true,
 		"coupons": true,
 		"customer-effort-score-tracks": true,
+		"experimental-products-task": false,
+		"experimental-import-products-task": false,
 		"homescreen": true,
 		"marketing": true,
 		"minified-js": false,
 		"mobile-app-banner": true,
 		"navigation": true,
 		"onboarding": true,
-	  	"onboarding-tasks": true,
+		"onboarding-tasks": true,
 		"remote-inbox-notifications": true,
 		"remote-free-extensions": true,
 		"payment-gateway-suggestions": true,

plugins/woocommerce/client/admin/config/development.json

@@ -4,13 +4,15 @@
 		"analytics": true,
 		"coupons": true,
 		"customer-effort-score-tracks": true,
+		"experimental-products-task": false,
+		"experimental-import-products-task": false,
 		"homescreen": true,
 		"marketing": true,
 		"minified-js": true,
 		"mobile-app-banner": true,
 		"navigation": true,
 		"onboarding": true,
-	  	"onboarding-tasks": true,
+		"onboarding-tasks": true,
 		"payment-gateway-suggestions": true,
 		"remote-inbox-notifications": true,
 		"remote-free-extensions": true,

plugins/woocommerce/composer.json

@@ -21,7 +21,7 @@
 		"pelago/emogrifier": "^6.0",
 		"psr/container": "1.0.0",
 		"woocommerce/action-scheduler": "3.4.0",
-		"woocommerce/woocommerce-blocks": "7.4.1"
+		"woocommerce/woocommerce-blocks": "7.4.3"
 	},
 	"require-dev": {
 		"bamarni/composer-bin-plugin": "^1.4",

plugins/woocommerce/composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "03a229b123645dbf035c87685be1043a",
+    "content-hash": "2304bec8ba9ea1f4eeba718d2afe0f5d",
     "packages": [
         {
             "name": "automattic/jetpack-autoloader",
@@ -681,16 +681,16 @@
         },
         {
             "name": "woocommerce/woocommerce-blocks",
-            "version": "v7.4.1",
+            "version": "v7.4.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/woocommerce/woocommerce-gutenberg-products-block.git",
-                "reference": "bde2a5771ddc7970c2114da621c28b0f7b6296ca"
+                "reference": "5bba24fdaf41166a4ad24a1a45758e5ec7e8625c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/woocommerce/woocommerce-gutenberg-products-block/zipball/bde2a5771ddc7970c2114da621c28b0f7b6296ca",
+                "url": "https://api.github.com/repos/woocommerce/woocommerce-gutenberg-products-block/zipball/5bba24fdaf41166a4ad24a1a45758e5ec7e8625c",
-                "reference": "bde2a5771ddc7970c2114da621c28b0f7b6296ca",
+                "reference": "5bba24fdaf41166a4ad24a1a45758e5ec7e8625c",
                 "shasum": ""
             },
             "require": {
@@ -734,9 +734,9 @@
             ],
             "support": {
                 "issues": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues",
-                "source": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/v7.4.1"
+                "source": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/v7.4.3"
             },
-            "time": "2022-04-14T16:44:52+00:00"
+            "time": "2022-04-27T12:18:37+00:00"
         }
     ],
     "packages-dev": [
@@ -3021,5 +3021,5 @@
     "platform-overrides": {
         "php": "7.2"
     },
-    "plugin-api-version": "2.1.0"
+    "plugin-api-version": "2.2.0"
 }

plugins/woocommerce/includes/admin/importers/class-wc-product-csv-importer-controller.php

@@ -91,12 +91,6 @@ class WC_Product_CSV_Importer_Controller {
 	 * @return bool
 	 */
 	public static function is_file_valid_csv( $file, $check_path = true ) {
-		/**
-		 * Can be used to override the decision to check the import file path.
-		 *
-		 * @param bool   $check_import_file_path If the import file path should be checked.
-		 * @param string $file                   Path of the file to be checked.
-		 */
 		return wc_is_file_valid_csv( $file, $check_path );
 	}
 

plugins/woocommerce/includes/class-wc-deprecated-filter-hooks.php

@@ -21,43 +21,44 @@ class WC_Deprecated_Filter_Hooks extends WC_Deprecated_Hooks {
 	 * @var array
 	 */
 	protected $deprecated_hooks = array(
-		'woocommerce_structured_data_order'          => 'woocommerce_email_order_schema_markup',
+		'woocommerce_structured_data_order'               => 'woocommerce_email_order_schema_markup',
-		'woocommerce_add_to_cart_fragments'          => 'add_to_cart_fragments',
+		'woocommerce_add_to_cart_fragments'               => 'add_to_cart_fragments',
-		'woocommerce_add_to_cart_redirect'           => 'add_to_cart_redirect',
+		'woocommerce_add_to_cart_redirect'                => 'add_to_cart_redirect',
-		'woocommerce_product_get_width'              => 'woocommerce_product_width',
+		'woocommerce_product_get_width'                   => 'woocommerce_product_width',
-		'woocommerce_product_get_height'             => 'woocommerce_product_height',
+		'woocommerce_product_get_height'                  => 'woocommerce_product_height',
-		'woocommerce_product_get_length'             => 'woocommerce_product_length',
+		'woocommerce_product_get_length'                  => 'woocommerce_product_length',
-		'woocommerce_product_get_weight'             => 'woocommerce_product_weight',
+		'woocommerce_product_get_weight'                  => 'woocommerce_product_weight',
-		'woocommerce_product_get_sku'                => 'woocommerce_get_sku',
+		'woocommerce_product_get_sku'                     => 'woocommerce_get_sku',
-		'woocommerce_product_get_price'              => 'woocommerce_get_price',
+		'woocommerce_product_get_price'                   => 'woocommerce_get_price',
-		'woocommerce_product_get_regular_price'      => 'woocommerce_get_regular_price',
+		'woocommerce_product_get_regular_price'           => 'woocommerce_get_regular_price',
-		'woocommerce_product_get_sale_price'         => 'woocommerce_get_sale_price',
+		'woocommerce_product_get_sale_price'              => 'woocommerce_get_sale_price',
-		'woocommerce_product_get_tax_class'          => 'woocommerce_product_tax_class',
+		'woocommerce_product_get_tax_class'               => 'woocommerce_product_tax_class',
-		'woocommerce_product_get_stock_quantity'     => 'woocommerce_get_stock_quantity',
+		'woocommerce_product_get_stock_quantity'          => 'woocommerce_get_stock_quantity',
-		'woocommerce_product_get_attributes'         => 'woocommerce_get_product_attributes',
+		'woocommerce_product_get_attributes'              => 'woocommerce_get_product_attributes',
-		'woocommerce_product_get_gallery_image_ids'  => 'woocommerce_product_gallery_attachment_ids',
+		'woocommerce_product_get_gallery_image_ids'       => 'woocommerce_product_gallery_attachment_ids',
-		'woocommerce_product_get_review_count'       => 'woocommerce_product_review_count',
+		'woocommerce_product_get_review_count'            => 'woocommerce_product_review_count',
-		'woocommerce_product_get_downloads'          => 'woocommerce_product_files',
+		'woocommerce_product_get_downloads'               => 'woocommerce_product_files',
-		'woocommerce_order_get_currency'             => 'woocommerce_get_currency',
+		'woocommerce_order_get_currency'                  => 'woocommerce_get_currency',
-		'woocommerce_order_get_discount_total'       => 'woocommerce_order_amount_discount_total',
+		'woocommerce_order_get_discount_total'            => 'woocommerce_order_amount_discount_total',
-		'woocommerce_order_get_discount_tax'         => 'woocommerce_order_amount_discount_tax',
+		'woocommerce_order_get_discount_tax'              => 'woocommerce_order_amount_discount_tax',
-		'woocommerce_order_get_shipping_total'       => 'woocommerce_order_amount_shipping_total',
+		'woocommerce_order_get_shipping_total'            => 'woocommerce_order_amount_shipping_total',
-		'woocommerce_order_get_shipping_tax'         => 'woocommerce_order_amount_shipping_tax',
+		'woocommerce_order_get_shipping_tax'              => 'woocommerce_order_amount_shipping_tax',
-		'woocommerce_order_get_cart_tax'             => 'woocommerce_order_amount_cart_tax',
+		'woocommerce_order_get_cart_tax'                  => 'woocommerce_order_amount_cart_tax',
-		'woocommerce_order_get_total'                => 'woocommerce_order_amount_total',
+		'woocommerce_order_get_total'                     => 'woocommerce_order_amount_total',
-		'woocommerce_order_get_total_tax'            => 'woocommerce_order_amount_total_tax',
+		'woocommerce_order_get_total_tax'                 => 'woocommerce_order_amount_total_tax',
-		'woocommerce_order_get_total_discount'       => 'woocommerce_order_amount_total_discount',
+		'woocommerce_order_get_total_discount'            => 'woocommerce_order_amount_total_discount',
-		'woocommerce_order_get_subtotal'             => 'woocommerce_order_amount_subtotal',
+		'woocommerce_order_get_subtotal'                  => 'woocommerce_order_amount_subtotal',
-		'woocommerce_order_get_tax_totals'           => 'woocommerce_order_tax_totals',
+		'woocommerce_order_get_tax_totals'                => 'woocommerce_order_tax_totals',
-		'woocommerce_get_order_refund_get_amount'    => 'woocommerce_refund_amount',
+		'woocommerce_get_order_refund_get_amount'         => 'woocommerce_refund_amount',
-		'woocommerce_get_order_refund_get_reason'    => 'woocommerce_refund_reason',
+		'woocommerce_get_order_refund_get_reason'         => 'woocommerce_refund_reason',
-		'default_checkout_billing_country'           => 'default_checkout_country',
+		'default_checkout_billing_country'                => 'default_checkout_country',
-		'default_checkout_billing_state'             => 'default_checkout_state',
+		'default_checkout_billing_state'                  => 'default_checkout_state',
-		'default_checkout_billing_postcode'          => 'default_checkout_postcode',
+		'default_checkout_billing_postcode'               => 'default_checkout_postcode',
-		'woocommerce_system_status_environment_rows' => 'woocommerce_debug_posting',
+		'woocommerce_system_status_environment_rows'      => 'woocommerce_debug_posting',
-		'woocommerce_credit_card_type_labels'        => 'wocommerce_credit_card_type_labels',
+		'woocommerce_credit_card_type_labels'             => 'wocommerce_credit_card_type_labels',
-		'woocommerce_settings_tabs_advanced'         => 'woocommerce_settings_tabs_api',
+		'woocommerce_settings_tabs_advanced'              => 'woocommerce_settings_tabs_api',
-		'woocommerce_settings_advanced'              => 'woocommerce_settings_api',
+		'woocommerce_settings_advanced'                   => 'woocommerce_settings_api',
+		'woocommerce_csv_importer_check_import_file_path' => 'woocommerce_product_csv_importer_check_import_file_path',
 	);
 
 	/**
@@ -103,6 +104,7 @@ class WC_Deprecated_Filter_Hooks extends WC_Deprecated_Hooks {
 		'wocommerce_credit_card_type_labels'         => '3.0.0',
 		'woocommerce_settings_tabs_api'              => '3.4.0',
 		'woocommerce_settings_api'                   => '3.4.0',
+		'woocommerce_product_csv_importer_check_import_file_path' => '6.5.0',
 	);
 
 	/**

plugins/woocommerce/includes/class-wc-download-handler.php

@@ -31,11 +31,21 @@ class WC_Download_Handler {
 	 * Check if we need to download a file and check validity.
 	 */
 	public static function download_product() {
+		// phpcs:disable WordPress.Security.NonceVerification.Recommended
 		$product_id = absint( $_GET['download_file'] ); // phpcs:ignore WordPress.VIP.SuperGlobalInputUsage.AccessDetected, WordPress.VIP.ValidatedSanitizedInput.InputNotValidated, WordPress.Security.ValidatedSanitizedInput.InputNotValidated
 		$product    = wc_get_product( $product_id );
+		$downloads  = $product ? $product->get_downloads() : array();
 		$data_store = WC_Data_Store::load( 'customer-download' );
 
-		if ( ! $product || empty( $_GET['key'] ) || empty( $_GET['order'] ) ) { // WPCS: input var ok, CSRF ok.
+		$key = empty( $_GET['key'] ) ? '' : sanitize_text_field( wp_unslash( $_GET['key'] ) );
+
+		if (
+			! $product
+			|| empty( $key )
+			|| empty( $_GET['order'] )
+			|| ! isset( $downloads[ $key ] )
+			|| ! $downloads[ $key ]->get_enabled()
+		) {
 			self::download_error( __( 'Invalid download link.', 'woocommerce' ) );
 		}
 
@@ -43,6 +53,7 @@ class WC_Download_Handler {
 		if ( empty( $_GET['email'] ) && empty( $_GET['uid'] ) ) { // WPCS: input var ok, CSRF ok.
 			self::download_error( __( 'Invalid download link.', 'woocommerce' ) );
 		}
+		// phpcs:enable WordPress.Security.NonceVerification.Recommended
 
 		$order_id = wc_get_order_id_by_order_key( wc_clean( wp_unslash( $_GET['order'] ) ) ); // WPCS: input var ok, CSRF ok.
 		$order    = wc_get_order( $order_id );
@@ -654,10 +665,14 @@ class WC_Download_Handler {
 		 * Since we will now render a message instead of serving a download, we should unwind some of the previously set
 		 * headers.
 		 */
-		header( 'Content-Type: ' . get_option( 'html_type' ) . '; charset=' . get_option( 'blog_charset' ) );
+		if ( headers_sent() ) {
-		header_remove( 'Content-Description;' );
+			wc_get_logger()->log( 'warning', __( 'Headers already sent when generating download error message.', 'woocommerce' ) );
-		header_remove( 'Content-Disposition' );
+		} else {
-		header_remove( 'Content-Transfer-Encoding' );
+			header( 'Content-Type: ' . get_option( 'html_type' ) . '; charset=' . get_option( 'blog_charset' ) );
+			header_remove( 'Content-Description;' );
+			header_remove( 'Content-Disposition' );
+			header_remove( 'Content-Transfer-Encoding' );
+		}
 
 		if ( ! strstr( $message, '<a ' ) ) {
 			$message .= ' <a href="' . esc_url( wc_get_page_permalink( 'shop' ) ) . '" class="wc-forward">' . esc_html__( 'Go to shop', 'woocommerce' ) . '</a>';

plugins/woocommerce/includes/class-wc-install.php

@@ -702,7 +702,7 @@ class WC_Install {
 		$settings = WC_Admin_Settings::get_settings_pages();
 
 		foreach ( $settings as $section ) {
-			if ( ! method_exists( $section, 'get_settings' ) ) {
+			if ( ! is_a( $section, 'WC_Settings_Page' ) || ! method_exists( $section, 'get_settings' ) ) {
 				continue;
 			}
 			$subsections = array_unique( array_merge( array( '' ), array_keys( $section->get_sections() ) ) );

plugins/woocommerce/includes/wc-formatting-functions.php

@@ -993,6 +993,11 @@ function wc_format_postcode( $postcode, $country ) {
 		case 'NL':
 			$postcode = substr_replace( $postcode, ' ', 4, 0 );
 			break;
+		case 'LV':
+			if ( preg_match( '/(?:LV)?-?(\d+)/i', $postcode, $matches ) ) {
+				$postcode = count( $matches ) >= 2 ? "LV-$matches[1]" : $postcode;
+			}
+			break;
 	}
 
 	return apply_filters( 'woocommerce_format_postcode', trim( $postcode ), $country );

plugins/woocommerce/package.json

@@ -14,7 +14,7 @@
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "build": "WC_ADMIN_PHASE=core pnpm run build:feature-config && pnpm nx build woocommerce-admin && pnpm nx build woocommerce-legacy-assets && pnpm run makepot",
+    "build": "WC_ADMIN_PHASE=core pnpm run build:feature-config && pnpm nx build woocommerce-admin && pnpm nx build woocommerce-legacy-assets",
     "build:feature-config": "php bin/generate-feature-config.php",
     "build:zip": "./bin/build-zip.sh",
     "lint:js": "eslint assets/js --ext=js",

plugins/woocommerce/tests/e2e/README.md

@@ -88,6 +88,8 @@ The jest test sequencer uses the following test variables:
 
 If you need to modify the port for your local test environment (eg. port is already in use), edit `tests/e2e/config/default.json`. Only edit this file while your test container is `down`.
 
+This is also what you'll need to edit if you want to run tests against an external (or non-Docker) environment.  There are a few additional steps you'll have to take to ensure your environment is ready for testing. Complete [instructions are available here](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/e2e-environment/external.md).
+
 ### Jest test sequencer
 
 [Jest](https://jestjs.io/) is being used to run e2e tests. Jest sequencer introduces tools that can be used to specify the order in which the tests are being run. In our case, they are being run in alphabetical order of the directories where tests are located. This way, tests in the directory `activate-and-setup` will run first. By default, jest runs tests ordered by the time it takes to run the test (the test that takes longer to run will be run first, the test that takes less time to run will run last).

plugins/woocommerce/tests/e2e/config/default.json

@@ -1,5 +1,5 @@
 {
-  "url": "http://localhost:8084/",
+  "url": "http://localhost:8086/",
   "users": {
     "admin": {
       "username": "admin",

plugins/woocommerce/tests/legacy/unit-tests/formatting/functions.php

@@ -803,6 +803,12 @@ class WC_Tests_Formatting_Functions extends WC_Unit_Test_Case {
 
 		// Test empty NL postcode.
 		$this->assertEquals( '', wc_format_postcode( '', 'NL' ) );
+
+		// Test LV postcode without mandatory country code.
+		$this->assertEquals( 'LV-1337', wc_format_postcode( '1337', 'LV' ) );
+
+		// Test LV postcode with incorrect format (no dash).
+		$this->assertEquals( 'LV-1337', wc_format_postcode( 'lv1337', 'LV' ) );
 	}
 
 	/**

plugins/woocommerce/tests/performance/config.js

@@ -1,5 +1,5 @@
-export const base_url = __ENV.URL || 'http://localhost:8084';
+export const base_url = __ENV.URL || 'http://localhost:8086';
-export const base_host = __ENV.HOST || 'localhost:8084';
+export const base_host = __ENV.HOST || 'localhost:8086';
 
 export const admin_username = __ENV.A_USER || 'admin';
 export const admin_password = __ENV.A_PW || 'password';

plugins/woocommerce/tests/php/includes/class-wc-download-handler-tests.php

@@ -1,5 +1,7 @@
 <?php
 
+use Automattic\WooCommerce\Internal\ProductDownloads\ApprovedDirectories\Register as Approved_Directories;
+
 /**
  * Class WC_Download_Handler_Tests.
  */
@@ -9,7 +11,7 @@ class WC_Download_Handler_Tests extends \WC_Unit_Test_Case {
 	 * Test for local file path.
 	 */
 	public function test_parse_file_path_for_local_file() {
-		$local_file_path = trailingslashit( wp_upload_dir()['basedir'] ) . 'dummy_file.jpg';
+		$local_file_path  = trailingslashit( wp_upload_dir()['basedir'] ) . 'dummy_file.jpg';
 		$parsed_file_path = WC_Download_Handler::parse_file_path( $local_file_path );
 		$this->assertFalse( $parsed_file_path['remote_file'] );
 	}
@@ -18,7 +20,7 @@ class WC_Download_Handler_Tests extends \WC_Unit_Test_Case {
 	 * Test for local URL without protocol.
 	 */
 	public function test_parse_file_path_for_local_url() {
-		$local_file_path = trailingslashit( wp_upload_dir()['baseurl'] ) . 'dummy_file.jpg';
+		$local_file_path  = trailingslashit( wp_upload_dir()['baseurl'] ) . 'dummy_file.jpg';
 		$parsed_file_path = WC_Download_Handler::parse_file_path( $local_file_path );
 		$this->assertFalse( $parsed_file_path['remote_file'] );
 	}
@@ -27,7 +29,7 @@ class WC_Download_Handler_Tests extends \WC_Unit_Test_Case {
 	 * Test for local file with `file` protocol.
 	 */
 	public function test_parse_file_path_for_local_file_protocol() {
-		$local_file_path = 'file:/' . trailingslashit( wp_upload_dir()['basedir'] ) . 'dummy_file.jpg';
+		$local_file_path  = 'file:/' . trailingslashit( wp_upload_dir()['basedir'] ) . 'dummy_file.jpg';
 		$parsed_file_path = WC_Download_Handler::parse_file_path( $local_file_path );
 		$this->assertFalse( $parsed_file_path['remote_file'] );
 	}
@@ -36,7 +38,7 @@ class WC_Download_Handler_Tests extends \WC_Unit_Test_Case {
 	 * Test for local file with https protocom.
 	 */
 	public function test_parse_file_path_for_local_file_https_protocol() {
-		$local_file_path = site_url( '/', 'https' ) . 'dummy_file.jpg';
+		$local_file_path  = site_url( '/', 'https' ) . 'dummy_file.jpg';
 		$parsed_file_path = WC_Download_Handler::parse_file_path( $local_file_path );
 		$this->assertFalse( $parsed_file_path['remote_file'] );
 	}
@@ -49,4 +51,109 @@ class WC_Download_Handler_Tests extends \WC_Unit_Test_Case {
 		$parsed_file_path = WC_Download_Handler::parse_file_path( $remote_file_path );
 		$this->assertTrue( $parsed_file_path['remote_file'] );
 	}
+
+	/**
+	 * @testdox Customers may not use a direct download link to obtain a downloadable file that has been disabled.
+	 */
+	public function test_inactive_downloads_will_not_be_served() {
+		self::remove_download_handlers();
+		$downloads_served = 0;
+
+		$download_counter = function () use ( &$downloads_served ) {
+			$downloads_served++;
+		};
+
+		// Track downloads served.
+		add_action( 'woocommerce_download_file_force', $download_counter );
+
+		/**
+		 * @var Approved_Directories $approved_directories
+		 */
+		$approved_directories = wc_get_container()->get( Approved_Directories::class );
+		$approved_directories->set_mode( Approved_Directories::MODE_ENABLED );
+		$approved_directories->add_approved_directory( 'https://always.trusted' );
+		$approved_directory_rule_id = $approved_directories->add_approved_directory( 'https://new.supplier' );
+
+		$product = WC_Helper_Product::create_downloadable_product(
+			array(
+				array(
+					'name' => 'Book 1',
+					'file' => 'https://always.trusted/123.pdf',
+				),
+				array(
+					'name' => 'Book 2',
+					'file' => 'https://new.supplier/456.pdf',
+				),
+			)
+		);
+
+		$customer = WC_Helper_Customer::create_customer();
+		$email    = 'admin@example.org';
+		$order    = WC_Helper_Order::create_order( $customer->get_id(), $product );
+		$order->set_status( 'completed' );
+		$order->save();
+
+		$product_id    = $product->get_id();
+		$downloads     = $product->get_downloads();
+		$download_keys = array_keys( $downloads );
+
+		// phpcs:disable WordPress.Security.NonceVerification.Recommended WordPress.Security.ValidatedSanitizedInput.InputNotValidated
+		$_GET = array(
+			'download_file' => $product_id,
+			'order'         => $order->get_order_key(),
+			'email'         => $email,
+			'uid'           => hash( 'sha256', $email ),
+			'key'           => $download_keys[0],
+		);
+
+		// With both the corresponding approved directory rules enabled...
+		WC_Download_Handler::download_product();
+		$this->assertEquals( 1, $downloads_served, 'Can successfully download "Book 1".' );
+
+		$_GET['key'] = $download_keys[1];
+		WC_Download_Handler::download_product();
+		$this->assertEquals( 2, $downloads_served, 'Can successfully download "Book 2".' );
+
+		// And now with one of the approved directory rules disabled...
+		$approved_directories->disable_by_id( $approved_directory_rule_id );
+		$_GET['key']     = $download_keys[1];
+		$wp_die_happened = false;
+
+		// We do not use expectException() here because we wish to continue testing after wp_die() has
+		// been triggered inside WC_Download_Handler::download_error().
+		try {
+			WC_Download_Handler::download_product();
+		} catch ( WPDieException $e ) {
+			$wp_die_happened = true;
+		}
+
+		$this->assertTrue( $wp_die_happened );
+		$this->assertEquals( 2, $downloads_served, 'Downloading "Book 2" failed after the corresponding approved directory rule was disabled.' );
+
+		$_GET['key'] = $download_keys[0];
+		WC_Download_Handler::download_product();
+		$this->assertEquals( 3, $downloads_served, 'Continued to be able to download "Book 1" (the corresponding rule never having been disabled.' );
+
+		// Cleanup.
+		add_action( 'woocommerce_download_file_force', $download_counter );
+		self::restore_download_handlers();
+	}
+
+	/**
+	 * Unregister download handlers to prevent unwanted output and side-effects.
+	 */
+	private static function remove_download_handlers() {
+		remove_action( 'woocommerce_download_file_xsendfile', array( WC_Download_Handler::class, 'download_file_xsendfile' ) );
+		remove_action( 'woocommerce_download_file_redirect', array( WC_Download_Handler::class, 'download_file_redirect' ) );
+		remove_action( 'woocommerce_download_file_force', array( WC_Download_Handler::class, 'download_file_force' ) );
+	}
+
+	/**
+	 * Restores download handlers in case needed by other tests.
+	 */
+	private static function restore_download_handlers() {
+		add_action( 'woocommerce_download_file_redirect', array( WC_Download_Handler::class, 'download_file_redirect' ), 10, 2 );
+		add_action( 'woocommerce_download_file_xsendfile', array( WC_Download_Handler::class, 'download_file_xsendfile' ), 10, 2 );
+		add_action( 'woocommerce_download_file_force', array( WC_Download_Handler::class, 'download_file_force' ), 10, 2 );
+	}
 }

tools/storybook/.storybook/main.js

@@ -6,10 +6,10 @@ module.exports = {
 	},
 	stories: [
 		// WooCommerce Admin / @woocommerce/components components
-		'../../../../packages/js/components/src/**/stories/*.@(js|tsx)',
+		'../../../packages/js/components/src/**/stories/*.@(js|tsx)',
 		// WooCommerce Admin / @woocommerce/experimental components
-		'../../../../packages/js/experimental/src/**/stories/*.@(js|tsx)',
+		'../../../packages/js/experimental/src/**/stories/*.@(js|tsx)',
-		'../../client/**/stories/*.js',
+		'../../../plugins/woocommerce-admin/client/**/stories/*.js',
 	],
 	addons: [
 		'@storybook/addon-docs',

tools/storybook/webpack.config.js

@@ -7,7 +7,7 @@ const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 /**
  * External dependencies
  */
-const wcAdminWebpackConfig = require( '../webpack.config.js' );
+const wcAdminWebpackConfig = require( '../../plugins/woocommerce-admin/webpack.config.js' );
 
 const wcAdminPackages = [
 	'components',
@@ -25,21 +25,6 @@ module.exports = ( storybookConfig ) => {
 	storybookConfig.module.rules = [
 		...storybookConfig.module.rules,
 		...wcAdminWebpackConfig.module.rules,
-		// We need to expose packages in "peerDependencies" to the global scope for @woocommerce/* to resolve packages.
-		{
-			test: require.resolve( 'moment' ),
-			loader: 'expose-loader',
-			options: {
-				exposes: [ 'moment' ],
-			},
-		},
-		{
-			test: require.resolve( '@wordpress/data' ),
-			loader: 'expose-loader',
-			options: {
-				exposes: [ '_wp_data' ],
-			},
-		},
 	];
 
 	storybookConfig.resolve.alias = wcAdminWebpackConfig.resolve.alias;
@@ -47,7 +32,7 @@ module.exports = ( storybookConfig ) => {
 	wcAdminPackages.forEach( ( name ) => {
 		storybookConfig.resolve.alias[
 			`@woocommerce/${ name }`
-		] = path.resolve( __dirname, `../../../packages/js/${ name }/src` );
+		] = path.resolve( __dirname, `../../packages/js/${ name }/src` );
 	} );
 
 	storybookConfig.resolve.alias[ '@woocommerce/settings' ] = path.resolve(
@@ -56,7 +41,7 @@ module.exports = ( storybookConfig ) => {
 	);
 
 	storybookConfig.resolve.modules = [
-		path.join( __dirname, '../client' ),
+		path.join( __dirname, '../../plugins/woocommerce-admin/client' ),
 		'node_modules',
 	];
 
@@ -71,14 +56,14 @@ module.exports = ( storybookConfig ) => {
 				{
 					from: path.resolve(
 						__dirname,
-						`../../../packages/js/components/build-style/*.css`
+						`../../packages/js/components/build-style/*.css`
 					),
 					to: `./component-css/[name][ext]`,
 				},
 				{
 					from: path.resolve(
 						__dirname,
-						`../../../packages/js/experimental/build-style/*.css`
+						`../../packages/js/experimental/build-style/*.css`
 					),
 					to: `./experimental-css/[name][ext]`,
 				},
@@ -86,10 +71,5 @@ module.exports = ( storybookConfig ) => {
 		} )
 	);
 
-	storybookConfig.externals = {
-		'@wordpress/data': '_wp_data',
-		moment: 'moment',
-	};
-
 	return storybookConfig;
 };

tools/storybook/wordpress/css/admin-menu-rtl.css

@@ -0,0 +1,944 @@
+/*! This file is auto-generated */
+#adminmenuback,
+#adminmenuwrap,
+#adminmenu,
+#adminmenu .wp-submenu {
+	width: 160px;
+	background-color: #1d2327;
+}
+
+#adminmenuback {
+	position: fixed;
+	top: 0;
+	bottom: -120px;
+	z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */
+}
+
+.php-error #adminmenuback {
+	position: absolute;
+}
+
+.php-error #adminmenuback,
+.php-error #adminmenuwrap {
+	margin-top: 2em;
+}
+
+#adminmenu {
+	clear: right;
+	margin: 12px 0;
+	padding: 0;
+	list-style: none;
+}
+
+.folded #adminmenuback,
+.folded #adminmenuwrap,
+.folded #adminmenu,
+.folded #adminmenu li.menu-top {
+	width: 36px;
+}
+
+.icon16 {
+	height: 18px;
+	width: 18px;
+	padding: 6px;
+	margin: -6px -8px 0 0;
+	float: right;
+}
+
+/* New Menu icons */
+
+.icon16:before {
+	color: #8c8f94; /* same as new icons */
+	font: normal 20px/1 dashicons;
+	speak: never;
+	padding: 6px 0;
+	height: 34px;
+	width: 20px;
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	transition: all .1s ease-in-out;
+}
+
+.icon16.icon-dashboard:before {
+	content: "\f226";
+}
+
+.icon16.icon-post:before {
+	content: "\f109";
+}
+
+.icon16.icon-media:before {
+	content: "\f104";
+}
+
+.icon16.icon-links:before {
+	content: "\f103";
+}
+
+.icon16.icon-page:before {
+	content: "\f105";
+}
+
+.icon16.icon-comments:before {
+	content: "\f101";
+	margin-top: 1px;
+}
+
+.icon16.icon-appearance:before {
+	content: "\f100";
+}
+
+.icon16.icon-plugins:before {
+	content: "\f106";
+}
+
+.icon16.icon-users:before {
+	content: "\f110";
+}
+
+.icon16.icon-tools:before {
+	content: "\f107";
+}
+
+.icon16.icon-settings:before {
+	content: "\f108";
+}
+
+.icon16.icon-site:before {
+	content: "\f541";
+}
+
+.icon16.icon-generic:before {
+	content: "\f111";
+}
+
+/* hide background-image for icons above */
+.icon16.icon-dashboard,
+.menu-icon-dashboard div.wp-menu-image,
+.icon16.icon-post,
+.menu-icon-post div.wp-menu-image,
+.icon16.icon-media,
+.menu-icon-media div.wp-menu-image,
+.icon16.icon-links,
+.menu-icon-links div.wp-menu-image,
+.icon16.icon-page,
+.menu-icon-page div.wp-menu-image,
+.icon16.icon-comments,
+.menu-icon-comments div.wp-menu-image,
+.icon16.icon-appearance,
+.menu-icon-appearance div.wp-menu-image,
+.icon16.icon-plugins,
+.menu-icon-plugins div.wp-menu-image,
+.icon16.icon-users,
+.menu-icon-users div.wp-menu-image,
+.icon16.icon-tools,
+.menu-icon-tools div.wp-menu-image,
+.icon16.icon-settings,
+.menu-icon-settings div.wp-menu-image,
+.icon16.icon-site,
+.menu-icon-site div.wp-menu-image,
+.icon16.icon-generic,
+.menu-icon-generic div.wp-menu-image {
+	background-image: none !important;
+}
+
+/*------------------------------------------------------------------------------
+  7.0 - Main Navigation (Left Menu)
+------------------------------------------------------------------------------*/
+
+#adminmenuwrap {
+	position: relative;
+	float: right;
+	z-index: 9990;
+}
+
+/* side admin menu */
+#adminmenu * {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+#adminmenu li {
+	margin: 0;
+	padding: 0;
+}
+
+#adminmenu a {
+	display: block;
+	line-height: 1.3;
+	padding: 2px 5px;
+	color: #f0f0f1;
+}
+
+#adminmenu .wp-submenu a {
+	color: #c3c4c7;
+	color: rgba(240, 246, 252, 0.7);
+	font-size: 13px;
+	line-height: 1.4;
+	margin: 0;
+	padding: 5px 0;
+}
+
+#adminmenu .wp-submenu a:hover,
+#adminmenu .wp-submenu a:focus {
+	background: none;
+}
+
+#adminmenu a:hover,
+#adminmenu li.menu-top > a:focus,
+#adminmenu .wp-submenu a:hover,
+#adminmenu .wp-submenu a:focus {
+	color: #72aee6;
+}
+
+#adminmenu a:hover,
+#adminmenu a:focus,
+.folded #adminmenu .wp-submenu-head:hover {
+	box-shadow: inset -4px 0 0 0 currentColor;
+	transition: box-shadow .1s linear;
+}
+
+#adminmenu li.menu-top {
+	border: none;
+	min-height: 34px;
+	position: relative;
+}
+
+#adminmenu .wp-submenu {
+	list-style: none;
+	position: absolute;
+	top: -1000em;
+	right: 160px;
+	overflow: visible;
+	word-wrap: break-word;
+	padding: 7px 0 8px;
+	z-index: 9999;
+	background-color: #2c3338;
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+}
+
+.js #adminmenu .sub-open,
+.js #adminmenu .opensub .wp-submenu,
+#adminmenu a.menu-top:focus + .wp-submenu,
+.no-js li.wp-has-submenu:hover .wp-submenu {
+	top: -1px;
+}
+
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
+	top: 0;
+}
+
+#adminmenu .wp-has-current-submenu .wp-submenu,
+.no-js li.wp-has-current-submenu:hover .wp-submenu,
+#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu {
+	position: relative;
+	z-index: 3;
+	top: auto;
+	right: auto;
+	left: auto;
+	bottom: auto;
+	border: 0 none;
+	margin-top: 0;
+	box-shadow: none;
+}
+
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */
+#adminmenu li.menu-top:hover,
+#adminmenu li.opensub > a.menu-top,
+#adminmenu li > a.menu-top:focus {
+	position: relative;
+	background-color: #1d2327;
+	color: #72aee6;
+}
+
+.folded #adminmenu li.menu-top:hover,
+.folded #adminmenu li.opensub > a.menu-top,
+.folded #adminmenu li > a.menu-top:focus {
+	z-index: 10000;
+}
+
+#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
+#adminmenu li.current a.menu-top,
+#adminmenu .wp-menu-arrow,
+#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
+#adminmenu .wp-menu-arrow div {
+	background: #2271b1;
+	color: #fff;
+}
+
+.folded #adminmenu .wp-submenu.sub-open,
+.folded #adminmenu .opensub .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+.folded #adminmenu a.menu-top:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
+.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
+	top: 0;
+	right: 36px;
+}
+
+.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+	position: absolute;
+	top: -1000em;
+}
+
+#adminmenu .wp-not-current-submenu .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+	min-width: 160px;
+	width: auto;
+	border-right: 5px solid transparent;
+}
+
+#adminmenu .wp-submenu li.current,
+#adminmenu .wp-submenu li.current a,
+#adminmenu .opensub .wp-submenu li.current a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
+#adminmenu .wp-submenu li.current a:hover,
+#adminmenu .wp-submenu li.current a:focus {
+	color: #fff;
+}
+
+#adminmenu .wp-not-current-submenu li > a,
+.folded #adminmenu .wp-has-current-submenu li > a {
+	padding-left: 16px;
+	padding-right: 14px;
+	/* Exclude from the transition the outline for Windows High Contrast mode */
+	transition: all .1s ease-in-out, outline 0s;
+}
+
+#adminmenu .wp-has-current-submenu ul > li > a,
+.folded #adminmenu li.menu-top .wp-submenu > li > a {
+	padding: 5px 12px;
+}
+
+#adminmenu a.menu-top,
+#adminmenu .wp-submenu-head {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.3;
+	padding: 0;
+}
+
+#adminmenu .wp-submenu-head {
+	display: none;
+}
+
+.folded #adminmenu .wp-menu-name {
+	position: absolute;
+	right: -999px;
+}
+
+.folded #adminmenu .wp-submenu-head {
+	display: block;
+}
+
+#adminmenu .wp-submenu li {
+	padding: 0;
+	margin: 0;
+}
+
+#adminmenu .wp-menu-image img {
+	padding: 9px 0 0;
+	opacity: 0.6;
+	filter: alpha(opacity=60);
+}
+
+#adminmenu div.wp-menu-name {
+	padding: 8px 36px 8px 8px;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	-ms-word-break: break-all;
+	word-break: break-word;
+	-webkit-hyphens: auto;
+	hyphens: auto;
+}
+
+#adminmenu div.wp-menu-image {
+	float: right;
+	width: 36px;
+	height: 34px;
+	margin: 0;
+	text-align: center;
+}
+
+#adminmenu div.wp-menu-image.svg {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 20px auto;
+}
+
+div.wp-menu-image:before {
+	color: #a7aaad;
+	color: rgba(240, 246, 252, 0.6);
+	padding: 7px 0;
+	transition: all .1s ease-in-out;
+}
+
+#adminmenu div.wp-menu-image:before {
+	color: #a7aaad;
+	color: rgba(240, 246, 252, 0.6);
+}
+
+#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
+#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
+#adminmenu .current div.wp-menu-image:before,
+#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
+#adminmenu a.current:hover div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
+	color: #fff;
+}
+
+#adminmenu li:hover div.wp-menu-image:before,
+#adminmenu li a:focus div.wp-menu-image:before,
+#adminmenu li.opensub div.wp-menu-image:before {
+	color: #72aee6;
+}
+
+.folded #adminmenu div.wp-menu-image {
+	width: 35px;
+	height: 30px;
+	position: absolute;
+	z-index: 25;
+}
+
+.folded #adminmenu a.menu-top {
+	height: 34px;
+}
+
+/* Sticky admin menu */
+.sticky-menu #adminmenuwrap {
+	position: fixed;
+}
+
+/* A new arrow */
+
+.wp-menu-arrow {
+	display: none !important;
+}
+
+ul#adminmenu a.wp-has-current-submenu {
+	position: relative;
+}
+
+ul#adminmenu a.wp-has-current-submenu:after,
+ul#adminmenu > li.current > a.current:after {
+	left: 0;
+	border: solid 8px transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-left-color: #f0f0f1;
+	top: 50%;
+	margin-top: -8px;
+}
+
+.folded ul#adminmenu li:hover a.wp-has-current-submenu:after,
+.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after {
+	display: none;
+}
+
+.folded ul#adminmenu a.wp-has-current-submenu:after,
+.folded ul#adminmenu > li a.current:after {
+	border-width: 4px;
+	margin-top: -4px;
+}
+
+/* flyout menu arrow */
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+	left: 0;
+	border: 8px solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	top: 10px;
+	z-index: 10000;
+}
+
+.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+	border-width: 4px;
+	margin-top: -4px;
+	top: 18px;
+}
+
+#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+	border-left-color: #2c3338;
+}
+
+#adminmenu li.menu-top:hover .wp-menu-image img,
+#adminmenu li.wp-has-current-submenu .wp-menu-image img {
+	opacity: 1;
+	filter: alpha(opacity=100);
+}
+
+#adminmenu li.wp-menu-separator {
+	height: 5px;
+	padding: 0;
+	margin: 0 0 6px;
+	cursor: inherit;
+}
+
+/* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */
+#adminmenu div.separator {
+	height: 2px;
+	padding: 0;
+}
+
+#adminmenu .wp-submenu .wp-submenu-head {
+	color: #fff;
+	font-weight: 400;
+	font-size: 14px;
+	padding: 5px 11px 5px 4px;
+	margin: -7px -5px 4px 0;
+	border-width: 3px 5px 3px 0;
+	border-style: solid;
+	border-color: transparent;
+}
+
+#adminmenu li.current,
+.folded #adminmenu li.wp-menu-open {
+	border: 0 none;
+}
+
+/* @todo: consider to use a single rule for these counters and the list table comments counters. */
+#adminmenu .awaiting-mod,
+#adminmenu .update-plugins {
+	display: inline-block;
+	vertical-align: top;
+	box-sizing: border-box;
+	margin: 1px 2px -1px 0;
+	padding: 0 5px;
+	min-width: 18px;
+	height: 18px;
+	border-radius: 9px;
+	background-color: #d63638;
+	color: #fff;
+	font-size: 11px;
+	line-height: 1.6;
+	text-align: center;
+	z-index: 26;
+}
+
+#adminmenu li.current a .awaiting-mod,
+#adminmenu li a.wp-has-current-submenu .update-plugins {
+	background-color: #d63638;
+	color: #fff;
+}
+
+#adminmenu li span.count-0 {
+	display: none;
+}
+
+#collapse-button {
+	display: block;
+	width: 100%;
+	height: 34px;
+	margin: 0;
+	border: none;
+	padding: 0;
+	position: relative;
+	overflow: visible;
+	background: none;
+	color: #a7aaad;
+	cursor: pointer;
+}
+
+#collapse-button:hover {
+	color: #72aee6;
+}
+
+#collapse-button:focus {
+	color: #72aee6;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
+	outline-offset: -1px;
+}
+
+#collapse-button .collapse-button-icon,
+#collapse-button .collapse-button-label {
+	/* absolutely positioned to avoid 1px shift in IE when button is pressed */
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#collapse-button .collapse-button-label {
+	top: 8px;
+}
+
+#collapse-button .collapse-button-icon {
+	width: 36px;
+	height: 34px;
+}
+
+#collapse-button .collapse-button-label {
+	padding: 0 36px 0 0;
+}
+
+.folded #collapse-button .collapse-button-label {
+	display: none;
+}
+
+#collapse-button .collapse-button-icon:after {
+	content: "\f148";
+	display: block;
+	position: relative;
+	top: 7px;
+	text-align: center;
+	font: normal 20px/1 dashicons !important;
+	speak: never;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* rtl:ignore */
+.folded #collapse-button .collapse-button-icon:after,
+.rtl #collapse-button .collapse-button-icon:after {
+	transform: rotate(180deg);
+}
+
+.rtl.folded #collapse-button .collapse-button-icon:after {
+	transform: none;
+}
+
+#collapse-button .collapse-button-icon:after,
+#collapse-button .collapse-button-label {
+	transition: all .1s ease-in-out;
+}
+
+/**
+ * Toolbar menu toggle
+ */
+li#wp-admin-bar-menu-toggle {
+	display: none;
+}
+
+/* Hide-if-customize for items we can't add classes to */
+.customize-support #menu-appearance a[href="themes.php?page=custom-header"],
+.customize-support #menu-appearance a[href="themes.php?page=custom-background"] {
+	display: none;
+}
+
+/* Auto-folding of the admin menu */
+@media only screen and (max-width: 960px) {
+	.auto-fold #wpcontent,
+	.auto-fold #wpfooter {
+		margin-right: 36px;
+	}
+
+	.auto-fold #adminmenuback,
+	.auto-fold #adminmenuwrap,
+	.auto-fold #adminmenu,
+	.auto-fold #adminmenu li.menu-top {
+		width: 36px;
+	}
+
+	.auto-fold #adminmenu .wp-submenu.sub-open,
+	.auto-fold #adminmenu .opensub .wp-submenu,
+	.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+	.auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+	.auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
+	.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
+		top: 0;
+		right: 36px;
+	}
+
+	.auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+	.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
+		position: absolute;
+		top: -1000em;
+		margin-left: -1px;
+		padding: 7px 0 8px;
+		z-index: 9999;
+	}
+
+	.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
+		min-width: 150px;
+		width: auto;
+	}
+
+	.auto-fold #adminmenu .wp-has-current-submenu li > a {
+		padding-left: 16px;
+		padding-right: 14px;
+	}
+
+
+	.auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
+		padding-right: 12px;
+	}
+
+	.auto-fold #adminmenu .wp-menu-name {
+		position: absolute;
+		right: -999px;
+	}
+
+	.auto-fold #adminmenu .wp-submenu-head {
+		display: block;
+	}
+
+	.auto-fold #adminmenu div.wp-menu-image {
+		height: 30px;
+		width: 34px;
+		position: absolute;
+		z-index: 25;
+	}
+
+	.auto-fold #adminmenu a.menu-top {
+		min-height: 34px;
+	}
+
+	.auto-fold #adminmenu li.wp-menu-open {
+		border: 0 none;
+	}
+
+	.auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
+		margin-bottom: 0;
+	}
+
+	.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after {
+		display: none;
+	}
+
+	.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+	.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+		border-width: 4px;
+		margin-top: -4px;
+		top: 16px;
+	}
+
+	.auto-fold ul#adminmenu a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu > li a.current:after {
+		border-width: 4px;
+		margin-top: -4px;
+	}
+
+	.auto-fold #adminmenu li.menu-top:hover,
+	.auto-fold #adminmenu li.opensub > a.menu-top,
+	.auto-fold #adminmenu li > a.menu-top:focus {
+		z-index: 10000;
+	}
+
+	.auto-fold #collapse-menu .collapse-button-label {
+		display: none;
+	}
+
+	/* rtl:ignore */
+	.auto-fold #collapse-button .collapse-button-icon:after {
+		transform: rotate(180deg);
+	}
+
+	.rtl.auto-fold #collapse-button .collapse-button-icon:after {
+		transform: none;
+	}
+
+}
+
+@media screen and (max-width: 782px) {
+	.auto-fold #wpcontent {
+		position: relative;
+		margin-right: 0;
+		padding-right: 10px;
+	}
+
+	.sticky-menu #adminmenuwrap {
+		position: relative;
+		z-index: auto;
+		top: 0;
+	}
+
+	/* Sidebar Adjustments */
+	.auto-fold #adminmenu,
+	.auto-fold #adminmenuback,
+	.auto-fold #adminmenuwrap {
+		position: absolute;
+		width: 190px;
+		z-index: 100;
+	}
+
+	.auto-fold #adminmenuback {
+		position: fixed;
+	}
+
+	.auto-fold #adminmenuback,
+	.auto-fold #adminmenuwrap {
+		display: none;
+	}
+
+	.auto-fold .wp-responsive-open #adminmenuback,
+	.auto-fold .wp-responsive-open #adminmenuwrap {
+		display: block;
+	}
+
+	.auto-fold #adminmenu li.menu-top {
+		width: 100%;
+	}
+
+	/* Resize the admin menu items to a comfortable touch size */
+	.auto-fold #adminmenu li a {
+		font-size: 16px;
+		padding: 5px;
+	}
+
+	.auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
+		padding: 10px 20px 10px 10px;
+	}
+
+	/* Restore the menu names */
+	.auto-fold #adminmenu .wp-menu-name {
+		position: static;
+	}
+
+	/* Switch the arrow side */
+	.auto-fold ul#adminmenu a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu > li.current > a.current:after {
+		border-width: 8px;
+		margin-top: -8px;
+	}
+
+	.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+	.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+		display: none;
+	}
+
+	/* Make the submenus appear correctly when tapped. */
+	#adminmenu .wp-submenu {
+		position: relative;
+		display: none;
+	}
+
+	.auto-fold #adminmenu .selected .wp-submenu,
+	.auto-fold #adminmenu .wp-menu-open .wp-submenu {
+		position: relative;
+		display: block;
+		top: 0;
+		right: -1px;
+		box-shadow: none;
+	}
+
+	.auto-fold #adminmenu .selected .wp-submenu:after,
+	.auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
+		display: none;
+	}
+
+	.auto-fold #adminmenu .opensub .wp-submenu {
+		display: none;
+	}
+
+	.auto-fold #adminmenu .selected .wp-submenu {
+		display: block;
+	}
+
+	.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after {
+		display: block;
+	}
+
+	.auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
+	.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
+		position: relative;
+		right: -1px;
+		left: 0;
+		top: 0;
+	}
+
+	#adminmenu .wp-not-current-submenu .wp-submenu,
+	.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+		border-right: none;
+	}
+
+	/* Remove submenu headers and adjust sub meu*/
+	#adminmenu .wp-submenu .wp-submenu-head {
+		display: none;
+	}
+
+	/* Toolbar menu toggle */
+	#wp-responsive-toggle {
+		position: fixed;
+		top: 5px;
+		right: 4px;
+		padding-left: 10px;
+		z-index: 99999;
+		border: none;
+		box-sizing: border-box;
+	}
+
+	#wpadminbar #wp-admin-bar-menu-toggle a {
+		display: block;
+		padding: 0;
+		overflow: hidden;
+		outline: none;
+		text-decoration: none;
+		border: 1px solid transparent;
+		background: none;
+		height: 44px;
+		margin-right: -1px;
+	}
+
+	.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
+		background: #2c3338;
+	}
+
+	li#wp-admin-bar-menu-toggle {
+		display: block;
+	}
+
+	#wpadminbar #wp-admin-bar-menu-toggle a:hover {
+		border: 1px solid transparent;
+	}
+
+	#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
+		content: "\f228";
+		display: inline-block;
+		float: right;
+		font: normal 40px/45px dashicons;
+		vertical-align: middle;
+		outline: none;
+		margin: 0;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		height: 44px;
+		width: 50px;
+		padding: 0;
+		border: none;
+		text-align: center;
+		text-decoration: none;
+		box-sizing: border-box;
+	}
+
+	.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
+		color: #72aee6;
+	}
+}
+
+/* Smartphone */
+@media screen and (max-width: 600px) {
+	#adminmenuwrap,
+	#adminmenuback {
+		display: none;
+	}
+
+	.wp-responsive-open #adminmenuwrap,
+	.wp-responsive-open #adminmenuback {
+		display: block;
+	}
+
+	.auto-fold #adminmenu {
+		top: 46px;
+	}
+}

tools/storybook/wordpress/css/admin-menu.css

@@ -0,0 +1,943 @@
+#adminmenuback,
+#adminmenuwrap,
+#adminmenu,
+#adminmenu .wp-submenu {
+	width: 160px;
+	background-color: #1d2327;
+}
+
+#adminmenuback {
+	position: fixed;
+	top: 0;
+	bottom: -120px;
+	z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */
+}
+
+.php-error #adminmenuback {
+	position: absolute;
+}
+
+.php-error #adminmenuback,
+.php-error #adminmenuwrap {
+	margin-top: 2em;
+}
+
+#adminmenu {
+	clear: left;
+	margin: 12px 0;
+	padding: 0;
+	list-style: none;
+}
+
+.folded #adminmenuback,
+.folded #adminmenuwrap,
+.folded #adminmenu,
+.folded #adminmenu li.menu-top {
+	width: 36px;
+}
+
+.icon16 {
+	height: 18px;
+	width: 18px;
+	padding: 6px;
+	margin: -6px 0 0 -8px;
+	float: left;
+}
+
+/* New Menu icons */
+
+.icon16:before {
+	color: #8c8f94; /* same as new icons */
+	font: normal 20px/1 dashicons;
+	speak: never;
+	padding: 6px 0;
+	height: 34px;
+	width: 20px;
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	transition: all .1s ease-in-out;
+}
+
+.icon16.icon-dashboard:before {
+	content: "\f226";
+}
+
+.icon16.icon-post:before {
+	content: "\f109";
+}
+
+.icon16.icon-media:before {
+	content: "\f104";
+}
+
+.icon16.icon-links:before {
+	content: "\f103";
+}
+
+.icon16.icon-page:before {
+	content: "\f105";
+}
+
+.icon16.icon-comments:before {
+	content: "\f101";
+	margin-top: 1px;
+}
+
+.icon16.icon-appearance:before {
+	content: "\f100";
+}
+
+.icon16.icon-plugins:before {
+	content: "\f106";
+}
+
+.icon16.icon-users:before {
+	content: "\f110";
+}
+
+.icon16.icon-tools:before {
+	content: "\f107";
+}
+
+.icon16.icon-settings:before {
+	content: "\f108";
+}
+
+.icon16.icon-site:before {
+	content: "\f541";
+}
+
+.icon16.icon-generic:before {
+	content: "\f111";
+}
+
+/* hide background-image for icons above */
+.icon16.icon-dashboard,
+.menu-icon-dashboard div.wp-menu-image,
+.icon16.icon-post,
+.menu-icon-post div.wp-menu-image,
+.icon16.icon-media,
+.menu-icon-media div.wp-menu-image,
+.icon16.icon-links,
+.menu-icon-links div.wp-menu-image,
+.icon16.icon-page,
+.menu-icon-page div.wp-menu-image,
+.icon16.icon-comments,
+.menu-icon-comments div.wp-menu-image,
+.icon16.icon-appearance,
+.menu-icon-appearance div.wp-menu-image,
+.icon16.icon-plugins,
+.menu-icon-plugins div.wp-menu-image,
+.icon16.icon-users,
+.menu-icon-users div.wp-menu-image,
+.icon16.icon-tools,
+.menu-icon-tools div.wp-menu-image,
+.icon16.icon-settings,
+.menu-icon-settings div.wp-menu-image,
+.icon16.icon-site,
+.menu-icon-site div.wp-menu-image,
+.icon16.icon-generic,
+.menu-icon-generic div.wp-menu-image {
+	background-image: none !important;
+}
+
+/*------------------------------------------------------------------------------
+  7.0 - Main Navigation (Left Menu)
+------------------------------------------------------------------------------*/
+
+#adminmenuwrap {
+	position: relative;
+	float: left;
+	z-index: 9990;
+}
+
+/* side admin menu */
+#adminmenu * {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+#adminmenu li {
+	margin: 0;
+	padding: 0;
+}
+
+#adminmenu a {
+	display: block;
+	line-height: 1.3;
+	padding: 2px 5px;
+	color: #f0f0f1;
+}
+
+#adminmenu .wp-submenu a {
+	color: #c3c4c7;
+	color: rgba(240, 246, 252, 0.7);
+	font-size: 13px;
+	line-height: 1.4;
+	margin: 0;
+	padding: 5px 0;
+}
+
+#adminmenu .wp-submenu a:hover,
+#adminmenu .wp-submenu a:focus {
+	background: none;
+}
+
+#adminmenu a:hover,
+#adminmenu li.menu-top > a:focus,
+#adminmenu .wp-submenu a:hover,
+#adminmenu .wp-submenu a:focus {
+	color: #72aee6;
+}
+
+#adminmenu a:hover,
+#adminmenu a:focus,
+.folded #adminmenu .wp-submenu-head:hover {
+	box-shadow: inset 4px 0 0 0 currentColor;
+	transition: box-shadow .1s linear;
+}
+
+#adminmenu li.menu-top {
+	border: none;
+	min-height: 34px;
+	position: relative;
+}
+
+#adminmenu .wp-submenu {
+	list-style: none;
+	position: absolute;
+	top: -1000em;
+	left: 160px;
+	overflow: visible;
+	word-wrap: break-word;
+	padding: 7px 0 8px;
+	z-index: 9999;
+	background-color: #2c3338;
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+}
+
+.js #adminmenu .sub-open,
+.js #adminmenu .opensub .wp-submenu,
+#adminmenu a.menu-top:focus + .wp-submenu,
+.no-js li.wp-has-submenu:hover .wp-submenu {
+	top: -1px;
+}
+
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
+	top: 0;
+}
+
+#adminmenu .wp-has-current-submenu .wp-submenu,
+.no-js li.wp-has-current-submenu:hover .wp-submenu,
+#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu {
+	position: relative;
+	z-index: 3;
+	top: auto;
+	left: auto;
+	right: auto;
+	bottom: auto;
+	border: 0 none;
+	margin-top: 0;
+	box-shadow: none;
+}
+
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */
+#adminmenu li.menu-top:hover,
+#adminmenu li.opensub > a.menu-top,
+#adminmenu li > a.menu-top:focus {
+	position: relative;
+	background-color: #1d2327;
+	color: #72aee6;
+}
+
+.folded #adminmenu li.menu-top:hover,
+.folded #adminmenu li.opensub > a.menu-top,
+.folded #adminmenu li > a.menu-top:focus {
+	z-index: 10000;
+}
+
+#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
+#adminmenu li.current a.menu-top,
+#adminmenu .wp-menu-arrow,
+#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
+#adminmenu .wp-menu-arrow div {
+	background: #2271b1;
+	color: #fff;
+}
+
+.folded #adminmenu .wp-submenu.sub-open,
+.folded #adminmenu .opensub .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+.folded #adminmenu a.menu-top:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
+.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
+	top: 0;
+	left: 36px;
+}
+
+.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+	position: absolute;
+	top: -1000em;
+}
+
+#adminmenu .wp-not-current-submenu .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+	min-width: 160px;
+	width: auto;
+	border-left: 5px solid transparent;
+}
+
+#adminmenu .wp-submenu li.current,
+#adminmenu .wp-submenu li.current a,
+#adminmenu .opensub .wp-submenu li.current a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
+#adminmenu .wp-submenu li.current a:hover,
+#adminmenu .wp-submenu li.current a:focus {
+	color: #fff;
+}
+
+#adminmenu .wp-not-current-submenu li > a,
+.folded #adminmenu .wp-has-current-submenu li > a {
+	padding-right: 16px;
+	padding-left: 14px;
+	/* Exclude from the transition the outline for Windows High Contrast mode */
+	transition: all .1s ease-in-out, outline 0s;
+}
+
+#adminmenu .wp-has-current-submenu ul > li > a,
+.folded #adminmenu li.menu-top .wp-submenu > li > a {
+	padding: 5px 12px;
+}
+
+#adminmenu a.menu-top,
+#adminmenu .wp-submenu-head {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.3;
+	padding: 0;
+}
+
+#adminmenu .wp-submenu-head {
+	display: none;
+}
+
+.folded #adminmenu .wp-menu-name {
+	position: absolute;
+	left: -999px;
+}
+
+.folded #adminmenu .wp-submenu-head {
+	display: block;
+}
+
+#adminmenu .wp-submenu li {
+	padding: 0;
+	margin: 0;
+}
+
+#adminmenu .wp-menu-image img {
+	padding: 9px 0 0;
+	opacity: 0.6;
+	filter: alpha(opacity=60);
+}
+
+#adminmenu div.wp-menu-name {
+	padding: 8px 8px 8px 36px;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	-ms-word-break: break-all;
+	word-break: break-word;
+	-webkit-hyphens: auto;
+	hyphens: auto;
+}
+
+#adminmenu div.wp-menu-image {
+	float: left;
+	width: 36px;
+	height: 34px;
+	margin: 0;
+	text-align: center;
+}
+
+#adminmenu div.wp-menu-image.svg {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 20px auto;
+}
+
+div.wp-menu-image:before {
+	color: #a7aaad;
+	color: rgba(240, 246, 252, 0.6);
+	padding: 7px 0;
+	transition: all .1s ease-in-out;
+}
+
+#adminmenu div.wp-menu-image:before {
+	color: #a7aaad;
+	color: rgba(240, 246, 252, 0.6);
+}
+
+#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
+#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
+#adminmenu .current div.wp-menu-image:before,
+#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
+#adminmenu a.current:hover div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
+	color: #fff;
+}
+
+#adminmenu li:hover div.wp-menu-image:before,
+#adminmenu li a:focus div.wp-menu-image:before,
+#adminmenu li.opensub div.wp-menu-image:before {
+	color: #72aee6;
+}
+
+.folded #adminmenu div.wp-menu-image {
+	width: 35px;
+	height: 30px;
+	position: absolute;
+	z-index: 25;
+}
+
+.folded #adminmenu a.menu-top {
+	height: 34px;
+}
+
+/* Sticky admin menu */
+.sticky-menu #adminmenuwrap {
+	position: fixed;
+}
+
+/* A new arrow */
+
+.wp-menu-arrow {
+	display: none !important;
+}
+
+ul#adminmenu a.wp-has-current-submenu {
+	position: relative;
+}
+
+ul#adminmenu a.wp-has-current-submenu:after,
+ul#adminmenu > li.current > a.current:after {
+	right: 0;
+	border: solid 8px transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-right-color: #f0f0f1;
+	top: 50%;
+	margin-top: -8px;
+}
+
+.folded ul#adminmenu li:hover a.wp-has-current-submenu:after,
+.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after {
+	display: none;
+}
+
+.folded ul#adminmenu a.wp-has-current-submenu:after,
+.folded ul#adminmenu > li a.current:after {
+	border-width: 4px;
+	margin-top: -4px;
+}
+
+/* flyout menu arrow */
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+	right: 0;
+	border: 8px solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	top: 10px;
+	z-index: 10000;
+}
+
+.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+	border-width: 4px;
+	margin-top: -4px;
+	top: 18px;
+}
+
+#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+	border-right-color: #2c3338;
+}
+
+#adminmenu li.menu-top:hover .wp-menu-image img,
+#adminmenu li.wp-has-current-submenu .wp-menu-image img {
+	opacity: 1;
+	filter: alpha(opacity=100);
+}
+
+#adminmenu li.wp-menu-separator {
+	height: 5px;
+	padding: 0;
+	margin: 0 0 6px;
+	cursor: inherit;
+}
+
+/* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */
+#adminmenu div.separator {
+	height: 2px;
+	padding: 0;
+}
+
+#adminmenu .wp-submenu .wp-submenu-head {
+	color: #fff;
+	font-weight: 400;
+	font-size: 14px;
+	padding: 5px 4px 5px 11px;
+	margin: -7px 0 4px -5px;
+	border-width: 3px 0 3px 5px;
+	border-style: solid;
+	border-color: transparent;
+}
+
+#adminmenu li.current,
+.folded #adminmenu li.wp-menu-open {
+	border: 0 none;
+}
+
+/* @todo: consider to use a single rule for these counters and the list table comments counters. */
+#adminmenu .awaiting-mod,
+#adminmenu .update-plugins {
+	display: inline-block;
+	vertical-align: top;
+	box-sizing: border-box;
+	margin: 1px 0 -1px 2px;
+	padding: 0 5px;
+	min-width: 18px;
+	height: 18px;
+	border-radius: 9px;
+	background-color: #d63638;
+	color: #fff;
+	font-size: 11px;
+	line-height: 1.6;
+	text-align: center;
+	z-index: 26;
+}
+
+#adminmenu li.current a .awaiting-mod,
+#adminmenu li a.wp-has-current-submenu .update-plugins {
+	background-color: #d63638;
+	color: #fff;
+}
+
+#adminmenu li span.count-0 {
+	display: none;
+}
+
+#collapse-button {
+	display: block;
+	width: 100%;
+	height: 34px;
+	margin: 0;
+	border: none;
+	padding: 0;
+	position: relative;
+	overflow: visible;
+	background: none;
+	color: #a7aaad;
+	cursor: pointer;
+}
+
+#collapse-button:hover {
+	color: #72aee6;
+}
+
+#collapse-button:focus {
+	color: #72aee6;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
+	outline-offset: -1px;
+}
+
+#collapse-button .collapse-button-icon,
+#collapse-button .collapse-button-label {
+	/* absolutely positioned to avoid 1px shift in IE when button is pressed */
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+#collapse-button .collapse-button-label {
+	top: 8px;
+}
+
+#collapse-button .collapse-button-icon {
+	width: 36px;
+	height: 34px;
+}
+
+#collapse-button .collapse-button-label {
+	padding: 0 0 0 36px;
+}
+
+.folded #collapse-button .collapse-button-label {
+	display: none;
+}
+
+#collapse-button .collapse-button-icon:after {
+	content: "\f148";
+	display: block;
+	position: relative;
+	top: 7px;
+	text-align: center;
+	font: normal 20px/1 dashicons !important;
+	speak: never;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* rtl:ignore */
+.folded #collapse-button .collapse-button-icon:after,
+.rtl #collapse-button .collapse-button-icon:after {
+	transform: rotate(180deg);
+}
+
+.rtl.folded #collapse-button .collapse-button-icon:after {
+	transform: none;
+}
+
+#collapse-button .collapse-button-icon:after,
+#collapse-button .collapse-button-label {
+	transition: all .1s ease-in-out;
+}
+
+/**
+ * Toolbar menu toggle
+ */
+li#wp-admin-bar-menu-toggle {
+	display: none;
+}
+
+/* Hide-if-customize for items we can't add classes to */
+.customize-support #menu-appearance a[href="themes.php?page=custom-header"],
+.customize-support #menu-appearance a[href="themes.php?page=custom-background"] {
+	display: none;
+}
+
+/* Auto-folding of the admin menu */
+@media only screen and (max-width: 960px) {
+	.auto-fold #wpcontent,
+	.auto-fold #wpfooter {
+		margin-left: 36px;
+	}
+
+	.auto-fold #adminmenuback,
+	.auto-fold #adminmenuwrap,
+	.auto-fold #adminmenu,
+	.auto-fold #adminmenu li.menu-top {
+		width: 36px;
+	}
+
+	.auto-fold #adminmenu .wp-submenu.sub-open,
+	.auto-fold #adminmenu .opensub .wp-submenu,
+	.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+	.auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+	.auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
+	.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
+		top: 0;
+		left: 36px;
+	}
+
+	.auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
+	.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
+		position: absolute;
+		top: -1000em;
+		margin-right: -1px;
+		padding: 7px 0 8px;
+		z-index: 9999;
+	}
+
+	.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
+		min-width: 150px;
+		width: auto;
+	}
+
+	.auto-fold #adminmenu .wp-has-current-submenu li > a {
+		padding-right: 16px;
+		padding-left: 14px;
+	}
+
+
+	.auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
+		padding-left: 12px;
+	}
+
+	.auto-fold #adminmenu .wp-menu-name {
+		position: absolute;
+		left: -999px;
+	}
+
+	.auto-fold #adminmenu .wp-submenu-head {
+		display: block;
+	}
+
+	.auto-fold #adminmenu div.wp-menu-image {
+		height: 30px;
+		width: 34px;
+		position: absolute;
+		z-index: 25;
+	}
+
+	.auto-fold #adminmenu a.menu-top {
+		min-height: 34px;
+	}
+
+	.auto-fold #adminmenu li.wp-menu-open {
+		border: 0 none;
+	}
+
+	.auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
+		margin-bottom: 0;
+	}
+
+	.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after {
+		display: none;
+	}
+
+	.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+	.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+		border-width: 4px;
+		margin-top: -4px;
+		top: 16px;
+	}
+
+	.auto-fold ul#adminmenu a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu > li a.current:after {
+		border-width: 4px;
+		margin-top: -4px;
+	}
+
+	.auto-fold #adminmenu li.menu-top:hover,
+	.auto-fold #adminmenu li.opensub > a.menu-top,
+	.auto-fold #adminmenu li > a.menu-top:focus {
+		z-index: 10000;
+	}
+
+	.auto-fold #collapse-menu .collapse-button-label {
+		display: none;
+	}
+
+	/* rtl:ignore */
+	.auto-fold #collapse-button .collapse-button-icon:after {
+		transform: rotate(180deg);
+	}
+
+	.rtl.auto-fold #collapse-button .collapse-button-icon:after {
+		transform: none;
+	}
+
+}
+
+@media screen and (max-width: 782px) {
+	.auto-fold #wpcontent {
+		position: relative;
+		margin-left: 0;
+		padding-left: 10px;
+	}
+
+	.sticky-menu #adminmenuwrap {
+		position: relative;
+		z-index: auto;
+		top: 0;
+	}
+
+	/* Sidebar Adjustments */
+	.auto-fold #adminmenu,
+	.auto-fold #adminmenuback,
+	.auto-fold #adminmenuwrap {
+		position: absolute;
+		width: 190px;
+		z-index: 100;
+	}
+
+	.auto-fold #adminmenuback {
+		position: fixed;
+	}
+
+	.auto-fold #adminmenuback,
+	.auto-fold #adminmenuwrap {
+		display: none;
+	}
+
+	.auto-fold .wp-responsive-open #adminmenuback,
+	.auto-fold .wp-responsive-open #adminmenuwrap {
+		display: block;
+	}
+
+	.auto-fold #adminmenu li.menu-top {
+		width: 100%;
+	}
+
+	/* Resize the admin menu items to a comfortable touch size */
+	.auto-fold #adminmenu li a {
+		font-size: 16px;
+		padding: 5px;
+	}
+
+	.auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
+		padding: 10px 10px 10px 20px;
+	}
+
+	/* Restore the menu names */
+	.auto-fold #adminmenu .wp-menu-name {
+		position: static;
+	}
+
+	/* Switch the arrow side */
+	.auto-fold ul#adminmenu a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu > li.current > a.current:after {
+		border-width: 8px;
+		margin-top: -8px;
+	}
+
+	.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+	.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+		display: none;
+	}
+
+	/* Make the submenus appear correctly when tapped. */
+	#adminmenu .wp-submenu {
+		position: relative;
+		display: none;
+	}
+
+	.auto-fold #adminmenu .selected .wp-submenu,
+	.auto-fold #adminmenu .wp-menu-open .wp-submenu {
+		position: relative;
+		display: block;
+		top: 0;
+		left: -1px;
+		box-shadow: none;
+	}
+
+	.auto-fold #adminmenu .selected .wp-submenu:after,
+	.auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
+		display: none;
+	}
+
+	.auto-fold #adminmenu .opensub .wp-submenu {
+		display: none;
+	}
+
+	.auto-fold #adminmenu .selected .wp-submenu {
+		display: block;
+	}
+
+	.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after {
+		display: block;
+	}
+
+	.auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
+	.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
+		position: relative;
+		left: -1px;
+		right: 0;
+		top: 0;
+	}
+
+	#adminmenu .wp-not-current-submenu .wp-submenu,
+	.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+		border-left: none;
+	}
+
+	/* Remove submenu headers and adjust sub meu*/
+	#adminmenu .wp-submenu .wp-submenu-head {
+		display: none;
+	}
+
+	/* Toolbar menu toggle */
+	#wp-responsive-toggle {
+		position: fixed;
+		top: 5px;
+		left: 4px;
+		padding-right: 10px;
+		z-index: 99999;
+		border: none;
+		box-sizing: border-box;
+	}
+
+	#wpadminbar #wp-admin-bar-menu-toggle a {
+		display: block;
+		padding: 0;
+		overflow: hidden;
+		outline: none;
+		text-decoration: none;
+		border: 1px solid transparent;
+		background: none;
+		height: 44px;
+		margin-left: -1px;
+	}
+
+	.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
+		background: #2c3338;
+	}
+
+	li#wp-admin-bar-menu-toggle {
+		display: block;
+	}
+
+	#wpadminbar #wp-admin-bar-menu-toggle a:hover {
+		border: 1px solid transparent;
+	}
+
+	#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
+		content: "\f228";
+		display: inline-block;
+		float: left;
+		font: normal 40px/45px dashicons;
+		vertical-align: middle;
+		outline: none;
+		margin: 0;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		height: 44px;
+		width: 50px;
+		padding: 0;
+		border: none;
+		text-align: center;
+		text-decoration: none;
+		box-sizing: border-box;
+	}
+
+	.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
+		color: #72aee6;
+	}
+}
+
+/* Smartphone */
+@media screen and (max-width: 600px) {
+	#adminmenuwrap,
+	#adminmenuback {
+		display: none;
+	}
+
+	.wp-responsive-open #adminmenuwrap,
+	.wp-responsive-open #adminmenuback {
+		display: block;
+	}
+
+	.auto-fold #adminmenu {
+		top: 46px;
+	}
+}

tools/storybook/wordpress/css/code-editor-rtl.css

@@ -0,0 +1,77 @@
+/*! This file is auto-generated */
+.wrap [class*="CodeMirror-lint-marker"],
+.wp-core-ui [class*="CodeMirror-lint-message"],
+.wrap .CodeMirror-lint-marker-multiple {
+	background-image: none;
+}
+
+.wp-core-ui .CodeMirror-lint-marker-error,
+.wp-core-ui .CodeMirror-lint-marker-warning {
+	cursor: help;
+}
+
+.wrap .CodeMirror-lint-marker-multiple {
+	position: absolute;
+	top: 0;
+}
+
+.wrap [class*="CodeMirror-lint-marker"]:before {
+	font: normal 18px/1 dashicons;
+	position: relative;
+	top: -2px;
+}
+
+.wp-core-ui [class*="CodeMirror-lint-message"]:before {
+	font: normal 16px/1 dashicons;
+	right: 16px;
+	position: absolute;
+}
+
+.wp-core-ui .CodeMirror-lint-message-error,
+.wp-core-ui .CodeMirror-lint-message-warning {
+	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+	margin: 5px 0 2px;
+	padding: 3px 28px 3px 12px;
+}
+
+.wp-core-ui .CodeMirror-lint-message-warning {
+	background-color: #fcf9e8;
+	border-right: 4px solid #dba617;
+}
+
+.wrap .CodeMirror-lint-marker-warning:before,
+.wp-core-ui .CodeMirror-lint-message-warning:before {
+	content: "\f534";
+	color: #dba617;
+}
+
+.wp-core-ui .CodeMirror-lint-message-error {
+	background-color: #fcf0f1;
+	border-right: 4px solid #d63638;
+}
+
+.wrap .CodeMirror-lint-marker-error:before,
+.wp-core-ui .CodeMirror-lint-message-error:before {
+	content: "\f153";
+	color: #d63638;
+}
+
+.wp-core-ui .CodeMirror-lint-tooltip {
+	background: none;
+	border: none;
+	border-radius: 0;
+	direction: rtl;
+}
+
+.wrap .CodeMirror .CodeMirror-matchingbracket {
+	background: rgba(219, 166, 23, 0.3);
+	color: inherit;
+}
+
+.CodeMirror {
+	text-align: right;
+}
+
+.wrap .CodeMirror .CodeMirror-linenumber {
+	color: #646970;
+}

tools/storybook/wordpress/css/code-editor-rtl.min.css

@@ -0,0 +1,2 @@
+/*! This file is auto-generated */
+.wp-core-ui [class*=CodeMirror-lint-message],.wrap .CodeMirror-lint-marker-multiple,.wrap [class*=CodeMirror-lint-marker]{background-image:none}.wp-core-ui .CodeMirror-lint-marker-error,.wp-core-ui .CodeMirror-lint-marker-warning{cursor:help}.wrap .CodeMirror-lint-marker-multiple{position:absolute;top:0}.wrap [class*=CodeMirror-lint-marker]:before{font:normal 18px/1 dashicons;position:relative;top:-2px}.wp-core-ui [class*=CodeMirror-lint-message]:before{font:normal 16px/1 dashicons;right:16px;position:absolute}.wp-core-ui .CodeMirror-lint-message-error,.wp-core-ui .CodeMirror-lint-message-warning{box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:5px 0 2px;padding:3px 28px 3px 12px}.wp-core-ui .CodeMirror-lint-message-warning{background-color:#fcf9e8;border-right:4px solid #dba617}.wp-core-ui .CodeMirror-lint-message-warning:before,.wrap .CodeMirror-lint-marker-warning:before{content:"\f534";color:#dba617}.wp-core-ui .CodeMirror-lint-message-error{background-color:#fcf0f1;border-right:4px solid #d63638}.wp-core-ui .CodeMirror-lint-message-error:before,.wrap .CodeMirror-lint-marker-error:before{content:"\f153";color:#d63638}.wp-core-ui .CodeMirror-lint-tooltip{background:0 0;border:none;border-radius:0;direction:rtl}.wrap .CodeMirror .CodeMirror-matchingbracket{background:rgba(219,166,23,.3);color:inherit}.CodeMirror{text-align:right}.wrap .CodeMirror .CodeMirror-linenumber{color:#646970}

tools/storybook/wordpress/css/code-editor.css

@@ -0,0 +1,76 @@
+.wrap [class*="CodeMirror-lint-marker"],
+.wp-core-ui [class*="CodeMirror-lint-message"],
+.wrap .CodeMirror-lint-marker-multiple {
+	background-image: none;
+}
+
+.wp-core-ui .CodeMirror-lint-marker-error,
+.wp-core-ui .CodeMirror-lint-marker-warning {
+	cursor: help;
+}
+
+.wrap .CodeMirror-lint-marker-multiple {
+	position: absolute;
+	top: 0;
+}
+
+.wrap [class*="CodeMirror-lint-marker"]:before {
+	font: normal 18px/1 dashicons;
+	position: relative;
+	top: -2px;
+}
+
+.wp-core-ui [class*="CodeMirror-lint-message"]:before {
+	font: normal 16px/1 dashicons;
+	left: 16px;
+	position: absolute;
+}
+
+.wp-core-ui .CodeMirror-lint-message-error,
+.wp-core-ui .CodeMirror-lint-message-warning {
+	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+	margin: 5px 0 2px;
+	padding: 3px 12px 3px 28px;
+}
+
+.wp-core-ui .CodeMirror-lint-message-warning {
+	background-color: #fcf9e8;
+	border-left: 4px solid #dba617;
+}
+
+.wrap .CodeMirror-lint-marker-warning:before,
+.wp-core-ui .CodeMirror-lint-message-warning:before {
+	content: "\f534";
+	color: #dba617;
+}
+
+.wp-core-ui .CodeMirror-lint-message-error {
+	background-color: #fcf0f1;
+	border-left: 4px solid #d63638;
+}
+
+.wrap .CodeMirror-lint-marker-error:before,
+.wp-core-ui .CodeMirror-lint-message-error:before {
+	content: "\f153";
+	color: #d63638;
+}
+
+.wp-core-ui .CodeMirror-lint-tooltip {
+	background: none;
+	border: none;
+	border-radius: 0;
+	direction: ltr;
+}
+
+.wrap .CodeMirror .CodeMirror-matchingbracket {
+	background: rgba(219, 166, 23, 0.3);
+	color: inherit;
+}
+
+.CodeMirror {
+	text-align: left;
+}
+
+.wrap .CodeMirror .CodeMirror-linenumber {
+	color: #646970;
+}

tools/storybook/wordpress/css/code-editor.min.css

@@ -0,0 +1,2 @@
+/*! This file is auto-generated */
+.wp-core-ui [class*=CodeMirror-lint-message],.wrap .CodeMirror-lint-marker-multiple,.wrap [class*=CodeMirror-lint-marker]{background-image:none}.wp-core-ui .CodeMirror-lint-marker-error,.wp-core-ui .CodeMirror-lint-marker-warning{cursor:help}.wrap .CodeMirror-lint-marker-multiple{position:absolute;top:0}.wrap [class*=CodeMirror-lint-marker]:before{font:normal 18px/1 dashicons;position:relative;top:-2px}.wp-core-ui [class*=CodeMirror-lint-message]:before{font:normal 16px/1 dashicons;left:16px;position:absolute}.wp-core-ui .CodeMirror-lint-message-error,.wp-core-ui .CodeMirror-lint-message-warning{box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:5px 0 2px;padding:3px 12px 3px 28px}.wp-core-ui .CodeMirror-lint-message-warning{background-color:#fcf9e8;border-left:4px solid #dba617}.wp-core-ui .CodeMirror-lint-message-warning:before,.wrap .CodeMirror-lint-marker-warning:before{content:"\f534";color:#dba617}.wp-core-ui .CodeMirror-lint-message-error{background-color:#fcf0f1;border-left:4px solid #d63638}.wp-core-ui .CodeMirror-lint-message-error:before,.wrap .CodeMirror-lint-marker-error:before{content:"\f153";color:#d63638}.wp-core-ui .CodeMirror-lint-tooltip{background:0 0;border:none;border-radius:0;direction:ltr}.wrap .CodeMirror .CodeMirror-matchingbracket{background:rgba(219,166,23,.3);color:inherit}.CodeMirror{text-align:left}.wrap .CodeMirror .CodeMirror-linenumber{color:#646970}

tools/storybook/wordpress/css/color-picker-rtl.css

@@ -0,0 +1,183 @@
+/*! This file is auto-generated */
+/* rtl:ignore */
+.wp-color-picker {
+	width: 80px;
+	direction: ltr;
+}
+
+.wp-picker-container .hidden {
+	display: none;
+}
+
+/* Needs higher specificiity. */
+.wp-picker-container .wp-color-result.button {
+	min-height: 30px;
+	margin: 0 0 6px 6px;
+	padding: 0 30px 0 0;
+	font-size: 11px;
+}
+
+.wp-color-result-text {
+	background: #f6f7f7;
+	border-radius: 2px 0 0 2px;
+	border-right: 1px solid #c3c4c7;
+	color: #50575e;
+	display: block;
+	line-height: 2.54545455; /* 28px */
+	padding: 0 6px;
+	text-align: center;
+}
+
+.wp-color-result:hover,
+.wp-color-result:focus {
+	background: #f6f7f7;
+	border-color: #8c8f94;
+	color: #1d2327;
+}
+
+.wp-color-result:hover:after,
+.wp-color-result:focus:after {
+	color: #1d2327;
+	border-color: #a7aaad;
+	border-right: 1px solid #8c8f94;
+}
+
+.wp-picker-container {
+	display: inline-block;
+}
+
+.wp-color-result:focus {
+	border-color: #4f94d4;
+	box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+}
+
+.wp-color-result:active {
+	/* See Trac ticket #39662 */
+	transform: none !important;
+}
+
+.wp-picker-open + .wp-picker-input-wrap {
+	display: inline-block;
+	vertical-align: top;
+}
+
+.wp-picker-input-wrap label {
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
+.form-table .wp-picker-input-wrap label {
+	margin: 0 !important;
+}
+
+.wp-picker-input-wrap .button.wp-picker-default,
+.wp-picker-input-wrap .button.wp-picker-clear,
+.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
+.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
+	margin-right: 6px;
+	padding: 0 8px;
+	line-height: 2.54545455; /* 28px */
+	min-height: 30px;
+}
+
+.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
+	background-color: #50575e
+}
+
+.wp-picker-container .iris-picker {
+	border-radius: 0;
+	border-color: #dcdcde;
+	margin-top: 6px;
+}
+
+.wp-picker-container input[type="text"].wp-color-picker {
+	width: 4rem;
+	font-size: 12px;
+	font-family: monospace;
+	line-height: 2.33333333; /* 28px */
+	margin: 0;
+	padding: 0 5px;
+	vertical-align: top;
+	min-height: 30px;
+}
+
+.wp-color-picker::-webkit-input-placeholder {
+	color: #646970;
+}
+
+.wp-color-picker::-moz-placeholder {
+	color: #646970;
+	opacity: 1;
+}
+
+.wp-color-picker:-ms-input-placeholder {
+	color: #646970;
+}
+
+.wp-picker-container input[type="text"].iris-error {
+	background-color: #fcf0f1;
+	border-color: #d63638;
+	color: #000;
+}
+
+.iris-picker .ui-square-handle:focus,
+.iris-picker .iris-strip .ui-slider-handle:focus {
+	border-color: #3582c4;
+	border-style: solid;
+	box-shadow: 0 0 0 1px #3582c4;
+	outline: 2px solid transparent;
+}
+
+.iris-picker .iris-palette:focus {
+	box-shadow: 0 0 0 2px #3582c4;
+}
+
+@media screen and (max-width: 782px) {
+	.wp-picker-container input[type="text"].wp-color-picker {
+		width: 5rem;
+		font-size: 16px;
+		line-height: 1.875; /* 30px */
+		min-height: 32px;
+	}
+
+	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
+		padding: 0 5px;
+	}
+
+	.wp-picker-input-wrap .button.wp-picker-default,
+	.wp-picker-input-wrap .button.wp-picker-clear {
+		padding: 0 8px;
+		line-height: 2.14285714; /* 30px */
+		min-height: 32px;
+	}
+
+	.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
+	.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
+		padding: 0 8px;
+		font-size: 14px;
+		line-height: 2.14285714; /* 30px */
+		min-height: 32px;
+	}
+
+	.wp-picker-container .wp-color-result.button {
+		padding: 0 40px 0 0;
+		font-size: 14px;
+		line-height: 2.14285714; /* 30px */
+	}
+
+	.wp-customizer .wp-picker-container .wp-color-result.button {
+		font-size: 14px;
+		line-height: 2.14285714; /* 30px */
+	}
+
+	.wp-picker-container .wp-color-result-text {
+		padding: 0 14px;
+		font-size: inherit;
+		line-height: inherit;
+	}
+
+	.wp-customizer .wp-picker-container .wp-color-result-text {
+		padding: 0 10px;
+	}
+}

tools/storybook/wordpress/css/color-picker-rtl.min.css

@@ -0,0 +1,2 @@
+/*! This file is auto-generated */
+.wp-color-picker{width:80px;direction:ltr}.wp-picker-container .hidden{display:none}.wp-picker-container .wp-color-result.button{min-height:30px;margin:0 0 6px 6px;padding:0 30px 0 0;font-size:11px}.wp-color-result-text{background:#f6f7f7;border-radius:2px 0 0 2px;border-right:1px solid #c3c4c7;color:#50575e;display:block;line-height:2.54545455;padding:0 6px;text-align:center}.wp-color-result:focus,.wp-color-result:hover{background:#f6f7f7;border-color:#8c8f94;color:#1d2327}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#1d2327;border-color:#a7aaad;border-right:1px solid #8c8f94}.wp-picker-container{display:inline-block}.wp-color-result:focus{border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8)}.wp-color-result:active{transform:none!important}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-input-wrap label{display:inline-block;vertical-align:top}.form-table .wp-picker-input-wrap label{margin:0!important}.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear,.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,.wp-picker-input-wrap .button.wp-picker-clear,.wp-picker-input-wrap .button.wp-picker-default{margin-right:6px;padding:0 8px;line-height:2.54545455;min-height:30px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#50575e}.wp-picker-container .iris-picker{border-radius:0;border-color:#dcdcde;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:4rem;font-size:12px;font-family:monospace;line-height:2.33333333;margin:0;padding:0 5px;vertical-align:top;min-height:30px}.wp-color-picker::-webkit-input-placeholder{color:#646970}.wp-color-picker::-moz-placeholder{color:#646970;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#646970}.wp-picker-container input[type=text].iris-error{background-color:#fcf0f1;border-color:#d63638;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-handle:focus{border-color:#3582c4;border-style:solid;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.iris-picker .iris-palette:focus{box-shadow:0 0 0 2px #3582c4}@media screen and (max-width:782px){.wp-picker-container input[type=text].wp-color-picker{width:5rem;font-size:16px;line-height:1.875;min-height:32px}.wp-customizer .wp-picker-container input[type=text].wp-color-picker{padding:0 5px}.wp-picker-input-wrap .button.wp-picker-clear,.wp-picker-input-wrap .button.wp-picker-default{padding:0 8px;line-height:2.14285714;min-height:32px}.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear,.wp-customizer .wp-picker-input-wrap .button.wp-picker-default{padding:0 8px;font-size:14px;line-height:2.14285714;min-height:32px}.wp-picker-container .wp-color-result.button{padding:0 40px 0 0;font-size:14px;line-height:2.14285714}.wp-customizer .wp-picker-container .wp-color-result.button{font-size:14px;line-height:2.14285714}.wp-picker-container .wp-color-result-text{padding:0 14px;font-size:inherit;line-height:inherit}.wp-customizer .wp-picker-container .wp-color-result-text{padding:0 10px}}

tools/storybook/wordpress/css/color-picker.css

@@ -0,0 +1,182 @@
+/* rtl:ignore */
+.wp-color-picker {
+	width: 80px;
+	direction: ltr;
+}
+
+.wp-picker-container .hidden {
+	display: none;
+}
+
+/* Needs higher specificiity. */
+.wp-picker-container .wp-color-result.button {
+	min-height: 30px;
+	margin: 0 6px 6px 0;
+	padding: 0 0 0 30px;
+	font-size: 11px;
+}
+
+.wp-color-result-text {
+	background: #f6f7f7;
+	border-radius: 0 2px 2px 0;
+	border-left: 1px solid #c3c4c7;
+	color: #50575e;
+	display: block;
+	line-height: 2.54545455; /* 28px */
+	padding: 0 6px;
+	text-align: center;
+}
+
+.wp-color-result:hover,
+.wp-color-result:focus {
+	background: #f6f7f7;
+	border-color: #8c8f94;
+	color: #1d2327;
+}
+
+.wp-color-result:hover:after,
+.wp-color-result:focus:after {
+	color: #1d2327;
+	border-color: #a7aaad;
+	border-left: 1px solid #8c8f94;
+}
+
+.wp-picker-container {
+	display: inline-block;
+}
+
+.wp-color-result:focus {
+	border-color: #4f94d4;
+	box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+}
+
+.wp-color-result:active {
+	/* See Trac ticket #39662 */
+	transform: none !important;
+}
+
+.wp-picker-open + .wp-picker-input-wrap {
+	display: inline-block;
+	vertical-align: top;
+}
+
+.wp-picker-input-wrap label {
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
+.form-table .wp-picker-input-wrap label {
+	margin: 0 !important;
+}
+
+.wp-picker-input-wrap .button.wp-picker-default,
+.wp-picker-input-wrap .button.wp-picker-clear,
+.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
+.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
+	margin-left: 6px;
+	padding: 0 8px;
+	line-height: 2.54545455; /* 28px */
+	min-height: 30px;
+}
+
+.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
+	background-color: #50575e
+}
+
+.wp-picker-container .iris-picker {
+	border-radius: 0;
+	border-color: #dcdcde;
+	margin-top: 6px;
+}
+
+.wp-picker-container input[type="text"].wp-color-picker {
+	width: 4rem;
+	font-size: 12px;
+	font-family: monospace;
+	line-height: 2.33333333; /* 28px */
+	margin: 0;
+	padding: 0 5px;
+	vertical-align: top;
+	min-height: 30px;
+}
+
+.wp-color-picker::-webkit-input-placeholder {
+	color: #646970;
+}
+
+.wp-color-picker::-moz-placeholder {
+	color: #646970;
+	opacity: 1;
+}
+
+.wp-color-picker:-ms-input-placeholder {
+	color: #646970;
+}
+
+.wp-picker-container input[type="text"].iris-error {
+	background-color: #fcf0f1;
+	border-color: #d63638;
+	color: #000;
+}
+
+.iris-picker .ui-square-handle:focus,
+.iris-picker .iris-strip .ui-slider-handle:focus {
+	border-color: #3582c4;
+	border-style: solid;
+	box-shadow: 0 0 0 1px #3582c4;
+	outline: 2px solid transparent;
+}
+
+.iris-picker .iris-palette:focus {
+	box-shadow: 0 0 0 2px #3582c4;
+}
+
+@media screen and (max-width: 782px) {
+	.wp-picker-container input[type="text"].wp-color-picker {
+		width: 5rem;
+		font-size: 16px;
+		line-height: 1.875; /* 30px */
+		min-height: 32px;
+	}
+
+	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
+		padding: 0 5px;
+	}
+
+	.wp-picker-input-wrap .button.wp-picker-default,
+	.wp-picker-input-wrap .button.wp-picker-clear {
+		padding: 0 8px;
+		line-height: 2.14285714; /* 30px */
+		min-height: 32px;
+	}
+
+	.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
+	.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
+		padding: 0 8px;
+		font-size: 14px;
+		line-height: 2.14285714; /* 30px */
+		min-height: 32px;
+	}
+
+	.wp-picker-container .wp-color-result.button {
+		padding: 0 0 0 40px;
+		font-size: 14px;
+		line-height: 2.14285714; /* 30px */
+	}
+
+	.wp-customizer .wp-picker-container .wp-color-result.button {
+		font-size: 14px;
+		line-height: 2.14285714; /* 30px */
+	}
+
+	.wp-picker-container .wp-color-result-text {
+		padding: 0 14px;
+		font-size: inherit;
+		line-height: inherit;
+	}
+
+	.wp-customizer .wp-picker-container .wp-color-result-text {
+		padding: 0 10px;
+	}
+}

tools/storybook/wordpress/css/color-picker.min.css

@@ -0,0 +1,2 @@
+/*! This file is auto-generated */
+.wp-color-picker{width:80px;direction:ltr}.wp-picker-container .hidden{display:none}.wp-picker-container .wp-color-result.button{min-height:30px;margin:0 6px 6px 0;padding:0 0 0 30px;font-size:11px}.wp-color-result-text{background:#f6f7f7;border-radius:0 2px 2px 0;border-left:1px solid #c3c4c7;color:#50575e;display:block;line-height:2.54545455;padding:0 6px;text-align:center}.wp-color-result:focus,.wp-color-result:hover{background:#f6f7f7;border-color:#8c8f94;color:#1d2327}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#1d2327;border-color:#a7aaad;border-left:1px solid #8c8f94}.wp-picker-container{display:inline-block}.wp-color-result:focus{border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8)}.wp-color-result:active{transform:none!important}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-input-wrap label{display:inline-block;vertical-align:top}.form-table .wp-picker-input-wrap label{margin:0!important}.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear,.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,.wp-picker-input-wrap .button.wp-picker-clear,.wp-picker-input-wrap .button.wp-picker-default{margin-left:6px;padding:0 8px;line-height:2.54545455;min-height:30px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#50575e}.wp-picker-container .iris-picker{border-radius:0;border-color:#dcdcde;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:4rem;font-size:12px;font-family:monospace;line-height:2.33333333;margin:0;padding:0 5px;vertical-align:top;min-height:30px}.wp-color-picker::-webkit-input-placeholder{color:#646970}.wp-color-picker::-moz-placeholder{color:#646970;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#646970}.wp-picker-container input[type=text].iris-error{background-color:#fcf0f1;border-color:#d63638;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-handle:focus{border-color:#3582c4;border-style:solid;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.iris-picker .iris-palette:focus{box-shadow:0 0 0 2px #3582c4}@media screen and (max-width:782px){.wp-picker-container input[type=text].wp-color-picker{width:5rem;font-size:16px;line-height:1.875;min-height:32px}.wp-customizer .wp-picker-container input[type=text].wp-color-picker{padding:0 5px}.wp-picker-input-wrap .button.wp-picker-clear,.wp-picker-input-wrap .button.wp-picker-default{padding:0 8px;line-height:2.14285714;min-height:32px}.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear,.wp-customizer .wp-picker-input-wrap .button.wp-picker-default{padding:0 8px;font-size:14px;line-height:2.14285714;min-height:32px}.wp-picker-container .wp-color-result.button{padding:0 0 0 40px;font-size:14px;line-height:2.14285714}.wp-customizer .wp-picker-container .wp-color-result.button{font-size:14px;line-height:2.14285714}.wp-picker-container .wp-color-result-text{padding:0 14px;font-size:inherit;line-height:inherit}.wp-customizer .wp-picker-container .wp-color-result-text{padding:0 10px}}

tools/storybook/wordpress/css/colors/_admin.scss

@@ -0,0 +1,797 @@
+
+@import 'variables';
+@import 'mixins';
+
+@function url-friendly-colour( $color ) {
+	@return '%23' + str-slice( '#{ $color }', 2, -1 );
+}
+
+body {
+	background: $body-background;
+}
+
+
+/* Links */
+
+a {
+	color: $link;
+
+	&:hover,
+	&:active,
+	&:focus {
+		color: $link-focus;
+	}
+}
+
+#post-body .misc-pub-post-status:before,
+#post-body #visibility:before,
+.curtime #timestamp:before,
+#post-body .misc-pub-revisions:before,
+span.wp-media-buttons-icon:before {
+	color: currentColor;
+}
+
+.wp-core-ui .button-link {
+	color: $link;
+
+	&:hover,
+	&:active,
+	&:focus {
+		color: $link-focus;
+	}
+}
+
+.media-modal .delete-attachment,
+.media-modal .trash-attachment,
+.media-modal .untrash-attachment,
+.wp-core-ui .button-link-delete {
+	color: #a00;
+}
+
+.media-modal .delete-attachment:hover,
+.media-modal .trash-attachment:hover,
+.media-modal .untrash-attachment:hover,
+.media-modal .delete-attachment:focus,
+.media-modal .trash-attachment:focus,
+.media-modal .untrash-attachment:focus,
+.wp-core-ui .button-link-delete:hover,
+.wp-core-ui .button-link-delete:focus {
+	color: #dc3232;
+}
+
+/* Forms */
+
+input[type=checkbox]:checked::before {
+	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E");
+}
+
+input[type=radio]:checked::before {
+	background: $form-checked;
+}
+
+.wp-core-ui input[type="reset"]:hover,
+.wp-core-ui input[type="reset"]:active {
+	color: $link-focus;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="color"]:focus,
+input[type="date"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="email"]:focus,
+input[type="month"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="text"]:focus,
+input[type="time"]:focus,
+input[type="url"]:focus,
+input[type="week"]:focus,
+input[type="checkbox"]:focus,
+input[type="radio"]:focus,
+select:focus,
+textarea:focus {
+	border-color: $highlight-color;
+	box-shadow: 0 0 0 1px $highlight-color;
+}
+
+
+/* Core UI */
+
+.wp-core-ui {
+
+	.button {
+		border-color: #7e8993;
+		color: #32373c;
+	}
+
+	.button.hover,
+	.button:hover,
+	.button.focus,
+	.button:focus {
+		border-color: darken( #7e8993, 5% );
+		color: darken( #32373c, 5% );
+	}
+
+	.button.focus,
+	.button:focus {
+		border-color: #7e8993;
+		color: darken( #32373c, 5% );
+		box-shadow: 0 0 0 1px #32373c;
+	}
+
+	.button:active {
+		border-color: #7e8993;
+		color: darken( #32373c, 5% );
+		box-shadow: none;
+	}
+
+	.button.active,
+	.button.active:focus,
+	.button.active:hover {
+		border-color: $button-color;
+		color: darken( #32373c, 5% );
+		box-shadow: inset 0 2px 5px -3px $button-color;
+	}
+
+	.button.active:focus {
+		box-shadow: 0 0 0 1px #32373c;
+	}
+
+	@if ( $low-contrast-theme != "true" ) {
+		.button,
+		.button-secondary {
+			color: $highlight-color;
+			border-color: $highlight-color;
+		}
+
+		.button.hover,
+		.button:hover,
+		.button-secondary:hover{
+			border-color: darken($highlight-color, 10);
+			color: darken($highlight-color, 10);
+		}
+
+		.button.focus,
+		.button:focus,
+		.button-secondary:focus {
+			border-color: lighten($highlight-color, 10);
+			color: darken($highlight-color, 20);;
+			box-shadow: 0 0 0 1px lighten($highlight-color, 10);
+		}
+
+		.button-primary {
+			&:hover {
+				color: #fff;
+			}
+		}
+	}
+
+	.button-primary {
+		@include button( $button-color );
+	}
+
+	.button-group > .button.active {
+		border-color: $button-color;
+	}
+
+	.wp-ui-primary {
+		color: $text-color;
+		background-color: $base-color;
+	}
+	.wp-ui-text-primary {
+		color: $base-color;
+	}
+
+	.wp-ui-highlight {
+		color: $menu-highlight-text;
+		background-color: $menu-highlight-background;
+	}
+	.wp-ui-text-highlight {
+		color: $menu-highlight-background;
+	}
+
+	.wp-ui-notification {
+		color: $menu-bubble-text;
+		background-color: $menu-bubble-background;
+	}
+	.wp-ui-text-notification {
+		color: $menu-bubble-background;
+	}
+
+	.wp-ui-text-icon {
+		color: $menu-icon;
+	}
+}
+
+
+/* List tables */
+@if $low-contrast-theme == "true" {
+	.wrap .page-title-action:hover {
+		color: $menu-text;
+		background-color: $menu-background;
+	}
+} @else {
+	.wrap .page-title-action,
+	.wrap .page-title-action:active {
+		border: 1px solid $highlight-color;
+		color: $highlight-color;
+	}
+
+	.wrap .page-title-action:hover {
+		color: darken($highlight-color, 10);
+		border-color: darken($highlight-color, 10);
+	}
+
+	.wrap .page-title-action:focus {
+		border-color: lighten($highlight-color, 10);
+		color: darken($highlight-color, 20);;
+		box-shadow: 0 0 0 1px lighten($highlight-color, 10);
+	}
+}
+
+.view-switch a.current:before {
+	color: $menu-background;
+}
+
+.view-switch a:hover:before {
+	color: $menu-bubble-background;
+}
+
+
+/* Admin Menu */
+
+#adminmenuback,
+#adminmenuwrap,
+#adminmenu {
+	background: $menu-background;
+}
+
+#adminmenu a {
+	color: $menu-text;
+}
+
+#adminmenu div.wp-menu-image:before {
+	color: $menu-icon;
+}
+
+#adminmenu a:hover,
+#adminmenu li.menu-top:hover,
+#adminmenu li.opensub > a.menu-top,
+#adminmenu li > a.menu-top:focus {
+	color: $menu-highlight-text;
+	background-color: $menu-highlight-background;
+}
+
+#adminmenu li.menu-top:hover div.wp-menu-image:before,
+#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
+	color: $menu-highlight-icon;
+}
+
+
+/* Active tabs use a bottom border color that matches the page background color. */
+
+.about-wrap .nav-tab-active,
+.nav-tab-active,
+.nav-tab-active:hover {
+	background-color: $body-background;
+	border-bottom-color: $body-background;
+}
+
+
+/* Admin Menu: submenu */
+
+#adminmenu .wp-submenu,
+#adminmenu .wp-has-current-submenu .wp-submenu,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
+	background: $menu-submenu-background;
+}
+
+#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
+	border-right-color: $menu-submenu-background;
+}
+
+#adminmenu .wp-submenu .wp-submenu-head {
+	color: $menu-submenu-text;
+}
+
+#adminmenu .wp-submenu a,
+#adminmenu .wp-has-current-submenu .wp-submenu a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
+	color: $menu-submenu-text;
+
+	&:focus, &:hover {
+		color: $menu-submenu-focus-text;
+	}
+}
+
+
+/* Admin Menu: current */
+
+#adminmenu .wp-submenu li.current a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
+	color: $menu-submenu-current-text;
+
+	&:hover, &:focus {
+		color: $menu-submenu-focus-text;
+	}
+}
+
+ul#adminmenu a.wp-has-current-submenu:after,
+ul#adminmenu > li.current > a.current:after {
+    border-right-color: $body-background;
+}
+
+#adminmenu li.current a.menu-top,
+#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
+#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
+.folded #adminmenu li.current.menu-top {
+	color: $menu-current-text;
+	background: $menu-current-background;
+}
+
+#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
+#adminmenu a.current:hover div.wp-menu-image:before,
+#adminmenu li.current div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
+#adminmenu li:hover div.wp-menu-image:before,
+#adminmenu li a:focus div.wp-menu-image:before,
+#adminmenu li.opensub div.wp-menu-image:before {
+	color: $menu-current-icon;
+}
+
+
+/* Admin Menu: bubble */
+
+#adminmenu .awaiting-mod,
+#adminmenu .update-plugins {
+	color: $menu-bubble-text;
+	background: $menu-bubble-background;
+}
+
+#adminmenu li.current a .awaiting-mod,
+#adminmenu li a.wp-has-current-submenu .update-plugins,
+#adminmenu li:hover a .awaiting-mod,
+#adminmenu li.menu-top:hover > a .update-plugins {
+	color: $menu-bubble-current-text;
+	background: $menu-bubble-current-background;
+}
+
+
+/* Admin Menu: collapse button */
+
+#collapse-button {
+    color: $menu-collapse-text;
+}
+
+#collapse-button:hover,
+#collapse-button:focus {
+    color: $menu-submenu-focus-text;
+}
+
+/* Admin Bar */
+
+#wpadminbar {
+	color: $menu-text;
+	background: $menu-background;
+}
+
+#wpadminbar .ab-item,
+#wpadminbar a.ab-item,
+#wpadminbar > #wp-toolbar span.ab-label,
+#wpadminbar > #wp-toolbar span.noticon {
+	color: $menu-text;
+}
+
+#wpadminbar .ab-icon,
+#wpadminbar .ab-icon:before,
+#wpadminbar .ab-item:before,
+#wpadminbar .ab-item:after {
+	color: $menu-icon;
+}
+
+#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
+#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
+#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
+#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
+#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
+	color: $menu-submenu-focus-text;
+	background: $menu-submenu-background;
+}
+
+#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
+#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
+#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
+	color: $menu-submenu-focus-text;
+}
+
+#wpadminbar:not(.mobile) li:hover .ab-icon:before,
+#wpadminbar:not(.mobile) li:hover .ab-item:before,
+#wpadminbar:not(.mobile) li:hover .ab-item:after,
+#wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
+	color: $menu-submenu-focus-text;
+}
+
+
+/* Admin Bar: submenu */
+
+#wpadminbar .menupop .ab-sub-wrapper {
+	background: $menu-submenu-background;
+}
+
+#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
+#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
+	background: $menu-submenu-background-alt;
+}
+
+#wpadminbar .ab-submenu .ab-item,
+#wpadminbar .quicklinks .menupop ul li a,
+#wpadminbar .quicklinks .menupop.hover ul li a,
+#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
+	color: $menu-submenu-text;
+}
+
+#wpadminbar .quicklinks li .blavatar,
+#wpadminbar .menupop .menupop > .ab-item:before {
+	color: $menu-icon;
+}
+
+#wpadminbar .quicklinks .menupop ul li a:hover,
+#wpadminbar .quicklinks .menupop ul li a:focus,
+#wpadminbar .quicklinks .menupop ul li a:hover strong,
+#wpadminbar .quicklinks .menupop ul li a:focus strong,
+#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
+#wpadminbar .quicklinks .menupop.hover ul li a:hover,
+#wpadminbar .quicklinks .menupop.hover ul li a:focus,
+#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
+#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
+#wpadminbar li:hover .ab-icon:before,
+#wpadminbar li:hover .ab-item:before,
+#wpadminbar li a:focus .ab-icon:before,
+#wpadminbar li .ab-item:focus:before,
+#wpadminbar li .ab-item:focus .ab-icon:before,
+#wpadminbar li.hover .ab-icon:before,
+#wpadminbar li.hover .ab-item:before,
+#wpadminbar li:hover #adminbarsearch:before,
+#wpadminbar li #adminbarsearch.adminbar-focused:before {
+	color: $menu-submenu-focus-text;
+}
+
+#wpadminbar .quicklinks li a:hover .blavatar,
+#wpadminbar .quicklinks li a:focus .blavatar,
+#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
+#wpadminbar .menupop .menupop > .ab-item:hover:before,
+#wpadminbar.mobile .quicklinks .ab-icon:before,
+#wpadminbar.mobile .quicklinks .ab-item:before {
+	color: $menu-submenu-focus-text;
+}
+
+#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
+#wpadminbar.mobile .quicklinks .hover .ab-item:before {
+	color: $menu-icon;
+}
+
+
+/* Admin Bar: search */
+
+#wpadminbar #adminbarsearch:before {
+	color: $menu-icon;
+}
+
+#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
+	color: $menu-text;
+	background: $adminbar-input-background;
+}
+
+/* Admin Bar: recovery mode */
+
+#wpadminbar #wp-admin-bar-recovery-mode {
+	color: $adminbar-recovery-exit-text;
+	background-color: $adminbar-recovery-exit-background;
+}
+
+#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
+#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
+	color: $adminbar-recovery-exit-text;
+}
+
+#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item,
+#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
+#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
+#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
+	color: $adminbar-recovery-exit-text;
+	background-color: $adminbar-recovery-exit-background-alt;
+}
+
+/* Admin Bar: my account */
+
+#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
+	border-color: $adminbar-avatar-frame;
+	background-color: $adminbar-avatar-frame;
+}
+
+#wpadminbar #wp-admin-bar-user-info .display-name {
+	color: $menu-text;
+}
+
+#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
+	color: $menu-submenu-focus-text;
+}
+
+#wpadminbar #wp-admin-bar-user-info .username {
+	color: $menu-submenu-text;
+}
+
+
+/* Pointers */
+
+.wp-pointer .wp-pointer-content h3 {
+	background-color: $highlight-color;
+	border-color: darken( $highlight-color, 5% );
+}
+
+.wp-pointer .wp-pointer-content h3:before {
+	color: $highlight-color;
+}
+
+.wp-pointer.wp-pointer-top .wp-pointer-arrow,
+.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
+.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
+.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
+	border-bottom-color: $highlight-color;
+}
+
+
+/* Media */
+
+.media-item .bar,
+.media-progress-bar div {
+	background-color: $highlight-color;
+}
+
+.details.attachment {
+	box-shadow:
+		inset 0 0 0 3px #fff,
+		inset 0 0 0 7px $highlight-color;
+}
+
+.attachment.details .check {
+	background-color: $highlight-color;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
+}
+
+.media-selection .attachment.selection.details .thumbnail {
+	box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color;
+}
+
+
+/* Themes */
+
+.theme-browser .theme.active .theme-name,
+.theme-browser .theme.add-new-theme a:hover:after,
+.theme-browser .theme.add-new-theme a:focus:after {
+	background: $highlight-color;
+}
+
+.theme-browser .theme.add-new-theme a:hover span:after,
+.theme-browser .theme.add-new-theme a:focus span:after {
+	color: $highlight-color;
+}
+
+.theme-section.current,
+.theme-filter.current {
+	border-bottom-color: $menu-background;
+}
+
+body.more-filters-opened .more-filters {
+	color: $menu-text;
+	background-color: $menu-background;
+}
+
+body.more-filters-opened .more-filters:before {
+	color: $menu-text;
+}
+
+body.more-filters-opened .more-filters:hover,
+body.more-filters-opened .more-filters:focus {
+	background-color: $menu-highlight-background;
+	color: $menu-highlight-text;
+}
+
+body.more-filters-opened .more-filters:hover:before,
+body.more-filters-opened .more-filters:focus:before {
+	color: $menu-highlight-text;
+}
+
+/* Widgets */
+
+.widgets-chooser li.widgets-chooser-selected {
+	background-color: $menu-highlight-background;
+	color: $menu-highlight-text;
+}
+
+.widgets-chooser li.widgets-chooser-selected:before,
+.widgets-chooser li.widgets-chooser-selected:focus:before {
+	color: $menu-highlight-text;
+}
+
+
+/* Nav Menus */
+
+.nav-menus-php .item-edit:focus:before {
+	box-shadow:
+		0 0 0 1px lighten($button-color, 10),
+		0 0 2px 1px $button-color;
+}
+
+
+/* Responsive Component */
+
+div#wp-responsive-toggle a:before {
+	color: $menu-icon;
+}
+
+.wp-responsive-open div#wp-responsive-toggle a {
+	// ToDo: make inset border
+	border-color: transparent;
+	background: $menu-highlight-background;
+}
+
+.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
+	background: $menu-submenu-background;
+}
+
+.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
+	color: $menu-icon;
+}
+
+/* TinyMCE */
+
+.mce-container.mce-menu .mce-menu-item:hover,
+.mce-container.mce-menu .mce-menu-item.mce-selected,
+.mce-container.mce-menu .mce-menu-item:focus,
+.mce-container.mce-menu .mce-menu-item-normal.mce-active,
+.mce-container.mce-menu .mce-menu-item-preview.mce-active {
+	background: $highlight-color;
+}
+
+/* Customizer */
+.wp-core-ui {
+	#customize-controls .control-section:hover > .accordion-section-title,
+	#customize-controls .control-section .accordion-section-title:hover,
+	#customize-controls .control-section.open .accordion-section-title,
+	#customize-controls .control-section .accordion-section-title:focus {
+		color: $link;
+		border-left-color: $button-color;
+	}
+
+	.customize-controls-close:focus,
+	.customize-controls-close:hover,
+	.customize-controls-preview-toggle:focus,
+	.customize-controls-preview-toggle:hover {
+		color: $link;
+		border-top-color: $button-color;
+	}
+
+	.customize-panel-back:hover,
+	.customize-panel-back:focus,
+	.customize-section-back:hover,
+	.customize-section-back:focus {
+		color: $link;
+		border-left-color: $button-color;
+	}
+
+	.customize-screen-options-toggle:hover,
+	.customize-screen-options-toggle:active,
+	.customize-screen-options-toggle:focus,
+	.active-menu-screen-options .customize-screen-options-toggle,
+	#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
+	#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
+	#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
+		color: $link;
+	}
+
+	.customize-screen-options-toggle:focus:before,
+	#customize-controls .customize-info .customize-help-toggle:focus:before,
+	&.wp-customizer button:focus .toggle-indicator:before,
+	.menu-item-bar .item-delete:focus:before,
+	#available-menu-items .item-add:focus:before,
+	#customize-save-button-wrapper .save:focus,
+	#publish-settings:focus {
+		box-shadow:
+			0 0 0 1px lighten($button-color, 10),
+			0 0 2px 1px $button-color;
+	}
+
+	#customize-controls .customize-info.open .customize-help-toggle,
+	#customize-controls .customize-info .customize-help-toggle:focus,
+	#customize-controls .customize-info .customize-help-toggle:hover {
+		color: $link;
+	}
+
+	.control-panel-themes .customize-themes-section-title:focus,
+	.control-panel-themes .customize-themes-section-title:hover {
+		border-left-color: $button-color;
+		color: $link;
+	}
+
+	.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
+		background: $button-color;
+	}
+
+	.control-panel-themes .customize-themes-section-title.selected {
+		color: $link;
+	}
+
+	#customize-theme-controls .control-section:hover > .accordion-section-title:after,
+	#customize-theme-controls .control-section .accordion-section-title:hover:after,
+	#customize-theme-controls .control-section.open .accordion-section-title:after,
+	#customize-theme-controls .control-section .accordion-section-title:focus:after,
+	#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
+	#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
+	#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
+	#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
+		color: $link;
+	}
+
+	.customize-control .attachment-media-view .button-add-media:focus {
+		background-color: #fbfbfc;
+		border-color: $button-color;
+		border-style: solid;
+		box-shadow: 0 0 0 1px $button-color;
+		outline: 2px solid transparent;
+	}
+
+	.wp-full-overlay-footer .devices button:focus,
+	.wp-full-overlay-footer .devices button.active:hover {
+		border-bottom-color: $button-color;
+	}
+
+	.wp-full-overlay-footer .devices button:hover:before,
+	.wp-full-overlay-footer .devices button:focus:before {
+		color: $button-color;
+	}
+
+	.wp-full-overlay .collapse-sidebar:hover,
+	.wp-full-overlay .collapse-sidebar:focus {
+		color: $button-color;
+	}
+
+	.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
+	.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
+		box-shadow:
+			0 0 0 1px lighten($button-color, 10),
+			0 0 2px 1px $button-color;
+	}
+
+	&.wp-customizer .theme-overlay .theme-header .close:focus,
+	&.wp-customizer .theme-overlay .theme-header .close:hover,
+	&.wp-customizer .theme-overlay .theme-header .right:focus,
+	&.wp-customizer .theme-overlay .theme-header .right:hover,
+	&.wp-customizer .theme-overlay .theme-header .left:focus,
+	&.wp-customizer .theme-overlay .theme-header .left:hover {
+		border-bottom-color: $button-color;
+		color: $link;
+	}
+}
+
+/* Welcome Panel */
+
+.welcome-panel {
+	background-color: $highlight-color;
+}
+
+[class*="welcome-panel-icon"] {
+	@if ( $scheme-name == "light" ) {
+		background-color: $icon-color;
+	} @else {
+		background-color: $base-color;
+	}
+}

tools/storybook/wordpress/css/colors/_mixins.scss

@@ -0,0 +1,37 @@
+/*
+ * Button mixin- creates a button effect with correct
+ * highlights/shadows, based on a base color.
+ */
+@mixin button( $button-color, $button-text-color: #fff ) {
+	background: $button-color;
+	border-color: $button-color;
+	color: $button-text-color;
+
+	&:hover,
+	&:focus {
+		background: lighten( $button-color, 3% );
+		border-color: darken( $button-color, 3% );
+		color: $button-text-color;
+	}
+
+	&:focus {
+		box-shadow:
+			0 0 0 1px #fff,
+			0 0 0 3px $button-color;
+	}
+
+	&:active {
+		background: darken( $button-color, 5% );
+		border-color: darken( $button-color, 5% );
+		color: $button-text-color;
+	}
+
+	&.active,
+	&.active:focus,
+	&.active:hover {
+		background: $button-color;
+		color: $button-text-color;
+		border-color: darken( $button-color, 15% );
+		box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
+	}
+}

tools/storybook/wordpress/css/colors/_variables.scss

@@ -0,0 +1,66 @@
+// assign default value to all undefined variables
+
+$scheme-name: "default" !default;
+
+// core variables
+
+$text-color: #fff !default;
+$base-color: #23282d !default;
+$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
+$highlight-color: #0073aa !default;
+$notification-color: #d54e21 !default;
+
+
+// global
+
+$body-background: #f1f1f1 !default;
+
+$link: #0073aa !default;
+$link-focus: lighten( $link, 10% ) !default;
+
+$button-color: $highlight-color !default;
+$button-text-color: $text-color !default;
+
+$form-checked: #7e8993 !default;
+
+// admin menu & admin-bar
+
+$menu-text: $text-color !default;
+$menu-icon: $icon-color !default;
+$menu-background: $base-color !default;
+
+$menu-highlight-text: $text-color !default;
+$menu-highlight-icon: $text-color !default;
+$menu-highlight-background: $highlight-color !default;
+
+$menu-current-text: $menu-highlight-text !default;
+$menu-current-icon: $menu-highlight-icon !default;
+$menu-current-background: $menu-highlight-background !default;
+
+$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
+$menu-submenu-background: darken( $base-color, 7% ) !default;
+$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
+
+$menu-submenu-focus-text: $highlight-color !default;
+$menu-submenu-current-text: $text-color !default;
+
+$menu-bubble-text: $text-color !default;
+$menu-bubble-background: $notification-color !default;
+$menu-bubble-current-text: $text-color !default;
+$menu-bubble-current-background: $menu-submenu-background !default;
+
+$menu-collapse-text: $menu-icon !default;
+$menu-collapse-icon: $menu-icon !default;
+$menu-collapse-focus-text: $text-color !default;
+$menu-collapse-focus-icon: $menu-highlight-icon !default;
+
+$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
+$adminbar-input-background: lighten( $menu-background, 7% ) !default;
+
+$adminbar-recovery-exit-text: $menu-bubble-text !default;
+$adminbar-recovery-exit-background: $menu-bubble-background !default;
+$adminbar-recovery-exit-background-alt: mix(black, $adminbar-recovery-exit-background, 10%) !default;
+
+$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
+
+$low-contrast-theme: "false" !default;