浏览代码

Enabled additional box-shadow on .ck-button to meet WCAG AA recommendation. Adjusted the color of the --ck-color-focus-border for the same reason (editables, widget selection, etc.).

Aleksander Nowodzinski 6 年之前
父节点
当前提交
ffefb87f22

+ 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. */
 	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 */

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

+ 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.
 	 */
-	--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).