@ebay/skin 16.7.1 → 16.8.0

package/src/less/confirm-dialog/confirm-dialog.less

@@ -10,9 +10,9 @@
 .confirm-dialog__window {
     .lightbox-dialog-window();
 
-    margin-left: @spacing-200;
-    margin-right: @spacing-200;
-    padding: @spacing-200;
+    margin-left: var(--spacing-200);
+    margin-right: var(--spacing-200);
+    padding: var(--spacing-200);
     text-align: center;
 }
 
@@ -23,8 +23,8 @@
 }
 
 .confirm-dialog__main {
-    margin: @spacing-200 0;
-    min-height: @spacing-200;
+    margin: var(--spacing-200) 0;
+    min-height: var(--spacing-200);
 
     & > :first-child {
         margin-top: 0;
@@ -37,7 +37,7 @@
 
 a.confirm-dialog__confirm,
 button.confirm-dialog__confirm {
-    margin-left: @spacing-100;
+    margin-left: var(--spacing-100);
 }
 
 .confirm-dialog--show,
@@ -91,7 +91,7 @@ button.confirm-dialog__confirm {
     .confirm-dialog__window {
         .lightbox-dialog-window-large();
 
-        max-width: calc(88% - @spacing-400);
+        max-width: calc(88% - var(--spacing-400));
     }
 }
 

package/src/less/cta-button/cta-button.less

@@ -13,7 +13,7 @@ a.cta-btn {
     );
     .color-token(cta-btn-foreground-color, color-foreground-primary);
     display: inline-block;
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     max-width: 100%;
     padding: @button-padding-vertical 20px;
 }
@@ -70,7 +70,7 @@ a.cta-btn--truncated {
 a.cta-btn--large {
     border-radius: @button-border-radius-large;
     display: inline-flex;
-    font-size: @font-size-16;
+    font-size: var(--font-size-medium);
     min-height: @button-height-large;
 }
 
@@ -79,7 +79,7 @@ a.cta-btn--large-truncated {
     .btn-truncate();
     border-radius: @button-border-radius-large;
     display: inline-flex;
-    font-size: @font-size-16;
+    font-size: var(--font-size-medium);
     height: @button-height-large;
 }
 
@@ -87,7 +87,7 @@ a.cta-btn--large-truncated {
 a.cta-btn--large-fixed-height {
     border-radius: @button-border-radius-large;
     display: inline-flex;
-    font-size: @font-size-16;
+    font-size: var(--font-size-medium);
     height: @button-height-large;
 }
 

package/src/less/date-textbox/date-textbox.less

@@ -3,20 +3,20 @@
 @import "../mixins/private/bubble-mixins.less";
 
 .date-textbox {
-    // 343px - (2 * @spacing-200) [not autmatically compiled by LESS]
+    // 343px - (2 * var(--spacing-200)) [not autmatically compiled by LESS]
     --calendar-month-width: 311px;
 }
 
 .date-textbox > .textbox + .textbox {
-    margin-left: @spacing-100;
+    margin-left: var(--spacing-100);
 }
 
 .date-textbox__popover {
     .background-color-token(calendar-background-color, color-background-primary);
-    border-radius: @spacing-200;
+    border-radius: var(--spacing-200);
     filter: var(--bubble-filter);
-    margin-left: -@spacing-100;
-    padding: @spacing-200;
+    margin-left: calc(var(--spacing-100) * -1);
+    padding: var(--spacing-200);
     position: absolute;
     z-index: 1;
 }

package/src/less/details/details.less

@@ -31,12 +31,12 @@ summary.details__summary--center {
 }
 
 summary.details__summary--small {
-    font-size: @font-size-small;
+    font-size: var(--font-size-small);
     padding: 4px 8px;
 }
 
 span.details__icon {
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 
 // progressive enhancement - override hidden SVG
@@ -44,11 +44,6 @@ span.details__icon[hidden] {
     display: inline-block;
 }
 
-[dir="rtl"] span.details__icon {
-    margin-left: 0;
-    margin-right: 8px;
-}
-
 details.details[open] {
     span.details__icon {
         transform: rotate(180deg);

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

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

package/src/less/field/field.less

@@ -40,7 +40,7 @@ div.field--table {
 }
 
 .field__description--group > :last-child {
-    margin-left: 5px;
+    margin-inline-start: 5px;
     text-align: right;
 }
 
@@ -56,9 +56,9 @@ div.field--table {
 
 .field__description {
     .color-token(field-description-color, color-foreground-secondary);
-    font-size: @font-size-small;
-    line-height: @spacing-200;
-    margin-top: @spacing-50;
+    font-size: var(--font-size-small);
+    line-height: var(--spacing-200);
+    margin-top: var(--spacing-50);
 }
 
 .field__description--confirmation {
@@ -167,7 +167,6 @@ div.field__description {
 
 [dir="rtl"] {
     .field__description--group > :last-child {
-        margin-right: 5px;
         text-align: left;
     }
 }

package/src/less/filter-menu-button/filter-menu-button.less

@@ -38,7 +38,7 @@ button.filter-menu-button__button {
     svg.icon--chevron-down-12 {
         align-self: center;
         .color-token(filter-menu-button-icon-color, color-foreground-primary);
-        margin-left: 8px;
+        margin-inline-start: 8px;
     }
 }
 
@@ -252,11 +252,6 @@ div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
 }
 
 [dir="rtl"] {
-    .filter-menu-button__button-cell .icon--chevron-down-12 {
-        margin-left: 0;
-        margin-right: 8px;
-    }
-
     .filter-menu-button__checkbox {
         margin-left: 8px;
     }

package/src/less/floating-label/floating-label.less

@@ -51,7 +51,7 @@ label.floating-label__label--focus {
 }
 
 label.floating-label__label--inline {
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     transform: translate(0, 12px);
 }
 

package/src/less/global/global.less

@@ -5,7 +5,7 @@ body {
     .background-color-token(color-background-primary);
     .color-token(color-foreground-primary);
     font-family: @font-family-default;
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     -webkit-text-size-adjust: 100%;
 }
@@ -16,7 +16,7 @@ fieldset {
 }
 
 legend {
-    margin-bottom: @spacing-100;
+    margin-bottom: var(--spacing-100);
 }
 
 a {

package/src/less/icon/generated/icon.less

@@ -51,6 +51,34 @@ svg.icon--ai-filled-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--ai-spectrum-16-colored {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--ai-spectrum-20-colored {
+    height: 20px;
+    width: 20px;
+}
+svg.icon--ai-spectrum-24-colored {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--ai-spectrum-filled-16-colored {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--ai-spectrum-filled-20-colored {
+    height: 20px;
+    width: 20px;
+}
+svg.icon--ai-spectrum-filled-24-colored {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--ai-spectrum-thin-16-colored {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--ai-thin-16 {
     height: 16px;
     width: 16px;

package/src/less/infotip/infotip.less

@@ -16,7 +16,7 @@ span.infotip {
     .color-token(infotip-foreground-color, color-foreground-primary);
     display: none;
     left: 0 - 6px;
-    margin-top: @spacing-200;
+    margin-top: var(--spacing-200);
     position: absolute;
 }
 
@@ -97,7 +97,7 @@ span.infotip__mask {
 .infotip__heading {
     font-size: 1em;
     font-weight: bold;
-    margin: 0 0 @spacing-50;
+    margin: 0 0 var(--spacing-50);
 }
 
 span.infotip__heading {
@@ -121,7 +121,7 @@ span.infotip__heading {
 
 button.infotip__close,
 .infotip__close {
-    margin-left: @spacing-200;
+    margin-left: var(--spacing-200);
 }
 
 @media (min-width: @_screen-size-SM) {

package/src/less/infotip/stories/infotip.stories.js

@@ -105,3 +105,29 @@ export const paragraphExpanded = () => `
         </span>
     </span>
 </p>`;
+
+export const infotipModal = () => `
+    <span class="infotip infotip--modal">
+        <button class="icon-btn icon-btn--transparent dialog-button" type="button" data-makeup-for="lightbox-dialog-mini-infotip-0" aria-expanded="true" aria-label="Help">
+            <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+                <use href="#icon-information-16"></use>
+            </svg>
+        </button>
+    </span>
+    <div aria-labelledby="mini-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
+        <div class="lightbox-dialog__window">
+            <button class="lightbox-dialog__handle" type="button"></button>
+            <div class="lightbox-dialog__header">
+                <h2>Info</h2>
+                <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
+                    <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+            </div>
+            <div class="lightbox-dialog__main" id="mini-dialog-title">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+        </div>
+    </div>
+ `;

package/src/less/inline-notice/inline-notice.less

@@ -2,7 +2,7 @@
 @import "../mixins/private/token-mixins.less";
 
 .inline-notice {
-    margin: @spacing-100 0;
+    margin: var(--spacing-100) 0;
 }
 
 div.inline-notice {
@@ -15,8 +15,8 @@ span.inline-notice {
 
 .inline-notice__header {
     display: flex;
-    margin-right: @spacing-100;
-    margin-top: @spacing-50;
+    margin-inline-end: var(--spacing-100);
+    margin-top: var(--spacing-50);
 }
 
 .inline-notice p {
@@ -27,9 +27,3 @@ span.inline-notice {
 .inline-notice button.fake-link {
     .color-token(color-foreground-primary);
 }
-
-[dir="rtl"] {
-    .inline-notice__header .icon.icon--confirmation-filled-16 {
-        margin-left: @spacing-100;
-    }
-}

package/src/less/legacy-textbox/legacy-textbox.less

@@ -92,7 +92,7 @@ label.legacy-floating-label__label {
 
 label.legacy-floating-label__label--inline {
     bottom: 0.4375rem; // a11y: the position must be relative to the text size
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     transform: none;
 }
 

package/src/less/lightbox-dialog/lightbox-dialog.less

@@ -41,7 +41,7 @@
 }
 
 .lightbox-dialog--expressive .lightbox-dialog__window {
-    padding-bottom: @spacing-100;
+    padding-bottom: var(--spacing-100);
 }
 
 .lightbox-dialog--expressive .lightbox-dialog__header > * {
@@ -49,12 +49,12 @@
 }
 
 .lightbox-dialog--expressive .lightbox-dialog__header {
-    margin: @spacing-300 @spacing-300 0;
+    margin: var(--spacing-300) var(--spacing-300) 0;
 }
 
 .lightbox-dialog--expressive .lightbox-dialog__main,
 .lightbox-dialog--expressive .lightbox-dialog__footer {
-    padding: @spacing-200 @spacing-300;
+    padding: var(--spacing-200) var(--spacing-300);
 }
 
 // inherits from .icon-btn
@@ -71,7 +71,7 @@ button.icon-btn.lightbox-dialog__close {
 }
 
 button.icon-btn.lightbox-dialog__prev {
-    margin-right: 16px;
+    margin-inline-end: var(--spacing-200);
 }
 
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev,
@@ -86,7 +86,7 @@ button.icon-btn.lightbox-dialog__prev {
 
 .lightbox-dialog__title {
     &:not(:first-child) {
-        margin-left: @spacing-200;
+        margin-left: var(--spacing-200);
     }
 }
 
@@ -185,10 +185,6 @@ button.icon-btn.lightbox-dialog__prev {
 }
 
 [dir="rtl"] {
-    button.icon-btn.lightbox-dialog__prev {
-        margin-left: 16px;
-        margin-right: 0;
-    }
     button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
         transform: rotate(180deg);
     }
@@ -198,7 +194,7 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window {
         .lightbox-dialog-window-large();
 
-        max-width: calc(88% - @spacing-400);
+        max-width: calc(88% - var(--spacing-400));
     }
 
     .lightbox-dialog__handle {

package/src/less/listbox/listbox.less

@@ -5,7 +5,7 @@
 @import "../mixins/public/utility-mixins.less";
 
 div.listbox {
-    margin: @spacing-200 0; // margin collapse sensible default
+    margin: var(--spacing-200) 0; // margin collapse sensible default
 }
 
 span.listbox {
@@ -43,12 +43,7 @@ span.listbox__value {
 div.listbox__option svg.icon {
     .listbox-option-status();
 
-    margin-left: @spacing-100;
-}
-
-[dir="rtl"] div.listbox__option svg.icon {
-    margin-left: 0;
-    margin-right: @spacing-100;
+    margin-inline-start: var(--spacing-100);
 }
 
 div.listbox__options[role="listbox"]:focus

package/src/less/listbox-button/listbox-button.less

@@ -100,7 +100,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button__option svg.icon {
     .listbox-option-status();
 
-    margin-left: @spacing-100;
+    margin-inline-start: var(--spacing-100);
 }
 
 div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
@@ -131,11 +131,6 @@ span.listbox-button__value {
 
 // stylelint-disable no-descending-specificity
 [dir="rtl"] {
-    .listbox-button__option svg.icon {
-        margin-left: 0;
-        margin-right: @spacing-100;
-    }
-
     .listbox-button .btn__label {
         .color-token(listbox-button-label-color, color-foreground-secondary);
         margin-left: 3px;

package/src/less/menu/menu.less

@@ -34,8 +34,8 @@ span.fake-menu__items {
 .menu__item > svg.icon--tick-16:last-child,
 .fake-menu__item > svg.icon--tick-16:last-child,
 .menu__item .badge {
-    margin-left: @spacing-100;
-    margin-right: @spacing-100;
+    margin-left: var(--spacing-100);
+    margin-right: var(--spacing-100);
 }
 
 a.fake-menu__item {

package/src/less/menu-button/menu-button.less

@@ -49,7 +49,7 @@ div.menu-button__item[role^="menuitem"] {
 
 .menu-button__item svg.icon--tick-16:last-child,
 .fake-menu-button__item svg.icon--tick-16:last-child {
-    margin-left: @spacing-100;
+    margin-left: var(--spacing-100);
 }
 
 // anchor tag specific
@@ -135,7 +135,7 @@ div.menu-button__item--badged[role^="menuitem"] {
 a.fake-menu-button__item--badged .badge,
 button.fake-menu-button__item--badged .badge,
 div.menu-button__item--badged[role^="menuitem"] .badge {
-    margin-left: @spacing-50;
+    margin-left: var(--spacing-50);
     position: absolute;
     top: 6px;
     z-index: 1;

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

@@ -28,7 +28,7 @@
 }
 
 // creates basic layout
-.bubble-cell(@tourtip-spacing: @spacing-100 @spacing-200) {
+.bubble-cell(@tourtip-spacing: var(--spacing-100) var(--spacing-200)) {
     display: flex;
     padding: @tourtip-spacing;
     word-break: break-word;
@@ -42,7 +42,7 @@
     }
 
     p:not(:first-of-type) {
-        margin-top: @spacing-50;
+        margin-top: var(--spacing-50);
     }
 }
 
@@ -51,8 +51,9 @@
     background: none;
     border: 0;
     flex-shrink: 0;
-    height: @spacing-400;
-    margin: -@spacing-100 -@spacing-100 0 @spacing-100;
+    height: var(--spacing-400);
+    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0
+        var(--spacing-100);
     padding: 0;
     white-space: nowrap;
     width: 32px;

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

@@ -37,7 +37,7 @@
 
 .btn-large() {
     border-radius: var(--btn-border-radius, calc(@button-height-large / 2));
-    font-size: @font-size-medium;
+    font-size: var(--font-size-medium);
     min-height: @button-height-large;
     padding: @button-padding-vertical-large @button-padding-horizontal;
 }
@@ -46,11 +46,11 @@
     align-self: center;
 
     &:first-child {
-        margin-right: 8px; // when icon is placed before button text
+        margin-inline-end: 8px; // when icon is placed before button text
     }
 
     &:last-child {
-        margin-left: 8px; // when icon is placed after button text
+        margin-inline-start: 8px; // when icon is placed after button text
     }
 
     &:only-child {

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

@@ -55,11 +55,11 @@
     .border-radius-token(lightbox-border-radius, border-radius-100);
 }
 
-.dialog-header-content(@top-margin: @spacing-200) {
+.dialog-header-content(@top-margin: var(--spacing-200)) {
     display: flex;
     // Fix for Safari not honoring min-height
     flex-shrink: 0;
-    margin: @top-margin @spacing-200 0;
+    margin: @top-margin var(--spacing-200) 0;
     position: relative;
 
     h1,
@@ -77,14 +77,14 @@
     }
 
     & > :last-child:not(:only-child) {
-        margin-left: @spacing-200;
+        margin-inline-start: var(--spacing-200);
     }
 }
 
 .dialog-body-content() {
     box-sizing: border-box;
     flex: 1 1 auto;
-    padding: @spacing-200;
+    padding: var(--spacing-200);
     position: relative;
 
     & > :first-child {
@@ -100,31 +100,31 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: @spacing-200;
+    padding: var(--spacing-200);
     position: relative;
 
     & > :not(:first-child) {
-        margin-top: @spacing-200;
+        margin-top: var(--spacing-200);
     }
 }
 
 // Unused, small and large are the same now
 .dialog-header-content-large() {
-    margin: @spacing-200 @spacing-200 0;
+    margin: var(--spacing-200) var(--spacing-200) 0;
 }
 
 // Unused, small and large are the same now
 .dialog-body-content-large() {
-    margin: @spacing-200;
+    margin: var(--spacing-200);
 }
 
 .dialog-footer-content-large() {
     flex-direction: row;
     justify-content: flex-end;
-    padding: 0 @spacing-200 @spacing-200;
+    padding: 0 var(--spacing-200) var(--spacing-200);
 
     & > :not(:first-child) {
-        margin-left: @spacing-100;
+        margin-left: var(--spacing-100);
         margin-top: initial;
     }
 }

package/src/less/mixins/private/filter-button-mixins.less

@@ -8,13 +8,13 @@
     flex: 0 1 auto;
     flex-direction: column;
     font-family: inherit;
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     height: 32px;
     justify-content: center;
     margin: 0;
     max-width: 280px;
     min-width: 56px;
-    padding: 0 @spacing-200;
+    padding: 0 var(--spacing-200);
     text-align: center;
     text-decoration: none;
     vertical-align: bottom;

package/src/less/mixins/private/filter-menu-mixins.less

@@ -3,7 +3,7 @@
     box-sizing: border-box;
     .color-token(filter-menu-item-foreground-color, color-foreground-primary);
     display: flex;
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     justify-content: space-between;
     line-height: 1.4em;
     margin: 0;