@ebay/skin 19.33.0 → 19.35.0

package/dist/tourtip/tourtip.css

@@ -4,9 +4,11 @@
 .tourtip {
     position: relative;
 }
+
 span.tourtip {
     display: inline-block;
 }
+
 .tourtip__overlay {
     box-shadow: var(--bubble-shadow);
     display: none;
@@ -18,28 +20,32 @@ 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 {
+    position: relative;
     background-color: var(
         --tourtip-background-color,
         var(--color-background-inverse)
     );
     color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
-    position: relative;
 }
+
 span.tourtip__mask {
     display: block;
 }
+
 .tourtip__cell {
     display: flex;
-    flex-wrap: wrap;
     overflow-wrap: anywhere;
     padding: var(--spacing-200);
     word-break: normal;
+    flex-wrap: wrap;
 }
 .tourtip__cell a {
     color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
@@ -47,6 +53,7 @@ span.tourtip__mask {
 .tourtip__cell a:focus {
     outline: 1px dashed currentColor;
 }
+
 .tourtip__content {
     flex-basis: 0;
     flex-grow: 1;
@@ -57,15 +64,16 @@ span.tourtip__mask {
 .tourtip__content p:not(:first-of-type) {
     margin-top: var(--spacing-50);
 }
+
 .tourtip button.tourtip__close {
+    outline-offset: -2px;
     align-self: flex-start;
     background: none;
     border: 0;
     flex-shrink: 0;
     height: var(--spacing-400);
-    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0
+    margin: calc(-1 * var(--spacing-100)) calc(-1 * var(--spacing-100)) 0
         var(--spacing-100);
-    outline-offset: -2px;
     padding: 0;
     white-space: nowrap;
     width: 32px;
@@ -73,84 +81,100 @@ span.tourtip__mask {
 .tourtip button.tourtip__close svg.icon {
     fill: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
 }
+
 .tourtip__pointer {
-    background-color: var(
-        --tourtip-background-color,
-        var(--color-background-inverse)
-    );
     height: 8px;
     position: absolute;
     transform: rotate(45deg);
     width: 8px;
     z-index: 0;
+    background-color: var(
+        --tourtip-background-color,
+        var(--color-background-inverse)
+    );
 }
+
 .tourtip__pointer--top-left {
-    left: 12px;
     top: -4px;
+    left: 12px;
 }
+
 .tourtip__pointer--top {
-    left: calc(50% - 4px);
     top: -4px;
+    left: calc(50% - 4px);
 }
+
 .tourtip__pointer--top-right {
+    top: -4px;
     left: auto;
     right: 12px;
-    top: -4px;
 }
+
 .tourtip__pointer--bottom-left {
     bottom: -4px;
-    left: 12px;
     top: auto;
+    left: 12px;
 }
+
 .tourtip__pointer--bottom {
     bottom: -4px;
-    left: calc(50% - 4px);
     top: auto;
+    left: calc(50% - 4px);
 }
+
 .tourtip__pointer--bottom-right {
     bottom: -4px;
+    top: auto;
     left: auto;
     right: 12px;
-    top: auto;
 }
+
 .tourtip__pointer--left {
-    left: -4px;
     top: calc(50% - 4px);
+    left: -4px;
 }
+
 .tourtip__pointer--left-bottom {
     bottom: 12px;
     left: -4px;
     top: auto;
 }
+
 .tourtip__pointer--left-top {
     left: -4px;
     top: 12px;
 }
+
 .tourtip__pointer--right {
+    top: calc(50% - 4px);
     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;
@@ -158,6 +182,7 @@ span.tourtip__heading {
     margin-top: 16px;
     width: 100%;
 }
+
 .tourtip__footer > button.btn--primary {
     background-color: var(
         --tourtip-background-color,
@@ -165,6 +190,7 @@ 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);
@@ -182,6 +208,7 @@ span.tourtip__heading {
 .tourtip__index {
     flex: 1;
 }
+
 @media (min-width: 512px) {
     .tourtip__overlay {
         max-width: 400px;

package/dist/typography/typography.css

@@ -2,88 +2,108 @@
     font-size: var(--font-size-giant-3);
     line-height: 52px;
 }
+
 .giant-text-2,
 .giant-text-3 {
     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-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-600);
     line-height: 28px;
 }
+
 .medium-text {
     font-size: var(--font-size-medium);
     line-height: 24px;
 }
+
 .regular-text {
     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-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-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-body);
     line-height: 16px;
 }
+
 .giant-section-title,
 .large-section-title,
 .medium-section-title,
 .small-section-title {
     font-weight: var(--font-weight-600);
 }
+
 @media (min-width: 512px) {
     .giant-product-title,
     .giant-section-title {

package/dist/utility/utility.css

@@ -85,29 +85,36 @@
     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 {
     scroll-behavior: smooth;
     scroll-snap-type: proximity;
     scroll-snap-type: x proximity;
 }
+
 .scrollbars-permanent::-webkit-scrollbar {
     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,13 +1,16 @@
 .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);
@@ -23,27 +26,33 @@
     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-range-container {
     margin-bottom: -25px;
     margin-left: 105px;
     margin-right: 133px;
     z-index: 3;
 }
+
 .video-player .shaka-controls-container .shaka-play-button-container {
     align-items: center;
     display: flex;
@@ -51,6 +60,7 @@
     justify-content: center;
     width: 100%;
 }
+
 .video-player .shaka-play-button-container .shaka-play-button {
     background: none;
     border: 0;
@@ -58,40 +68,52 @@
     margin: 0;
     padding: 0;
 }
+
 .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;
     margin-bottom: 10px;
 }
-.video-player--compact .shaka-controls-button-panel button {
+
+.video-player--compact .shaka-controls-button-panel button,
+.video-player--compact .shaka-controls-button-panel > span {
     background-color: rgba(0, 0, 0, 0.32);
     border-radius: 50%;
     margin: 0 5px;
 }
+
 .video-player .shaka-controls-button-panel span.shaka-current-time,
 .video-player .shaka-controls-button-panel span.shaka-remaining-time {
     align-items: center;
+    box-sizing: border-box;
     display: inline-flex;
 }
+
 .video-player--compact .shaka-controls-button-panel .shaka-remaining-time {
     border-radius: 16px;
     font-size: var(--font-size-medium);
+    justify-content: center;
     min-width: 80px;
     padding: var(--spacing-200) var(--spacing-100);
 }
+
 .video-player--with-nav.video-player--compact .shaka-big-buttons-container {
     display: none;
 }
+
 @container (inline-size < 320px) {
     .video-player--compact video {
         object-fit: cover;

package/eslint.config.mjs

@@ -1,15 +1,17 @@
-import ebayConfig from "eslint-config-ebay";
+import js from "@eslint/js";
 import eslintConfigPrettier from "eslint-config-prettier";
+import globals from "globals";
 
 export default [
+    js.configs.recommended,
+    eslintConfigPrettier,
     {
-        plugins: {
-            ebayConfig,
-            eslintConfigPrettier,
-        },
         languageOptions: {
             ecmaVersion: 2020,
             sourceType: "module",
+            globals: {
+                ...globals.browser,
+            },
         },
     },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.33.0",
+    "version": "19.35.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",
@@ -70,8 +70,11 @@
         "extends": "@commitlint/config-conventional"
     },
     "lint-staged": {
-        "*.{js,css,md,scss,json}": "prettier --write",
-        "*.{css,scss}": "stylelint --config .stylelintrc"
+        "*.{js,md,json}": "prettier --write",
+        "*.{css,scss}": [
+            "prettier --write",
+            "stylelint --fix --config .stylelintrc"
+        ]
     },
     "browserslist": [
         "extends @ebay/browserslist-config"