@ebay/skin 19.15.0 → 19.16.0

package/dist/toast-dialog/toast-dialog.css

@@ -2,11 +2,13 @@
     --dialog-scrim-color-hide: rgb(17 24 32 / 0);
     --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
     --dialog-lightbox-max-width: 616px;
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
 .toast-dialog {
     background-color: var(
         --toast-dialog-background-color,
-        var(--color-background-information)
+        var(--color-background-accent)
     );
     border-top-left-radius: var(
         --toast-dialog-border-radius,
@@ -27,43 +29,36 @@
     will-change: opacity, transform;
     z-index: 2;
 }
-
 .toast-dialog,
 .toast-dialog a {
     color: var(
         --toast-dialog-foreground-color,
-        var(--color-foreground-on-information)
+        var(--color-foreground-on-success)
     );
 }
-
 .toast-dialog a:focus {
     outline: 1px auto currentColor;
 }
-
 .toast-dialog--transition {
     transition:
         opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
         transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;
 }
-
 .toast-dialog--hide-init,
 .toast-dialog--show {
     display: block;
     opacity: 1;
     transform: translateY(0);
 }
-
 .toast-dialog--hide,
 .toast-dialog--show-init {
     display: block;
     opacity: 0;
     transform: translateY(110%);
 }
-
 .toast-dialog__window {
     padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);
 }
-
 .toast-dialog__header {
     align-items: center;
     display: flex;
@@ -77,24 +72,48 @@ button.icon-btn.toast-dialog__close {
     border: 0;
     color: var(
         --toast-dialog-foreground-color,
-        var(--color-foreground-on-information)
+        var(--color-foreground-on-success)
     );
     flex-shrink: 0;
     margin-inline-start: auto;
+    overflow: hidden;
     padding: 0;
+    position: relative;
+}
+button.icon-btn.toast-dialog__close:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+button.icon-btn.toast-dialog__close:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+button.icon-btn.toast-dialog__close[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+button.icon-btn.toast-dialog__close:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+button.icon-btn.toast-dialog__close[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+button.icon-btn.toast-dialog__close:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+button.icon-btn.toast-dialog__close[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
 }
 button.icon-btn.toast-dialog__close:focus {
-    outline: 2px solid var(--color-foreground-on-information);
+    outline: 2px solid var(--color-foreground-on-success);
 }
-button.icon-btn.toast-dialog__close:focus,
-button.icon-btn.toast-dialog__close:hover {
-    color: var(--color-state-primary-hover);
-}
-
 button.icon-btn.toast-dialog__close > svg {
     fill: currentColor;
 }
-
 .toast-dialog__footer {
     display: flex;
     justify-content: flex-end;
@@ -108,6 +127,49 @@ button.icon-btn.toast-dialog__close > svg {
         --toast-dialog-foreground-color,
         var(--color-foreground-on-accent)
     );
+    overflow: hidden;
+    position: relative;
+}
+.toast-dialog__footer button.btn--primary:after,
+.toast-dialog__footer button.btn--secondary:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+.toast-dialog__footer
+    button.btn--primary:not([disabled], [aria-disabled="true"]):hover:after,
+.toast-dialog__footer button.btn--primary[href]:hover:after,
+.toast-dialog__footer
+    button.btn--secondary:not([disabled], [aria-disabled="true"]):hover:after,
+.toast-dialog__footer button.btn--secondary[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+.toast-dialog__footer
+    button.btn--primary:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+.toast-dialog__footer button.btn--primary[href]:focus-visible:after,
+.toast-dialog__footer
+    button.btn--secondary:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+.toast-dialog__footer button.btn--secondary[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+.toast-dialog__footer
+    button.btn--primary:not([disabled], [aria-disabled="true"]):active:after,
+.toast-dialog__footer button.btn--primary[href]:active:after,
+.toast-dialog__footer
+    button.btn--secondary:not([disabled], [aria-disabled="true"]):active:after,
+.toast-dialog__footer button.btn--secondary[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
+}
+.toast-dialog__footer button.btn--primary,
+.toast-dialog__footer button.btn--secondary {
     border-style: solid;
     border-width: 1px;
     outline-offset: 2px;
@@ -130,39 +192,8 @@ button.icon-btn.toast-dialog__close > svg {
 }
 .toast-dialog__footer button.btn--primary:focus,
 .toast-dialog__footer button.btn--secondary:focus {
-    outline: 2px solid var(--color-foreground-on-information);
-}
-.toast-dialog__footer button.btn--primary:not([disabled]):focus,
-.toast-dialog__footer button.btn--primary:not([disabled]):hover {
-    background-color: var(--color-state-primary-hover);
-}
-.toast-dialog__footer button.btn--primary:not([disabled]):active {
-    background-color: var(--color-state-primary-active);
-}
-.toast-dialog__footer button.btn--secondary:not([disabled]):focus,
-.toast-dialog__footer button.btn--secondary:not([disabled]):hover {
-    background-color: var(--color-state-accent-hover);
-    border-color: var(
-        --toast-dialog-foreground-color,
-        var(--color-foreground-on-accent)
-    );
-    color: var(
-        --toast-dialog-foreground-color,
-        var(--color-background-primary)
-    );
-}
-.toast-dialog__footer button.btn--secondary:not([disabled]):active {
-    background-color: var(--color-state-accent-active);
-    border-color: var(
-        --toast-dialog-foreground-color,
-        var(--color-foreground-on-accent)
-    );
-    color: var(
-        --toast-dialog-foreground-color,
-        var(--color-background-primary)
-    );
+    outline: 2px solid var(--color-foreground-on-success);
 }
-
 @media (min-width: 512px) {
     .toast-dialog {
         border-radius: var(

package/dist/toggle-button/toggle-button.css

@@ -7,16 +7,15 @@
     --toggle-button-gallery-width-min: 168px;
     --toggle-button-gallery-width-max: 342px;
 }
-
 .toggle-button {
     background-color: var(--color-background-primary);
-    border: 1px solid var(--color-stroke-default);
+    border: 1px solid var(--color-border-medium);
     border-radius: var(--spacing-100);
     box-shadow: 0 0 0 1px transparent;
     color: var(--color-foreground-primary);
     display: inline-flex;
     font-family: inherit;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     justify-content: center;
     margin-right: var(--spacing-100);
     margin-top: auto;
@@ -31,71 +30,58 @@
     outline-style: outset;
     outline-width: 2px;
 }
-
 .toggle-button[aria-disabled="true"],
 .toggle-button[disabled] {
-    border-color: var(--color-stroke-disabled);
+    border-color: var(--color-border-disabled);
 }
-
 .toggle-button * {
     pointer-events: none;
 }
-
 .toggle-button[aria-pressed="true"] {
     background-color: var(--color-background-secondary);
-    border: 1px solid var(--color-stroke-strong);
-    box-shadow: 0 0 0 1px var(--color-stroke-strong);
+    border: 1px solid var(--color-border-strong);
+    box-shadow: 0 0 0 1px var(--color-border-strong);
     font-weight: 700;
 }
-
 .toggle-button[aria-disabled="true"][aria-pressed="true"],
 .toggle-button[disabled][aria-pressed="true"] {
-    border-color: var(--color-stroke-disabled);
-    box-shadow: 0 0 0 1px var(--color-stroke-disabled);
+    border-color: var(--color-border-disabled);
+    box-shadow: 0 0 0 1px var(--color-border-disabled);
 }
-
 .toggle-button:not([aria-disabled="true"], [disabled]):hover {
     background-color: var(--state-layer-hover);
 }
-
 .toggle-button:not([aria-disabled="true"], [disabled]):active {
     background-color: var(--state-layer-pressed);
 }
-
 .toggle-button__content {
     align-self: center;
     display: flex;
     flex-direction: column;
     text-align: left;
 }
-
 .toggle-button__icon,
 .toggle-button__image-container {
     margin-bottom: var(--spacing-200);
     margin-right: var(--spacing-200);
     margin-top: var(--spacing-200);
 }
-
 .toggle-button__image-container {
     align-self: center;
 }
-
 .toggle-button__image-container svg.icon {
     height: 100%;
 }
-
 .toggle-button__image-container img {
     height: 100%;
     max-height: 56px;
     max-width: 56px;
 }
-
 .toggle-button__image {
     display: inline-block;
     height: 56px;
     width: 56px;
 }
-
 .toggle-button__title {
     font-size: var(--font-size-medium);
     font-weight: 700;
@@ -103,16 +89,13 @@
     margin-bottom: var(--spacing-50);
     margin-top: var(--spacing-200);
 }
-
 .toggle-button__title:only-child {
     margin-bottom: var(--spacing-200);
 }
-
 .toggle-button[aria-disabled="true"] .toggle-button__title,
 .toggle-button[disabled] .toggle-button__title {
     color: var(--color-foreground-disabled);
 }
-
 .toggle-button
     .toggle-button__content:only-child
     .toggle-button__title:only-child {
@@ -122,33 +105,27 @@
     text-align: center;
     width: 100%;
 }
-
 .toggle-button:not([aria-pressed="true"])
     .toggle-button__content:only-child
     .toggle-button__title:only-child {
     font-weight: 400;
 }
-
 .toggle-button__subtitle {
     color: var(--color-foreground-secondary);
     line-height: var(--font-size-large-1);
     margin-bottom: var(--spacing-200);
 }
-
 .toggle-button[aria-disabled="true"] .toggle-button__subtitle,
 .toggle-button[disabled] .toggle-button__subtitle {
     color: var(--color-foreground-disabled);
 }
-
 .toggle-button__subtitle p {
     margin: 0;
 }
-
 .toggle-button[aria-pressed="true"] .toggle-button__subtitle {
     color: var(--color-foreground-primary);
     font-weight: 400;
 }
-
 .toggle-button[aria-disabled="true"][aria-pressed="true"]
     .toggle-button__subtitle,
 .toggle-button[disabled][aria-pressed="true"] .toggle-button__subtitle {
@@ -159,37 +136,31 @@
     max-width: var(--toggle-button-list-width-max);
     min-width: var(--toggle-button-list-width-min);
 }
-
 .toggle-button--list-layout .toggle-button__content:not(:only-child),
 .toggle-button--list-layout .toggle-button__image-container {
     align-self: self-start;
 }
-
 .toggle-button--gallery-layout {
     flex-direction: column;
     justify-content: left;
     max-width: var(--toggle-button-gallery-width-max);
     min-width: var(--toggle-button-gallery-width-min);
 }
-
 .toggle-button--gallery-layout .toggle-button__content {
     align-self: self-start;
 }
-
 .toggle-button--gallery-layout .toggle-button__icon,
 .toggle-button--gallery-layout .toggle-button__image-container {
     margin-bottom: 0;
     margin-right: 0;
     text-align: left;
 }
-
 .toggle-button--gallery-layout .toggle-button__image-container {
     padding-bottom: 60%;
     position: relative;
     text-align: center;
     width: 100%;
 }
-
 .toggle-button--gallery-layout .toggle-button__image {
     bottom: 0;
     height: 100%;
@@ -199,7 +170,6 @@
     top: 0;
     width: 100%;
 }
-
 .toggle-button[aria-disabled="true"] .toggle-button__icon,
 .toggle-button[aria-disabled="true"] .toggle-button__image,
 .toggle-button[disabled] .toggle-button__icon,
@@ -207,13 +177,11 @@
     filter: grayscale(1);
     opacity: 0.5;
 }
-
 .toggle-button--gallery-layout .toggle-button__image-container img {
     height: 100%;
     max-height: 200px;
     max-width: none;
 }
-
 .toggle-button--gallery-layout .toggle-button__icon ~ .toggle-button__content {
     align-self: flex-start;
 }

package/dist/toggle-button-group/toggle-button-group.css

@@ -15,11 +15,9 @@
     --row-gallery-toggle-buttons-md: 4;
     --row-gallery-toggle-buttons-xl: 6;
 }
-
 .toggle-button-group {
     container: toggle-buttons-container/inline-size;
 }
-
 @supports not (contain: inline-size) {
     @media (max-width: 320px) {
         .toggle-button-group[data-columns-min="1"] ul {
@@ -54,13 +52,11 @@
     padding: 0;
     width: 100%;
 }
-
 .toggle-button-group li {
     display: inline-block;
     min-height: var(--toggle-button-height-min);
     width: 100%;
 }
-
 .toggle-button-group .toggle-button {
     height: 100%;
     margin: 0;
@@ -70,42 +66,34 @@
 .toggle-button-group--list-layout ul {
     grid-template-columns: repeat(var(--row-list-toggle-buttons-min), 1fr);
 }
-
 .toggle-button-group--list-layout .toggle-button {
     justify-content: left;
     max-width: 100%;
     min-width: auto;
 }
-
 .toggle-button-group--gallery-layout ul {
     grid-template-columns: repeat(var(--row-gallery-toggle-buttons-min), 1fr);
 }
-
 .toggle-button-group--gallery-layout li {
     max-width: 100%;
 }
-
 .toggle-button-group--gallery-layout .toggle-button {
     flex-direction: column;
     max-width: 100%;
     min-width: auto;
 }
-
 .toggle-button-group--list-layout .toggle-button__content:not(:only-child),
 .toggle-button-group--list-layout .toggle-button__image-container {
     align-self: flex-start;
 }
-
 .toggle-button-group--gallery-layout .toggle-button {
     justify-content: flex-start;
 }
-
 .toggle-button-group--gallery-layout .toggle-button__icon,
 .toggle-button-group--gallery-layout .toggle-button__image {
     margin-bottom: 0;
     margin-right: 0;
 }
-
 .toggle-button-group--gallery-layout
     .toggle-button__icon
     ~ .toggle-button__content,
@@ -114,21 +102,18 @@
     ~ .toggle-button__content {
     align-self: flex-start;
 }
-
 .toggle-button-group--gallery-layout .toggle-button__icon,
 .toggle-button-group--gallery-layout .toggle-button__image-container {
     margin-bottom: 0;
     margin-right: 0;
     text-align: left;
 }
-
 .toggle-button-group--gallery-layout .toggle-button__image-container {
     padding-bottom: 60%;
     position: relative;
     text-align: center;
     width: 100%;
 }
-
 .toggle-button-group--gallery-layout .toggle-button__image {
     bottom: 0;
     height: 100%;
@@ -138,7 +123,6 @@
     top: 0;
     width: 100%;
 }
-
 .toggle-button-group--gallery-layout .toggle-button__image-container img {
     height: 100%;
     max-height: 200px;