浏览代码

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`.
Maciej 6 年之前
父节点
当前提交
d3c88930ee

+ 4 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-font/fontcolor.css

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

+ 35 - 0
packages/ckeditor5-theme-lark/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);
+	}
+}
+

+ 2 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -35,8 +35,8 @@ a.ck.ck-button {
 	/* Avoid flickering when the foucs border shows up. */
 	/* Avoid flickering when the foucs border shows up. */
 	border: 1px solid transparent;
 	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 */
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */
 	-webkit-appearance: none;
 	-webkit-appearance: none;
@@ -45,9 +45,6 @@ a.ck.ck-button {
 	&:focus {
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-focus-ring;
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
 		@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 */
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */

+ 20 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css

@@ -6,23 +6,26 @@
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
 
 
 :root {
 :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 {
 .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 {
 .ck.ck-color-grid__tile {
-	@mixin ck-rounded-corners;
-
 	width: var(--ck-color-grid-tile-size);
 	width: var(--ck-color-grid-tile-size);
 	height: var(--ck-color-grid-tile-size);
 	height: var(--ck-color-grid-tile-size);
 	min-width: var(--ck-color-grid-tile-size);
 	min-width: var(--ck-color-grid-tile-size);
 	min-height: var(--ck-color-grid-tile-size);
 	min-height: var(--ck-color-grid-tile-size);
 	padding: 0;
 	padding: 0;
-	transition: 200ms ease box-shadow;
+	transition: .2s ease box-shadow;
 	border: 0;
 	border: 0;
 
 
 	&.ck-disabled {
 	&.ck-disabled {
@@ -36,18 +39,27 @@
 
 
 	& .ck.ck-icon {
 	& .ck.ck-icon {
 		display: none;
 		display: none;
+		color: var(--ck-color-color-grid-check-icon);
 	}
 	}
 
 
 	&.ck-on {
 	&.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 {
 		& .ck.ck-icon {
 			display: block;
 			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 ) {
 	&: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);
 	}
 	}
 }
 }
 
 

+ 5 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

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

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -16,8 +16,8 @@
 
 
 	/* -- Generic colors ------------------------------------------------------------------------ */
 	/* -- 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-disabled-shadow:							hsla(209, 90%, 72%,.3);
 	--ck-color-focus-error-shadow:								hsla(9,100%,56%,.3);
 	--ck-color-focus-error-shadow:								hsla(9,100%,56%,.3);
 	--ck-color-text: 											var(--ck-color-base-text);
 	--ck-color-text: 											var(--ck-color-base-text);

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css

@@ -12,7 +12,7 @@
 	/**
 	/**
 	 * A visual style of focused element's outer shadow.
 	 * 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).
 	 * A visual style of focused element's outer shadow (when disabled).