Merge pull request #187 from ckeditor/t/ckeditor5-ui/394

Other: Used a solid box-shadow to indicate the :focus state of the .ck-button (also .ck-input). Obsoleted the background color change on .ck-button:focus to avoid situations when a focused button looks like an active one (see ckeditor/ckeditor5-ui#394). BREAKING CHANGE: Various color variables --ck-color-button-...-focus have been renamed to --ck-color-button-...-hover.
ckeditor · Jul 6, 2018 · ad5770c · ad5770c
2 parents 1e9773c + d7646ba
commit ad5770c
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 26 deletions.
diff --git a/docs/_snippets/examples/custom.css b/docs/_snippets/examples/custom.css
@@ -27,19 +27,19 @@
 	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 
 	--ck-color-button-default-background: var(--ck-custom-background);
-	--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+	--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
 	--ck-color-button-default-active-background: hsl(270, 2%, 20%);
 	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 	--ck-color-button-on-background: var(--ck-custom-foreground);
-	--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+	--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
 	--ck-color-button-on-active-background: hsl(255, 4%, 14%);
 	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
-	--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+	--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
 	--ck-color-button-action-active-background: hsl(168, 76%, 36%);
 	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

diff --git a/docs/framework/guides/theme-customization.md b/docs/framework/guides/theme-customization.md
@@ -93,19 +93,19 @@ The file containing custom variables will be named `custom.css` and it will look
 	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 
 	--ck-color-button-default-background: var(--ck-custom-background);
-	--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+	--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
 	--ck-color-button-default-active-background: hsl(270, 2%, 20%);
 	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 	--ck-color-button-on-background: var(--ck-custom-foreground);
-	--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+	--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
 	--ck-color-button-on-active-background: hsl(255, 4%, 14%);
 	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
-	--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+	--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
 	--ck-color-button-action-active-background: hsl(168, 76%, 36%);
 	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

diff --git a/tests/manual/iconset.js b/tests/manual/iconset.js
@@ -28,6 +28,7 @@ import objectCenter from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg
 import objectRight from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
 import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
 import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
+import pilcrow from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
 import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
 
 import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
@@ -67,7 +68,7 @@ const icons = {
 	bold, italic, underline, code, strikethrough,
 
 	// core
-	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil,
+	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow,
 
 	// font
 	fontFamily, fontSize,

diff --git a/tests/manual/inverted.html b/tests/manual/inverted.html
@@ -21,19 +21,19 @@
 		/* -- Overrides the default .ck-button class colors ----------------------------------------- */
 
 		--ck-color-button-default-background: var(--ck-custom-background);
-		--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+		--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
 		--ck-color-button-default-active-background: hsl(270, 2%, 20%);
 		--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 		--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 		--ck-color-button-on-background: var(--ck-custom-foreground);
-		--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+		--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
 		--ck-color-button-on-active-background: hsl(255, 4%, 14%);
 		--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 		--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 		--ck-color-button-action-background: hsl(168, 76%, 42%);
-		--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+		--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
 		--ck-color-button-action-active-background: hsl(168, 76%, 36%);
 		--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 		--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css
@@ -34,6 +34,9 @@ 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;
+
 	&:active,
 	&:focus {
 		@mixin ck-focus-ring;
@@ -45,6 +48,12 @@ a.ck.ck-button {
 
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 	&.ck-disabled {
+		&:active,
+		&:focus {
+			/* The disabled button should have a slightly less visible shadow when focused. */
+			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
+		}
+
 		& .ck-button__icon {
 			@mixin ck-disabled;
 		}

diff --git a/theme/ckeditor5-ui/components/dropdown/dropdown.css b/theme/ckeditor5-ui/components/dropdown/dropdown.css
@@ -67,6 +67,6 @@
 	border: 1px solid var(--ck-color-dropdown-panel-border);
 	bottom: 0;
 
-	/* Make sure the panel is at least as wide as the dropdown's button. */
+	/* Make sure the panel is at least as wide as the drop-down's button. */
 	min-width: 100%;
 }
diff --git a/theme/ckeditor5-ui/components/dropdown/listdropdown.css b/theme/ckeditor5-ui/components/dropdown/listdropdown.css
@@ -11,4 +11,23 @@
 	@mixin ck-rounded-corners {
 		border-top-left-radius: 0;
 	}
+
+	/* Make sure the button belonging to the first/last child of the list goes well with the
+	border radius of the entire panel. */
+	& .ck-list__item {
+		&:first-child .ck-button {
+			@mixin ck-rounded-corners {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
+
+		&:last-child .ck-button {
+			@mixin ck-rounded-corners {
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+			}
+		}
+	}
 }
diff --git a/theme/ckeditor5-ui/components/inputtext/inputtext.css b/theme/ckeditor5-ui/components/inputtext/inputtext.css
@@ -23,7 +23,8 @@
 	/* This is important to stay of the same height as surrounding buttons */
 	min-height: var(--ck-ui-component-min-height);
 
-	transition-property: box-shadow,border;
+	/* Apply some smooth transition to the box-shadow and border. */
+	transition-property: box-shadow, border;
 	transition: .2s ease-in-out;
 
 	&:focus {
@@ -35,5 +36,10 @@
 		border: 1px solid var(--ck-color-input-disabled-border);
 		background: var(--ck-color-input-disabled-background);
 		color: var(--ck-color-input-disabled-text);
+
+		&:focus {
+			/* The read-only input should have a slightly less visible shadow when focused. */
+			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow), var(--ck-inner-shadow);
+		}
 	}
 }
diff --git a/theme/ckeditor5-ui/components/list/list.css b/theme/ckeditor5-ui/components/list/list.css
@@ -45,8 +45,7 @@
 			background: var(--ck-color-list-button-on-background);
 			color: var(--ck-color-list-button-on-text);
 
-			&:hover:not(ck-disabled),
-			&:focus {
+			&:hover:not(ck-disabled) {
 				background: var(--ck-color-list-button-on-background-focus);
 			}
 
@@ -55,8 +54,7 @@
 			}
 		}
 
-		&:hover:not(.ck-disabled),
-		&:focus {
+		&:hover:not(.ck-disabled) {
 			background: var(--ck-color-list-button-hover-background);
 		}
 	}
@@ -68,8 +66,7 @@
 			background: var(--ck-color-list-background);
 			color: inherit;
 
-			&:hover:not(ck-disabled),
-			&:focus {
+			&:hover:not(ck-disabled) {
 				background: var(--ck-color-list-button-hover-background);
 				color: inherit;
 			}

diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css
@@ -16,27 +16,28 @@
 	/* -- Generic colors ------------------------------------------------------------------------ */
 
 	--ck-color-focus-border: 									hsl(208, 90%, 62%);
-	--ck-color-focus-shadow:									hsl(209, 90%, 72%);
+	--ck-color-focus-shadow:									hsla(209, 90%, 72%,.5);
+	--ck-color-focus-disabled-shadow:							hsla(209, 90%, 72%,.3);
 	--ck-color-text: 											var(--ck-color-base-text);
 	--ck-color-shadow-drop: 									hsla(0, 0%, 0%, 0.15);
 	--ck-color-shadow-inner: 									hsla(0, 0%, 0%, 0.1);
 
 	/* -- Buttons ------------------------------------------------------------------------------- */
 
 	--ck-color-button-default-background: 						transparent;
-	--ck-color-button-default-focus-background: 				hsl(0, 0%, 90%);
+	--ck-color-button-default-hover-background: 				hsl(0, 0%, 90%);
 	--ck-color-button-default-active-background: 				hsl(0, 0%, 85%);
 	--ck-color-button-default-active-shadow: 					hsl(0, 0%, 75%);
 	--ck-color-button-default-disabled-background: 				transparent;
 
 	--ck-color-button-on-background: 							hsl(0, 0%, 87%);
-	--ck-color-button-on-focus-background: 						hsl(0, 0%, 77%);
+	--ck-color-button-on-hover-background: 						hsl(0, 0%, 77%);
 	--ck-color-button-on-active-background: 					hsl(0, 0%, 73%);
 	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 63%);
 	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 87%);
 
 	--ck-color-button-action-background: 						var(--ck-color-base-action);
-	--ck-color-button-action-focus-background: 					hsl(104, 44%, 43%);
+	--ck-color-button-action-hover-background: 					hsl(104, 44%, 43%);
 	--ck-color-button-action-active-background: 				hsl(104, 44%, 41%);
 	--ck-color-button-action-active-shadow: 					hsl(104, 44%, 36%);
 	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);

diff --git a/theme/ckeditor5-ui/globals/_focus.css b/theme/ckeditor5-ui/globals/_focus.css
@@ -4,10 +4,20 @@
  */
 
 :root {
+	/**
+	 * The geometry of the of focused element's outer shadow.
+	 */
+	--ck-focus-outer-shadow-geometry: 0 0 0 3px;
+
 	/**
 	 * A visual style of focused element's outer shadow.
 	 */
-	--ck-focus-outer-shadow: 0 0 3px var(--ck-color-focus-shadow);
+	--ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-shadow);
+
+	/**
+	 * A visual style of focused element's outer shadow (when disabled).
+	 */
+	--ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);
 
 	/**
 	 * A visual style of focused element's border or outline.

diff --git a/theme/ckeditor5-ui/mixins/_button.css b/theme/ckeditor5-ui/mixins/_button.css
@@ -13,9 +13,8 @@
 	background: var($(prefix)-background);
 
 	&:not(.ck-disabled) {
-		&:hover,
-		&:focus {
-			background: var($(prefix)-focus-background);
+		&:hover {
+			background: var($(prefix)-hover-background);
 		}
 
 		&:active {