Skip to content

Commit

Permalink
Retire more alternate colors.
Browse files Browse the repository at this point in the history
  • Loading branch information
Joen Asmussen committed Jun 25, 2020
1 parent b799ccb commit 92c245e
Show file tree
Hide file tree
Showing 10 changed files with 20 additions and 24 deletions.
10 changes: 3 additions & 7 deletions packages/base-styles/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
2 changes: 1 addition & 1 deletion packages/block-library/src/button/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/classic/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
}

a {
color: $blue-medium-700;
color: var(--wp-admin-theme-color);
}

&:focus a[data-mce-selected] {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/table/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/color-picker/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/higher-order/navigate-regions/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand All @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/notice/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/snackbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
}

&:hover {
color: $blue-medium-400;
color: var(--wp-admin-theme-color);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/autocompleters/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@
flex-shrink: 0;
}
&:hover .editor-autocompleters__user-slug {
color: $blue-medium-300;
color: var(--wp-admin-theme-color);
}
}
4 changes: 2 additions & 2 deletions packages/editor/src/components/post-featured-image/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,15 @@
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 {
height: auto;
}

.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 {
Expand Down

0 comments on commit 92c245e

Please sign in to comment.