Sfoglia il codice sorgente

Merge branch 'master' into t/ckeditor5/416d

Aleksander Nowodzinski 6 anni fa
parent
commit
f6a861f627
20 ha cambiato i file con 363 aggiunte e 89 eliminazioni
  1. 12 0
      packages/ckeditor5-theme-lark/CHANGELOG.md
  2. 1 1
      packages/ckeditor5-theme-lark/docs/api/theme-lark.md
  3. 20 20
      packages/ckeditor5-theme-lark/package.json
  4. 2 1
      packages/ckeditor5-theme-lark/tests/manual/iconset.js
  5. 19 0
      packages/ckeditor5-theme-lark/tests/manual/theme.html
  6. 18 4
      packages/ckeditor5-theme-lark/tests/manual/theme.js
  7. 11 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-font/fontcolor.css
  8. 2 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadprogress.css
  9. 25 5
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
  10. 25 5
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
  11. 39 7
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
  12. 25 5
      packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css
  13. 18 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css
  14. 27 5
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css
  15. 30 6
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css
  16. 33 8
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css
  17. 8 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css
  18. 32 15
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css
  19. 10 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css
  20. 6 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

+ 12 - 0
packages/ckeditor5-theme-lark/CHANGELOG.md

@@ -1,6 +1,18 @@
 Changelog
 Changelog
 =========
 =========
 
 
+## [14.2.0](https://github.com/ckeditor/ckeditor5-theme-lark/compare/v14.1.1...v14.2.0) (2019-08-26)
+
+### Features
+
+* Brought support for right–to–left (RTL) UI to various components' styles. See [ckeditor/ckeditor5#1151](https://github.com/ckeditor/ckeditor5/issues/1151). ([70aa1a5](https://github.com/ckeditor/ckeditor5-theme-lark/commit/70aa1a5))
+
+### Other changes
+
+* The issue tracker for this package was moved to https://github.com/ckeditor/ckeditor5/issues. See [ckeditor/ckeditor5#1988](https://github.com/ckeditor/ckeditor5/issues/1988). ([59e4777](https://github.com/ckeditor/ckeditor5-theme-lark/commit/59e4777))
+* The `.ck-progress-bar` styles should not be under with `.ck-content`. Additionaly removed two unused custom properties: `--ck-color-upload-infinite-background` and `--ck-image-upload-progress-line-width`. Closes https://github.com/ckeditor/ckeditor5-theme-lark/issues/239. Closes https://github.com/ckeditor/ckeditor5/issues/1915. ([cb92793](https://github.com/ckeditor/ckeditor5-theme-lark/commit/cb92793))
+
+
 ## [14.1.1](https://github.com/ckeditor/ckeditor5-theme-lark/compare/v14.1.0...v14.1.1) (2019-07-10)
 ## [14.1.1](https://github.com/ckeditor/ckeditor5-theme-lark/compare/v14.1.0...v14.1.1) (2019-07-10)
 
 
 Internal changes only (updated dependencies, documentation, etc.).
 Internal changes only (updated dependencies, documentation, etc.).

+ 1 - 1
packages/ckeditor5-theme-lark/docs/api/theme-lark.md

@@ -26,5 +26,5 @@ The source code of this package is available on GitHub in https://github.com/cke
 
 
 * [`@ckeditor/ckeditor5-theme-lark` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark)
 * [`@ckeditor/ckeditor5-theme-lark` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark)
 * [`ckeditor/ckeditor5-theme-lark` on GitHub](https://github.com/ckeditor/ckeditor5-theme-lark)
 * [`ckeditor/ckeditor5-theme-lark` on GitHub](https://github.com/ckeditor/ckeditor5-theme-lark)
-* [Issue tracker](https://github.com/ckeditor/ckeditor5-theme-lark/issues)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
 * [Changelog](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/CHANGELOG.md)
 * [Changelog](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/CHANGELOG.md)

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

@@ -1,6 +1,6 @@
 {
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "14.1.1",
+  "version": "14.2.0",
   "description": "A bright theme for CKEditor 5.",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
   "keywords": [
     "ckeditor",
     "ckeditor",
@@ -9,26 +9,26 @@
     "ckeditor5-theme"
     "ckeditor5-theme"
   ],
   ],
   "dependencies": {
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^13.0.2"
+    "@ckeditor/ckeditor5-ui": "^14.0.0"
   },
   },
   "devDependencies": {
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^11.1.3",
-    "@ckeditor/ckeditor5-basic-styles": "^11.1.3",
-    "@ckeditor/ckeditor5-core": "^12.2.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^12.2.1",
-    "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
-    "@ckeditor/ckeditor5-font": "^11.2.1",
-    "@ckeditor/ckeditor5-heading": "^11.0.4",
-    "@ckeditor/ckeditor5-highlight": "^11.0.4",
-    "@ckeditor/ckeditor5-indent": "^10.0.1",
-    "@ckeditor/ckeditor5-link": "^11.1.1",
-    "@ckeditor/ckeditor5-list": "^12.0.4",
-    "@ckeditor/ckeditor5-media-embed": "^11.1.3",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.4",
-    "@ckeditor/ckeditor5-remove-format": "^10.0.3",
-    "@ckeditor/ckeditor5-undo": "^11.0.4",
-    "@ckeditor/ckeditor5-utils": "^13.0.1",
-    "@ckeditor/ckeditor5-table": "^13.0.2",
+    "@ckeditor/ckeditor5-alignment": "^11.2.0",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
+    "@ckeditor/ckeditor5-core": "^12.3.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^12.2.2",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
+    "@ckeditor/ckeditor5-font": "^11.2.2",
+    "@ckeditor/ckeditor5-heading": "^11.0.5",
+    "@ckeditor/ckeditor5-highlight": "^11.0.5",
+    "@ckeditor/ckeditor5-indent": "^10.1.0",
+    "@ckeditor/ckeditor5-link": "^11.1.2",
+    "@ckeditor/ckeditor5-list": "^12.1.0",
+    "@ckeditor/ckeditor5-media-embed": "^11.1.4",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.5",
+    "@ckeditor/ckeditor5-remove-format": "^10.0.4",
+    "@ckeditor/ckeditor5-undo": "^11.0.5",
+    "@ckeditor/ckeditor5-utils": "^14.0.0",
+    "@ckeditor/ckeditor5-table": "^14.0.0",
     "eslint": "^5.5.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",
     "husky": "^1.3.1",
@@ -41,7 +41,7 @@
   "author": "CKSource (http://cksource.com/)",
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
   "license": "GPL-2.0-or-later",
   "homepage": "https://ckeditor.com/ckeditor-5",
   "homepage": "https://ckeditor.com/ckeditor-5",
-  "bugs": "https://github.com/ckeditor/ckeditor5-theme-lark/issues",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
   "repository": {
   "repository": {
     "type": "git",
     "type": "git",
     "url": "https://github.com/ckeditor/ckeditor5-theme-lark.git"
     "url": "https://github.com/ckeditor/ckeditor5-theme-lark.git"

+ 2 - 1
packages/ckeditor5-theme-lark/tests/manual/iconset.js

@@ -7,6 +7,7 @@
 
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
+import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
 
 import alignLeft from '@ckeditor/ckeditor5-alignment/theme/icons/align-left.svg';
 import alignLeft from '@ckeditor/ckeditor5-alignment/theme/icons/align-left.svg';
 import alignCenter from '@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg';
 import alignCenter from '@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg';
@@ -118,7 +119,7 @@ const icons = {
 	undo, redo
 	undo, redo
 };
 };
 
 
-const toolbar = new ToolbarView();
+const toolbar = new ToolbarView( new Locale() );
 
 
 for ( const i in icons ) {
 for ( const i in icons ) {
 	const button = new ButtonView();
 	const button = new ButtonView();

+ 19 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -1,5 +1,15 @@
 <head>
 <head>
 	<style>
 	<style>
+		.test-settings {
+			background: #eee;
+			border: 2px solid #ccc;
+			padding: 1em;
+		}
+
+		.test-settings h2 {
+			margin-top: .3em;
+		}
+
 		.wrappable {
 		.wrappable {
 			white-space: initial;
 			white-space: initial;
 			line-height: 3em;
 			line-height: 3em;
@@ -26,6 +36,15 @@
 	</style>
 	</style>
 </head>
 </head>
 
 
+<section class="test-settings">
+	<h2>Test settings</h2>
+	<label for="direcion-selector">Language direction:</label>
+	<select id="direcion-selector">
+		<option value="ltr">Left–to–right (LTR)</option>
+		<option value="rtl">Right-to-left (RTL)</option>
+	</select>
+</section>
+
 <h2>Icon</h2>
 <h2>Icon</h2>
 
 
 	<h3>Icon: In–text</h3>
 	<h3>Icon: In–text</h3>

+ 18 - 4
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -10,6 +10,7 @@ import testUtils from '@ckeditor/ckeditor5-ui/tests/_utils/utils';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import View from '@ckeditor/ckeditor5-ui/src/view';
+import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
 
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
@@ -29,6 +30,8 @@ import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 
 
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 
 
+const locale = new Locale();
+
 class TextView extends View {
 class TextView extends View {
 	constructor() {
 	constructor() {
 		super();
 		super();
@@ -499,7 +502,7 @@ function switchbutton( {
 }
 }
 
 
 function toolbar( children = [] ) {
 function toolbar( children = [] ) {
-	const toolbar = new ToolbarView();
+	const toolbar = new ToolbarView( locale );
 
 
 	children.forEach( c => toolbar.items.add( c ) );
 	children.forEach( c => toolbar.items.add( c ) );
 
 
@@ -513,7 +516,7 @@ function listDropdown( {
 	withText = true,
 	withText = true,
 	items = new Collection( { idProperty: 'label' } )
 	items = new Collection( { idProperty: 'label' } )
 } = {} ) {
 } = {} ) {
-	const dropdown = createDropdown( {} );
+	const dropdown = createDropdown( locale );
 	addListToDropdown( dropdown, items );
 	addListToDropdown( dropdown, items );
 
 
 	dropdown.buttonView.set( { label, isEnabled, isOn, withText } );
 	dropdown.buttonView.set( { label, isEnabled, isOn, withText } );
@@ -529,7 +532,7 @@ function toolbarDropdown( {
 	isVertical = true,
 	isVertical = true,
 	buttons = []
 	buttons = []
 } = {} ) {
 } = {} ) {
-	const dropdown = createDropdown( {} );
+	const dropdown = createDropdown( locale );
 
 
 	addToolbarToDropdown( dropdown, buttons );
 	addToolbarToDropdown( dropdown, buttons );
 
 
@@ -547,7 +550,7 @@ function splitButtonDropdown( {
 	isVertical = true,
 	isVertical = true,
 	buttons = []
 	buttons = []
 } = {} ) {
 } = {} ) {
-	const dropdown = createDropdown( {}, SplitButtonView );
+	const dropdown = createDropdown( locale, SplitButtonView );
 
 
 	addToolbarToDropdown( dropdown, buttons );
 	addToolbarToDropdown( dropdown, buttons );
 
 
@@ -575,3 +578,14 @@ function input( {
 
 
 	return labeledInput;
 	return labeledInput;
 }
 }
+
+function setManualTestDirection( direction ) {
+	document.querySelector( '.manual-test-container' ).classList.add( 'ck' );
+	document.querySelector( '.manual-test-container' ).setAttribute( 'dir', direction );
+}
+
+document.querySelector( '#direcion-selector' ).addEventListener( 'change', evt => {
+	setManualTestDirection( evt.target.value );
+} );
+
+setManualTestDirection( 'ltr' );

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

@@ -3,12 +3,22 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
+@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);
 	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-right-radius: 0;
 
 
 	& .ck.ck-icon {
 	& .ck.ck-icon {
-		margin-right: var(--ck-spacing-standard);
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-standard);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 }
 }
 
 

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadprogress.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
-.ck-content .image {
+.ck.ck-editor__editable .image {
 	/* Showing animation. */
 	/* Showing animation. */
 	&.ck-appear {
 	&.ck-appear {
 		animation: fadeIn 700ms;
 		animation: fadeIn 700ms;
@@ -11,7 +11,7 @@
 }
 }
 
 
 /* Upload progress bar. */
 /* Upload progress bar. */
-.ck .ck-progress-bar {
+.ck.ck-editor__editable .image .ck-progress-bar {
 	height: 2px;
 	height: 2px;
 	width: 0;
 	width: 0;
 	background: var(--ck-color-upload-bar-background);
 	background: var(--ck-color-upload-bar-background);

+ 25 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -4,6 +4,7 @@
  */
  */
 
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-text-alternative-form {
 .ck.ck-text-alternative-form {
 	padding: var(--ck-spacing-standard);
 	padding: var(--ck-spacing-standard);
@@ -13,8 +14,16 @@
 		outline: none;
 		outline: none;
 	}
 	}
 
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 
 
 	@mixin ck-media-phone {
 	@mixin ck-media-phone {
@@ -33,14 +42,25 @@
 		& .ck-button {
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 
 			border-radius: 0;
 			border-radius: 0;
 			border: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 			border-top: 1px solid var(--ck-color-base-border);
 
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 			}
 		}
 		}
 	}
 	}

+ 25 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css

@@ -5,6 +5,7 @@
 
 
 @import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
 @import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 @import "../mixins/_focus.css";
 @import "../mixins/_focus.css";
 @import "../mixins/_shadow.css";
 @import "../mixins/_shadow.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@@ -56,8 +57,16 @@
 		outline: none;
 		outline: none;
 	}
 	}
 
 
-	& .ck-button:not(.ck-link-actions__preview) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& .ck-button:not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& .ck-button:not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 
 
 	@mixin ck-media-phone {
 	@mixin ck-media-phone {
@@ -76,14 +85,25 @@
 		& .ck-button:not(.ck-link-actions__preview) {
 		& .ck-button:not(.ck-link-actions__preview) {
 			padding: var(--ck-spacing-standard);
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 
 			border-radius: 0;
 			border-radius: 0;
 			border: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 			border-top: 1px solid var(--ck-color-base-border);
 
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 			}
 		}
 		}
 	}
 	}

+ 39 - 7
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -4,6 +4,7 @@
  */
  */
 
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-link-form {
 .ck.ck-link-form {
 	padding: var(--ck-spacing-standard);
 	padding: var(--ck-spacing-standard);
@@ -13,8 +14,16 @@
 		outline: none;
 		outline: none;
 	}
 	}
 
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 
 
 	@mixin ck-media-phone {
 	@mixin ck-media-phone {
@@ -33,14 +42,25 @@
 		& .ck-button {
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 
 			border-radius: 0;
 			border-radius: 0;
 			border: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 			border-top: 1px solid var(--ck-color-base-border);
 
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 			}
 		}
 		}
 	}
 	}
@@ -71,8 +91,20 @@
 		border-top: 1px solid var(--ck-color-base-border);
 		border-top: 1px solid var(--ck-color-base-border);
 		width: 50%;
 		width: 50%;
 
 
-		&:first-of-type {
-			border-right: 1px solid var(--ck-color-base-border);
+		@mixin ck-dir ltr {
+			margin-left: 0;
+
+			&:first-of-type {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: 0;
+
+			&:last-of-type {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
 		}
 		}
 	}
 	}
 
 

+ 25 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css

@@ -4,6 +4,7 @@
  */
  */
 
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-media-form {
 .ck.ck-media-form {
 	padding: var(--ck-spacing-standard);
 	padding: var(--ck-spacing-standard);
@@ -12,8 +13,16 @@
 		outline: none;
 		outline: none;
 	}
 	}
 
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 
 
 	@mixin ck-media-phone {
 	@mixin ck-media-phone {
@@ -37,14 +46,25 @@
 		& .ck-button {
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 
 			border-radius: 0;
 			border-radius: 0;
 			border: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 			border-top: 1px solid var(--ck-color-base-border);
 
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 			}
 		}
 		}
 	}
 	}

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

@@ -8,6 +8,7 @@
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
 @import "../../mixins/_button.css";
 @import "../../mixins/_button.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-button,
 .ck.ck-button,
 a.ck.ck-button {
 a.ck.ck-button {
@@ -71,8 +72,15 @@ a.ck.ck-button {
 		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 
 
 		& .ck-button__icon {
 		& .ck-button__icon {
-			margin-left: calc(-1 * var(--ck-spacing-small));
-			margin-right: var(--ck-spacing-small);
+			@mixin ck-dir ltr {
+				margin-left: calc(-1 * var(--ck-spacing-small));
+				margin-right: var(--ck-spacing-small);
+			}
+
+			@mixin ck-dir rtl {
+				margin-right: calc(-1 * var(--ck-spacing-small));
+				margin-left: var(--ck-spacing-small);
+			}
 		}
 		}
 	}
 	}
 
 
@@ -107,6 +115,14 @@ a.ck.ck-button {
 		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
 		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
 		without labels (but with icons) have different sizes in Chrome */
 		without labels (but with icons) have different sizes in Chrome */
 		vertical-align: middle;
 		vertical-align: middle;
+
+		@mixin ck-dir ltr {
+			text-align: left;
+		}
+
+		@mixin ck-dir rtl {
+			text-align: right;
+		}
 	}
 	}
 }
 }
 
 

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

@@ -5,6 +5,7 @@
 
 
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_disabled.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
 /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
 of the component, floating–point numbers have been used which, for the default font size
 of the component, floating–point numbers have been used which, for the default font size
@@ -15,12 +16,20 @@ of the component, floating–point numbers have been used which, for the default
 	/* 14px at 13px font-size */
 	/* 14px at 13px font-size */
 	--ck-switch-button-toggle-inner-size: 1.0769230769em;
 	--ck-switch-button-toggle-inner-size: 1.0769230769em;
 	--ck-switch-button-toggle-spacing: 1px;
 	--ck-switch-button-toggle-spacing: 1px;
+	--ck-switch-button-translation: 1.3846153847em;
 }
 }
 
 
 .ck.ck-button.ck-switchbutton {
 .ck.ck-button.ck-switchbutton {
 	& .ck-button__label {
 	& .ck-button__label {
-		/* Separate the label from the switch */
-		margin-right: calc(2*var(--ck-spacing-large));
+		@mixin ck-dir ltr {
+			/* Separate the label from the switch */
+			margin-right: calc(2*var(--ck-spacing-large));
+		}
+
+		@mixin ck-dir rtl {
+			/* Separate the label from the switch */
+			margin-left: calc(2*var(--ck-spacing-large));
+		}
 	}
 	}
 
 
 	&.ck-disabled .ck-button__toggle {
 	&.ck-disabled .ck-button__toggle {
@@ -30,8 +39,15 @@ of the component, floating–point numbers have been used which, for the default
 	& .ck-button__toggle {
 	& .ck-button__toggle {
 		@mixin ck-rounded-corners;
 		@mixin ck-rounded-corners;
 
 
-		/* Make sure the toggle is always to the right as far as possible. */
-		margin-left: auto;
+		@mixin ck-dir ltr {
+			/* Make sure the toggle is always to the right as far as possible. */
+			margin-left: auto;
+		}
+
+		@mixin ck-dir rtl {
+			/* Make sure the toggle is always to the left as far as possible. */
+			margin-right: auto;
+		}
 
 
 		/* Gently animate the background color of the toggle switch */
 		/* Gently animate the background color of the toggle switch */
 		transition: background 400ms ease;
 		transition: background 400ms ease;
@@ -83,7 +99,13 @@ of the component, floating–point numbers have been used which, for the default
 			 * 		2*var(--ck-switch-button-toggle-spacing) )
 			 * 		2*var(--ck-switch-button-toggle-spacing) )
 			 * 	)
 			 * 	)
 			 */
 			 */
-			transform: translateX( 1.3846153847em );
+			@mixin ck-dir ltr {
+				transform: translateX( var( --ck-switch-button-translation ) );
+			}
+
+			@mixin ck-dir rtl {
+				transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
+			}
 		}
 		}
 	}
 	}
 }
 }

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

@@ -6,6 +6,7 @@
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_shadow.css";
 @import "../../../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 :root {
 :root {
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
@@ -16,11 +17,25 @@
 	font-size: inherit;
 	font-size: inherit;
 
 
 	& .ck-dropdown__arrow {
 	& .ck-dropdown__arrow {
-		right: var(--ck-spacing-standard);
 		width: var(--ck-dropdown-arrow-size);
 		width: var(--ck-dropdown-arrow-size);
+	}
+
+	@mixin ck-dir ltr {
+		& .ck-dropdown__arrow {
+			right: var(--ck-spacing-standard);
 
 
-		/* A space to accommodate the triangle. */
-		margin-left: var(--ck-spacing-small);
+			/* A space to accommodate the triangle. */
+			margin-left: var(--ck-spacing-small);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& .ck-dropdown__arrow {
+			left: var(--ck-spacing-standard);
+
+			/* A space to accommodate the triangle. */
+			margin-right: var(--ck-spacing-small);
+		}
 	}
 	}
 
 
 	&.ck-disabled .ck-dropdown__arrow {
 	&.ck-disabled .ck-dropdown__arrow {
@@ -28,9 +43,18 @@
 	}
 	}
 
 
 	& .ck-button.ck-dropdown__button {
 	& .ck-button.ck-dropdown__button {
-		&:not(.ck-button_with-text) {
-			/* Make sure dropdowns with just an icon have the right inner spacing */
-			padding-left: var(--ck-spacing-small);
+		@mixin ck-dir ltr {
+			&:not(.ck-button_with-text) {
+				/* Make sure dropdowns with just an icon have the right inner spacing */
+				padding-left: var(--ck-spacing-small);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			&:not(.ck-button_with-text) {
+				/* Make sure dropdowns with just an icon have the right inner spacing */
+				padding-right: var(--ck-spacing-small);
+			}
 		}
 		}
 
 
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */

+ 33 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -11,12 +11,21 @@
 }
 }
 
 
 .ck.ck-splitbutton {
 .ck.ck-splitbutton {
+	/*
+	 * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
+	 */
 	& > .ck-splitbutton__action {
 	& > .ck-splitbutton__action {
-		/* Don't round the first button on the right side */
-		@mixin ck-rounded-corners {
+		@nest [dir="ltr"] & {
+			/* Don't round the action button on the right side */
 			border-top-right-radius: unset;
 			border-top-right-radius: unset;
 			border-bottom-right-radius: unset;
 			border-bottom-right-radius: unset;
 		}
 		}
+
+		@nest [dir="rtl"] & {
+			/* Don't round the action button on the left side */
+			border-top-left-radius: unset;
+			border-bottom-left-radius: unset;
+		}
 	}
 	}
 
 
 	& > .ck-splitbutton__arrow {
 	& > .ck-splitbutton__arrow {
@@ -24,10 +33,18 @@
 		it must get some arbitrary min-width. */
 		it must get some arbitrary min-width. */
 		min-width: unset;
 		min-width: unset;
 
 
-		/* Don't round the arrow button on the right side */
-		@mixin ck-rounded-corners {
-			border-top-left-radius: unset;
-			border-bottom-left-radius: unset;
+		@nest [dir="ltr"] & {
+			/* Don't round the arrow button on the left side */
+			@mixin ck-rounded-corners {
+				border-top-left-radius: unset;
+				border-bottom-left-radius: unset;
+			}
+		}
+
+		@nest [dir="rtl"] & {
+			/* Don't round the arrow button on the right side */
+			border-top-right-radius: unset;
+			border-bottom-right-radius: unset;
 		}
 		}
 
 
 		& svg {
 		& svg {
@@ -45,8 +62,16 @@
 			background: var(--ck-color-split-button-hover-background);
 			background: var(--ck-color-split-button-hover-background);
 		}
 		}
 
 
-		& > .ck-splitbutton__arrow:not(.ck-disabled) {
-			border-left-color: var(--ck-color-split-button-hover-border);
+		@nest [dir="ltr"] & {
+			& > .ck-splitbutton__arrow:not(.ck-disabled) {
+				border-left-color: var(--ck-color-split-button-hover-border);
+			}
+		}
+
+		@nest [dir="rtl"] & {
+			& > .ck-splitbutton__arrow:not(.ck-disabled) {
+				border-right-color: var(--ck-color-split-button-hover-border);
+			}
 		}
 		}
 	}
 	}
 
 

+ 8 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css

@@ -23,6 +23,14 @@
 	padding: 0 var(--ck-spacing-standard);
 	padding: 0 var(--ck-spacing-standard);
 	border: 1px solid transparent;
 	border: 1px solid transparent;
 
 
+	&[dir="ltr"] {
+		text-align: left;
+	}
+
+	&[dir="rtl"] {
+		text-align: right;
+	}
+
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */
 	& > *:first-child {
 	& > *:first-child {
 		margin-top: var(--ck-spacing-large);
 		margin-top: var(--ck-spacing-large);

+ 32 - 15
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -4,6 +4,7 @@
  */
  */
 
 
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-toolbar {
 .ck.ck-toolbar {
 	@mixin ck-rounded-corners;
 	@mixin ck-rounded-corners;
@@ -12,6 +13,37 @@
 	padding: 0 var(--ck-spacing-small);
 	padding: 0 var(--ck-spacing-small);
 	border: 1px solid var(--ck-color-toolbar-border);
 	border: 1px solid var(--ck-color-toolbar-border);
 
 
+	& > .ck-toolbar__items {
+		& > * {
+			/* Make sure items wrapped to the next line have v-spacing */
+			margin-top: var(--ck-spacing-small);
+			margin-bottom: var(--ck-spacing-small);
+		}
+
+		& > * {
+			/* (#11) Separate toolbar items. */
+			margin-right: var(--ck-spacing-small);
+		}
+
+		@mixin ck-dir rtl {
+			& > * {
+				/* (#11) Separate toolbar items. */
+				margin-left: var(--ck-spacing-small);
+				margin-right: 0;
+			}
+
+			& > *:last-child {
+				margin-left: 0;
+			}
+		}
+
+		@mixin ck-dir ltr {
+			& > *:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+
 	&.ck-toolbar_vertical {
 	&.ck-toolbar_vertical {
 		/* Items in a vertical toolbar span the entire width. */
 		/* Items in a vertical toolbar span the entire width. */
 		padding: 0;
 		padding: 0;
@@ -32,21 +64,6 @@
 		}
 		}
 	}
 	}
 
 
-	& > .ck-toolbar__items {
-		&:not(:only-child) {
-			margin-right: var(--ck-spacing-large);
-		}
-
-		& > * {
-			/* (#11) Separate toolbar items. */
-			margin-right: var(--ck-spacing-small);
-		}
-
-		& > *:last-child {
-			margin-right: 0;
-		}
-	}
-
 	& > .ck-toolbar__items > *,
 	& > .ck-toolbar__items > *,
 	& > .ck.ck-toolbar__grouped-dropdown {
 	& > .ck.ck-toolbar__grouped-dropdown {
 		/* Make sure items wrapped to the next line have v-spacing */
 		/* Make sure items wrapped to the next line have v-spacing */

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

@@ -78,7 +78,15 @@
 
 
 	& button::-moz-focus-inner {
 	& button::-moz-focus-inner {
 		/* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
 		/* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
-	    padding: 0;
-	    border: 0
+		padding: 0;
+		border: 0
 	}
 	}
 }
 }
+
+/**
+ * Default UI rules for RTL languages.
+ */
+.ck[dir="rtl"],
+.ck[dir="rtl"] .ck {
+	text-align: right;
+}

+ 6 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -125,6 +125,12 @@
 	}
 	}
 }
 }
 
 
+/* In a RTL environment, align the selection handler to the right side of the widget */
+.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handler .ck-widget__selection-handler {
+	left: auto;
+	right: calc(0px - var(--ck-widget-outline-thickness));
+}
+
 /* Style the widget when it's selected but the editable it belongs to lost focus. */
 /* Style the widget when it's selected but the editable it belongs to lost focus. */
 .ck-editor__editable.ck-blurred .ck-widget {
 .ck-editor__editable.ck-blurred .ck-widget {
 	&.ck-widget_selected,
 	&.ck-widget_selected,