8
0
Prechádzať zdrojové kódy

Merge branch 'master' into t/ckeditor5/1655

Kamil Piechaczek 6 rokov pred
rodič
commit
29603d0cb0
100 zmenil súbory, kde vykonal 4910 pridanie a 85 odobranie
  1. 1 1
      packages/ckeditor5-font/.eslintrc.js
  2. 1 5
      packages/ckeditor5-font/.travis.yml
  3. 13 0
      packages/ckeditor5-font/CHANGELOG.md
  4. 6 1
      packages/ckeditor5-font/README.md
  5. 1 1
      packages/ckeditor5-font/docs/_snippets/features/build-font-source.js
  6. 3 0
      packages/ckeditor5-font/docs/_snippets/features/custom-font-color-and-background-color-options.html
  7. 209 0
      packages/ckeditor5-font/docs/_snippets/features/custom-font-color-and-background-color-options.js
  8. 1 1
      packages/ckeditor5-font/docs/_snippets/features/custom-font-family-options.js
  9. 1 1
      packages/ckeditor5-font/docs/_snippets/features/custom-font-size-named-options.js
  10. 1 1
      packages/ckeditor5-font/docs/_snippets/features/custom-font-size-numeric-options.js
  11. 8 0
      packages/ckeditor5-font/docs/_snippets/features/font.html
  12. 12 2
      packages/ckeditor5-font/docs/_snippets/features/font.js
  13. 5 2
      packages/ckeditor5-font/docs/api/font.md
  14. 142 1
      packages/ckeditor5-font/docs/features/font.md
  15. 19 1
      packages/ckeditor5-font/lang/contexts.json
  16. 72 0
      packages/ckeditor5-font/lang/translations/ar.po
  17. 72 0
      packages/ckeditor5-font/lang/translations/az.po
  18. 72 0
      packages/ckeditor5-font/lang/translations/ca.po
  19. 72 0
      packages/ckeditor5-font/lang/translations/cs.po
  20. 72 0
      packages/ckeditor5-font/lang/translations/de.po
  21. 72 0
      packages/ckeditor5-font/lang/translations/en-au.po
  22. 72 0
      packages/ckeditor5-font/lang/translations/en.po
  23. 72 0
      packages/ckeditor5-font/lang/translations/es.po
  24. 72 0
      packages/ckeditor5-font/lang/translations/et.po
  25. 72 0
      packages/ckeditor5-font/lang/translations/fa.po
  26. 72 0
      packages/ckeditor5-font/lang/translations/fr.po
  27. 72 0
      packages/ckeditor5-font/lang/translations/gl.po
  28. 72 0
      packages/ckeditor5-font/lang/translations/he.po
  29. 72 0
      packages/ckeditor5-font/lang/translations/hr.po
  30. 72 0
      packages/ckeditor5-font/lang/translations/hu.po
  31. 72 0
      packages/ckeditor5-font/lang/translations/id.po
  32. 72 0
      packages/ckeditor5-font/lang/translations/it.po
  33. 72 0
      packages/ckeditor5-font/lang/translations/ku.po
  34. 72 0
      packages/ckeditor5-font/lang/translations/nb.po
  35. 72 0
      packages/ckeditor5-font/lang/translations/ne.po
  36. 72 0
      packages/ckeditor5-font/lang/translations/nl.po
  37. 72 0
      packages/ckeditor5-font/lang/translations/no.po
  38. 72 0
      packages/ckeditor5-font/lang/translations/pl.po
  39. 72 0
      packages/ckeditor5-font/lang/translations/pt-br.po
  40. 72 0
      packages/ckeditor5-font/lang/translations/pt.po
  41. 72 0
      packages/ckeditor5-font/lang/translations/ru.po
  42. 72 0
      packages/ckeditor5-font/lang/translations/sk.po
  43. 72 0
      packages/ckeditor5-font/lang/translations/sq.po
  44. 78 6
      packages/ckeditor5-font/lang/translations/sr-latn.po
  45. 77 5
      packages/ckeditor5-font/lang/translations/sr.po
  46. 72 0
      packages/ckeditor5-font/lang/translations/sv.po
  47. 72 0
      packages/ckeditor5-font/lang/translations/tr.po
  48. 72 0
      packages/ckeditor5-font/lang/translations/uk.po
  49. 72 0
      packages/ckeditor5-font/lang/translations/zh-cn.po
  50. 8 8
      packages/ckeditor5-font/package.json
  51. 6 2
      packages/ckeditor5-font/src/font.js
  52. 142 0
      packages/ckeditor5-font/src/fontbackgroundcolor.js
  53. 31 0
      packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorcommand.js
  54. 123 0
      packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js
  55. 40 0
      packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js
  56. 141 0
      packages/ckeditor5-font/src/fontcolor.js
  57. 30 0
      packages/ckeditor5-font/src/fontcolor/fontcolorcommand.js
  58. 123 0
      packages/ckeditor5-font/src/fontcolor/fontcolorediting.js
  59. 40 0
      packages/ckeditor5-font/src/fontcolor/fontcolorui.js
  60. 1 1
      packages/ckeditor5-font/src/fontcommand.js
  61. 1 1
      packages/ckeditor5-font/src/fontfamily.js
  62. 3 2
      packages/ckeditor5-font/src/fontfamily/fontfamilycommand.js
  63. 3 4
      packages/ckeditor5-font/src/fontfamily/fontfamilyediting.js
  64. 6 5
      packages/ckeditor5-font/src/fontfamily/fontfamilyui.js
  65. 1 1
      packages/ckeditor5-font/src/fontfamily/utils.js
  66. 1 1
      packages/ckeditor5-font/src/fontsize.js
  67. 3 2
      packages/ckeditor5-font/src/fontsize/fontsizecommand.js
  68. 3 4
      packages/ckeditor5-font/src/fontsize/fontsizeediting.js
  69. 7 6
      packages/ckeditor5-font/src/fontsize/fontsizeui.js
  70. 1 1
      packages/ckeditor5-font/src/fontsize/utils.js
  71. 196 0
      packages/ckeditor5-font/src/ui/colortableview.js
  72. 123 0
      packages/ckeditor5-font/src/ui/colorui.js
  73. 173 1
      packages/ckeditor5-font/src/utils.js
  74. 5 3
      packages/ckeditor5-font/tests/font.js
  75. 18 0
      packages/ckeditor5-font/tests/fontbackgroundcolor.js
  76. 34 0
      packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorcommand.js
  77. 263 0
      packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcoloreditng.js
  78. 49 0
      packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js
  79. 18 0
      packages/ckeditor5-font/tests/fontcolor.js
  80. 34 0
      packages/ckeditor5-font/tests/fontcolor/fontcolorcommand.js
  81. 259 0
      packages/ckeditor5-font/tests/fontcolor/fontcolorediting.js
  82. 49 0
      packages/ckeditor5-font/tests/fontcolor/fontcolorui.js
  83. 1 1
      packages/ckeditor5-font/tests/fontcommand.js
  84. 1 1
      packages/ckeditor5-font/tests/fontfamily.js
  85. 1 1
      packages/ckeditor5-font/tests/fontfamily/fontfamilycommand.js
  86. 7 1
      packages/ckeditor5-font/tests/fontfamily/fontfamilyediting.js
  87. 1 1
      packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js
  88. 1 1
      packages/ckeditor5-font/tests/fontfamily/utils.js
  89. 1 1
      packages/ckeditor5-font/tests/fontsize.js
  90. 1 1
      packages/ckeditor5-font/tests/fontsize/fontsizecommand.js
  91. 7 1
      packages/ckeditor5-font/tests/fontsize/fontsizeediting.js
  92. 1 1
      packages/ckeditor5-font/tests/fontsize/fontsizeui.js
  93. 1 1
      packages/ckeditor5-font/tests/fontsize/integration.js
  94. 1 1
      packages/ckeditor5-font/tests/fontsize/utils.js
  95. 12 0
      packages/ckeditor5-font/tests/manual/font-color.html
  96. 40 0
      packages/ckeditor5-font/tests/manual/font-color.js
  97. 14 0
      packages/ckeditor5-font/tests/manual/font-color.md
  98. 1 1
      packages/ckeditor5-font/tests/manual/font-family.js
  99. 1 1
      packages/ckeditor5-font/tests/manual/font-size-numeric.js
  100. 1 1
      packages/ckeditor5-font/tests/manual/font-size-presets.js

+ 1 - 1
packages/ckeditor5-font/.eslintrc.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* eslint-env node */
 /* eslint-env node */

+ 1 - 5
packages/ckeditor5-font/.travis.yml

@@ -1,12 +1,8 @@
 sudo: required
 sudo: required
 dist: trusty
 dist: trusty
 addons:
 addons:
+  chrome: stable
   firefox: latest
   firefox: latest
-  apt:
-    sources:
-    - google-chrome
-    packages:
-    - google-chrome-stable
 language: node_js
 language: node_js
 node_js:
 node_js:
 - '8'
 - '8'

+ 13 - 0
packages/ckeditor5-font/CHANGELOG.md

@@ -1,6 +1,19 @@
 Changelog
 Changelog
 =========
 =========
 
 
+## [11.1.0](https://github.com/ckeditor/ckeditor5-font/compare/v11.0.0...v11.1.0) (2019-04-10)
+
+### Features
+
+* Introduced font color and font background color features. Closes [ckeditor/ckeditor5#1457](https://github.com/ckeditor/ckeditor5/issues/1457). ([c456b2a](https://github.com/ckeditor/ckeditor5-font/commit/c456b2a))
+* Marked font size and font family as a formatting attribute using the `AttributeProperties#isFormatting` property. Closes [ckeditor/ckeditor5#1664](https://github.com/ckeditor/ckeditor5/issues/1664). ([d9f0a51](https://github.com/ckeditor/ckeditor5-font/commit/d9f0a51))
+
+### Other changes
+
+* Optimized icons. ([47ca23f](https://github.com/ckeditor/ckeditor5-font/commit/47ca23f))
+* Updated translations. ([6f3332f](https://github.com/ckeditor/ckeditor5-font/commit/6f3332f)) ([f756b70](https://github.com/ckeditor/ckeditor5-font/commit/f756b70))
+
+
 ## [11.0.0](https://github.com/ckeditor/ckeditor5-font/compare/v10.0.4...v11.0.0) (2019-02-28)
 ## [11.0.0](https://github.com/ckeditor/ckeditor5-font/compare/v10.0.4...v11.0.0) (2019-02-28)
 
 
 ### Other changes
 ### Other changes

+ 6 - 1
packages/ckeditor5-font/README.md

@@ -10,7 +10,12 @@ CKEditor 5 font feature
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-font/status.svg)](https://david-dm.org/ckeditor/ckeditor5-font)
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-font/status.svg)](https://david-dm.org/ckeditor/ckeditor5-font)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-font/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-font?type=dev)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-font/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-font?type=dev)
 
 
-This package implements font size and font family support for CKEditor 5.
+This package implements support for the following CKEditor 5 features:
+
+* font size,
+* font family,
+* font color,
+* font background color.
 
 
 ## Demo
 ## Demo
 
 

+ 1 - 1
packages/ckeditor5-font/docs/_snippets/features/build-font-source.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* globals window */
 /* globals window */

+ 3 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-color-and-background-color-options.html

@@ -0,0 +1,3 @@
+<div id="snippet-custom-font-color-and-background-color-options">
+	<p><span style="color:yellow;background-color:hsl(0,0%,0%);">Text</span> in this <span style="color:white;background-color:hsl(0,100%,50%);">sample</span> <span style="color:aqua;background-color:hsl(240,100%,50%);">has</span> <span style="color:lime;background-color:hsl(300,100%,20%);">m</span><span style="color:lime;background-color:hsl(300,100%,30%);">u</span><span style="color:lime;background-color:hsl(300,100%,40%);">l</span><span style="background-color:hsl(300,100%,50%);">t</span><span style="background-color:hsl(300,100%,60%);">i</span><span style="background-color:hsl(300,100%,70%);">p</span><span style="background-color:hsl(300,100%,80%);">l</span><span style="background-color:hsl(300,100%,90%);">e</span> <span style="color:purple;">font colors</span> and <span style="background-color:hsl(120,100%,90%);">font background</span> <span style="color:red;background-color:hsl(0,0%,62.50%);">colors</span>.</p>
+</div>

+ 209 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-color-and-background-color-options.js

@@ -0,0 +1,209 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-font-color-and-background-color-options' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'heading', '|', 'fontColor', 'fontBackgroundColor', 'bulletedList', 'numberedList', 'undo', 'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		fontBackgroundColor: {
+			colors: [
+				'hsl(0,0%,0%)',
+				'hsl(0,0%,12.5%)',
+				'hsl(0,0%,25%)',
+				'hsl(0,0%,37.5%)',
+				'hsl(0,0%,50%)',
+				'hsl(0,0%,62.50%)',
+				'hsl(0,0%,75%)',
+				'hsl(0,0%,87.5%)',
+				{
+					color: 'hsl(0,0%,100%)',
+					hasBorder: true
+				},
+				'hsl(0,100%,10%)',
+				'hsl(0,100%,20%)',
+				'hsl(0,100%,30%)',
+				'hsl(0,100%,40%)',
+				'hsl(0,100%,50%)',
+				'hsl(0,100%,60%)',
+				'hsl(0,100%,70%)',
+				'hsl(0,100%,80%)',
+				{
+					color: 'hsl(0,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(30,100%,10%)',
+				'hsl(30,100%,20%)',
+				'hsl(30,100%,30%)',
+				'hsl(30,100%,40%)',
+				'hsl(30,100%,50%)',
+				'hsl(30,100%,60%)',
+				'hsl(30,100%,70%)',
+				'hsl(30,100%,80%)',
+				{
+					color: 'hsl(30,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(60,100%,10%)',
+				'hsl(60,100%,20%)',
+				'hsl(60,100%,30%)',
+				'hsl(60,100%,40%)',
+				'hsl(60,100%,50%)',
+				'hsl(60,100%,60%)',
+				'hsl(60,100%,70%)',
+				'hsl(60,100%,80%)',
+				{
+					color: 'hsl(60,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(90,100%,10%)',
+				'hsl(90,100%,20%)',
+				'hsl(90,100%,30%)',
+				'hsl(90,100%,40%)',
+				'hsl(90,100%,50%)',
+				'hsl(90,100%,60%)',
+				'hsl(90,100%,70%)',
+				'hsl(90,100%,80%)',
+				{
+					color: 'hsl(90,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(120,100%,10%)',
+				'hsl(120,100%,20%)',
+				'hsl(120,100%,30%)',
+				'hsl(120,100%,40%)',
+				'hsl(120,100%,50%)',
+				'hsl(120,100%,60%)',
+				'hsl(120,100%,70%)',
+				'hsl(120,100%,80%)',
+				{
+					color: 'hsl(120,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(150,100%,10%)',
+				'hsl(150,100%,20%)',
+				'hsl(150,100%,30%)',
+				'hsl(150,100%,40%)',
+				'hsl(150,100%,50%)',
+				'hsl(150,100%,60%)',
+				'hsl(150,100%,70%)',
+				'hsl(150,100%,80%)',
+				{
+					color: 'hsl(150,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(180,100%,10%)',
+				'hsl(180,100%,20%)',
+				'hsl(180,100%,30%)',
+				'hsl(180,100%,40%)',
+				'hsl(180,100%,50%)',
+				'hsl(180,100%,60%)',
+				'hsl(180,100%,70%)',
+				'hsl(180,100%,80%)',
+				{
+					color: 'hsl(180,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(210,100%,10%)',
+				'hsl(210,100%,20%)',
+				'hsl(210,100%,30%)',
+				'hsl(210,100%,40%)',
+				'hsl(210,100%,50%)',
+				'hsl(210,100%,60%)',
+				'hsl(210,100%,70%)',
+				'hsl(210,100%,80%)',
+				{
+					color: 'hsl(210,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(240,100%,10%)',
+				'hsl(240,100%,20%)',
+				'hsl(240,100%,30%)',
+				'hsl(240,100%,40%)',
+				'hsl(240,100%,50%)',
+				'hsl(240,100%,60%)',
+				'hsl(240,100%,70%)',
+				'hsl(240,100%,80%)',
+				{
+					color: 'hsl(240,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(270,100%,10%)',
+				'hsl(270,100%,20%)',
+				'hsl(270,100%,30%)',
+				'hsl(270,100%,40%)',
+				'hsl(270,100%,50%)',
+				'hsl(270,100%,60%)',
+				'hsl(270,100%,70%)',
+				'hsl(270,100%,80%)',
+				{
+					color: 'hsl(270,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(300,100%,10%)',
+				'hsl(300,100%,20%)',
+				'hsl(300,100%,30%)',
+				'hsl(300,100%,40%)',
+				'hsl(300,100%,50%)',
+				'hsl(300,100%,60%)',
+				'hsl(300,100%,70%)',
+				'hsl(300,100%,80%)',
+				{
+					color: 'hsl(300,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(330,100%,10%)',
+				'hsl(330,100%,20%)',
+				'hsl(330,100%,30%)',
+				'hsl(330,100%,40%)',
+				'hsl(330,100%,50%)',
+				'hsl(330,100%,60%)',
+				'hsl(330,100%,70%)',
+				'hsl(330,100%,80%)',
+				{
+					color: 'hsl(330,100%,90%)',
+					hasBorder: true
+				},
+			],
+			columns: 9
+		},
+		fontColor: {
+			colors: [
+				'black',
+				'gray',
+				'silver',
+				{
+					color: 'white',
+					hasBorder: true
+				},
+				'maroon',
+				'red',
+				'purple',
+				'fuchsia',
+				'green',
+				'lime',
+				'olive',
+				'yellow',
+				'navy',
+				'blue',
+				'teal',
+				'aqua'
+			],
+			columns: 4
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 1 - 1
packages/ckeditor5-font/docs/_snippets/features/custom-font-family-options.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';

+ 1 - 1
packages/ckeditor5-font/docs/_snippets/features/custom-font-size-named-options.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* globals ClassicEditor, console, window, document */
 /* globals ClassicEditor, console, window, document */

+ 1 - 1
packages/ckeditor5-font/docs/_snippets/features/custom-font-size-numeric-options.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* globals ClassicEditor, console, window, document */
 /* globals ClassicEditor, console, window, document */

+ 8 - 0
packages/ckeditor5-font/docs/_snippets/features/font.html

@@ -15,4 +15,12 @@
 		<span style="font-family: 'Courier New', Courier, monospace;">This text has the "Courier New, Courier, monospace" family set.</span>
 		<span style="font-family: 'Courier New', Courier, monospace;">This text has the "Courier New, Courier, monospace" family set.</span>
 	</p>
 	</p>
 
 
+	<p>
+		<span style="color:hsl(90,75%,60%);background-color:hsl(240,75%,60%)">This text has light green color and blue background.</span>
+	</p>
+
+	<p>
+		<span style="color:hsl(0,0%,100%);background-color:hsl(0,0%,0%)">This text has white color and black background.</span>
+	</p>
+
 </div>
 </div>

+ 12 - 2
packages/ckeditor5-font/docs/_snippets/features/font.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* globals ClassicEditor, console, window, document */
 /* globals ClassicEditor, console, window, document */
@@ -12,7 +12,17 @@ ClassicEditor
 		cloudServices: CS_CONFIG,
 		cloudServices: CS_CONFIG,
 		toolbar: {
 		toolbar: {
 			items: [
 			items: [
-				'heading', '|', 'fontSize', 'fontFamily', '|', 'bulletedList', 'numberedList', 'undo', 'redo'
+				'heading',
+				'|',
+				'fontSize',
+				'fontFamily',
+				'fontColor',
+				'fontBackgroundColor',
+				'|',
+				'bulletedList',
+				'numberedList',
+				'undo',
+				'redo'
 			],
 			],
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 		}

+ 5 - 2
packages/ckeditor5-font/docs/api/font.md

@@ -14,8 +14,11 @@ Check out the {@link features/font#demo demo in the Font feature} guide.
 
 
 ## Documentation
 ## Documentation
 
 
-See the {@link features/font Font feature} guide
-and {@link module:font/fontfamily~FontFamily} and {@link module:font/fontsize~FontSize} plugins documentation.
+See the {@link features/font Font feature} guide and plugins documentation:
+- {@link module:font/fontfamily~FontFamily}.
+- {@link module:font/fontsize~FontSize}.
+- {@link module:font/fontcolor~FontColor}.
+- {@link module:font/fontbackgroundcolor~FontBackgroundColor}.
 
 
 ## Installation
 ## Installation
 
 

+ 142 - 1
packages/ckeditor5-font/docs/features/font.md

@@ -8,6 +8,8 @@ category: features
 The {@link module:font/font~Font} plugin enables the following features in the editor:
 The {@link module:font/font~Font} plugin enables the following features in the editor:
 * {@link module:font/fontfamily~FontFamily} &ndash; Allows to change the font family by applying inline `<span>` elements with a `font-family` in the `style` attribute.
 * {@link module:font/fontfamily~FontFamily} &ndash; Allows to change the font family by applying inline `<span>` elements with a `font-family` in the `style` attribute.
 * {@link module:font/fontsize~FontSize} &ndash; Allows to control the font size by applying inline `<span>` elements that either have a CSS class or a `font-size` in the `style` attribute.
 * {@link module:font/fontsize~FontSize} &ndash; Allows to control the font size by applying inline `<span>` elements that either have a CSS class or a `font-size` in the `style` attribute.
+* {@link module:font/fontcolor~FontColor} &ndash; Allows to control the font color by applying inline `<span>` elements with a `color` in the `style` attribute.
+* {@link module:font/fontbackgroundcolor~FontBackgroundColor} &ndash; Allows to control the font background color by applying inline `<span>` elements with a `background-color` in the `style` attribute.
 
 
 ## Demo
 ## Demo
 
 
@@ -145,6 +147,111 @@ ClassicEditor
 
 
 {@snippet features/custom-font-size-numeric-options}
 {@snippet features/custom-font-size-numeric-options}
 
 
+## Configuring font color and font background color features
+
+Both font color and font background color features are configurable and share the same configuration format.
+
+<info-box info>
+	Please note that {@link module:font/fontcolor~FontColor font color} and {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} are separate plugins. They must be enabled and configured individually.
+</info-box>
+
+Check out the editor below with both features customized using the editor configuration:
+
+{@snippet features/custom-font-color-and-background-color-options}
+
+### Specifying the available colors
+
+It is possible to configure which colors are available in the color dropdown. Use the {@link module:font/fontcolor~FontColorConfig#colors `fontColor.colors`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors `fontBackgroundColor.colors`} configuration options to do so.
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		fontColor: {
+			colors: [
+				{
+					color: 'hsl(0, 0%, 0%)',
+					label: 'Black'
+				},
+				{
+					color: 'hsl(0, 0%, 30%)',
+					label: 'Dim grey'
+				},
+				{
+					color: 'hsl(0, 0%, 60%)',
+					label: 'Grey'
+				},
+				{
+					color: 'hsl(0, 0%, 90%)',
+					label: 'Light grey'
+				},
+				{
+					color: 'hsl(0, 0%, 100%)',
+					label: 'White',
+					hasBorder: true
+				},
+
+				// ...
+			]
+		},
+		fontBackgroundColor: {
+			colors: [
+				{
+					color: 'hsl(0, 75%, 60%)',
+					label: 'Red'
+				},
+				{
+					color: 'hsl(30, 75%, 60%)',
+					label: 'Orange'
+				},
+				{
+					color: 'hsl(60, 75%, 60%)',
+					label: 'Yellow'
+				},
+				{
+					color: 'hsl(90, 75%, 60%)',
+					label: 'Light green'
+				},
+				{
+					color: 'hsl(120, 75%, 60%)',
+					label: 'Green'
+				},
+
+				// ...
+			]
+		},
+		toolbar: [
+			'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
+		]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+### Changing the geometry of the color grid
+
+It is also possible to configure in how many columns the colors in the grid are displayed. Use {@link module:font/fontcolor~FontColorConfig#columns `fontColor.columns`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `fontBackgroundColor.columns`} to do so.
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		fontColor: {
+			columns: 3,
+
+			// ...
+		},
+		fontBackgroundColor: {
+			columns: 6,
+
+			// ...
+		},
+		toolbar: [
+			'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
+		]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
 ## Installation
 ## Installation
 
 
 To add this feature to your editor, install the [`@ckeditor/ckeditor5-font`](https://www.npmjs.com/package/@ckeditor/ckeditor5-font) package:
 To add this feature to your editor, install the [`@ckeditor/ckeditor5-font`](https://www.npmjs.com/package/@ckeditor/ckeditor5-font) package:
@@ -161,7 +268,7 @@ import Font from '@ckeditor/ckeditor5-font/src/font';
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ Font, ... ],
 		plugins: [ Font, ... ],
-		toolbar: [ 'fontSize', 'fontFamily', ... ]
+		toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', ... ]
 	} )
 	} )
 	.then( ... )
 	.then( ... )
 	.catch( ... );
 	.catch( ... );
@@ -256,6 +363,40 @@ The {@link module:font/fontsize~FontSize} plugin registers the following compone
 	editor.execute( 'fontSize' );
 	editor.execute( 'fontSize' );
 	```
 	```
 
 
+The {@link module:font/fontcolor~FontColor} plugin registers the following components:
+
+* The `'fontColor'` dropdown,
+* The {@link module:font/fontcolor/fontcolorcommand~FontColorCommand `'fontColor'`} command.
+
+	You can change the font color of the current selection by executing the command with a desired value:
+
+	```js
+	editor.execute( 'fontColor', { value: 'rgb(30, 188, 97)' } );
+	```
+
+	Passing an empty value will remove the font color from the selection:
+
+	```js
+	editor.execute( 'fontColor' );
+	```
+
+The {@link module:font/fontbackgroundcolor~FontBackgroundColor} plugin registers the following components:
+
+* The `'fontBackgroundColor'` dropdown,
+* The {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand `'fontBackgroundColor'`} command.
+
+	You can change the font background color of the current selection by executing the command with a desired value:
+
+	```js
+	editor.execute( 'fontBackgroundColor', { value: 'rgb(30, 188, 97)' } );
+	```
+
+	Passing an empty value will remove the font background color from the selection:
+
+	```js
+	editor.execute( 'fontBackgroundColor' );
+	```
+
 <info-box>
 <info-box>
 	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
 	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
 </info-box>
 </info-box>

+ 19 - 1
packages/ckeditor5-font/lang/contexts.json

@@ -5,5 +5,23 @@
 	"Big": "Dropdown option label for the 'big' font size preset.",
 	"Big": "Dropdown option label for the 'big' font size preset.",
 	"Huge": "Dropdown option label for the 'huge' font size preset.",
 	"Huge": "Dropdown option label for the 'huge' font size preset.",
 	"Font Family": "Tooltip for the font family dropdown.",
 	"Font Family": "Tooltip for the font family dropdown.",
-	"Default": "Dropdown option label for the default font family."
+	"Default": "Dropdown option label for the default font family.",
+	"Font Color": "Label of a button that allows selecting a font color.",
+	"Font Background Color": "Label of a button that allows selecting a font background color.",
+	"Remove color": "Label or a button that removes the color from the text (font color and background).",
+	"Black": "Label of a button that applies a black text color (font color and background)",
+	"Dim grey": "Label of a button that applies a dim grey text color (font color and background)",
+	"Grey": "Label of a button that applies a grey text color (font color and background)",
+	"Light grey": "Label of a button that applies a light grey text color (font color and background)",
+	"White": "Label of a button that applies a white text color (font color and background)",
+	"Red": "Label of a button that applies a red text color (font color and background)",
+	"Orange": "Label of a button that applies a orange text color (font color and background)",
+	"Yellow": "Label of a button that applies a yellow text color (font color and background)",
+	"Light green": "Label of a button that applies a light green text color (font color and background)",
+	"Green": "Label of a button that applies a green text color (font color and background)",
+	"Aquamarine": "Label of a button that applies a aquamarine text color (font color and background)",
+	"Turquoise": "Label of a button that applies a turquoise text color (font color and background)",
+	"Light blue": "Label of a button that applies a light blue text color (font color and background)",
+	"Blue": "Label of a button that applies a blue text color (font color and background)",
+	"Purple": "Label of a button that applies a purple text color (font color and background)"
 }
 }

+ 72 - 0
packages/ckeditor5-font/lang/translations/ar.po

@@ -43,3 +43,75 @@ msgstr "نوع الخط"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "افتراضي"
 msgstr "افتراضي"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/az.po

@@ -43,3 +43,75 @@ msgstr "Şrift ailəsi"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Default"
 msgstr "Default"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/ca.po

@@ -43,3 +43,75 @@ msgstr "Font"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Predeterminada"
 msgstr "Predeterminada"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/cs.po

@@ -43,3 +43,75 @@ msgstr "Typ písma"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Výchozí"
 msgstr "Výchozí"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/de.po

@@ -43,3 +43,75 @@ msgstr "Schriftart"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Standard"
 msgstr "Standard"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/en-au.po

@@ -43,3 +43,75 @@ msgstr "Font Family"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Default"
 msgstr "Default"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/en.po

@@ -43,3 +43,75 @@ msgstr "Font Family"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Default"
 msgstr "Default"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr "Font Color"
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr "Font Background Color"
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr "Remove color"
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr "Black"
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr "Dim grey"
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr "Grey"
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr "Light grey"
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr "White"
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr "Red"
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr "Orange"
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr "Yellow"
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr "Light green"
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr "Green"
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr "Aquamarine"
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr "Turquoise"
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr "Light blue"
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr "Blue"
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr "Purple"

+ 72 - 0
packages/ckeditor5-font/lang/translations/es.po

@@ -43,3 +43,75 @@ msgstr "Familia de fuente"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Por defecto"
 msgstr "Por defecto"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/et.po

@@ -43,3 +43,75 @@ msgstr "Kirjastiil"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Vaikeväärtus"
 msgstr "Vaikeväärtus"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/fa.po

@@ -43,3 +43,75 @@ msgstr "خانواده فونت"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "پیش فرض"
 msgstr "پیش فرض"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/fr.po

@@ -43,3 +43,75 @@ msgstr "Police"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Par défaut"
 msgstr "Par défaut"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/gl.po

@@ -43,3 +43,75 @@ msgstr "Familia tipográfica"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Predeterminada"
 msgstr "Predeterminada"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/he.po

@@ -43,3 +43,75 @@ msgstr ""
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "ברירת מחדל"
 msgstr "ברירת מחדל"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/hr.po

@@ -43,3 +43,75 @@ msgstr "Obitelj fonta"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Podrazumijevano"
 msgstr "Podrazumijevano"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/hu.po

@@ -43,3 +43,75 @@ msgstr "Betűtípus"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Alapértelmezett"
 msgstr "Alapértelmezett"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/id.po

@@ -43,3 +43,75 @@ msgstr "Jenis Huruf"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Bawaan"
 msgstr "Bawaan"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/it.po

@@ -43,3 +43,75 @@ msgstr "Tipo di caratteri"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Predefinito"
 msgstr "Predefinito"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/ku.po

@@ -43,3 +43,75 @@ msgstr "فۆنتی خێزانی"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "بنچینە"
 msgstr "بنچینە"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/nb.po

@@ -43,3 +43,75 @@ msgstr "Skrifttype"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Standard"
 msgstr "Standard"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/ne.po

@@ -43,3 +43,75 @@ msgstr "फन्ट परिवार"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "पूर्वनिर्धारित"
 msgstr "पूर्वनिर्धारित"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/nl.po

@@ -43,3 +43,75 @@ msgstr "Lettertype"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Standaard"
 msgstr "Standaard"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/no.po

@@ -43,3 +43,75 @@ msgstr "Skrifttypefamilie"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Standard"
 msgstr "Standard"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/pl.po

@@ -43,3 +43,75 @@ msgstr "Czcionka"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Domyślny"
 msgstr "Domyślny"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/pt-br.po

@@ -43,3 +43,75 @@ msgstr "Fonte"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Padrão"
 msgstr "Padrão"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/pt.po

@@ -43,3 +43,75 @@ msgstr ""
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Padrão"
 msgstr "Padrão"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/ru.po

@@ -43,3 +43,75 @@ msgstr "Семейство шрифтов"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "По умолчанию"
 msgstr "По умолчанию"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/sk.po

@@ -43,3 +43,75 @@ msgstr "Názov písma"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Predvolené"
 msgstr "Predvolené"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/sq.po

@@ -43,3 +43,75 @@ msgstr "Familja e fontit"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Parazgjedhur"
 msgstr "Parazgjedhur"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 78 - 6
packages/ckeditor5-font/lang/translations/sr-latn.po

@@ -12,7 +12,7 @@
 #
 #
 msgid ""
 msgid ""
 msgstr ""
 msgstr ""
-"Language-Team: Serbian (Latin) (https://www.transifex.com/ckeditor/teams/11143/sr%40latin/)\n"
+"Language-Team: Serbian (Latin) (https://www.transifex.com/ckeditor/teams/11143/sr@latin/)\n"
 "Language: sr@latin\n"
 "Language: sr@latin\n"
 "Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
 "Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
 
 
@@ -22,24 +22,96 @@ msgstr "Veličina fonta"
 
 
 msgctxt "Dropdown option label for the 'tiny' font size preset."
 msgctxt "Dropdown option label for the 'tiny' font size preset."
 msgid "Tiny"
 msgid "Tiny"
-msgstr ""
+msgstr "Sitno"
 
 
 msgctxt "Dropdown option label for the 'small' font size preset."
 msgctxt "Dropdown option label for the 'small' font size preset."
 msgid "Small"
 msgid "Small"
-msgstr ""
+msgstr "Malo"
 
 
 msgctxt "Dropdown option label for the 'big' font size preset."
 msgctxt "Dropdown option label for the 'big' font size preset."
 msgid "Big"
 msgid "Big"
-msgstr ""
+msgstr "Veliko"
 
 
 msgctxt "Dropdown option label for the 'huge' font size preset."
 msgctxt "Dropdown option label for the 'huge' font size preset."
 msgid "Huge"
 msgid "Huge"
-msgstr ""
+msgstr "Ogromno"
 
 
 msgctxt "Tooltip for the font family dropdown."
 msgctxt "Tooltip for the font family dropdown."
 msgid "Font Family"
 msgid "Font Family"
-msgstr ""
+msgstr "Font"
 
 
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Оsnovni"
 msgstr "Оsnovni"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 77 - 5
packages/ckeditor5-font/lang/translations/sr.po

@@ -22,24 +22,96 @@ msgstr "Величина фонта"
 
 
 msgctxt "Dropdown option label for the 'tiny' font size preset."
 msgctxt "Dropdown option label for the 'tiny' font size preset."
 msgid "Tiny"
 msgid "Tiny"
-msgstr ""
+msgstr "Ситно"
 
 
 msgctxt "Dropdown option label for the 'small' font size preset."
 msgctxt "Dropdown option label for the 'small' font size preset."
 msgid "Small"
 msgid "Small"
-msgstr ""
+msgstr "Мало"
 
 
 msgctxt "Dropdown option label for the 'big' font size preset."
 msgctxt "Dropdown option label for the 'big' font size preset."
 msgid "Big"
 msgid "Big"
-msgstr ""
+msgstr "Велико"
 
 
 msgctxt "Dropdown option label for the 'huge' font size preset."
 msgctxt "Dropdown option label for the 'huge' font size preset."
 msgid "Huge"
 msgid "Huge"
-msgstr ""
+msgstr "Огромно"
 
 
 msgctxt "Tooltip for the font family dropdown."
 msgctxt "Tooltip for the font family dropdown."
 msgid "Font Family"
 msgid "Font Family"
-msgstr ""
+msgstr "Фонт"
 
 
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Основни"
 msgstr "Основни"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/sv.po

@@ -43,3 +43,75 @@ msgstr "Typsnitt"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Standard"
 msgstr "Standard"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/tr.po

@@ -43,3 +43,75 @@ msgstr "Yazı Tipi Ailesi"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "Varsayılan"
 msgstr "Varsayılan"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/uk.po

@@ -43,3 +43,75 @@ msgstr "Сімейство шрифтів"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "За замовчуванням"
 msgstr "За замовчуванням"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 72 - 0
packages/ckeditor5-font/lang/translations/zh-cn.po

@@ -43,3 +43,75 @@ msgstr "字体"
 msgctxt "Dropdown option label for the default font family."
 msgctxt "Dropdown option label for the default font family."
 msgid "Default"
 msgid "Default"
 msgstr "默认"
 msgstr "默认"
+
+msgctxt "Label of a button that allows selecting a font color."
+msgid "Font Color"
+msgstr ""
+
+msgctxt "Label of a button that allows selecting a font background color."
+msgid "Font Background Color"
+msgstr ""
+
+msgctxt "Label or a button that removes the color from the text (font color and background)."
+msgid "Remove color"
+msgstr ""
+
+msgctxt "Label of a button that applies a black text color (font color and background)"
+msgid "Black"
+msgstr ""
+
+msgctxt "Label of a button that applies a dim grey text color (font color and background)"
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey text color (font color and background)"
+msgid "Grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a light grey text color (font color and background)"
+msgid "Light grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a white text color (font color and background)"
+msgid "White"
+msgstr ""
+
+msgctxt "Label of a button that applies a red text color (font color and background)"
+msgid "Red"
+msgstr ""
+
+msgctxt "Label of a button that applies a orange text color (font color and background)"
+msgid "Orange"
+msgstr ""
+
+msgctxt "Label of a button that applies a yellow text color (font color and background)"
+msgid "Yellow"
+msgstr ""
+
+msgctxt "Label of a button that applies a light green text color (font color and background)"
+msgid "Light green"
+msgstr ""
+
+msgctxt "Label of a button that applies a green text color (font color and background)"
+msgid "Green"
+msgstr ""
+
+msgctxt "Label of a button that applies a aquamarine text color (font color and background)"
+msgid "Aquamarine"
+msgstr ""
+
+msgctxt "Label of a button that applies a turquoise text color (font color and background)"
+msgid "Turquoise"
+msgstr ""
+
+msgctxt "Label of a button that applies a light blue text color (font color and background)"
+msgid "Light blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a blue text color (font color and background)"
+msgid "Blue"
+msgstr ""
+
+msgctxt "Label of a button that applies a purple text color (font color and background)"
+msgid "Purple"
+msgstr ""

+ 8 - 8
packages/ckeditor5-font/package.json

@@ -1,6 +1,6 @@
 {
 {
   "name": "@ckeditor/ckeditor5-font",
   "name": "@ckeditor/ckeditor5-font",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "description": "Font feature for CKEditor 5.",
   "description": "Font feature for CKEditor 5.",
   "keywords": [
   "keywords": [
     "ckeditor",
     "ckeditor",
@@ -10,15 +10,15 @@
     "ckeditor5-plugin"
     "ckeditor5-plugin"
   ],
   ],
   "dependencies": {
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.0.0",
-    "@ckeditor/ckeditor5-ui": "^12.0.0",
-    "@ckeditor/ckeditor5-utils": "^12.0.0"
+    "@ckeditor/ckeditor5-core": "^12.1.0",
+    "@ckeditor/ckeditor5-ui": "^12.1.0",
+    "@ckeditor/ckeditor5-utils": "^12.1.0"
   },
   },
   "devDependencies": {
   "devDependencies": {
-    "@ckeditor/ckeditor5-editor-classic": "^12.0.0",
-    "@ckeditor/ckeditor5-engine": "^13.0.0",
-    "@ckeditor/ckeditor5-highlight": "^11.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.0",
+    "@ckeditor/ckeditor5-engine": "^13.1.0",
+    "@ckeditor/ckeditor5-highlight": "^11.0.1",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.1",
     "eslint": "^5.5.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^1.0.11",
     "eslint-config-ckeditor5": "^1.0.11",
     "husky": "^1.3.1",
     "husky": "^1.3.1",

+ 6 - 2
packages/ckeditor5-font/src/font.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**
@@ -11,12 +11,16 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 
 import FontFamily from './fontfamily';
 import FontFamily from './fontfamily';
 import FontSize from './fontsize';
 import FontSize from './fontsize';
+import FontColor from './fontcolor';
+import FontBackgroundColor from './fontbackgroundcolor';
 
 
 /**
 /**
  * A plugin that enables a set of text styling features:
  * A plugin that enables a set of text styling features:
  *
  *
  * * {@link module:font/fontsize~FontSize},
  * * {@link module:font/fontsize~FontSize},
  * * {@link module:font/fontfamily~FontFamily}.
  * * {@link module:font/fontfamily~FontFamily}.
+ * * {@link module:font/fontcolor~FontColor},
+ * * {@link module:font/fontbackgroundcolor~FontBackgroundColor}.
  *
  *
  * For a detailed overview, check the {@glink features/font Font feature} documentation
  * For a detailed overview, check the {@glink features/font Font feature} documentation
  * and the {@glink api/font package page}.
  * and the {@glink api/font package page}.
@@ -28,7 +32,7 @@ export default class Font extends Plugin {
 	 * @inheritDoc
 	 * @inheritDoc
 	 */
 	 */
 	static get requires() {
 	static get requires() {
-		return [ FontFamily, FontSize ];
+		return [ FontFamily, FontSize, FontColor, FontBackgroundColor ];
 	}
 	}
 
 
 	/**
 	/**

+ 142 - 0
packages/ckeditor5-font/src/fontbackgroundcolor.js

@@ -0,0 +1,142 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/fontbackgroundcolor
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import FontBackgroundColorEditing from './fontbackgroundcolor/fontbackgroundcolorediting';
+import FontBackgroundColorUI from './fontbackgroundcolor/fontbackgroundcolorui';
+
+/**
+ * The font background color plugin.
+ *
+ * For a detailed overview, check the {@glink features/font font feature} documentation
+ * and the {@glink api/font package page}.
+ *
+ * This is a "glue" plugin which loads
+ * the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} and
+ * {@link module:font/fontbackgroundcolor/fontbackgroundcolorui~FontBackgroundColorUI} features in the editor.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FontBackgroundColor extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ FontBackgroundColorEditing, FontBackgroundColorUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FontBackgroundColor';
+	}
+}
+
+/**
+ * The configuration of the font background color feature.
+ * This option is used by the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} feature.
+ *
+ *		ClassicEditor
+ *			.create( {
+ *				fontBackgroundColor: ... // Font background color feature configuration.
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface module:font/fontbackgroundcolor~FontBackgroundColorConfig
+ */
+
+/**
+ * Available font background colors defined as an array of strings or objects.
+ *
+ * The default value registers the following colors:
+ *
+ *		const fontBackgroundColorConfig = {
+ *			colors: [
+ *				{
+ *					color: 'hsl(0, 0%, 0%)',
+ *					label: 'Black'
+ *				},
+ *				{
+ *					color: 'hsl(0, 0%, 30%)',
+ *					label: 'Dim grey'
+ *				},
+ *				{
+ *					color: 'hsl(0, 0%, 60%)',
+ *					label: 'Grey'
+ *				},
+ *				{
+ *					color: 'hsl(0, 0%, 90%)',
+ *					label: 'Light grey'
+ *				},
+ *				{
+ *					color: 'hsl(0, 0%, 100%)',
+ *					label: 'White',
+ *					hasBorder: true
+ *				},
+ *				{
+ *					color: 'hsl(0, 75%, 60%)',
+ *					label: 'Red'
+ *				},
+ *				{
+ *					color: 'hsl(30, 75%, 60%)',
+ *					label: 'Orange'
+ *				},
+ *				{
+ *					color: 'hsl(60, 75%, 60%)',
+ *					label: 'Yellow'
+ *				},
+ *				{
+ *					color: 'hsl(90, 75%, 60%)',
+ *					label: 'Light green'
+ *				},
+ *				{
+ *					color: 'hsl(120, 75%, 60%)',
+ *					label: 'Green'
+ *				},
+ *				{
+ *					color: 'hsl(150, 75%, 60%)',
+ *					label: 'Aquamarine'
+ *				},
+ *				{
+ *					color: 'hsl(180, 75%, 60%)',
+ *					label: 'Turquoise'
+ *				},
+ *				{
+ *					color: 'hsl(210, 75%, 60%)',
+ *					label: 'Light blue'
+ *				},
+ *				{
+ *					color: 'hsl(240, 75%, 60%)',
+ *					label: 'Blue'
+ *				},
+ *				{
+ *					color: 'hsl(270, 75%, 60%)',
+ *					label: 'Purple'
+ *				}
+ *			]
+ *		};
+ *
+ * *Note*: The colors are displayed in the `'fontBackgroundColor'` dropdown.
+ *
+ * @member {Array.<String|Object>} module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors
+ */
+
+/**
+ * Represents the amount of columns in the dropdown. The default value is:
+ *
+ *		const fontBackgroundColorConfig = {
+ *			columns: 5
+ *		}
+ *
+ * @member {Number} module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns
+ */

+ 31 - 0
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorcommand.js

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/fontbackgroundcolor/fontbackgroundcolorcommand
+ */
+
+import FontCommand from '../fontcommand';
+import { FONT_BACKGROUND_COLOR } from '../utils';
+
+/**
+ * The font background color command. It's used by the
+ * {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing}
+ * to apply the font background color.
+ *
+ *		editor.execute( 'fontBackgroundColor', { value: 'rgb(250, 20, 20)' } );
+ *
+ * **Note**: Executing the command with the `null` value removes the attribute from the model.
+ *
+ * @extends module:font/fontcommand~FontCommand
+ */
+export default class FontBackgroundColorCommand extends FontCommand {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor, FONT_BACKGROUND_COLOR );
+	}
+}

+ 123 - 0
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -0,0 +1,123 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/fontbackgroundcolor/fontbackgroundcolorediting
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import FontBackgroundColorCommand from './fontbackgroundcolorcommand';
+import { FONT_BACKGROUND_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils';
+
+/**
+ * The font background color editing feature.
+ *
+ * It introduces the {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand command} and
+ * the `fontBackgroundColor` attribute in the {@link module:engine/model/model~Model model} which renders
+ * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="background-color: ...">`),
+ * depending on the {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig configuration}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FontBackgroundColorEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( FONT_BACKGROUND_COLOR, {
+			colors: [
+				{
+					color: 'hsl(0, 0%, 0%)',
+					label: 'Black'
+				},
+				{
+					color: 'hsl(0, 0%, 30%)',
+					label: 'Dim grey'
+				},
+				{
+					color: 'hsl(0, 0%, 60%)',
+					label: 'Grey'
+				},
+				{
+					color: 'hsl(0, 0%, 90%)',
+					label: 'Light grey'
+				},
+				{
+					color: 'hsl(0, 0%, 100%)',
+					label: 'White',
+					hasBorder: true
+				},
+				{
+					color: 'hsl(0, 75%, 60%)',
+					label: 'Red'
+				},
+				{
+					color: 'hsl(30, 75%, 60%)',
+					label: 'Orange'
+				},
+				{
+					color: 'hsl(60, 75%, 60%)',
+					label: 'Yellow'
+				},
+				{
+					color: 'hsl(90, 75%, 60%)',
+					label: 'Light green'
+				},
+				{
+					color: 'hsl(120, 75%, 60%)',
+					label: 'Green'
+				},
+				{
+					color: 'hsl(150, 75%, 60%)',
+					label: 'Aquamarine'
+				},
+				{
+					color: 'hsl(180, 75%, 60%)',
+					label: 'Turquoise'
+				},
+				{
+					color: 'hsl(210, 75%, 60%)',
+					label: 'Light blue'
+				},
+				{
+					color: 'hsl(240, 75%, 60%)',
+					label: 'Blue'
+				},
+				{
+					color: 'hsl(270, 75%, 60%)',
+					label: 'Purple'
+				}
+			],
+			columns: 5
+		} );
+
+		editor.conversion.for( 'upcast' ).elementToAttribute( {
+			view: {
+				name: 'span',
+				styles: {
+					'background-color': /[\s\S]+/
+				}
+			},
+			model: {
+				key: FONT_BACKGROUND_COLOR,
+				value: renderUpcastAttribute( 'background-color' )
+			}
+		} );
+
+		editor.conversion.for( 'downcast' ).attributeToElement( {
+			model: FONT_BACKGROUND_COLOR,
+			view: renderDowncastElement( 'background-color' )
+		} );
+
+		editor.commands.add( FONT_BACKGROUND_COLOR, new FontBackgroundColorCommand( editor ) );
+
+		// Allow fontBackgroundColor attribute on text nodes.
+		editor.model.schema.extend( '$text', { allowAttributes: FONT_BACKGROUND_COLOR } );
+
+		editor.model.schema.setAttributeProperties( FONT_BACKGROUND_COLOR, { isFormatting: true } );
+	}
+}

+ 40 - 0
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/fontbackgroundcolor/fontbackgroundcolorui
+ */
+
+import ColorUI from '../ui/colorui';
+import { FONT_BACKGROUND_COLOR } from '../utils';
+import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
+
+/**
+ * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FontBackgroundColorUI extends ColorUI {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		const t = editor.locale.t;
+
+		super( editor, {
+			commandName: FONT_BACKGROUND_COLOR,
+			componentName: FONT_BACKGROUND_COLOR,
+			icon: fontBackgroundColorIcon,
+			dropdownLabel: t( 'Font Background Color' )
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FontBackgroundColorUI';
+	}
+}

+ 141 - 0
packages/ckeditor5-font/src/fontcolor.js

@@ -0,0 +1,141 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/fontcolor
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import FontColorEditing from './fontcolor/fontcolorediting';
+import FontColorUI from './fontcolor/fontcolorui';
+
+/**
+ * The font color plugin.
+ *
+ * For a detailed overview, check the {@glink features/font font feature} documentation
+ * and the {@glink api/font package page}.
+ *
+ * This is a "glue" plugin which loads the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} and
+ * {@link module:font/fontcolor/fontcolorui~FontColorUI} features in the editor.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FontColor extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ FontColorEditing, FontColorUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FontColor';
+	}
+}
+
+/**
+ * The configuration of the font color feature.
+ * This option is used by the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} feature.
+ *
+ *		ClassicEditor
+ *			.create( {
+ *				fontColor: ... // Font color feature configuration.
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface module:font/fontcolor~FontColorConfig
+ */
+
+/**
+ * Available font colors defined as an array of strings or objects.
+ *
+ * The default value registers the following colors:
+ *
+ *		const fontColorConfig = {
+ *			colors: [
+ *				{
+ *					color: 'hsl(0, 0%, 0%)',
+ *					label: 'Black'
+ *				},
+ *				{
+ *					color: 'hsl(0, 0%, 30%)',
+ *					label: 'Dim grey'
+ *				},
+ *				{
+ *					color: 'hsl(0, 0%, 60%)',
+ *					label: 'Grey'
+ *				},
+ *				{
+ *					color: 'hsl(0, 0%, 90%)',
+ *					label: 'Light grey'
+ *				},
+ *				{
+ *					color: 'hsl(0, 0%, 100%)',
+ *					label: 'White',
+ *					hasBorder: true
+ *				},
+ *				{
+ *					color: 'hsl(0, 75%, 60%)',
+ *					label: 'Red'
+ *				},
+ *				{
+ *					color: 'hsl(30, 75%, 60%)',
+ *					label: 'Orange'
+ *				},
+ *				{
+ *					color: 'hsl(60, 75%, 60%)',
+ *					label: 'Yellow'
+ *				},
+ *				{
+ *					color: 'hsl(90, 75%, 60%)',
+ *					label: 'Light green'
+ *				},
+ *				{
+ *					color: 'hsl(120, 75%, 60%)',
+ *					label: 'Green'
+ *				},
+ *				{
+ *					color: 'hsl(150, 75%, 60%)',
+ *					label: 'Aquamarine'
+ *				},
+ *				{
+ *					color: 'hsl(180, 75%, 60%)',
+ *					label: 'Turquoise'
+ *				},
+ *				{
+ *					color: 'hsl(210, 75%, 60%)',
+ *					label: 'Light blue'
+ *				},
+ *				{
+ *					color: 'hsl(240, 75%, 60%)',
+ *					label: 'Blue'
+ *				},
+ *				{
+ *					color: 'hsl(270, 75%, 60%)',
+ *					label: 'Purple'
+ *				}
+ *			]
+ *		};
+ *
+ * *Note*: The colors are displayed in the `'fontColor'` dropdown.
+ *
+ * @member {Array.<String|Object>} module:font/fontcolor~FontColorConfig#colors
+ */
+
+/**
+ * Represents the amount of columns in the dropdown. The default value is:
+ *
+ *		const fontColorConfig = {
+ *			columns: 5
+ *		}
+ *
+ * @member {Number} module:font/fontcolor~FontColorConfig#columns
+ */

+ 30 - 0
packages/ckeditor5-font/src/fontcolor/fontcolorcommand.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/fontcolor/fontcolorcommand
+ */
+
+import FontCommand from '../fontcommand';
+import { FONT_COLOR } from '../utils';
+
+/**
+ * The font color command. It's used by the {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
+ * to apply the font color.
+ *
+ *		editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
+ *
+ * **Note**: Executing the command with the `null` value removes the attribute from the model.
+ *
+ * @extends module:font/fontcommand~FontCommand
+ */
+export default class FontColorCommand extends FontCommand {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor, FONT_COLOR );
+	}
+}

+ 123 - 0
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -0,0 +1,123 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/fontcolor/fontcolorediting
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import FontColorCommand from './fontcolorcommand';
+import { FONT_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils';
+
+/**
+ * The font color editing feature.
+ *
+ * It introduces the {@link module:font/fontcolor/fontcolorcommand~FontColorCommand command} and
+ * the `fontColor` attribute in the {@link module:engine/model/model~Model model} which renders
+ * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="color: ...">`),
+ * depending on the {@link module:font/fontcolor~FontColorConfig configuration}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FontColorEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( FONT_COLOR, {
+			colors: [
+				{
+					color: 'hsl(0, 0%, 0%)',
+					label: 'Black'
+				},
+				{
+					color: 'hsl(0, 0%, 30%)',
+					label: 'Dim grey'
+				},
+				{
+					color: 'hsl(0, 0%, 60%)',
+					label: 'Grey'
+				},
+				{
+					color: 'hsl(0, 0%, 90%)',
+					label: 'Light grey'
+				},
+				{
+					color: 'hsl(0, 0%, 100%)',
+					label: 'White',
+					hasBorder: true
+				},
+				{
+					color: 'hsl(0, 75%, 60%)',
+					label: 'Red'
+				},
+				{
+					color: 'hsl(30, 75%, 60%)',
+					label: 'Orange'
+				},
+				{
+					color: 'hsl(60, 75%, 60%)',
+					label: 'Yellow'
+				},
+				{
+					color: 'hsl(90, 75%, 60%)',
+					label: 'Light green'
+				},
+				{
+					color: 'hsl(120, 75%, 60%)',
+					label: 'Green'
+				},
+				{
+					color: 'hsl(150, 75%, 60%)',
+					label: 'Aquamarine'
+				},
+				{
+					color: 'hsl(180, 75%, 60%)',
+					label: 'Turquoise'
+				},
+				{
+					color: 'hsl(210, 75%, 60%)',
+					label: 'Light blue'
+				},
+				{
+					color: 'hsl(240, 75%, 60%)',
+					label: 'Blue'
+				},
+				{
+					color: 'hsl(270, 75%, 60%)',
+					label: 'Purple'
+				}
+			],
+			columns: 5
+		} );
+
+		editor.conversion.for( 'upcast' ).elementToAttribute( {
+			view: {
+				name: 'span',
+				styles: {
+					'color': /[\s\S]+/
+				}
+			},
+			model: {
+				key: FONT_COLOR,
+				value: renderUpcastAttribute( 'color' )
+			}
+		} );
+
+		editor.conversion.for( 'downcast' ).attributeToElement( {
+			model: FONT_COLOR,
+			view: renderDowncastElement( 'color' )
+		} );
+
+		editor.commands.add( FONT_COLOR, new FontColorCommand( editor ) );
+
+		// Allow fontColor attribute on text nodes.
+		editor.model.schema.extend( '$text', { allowAttributes: FONT_COLOR } );
+
+		editor.model.schema.setAttributeProperties( FONT_COLOR, { isFormatting: true } );
+	}
+}

+ 40 - 0
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/fontcolor/fontcolorui
+ */
+
+import ColorUI from '../ui/colorui';
+import { FONT_COLOR } from '../utils';
+import fontColorIcon from '../../theme/icons/font-color.svg';
+
+/**
+ * The font color UI plugin. It introduces the `'fontColor'` dropdown.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FontColorUI extends ColorUI {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		const t = editor.locale.t;
+
+		super( editor, {
+			commandName: FONT_COLOR,
+			componentName: FONT_COLOR,
+			icon: fontColorIcon,
+			dropdownLabel: t( 'Font Color' )
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FontColorUI';
+	}
+}

+ 1 - 1
packages/ckeditor5-font/src/fontcommand.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**

+ 1 - 1
packages/ckeditor5-font/src/fontfamily.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**

+ 3 - 2
packages/ckeditor5-font/src/fontfamily/fontfamilycommand.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**
@@ -8,6 +8,7 @@
  */
  */
 
 
 import FontCommand from '../fontcommand';
 import FontCommand from '../fontcommand';
+import { FONT_FAMILY } from '../utils';
 
 
 /**
 /**
  * The font family command. It is used by {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing}
  * The font family command. It is used by {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing}
@@ -24,6 +25,6 @@ export default class FontFamilyCommand extends FontCommand {
 	 * @inheritDoc
 	 * @inheritDoc
 	 */
 	 */
 	constructor( editor ) {
 	constructor( editor ) {
-		super( editor, 'fontFamily' );
+		super( editor, FONT_FAMILY );
 	}
 	}
 }
 }

+ 3 - 4
packages/ckeditor5-font/src/fontfamily/fontfamilyediting.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**
@@ -11,9 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 
 import FontFamilyCommand from './fontfamilycommand';
 import FontFamilyCommand from './fontfamilycommand';
 import { normalizeOptions } from './utils';
 import { normalizeOptions } from './utils';
-import { buildDefinition } from '../utils';
-
-const FONT_FAMILY = 'fontFamily';
+import { buildDefinition, FONT_FAMILY } from '../utils';
 
 
 /**
 /**
  * The font family editing feature.
  * The font family editing feature.
@@ -56,6 +54,7 @@ export default class FontFamilyEditing extends Plugin {
 
 
 		// Allow fontFamily attribute on text nodes.
 		// Allow fontFamily attribute on text nodes.
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_FAMILY } );
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_FAMILY } );
+		editor.model.schema.setAttributeProperties( FONT_FAMILY, { isFormatting: true } );
 
 
 		// Get configured font family options without "default" option.
 		// Get configured font family options without "default" option.
 		const options = normalizeOptions( editor.config.get( 'fontFamily.options' ) ).filter( item => item.model );
 		const options = normalizeOptions( editor.config.get( 'fontFamily.options' ) ).filter( item => item.model );

+ 6 - 5
packages/ckeditor5-font/src/fontfamily/fontfamilyui.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**
@@ -13,6 +13,7 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
 
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { normalizeOptions } from './utils';
 import { normalizeOptions } from './utils';
+import { FONT_FAMILY } from '../utils';
 import fontFamilyIcon from '../../theme/icons/font-family.svg';
 import fontFamilyIcon from '../../theme/icons/font-family.svg';
 
 
 /**
 /**
@@ -30,10 +31,10 @@ export default class FontFamilyUI extends Plugin {
 
 
 		const options = this._getLocalizedOptions();
 		const options = this._getLocalizedOptions();
 
 
-		const command = editor.commands.get( 'fontFamily' );
+		const command = editor.commands.get( FONT_FAMILY );
 
 
 		// Register UI component.
 		// Register UI component.
-		editor.ui.componentFactory.add( 'fontFamily', locale => {
+		editor.ui.componentFactory.add( FONT_FAMILY, locale => {
 			const dropdownView = createDropdown( locale );
 			const dropdownView = createDropdown( locale );
 			addListToDropdown( dropdownView, _prepareListOptions( options, command ) );
 			addListToDropdown( dropdownView, _prepareListOptions( options, command ) );
 
 
@@ -76,7 +77,7 @@ export default class FontFamilyUI extends Plugin {
 		const editor = this.editor;
 		const editor = this.editor;
 		const t = editor.t;
 		const t = editor.t;
 
 
-		const options = normalizeOptions( editor.config.get( 'fontFamily.options' ) );
+		const options = normalizeOptions( editor.config.get( FONT_FAMILY ).options );
 
 
 		return options.map( option => {
 		return options.map( option => {
 			// The only title to localize is "Default" others are font names.
 			// The only title to localize is "Default" others are font names.
@@ -101,7 +102,7 @@ function _prepareListOptions( options, command ) {
 		const def = {
 		const def = {
 			type: 'button',
 			type: 'button',
 			model: new Model( {
 			model: new Model( {
-				commandName: 'fontFamily',
+				commandName: FONT_FAMILY,
 				commandParam: option.model,
 				commandParam: option.model,
 				label: option.title,
 				label: option.title,
 				withText: true
 				withText: true

+ 1 - 1
packages/ckeditor5-font/src/fontfamily/utils.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**

+ 1 - 1
packages/ckeditor5-font/src/fontsize.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**

+ 3 - 2
packages/ckeditor5-font/src/fontsize/fontsizecommand.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**
@@ -8,6 +8,7 @@
  */
  */
 
 
 import FontCommand from '../fontcommand';
 import FontCommand from '../fontcommand';
+import { FONT_SIZE } from '../utils';
 
 
 /**
 /**
  * The font size command. It is used by {@link module:font/fontsize/fontsizeediting~FontSizeEditing}
  * The font size command. It is used by {@link module:font/fontsize/fontsizeediting~FontSizeEditing}
@@ -24,6 +25,6 @@ export default class FontSizeCommand extends FontCommand {
 	 * @inheritDoc
 	 * @inheritDoc
 	 */
 	 */
 	constructor( editor ) {
 	constructor( editor ) {
-		super( editor, 'fontSize' );
+		super( editor, FONT_SIZE );
 	}
 	}
 }
 }

+ 3 - 4
packages/ckeditor5-font/src/fontsize/fontsizeediting.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**
@@ -11,9 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 
 import FontSizeCommand from './fontsizecommand';
 import FontSizeCommand from './fontsizecommand';
 import { normalizeOptions } from './utils';
 import { normalizeOptions } from './utils';
-import { buildDefinition } from '../utils';
-
-const FONT_SIZE = 'fontSize';
+import { buildDefinition, FONT_SIZE } from '../utils';
 
 
 /**
 /**
  * The font size editing feature.
  * The font size editing feature.
@@ -65,5 +63,6 @@ export default class FontSizeEditing extends Plugin {
 
 
 		// Allow fontSize attribute on text nodes.
 		// Allow fontSize attribute on text nodes.
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_SIZE } );
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_SIZE } );
+		editor.model.schema.setAttributeProperties( FONT_SIZE, { isFormatting: true } );
 	}
 	}
 }
 }

+ 7 - 6
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**
@@ -12,7 +12,8 @@ import Model from '@ckeditor/ckeditor5-ui/src/model';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
 
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { normalizeOptions } from '../fontsize/utils';
+import { normalizeOptions } from './utils';
+import { FONT_SIZE } from '../utils';
 
 
 import fontSizeIcon from '../../theme/icons/font-size.svg';
 import fontSizeIcon from '../../theme/icons/font-size.svg';
 import '../../theme/fontsize.css';
 import '../../theme/fontsize.css';
@@ -32,10 +33,10 @@ export default class FontSizeUI extends Plugin {
 
 
 		const options = this._getLocalizedOptions();
 		const options = this._getLocalizedOptions();
 
 
-		const command = editor.commands.get( 'fontSize' );
+		const command = editor.commands.get( FONT_SIZE );
 
 
 		// Register UI component.
 		// Register UI component.
-		editor.ui.componentFactory.add( 'fontSize', locale => {
+		editor.ui.componentFactory.add( FONT_SIZE, locale => {
 			const dropdownView = createDropdown( locale );
 			const dropdownView = createDropdown( locale );
 			addListToDropdown( dropdownView, _prepareListOptions( options, command ) );
 			addListToDropdown( dropdownView, _prepareListOptions( options, command ) );
 
 
@@ -89,7 +90,7 @@ export default class FontSizeUI extends Plugin {
 			Huge: t( 'Huge' )
 			Huge: t( 'Huge' )
 		};
 		};
 
 
-		const options = normalizeOptions( editor.config.get( 'fontSize.options' ) );
+		const options = normalizeOptions( editor.config.get( FONT_SIZE ).options );
 
 
 		return options.map( option => {
 		return options.map( option => {
 			const title = localizedTitles[ option.title ];
 			const title = localizedTitles[ option.title ];
@@ -115,7 +116,7 @@ function _prepareListOptions( options, command ) {
 		const def = {
 		const def = {
 			type: 'button',
 			type: 'button',
 			model: new Model( {
 			model: new Model( {
-				commandName: 'fontSize',
+				commandName: FONT_SIZE,
 				commandParam: option.model,
 				commandParam: option.model,
 				label: option.title,
 				label: option.title,
 				class: 'ck-fontsize-option',
 				class: 'ck-fontsize-option',

+ 1 - 1
packages/ckeditor5-font/src/fontsize/utils.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**

+ 196 - 0
packages/ckeditor5-font/src/ui/colortableview.js

@@ -0,0 +1,196 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/ui/colortableview
+ */
+
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import ColorGridView from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
+import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
+import '../../theme/fontcolor.css';
+
+/**
+ * Class which represents a view with the following sub–components:
+ *
+ * * a remove color button,
+ * * a {@link module:ui/colorgrid/colorgrid~ColorGridView}.
+ *
+ * @extends module:ui/view~View
+ */
+export default class ColorTableView extends View {
+	/**
+	 * Creates a view to be inserted as child of {@link module:ui/dropdown/dropdownview~DropdownView}.
+	 *
+	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
+	 * @param {Object} config Configuration object
+	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors Array with definitions of colors to
+	 * be displayed in the table.
+	 * @param {Number} config.columns Number of columns in the color grid.
+	 * @param {String} config.removeButtonLabel A label of a button responsible for removing the color.
+	 */
+	constructor( locale, { colors, columns, removeButtonLabel } ) {
+		super( locale );
+
+		/**
+		 * Collection of the children of the table.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.items = this.createCollection();
+
+		/**
+		 * An array with objects representing colors to be displayed in the grid.
+		 *
+		 * @type {Arrray.<module:ui/colorgrid/colorgrid~ColorDefinition>}
+		 */
+		this.colorDefinitions = colors;
+
+		/**
+		 * Tracks information about DOM focus in the list.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
+
+		/**
+		 * Keeps value of the command associated with the table for current selection.
+		 *
+		 * @type {String}
+		 */
+		this.set( 'selectedColor' );
+
+		/**
+		 * A label of the button responsible for removing color attributes.
+		 *
+		 * @type {String}
+		 */
+		this.removeButtonLabel = removeButtonLabel;
+
+		/**
+		 * The number of columns in color grid.
+		 *
+		 * @type {Number}
+		 */
+		this.columns = columns;
+
+		/**
+		 * Helps cycling over focusable {@link #items} in the list.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this._focusCycler = new FocusCycler( {
+			focusables: this.items,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate list items backwards using the arrowup key.
+				focusPrevious: 'arrowup',
+
+				// Navigate list items forwards using the arrowdown key.
+				focusNext: 'arrowdown',
+			}
+		} );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-color-table'
+				]
+			},
+			children: this.items
+		} );
+
+		this.items.add( this.removeColorButton() );
+		this.items.add( this.createStaticColorTable() );
+	}
+
+	/**
+	 * Adds the remove color button as child for current view.
+	 *
+	 * @private
+	 */
+	removeColorButton() {
+		const buttonView = new ButtonView();
+
+		buttonView.set( {
+			withText: true,
+			icon: removeButtonIcon,
+			tooltip: true,
+			label: this.removeButtonLabel
+		} );
+
+		buttonView.class = 'ck-color-table__remove-color';
+		buttonView.on( 'execute', () => {
+			this.fire( 'execute', { value: null } );
+		} );
+
+		return buttonView;
+	}
+
+	/**
+	 * Creates a static color table grid based on editor config.
+	 *
+	 * @private
+	 */
+	createStaticColorTable() {
+		const colorGrid = new ColorGridView( this.locale, {
+			colorDefinitions: this.colorDefinitions,
+			columns: this.columns
+		} );
+
+		colorGrid.delegate( 'execute' ).to( this );
+		colorGrid.bind( 'selectedColor' ).to( this );
+
+		return colorGrid;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		// Items added before rendering should be known to the #focusTracker.
+		for ( const item of this.items ) {
+			this.focusTracker.add( item.element );
+		}
+
+		// Start listening for the keystrokes coming from #element.
+		this.keystrokes.listenTo( this.element );
+	}
+
+	/**
+	 * Focuses the first focusable in {@link #items}.
+	 */
+	focus() {
+		this._focusCycler.focusFirst();
+	}
+
+	/**
+	 * Focuses the last focusable in {@link #items}.
+	 */
+	focusLast() {
+		this._focusCycler.focusLast();
+	}
+}

+ 123 - 0
packages/ckeditor5-font/src/ui/colorui.js

@@ -0,0 +1,123 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module font/ui/colorui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import {
+	addColorTableToDropdown,
+	normalizeColorOptions,
+	getLocalizedColorOptions
+} from '../utils';
+
+/**
+ * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
+ *
+ * It is used to create the `'fontBackgroundColor'` and the `'fontColor'` dropdowns, each hosting
+ * a {@link module:font/ui/colortableview~ColorTableView}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ColorUI extends Plugin {
+	/**
+	 * Creates a plugin which brings dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}
+	 *
+	 * @param {module:core/editor/editor~Editor} editor
+	 * @param {Object} config Configuration object
+	 * @param {String} config.commandName Name of command which will be executed when a color tile is clicked.
+	 * @param {String} config.componentName Name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
+	 * and the configuration scope name in `editor.config`.
+	 * @param {String} config.icon SVG icon used by the dropdown.
+	 * @param {String} config.dropdownLabel Label used by the dropdown.
+	 */
+	constructor( editor, { commandName, icon, componentName, dropdownLabel } ) {
+		super( editor );
+
+		/**
+		 * Name of the command which will be executed when a color tile is clicked.
+		 * @type {String}
+		 */
+		this.commandName = commandName;
+
+		/**
+		 * Name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
+		 * Also the configuration scope name in `editor.config`.
+		 * @type {String}
+		 */
+		this.componentName = componentName;
+
+		/**
+		 * SVG icon used by the dropdown.
+		 * @type {String}
+		 */
+		this.icon = icon;
+
+		/**
+		 * Label used by the dropdown.
+		 * @type {String}
+		 */
+		this.dropdownLabel = dropdownLabel;
+
+		/**
+		 * Number of columns in color grid.
+		 * @type {Number}
+		 */
+		this.columns = editor.config.get( `${ this.componentName }.columns` );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const command = editor.commands.get( this.commandName );
+		const colorsConfig = normalizeColorOptions( editor.config.get( this.componentName ).colors );
+		const localizedColors = getLocalizedColorOptions( editor, colorsConfig );
+
+		// Register UI component.
+		editor.ui.componentFactory.add( this.componentName, locale => {
+			const dropdownView = createDropdown( locale );
+			const colorTableView = addColorTableToDropdown( {
+				dropdownView,
+				colors: localizedColors.map( option => ( {
+					label: option.label,
+					color: option.model,
+					options: {
+						hasBorder: option.hasBorder
+					}
+				} ) ),
+				columns: this.columns,
+				removeButtonLabel: t( 'Remove color' )
+			} );
+
+			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
+
+			dropdownView.buttonView.set( {
+				label: this.dropdownLabel,
+				icon: this.icon,
+				tooltip: true
+			} );
+
+			dropdownView.extendTemplate( {
+				attributes: {
+					class: 'ck-color-ui-dropdown'
+				}
+			} );
+
+			dropdownView.bind( 'isEnabled' ).to( command );
+
+			dropdownView.on( 'execute', ( evt, data ) => {
+				editor.execute( this.commandName, data );
+				editor.editing.view.focus();
+			} );
+
+			return dropdownView;
+		} );
+	}
+}

+ 173 - 1
packages/ckeditor5-font/src/utils.js

@@ -1,12 +1,34 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /**
 /**
  * @module font/utils
  * @module font/utils
  */
  */
 
 
+import ColorTableView from './ui/colortableview';
+
+/**
+ * Name of the font size plugin.
+ */
+export const FONT_SIZE = 'fontSize';
+
+/**
+ * Name of the font family plugin.
+ */
+export const FONT_FAMILY = 'fontFamily';
+
+/**
+ * Name of the font color plugin.
+ */
+export const FONT_COLOR = 'fontColor';
+
+/**
+ * Name of font font background color plugin.
+ */
+export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
+
 /**
 /**
  * Builds a proper {@link module:engine/conversion/conversion~ConverterDefinition converter definition} out of input data.
  * Builds a proper {@link module:engine/conversion/conversion~ConverterDefinition converter definition} out of input data.
  *
  *
@@ -35,3 +57,153 @@ export function buildDefinition( modelAttributeKey, options ) {
 
 
 	return definition;
 	return definition;
 }
 }
+
+/**
+ * A {@link module:font/fontcolor~FontColor font color} and
+ * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
+ * responsible for upcasting data to model.
+ *
+ * **Note**: `styleAttr` should be either `'color'` or `'background-color'`.
+ *
+ * @param {String} styleAttr
+ * @return {String}
+ */
+export function renderUpcastAttribute( styleAttr ) {
+	return viewElement => normalizeColorCode( viewElement.getStyle( styleAttr ) );
+}
+
+/**
+ * A {@link module:font/fontcolor~FontColor font color} and
+ * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
+ * responsible for downcasting a color attribute to a span element.
+ *
+ * **Note**: `styleAttr` should be either `'color'` or `'background-color'`.
+ *
+ * @param {String} styleAttr
+ */
+export function renderDowncastElement( styleAttr ) {
+	return ( modelAttributeValue, viewWriter ) => viewWriter.createAttributeElement( 'span', {
+		style: `${ styleAttr }:${ modelAttributeValue }`
+	} );
+}
+
+/**
+ * Creates a unified color definition object from color configuration options.
+ * The object contains both the information necessary to render the UI and initialize a conversion.
+ *
+ * @param {module:ui/colorgrid/colorgrid~ColorDefinition} options
+ * @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}
+ */
+export function normalizeColorOptions( options ) {
+	return options
+		.map( normalizeSingleColorDefinition )
+		.filter( option => !!option );
+}
+
+/**
+ * Helper which add {@link module:font/ui/colortableview~ColorTableView} to a dropdown with proper initial values.
+ *
+ * @param {Object} config Configuration object
+ * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView Dropdown view to which
+ * a {@link module:font/ui/colortableview~ColorTableView} will be added.
+ * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors An array with definitions
+ * representing colors to be displayed in the color table.
+ * @param {String} config.removeButtonLabel A label of a button responsible for removing the color.
+ * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
+ */
+export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel } ) {
+	const locale = dropdownView.locale;
+	const colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel } );
+
+	dropdownView.colorTableView = colorTableView;
+	dropdownView.panelView.children.add( colorTableView );
+
+	colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
+
+	return colorTableView;
+}
+
+/**
+ * Returns color configuration options as defined in the `editor.config.(fontColor|fontBackgroundColor).colors`
+ * but processed to account for editor localization, i.e. to display {@link module:font/fontcolor~FontColorConfig}
+ * or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig} in the correct language.
+ *
+ * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
+ * when the user configuration is defined because the editor does not exist yet.
+ *
+ * @param {module:core/editor/editor~Editor} editor An editor instance.
+ * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} options
+ * @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}.
+ */
+export function getLocalizedColorOptions( editor, options ) {
+	const t = editor.t;
+	const localizedColorNames = {
+		Black: t( 'Black' ),
+		'Dim grey': t( 'Dim grey' ),
+		Grey: t( 'Grey' ),
+		'Light grey': t( 'Light grey' ),
+		White: t( 'White' ),
+		Red: t( 'Red' ),
+		Orange: t( 'Orange' ),
+		Yellow: t( 'Yellow' ),
+		'Light green': t( 'Light green' ),
+		Green: t( 'Green' ),
+		Aquamarine: t( 'Aquamarine' ),
+		Turquoise: t( 'Turquoise' ),
+		'Light blue': t( 'Light blue' ),
+		Blue: t( 'Blue' ),
+		Purple: t( 'Purple' )
+	};
+
+	return options.map( colorOption => {
+		const label = localizedColorNames[ colorOption.label ];
+
+		if ( label && label != colorOption.label ) {
+			colorOption.label = label;
+		}
+
+		return colorOption;
+	} );
+}
+
+// Fixes color value string
+//
+// @param {String} value
+// @returns {String}
+function normalizeColorCode( value ) {
+	return value.replace( /\s/g, '' );
+}
+
+// Creates normalized color definition from user defined configuration.
+//
+// @param {String|module:ui/colorgrid/colorgrid~ColorDefinition}
+// @returns {module:ui/colorgrid/colorgrid~ColorDefinition}
+function normalizeSingleColorDefinition( color ) {
+	if ( typeof color === 'string' ) {
+		return {
+			model: color.replace( / /g, '' ),
+			label: color,
+			hasBorder: false,
+			view: {
+				name: 'span',
+				styles: {
+					color
+				},
+				priority: 5
+			}
+		};
+	} else {
+		return {
+			model: color.color.replace( / /g, '' ),
+			label: color.label || color.color,
+			hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
+			view: {
+				name: 'span',
+				styles: {
+					color: `${ color.color }`
+				},
+				priority: 5
+			}
+		};
+	}
+}

+ 5 - 3
packages/ckeditor5-font/tests/font.js

@@ -1,15 +1,17 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import Font from './../src/font';
 import Font from './../src/font';
 import FontFamily from './../src/fontfamily';
 import FontFamily from './../src/fontfamily';
 import FontSize from './../src/fontsize';
 import FontSize from './../src/fontsize';
+import FontColor from './../src/fontcolor';
+import FontBackgroundColor from './../src/fontbackgroundcolor';
 
 
 describe( 'Font', () => {
 describe( 'Font', () => {
-	it( 'requires FontSize', () => {
-		expect( Font.requires ).to.deep.equal( [ FontFamily, FontSize ] );
+	it( 'requires FontFamily, FontSize, FontColor, FontBackgroundColor', () => {
+		expect( Font.requires ).to.deep.equal( [ FontFamily, FontSize, FontColor, FontBackgroundColor ] );
 	} );
 	} );
 
 
 	it( 'defines plugin name', () => {
 	it( 'defines plugin name', () => {

+ 18 - 0
packages/ckeditor5-font/tests/fontbackgroundcolor.js

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import FontBackgroundColor from './../src/fontbackgroundcolor';
+import FontBackgroundColorEditing from './../src/fontbackgroundcolor/fontbackgroundcolorediting';
+import FontBackgroundColorUI from '../src/fontbackgroundcolor/fontbackgroundcolorui';
+
+describe( 'FontBackgroundColor', () => {
+	it( 'requires FontBackgroundColorEditing and FontBackgroundColorUI', () => {
+		expect( FontBackgroundColor.requires ).to.deep.equal( [ FontBackgroundColorEditing, FontBackgroundColorUI ] );
+	} );
+
+	it( 'defines plugin name', () => {
+		expect( FontBackgroundColor.pluginName ).to.equal( 'FontBackgroundColor' );
+	} );
+} );

+ 34 - 0
packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorcommand.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import FontBackgroundColorCommand from '../../src/fontbackgroundcolor/fontbackgroundcolorcommand';
+import FontCommand from '../../src/fontcommand';
+import ModelTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/modeltesteditor';
+
+describe( 'FontBackgroundColorCommand', () => {
+	let editor, command;
+
+	beforeEach( () => {
+		return ModelTestEditor.create()
+			.then( newEditor => {
+				editor = newEditor;
+
+				command = new FontBackgroundColorCommand( editor );
+			} );
+	} );
+
+	afterEach( () => {
+		editor.destroy();
+	} );
+
+	it( 'is a FontCommand', () => {
+		expect( FontBackgroundColorCommand.prototype ).to.be.instanceOf( FontCommand );
+		expect( command ).to.be.instanceOf( FontCommand );
+	} );
+
+	it( 'operates on fontBackgroundColor attribute', () => {
+		expect( command ).to.have.property( 'attributeKey', 'fontBackgroundColor' );
+	} );
+} );

+ 263 - 0
packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcoloreditng.js

@@ -0,0 +1,263 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import FontBackgroundColorEditing from './../../src/fontbackgroundcolor/fontbackgroundcolorediting';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
+import {
+	getData as getModelData,
+	setData as setModelData
+} from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+describe( 'FontBackgroundColorEditing', () => {
+	let editor, doc;
+
+	beforeEach( () => VirtualTestEditor
+		.create( {
+			plugins: [ FontBackgroundColorEditing, Paragraph ]
+		} )
+		.then( newEditor => {
+			editor = newEditor;
+
+			doc = editor.document;
+		} )
+	);
+
+	afterEach( () => {
+		editor.destroy();
+	} );
+
+	it( 'should set proper schema rules', () => {
+		expect( editor.model.schema.checkAttribute( [ '$block', '$text' ], 'fontBackgroundColor' ) ).to.be.true;
+		expect( editor.model.schema.checkAttribute( [ '$clipboardHolder', '$text' ], 'fontBackgroundColor' ) ).to.be.true;
+
+		expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontBackgroundColor' ) ).to.be.false;
+	} );
+
+	it( 'has the attribute marked with the isFormatting property', () => {
+		expect( editor.model.schema.getAttributeProperties( 'fontBackgroundColor' ) ).to.deep.equal( {
+			isFormatting: true
+		} );
+	} );
+
+	describe( 'config', () => {
+		describe( 'default value', () => {
+			it( 'should be set', () => {
+				expect( editor.config.get( 'fontBackgroundColor.colors' ) ).to.deep.equal( [
+					{
+						color: 'hsl(0, 0%, 0%)',
+						label: 'Black'
+					},
+					{
+						color: 'hsl(0, 0%, 30%)',
+						label: 'Dim grey'
+					},
+					{
+						color: 'hsl(0, 0%, 60%)',
+						label: 'Grey'
+					},
+					{
+						color: 'hsl(0, 0%, 90%)',
+						label: 'Light grey'
+					},
+					{
+						color: 'hsl(0, 0%, 100%)',
+						label: 'White',
+						hasBorder: true
+					},
+					{
+						color: 'hsl(0, 75%, 60%)',
+						label: 'Red'
+					},
+					{
+						color: 'hsl(30, 75%, 60%)',
+						label: 'Orange'
+					},
+					{
+						color: 'hsl(60, 75%, 60%)',
+						label: 'Yellow'
+					},
+					{
+						color: 'hsl(90, 75%, 60%)',
+						label: 'Light green'
+					},
+					{
+						color: 'hsl(120, 75%, 60%)',
+						label: 'Green'
+					},
+					{
+						color: 'hsl(150, 75%, 60%)',
+						label: 'Aquamarine'
+					},
+					{
+						color: 'hsl(180, 75%, 60%)',
+						label: 'Turquoise'
+					},
+					{
+						color: 'hsl(210, 75%, 60%)',
+						label: 'Light blue'
+					},
+					{
+						color: 'hsl(240, 75%, 60%)',
+						label: 'Blue'
+					},
+					{
+						color: 'hsl(270, 75%, 60%)',
+						label: 'Purple'
+					}
+				] );
+				expect( editor.config.get( 'fontBackgroundColor.columns' ) ).to.equal( 5 );
+			} );
+		} );
+	} );
+
+	describe( 'editing pipeline conversion', () => {
+		beforeEach( () => VirtualTestEditor
+			.create( {
+				plugins: [ FontBackgroundColorEditing, Paragraph ],
+				fontBackgroundColor: {
+					colors: [
+						{
+							label: 'Color1',
+							color: '#000'
+						},
+						{
+							label: 'Color2',
+							color: '#123456'
+						},
+						{
+							label: 'Color3',
+							color: 'rgb( 0, 10, 20 )'
+						},
+						'hsl( 200,100%,50%)',
+						{
+							label: 'Color5 - Light Green',
+							color: 'lightgreen'
+						}
+					]
+				}
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				doc = editor.model;
+			} )
+		);
+
+		describe( 'convert different color version', () => {
+			const tests = [
+				'#000',
+				'green',
+				'rgb( 0, 10, 20 )',
+				'rgba( 20, 30, 50, 0.4)',
+				'hsl( 10, 20%, 30%)',
+				'hsla( 300, 50%, 100%, .3)',
+				'rgb( 20%, 30%, 40% )',
+				'#345678'
+			];
+
+			tests.forEach( test => {
+				it( `should convert fontBackgroundColor attribute: "${ test }" to proper style value.`, () => {
+					setModelData( doc, `<paragraph>fo<$text fontBackgroundColor="${ test }">o b</$text>ar</paragraph>` );
+
+					expect( editor.getData() ).to.equal( `<p>fo<span style="background-color:${ test };">o b</span>ar</p>` );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'data pipeline conversions', () => {
+		beforeEach( () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ FontBackgroundColorEditing, Paragraph ],
+					fontBackgroundColor: {
+						colors: [
+							{
+								label: 'Color1',
+								color: '#000'
+							},
+							{
+								label: 'Color2',
+								color: '#123456'
+							},
+							{
+								label: 'Color3',
+								color: 'rgb( 0, 10, 20 )'
+							},
+							'hsl( 200,100%,50%)',
+							{
+								label: 'Color5 - Light Green',
+								color: 'lightgreen'
+							}
+						]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					doc = editor.model;
+				} );
+		} );
+
+		it( 'should convert from element with defined style when with other styles', () => {
+			const data = '<p>f<span style="font-size: 18px;background-color: rgb(10, 20, 30);">o</span>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontBackgroundColor="rgb(10,20,30)">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>f<span style="background-color:rgb(10,20,30);">o</span>o</p>' );
+		} );
+
+		describe( 'should convert from different color versions', () => {
+			const tests = [
+				'#000',
+				'green',
+				'rgb( 0, 10, 20 )',
+				'rgba( 20, 30, 50, 0.4)',
+				'hsl( 10, 20%, 30%)',
+				'hsla( 300, 50%, 100%, .3)',
+				'rgb( 20%, 30%, 40% )',
+				'#345678'
+			];
+
+			tests.forEach( test => {
+				it( `should convert fontBackgroundColor attribute: "${ test }" to proper style value.`, () => {
+					const data = `<p>f<span style="background-color: ${ test }">o</span>o</p>`;
+					editor.setData( data );
+
+					expect( getModelData( doc ) )
+						.to.equal( `<paragraph>[]f<$text fontBackgroundColor="${ test.replace( / /g, '' ) }">o</$text>o</paragraph>` );
+
+					expect( editor.getData() )
+						.to.equal( `<p>f<span style="background-color:${ test.replace( / /g, '' ) };">o</span>o</p>` );
+				} );
+			} );
+		} );
+
+		it( 'should convert from complex definition', () => {
+			editor.setData(
+				'<p>f<span style="background-color: lightgreen;">o</span>o</p>' +
+				'<p>f<span style="background-color: hsl( 200, 100%, 50% );">o</span>o</p>' +
+				'<p>b<span style="background-color: rgba(1,2,3,.4);">a</span>r</p>' +
+				'<p>b<span style="background-color:#fff;">a</span>z</p>'
+			);
+
+			expect( getModelData( doc ) ).to.equal(
+				'<paragraph>[]f<$text fontBackgroundColor="lightgreen">o</$text>o</paragraph>' +
+				'<paragraph>f<$text fontBackgroundColor="hsl(200,100%,50%)">o</$text>o</paragraph>' +
+				'<paragraph>b<$text fontBackgroundColor="rgba(1,2,3,.4)">a</$text>r</paragraph>' +
+				'<paragraph>b<$text fontBackgroundColor="#fff">a</$text>z</paragraph>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p>f<span style="background-color:lightgreen;">o</span>o</p>' +
+				'<p>f<span style="background-color:hsl(200,100%,50%);">o</span>o</p>' +
+				'<p>b<span style="background-color:rgba(1,2,3,.4);">a</span>r</p>' +
+				'<p>b<span style="background-color:#fff;">a</span>z</p>'
+			);
+		} );
+	} );
+} );

+ 49 - 0
packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document */
+
+import FontBackgroundColorEditing from './../../src/fontbackgroundcolor/fontbackgroundcolorediting';
+import FontBackgroundColorUI from './../../src/fontbackgroundcolor/fontbackgroundcolorui';
+import ColorUI from './../../src/ui/colorui';
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
+
+describe( 'FontBckgroundColorUI', () => {
+	let element, editor;
+
+	beforeEach( () => {
+		element = document.createElement( 'div' );
+		document.body.appendChild( element );
+
+		return ClassicTestEditor
+			.create( element, {
+				plugins: [ FontBackgroundColorEditing, FontBackgroundColorUI ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	afterEach( () => {
+		element.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'is ColorUI', () => {
+		expect( FontBackgroundColorUI.prototype ).to.be.instanceOf( ColorUI );
+	} );
+
+	it( 'has properly set initial values', () => {
+		const fontBackgroundColorUIPlugin = editor.plugins.get( 'FontBackgroundColorUI' );
+
+		expect( fontBackgroundColorUIPlugin.commandName ).to.equal( 'fontBackgroundColor' );
+		expect( fontBackgroundColorUIPlugin.componentName ).to.equal( 'fontBackgroundColor' );
+		expect( fontBackgroundColorUIPlugin.icon ).to.equal( fontBackgroundColorIcon );
+		expect( fontBackgroundColorUIPlugin.dropdownLabel ).to.equal( 'Font Background Color' );
+		expect( fontBackgroundColorUIPlugin.columns ).to.equal( 5 );
+	} );
+} );

+ 18 - 0
packages/ckeditor5-font/tests/fontcolor.js

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import FontColor from './../src/fontcolor';
+import FontColorEditing from './../src/fontcolor/fontcolorediting';
+import FontColorUI from '../src/fontcolor/fontcolorui';
+
+describe( 'FontColor', () => {
+	it( 'requires FontColorEditing and FontColorUI', () => {
+		expect( FontColor.requires ).to.deep.equal( [ FontColorEditing, FontColorUI ] );
+	} );
+
+	it( 'defines plugin name', () => {
+		expect( FontColor.pluginName ).to.equal( 'FontColor' );
+	} );
+} );

+ 34 - 0
packages/ckeditor5-font/tests/fontcolor/fontcolorcommand.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import FontColorCommand from '../../src/fontcolor/fontcolorcommand';
+import FontCommand from '../../src/fontcommand';
+import ModelTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/modeltesteditor';
+
+describe( 'FontColorCommand', () => {
+	let editor, command;
+
+	beforeEach( () => {
+		return ModelTestEditor.create()
+			.then( newEditor => {
+				editor = newEditor;
+
+				command = new FontColorCommand( editor );
+			} );
+	} );
+
+	afterEach( () => {
+		editor.destroy();
+	} );
+
+	it( 'is a FontCommand', () => {
+		expect( FontColorCommand.prototype ).to.be.instanceOf( FontCommand );
+		expect( command ).to.be.instanceOf( FontCommand );
+	} );
+
+	it( 'operates on fontColor attribute', () => {
+		expect( command ).to.have.property( 'attributeKey', 'fontColor' );
+	} );
+} );

+ 259 - 0
packages/ckeditor5-font/tests/fontcolor/fontcolorediting.js

@@ -0,0 +1,259 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import FontColorEditing from './../../src/fontcolor/fontcolorediting';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
+import {
+	getData as getModelData,
+	setData as setModelData
+} from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+describe( 'FontColorEditing', () => {
+	let editor, doc;
+
+	beforeEach( () => VirtualTestEditor
+		.create( {
+			plugins: [ FontColorEditing, Paragraph ]
+		} )
+		.then( newEditor => {
+			editor = newEditor;
+
+			doc = editor.document;
+		} )
+	);
+
+	afterEach( () => {
+		editor.destroy();
+	} );
+
+	it( 'should set proper schema rules', () => {
+		expect( editor.model.schema.checkAttribute( [ '$block', '$text' ], 'fontColor' ) ).to.be.true;
+		expect( editor.model.schema.checkAttribute( [ '$clipboardHolder', '$text' ], 'fontColor' ) ).to.be.true;
+		expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontColor' ) ).to.be.false;
+	} );
+
+	it( 'has the attribute marked with the isFormatting property', () => {
+		expect( editor.model.schema.getAttributeProperties( 'fontColor' ) ).to.deep.equal( {
+			isFormatting: true
+		} );
+	} );
+
+	describe( 'config', () => {
+		describe( 'default value', () => {
+			it( 'should be set', () => {
+				expect( editor.config.get( 'fontColor.colors' ) ).to.deep.equal( [
+					{
+						color: 'hsl(0, 0%, 0%)',
+						label: 'Black'
+					},
+					{
+						color: 'hsl(0, 0%, 30%)',
+						label: 'Dim grey'
+					},
+					{
+						color: 'hsl(0, 0%, 60%)',
+						label: 'Grey'
+					},
+					{
+						color: 'hsl(0, 0%, 90%)',
+						label: 'Light grey'
+					},
+					{
+						color: 'hsl(0, 0%, 100%)',
+						label: 'White',
+						hasBorder: true
+					},
+					{
+						color: 'hsl(0, 75%, 60%)',
+						label: 'Red'
+					},
+					{
+						color: 'hsl(30, 75%, 60%)',
+						label: 'Orange'
+					},
+					{
+						color: 'hsl(60, 75%, 60%)',
+						label: 'Yellow'
+					},
+					{
+						color: 'hsl(90, 75%, 60%)',
+						label: 'Light green'
+					},
+					{
+						color: 'hsl(120, 75%, 60%)',
+						label: 'Green'
+					},
+					{
+						color: 'hsl(150, 75%, 60%)',
+						label: 'Aquamarine'
+					},
+					{
+						color: 'hsl(180, 75%, 60%)',
+						label: 'Turquoise'
+					},
+					{
+						color: 'hsl(210, 75%, 60%)',
+						label: 'Light blue'
+					},
+					{
+						color: 'hsl(240, 75%, 60%)',
+						label: 'Blue'
+					},
+					{
+						color: 'hsl(270, 75%, 60%)',
+						label: 'Purple'
+					}
+				] );
+				expect( editor.config.get( 'fontColor.columns' ) ).to.equal( 5 );
+			} );
+		} );
+	} );
+
+	describe( 'editing pipeline conversion', () => {
+		beforeEach( () => VirtualTestEditor
+			.create( {
+				plugins: [ FontColorEditing, Paragraph ],
+				fontColor: {
+					colors: [
+						{
+							label: 'Color1',
+							color: '#000'
+						},
+						{
+							label: 'Color2',
+							color: '#123456'
+						},
+						{
+							label: 'Color3',
+							color: 'rgb( 0, 10, 20 )'
+						},
+						'hsl( 200,100%,50%)',
+						{
+							label: 'Color5 - Light Green',
+							color: 'lightgreen'
+						}
+					]
+				}
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				doc = editor.model;
+			} )
+		);
+
+		describe( 'convert different color version', () => {
+			const tests = [
+				'#000',
+				'green',
+				'rgb( 0, 10, 20 )',
+				'rgba( 20, 30, 50, 0.4)',
+				'hsl( 10, 20%, 30%)',
+				'hsla( 300, 50%, 100%, .3)',
+				'rgb( 20%, 30%, 40% )',
+				'#345678'
+			];
+			tests.forEach( test => {
+				it( `should convert fontColor attribute: "${ test }" to proper style value.`, () => {
+					setModelData( doc, `<paragraph>fo<$text fontColor="${ test }">o b</$text>ar</paragraph>` );
+
+					expect( editor.getData() ).to.equal( `<p>fo<span style="color:${ test };">o b</span>ar</p>` );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'data pipeline conversions', () => {
+		beforeEach( () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ FontColorEditing, Paragraph ],
+					fontColor: {
+						colors: [
+							{
+								label: 'Color1',
+								color: '#000'
+							},
+							{
+								label: 'Color2',
+								color: '#123456'
+							},
+							{
+								label: 'Color3',
+								color: 'rgb( 0, 10, 20 )'
+							},
+							'hsl( 200,100%,50%)',
+							{
+								label: 'Color5 - Light Green',
+								color: 'lightgreen'
+							}
+						]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					doc = editor.model;
+				} );
+		} );
+
+		it( 'should convert from element with defined style when with other styles', () => {
+			const data = '<p>f<span style="font-size: 18px;color: rgb(10, 20, 30);">o</span>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontColor="rgb(10,20,30)">o</$text>o</paragraph>' );
+			expect( editor.getData() ).to.equal( '<p>f<span style="color:rgb(10,20,30);">o</span>o</p>' );
+		} );
+
+		describe( 'should convert from different color versions', () => {
+			const tests = [
+				'#000',
+				'green',
+				'rgb( 0, 10, 20 )',
+				'rgba( 20, 30, 50, 0.4)',
+				'hsl( 10, 20%, 30%)',
+				'hsla( 300, 50%, 100%, .3)',
+				'rgb( 20%, 30%, 40% )',
+				'#345678'
+			];
+
+			tests.forEach( test => {
+				it( `should convert fontColor attribute: "${ test }" to proper style value.`, () => {
+					const data = `<p>f<span style="color: ${ test }">o</span>o</p>`;
+					editor.setData( data );
+
+					expect( getModelData( doc ) )
+						.to.equal( `<paragraph>[]f<$text fontColor="${ test.replace( / /g, '' ) }">o</$text>o</paragraph>` );
+
+					expect( editor.getData() ).to.equal( `<p>f<span style="color:${ test.replace( / /g, '' ) };">o</span>o</p>` );
+				} );
+			} );
+		} );
+
+		it( 'should convert from complex definition', () => {
+			editor.setData(
+				'<p>f<span style="color: lightgreen;">o</span>o</p>' +
+				'<p>f<span style="color: hsl( 200, 100%, 50% );">o</span>o</p>' +
+				'<p>b<span style="color: rgba(1,2,3,.4);">a</span>r</p>' +
+				'<p>b<span style="color:#fff;">a</span>z</p>'
+			);
+
+			expect( getModelData( doc ) ).to.equal(
+				'<paragraph>[]f<$text fontColor="lightgreen">o</$text>o</paragraph>' +
+				'<paragraph>f<$text fontColor="hsl(200,100%,50%)">o</$text>o</paragraph>' +
+				'<paragraph>b<$text fontColor="rgba(1,2,3,.4)">a</$text>r</paragraph>' +
+				'<paragraph>b<$text fontColor="#fff">a</$text>z</paragraph>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p>f<span style="color:lightgreen;">o</span>o</p>' +
+				'<p>f<span style="color:hsl(200,100%,50%);">o</span>o</p>' +
+				'<p>b<span style="color:rgba(1,2,3,.4);">a</span>r</p>' +
+				'<p>b<span style="color:#fff;">a</span>z</p>'
+			);
+		} );
+	} );
+} );

+ 49 - 0
packages/ckeditor5-font/tests/fontcolor/fontcolorui.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document */
+
+import FontColorEditing from './../../src/fontcolor/fontcolorediting';
+import FontColorUI from './../../src/fontcolor/fontcolorui';
+import ColorUI from './../../src/ui/colorui';
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import fontColorIcon from '../../theme/icons/font-color.svg';
+
+describe( 'FontColorUI', () => {
+	let element, editor;
+
+	beforeEach( () => {
+		element = document.createElement( 'div' );
+		document.body.appendChild( element );
+
+		return ClassicTestEditor
+			.create( element, {
+				plugins: [ FontColorEditing, FontColorUI ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	afterEach( () => {
+		element.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'is ColorUI', () => {
+		expect( FontColorUI.prototype ).to.be.instanceOf( ColorUI );
+	} );
+
+	it( 'has properly set initial values', () => {
+		const fontColorUIPlugin = editor.plugins.get( 'FontColorUI' );
+
+		expect( fontColorUIPlugin.commandName ).to.equal( 'fontColor' );
+		expect( fontColorUIPlugin.componentName ).to.equal( 'fontColor' );
+		expect( fontColorUIPlugin.icon ).to.equal( fontColorIcon );
+		expect( fontColorUIPlugin.dropdownLabel ).to.equal( 'Font Color' );
+		expect( fontColorUIPlugin.columns ).to.equal( 5 );
+	} );
+} );

+ 1 - 1
packages/ckeditor5-font/tests/fontcommand.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import FontCommand from '../src/fontcommand';
 import FontCommand from '../src/fontcommand';

+ 1 - 1
packages/ckeditor5-font/tests/fontfamily.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import FontFamily from './../src/fontfamily';
 import FontFamily from './../src/fontfamily';

+ 1 - 1
packages/ckeditor5-font/tests/fontfamily/fontfamilycommand.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import FontFamilyCommand from '../../src/fontfamily/fontfamilycommand';
 import FontFamilyCommand from '../../src/fontfamily/fontfamilycommand';

+ 7 - 1
packages/ckeditor5-font/tests/fontfamily/fontfamilyediting.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import FontFamilyEditing from './../../src/fontfamily/fontfamilyediting';
 import FontFamilyEditing from './../../src/fontfamily/fontfamilyediting';
@@ -36,6 +36,12 @@ describe( 'FontFamilyEditing', () => {
 		expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontFamily' ) ).to.be.false;
 		expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontFamily' ) ).to.be.false;
 	} );
 	} );
 
 
+	it( 'should be marked with a formatting property', () => {
+		expect( editor.model.schema.getAttributeProperties( 'fontFamily' ) ).to.deep.equal( {
+			isFormatting: true
+		} );
+	} );
+
 	describe( 'config', () => {
 	describe( 'config', () => {
 		describe( 'default value', () => {
 		describe( 'default value', () => {
 			it( 'should be set', () => {
 			it( 'should be set', () => {

+ 1 - 1
packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* global document */
 /* global document */

+ 1 - 1
packages/ckeditor5-font/tests/fontfamily/utils.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import { normalizeOptions } from '../../src/fontfamily/utils';
 import { normalizeOptions } from '../../src/fontfamily/utils';

+ 1 - 1
packages/ckeditor5-font/tests/fontsize.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import FontSize from './../src/fontsize';
 import FontSize from './../src/fontsize';

+ 1 - 1
packages/ckeditor5-font/tests/fontsize/fontsizecommand.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import FontSizeCommand from '../../src/fontsize/fontsizecommand';
 import FontSizeCommand from '../../src/fontsize/fontsizecommand';

+ 7 - 1
packages/ckeditor5-font/tests/fontsize/fontsizeediting.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import FontSizeEditing from './../../src/fontsize/fontsizeediting';
 import FontSizeEditing from './../../src/fontsize/fontsizeediting';
@@ -36,6 +36,12 @@ describe( 'FontSizeEditing', () => {
 		expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontSize' ) ).to.be.false;
 		expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontSize' ) ).to.be.false;
 	} );
 	} );
 
 
+	it( 'should be marked with a formatting property', () => {
+		expect( editor.model.schema.getAttributeProperties( 'fontSize' ) ).to.deep.equal( {
+			isFormatting: true
+		} );
+	} );
+
 	describe( 'config', () => {
 	describe( 'config', () => {
 		describe( 'default value', () => {
 		describe( 'default value', () => {
 			it( 'should be set', () => {
 			it( 'should be set', () => {

+ 1 - 1
packages/ckeditor5-font/tests/fontsize/fontsizeui.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* global document */
 /* global document */

+ 1 - 1
packages/ckeditor5-font/tests/fontsize/integration.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* global document */
 /* global document */

+ 1 - 1
packages/ckeditor5-font/tests/fontsize/utils.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 import { normalizeOptions } from '../../src/fontsize/utils';
 import { normalizeOptions } from '../../src/fontsize/utils';

+ 12 - 0
packages/ckeditor5-font/tests/manual/font-color.html

@@ -0,0 +1,12 @@
+<div id="editor">
+	<p><span>01. no-color; no-color</span></p>
+	<p><span style="color:hsl(0, 0%, 100%);background-color:hsl(0, 0%, 0%);">02. color:hsl(0, 0%, 100%);background-color:hsl(0, 0%, 0%);</span></p>
+	<p><span style="color:hsl(0, 75%, 60%);">03. color:hsl(0, 75%, 60%); no-color;</span></p>
+	<p><span style="background-color:hsl(90, 75%, 60%);">04. no-color; background-color:hsl(90, 75%, 60%);</span></p>
+	<p><span style="color:hsl(30, 75%, 60%);background-color:hsl(0, 0%, 30%);">05. color:hsl(30, 75%, 60%); background-color:hsl(0, 0%, 30%);</span></p>
+	<p><span style="color:#00FFFF;background-color:rgb(255, 0, 0);">06. color:#00FFFF;background-color:rgb(255, 0, 0);</span></p>
+	<p><span style="color:hsla( 0, 0%, 0%, .7);background-color:gold;">07. color:hsla( 0, 0%, 0%, .7); background-color:gold;</span></p>
+	<p><span style="color:rgba( 0, 120, 250, 0.8);background-color:hsla(270, 100%, 50%, 0.3);">08. color:;background-color:hsla(270, 100%, 50%, 0.3);</span></p>
+	<p><span style="color:#ddd;background-color:hsl(150, 75%, 60%);">09. color:#ddd;background-color:hsl(150, 75%, 60%);</span></p>
+	<p><span style="color:hsl(270, 75%, 60%);background-color:#d82;">10. color:hsl(270, 75%, 60%);background-color:#d82;</span></p>
+</div>

+ 40 - 0
packages/ckeditor5-font/tests/manual/font-color.js

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import FontColor from '../../src/fontcolor';
+import FontBackgroundColor from '../../src/fontbackgroundcolor';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [
+			ArticlePluginSet,
+			FontColor,
+			FontBackgroundColor
+		],
+		toolbar: [
+			'heading',
+			'|',
+			'fontColor',
+			'fontBackgroundColor',
+			'bold',
+			'italic',
+			'link',
+			'bulletedList',
+			'numberedList',
+			'blockQuote',
+			'undo',
+			'redo'
+		]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 14 - 0
packages/ckeditor5-font/tests/manual/font-color.md

@@ -0,0 +1,14 @@
+### Loading
+
+The data should be loaded with different text and background colors in the following order:
+
+* Colors 1-5 use the predefined palette,
+* Colors 6-8 use custom CSS colors, not defined in the configuration,
+* Color 9-10 use a mix from the predefined palette and custom ones.
+
+The format in the editor content is: `N. [font color]; [background color]`.
+
+### Testing
+
+- Change the font color and font background color on selected text.
+- Change the font color and font background color across many paragraphs.

+ 1 - 1
packages/ckeditor5-font/tests/manual/font-family.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* globals console, window, document */
 /* globals console, window, document */

+ 1 - 1
packages/ckeditor5-font/tests/manual/font-size-numeric.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* globals console, window, document */
 /* globals console, window, document */

+ 1 - 1
packages/ckeditor5-font/tests/manual/font-size-presets.js

@@ -1,6 +1,6 @@
 /**
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
 /* globals console, window, document */
 /* globals console, window, document */

Niektoré súbory nie sú zobrazené, pretože je v týchto rozdielových dátach zmenené mnoho súborov