@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/src/sass/mixins/private/_token-mixins.scss

@@ -0,0 +1,124 @@
+@mixin custom-property-token($property, $component-token, $product-token: "") {
+    @if $product-token != "" {
+        #{$property}: var(--#{$component-token}, var(--#{$product-token}));
+    } @else {
+        #{$property}: var(--#{$component-token});
+    }
+}
+
+@mixin background-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        background,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin background-color-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        background-color,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin background-image-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        background-image,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin border-bottom-left-radius-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        border-bottom-left-radius,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin border-bottom-right-radius-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        border-bottom-right-radius,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin border-top-left-radius-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        border-top-left-radius,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin border-top-right-radius-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        border-top-right-radius,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin border-radius-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        border-radius,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin box-shadow-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        box-shadow,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin border-color-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        border-color,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin border-left-color-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        border-left-color,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin border-right-color-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        border-right-color,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin color-token($component-token, $product-token: "") {
+    @include custom-property-token(color, $component-token, $product-token);
+}
+
+@mixin fill-token($component-token, $product-token: "") {
+    @include custom-property-token(fill, $component-token, $product-token);
+}
+
+@mixin outline-color-token($component-token, $product-token: "") {
+    @include custom-property-token(
+        outline-color,
+        $component-token,
+        $product-token
+    );
+}
+
+@mixin outline-token($width, $style, $component-token, $product-token: "") {
+    /* stylelint-disable-next-line custom-property-pattern */
+    outline: $width $style var(--#{$component-token}, var(--#{$product-token}));
+}

package/src/sass/mixins/public/_typography-mixins.scss

@@ -0,0 +1,136 @@
+@mixin typography-giant-3() {
+    font-size: var(--font-size-giant-3);
+    font-weight: var(--font-weight-bold);
+    line-height: 52px;
+}
+
+@mixin typography-giant-2() {
+    font-size: var(--font-size-giant-2);
+    font-weight: var(--font-weight-bold);
+    line-height: 46px;
+}
+
+@mixin typography-giant-1() {
+    font-size: var(--font-size-giant-1);
+    font-weight: var(--font-weight-bold);
+    line-height: 40px;
+}
+
+@mixin typography-large-2() {
+    font-size: var(--font-size-large-2);
+    font-weight: var(--font-weight-bold);
+    line-height: 32px;
+}
+
+@mixin typography-large-2-secondary() {
+    @include typography-large-2();
+
+    color: var(--color-foreground-secondary);
+}
+
+@mixin typography-large-1() {
+    font-size: var(--font-size-large-1);
+    font-weight: var(--font-weight-bold);
+    line-height: 28px;
+}
+
+@mixin typography-large-1-secondary() {
+    @include typography-large-1();
+
+    color: var(--color-foreground-secondary);
+}
+
+@mixin typography-medium() {
+    font-size: var(--font-size-medium);
+    line-height: 24px;
+}
+
+@mixin typography-medium-bold() {
+    @include typography-medium();
+
+    font-weight: var(--font-weight-bold);
+}
+
+@mixin typography-medium-secondary() {
+    @include typography-medium();
+
+    color: var(--color-foreground-secondary);
+}
+
+@mixin typography-regular() {
+    font-size: var(--font-size-default);
+    line-height: 20px;
+}
+
+@mixin typography-regular-bold() {
+    @include typography-regular();
+
+    font-weight: var(--font-weight-bold);
+}
+
+@mixin typography-regular-secondary() {
+    @include typography-regular();
+
+    color: var(--color-foreground-secondary);
+}
+
+@mixin typography-small() {
+    font-size: var(--font-size-small);
+    line-height: 16px;
+}
+
+@mixin typography-small-bold() {
+    @include typography-small();
+
+    font-weight: var(--font-weight-bold);
+}
+
+@mixin typography-small-secondary() {
+    @include typography-small();
+
+    color: var(--color-foreground-secondary);
+}
+
+/* large screen titles */
+
+@mixin title-giant-screen-large() {
+    font-size: var(--font-size-giant-1);
+    line-height: 36px;
+}
+
+@mixin title-large-screen-large() {
+    font-size: var(--font-size-large-2);
+    line-height: 30px;
+}
+
+@mixin title-medium-screen-large() {
+    font-size: var(--font-size-large-1);
+    line-height: 24px;
+}
+
+@mixin title-small-screen-large() {
+    font-size: var(--font-size-medium);
+    line-height: 20px;
+}
+
+/* small screen titles */
+
+@mixin title-giant-screen-small() {
+    font-size: var(--font-size-large-2);
+    line-height: 30px;
+}
+
+@mixin title-large-screen-small() {
+    font-size: var(--font-size-large-1);
+    line-height: 24px;
+}
+
+@mixin title-medium-screen-small() {
+    font-size: var(--font-size-medium);
+    line-height: 20px;
+}
+
+@mixin title-small-screen-small() {
+    font-size: var(--font-size-default);
+    line-height: 16px;
+}

package/src/sass/mixins/public/_utility-mixins.scss

@@ -0,0 +1,62 @@
+@mixin clipped() {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+@mixin unclipped() {
+    clip: auto;
+    height: auto;
+    overflow: visible;
+    white-space: normal;
+    width: auto;
+}
+
+@mixin truncate() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin image-treatment($border-radius: 8px) {
+    align-items: center;
+    border-radius: $border-radius;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+        background: rgba(0, 0, 0, 0.05);
+        bottom: 0;
+        content: "";
+        display: block;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    > img {
+        display: inline-block;
+        max-height: 100%;
+        max-width: 100%;
+        object-fit: contain;
+    }
+}
+
+@mixin flex-items-centered($display: flex) {
+    align-items: center;
+    display: $display;
+    justify-content: center;
+}
+
+@mixin inline-flex-items-centered() {
+    @include flex-items-centered(inline-flex);
+}

package/src/{less/page-grid/page-grid.less → sass/page-grid/page-grid.scss}

@@ -1,32 +1,32 @@
-@import "../variables/variables.less";
+@import "../variables/variables";
 
 :root {
-    --page-grid-number-cols: @_page-grid-number-cols-small;
-    --page-grid-outside-margins: @_page-grid-outside-margins-small;
-    --page-grid-column-gaps: @_page-grid-column-gaps-small;
-    --page-grid-row-gaps: @_page-grid-row-gaps-large;
+    --page-grid-number-cols: #{$_page-grid-number-cols-small};
+    --page-grid-outside-margins: #{$_page-grid-outside-margins-small};
+    --page-grid-column-gaps: #{$_page-grid-column-gaps-small};
+    --page-grid-row-gaps: #{$_page-grid-row-gaps-large};
     --page-grid-column-widths: calc(
-        (100% / @_page-grid-number-cols-small) - @_page-grid-column-gaps-small +
+        (100% / #{$_page-grid-number-cols-small}) - #{$_page-grid-column-gaps-small} +
             1px
     );
-    --page-grid-max-width: @_page-grid-max-width;
-    // TODO: determine if needed. This is the max width inclusive of outside margins (not currently used)
+    --page-grid-max-width: #{$_page-grid-max-width};
+    /* TODO: determine if needed. This is the max width inclusive of outside margins (not currently used) */
     --page-grid-total-max-width: calc(
         var(--page-grid-max-width) + (var(--page-grid-outside-margins) * 2)
     );
 
-    @media screen and (min-width: @_screen-size-SM) {
-        --page-grid-number-cols: @_page-grid-number-cols-large;
-        --page-grid-column-gaps: @_page-grid-column-gaps-large;
+    @media screen and (min-width: $_screen-size-SM) {
+        --page-grid-number-cols: #{$_page-grid-number-cols-large};
+        --page-grid-column-gaps: #{$_page-grid-column-gaps-large};
         --page-grid-column-widths: calc(
-            (100% / @_page-grid-number-cols-large) -
-                @_page-grid-column-gaps-large + 1px
+            (100% / #{$_page-grid-number-cols-large}) - #{$_page-grid-column-gaps-large} +
+                1px
         );
-        --page-grid-outside-margins: @_page-grid-outside-margins-large;
+        --page-grid-outside-margins: #{$_page-grid-outside-margins-large};
     }
 
-    @media screen and (min-width: @_screen-size-XL) {
-        --page-grid-outside-margins: @_page-grid-outside-margins-max;
+    @media screen and (min-width: $_screen-size-XL) {
+        --page-grid-outside-margins: #{$_page-grid-outside-margins-max};
     }
 }
 
@@ -54,24 +54,24 @@
     row-gap: var(--page-grid-row-gaps);
 }
 
-// handle subgrid
-// fallback for lack of subgrid support in client browser
-// @TODO remove .subgrid in next major version
+/* handle subgrid */
+/* fallback for lack of subgrid support in client browser */
+/* @TODO remove .subgrid in next major version */
 .subgrid,
 .page-grid__subgrid {
     display: grid;
 }
 
-// subgrid supported
+/* subgrid supported */
 @supports (grid-template-columns: subgrid) {
-    // @TODO remove .subgrid  in next major version
+    /* @TODO remove .subgrid  in next major version */
     .subgrid,
     .page-grid__subgrid {
         grid-template-columns: subgrid;
     }
 }
 
-// handle nested grid
+/* handle nested grid */
 .page-grid-container .nested-grid-container {
     max-width: 100%;
     padding: 0;

package/src/{less/page-notice/page-notice.less → sass/page-notice/page-notice.scss}

@@ -1,12 +1,20 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .page-notice {
-    .background-color-token(page-notice-general-background-color, color-background-inverse);
-    .border-color-token(page-notice-general-border-color, color-background-inverse);
+    @include background-color-token(
+        page-notice-general-background-color,
+        color-background-inverse
+    );
+    @include border-color-token(
+        page-notice-general-border-color,
+        color-background-inverse
+    );
+
     border-style: solid;
     border-width: 1px;
-    .color-token(page-notice-color, color-foreground-on-inverse);
+    @include color-token(page-notice-color, color-foreground-on-inverse);
+
     font-size: var(--font-size-default);
     margin: var(--spacing-100) 0;
     padding: var(--spacing-200);
@@ -15,7 +23,7 @@
 div[role="region"].page-notice,
 section.page-notice {
     display: grid;
-    // provide explicit structure up front, create loose markup model
+    /* provide explicit structure up front, create loose markup model */
     grid-template-columns: 32px auto auto auto;
 }
 
@@ -35,12 +43,13 @@ span[role="region"].page-notice {
 }
 
 .page-notice a {
-    .color-token(page-notice-color, color-foreground-on-inverse);
+    @include color-token(page-notice-color, color-foreground-on-inverse);
+
     font-size: var(--font-size-default);
     font-weight: bold;
 }
 
-// force links with text having more than one word to remain on same line
+/* force links with text having more than one word to remain on same line */
 .page-notice__cta a {
     white-space: nowrap;
 }
@@ -50,23 +59,24 @@ span[role="region"].page-notice {
 }
 
 .page-notice a:hover {
-    .color-token(page-notice-color, color-foreground-on-inverse);
+    @include color-token(page-notice-color, color-foreground-on-inverse);
 }
 
 .page-notice button.fake-link {
-    .color-token(page-notice-color, color-foreground-on-inverse);
+    @include color-token(page-notice-color, color-foreground-on-inverse);
+
     font-size: var(--font-size-default);
     font-weight: bold;
 }
 
 .page-notice button.fake-link:hover {
-    .color-token(page-notice-color, color-foreground-on-inverse);
+    @include color-token(page-notice-color, color-foreground-on-inverse);
 }
 
-// Override default outline color to avoid contrast issues
-// with the darker background colors in page notices
-// For explicit focus only: the `focus-visible` instead of `focus`
-// is to exclude the styling on clicks (implied focus).
+/* Override default outline color to avoid contrast issues */
+/* with the darker background colors in page notices */
+/* For explicit focus only: the `focus-visible` instead of `focus` */
+/* is to exclude the styling on clicks (implied focus). */
 .page-notice a:focus-visible,
 .page-notice button.fake-link:focus-visible {
     outline: 2px solid var(--color-foreground-on-inverse);
@@ -74,34 +84,64 @@ span[role="region"].page-notice {
 }
 
 .page-notice--attention {
-    .background-color-token(page-notice-attention-background-color, color-background-attention);
-    .border-color-token(page-notice-attention-border-color, color-stroke-attention);
+    @include background-color-token(
+        page-notice-attention-background-color,
+        color-background-attention
+    );
+    @include border-color-token(
+        page-notice-attention-border-color,
+        color-stroke-attention
+    );
 
     .page-notice__header svg {
-        .color-token(page-notice-attention-icon-color, color-foreground-on-attention);
+        @include color-token(
+            page-notice-attention-icon-color,
+            color-foreground-on-attention
+        );
     }
 }
 
 .page-notice--confirmation {
-    .background-color-token(page-notice-confirmation-background-color, color-background-confirmation);
-    .border-color-token(page-notice-confirmation-border-color, color-stroke-confirmation);
+    @include background-color-token(
+        page-notice-confirmation-background-color,
+        color-background-confirmation
+    );
+    @include border-color-token(
+        page-notice-confirmation-border-color,
+        color-stroke-confirmation
+    );
 
     .page-notice__header svg {
-        .color-token(page-notice-confirmation-icon-color, color-foreground-on-confirmation);
+        @include color-token(
+            page-notice-confirmation-icon-color,
+            color-foreground-on-confirmation
+        );
     }
 }
 
 .page-notice--information {
-    .background-color-token(page-notice-information-background-color, color-background-information);
-    .border-color-token(page-notice-information-border-color, color-stroke-information);
+    @include background-color-token(
+        page-notice-information-background-color,
+        color-background-information
+    );
+    @include border-color-token(
+        page-notice-information-border-color,
+        color-stroke-information
+    );
 
     .page-notice__header svg {
-        .color-token(page-notice-information-icon-color, color-foreground-on-information);
+        @include color-token(
+            page-notice-information-icon-color,
+            color-foreground-on-information
+        );
     }
 }
 
 .page-notice--general {
-    .background-color-token(page-notice-general-background-color, color-background-inverse);
+    @include background-color-token(
+        page-notice-general-background-color,
+        color-background-inverse
+    );
 }
 
 .page-notice__header {
@@ -145,7 +185,7 @@ p.page-notice__cta {
     margin-top: var(--spacing-200);
 }
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     section.page-notice,
     div[role="region"].page-notice {
         margin: var(--spacing-200) 0;