浏览代码

Merge pull request #13 from ckeditor/t/11

Other: Changed the way of defining highlight option colors to CSS variables. Implemented a default feature style sheet with classes and colors. Closes #11.
Aleksander Nowodzinski 7 年之前
父节点
当前提交
346949fe5e

+ 0 - 27
packages/ckeditor5-highlight/docs/_snippets/features/build-highlight-source.html

@@ -1,27 +0,0 @@
-<style>
-	.marker-yellow {
-		background-color: #fdfd77;
-	}
-
-	.marker-green {
-		background-color: #63f963;
-	}
-
-	.marker-pink {
-		background-color: #fc7999;
-	}
-
-	.marker-blue {
-		background-color: #72cdfd;
-	}
-
-	.pen-red {
-		background-color: transparent;
-		color: #e91313;
-	}
-
-	.pen-green {
-		background-color: transparent;
-		color: #118800;
-	}
-</style>

+ 23 - 0
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-inline.html

@@ -0,0 +1,23 @@
+<style>
+	/* We are not using here :root because of many instances of editor */
+	#snippet-highlight-custom-colors-inline + .marker-green {
+		background-color: rgb(25, 156, 25);
+	}
+	#snippet-highlight-custom-colors-inline + .marker-yellow {
+		background-color: #cac407;
+	}
+	#snippet-highlight-custom-colors-inline + .pen-red {
+		color: hsl(343, 82%, 58%);
+	}
+</style>
+
+<div id="snippet-highlight-custom-colors-inline">
+	<p>
+		An example of highlight colors defined as RGB, HEX or HSL:
+	</p>
+	<ul>
+		<li>the <mark class="marker-green">green one</mark></li>
+		<li>the <mark class="marker-yellow">yellow one</mark></li>
+		<li>the <mark class="pen-red">red one</mark></li>
+	</ul>
+</div>

+ 46 - 0
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-inline.js

@@ -0,0 +1,46 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-highlight-custom-colors-inline' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		highlight: {
+			options: [
+				{
+					model: 'greenMarker',
+					class: 'marker-green',
+					title: 'Green marker',
+					color: 'rgb(25, 156, 25)',
+					type: 'marker'
+				},
+				{
+					model: 'yellowMarker',
+					class: 'marker-yellow',
+					title: 'Yellow marker',
+					color: '#cac407',
+					type: 'marker'
+				},
+				{
+					model: 'redPen',
+					class: 'pen-red',
+					title: 'Red pen',
+					color: 'hsl(343, 82%, 58%)',
+					type: 'pen'
+				}
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 24 - 0
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-variables.html

@@ -0,0 +1,24 @@
+<style>
+	/* We are not using here :root because of many instances of editor */
+	#snippet-highlight-custom-colors-variables + .ck-editor {
+		/* Make green a little darker. */
+		--ck-highlight-marker-green: #199c19;
+
+		/* Make the yellow more "dirty". */
+		--ck-highlight-marker-yellow: #cac407;
+
+		/* Make red more pinkish. */
+		--ck-highlight-pen-red: #ec3e6e;
+	}
+</style>
+
+<div id="snippet-highlight-custom-colors-variables">
+	<p>
+		An example of highlight colors customized using CSS variables:
+	</p>
+	<ul>
+		<li>the <mark class="marker-green">green one</mark></li>
+		<li>the <mark class="marker-yellow">yellow one</mark></li>
+		<li>the <mark class="pen-red">red one</mark></li>
+	</ul>
+</div>

+ 46 - 0
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-variables.js

@@ -0,0 +1,46 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-highlight-custom-colors-variables' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		highlight: {
+			options: [
+				{
+					model: 'greenMarker',
+					class: 'marker-green',
+					title: 'Green marker',
+					color: 'var(--ck-highlight-marker-green)',
+					type: 'marker'
+				},
+				{
+					model: 'yellowMarker',
+					class: 'marker-yellow',
+					title: 'Yellow marker',
+					color: 'var(--ck-highlight-marker-yellow)',
+					type: 'marker'
+				},
+				{
+					model: 'redPen',
+					class: 'pen-red',
+					title: 'Red pen',
+					color: 'var(--ck-highlight-pen-red)',
+					type: 'pen'
+				},
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 2 - 2
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-options.html

@@ -1,5 +1,5 @@
-<div id="snippet-custom-highlight-options">
+<div id="snippet-highlight-custom-options">
 	<p>
-		Here are defined highlighters: <mark class="marker-green">green one</mark> and <mark class="pen-red">red one</mark>.
+		This editor comes with two highlighters: <mark class="marker-green">green one</mark> and <mark class="pen-red">red one</mark>.
 	</p>
 </div>

+ 15 - 3
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-options.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 ClassicEditor
-	.create( document.querySelector( '#snippet-custom-highlight-options' ), {
+	.create( document.querySelector( '#snippet-highlight-custom-options' ), {
 		toolbar: {
 			items: [
 				'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
@@ -14,8 +14,20 @@ ClassicEditor
 		},
 		highlight: {
 			options: [
-				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' },
-				{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
+				{
+					model: 'greenMarker',
+					class: 'marker-green',
+					title: 'Green marker',
+					color: 'var(--ck-highlight-marker-green)',
+					type: 'marker'
+				},
+				{
+					model: 'redPen',
+					class: 'pen-red',
+					title: 'Red pen',
+					color: 'var(--ck-highlight-pen-red)',
+					type: 'pen'
+				},
 			]
 		}
 	} )

+ 1 - 3
packages/ckeditor5-highlight/docs/_snippets/features/highlight-buttons.html

@@ -1,13 +1,11 @@
 <div id="snippet-highlight-buttons">
-	<p>Highlight feature example.</p>
+	<p>The Highlight feature example.</p>
 	<p>
 		Here are some markers:
 	</p>
 	<ul>
-		<li>the <mark class="marker-yellow">yellow</mark> one,</li>
 		<li>the <mark class="marker-pink">pink</mark> one,</li>
 		<li>the <mark class="marker-green">green</mark> one,</li>
-		<li>the <mark class="marker-blue">blue</mark> one</li>
 	</ul>
 	<p>
 		Here are some pens:

+ 1 - 1
packages/ckeditor5-highlight/docs/_snippets/features/highlight.html

@@ -1,5 +1,5 @@
 <div id="snippet-highlight">
-	<p>Highlight feature example.</p>
+	<p>The Highlight feature example.</p>
 	<p>
 		Here are some markers:
 	</p>

+ 93 - 8
packages/ckeditor5-highlight/docs/features/highlight.md

@@ -13,6 +13,8 @@ The {@link module:highlight/highlight~Highlight} feature offers a text marking t
 
 ## Configuring the highlight options
 
+### Dropdown
+
 It is possible to configure which highlight options are supported by the editor.
 You can use the {@link module:highlight/highlight~HighlightConfig#options `highlight.options`} configuration and define your own highlight styles.
 
@@ -27,14 +29,14 @@ ClassicEditor
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: '#63f963',
+					color: 'var(--ck-highlight-marker-green)',
 					type: 'marker'
 				},
 				{
 					model: 'redPen',
 					class: 'pen-red',
 					title: 'Red pen',
-					color: '#e91313',
+					color: 'var(--ck-highlight-pen-red)',
 					type: 'pen'
 				}
 			]
@@ -49,6 +51,8 @@ ClassicEditor
 
 {@snippet features/custom-highlight-options}
 
+### Inline buttons
+
 Instead of using the (default) `highlightDropdown`, the feature also supports a configuration with separate buttons directly in the toolbar:
 
 ```js
@@ -68,6 +72,87 @@ ClassicEditor
 
 {@snippet features/highlight-buttons}
 
+### Colors and styles
+
+<info-box info>
+	See the plugin {@link module:highlight/highlight~HighlightConfig#options options} to learn more about defaults.
+</info-box>
+
+#### Using CSS Variables
+
+The highlight feature is using the power of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) which are defined in the [stylesheet](https://github.com/ckeditor/ckeditor5-highlight/blob/master/theme/highlight.css). Thanks to that, both the UI and the content styles share the same color definitions, which can be easily customized:
+
+```css
+:root {
+	/* Make green a little darker. */
+	--ck-highlight-marker-green: #199c19;
+
+	/* Make the yellow more "dirty". */
+	--ck-highlight-marker-yellow: #cac407;
+
+	/* Make red more pinkish. */
+	--ck-highlight-pen-red: #ec3e6e;
+}
+```
+
+{@snippet features/custom-highlight-colors-variables}
+
+#### Inline color definitions
+
+It is possible to use the inline color values in the `rgba(R, G, B, A)`, `#RRGGBB[AA]` or `hsla(H, S, L, A)` formats instead of CSS variables. To do that, customize the {@link module:highlight/highlight~HighlightConfig#options options} and define the `color` property for each option:
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		highlight: {
+			options: [
+				{
+					model: 'greenMarker',
+					class: 'marker-green',
+					title: 'Green marker',
+					color: 'rgb(25, 156, 25)',
+					type: 'marker'
+				},
+				{
+					model: 'yellowMarker',
+					class: 'marker-yellow',
+					title: 'Yellow marker',
+					color: '#cac407',
+					type: 'marker'
+				},
+				{
+					model: 'redPen',
+					class: 'pen-red',
+					title: 'Red pen',
+					color: 'hsl(343, 82%, 58%)',
+					type: 'pen'
+				}
+			]
+		},
+		toolbar: [
+			'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
+		]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+Then, update the classes in the style sheet so the content corresponds to the UI of the editor. It is recommended for the UI buttons and the actual highlights in the text to share the same colors.
+
+```css
+.marker-green {
+	background-color: rgb(25, 156, 25);
+}
+.marker-yellow {
+	background-color: #cac407;
+}
+.pen-red {
+	color: hsl(343, 82%, 58%);
+}
+```
+
+{@snippet features/custom-highlight-colors-inline}
+
 ## Installation
 
 To add this feature to your editor install the [`@ckeditor/ckeditor5-highlight`](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight) package:
@@ -112,12 +197,12 @@ The {@link module:highlight/highlight~Highlight} plugin registers:
 	The `value` corresponds to the `model` property in configuration object. For the default configuration:
 	```js
 	highlight.options = [
-		{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: '#fdfd77', type: 'marker' },
-		{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' },
-		{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' },
-		{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' },
-		{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
-		{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: '#118800', type: 'pen' }
+		{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-highlight-marker-yellow)', type: 'marker' },
+		{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-highlight-marker-green)', type: 'marker' },
+		{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-highlight-marker-pink)', type: 'marker' },
+		{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-highlight-marker-blue)', type: 'marker' },
+		{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-highlight-pen-red)', type: 'pen' },
+		{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-highlight-pen-green)', type: 'pen' }
 	]
 	```
 

+ 73 - 15
packages/ckeditor5-highlight/src/highlight.js

@@ -45,15 +45,16 @@ export default class Highlight extends Plugin {
  *			model: 'pinkMarker',
  *			class: 'marker-pink',
  *			title: 'Pink Marker',
- *			color: '#fc7999',
+ *			color: 'var(--ck-highlight-marker-pink)',
  *			type: 'marker'
  *		}
  *
  * @typedef {Object} module:highlight/highlight~HighlightOption
  * @property {String} title The user-readable title of the option.
  * @property {String} model The unique attribute value in the model.
- * @property {String} color The color used for the highlighter. It should match the `class` CSS definition.
- * The color is used in the user interface to represent the highlighter.
+ * @property {String} color The CSS var() used for the highlighter. The color is used in the user interface to represent the highlighter.
+ * There is possibility to use default color format like rgb, hex or hsl, but you need to care about color of `<mark>`
+ * by adding CSS classes definition.
  * @property {String} class The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
  * @property {'marker'|'pen'} type The type of highlighter:
  * - `'marker'` – uses the `color` as a `background-color` style,
@@ -87,23 +88,80 @@ export default class Highlight extends Plugin {
  * The available highlighters options. The default value is:
  *
  *		options: [
- *			{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: '#fdfd77', type: 'marker' },
- *			{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' },
- *			{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' },
- *			{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' },
- *			{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
- *			{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: '#118800', type: 'pen' }
+ *			{
+ *				model: 'yellowMarker',
+ *				class: 'marker-yellow',
+ *				title: 'Yellow marker',
+ *				color: 'var(--ck-highlight-marker-yellow)',
+ *				type: 'marker'
+ *			},
+ *			{
+ *				model: 'greenMarker',
+ *				class: 'marker-green',
+ *				title: 'Green marker',
+ *				color: 'var(--ck-highlight-marker-green)',
+ *				type: 'marker'
+ *			},
+ *			{
+ *				model: 'pinkMarker',
+ *				class: 'marker-pink',
+ *				title: 'Pink marker',
+ *				color: 'var(--ck-highlight-marker-pink)',
+ *				type: 'marker'
+ *			},
+ *			{
+ *				model: 'blueMarker',
+ *				class: 'marker-blue',
+ *				title: 'Blue marker',
+ *				color: 'var(--ck-highlight-marker-blue)',
+ *				type: 'marker'
+ *			},
+ *			{
+ *				model: 'redPen',
+ *				class: 'pen-red',
+ *				title: 'Red pen',
+ *				color: 'var(--ck-highlight-pen-red)',
+ *				type: 'pen'
+ *			},
+ *			{
+ *				model: 'greenPen',
+ *				class: 'pen-green',
+ *				title: 'Green pen',
+ *				color: 'var(--ck-highlight-pen-green)',
+ *				type: 'pen'
+ *			}
  *		]
  *
  * There are two types of highlighters available:
  * - `'marker'` - rendered as a `<mark>` element, styled with the `background-color`,
  * - `'pen'` - rendered as a `<mark>` element, styled with the font `color`.
  *
- * **Note**: A style sheet with CSS classes is required for the configuration to work properly.
- * The highlight feature does not provide the actual styles by itself.
+ * **Note**: The highlight feature provides a style sheet with the CSS classes and corresponding colors defined
+ * as CSS variables.
  *
- * **Note**: It is recommended that the `color` value should correspond to the class in the content
- * style sheet. It represents the highlighter in the user interface of the editor.
+ *		:root {
+ *			--ck-highlight-marker-yellow: #fdfd77;
+ *			--ck-highlight-marker-green: #63f963;
+ *			--ck-highlight-marker-pink: #fc7999;
+ *			--ck-highlight-marker-blue: #72cdfd;
+ *			--ck-highlight-pen-red: #e91313;
+ *			--ck-highlight-pen-green: #118800;
+ *		}
+ *
+ *		.marker-yellow { ... }
+ *		.marker-green { ... }
+ *		.marker-pink { ... }
+ *		.marker-blue { ... }
+ *		.pen-red { ... }
+ *		.pen-green { ... }
+ *
+ * **Note**: It is possible to define the `color` property directly as `rgba(R, G, B, A)`,
+ * `#RRGGBB[AA]` or `hsla(H, S, L, A)`. In such situation, the color will **only** apply to the UI of
+ * the editor and the `<mark>` elements in the content must be styled by custom classes provided by
+ * a dedicated style sheet.
+ *
+ * **Note**: It is recommended for the `color` property to correspond to the class in the content
+ * style sheet because it represents the highlighter in the user interface of the editor.
  *
  *		ClassicEditor
  *			.create( editorElement, {
@@ -113,14 +171,14 @@ export default class Highlight extends Plugin {
  *							model: 'pinkMarker',
  *							class: 'marker-pink',
  *							title: 'Pink Marker',
- *							color: '#fc7999',
+ *							color: 'var(--ck-highlight-marker-pink)',
  *							type: 'marker'
  *						},
  *						{
  *							model: 'redPen',
  *							class: 'pen-red',
  *							title: 'Red Pen',
- *							color: '#e91313',
+ *							color: 'var(--ck-highlight-pen-red)',
  *							type: 'pen'
  *						},
  *					]

+ 42 - 6
packages/ckeditor5-highlight/src/highlightediting.js

@@ -28,12 +28,48 @@ export default class HighlightEditing extends Plugin {
 
 		editor.config.define( 'highlight', {
 			options: [
-				{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: '#fdfd77', type: 'marker' },
-				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' },
-				{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' },
-				{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' },
-				{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
-				{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: '#118800', type: 'pen' }
+				{
+					model: 'yellowMarker',
+					class: 'marker-yellow',
+					title: 'Yellow marker',
+					color: 'var(--ck-highlight-marker-yellow)',
+					type: 'marker'
+				},
+				{
+					model: 'greenMarker',
+					class: 'marker-green',
+					title: 'Green marker',
+					color: 'var(--ck-highlight-marker-green)',
+					type: 'marker'
+				},
+				{
+					model: 'pinkMarker',
+					class: 'marker-pink',
+					title: 'Pink marker',
+					color: 'var(--ck-highlight-marker-pink)',
+					type: 'marker'
+				},
+				{
+					model: 'blueMarker',
+					class: 'marker-blue',
+					title: 'Blue marker',
+					color: 'var(--ck-highlight-marker-blue)',
+					type: 'marker'
+				},
+				{
+					model: 'redPen',
+					class: 'pen-red',
+					title: 'Red pen',
+					color: 'var(--ck-highlight-pen-red)',
+					type: 'pen'
+				},
+				{
+					model: 'greenPen',
+					class: 'pen-green',
+					title: 'Green pen',
+					color: 'var(--ck-highlight-pen-green)',
+					type: 'pen'
+				}
 			]
 		} );
 	}

+ 2 - 0
packages/ckeditor5-highlight/src/highlightui.js

@@ -20,6 +20,8 @@ import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarsepa
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 import { createDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
+import './../theme/highlight.css';
+
 /**
  * The default Highlight UI plugin. It introduces:
  * * the `'highlightDropdown'` drop-down,

+ 42 - 6
packages/ckeditor5-highlight/tests/highlightediting.js

@@ -85,12 +85,48 @@ describe( 'HighlightEditing', () => {
 			it( 'should be set', () => {
 				expect( editor.config.get( 'highlight' ) ).to.deep.equal( {
 					options: [
-						{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: '#fdfd77', type: 'marker' },
-						{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' },
-						{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' },
-						{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' },
-						{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
-						{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: '#118800', type: 'pen' }
+						{
+							model: 'yellowMarker',
+							class: 'marker-yellow',
+							title: 'Yellow marker',
+							color: 'var(--ck-highlight-marker-yellow)',
+							type: 'marker'
+						},
+						{
+							model: 'greenMarker',
+							class: 'marker-green',
+							title: 'Green marker',
+							color: 'var(--ck-highlight-marker-green)',
+							type: 'marker'
+						},
+						{
+							model: 'pinkMarker',
+							class: 'marker-pink',
+							title: 'Pink marker',
+							color: 'var(--ck-highlight-marker-pink)',
+							type: 'marker'
+						},
+						{
+							model: 'blueMarker',
+							class: 'marker-blue',
+							title: 'Blue marker',
+							color: 'var(--ck-highlight-marker-blue)',
+							type: 'marker'
+						},
+						{
+							model: 'redPen',
+							class: 'pen-red',
+							title: 'Red pen',
+							color: 'var(--ck-highlight-pen-red)',
+							type: 'pen'
+						},
+						{
+							model: 'greenPen',
+							class: 'pen-green',
+							title: 'Green pen',
+							color: 'var(--ck-highlight-pen-green)',
+							type: 'pen'
+						}
 					]
 				} );
 			} );

+ 6 - 6
packages/ckeditor5-highlight/tests/highlightui.js

@@ -96,12 +96,12 @@ describe( 'HighlightUI', () => {
 			const toolbar = dropdown.toolbarView;
 
 			expect( toolbar.items.map( item => item.iconView && item.iconView.fillColor ) ).to.deep.equal( [
-				'#fdfd77',
-				'#63f963',
-				'#fc7999',
-				'#72cdfd',
-				'#e91313',
-				'#118800',
+				'var(--ck-highlight-marker-yellow)',
+				'var(--ck-highlight-marker-green)',
+				'var(--ck-highlight-marker-pink)',
+				'var(--ck-highlight-marker-blue)',
+				'var(--ck-highlight-pen-red)',
+				'var(--ck-highlight-pen-green)',
 				undefined,
 				'',
 			] );

+ 0 - 28
packages/ckeditor5-highlight/tests/manual/highlight-buttons.html

@@ -1,31 +1,3 @@
-<style>
-	.marker-yellow {
-		background-color: #fdfd77;
-	}
-
-	.marker-green {
-		background-color: #63f963;
-	}
-
-	.marker-pink {
-		background-color: #fc7999;
-	}
-
-	.marker-blue {
-		background-color: #72cdfd;
-	}
-
-	.pen-red {
-		background-color: transparent;
-		color: #e91313;
-	}
-
-	.pen-green {
-		background-color: transparent;
-		color: #118800;
-	}
-</style>
-
 <div id="editor">
 	<p>Highlight feature example.</p>
 	<p>

+ 0 - 28
packages/ckeditor5-highlight/tests/manual/highlight.html

@@ -1,31 +1,3 @@
-<style>
-	.marker-yellow {
-		background-color: #fdfd77;
-	}
-
-	.marker-green {
-		background-color: #63f963;
-	}
-
-	.marker-pink {
-		background-color: #fc7999;
-	}
-
-	.marker-blue {
-		background-color: #72cdfd;
-	}
-
-	.pen-red {
-		background-color: transparent;
-		color: #e91313;
-	}
-
-	.pen-green {
-		background-color: transparent;
-		color: #118800;
-	}
-</style>
-
 <div id="editor">
 	<p>Highlight feature example.</p>
 	<p>

+ 36 - 0
packages/ckeditor5-highlight/theme/highlight.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-highlight-marker-yellow: #fdfd77;
+	--ck-highlight-marker-green: #63f963;
+	--ck-highlight-marker-pink: #fc7999;
+	--ck-highlight-marker-blue: #72cdfd;
+	--ck-highlight-pen-red: #e91313;
+	--ck-highlight-pen-green: #118800;
+}
+
+@define-mixin highlight-marker-color $color {
+	.marker-$color {
+		background-color: var(--ck-highlight-marker-$color);
+	}
+}
+
+@define-mixin highlight-pen-color $color {
+	.pen-$color {
+		color: var(--ck-highlight-pen-$color);
+
+		/* Override default yellow background of `<mark>` from user agent stylesheet */
+		background-color: transparent;
+	}
+}
+
+@mixin highlight-marker-color yellow;
+@mixin highlight-marker-color green;
+@mixin highlight-marker-color pink;
+@mixin highlight-marker-color blue;
+
+@mixin highlight-pen-color red;
+@mixin highlight-pen-color green;