Browse Source

Merge branch 'master' into t/ckeditor5-image/207

Aleksander Nowodzinski 7 years ago
parent
commit
359ac1cfee

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

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

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

@@ -34,7 +34,7 @@
     "lint-staged": "^7.0.0"
   },
   "engines": {
-    "node": ">=6.0.0",
+    "node": ">=6.9.0",
     "npm": ">=3.0.0"
   },
   "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 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,

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

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

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

@@ -9,6 +9,7 @@
 
 :root {
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
+	--ck-dropdown-panel-max-height: 70vh;
 }
 
 .ck.ck-dropdown {
@@ -57,6 +58,10 @@
 	@mixin ck-rounded-corners;
 	@mixin ck-drop-shadow;
 
+	/* https://github.com/ckeditor/ckeditor5/issues/952 */
+	max-height: var(--ck-dropdown-panel-max-height);
+	overflow-y: auto;
+
 	/* Disabled radius of top-left border to be consistent with .dropdown__button
 	https://github.com/ckeditor/ckeditor5/issues/816 */
 	@mixin ck-rounded-corners {
@@ -67,6 +72,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%;
 }

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

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

+ 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);
 			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;
 			}

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

@@ -16,7 +16,8 @@
 	/* -- 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);
@@ -24,19 +25,19 @@
 	/* -- 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%);

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

@@ -5,9 +5,19 @@
 
 :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.

+ 2 - 3
packages/ckeditor5-theme-lark/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 {