🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more →
Sign In

@justeattakeaway/pie-css

Package Overview
Dependencies
Maintainers
10
Versions
99
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@justeattakeaway/pie-css - npm Package Compare versions

Comparing version
1.1.2
 to
1.1.3
+8
scss/mixins/_disablePointerEventsInSlottedIcons.scss
// Prevents slotted icons from intercepting pointer events, which confuses
// the browser active state tracking when the icon is replaced during a touch interaction
// Use when a pie-icon component might be slotted into a button
@mixin disable-pointer-events-in-slotted-icons() {
::slotted(.c-pieIcon) {
pointer-events: none;
}
}
+160
-98
dist/components/button.css

@@ -43,5 +43,7 @@ .c-button {

.c-button--primary:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--primary:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)));
}
}

@@ -53,5 +55,7 @@ .c-button--primary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--primary:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));
@media (hover: hover) {
.c-button--primary:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));
}
}

@@ -67,5 +71,7 @@ .c-button--primary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.is-loading:not(:disabled, .is-disabled) {

}
.c-button--primary.c-button--xsmall:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--primary.c-button--xsmall:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)));
}
}

@@ -77,5 +83,7 @@ .c-button--primary.c-button--xsmall:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--xsmall.is-loading:not(:disabled, .is-disabled), .c-button--primary.c-button--small-productive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--primary.c-button--xsmall:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary));
@media (hover: hover) {
.c-button--primary.c-button--xsmall:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary));
}
}

@@ -91,2 +99,4 @@ .c-button--primary.c-button--xsmall:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--xsmall.is-loading:not(:disabled, .is-disabled), .c-button--primary.c-button--small-productive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.is-loading:not(:disabled, .is-disabled) {

}
}
@media (min-width: 769px) and (hover: hover) {
.c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible) {

@@ -96,2 +106,4 @@ --hover-modifier: calc(-1 * var(--dt-color-hover-01));

}
}
@media (min-width: 769px) {
.c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive.is-loading:not(:disabled, .is-disabled), .c-button--primary.c-button--small-productive.c-button--responsive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive.is-loading:not(:disabled, .is-disabled) {

@@ -102,5 +114,7 @@ --active-modifier: calc(-1 * var(--dt-color-active-01));

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));
@media (min-width: 769px) and (hover: hover) {
.c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));
}
}

@@ -118,5 +132,7 @@ .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive.is-loading:not(:disabled, .is-disabled), .c-button--primary.c-button--small-productive.c-button--responsive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive.is-loading:not(:disabled, .is-disabled) {

}
.c-button--primary-alternative:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--primary-alternative:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)));
}
}

@@ -128,5 +144,7 @@ .c-button--primary-alternative:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--primary-alternative:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary));
@media (hover: hover) {
.c-button--primary-alternative:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary));
}
}

@@ -143,5 +161,7 @@ .c-button--primary-alternative:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative.is-loading:not(:disabled, .is-disabled) {

}
.c-button--primary-alternative-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--primary-alternative-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--hover-modifier)));
}
}

@@ -153,5 +173,7 @@ .c-button--primary-alternative-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative-dark.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--primary-alternative-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-dark));
@media (hover: hover) {
.c-button--primary-alternative-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-dark));
}
}

@@ -168,5 +190,7 @@ .c-button--primary-alternative-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative-dark.is-loading:not(:disabled, .is-disabled) {

}
.c-button--secondary:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--secondary:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)));
}
}

@@ -178,5 +202,7 @@ .c-button--secondary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--secondary.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--secondary:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary));
@media (hover: hover) {
.c-button--secondary:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary));
}
}

@@ -194,7 +220,9 @@ .c-button--secondary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--secondary.is-loading:not(:disabled, .is-disabled) {

}
.c-button--outline:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--outline:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
}
}

@@ -208,5 +236,7 @@ .c-button--outline:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--outline:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
@media (hover: hover) {
.c-button--outline:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
}
}

@@ -223,7 +253,9 @@ .c-button--outline:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline.is-loading:not(:disabled, .is-disabled) {

}
.c-button--ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
}
}

@@ -237,5 +269,7 @@ .c-button--ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
@media (hover: hover) {
.c-button--ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
}
}

@@ -252,7 +286,9 @@ .c-button--ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost.is-loading:not(:disabled, .is-disabled) {

}
.c-button--ghost-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--ghost-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
}
}

@@ -266,5 +302,7 @@ .c-button--ghost-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-dark.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--ghost-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
@media (hover: hover) {
.c-button--ghost-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
}
}

@@ -281,5 +319,7 @@ .c-button--ghost-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-dark.is-loading:not(:disabled, .is-disabled) {

}
.c-button--inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)));
}
}

@@ -291,5 +331,7 @@ .c-button--inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--inverse.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse));
@media (hover: hover) {
.c-button--inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse));
}
}

@@ -306,6 +348,8 @@ .c-button--inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--inverse.is-loading:not(:disabled, .is-disabled) {

}
.c-button--ghost-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
@media (hover: hover) {
.c-button--ghost-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
}
}

@@ -318,5 +362,7 @@ .c-button--ghost-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--ghost-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
@media (hover: hover) {
.c-button--ghost-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
}
}

@@ -334,6 +380,8 @@ .c-button--ghost-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse.is-loading:not(:disabled, .is-disabled) {

}
.c-button--outline-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
@media (hover: hover) {
.c-button--outline-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
}
}

@@ -346,5 +394,7 @@ .c-button--outline-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline-inverse.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--outline-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
@media (hover: hover) {
.c-button--outline-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
}
}

@@ -361,6 +411,8 @@ .c-button--outline-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline-inverse.is-loading:not(:disabled, .is-disabled) {

}
.c-button--ghost-inverse-light:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
@media (hover: hover) {
.c-button--ghost-inverse-light:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
}
}

@@ -373,5 +425,7 @@ .c-button--ghost-inverse-light:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse-light.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--ghost-inverse-light:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
@media (hover: hover) {
.c-button--ghost-inverse-light:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
}
}

@@ -387,5 +441,7 @@ .c-button--ghost-inverse-light:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse-light.is-loading:not(:disabled, .is-disabled) {

}
.c-button--destructive:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--destructive:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)));
}
}

@@ -397,5 +453,7 @@ .c-button--destructive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--destructive:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));
@media (hover: hover) {
.c-button--destructive:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));
}
}

@@ -412,7 +470,9 @@ .c-button--destructive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive.is-loading:not(:disabled, .is-disabled) {

}
.c-button--destructive-ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
@media (hover: hover) {
.c-button--destructive-ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
}
}

@@ -426,5 +486,7 @@ .c-button--destructive-ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive-ghost.is-loading:not(:disabled, .is-disabled) {

@supports (background-color: color-mix(in srgb, black, white)) {
.c-button--destructive-ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
@media (hover: hover) {
.c-button--destructive-ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
}
}

@@ -431,0 +493,0 @@ .c-button--destructive-ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive-ghost.is-loading:not(:disabled, .is-disabled) {

+2
-2
package.json
{
"name": "@justeattakeaway/pie-css",
"version": "1.1.2",
"version": "1.1.3",
"description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",

@@ -54,3 +54,3 @@ "repository": {

"include-media": "2.0.0",
"postcss": "8.4.32",
"postcss": "8.5.15",
"postcss-import": "15.1.0",

@@ -57,0 +57,0 @@ "w3c-css-validator": "1.4.1"

+25
-21
scss/mixins/_interactiveStates.scss

@@ -16,22 +16,24 @@ // ----------------------------------------------

// https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility
&:hover:not(:disabled, .is-disabled, .is-dismissible) {
@if $mode == 'alt' {
--hover-modifier: calc(-1 * var(--dt-color-hover-02));
} @else if $mode == 'inverse' {
--hover-modifier: var(--dt-color-hover-02);
} @else {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
}
@media (hover: hover) { // @media (hover: hover) prevents the hover state from getting stuck on touch devices
&:hover:not(:disabled, .is-disabled, .is-dismissible) {
@if $mode == 'alt' {
--hover-modifier: calc(-1 * var(--dt-color-hover-02));
} @else if $mode == 'inverse' {
--hover-modifier: var(--dt-color-hover-02);
} @else {
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
}
// for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
@if $mode == 'transparent' {
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
// for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
@if $mode == 'transparent' {
--hover-modifier: var(--dt-color-hover-01);
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
}
@if $mode == 'transparent-inverse' {
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
} @else {
--int-states-mixin-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
}
}
@if $mode == 'transparent-inverse' {
--hover-modifier: var(--dt-color-hover-02);
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
} @else {
--int-states-mixin-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
}
}

@@ -62,5 +64,7 @@

@supports (background-color: color-mix(in srgb, black, white)) {
&:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-#{$level}-bg) var(--dt-color-hover-#{$level}), var(#{$bg-color}));
@media (hover: hover) {
&:hover:not(:disabled, .is-disabled, .is-dismissible) {
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-#{$level}-bg) var(--dt-color-hover-#{$level}), var(#{$bg-color}));
}
}

@@ -67,0 +71,0 @@ 

+1
-0
scss/mixins/index.scss

@@ -7,1 +7,2 @@ @forward './interactiveStates';

@forward './components';
@forward './disablePointerEventsInSlottedIcons';