@ebay/skin 19.18.0 → 19.19.0

package/dist/signal/signal.css

@@ -14,20 +14,17 @@
 }
 
 .signal--trustworthy {
-    color: var(--signal-trustworthy-color, var(--color-foreground-accent));
+    color: var(--color-foreground-accent);
 }
 
 .signal--recent {
-    color: var(--signal-recent-color, var(--color-foreground-success));
+    color: var(--color-foreground-success);
 }
 
 .signal--time-sensitive {
-    color: var(
-        --signal-time-sensitive-color,
-        var(--color-foreground-attention)
-    );
+    color: var(--color-foreground-attention);
 }
 
 .signal--neutral {
-    color: var(--signal-neutral-color, var(--color-foreground-secondary));
+    color: var(--color-foreground-secondary);
 }

package/dist/table/table.css

@@ -1,7 +1,6 @@
 .table {
     overflow-x: auto;
     position: relative;
-    -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
     scroll-snap-type: proximity;
     scroll-snap-type: x proximity;
@@ -140,10 +139,8 @@
     text-decoration: none;
 }
 .table--loading-state .progress-bar-expressive {
-    bottom: 50%;
-    left: 0;
+    inset: auto 0 50%;
     position: absolute;
-    right: 0;
 }
 .table--mode-selection td:first-child,
 .table--mode-selection th:first-child {

package/dist/tabs/tabs.css

@@ -45,13 +45,13 @@ div.tabs__item[role="tab"] > span {
     padding: 2px 0;
 }
 
-div.tabs__item[role="tab"] > span,
+div.tabs__item[role="tab"],
 li.fake-tabs__item > a {
     color: var(--tabs-item-foreground-color, var(--color-foreground-secondary));
     display: inline-block;
 }
 
-div.tabs__item[role="tab"] > span:after,
+div.tabs__item[role="tab"]:after,
 li.fake-tabs__item > a:after {
     background-color: initial;
     border-radius: 6px;
@@ -63,7 +63,7 @@ li.fake-tabs__item > a:after {
     width: 100%;
 }
 
-div.tabs__item[role="tab"][aria-selected="true"] > span,
+div.tabs__item[role="tab"][aria-selected="true"],
 li.fake-tabs__item > a[aria-current] {
     color: var(
         --tabs-item-selected-foreground-color,
@@ -71,7 +71,7 @@ li.fake-tabs__item > a[aria-current] {
     );
 }
 
-div.tabs__item[role="tab"][aria-selected="true"] > span:after,
+div.tabs__item[role="tab"][aria-selected="true"]:after,
 li.fake-tabs__item > a[aria-current]:after {
     background-color: currentColor;
 }
@@ -81,18 +81,43 @@ li.fake-tabs__item a:focus:not(:focus-visible) {
     outline: none;
 }
 
-div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span,
-div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span,
+div.tabs__item[role="tab"]:not([aria-selected="true"])[aria-disabled="true"],
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:focus,
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:hover,
+li.fake-tabs__item > a:not([aria-current]):not([href]),
+li.fake-tabs__item > a:not([aria-current]):not([href]):focus,
+li.fake-tabs__item > a:not([aria-current]):not([href]):hover {
+    color: var(--color-foreground-disabled);
+}
+
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:after,
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:focus:after,
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:hover:after,
+li.fake-tabs__item > a:not([aria-current]):not([href]):after,
+li.fake-tabs__item > a:not([aria-current]):not([href]):focus:after,
+li.fake-tabs__item > a:not([aria-current]):not([href]):hover:after {
+    background-color: initial;
+}
+
+div.tabs__item[role="tab"]:not([aria-selected="true"]):focus,
+div.tabs__item[role="tab"]:not([aria-selected="true"]):hover,
 li.fake-tabs__item > a:not([aria-current]):focus,
 li.fake-tabs__item > a:not([aria-current]):hover {
-    color: var(
-        --tabs-item-hover-foreground-color,
-        var(--color-foreground-secondary)
-    );
+    color: var(--color-foreground-secondary);
 }
 
-div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span:after,
-div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span:after,
+div.tabs__item[role="tab"]:not([aria-selected="true"]):focus:after,
+div.tabs__item[role="tab"]:not([aria-selected="true"]):hover:after,
 li.fake-tabs__item > a:not([aria-current]):focus:after,
 li.fake-tabs__item > a:not([aria-current]):hover:after {
     background-color: currentColor;

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

@@ -6,21 +6,11 @@
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
 .toast-dialog {
-    background-color: var(
-        --toast-dialog-background-color,
-        var(--color-background-accent)
-    );
-    border-top-left-radius: var(
-        --toast-dialog-border-radius,
-        var(--border-radius-100)
-    );
-    border-top-right-radius: var(
-        --toast-dialog-border-radius,
-        var(--border-radius-100)
-    );
-    bottom: 0;
+    background-color: var(--color-background-accent);
+    border-top-left-radius: var(--border-radius-100);
+    border-top-right-radius: var(--border-radius-100);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
-    left: 0;
+    inset: auto 0 0;
     max-height: 40vh;
     min-width: 320px;
     position: fixed;
@@ -31,10 +21,7 @@
 }
 .toast-dialog,
 .toast-dialog a {
-    color: var(
-        --toast-dialog-foreground-color,
-        var(--color-foreground-on-success)
-    );
+    color: var(--color-foreground-on-success);
 }
 .toast-dialog a:focus {
     outline: 1px auto currentColor;
@@ -70,10 +57,7 @@
 button.icon-btn.toast-dialog__close {
     align-self: flex-start;
     border: 0;
-    color: var(
-        --toast-dialog-foreground-color,
-        var(--color-foreground-on-success)
-    );
+    color: var(--color-foreground-on-success);
     flex-shrink: 0;
     margin-inline-start: auto;
     overflow: hidden;
@@ -123,10 +107,6 @@ button.icon-btn.toast-dialog__close > svg {
 }
 .toast-dialog__footer button.btn--primary,
 .toast-dialog__footer button.btn--secondary {
-    border-color: var(
-        --toast-dialog-foreground-color,
-        var(--color-foreground-on-accent)
-    );
     overflow: hidden;
     position: relative;
 }
@@ -170,23 +150,18 @@ button.icon-btn.toast-dialog__close > svg {
 }
 .toast-dialog__footer button.btn--primary,
 .toast-dialog__footer button.btn--secondary {
+    border-color: var(--color-foreground-on-accent);
     border-style: solid;
     border-width: 1px;
     outline-offset: 2px;
 }
 .toast-dialog__footer button.btn--primary {
-    background-color: var(
-        --toast-dialog-foreground-color,
-        var(--color-background-primary)
-    );
-    color: var(--toast-dialog-background-color, var(--color-foreground-accent));
+    background-color: var(--color-background-primary);
+    color: var(--color-foreground-accent);
 }
 .toast-dialog__footer button.btn--secondary {
     background-color: initial;
-    color: var(
-        --toast-dialog-foreground-color,
-        var(--color-background-primary)
-    );
+    color: var(--color-background-primary);
     font-weight: 700;
     margin-inline-end: var(--spacing-100);
 }
@@ -196,10 +171,7 @@ button.icon-btn.toast-dialog__close > svg {
 }
 @media (min-width: 512px) {
     .toast-dialog {
-        border-radius: var(
-            --toast-dialog-border-radius,
-            var(--border-radius-100)
-        );
+        border-radius: var(--border-radius-100);
         bottom: var(--spacing-200);
         left: var(--spacing-200);
         max-width: 480px;

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

@@ -162,12 +162,9 @@
     width: 100%;
 }
 .toggle-button--gallery-layout .toggle-button__image {
-    bottom: 0;
     height: 100%;
-    left: 0;
+    inset: 0;
     position: absolute;
-    right: 0;
-    top: 0;
     width: 100%;
 }
 .toggle-button[aria-disabled="true"] .toggle-button__icon,

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

@@ -115,12 +115,9 @@
     width: 100%;
 }
 .toggle-button-group--gallery-layout .toggle-button__image {
-    bottom: 0;
     height: 100%;
-    left: 0;
+    inset: 0;
     position: absolute;
-    right: 0;
-    top: 0;
     width: 100%;
 }
 .toggle-button-group--gallery-layout .toggle-button__image-container img {

package/dist/utility/utility.css

@@ -51,14 +51,11 @@
 }
 .image-treatment:after {
     background: rgba(0, 0, 0, 0.05);
-    bottom: 0;
     content: "";
     display: block;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     position: absolute;
-    right: 0;
-    top: 0;
 }
 .image-treatment > img {
     display: inline-block;
@@ -76,14 +73,11 @@
 }
 .image-treatment-large:after {
     background: rgba(0, 0, 0, 0.05);
-    bottom: 0;
     content: "";
     display: block;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     position: absolute;
-    right: 0;
-    top: 0;
 }
 .image-treatment-large > img {
     display: inline-block;
@@ -100,7 +94,6 @@
     white-space: nowrap;
 }
 .scrollbars-permanent {
-    -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
     scroll-snap-type: proximity;
     scroll-snap-type: x proximity;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.18.0",
+    "version": "19.19.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",
@@ -29,7 +29,6 @@
         "tokens",
         "./*\\.{js,css,scss,less,json,mjs}",
         "!.prettierrc.json",
-        "!webpack.config.js",
         "!postcss.config.js",
         "!vite.config.js"
     ],
@@ -37,23 +36,23 @@
         "prebuild": "npm run clean",
         "build": "npm run build:css && npm run lint:js && npm run build:icons && npm run copy && tsx scripts gen-build",
         "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && tsx scripts/add-y-comments && prettier dist --write && npm run lint:css",
-        "build:icons": "tsx scripts genSVG && prettier src/components/data/icons.json --write",
+        "build:icons": "tsx scripts genSVG && prettier ../../src/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 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: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",
-        "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",
+        "copy:sassToDist": " copyfiles src/sass/variables dist -u 2 && copyfiles src/sass/mixins/public dist/mixins -u 4 && copyfiles src/sass/gh dist -u 2",
+        "copy:svgToDist": "copyfiles src/svg dist -u 1",
+        "copy:svgToDocs": "tsx scripts copy-icons",
+        "deploy": "npm run build:storybook && rimraf _site/public/archive && copyfiles docs/archive _site/public -u 1 && touch _site/public/.nojekyll",
+        "deploy:only": "npm run build:storybook && rimraf _site/public/archive && copyfiles docs/archive _site/public -u 1 && touch _site/public/.nojekyll",
         "format": "npx prettier --write .",
         "lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
         "lint:css": "stylelint dist --config .stylelintrc",
-        "lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
-        "lint:sass": "stylelint src/routes/**/*.scss src/sass --config .stylelintrc",
+        "lint:js": "eslint 'src/sass/**/stories/*.js' >> lint.log ",
+        "lint:sass": "stylelint src/sass --config .stylelintrc",
         "postcss": "postcss dist/**/*.css -r ",
         "prepublishOnly": "tsx scripts gen",
         "preview": "marko-run preview",
@@ -81,9 +80,6 @@
     "browserslist": [
         "extends @ebay/browserslist-config"
     ],
-    "devDependencies": {
-        "@marko/run-adapter-static": "^2.0.2"
-    },
     "publishConfig": {
         "registry": "https://registry.npmjs.org"
     }