@ebay/skin 18.0.1 → 18.0.3

package/dist/menu/menu.css

@@ -28,8 +28,8 @@ span.menu__items[role="menu"] {
     padding: 0;
 }
 
-.fake-menu__item > svg.icon--tick-16,
-.menu__item > svg.icon--tick-16 {
+.fake-menu__item > svg.icon--16,
+.menu__item > svg.icon--16 {
     align-self: center;
     fill: currentColor;
     margin: 0 auto;
@@ -39,9 +39,9 @@ span.menu__items[role="menu"] {
 }
 
 .fake-menu__item .badge,
-.fake-menu__item > svg.icon--tick-16:last-child,
+.fake-menu__item > svg.icon--16:last-child,
 .menu__item .badge,
-.menu__item > svg.icon--tick-16:last-child {
+.menu__item > svg.icon--16:last-child {
     margin-left: var(--spacing-100);
     margin-right: var(--spacing-100);
 }
@@ -106,8 +106,8 @@ a.fake-menu__item:focus {
     text-decoration: underline;
 }
 
-a.fake-menu__item[aria-current="page"] svg.icon--tick-16,
-button.fake-menu__item[aria-current="page"] svg.icon--tick-16 {
+a.fake-menu__item[aria-current="page"] svg.icon--16,
+button.fake-menu__item[aria-current="page"] svg.icon--16 {
     opacity: 1;
 }
 
@@ -122,7 +122,7 @@ div.menu__item[role^="menuitem"][aria-disabled="true"] {
     font-weight: unset;
 }
 
-div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
+div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     opacity: 1;
 }
 

package/dist/menu-button/menu-button.css

@@ -109,8 +109,8 @@ div.menu-button__item[role^="menuitem"]:last-child {
     );
 }
 
-.fake-menu-button__item svg.icon--tick-16,
-.menu-button__item svg.icon--tick-16 {
+.fake-menu-button__item svg.icon--16,
+.menu-button__item svg.icon--16 {
     align-self: center;
     fill: currentColor;
     margin: 0 auto;
@@ -119,8 +119,8 @@ div.menu-button__item[role^="menuitem"]:last-child {
     stroke-width: 0;
 }
 
-.fake-menu-button__item svg.icon--tick-16:last-child,
-.menu-button__item svg.icon--tick-16:last-child {
+.fake-menu-button__item svg.icon--16:last-child,
+.menu-button__item svg.icon--16:last-child {
     margin-left: var(--spacing-100);
 }
 a.fake-menu-button__item {
@@ -145,9 +145,9 @@ button.fake-menu-button__item {
     text-align: left;
 }
 
-a.fake-menu-button__item[aria-current="page"] svg.icon--tick-16,
-button.fake-menu-button__item[aria-current="page"] svg.icon--tick-16,
-div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
+a.fake-menu-button__item[aria-current="page"] svg.icon--16,
+button.fake-menu-button__item[aria-current="page"] svg.icon--16,
+div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     opacity: 1;
 }
 

package/dist/star-rating/star-rating.css

@@ -21,15 +21,15 @@ div.star-rating[data-stars^="4"] svg:nth-child(-n + 4),
 div.star-rating[data-stars^="5"] svg:nth-child(-n + 5) {
     --color-star-rating-full: var(
         --color-star-rating-filled,
-        $color-star-rating-icon-filled-foreground
+        var(--color-foreground-primary)
     );
     --color-star-rating-full-stroke: var(
         --color-star-rating-filled-stroke,
-        $color-star-rating-icon-filled-stroke
+        var(--color-foreground-primary)
     );
     --color-star-rating-half-stroke: var(
         --color-star-rating-filled-stroke,
-        $color-star-rating-icon-filled-stroke
+        var(--color-foreground-primary)
     );
 }
 div.star-rating[data-stars="0-5"] svg:first-child,

package/index.browser.json

@@ -4,7 +4,6 @@
     "require: ./avatar.js",
     "require: ./badge.js",
     "require: ./breadcrumbs.js",
-    "require: ./bundles.js",
     "require: ./button.js",
     "require: ./calendar.js",
     "require: ./carousel.js",

package/index.css

@@ -2,7 +2,6 @@
 @import "./avatar.css";
 @import "./badge.css";
 @import "./breadcrumbs.css";
-@import "./bundles.css";
 @import "./button.css";
 @import "./calendar.css";
 @import "./carousel.css";

package/index.js

@@ -2,7 +2,6 @@ require('./alert-dialog.js');
 require('./avatar.js');
 require('./badge.js');
 require('./breadcrumbs.js');
-require('./bundles.js');
 require('./button.js');
 require('./calendar.js');
 require('./carousel.js');

package/index.mjs

@@ -2,7 +2,6 @@ import './alert-dialog.css';
 import './avatar.css';
 import './badge.css';
 import './breadcrumbs.css';
-import './bundles.css';
 import './button.css';
 import './calendar.css';
 import './carousel.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "18.0.1",
+    "version": "18.0.3",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -73,22 +73,22 @@
         "@babel/core": "^7.24.7",
         "@babel/preset-env": "^7.24.7",
         "@changesets/changelog-github": "^0.5.0",
-        "@changesets/cli": "^2.27.6",
+        "@changesets/cli": "^2.27.7",
         "@commitlint/cli": "^19.3.0",
         "@commitlint/config-conventional": "^19.2.2",
         "@ebay/browserslist-config": "^2.9.0",
-        "@floating-ui/dom": "^1.6.6",
+        "@floating-ui/dom": "^1.6.7",
         "@percy/cli": "^1.28.8",
         "@percy/storybook": "^6.0.0",
-        "@storybook/html": "^8.1.10",
-        "@storybook/html-webpack5": "^8.1.10",
+        "@storybook/html": "^8.1.11",
+        "@storybook/html-webpack5": "^8.1.11",
         "autoprefixer": "^10.4.19",
         "babel-loader": "^9.1.3",
         "browser-sync": "^3.0.2",
         "btoa": "^1",
         "cross-env": "^7",
         "cssnano": "^7.0.3",
-        "eslint": "^9.5.0",
+        "eslint": "^9.6.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^9",
         "eslint-plugin-prettier": "^5",
@@ -107,15 +107,15 @@
         "makeup-dialog-button": "~0.4.0",
         "makeup-drawer-dialog": "0.2.0",
         "makeup-expander": "~0.11.0",
-        "makeup-floating-label": "~0.4.1",
+        "makeup-floating-label": "~0.4.2",
         "makeup-fullscreen-dialog": "0.2.0",
         "makeup-input-dialog": "0.2.0",
         "makeup-key-emitter": "~0.4.0",
         "makeup-lightbox-dialog": "0.2.0",
         "makeup-listbox": "~0.4.0",
         "makeup-listbox-button": "~0.5.0",
-        "makeup-menu": "~0.4.0",
-        "makeup-menu-button": "~0.4.0",
+        "makeup-menu": "~0.4.1",
+        "makeup-menu-button": "~0.4.1",
         "makeup-modal": "~0.5.0",
         "makeup-panel-dialog": "0.2.0",
         "makeup-prevent-scroll-keys": "~0.3.0",
@@ -134,7 +134,7 @@
         "rimraf": "^5",
         "sass": "^1.77.6",
         "sass-loader": "^14.2.1",
-        "storybook": "^8.1.10",
+        "storybook": "^8.1.11",
         "stylelint": "^16.6.1",
         "stylelint-config-prettier-scss": "^1.0.0",
         "stylelint-config-standard": "^36",
@@ -172,7 +172,7 @@
         "*.{css,scss}": "stylelint --config .stylelintrc"
     },
     "dependencies": {
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.39",
         "postcss-mixins": "^10.0.1",
         "postcss-nested": "^6.0.1",
         "postcss-simple-vars": "^7.0.1"

package/scripts/generate-imports/config.json

@@ -12,7 +12,7 @@
             "textbox"
         ]
     },
-    "skip": ["mixins", "tokens", "svg", "icon-large", "variables"],
+    "skip": ["bundles", "mixins", "tokens", "svg", "icon-large", "variables"],
     "skipIndex": ["dark-mode", "rounded-off", "variables"],
     "overrideFile": {},
     "addModules": {

package/src/sass/icon/icon.scss

@@ -5,42 +5,50 @@ svg {
     &.icon {
         @include icon-base-mixin();
     }
-    &.icon--12 {
+    &.icon--12,
+    &.icon--12-fit {
         height: 12px;
         width: 12px;
     }
 
-    &.icon--16 {
+    &.icon--16,
+    &.icon--16-fit {
         height: 16px;
         width: 16px;
     }
 
-    &.icon--18 {
+    &.icon--18,
+    &.icon--18-fit {
         height: 18px;
         width: 18px;
     }
 
-    &.icon--20 {
+    &.icon--20,
+    &.icon--20-fit {
         height: 20px;
         width: 20px;
     }
 
-    &.icon--24 {
+    &.icon--24,
+    &.icon--24-fit {
         height: 24px;
         width: 24px;
     }
 
-    &.icon--30 {
+    &.icon--30,
+    &.icon--30-fit {
         height: 30px;
         width: 30px;
     }
 
-    &.icon--32 {
+    &.icon--32,
+    &.icon--32-fit {
         height: 32px;
         width: 32px;
     }
 
-    &.icon--64 {
+    &.icon--64,
+    &.icon--64-fit {
         height: 32px;
         width: 64px;
     }

package/src/sass/menu/menu.scss

@@ -30,13 +30,13 @@ span.fake-menu__items {
     padding: 0;
 }
 
-.menu__item > svg.icon--tick-16,
-.fake-menu__item > svg.icon--tick-16 {
+.menu__item > svg.icon--16,
+.fake-menu__item > svg.icon--16 {
     @include menu-menuitem-status();
 }
 
-.menu__item > svg.icon--tick-16:last-child,
-.fake-menu__item > svg.icon--tick-16:last-child,
+.menu__item > svg.icon--16:last-child,
+.fake-menu__item > svg.icon--16:last-child,
 .fake-menu__item .badge,
 .menu__item .badge {
     margin-left: var(--spacing-100);
@@ -63,8 +63,8 @@ a.fake-menu__item:focus {
     text-decoration: underline;
 }
 
-a.fake-menu__item[aria-current="page"] svg.icon--tick-16,
-button.fake-menu__item[aria-current="page"] svg.icon--tick-16 {
+a.fake-menu__item[aria-current="page"] svg.icon--16,
+button.fake-menu__item[aria-current="page"] svg.icon--16 {
     opacity: 1;
 }
 
@@ -80,7 +80,7 @@ div.menu__item[role^="menuitem"][aria-disabled="true"] {
     font-weight: unset;
 }
 
-div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
+div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     opacity: 1;
 }
 

package/src/sass/menu-button/menu-button.scss

@@ -42,13 +42,13 @@ div.menu-button__item[role^="menuitem"] {
     cursor: default; /* needed to override text cursor */
 }
 
-.menu-button__item svg.icon--tick-16,
-.fake-menu-button__item svg.icon--tick-16 {
+.menu-button__item svg.icon--16,
+.fake-menu-button__item svg.icon--16 {
     @include menu-menuitem-status();
 }
 
-.menu-button__item svg.icon--tick-16:last-child,
-.fake-menu-button__item svg.icon--tick-16:last-child {
+.menu-button__item svg.icon--16:last-child,
+.fake-menu-button__item svg.icon--16:last-child {
     margin-left: var(--spacing-100);
 }
 
@@ -87,12 +87,12 @@ button.fake-menu-button__item {
     text-align: left;
 }
 
-a.fake-menu-button__item[aria-current="page"] svg.icon--tick-16,
-button.fake-menu-button__item[aria-current="page"] svg.icon--tick-16 {
+a.fake-menu-button__item[aria-current="page"] svg.icon--16,
+button.fake-menu-button__item[aria-current="page"] svg.icon--16 {
     opacity: 1;
 }
 
-div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
+div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     opacity: 1;
 }
 

package/src/sass/star-rating/star-rating.scss

@@ -31,15 +31,15 @@ div.star-rating[data-stars^="4"] svg:nth-child(-n + 4),
 div.star-rating[data-stars^="5"] svg:nth-child(-n + 5) {
     --color-star-rating-full: var(
         --color-star-rating-filled,
-        $color-star-rating-icon-filled-foreground
+        #{$color-star-rating-icon-filled-foreground}
     );
     --color-star-rating-full-stroke: var(
         --color-star-rating-filled-stroke,
-        $color-star-rating-icon-filled-stroke
+        #{$color-star-rating-icon-filled-stroke}
     );
     --color-star-rating-half-stroke: var(
         --color-star-rating-filled-stroke,
-        $color-star-rating-icon-filled-stroke
+        #{$color-star-rating-icon-filled-stroke}
     );
 }
 

package/bundles.browser.json

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

package/bundles.css

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

package/bundles.js

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

package/bundles.mjs

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