Merge pull request #162 from ckeditor/t/ckeditor5-image/187

Feature: Implemented .ck-button_save and _cancel classes with distinctive colors (see ckeditor/ckeditor5-image#187).
ckeditor · Mar 15, 2018 · 531aec2 · 531aec2
2 parents dcf8599 + 8b5a340
commit 531aec2
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 16 deletions.
diff --git a/docs/_snippets/examples/custom.css b/docs/_snippets/examples/custom.css
@@ -45,6 +45,9 @@
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
 	--ck-color-button-action-text: var(--ck-custom-white);
 
+	--ck-color-button-save: hsl(120, 100%, 46%);
+	--ck-color-button-cancel: hsl(15, 100%, 56%);
+
 	/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
 
 	--ck-color-dropdown-panel-background: var(--ck-custom-background);

diff --git a/docs/framework/guides/theme-customization.md b/docs/framework/guides/theme-customization.md
@@ -111,6 +111,9 @@ The file containing custom variables will be named `custom.css` and it will look
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
 	--ck-color-button-action-text: var(--ck-custom-white);
 
+	--ck-color-button-save: hsl(120, 100%, 46%);
+	--ck-color-button-cancel: hsl(15, 100%, 56%);
+
 	/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
 
 	--ck-color-dropdown-panel-background: var(--ck-custom-background);

diff --git a/tests/manual/inverted.html b/tests/manual/inverted.html
@@ -39,6 +39,9 @@
 		--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
 		--ck-color-button-action-text: var(--ck-custom-white);
 
+		--ck-color-button-save: hsl(120, 100%, 46%);
+		--ck-color-button-cancel: hsl(15, 100%, 56%);
+
 		/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
 
 		--ck-color-dropdown-panel-background: var(--ck-custom-background);

diff --git a/tests/manual/theme.js b/tests/manual/theme.js
@@ -23,6 +23,9 @@ import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinp
 
 import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
 import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
+import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
+import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
+
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 
 class TextView extends View {
@@ -114,9 +117,11 @@ function renderButton() {
 	const actionButton = button( { label: 'Action button' } );
 	const roundedButton = button( { label: 'Rounded corners' } );
 	const boldButton = button( { label: 'Bold text' } );
+	const saveButton = button( { label: 'Save', withText: false, icon: checkIcon } );
+	const cancelButton = button( { label: 'Cancel', withText: false, icon: cancelIcon } );
 
 	ui.buttonTypes.add( toolbar( [
-		actionButton, roundedButton, boldButton
+		actionButton, roundedButton, boldButton, saveButton, cancelButton
 	] ) );
 
 	// TODO: It requires model interface.
@@ -128,6 +133,9 @@ function renderButton() {
 	// TODO: It requires model interface.
 	boldButton.element.classList.add( 'ck-button-bold' );
 
+	saveButton.element.classList.add( 'ck-button-save' );
+	cancelButton.element.classList.add( 'ck-button-cancel' );
+
 	// --- Icon ------------------------------------------------------------
 
 	ui.buttonIcon.add( toolbar( [

diff --git a/theme/ckeditor5-link/link.css b/theme/ckeditor5-link/link.css
@@ -3,23 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
-	--ck-color-link-form-save-icon: hsl(120, 100%, 27%);
-	--ck-color-link-form-cancel-icon: hsl(15, 100%, 43%);
-}
-
 /* Class added to span element surrounding currently selected link. */
 .ck-link_selected {
 	background: var(--ck-color-link-selected-background);
 	outline: 1px solid var(--ck-color-link-selected-background);
 }
-
-.ck-link-form .ck-button {
-	&:first-of-type {
-		color: var(--ck-color-link-form-save-icon);
-	}
-
-	&:last-of-type {
-		color: var(--ck-color-link-form-cancel-icon);
-	}
-}
diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css
@@ -68,6 +68,14 @@ a.ck-button {
 		@mixin ck-button-colors --ck-color-button-on;
 	}
 
+	&.ck-button-save {
+		color: var(--ck-color-button-save);
+	}
+
+	&.ck-button-cancel {
+		color: var(--ck-color-button-cancel);
+	}
+
 	& .ck-button__icon {
 		& use,
 		& use * {

diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css
@@ -42,6 +42,9 @@
 	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);
 	--ck-color-button-action-text: 								var(--ck-color-base-background);
 
+	--ck-color-button-save: 									hsl(120, 100%, 27%);
+	--ck-color-button-cancel: 									hsl(15, 100%, 43%);
+
 	/* -- Dropdown ------------------------------------------------------------------------------ */
 
 	--ck-color-dropdown-panel-background: 						var(--ck-color-base-background);