refactor!: rename CSS property for input-field border radius (#5600) (#5601)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/date-time-picker/theme/lumo/vaadin-date-time-picker-styles.js

@@ -8,13 +8,13 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 const dateTimePicker = css`
   ::slotted([slot='date-picker']) {
     margin-inline-end: 2px;
-    --vaadin-input-container-top-end-radius: 0;
-    --vaadin-input-container-bottom-end-radius: 0;
+    --vaadin-input-field-top-end-radius: 0;
+    --vaadin-input-field-bottom-end-radius: 0;
   }
 
   ::slotted([slot='time-picker']) {
-    --vaadin-input-container-top-start-radius: 0;
-    --vaadin-input-container-bottom-start-radius: 0;
+    --vaadin-input-field-top-start-radius: 0;
+    --vaadin-input-field-bottom-start-radius: 0;
   }
 `;
 

packages/input-container/src/vaadin-input-container.js

@@ -21,20 +21,20 @@ export class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
           flex: 0 1 auto;
           border-radius:
             /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
-            var(--vaadin-input-container-top-start-radius, var(--__border-radius))
-            var(--vaadin-input-container-top-end-radius, var(--__border-radius))
-            var(--vaadin-input-container-bottom-end-radius, var(--__border-radius))
-            var(--vaadin-input-container-bottom-start-radius, var(--__border-radius));
-          --_border-radius: var(--vaadin-input-container-border-radius, 0px);
+            var(--vaadin-input-field-top-start-radius, var(--__border-radius))
+            var(--vaadin-input-field-top-end-radius, var(--__border-radius))
+            var(--vaadin-input-field-bottom-end-radius, var(--__border-radius))
+            var(--vaadin-input-field-bottom-start-radius, var(--__border-radius));
+          --_border-radius: var(--vaadin-input-field-border-radius, 0px);
         }
 
         :host([dir='rtl']) {
           border-radius:
             /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
-            var(--vaadin-input-container-top-end-radius, var(--_border-radius))
-            var(--vaadin-input-container-top-start-radius, var(--_border-radius))
-            var(--vaadin-input-container-bottom-start-radius, var(--_border-radius))
-            var(--vaadin-input-container-bottom-end-radius, var(--_border-radius));
+            var(--vaadin-input-field-top-end-radius, var(--_border-radius))
+            var(--vaadin-input-field-top-start-radius, var(--_border-radius))
+            var(--vaadin-input-field-bottom-start-radius, var(--_border-radius))
+            var(--vaadin-input-field-bottom-end-radius, var(--_border-radius));
         }
 
         :host([hidden]) {

packages/input-container/theme/lumo/vaadin-input-container-styles.js

@@ -17,21 +17,21 @@ registerStyles(
       box-sizing: border-box;
       border-radius:
         /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#syntax */
-        var(--vaadin-input-container-top-start-radius, var(--_input-container-radius))
-        var(--vaadin-input-container-top-end-radius, var(--_input-container-radius))
-        var(--vaadin-input-container-bottom-end-radius, var(--_input-container-radius))
-        var(--vaadin-input-container-bottom-start-radius, var(--_input-container-radius));
+        var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius));
       /* Fallback */
-      --_input-container-radius: var(--vaadin-input-container-border-radius, var(--lumo-border-radius-m));
+      --_input-container-radius: var(--vaadin-input-field-border-radius, var(--lumo-border-radius-m));
     }
 
     :host([dir='rtl']) {
       border-radius:
         /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
-        var(--vaadin-input-container-top-end-radius, var(--_input-container-radius))
-        var(--vaadin-input-container-top-start-radius, var(--_input-container-radius))
-        var(--vaadin-input-container-bottom-start-radius, var(--_input-container-radius))
-        var(--vaadin-input-container-bottom-end-radius, var(--_input-container-radius));
+        var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius));
     }
 
     /* Used for hover and activation effects */

packages/vaadin-lumo-styles/style.js

@@ -32,7 +32,7 @@ const globals = css`
   html {
     --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
     --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-input-container-border-radius: var(--lumo-border-radius-m);
+    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
   }
 `;