diff --git a/packages/input-container/theme/lumo/vaadin-input-container-styles.js b/packages/input-container/theme/lumo/vaadin-input-container-styles.js index 407b54cb92..ad137c4c42 100644 --- 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 index f2cea58929..39e0abcc53 100644 --- 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 index ef815b704d..2fcef66eab 100644 --- a/packages/vaadin-lumo-styles/mixins/input-field-shared.js +++ b/packages/vaadin-lumo-styles/mixins/input-field-shared.js @@ -17,8 +17,9 @@ 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; @@ -26,10 +27,11 @@ const inputField = css` 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 index 0c03483e22..c818216adc 100644 --- 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; } `;