Skip to content

Commit 2e8f77d

Browse files
Joen Asmussenjasmussen
authored andcommitted
Try: High-luminance default colors
These are colors that are explored through the G2 visual refresh (see #18667). The color change does a few things: - It is chosen and balanced against the rest of the visual refresh. - It reduces the overall color palette, removing secondary colors used for toggles or checkmarks, unifying on a single blue. - It increases contrast against white, quite a bit, which is good for toggles, focus, form widgets and buttons. The new blue has a contrast of 5.61:1 compared to 4.57:1 for the previously used WordPress blue (#007cba).
1 parent f2028fa commit 2e8f77d

3 files changed

Lines changed: 8 additions & 8 deletions

File tree

‎packages/base-styles/_colors.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ $light-gray-ui: #949494; // Meets 3:1 UI contrast.
3232
$light-gray-secondary: #ccc;
3333
$light-gray-tertiary: #e7e8e9;
3434
$theme-color: theme(button);
35-
$blue-medium-focus: #007cba; // @todo: Currently being used as "spot" color. Needs to be considered in context of themes.
35+
$blue-medium-focus: #3858e9; // @todo: Currently being used as "spot" color. Needs to be considered in context of themes.
3636
$blue-medium-focus-dark: #fff;
3737

3838
// Dark opacities, for use with light themes.

‎packages/base-styles/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
exports.adminColorSchemes = {
22
defaults: {
33
primary: '#0085ba',
4-
secondary: '#11a0d2',
5-
toggle: '#11a0d2',
6-
button: '#007cba',
7-
outlines: '#007cba',
4+
secondary: '#3858e9',
5+
toggle: '#3858e9',
6+
button: '#3858e9',
7+
outlines: '#3858e9',
88
},
99
themes: {
1010
'admin-color-light': {
1111
primary: '#0085ba',
1212
secondary: '#c75726',
13-
toggle: '#11a0d2',
13+
toggle: '#3858e9',
1414
button: '#0085ba',
15-
outlines: '#007cba',
15+
outlines: '#3858e9',
1616
},
1717
'admin-color-blue': {
1818
primary: '#82b4cb',

‎packages/components/src/utils/colors-values.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export const BLUE = {
9191
200: '#bfe7f3',
9292
100: '#e5f5fa',
9393
highlight: '#b3e7fe',
94-
focus: '#007cba',
94+
focus: '#3858e9',
9595
},
9696
};
9797

0 commit comments

Comments
 (0)