feat: add radio-button and checkbox disabled style properties (#7615)

* radio-button: introduce properties and test

* checkbox: introduce style property and test

* Fix test, remove console.logs

* update test name

* add to globals

packages/checkbox/test/visual/lumo/checkbox.test.js

@@ -91,6 +91,32 @@ describe('checkbox', () => {
       element.required = true;
       await visualDiff(div, 'disabled-required');
     });
+
+    describe('styled', () => {
+      before(() => {
+        document.documentElement.style.setProperty('--vaadin-checkbox-disabled-checkmark-color', 'white');
+        document.documentElement.style.setProperty('--vaadin-checkbox-disabled-background', 'black');
+      });
+
+      after(() => {
+        document.documentElement.style.removeProperty('--vaadin-checkbox-disabled-checkmark-color');
+        document.documentElement.style.removeProperty('--vaadin-checkbox-disabled-background');
+      });
+
+      it('checked', async () => {
+        element.checked = true;
+        await visualDiff(div, 'styled-disabled-checked');
+      });
+
+      it('indeterminate', async () => {
+        element.indeterminate = true;
+        await visualDiff(div, 'styled-disabled-indeterminate');
+      });
+
+      it('unchecked', async () => {
+        await visualDiff(div, 'styled-disabled');
+      });
+    });
   });
 
   describe('readonly', () => {

packages/checkbox/theme/lumo/vaadin-checkbox-styles.js

@@ -27,6 +27,7 @@ registerStyles(
       --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
       --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
       --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
+      --_disabled-checkmark-color: var(--vaadin-checkbox-disabled-checkmark-color, var(--lumo-contrast-30pct));
     }
 
     [part='label'] {
@@ -153,11 +154,11 @@ registerStyles(
     }
 
     :host([disabled]) [part='checkbox'] {
-      background-color: var(--lumo-contrast-10pct);
+      background-color: var(--vaadin-checkbox-disabled-background, var(--lumo-contrast-10pct));
     }
 
     :host([disabled]) [part='checkbox']::after {
-      color: var(--lumo-contrast-30pct);
+      color: var(--_disabled-checkmark-color);
     }
 
     :host([disabled]) [part='label'],
@@ -167,7 +168,7 @@ registerStyles(
     }
 
     :host([indeterminate][disabled]) [part='checkbox']::after {
-      background-color: var(--lumo-contrast-30pct);
+      background-color: var(--_disabled-checkmark-color);
     }
 
     :host([readonly][checked]) [part='checkbox'],

packages/radio-group/test/visual/lumo/radio-button.test.js

@@ -52,6 +52,27 @@ describe('radio-button', () => {
       element.checked = true;
       await visualDiff(div, 'disabled-checked');
     });
+
+    describe('styled', () => {
+      before(() => {
+        document.documentElement.style.setProperty('--vaadin-radio-button-disabled-background', 'black');
+        document.documentElement.style.setProperty('--vaadin-radio-button-disabled-dot-color', 'white');
+      });
+
+      after(() => {
+        document.documentElement.style.removeProperty('--vaadin-radio-button-disabled-background');
+        document.documentElement.style.removeProperty('--vaadin-radio-button-disabled-dot-color');
+      });
+
+      it('disabled', async () => {
+        await visualDiff(div, 'styled-disabled');
+      });
+
+      it('disabled checked', async () => {
+        element.checked = true;
+        await visualDiff(div, 'styled-disabled-checked');
+      });
+    });
   });
 
   describe('RTL', () => {

packages/radio-group/theme/lumo/vaadin-radio-button-styles.js

@@ -134,11 +134,11 @@ registerStyles(
     }
 
     :host([disabled]) [part='radio'] {
-      background-color: var(--lumo-contrast-10pct);
+      background-color: var(--vaadin-radio-button-disabled-background, var(--lumo-contrast-10pct));
     }
 
     :host([disabled]) [part='radio']::after {
-      border-color: var(--lumo-contrast-30pct);
+      border-color: var(--vaadin-radio-button-disabled-dot-color, var(--lumo-contrast-30pct));
     }
 
     /* RTL specific styles */

packages/vaadin-lumo-styles/style.js

@@ -62,6 +62,8 @@ const globals = css`
     --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
     --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
     --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-10pct);
+    --vaadin-checkbox-disabled-background: var(--lumo-contrast-30pct);
     /* Radio button */
     --vaadin-radio-button-background: var(--lumo-contrast-20pct);
     --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
@@ -72,6 +74,8 @@ const globals = css`
     --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
       var(--lumo-space-xs);
     --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
+    --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
     --vaadin-selection-color: var(--lumo-primary-color);
     --vaadin-selection-color-text: var(--lumo-primary-text-color);
     --vaadin-input-field-border-radius: var(--lumo-border-radius-m);