@ebay/skin 16.7.1 → 16.8.0-0

package/src/less/mixins/public/typography-mixins.less

@@ -1,24 +1,24 @@
 .typography-giant-3() {
-    font-size: @font-size-giant-3;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-giant-3);
+    font-weight: var(--font-weight-bold);
     line-height: 52px;
 }
 
 .typography-giant-2() {
-    font-size: @font-size-giant-2;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-giant-2);
+    font-weight: var(--font-weight-bold);
     line-height: 46px;
 }
 
 .typography-giant-1() {
-    font-size: @font-size-giant-1;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-giant-1);
+    font-weight: var(--font-weight-bold);
     line-height: 40px;
 }
 
 .typography-large-2() {
-    font-size: @font-size-large-2;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-large-2);
+    font-weight: var(--font-weight-bold);
     line-height: 32px;
 }
 
@@ -29,8 +29,8 @@
 }
 
 .typography-large-1() {
-    font-size: @font-size-large-1;
-    font-weight: @font-weight-bold;
+    font-size: var(--font-size-large-1);
+    font-weight: var(--font-weight-bold);
     line-height: 28px;
 }
 
@@ -41,14 +41,14 @@
 }
 
 .typography-medium() {
-    font-size: @font-size-medium;
+    font-size: var(--font-size-medium);
     line-height: 24px;
 }
 
 .typography-medium-bold() {
     .typography-medium();
 
-    font-weight: @font-weight-bold;
+    font-weight: var(--font-weight-bold);
 }
 
 .typography-medium-secondary() {
@@ -58,14 +58,14 @@
 }
 
 .typography-regular() {
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     line-height: 20px;
 }
 
 .typography-regular-bold() {
     .typography-regular();
 
-    font-weight: @font-weight-bold;
+    font-weight: var(--font-weight-bold);
 }
 
 .typography-regular-secondary() {
@@ -75,14 +75,14 @@
 }
 
 .typography-small() {
-    font-size: @font-size-small;
+    font-size: var(--font-size-small);
     line-height: 16px;
 }
 
 .typography-small-bold() {
     .typography-small();
 
-    font-weight: @font-weight-bold;
+    font-weight: var(--font-weight-bold);
 }
 
 .typography-small-secondary() {
@@ -94,43 +94,43 @@
 // large screen titles
 
 .title-giant-screen-large() {
-    font-size: @font-size-30;
+    font-size: var(--font-size-giant-1);
     line-height: 36px;
 }
 
 .title-large-screen-large() {
-    font-size: @font-size-24;
+    font-size: var(--font-size-large-2);
     line-height: 30px;
 }
 
 .title-medium-screen-large() {
-    font-size: @font-size-20;
+    font-size: var(--font-size-large-1);
     line-height: 24px;
 }
 
 .title-small-screen-large() {
-    font-size: @font-size-16;
+    font-size: var(--font-size-medium);
     line-height: 20px;
 }
 
 // small screen titles
 
 .title-giant-screen-small() {
-    font-size: @font-size-24;
+    font-size: var(--font-size-large-2);
     line-height: 30px;
 }
 
 .title-large-screen-small() {
-    font-size: @font-size-20;
+    font-size: var(--font-size-large-1);
     line-height: 24px;
 }
 
 .title-medium-screen-small() {
-    font-size: @font-size-16;
+    font-size: var(--font-size-medium);
     line-height: 20px;
 }
 
 .title-small-screen-small() {
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     line-height: 16px;
 }

package/src/less/mixins/public/utility-mixins.less

@@ -37,6 +37,7 @@
         content: "";
         display: block;
         left: 0;
+        pointer-events: none;
         position: absolute;
         right: 0;
         top: 0;

package/src/less/page-notice/page-notice.less

@@ -7,9 +7,9 @@
     border-style: solid;
     border-width: 1px;
     .color-token(page-notice-color, color-foreground-on-inverse);
-    font-size: @font-size-regular;
-    margin: @spacing-100 0;
-    padding: @spacing-200;
+    font-size: var(--font-size-default);
+    margin: var(--spacing-100) 0;
+    padding: var(--spacing-200);
 }
 
 div[role="region"].page-notice,
@@ -24,7 +24,7 @@ span[role="region"].page-notice {
 }
 
 .page-notice__title {
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     font-weight: normal;
     margin: 1px 0 0;
 }
@@ -36,7 +36,7 @@ span[role="region"].page-notice {
 
 .page-notice a {
     .color-token(page-notice-color, color-foreground-on-inverse);
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     font-weight: bold;
 }
 
@@ -55,7 +55,7 @@ span[role="region"].page-notice {
 
 .page-notice button.fake-link {
     .color-token(page-notice-color, color-foreground-on-inverse);
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     font-weight: bold;
 }
 
@@ -107,13 +107,13 @@ span[role="region"].page-notice {
 .page-notice__header {
     grid-column: 1;
     grid-row: 1;
-    padding-right: @spacing-200;
+    margin-inline-end: var(--spacing-200);
 }
 
 .page-notice__main {
     grid-column: 1 / 3;
     grid-row: 1;
-    padding-right: @spacing-200;
+    margin-inline-end: var(--spacing-200);
 }
 
 .page-notice__header + .page-notice__main {
@@ -127,13 +127,13 @@ span[role="region"].page-notice {
 }
 
 .page-notice__main p {
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     margin: 2px 0 0;
 }
 
 /* support legacy 6.5 notice with heading + paragaphs */
 .page-notice__main .page-notice__title ~ p {
-    margin: @spacing-50 0 0;
+    margin: var(--spacing-50) 0 0;
 }
 
 p.page-notice__cta {
@@ -141,14 +141,14 @@ p.page-notice__cta {
     grid-row: 2;
     justify-self: flex-start;
     margin-bottom: 0;
-    margin-right: @spacing-200;
-    margin-top: @spacing-200;
+    margin-right: var(--spacing-200);
+    margin-top: var(--spacing-200);
 }
 
 @media (min-width: @_screen-size-SM) {
     section.page-notice,
     div[role="region"].page-notice {
-        margin: @spacing-200 0;
+        margin: var(--spacing-200) 0;
     }
 
     .page-notice__title {
@@ -160,7 +160,7 @@ p.page-notice__cta {
         grid-row: 1;
         justify-self: flex-end;
         margin-top: 1px;
-        padding-right: @spacing-200;
+        padding-right: var(--spacing-200);
     }
 
     .page-notice__footer {
@@ -170,15 +170,6 @@ p.page-notice__cta {
 }
 
 [dir="rtl"] {
-    .page-notice__header {
-        padding-left: 16px;
-        padding-right: 0;
-    }
-
-    .page-notice__main {
-        padding-right: 0;
-    }
-
     .page-notice__footer {
         margin-left: initial;
         margin-right: auto;

package/src/less/pagination/pagination.less

@@ -8,7 +8,7 @@ nav.pagination {
     .color-token(pagination-item-foreground-color, color-foreground-secondary);
     font-family: inherit;
     font-size: 1rem;
-    margin: @spacing-100 0;
+    margin: var(--spacing-100) 0;
     max-width: 100%;
 }
 
@@ -41,19 +41,19 @@ button.pagination__previous {
 
 a.pagination__next,
 button.pagination__next {
-    margin-left: @spacing-100;
+    margin-inline-start: var(--spacing-100);
 }
 
 a.pagination__previous,
 button.pagination__previous {
-    margin-right: @spacing-100;
+    margin-inline-end: var(--spacing-100);
 }
 
 .pagination__item {
     .inline-flex-items-centered();
 
     box-sizing: border-box;
-    font-weight: @font-weight-regular;
+    font-weight: var(--font-weight-regular);
     height: 44px;
     width: 44px;
 }
@@ -86,7 +86,7 @@ button.pagination__item {
 
     &[aria-current="page"] {
         .color-token(pagination-item-current-foreground-color, color-foreground-primary);
-        font-weight: @font-weight-bold;
+        font-weight: var(--font-weight-bold);
 
         &::after {
             background-color: currentColor;
@@ -135,7 +135,7 @@ nav.pagination--fluid ol.pagination__items {
 }
 
 nav.pagination--fluid ol.pagination__items li {
-    flex: 1 0 @spacing-600;
+    flex: 1 0 var(--spacing-600);
 }
 
 [dir="rtl"] {
@@ -143,21 +143,10 @@ nav.pagination--fluid ol.pagination__items li {
     nav.pagination svg.icon--arrow-left-16 {
         transform: rotate(180deg);
     }
-
-    a.pagination__next,
-    button.pagination__next {
-        margin-left: 0;
-        margin-right: @spacing-100;
-    }
-    a.pagination__previous,
-    button.pagination__previous {
-        margin-left: @spacing-100;
-        margin-right: 0;
-    }
 }
 
 @media (min-width: @_screen-size-MD) {
     nav.pagination {
-        margin: @spacing-200 0;
+        margin: var(--spacing-200) 0;
     }
 }

package/src/less/panel-dialog/panel-dialog.less

@@ -60,7 +60,7 @@ button.icon-btn.panel-dialog__close {
 
 .panel-dialog__title {
     &:not(:first-child) {
-        margin-left: @spacing-200;
+        margin-left: var(--spacing-200);
     }
 }
 

package/src/less/progress-bar/progress-bar.less

@@ -5,7 +5,7 @@
     border: none;
     .color-token(progress-bar-foreground-color, color-foreground-accent);
     height: 4px;
-    margin: @spacing-100 0;
+    margin: var(--spacing-100) 0;
 }
 
 .progress-bar::-webkit-progress-bar {
@@ -30,6 +30,6 @@
 
 @media (min-width: @_screen-size-SM) {
     .progress-bar {
-        margin: @spacing-200 0;
+        margin: var(--spacing-200) 0;
     }
 }

package/src/less/progress-stepper/progress-stepper.less

@@ -40,7 +40,7 @@ hr.progress-stepper__separator {
 }
 
 .progress-stepper__text {
-    font-size: @font-size-12;
+    font-size: var(--font-size-small);
     justify-self: center;
     margin-top: 8px;
     text-align: center;
@@ -54,7 +54,7 @@ hr.progress-stepper__separator {
 .progress-stepper__text h6 {
     .color-token(progress-stepper-text-color, color-foreground-primary);
 
-    font-size: @font-size-12;
+    font-size: var(--font-size-small);
     font-weight: normal;
 }
 
@@ -139,18 +139,18 @@ hr.progress-stepper__separator {
 
 .progress-stepper {
     overflow: auto;
-    padding: @spacing-200 0;
+    padding: var(--spacing-200) 0;
 }
 
 .progress-stepper__item:first-child .progress-stepper__text {
     align-self: flex-start;
-    margin-left: @spacing-50;
+    margin-inline-start: var(--spacing-50);
     text-align: left;
 }
 
 .progress-stepper__item:last-child .progress-stepper__text {
     align-self: flex-end;
-    margin-right: @spacing-50;
+    margin-inline-end: var(--spacing-50);
     text-align: right;
 }
 
@@ -190,7 +190,7 @@ hr.progress-stepper__separator {
 
 .progress-stepper--vertical .progress-stepper__item .progress-stepper__text {
     align-self: center;
-    margin-left: @spacing-200;
+    margin-inline-start: var(--spacing-200);
     margin-top: 0;
     text-align: left;
     white-space: nowrap;
@@ -217,8 +217,6 @@ hr.progress-stepper__separator {
 
 [dir="rtl"] {
     .progress-stepper__item:first-child .progress-stepper__text {
-        margin-left: 0;
-        margin-right: @spacing-50;
         text-align: right;
     }
 
@@ -261,16 +259,12 @@ hr.progress-stepper__separator {
     }
 
     .progress-stepper__item:last-child .progress-stepper__text {
-        margin-left: @spacing-50;
-        margin-right: 0;
         text-align: left;
     }
 
     .progress-stepper--vertical
         .progress-stepper__item
         .progress-stepper__text {
-        margin-left: inherit;
-        margin-right: @spacing-200;
         text-align: right;
     }
 
@@ -286,7 +280,7 @@ hr.progress-stepper__separator {
     }
 
     .progress-stepper__text {
-        font-size: @font-size-regular;
+        font-size: var(--font-size-default);
         width: @progress-stepper-large-min-width;
     }
 
@@ -295,6 +289,6 @@ hr.progress-stepper__separator {
     .progress-stepper__text h4,
     .progress-stepper__text h5,
     .progress-stepper__text h6 {
-        font-size: @font-size-regular;
+        font-size: var(--font-size-default);
     }
 }

package/src/less/section-notice/section-notice.less

@@ -4,7 +4,7 @@
 .section-notice {
     .background-color-token(section-notice-default-background-color, color-background-secondary);
     .border-radius-token(section-notice-border-radius, border-radius-50);
-    font-size: @font-size-14;
+    font-size: var(--font-size-default);
     margin: 8px 0;
     padding: 16px;
 }
@@ -25,7 +25,7 @@ span[role="region"].section-notice {
 }
 
 .section-notice__title {
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     font-weight: normal;
     margin: 0;
 }
@@ -42,7 +42,7 @@ span[role="region"].section-notice {
 
 .section-notice button.fake-link {
     .color-token(section-notice-foreground-color, color-foreground-primary);
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     font-weight: bold;
 }
 
@@ -52,7 +52,7 @@ span[role="region"].section-notice {
 
 .section-notice a {
     .color-token(section-notice-foreground-color, color-foreground-primary);
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     font-weight: bold;
 }
 
@@ -67,15 +67,15 @@ span[role="region"].section-notice {
 .section-notice__header {
     grid-column: 1;
     grid-row: 1;
-    height: @spacing-200;
+    height: var(--spacing-200);
+    margin-inline-end: var(--spacing-200);
     margin-top: 1px;
-    padding-right: @spacing-200;
 }
 
 .section-notice__main {
     grid-column: 1 / 3;
     grid-row: 1;
-    padding-right: @spacing-200;
+    margin-inline-end: var(--spacing-200);
 }
 
 .section-notice__header + .section-notice__main {
@@ -90,7 +90,7 @@ span[role="region"].section-notice {
 }
 
 .section-notice__main p {
-    font-size: @font-size-regular;
+    font-size: var(--font-size-default);
     margin: 0;
 }
 
@@ -98,13 +98,13 @@ p.section-notice__cta {
     grid-column: 2;
     grid-row: 2;
     justify-self: flex-start;
-    margin-right: @spacing-200;
-    margin-top: @spacing-200;
+    margin-right: var(--spacing-200);
+    margin-top: var(--spacing-200);
 }
 
 // support legacy 6.5 notice with heading + paragaphs
 .section-notice__main .section-notice__title ~ p {
-    margin: @spacing-50 0 0;
+    margin: var(--spacing-50) 0 0;
 }
 
 // LARGE SCREEN ADJUSTMENTS
@@ -112,7 +112,7 @@ p.section-notice__cta {
 @media (min-width: @_screen-size-SM) {
     section.section-notice,
     div[role="region"].section-notice {
-        margin: @spacing-200 0;
+        margin: var(--spacing-200) 0;
     }
 
     p.section-notice__cta {
@@ -121,20 +121,15 @@ p.section-notice__cta {
         justify-self: flex-end;
         margin-bottom: 0;
         margin-top: 0;
-        padding-right: @spacing-200;
+        padding-right: var(--spacing-200);
     }
 
     .section-notice__footer {
-        padding-left: @spacing-200;
+        padding-left: var(--spacing-200);
     }
 }
 
 [dir="rtl"] {
-    .section-notice__header {
-        padding-left: @spacing-200;
-        padding-right: 0;
-    }
-
     .section-notice__footer {
         justify-self: flex-start;
         margin-left: initial;
@@ -156,7 +151,7 @@ p.section-notice__cta {
 // progressive enhancement adjustment for larger 24x24 icon
 // browsers without :has support will have text top aligned like regular section-notice
 .section-notice__header:has(svg[class*="24"]) {
-    height: @spacing-300;
+    height: var(--spacing-300);
 
     + .section-notice__main {
         padding-top: 2px;

package/src/less/section-title/section-title.less

@@ -26,38 +26,38 @@
 .section-title__title svg.icon {
     .background-color-token(color-background-secondary);
     border-radius: 12px;
-    margin-left: @spacing-100;
+    margin-inline-start: var(--spacing-100);
     padding: 7px;
 }
 
 .section-title__info {
     bottom: -3px;
-    margin: 0 @spacing-300 0 @spacing-100;
+    margin: 0 var(--spacing-300) 0 var(--spacing-100);
     position: relative;
 }
 
 .section-title__overflow {
-    margin: 0 @spacing-300 0 auto;
+    margin: 0 var(--spacing-300) 0 auto;
 }
 
 .section-title__cta,
 .section-title__overflow {
     align-items: baseline;
     display: flex;
-    height: @spacing-400;
+    height: var(--spacing-400);
     margin-left: auto;
     margin-right: 0;
 }
 
 .section-title button.icon-btn,
 .section-title__overflow button.icon-btn {
-    height: @spacing-400;
-    min-width: @spacing-400;
-    width: @spacing-400;
+    height: var(--spacing-400);
+    min-width: var(--spacing-400);
+    width: var(--spacing-400);
 }
 
 .section-title__title-container + button.icon-btn {
-    margin-left: @spacing-100;
+    margin-left: var(--spacing-100);
 }
 
 .section-title--large {
@@ -68,14 +68,12 @@
     > .section-title__cta,
     > .section-title__info,
     > .section-title__overflow {
-        height: @spacing-400;
+        height: var(--spacing-400);
     }
 }
 
 [dir="rtl"] {
     .section-title__title svg.icon {
-        margin-left: 0;
-        margin-right: @spacing-100;
         transform: rotate(180deg);
     }
 
@@ -90,7 +88,7 @@
     }
 
     .section-title__info {
-        margin: 0 @spacing-100 0 @spacing-300;
+        margin: 0 var(--spacing-100) 0 var(--spacing-300);
     }
 }