diff --git a/.changeset/healthy-kangaroos-wait.md b/.changeset/healthy-kangaroos-wait.md new file mode 100644 index 0000000000..8defeb9de1 --- /dev/null +++ b/.changeset/healthy-kangaroos-wait.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(utility): added image disabled utility class diff --git a/dist/icon/icon.css b/dist/icon/icon.css index 38e52bcc6b..401c6155ea 100644 --- a/dist/icon/icon.css +++ b/dist/icon/icon.css @@ -71,7 +71,7 @@ svg.icon--64-colored { height: 64px; } svg.icon--disabled { - filter: var(--color-icon-disabled-filter); + filter: var(--color-media-disabled-filter); } svg.icon--attention-filled { color: var(--color-foreground-attention); diff --git a/dist/icon/icon.css.map b/dist/icon/icon.css.map index ed12b1a7b7..d3fbcbe5eb 100644 --- a/dist/icon/icon.css.map +++ b/dist/icon/icon.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../src/sass/icon/icon.scss","../../src/sass/mixins/private/_icon-mixins.scss","icon.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAII;ECCA,oBAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,qBAAA;ACFJ;AFDI;EAEI,WAAA;EACA,UAAA;AEER;AFCI;EAEI,WAAA;EACA,UAAA;AEAR;AFGI;EAEI,WAAA;EACA,UAAA;AEFR;AFKI;EAEI,WAAA;EACA,UAAA;AEJR;AFOI;EAEI,WAAA;EACA,UAAA;AENR;AFSI;EAEI,WAAA;EACA,UAAA;AERR;AFWI;EAEI,WAAA;EACA,UAAA;AEVR;AFaI;EAEI,WAAA;EACA,UAAA;AEZR;AFeI;EACI,WAAA;AEbR;AFgBI;EACI,WAAA;AEdR;AFiBI;EACI,WAAA;AEfR;AFkBI;EACI,WAAA;AEhBR;AFmBI;EACI,WAAA;AEjBR;AFoBI;EACI,WAAA;AElBR;AFqBI;EACI,WAAA;AEnBR;AFsBI;EACI,WAAA;AEpBR;AFuBI;EACI,wCAAA;AErBR;AFuBI;EGtFI,uCAAA;ADkER;AFuBI;EGzFI,0CAAA;ADqER;AFuBI;EG5FI,yCAAA;ADwER","file":"icon.css"} \ No newline at end of file +{"version":3,"sources":["../../src/sass/icon/icon.scss","../../src/sass/mixins/private/_icon-mixins.scss","icon.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAII;ECCA,oBAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,qBAAA;ACFJ;AFDI;EAEI,WAAA;EACA,UAAA;AEER;AFCI;EAEI,WAAA;EACA,UAAA;AEAR;AFGI;EAEI,WAAA;EACA,UAAA;AEFR;AFKI;EAEI,WAAA;EACA,UAAA;AEJR;AFOI;EAEI,WAAA;EACA,UAAA;AENR;AFSI;EAEI,WAAA;EACA,UAAA;AERR;AFWI;EAEI,WAAA;EACA,UAAA;AEVR;AFaI;EAEI,WAAA;EACA,UAAA;AEZR;AFeI;EACI,WAAA;AEbR;AFgBI;EACI,WAAA;AEdR;AFiBI;EACI,WAAA;AEfR;AFkBI;EACI,WAAA;AEhBR;AFmBI;EACI,WAAA;AEjBR;AFoBI;EACI,WAAA;AElBR;AFqBI;EACI,WAAA;AEnBR;AFsBI;EACI,WAAA;AEpBR;AFuBI;EACI,yCAAA;AErBR;AFuBI;EGtFI,uCAAA;ADkER;AFuBI;EGzFI,0CAAA;ADqER;AFuBI;EG5FI,yCAAA;ADwER","file":"icon.css"} \ No newline at end of file diff --git a/dist/phone-input/phone-input.css b/dist/phone-input/phone-input.css index bf1cc26521..136cdefdf5 100644 --- a/dist/phone-input/phone-input.css +++ b/dist/phone-input/phone-input.css @@ -95,7 +95,7 @@ .phone-input--disabled span.fflag, .phone-input--disabled svg.flag { - filter: var(--color-icon-disabled-filter); + filter: var(--color-media-disabled-filter); } .phone-input--disabled .textbox { diff --git a/dist/phone-input/phone-input.css.map b/dist/phone-input/phone-input.css.map index 403900a163..36f46fb594 100644 --- a/dist/phone-input/phone-input.css.map +++ b/dist/phone-input/phone-input.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../src/sass/phone-input/phone-input.scss","phone-input.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAGA;EAEI,mBAAA;ACKJ;;ADFA;EACI,yBAAA;EAGA,uBAAA;EAFA,cAAA;EACA,oDAAA;ACMJ;;ADFA;EAEI,wBAAA;EADA,+CAAA;EAGA,YAAA;EADA,SAAA;ACMJ;;ADFA;EACI,sCAAA;UAAA,qCAAA;ACKJ;;ADFA;EAEI,WAAA;EACA,UAAA;ACKJ;;ADFA;EAEI,mBAAA;ACKJ;ADHI;EACI,qCAAA;UAAA,oCAAA;ACMR;ADHI;EACI,qCAAA;UAAA,oCAAA;ACMR;ADHI;EACI,uCAAA;ACMR;;ADFA;EAEI,eAAA;EACA,sBAAA;EACA,kBAAA;ACKJ;;ADFA;EACI,iEAAA;ACKJ;;ADFA;EACI,WAAA;ACKJ;;ADFA;EAEI,UAAA;ACKJ;;ADFA;EEnEQ,qEAAA;AD0ER;;ADFA;EExEQ,iFAAA;AD8ER;;ADCA;EE/EQ,mFAAA;EAAA,qEAAA;EFsFJ,kBAAA;EACA,gBAAA;ACFJ;;ADKA;EE1FQ,wEAAA;ADyFR;;ADKA;EAEI,wCAAA;ACFJ;;ADKA;EEnGQ,mFAAA;ADkGR;;ADQA;EE1GQ,gFAAA;ADsGR;;ADWA;EEjHQ,mFAAA;EAAA,0EAAA;AD2GR;ADkBA;EACI,SAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,gBAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,gBAAA;ACdJ;;ADiBA;EACI;IAEI,cAAA;ECdN;AACF;ADkBI;EACI,yBAAA;AChBR;ADmBI;EACI,iEAAA;EAEA,aAAA;EACA,aAAA;EACA,iBAAA;ACjBR;ADoBI;EAEI,aAAA;AClBR","file":"phone-input.css"} \ No newline at end of file +{"version":3,"sources":["../../src/sass/phone-input/phone-input.scss","phone-input.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAGA;EAEI,mBAAA;ACKJ;;ADFA;EACI,yBAAA;EAGA,uBAAA;EAFA,cAAA;EACA,oDAAA;ACMJ;;ADFA;EAEI,wBAAA;EADA,+CAAA;EAGA,YAAA;EADA,SAAA;ACMJ;;ADFA;EACI,sCAAA;UAAA,qCAAA;ACKJ;;ADFA;EAEI,WAAA;EACA,UAAA;ACKJ;;ADFA;EAEI,mBAAA;ACKJ;ADHI;EACI,qCAAA;UAAA,oCAAA;ACMR;ADHI;EACI,qCAAA;UAAA,oCAAA;ACMR;ADHI;EACI,uCAAA;ACMR;;ADFA;EAEI,eAAA;EACA,sBAAA;EACA,kBAAA;ACKJ;;ADFA;EACI,iEAAA;ACKJ;;ADFA;EACI,WAAA;ACKJ;;ADFA;EAEI,UAAA;ACKJ;;ADFA;EEnEQ,qEAAA;AD0ER;;ADFA;EExEQ,iFAAA;AD8ER;;ADCA;EE/EQ,mFAAA;EAAA,qEAAA;EFsFJ,kBAAA;EACA,gBAAA;ACFJ;;ADKA;EE1FQ,wEAAA;ADyFR;;ADKA;EAEI,yCAAA;ACFJ;;ADKA;EEnGQ,mFAAA;ADkGR;;ADQA;EE1GQ,gFAAA;ADsGR;;ADWA;EEjHQ,mFAAA;EAAA,0EAAA;AD2GR;ADkBA;EACI,SAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,gBAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,gBAAA;ACdJ;;ADiBA;EACI;IAEI,cAAA;ECdN;AACF;ADkBI;EACI,yBAAA;AChBR;ADmBI;EACI,iEAAA;EAEA,aAAA;EACA,aAAA;EACA,iBAAA;ACjBR;ADoBI;EAEI,aAAA;AClBR","file":"phone-input.css"} \ No newline at end of file diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css index cf6dd35569..5484067bf2 100644 --- a/dist/tokens/evo-light.css +++ b/dist/tokens/evo-light.css @@ -183,5 +183,5 @@ var(--color-ai-solid-green-subtle) 66%, var(--color-ai-solid-green-subtle) 100% ); - --color-icon-disabled-filter: grayscale(1) opacity(0.25); + --color-media-disabled-filter: grayscale(1) opacity(0.25); } diff --git a/dist/utility/utility.css b/dist/utility/utility.css index 444872004d..6fdd0593e5 100644 --- a/dist/utility/utility.css +++ b/dist/utility/utility.css @@ -92,6 +92,10 @@ object-fit: contain; } +.image-disabled { + filter: var(--color-media-disabled-filter); +} + .text-truncate { overflow: hidden; text-overflow: ellipsis; diff --git a/dist/utility/utility.css.map b/dist/utility/utility.css.map index f3c394bea3..d0aec61e44 100644 --- a/dist/utility/utility.css.map +++ b/dist/utility/utility.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../src/sass/utility/utility.scss","utility.css","../../src/sass/mixins/public/_utility-mixins.scss"],"names":[],"mappings":"AAMI;EAEI,WAAA;EACA,aAAA;EACA,aAAA;ACER;ADCI;EACI,UAAA;ACCR;ADIA;EACI,QAAA;EACA,6BAAA;EACA,UAAA;EACA,eAAA;EACA,SAAA;EACA,iBAAA;EACA,kBAAA;EACA,SAAA;ACAJ;ADIA;EACI,SAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;ACAJ;ADIA;EACI,WAAA;EACA,UAAA;ACAJ;ADIA;EACI,WAAA;EACA,cAAA;ACAJ;ADIA;EACI,kBAAA;EACA,iBAAA;EACA,qBAAA;ACAJ;ADEI;EACI,eAAA;EACA,cAAA;ACAR;ADKA;EEtCI,kBAAA;EACA,iBAFmC;EAGnC,YAAA;EACA,sBAAA;EACA,eAAA;EACA,iBAAA;ADsCJ;ACpCI;EACI,6BAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,MAAA;EACA,mBAAA;EACA,iBAAA;EACA,OAAA;EACA,KAAA;ADsCR;ACnCI;EACI,oBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;ADqCR;ADjBA;EE3CI,kBAAA;EACA,kBF2CyB;EE1CzB,YAAA;EACA,sBAAA;EACA,eAAA;EACA,iBAAA;ADiEJ;AC/DI;EACI,6BAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,MAAA;EACA,mBAAA;EACA,iBAAA;EACA,OAAA;EACA,KAAA;ADiER;AC9DI;EACI,oBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;ADgER;;ADxCA;EACI,eAAA;EACA,sBAAA;EACA,kBAAA;AC2CJ","file":"utility.css"} \ No newline at end of file +{"version":3,"sources":["../../src/sass/utility/utility.scss","utility.css","../../src/sass/mixins/public/_utility-mixins.scss"],"names":[],"mappings":"AAMI;EAEI,WAAA;EACA,aAAA;EACA,aAAA;ACER;ADCI;EACI,UAAA;ACCR;ADIA;EACI,QAAA;EACA,6BAAA;EACA,UAAA;EACA,eAAA;EACA,SAAA;EACA,iBAAA;EACA,kBAAA;EACA,SAAA;ACAJ;ADIA;EACI,SAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;ACAJ;ADIA;EACI,WAAA;EACA,UAAA;ACAJ;ADIA;EACI,WAAA;EACA,cAAA;ACAJ;ADIA;EACI,kBAAA;EACA,iBAAA;EACA,qBAAA;ACAJ;ADEI;EACI,eAAA;EACA,cAAA;ACAR;ADKA;EEtCI,kBAAA;EACA,iBAFmC;EAGnC,YAAA;EACA,sBAAA;EACA,eAAA;EACA,iBAAA;ADsCJ;ACpCI;EACI,6BAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,MAAA;EACA,mBAAA;EACA,iBAAA;EACA,OAAA;EACA,KAAA;ADsCR;ACnCI;EACI,oBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;ADqCR;ADjBA;EE3CI,kBAAA;EACA,kBF2CyB;EE1CzB,YAAA;EACA,sBAAA;EACA,eAAA;EACA,iBAAA;ADiEJ;AC/DI;EACI,6BAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,MAAA;EACA,mBAAA;EACA,iBAAA;EACA,OAAA;EACA,KAAA;ADiER;AC9DI;EACI,oBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;ADgER;;ADxCA;EACI,yCAAA;AC2CJ;;ADxCA;EACI,eAAA;EACA,sBAAA;EACA,kBAAA;AC2CJ","file":"utility.css"} \ No newline at end of file diff --git a/docs/_includes/utility.html b/docs/_includes/utility.html index 716afd47d4..5a9ad6dc69 100644 --- a/docs/_includes/utility.html +++ b/docs/_includes/utility.html @@ -39,6 +39,10 @@

@ebay/skin/utility

.image-scale Image will scale up and down + + .image-disabled + Image will appear disabled. + .text-truncate Truncate single-line text diff --git a/src/sass/icon/icon.scss b/src/sass/icon/icon.scss index 50d32ac4de..7dd3df3f15 100644 --- a/src/sass/icon/icon.scss +++ b/src/sass/icon/icon.scss @@ -86,7 +86,7 @@ svg { } &.icon--disabled { - filter: var(--color-icon-disabled-filter); + filter: var(--color-media-disabled-filter); } &.icon--attention-filled { @include color-token(color-foreground-attention); diff --git a/src/sass/phone-input/phone-input.scss b/src/sass/phone-input/phone-input.scss index 0c35241291..ff8078fdc6 100644 --- a/src/sass/phone-input/phone-input.scss +++ b/src/sass/phone-input/phone-input.scss @@ -96,7 +96,7 @@ .phone-input--disabled span.fflag, .phone-input--disabled svg.flag { - filter: var(--color-icon-disabled-filter); + filter: var(--color-media-disabled-filter); } .phone-input--disabled .textbox { diff --git a/src/sass/utility/utility.scss b/src/sass/utility/utility.scss index 5860e47816..f9b974a03c 100644 --- a/src/sass/utility/utility.scss +++ b/src/sass/utility/utility.scss @@ -71,6 +71,10 @@ @include image-treatment(16px); } +.image-disabled { + filter: var(--color-media-disabled-filter); +} + .text-truncate { overflow: hidden; text-overflow: ellipsis; diff --git a/src/tokens/evo-light.css b/src/tokens/evo-light.css index cf6dd35569..5484067bf2 100644 --- a/src/tokens/evo-light.css +++ b/src/tokens/evo-light.css @@ -183,5 +183,5 @@ var(--color-ai-solid-green-subtle) 66%, var(--color-ai-solid-green-subtle) 100% ); - --color-icon-disabled-filter: grayscale(1) opacity(0.25); + --color-media-disabled-filter: grayscale(1) opacity(0.25); }