refactor: update checkbox base styles, add icon size property (#10095)

Author: web-padawan

packages/checkbox/src/styles/vaadin-checkbox-base-styles.js

@@ -11,7 +11,7 @@ import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
 const checkbox = css`
   [part='checkbox']::after {
     inset: 0;
-    mask-image: var(--_vaadin-icon-checkmark);
+    mask: var(--_vaadin-icon-checkmark) 50% / var(--vaadin-checkbox-icon-size, 100%) no-repeat;
   }
 
   :host([readonly]) {
@@ -25,7 +25,6 @@ const checkbox = css`
   }
 
   :host([indeterminate]) [part='checkbox']::after {
-    inset: calc(var(--_border-width) * -1);
     mask-image: var(--_vaadin-icon-minus);
   }
 `;

packages/checkbox/test/visual/base/screenshots/checkbox/baseline/state-disabled-indeterminate.png

@@ -97,7 +97,7 @@ export const checkable = (part, propName = part) => css`
   :host(:is([checked], [indeterminate])) {
     --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-color);
     --vaadin-${unsafeCSS(propName)}-border-color: transparent;
-    --vaadin-${unsafeCSS(propName)}-color: var(--vaadin-background-color);
+    --vaadin-${unsafeCSS(propName)}-color: oklch(from var(--vaadin-${unsafeCSS(propName)}-background) clamp(0, (0.62 - l) * 1000, 1) 0 0);
   }
 
   :host([disabled]) {