@ebay/skin 15.1.0-1 → 15.1.0

package/dist/drawer-dialog/drawer-dialog.css

@@ -20,7 +20,7 @@
 .drawer-dialog__header {
   display: flex;
   flex-shrink: 0;
-  margin: 16px 16px 0;
+  margin: 20px 16px 0;
   position: relative;
 }
 .drawer-dialog__header h1,

package/dist/tourtip/tourtip.css

@@ -8,7 +8,7 @@ span.tourtip {
   display: inline-block;
 }
 .tourtip__overlay {
-  border-radius: var(--bubble-border-radius, var(--border-radius-50));
+  border-radius: var(--bubble-border-radius, var(--border-radius-100));
   filter: var(--bubble-filter);
   font-size: 14px;
   max-width: 344px;
@@ -20,7 +20,7 @@ span.tourtip {
   position: absolute;
 }
 .tourtip__mask {
-  border-radius: var(--bubble-border-radius, var(--border-radius-50));
+  border-radius: var(--bubble-border-radius, var(--border-radius-100));
   position: relative;
   z-index: 1;
   background-color: var(--tourtip-background-color, var(--color-background-primary));
@@ -31,7 +31,7 @@ span.tourtip__mask {
 }
 .tourtip__cell {
   display: flex;
-  padding: 8px 16px;
+  padding: 16px;
   word-break: break-word;
   flex-wrap: wrap;
 }
@@ -136,9 +136,9 @@ button.tourtip__close > svg {
   top: 12px;
 }
 .tourtip__heading {
-  font-size: 1em;
+  font-size: 1.25rem;
   font-weight: bold;
-  margin: 0 0 4px;
+  margin: 0 0 8px;
 }
 span.tourtip__heading {
   display: block;

package/dist/variables/variables.less

@@ -35,6 +35,7 @@
 @spacing-100: 8px;
 @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-600: @spacing-100 * 6;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "15.1.0-1",
+    "version": "15.1.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -59,13 +59,13 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.19.1",
-        "@babel/preset-env": "^7.19.1",
+        "@babel/core": "^7.19.6",
+        "@babel/preset-env": "^7.19.4",
         "@commitlint/cli": "^17.1.2",
         "@commitlint/config-conventional": "^17.1.0",
         "@ebay/browserslist-config": "^2.4.1",
-        "@percy/cli": "^1.10.4",
-        "@percy/storybook": "^4.3.1",
+        "@percy/cli": "^1.11.0",
+        "@percy/storybook": "^4.3.4",
         "@storybook/builder-webpack5": "^6.5.12",
         "@storybook/html": "^6.5.12",
         "@storybook/manager-webpack5": "^6.5.12",
@@ -73,7 +73,7 @@
         "browser-sync": "^2.27.10",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.24.0",
+        "eslint": "^8.25.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^8",
         "eslint-plugin-prettier": "^4",
@@ -84,8 +84,8 @@
         "gulp-rename": "^2",
         "husky": "^8.0.1",
         "jekyll": "^3.0.0-beta1",
-        "jsdom": "^20.0.0",
-        "less-loader": "^11.0.0",
+        "jsdom": "^20.0.1",
+        "less-loader": "^11.1.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
         "lint-staged": "^13.0.2",
@@ -121,10 +121,10 @@
         "postcss-loader": "^7.0.0",
         "prettier": "^2.7.1",
         "rimraf": "^3",
-        "stylelint": "^14.12.1",
+        "stylelint": "^14.14.0",
         "stylelint-config-prettier": "^9",
-        "stylelint-config-standard": "^28",
-        "stylelint-no-unsupported-browser-features": "^5.0.4",
+        "stylelint-config-standard": "^29",
+        "stylelint-no-unsupported-browser-features": "^6.0.1",
         "stylelint-order": "^5",
         "stylelint-prettier": "^2",
         "svgo": "^2.7.0",
@@ -132,7 +132,7 @@
         "webpack-cli": "^4.10.0",
         "winston": "^3.8.2",
         "xmlserializer": "^0.6.1",
-        "yargs": "^17.5.1"
+        "yargs": "^17.6.0"
     },
     "keywords": [
         "eBay",

package/src/less/drawer-dialog/drawer-dialog.less

@@ -13,7 +13,7 @@
 }
 
 .drawer-dialog__header {
-    .dialog-header-content();
+    .dialog-header-content(@top-margin: @spacing-250);
 }
 
 .drawer-dialog__header .fake-link {

package/src/less/mixins/private/bubble-mixins.less

@@ -5,8 +5,8 @@
         drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }
 
-.bubble() {
-    .border-radius-token(bubble-border-radius, border-radius-50);
+.bubble(@border-radius-value: border-radius-50) {
+    .border-radius-token(bubble-border-radius, @border-radius-value);
 
     filter: var(--bubble-filter);
     font-size: 14px;
@@ -17,8 +17,8 @@
     z-index: 1;
 }
 
-.bubble-mask() {
-    .border-radius-token(bubble-border-radius, border-radius-50);
+.bubble-mask(@border-radius-value: border-radius-50) {
+    .border-radius-token(bubble-border-radius, @border-radius-value);
     position: relative;
     z-index: 1;
 }
@@ -28,9 +28,9 @@
 }
 
 // creates basic layout
-.bubble-cell() {
+.bubble-cell(@tourtip-spacing: @spacing-100 @spacing-200) {
     display: flex;
-    padding: @spacing-100 @spacing-200;
+    padding: @tourtip-spacing;
     word-break: break-word;
 }
 

package/src/less/mixins/private/dialog-mixins.less

@@ -46,11 +46,11 @@
     max-width: calc(100% - 32px);
 }
 
-.dialog-header-content() {
+.dialog-header-content(@top-margin: @spacing-200) {
     display: flex;
     // Fix for Safari not honoring min-height
     flex-shrink: 0;
-    margin: @spacing-200 @spacing-200 0;
+    margin: @top-margin @spacing-200 0;
     position: relative;
 
     h1,

package/src/less/tourtip/tourtip.less

@@ -11,14 +11,14 @@ span.tourtip {
 }
 
 .tourtip__overlay {
-    .bubble();
+    .bubble(@border-radius-value: border-radius-100);
 
     display: none;
     position: absolute;
 }
 
 .tourtip__mask {
-    .bubble-mask();
+    .bubble-mask(@border-radius-value: border-radius-100);
     .background-color-token(tourtip-background-color, color-background-primary);
     .color-token(tourtip-foreground-color, color-foreground-primary);
 }
@@ -28,7 +28,7 @@ span.tourtip__mask {
 }
 
 .tourtip__cell {
-    .bubble-cell();
+    .bubble-cell(@tourtip-spacing: @spacing-200);
 
     flex-wrap: wrap;
 
@@ -114,9 +114,9 @@ button.tourtip__close > svg {
 }
 
 .tourtip__heading {
-    font-size: 1em;
+    font-size: @font-size-20;
     font-weight: bold;
-    margin: 0 0 @spacing-50;
+    margin: 0 0 @spacing-100;
 }
 
 span.tourtip__heading {

package/src/less/variables/variables.less

@@ -35,6 +35,7 @@
 @spacing-100: 8px;
 @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-600: @spacing-100 * 6;