refactor: respect --vaadin-icon-visual-size in component icons (#10254)

jouni · web-flow · commit ee21fc1a2ece · 2025-09-29T11:29:28.000+03:00
diff --git a/packages/app-layout/src/styles/vaadin-drawer-toggle-base-styles.js b/packages/app-layout/src/styles/vaadin-drawer-toggle-base-styles.js
@@ -11,7 +11,7 @@ export const drawerToggle = css`
     background: currentColor;
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-menu);
+    mask: var(--_vaadin-icon-menu) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/context-menu/src/styles/vaadin-context-menu-item-base-styles.js b/packages/context-menu/src/styles/vaadin-context-menu-item-base-styles.js
@@ -13,7 +13,7 @@ const menuItemStyles = css`
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     rotate: -90deg;
     visibility: hidden;
     width: var(--vaadin-icon-size, 1lh);
diff --git a/packages/crud/src/styles/vaadin-crud-edit-base-styles.js b/packages/crud/src/styles/vaadin-crud-edit-base-styles.js
@@ -16,7 +16,7 @@ export const crudEditStyles = css`
     background: currentColor;
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-edit);
+    mask: var(--_vaadin-icon-edit) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/dashboard/src/styles/vaadin-dashboard-widget-section-base-styles.js b/packages/dashboard/src/styles/vaadin-dashboard-widget-section-base-styles.js
@@ -85,7 +85,7 @@ export const dashboardWidgetAndSectionStyles = css`
     height: var(--vaadin-icon-size, 1lh);
     width: var(--vaadin-icon-size, 1lh);
     background: currentColor;
-    mask-image: var(--icon);
+    mask: var(--icon) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   #focus-button-wrapper,
diff --git a/packages/details/src/styles/vaadin-details-summary-base-styles.js b/packages/details/src/styles/vaadin-details-summary-base-styles.js
@@ -60,7 +60,7 @@ export const detailsSummary = (partName = 'vaadin-details-summary') => css`
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
     rotate: -90deg;
   }
diff --git a/packages/field-base/src/styles/button-base-styles.js b/packages/field-base/src/styles/button-base-styles.js
@@ -23,6 +23,9 @@ export const button = css`
     display: block;
     height: var(--vaadin-icon-size, 1lh);
     width: var(--vaadin-icon-size, 1lh);
+    mask-size: var(--vaadin-icon-visual-size, 100%);
+    mask-position: 50%;
+    mask-repeat: no-repeat;
   }
 
   :host(:is(:not([clear-button-visible][has-value]), [disabled], [readonly])) [part~='clear-button'] {
diff --git a/packages/field-base/src/styles/field-base-styles.js b/packages/field-base/src/styles/field-base-styles.js
@@ -109,7 +109,7 @@ export const field = css`
     flex: none;
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-warn);
+    mask: var(--_vaadin-icon-warn) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     background: currentColor;
   }
 
diff --git a/packages/grid/src/styles/vaadin-grid-tree-toggle-base-styles.js b/packages/grid/src/styles/vaadin-grid-tree-toggle-base-styles.js
@@ -45,7 +45,7 @@ export const gridTreeToggleStyles = css`
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     background: currentColor;
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   :host(:not([expanded])) [part='toggle']::before {
diff --git a/packages/item/src/styles/vaadin-item-base-styles.js b/packages/item/src/styles/vaadin-item-base-styles.js
@@ -43,7 +43,7 @@ export const itemStyles = css`
     display: block;
     background: currentColor;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-checkmark);
+    mask: var(--_vaadin-icon-checkmark) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/login/src/styles/vaadin-login-form-wrapper-base-styles.js b/packages/login/src/styles/vaadin-login-form-wrapper-base-styles.js
@@ -55,7 +55,7 @@ export const loginFormWrapperStyles = css`
     display: inline-block;
     flex: none;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-warn);
+    mask: var(--_vaadin-icon-warn) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/map/src/styles/vaadin-map-base-styles.js b/packages/map/src/styles/vaadin-map-base-styles.js
@@ -265,19 +265,19 @@ export const mapStyles = css`
   }
 
   .ol-compass:empty::before {
-    mask-image: var(--_vaadin-icon-arrow-up);
+    mask: var(--_vaadin-icon-arrow-up) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-full-screen {
     grid-area: fullscreen;
   }
 
   .ol-full-screen button:empty::before {
-    mask-image: var(--_vaadin-icon-fullscreen);
+    mask: var(--_vaadin-icon-fullscreen) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-full-screen .ol-full-screen-true:empty::before {
-    mask-image: var(--_vaadin-icon-cross);
+    mask: var(--_vaadin-icon-cross) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-overviewmap {
@@ -333,7 +333,8 @@ export const mapStyles = css`
   }
 
   .ol-overviewmap button span:empty::before {
-    mask-image: var(--vaadin-map-icon-overview-map-collapse, var(--_vaadin-icon-chevron-down));
+    mask: var(--vaadin-map-icon-overview-map-collapse, var(--_vaadin-icon-chevron-down)) 50% /
+      var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-overviewmap.ol-collapsed button {
@@ -355,11 +356,12 @@ export const mapStyles = css`
   }
 
   .ol-zoom-in:empty::before {
-    mask-image: var(--vaadin-map-icon-zoom-in, var(--_vaadin-icon-plus));
+    mask: var(--vaadin-map-icon-zoom-in, var(--_vaadin-icon-plus)) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-zoom-out:empty::before {
-    mask-image: var(--vaadin-map-icon-zoom-out, var(--_vaadin-icon-minus));
+    mask: var(--vaadin-map-icon-zoom-out, var(--_vaadin-icon-minus)) 50% / var(--vaadin-icon-visual-size, 100%)
+      no-repeat;
   }
 
   .ol-zoom button.ol-zoom-in {
diff --git a/packages/menu-bar/src/styles/vaadin-menu-bar-button-base-styles.js b/packages/menu-bar/src/styles/vaadin-menu-bar-button-base-styles.js
@@ -32,7 +32,7 @@ export const menuBarButtonStyles = css`
     background: currentColor;
     content: '';
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/password-field/src/styles/vaadin-password-field-button-base-styles.js b/packages/password-field/src/styles/vaadin-password-field-button-base-styles.js
@@ -22,7 +22,7 @@ const passwordFieldBase = css`
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-eye);
+    mask: var(--_vaadin-icon-eye) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js
@@ -416,6 +416,9 @@ const toolbar = css`
     display: block;
     height: var(--vaadin-icon-size, 1lh);
     width: var(--vaadin-icon-size, 1lh);
+    mask-size: var(--vaadin-icon-visual-size, 100%);
+    mask-repeat: no-repeat;
+    mask-position: 50%;
   }
 
   [part~='toolbar-button']:focus {
diff --git a/packages/side-nav/src/styles/vaadin-side-nav-shared-base-styles.js b/packages/side-nav/src/styles/vaadin-side-nav-shared-base-styles.js
@@ -44,7 +44,7 @@ export const sharedStyles = css`
     content: '';
     display: block;
     background: currentColor;
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     rotate: -90deg;
diff --git a/packages/tabs/src/styles/vaadin-tabs-base-styles.js b/packages/tabs/src/styles/vaadin-tabs-base-styles.js
@@ -74,7 +74,7 @@ export const tabsStyles = css`
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     background: currentColor;
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     rotate: 90deg;
   }
 
diff --git a/packages/upload/src/styles/vaadin-upload-file-base-styles.js b/packages/upload/src/styles/vaadin-upload-file-base-styles.js
@@ -38,6 +38,12 @@ export const uploadFileStyles = css`
     width: var(--vaadin-icon-size, 1lh);
   }
 
+  :is([part$='icon'], [part$='button'])::before {
+    mask-size: var(--vaadin-icon-visual-size, 100%);
+    mask-position: 50%;
+    mask-repeat: no-repeat;
+  }
+
   [part='done-icon']::before {
     background: var(--vaadin-upload-file-done-color, currentColor);
     mask-image: var(--_vaadin-icon-checkmark);
diff --git a/packages/upload/src/styles/vaadin-upload-icon-base-styles.js b/packages/upload/src/styles/vaadin-upload-icon-base-styles.js
@@ -17,7 +17,7 @@ export const uploadIconStyles = css`
     display: inline-block;
     flex: none;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-upload);
+    mask: var(--_vaadin-icon-upload) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 

Original file line number	Diff line number	Diff line change
@@ -11,7 +11,7 @@ export const drawerToggle = css`
`11`	`11`	`background: currentColor;`
`12`	`12`	`display: block;`
`13`	`13`	`height: var(--vaadin-icon-size, 1lh);`
`14`		`- mask-image: var(--_vaadin-icon-menu);`
	`14`	`+ mask: var(--_vaadin-icon-menu) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;`
`15`	`15`	`width: var(--vaadin-icon-size, 1lh);`
`16`	`16`	`}`
`17`	`17`
Original file line number	Diff line number	Diff line change
@@ -16,7 +16,7 @@ export const crudEditStyles = css`
`16`	`16`	`background: currentColor;`
`17`	`17`	`display: block;`
`18`	`18`	`height: var(--vaadin-icon-size, 1lh);`
`19`		`- mask-image: var(--_vaadin-icon-edit);`
	`19`	`+ mask: var(--_vaadin-icon-edit) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;`
`20`	`20`	`width: var(--vaadin-icon-size, 1lh);`
`21`	`21`	`}`
`22`	`22`
Original file line number	Diff line number	Diff line change
@@ -85,7 +85,7 @@ export const dashboardWidgetAndSectionStyles = css`
`85`	`85`	`height: var(--vaadin-icon-size, 1lh);`
`86`	`86`	`width: var(--vaadin-icon-size, 1lh);`
`87`	`87`	`background: currentColor;`
`88`		`- mask-image: var(--icon);`
	`88`	`+ mask: var(--icon) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`#focus-button-wrapper,`
Original file line number	Diff line number	Diff line change
@@ -60,7 +60,7 @@ export const detailsSummary = (partName = 'vaadin-details-summary') => css`
`60`	`60`	`content: '';`
`61`	`61`	`display: block;`
`62`	`62`	`height: var(--vaadin-icon-size, 1lh);`
`63`		`- mask-image: var(--_vaadin-icon-chevron-down);`
	`63`	`+ mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;`
`64`	`64`	`width: var(--vaadin-icon-size, 1lh);`
`65`	`65`	`rotate: -90deg;`
`66`	`66`	`}`
Original file line number	Diff line number	Diff line change
@@ -23,6 +23,9 @@ export const button = css`
`23`	`23`	`display: block;`
`24`	`24`	`height: var(--vaadin-icon-size, 1lh);`
`25`	`25`	`width: var(--vaadin-icon-size, 1lh);`
	`26`	`+ mask-size: var(--vaadin-icon-visual-size, 100%);`
	`27`	`+ mask-position: 50%;`
	`28`	`+ mask-repeat: no-repeat;`
`26`	`29`	`}`
`27`	`30`
`28`	`31`	`:host(:is(:not([clear-button-visible][has-value]), [disabled], [readonly])) [part~='clear-button'] {`
Original file line number	Diff line number	Diff line change
@@ -109,7 +109,7 @@ export const field = css`
`109`	`109`	`flex: none;`
`110`	`110`	`width: var(--vaadin-icon-size, 1lh);`
`111`	`111`	`height: var(--vaadin-icon-size, 1lh);`
`112`		`- mask-image: var(--_vaadin-icon-warn);`
	`112`	`+ mask: var(--_vaadin-icon-warn) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;`
`113`	`113`	`background: currentColor;`
`114`	`114`	`}`
`115`	`115`
Original file line number	Diff line number	Diff line change
@@ -45,7 +45,7 @@ export const gridTreeToggleStyles = css`
`45`	`45`	`width: var(--vaadin-icon-size, 1lh);`
`46`	`46`	`height: var(--vaadin-icon-size, 1lh);`
`47`	`47`	`background: currentColor;`
`48`		`- mask-image: var(--_vaadin-icon-chevron-down);`
	`48`	`+ mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`:host(:not([expanded])) [part='toggle']::before {`
Original file line number	Diff line number	Diff line change
@@ -43,7 +43,7 @@ export const itemStyles = css`
`43`	`43`	`display: block;`
`44`	`44`	`background: currentColor;`
`45`	`45`	`height: var(--vaadin-icon-size, 1lh);`
`46`		`- mask-image: var(--_vaadin-icon-checkmark);`
	`46`	`+ mask: var(--_vaadin-icon-checkmark) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;`
`47`	`47`	`width: var(--vaadin-icon-size, 1lh);`
`48`	`48`	`}`
`49`	`49`
Original file line number	Diff line number	Diff line change
@@ -55,7 +55,7 @@ export const loginFormWrapperStyles = css`
`55`	`55`	`display: inline-block;`
`56`	`56`	`flex: none;`
`57`	`57`	`height: var(--vaadin-icon-size, 1lh);`
`58`		`- mask-image: var(--_vaadin-icon-warn);`
	`58`	`+ mask: var(--_vaadin-icon-warn) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;`
`59`	`59`	`width: var(--vaadin-icon-size, 1lh);`
`60`	`60`	`}`
`61`	`61`