@ebay/skin 18.0.0 → 18.0.2

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/variables/variables.less

@@ -0,0 +1,70 @@
+// Responsive Breakpoints
+// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
+// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
+// most mobile devices would be higher in screen width than the smallest viewport width.
+
+// The variables with underscores are to be considered constants. They can be read, but should not be modified.
+@_screen-size-XS: 320px;
+@_screen-size-SM: 512px;
+@_screen-size-MD: 768px;
+@_screen-size-LG: 1024px;
+@_screen-size-XL: 1280px;
+@_screen-size-XL2: 1440px;
+@_screen-size-XL3: 1680px;
+@_screen-size-XL4: 1920px;
+
+@_page-grid-max-width: 1584px;
+@_page-grid-number-cols-small: 8;
+@_page-grid-number-cols-large: 16;
+@_page-grid-outside-margins-small: 16px;
+@_page-grid-outside-margins-large: 32px;
+@_page-grid-outside-margins-max: 48px;
+@_page-grid-column-gaps-small: var(--spacing-100);
+@_page-grid-column-gaps-large: var(--spacing-200);
+@_page-grid-row-gaps-small: var(--spacing-100);
+@_page-grid-row-gaps-large: var(--spacing-200);
+
+@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
+@marketsans-fontname: "Market Sans";
+@marketsans-filename-regular: "MarketSans-Regular-WebS";
+@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
+
+@font-family-default: @marketsans-fontname, Arial, sans-serif;
+// TODO: remove these in next major version
+@font-weight-regular: 500;
+@font-weight-bold: 700;
+
+@font-size-12: 0.75rem;
+@font-size-14: 0.875rem;
+@font-size-16: 1rem;
+@font-size-18: 1.125rem; // secret size
+@font-size-20: 1.25rem;
+@font-size-24: 1.5rem;
+@font-size-30: 1.875rem;
+@font-size-36: 2.25rem;
+@font-size-46: 2.875rem;
+@font-size-64: 4rem;
+
+@spacing-25: @spacing-100 * 0.25;
+@spacing-50: @spacing-100 * 0.5;
+@spacing-75: @spacing-100 * 0.75;
+@spacing-100: 8px;
+@spacing-125: @spacing-100 * 1.25;
+@spacing-150: @spacing-100 * 1.5;
+@spacing-200: @spacing-100 * 2;
+@spacing-250: @spacing-100 * 2.5;
+@spacing-300: @spacing-100 * 3;
+@spacing-400: @spacing-100 * 4;
+@spacing-450: @spacing-100 * 4.5;
+@spacing-600: @spacing-100 * 6;
+@spacing-700: @spacing-100 * 7;
+@spacing-800: @spacing-100 * 8;
+
+@font-size-giant-3: @font-size-46;
+@font-size-giant-2: @font-size-36;
+@font-size-giant-1: @font-size-30;
+@font-size-large-2: @font-size-24;
+@font-size-large-1: @font-size-20;
+@font-size-medium: @font-size-16;
+@font-size-regular: @font-size-14;
+@font-size-small: @font-size-12;

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.0",
+    "version": "18.0.2",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [

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/variables/variables.less

@@ -0,0 +1,70 @@
+// Responsive Breakpoints
+// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
+// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
+// most mobile devices would be higher in screen width than the smallest viewport width.
+
+// The variables with underscores are to be considered constants. They can be read, but should not be modified.
+@_screen-size-XS: 320px;
+@_screen-size-SM: 512px;
+@_screen-size-MD: 768px;
+@_screen-size-LG: 1024px;
+@_screen-size-XL: 1280px;
+@_screen-size-XL2: 1440px;
+@_screen-size-XL3: 1680px;
+@_screen-size-XL4: 1920px;
+
+@_page-grid-max-width: 1584px;
+@_page-grid-number-cols-small: 8;
+@_page-grid-number-cols-large: 16;
+@_page-grid-outside-margins-small: 16px;
+@_page-grid-outside-margins-large: 32px;
+@_page-grid-outside-margins-max: 48px;
+@_page-grid-column-gaps-small: var(--spacing-100);
+@_page-grid-column-gaps-large: var(--spacing-200);
+@_page-grid-row-gaps-small: var(--spacing-100);
+@_page-grid-row-gaps-large: var(--spacing-200);
+
+@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
+@marketsans-fontname: "Market Sans";
+@marketsans-filename-regular: "MarketSans-Regular-WebS";
+@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
+
+@font-family-default: @marketsans-fontname, Arial, sans-serif;
+// TODO: remove these in next major version
+@font-weight-regular: 500;
+@font-weight-bold: 700;
+
+@font-size-12: 0.75rem;
+@font-size-14: 0.875rem;
+@font-size-16: 1rem;
+@font-size-18: 1.125rem; // secret size
+@font-size-20: 1.25rem;
+@font-size-24: 1.5rem;
+@font-size-30: 1.875rem;
+@font-size-36: 2.25rem;
+@font-size-46: 2.875rem;
+@font-size-64: 4rem;
+
+@spacing-25: @spacing-100 * 0.25;
+@spacing-50: @spacing-100 * 0.5;
+@spacing-75: @spacing-100 * 0.75;
+@spacing-100: 8px;
+@spacing-125: @spacing-100 * 1.25;
+@spacing-150: @spacing-100 * 1.5;
+@spacing-200: @spacing-100 * 2;
+@spacing-250: @spacing-100 * 2.5;
+@spacing-300: @spacing-100 * 3;
+@spacing-400: @spacing-100 * 4;
+@spacing-450: @spacing-100 * 4.5;
+@spacing-600: @spacing-100 * 6;
+@spacing-700: @spacing-100 * 7;
+@spacing-800: @spacing-100 * 8;
+
+@font-size-giant-3: @font-size-46;
+@font-size-giant-2: @font-size-36;
+@font-size-giant-1: @font-size-30;
+@font-size-large-2: @font-size-24;
+@font-size-large-1: @font-size-20;
+@font-size-medium: @font-size-16;
+@font-size-regular: @font-size-14;
+@font-size-small: @font-size-12;

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';