8
0
Просмотр исходного кода

Merge branch 'master' into t/ckeditor5/952

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
ed23009814

+ 3 - 3
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css

@@ -27,19 +27,19 @@
 	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 
 
 	--ck-color-button-default-background: var(--ck-custom-background);
 	--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-background: hsl(270, 2%, 20%);
 	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 
 	--ck-color-button-on-background: var(--ck-custom-foreground);
 	--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-background: hsl(255, 4%, 14%);
 	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
 	--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-background: hsl(168, 76%, 36%);
 	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

+ 3 - 3
packages/ckeditor5-theme-lark/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. ---------------------------------------- */
 	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 
 
 	--ck-color-button-default-background: var(--ck-custom-background);
 	--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-background: hsl(270, 2%, 20%);
 	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 
 	--ck-color-button-on-background: var(--ck-custom-foreground);
 	--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-background: hsl(255, 4%, 14%);
 	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
 	--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-background: hsl(168, 76%, 36%);
 	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

+ 1 - 1
packages/ckeditor5-theme-lark/package.json

@@ -34,7 +34,7 @@
     "lint-staged": "^7.0.0"
     "lint-staged": "^7.0.0"
   },
   },
   "engines": {
   "engines": {
-    "node": ">=6.0.0",
+    "node": ">=6.9.0",
     "npm": ">=3.0.0"
     "npm": ">=3.0.0"
   },
   },
   "author": "CKSource (http://cksource.com/)",
   "author": "CKSource (http://cksource.com/)",

+ 2 - 1
packages/ckeditor5-theme-lark/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 objectRight from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
 import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
 import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
 import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.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 quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
 
 
 import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
 import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
@@ -67,7 +68,7 @@ const icons = {
 	bold, italic, underline, code, strikethrough,
 	bold, italic, underline, code, strikethrough,
 
 
 	// core
 	// core
-	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil,
+	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow,
 
 
 	// font
 	// font
 	fontFamily, fontSize,
 	fontFamily, fontSize,

+ 3 - 3
packages/ckeditor5-theme-lark/tests/manual/inverted.html

@@ -21,19 +21,19 @@
 		/* -- Overrides the default .ck-button class colors ----------------------------------------- */
 		/* -- Overrides the default .ck-button class colors ----------------------------------------- */
 
 
 		--ck-color-button-default-background: var(--ck-custom-background);
 		--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-background: hsl(270, 2%, 20%);
 		--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 		--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 		--ck-color-button-default-disabled-background: var(--ck-custom-background);
 		--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 
 		--ck-color-button-on-background: var(--ck-custom-foreground);
 		--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-background: hsl(255, 4%, 14%);
 		--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 		--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 		--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 		--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 
 		--ck-color-button-action-background: hsl(168, 76%, 42%);
 		--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-background: hsl(168, 76%, 36%);
 		--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 		--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 		--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
 		--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

+ 11 - 17
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css

@@ -7,7 +7,7 @@
 	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
 	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
 	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
 	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
 
 
-	--ck-image-upload-icon-size: 1.25em;
+	--ck-image-upload-icon-size: 20px;
 	--ck-image-upload-icon-width: 2px;
 	--ck-image-upload-icon-width: 2px;
 }
 }
 
 
@@ -20,6 +20,9 @@
 	animation-fill-mode: forwards, forwards;
 	animation-fill-mode: forwards, forwards;
 	animation-duration: 500ms, 500ms;
 	animation-duration: 500ms, 500ms;
 
 
+	/* To make animation scalable. */
+	font-size: var(--ck-image-upload-icon-size);
+
 	/* Hide completed upload icon after 3 seconds. */
 	/* Hide completed upload icon after 3 seconds. */
 	animation-delay: 0ms, 3000ms;
 	animation-delay: 0ms, 3000ms;
 
 
@@ -42,6 +45,9 @@
 		animation-duration: 500ms;
 		animation-duration: 500ms;
 		animation-delay: 500ms;
 		animation-delay: 500ms;
 		animation-fill-mode: forwards;
 		animation-fill-mode: forwards;
+
+		/* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */
+		box-sizing: border-box;
 	}
 	}
 }
 }
 
 
@@ -68,28 +74,16 @@
 @keyframes ck-upload-complete-icon-check {
 @keyframes ck-upload-complete-icon-check {
 	0% {
 	0% {
 		opacity: 1;
 		opacity: 1;
-		height: 0;
 		width: 0;
 		width: 0;
+		height: 0;
 	}
 	}
 	33% {
 	33% {
-		/*
-		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
-		 * It should be: width: calc( var(--ck-image-upload-icon-size) / 5 );
-		 */
-		width: 0.25em;
-
+		width: 0.3em;
 		height: 0;
 		height: 0;
 	}
 	}
 	100% {
 	100% {
-		/*
-		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
-		 * It should be:
-		 * height: calc( var(--ck-image-upload-icon-size) / 3 );
-		 * width: calc( var(--ck-image-upload-icon-size) / 5 );
-		 */
-		width: 0.25em;
-		height: 0.416em;
-
 		opacity: 1;
 		opacity: 1;
+		width: 0.3em;
+		height: 0.45em;
 	}
 	}
 }
 }

+ 3 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css

@@ -17,7 +17,9 @@
 			/* Fixes the problem where surrounding cells cover the focused cell's border.
 			/* Fixes the problem where surrounding cells cover the focused cell's border.
 			It does not fix the problem in all places but the UX is improved.
 			It does not fix the problem in all places but the UX is improved.
 			See https://github.com/ckeditor/ckeditor5-table/issues/29. */
 			See https://github.com/ckeditor/ckeditor5-table/issues/29. */
-			border-style: double;
+			border-style: none;
+			outline: 1px solid var(--ck-color-focus-border);
+			outline-offset: -1px; /* progressive enhancement - no IE support */
 		}
 		}
 	}
 	}
 }
 }

+ 9 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -34,6 +34,9 @@ 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;
+
 	&:active,
 	&:active,
 	&:focus {
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-focus-ring;
@@ -45,6 +48,12 @@ a.ck.ck-button {
 
 
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 	&.ck-disabled {
 	&.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 {
 		& .ck-button__icon {
 			@mixin ck-disabled;
 			@mixin ck-disabled;
 		}
 		}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -34,7 +34,7 @@ of the component, floating–point numbers have been used which, for the default
 		margin-left: auto;
 		margin-left: auto;
 
 
 		/* Gently animate the background color of the toggle switch */
 		/* Gently animate the background color of the toggle switch */
-		transition: background 500ms ease;
+		transition: background 400ms ease;
 
 
 		width: var(--ck-switch-button-toggle-width);
 		width: var(--ck-switch-button-toggle-width);
 		background: var(--ck-color-switch-button-off-background);
 		background: var(--ck-color-switch-button-off-background);

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -72,6 +72,6 @@
 	border: 1px solid var(--ck-color-dropdown-panel-border);
 	border: 1px solid var(--ck-color-dropdown-panel-border);
 	bottom: 0;
 	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%;
 	min-width: 100%;
 }
 }

+ 19 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css

@@ -11,4 +11,23 @@
 	@mixin ck-rounded-corners {
 	@mixin ck-rounded-corners {
 		border-top-left-radius: 0;
 		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;
+			}
+		}
+	}
 }
 }

+ 7 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css

@@ -23,7 +23,8 @@
 	/* This is important to stay of the same height as surrounding buttons */
 	/* This is important to stay of the same height as surrounding buttons */
 	min-height: var(--ck-ui-component-min-height);
 	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;
 	transition: .2s ease-in-out;
 
 
 	&:focus {
 	&:focus {
@@ -35,5 +36,10 @@
 		border: 1px solid var(--ck-color-input-disabled-border);
 		border: 1px solid var(--ck-color-input-disabled-border);
 		background: var(--ck-color-input-disabled-background);
 		background: var(--ck-color-input-disabled-background);
 		color: var(--ck-color-input-disabled-text);
 		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);
+		}
 	}
 	}
 }
 }

+ 3 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -45,8 +45,7 @@
 			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),
-			&:focus {
+			&:hover:not(ck-disabled) {
 				background: var(--ck-color-list-button-on-background-focus);
 				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);
 			background: var(--ck-color-list-button-hover-background);
 		}
 		}
 	}
 	}
@@ -68,8 +66,7 @@
 			background: var(--ck-color-list-background);
 			background: var(--ck-color-list-background);
 			color: inherit;
 			color: inherit;
 
 
-			&:hover:not(ck-disabled),
-			&:focus {
+			&:hover:not(ck-disabled) {
 				background: var(--ck-color-list-button-hover-background);
 				background: var(--ck-color-list-button-hover-background);
 				color: inherit;
 				color: inherit;
 			}
 			}

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

@@ -16,7 +16,8 @@
 	/* -- Generic colors ------------------------------------------------------------------------ */
 	/* -- Generic colors ------------------------------------------------------------------------ */
 
 
 	--ck-color-focus-border: 									hsl(208, 90%, 62%);
 	--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-text: 											var(--ck-color-base-text);
 	--ck-color-shadow-drop: 									hsla(0, 0%, 0%, 0.15);
 	--ck-color-shadow-drop: 									hsla(0, 0%, 0%, 0.15);
 	--ck-color-shadow-inner: 									hsla(0, 0%, 0%, 0.1);
 	--ck-color-shadow-inner: 									hsla(0, 0%, 0%, 0.1);
@@ -24,19 +25,19 @@
 	/* -- Buttons ------------------------------------------------------------------------------- */
 	/* -- Buttons ------------------------------------------------------------------------------- */
 
 
 	--ck-color-button-default-background: 						transparent;
 	--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-background: 				hsl(0, 0%, 85%);
 	--ck-color-button-default-active-shadow: 					hsl(0, 0%, 75%);
 	--ck-color-button-default-active-shadow: 					hsl(0, 0%, 75%);
 	--ck-color-button-default-disabled-background: 				transparent;
 	--ck-color-button-default-disabled-background: 				transparent;
 
 
 	--ck-color-button-on-background: 							hsl(0, 0%, 87%);
 	--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-background: 					hsl(0, 0%, 73%);
 	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 63%);
 	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 63%);
 	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 87%);
 	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 87%);
 
 
 	--ck-color-button-action-background: 						var(--ck-color-base-action);
 	--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-background: 				hsl(104, 44%, 41%);
 	--ck-color-button-action-active-shadow: 					hsl(104, 44%, 36%);
 	--ck-color-button-action-active-shadow: 					hsl(104, 44%, 36%);
 	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);
 	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);

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

@@ -4,10 +4,20 @@
  */
  */
 
 
 :root {
 :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.
 	 * 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.
 	 * A visual style of focused element's border or outline.

+ 2 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css

@@ -13,9 +13,8 @@
 	background: var($(prefix)-background);
 	background: var($(prefix)-background);
 
 
 	&:not(.ck-disabled) {
 	&:not(.ck-disabled) {
-		&:hover,
-		&:focus {
-			background: var($(prefix)-focus-background);
+		&:hover {
+			background: var($(prefix)-hover-background);
 		}
 		}
 
 
 		&:active {
 		&:active {