diff --git a/docs/_snippets/examples/custom.css b/docs/_snippets/examples/custom.css index 6a9a0eb..19cf9c4 100644 --- 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 index a94740a..5306332 100644 --- 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 index 01cc89e..85f5606 100644 --- 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 index f156628..347a74d 100644 --- 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 index 2ddfa20..b6b0171 100644 --- 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 index 7fdcd17..d851333 100644 --- 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 index 398a9b2..7c111a1 100644 --- 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);