Merge pull request #250 from ckeditor/i/5580

Fix: Enabled additional box-shadow on `.ck-button` to meet WCAG AA recommendations. Adjusted the color of the `--ck-color-focus-border` for the same reason (editables, widget selection, etc.). Closes ckeditor/ckeditor5#5580.

Also: 
* Optimized the color gird component for WCAG AA. 
* Imported insert table UI styles from ckeditor5-table (code refactoring).
   * Improved the table UI contrast and accessibility.

BREAKING CHANGE: The `--ck-color-focus-shadow` custom property is now `--ck-color-focus-outer-shadow`.

theme/ckeditor5-font/fontcolor.css

@@ -6,11 +6,14 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck .ck-button.ck-color-table__remove-color {
-	border-bottom: 1px solid var(--ck-color-base-border);
 	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
 	border-bottom-left-radius: 0;
 	border-bottom-right-radius: 0;
 
+	&:not(:focus) {
+		border-bottom: 1px solid var(--ck-color-base-border);
+	}
+
 	& .ck.ck-icon {
 		@mixin ck-dir ltr {
 			margin-right: var(--ck-spacing-standard);

theme/ckeditor5-table/inserttable.css

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-insert-table-dropdown-padding: 10px;
+	--ck-insert-table-dropdown-box-height: 11px;
+	--ck-insert-table-dropdown-box-width: 12px;
+	--ck-insert-table-dropdown-box-margin: 1px;
+}
+
+.ck .ck-insert-table-dropdown__grid {
+	/* The width of a container should match 10 items in a row so there will be a 10x10 grid. */
+	width: calc(var(--ck-insert-table-dropdown-box-width) * 10 + var(--ck-insert-table-dropdown-box-margin) * 20 + var(--ck-insert-table-dropdown-padding) * 2);
+	padding: var(--ck-insert-table-dropdown-padding) var(--ck-insert-table-dropdown-padding) 0;
+}
+
+.ck .ck-insert-table-dropdown__label {
+	text-align: center;
+}
+
+.ck .ck-insert-table-dropdown-grid-box {
+	width: var(--ck-insert-table-dropdown-box-width);
+	height: var(--ck-insert-table-dropdown-box-height);
+	margin: var(--ck-insert-table-dropdown-box-margin);
+	border: 1px solid var(--ck-color-base-border);
+	border-radius: 1px;
+
+	&.ck-on {
+		border-color: var(--ck-color-focus-border);
+		background: var(--ck-color-focus-outer-shadow);
+	}
+}
+

theme/ckeditor5-ui/components/button/button.css

@@ -35,8 +35,8 @@ a.ck.ck-button {
 	/* Avoid flickering when the foucs border shows up. */
 	border: 1px solid transparent;
 
-	/* Apply some smooth transition to the box-shadow. */
-	transition: box-shadow 200ms ease-in-out;
+	/* Apply some smooth transition to the box-shadow and border. */
+	transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
 
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */
 	-webkit-appearance: none;
@@ -45,9 +45,6 @@ a.ck.ck-button {
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
-
-		/* Disable border part of the focus ring for the buttons. It is too much. */
-		border-color: transparent;
 	}
 
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */

theme/ckeditor5-ui/components/colorgrid/colorgrid.css

@@ -6,23 +6,26 @@
 @import "../../../mixins/_rounded.css";
 
 :root {
-	--ck-color-grid-tile-size: 20px;
+	--ck-color-grid-tile-size: 24px;
+
+	/* Not using global colors here because these may change but some colors in a pallette
+	 * require special treatment. For instance, this ensures no matter what the UI text color is,
+	 * the check icon will look good on the black color tile. */
+	--ck-color-color-grid-check-icon: hsl(0, 0%, 0%);
 }
 
 .ck.ck-color-grid {
-	grid-gap: calc( var(--ck-spacing-standard) / 2 );
-	padding: var(--ck-spacing-standard);
+	grid-gap: 5px;
+	padding: 8px;
 }
 
 .ck.ck-color-grid__tile {
-	@mixin ck-rounded-corners;
-
 	width: var(--ck-color-grid-tile-size);
 	height: var(--ck-color-grid-tile-size);
 	min-width: var(--ck-color-grid-tile-size);
 	min-height: var(--ck-color-grid-tile-size);
 	padding: 0;
-	transition: 200ms ease box-shadow;
+	transition: .2s ease box-shadow;
 	border: 0;
 
 	&.ck-disabled {
@@ -36,18 +39,27 @@
 
 	& .ck.ck-icon {
 		display: none;
+		color: var(--ck-color-color-grid-check-icon);
 	}
 
 	&.ck-on {
-		box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
+		box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
 
 		& .ck.ck-icon {
 			display: block;
 		}
 	}
 
+	&.ck-on,
+	&:focus:not( .ck-disabled ),
+	&:hover:not( .ck-disabled ) {
+		/* Disable the default .ck-button's border ring. */
+		border: 0;
+	}
+
+	&:focus:not( .ck-disabled ),
 	&:hover:not( .ck-disabled ) {
-		box-shadow: 0 0 0 2px var(--ck-color-focus-border);
+		box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
 	}
 }
 

theme/ckeditor5-ui/components/list/list.css

@@ -23,7 +23,6 @@
 		width: 100%;
 		text-align: left;
 		border-radius: 0;
-		border: 0;
 
 		/* List items should have the same height. Use absolute units to make sure it is so
 		   because e.g. different heading styles may have different height
@@ -45,13 +44,17 @@
 			background: var(--ck-color-list-button-on-background);
 			color: var(--ck-color-list-button-on-text);
 
-			&:hover:not(ck-disabled) {
+			&:hover:not(.ck-disabled) {
 				background: var(--ck-color-list-button-on-background-focus);
 			}
 
 			&:active {
 				box-shadow: none;
 			}
+
+			&:focus:not(.ck-disabled) {
+				border-color: var(--ck-color-base-background);
+			}
 		}
 
 		&:hover:not(.ck-disabled) {

theme/ckeditor5-ui/globals/_colors.css

@@ -16,8 +16,8 @@
 
 	/* -- Generic colors ------------------------------------------------------------------------ */
 
-	--ck-color-focus-border: 									hsl(208, 90%, 62%);
-	--ck-color-focus-shadow:									hsla(209, 90%, 72%,.5);
+	--ck-color-focus-border: 									hsl(208, 79%, 51%);
+	--ck-color-focus-outer-shadow:								hsl(207, 89%, 86%);
 	--ck-color-focus-disabled-shadow:							hsla(209, 90%, 72%,.3);
 	--ck-color-focus-error-shadow:								hsla(9,100%,56%,.3);
 	--ck-color-text: 											var(--ck-color-base-text);

theme/ckeditor5-ui/globals/_focus.css

@@ -12,7 +12,7 @@
 	/**
 	 * A visual style of focused element's outer shadow.
 	 */
-	--ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-shadow);
+	--ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
 
 	/**
 	 * A visual style of focused element's outer shadow (when disabled).