refactor!: replace --lumo-border-radius with explicit radius sizes (#2109)

jouni · web-flow · commit 2ac76b0a8873 · 2021-06-15T12:25:28.000+03:00
diff --git a/packages/vaadin-avatar/theme/lumo/vaadin-avatar-group-styles.js b/packages/vaadin-avatar/theme/lumo/vaadin-avatar-group-styles.js
@@ -51,7 +51,7 @@ registerStyles(
   css`
     :host {
       --_lumo-list-box-item-selected-icon-display: none;
-      --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius) / 4);
+      --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);
     }
 
     [part='overlay'] {
diff --git a/packages/vaadin-button/theme/lumo/vaadin-button-styles.js b/packages/vaadin-button/theme/lumo/vaadin-button-styles.js
@@ -13,7 +13,7 @@ registerStyles(
       --lumo-button-size: var(--lumo-size-m);
       min-width: calc(var(--lumo-button-size) * 2);
       height: var(--lumo-button-size);
-      padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius) / 2);
+      padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
       margin: var(--lumo-space-xs) 0;
       box-sizing: border-box;
       /* Style */
@@ -22,7 +22,7 @@ registerStyles(
       font-weight: 500;
       color: var(--_lumo-button-color, var(--lumo-primary-text-color));
       background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       cursor: default;
       -webkit-tap-highlight-color: transparent;
       -webkit-font-smoothing: antialiased;
diff --git a/packages/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js b/packages/vaadin-combo-box/theme/lumo/vaadin-combo-box-item-styles.js
@@ -11,10 +11,10 @@ registerStyles(
     :host {
       cursor: default;
       -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-      padding-left: calc(var(--lumo-border-radius) / 4);
-      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      padding-left: calc(var(--lumo-border-radius-m) / 4);
+      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
       transition: background-color 100ms;
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       overflow: hidden;
       --_lumo-item-selected-icon-display: block;
     }
@@ -39,8 +39,8 @@ registerStyles(
 
     /* RTL specific styles */
     :host([dir='rtl']) {
-      padding-right: calc(var(--lumo-border-radius) / 4);
-      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      padding-right: calc(var(--lumo-border-radius-m) / 4);
+      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
     }
   `,
   { moduleId: 'lumo-combo-box-item', include: ['lumo-item'] }
diff --git a/packages/vaadin-confirm-dialog/test/visual/lumo/screenshots/confirm-dialog/baseline/basic.png b/packages/vaadin-confirm-dialog/test/visual/lumo/screenshots/confirm-dialog/baseline/basic.png
diff --git a/packages/vaadin-confirm-dialog/test/visual/lumo/screenshots/confirm-dialog/baseline/cancel-reject.png b/packages/vaadin-confirm-dialog/test/visual/lumo/screenshots/confirm-dialog/baseline/cancel-reject.png
diff --git a/packages/vaadin-confirm-dialog/test/visual/lumo/screenshots/confirm-dialog/baseline/cancel.png b/packages/vaadin-confirm-dialog/test/visual/lumo/screenshots/confirm-dialog/baseline/cancel.png
diff --git a/packages/vaadin-confirm-dialog/test/visual/lumo/screenshots/confirm-dialog/baseline/reject.png b/packages/vaadin-confirm-dialog/test/visual/lumo/screenshots/confirm-dialog/baseline/reject.png
diff --git a/packages/vaadin-context-menu/theme/lumo/vaadin-context-menu-styles.js b/packages/vaadin-context-menu/theme/lumo/vaadin-context-menu-styles.js
@@ -24,7 +24,7 @@ registerStyles(
 
     :host {
       --_lumo-list-box-item-selected-icon-display: none;
-      --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius) / 4);
+      --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);
     }
 
     [part='overlay'] {
@@ -49,14 +49,14 @@ registerStyles(
 
     [part='items'] ::slotted(.vaadin-menu-item) {
       outline: none;
-      border-radius: var(--lumo-border-radius);
-      padding-left: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
-      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      border-radius: var(--lumo-border-radius-m);
+      padding-left: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
     }
 
     :host(.vaadin-menu-list-box) [part='items'] ::slotted(.vaadin-menu-item) {
-      padding-left: calc(var(--lumo-border-radius) / 4);
-      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      padding-left: calc(var(--lumo-border-radius-m) / 4);
+      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
     }
 
     /* Hovered item */
@@ -68,13 +68,13 @@ registerStyles(
 
     /* RTL styles */
     :host([dir='rtl'])[part='items'] ::slotted(.vaadin-menu-item) {
-      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
-      padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
+      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+      padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
     }
 
     :host([dir='rtl'].vaadin-menu-list-box) [part='items'] ::slotted(.vaadin-menu-item) {
-      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
-      padding-right: calc(var(--lumo-border-radius) / 4);
+      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+      padding-right: calc(var(--lumo-border-radius-m) / 4);
     }
 
     /* Focused item */
diff --git a/packages/vaadin-crud/test/visual/lumo/screenshots/crud/baseline/basic.png b/packages/vaadin-crud/test/visual/lumo/screenshots/crud/baseline/basic.png
diff --git a/packages/vaadin-crud/theme/lumo/vaadin-crud-styles.js b/packages/vaadin-crud/theme/lumo/vaadin-crud-styles.js
@@ -14,7 +14,7 @@ registerStyles(
       color: var(--lumo-primary-text-color);
       position: relative;
       background-color: var(--lumo-contrast-5pct);
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       width: var(--lumo-size-s);
       height: var(--lumo-size-s);
     }
diff --git a/packages/vaadin-date-picker/theme/lumo/vaadin-date-picker-overlay-content-styles.js b/packages/vaadin-date-picker/theme/lumo/vaadin-date-picker-overlay-content-styles.js
@@ -89,7 +89,7 @@ registerStyles(
       background-color: var(--lumo-base-color);
       background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
       transform: translate(-75%, -50%) rotate(45deg);
-      border-top-right-radius: calc(var(--lumo-border-radius) / 2);
+      border-top-right-radius: var(--lumo-border-radius-s);
       box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
       z-index: 1;
     }
@@ -119,7 +119,7 @@ registerStyles(
     [part='toolbar'] {
       padding: var(--lumo-space-s);
       box-shadow: 0 -1px 0 0 var(--lumo-contrast-10pct);
-      border-bottom-left-radius: var(--lumo-border-radius);
+      border-bottom-left-radius: var(--lumo-border-radius-l);
       margin-right: 57px;
     }
 
@@ -167,7 +167,7 @@ registerStyles(
       align-items: center;
       height: var(--lumo-size-s);
       padding: 0 0.5em;
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       z-index: 3;
       color: var(--lumo-primary-text-color);
       font-weight: 500;
diff --git a/packages/vaadin-date-picker/theme/lumo/vaadin-month-calendar-styles.js b/packages/vaadin-date-picker/theme/lumo/vaadin-month-calendar-styles.js
@@ -86,7 +86,7 @@ registerStyles(
       height: 80%;
       max-height: 100%;
       max-width: 100%;
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
     }
 
     [part='date'][focused]::before {
diff --git a/packages/vaadin-date-time-picker/theme/lumo/vaadin-date-time-picker-styles.js b/packages/vaadin-date-time-picker/theme/lumo/vaadin-date-time-picker-styles.js
@@ -13,7 +13,7 @@ registerStyles(
 
     /* RTL specific styles */
     :host([dir='rtl']) [part~='input-field'] {
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -31,7 +31,7 @@ registerStyles(
 
     /* RTL specific styles */
     :host([dir='rtl']) [part~='input-field'] {
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
diff --git a/packages/vaadin-dialog/test/visual/lumo/screenshots/dialog/baseline/basic.png b/packages/vaadin-dialog/test/visual/lumo/screenshots/dialog/baseline/basic.png
diff --git a/packages/vaadin-dialog/theme/lumo/vaadin-dialog-styles.js b/packages/vaadin-dialog/theme/lumo/vaadin-dialog-styles.js
@@ -18,6 +18,7 @@ registerStyles(
     }
 
     [part='overlay'] {
+      border-radius: var(--lumo-border-radius-l);
       box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl);
       background-image: none;
       outline: none;
diff --git a/packages/vaadin-form-layout/theme/lumo/vaadin-form-item-styles.js b/packages/vaadin-form-layout/theme/lumo/vaadin-form-item-styles.js
@@ -18,7 +18,7 @@ registerStyles(
       font-size: var(--lumo-font-size-s);
       font-weight: 500;
       margin-top: var(--lumo-space-m);
-      margin-left: calc(var(--lumo-border-radius) / 4);
+      margin-left: calc(var(--lumo-border-radius-m) / 4);
       margin-bottom: var(--lumo-space-xs);
       transition: color 0.4s;
       line-height: 1.333;
diff --git a/packages/vaadin-list-box/theme/lumo/vaadin-list-box-styles.js b/packages/vaadin-list-box/theme/lumo/vaadin-list-box-styles.js
@@ -19,9 +19,9 @@ registerStyles(
 
     [part='items'] ::slotted(vaadin-item) {
       outline: none;
-      border-radius: var(--lumo-border-radius);
-      padding-left: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
-      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      border-radius: var(--lumo-border-radius-m);
+      padding-left: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
     }
 
     /* Workaround to display checkmark in IE11 when list-box is not used in dropdown-menu */
@@ -55,14 +55,14 @@ registerStyles(
       height: 1px;
       border: 0;
       padding: 0;
-      margin: var(--lumo-space-s) var(--lumo-border-radius);
+      margin: var(--lumo-space-s) var(--lumo-border-radius-m);
       background-color: var(--lumo-contrast-10pct);
     }
 
     /* RTL specific styles */
     :host([dir='rtl']) [part='items'] ::slotted(vaadin-item) {
-      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
-      padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
+      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+      padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
     }
   `,
   { moduleId: 'lumo-list-box' }
diff --git a/packages/vaadin-login/test/visual/lumo/screenshots/login-overlay/baseline/basic.png b/packages/vaadin-login/test/visual/lumo/screenshots/login-overlay/baseline/basic.png
diff --git a/packages/vaadin-login/theme/lumo/vaadin-login-form-wrapper-styles.js b/packages/vaadin-login/theme/lumo/vaadin-login-form-wrapper-styles.js
@@ -26,7 +26,7 @@ registerStyles(
     [part='error-message'] {
       background-color: var(--lumo-error-color-10pct);
       padding: var(--lumo-space-m);
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       margin-top: var(--lumo-space-m);
       margin-bottom: var(--lumo-space-s);
       color: var(--lumo-error-text-color);
diff --git a/packages/vaadin-login/theme/lumo/vaadin-login-overlay-styles.js b/packages/vaadin-login/theme/lumo/vaadin-login-overlay-styles.js
@@ -56,7 +56,7 @@ registerStyles(
     }
 
     [part='card'] {
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-l);
       box-shadow: var(--lumo-box-shadow-s);
       margin: var(--lumo-space-s);
       height: auto;
diff --git a/packages/vaadin-menu-bar/theme/lumo/vaadin-menu-bar-button-styles.js b/packages/vaadin-menu-bar/theme/lumo/vaadin-menu-bar-button-styles.js
@@ -18,16 +18,16 @@ registerStyles(
     [part='label'] ::slotted(vaadin-context-menu-item) {
       justify-content: center;
       height: var(--lumo-button-size);
-      margin: 0 calc((var(--lumo-size-m) / 3 + var(--lumo-border-radius) / 2) * -1);
-      padding-left: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius) / 2);
-      padding-right: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius) / 2);
+      margin: 0 calc((var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2) * -1);
+      padding-left: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2);
+      padding-right: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2);
     }
 
     :host([theme~='small']) [part='label'] ::slotted(vaadin-context-menu-item) {
       min-height: var(--lumo-size-s);
-      margin: 0 calc((var(--lumo-size-s) / 3 + var(--lumo-border-radius) / 2) * -1);
-      padding-left: calc(var(--lumo-size-s) / 3 + var(--lumo-border-radius) / 2);
-      padding-right: calc(var(--lumo-size-s) / 3 + var(--lumo-border-radius) / 2);
+      margin: 0 calc((var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2) * -1);
+      padding-left: calc(var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2);
+      padding-right: calc(var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2);
     }
 
     :host([theme~='tertiary']) [part='label'] ::slotted(vaadin-context-menu-item) {
diff --git a/packages/vaadin-notification/theme/lumo/vaadin-notification-styles.js b/packages/vaadin-notification/theme/lumo/vaadin-notification-styles.js
@@ -14,7 +14,7 @@ registerStyles(
 
     [part='overlay'] {
       background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-l);
       box-shadow: 0 0 0 1px var(--lumo-contrast-10pct), var(--lumo-box-shadow-l);
       font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-m);
diff --git a/packages/vaadin-progress-bar/theme/lumo/vaadin-progress-bar-styles.js b/packages/vaadin-progress-bar/theme/lumo/vaadin-progress-bar-styles.js
@@ -13,12 +13,12 @@ registerStyles(
     }
 
     [part='bar'] {
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       background-color: var(--lumo-contrast-10pct);
     }
 
     [part='value'] {
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       background-color: var(--lumo-primary-color);
       /* Use width instead of transform to preserve border radius */
       transform: none;
diff --git a/packages/vaadin-rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js b/packages/vaadin-rich-text-editor/theme/lumo/vaadin-rich-text-editor-styles.js
@@ -25,7 +25,7 @@ registerStyles(
     [part~='toolbar-button'] {
       width: var(--lumo-size-m);
       height: var(--lumo-size-m);
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       color: var(--lumo-contrast-60pct);
       margin: 2px 1px;
       cursor: default;
diff --git a/packages/vaadin-split-layout/theme/lumo/vaadin-split-layout-styles.js b/packages/vaadin-split-layout/theme/lumo/vaadin-split-layout-styles.js
@@ -29,7 +29,7 @@ registerStyles(
       height: 100%;
       max-width: 100%;
       max-height: 100%;
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-s);
       background-color: var(--lumo-contrast-30pct);
       transition: 0.1s opacity, 0.1s background-color;
     }
diff --git a/packages/vaadin-tabs/theme/lumo/vaadin-tab-styles.js b/packages/vaadin-tabs/theme/lumo/vaadin-tab-styles.js
@@ -69,7 +69,7 @@ registerStyles(
       width: var(--lumo-size-s);
       height: 2px;
       background-color: var(--lumo-contrast-60pct);
-      border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
+      border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0;
       transform: translateX(-50%) scale(0);
       transform-origin: 50% 100%;
       transition: 0.14s transform cubic-bezier(0.12, 0.32, 0.54, 1);
@@ -88,7 +88,7 @@ registerStyles(
       transform: translateY(50%) scale(0);
       width: 2px;
       height: var(--lumo-size-xs);
-      border-radius: 0 var(--lumo-border-radius) var(--lumo-border-radius) 0;
+      border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
       transform-origin: 100% 50%;
     }
 
@@ -187,7 +187,7 @@ registerStyles(
 
     :host([focus-ring]) {
       box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
     }
 
     /* RTL specific styles */
@@ -220,7 +220,7 @@ registerStyles(
     :host([dir='rtl'][orientation='vertical'])::after {
       left: auto;
       right: 0;
-      border-radius: var(--lumo-border-radius) 0 0 var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
       transform-origin: 0% 50%;
     }
   `,
diff --git a/packages/vaadin-text-field/theme/lumo/vaadin-text-field-styles.js b/packages/vaadin-text-field/theme/lumo/vaadin-text-field-styles.js
@@ -75,9 +75,9 @@ registerStyles(
     }
 
     [part='input-field'] {
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       background-color: var(--lumo-contrast-10pct);
-      padding: 0 calc(0.375em + var(--lumo-border-radius) / 4 - 1px);
+      padding: 0 calc(0.375em + var(--lumo-border-radius-m) / 4 - 1px);
       font-weight: 500;
       line-height: 1;
       position: relative;

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ registerStyles(`
`51`	`51`	css`
`52`	`52`	`:host {`
`53`	`53`	`--_lumo-list-box-item-selected-icon-display: none;`
`54`		`- --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius) / 4);`
	`54`	`+ --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`[part='overlay'] {`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ registerStyles(`
`14`	`14`	`color: var(--lumo-primary-text-color);`
`15`	`15`	`position: relative;`
`16`	`16`	`background-color: var(--lumo-contrast-5pct);`
`17`		`- border-radius: var(--lumo-border-radius);`
	`17`	`+ border-radius: var(--lumo-border-radius-m);`
`18`	`18`	`width: var(--lumo-size-s);`
`19`	`19`	`height: var(--lumo-size-s);`
`20`	`20`	`}`