@ebay/skin 19.8.0 → 19.9.0

package/dist/progress-bar-expressive/progress-bar-expressive.css

@@ -1,8 +1,8 @@
 :root {
-    --progress-bar-expressive-color-1: #e53238;
-    --progress-bar-expressive-color-2: #0064d2;
-    --progress-bar-expressive-color-3: #f5af02;
-    --progress-bar-expressive-color-4: #86b817;
+    --progress-bar-expressive-color-1: var(--color-red-500);
+    --progress-bar-expressive-color-2: var(--color-blue-500);
+    --progress-bar-expressive-color-3: var(--color-yellow-400);
+    --progress-bar-expressive-color-4: var(--color-green-500);
     --progress-bar-expressive-line-border-radius: 2px;
     --progress-bar-expressive-line-count: 12;
     --progress-bar-expressive-line-gap: var(--spacing-50);
@@ -24,14 +24,6 @@
     --progress-bar-expressive-message-animatein-duration: 833ms;
     --progress-bar-expressive-message-animateout-duration: 400ms;
 }
-@media (prefers-color-scheme: dark) {
-    :root {
-        --progress-bar-expressive-color-1: #f0343b;
-        --progress-bar-expressive-color-2: #0078fc;
-        --progress-bar-expressive-color-3: #e8a502;
-        --progress-bar-expressive-color-4: #86b817;
-    }
-}
 
 .progress-bar-expressive {
     align-items: stretch;

package/dist/selection-chip/selection-chip.css

@@ -0,0 +1,76 @@
+@keyframes fill-horizontal-background {
+    0% {
+        background-size: 0 100%;
+    }
+    99% {
+        background-color: var(--color-background-primary);
+    }
+    to {
+        background-color: var(--color-background-strong);
+        background-size: 100% 100%;
+    }
+}
+.selection-chip {
+    align-items: center;
+    background-color: var(--color-background-primary);
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 0 100%;
+    border: 1px solid var(--color-stroke-default);
+    border-radius: var(--border-radius-50);
+    box-shadow: none;
+    box-sizing: border-box;
+    color: var(--color-foreground-primary);
+    display: inline-flex;
+    font-size: var(--font-size-default);
+    gap: var(--spacing-75);
+    height: var(--spacing-400);
+    justify-content: space-between;
+    max-width: 296px;
+    min-width: 32px;
+    padding: 0 var(--spacing-150);
+    text-decoration: none;
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+    vertical-align: bottom;
+}
+.selection-chip:active {
+    transform: scale(0.97);
+}
+
+.selection-chip--animated .selection-chip__trailing {
+    transition: rotate var(--motion-duration-medium-3)
+        var(--motion-easing-standard);
+}
+
+.selection-chip__trailing {
+    rotate: -225deg;
+}
+
+.selection-chip[aria-pressed="true"] {
+    animation: fill-horizontal-background 0s var(--motion-easing-quick-enter)
+        forwards;
+    background-image: linear-gradient(
+        to right,
+        var(--color-background-strong) 0,
+        var(--color-background-strong) 100%
+    );
+    color: var(--color-foreground-on-strong);
+}
+
+.selection-chip--animated[aria-pressed="true"] {
+    animation-duration: var(--motion-duration-medium-2);
+    transition: color var(--motion-duration-instant)
+        var(--motion-easing-standard);
+}
+
+.selection-chip[aria-pressed="true"] .selection-chip__trailing {
+    rotate: 0deg;
+}
+
+.selection-chip__text {
+    overflow: hidden;
+    padding: var(--spacing-75) 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/dist/svg/icon/icon-ebay-balance-12-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icon/icon-ebay-balance-18-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icon/icon-ebay-balance-24-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icon/icon-ebay-balance-32-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icons.svg

@@ -3081,6 +3081,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#191919"
+      stroke-width="1"
     />
     <path
       fill-rule="evenodd"
@@ -3116,6 +3117,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#191919"
+      stroke-width="1"
     />
     <path
       fill-rule="evenodd"
@@ -3151,6 +3153,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#191919"
+      stroke-width="1"
     />
     <path
       fill-rule="evenodd"
@@ -3186,6 +3189,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#191919"
+      stroke-width="1"
     />
     <path
       fill-rule="evenodd"

package/dist/tokens/evo-core.css

@@ -57,10 +57,10 @@
     --color-indigo-800: #01193d;
     --color-blue-100: #f5f9ff;
     --color-blue-200: #d4e5fe;
-    --color-blue-300: #93c9ff;
-    --color-blue-400: #659eff;
-    --color-blue-500: #3665f3;
-    --color-blue-600: #382aef;
+    --color-blue-300: #84b4fb;
+    --color-blue-400: #4d93fc;
+    --color-blue-500: #0968f6;
+    --color-blue-600: #0049b8;
     --color-blue-650: #003aa5;
     --color-blue-700: #002a69;
     --color-blue-800: #19133a;
@@ -88,11 +88,11 @@
     --color-green-600: #507d17;
     --color-green-700: #345110;
     --color-green-800: #1c2d06;
-    --color-jade-100: #f7fdfd;
+    --color-jade-100: #f7fdfb;
     --color-jade-200: #d8f8ee;
     --color-jade-300: #8feace;
     --color-jade-400: #1ed49e;
-    --color-jade-500: #1ed49e;
+    --color-jade-500: #17c28f;
     --color-jade-600: #0f805e;
     --color-jade-700: #055743;
     --color-jade-800: #002b20;
@@ -182,8 +182,8 @@
     --font-size-giant-2: var(--font-size-36);
     --font-size-giant-3: var(--font-size-46);
     --font-size-giant-4: var(--font-size-64);
-    /* 
-    Ratio of 20px (base line height) / 14px (body font) 
+    /*
+    Ratio of 20px (base line height) / 14px (body font)
     This needs to be unitless for optimal scaling
     */
     --font-line-height-250: 1.4286;

package/filter-chip.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./filter-chip.js"] }

package/filter-chip.css

@@ -0,0 +1 @@
+@import "./dist/filter-chip/filter-chip.css";

package/filter-chip.js

@@ -0,0 +1 @@
+require('./dist/filter-chip/filter-chip.css');

package/filter-chip.mjs

@@ -0,0 +1 @@
+import './dist/filter-chip/filter-chip.css';

package/index.browser.json

@@ -27,6 +27,7 @@
     "require: ./file-preview-card.js",
     "require: ./file-preview-card-group.js",
     "require: ./filter-button.js",
+    "require: ./filter-chip.js",
     "require: ./filter-input.js",
     "require: ./filter-menu.js",
     "require: ./filter-menu-button.js",
@@ -65,6 +66,7 @@
     "require: ./section-title.js",
     "require: ./segmented-buttons.js",
     "require: ./select.js",
+    "require: ./selection-chip.js",
     "require: ./signal.js",
     "require: ./skeleton.js",
     "require: ./snackbar-dialog.js",

package/index.css

@@ -25,6 +25,7 @@
 @import "./file-preview-card.css";
 @import "./file-preview-card-group.css";
 @import "./filter-button.css";
+@import "./filter-chip.css";
 @import "./filter-input.css";
 @import "./filter-menu.css";
 @import "./filter-menu-button.css";
@@ -63,6 +64,7 @@
 @import "./section-title.css";
 @import "./segmented-buttons.css";
 @import "./select.css";
+@import "./selection-chip.css";
 @import "./signal.css";
 @import "./skeleton.css";
 @import "./snackbar-dialog.css";

package/index.js

@@ -25,6 +25,7 @@ require('./file-input.js');
 require('./file-preview-card.js');
 require('./file-preview-card-group.js');
 require('./filter-button.js');
+require('./filter-chip.js');
 require('./filter-input.js');
 require('./filter-menu.js');
 require('./filter-menu-button.js');
@@ -63,6 +64,7 @@ require('./section-notice.js');
 require('./section-title.js');
 require('./segmented-buttons.js');
 require('./select.js');
+require('./selection-chip.js');
 require('./signal.js');
 require('./skeleton.js');
 require('./snackbar-dialog.js');

package/index.mjs

@@ -25,6 +25,7 @@ import './dist/file-input/file-input.css';
 import './dist/file-preview-card/file-preview-card.css';
 import './dist/file-preview-card-group/file-preview-card-group.css';
 import './dist/filter-button/filter-button.css';
+import './dist/filter-chip/filter-chip.css';
 import './dist/filter-input/filter-input.css';
 import './dist/filter-menu/filter-menu.css';
 import './dist/filter-menu-button/filter-menu-button.css';
@@ -63,6 +64,7 @@ import './dist/section-notice/section-notice.css';
 import './dist/section-title/section-title.css';
 import './dist/segmented-buttons/segmented-buttons.css';
 import './dist/select/select.css';
+import './dist/selection-chip/selection-chip.css';
 import './dist/signal/signal.css';
 import './dist/skeleton/skeleton.css';
 import './dist/snackbar-dialog/snackbar-dialog.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.8.0",
+    "version": "19.9.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",
@@ -67,7 +67,7 @@
         "snapshots:execute": "npm run build:snapshots && percy storybook ./.storybook-percy --include",
         "snapshots:execute:dry": "percy storybook ./.storybook-percy --dry-run --include",
         "start": "marko-run",
-        "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook",
+        "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook --no-open",
         "test": "npm run build",
         "verify": "node scripts verify",
         "version": "npm run build"
@@ -83,7 +83,7 @@
         "extends @ebay/browserslist-config"
     ],
     "devDependencies": {
-        "@marko/run-adapter-static": "^2.0.0"
+        "@marko/run-adapter-static": "^2.0.1"
     },
     "publishConfig": {
         "registry": "https://registry.npmjs.org"

package/selection-chip.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./selection-chip.js"] }

package/selection-chip.css

@@ -0,0 +1 @@
+@import "./dist/selection-chip/selection-chip.css";

package/selection-chip.js

@@ -0,0 +1 @@
+require('./dist/selection-chip/selection-chip.css');

package/selection-chip.mjs

@@ -0,0 +1 @@
+import './dist/selection-chip/selection-chip.css';