@ebay/skin 19.11.0 → 19.12.0

package/dist/mixins/_typography-mixins.scss

@@ -1,136 +1,3 @@
-@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;
-}
+// Deprecated, use typography and title instead
+@forward "./typography" as typography-*;
+@forward "./title" as title-*;

package/dist/mixins/_typography.scss

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

package/dist/mixins/_utility-mixins.scss

@@ -1,98 +1,3 @@
-@mixin clipped() {
-    border: 0;
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-}
+// Deprecated, use utility instead
 
-@mixin unclipped() {
-    clip-path: none;
-    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, $display: flex) {
-    align-items: center;
-    border-radius: $border-radius;
-    display: $display;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-
-    &::after {
-        background: rgb(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);
-}
-
-@mixin scrollbars-permanent($target) {
-    #{$target} {
-        -webkit-overflow-scrolling: touch;
-        scroll-behavior: smooth;
-        /* stylelint-disable declaration-block-no-duplicate-properties */
-        -webkit-scroll-snap-type: mandatory;
-        -webkit-scroll-snap-type: x mandatory;
-        -ms-scroll-snap-type: mandatory;
-        -ms-scroll-snap-type: x mandatory;
-        scroll-snap-type: proximity;
-        scroll-snap-type: x proximity;
-        /* stylelint-enable declaration-block-no-duplicate-properties */
-    }
-
-    #{$target}::-webkit-scrollbar {
-        background-color: var(--color-background-faint);
-        border-radius: 12px;
-    }
-
-    #{$target}::-webkit-scrollbar:vertical {
-        width: 6px;
-    }
-
-    #{$target}::-webkit-scrollbar:horizontal {
-        height: 6px;
-    }
-
-    #{$target}::-webkit-scrollbar-thumb {
-        background-color: var(--color-foreground-secondary);
-        border-color: transparent;
-        border-radius: 12px;
-        border-right-style: inset;
-        box-shadow: none;
-    }
-}
+@forward "./utility";

package/dist/mixins/_utility.scss

@@ -0,0 +1,98 @@
+@mixin clipped() {
+    border: 0;
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+@mixin unclipped() {
+    clip-path: none;
+    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, $display: flex) {
+    align-items: center;
+    border-radius: $border-radius;
+    display: $display;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+        background: rgb(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);
+}
+
+@mixin scrollbars-permanent($target) {
+    #{$target} {
+        -webkit-overflow-scrolling: touch;
+        scroll-behavior: smooth;
+        /* stylelint-disable declaration-block-no-duplicate-properties */
+        -webkit-scroll-snap-type: mandatory;
+        -webkit-scroll-snap-type: x mandatory;
+        -ms-scroll-snap-type: mandatory;
+        -ms-scroll-snap-type: x mandatory;
+        scroll-snap-type: proximity;
+        scroll-snap-type: x proximity;
+        /* stylelint-enable declaration-block-no-duplicate-properties */
+    }
+
+    #{$target}::-webkit-scrollbar {
+        background-color: var(--color-background-faint);
+        border-radius: 12px;
+    }
+
+    #{$target}::-webkit-scrollbar:vertical {
+        width: 6px;
+    }
+
+    #{$target}::-webkit-scrollbar:horizontal {
+        height: 6px;
+    }
+
+    #{$target}::-webkit-scrollbar-thumb {
+        background-color: var(--color-foreground-secondary);
+        border-color: transparent;
+        border-radius: 12px;
+        border-right-style: inset;
+        box-shadow: none;
+    }
+}

package/dist/mixins/typography-mixins.less

@@ -1,3 +1,5 @@
+// Deprecated, remove next major
+
 .typography-giant-3() {
     font-size: var(--font-size-giant-3);
     font-weight: var(--font-weight-bold);

package/dist/mixins/utility-mixins.less

@@ -1,3 +1,5 @@
+// Deprecated, remove next major
+
 .clipped() {
     border: 0;
     clip-path: inset(50%);

package/dist/tokens/evo-dark.css

@@ -89,19 +89,20 @@
         --color-data-viz-tooltip-shadow-secondary: #ffffff2b;
         --color-scrim-image: rgba(255, 255, 255, 0.12);
         --color-scrim-background: rgba(0, 0, 0, 0.64);
-        --state-layer-focus: rgba(
+        --state-layer-neutral: rgb(var(--color-neutral-100-rgb), 0);
+        --state-layer-focus: rgb(
             var(--color-neutral-100-rgb),
             var(--opacity-50)
         );
-        --state-layer-hover: rgba(
+        --state-layer-hover: rgb(
             var(--color-neutral-100-rgb),
             var(--opacity-50)
         );
-        --state-layer-pressed: rgba(
+        --state-layer-pressed: rgb(
             var(--color-neutral-100-rgb),
             var(--opacity-100)
         );
-        --state-layer-drag: rgba(
+        --state-layer-drag: rgb(
             var(--color-neutral-100-rgb),
             var(--opacity-150)
         );

package/dist/tokens/evo-light.css

@@ -103,13 +103,14 @@
     --color-marketing-orange-background-3: var(--color-coral-400);
     --color-marketing-magenta-foreground-4: var(--color-neutral-100);
     --color-marketing-magenta-background-4: var(--color-pink-400);
-    --state-layer-focus: rgba(var(--color-neutral-900-rgb), var(--opacity-50));
-    --state-layer-hover: rgba(var(--color-neutral-900-rgb), var(--opacity-50));
-    --state-layer-pressed: rgba(
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-focus: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
+    --state-layer-hover: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
+    --state-layer-pressed: rgb(
         var(--color-neutral-900-rgb),
         var(--opacity-100)
     );
-    --state-layer-drag: rgba(var(--color-neutral-900-rgb), var(--opacity-150));
+    --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));
     --color-ai-gradient-full-spectrum: linear-gradient(
         223deg,
         var(--color-ai-solid-yellow-strong) 9.79%,

package/dist/variables/_variables.scss

@@ -3,7 +3,26 @@
 /* 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. */
+/* The variables 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);
+/* Deprecated when using variables with _ or - with @use, they are not accessable */
 $_screen-size-XS: 320px;
 $_screen-size-SM: 512px;
 $_screen-size-MD: 768px;

package/mixins.scss

@@ -0,0 +1,4 @@
+@forward "./dist/mixins/animation" as animation-*;
+@forward "./dist/mixins/typography" as typography-*;
+@forward "./dist/mixins/title" as title-*;
+@forward "./dist/mixins/utility" as utility-*;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.11.0",
+    "version": "19.12.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",
@@ -54,7 +54,7 @@
         "lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
         "lint:css": "stylelint dist --config .stylelintrc",
         "lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
-        "lint:sass": "stylelint docs/src/sass src/sass --config .stylelintrc",
+        "lint:sass": "stylelint src/routes/**/*.scss src/sass --config .stylelintrc",
         "postcss": "postcss dist/**/*.css -r ",
         "prepublishOnly": "node scripts gen",
         "preview": "marko-run preview",