From dc10caa544e7de295477225eeb5e2345916b8cdc Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Tue, 31 Oct 2023 14:22:33 +0100 Subject: [PATCH] :bug: Fix transparent borders for buttons on visible focus --- CHANGELOG.rst | 5 +++-- src/scss/components/_button.scss | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 9fdab16ad..5c00da338 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -21,14 +21,15 @@ should be set: * ``--utrecht-button-secondary-action-danger-background-color`` takes the value of the old ``--of-button-danger-bg`` * ``--utrecht-button-secondary-action-danger-color`` takes the value of the old ``--of-button-danger-fg`` * ``--utrecht-button-secondary-action-focus-border-color`` takes the value of the old ``--of-color-focus-border`` -* ``--utrecht-button-subtle-danger-background-color`` takes the value of ``--of-color-danger`` +* ``--utrecht-button-subtle-danger-color`` takes the value of ``--of-color-danger`` +* ``--utrecht-button-subtle-danger-background-color`` takes the value of ``--of-color-bg`` * ``--utrecht-button-subtle-danger-hover-background-color`` takes the value ``--of-color-bg`` * ``--utrecht-button-subtle-danger-active-background-color`` takes the value of the old ``--of-button-danger-active-bg`` * ``--utrecht-button-disabled-color``. This does not take the value of an old token. For the Open Forms theme this is now ``#ffffff``. * ``--utrecht-button-disabled-background-color``. This does not take the value of an old token, the colour was previously obtained by graying out the primary button. For the Open Forms theme, - this is now ``#a02017``. + this is now ``#b0b0b0``. * ``--utrecht-action-disabled-cursor``. This does not take the value of an old token. It controls the looks of the cursor when hovering a disabled button. For the Open Forms theme, this is now ``not-allowed``. diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 90c0e05d1..3288c7e84 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -10,7 +10,7 @@ &:hover { // However, if the button has visible focus, apply the border color to all borders // otherwise it looks a bit broken. - &:not(:focus-visible) { + &:not(:focus, :focus-visible) { border-block-start-color: transparent; border-inline-start-color: transparent; }