From a87beee4a91ee5616da0bff2a678f71166ad46ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredi=20Wasstr=C3=B6m?= Date: Wed, 26 Jun 2024 10:43:21 +0300 Subject: [PATCH] refactor: add private variables for focus ring gap (#7495) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add private variables for focus ring gap (#7495) Co-authored-by: Fredrik Wasström --- packages/button/theme/lumo/vaadin-button-styles.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/button/theme/lumo/vaadin-button-styles.js b/packages/button/theme/lumo/vaadin-button-styles.js index 7c22c8afc3..86e8e6aacc 100644 --- a/packages/button/theme/lumo/vaadin-button-styles.js +++ b/packages/button/theme/lumo/vaadin-button-styles.js @@ -30,6 +30,8 @@ const button = css` --_button-size: var(--vaadin-button-height, var(--lumo-button-size)); --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); + --_focus-ring-gap-on: 0; + --_focus-ring-gap-color: var(--lumo-base-color); /* Used by notification */ --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct)); --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color)); @@ -101,11 +103,12 @@ const button = css` /* Keyboard focus */ :host([focus-ring]) { - box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); + box-shadow: 0 0 0 calc(1px * var(--_focus-ring-gap-on)) var(--_focus-ring-gap-color), + 0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on)) var(--_focus-ring-color); } :host([theme~='primary'][focus-ring]) { - box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct); + --_focus-ring-gap-on: 1; } /* Types (primary, tertiary, tertiary-inline */