git experiment

vaadin · Jul 24, 2024 · 5910fab · 5910fab
1 parent 580f225
commit 5910fab
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 24 deletions.
diff --git a/packages/checkbox-group/theme/lumo/vaadin-checkbox-group-styles.js b/packages/checkbox-group/theme/lumo/vaadin-checkbox-group-styles.js
@@ -16,6 +16,7 @@ const checkboxGroup = css`
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: transparent;
     padding: var(--lumo-space-xs) 0;
+    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
   }
 
   :host::before {
@@ -31,8 +32,8 @@ const checkboxGroup = css`
   }
 
   :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    color: var(--_disabled-value-color);
+    -webkit-text-fill-color: var(--_disabled-value-color);
   }
 
   :host([focused]:not([disabled])) [part='label'] {

diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -27,6 +27,8 @@ 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-background: var(--vaadin-checkbox-disabled-background, var(--lumo-contrast-10pct));
+      --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
     }
 
     [part='label'] {
@@ -153,7 +155,7 @@ registerStyles(
     }
 
     :host([disabled]) [part='checkbox'] {
-      background-color: var(--lumo-contrast-10pct);
+      background-color: var(--_disabled-background);
     }
 
     :host([disabled]) [part='checkbox']::after {
@@ -162,8 +164,8 @@ registerStyles(
 
     :host([disabled]) [part='label'],
     :host([disabled]) [part='helper-text'] {
-      color: var(--lumo-disabled-text-color);
-      -webkit-text-fill-color: var(--lumo-disabled-text-color);
+      color: var(--_disabled-value-color);
+      -webkit-text-fill-color: var(--_disabled-value-color);
     }
 
     :host([indeterminate][disabled]) [part='checkbox']::after {

diff --git a/packages/custom-field/theme/lumo/vaadin-custom-field-styles.js b/packages/custom-field/theme/lumo/vaadin-custom-field-styles.js
@@ -66,8 +66,8 @@ const customField = css`
 
   /* Disabled */
   :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    color: var(--_disabled-value-color);
+    -webkit-text-fill-color: var(--_disabled-value-color);
   }
 
   /* Small theme */

diff --git a/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js b/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js
@@ -132,7 +132,7 @@ registerStyles(
     }
 
     [part~='date'][part~='disabled'] {
-      color: var(--lumo-disabled-text-color);
+      color: var(--_disabled-value-color);
     }
 
     @media (pointer: coarse) {
@@ -153,7 +153,7 @@ registerStyles(
     /* Disabled */
 
     :host([disabled]) * {
-      color: var(--lumo-disabled-text-color) !important;
+      color: var(--_disabled-value-color) !important;
     }
   `,
   { moduleId: 'lumo-month-calendar' },

diff --git a/packages/input-container/test/visual/lumo/input-container.test.js b/packages/input-container/test/visual/lumo/input-container.test.js
@@ -33,6 +33,14 @@ describe('input-container', () => {
         await visualDiff(div, `${initialState}-disabled`);
       });
 
+      it('styled disabled', async () => {
+        div.style.setProperty('--vaadin-input-field-disabled-background', 'black');
+        div.style.setProperty('--vaadin-input-field-disabled-value-color', 'white');
+
+        element.disabled = true;
+        await visualDiff(div, `${initialState}-styled-disabled`);
+      });
+
       it('readonly', async () => {
         element.readonly = true;
         await visualDiff(div, `${initialState}-readonly`);

diff --git a/...test/visual/lumo/screenshots/input-container/baseline/empty-styled-disabled.png b/...test/visual/lumo/screenshots/input-container/baseline/empty-styled-disabled.png
diff --git a/.../visual/lumo/screenshots/input-container/baseline/non-empty-styled-disabled.png b/.../visual/lumo/screenshots/input-container/baseline/non-empty-styled-disabled.png
diff --git a/packages/input-container/theme/lumo/vaadin-input-container-styles.js b/packages/input-container/theme/lumo/vaadin-input-container-styles.js
@@ -32,6 +32,8 @@ registerStyles(
       --_icon-size: var(--vaadin-input-field-icon-size, var(--lumo-icon-size-m));
       --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
       --_invalid-hover-highlight: var(--vaadin-input-field-invalid-hover-highlight, var(--lumo-error-color-50pct));
+      --_disabled-background: var(--vaadin-input-field-disabled-background, var(--lumo-contrast-5pct));
+      --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
     }
 
     :host([dir='rtl']) {
@@ -82,12 +84,9 @@ registerStyles(
 
     /* Disabled */
     :host([disabled]) {
-      background-color: var(--lumo-contrast-5pct);
-    }
-
-    :host([disabled]) ::slotted(*) {
-      color: var(--lumo-disabled-text-color);
-      -webkit-text-fill-color: var(--lumo-disabled-text-color);
+      background: var(--_disabled-background);
+      -webkit-text-fill-color: var(--_disabled-value-color);
+      color: var(--_disabled-value-color);
     }
 
     /* Invalid */

diff --git a/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js b/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js
@@ -21,6 +21,8 @@ const chip = css`
     cursor: var(--lumo-clickable-cursor);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    --_disabled-background: var(--vaadin-input-field-disabled-background, var(--lumo-contrast-5pct));
+    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
   }
 
   :host([focused]) [part='remove-button'] {
@@ -92,8 +94,8 @@ const chip = css`
   }
 
   :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    color: var(--_disabled-value-color);
+    -webkit-text-fill-color: var(--_disabled-value-color);
     pointer-events: none;
   }
 `;

diff --git a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js
@@ -25,6 +25,8 @@ registerStyles(
       --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
       --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
       --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+      --_disabled-background: var(--vaadin-radio-button-disabled-background, var(--lumo-contrast-5pct));
+      --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
     }
 
     :host([has-label]) ::slotted(label) {
@@ -125,7 +127,7 @@ registerStyles(
 
     :host([disabled]) {
       pointer-events: none;
-      color: var(--lumo-disabled-text-color);
+      color: var(--_disabled-value-color);
       --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
     }
 
@@ -134,11 +136,11 @@ registerStyles(
     }
 
     :host([disabled]) [part='radio'] {
-      background-color: var(--lumo-contrast-10pct);
+      background-color: var(--_disabled-background);
     }
 
     :host([disabled]) [part='radio']::after {
-      border-color: var(--lumo-contrast-30pct);
+      border-color: var(--_disabled-value-color);
     }
 
     /* RTL specific styles */

diff --git a/packages/radio-group/theme/lumo/vaadin-radio-group-styles.js b/packages/radio-group/theme/lumo/vaadin-radio-group-styles.js
@@ -16,6 +16,7 @@ const radioGroup = css`
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: transparent;
     padding: var(--lumo-space-xs) 0;
+    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
   }
 
   :host::before {
@@ -31,8 +32,8 @@ const radioGroup = css`
   }
 
   :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    color: var(--_disabled-value-color);
+    -webkit-text-fill-color: var(--_disabled-value-color);
   }
 
   :host([focused]:not([readonly])) [part='label'] {

diff --git a/packages/vaadin-lumo-styles/mixins/input-field-shared.js b/packages/vaadin-lumo-styles/mixins/input-field-shared.js
@@ -28,6 +28,8 @@ const inputField = css`
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
     --_input-height: var(--vaadin-input-field-height, var(--lumo-text-field-size));
+    --_disabled-background: var(--vaadin-input-field-disabled-background, var(--lumo-contrast-5pct));
+    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
   }
 
   :host::before {
@@ -91,8 +93,8 @@ const inputField = css`
 
   :host([disabled]) [part='label'],
   :host([disabled]) [part='input-field'] ::slotted(*) {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    color: var(--_disabled-value-color);
+    -webkit-text-fill-color: var(--_disabled-value-color);
   }
 
   /* Invalid style */