feat: add Lumo custom CSS properties to set focus-ring (#6634)

vaadin · Oct 17, 2023 · fc54a1d · fc54a1d
1 parent fb06ef3
commit fc54a1d
Show file tree

Hide file tree

Showing 24 changed files with 150 additions and 29 deletions.
diff --git a/dev/focus-ring.html b/dev/focus-ring.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Focus ring</title>
+    <script type="module" src="./common.js"></script>
+
+    <script type="module">
+      import '@vaadin/avatar';
+      import '@vaadin/button';
+      import '@vaadin/checkbox';
+      import '@vaadin/combo-box';
+      import '@vaadin/date-picker';
+      import '@vaadin/details';
+      import '@vaadin/item';
+      import '@vaadin/list-box';
+      import '@vaadin/radio-group';
+      import '@vaadin/password-field';
+      import '@vaadin/rich-text-editor';
+      import '@vaadin/tabs';
+      import '@vaadin/text-field';
+    </script>
+
+    <style>
+      html {
+        --vaadin-focus-ring-color: purple;
+        --vaadin-focus-ring-width: 1px;
+      }
+
+      vaadin-button {
+        --vaadin-focus-ring-color: green;
+      }
+    </style>
+  </head>
+
+  <body>
+    <vaadin-avatar></vaadin-avatar>
+
+    <vaadin-button>Button</vaadin-button>
+
+    <vaadin-checkbox label="Checkbox"></vaadin-checkbox>
+
+    <vaadin-radio-group label="Radio group">
+      <vaadin-radio-button value="y" label="Yes"></vaadin-radio-button>
+      <vaadin-radio-button value="n" label="No"></vaadin-radio-button>
+    </vaadin-radio-group>
+
+    <vaadin-details summary="Details">
+      <div>Toggle using mouse, Enter and Space keys.</div>
+    </vaadin-details>
+
+    <br />
+
+    <vaadin-list-box>
+      <vaadin-item>Foo</vaadin-item>
+      <vaadin-item>Bar</vaadin-item>
+    </vaadin-list-box>
+
+    <br />
+
+    <vaadin-combo-box label="Combo box" items='["Foo", "Bar", "Baz"]'></vaadin-combo-box>
+
+    <vaadin-text-field label="Text field"></vaadin-text-field>
+
+    <vaadin-password-field label="Password field"></vaadin-password-field>
+
+    <vaadin-date-picker label="Date picker"></vaadin-date-picker>
+
+    <vaadin-tabs>
+      <vaadin-tab>Foo</vaadin-tab>
+      <vaadin-tab>Bar</vaadin-tab>
+    </vaadin-tabs>
+
+    <br />
+
+    <vaadin-rich-text-editor></vaadin-rich-text-editor>
+  </body>
+</html>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = `
   <style>
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
-        box-shadow: 0 0 0 2px transparent;
+        box-shadow: 0 0 0 var(--_focus-ring-width) transparent;
       }
     }
   </style>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 */