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
 =========
 
+## [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)
 
 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 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)

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

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "14.1.1",
+  "version": "14.2.0",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,26 +9,26 @@
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^13.0.2"
+    "@ckeditor/ckeditor5-ui": "^14.0.0"
   },
   "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-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",
@@ -41,7 +41,7 @@
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
   "homepage": "https://ckeditor.com/ckeditor-5",
-  "bugs": "https://github.com/ckeditor/ckeditor5-theme-lark/issues",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
   "repository": {
     "type": "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 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 alignCenter from '@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg';
@@ -118,7 +119,7 @@ const icons = {
 	undo, redo
 };
 
-const toolbar = new ToolbarView();
+const toolbar = new ToolbarView( new Locale() );
 
 for ( const i in icons ) {
 	const button = new ButtonView();

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

@@ -1,5 +1,15 @@
 <head>
 	<style>
+		.test-settings {
+			background: #eee;
+			border: 2px solid #ccc;
+			padding: 1em;
+		}
+
+		.test-settings h2 {
+			margin-top: .3em;
+		}
+
 		.wrappable {
 			white-space: initial;
 			line-height: 3em;
@@ -26,6 +36,15 @@
 	</style>
 </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>
 
 	<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 Model from '@ckeditor/ckeditor5-ui/src/model';
 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 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';
 
+const locale = new Locale();
+
 class TextView extends View {
 	constructor() {
 		super();
@@ -499,7 +502,7 @@ function switchbutton( {
 }
 
 function toolbar( children = [] ) {
-	const toolbar = new ToolbarView();
+	const toolbar = new ToolbarView( locale );
 
 	children.forEach( c => toolbar.items.add( c ) );
 
@@ -513,7 +516,7 @@ function listDropdown( {
 	withText = true,
 	items = new Collection( { idProperty: 'label' } )
 } = {} ) {
-	const dropdown = createDropdown( {} );
+	const dropdown = createDropdown( locale );
 	addListToDropdown( dropdown, items );
 
 	dropdown.buttonView.set( { label, isEnabled, isOn, withText } );
@@ -529,7 +532,7 @@ function toolbarDropdown( {
 	isVertical = true,
 	buttons = []
 } = {} ) {
-	const dropdown = createDropdown( {} );
+	const dropdown = createDropdown( locale );
 
 	addToolbarToDropdown( dropdown, buttons );
 
@@ -547,7 +550,7 @@ function splitButtonDropdown( {
 	isVertical = true,
 	buttons = []
 } = {} ) {
-	const dropdown = createDropdown( {}, SplitButtonView );
+	const dropdown = createDropdown( locale, SplitButtonView );
 
 	addToolbarToDropdown( dropdown, buttons );
 
@@ -575,3 +578,14 @@ function input( {
 
 	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
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
 .ck .ck-button.ck-color-table__remove-color {
 	border-bottom: 1px solid var(--ck-color-base-border);
 	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
 
 	& .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
  */
 
-.ck-content .image {
+.ck.ck-editor__editable .image {
 	/* Showing animation. */
 	&.ck-appear {
 		animation: fadeIn 700ms;
@@ -11,7 +11,7 @@
 }
 
 /* Upload progress bar. */
-.ck .ck-progress-bar {
+.ck.ck-editor__editable .image .ck-progress-bar {
 	height: 2px;
 	width: 0;
 	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/_dir.css";
 
 .ck.ck-text-alternative-form {
 	padding: var(--ck-spacing-standard);
@@ -13,8 +14,16 @@
 		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 {
@@ -33,14 +42,25 @@
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 			border-radius: 0;
 			border: 0;
 			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/mixins/_unselectable.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 @import "../mixins/_focus.css";
 @import "../mixins/_shadow.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@@ -56,8 +57,16 @@
 		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 {
@@ -76,14 +85,25 @@
 		& .ck-button:not(.ck-link-actions__preview) {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 			border-radius: 0;
 			border: 0;
 			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/_dir.css";
 
 .ck.ck-link-form {
 	padding: var(--ck-spacing-standard);
@@ -13,8 +14,16 @@
 		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 {
@@ -33,14 +42,25 @@
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 			border-radius: 0;
 			border: 0;
 			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);
 		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/_dir.css";
 
 .ck.ck-media-form {
 	padding: var(--ck-spacing-standard);
@@ -12,8 +13,16 @@
 		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 {
@@ -37,14 +46,25 @@
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 			border-radius: 0;
 			border: 0;
 			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/_rounded.css";
 @import "../../mixins/_button.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-button,
 a.ck.ck-button {
@@ -71,8 +72,15 @@ a.ck.ck-button {
 		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 
 		& .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
 		without labels (but with icons) have different sizes in Chrome */
 		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/_disabled.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 /* 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
@@ -15,12 +16,20 @@ of the component, floating–point numbers have been used which, for the default
 	/* 14px at 13px font-size */
 	--ck-switch-button-toggle-inner-size: 1.0769230769em;
 	--ck-switch-button-toggle-spacing: 1px;
+	--ck-switch-button-translation: 1.3846153847em;
 }
 
 .ck.ck-button.ck-switchbutton {
 	& .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 {
@@ -30,8 +39,15 @@ of the component, floating–point numbers have been used which, for the default
 	& .ck-button__toggle {
 		@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 */
 		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) )
 			 * 	)
 			 */
-			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/_disabled.css";
 @import "../../../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 :root {
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
@@ -16,11 +17,25 @@
 	font-size: inherit;
 
 	& .ck-dropdown__arrow {
-		right: var(--ck-spacing-standard);
 		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 {
@@ -28,9 +43,18 @@
 	}
 
 	& .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 */

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

@@ -11,12 +11,21 @@
 }
 
 .ck.ck-splitbutton {
+	/*
+	 * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
+	 */
 	& > .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-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 {
@@ -24,10 +33,18 @@
 		it must get some arbitrary min-width. */
 		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 {
@@ -45,8 +62,16 @@
 			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);
 	border: 1px solid transparent;
 
+	&[dir="ltr"] {
+		text-align: left;
+	}
+
+	&[dir="rtl"] {
+		text-align: right;
+	}
+
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */
 	& > *:first-child {
 		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 "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-toolbar {
 	@mixin ck-rounded-corners;
@@ -12,6 +13,37 @@
 	padding: 0 var(--ck-spacing-small);
 	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 {
 		/* Items in a vertical toolbar span the entire width. */
 		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.ck-toolbar__grouped-dropdown {
 		/* 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 {
 		/* 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. */
 .ck-editor__editable.ck-blurred .ck-widget {
 	&.ck-widget_selected,