Update styles for field, inherited by label

vaadin · Jan 29, 2019 · 1fa65d2 · 1fa65d2
1 parent df39db1
commit 1fa65d2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/theme/lumo/vaadin-custom-field-styles.html b/theme/lumo/vaadin-custom-field-styles.html
@@ -1,8 +1,22 @@
+<link rel="import" href="../../../vaadin-lumo-styles/color.html">
+<link rel="import" href="../../../vaadin-lumo-styles/sizing.html">
+<link rel="import" href="../../../vaadin-lumo-styles/spacing.html">
+<link rel="import" href="../../../vaadin-lumo-styles/typography.html">
 <link rel="import" href="../../../vaadin-lumo-styles/mixins/required-field.html">
 
 <dom-module id="lumo-custom-field" theme-for="vaadin-custom-field">
   <template>
     <style include="lumo-required-field">
+      :host {
+        color: var(--lumo-body-text-color);
+        font-size: var(--lumo-font-size-m);
+        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;
+      }
+
       :host(:not([has-label])) [part="label"]::after {
         display: none;
       }

diff --git a/theme/material/vaadin-custom-field-styles.html b/theme/material/vaadin-custom-field-styles.html
@@ -1,8 +1,19 @@
+<link rel="import" href="../../../vaadin-material-styles/color.html">
+<link rel="import" href="../../../vaadin-material-styles/typography.html">
 <link rel="import" href="../../../vaadin-material-styles/mixins/required-field.html">
 
 <dom-module id="material-custom-field" theme-for="vaadin-custom-field">
   <template>
     <style include="material-required-field">
+      :host {
+        outline: none;
+        color: var(--material-body-text-color);
+        font-size: var(--material-body-font-size);
+        font-family: var(--material-font-family);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
       [part="label"] {
         position: relative;
         top: 0;