@ebay/skin 19.15.0 → 19.17.0

package/dist/utility/utility.css

@@ -91,37 +91,30 @@
     max-width: 100%;
     object-fit: contain;
 }
-
 .image-disabled {
     filter: var(--color-media-disabled-filter);
 }
-
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-
 .scrollbars-permanent {
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
     scroll-snap-type: proximity;
     scroll-snap-type: x proximity;
 }
-
 .scrollbars-permanent::-webkit-scrollbar {
-    background-color: var(--color-background-faint);
+    background-color: var(--color-state-layer-focus);
     border-radius: 12px;
 }
-
 .scrollbars-permanent::-webkit-scrollbar:vertical {
     width: 6px;
 }
-
 .scrollbars-permanent::-webkit-scrollbar:horizontal {
     height: 6px;
 }
-
 .scrollbars-permanent::-webkit-scrollbar-thumb {
     background-color: var(--color-foreground-secondary);
     border-color: transparent;

package/dist/video/video.css

@@ -1,16 +1,13 @@
 .video-player {
     position: relative;
 }
-
 .video-player video {
     height: 100%;
     width: 100%;
 }
-
 .video-player button {
     font-family: inherit;
 }
-
 .video-player__overlay {
     align-items: center;
     background-color: rgba(0, 0, 0, 0.6);
@@ -26,26 +23,21 @@
     text-align: center;
     top: 0;
 }
-
 .video-player__overlay-text {
     margin: 20px 20px 0;
 }
-
 .video-player__overlay--hidden {
     display: none;
 }
-
 .video-player__report-button > svg {
     margin-inline-end: var(--spacing-50);
 }
-
 .video-player .shaka-overflow-menu svg {
     height: 24px;
     margin-left: 10px;
     margin-right: 10px;
     width: 24px;
 }
-
 .video-player .shaka-play-button {
     background: none;
     box-shadow: none;
@@ -53,13 +45,11 @@
     padding: 0;
     width: auto;
 }
-
 .video-player .icon--video-play,
 .video-player .shaka-play-button svg {
     height: 48px;
     width: 48px;
 }
-
 .video-player .shaka-bottom-controls {
     box-sizing: border-box;
     margin-bottom: 3%;
@@ -67,7 +57,6 @@
     position: relative;
     width: 94%;
 }
-
 .video-player .shaka-controls-button-panel {
     background-color: rgba(0, 0, 0, 0.7);
     border-radius: 8px;
@@ -82,23 +71,75 @@
 .video-player .shaka-controls-button-panel :last-child {
     margin-right: 8px;
 }
-
 .video-player--poster .shaka-scrim-container {
     visibility: hidden;
 }
-
 .video-player .shaka-range-container {
     box-sizing: border-box;
     margin: 0 188px 18px 76px;
 }
-
 .video-player #shaka-player-ui-time-container {
     display: none;
 }
-
 .video-player .shaka-video-container {
     font-family:
         Market Sans,
         Arial,
         sans-serif;
 }
+.video-player--with-nav .shaka-controls-container {
+    pointer-events: none;
+}
+.video-player--with-nav .shaka-controls-container .shaka-bottom-controls,
+.video-player--with-nav .shaka-controls-container .shaka-play-button-container {
+    pointer-events: auto;
+}
+.video-player--compact {
+    container-type: inline-size;
+    width: 100%;
+}
+.video-player--compact .shaka-controls-button-panel {
+    background-color: initial;
+    justify-content: flex-end;
+    pointer-events: none;
+}
+.video-player--compact .shaka-controls-button-panel > :first-child {
+    border-radius: 16px;
+    font-size: var(--font-size-medium);
+    margin-right: auto;
+    min-width: 80px;
+    padding: var(--spacing-200) var(--spacing-100);
+    width: auto;
+}
+.video-player--compact .shaka-controls-button-panel button * {
+    margin: 0;
+}
+.video-player--compact .shaka-controls-button-panel button {
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 50%;
+    justify-content: center;
+    margin: 0 5px;
+}
+.video-player--compact .shaka-controls-button-panel button:enabled {
+    display: inline-flex;
+    pointer-events: auto;
+}
+.video-player--compact .shaka-scrim-container {
+    background: none;
+}
+.video-player--compact .shaka-tooltip:hover:after {
+    visibility: hidden;
+}
+@container (inline-size < 320px) {
+    .video-player--compact video {
+        aspect-ratio: 1;
+        object-fit: cover;
+    }
+    .video-player--compact .shaka-controls-button-panel {
+        height: 48px;
+    }
+    .video-player--compact .shaka-remaining-time {
+        display: none;
+    }
+}

package/evo-class.css

@@ -0,0 +1,2 @@
+@import "./tokens/evo-core.css";
+@import "./tokens/evo-light-class.css";

package/evo-class.js

@@ -0,0 +1,2 @@
+require('./tokens/evo-core.js');
+require('./tokens/evo-light-class.js');

package/evo-class.mjs

@@ -0,0 +1,2 @@
+import './tokens/evo-core.css';
+import './tokens/evo-light-class.css';

package/evo-live-class.css

@@ -0,0 +1,2 @@
+@import "./tokens/evo-core.css";
+@import "./tokens/evo-live-dark-class.css";

package/evo-live-class.js

@@ -0,0 +1,2 @@
+require('./tokens/evo-core.js');
+require('./tokens/evo-live-dark-class.js');

package/evo-live-class.mjs

@@ -0,0 +1,2 @@
+import './tokens/evo-core.css';
+import './tokens/evo-live-dark-class.css';

package/evo-live.css

@@ -0,0 +1,2 @@
+@import "./tokens/evo-core.css";
+@import "./tokens/evo-live-dark.css";

package/evo-live.js

@@ -0,0 +1,2 @@
+require('./tokens/evo-core.js');
+require('./tokens/evo-live-dark.js');

package/evo-live.mjs

@@ -0,0 +1,2 @@
+import './tokens/evo-core.css';
+import './tokens/evo-live-dark.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.15.0",
+    "version": "19.17.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",
@@ -40,15 +40,13 @@
         "build:icons": "tsx scripts genSVG && prettier src/components/data/icons.json --write",
         "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
         "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/public/storybook",
-        "bundle": "sass src/sass:dist --no-source-map",
+        "bundle": "sass src/sass:dist src/tokens:dist/tokens --no-source-map -I \"../../node_modules\"",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
-        "copy": "npm run copy:sassToDist && npm run copy:svgToDist && npm run copy:svgToDocs && npm run copy:tokensToDist && npm run copy:assetsToStorybook",
+        "copy": "npm run copy:sassToDist && npm run copy:svgToDist && npm run copy:svgToDocs && npm run copy:assetsToStorybook",
         "copy:assetsToStorybook": "tsx scripts storybook-copy",
         "copy:sassToDist": "mkdirp dist/variables && ncp src/sass/variables dist/variables && mkdirp dist/mixins && ncp src/sass/mixins/public dist/mixins && ncp src/sass/gh dist/gh",
         "copy:svgToDist": "mkdirp dist/svg && ncp src/svg dist/svg",
         "copy:svgToDocs": "ncp src/svg src/routes/static && ncp src/svg/icons.svg src/components/master-icons.marko",
-        "copy:tokensToDist": "ncp src/tokens dist/tokens",
-        "copy:tokensToDocs": "ncp src/tokens src/routes/static",
         "deploy": "BASE_URL=/evo-web/skin/ marko-run build -o ./_site && npm run build:storybook && rimraf _site/public/archive && ncp docs/archive _site/public/archive && touch _site/public/.nojekyll",
         "deploy:only": "marko-run build -o ./_site && npm run build:storybook && rimraf _site/public/archive && ncp docs/archive _site/public/archive --dereference=true && touch _site/public/.nojekyll",
         "format": "npx prettier --write .",
@@ -83,9 +81,7 @@
     "browserslist": [
         "extends @ebay/browserslist-config"
     ],
-    "devDependencies": {
-        "@marko/run-adapter-static": "^2.0.2"
-    },
+    "devDependencies": {},
     "publishConfig": {
         "registry": "https://registry.npmjs.org"
     }

package/tokens/evo-dark-class.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./evo-dark-class.js"] }

package/tokens/evo-dark-class.css

@@ -0,0 +1 @@
+@import "./../dist/tokens/evo-dark-class.css";

package/tokens/evo-dark-class.js

@@ -0,0 +1 @@
+require('./../dist/tokens/evo-dark-class.css');

package/tokens/evo-dark-class.mjs

@@ -0,0 +1 @@
+import './../dist/tokens/evo-dark-class.css';

package/tokens/evo-light-class.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./evo-light-class.js"] }

package/tokens/evo-light-class.css

@@ -0,0 +1 @@
+@import "./../dist/tokens/evo-light-class.css";

package/tokens/evo-light-class.js

@@ -0,0 +1 @@
+require('./../dist/tokens/evo-light-class.css');

package/tokens/evo-light-class.mjs

@@ -0,0 +1 @@
+import './../dist/tokens/evo-light-class.css';

package/tokens/evo-live-dark-class.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./evo-live-dark-class.js"] }

package/tokens/evo-live-dark-class.css

@@ -0,0 +1 @@
+@import "./../dist/tokens/evo-live-dark-class.css";

package/tokens/evo-live-dark-class.js

@@ -0,0 +1 @@
+require('./../dist/tokens/evo-live-dark-class.css');

package/tokens/evo-live-dark-class.mjs

@@ -0,0 +1 @@
+import './../dist/tokens/evo-live-dark-class.css';

package/tokens/evo-live-dark.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./evo-live-dark.js"] }

package/tokens/evo-live-dark.css

@@ -0,0 +1 @@
+@import "./../dist/tokens/evo-live-dark.css";

package/tokens/evo-live-dark.js

@@ -0,0 +1 @@
+require('./../dist/tokens/evo-live-dark.css');

package/tokens/evo-live-dark.mjs

@@ -0,0 +1 @@
+import './../dist/tokens/evo-live-dark.css';

package/tokens/evo-live-light-class.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./evo-live-light-class.js"] }

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

@@ -0,0 +1 @@
+@import "./../dist/tokens/evo-live-light-class.css";

package/tokens/evo-live-light-class.js

@@ -0,0 +1 @@
+require('./../dist/tokens/evo-live-light-class.css');

package/tokens/evo-live-light-class.mjs

@@ -0,0 +1 @@
+import './../dist/tokens/evo-live-light-class.css';

package/tokens/evo-live-light.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./evo-live-light.js"] }

package/tokens/evo-live-light.css

@@ -0,0 +1 @@
+@import "./../dist/tokens/evo-live-light.css";

package/tokens/evo-live-light.js

@@ -0,0 +1 @@
+require('./../dist/tokens/evo-live-light.css');

package/tokens/evo-live-light.mjs

@@ -0,0 +1 @@
+import './../dist/tokens/evo-live-light.css';