@ebay/skin 19.15.0 → 19.17.0

package/dist/tokens/evo-live-light-class.css

@@ -0,0 +1,128 @@
+@media (prefers-color-scheme: light) {
+    .evo-theme-live {
+        --color-ai-solid-blue-strong: #0968f6;
+        --color-ai-solid-blue-subtle: #112c31;
+        --color-ai-solid-green-strong: #4ee04b;
+        --color-ai-solid-green-subtle: #112611;
+        --color-ai-solid-purple-strong: #993ee0;
+        --color-ai-solid-purple-subtle: #20172f;
+        --color-ai-solid-red-strong: #ff4242;
+        --color-ai-solid-red-subtle: #321919;
+        --color-ai-solid-yellow-strong: #ffd80e;
+        --color-background-accent: var(--color-kiwi-400);
+        --color-background-attention: var(--color-red-400);
+        --color-background-disabled: var(--color-neutral-600);
+        --color-background-education: var(--color-indigo-800);
+        --color-background-elevated: var(--color-neutral-800);
+        --color-background-inverse: var(--color-neutral-300);
+        --color-background-on-image: rgba(0, 0, 0, 0.9);
+        --color-background-on-secondary: var(--color-neutral-900);
+        --color-background-primary: var(--color-neutral-900);
+        --color-background-secondary-on-elevated: var(--color-neutral-900);
+        --color-background-secondary: var(--color-neutral-800);
+        --color-background-strong: var(--color-neutral-200);
+        --color-background-success: var(--color-kiwi-500);
+        --color-background-tertiary: var(--color-neutral-700);
+        --color-background-transparent: var(--color-clear);
+        --color-border-accent: var(--color-kiwi-400);
+        --color-border-attention: var(--color-red-400);
+        --color-border-disabled: var(--color-neutral-700);
+        --color-border-inverse: var(--color-neutral-900);
+        --color-border-medium: var(--color-neutral-600);
+        --color-border-on-accent: var(--color-kiwi-800);
+        --color-border-on-attention: var(--color-neutral-800);
+        --color-border-on-disabled: var(--color-neutral-800);
+        --color-border-on-inverse: var(--color-neutral-800);
+        --color-border-on-success: var(--color-neutral-800);
+        --color-border-strong: var(--color-neutral-100);
+        --color-border-subtle: var(--color-neutral-700);
+        --color-border-success: var(--color-kiwi-500);
+        --color-brand-1: var(--color-red-500);
+        --color-brand-2: var(--color-blue-500);
+        --color-brand-3: var(--color-yellow-400);
+        --color-brand-4: var(--color-green-500);
+        --color-foreground-accent: var(--color-kiwi-400);
+        --color-foreground-attention: var(--color-red-400);
+        --color-foreground-disabled: var(--color-neutral-600);
+        --color-foreground-link-legal: var(--color-blue-400);
+        --color-foreground-link-primary: var(--color-foreground-primary);
+        --color-foreground-link-visited: var(--color-pink-400);
+        --color-foreground-on-accent: var(--color-kiwi-800);
+        --color-foreground-on-attention: var(--color-neutral-800);
+        --color-foreground-on-disabled: var(--color-neutral-800);
+        --color-foreground-on-inverse: var(--color-neutral-800);
+        --color-foreground-on-strong: var(--color-neutral-800);
+        --color-foreground-on-success: var(--color-neutral-800);
+        --color-foreground-primary: var(--color-neutral-200);
+        --color-foreground-secondary: var(--color-neutral-500);
+        --color-foreground-success: var(--color-kiwi-400);
+        --color-gradient-ai-blue-strong: linear-gradient(
+            var(--color-ai-solid-purple-strong),
+            var(--color-ai-solid-blue-strong) 50%,
+            var(--color-ai-solid-green-strong) 100%
+        );
+        --color-gradient-ai-blue-subtle: linear-gradient(
+            var(--color-ai-solid-purple-subtle),
+            var(--color-ai-solid-blue-subtle) 50%,
+            var(--color-ai-solid-green-subtle) 100%
+        );
+        --color-gradient-ai-full-color-diagonal: linear-gradient(
+            var(--color-ai-solid-green-strong) 10%,
+            var(--color-ai-solid-blue-strong) 27%,
+            var(--color-ai-solid-purple-strong) 42%,
+            var(--color-ai-solid-red-strong) 56%,
+            var(--color-ai-solid-yellow-strong) 78%
+        );
+        --color-gradient-ai-green-strong: linear-gradient(
+            var(--color-ai-solid-blue-strong),
+            var(--color-ai-solid-green-strong) 100%
+        );
+        --color-gradient-ai-green-subtle: linear-gradient(
+            var(--color-ai-solid-blue-subtle),
+            var(--color-ai-solid-green-subtle) 100%
+        );
+        --color-gradient-ai-purple-strong: linear-gradient(
+            var(--color-ai-solid-red-strong),
+            var(--color-ai-solid-purple-strong) 100%
+        );
+        --color-gradient-ai-purple-subtle: linear-gradient(
+            var(--color-ai-solid-red-subtle),
+            var(--color-ai-solid-purple-subtle) 100%
+        );
+        --color-gradient-image-scrim: linear-gradient(
+            rgba(248, 248, 248, 0) 52%,
+            rgba(248, 248, 248, 0.03)
+        );
+        --color-gradient-loading-shimmer-on-secondary: linear-gradient(
+            rgba(35, 35, 35, 0),
+            rgba(35, 35, 35, 0.6) 25%,
+            rgba(35, 35, 35, 0.85) 37%,
+            rgba(35, 35, 35, 0.95) 48%,
+            rgba(35, 35, 35, 0.95) 51%,
+            rgba(35, 35, 35, 0.85) 61%,
+            rgba(35, 35, 35, 0.6) 74%,
+            rgba(35, 35, 35, 0)
+        );
+        --color-gradient-loading-shimmer: linear-gradient(
+            rgba(27, 27, 27, 0),
+            rgba(27, 27, 27, 0.6) 25%,
+            rgba(27, 27, 27, 0.85) 37%,
+            rgba(27, 27, 27, 0.95) 48%,
+            rgba(27, 27, 27, 0.95) 51%,
+            rgba(27, 27, 27, 0.85) 61%,
+            rgba(27, 27, 27, 0.6) 74%,
+            rgba(27, 27, 27, 0)
+        );
+        --color-loading-fill-on-secondary: #353535;
+        --color-loading-fill: #2d2d2d;
+        --color-scrim-background: rgba(0, 0, 0, 0.64);
+        --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
+        --color-state-layer-focus: rgba(255, 255, 255, 0.08);
+        --color-state-layer-hover-on-strong: rgba(0, 0, 0, 0.08);
+        --color-state-layer-hover: rgba(255, 255, 255, 0.08);
+        --color-state-layer-pressed-on-strong: rgba(0, 0, 0, 0.12);
+        --color-state-layer-pressed: rgba(255, 255, 255, 0.12);
+        --color-state-layer-selected-on-strong: rgba(0, 0, 0, 0.16);
+        --color-state-layer-selected: rgba(255, 255, 255, 0.16);
+    }
+}

package/dist/tokens/evo-live-light.css

@@ -0,0 +1,128 @@
+@media (prefers-color-scheme: light) {
+    :root {
+        --color-ai-solid-blue-strong: #0968f6;
+        --color-ai-solid-blue-subtle: #112c31;
+        --color-ai-solid-green-strong: #4ee04b;
+        --color-ai-solid-green-subtle: #112611;
+        --color-ai-solid-purple-strong: #993ee0;
+        --color-ai-solid-purple-subtle: #20172f;
+        --color-ai-solid-red-strong: #ff4242;
+        --color-ai-solid-red-subtle: #321919;
+        --color-ai-solid-yellow-strong: #ffd80e;
+        --color-background-accent: var(--color-kiwi-400);
+        --color-background-attention: var(--color-red-400);
+        --color-background-disabled: var(--color-neutral-600);
+        --color-background-education: var(--color-indigo-800);
+        --color-background-elevated: var(--color-neutral-800);
+        --color-background-inverse: var(--color-neutral-300);
+        --color-background-on-image: rgba(0, 0, 0, 0.9);
+        --color-background-on-secondary: var(--color-neutral-900);
+        --color-background-primary: var(--color-neutral-900);
+        --color-background-secondary-on-elevated: var(--color-neutral-900);
+        --color-background-secondary: var(--color-neutral-800);
+        --color-background-strong: var(--color-neutral-200);
+        --color-background-success: var(--color-kiwi-500);
+        --color-background-tertiary: var(--color-neutral-700);
+        --color-background-transparent: var(--color-clear);
+        --color-border-accent: var(--color-kiwi-400);
+        --color-border-attention: var(--color-red-400);
+        --color-border-disabled: var(--color-neutral-700);
+        --color-border-inverse: var(--color-neutral-900);
+        --color-border-medium: var(--color-neutral-600);
+        --color-border-on-accent: var(--color-kiwi-800);
+        --color-border-on-attention: var(--color-neutral-800);
+        --color-border-on-disabled: var(--color-neutral-800);
+        --color-border-on-inverse: var(--color-neutral-800);
+        --color-border-on-success: var(--color-neutral-800);
+        --color-border-strong: var(--color-neutral-100);
+        --color-border-subtle: var(--color-neutral-700);
+        --color-border-success: var(--color-kiwi-500);
+        --color-brand-1: var(--color-red-500);
+        --color-brand-2: var(--color-blue-500);
+        --color-brand-3: var(--color-yellow-400);
+        --color-brand-4: var(--color-green-500);
+        --color-foreground-accent: var(--color-kiwi-400);
+        --color-foreground-attention: var(--color-red-400);
+        --color-foreground-disabled: var(--color-neutral-600);
+        --color-foreground-link-legal: var(--color-blue-400);
+        --color-foreground-link-primary: var(--color-foreground-primary);
+        --color-foreground-link-visited: var(--color-pink-400);
+        --color-foreground-on-accent: var(--color-kiwi-800);
+        --color-foreground-on-attention: var(--color-neutral-800);
+        --color-foreground-on-disabled: var(--color-neutral-800);
+        --color-foreground-on-inverse: var(--color-neutral-800);
+        --color-foreground-on-strong: var(--color-neutral-800);
+        --color-foreground-on-success: var(--color-neutral-800);
+        --color-foreground-primary: var(--color-neutral-200);
+        --color-foreground-secondary: var(--color-neutral-500);
+        --color-foreground-success: var(--color-kiwi-400);
+        --color-gradient-ai-blue-strong: linear-gradient(
+            var(--color-ai-solid-purple-strong),
+            var(--color-ai-solid-blue-strong) 50%,
+            var(--color-ai-solid-green-strong) 100%
+        );
+        --color-gradient-ai-blue-subtle: linear-gradient(
+            var(--color-ai-solid-purple-subtle),
+            var(--color-ai-solid-blue-subtle) 50%,
+            var(--color-ai-solid-green-subtle) 100%
+        );
+        --color-gradient-ai-full-color-diagonal: linear-gradient(
+            var(--color-ai-solid-green-strong) 10%,
+            var(--color-ai-solid-blue-strong) 27%,
+            var(--color-ai-solid-purple-strong) 42%,
+            var(--color-ai-solid-red-strong) 56%,
+            var(--color-ai-solid-yellow-strong) 78%
+        );
+        --color-gradient-ai-green-strong: linear-gradient(
+            var(--color-ai-solid-blue-strong),
+            var(--color-ai-solid-green-strong) 100%
+        );
+        --color-gradient-ai-green-subtle: linear-gradient(
+            var(--color-ai-solid-blue-subtle),
+            var(--color-ai-solid-green-subtle) 100%
+        );
+        --color-gradient-ai-purple-strong: linear-gradient(
+            var(--color-ai-solid-red-strong),
+            var(--color-ai-solid-purple-strong) 100%
+        );
+        --color-gradient-ai-purple-subtle: linear-gradient(
+            var(--color-ai-solid-red-subtle),
+            var(--color-ai-solid-purple-subtle) 100%
+        );
+        --color-gradient-image-scrim: linear-gradient(
+            rgba(248, 248, 248, 0) 52%,
+            rgba(248, 248, 248, 0.03)
+        );
+        --color-gradient-loading-shimmer-on-secondary: linear-gradient(
+            rgba(35, 35, 35, 0),
+            rgba(35, 35, 35, 0.6) 25%,
+            rgba(35, 35, 35, 0.85) 37%,
+            rgba(35, 35, 35, 0.95) 48%,
+            rgba(35, 35, 35, 0.95) 51%,
+            rgba(35, 35, 35, 0.85) 61%,
+            rgba(35, 35, 35, 0.6) 74%,
+            rgba(35, 35, 35, 0)
+        );
+        --color-gradient-loading-shimmer: linear-gradient(
+            rgba(27, 27, 27, 0),
+            rgba(27, 27, 27, 0.6) 25%,
+            rgba(27, 27, 27, 0.85) 37%,
+            rgba(27, 27, 27, 0.95) 48%,
+            rgba(27, 27, 27, 0.95) 51%,
+            rgba(27, 27, 27, 0.85) 61%,
+            rgba(27, 27, 27, 0.6) 74%,
+            rgba(27, 27, 27, 0)
+        );
+        --color-loading-fill-on-secondary: #353535;
+        --color-loading-fill: #2d2d2d;
+        --color-scrim-background: rgba(0, 0, 0, 0.64);
+        --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
+        --color-state-layer-focus: rgba(255, 255, 255, 0.08);
+        --color-state-layer-hover-on-strong: rgba(0, 0, 0, 0.08);
+        --color-state-layer-hover: rgba(255, 255, 255, 0.08);
+        --color-state-layer-pressed-on-strong: rgba(0, 0, 0, 0.12);
+        --color-state-layer-pressed: rgba(255, 255, 255, 0.12);
+        --color-state-layer-selected-on-strong: rgba(0, 0, 0, 0.16);
+        --color-state-layer-selected: rgba(255, 255, 255, 0.16);
+    }
+}

package/dist/tooltip/tooltip.css

@@ -4,11 +4,9 @@
 .tooltip {
     position: relative;
 }
-
 span.tooltip {
     display: inline-block;
 }
-
 .tooltip__overlay {
     box-shadow: var(--bubble-shadow);
     display: none;
@@ -20,13 +18,11 @@ span.tooltip {
     transform: scaleX(1);
     width: max-content;
 }
-
 .tooltip__mask,
 .tooltip__overlay {
     border-radius: var(--bubble-border-radius, var(--border-radius-50));
     z-index: 1;
 }
-
 .tooltip__mask {
     background-color: var(
         --tooltip-background-color,
@@ -35,11 +31,9 @@ span.tooltip {
     color: var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
     position: relative;
 }
-
 span.tooltip__mask {
     display: block;
 }
-
 .tooltip__cell {
     display: flex;
     overflow-wrap: anywhere;
@@ -52,7 +46,6 @@ span.tooltip__mask {
 .tooltip__cell a:focus {
     outline: 1px dashed currentColor;
 }
-
 .tooltip__content {
     flex-grow: 1;
 }
@@ -62,7 +55,6 @@ span.tooltip__mask {
 .tooltip__content p:not(:first-of-type) {
     margin-top: var(--spacing-50);
 }
-
 button.tooltip__close {
     align-self: flex-start;
     background: none;
@@ -75,7 +67,6 @@ button.tooltip__close {
     white-space: nowrap;
     width: 32px;
 }
-
 .tooltip__pointer {
     background-color: var(
         --tooltip-background-color,
@@ -87,82 +78,68 @@ button.tooltip__close {
     width: 8px;
     z-index: 0;
 }
-
 .tooltip__pointer--top-left {
     left: 12px;
     top: -4px;
 }
-
 .tooltip__pointer--top {
     left: calc(50% - 4px);
     top: -4px;
 }
-
 .tooltip__pointer--top-right {
     left: auto;
     right: 12px;
     top: -4px;
 }
-
 .tooltip__pointer--bottom-left {
     bottom: -4px;
     left: 12px;
     top: auto;
 }
-
 .tooltip__pointer--bottom {
     bottom: -4px;
     left: calc(50% - 4px);
     top: auto;
 }
-
 .tooltip__pointer--bottom-right {
     bottom: -4px;
     left: auto;
     right: 12px;
     top: auto;
 }
-
 .tooltip__pointer--left {
     left: -4px;
     top: calc(50% - 4px);
 }
-
 .tooltip__pointer--left-bottom {
     bottom: 12px;
     left: -4px;
     top: auto;
 }
-
 .tooltip__pointer--left-top {
     left: -4px;
     top: 12px;
 }
-
 .tooltip__pointer--right {
     left: auto;
     right: -4px;
     top: calc(50% - 4px);
 }
-
 .tooltip__pointer--right-bottom {
     bottom: 12px;
     left: auto;
     right: -4px;
     top: auto;
 }
-
 .tooltip__pointer--right-top {
     left: auto;
     right: -4px;
     top: 12px;
 }
-
 .tooltip--expanded .tooltip__overlay,
 .tooltip__host[aria-expanded="true"] ~ .tooltip__overlay {
     display: block;
 }
-
 @media (min-width: 512px) {
     .tooltip__overlay {
         max-width: 400px;

package/dist/tourtip/tourtip.css

@@ -4,11 +4,9 @@
 .tourtip {
     position: relative;
 }
-
 span.tourtip {
     display: inline-block;
 }
-
 .tourtip__overlay {
     box-shadow: var(--bubble-shadow);
     display: none;
@@ -20,13 +18,11 @@ span.tourtip {
     transform: scaleX(1);
     width: max-content;
 }
-
 .tourtip__mask,
 .tourtip__overlay {
     border-radius: var(--bubble-border-radius, var(--border-radius-100));
     z-index: 1;
 }
-
 .tourtip__mask {
     background-color: var(
         --tourtip-background-color,
@@ -35,11 +31,9 @@ span.tourtip {
     color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
     position: relative;
 }
-
 span.tourtip__mask {
     display: block;
 }
-
 .tourtip__cell {
     display: flex;
     flex-wrap: wrap;
@@ -53,7 +47,6 @@ span.tourtip__mask {
 .tourtip__cell a:focus {
     outline: 1px dashed currentColor;
 }
-
 .tourtip__content {
     flex-basis: 0;
     flex-grow: 1;
@@ -64,7 +57,6 @@ span.tourtip__mask {
 .tourtip__content p:not(:first-of-type) {
     margin-top: var(--spacing-50);
 }
-
 button.tourtip__close {
     align-self: flex-start;
     background: none;
@@ -81,7 +73,6 @@ button.tourtip__close {
 button.tourtip__close svg.icon {
     fill: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
 }
-
 .tourtip__pointer {
     background-color: var(
         --tourtip-background-color,
@@ -93,88 +84,73 @@ button.tourtip__close svg.icon {
     width: 8px;
     z-index: 0;
 }
-
 .tourtip__pointer--top-left {
     left: 12px;
     top: -4px;
 }
-
 .tourtip__pointer--top {
     left: calc(50% - 4px);
     top: -4px;
 }
-
 .tourtip__pointer--top-right {
     left: auto;
     right: 12px;
     top: -4px;
 }
-
 .tourtip__pointer--bottom-left {
     bottom: -4px;
     left: 12px;
     top: auto;
 }
-
 .tourtip__pointer--bottom {
     bottom: -4px;
     left: calc(50% - 4px);
     top: auto;
 }
-
 .tourtip__pointer--bottom-right {
     bottom: -4px;
     left: auto;
     right: 12px;
     top: auto;
 }
-
 .tourtip__pointer--left {
     left: -4px;
     top: calc(50% - 4px);
 }
-
 .tourtip__pointer--left-bottom {
     bottom: 12px;
     left: -4px;
     top: auto;
 }
-
 .tourtip__pointer--left-top {
     left: -4px;
     top: 12px;
 }
-
 .tourtip__pointer--right {
     left: auto;
     right: -4px;
     top: calc(50% - 4px);
 }
-
 .tourtip__pointer--right-bottom {
     bottom: 12px;
     left: auto;
     right: -4px;
     top: auto;
 }
-
 .tourtip__pointer--right-top {
     left: auto;
     right: -4px;
     top: 12px;
 }
-
 .tourtip__heading {
     font-size: var(--font-size-large-1);
     font-weight: 700;
     margin: 0 0 var(--spacing-100);
 }
-
 .tourtip--expanded .tourtip__overlay,
 span.tourtip__heading {
     display: block;
 }
-
 .tourtip__footer {
     align-items: center;
     display: flex;
@@ -182,7 +158,6 @@ span.tourtip__heading {
     margin-top: 16px;
     width: 100%;
 }
-
 .tourtip__footer > button.btn--primary {
     background-color: var(
         --tourtip-background-color,
@@ -190,7 +165,6 @@ span.tourtip__heading {
     );
     color: var(--tourtip-foreground-color, var(--color-background-inverse));
 }
-
 .tourtip__footer > a:not(:last-child),
 .tourtip__footer > button:not(:last-child) {
     margin-right: var(--spacing-200);
@@ -208,7 +182,6 @@ span.tourtip__heading {
 .tourtip__index {
     flex: 1;
 }
-
 @media (min-width: 512px) {
     .tourtip__overlay {
         max-width: 400px;

package/dist/typography/typography.css

@@ -2,108 +2,88 @@
     font-size: var(--font-size-giant-3);
     line-height: 52px;
 }
-
 .giant-text-2,
 .giant-text-3 {
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
 }
-
 .giant-text-2 {
     font-size: var(--font-size-giant-2);
     line-height: 46px;
 }
-
 .giant-text-1 {
     font-size: var(--font-size-giant-1);
     line-height: 40px;
 }
-
 .giant-text-1,
 .large-text-2 {
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
 }
-
 .large-text-2 {
     font-size: var(--font-size-large-2);
     line-height: 32px;
 }
-
 .large-text-1 {
     font-size: var(--font-size-large-1);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
     line-height: 28px;
 }
-
 .medium-text {
     font-size: var(--font-size-medium);
     line-height: 24px;
 }
-
 .regular-text {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     line-height: 20px;
 }
-
 .small-text {
     font-size: var(--font-size-small);
     line-height: 16px;
 }
-
 .bold-text {
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
 }
-
 .secondary-text {
     color: var(
         --typography-secondary-text-color,
         var(--color-foreground-secondary)
     );
 }
-
 .emphasis-text,
 .negative-text {
     color: var(--color-foreground-attention);
 }
-
 .positive-text {
-    color: var(--color-foreground-confirmation);
+    color: var(--color-foreground-success);
 }
-
 .disabled-text {
     color: var(--color-foreground-disabled);
 }
-
 .giant-product-title,
 .giant-section-title {
     font-size: var(--font-size-large-2);
     line-height: 30px;
 }
-
 .large-product-title,
 .large-section-title {
     font-size: var(--font-size-large-1);
     line-height: 24px;
 }
-
 .medium-product-title,
 .medium-section-title {
     font-size: var(--font-size-medium);
     line-height: 20px;
 }
-
 .small-product-title,
 .small-section-title {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     line-height: 16px;
 }
-
 .giant-section-title,
 .large-section-title,
 .medium-section-title,
 .small-section-title {
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
 }
-
 @media (min-width: 512px) {
     .giant-product-title,
     .giant-section-title {