From 92c245ebd47af6e4f86eaa3b54bcb739330101e3 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 25 Jun 2020 11:48:17 +0200 Subject: [PATCH] Retire more alternate colors. --- packages/base-styles/_colors.scss | 10 +++------- packages/block-library/src/button/editor.scss | 2 +- packages/block-library/src/classic/editor.scss | 2 +- packages/block-library/src/table/editor.scss | 4 ++-- packages/components/src/color-picker/style.scss | 10 +++++----- .../src/higher-order/navigate-regions/style.scss | 4 ++-- packages/components/src/notice/style.scss | 4 ++-- packages/components/src/snackbar/style.scss | 2 +- .../editor/src/components/autocompleters/style.scss | 2 +- .../src/components/post-featured-image/style.scss | 4 ++-- 10 files changed, 20 insertions(+), 24 deletions(-) diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index de910b74b96ad8..6200e9fa1c3d11 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -5,8 +5,8 @@ // WordPress colors. $black: #000; // Use only when you truly need pure black. For UI, use $dark-gray-primary. $dark-gray-primary: #1e1e1e; -$medium-gray-text: #757575; // Meets 4.6:1 text contrast. -$light-gray-ui: #949494; // Meets 3:1 UI contrast. +$medium-gray-text: #757575; // Meets 4.6:1 text contrast against white. +$light-gray-ui: #949494; // Meets 3:1 UI or large text contrast against white. $light-gray-secondary: #ccc; $light-gray-tertiary: #e7e8e9; $white: #fff; @@ -38,6 +38,7 @@ $dark-gray-300: #6c7781; $dark-gray-200: #7e8993; $dark-gray-150: #8d96a0; $dark-gray-100: #8f98a1; + $light-gray-900: #a2aab2; $light-gray-800: #b5bcc2; $light-gray-700: #ccd0d4; @@ -48,9 +49,4 @@ $light-gray-300: #edeff0; $light-gray-200: #f3f4f5; $light-gray-100: #f8f9f9; -// Additional colors. -$blue-medium-700: #007fac; -$blue-medium-500: #00a0d2; -$blue-medium-400: #33b3db; -$blue-medium-300: #66c6e4; $blue-medium-100: #e5f5fa; diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index b5b8a185731053..37b47c8e66f900 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -20,7 +20,7 @@ // Add outline to button on focus to indicate focus-state &:focus { - box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500; + box-shadow: 0 0 0 1px $white, 0 0 0 3px var(--wp-admin-theme-color); // Windows' High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss index 871ec4edf2a17c..e1fc6a54bad183 100644 --- a/packages/block-library/src/classic/editor.scss +++ b/packages/block-library/src/classic/editor.scss @@ -37,7 +37,7 @@ } a { - color: $blue-medium-700; + color: var(--wp-admin-theme-color); } &:focus a[data-mce-selected] { diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss index 6a9ef15b19d27e..8eb865f8105261 100644 --- a/packages/block-library/src/table/editor.scss +++ b/packages/block-library/src/table/editor.scss @@ -41,8 +41,8 @@ td.is-selected, th.is-selected { - border-color: $blue-medium-500; - box-shadow: inset 0 0 0 1px $blue-medium-500; + border-color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); border-style: double; } diff --git a/packages/components/src/color-picker/style.scss b/packages/components/src/color-picker/style.scss index 3d59e9a324b876..f985945ab2a3d4 100644 --- a/packages/components/src/color-picker/style.scss +++ b/packages/components/src/color-picker/style.scss @@ -205,18 +205,18 @@ .components-color-picker__saturation-pointer:focus { box-shadow: 0 0 0 2px #fff, - 0 0 0 4px $blue-medium-500, - 0 0 5px 0 $blue-medium-500, + 0 0 0 4px var(--wp-admin-theme-color), + 0 0 5px 0 var(--wp-admin-theme-color), inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4); } .components-color-picker__hue-pointer:focus, .components-color-picker__alpha-pointer:focus { - border-color: $blue-medium-500; + border-color: var(--wp-admin-theme-color); box-shadow: - 0 0 0 2px $blue-medium-500, - 0 0 3px 0 $blue-medium-500; + 0 0 0 2px var(--wp-admin-theme-color), + 0 0 3px 0 var(--wp-admin-theme-color); outline: 2px solid transparent; outline-offset: -2px; } diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index bd65bfb64135c1..d57fef9bbb07fb 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -11,7 +11,7 @@ right: 0; pointer-events: none; outline: 4px solid transparent; // Shown in Windows High Contrast mode. - box-shadow: inset 0 0 0 4px $blue-medium-400; + box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color); } @supports ( outline-offset: 1px ) { @@ -21,7 +21,7 @@ &:focus { outline-style: solid; - outline-color: $blue-medium-400; + outline-color: var(--wp-admin-theme-color); outline-width: 4px; outline-offset: -4px; } diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index 3ffb738ebbe07b..79331269627962 100644 --- a/packages/components/src/notice/style.scss +++ b/packages/components/src/notice/style.scss @@ -2,8 +2,8 @@ display: flex; font-family: $default-font; font-size: $default-font-size; - background-color: $blue-medium-100; - border-left: 4px solid $blue-medium-500; + background-color: $white; + border-left: 4px solid var(--wp-admin-theme-color); margin: 5px 15px 2px; padding: 8px 12px; align-items: center; diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 609449d1d63c40..8018b842e9a6a8 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -46,7 +46,7 @@ } &:hover { - color: $blue-medium-400; + color: var(--wp-admin-theme-color); } } } diff --git a/packages/editor/src/components/autocompleters/style.scss b/packages/editor/src/components/autocompleters/style.scss index 1d20b34eeb8709..75c9f00e264338 100644 --- a/packages/editor/src/components/autocompleters/style.scss +++ b/packages/editor/src/components/autocompleters/style.scss @@ -34,6 +34,6 @@ flex-shrink: 0; } &:hover .editor-autocompleters__user-slug { - color: $blue-medium-300; + color: var(--wp-admin-theme-color); } } diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index 124b14c0fc57cb..786a0e3b5c38da 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -35,7 +35,7 @@ padding: 0; transition: all 0.1s ease-out; @include reduce-motion("transition"); - box-shadow: 0 0 0 0 $blue-medium-500; + box-shadow: 0 0 0 0 var(--wp-admin-theme-color); } .editor-post-featured-image__preview { @@ -43,7 +43,7 @@ } .editor-post-featured-image__preview:not(:disabled):not([aria-disabled="true"]):focus { - box-shadow: 0 0 0 4px $blue-medium-500; + box-shadow: 0 0 0 4px var(--wp-admin-theme-color); } .editor-post-featured-image__toggle {