feat: add Lumo custom properties for input field label

vaadin · Oct 12, 2023 · da2e005 · da2e005
1 parent 8f31475
commit da2e005
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/packages/vaadin-lumo-styles/mixins/input-field-shared.js b/packages/vaadin-lumo-styles/mixins/input-field-shared.js
@@ -33,10 +33,6 @@ const inputField = css`
     align-items: center;
   }
 
-  :host([focused]:not([readonly])) [part='label'] {
-    color: var(--lumo-primary-text-color);
-  }
-
   :host([focused]) [part='input-field'] ::slotted(:is(input, textarea)) {
     -webkit-mask-image: none;
     mask-image: none;
@@ -47,20 +43,12 @@ const inputField = css`
   }
 
   /* Hover */
-  :host(:hover:not([readonly]):not([focused])) [part='label'] {
-    color: var(--lumo-body-text-color);
-  }
-
   :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
     opacity: 0.1;
   }
 
   /* Touch device adjustment */
   @media (pointer: coarse) {
-    :host(:hover:not([readonly]):not([focused])) [part='label'] {
-      color: var(--lumo-secondary-text-color);
-    }
-
     :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
       opacity: 0;
     }

diff --git a/packages/vaadin-lumo-styles/mixins/required-field.js b/packages/vaadin-lumo-styles/mixins/required-field.js
@@ -12,15 +12,15 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 const requiredField = css`
   [part='label'] {
     align-self: flex-start;
-    color: var(--lumo-secondary-text-color);
-    font-weight: 500;
-    font-size: var(--lumo-font-size-s);
+    color: var(--_label-color-default);
+    font-weight: var(--_label-font-weight);
+    font-size: var(--_label-font-size);
     margin-left: calc(var(--lumo-border-radius-m) / 4);
     transition: color 0.2s;
     line-height: 1;
     padding-right: 1em;
     padding-bottom: 0.5em;
-    /* As a workaround for diacritics being cut off, add a top padding and a 
+    /* As a workaround for diacritics being cut off, add a top padding and a
     negative margin to compensate */
     padding-top: 0.25em;
     margin-top: -0.25em;
@@ -30,6 +30,27 @@ const requiredField = css`
     position: relative;
     max-width: 100%;
     box-sizing: border-box;
+    /* Label properties */
+    --_label-color-default: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
+    --_label-color-focused: var(--vaadin-input-field-focused-label-color, var(--lumo-primary-text-color));
+    --_label-color-hovered: var(--vaadin-input-field-hovered-label-color, var(--lumo-body-text-color));
+    --_label-font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s));
+    --_label-font-weight: var(--vaadin-input-field-label-font-weight, 500);
+  }
+
+  :host([focused]:not([readonly])) [part='label'] {
+    color: var(--_label-color-focused);
+  }
+
+  :host(:hover:not([readonly]):not([focused])) [part='label'] {
+    color: var(--_label-color-hovered);
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([focused])) [part='label'] {
+      color: var(--_label-color-default);
+    }
   }
 
   :host([has-label])::before {