Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/trunk' into dev/32719-remove-wc-admin-set-up-additional-payment-types-note

This commit is contained in:
Ilyas Foo 2022-04-28 14:44:57 +08:00
parent 5187a2d4bd 0389bc7cc3
commit c66550da1f
285 changed files with 68963 additions and 2304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.github/workflows/build-release-zip-file.yml vendored
View File

@ -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: Build the zip file
id: build
uses: woocommerce/action-build@trunk
- name: Unzip the file (prevents double zip problem)
run: unzip ${{ steps.build.outputs.zip_path }} -d zipfile
- name: Install PNPM
run: npm install -g pnpm
- name: Build zip
run: pnpm nx build-zip woocommerce
- 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

20
.github/workflows/build-release.yml vendored
View File

@ -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
uses: woocommerce/action-build@trunk
- name: Install PNPM
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

8
.github/workflows/ci.yml vendored
View File

@ -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
key: ${{ runner.os }}-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
plugins/woocommerce/**/vendor
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

37
.github/workflows/mirrors.yml vendored
View File

@ -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
uses: woocommerce/action-build@trunk
env:
BUILD_ENV: mirrors
- name: Upload PR zip
uses: actions/upload-artifact@v2
- name: Install PNPM
run: npm install -g pnpm
- name: Build zip
run: pnpm nx build-zip woocommerce
- 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:

16
.github/workflows/nightly-builds.yml vendored
View File

@ -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
uses: woocommerce/action-build@trunk
- name: Install PNPM
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

163
.github/workflows/pr-build-and-e2e-tests.yml vendored
View File

@ -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
needs: [build]
runs-on: ubuntu-20.04
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
needs: [build]
runs-on: ubuntu-20.04
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
package/woocommerce/packages/js/api-core-tests/allure-report
packages/js/api-core-tests/allure-results
packages/js/api-core-tests/allure-report
retention-days: 7
k6-tests-run:
name: Runs k6 Performance tests
runs-on: ubuntu-18.04
needs: [build]
runs-on: ubuntu-20.04
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

6
.github/workflows/pr-code-coverage.yml vendored
View File

@ -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
key: ${{ runner.os }}-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
plugins/woocommerce/**/vendor
key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
- name: Install PNPM
run: npm install -g pnpm

6
.github/workflows/pr-code-sniff.yml vendored
View File

@ -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
key: ${{ runner.os }}-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
plugins/woocommerce/**/vendor
key: ${{ runner.os }}-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
- name: Install PNPM
run: npm install -g pnpm

2
.github/workflows/pr-lint-monorepo.yml vendored
View File

@ -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

2
.github/workflows/pr-lint-test-js.yml vendored
View File

@ -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

2
.github/workflows/pr-project-label.yml vendored
View File

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

6
.github/workflows/pr-smoke-test.yml vendored
View File

@ -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
key: ${{ runner.os }}-smoke-test-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
package/woocommerce/plugins/woocommerce/**/vendor
key: ${{ runner.os }}-smoke-test-npm-composer-${{ hashFiles('**/composer.lock', '**/pnpm-lock.yaml') }}
- name: Install PNPM
run: npm install -g pnpm

8
.github/workflows/pr-unit-tests.yml vendored
View File

@ -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
key: ${{ runner.os }}-npm-composer-${{ hashFiles('plugins/woocommerce/composer.lock', '**/pnpm-lock.yaml') }}
plugins/woocommerce/**/vendor
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

2
.github/workflows/pull-request-post-merge-processing.yml vendored
View File

@ -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: |

2
.github/workflows/release-code-freeze.yml vendored
View File

@ -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: |

2
.github/workflows/smoke-test-daily-site-check.yml vendored
View File

@ -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

22
.github/workflows/smoke-test-daily.yml vendored
View File

@ -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
id: build
uses: woocommerce/action-build@trunk
env:
BUILD_ENV: e2e
- name: Install PNPM
run: npm install -g pnpm
- name: Build zip
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

6
.github/workflows/smoke-test-release.yml vendored
View File

@ -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:

2
.github/workflows/stalebot.yml vendored
View File

@ -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:

2
.github/workflows/triage-label.yml vendored
View File

@ -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

10
.github/workflows/triage-replies.yml vendored
View File

@ -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:

2
.github/workflows/update-feedback-labels.yml vendored
View File

@ -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

134
package.json
View File

@ -1,54 +1,84 @@
{
"name": "woocommerce-monorepo",
"title": "WooCommerce Monorepo",
"description": "Monorepo for the WooCommerce ecosystem",
"homepage": "https://woocommerce.com/",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/woocommerce/woocommerce.git"
},
"author": "Automattic",
"license": "GPL-3.0-or-later",
"bugs": {
"url": "https://github.com/woocommerce/woocommerce/issues"
},
"scripts": {
"preinstall": "npx only-allow pnpm",
"postinstall": "pnpm git:update-hooks",
"git:update-hooks": "rm -r .git/hooks && mkdir -p .git/hooks && husky install",
"create-extension": "node ./tools/create-extension/index.js"
},
"devDependencies": {
"@automattic/nx-composer": "^0.1.0",
"@nrwl/cli": "^13.3.4",
"@nrwl/devkit": "^13.1.4",
"@nrwl/linter": "^13.3.4",
"@nrwl/tao": "13.3.4",
"@nrwl/web": "^13.3.4",
"@nrwl/workspace": "^13.3.4",
"@types/node": "14.14.33",
"@woocommerce/eslint-plugin": "workspace:*",
"@wordpress/eslint-plugin": "^11.0.0",
"@wordpress/prettier-config": "^1.1.1",
"chalk": "^4.1.2",
"glob": "^7.2.0",
"husky": "^7.0.4",
"jest": "^27.3.1",
"lint-staged": "^12.3.7",
"mkdirp": "^1.0.4",
"node-stream-zip": "^1.15.0",
"prettier": "npm:wp-prettier@^2.2.1-beta-1",
"request": "^2.88.2",
"typescript": "4.2.4"
},
"dependencies": {
"@babel/core": "7.12.9",
"@wordpress/babel-plugin-import-jsx-pragma": "^3.1.0",
"@wordpress/babel-preset-default": "^6.4.1",
"fs-extra": "^10.0.1",
"lodash": "^4.17.21",
"promptly": "^3.2.0",
"wp-textdomain": "1.0.1"
}
"name": "woocommerce-monorepo",
"title": "WooCommerce Monorepo",
"description": "Monorepo for the WooCommerce ecosystem",
"homepage": "https://woocommerce.com/",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/woocommerce/woocommerce.git"
},
"author": "Automattic",
"license": "GPL-3.0-or-later",
"bugs": {
"url": "https://github.com/woocommerce/woocommerce/issues"
},
"scripts": {
"build-storybook": "build-storybook -c ./tools/storybook/.storybook",
"preinstall": "npx only-allow pnpm",
"postinstall": "pnpm git:update-hooks",
"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",
"storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook",
"create-extension": "node ./tools/create-extension/index.js"
},
"devDependencies": {
"@automattic/nx-composer": "^0.1.0",
"@babel/preset-env": "^7.16.11",
"@babel/runtime": "^7.17.2",
"@nrwl/cli": "^13.3.4",
"@nrwl/devkit": "^13.1.4",
"@nrwl/linter": "^13.3.4",
"@nrwl/tao": "13.3.4",
"@nrwl/web": "^13.3.4",
"@nrwl/workspace": "^13.3.4",
"@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",
"@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"
}
}

1
packages/js/e2e-environment/CHANGELOG.md
View File

@ -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.

18
packages/js/e2e-environment/external.md
View File

@ -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`.

10
packages/js/e2e-utils/src/flows/shopper.js
View File

@ -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,
} );
await expect( page ).toClick( 'h2.entry-title', {
text: prouductName,
} );
text: prouductName
} );
await expect( page ).toClick( 'h2.entry-title > a' , {
text: prouductName
} );
}
await page.waitForSelector( 'h1.entry-title' );
await expect( page.title() ).resolves.toMatch( prouductName );

75
plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx Normal file
View File

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

8
plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 680 B

8
plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 769 B

6
plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.scss Normal file
View File

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

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

@ -4,8 +4,20 @@
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 = () => {
return <h1>Experimental products</h1>;
const productTypes = getProductTypes();
return (
<div className="woocommerce-task-products">
<Stack items={ productTypes } />
</div>
);
};
registerPlugin( 'wc-admin-onboarding-task-products', {

61
plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.scss Normal file
View File

@ -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;
}
}

57
plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx Normal file
View File

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

9
plugins/woocommerce-admin/client/tasks/fills/experimental-products/utils.tsx Normal file
View File

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

20
plugins/woocommerce-admin/package.json
View File

@ -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",

2
plugins/woocommerce-admin/webpack.config.js
View File

@ -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' ] );

3
plugins/woocommerce/bin/build-zip.sh
View File

@ -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

4
plugins/woocommerce/changelog/add-product-stack Normal file
View File

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

4
plugins/woocommerce/changelog/fix-32028-settings-method-exists-fatal Normal file
View File

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

5
plugins/woocommerce/changelog/fix-32754-inactive-downloads Normal file
View File

@ -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.

5
plugins/woocommerce/changelog/fix-e2e-tests Normal file
View File

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

4
plugins/woocommerce/changelog/fix-storybook-location Normal file
View File

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

4
plugins/woocommerce/changelog/pr-31788 Normal file
View File

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

4
plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.3 Normal file
View File

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

2
plugins/woocommerce/composer.json
View File

@ -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",

16
plugins/woocommerce/composer.lock generated
View File

@ -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",
"reference": "bde2a5771ddc7970c2114da621c28b0f7b6296ca",
"url": "https://api.github.com/repos/woocommerce/woocommerce-gutenberg-products-block/zipball/5bba24fdaf41166a4ad24a1a45758e5ec7e8625c",
"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"
}

25
plugins/woocommerce/includes/class-wc-download-handler.php
View File

@ -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' ) );
header_remove( 'Content-Description;' );
header_remove( 'Content-Disposition' );
header_remove( 'Content-Transfer-Encoding' );
if ( headers_sent() ) {
wc_get_logger()->log( 'warning', __( 'Headers already sent when generating download error message.', 'woocommerce' ) );
} else {
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>';

2
plugins/woocommerce/includes/class-wc-install.php
View File

@ -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() ) ) );

5
plugins/woocommerce/includes/wc-formatting-functions.php
View File

@ -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 );

2
plugins/woocommerce/package.json
View File

@ -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",

2
plugins/woocommerce/tests/e2e/README.md
View File

@ -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).

2
plugins/woocommerce/tests/e2e/config/default.json
View File

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

6
plugins/woocommerce/tests/legacy/unit-tests/formatting/functions.php
View File

@ -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' ) );
}
/**

4
plugins/woocommerce/tests/performance/config.js
View File

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

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

@ -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 );
}
}

4719
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

6
plugins/woocommerce-admin/storybook/.storybook/main.js → tools/storybook/.storybook/main.js
View File

@ -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)',
'../../client/**/stories/*.js',
'../../../packages/js/experimental/src/**/stories/*.@(js|tsx)',
'../../../plugins/woocommerce-admin/client/**/stories/*.js',
],
addons: [
'@storybook/addon-docs',

0
plugins/woocommerce-admin/storybook/.storybook/preview-head.html → tools/storybook/.storybook/preview-head.html
View File

0
plugins/woocommerce-admin/bin/import-wp-css-storybook.sh → tools/storybook/import-wp-css-storybook.sh
View File

0
plugins/woocommerce-admin/storybook/manager.js → tools/storybook/manager.js
View File

0
plugins/woocommerce-admin/storybook/preview.js → tools/storybook/preview.js
View File

0
plugins/woocommerce-admin/storybook/setting.mock.js → tools/storybook/setting.mock.js
View File

0
plugins/woocommerce-admin/storybook/tsconfig.json → tools/storybook/tsconfig.json
View File

30
plugins/woocommerce-admin/storybook/webpack.config.js → tools/storybook/webpack.config.js
View File

@ -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;
};

0
plugins/woocommerce-admin/storybook/woocommerce_logo.png → tools/storybook/woocommerce_logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

1473
tools/storybook/wordpress/css/about-rtl.css Normal file
View File

File diff suppressed because it is too large Load Diff

2
tools/storybook/wordpress/css/about-rtl.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1472
tools/storybook/wordpress/css/about.css Normal file
View File

File diff suppressed because it is too large Load Diff

2
tools/storybook/wordpress/css/about.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

944
tools/storybook/wordpress/css/admin-menu-rtl.css Normal file
View File

@ -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;
}
}

2
tools/storybook/wordpress/css/admin-menu-rtl.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

943
tools/storybook/wordpress/css/admin-menu.css Normal file
View File

@ -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;
}
}

2
tools/storybook/wordpress/css/admin-menu.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

77
tools/storybook/wordpress/css/code-editor-rtl.css Normal file
View File

@ -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;
}

2
tools/storybook/wordpress/css/code-editor-rtl.min.css vendored Normal file
View File

@ -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}

76
tools/storybook/wordpress/css/code-editor.css Normal file
View File

@ -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;
}

2
tools/storybook/wordpress/css/code-editor.min.css vendored Normal file
View File

@ -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}

183
tools/storybook/wordpress/css/color-picker-rtl.css Normal file
View File

@ -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;
}
}

2
tools/storybook/wordpress/css/color-picker-rtl.min.css vendored Normal file
View File

@ -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}}

182
tools/storybook/wordpress/css/color-picker.css Normal file
View File

@ -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;
}
}

2
tools/storybook/wordpress/css/color-picker.min.css vendored Normal file
View File

@ -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}}

797
tools/storybook/wordpress/css/colors/_admin.scss Normal file
View File

@ -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;
}
}

37
tools/storybook/wordpress/css/colors/_mixins.scss Normal file
View File

@ -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% );
}
}

66
tools/storybook/wordpress/css/colors/_variables.scss Normal file
View File

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

714
tools/storybook/wordpress/css/colors/blue/colors-rtl.css Normal file
View File

@ -0,0 +1,714 @@
/*! This file is auto-generated */
/*
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
*/
body {
background: #f1f1f1;
}
/* Links */
a {
color: #0073aa;
}
a:hover, a:active, a:focus {
color: #0096dd;
}
#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: #0073aa;
}
.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus {
color: #0096dd;
}
.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%237e8993%27%2F%3E%3C%2Fsvg%3E");
}
input[type=radio]:checked::before {
background: #7e8993;
}
.wp-core-ui input[type=reset]:hover,
.wp-core-ui input[type=reset]:active {
color: #0096dd;
}
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: #096484;
box-shadow: 0 0 0 1px #096484;
}
/* Core UI */
.wp-core-ui .button {
border-color: #7e8993;
color: #32373c;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #717c87;
color: #262a2e;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #7e8993;
color: #262a2e;
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button:active {
border-color: #7e8993;
color: #262a2e;
box-shadow: none;
}
.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
border-color: #e1a948;
color: #262a2e;
box-shadow: inset 0 2px 5px -3px #e1a948;
}
.wp-core-ui .button.active:focus {
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button,
.wp-core-ui .button-secondary {
color: #096484;
border-color: #096484;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
border-color: #064054;
color: #064054;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
border-color: #0c88b4;
color: #021c25;
box-shadow: 0 0 0 1px #0c88b4;
}
.wp-core-ui .button-primary:hover {
color: #fff;
}
.wp-core-ui .button-primary {
background: #e1a948;
border-color: #e1a948;
color: #fff;
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #e3af55;
border-color: #dfa33b;
color: #fff;
}
.wp-core-ui .button-primary:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e1a948;
}
.wp-core-ui .button-primary:active {
background: #dd9f32;
border-color: #dd9f32;
color: #fff;
}
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
background: #e1a948;
color: #fff;
border-color: #bd831f;
box-shadow: inset 0 2px 5px -3px #241906;
}
.wp-core-ui .button-group > .button.active {
border-color: #e1a948;
}
.wp-core-ui .wp-ui-primary {
color: #fff;
background-color: #52accc;
}
.wp-core-ui .wp-ui-text-primary {
color: #52accc;
}
.wp-core-ui .wp-ui-highlight {
color: #fff;
background-color: #096484;
}
.wp-core-ui .wp-ui-text-highlight {
color: #096484;
}
.wp-core-ui .wp-ui-notification {
color: #fff;
background-color: #e1a948;
}
.wp-core-ui .wp-ui-text-notification {
color: #e1a948;
}
.wp-core-ui .wp-ui-text-icon {
color: #e5f8ff;
}
/* List tables */
.wrap .page-title-action,
.wrap .page-title-action:active {
border: 1px solid #096484;
color: #096484;
}
.wrap .page-title-action:hover {
color: #064054;
border-color: #064054;
}
.wrap .page-title-action:focus {
border-color: #0c88b4;
color: #021c25;
box-shadow: 0 0 0 1px #0c88b4;
}
.view-switch a.current:before {
color: #52accc;
}
.view-switch a:hover:before {
color: #e1a948;
}
/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
background: #52accc;
}
#adminmenu a {
color: #fff;
}
#adminmenu div.wp-menu-image:before {
color: #e5f8ff;
}
#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
background-color: #096484;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
color: #fff;
}
/* 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: #f1f1f1;
border-bottom-color: #f1f1f1;
}
/* 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: #4796b3;
}
#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: #4796b3;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #e2ecf1;
}
#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: #e2ecf1;
}
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
color: #fff;
}
/* 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: #fff;
}
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
color: #fff;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
border-left-color: #f1f1f1;
}
#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: #fff;
background: #096484;
}
#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: #fff;
}
/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
color: #fff;
background: #e1a948;
}
#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: #fff;
background: #4796b3;
}
/* Admin Menu: collapse button */
#collapse-button {
color: #e5f8ff;
}
#collapse-button:hover,
#collapse-button:focus {
color: #fff;
}
/* Admin Bar */
#wpadminbar {
color: #fff;
background: #52accc;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
color: #fff;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
color: #e5f8ff;
}
#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: #fff;
background: #4796b3;
}
#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: #fff;
}
#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: #fff;
}
/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
background: #4796b3;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
background: #74b6ce;
}
#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: #e2ecf1;
}
#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
color: #e5f8ff;
}
#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: #fff;
}
#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: #fff;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: #e5f8ff;
}
/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
color: #e5f8ff;
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: #fff;
background: #6eb9d4;
}
/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
color: #fff;
background-color: #e1a948;
}
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
color: #fff;
}
#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: #fff;
background-color: #cb9841;
}
/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
border-color: #6eb9d4;
background-color: #6eb9d4;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #e2ecf1;
}
/* Pointers */
.wp-pointer .wp-pointer-content h3 {
background-color: #096484;
border-color: #07526c;
}
.wp-pointer .wp-pointer-content h3:before {
color: #096484;
}
.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: #096484;
}
/* Media */
.media-item .bar,
.media-progress-bar div {
background-color: #096484;
}
.details.attachment {
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #096484;
}
.attachment.details .check {
background-color: #096484;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #096484;
}
.media-selection .attachment.selection.details .thumbnail {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #096484;
}
/* 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: #096484;
}
.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
color: #096484;
}
.theme-section.current,
.theme-filter.current {
border-bottom-color: #52accc;
}
body.more-filters-opened .more-filters {
color: #fff;
background-color: #52accc;
}
body.more-filters-opened .more-filters:before {
color: #fff;
}
body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
background-color: #096484;
color: #fff;
}
body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
color: #fff;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
background-color: #096484;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
color: #fff;
}
/* Nav Menus */
.nav-menus-php .item-edit:focus:before {
box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #e5f8ff;
}
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #096484;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #4796b3;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #e5f8ff;
}
/* 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: #096484;
}
/* Customizer */
.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,
.wp-core-ui #customize-controls .control-section.open .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:focus {
color: #0073aa;
border-right-color: #e1a948;
}
.wp-core-ui .customize-controls-close:focus,
.wp-core-ui .customize-controls-close:hover,
.wp-core-ui .customize-controls-preview-toggle:focus,
.wp-core-ui .customize-controls-preview-toggle:hover {
color: #0073aa;
border-top-color: #e1a948;
}
.wp-core-ui .customize-panel-back:hover,
.wp-core-ui .customize-panel-back:focus,
.wp-core-ui .customize-section-back:hover,
.wp-core-ui .customize-section-back:focus {
color: #0073aa;
border-right-color: #e1a948;
}
.wp-core-ui .customize-screen-options-toggle:hover,
.wp-core-ui .customize-screen-options-toggle:active,
.wp-core-ui .customize-screen-options-toggle:focus,
.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: #0073aa;
}
.wp-core-ui .customize-screen-options-toggle:focus:before,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before,
.wp-core-ui .menu-item-bar .item-delete:focus:before,
.wp-core-ui #available-menu-items .item-add:focus:before,
.wp-core-ui #customize-save-button-wrapper .save:focus,
.wp-core-ui #publish-settings:focus {
box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948;
}
.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover {
color: #0073aa;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,
.wp-core-ui .control-panel-themes .customize-themes-section-title:hover {
border-right-color: #e1a948;
color: #0073aa;
}
.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: #e1a948;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,
.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: #0073aa;
}
.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: #e1a948;
border-style: solid;
box-shadow: 0 0 0 1px #e1a948;
outline: 2px solid transparent;
}
.wp-core-ui .wp-full-overlay-footer .devices button:focus,
.wp-core-ui .wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #e1a948;
}
.wp-core-ui .wp-full-overlay-footer .devices button:hover:before,
.wp-core-ui .wp-full-overlay-footer .devices button:focus:before {
color: #e1a948;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: #e1a948;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948;
}
.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover {
border-bottom-color: #e1a948;
color: #0073aa;
}
/* Welcome Panel */
.welcome-panel {
background-color: #096484;
}
[class*=welcome-panel-icon] {
background-color: #52accc;
}

2
tools/storybook/wordpress/css/colors/blue/colors-rtl.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

714
tools/storybook/wordpress/css/colors/blue/colors.css Normal file
View File

@ -0,0 +1,714 @@
/*! This file is auto-generated */
/*
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
*/
body {
background: #f1f1f1;
}
/* Links */
a {
color: #0073aa;
}
a:hover, a:active, a:focus {
color: #0096dd;
}
#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: #0073aa;
}
.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus {
color: #0096dd;
}
.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%237e8993%27%2F%3E%3C%2Fsvg%3E");
}
input[type=radio]:checked::before {
background: #7e8993;
}
.wp-core-ui input[type=reset]:hover,
.wp-core-ui input[type=reset]:active {
color: #0096dd;
}
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: #096484;
box-shadow: 0 0 0 1px #096484;
}
/* Core UI */
.wp-core-ui .button {
border-color: #7e8993;
color: #32373c;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #717c87;
color: #262a2e;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #7e8993;
color: #262a2e;
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button:active {
border-color: #7e8993;
color: #262a2e;
box-shadow: none;
}
.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
border-color: #e1a948;
color: #262a2e;
box-shadow: inset 0 2px 5px -3px #e1a948;
}
.wp-core-ui .button.active:focus {
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button,
.wp-core-ui .button-secondary {
color: #096484;
border-color: #096484;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
border-color: #064054;
color: #064054;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
border-color: #0c88b4;
color: #021c25;
box-shadow: 0 0 0 1px #0c88b4;
}
.wp-core-ui .button-primary:hover {
color: #fff;
}
.wp-core-ui .button-primary {
background: #e1a948;
border-color: #e1a948;
color: #fff;
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #e3af55;
border-color: #dfa33b;
color: #fff;
}
.wp-core-ui .button-primary:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e1a948;
}
.wp-core-ui .button-primary:active {
background: #dd9f32;
border-color: #dd9f32;
color: #fff;
}
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
background: #e1a948;
color: #fff;
border-color: #bd831f;
box-shadow: inset 0 2px 5px -3px #241906;
}
.wp-core-ui .button-group > .button.active {
border-color: #e1a948;
}
.wp-core-ui .wp-ui-primary {
color: #fff;
background-color: #52accc;
}
.wp-core-ui .wp-ui-text-primary {
color: #52accc;
}
.wp-core-ui .wp-ui-highlight {
color: #fff;
background-color: #096484;
}
.wp-core-ui .wp-ui-text-highlight {
color: #096484;
}
.wp-core-ui .wp-ui-notification {
color: #fff;
background-color: #e1a948;
}
.wp-core-ui .wp-ui-text-notification {
color: #e1a948;
}
.wp-core-ui .wp-ui-text-icon {
color: #e5f8ff;
}
/* List tables */
.wrap .page-title-action,
.wrap .page-title-action:active {
border: 1px solid #096484;
color: #096484;
}
.wrap .page-title-action:hover {
color: #064054;
border-color: #064054;
}
.wrap .page-title-action:focus {
border-color: #0c88b4;
color: #021c25;
box-shadow: 0 0 0 1px #0c88b4;
}
.view-switch a.current:before {
color: #52accc;
}
.view-switch a:hover:before {
color: #e1a948;
}
/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
background: #52accc;
}
#adminmenu a {
color: #fff;
}
#adminmenu div.wp-menu-image:before {
color: #e5f8ff;
}
#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
background-color: #096484;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
color: #fff;
}
/* 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: #f1f1f1;
border-bottom-color: #f1f1f1;
}
/* 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: #4796b3;
}
#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: #4796b3;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #e2ecf1;
}
#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: #e2ecf1;
}
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
color: #fff;
}
/* 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: #fff;
}
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
color: #fff;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
border-right-color: #f1f1f1;
}
#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: #fff;
background: #096484;
}
#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: #fff;
}
/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
color: #fff;
background: #e1a948;
}
#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: #fff;
background: #4796b3;
}
/* Admin Menu: collapse button */
#collapse-button {
color: #e5f8ff;
}
#collapse-button:hover,
#collapse-button:focus {
color: #fff;
}
/* Admin Bar */
#wpadminbar {
color: #fff;
background: #52accc;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
color: #fff;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
color: #e5f8ff;
}
#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: #fff;
background: #4796b3;
}
#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: #fff;
}
#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: #fff;
}
/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
background: #4796b3;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
background: #74b6ce;
}
#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: #e2ecf1;
}
#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
color: #e5f8ff;
}
#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: #fff;
}
#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: #fff;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: #e5f8ff;
}
/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
color: #e5f8ff;
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: #fff;
background: #6eb9d4;
}
/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
color: #fff;
background-color: #e1a948;
}
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
color: #fff;
}
#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: #fff;
background-color: #cb9841;
}
/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
border-color: #6eb9d4;
background-color: #6eb9d4;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #e2ecf1;
}
/* Pointers */
.wp-pointer .wp-pointer-content h3 {
background-color: #096484;
border-color: #07526c;
}
.wp-pointer .wp-pointer-content h3:before {
color: #096484;
}
.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: #096484;
}
/* Media */
.media-item .bar,
.media-progress-bar div {
background-color: #096484;
}
.details.attachment {
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #096484;
}
.attachment.details .check {
background-color: #096484;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #096484;
}
.media-selection .attachment.selection.details .thumbnail {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #096484;
}
/* 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: #096484;
}
.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
color: #096484;
}
.theme-section.current,
.theme-filter.current {
border-bottom-color: #52accc;
}
body.more-filters-opened .more-filters {
color: #fff;
background-color: #52accc;
}
body.more-filters-opened .more-filters:before {
color: #fff;
}
body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
background-color: #096484;
color: #fff;
}
body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
color: #fff;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
background-color: #096484;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
color: #fff;
}
/* Nav Menus */
.nav-menus-php .item-edit:focus:before {
box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #e5f8ff;
}
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #096484;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #4796b3;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #e5f8ff;
}
/* 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: #096484;
}
/* Customizer */
.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,
.wp-core-ui #customize-controls .control-section.open .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:focus {
color: #0073aa;
border-left-color: #e1a948;
}
.wp-core-ui .customize-controls-close:focus,
.wp-core-ui .customize-controls-close:hover,
.wp-core-ui .customize-controls-preview-toggle:focus,
.wp-core-ui .customize-controls-preview-toggle:hover {
color: #0073aa;
border-top-color: #e1a948;
}
.wp-core-ui .customize-panel-back:hover,
.wp-core-ui .customize-panel-back:focus,
.wp-core-ui .customize-section-back:hover,
.wp-core-ui .customize-section-back:focus {
color: #0073aa;
border-left-color: #e1a948;
}
.wp-core-ui .customize-screen-options-toggle:hover,
.wp-core-ui .customize-screen-options-toggle:active,
.wp-core-ui .customize-screen-options-toggle:focus,
.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: #0073aa;
}
.wp-core-ui .customize-screen-options-toggle:focus:before,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before,
.wp-core-ui .menu-item-bar .item-delete:focus:before,
.wp-core-ui #available-menu-items .item-add:focus:before,
.wp-core-ui #customize-save-button-wrapper .save:focus,
.wp-core-ui #publish-settings:focus {
box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948;
}
.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover {
color: #0073aa;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,
.wp-core-ui .control-panel-themes .customize-themes-section-title:hover {
border-left-color: #e1a948;
color: #0073aa;
}
.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: #e1a948;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,
.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: #0073aa;
}
.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: #e1a948;
border-style: solid;
box-shadow: 0 0 0 1px #e1a948;
outline: 2px solid transparent;
}
.wp-core-ui .wp-full-overlay-footer .devices button:focus,
.wp-core-ui .wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #e1a948;
}
.wp-core-ui .wp-full-overlay-footer .devices button:hover:before,
.wp-core-ui .wp-full-overlay-footer .devices button:focus:before {
color: #e1a948;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: #e1a948;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow: 0 0 0 1px #e8be74, 0 0 2px 1px #e1a948;
}
.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover {
border-bottom-color: #e1a948;
color: #0073aa;
}
/* Welcome Panel */
.welcome-panel {
background-color: #096484;
}
[class*=welcome-panel-icon] {
background-color: #52accc;
}

2
tools/storybook/wordpress/css/colors/blue/colors.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

12
tools/storybook/wordpress/css/colors/blue/colors.scss Normal file
View File

@ -0,0 +1,12 @@
$scheme-name: "blue";
$base-color: #52accc;
$icon-color: #e5f8ff;
$highlight-color: #096484;
$notification-color: #e1a948;
$button-color: #e1a948;
$menu-submenu-text: #e2ecf1;
$menu-submenu-focus-text: #fff;
$menu-submenu-background: #4796b3;
@import "../_admin.scss";

681
tools/storybook/wordpress/css/colors/coffee/colors-rtl.css Normal file
View File

@ -0,0 +1,681 @@
/*! This file is auto-generated */
/*
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
*/
body {
background: #f1f1f1;
}
/* Links */
a {
color: #0073aa;
}
a:hover, a:active, a:focus {
color: #0096dd;
}
#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: #0073aa;
}
.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus {
color: #0096dd;
}
.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%2359524c%27%2F%3E%3C%2Fsvg%3E");
}
input[type=radio]:checked::before {
background: #59524c;
}
.wp-core-ui input[type=reset]:hover,
.wp-core-ui input[type=reset]:active {
color: #0096dd;
}
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: #c7a589;
box-shadow: 0 0 0 1px #c7a589;
}
/* Core UI */
.wp-core-ui .button {
border-color: #7e8993;
color: #32373c;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #717c87;
color: #262a2e;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #7e8993;
color: #262a2e;
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button:active {
border-color: #7e8993;
color: #262a2e;
box-shadow: none;
}
.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
border-color: #c7a589;
color: #262a2e;
box-shadow: inset 0 2px 5px -3px #c7a589;
}
.wp-core-ui .button.active:focus {
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button-primary {
background: #c7a589;
border-color: #c7a589;
color: #fff;
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #ccad93;
border-color: #c29d7f;
color: #fff;
}
.wp-core-ui .button-primary:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589;
}
.wp-core-ui .button-primary:active {
background: #bf9878;
border-color: #bf9878;
color: #fff;
}
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
background: #c7a589;
color: #fff;
border-color: #ae7d55;
box-shadow: inset 0 2px 5px -3px #37271a;
}
.wp-core-ui .button-group > .button.active {
border-color: #c7a589;
}
.wp-core-ui .wp-ui-primary {
color: #fff;
background-color: #59524c;
}
.wp-core-ui .wp-ui-text-primary {
color: #59524c;
}
.wp-core-ui .wp-ui-highlight {
color: #fff;
background-color: #c7a589;
}
.wp-core-ui .wp-ui-text-highlight {
color: #c7a589;
}
.wp-core-ui .wp-ui-notification {
color: #fff;
background-color: #9ea476;
}
.wp-core-ui .wp-ui-text-notification {
color: #9ea476;
}
.wp-core-ui .wp-ui-text-icon {
color: hsl(27.6923076923deg, 7%, 95%);
}
/* List tables */
.wrap .page-title-action:hover {
color: #fff;
background-color: #59524c;
}
.view-switch a.current:before {
color: #59524c;
}
.view-switch a:hover:before {
color: #9ea476;
}
/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
background: #59524c;
}
#adminmenu a {
color: #fff;
}
#adminmenu div.wp-menu-image:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
background-color: #c7a589;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
color: #fff;
}
/* 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: #f1f1f1;
border-bottom-color: #f1f1f1;
}
/* 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: #46403c;
}
#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: #46403c;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #cdcbc9;
}
#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: #cdcbc9;
}
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
color: #c7a589;
}
/* 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: #fff;
}
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
color: #c7a589;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
border-left-color: #f1f1f1;
}
#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: #fff;
background: #c7a589;
}
#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: #fff;
}
/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
color: #fff;
background: #9ea476;
}
#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: #fff;
background: #46403c;
}
/* Admin Menu: collapse button */
#collapse-button {
color: hsl(27.6923076923deg, 7%, 95%);
}
#collapse-button:hover,
#collapse-button:focus {
color: #c7a589;
}
/* Admin Bar */
#wpadminbar {
color: #fff;
background: #59524c;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
color: #fff;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
color: hsl(27.6923076923deg, 7%, 95%);
}
#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: #c7a589;
background: #46403c;
}
#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: #c7a589;
}
#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: #c7a589;
}
/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
background: #46403c;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
background: #656463;
}
#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: #cdcbc9;
}
#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
#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: #c7a589;
}
#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: #c7a589;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: #fff;
background: #6c645c;
}
/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
color: #fff;
background-color: #9ea476;
}
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
color: #fff;
}
#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: #fff;
background-color: #8e946a;
}
/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
border-color: #6c645c;
background-color: #6c645c;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: #c7a589;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #cdcbc9;
}
/* Pointers */
.wp-pointer .wp-pointer-content h3 {
background-color: #c7a589;
border-color: #bf9878;
}
.wp-pointer .wp-pointer-content h3:before {
color: #c7a589;
}
.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: #c7a589;
}
/* Media */
.media-item .bar,
.media-progress-bar div {
background-color: #c7a589;
}
.details.attachment {
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #c7a589;
}
.attachment.details .check {
background-color: #c7a589;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #c7a589;
}
.media-selection .attachment.selection.details .thumbnail {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589;
}
/* 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: #c7a589;
}
.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
color: #c7a589;
}
.theme-section.current,
.theme-filter.current {
border-bottom-color: #59524c;
}
body.more-filters-opened .more-filters {
color: #fff;
background-color: #59524c;
}
body.more-filters-opened .more-filters:before {
color: #fff;
}
body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
background-color: #c7a589;
color: #fff;
}
body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
color: #fff;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
background-color: #c7a589;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
color: #fff;
}
/* Nav Menus */
.nav-menus-php .item-edit:focus:before {
box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #c7a589;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #46403c;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
/* 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: #c7a589;
}
/* Customizer */
.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,
.wp-core-ui #customize-controls .control-section.open .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:focus {
color: #0073aa;
border-right-color: #c7a589;
}
.wp-core-ui .customize-controls-close:focus,
.wp-core-ui .customize-controls-close:hover,
.wp-core-ui .customize-controls-preview-toggle:focus,
.wp-core-ui .customize-controls-preview-toggle:hover {
color: #0073aa;
border-top-color: #c7a589;
}
.wp-core-ui .customize-panel-back:hover,
.wp-core-ui .customize-panel-back:focus,
.wp-core-ui .customize-section-back:hover,
.wp-core-ui .customize-section-back:focus {
color: #0073aa;
border-right-color: #c7a589;
}
.wp-core-ui .customize-screen-options-toggle:hover,
.wp-core-ui .customize-screen-options-toggle:active,
.wp-core-ui .customize-screen-options-toggle:focus,
.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: #0073aa;
}
.wp-core-ui .customize-screen-options-toggle:focus:before,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before,
.wp-core-ui .menu-item-bar .item-delete:focus:before,
.wp-core-ui #available-menu-items .item-add:focus:before,
.wp-core-ui #customize-save-button-wrapper .save:focus,
.wp-core-ui #publish-settings:focus {
box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589;
}
.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover {
color: #0073aa;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,
.wp-core-ui .control-panel-themes .customize-themes-section-title:hover {
border-right-color: #c7a589;
color: #0073aa;
}
.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: #c7a589;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,
.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: #0073aa;
}
.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: #c7a589;
border-style: solid;
box-shadow: 0 0 0 1px #c7a589;
outline: 2px solid transparent;
}
.wp-core-ui .wp-full-overlay-footer .devices button:focus,
.wp-core-ui .wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #c7a589;
}
.wp-core-ui .wp-full-overlay-footer .devices button:hover:before,
.wp-core-ui .wp-full-overlay-footer .devices button:focus:before {
color: #c7a589;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: #c7a589;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589;
}
.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover {
border-bottom-color: #c7a589;
color: #0073aa;
}
/* Welcome Panel */
.welcome-panel {
background-color: #c7a589;
}
[class*=welcome-panel-icon] {
background-color: #59524c;
}

2
tools/storybook/wordpress/css/colors/coffee/colors-rtl.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

681
tools/storybook/wordpress/css/colors/coffee/colors.css Normal file
View File

@ -0,0 +1,681 @@
/*! This file is auto-generated */
/*
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
*/
body {
background: #f1f1f1;
}
/* Links */
a {
color: #0073aa;
}
a:hover, a:active, a:focus {
color: #0096dd;
}
#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: #0073aa;
}
.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus {
color: #0096dd;
}
.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%2359524c%27%2F%3E%3C%2Fsvg%3E");
}
input[type=radio]:checked::before {
background: #59524c;
}
.wp-core-ui input[type=reset]:hover,
.wp-core-ui input[type=reset]:active {
color: #0096dd;
}
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: #c7a589;
box-shadow: 0 0 0 1px #c7a589;
}
/* Core UI */
.wp-core-ui .button {
border-color: #7e8993;
color: #32373c;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #717c87;
color: #262a2e;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #7e8993;
color: #262a2e;
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button:active {
border-color: #7e8993;
color: #262a2e;
box-shadow: none;
}
.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
border-color: #c7a589;
color: #262a2e;
box-shadow: inset 0 2px 5px -3px #c7a589;
}
.wp-core-ui .button.active:focus {
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button-primary {
background: #c7a589;
border-color: #c7a589;
color: #fff;
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #ccad93;
border-color: #c29d7f;
color: #fff;
}
.wp-core-ui .button-primary:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589;
}
.wp-core-ui .button-primary:active {
background: #bf9878;
border-color: #bf9878;
color: #fff;
}
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
background: #c7a589;
color: #fff;
border-color: #ae7d55;
box-shadow: inset 0 2px 5px -3px #37271a;
}
.wp-core-ui .button-group > .button.active {
border-color: #c7a589;
}
.wp-core-ui .wp-ui-primary {
color: #fff;
background-color: #59524c;
}
.wp-core-ui .wp-ui-text-primary {
color: #59524c;
}
.wp-core-ui .wp-ui-highlight {
color: #fff;
background-color: #c7a589;
}
.wp-core-ui .wp-ui-text-highlight {
color: #c7a589;
}
.wp-core-ui .wp-ui-notification {
color: #fff;
background-color: #9ea476;
}
.wp-core-ui .wp-ui-text-notification {
color: #9ea476;
}
.wp-core-ui .wp-ui-text-icon {
color: hsl(27.6923076923deg, 7%, 95%);
}
/* List tables */
.wrap .page-title-action:hover {
color: #fff;
background-color: #59524c;
}
.view-switch a.current:before {
color: #59524c;
}
.view-switch a:hover:before {
color: #9ea476;
}
/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
background: #59524c;
}
#adminmenu a {
color: #fff;
}
#adminmenu div.wp-menu-image:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
background-color: #c7a589;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
color: #fff;
}
/* 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: #f1f1f1;
border-bottom-color: #f1f1f1;
}
/* 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: #46403c;
}
#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: #46403c;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #cdcbc9;
}
#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: #cdcbc9;
}
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
color: #c7a589;
}
/* 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: #fff;
}
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
color: #c7a589;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
border-right-color: #f1f1f1;
}
#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: #fff;
background: #c7a589;
}
#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: #fff;
}
/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
color: #fff;
background: #9ea476;
}
#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: #fff;
background: #46403c;
}
/* Admin Menu: collapse button */
#collapse-button {
color: hsl(27.6923076923deg, 7%, 95%);
}
#collapse-button:hover,
#collapse-button:focus {
color: #c7a589;
}
/* Admin Bar */
#wpadminbar {
color: #fff;
background: #59524c;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
color: #fff;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
color: hsl(27.6923076923deg, 7%, 95%);
}
#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: #c7a589;
background: #46403c;
}
#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: #c7a589;
}
#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: #c7a589;
}
/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
background: #46403c;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
background: #656463;
}
#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: #cdcbc9;
}
#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
#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: #c7a589;
}
#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: #c7a589;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: #fff;
background: #6c645c;
}
/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
color: #fff;
background-color: #9ea476;
}
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
color: #fff;
}
#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: #fff;
background-color: #8e946a;
}
/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
border-color: #6c645c;
background-color: #6c645c;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: #c7a589;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #cdcbc9;
}
/* Pointers */
.wp-pointer .wp-pointer-content h3 {
background-color: #c7a589;
border-color: #bf9878;
}
.wp-pointer .wp-pointer-content h3:before {
color: #c7a589;
}
.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: #c7a589;
}
/* Media */
.media-item .bar,
.media-progress-bar div {
background-color: #c7a589;
}
.details.attachment {
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #c7a589;
}
.attachment.details .check {
background-color: #c7a589;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #c7a589;
}
.media-selection .attachment.selection.details .thumbnail {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589;
}
/* 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: #c7a589;
}
.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
color: #c7a589;
}
.theme-section.current,
.theme-filter.current {
border-bottom-color: #59524c;
}
body.more-filters-opened .more-filters {
color: #fff;
background-color: #59524c;
}
body.more-filters-opened .more-filters:before {
color: #fff;
}
body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
background-color: #c7a589;
color: #fff;
}
body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
color: #fff;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
background-color: #c7a589;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
color: #fff;
}
/* Nav Menus */
.nav-menus-php .item-edit:focus:before {
box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #c7a589;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #46403c;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: hsl(27.6923076923deg, 7%, 95%);
}
/* 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: #c7a589;
}
/* Customizer */
.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,
.wp-core-ui #customize-controls .control-section.open .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:focus {
color: #0073aa;
border-left-color: #c7a589;
}
.wp-core-ui .customize-controls-close:focus,
.wp-core-ui .customize-controls-close:hover,
.wp-core-ui .customize-controls-preview-toggle:focus,
.wp-core-ui .customize-controls-preview-toggle:hover {
color: #0073aa;
border-top-color: #c7a589;
}
.wp-core-ui .customize-panel-back:hover,
.wp-core-ui .customize-panel-back:focus,
.wp-core-ui .customize-section-back:hover,
.wp-core-ui .customize-section-back:focus {
color: #0073aa;
border-left-color: #c7a589;
}
.wp-core-ui .customize-screen-options-toggle:hover,
.wp-core-ui .customize-screen-options-toggle:active,
.wp-core-ui .customize-screen-options-toggle:focus,
.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: #0073aa;
}
.wp-core-ui .customize-screen-options-toggle:focus:before,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before,
.wp-core-ui .menu-item-bar .item-delete:focus:before,
.wp-core-ui #available-menu-items .item-add:focus:before,
.wp-core-ui #customize-save-button-wrapper .save:focus,
.wp-core-ui #publish-settings:focus {
box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589;
}
.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover {
color: #0073aa;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,
.wp-core-ui .control-panel-themes .customize-themes-section-title:hover {
border-left-color: #c7a589;
color: #0073aa;
}
.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: #c7a589;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,
.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: #0073aa;
}
.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: #c7a589;
border-style: solid;
box-shadow: 0 0 0 1px #c7a589;
outline: 2px solid transparent;
}
.wp-core-ui .wp-full-overlay-footer .devices button:focus,
.wp-core-ui .wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #c7a589;
}
.wp-core-ui .wp-full-overlay-footer .devices button:hover:before,
.wp-core-ui .wp-full-overlay-footer .devices button:focus:before {
color: #c7a589;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: #c7a589;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow: 0 0 0 1px #d7bfac, 0 0 2px 1px #c7a589;
}
.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover {
border-bottom-color: #c7a589;
color: #0073aa;
}
/* Welcome Panel */
.welcome-panel {
background-color: #c7a589;
}
[class*=welcome-panel-icon] {
background-color: #59524c;
}

2
tools/storybook/wordpress/css/colors/coffee/colors.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
tools/storybook/wordpress/css/colors/coffee/colors.scss Normal file
View File

@ -0,0 +1,9 @@
$scheme-name: "coffee";
$base-color: #59524c;
$highlight-color: #c7a589;
$notification-color: #9ea476;
$low-contrast-theme: "true";
$form-checked: $base-color;
@import "../_admin.scss";

714
tools/storybook/wordpress/css/colors/ectoplasm/colors-rtl.css Normal file
View File

@ -0,0 +1,714 @@
/*! This file is auto-generated */
/*
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
*/
body {
background: #f1f1f1;
}
/* Links */
a {
color: #0073aa;
}
a:hover, a:active, a:focus {
color: #0096dd;
}
#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: #0073aa;
}
.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus {
color: #0096dd;
}
.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%23523f6d%27%2F%3E%3C%2Fsvg%3E");
}
input[type=radio]:checked::before {
background: #523f6d;
}
.wp-core-ui input[type=reset]:hover,
.wp-core-ui input[type=reset]:active {
color: #0096dd;
}
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: #a3b745;
box-shadow: 0 0 0 1px #a3b745;
}
/* Core UI */
.wp-core-ui .button {
border-color: #7e8993;
color: #32373c;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #717c87;
color: #262a2e;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #7e8993;
color: #262a2e;
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button:active {
border-color: #7e8993;
color: #262a2e;
box-shadow: none;
}
.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
border-color: #a3b745;
color: #262a2e;
box-shadow: inset 0 2px 5px -3px #a3b745;
}
.wp-core-ui .button.active:focus {
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button,
.wp-core-ui .button-secondary {
color: #a3b745;
border-color: #a3b745;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
border-color: #829237;
color: #829237;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
border-color: #b6c669;
color: #616d29;
box-shadow: 0 0 0 1px #b6c669;
}
.wp-core-ui .button-primary:hover {
color: #fff;
}
.wp-core-ui .button-primary {
background: #a3b745;
border-color: #a3b745;
color: #fff;
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #a9bd4f;
border-color: #99ac41;
color: #fff;
}
.wp-core-ui .button-primary:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745;
}
.wp-core-ui .button-primary:active {
background: #93a43e;
border-color: #93a43e;
color: #fff;
}
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
background: #a3b745;
color: #fff;
border-color: #727f30;
box-shadow: inset 0 2px 5px -3px black;
}
.wp-core-ui .button-group > .button.active {
border-color: #a3b745;
}
.wp-core-ui .wp-ui-primary {
color: #fff;
background-color: #523f6d;
}
.wp-core-ui .wp-ui-text-primary {
color: #523f6d;
}
.wp-core-ui .wp-ui-highlight {
color: #fff;
background-color: #a3b745;
}
.wp-core-ui .wp-ui-text-highlight {
color: #a3b745;
}
.wp-core-ui .wp-ui-notification {
color: #fff;
background-color: #d46f15;
}
.wp-core-ui .wp-ui-text-notification {
color: #d46f15;
}
.wp-core-ui .wp-ui-text-icon {
color: #ece6f6;
}
/* List tables */
.wrap .page-title-action,
.wrap .page-title-action:active {
border: 1px solid #a3b745;
color: #a3b745;
}
.wrap .page-title-action:hover {
color: #829237;
border-color: #829237;
}
.wrap .page-title-action:focus {
border-color: #b6c669;
color: #616d29;
box-shadow: 0 0 0 1px #b6c669;
}
.view-switch a.current:before {
color: #523f6d;
}
.view-switch a:hover:before {
color: #d46f15;
}
/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
background: #523f6d;
}
#adminmenu a {
color: #fff;
}
#adminmenu div.wp-menu-image:before {
color: #ece6f6;
}
#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
background-color: #a3b745;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
color: #fff;
}
/* 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: #f1f1f1;
border-bottom-color: #f1f1f1;
}
/* 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: #413256;
}
#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: #413256;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #cbc5d3;
}
#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: #cbc5d3;
}
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
color: #a3b745;
}
/* 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: #fff;
}
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
color: #a3b745;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
border-left-color: #f1f1f1;
}
#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: #fff;
background: #a3b745;
}
#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: #fff;
}
/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
color: #fff;
background: #d46f15;
}
#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: #fff;
background: #413256;
}
/* Admin Menu: collapse button */
#collapse-button {
color: #ece6f6;
}
#collapse-button:hover,
#collapse-button:focus {
color: #a3b745;
}
/* Admin Bar */
#wpadminbar {
color: #fff;
background: #523f6d;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
color: #fff;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
color: #ece6f6;
}
#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: #a3b745;
background: #413256;
}
#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: #a3b745;
}
#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: #a3b745;
}
/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
background: #413256;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
background: #64537c;
}
#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: #cbc5d3;
}
#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
color: #ece6f6;
}
#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: #a3b745;
}
#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: #a3b745;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: #ece6f6;
}
/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
color: #ece6f6;
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: #fff;
background: #634c84;
}
/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
color: #fff;
background-color: #d46f15;
}
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
color: #fff;
}
#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: #fff;
background-color: #bf6413;
}
/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
border-color: #634c84;
background-color: #634c84;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: #a3b745;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #cbc5d3;
}
/* Pointers */
.wp-pointer .wp-pointer-content h3 {
background-color: #a3b745;
border-color: #93a43e;
}
.wp-pointer .wp-pointer-content h3:before {
color: #a3b745;
}
.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: #a3b745;
}
/* Media */
.media-item .bar,
.media-progress-bar div {
background-color: #a3b745;
}
.details.attachment {
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #a3b745;
}
.attachment.details .check {
background-color: #a3b745;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #a3b745;
}
.media-selection .attachment.selection.details .thumbnail {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745;
}
/* 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: #a3b745;
}
.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
color: #a3b745;
}
.theme-section.current,
.theme-filter.current {
border-bottom-color: #523f6d;
}
body.more-filters-opened .more-filters {
color: #fff;
background-color: #523f6d;
}
body.more-filters-opened .more-filters:before {
color: #fff;
}
body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
background-color: #a3b745;
color: #fff;
}
body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
color: #fff;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
background-color: #a3b745;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
color: #fff;
}
/* Nav Menus */
.nav-menus-php .item-edit:focus:before {
box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #ece6f6;
}
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #a3b745;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #413256;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #ece6f6;
}
/* 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: #a3b745;
}
/* Customizer */
.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,
.wp-core-ui #customize-controls .control-section.open .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:focus {
color: #0073aa;
border-right-color: #a3b745;
}
.wp-core-ui .customize-controls-close:focus,
.wp-core-ui .customize-controls-close:hover,
.wp-core-ui .customize-controls-preview-toggle:focus,
.wp-core-ui .customize-controls-preview-toggle:hover {
color: #0073aa;
border-top-color: #a3b745;
}
.wp-core-ui .customize-panel-back:hover,
.wp-core-ui .customize-panel-back:focus,
.wp-core-ui .customize-section-back:hover,
.wp-core-ui .customize-section-back:focus {
color: #0073aa;
border-right-color: #a3b745;
}
.wp-core-ui .customize-screen-options-toggle:hover,
.wp-core-ui .customize-screen-options-toggle:active,
.wp-core-ui .customize-screen-options-toggle:focus,
.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: #0073aa;
}
.wp-core-ui .customize-screen-options-toggle:focus:before,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before,
.wp-core-ui .menu-item-bar .item-delete:focus:before,
.wp-core-ui #available-menu-items .item-add:focus:before,
.wp-core-ui #customize-save-button-wrapper .save:focus,
.wp-core-ui #publish-settings:focus {
box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745;
}
.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover {
color: #0073aa;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,
.wp-core-ui .control-panel-themes .customize-themes-section-title:hover {
border-right-color: #a3b745;
color: #0073aa;
}
.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: #a3b745;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,
.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: #0073aa;
}
.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: #a3b745;
border-style: solid;
box-shadow: 0 0 0 1px #a3b745;
outline: 2px solid transparent;
}
.wp-core-ui .wp-full-overlay-footer .devices button:focus,
.wp-core-ui .wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #a3b745;
}
.wp-core-ui .wp-full-overlay-footer .devices button:hover:before,
.wp-core-ui .wp-full-overlay-footer .devices button:focus:before {
color: #a3b745;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: #a3b745;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745;
}
.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover {
border-bottom-color: #a3b745;
color: #0073aa;
}
/* Welcome Panel */
.welcome-panel {
background-color: #a3b745;
}
[class*=welcome-panel-icon] {
background-color: #523f6d;
}

2
tools/storybook/wordpress/css/colors/ectoplasm/colors-rtl.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

714
tools/storybook/wordpress/css/colors/ectoplasm/colors.css Normal file
View File

@ -0,0 +1,714 @@
/*! This file is auto-generated */
/*
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
*/
body {
background: #f1f1f1;
}
/* Links */
a {
color: #0073aa;
}
a:hover, a:active, a:focus {
color: #0096dd;
}
#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: #0073aa;
}
.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus {
color: #0096dd;
}
.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%23523f6d%27%2F%3E%3C%2Fsvg%3E");
}
input[type=radio]:checked::before {
background: #523f6d;
}
.wp-core-ui input[type=reset]:hover,
.wp-core-ui input[type=reset]:active {
color: #0096dd;
}
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: #a3b745;
box-shadow: 0 0 0 1px #a3b745;
}
/* Core UI */
.wp-core-ui .button {
border-color: #7e8993;
color: #32373c;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #717c87;
color: #262a2e;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #7e8993;
color: #262a2e;
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button:active {
border-color: #7e8993;
color: #262a2e;
box-shadow: none;
}
.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
border-color: #a3b745;
color: #262a2e;
box-shadow: inset 0 2px 5px -3px #a3b745;
}
.wp-core-ui .button.active:focus {
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button,
.wp-core-ui .button-secondary {
color: #a3b745;
border-color: #a3b745;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
border-color: #829237;
color: #829237;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
border-color: #b6c669;
color: #616d29;
box-shadow: 0 0 0 1px #b6c669;
}
.wp-core-ui .button-primary:hover {
color: #fff;
}
.wp-core-ui .button-primary {
background: #a3b745;
border-color: #a3b745;
color: #fff;
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #a9bd4f;
border-color: #99ac41;
color: #fff;
}
.wp-core-ui .button-primary:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745;
}
.wp-core-ui .button-primary:active {
background: #93a43e;
border-color: #93a43e;
color: #fff;
}
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
background: #a3b745;
color: #fff;
border-color: #727f30;
box-shadow: inset 0 2px 5px -3px black;
}
.wp-core-ui .button-group > .button.active {
border-color: #a3b745;
}
.wp-core-ui .wp-ui-primary {
color: #fff;
background-color: #523f6d;
}
.wp-core-ui .wp-ui-text-primary {
color: #523f6d;
}
.wp-core-ui .wp-ui-highlight {
color: #fff;
background-color: #a3b745;
}
.wp-core-ui .wp-ui-text-highlight {
color: #a3b745;
}
.wp-core-ui .wp-ui-notification {
color: #fff;
background-color: #d46f15;
}
.wp-core-ui .wp-ui-text-notification {
color: #d46f15;
}
.wp-core-ui .wp-ui-text-icon {
color: #ece6f6;
}
/* List tables */
.wrap .page-title-action,
.wrap .page-title-action:active {
border: 1px solid #a3b745;
color: #a3b745;
}
.wrap .page-title-action:hover {
color: #829237;
border-color: #829237;
}
.wrap .page-title-action:focus {
border-color: #b6c669;
color: #616d29;
box-shadow: 0 0 0 1px #b6c669;
}
.view-switch a.current:before {
color: #523f6d;
}
.view-switch a:hover:before {
color: #d46f15;
}
/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
background: #523f6d;
}
#adminmenu a {
color: #fff;
}
#adminmenu div.wp-menu-image:before {
color: #ece6f6;
}
#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
background-color: #a3b745;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
color: #fff;
}
/* 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: #f1f1f1;
border-bottom-color: #f1f1f1;
}
/* 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: #413256;
}
#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: #413256;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #cbc5d3;
}
#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: #cbc5d3;
}
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
color: #a3b745;
}
/* 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: #fff;
}
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
color: #a3b745;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
border-right-color: #f1f1f1;
}
#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: #fff;
background: #a3b745;
}
#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: #fff;
}
/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
color: #fff;
background: #d46f15;
}
#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: #fff;
background: #413256;
}
/* Admin Menu: collapse button */
#collapse-button {
color: #ece6f6;
}
#collapse-button:hover,
#collapse-button:focus {
color: #a3b745;
}
/* Admin Bar */
#wpadminbar {
color: #fff;
background: #523f6d;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
color: #fff;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
color: #ece6f6;
}
#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: #a3b745;
background: #413256;
}
#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: #a3b745;
}
#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: #a3b745;
}
/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
background: #413256;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
background: #64537c;
}
#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: #cbc5d3;
}
#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
color: #ece6f6;
}
#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: #a3b745;
}
#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: #a3b745;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: #ece6f6;
}
/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
color: #ece6f6;
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: #fff;
background: #634c84;
}
/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
color: #fff;
background-color: #d46f15;
}
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
color: #fff;
}
#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: #fff;
background-color: #bf6413;
}
/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
border-color: #634c84;
background-color: #634c84;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: #a3b745;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #cbc5d3;
}
/* Pointers */
.wp-pointer .wp-pointer-content h3 {
background-color: #a3b745;
border-color: #93a43e;
}
.wp-pointer .wp-pointer-content h3:before {
color: #a3b745;
}
.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: #a3b745;
}
/* Media */
.media-item .bar,
.media-progress-bar div {
background-color: #a3b745;
}
.details.attachment {
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #a3b745;
}
.attachment.details .check {
background-color: #a3b745;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #a3b745;
}
.media-selection .attachment.selection.details .thumbnail {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745;
}
/* 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: #a3b745;
}
.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
color: #a3b745;
}
.theme-section.current,
.theme-filter.current {
border-bottom-color: #523f6d;
}
body.more-filters-opened .more-filters {
color: #fff;
background-color: #523f6d;
}
body.more-filters-opened .more-filters:before {
color: #fff;
}
body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
background-color: #a3b745;
color: #fff;
}
body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
color: #fff;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
background-color: #a3b745;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
color: #fff;
}
/* Nav Menus */
.nav-menus-php .item-edit:focus:before {
box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #ece6f6;
}
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #a3b745;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #413256;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #ece6f6;
}
/* 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: #a3b745;
}
/* Customizer */
.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,
.wp-core-ui #customize-controls .control-section.open .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:focus {
color: #0073aa;
border-left-color: #a3b745;
}
.wp-core-ui .customize-controls-close:focus,
.wp-core-ui .customize-controls-close:hover,
.wp-core-ui .customize-controls-preview-toggle:focus,
.wp-core-ui .customize-controls-preview-toggle:hover {
color: #0073aa;
border-top-color: #a3b745;
}
.wp-core-ui .customize-panel-back:hover,
.wp-core-ui .customize-panel-back:focus,
.wp-core-ui .customize-section-back:hover,
.wp-core-ui .customize-section-back:focus {
color: #0073aa;
border-left-color: #a3b745;
}
.wp-core-ui .customize-screen-options-toggle:hover,
.wp-core-ui .customize-screen-options-toggle:active,
.wp-core-ui .customize-screen-options-toggle:focus,
.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: #0073aa;
}
.wp-core-ui .customize-screen-options-toggle:focus:before,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before,
.wp-core-ui .menu-item-bar .item-delete:focus:before,
.wp-core-ui #available-menu-items .item-add:focus:before,
.wp-core-ui #customize-save-button-wrapper .save:focus,
.wp-core-ui #publish-settings:focus {
box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745;
}
.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover {
color: #0073aa;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,
.wp-core-ui .control-panel-themes .customize-themes-section-title:hover {
border-left-color: #a3b745;
color: #0073aa;
}
.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: #a3b745;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,
.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: #0073aa;
}
.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: #a3b745;
border-style: solid;
box-shadow: 0 0 0 1px #a3b745;
outline: 2px solid transparent;
}
.wp-core-ui .wp-full-overlay-footer .devices button:focus,
.wp-core-ui .wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #a3b745;
}
.wp-core-ui .wp-full-overlay-footer .devices button:hover:before,
.wp-core-ui .wp-full-overlay-footer .devices button:focus:before {
color: #a3b745;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: #a3b745;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow: 0 0 0 1px #b6c669, 0 0 2px 1px #a3b745;
}
.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover {
border-bottom-color: #a3b745;
color: #0073aa;
}
/* Welcome Panel */
.welcome-panel {
background-color: #a3b745;
}
[class*=welcome-panel-icon] {
background-color: #523f6d;
}

2
tools/storybook/wordpress/css/colors/ectoplasm/colors.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
tools/storybook/wordpress/css/colors/ectoplasm/colors.scss Normal file
View File

@ -0,0 +1,9 @@
$scheme-name: "ectoplasm";
$base-color: #523f6d;
$icon-color: #ece6f6;
$highlight-color: #a3b745;
$notification-color: #d46f15;
$form-checked: $base-color;
@import "../_admin.scss";

720
tools/storybook/wordpress/css/colors/light/colors-rtl.css Normal file
View File

@ -0,0 +1,720 @@
/*! This file is auto-generated */
/*
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
*/
body {
background: #f5f5f5;
}
/* Links */
a {
color: #0073aa;
}
a:hover, a:active, a:focus {
color: #0096dd;
}
#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: #0073aa;
}
.wp-core-ui .button-link:hover, .wp-core-ui .button-link:active, .wp-core-ui .button-link:focus {
color: #0096dd;
}
.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%237e8993%27%2F%3E%3C%2Fsvg%3E");
}
input[type=radio]:checked::before {
background: #7e8993;
}
.wp-core-ui input[type=reset]:hover,
.wp-core-ui input[type=reset]:active {
color: #0096dd;
}
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: #04a4cc;
box-shadow: 0 0 0 1px #04a4cc;
}
/* Core UI */
.wp-core-ui .button {
border-color: #7e8993;
color: #32373c;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #717c87;
color: #262a2e;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
border-color: #7e8993;
color: #262a2e;
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button:active {
border-color: #7e8993;
color: #262a2e;
box-shadow: none;
}
.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
border-color: #04a4cc;
color: #262a2e;
box-shadow: inset 0 2px 5px -3px #04a4cc;
}
.wp-core-ui .button.active:focus {
box-shadow: 0 0 0 1px #32373c;
}
.wp-core-ui .button,
.wp-core-ui .button-secondary {
color: #04a4cc;
border-color: #04a4cc;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
border-color: #037c9a;
color: #037c9a;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
border-color: #09cafa;
color: #025468;
box-shadow: 0 0 0 1px #09cafa;
}
.wp-core-ui .button-primary:hover {
color: #fff;
}
.wp-core-ui .button-primary {
background: #04a4cc;
border-color: #04a4cc;
color: #fff;
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #04b0db;
border-color: #0498bd;
color: #fff;
}
.wp-core-ui .button-primary:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #04a4cc;
}
.wp-core-ui .button-primary:active {
background: #0490b3;
border-color: #0490b3;
color: #fff;
}
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
background: #04a4cc;
color: #fff;
border-color: #036881;
box-shadow: inset 0 2px 5px -3px black;
}
.wp-core-ui .button-group > .button.active {
border-color: #04a4cc;
}
.wp-core-ui .wp-ui-primary {
color: #333;
background-color: #e5e5e5;
}
.wp-core-ui .wp-ui-text-primary {
color: #e5e5e5;
}
.wp-core-ui .wp-ui-highlight {
color: #fff;
background-color: #888;
}
.wp-core-ui .wp-ui-text-highlight {
color: #888;
}
.wp-core-ui .wp-ui-notification {
color: #fff;
background-color: #d64e07;
}
.wp-core-ui .wp-ui-text-notification {
color: #d64e07;
}
.wp-core-ui .wp-ui-text-icon {
color: #999;
}
/* List tables */
.wrap .page-title-action,
.wrap .page-title-action:active {
border: 1px solid #04a4cc;
color: #04a4cc;
}
.wrap .page-title-action:hover {
color: #037c9a;
border-color: #037c9a;
}
.wrap .page-title-action:focus {
border-color: #09cafa;
color: #025468;
box-shadow: 0 0 0 1px #09cafa;
}
.view-switch a.current:before {
color: #e5e5e5;
}
.view-switch a:hover:before {
color: #d64e07;
}
/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
background: #e5e5e5;
}
#adminmenu a {
color: #333;
}
#adminmenu div.wp-menu-image:before {
color: #999;
}
#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
background-color: #888;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
color: #ccc;
}
/* 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: #f5f5f5;
border-bottom-color: #f5f5f5;
}
/* 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: #fff;
}
#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: #fff;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #686868;
}
#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: #686868;
}
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
color: #04a4cc;
}
/* 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: #333;
}
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
color: #04a4cc;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
border-left-color: #f5f5f5;
}
#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: #fff;
background: #888;
}
#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: #ccc;
}
/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
color: #fff;
background: #d64e07;
}
#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: #333;
background: #fff;
}
/* Admin Menu: collapse button */
#collapse-button {
color: #777;
}
#collapse-button:hover,
#collapse-button:focus {
color: #04a4cc;
}
/* Admin Bar */
#wpadminbar {
color: #333;
background: #e5e5e5;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
color: #333;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
color: #999;
}
#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: #04a4cc;
background: #fff;
}
#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: #04a4cc;
}
#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: #04a4cc;
}
/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
background: #fff;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
background: #f7f7f7;
}
#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: #686868;
}
#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
color: #999;
}
#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: #04a4cc;
}
#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: #04a4cc;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: #999;
}
/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
color: #999;
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: #333;
background: #f7f7f7;
}
/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
color: #fff;
background-color: #d64e07;
}
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
color: #fff;
}
#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: #fff;
background-color: #c14606;
}
/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
border-color: #f7f7f7;
background-color: #f7f7f7;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #333;
}
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: #04a4cc;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #686868;
}
/* Pointers */
.wp-pointer .wp-pointer-content h3 {
background-color: #04a4cc;
border-color: #0490b3;
}
.wp-pointer .wp-pointer-content h3:before {
color: #04a4cc;
}
.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: #04a4cc;
}
/* Media */
.media-item .bar,
.media-progress-bar div {
background-color: #04a4cc;
}
.details.attachment {
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #04a4cc;
}
.attachment.details .check {
background-color: #04a4cc;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #04a4cc;
}
.media-selection .attachment.selection.details .thumbnail {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #04a4cc;
}
/* 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: #04a4cc;
}
.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
color: #04a4cc;
}
.theme-section.current,
.theme-filter.current {
border-bottom-color: #e5e5e5;
}
body.more-filters-opened .more-filters {
color: #333;
background-color: #e5e5e5;
}
body.more-filters-opened .more-filters:before {
color: #333;
}
body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
background-color: #888;
color: #fff;
}
body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
color: #fff;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
background-color: #888;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
color: #fff;
}
/* Nav Menus */
.nav-menus-php .item-edit:focus:before {
box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #999;
}
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #888;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #fff;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #999;
}
/* 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: #04a4cc;
}
/* Customizer */
.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,
.wp-core-ui #customize-controls .control-section.open .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:focus {
color: #0073aa;
border-right-color: #04a4cc;
}
.wp-core-ui .customize-controls-close:focus,
.wp-core-ui .customize-controls-close:hover,
.wp-core-ui .customize-controls-preview-toggle:focus,
.wp-core-ui .customize-controls-preview-toggle:hover {
color: #0073aa;
border-top-color: #04a4cc;
}
.wp-core-ui .customize-panel-back:hover,
.wp-core-ui .customize-panel-back:focus,
.wp-core-ui .customize-section-back:hover,
.wp-core-ui .customize-section-back:focus {
color: #0073aa;
border-right-color: #04a4cc;
}
.wp-core-ui .customize-screen-options-toggle:hover,
.wp-core-ui .customize-screen-options-toggle:active,
.wp-core-ui .customize-screen-options-toggle:focus,
.wp-core-ui .active-menu-screen-options .customize-screen-options-toggle,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
.wp-core-ui #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: #0073aa;
}
.wp-core-ui .customize-screen-options-toggle:focus:before,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus:before, .wp-core-ui.wp-customizer button:focus .toggle-indicator:before,
.wp-core-ui .menu-item-bar .item-delete:focus:before,
.wp-core-ui #available-menu-items .item-add:focus:before,
.wp-core-ui #customize-save-button-wrapper .save:focus,
.wp-core-ui #publish-settings:focus {
box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc;
}
.wp-core-ui #customize-controls .customize-info.open .customize-help-toggle,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:focus,
.wp-core-ui #customize-controls .customize-info .customize-help-toggle:hover {
color: #0073aa;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title:focus,
.wp-core-ui .control-panel-themes .customize-themes-section-title:hover {
border-right-color: #04a4cc;
color: #0073aa;
}
.wp-core-ui .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: #04a4cc;
}
.wp-core-ui .control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
.wp-core-ui #customize-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-theme-controls .control-section .accordion-section-title:focus:after,
.wp-core-ui #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
.wp-core-ui #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
.wp-core-ui #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: #0073aa;
}
.wp-core-ui .customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: #04a4cc;
border-style: solid;
box-shadow: 0 0 0 1px #04a4cc;
outline: 2px solid transparent;
}
.wp-core-ui .wp-full-overlay-footer .devices button:focus,
.wp-core-ui .wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #04a4cc;
}
.wp-core-ui .wp-full-overlay-footer .devices button:hover:before,
.wp-core-ui .wp-full-overlay-footer .devices button:focus:before {
color: #04a4cc;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: #04a4cc;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow: 0 0 0 1px #09cafa, 0 0 2px 1px #04a4cc;
}
.wp-core-ui.wp-customizer .theme-overlay .theme-header .close:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .close:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .right:hover, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:focus, .wp-core-ui.wp-customizer .theme-overlay .theme-header .left:hover {
border-bottom-color: #04a4cc;
color: #0073aa;
}
/* Welcome Panel */
.welcome-panel {
background-color: #04a4cc;
}
[class*=welcome-panel-icon] {
background-color: #999;
}
/* Override the theme filter highlight color for this scheme */
.theme-section.current,
.theme-filter.current {
border-bottom-color: #04a4cc;
}

Some files were not shown because too many files have changed in this diff Show More