feat: add Lumo text input field custom CSS properties (#6659)

vaadin · Oct 18, 2023 · 6cb4ea9 · 6cb4ea9
1 parent 4dcc890
commit 6cb4ea9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/packages/input-container/theme/lumo/vaadin-input-container-styles.js b/packages/input-container/theme/lumo/vaadin-input-container-styles.js
@@ -68,7 +68,7 @@ registerStyles(
     :host([readonly])::after {
       background-color: transparent;
       opacity: 1;
-      border: 1px dashed var(--lumo-contrast-30pct);
+      border: var(--vaadin-text-input-field-readonly-border, 1px dashed var(--lumo-contrast-30pct));
     }
 
     /* Disabled */

diff --git a/packages/select/theme/lumo/vaadin-select-styles.js b/packages/select/theme/lumo/vaadin-select-styles.js
@@ -31,7 +31,7 @@ const select = css`
   }
 
   [part='input-field'] ::slotted([slot='value']:not([placeholder])) {
-    color: var(--lumo-body-text-color);
+    color: var(--vaadin-text-input-field-value-color, var(--lumo-body-text-color));
   }
 
   :host([readonly]) [part='input-field'] ::slotted([slot='value']:not([placeholder])) {
@@ -40,7 +40,7 @@ const select = css`
 
   /* placeholder styles */
   [part='input-field'] ::slotted([slot='value'][placeholder]) {
-    color: var(--lumo-secondary-text-color);
+    color: var(--vaadin-text-input-field-placeholder-color, var(--lumo-secondary-text-color));
   }
 
   :host(:is([readonly], [disabled])) ::slotted([slot='value'][placeholder]) {
@@ -69,7 +69,7 @@ registerStyles(
   css`
     :host {
       font-family: var(--lumo-font-family);
-      font-size: var(--lumo-font-size-m);
+      font-size: var(--vaadin-text-input-field-value-font-size, var(--lumo-font-size-m));
       padding: 0 0.25em;
       --_lumo-selected-item-height: var(--lumo-size-m);
       --_lumo-selected-item-padding: 0.5em;

diff --git a/packages/vaadin-lumo-styles/mixins/input-field-shared.js b/packages/vaadin-lumo-styles/mixins/input-field-shared.js
@@ -17,19 +17,21 @@ import { requiredField } from './required-field.js';
 const inputField = css`
   :host {
     --lumo-text-field-size: var(--lumo-size-m);
-    color: var(--lumo-body-text-color);
-    font-size: var(--lumo-font-size-m);
+    color: var(--vaadin-text-input-field-value-color, var(--lumo-body-text-color));
+    font-size: var(--vaadin-text-input-field-value-font-size, var(--lumo-font-size-m));
+    font-weight: var(--vaadin-text-input-field-value-font-weight, 400);
     font-family: var(--lumo-font-family);
     -webkit-font-smoothing: antialiased;
     -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);
+    --_input-height: var(--vaadin-text-input-field-height, var(--lumo-text-field-size));
   }
 
   :host::before {
-    height: var(--lumo-text-field-size);
+    height: var(--_input-height);
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
@@ -45,7 +47,7 @@ const inputField = css`
   }
 
   ::slotted(:is(input, textarea):placeholder-shown) {
-    color: var(--lumo-secondary-text-color);
+    color: var(--vaadin-text-input-field-placeholder-color, var(--lumo-secondary-text-color));
   }
 
   /* Hover */

diff --git a/packages/vaadin-lumo-styles/style.js b/packages/vaadin-lumo-styles/style.js
@@ -36,6 +36,12 @@ const globals = css`
     --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
     --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
     --vaadin-focus-ring-width: 2px;
+    --vaadin-text-input-field-height: var(--lumo-size-m);
+    --vaadin-text-input-field-placeholder-color: var(--lumo-secondary-text-color);
+    --vaadin-text-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
+    --vaadin-text-input-field-value-color: var(--lumo-body-text-color);
+    --vaadin-text-input-field-value-font-size: var(--lumo-font-size-m);
+    --vaadin-text-input-field-value-font-weight: 400;
   }
 `;