fix: make checkbox and radio button marker color work in Safari 17 (#10501)

Author: jouni

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

@@ -10,16 +10,14 @@ import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
 
 const checkbox = css`
   [part='checkbox'] {
-    color: var(
-      --vaadin-checkbox-checkmark-color,
-      var(--vaadin-checkbox-marker-color, var(--vaadin-input-field-text-color, var(--vaadin-text-color)))
-    );
+    color: var(--vaadin-checkbox-checkmark-color, var(--_color));
   }
 
   [part='checkbox']::after {
     inset: 0;
     mask: var(--_vaadin-icon-checkmark) 50% /
       var(--vaadin-checkbox-checkmark-size, var(--vaadin-checkbox-marker-size, 100%)) no-repeat;
+    filter: var(--vaadin-checkbox-checkmark-color, var(--_filter));
   }
 
   :host([readonly]) {

packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/state-readonly.png

@@ -98,7 +98,8 @@ export const checkable = (part, propName = part) => css`
     --_border-width: var(--vaadin-${unsafeCSS(propName)}-border-width, var(--vaadin-input-field-border-width, 1px));
     border-width: var(--_border-width);
     box-sizing: border-box;
-    color: var(--vaadin-${unsafeCSS(propName)}-marker-color, var(--vaadin-input-field-text-color, var(--vaadin-text-color)));
+    --_color: var(--vaadin-${unsafeCSS(propName)}-marker-color, var(--vaadin-${unsafeCSS(propName)}-background, var(--vaadin-background-color)));
+    color: var(--_color);
     height: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
     width: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
     position: relative;
@@ -111,7 +112,6 @@ export const checkable = (part, propName = part) => css`
   :host(:is([checked], [indeterminate])) {
     --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-text-color);
     --vaadin-${unsafeCSS(propName)}-border-color: transparent;
-    --vaadin-${unsafeCSS(propName)}-marker-color: oklch(from var(--vaadin-${unsafeCSS(propName)}-background) clamp(0, (0.62 - l) * 1000, 1) 0 0);
   }
 
   :host([disabled]) {
@@ -143,6 +143,8 @@ export const checkable = (part, propName = part) => css`
     border-radius: inherit;
     display: flex;
     align-items: center;
+    --_filter: var(--vaadin-${unsafeCSS(propName)}-marker-color, saturate(0) invert(1) hue-rotate(180deg) contrast(100) brightness(100));
+    filter: var(--_filter);
   }
 
   :host(:not([checked], [indeterminate])) [part='${unsafeCSS(part)}']::after {

packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/state-value.png

@@ -10,16 +10,14 @@ import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
 const radioButton = css`
   [part='radio'] {
     border-radius: 50%;
-    color: var(
-      --vaadin-radio-button-dot-color,
-      var(--vaadin-radio-button-marker-color, var(--vaadin-input-field-text-color, var(--vaadin-text-color)))
-    );
+    color: var(--vaadin-radio-button-dot-color, var(--_color));
   }
 
   [part='radio']::after {
     width: var(--vaadin-radio-button-dot-size, var(--vaadin-radio-button-marker-size, 50%));
     height: var(--vaadin-radio-button-dot-size, var(--vaadin-radio-button-marker-size, 50%));
     border-radius: 50%;
+    filter: var(--vaadin-radio-button-dot-color, var(--_filter));
   }
 `;