Răsfoiți Sursa

Added highlight stylesheet with CSS variables.

Damian Konopka 8 ani în urmă
părinte
comite
51ba006e95

+ 11 - 11
packages/ckeditor5-highlight/src/highlight.js

@@ -45,14 +45,14 @@ export default class Highlight extends Plugin {
  *			model: 'pinkMarker',
  *			class: 'marker-pink',
  *			title: 'Pink Marker',
- *			color: '#fc7999',
+ *			color: 'var(--ck-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.
+ * @property {String} color The name of CSS variable 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} 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:
@@ -87,12 +87,12 @@ 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-marker-yellow)', type: 'marker' },
+ *			{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-marker-green)', type: 'marker' },
+ *			{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-marker-pink)', type: 'marker' },
+ *			{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-marker-blue)', type: 'marker' },
+ *			{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-pen-red)', type: 'pen' },
+ *			{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-pen-green)', type: 'pen' }
  *		]
  *
  * There are two types of highlighters available:
@@ -100,7 +100,7 @@ export default class Highlight extends Plugin {
  * - `'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.
+ * The highlight feature does provide actual stylesheet with default colors.
  *
  * **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.
@@ -113,14 +113,14 @@ export default class Highlight extends Plugin {
  *							model: 'pinkMarker',
  *							class: 'marker-pink',
  *							title: 'Pink Marker',
- *							color: '#fc7999',
+ *							color: 'var(--ck-marker-pink)',
  *							type: 'marker'
  *						},
  *						{
  *							model: 'redPen',
  *							class: 'pen-red',
  *							title: 'Red Pen',
- *							color: '#e91313',
+ *							color: 'var(--ck-pen-red)',
  *							type: 'pen'
  *						},
  *					]

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

@@ -28,12 +28,12 @@ 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-marker-yellow)', type: 'marker' },
+				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-marker-green)', type: 'marker' },
+				{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-marker-pink)', type: 'marker' },
+				{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-marker-blue)', type: 'marker' },
+				{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-pen-red)', type: 'pen' },
+				{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-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,

+ 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-marker-yellow: #fdfd77;
+	--ck-marker-green: #63f963;
+	--ck-marker-pink: #fc7999;
+	--ck-marker-blue: #72cdfd;
+	--ck-pen-red: #e91313;
+	--ck-pen-green: #118800;
+}
+
+@define-mixin marker-color $color {
+	.marker-$color {
+		background-color: var(--ck-marker-$color);
+	}
+}
+
+@define-mixin pen-color $color {
+	.pen-$color {
+		color: var(--ck-pen-$color);
+
+		/* Override default `<mark>` yellow background from user agent stylesheet */
+		background-color: transparent;
+	}
+}
+
+@mixin marker-color yellow;
+@mixin marker-color green;
+@mixin marker-color pink;
+@mixin marker-color blue;
+
+@mixin pen-color red;
+@mixin pen-color green;