Skip to content

Commit 48d7bbb

Browse files
jgorfine-zendeskjgorfine-zendesk
authored
feat: Update editor button styles to achieve WCAG 2.2 color contrast conformance & turn everything neutral/gray
2 parents e024f34 + b49c441 commit 48d7bbb

File tree

4 files changed

+245
-20
lines changed

4 files changed

+245
-20
lines changed

‎.changeset/famous-bikes-hear.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@zendesk/help-center-wysiwyg": minor
3+
---
4+
5+
Updated button colors to be WCAG 2.2 conformant

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"@ckeditor/ckeditor5-paste-from-office": "41.3.0",
2727
"@ckeditor/ckeditor5-theme-lark": "41.3.0",
2828
"@ckeditor/ckeditor5-typing": "41.3.0",
29-
"@zendeskgarden/css-variables": "6.4.6",
29+
"@zendeskgarden/css-variables": "7.0.0",
3030
"@zendeskgarden/svg-icons": "7.0.0",
3131
"lodash.debounce": "4.0.8"
3232
},

‎src/styles.css‎

Lines changed: 234 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,87 @@
11
@import "@zendeskgarden/css-variables";
22

33
:root {
4-
/* colors */
5-
--ck-color-text: var(--zd-color-grey-800);
4+
/* garden color tints */
5+
--zd-color-grey-700-8-white-92: color-mix(
6+
in oklab,
7+
var(--zd-color-grey-700) 8%,
8+
#fff
9+
);
10+
--zd-color-grey-700-16-white-84: color-mix(
11+
in oklab,
12+
var(--zd-color-grey-700) 16%,
13+
#fff
14+
);
15+
16+
/* foundational colors */
17+
--ck-color-text: var(--zd-color-grey-900);
18+
--ck-color-base-border: #d8dcde;
19+
--ck-color-focus-border: var(--zd-color-grey-700);
620

7-
--ck-color-button-on-background: hsl(0, 0%, 90%);
8-
--ck-color-button-on-color: hsl(207, 71%, 42%);
21+
/* focus style/color overrides (in favor of custom :focus-visible styles) */
22+
--ck-focus-outer-shadow: none;
23+
--ck-focus-disabled-outer-shadow: none;
924

10-
--ck-color-base-border: var(--zd-color-grey-300);
11-
--ck-color-focus-border: var(--zd-color-grey-800);
25+
/* default button colors */
26+
--ck-color-button-default-hover-background: var(
27+
--zd-color-grey-700-8-white-92
28+
);
29+
--ck-color-button-default-active-background: var(
30+
--ck-color-button-default-hover-background
31+
);
32+
--ck-color-button-default-color: var(--zd-color-grey-700);
1233

13-
--ck-color-list-button-on-background: var(--ck-color-button-on-background);
34+
/* toggle button colors - interactive state, off */
35+
--ck-color-button-off-hover-color: var(--zd-color-grey-800);
36+
--ck-color-button-off-hover-border: var(--ck-color-button-off-hover-color);
37+
38+
/* toggle button colors - interactive state, on */
39+
--ck-color-button-on-background: var(--zd-color-grey-700-16-white-84);
40+
--ck-color-button-on-color: var(--zd-color-grey-900);
41+
--ck-color-button-on-border: var(--ck-color-button-on-color);
42+
--ck-color-button-on-hover-background: var(--ck-color-button-on-background);
43+
--ck-color-button-on-hover-border: var(--ck-color-button-on-color);
44+
--ck-color-button-on-active-background: var(--ck-color-button-on-background);
45+
46+
/* toggle button colors - disabled state */
47+
--ck-color-button-on-disabled-background: var(--zd-color-grey-700-8-white-92);
48+
--ck-color-button-on-disabled-border: transparent;
49+
--ck-color-button-on-disabled-color: var(--zd-color-grey-600);
50+
--ck-color-button-on-disabled-hover-background: var(
51+
--ck-color-button-on-disabled-background
52+
);
53+
--ck-color-button-on-disabled-active-background: var(
54+
--ck-color-button-on-disabled-background
55+
);
56+
57+
/* split button colors */
58+
--ck-color-split-button-hover-background: var(
59+
--ck-color-button-default-hover-background
60+
);
61+
--ck-color-split-button-hover-border: var(--ck-color-button-on-color);
62+
63+
/* list button colors */
64+
--ck-color-list-button-on-background: var(
65+
--ck-color-button-default-background
66+
);
1467
--ck-color-list-button-on-text: var(--ck-color-button-on-color);
15-
--ck-color-list-button-hover-background: hsl(0, 0%, 90%);
68+
--ck-color-list-button-hover-background: linear-gradient(
69+
90deg,
70+
var(--ck-color-focus-border) 0%,
71+
var(--ck-color-focus-border) 3px,
72+
var(--ck-color-button-default-hover-background) 3px,
73+
var(--ck-color-button-default-hover-background) 100%
74+
);
1675
--ck-color-list-button-on-background-focus: var(
17-
--ck-color-button-on-background
76+
--ck-color-list-button-hover-background
1877
);
1978

2079
/* at-mentions */
2180
--ck-color-mention-background: rgba(31, 115, 183, 0.1);
2281
--ck-color-mention-text: rgb(9, 57, 96);
2382

2483
/* effects */
25-
--ck-border-radius: 4px;
84+
--ck-border-radius: var(--zd-spacing-xxs);
2685
--ck-drop-shadow: 0 20px 30px 0 rgb(23 73 77 / 15%);
2786

2887
--ck-z-modal: 2147483649;
@@ -34,13 +93,18 @@
3493
cursor: pointer;
3594
}
3695

96+
.ck.ck-button:focus,
97+
a.ck.ck-button:focus {
98+
border-color: transparent;
99+
}
100+
37101
.ck.ck-button:focus-visible,
38102
.ck.ck-toolbar:focus-visible,
39103
.ck.ck-content.ck-editor__editable.ck-focused,
40104
.ck.ck-content.ck-editor__editable.ck-editor__editable_inline.ck-focused {
41105
box-shadow:
42106
0 0 0 1px #fff,
43-
0 0 0 3px var(--zd-color-grey-800);
107+
0 0 0 3px #2f3941;
44108
outline: 2px solid transparent;
45109
outline-offset: 1px;
46110
}
@@ -102,14 +166,170 @@ textarea[aria-invalid="true"] + .ck.ck-editor .ck-sticky-panel__content,
102166
textarea[aria-invalid="true"]
103167
+ .ck.ck-editor
104168
.ck-editor__editable:not(.ck-focused) {
105-
border-color: var(--zd-color-red-600) !important;
169+
border-color: #cc3340 !important;
106170
}
107171

108172
textarea[aria-invalid="true"] + .ck.ck-editor .ck-editor__editable.ck-focused {
109173
outline: transparent solid 2px;
110174
outline-offset: 1px;
111175
box-shadow:
112176
rgb(255, 255, 255) 0px 0px 0px 1px,
113-
var(--zd-color-red-600) 0px 0px 0px 3px;
114-
border-color: var(--zd-color-red-600);
177+
#cc3340 0px 0px 0px 3px;
178+
border-color: #cc3340;
179+
}
180+
181+
/*
182+
Default buttons
183+
*/
184+
185+
/* Give the default buttons the same CSS transitions as the Garden Button —but only if they're standalone */
186+
.ck.ck-button:not([role="menuitemradio"]),
187+
a.ck.ck-button:not([role="menuitemradio"]) {
188+
transition:
189+
background-color 0.25s ease-in-out,
190+
border-color 0.25s ease-in-out,
191+
box-shadow 0.1s ease-in-out,
192+
color 0.25s ease-in-out,
193+
outline-color 0.1s ease-in-out;
194+
}
195+
196+
/* Give the default buttons the same default color shade as the GardenButton —but only if they're standalone */
197+
.ck.ck-button:not(.ck-on):not([role="menuitemradio"]),
198+
a.ck.ck-button:not(.ck-on):not([role="menuitemradio"]) {
199+
color: var(--ck-color-button-default-color);
200+
}
201+
202+
/*
203+
* Disabled button overrides
204+
*/
205+
206+
/* Revert disabled button's cursor to regular ol' mouse cursor */
207+
.ck.ck-button.ck-disabled,
208+
a.ck.ck-button.ck-disabled {
209+
cursor: default;
210+
}
211+
212+
/*
213+
* Toggle button overrides
214+
*/
215+
216+
/* Allow the "on/off" button's border color to change in hover state, when off */
217+
.ck.ck-button.ck-off:not([role="menuitemradio"]):not(.ck-disabled):hover,
218+
a.ck.ck-button.ck-off:not([role="menuitemradio"]):not(.ck-disabled):hover {
219+
border-color: var(--ck-color-button-off-hover-border);
220+
color: var(--ck-color-button-off-hover-color);
221+
}
222+
223+
/* Allow the "on/off" button's border color to change in default state, when on */
224+
.ck.ck-button.ck-on:not([role="menuitemradio"]),
225+
a.ck.ck-button.ck-on:not([role="menuitemradio"]) {
226+
border-color: var(--ck-color-button-on-border);
227+
}
228+
229+
/* Allow the "on/off" button's border color to change in disabled state, when on */
230+
.ck.ck-button.ck-on.ck-disabled:not([role="menuitemradio"]),
231+
a.ck.ck-button.ck-on.ck-disabled:not([role="menuitemradio"]),
232+
.ck.ck-button.ck-on.ck-disabled:not([role="menuitemradio"]):disabled,
233+
a.ck.ck-button.ck-on.ck-disabled:not([role="menuitemradio"]):disabled {
234+
border-color: var(--ck-color-button-on-disabled-border);
235+
}
236+
237+
/*
238+
* Split button overrides
239+
*/
240+
241+
/* Give the split buttons the same CSS transitions as the Garden Button */
242+
.ck.ck-splitbutton {
243+
transition:
244+
background-color 0.25s ease-in-out,
245+
border-color 0.25s ease-in-out,
246+
box-shadow 0.1s ease-in-out,
247+
color 0.25s ease-in-out,
248+
outline-color 0.1s ease-in-out;
249+
}
250+
251+
/* Make sure split button segments maintain default background color until segment itself is hovered, like Garden Split Button */
252+
.ck.ck-splitbutton.ck-splitbutton_open
253+
> .ck-button:not(.ck-on):not(.ck-disabled):not(:hover),
254+
.ck.ck-splitbutton:hover
255+
> .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
256+
background-color: var(--ck-color-button-default-background);
257+
}
258+
259+
/* Change the split buttons' border color on hover */
260+
.ck.ck-splitbutton.ck-splitbutton_open
261+
> .ck-splitbutton__action:not(.ck-on):not(.ck-disabled):not(:hover),
262+
.ck.ck-splitbutton:hover
263+
> .ck-splitbutton__action:not(.ck-on):not(.ck-disabled):not(:hover),
264+
.ck.ck-splitbutton.ck-splitbutton_open
265+
> .ck-splitbutton__arrow:not(.ck-on):not(.ck-disabled):not(:hover),
266+
.ck.ck-splitbutton:hover
267+
> .ck-splitbutton__arrow:not(.ck-on):not(.ck-disabled):not(:hover) {
268+
border-color: var(--ck-color-button-on-hover-border);
269+
}
270+
271+
/* Hide extra line separating segments */
272+
.ck.ck-splitbutton.ck-splitbutton_open
273+
> .ck-splitbutton__arrow:not(.ck-disabled):after,
274+
.ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled):after {
275+
display: none;
276+
}
277+
278+
/* Allow the arrow button to be scooched */
279+
.ck.ck-splitbutton > .ck-splitbutton__arrow {
280+
position: relative;
281+
}
282+
283+
/* Scooch arrow button to the left, in LTR languages */
284+
[dir="ltr"] .ck.ck-splitbutton > .ck-splitbutton__arrow {
285+
left: -1px;
286+
}
287+
288+
/* Scooch arrow button to the right, in RTL languages */
289+
[dir="rtl"] .ck.ck-splitbutton > .ck-splitbutton__arrow {
290+
right: -1px;
291+
}
292+
293+
/* Make sure arrow button always has 1px border */
294+
.ck.ck-splitbutton > .ck-splitbutton__arrow:not(:focus) {
295+
border-width: 1px;
296+
}
297+
298+
/* Ensure action button borders are always flat, on the ending edge (right side, in RTL languages) */
299+
.ck-rounded-corners .ck.ck-button.ck-splitbutton__action {
300+
border-start-end-radius: 0;
301+
border-end-end-radius: 0;
302+
}
303+
304+
/* Ensure arrow button borders are always flat, on the starting edge (left side, in LTR languages) */
305+
.ck-rounded-corners .ck.ck-button.ck-splitbutton__arrow {
306+
border-start-start-radius: 0;
307+
border-end-start-radius: 0;
308+
}
309+
310+
/* Ensure arrow button has visible border, when action button is pressed */
311+
.ck-rounded-corners
312+
.ck.ck-button.ck-splitbutton__action[aria-pressed="true"]
313+
~ .ck.ck-button.ck-splitbutton__arrow {
314+
border-color: var(--ck-color-button-on-hover-border);
315+
}
316+
317+
/*
318+
* List button overrides
319+
*/
320+
321+
/* Remove default button border from buttons that live inside of menu list items */
322+
.ck.ck-list__item > .ck-button {
323+
border: none;
324+
}
325+
326+
/* Change it so list items behave like Garden Menu list items, on focus visible */
327+
.ck.ck-list__item > .ck.ck-button:focus-visible {
328+
background: var(--ck-color-list-button-hover-background);
329+
box-shadow: none;
330+
}
331+
332+
/* Change it so list items behave like Garden Menu list items, in the active state */
333+
.ck.ck-list__item > .ck.ck-button:not(.ck-disabled):active {
334+
background: var(--ck-color-list-button-hover-background);
115335
}

‎yarn.lock‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1635,7 +1635,7 @@ __metadata:
16351635
"@ckeditor/ckeditor5-paste-from-office": "npm:41.3.0"
16361636
"@ckeditor/ckeditor5-theme-lark": "npm:41.3.0"
16371637
"@ckeditor/ckeditor5-typing": "npm:41.3.0"
1638-
"@zendeskgarden/css-variables": "npm:6.4.6"
1638+
"@zendeskgarden/css-variables": "npm:7.0.0"
16391639
"@zendeskgarden/svg-icons": "npm:7.0.0"
16401640
copy-webpack-plugin: "npm:12.0.2"
16411641
css-loader: "npm:6.10.0"
@@ -1654,10 +1654,10 @@ __metadata:
16541654
languageName: unknown
16551655
linkType: soft
16561656

1657-
"@zendeskgarden/css-variables@npm:6.4.6":
1658-
version: 6.4.6
1659-
resolution: "@zendeskgarden/css-variables@npm:6.4.6"
1660-
checksum: 10c0/cb5ab84e1d4a102661fe12523d7c6aa611af6b80015402273fac7696c57d74870c5e7ee50c975d8dbf97469902d089590358ddb0042dc826d395c399c9dc46d8
1657+
"@zendeskgarden/css-variables@npm:7.0.0":
1658+
version: 7.0.0
1659+
resolution: "@zendeskgarden/css-variables@npm:7.0.0"
1660+
checksum: 10c0/6e11a6dd58a4aee9c9ab855b43551cde2c229bfef0d55ce62b34ebb0ae31b46895cd9ca58f1b9d6295a0ee4662d7a429584d9cf3714c07106bfd03ccddb7708f
16611661
languageName: node
16621662
linkType: hard
16631663

0 commit comments

Comments
 (0)