Sfoglia il codice sorgente

Adjusted and extended the default highlight color palette for better look and a11y.

Aleksander Nowodzinski 7 anni fa
parent
commit
8d588c6412

+ 10 - 6
packages/ckeditor5-highlight/docs/_snippets/features/build-highlight-source.html

@@ -1,23 +1,27 @@
 <style>
 	.marker {
-		background-color: #ffff66;
+		background-color: #fdfd77;
 	}
 
 	.marker-green {
-		background-color: #66ff00;
+		background-color: #63f963;
 	}
 
 	.marker-pink {
-		background-color: #ff6fff;
+		background-color: #fc7999;
+	}
+
+	.marker-blue {
+		background-color: #72cdfd;
 	}
 
 	.pen-red {
 		background-color: transparent;
-		color: #ff2929;
+		color: #e91313;
 	}
 
-	.pen-blue {
+	.pen-green {
 		background-color: transparent;
-		color: #0091ff;
+		color: #118800;
 	}
 </style>

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

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

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

@@ -15,7 +15,7 @@ ClassicEditor
 		highlight: {
 			options: [
 				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' },
-				{ model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' }
+				{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
 			]
 		}
 	} )

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

@@ -7,6 +7,6 @@
 	</p>
 	<p>
 		Here are some pens:
-		<mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
+		<mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>.
 	</p>
 </div>

+ 2 - 2
packages/ckeditor5-highlight/docs/_snippets/features/highlight-buttons.js

@@ -9,8 +9,8 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-highlight-buttons' ), {
 		toolbar: {
 			items: [
-				'headings', '|', 'highlight:marker', 'highlight:greenMarker', 'highlight:pinkMarker', 'highlight:bluePen',
-				'highlight:redPen', 'removeHighlight', '|', 'undo', 'redo'
+				'headings', '|', 'highlight:marker', 'highlight:greenMarker', 'highlight:pinkMarker',
+				'highlight:greenPen', 'highlight:redPen', 'removeHighlight', '|', 'undo', 'redo'
 			],
 			viewportTopOffset: 60
 		}

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

@@ -7,6 +7,6 @@
 	</p>
 	<p>
 		Here are some pens:
-		<mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
+		<mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>.
 	</p>
 </div>

+ 19 - 17
packages/ckeditor5-highlight/docs/features/highlight.md

@@ -16,7 +16,7 @@ The {@link module:highlight/highlight~Highlight} feature offers a text marking t
 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.
 
-For example, the following editor supports only two styles (a green marker and a blue pen):
+For example, the following editor supports only two styles (a green marker and a red pen):
 
 ```js
 ClassicEditor
@@ -27,14 +27,14 @@ ClassicEditor
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: '#66ff00',
+					color: '#63f963',
 					type: 'marker'
 				},
 				{
-					model: 'bluePen',
-					class: 'pen-blue',
-					title: 'Blue pen',
-					color: '#0091ff',
+					model: 'redPen',
+					class: 'pen-red',
+					title: 'Red pen',
+					color: '#e91313',
 					type: 'pen'
 				}
 			]
@@ -57,7 +57,7 @@ ClassicEditor
 		toolbar: {
 			items: [
 				'headings', '|', 'highlight:marker', 'highlight:greenMarker',
-				'highlight:pinkMarker', 'highlight:bluePen',
+				'highlight:pinkMarker', 'highlight:greenPen',
 				'highlight:redPen', 'removeHighlight', 'undo', 'redo'
 			]
 		}
@@ -112,20 +112,22 @@ 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: 'marker', class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' },
-		{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' },
-		{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#ff6fff', type: 'marker' },
-		{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#ff2929', type: 'pen' },
-		{ model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' }
+		{ model: 'marker', class: 'marker', title: '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' }
 	]
 	```
 
 	the `highlight` command will accept the corresponding strings as values:
-	- `'marker'` – available as a `'highlight:marker'` button.
-	- `'greenMarker'` – available as a `'highlight:greenMarker'` button.
-	- `'pinkMarker'` – available as a `'highlight:pinkMarker'` button.
-	- `'redPen'` – available as a `'highlight:redPen'` button.
-	- `'bluePen'` – available as a `'highlight:bluePen'` button.
+	- `'marker'` – available as a `'highlight:marker'` button,
+	- `'greenMarker'` – available as a `'highlight:greenMarker'` button,
+	- `'pinkMarker'` – available as a `'highlight:pinkMarker'` button,
+	- `'blueMarker'` – available as a `'highlight:blueMarker'` button,
+	- `'redPen'` – available as a `'highlight:redPen'` button,
+	- `'greenPen'` – available as a `'highlight:greenPen'` button.
 
 	passing an empty `value` will remove any `highlight` from the selection:
 

+ 9 - 8
packages/ckeditor5-highlight/src/highlight.js

@@ -45,7 +45,7 @@ export default class Highlight extends Plugin {
  *			model: 'pinkMarker',
  *			class: 'marker-pink',
  *			title: 'Pink Marker',
- *			color: '#ff6fff',
+ *			color: '#fc7999',
  *			type: 'marker'
  *		}
  *
@@ -87,11 +87,12 @@ export default class Highlight extends Plugin {
  * The available highlighters options. The default value is:
  *
  *		options: [
- *			{ model: 'marker', class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' },
- *			{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' },
- *			{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#ff6fff', type: 'marker' },
- *			{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#ff2929', type: 'pen' },
- *			{ model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' }
+ *			{ model: 'marker', class: 'marker', title: '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' }
  *		]
  *
  * There are two types of highlighters available:
@@ -112,14 +113,14 @@ export default class Highlight extends Plugin {
  *							model: 'pinkMarker',
  *							class: 'marker-pink',
  *							title: 'Pink Marker',
- *							color: '#ff6fff',
+ *							color: '#fc7999',
  *							type: 'marker'
  *						},
  *						{
  *							model: 'redPen',
  *							class: 'pen-red',
  *							title: 'Red Pen',
- *							color: '#ff2929',
+ *							color: '#e91313',
  *							type: 'pen'
  *						},
  *					]

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

@@ -29,11 +29,12 @@ export default class HighlightEditing extends Plugin {
 
 		editor.config.define( 'highlight', {
 			options: [
-				{ model: 'marker', class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' },
-				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' },
-				{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#ff6fff', type: 'marker' },
-				{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#ff2929', type: 'pen' },
-				{ model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' }
+				{ model: 'marker', class: 'marker', title: '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' }
 			]
 		} );
 	}

+ 8 - 5
packages/ckeditor5-highlight/src/highlightui.js

@@ -29,10 +29,11 @@ import './../theme/highlight.css';
  *
  * The default configuration includes the following buttons:
  * * `'highlight:marker'`
- * * `'highlight:pinkMarker'`
  * * `'highlight:greenMarker'`
+ * * `'highlight:pinkMarker'`
+ * * `'highlight:blueMarker'`
  * * `'highlight:redPen'`
- * * `'highlight:bluePen'`
+ * * `'highlight:greenPen'`
  *
  * See the {@link module:highlight/highlight~HighlightConfig#options configuration} to learn more
  * about the defaults.
@@ -49,8 +50,9 @@ export default class HighlightUI extends Plugin {
 	 * * `'Marker'`,
 	 * * `'Green marker'`,
 	 * * `'Pink marker'`,
-	 * * `'Blue pen'`.
-	 * * `'Red pen'`.
+	 * * `'Blue marker'`,
+	 * * `'Red pen'`,
+	 * * `'Green pen'`.
 	 *
 	 * @readonly
 	 * @type {Object.<String,String>}
@@ -62,8 +64,9 @@ export default class HighlightUI extends Plugin {
 			'Marker': t( 'Marker' ),
 			'Green marker': t( 'Green marker' ),
 			'Pink marker': t( 'Pink marker' ),
+			'Blue marker': t( 'Blue marker' ),
 			'Red pen': t( 'Red pen' ),
-			'Blue pen': t( 'Blue pen' )
+			'Green pen': t( 'Green pen' )
 		};
 	}
 

+ 17 - 8
packages/ckeditor5-highlight/tests/manual/highlight-buttons.html

@@ -1,24 +1,28 @@
 <style>
 	.marker {
-		background-color: #ffff66;
+		background-color: #fdfd77;
 	}
 
 	.marker-green {
-		background-color: #66ff00;
+		background-color: #63f963;
 	}
 
 	.marker-pink {
-		background-color: #ff6fff;
+		background-color: #fc7999;
+	}
+
+	.marker-blue {
+		background-color: #72cdfd;
 	}
 
 	.pen-red {
 		background-color: transparent;
-		color: #ff2929;
+		color: #e91313;
 	}
 
-	.pen-blue {
+	.pen-green {
 		background-color: transparent;
-		color: #0091ff;
+		color: #118800;
 	}
 </style>
 
@@ -26,11 +30,16 @@
 	<p>Highlight feature example.</p>
 	<p>
 		Here are some markers:
-		<mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
 	</p>
+	<ul>
+		<li>the <mark class="marker">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:
-		<mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
+		<mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>.
 	</p>
 	<figure class="image">
 		<img src="sample.jpg" alt="CKEditor logo" />

+ 2 - 1
packages/ckeditor5-highlight/tests/manual/highlight-buttons.js

@@ -13,7 +13,8 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePluginSet, Highlight ],
 		toolbar: [
-			'highlight:marker', 'highlight:pinkMarker', 'highlight:greenMarker', 'highlight:redPen', 'highlight:bluePen', 'removeHighlight',
+			'highlight:marker', 'highlight:greenMarker', 'highlight:pinkMarker', 'highlight:blueMarker',
+			'highlight:redPen', 'highlight:greenPen', 'removeHighlight',
 			'|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		]
 	} )

+ 3 - 3
packages/ckeditor5-highlight/tests/manual/highlight-buttons.md

@@ -1,7 +1,7 @@
 ### Loading
 
 1. The data should be loaded with different markers and pens.
-2. The toolbar should have 5 highlight buttons and one remove highlight button. 
+2. The toolbar should have 5 highlight buttons and one remove highlight button.
 
 ### Testing
 
@@ -13,7 +13,7 @@ You should be able to:
 editor.execute( 'highlight', { class: 'marker' } );
 editor.execute( 'highlight', { class: 'marker-green' } );
 editor.execute( 'highlight', { class: 'marker-pink' } );
-	
+
 editor.execute( 'highlight', { class: 'pen-red' } );
-editor.execute( 'highlight', { class: 'pen-blue' } );	 
+editor.execute( 'highlight', { class: 'pen-green' } );
 ```

+ 17 - 8
packages/ckeditor5-highlight/tests/manual/highlight.html

@@ -1,24 +1,28 @@
 <style>
 	.marker {
-		background-color: #ffff66;
+		background-color: #fdfd77;
 	}
 
 	.marker-green {
-		background-color: #66ff00;
+		background-color: #63f963;
 	}
 
 	.marker-pink {
-		background-color: #ff6fff;
+		background-color: #fc7999;
+	}
+
+	.marker-blue {
+		background-color: #72cdfd;
 	}
 
 	.pen-red {
 		background-color: transparent;
-		color: #ff2929;
+		color: #e91313;
 	}
 
-	.pen-blue {
+	.pen-green {
 		background-color: transparent;
-		color: #0091ff;
+		color: #118800;
 	}
 </style>
 
@@ -26,11 +30,16 @@
 	<p>Highlight feature example.</p>
 	<p>
 		Here are some markers:
-		<mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
 	</p>
+	<ul>
+		<li>the <mark class="marker">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:
-		<mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
+		<mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>.
 	</p>
 	<figure class="image">
 		<img src="sample.jpg" alt="CKEditor logo" />

+ 2 - 2
packages/ckeditor5-highlight/tests/manual/highlight.md

@@ -12,7 +12,7 @@ You should be able to:
 editor.execute( 'highlight', { class: 'marker' } );
 editor.execute( 'highlight', { class: 'marker-green' } );
 editor.execute( 'highlight', { class: 'marker-pink' } );
-	
+
 editor.execute( 'highlight', { class: 'pen-red' } );
-editor.execute( 'highlight', { class: 'pen-blue' } );	 
+editor.execute( 'highlight', { class: 'pen-green' } );
 ```