From 5910fabc7d221ea744063c319ef87a4f28e455c2 Mon Sep 17 00:00:00 2001 From: FrediWa Date: Wed, 24 Jul 2024 14:03:23 +0300 Subject: [PATCH] git experiment --- .../theme/lumo/vaadin-checkbox-group-styles.js | 5 +++-- .../theme/lumo/vaadin-checkbox-styles.js | 8 +++++--- .../theme/lumo/vaadin-custom-field-styles.js | 4 ++-- .../theme/lumo/vaadin-month-calendar-styles.js | 4 ++-- .../test/visual/lumo/input-container.test.js | 8 ++++++++ .../baseline/empty-styled-disabled.png | Bin 0 -> 418 bytes .../baseline/non-empty-styled-disabled.png | Bin 0 -> 1964 bytes .../theme/lumo/vaadin-input-container-styles.js | 11 +++++------ .../vaadin-multi-select-combo-box-chip-styles.js | 6 ++++-- .../theme/lumo/vaadin-radio-button-styles.js | 8 +++++--- .../theme/lumo/vaadin-radio-group-styles.js | 5 +++-- .../mixins/input-field-shared.js | 6 ++++-- 12 files changed, 41 insertions(+), 24 deletions(-) create mode 100644 packages/input-container/test/visual/lumo/screenshots/input-container/baseline/empty-styled-disabled.png create mode 100644 packages/input-container/test/visual/lumo/screenshots/input-container/baseline/non-empty-styled-disabled.png diff --git a/packages/checkbox-group/theme/lumo/vaadin-checkbox-group-styles.js b/packages/checkbox-group/theme/lumo/vaadin-checkbox-group-styles.js index 88b3a8c06e..0891d74405 100644 --- 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 index 4fb214c2e3..c09195619b 100644 --- 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 index a05d65abef..5e6fc140e4 100644 --- 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 index f898bb733c..f6c44cdf93 100644 --- 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 index 6d225d6509..95d795aee2 100644 --- 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/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/empty-styled-disabled.png b/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/empty-styled-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..733731d36a53b1da1bd18891b26da35e59905a7e GIT binary patch literal 418 zcmeAS@N?(olHy`uVBq!ia0vp^uYlNsgAGW2PD;rFQjEnx?oJHr&dIz4vSU15978JR zyuEumx5YrBHPC~3NAF99ldZmyI(KgPu-0>VESX{Bl2_DMQm%96(QO5l^`W8MA6D;; zsbzSO?9|GD4Y8CSl2}~z{%X|f)W|b$oPl(s{t}G`Yft{E`P#~Y z%{Ht~AWHD^!o1txCO>bef9?}}dEvdh?f$ZC758T@Tjsp?{`>h>JRkN2`}*Er5*3=< z^J;H+_S;Y131@|_N3FhB-D`MmiFy4*!vfj(TE&I{?C5~Dg5$Z!^~b_L00W)D)78&q Iol`;+020Hh5&!@I literal 0 HcmV?d00001 diff --git a/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/non-empty-styled-disabled.png b/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/non-empty-styled-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..7d46c0aef05f784b29c62e61859e8f5b1a708dfe GIT binary patch literal 1964 zcmaJ?X*8SL8vatpltV-a=@HemF>8$#Lo1|$v^CxY)w9~1DylUVO=(fYT-sATu2MDB z6x6h|v=p~Bq(}&{OcnDGYO0}z818rf-23aEcdfnOz4xE@+3&O7=Sg(1vzCPZ1_b~> zl4N7)1m;C>8HtI2`^L>%cfbS*a72W6s01)*gSz3@ovX)0}ZOFb#B5Pe?lJ1E3 zgs<>UqEL1;93g^*cMz3MNf!{EjzU2n*M6bHAm#&AIGsh1;^86rt0Lkb2XBVJ!y+>e6$^njf;<;4E(5LW(K2whOc(D zv75pLIz~nbE|u3Y+S=NF2cBMD`872%V5q69Cthow>RHbTdGO)!QG^e#9_c^cM7(!T zH~V}jV)gRA?Dv84mO1vT$!)>(i2tQa&|072^~;Y*;))5o;U7>pc*c)@Y6(RFs;a7? z6aR`@ZJOft^?mvH(Kz)M7BM+AgzCw`EBSH<2CP!w4f}-sm=Zo`>#l<;V0%tiyEFN; zhJ0q`t5+GRsfY{PGaWC`ii#dsL|&0MT1n|f|2Dp?qQb8u?7|7DjrH}H+1cIS>in&l zC8Zj#?NpJ(KR}qp#l_%NQ&Us?}P6#V{=4vj#;<5A6Y z6C94Yvf@X(e_t03(??14ec$Sv4eVVA)oWmYXJ@ON9%e?yal>=xs!K`| z!P3_&(+dj=FSm#7@7x<%rj?dnsvPVxeXz2&xAmRX*?IHsT}^p8Iey?r*Bdu_^71fe zwX`@3!3f~)oja&ROYr@+UdGVCKznSgu%UrLRaMoWDJdzN4;#spG+M)JxhKT2<+P-M zBw?g^Fw%*VHj_?a)Ycl-Pf=W4^kt#F%QS81j|0IrDb?54_m@N19eaEG&C!aAv#B#* zzlzzaaNp3jS9qrZvxxnWUJcPm=dv`c_j|Wy<2jIry@NykC1|8qch=JUk1`Be0)xp91MMvx5VMH7OGvZ??ats2KlqAllrKejzW1iM5>Bnh0<2?okr+-YW zO|}fxcu6hMOo55kL>Wd&2?V(1;ek$I&!sTG`y~D%efS3rKV<1`PTpnHI4W7HQQsCp@TwebaBAtbO*_oz!RIgq4O_D-+{``4VNs0RTkTohvf#?{pGHQ&H5P4TydkTk>2fx8zT1u|i zA?!0g94)-c%1XW%5BuZxZ818XjyiF|%GdV{*plDR%A1&&a5$XE!O9yK9c9ml?ZBPO zkd2LvYFb*Y%x6ly9M0NB_W&cbSS&$JLxbS&uf6#FJBSIE-nE5aecsJtnNuh}qaUO} zNr~kyw8l#*P0$*uy}2s=AoDA{hAOvml%irA`xOoXAd$$ST3?0i3yV`C$1 zlkXTTw0O;<+SLe;x3}dQ>FIr0TJp(c&++GEcV`Xz1ly~jlV60h&B8PF_4PM*!_MDd zl!a7%`ji!APVI$l6kbl}Z#^WXf^s?D=&QWtMR_~JWXHH#=(gLR=#>Az`rV4|2P4NA zhB-9q>L9Z$*euq*3tgHJ_AO8k8RXDxhER=3c;?}uG3WKt#sm$Uo0;L