From 4e9cb512e3ec21a0da7524d651c905c849f8112b Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 11 Oct 2023 16:38:26 +0300 Subject: [PATCH 1/2] feat: add Lumo custom CSS properties to set focus-ring --- dev/focus-ring.html | 76 +++++++++++++++++++ packages/avatar/src/vaadin-avatar-styles.js | 2 +- .../avatar/theme/lumo/vaadin-avatar-styles.js | 2 +- .../button/theme/lumo/vaadin-button-styles.js | 2 +- .../theme/lumo/vaadin-checkbox-styles.js | 2 +- .../lumo/vaadin-combo-box-item-styles.js | 2 +- .../crud/theme/lumo/vaadin-crud-styles.js | 2 +- .../lumo/vaadin-month-calendar-styles.js | 6 +- .../theme/lumo/vaadin-details-styles.js | 2 +- .../lumo/vaadin-grid-pro-editor-styles.js | 2 +- .../theme/lumo/vaadin-grid-pro-styles.js | 2 +- .../grid/theme/lumo/vaadin-grid-styles.js | 4 +- .../item/theme/lumo/vaadin-item-styles.js | 2 +- packages/map/theme/lumo/vaadin-map-styles.js | 6 +- .../theme/lumo/vaadin-message-styles.js | 2 +- .../theme/lumo/vaadin-radio-button-styles.js | 2 +- .../lumo/vaadin-rich-text-editor-styles.js | 2 +- .../theme/lumo/vaadin-scroller-styles.js | 3 +- .../theme/lumo/vaadin-side-nav-item-styles.js | 2 +- .../theme/lumo/vaadin-side-nav-styles.js | 2 +- packages/tabs/theme/lumo/vaadin-tab-styles.js | 2 +- .../upload/theme/lumo/vaadin-upload-styles.js | 4 +- .../mixins/input-field-shared.js | 2 +- packages/vaadin-lumo-styles/style.js | 4 + 24 files changed, 109 insertions(+), 28 deletions(-) create mode 100644 dev/focus-ring.html diff --git a/dev/focus-ring.html b/dev/focus-ring.html new file mode 100644 index 0000000000..f862d3d8a5 --- /dev/null +++ b/dev/focus-ring.html @@ -0,0 +1,76 @@ + + + + + + + Focus ring + + + + + + + + + + + Button + + + + + + + + + +
Toggle using mouse, Enter and Space keys.
+ + +
+ + + Foo + Bar + + +
+ + + + + + + + + + + Foo + Bar + + +
+ + + + diff --git a/packages/avatar/src/vaadin-avatar-styles.js b/packages/avatar/src/vaadin-avatar-styles.js index fecd075c21..fd71e14456 100644 --- a/packages/avatar/src/vaadin-avatar-styles.js +++ b/packages/avatar/src/vaadin-avatar-styles.js @@ -16,7 +16,7 @@ export const avatarStyles = css` border: var(--vaadin-avatar-outline-width) solid transparent; margin: calc(var(--vaadin-avatar-outline-width) * -1); background-clip: content-box; - --vaadin-avatar-outline-width: 2px; + --vaadin-avatar-outline-width: var(--_focus-ring-width, 2px); } img { diff --git a/packages/avatar/theme/lumo/vaadin-avatar-styles.js b/packages/avatar/theme/lumo/vaadin-avatar-styles.js index 7fcf161a1c..f99651e70d 100644 --- a/packages/avatar/theme/lumo/vaadin-avatar-styles.js +++ b/packages/avatar/theme/lumo/vaadin-avatar-styles.js @@ -30,7 +30,7 @@ registerStyles( } :host([focus-ring]) { - border-color: var(--lumo-primary-color-50pct); + border-color: var(--_focus-ring-color); } [part='icon'], diff --git a/packages/button/theme/lumo/vaadin-button-styles.js b/packages/button/theme/lumo/vaadin-button-styles.js index d65839a417..ce5bea894a 100644 --- a/packages/button/theme/lumo/vaadin-button-styles.js +++ b/packages/button/theme/lumo/vaadin-button-styles.js @@ -92,7 +92,7 @@ const button = css` /* Keyboard focus */ :host([focus-ring]) { - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } :host([theme~='primary'][focus-ring]) { diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js index b453151ec7..cee8a51d49 100644 --- a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js @@ -87,7 +87,7 @@ registerStyles( /* Focus ring */ :host([focus-ring]) [part='checkbox'] { - box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct), + box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color), inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color); } diff --git a/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js b/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js index 21488eac03..9b255bb7d2 100644 --- a/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js +++ b/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js @@ -13,7 +13,7 @@ const comboBoxItem = css` @media (any-hover: hover) { :host([focused]:not([disabled])) { - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } } `; diff --git a/packages/crud/theme/lumo/vaadin-crud-styles.js b/packages/crud/theme/lumo/vaadin-crud-styles.js index 7642cabf41..7f2f915924 100644 --- a/packages/crud/theme/lumo/vaadin-crud-styles.js +++ b/packages/crud/theme/lumo/vaadin-crud-styles.js @@ -105,7 +105,7 @@ registerStyles( position: absolute; inset: 0; content: ''; - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } :host(:not([editor-position=''])) [part='editor']:not([hidden]) { diff --git a/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js b/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js index 359fde170a..beedc0e4af 100644 --- a/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js +++ b/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js @@ -98,7 +98,7 @@ registerStyles( } [part~='date'][part~='focused']::before { - box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color); } :host(:not([focused])) [part~='date'][part~='focused']::before { @@ -107,7 +107,7 @@ registerStyles( @keyframes vaadin-date-picker-month-calendar-focus-date { 50% { - box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px transparent; + box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) transparent; } } @@ -157,7 +157,7 @@ template.innerHTML = ` diff --git a/packages/details/theme/lumo/vaadin-details-styles.js b/packages/details/theme/lumo/vaadin-details-styles.js index 1e938c8097..5ca4faf94f 100644 --- a/packages/details/theme/lumo/vaadin-details-styles.js +++ b/packages/details/theme/lumo/vaadin-details-styles.js @@ -11,7 +11,7 @@ const details = css` } :host([focus-ring]) ::slotted([slot='summary']) { - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } [part='content'] { diff --git a/packages/grid-pro/theme/lumo/vaadin-grid-pro-editor-styles.js b/packages/grid-pro/theme/lumo/vaadin-grid-pro-editor-styles.js index 5d53118318..32a306b2dc 100644 --- a/packages/grid-pro/theme/lumo/vaadin-grid-pro-editor-styles.js +++ b/packages/grid-pro/theme/lumo/vaadin-grid-pro-editor-styles.js @@ -12,7 +12,7 @@ const gridProEditor = css` font-size: inherit; --lumo-text-field-size: 27px; /* outline similar to what grid uses */ - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } :host([theme~='grid-pro-editor']) [part='input-field'] { diff --git a/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js b/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js index c850852d71..e1da2fa5c9 100644 --- a/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js +++ b/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js @@ -10,7 +10,7 @@ registerStyles( position: absolute; inset: 0; pointer-events: none; - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } [part~='editable-cell'], diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js index 97461ce78c..059e6b98fb 100644 --- a/packages/grid/theme/lumo/vaadin-grid-styles.js +++ b/packages/grid/theme/lumo/vaadin-grid-styles.js @@ -81,7 +81,7 @@ registerStyles( position: absolute; inset: 0; pointer-events: none; - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } :host([navigating]) [part~='row']:focus::before { @@ -96,7 +96,7 @@ registerStyles( z-index: 100; inset: 0; pointer-events: none; - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } [part~='row'][dragover] { diff --git a/packages/item/theme/lumo/vaadin-item-styles.js b/packages/item/theme/lumo/vaadin-item-styles.js index 842faa8d42..3e48005110 100644 --- a/packages/item/theme/lumo/vaadin-item-styles.js +++ b/packages/item/theme/lumo/vaadin-item-styles.js @@ -69,7 +69,7 @@ const item = css` } :host([focus-ring]:not([disabled])) { - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } } diff --git a/packages/map/theme/lumo/vaadin-map-styles.js b/packages/map/theme/lumo/vaadin-map-styles.js index 77cfc6aa7c..e5b5657a76 100644 --- a/packages/map/theme/lumo/vaadin-map-styles.js +++ b/packages/map/theme/lumo/vaadin-map-styles.js @@ -48,7 +48,7 @@ registerStyles( } :host([focus-ring]) { - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } .ol-control, @@ -106,13 +106,13 @@ registerStyles( @supports not selector(:focus-visible) { .ol-control button:focus { outline: none; - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } } .ol-control button:focus-visible { outline: none; - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } .ol-zoom { diff --git a/packages/message-list/theme/lumo/vaadin-message-styles.js b/packages/message-list/theme/lumo/vaadin-message-styles.js index 02a2a70525..2b30a6bb4b 100644 --- a/packages/message-list/theme/lumo/vaadin-message-styles.js +++ b/packages/message-list/theme/lumo/vaadin-message-styles.js @@ -21,7 +21,7 @@ registerStyles( } :host([focus-ring]) { - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } [part='header'] { diff --git a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js index 50ad093048..70deb737ac 100644 --- a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js +++ b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js @@ -107,7 +107,7 @@ registerStyles( } :host([focus-ring]) [part='radio'] { - box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct), + box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color), inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color); } diff --git a/packages/rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js b/packages/rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js index 167c433250..3f60a90f18 100644 --- a/packages/rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js +++ b/packages/rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js @@ -32,7 +32,7 @@ const richTextEditor = css` [part~='toolbar-button']:focus { outline: none; - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } [part~='toolbar-button']:hover { diff --git a/packages/scroller/theme/lumo/vaadin-scroller-styles.js b/packages/scroller/theme/lumo/vaadin-scroller-styles.js index ef85d4f1b6..e64db59b3f 100644 --- a/packages/scroller/theme/lumo/vaadin-scroller-styles.js +++ b/packages/scroller/theme/lumo/vaadin-scroller-styles.js @@ -1,4 +1,5 @@ import '@vaadin/vaadin-lumo-styles/color.js'; +import '@vaadin/vaadin-lumo-styles/style.js'; import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; const scroller = css` @@ -7,7 +8,7 @@ const scroller = css` } :host([focus-ring]) { - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } /* Show dividers when content overflows */ diff --git a/packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js b/packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js index 340ffb56e6..e184e02b09 100644 --- a/packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js +++ b/packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js @@ -74,7 +74,7 @@ export const sideNavItemStyles = css` [part='link']:focus-visible, [part='toggle-button']:focus-visible { border-radius: var(--lumo-border-radius-m); - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } } diff --git a/packages/side-nav/theme/lumo/vaadin-side-nav-styles.js b/packages/side-nav/theme/lumo/vaadin-side-nav-styles.js index 95621237ff..3b683edee2 100644 --- a/packages/side-nav/theme/lumo/vaadin-side-nav-styles.js +++ b/packages/side-nav/theme/lumo/vaadin-side-nav-styles.js @@ -35,7 +35,7 @@ export const sideNavStyles = css` } :host([focus-ring]) [part='label'] { - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } [part='toggle-button'] { diff --git a/packages/tabs/theme/lumo/vaadin-tab-styles.js b/packages/tabs/theme/lumo/vaadin-tab-styles.js index 9b9e1b011c..5e5fa2a883 100644 --- a/packages/tabs/theme/lumo/vaadin-tab-styles.js +++ b/packages/tabs/theme/lumo/vaadin-tab-styles.js @@ -198,7 +198,7 @@ registerStyles( /* Focus-ring */ :host([focus-ring]) { - box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); border-radius: var(--lumo-border-radius-m); } diff --git a/packages/upload/theme/lumo/vaadin-upload-styles.js b/packages/upload/theme/lumo/vaadin-upload-styles.js index f724fb0af2..c8985b2f5b 100644 --- a/packages/upload/theme/lumo/vaadin-upload-styles.js +++ b/packages/upload/theme/lumo/vaadin-upload-styles.js @@ -81,7 +81,7 @@ const uploadFile = css` :host([focus-ring]) [part='row'] { border-radius: var(--lumo-border-radius-s); - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } [part='row'] { @@ -141,7 +141,7 @@ const uploadFile = css` [part$='button']:focus { outline: none; border-radius: var(--lumo-border-radius-s); - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } [part$='icon']::before, diff --git a/packages/vaadin-lumo-styles/mixins/input-field-shared.js b/packages/vaadin-lumo-styles/mixins/input-field-shared.js index fd4c180b9a..8d82dc89c4 100644 --- a/packages/vaadin-lumo-styles/mixins/input-field-shared.js +++ b/packages/vaadin-lumo-styles/mixins/input-field-shared.js @@ -78,7 +78,7 @@ const inputField = css` /* Focus-ring */ :host([focus-ring]) [part='input-field'] { - box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); + box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } /* Read-only and disabled */ diff --git a/packages/vaadin-lumo-styles/style.js b/packages/vaadin-lumo-styles/style.js index cf3b96c39e..f385d0327b 100644 --- a/packages/vaadin-lumo-styles/style.js +++ b/packages/vaadin-lumo-styles/style.js @@ -23,6 +23,10 @@ const style = css` /* Clickable element cursor */ --lumo-clickable-cursor: default; + + /* Focus */ + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); } `; From 469de3a4005c522bd3afe7e5c820f49378b06a09 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Mon, 16 Oct 2023 11:42:09 +0300 Subject: [PATCH 2/2] fix: allow custom property to be set on the instance --- dev/focus-ring.html | 4 ++++ packages/avatar/src/vaadin-avatar-styles.js | 2 +- packages/avatar/theme/lumo/vaadin-avatar-styles.js | 2 +- packages/button/theme/lumo/vaadin-button-styles.js | 2 ++ packages/checkbox/theme/lumo/vaadin-checkbox-styles.js | 2 ++ .../combo-box/theme/lumo/vaadin-combo-box-item-styles.js | 2 ++ packages/crud/theme/lumo/vaadin-crud-styles.js | 2 ++ .../date-picker/theme/lumo/vaadin-month-calendar-styles.js | 2 ++ packages/details/theme/lumo/vaadin-details-styles.js | 2 ++ packages/grid/theme/lumo/vaadin-grid-styles.js | 3 ++- packages/item/theme/lumo/vaadin-item-styles.js | 2 ++ packages/map/theme/lumo/vaadin-map-styles.js | 2 ++ packages/message-list/theme/lumo/vaadin-message-styles.js | 2 ++ .../radio-group/theme/lumo/vaadin-radio-button-styles.js | 2 ++ .../theme/lumo/vaadin-rich-text-editor-styles.js | 2 ++ packages/scroller/theme/lumo/vaadin-scroller-styles.js | 2 ++ packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js | 5 +++++ packages/side-nav/theme/lumo/vaadin-side-nav-styles.js | 2 ++ packages/tabs/theme/lumo/vaadin-tab-styles.js | 2 ++ packages/upload/theme/lumo/vaadin-upload-styles.js | 2 ++ packages/vaadin-lumo-styles/mixins/input-field-shared.js | 2 ++ packages/vaadin-lumo-styles/style.js | 6 ++---- 22 files changed, 47 insertions(+), 7 deletions(-) diff --git a/dev/focus-ring.html b/dev/focus-ring.html index f862d3d8a5..a1bb07944c 100644 --- a/dev/focus-ring.html +++ b/dev/focus-ring.html @@ -28,6 +28,10 @@ --vaadin-focus-ring-color: purple; --vaadin-focus-ring-width: 1px; } + + vaadin-button { + --vaadin-focus-ring-color: green; + } diff --git a/packages/avatar/src/vaadin-avatar-styles.js b/packages/avatar/src/vaadin-avatar-styles.js index fd71e14456..19c7b4682f 100644 --- a/packages/avatar/src/vaadin-avatar-styles.js +++ b/packages/avatar/src/vaadin-avatar-styles.js @@ -16,7 +16,7 @@ export const avatarStyles = css` border: var(--vaadin-avatar-outline-width) solid transparent; margin: calc(var(--vaadin-avatar-outline-width) * -1); background-clip: content-box; - --vaadin-avatar-outline-width: var(--_focus-ring-width, 2px); + --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px); } img { diff --git a/packages/avatar/theme/lumo/vaadin-avatar-styles.js b/packages/avatar/theme/lumo/vaadin-avatar-styles.js index f99651e70d..b77d6063fd 100644 --- a/packages/avatar/theme/lumo/vaadin-avatar-styles.js +++ b/packages/avatar/theme/lumo/vaadin-avatar-styles.js @@ -30,7 +30,7 @@ registerStyles( } :host([focus-ring]) { - border-color: var(--_focus-ring-color); + border-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); } [part='icon'], diff --git a/packages/button/theme/lumo/vaadin-button-styles.js b/packages/button/theme/lumo/vaadin-button-styles.js index ce5bea894a..d73afbac61 100644 --- a/packages/button/theme/lumo/vaadin-button-styles.js +++ b/packages/button/theme/lumo/vaadin-button-styles.js @@ -26,6 +26,8 @@ const button = css` -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; flex-shrink: 0; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } /* Set only for the internal parts so we don't affect the host vertical alignment */ diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js index cee8a51d49..ae689937b4 100644 --- a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js @@ -23,6 +23,8 @@ registerStyles( cursor: default; outline: none; --_checkbox-size: var(--vaadin-checkbox-size, calc(var(--lumo-size-m) / 2)); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host([has-label]) ::slotted(label) { diff --git a/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js b/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js index 9b255bb7d2..0ac0e0f243 100644 --- a/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js +++ b/packages/combo-box/theme/lumo/vaadin-combo-box-item-styles.js @@ -9,6 +9,8 @@ const comboBoxItem = css` transition: background-color 100ms; overflow: hidden; --_lumo-item-selected-icon-display: block; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } @media (any-hover: hover) { diff --git a/packages/crud/theme/lumo/vaadin-crud-styles.js b/packages/crud/theme/lumo/vaadin-crud-styles.js index 7f2f915924..4c87ca3615 100644 --- a/packages/crud/theme/lumo/vaadin-crud-styles.js +++ b/packages/crud/theme/lumo/vaadin-crud-styles.js @@ -60,6 +60,8 @@ registerStyles( css` :host { font-family: var(--lumo-font-family); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } [part='scroller'] { diff --git a/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js b/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js index beedc0e4af..c046088e0f 100644 --- a/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js +++ b/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js @@ -17,6 +17,8 @@ registerStyles( color: var(--lumo-body-text-color); text-align: center; padding: 0 var(--lumo-space-xs); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } /* Month header */ diff --git a/packages/details/theme/lumo/vaadin-details-styles.js b/packages/details/theme/lumo/vaadin-details-styles.js index 5ca4faf94f..24d09dd6cb 100644 --- a/packages/details/theme/lumo/vaadin-details-styles.js +++ b/packages/details/theme/lumo/vaadin-details-styles.js @@ -8,6 +8,8 @@ const details = css` :host { margin: var(--lumo-space-xs) 0; outline: none; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host([focus-ring]) ::slotted([slot='summary']) { diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js index 059e6b98fb..24eb239fd3 100644 --- a/packages/grid/theme/lumo/vaadin-grid-styles.js +++ b/packages/grid/theme/lumo/vaadin-grid-styles.js @@ -21,7 +21,8 @@ registerStyles( -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); /* For internal use only */ --_lumo-grid-border-color: var(--lumo-contrast-20pct); --_lumo-grid-secondary-border-color: var(--lumo-contrast-10pct); diff --git a/packages/item/theme/lumo/vaadin-item-styles.js b/packages/item/theme/lumo/vaadin-item-styles.js index 3e48005110..2e37dba18f 100644 --- a/packages/item/theme/lumo/vaadin-item-styles.js +++ b/packages/item/theme/lumo/vaadin-item-styles.js @@ -22,6 +22,8 @@ const item = css` -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: var(--lumo-primary-color-10pct); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } /* Checkmark */ diff --git a/packages/map/theme/lumo/vaadin-map-styles.js b/packages/map/theme/lumo/vaadin-map-styles.js index e5b5657a76..69db8360bc 100644 --- a/packages/map/theme/lumo/vaadin-map-styles.js +++ b/packages/map/theme/lumo/vaadin-map-styles.js @@ -30,6 +30,8 @@ registerStyles( --vaadin-map-icon-overview-map-expand: var(--lumo-icons-angle-up); --vaadin-map-icon-close: var(--lumo-icons-cross); --vaadin-map-icon-attribution-collapse: var(--lumo-icons-angle-right); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host(:not([theme~='borderless'])) { diff --git a/packages/message-list/theme/lumo/vaadin-message-styles.js b/packages/message-list/theme/lumo/vaadin-message-styles.js index 2b30a6bb4b..70c8ccea54 100644 --- a/packages/message-list/theme/lumo/vaadin-message-styles.js +++ b/packages/message-list/theme/lumo/vaadin-message-styles.js @@ -18,6 +18,8 @@ registerStyles( -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host([focus-ring]) { diff --git a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js index 70deb737ac..7ecca86815 100644 --- a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js +++ b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js @@ -22,6 +22,8 @@ registerStyles( cursor: default; outline: none; --_radio-button-size: var(--vaadin-radio-button-size, calc(var(--lumo-size-m) / 2)); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host([has-label]) ::slotted(label) { diff --git a/packages/rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js b/packages/rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js index 3f60a90f18..943b54ffeb 100644 --- a/packages/rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js +++ b/packages/rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js @@ -9,6 +9,8 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab const richTextEditor = css` :host { min-height: calc(var(--lumo-size-m) * 8); + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } [part='toolbar'] { diff --git a/packages/scroller/theme/lumo/vaadin-scroller-styles.js b/packages/scroller/theme/lumo/vaadin-scroller-styles.js index e64db59b3f..a2646c2c7e 100644 --- a/packages/scroller/theme/lumo/vaadin-scroller-styles.js +++ b/packages/scroller/theme/lumo/vaadin-scroller-styles.js @@ -5,6 +5,8 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab const scroller = css` :host { outline: none; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host([focus-ring]) { diff --git a/packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js b/packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js index e184e02b09..eda3e16821 100644 --- a/packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js +++ b/packages/side-nav/theme/lumo/vaadin-side-nav-item-styles.js @@ -8,6 +8,11 @@ import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js'; import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; export const sideNavItemStyles = css` + :host { + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); + } + [part='link'] { width: 100%; gap: var(--lumo-space-xs); diff --git a/packages/side-nav/theme/lumo/vaadin-side-nav-styles.js b/packages/side-nav/theme/lumo/vaadin-side-nav-styles.js index 3b683edee2..6f5f6ea572 100644 --- a/packages/side-nav/theme/lumo/vaadin-side-nav-styles.js +++ b/packages/side-nav/theme/lumo/vaadin-side-nav-styles.js @@ -14,6 +14,8 @@ export const sideNavStyles = css` line-height: var(--lumo-line-height-xs); color: var(--lumo-body-text-color); -webkit-tap-highlight-color: transparent; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } [part='label'] { diff --git a/packages/tabs/theme/lumo/vaadin-tab-styles.js b/packages/tabs/theme/lumo/vaadin-tab-styles.js index 5e5fa2a883..2619340861 100644 --- a/packages/tabs/theme/lumo/vaadin-tab-styles.js +++ b/packages/tabs/theme/lumo/vaadin-tab-styles.js @@ -31,6 +31,8 @@ registerStyles( -webkit-user-select: none; -moz-user-select: none; user-select: none; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host(:not([orientation='vertical'])) { diff --git a/packages/upload/theme/lumo/vaadin-upload-styles.js b/packages/upload/theme/lumo/vaadin-upload-styles.js index c8985b2f5b..b5fe2e804f 100644 --- a/packages/upload/theme/lumo/vaadin-upload-styles.js +++ b/packages/upload/theme/lumo/vaadin-upload-styles.js @@ -77,6 +77,8 @@ const uploadFile = css` :host { padding: var(--lumo-space-s) 0; outline: none; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host([focus-ring]) [part='row'] { diff --git a/packages/vaadin-lumo-styles/mixins/input-field-shared.js b/packages/vaadin-lumo-styles/mixins/input-field-shared.js index 8d82dc89c4..ef815b704d 100644 --- a/packages/vaadin-lumo-styles/mixins/input-field-shared.js +++ b/packages/vaadin-lumo-styles/mixins/input-field-shared.js @@ -24,6 +24,8 @@ const inputField = css` -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; padding: var(--lumo-space-xs) 0; + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); + --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); } :host::before { diff --git a/packages/vaadin-lumo-styles/style.js b/packages/vaadin-lumo-styles/style.js index f385d0327b..0c03483e22 100644 --- a/packages/vaadin-lumo-styles/style.js +++ b/packages/vaadin-lumo-styles/style.js @@ -23,10 +23,6 @@ const style = css` /* Clickable element cursor */ --lumo-clickable-cursor: default; - - /* Focus */ - --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); - --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); } `; @@ -38,6 +34,8 @@ const globals = css` --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2); --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2); --vaadin-input-field-border-radius: var(--lumo-border-radius-m); + --vaadin-focus-ring-color: var(--lumo-primary-color-50pct); + --vaadin-focus-ring-width: 2px; } `;