diff --git a/dev/focus-ring.html b/dev/focus-ring.html
new file mode 100644
index 00000000000..a1bb07944cf
--- /dev/null
+++ b/dev/focus-ring.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+ 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 fecd075c214..19c7b4682fa 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(--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 7fcf161a1c5..b77d6063fdd 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(--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 d65839a417a..d73afbac61d 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 */
@@ -92,7 +94,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 b453151ec73..ae689937b42 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) {
@@ -87,7 +89,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 21488eac03e..0ac0e0f243e 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,11 +9,13 @@ 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) {
: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 7642cabf410..4c87ca36154 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'] {
@@ -105,7 +107,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 359fde170ae..c046088e0f6 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 */
@@ -98,7 +100,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 +109,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 +159,7 @@ template.innerHTML = `
diff --git a/packages/details/theme/lumo/vaadin-details-styles.js b/packages/details/theme/lumo/vaadin-details-styles.js
index 1e938c80972..24d09dd6cb7 100644
--- a/packages/details/theme/lumo/vaadin-details-styles.js
+++ b/packages/details/theme/lumo/vaadin-details-styles.js
@@ -8,10 +8,12 @@ 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']) {
- 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 5d53118318a..32a306b2dc3 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 c850852d711..e1da2fa5c9e 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 ce9f8df5496..d23229afcf6 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);
@@ -82,7 +83,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 {
@@ -97,7 +98,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 842faa8d42e..2e37dba18f8 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 */
@@ -69,7 +71,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 77cfc6aa7c8..69db8360bc3 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'])) {
@@ -48,7 +50,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 +108,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 02a2a705253..70c8ccea54c 100644
--- a/packages/message-list/theme/lumo/vaadin-message-styles.js
+++ b/packages/message-list/theme/lumo/vaadin-message-styles.js
@@ -18,10 +18,12 @@ 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]) {
- 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 50ad0930488..7ecca868154 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) {
@@ -107,7 +109,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 167c433250f..943b54ffeb6 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'] {
@@ -32,7 +34,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 ef85d4f1b6f..a2646c2c7ec 100644
--- a/packages/scroller/theme/lumo/vaadin-scroller-styles.js
+++ b/packages/scroller/theme/lumo/vaadin-scroller-styles.js
@@ -1,13 +1,16 @@
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`
: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]) {
- 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 340ffb56e6d..eda3e168219 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);
@@ -74,7 +79,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 95621237ffc..6f5f6ea572a 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'] {
@@ -35,7 +37,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 9b9e1b011cc..2619340861b 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'])) {
@@ -198,7 +200,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 f724fb0af24..b5fe2e804f5 100644
--- a/packages/upload/theme/lumo/vaadin-upload-styles.js
+++ b/packages/upload/theme/lumo/vaadin-upload-styles.js
@@ -77,11 +77,13 @@ 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'] {
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 +143,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 fd4c180b9aa..ef815b704d5 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 {
@@ -78,7 +80,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 cf3b96c39e7..0c03483e22f 100644
--- a/packages/vaadin-lumo-styles/style.js
+++ b/packages/vaadin-lumo-styles/style.js
@@ -34,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;
}
`;