diff --git a/docs/_snippets/examples/custom.css b/docs/_snippets/examples/custom.css index 22761ed..a038ec6 100644 --- a/docs/_snippets/examples/custom.css +++ b/docs/_snippets/examples/custom.css @@ -27,19 +27,19 @@ /* -- Overrides the default .ck-button class colors. ---------------------------------------- */ --ck-color-button-default-background: var(--ck-custom-background); - --ck-color-button-default-focus-background: hsl(270, 1%, 22%); + --ck-color-button-default-hover-background: hsl(270, 1%, 22%); --ck-color-button-default-active-background: hsl(270, 2%, 20%); --ck-color-button-default-active-shadow: hsl(270, 2%, 23%); --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-on-background: var(--ck-custom-foreground); - --ck-color-button-on-focus-background: hsl(255, 4%, 16%); + --ck-color-button-on-hover-background: hsl(255, 4%, 16%); --ck-color-button-on-active-background: hsl(255, 4%, 14%); --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); --ck-color-button-on-disabled-background: var(--ck-custom-foreground); --ck-color-button-action-background: hsl(168, 76%, 42%); - --ck-color-button-action-focus-background: hsl(168, 76%, 38%); + --ck-color-button-action-hover-background: hsl(168, 76%, 38%); --ck-color-button-action-active-background: hsl(168, 76%, 36%); --ck-color-button-action-active-shadow: hsl(168, 75%, 34%); --ck-color-button-action-disabled-background: hsl(168, 76%, 42%); diff --git a/docs/framework/guides/theme-customization.md b/docs/framework/guides/theme-customization.md index d36f80d..6c0cca2 100644 --- a/docs/framework/guides/theme-customization.md +++ b/docs/framework/guides/theme-customization.md @@ -93,19 +93,19 @@ The file containing custom variables will be named `custom.css` and it will look /* -- Overrides the default .ck-button class colors. ---------------------------------------- */ --ck-color-button-default-background: var(--ck-custom-background); - --ck-color-button-default-focus-background: hsl(270, 1%, 22%); + --ck-color-button-default-hover-background: hsl(270, 1%, 22%); --ck-color-button-default-active-background: hsl(270, 2%, 20%); --ck-color-button-default-active-shadow: hsl(270, 2%, 23%); --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-on-background: var(--ck-custom-foreground); - --ck-color-button-on-focus-background: hsl(255, 4%, 16%); + --ck-color-button-on-hover-background: hsl(255, 4%, 16%); --ck-color-button-on-active-background: hsl(255, 4%, 14%); --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); --ck-color-button-on-disabled-background: var(--ck-custom-foreground); --ck-color-button-action-background: hsl(168, 76%, 42%); - --ck-color-button-action-focus-background: hsl(168, 76%, 38%); + --ck-color-button-action-hover-background: hsl(168, 76%, 38%); --ck-color-button-action-active-background: hsl(168, 76%, 36%); --ck-color-button-action-active-shadow: hsl(168, 75%, 34%); --ck-color-button-action-disabled-background: hsl(168, 76%, 42%); diff --git a/tests/manual/iconset.js b/tests/manual/iconset.js index 2ba9301..5bc6e90 100644 --- a/tests/manual/iconset.js +++ b/tests/manual/iconset.js @@ -28,6 +28,7 @@ import objectCenter from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg import objectRight from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg'; import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg'; import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg'; +import pilcrow from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg'; import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg'; import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg'; @@ -67,7 +68,7 @@ const icons = { bold, italic, underline, code, strikethrough, // core - check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, + check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow, // font fontFamily, fontSize, diff --git a/tests/manual/inverted.html b/tests/manual/inverted.html index 1b9c15e..08c9a5a 100644 --- a/tests/manual/inverted.html +++ b/tests/manual/inverted.html @@ -21,19 +21,19 @@ /* -- Overrides the default .ck-button class colors ----------------------------------------- */ --ck-color-button-default-background: var(--ck-custom-background); - --ck-color-button-default-focus-background: hsl(270, 1%, 22%); + --ck-color-button-default-hover-background: hsl(270, 1%, 22%); --ck-color-button-default-active-background: hsl(270, 2%, 20%); --ck-color-button-default-active-shadow: hsl(270, 2%, 23%); --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-on-background: var(--ck-custom-foreground); - --ck-color-button-on-focus-background: hsl(255, 4%, 16%); + --ck-color-button-on-hover-background: hsl(255, 4%, 16%); --ck-color-button-on-active-background: hsl(255, 4%, 14%); --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); --ck-color-button-on-disabled-background: var(--ck-custom-foreground); --ck-color-button-action-background: hsl(168, 76%, 42%); - --ck-color-button-action-focus-background: hsl(168, 76%, 38%); + --ck-color-button-action-hover-background: hsl(168, 76%, 38%); --ck-color-button-action-active-background: hsl(168, 76%, 36%); --ck-color-button-action-active-shadow: hsl(168, 75%, 34%); --ck-color-button-action-disabled-background: hsl(168, 76%, 42%); diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css index 4dc7d3e..5963e00 100644 --- a/theme/ckeditor5-ui/components/button/button.css +++ b/theme/ckeditor5-ui/components/button/button.css @@ -34,6 +34,9 @@ a.ck.ck-button { /* Avoid flickering when the foucs border shows up. */ border: 1px solid transparent; + /* Apply some smooth transition to the box-shadow. */ + transition: box-shadow 200ms ease-in-out; + &:active, &:focus { @mixin ck-focus-ring; @@ -45,6 +48,12 @@ a.ck.ck-button { /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */ &.ck-disabled { + &:active, + &:focus { + /* The disabled button should have a slightly less visible shadow when focused. */ + @mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow); + } + & .ck-button__icon { @mixin ck-disabled; } diff --git a/theme/ckeditor5-ui/components/dropdown/dropdown.css b/theme/ckeditor5-ui/components/dropdown/dropdown.css index 9b2a95a..70c190e 100644 --- a/theme/ckeditor5-ui/components/dropdown/dropdown.css +++ b/theme/ckeditor5-ui/components/dropdown/dropdown.css @@ -67,6 +67,6 @@ border: 1px solid var(--ck-color-dropdown-panel-border); bottom: 0; - /* Make sure the panel is at least as wide as the dropdown's button. */ + /* Make sure the panel is at least as wide as the drop-down's button. */ min-width: 100%; } diff --git a/theme/ckeditor5-ui/components/dropdown/listdropdown.css b/theme/ckeditor5-ui/components/dropdown/listdropdown.css index 130abed..b4a6df3 100644 --- a/theme/ckeditor5-ui/components/dropdown/listdropdown.css +++ b/theme/ckeditor5-ui/components/dropdown/listdropdown.css @@ -11,4 +11,23 @@ @mixin ck-rounded-corners { border-top-left-radius: 0; } + + /* Make sure the button belonging to the first/last child of the list goes well with the + border radius of the entire panel. */ + & .ck-list__item { + &:first-child .ck-button { + @mixin ck-rounded-corners { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + + &:last-child .ck-button { + @mixin ck-rounded-corners { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + } } diff --git a/theme/ckeditor5-ui/components/inputtext/inputtext.css b/theme/ckeditor5-ui/components/inputtext/inputtext.css index 770d82d..9b6930a 100644 --- a/theme/ckeditor5-ui/components/inputtext/inputtext.css +++ b/theme/ckeditor5-ui/components/inputtext/inputtext.css @@ -23,7 +23,8 @@ /* This is important to stay of the same height as surrounding buttons */ min-height: var(--ck-ui-component-min-height); - transition-property: box-shadow,border; + /* Apply some smooth transition to the box-shadow and border. */ + transition-property: box-shadow, border; transition: .2s ease-in-out; &:focus { @@ -35,5 +36,10 @@ border: 1px solid var(--ck-color-input-disabled-border); background: var(--ck-color-input-disabled-background); color: var(--ck-color-input-disabled-text); + + &:focus { + /* The read-only input should have a slightly less visible shadow when focused. */ + @mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow), var(--ck-inner-shadow); + } } } diff --git a/theme/ckeditor5-ui/components/list/list.css b/theme/ckeditor5-ui/components/list/list.css index 6930268..09ce3ab 100644 --- a/theme/ckeditor5-ui/components/list/list.css +++ b/theme/ckeditor5-ui/components/list/list.css @@ -45,8 +45,7 @@ background: var(--ck-color-list-button-on-background); color: var(--ck-color-list-button-on-text); - &:hover:not(ck-disabled), - &:focus { + &:hover:not(ck-disabled) { background: var(--ck-color-list-button-on-background-focus); } @@ -55,8 +54,7 @@ } } - &:hover:not(.ck-disabled), - &:focus { + &:hover:not(.ck-disabled) { background: var(--ck-color-list-button-hover-background); } } @@ -68,8 +66,7 @@ background: var(--ck-color-list-background); color: inherit; - &:hover:not(ck-disabled), - &:focus { + &:hover:not(ck-disabled) { background: var(--ck-color-list-button-hover-background); color: inherit; } diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index 6053d3b..4e57e84 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -16,7 +16,8 @@ /* -- Generic colors ------------------------------------------------------------------------ */ --ck-color-focus-border: hsl(208, 90%, 62%); - --ck-color-focus-shadow: hsl(209, 90%, 72%); + --ck-color-focus-shadow: hsla(209, 90%, 72%,.5); + --ck-color-focus-disabled-shadow: hsla(209, 90%, 72%,.3); --ck-color-text: var(--ck-color-base-text); --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15); --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); @@ -24,19 +25,19 @@ /* -- Buttons ------------------------------------------------------------------------------- */ --ck-color-button-default-background: transparent; - --ck-color-button-default-focus-background: hsl(0, 0%, 90%); + --ck-color-button-default-hover-background: hsl(0, 0%, 90%); --ck-color-button-default-active-background: hsl(0, 0%, 85%); --ck-color-button-default-active-shadow: hsl(0, 0%, 75%); --ck-color-button-default-disabled-background: transparent; --ck-color-button-on-background: hsl(0, 0%, 87%); - --ck-color-button-on-focus-background: hsl(0, 0%, 77%); + --ck-color-button-on-hover-background: hsl(0, 0%, 77%); --ck-color-button-on-active-background: hsl(0, 0%, 73%); --ck-color-button-on-active-shadow: hsl(0, 0%, 63%); --ck-color-button-on-disabled-background: hsl(0, 0%, 87%); --ck-color-button-action-background: var(--ck-color-base-action); - --ck-color-button-action-focus-background: hsl(104, 44%, 43%); + --ck-color-button-action-hover-background: hsl(104, 44%, 43%); --ck-color-button-action-active-background: hsl(104, 44%, 41%); --ck-color-button-action-active-shadow: hsl(104, 44%, 36%); --ck-color-button-action-disabled-background: hsl(104, 44%, 58%); diff --git a/theme/ckeditor5-ui/globals/_focus.css b/theme/ckeditor5-ui/globals/_focus.css index 6696098..175f0b0 100644 --- a/theme/ckeditor5-ui/globals/_focus.css +++ b/theme/ckeditor5-ui/globals/_focus.css @@ -4,10 +4,20 @@ */ :root { + /** + * The geometry of the of focused element's outer shadow. + */ + --ck-focus-outer-shadow-geometry: 0 0 0 3px; + /** * A visual style of focused element's outer shadow. */ - --ck-focus-outer-shadow: 0 0 3px var(--ck-color-focus-shadow); + --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-shadow); + + /** + * A visual style of focused element's outer shadow (when disabled). + */ + --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow); /** * A visual style of focused element's border or outline. diff --git a/theme/ckeditor5-ui/mixins/_button.css b/theme/ckeditor5-ui/mixins/_button.css index 4675900..9eb537a 100644 --- a/theme/ckeditor5-ui/mixins/_button.css +++ b/theme/ckeditor5-ui/mixins/_button.css @@ -13,9 +13,8 @@ background: var($(prefix)-background); &:not(.ck-disabled) { - &:hover, - &:focus { - background: var($(prefix)-focus-background); + &:hover { + background: var($(prefix)-hover-background); } &:active {