feat: support base style properties for Lumo required indicator (#10565)

Author: web-padawan

packages/vaadin-lumo-styles/mixins/required-field.js

@@ -62,16 +62,22 @@ const requiredField = css`
   }
 
   :host([required]) [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '\\2022');
-    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
+    );
     position: absolute;
     right: 0;
     width: 1em;
     text-align: center;
   }
 
   :host([invalid]) [part='required-indicator']::after {
-    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-error-text-color))
+    );
   }
 
   [part='error-message'] {

packages/vaadin-lumo-styles/src/components/checkbox.css

@@ -225,9 +225,12 @@
   }
 
   :host([required]) [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '\2022');
+    content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
     transition: opacity 0.2s;
-    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
+    );
     width: 1em;
     text-align: center;
   }
@@ -257,7 +260,10 @@
   }
 
   :host([invalid]) [part='required-indicator']::after {
-    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-error-text-color))
+    );
   }
 
   /* Error message */

packages/vaadin-lumo-styles/src/components/form-item.css

@@ -17,10 +17,13 @@
   }
 
   [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '\2022');
+    content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
     transition: opacity 0.2s;
     opacity: 0;
-    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
+    );
     position: relative;
     width: 1em;
     text-align: center;
@@ -31,6 +34,9 @@
   }
 
   :host([invalid]) [part='required-indicator']::after {
-    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-error-text-color))
+    );
   }
 }

packages/vaadin-lumo-styles/src/mixins/field-required.css

@@ -5,16 +5,22 @@
  */
 @media lumo_mixins_field-required {
   :host([required]) [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '\2022');
-    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
+    );
     position: absolute;
     right: 0;
     width: 1em;
     text-align: center;
   }
 
   :host([invalid]) [part='required-indicator']::after {
-    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-error-text-color))
+    );
   }
 
   /* RTL specific styles */