@ebay/skin 19.9.0 → 19.10.0

package/card.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./card.js"] }

package/card.css

@@ -0,0 +1 @@
+@import "./dist/card/card.css";

package/card.js

@@ -0,0 +1 @@
+require('./dist/card/card.css');

package/card.mjs

@@ -0,0 +1 @@
+import './dist/card/card.css';

package/dist/bundles/skin-default.css

@@ -1534,6 +1534,161 @@ button.btn--floating-label .btn__floating-label--inline{
   border-left-color:var(--btn-primary-border-color, var(--color-stroke-accent));
   border-right-color:var(--primary-border-split-color, var(--color-stroke-subtle));
 }
+
+.card{
+  background-color:var(--color-background-secondary);
+  border:none;
+  border-radius:var(--border-radius-150);
+  color:var(--color-foreground-primary);
+  display:flex;
+  flex-direction:column;
+  max-width:400px;
+  min-width:200px;
+  outline:6px solid transparent;
+  outline-offset:4px;
+  padding-block-end:var(--spacing-150);
+}
+
+.card--outlined{
+  background-color:inherit;
+  border:1px solid var(--color-stroke-subtle);
+}
+
+a.card{
+  color:inherit;
+  text-decoration:none;
+}
+
+button.card{
+  font-size:inherit;
+  line-height:inherit;
+  padding:0;
+  padding-block-end:var(--spacing-150);
+  text-align:start;
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-quick-enter), box-shadow var(--motion-duration-medium-3) var(--motion-easing-quick-enter);
+}
+
+.card[disabled],.card[href=""]{
+  filter:grayscale(1);
+  opacity:.5;
+  pointer-events:none;
+}
+
+button.card:hover{
+  cursor:pointer;
+}
+
+.card:hover .card__hero-image{
+  transform:scale3d(1.01, 1.01, 1);
+}
+
+.card:focus-visible{
+  animation:card-focus-animation var(--motion-duration-short-3) var(--motion-easing-quick-enter) forwards;
+}
+
+.card__media{
+  aspect-ratio:1/1;
+  margin:var(--spacing-150);
+  margin-block-end:var(--spacing-200);
+  overflow:hidden;
+}
+
+.card__hero-image,.card__media{
+  border-radius:var(--border-radius-100);
+}
+
+.card__hero-image{
+  display:block;
+  height:100%;
+  object-fit:cover;
+  transition:transform var(--motion-duration-long-3) var(--motion-easing-quick-enter);
+  width:100%;
+}
+
+.card--full-hero .card__hero-image,.card--full-hero .card__media{
+  border-bottom-left-radius:0;
+  border-bottom-right-radius:0;
+}
+
+.card__main{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  margin-inline:var(--spacing-150);
+}
+
+.card__overline{
+  align-items:center;
+  display:flex;
+  font-weight:700;
+  gap:var(--spacing-100);
+  margin-block-end:var(--spacing-100);
+}
+
+.card__title{
+  font-size:var(--font-size-large-1);
+  font-weight:700;
+  margin:0;
+  margin-block-end:var(--spacing-50);
+}
+
+.card__description{
+  flex:1;
+}
+
+.card__action{
+  margin-block-start:var(--spacing-200);
+}
+
+.card--horizontal{
+  flex-direction:row;
+  max-width:100%;
+  width:100%;
+}
+
+.card--horizontal .card__media{
+  aspect-ratio:1/1;
+  margin-block-end:0;
+  max-width:160px;
+  min-width:90px;
+  width:25%;
+}
+
+.card--horizontal .card__hero-image{
+  aspect-ratio:1/1;
+  height:auto;
+}
+
+.card--horizontal .card__main{
+  margin-block-start:var(--spacing-150);
+  margin-inline-start:0;
+}
+
+.card--full-hero .card__media{
+  margin:0;
+  margin-block-end:var(--spacing-200);
+}
+
+.card--aspect-5-4 .card__media{
+  aspect-ratio:5/4;
+}
+
+.card--aspect-16-9 .card__media{
+  aspect-ratio:16/9;
+}
+
+@keyframes card-focus-animation{
+  0%{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:4px;
+    outline-width:6px;
+  }
+  to{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:0;
+    outline-width:2px;
+  }
+}
 .carousel{
   position:relative;
 }

package/dist/bundles/skin-full.css

@@ -1737,6 +1737,161 @@ button.btn--floating-label .btn__floating-label--inline{
   border-left-color:var(--btn-primary-border-color, var(--color-stroke-accent));
   border-right-color:var(--primary-border-split-color, var(--color-stroke-subtle));
 }
+
+.card{
+  background-color:var(--color-background-secondary);
+  border:none;
+  border-radius:var(--border-radius-150);
+  color:var(--color-foreground-primary);
+  display:flex;
+  flex-direction:column;
+  max-width:400px;
+  min-width:200px;
+  outline:6px solid transparent;
+  outline-offset:4px;
+  padding-block-end:var(--spacing-150);
+}
+
+.card--outlined{
+  background-color:inherit;
+  border:1px solid var(--color-stroke-subtle);
+}
+
+a.card{
+  color:inherit;
+  text-decoration:none;
+}
+
+button.card{
+  font-size:inherit;
+  line-height:inherit;
+  padding:0;
+  padding-block-end:var(--spacing-150);
+  text-align:start;
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-quick-enter), box-shadow var(--motion-duration-medium-3) var(--motion-easing-quick-enter);
+}
+
+.card[disabled],.card[href=""]{
+  filter:grayscale(1);
+  opacity:.5;
+  pointer-events:none;
+}
+
+button.card:hover{
+  cursor:pointer;
+}
+
+.card:hover .card__hero-image{
+  transform:scale3d(1.01, 1.01, 1);
+}
+
+.card:focus-visible{
+  animation:card-focus-animation var(--motion-duration-short-3) var(--motion-easing-quick-enter) forwards;
+}
+
+.card__media{
+  aspect-ratio:1/1;
+  margin:var(--spacing-150);
+  margin-block-end:var(--spacing-200);
+  overflow:hidden;
+}
+
+.card__hero-image,.card__media{
+  border-radius:var(--border-radius-100);
+}
+
+.card__hero-image{
+  display:block;
+  height:100%;
+  object-fit:cover;
+  transition:transform var(--motion-duration-long-3) var(--motion-easing-quick-enter);
+  width:100%;
+}
+
+.card--full-hero .card__hero-image,.card--full-hero .card__media{
+  border-bottom-left-radius:0;
+  border-bottom-right-radius:0;
+}
+
+.card__main{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  margin-inline:var(--spacing-150);
+}
+
+.card__overline{
+  align-items:center;
+  display:flex;
+  font-weight:700;
+  gap:var(--spacing-100);
+  margin-block-end:var(--spacing-100);
+}
+
+.card__title{
+  font-size:var(--font-size-large-1);
+  font-weight:700;
+  margin:0;
+  margin-block-end:var(--spacing-50);
+}
+
+.card__description{
+  flex:1;
+}
+
+.card__action{
+  margin-block-start:var(--spacing-200);
+}
+
+.card--horizontal{
+  flex-direction:row;
+  max-width:100%;
+  width:100%;
+}
+
+.card--horizontal .card__media{
+  aspect-ratio:1/1;
+  margin-block-end:0;
+  max-width:160px;
+  min-width:90px;
+  width:25%;
+}
+
+.card--horizontal .card__hero-image{
+  aspect-ratio:1/1;
+  height:auto;
+}
+
+.card--horizontal .card__main{
+  margin-block-start:var(--spacing-150);
+  margin-inline-start:0;
+}
+
+.card--full-hero .card__media{
+  margin:0;
+  margin-block-end:var(--spacing-200);
+}
+
+.card--aspect-5-4 .card__media{
+  aspect-ratio:5/4;
+}
+
+.card--aspect-16-9 .card__media{
+  aspect-ratio:16/9;
+}
+
+@keyframes card-focus-animation{
+  0%{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:4px;
+    outline-width:6px;
+  }
+  to{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:0;
+    outline-width:2px;
+  }
+}
 .carousel{
   position:relative;
 }

package/dist/bundles/skin-headless.css

@@ -1104,6 +1104,161 @@ button.btn--floating-label .btn__floating-label--inline{
   border-left-color:var(--btn-primary-border-color, var(--color-stroke-accent));
   border-right-color:var(--primary-border-split-color, var(--color-stroke-subtle));
 }
+
+.card{
+  background-color:var(--color-background-secondary);
+  border:none;
+  border-radius:var(--border-radius-150);
+  color:var(--color-foreground-primary);
+  display:flex;
+  flex-direction:column;
+  max-width:400px;
+  min-width:200px;
+  outline:6px solid transparent;
+  outline-offset:4px;
+  padding-block-end:var(--spacing-150);
+}
+
+.card--outlined{
+  background-color:inherit;
+  border:1px solid var(--color-stroke-subtle);
+}
+
+a.card{
+  color:inherit;
+  text-decoration:none;
+}
+
+button.card{
+  font-size:inherit;
+  line-height:inherit;
+  padding:0;
+  padding-block-end:var(--spacing-150);
+  text-align:start;
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-quick-enter), box-shadow var(--motion-duration-medium-3) var(--motion-easing-quick-enter);
+}
+
+.card[disabled],.card[href=""]{
+  filter:grayscale(1);
+  opacity:.5;
+  pointer-events:none;
+}
+
+button.card:hover{
+  cursor:pointer;
+}
+
+.card:hover .card__hero-image{
+  transform:scale3d(1.01, 1.01, 1);
+}
+
+.card:focus-visible{
+  animation:card-focus-animation var(--motion-duration-short-3) var(--motion-easing-quick-enter) forwards;
+}
+
+.card__media{
+  aspect-ratio:1/1;
+  margin:var(--spacing-150);
+  margin-block-end:var(--spacing-200);
+  overflow:hidden;
+}
+
+.card__hero-image,.card__media{
+  border-radius:var(--border-radius-100);
+}
+
+.card__hero-image{
+  display:block;
+  height:100%;
+  object-fit:cover;
+  transition:transform var(--motion-duration-long-3) var(--motion-easing-quick-enter);
+  width:100%;
+}
+
+.card--full-hero .card__hero-image,.card--full-hero .card__media{
+  border-bottom-left-radius:0;
+  border-bottom-right-radius:0;
+}
+
+.card__main{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  margin-inline:var(--spacing-150);
+}
+
+.card__overline{
+  align-items:center;
+  display:flex;
+  font-weight:700;
+  gap:var(--spacing-100);
+  margin-block-end:var(--spacing-100);
+}
+
+.card__title{
+  font-size:var(--font-size-large-1);
+  font-weight:700;
+  margin:0;
+  margin-block-end:var(--spacing-50);
+}
+
+.card__description{
+  flex:1;
+}
+
+.card__action{
+  margin-block-start:var(--spacing-200);
+}
+
+.card--horizontal{
+  flex-direction:row;
+  max-width:100%;
+  width:100%;
+}
+
+.card--horizontal .card__media{
+  aspect-ratio:1/1;
+  margin-block-end:0;
+  max-width:160px;
+  min-width:90px;
+  width:25%;
+}
+
+.card--horizontal .card__hero-image{
+  aspect-ratio:1/1;
+  height:auto;
+}
+
+.card--horizontal .card__main{
+  margin-block-start:var(--spacing-150);
+  margin-inline-start:0;
+}
+
+.card--full-hero .card__media{
+  margin:0;
+  margin-block-end:var(--spacing-200);
+}
+
+.card--aspect-5-4 .card__media{
+  aspect-ratio:5/4;
+}
+
+.card--aspect-16-9 .card__media{
+  aspect-ratio:16/9;
+}
+
+@keyframes card-focus-animation{
+  0%{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:4px;
+    outline-width:6px;
+  }
+  to{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:0;
+    outline-width:2px;
+  }
+}
 .carousel{
   position:relative;
 }

package/dist/card/card.css

@@ -0,0 +1,163 @@
+.card {
+    background-color: var(--color-background-secondary);
+    border: none;
+    border-radius: var(--border-radius-150);
+    color: var(--color-foreground-primary);
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    min-width: 200px;
+    outline: 6px solid transparent;
+    outline-offset: 4px;
+    padding-block-end: var(--spacing-150);
+}
+
+.card--outlined {
+    background-color: inherit;
+    border: 1px solid var(--color-stroke-subtle);
+}
+
+a.card {
+    color: inherit;
+    text-decoration: none;
+}
+
+button.card {
+    font-size: inherit;
+    line-height: inherit;
+    padding: 0;
+    padding-block-end: var(--spacing-150);
+    text-align: start;
+    transition:
+        transform var(--motion-duration-medium-3)
+            var(--motion-easing-quick-enter),
+        box-shadow var(--motion-duration-medium-3)
+            var(--motion-easing-quick-enter);
+}
+
+.card[disabled],
+.card[href=""] {
+    filter: grayscale(1);
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+button.card:hover {
+    cursor: pointer;
+}
+
+.card:hover .card__hero-image {
+    transform: scale3d(1.01, 1.01, 1);
+}
+
+.card:focus-visible {
+    animation: card-focus-animation var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter) forwards;
+}
+
+.card__media {
+    aspect-ratio: 1/1;
+    margin: var(--spacing-150);
+    margin-block-end: var(--spacing-200);
+    overflow: hidden;
+}
+
+.card__hero-image,
+.card__media {
+    border-radius: var(--border-radius-100);
+}
+
+.card__hero-image {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    transition: transform var(--motion-duration-long-3)
+        var(--motion-easing-quick-enter);
+    width: 100%;
+}
+
+.card--full-hero .card__hero-image,
+.card--full-hero .card__media {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.card__main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    margin-inline: var(--spacing-150);
+}
+
+.card__overline {
+    align-items: center;
+    display: flex;
+    font-weight: 700;
+    gap: var(--spacing-100);
+    margin-block-end: var(--spacing-100);
+}
+
+.card__title {
+    font-size: var(--font-size-large-1);
+    font-weight: 700;
+    margin: 0;
+    margin-block-end: var(--spacing-50);
+}
+
+.card__description {
+    flex: 1;
+}
+
+.card__action {
+    margin-block-start: var(--spacing-200);
+}
+
+.card--horizontal {
+    flex-direction: row;
+    max-width: 100%;
+    width: 100%;
+}
+
+.card--horizontal .card__media {
+    aspect-ratio: 1/1;
+    margin-block-end: 0;
+    max-width: 160px;
+    min-width: 90px;
+    width: 25%;
+}
+
+.card--horizontal .card__hero-image {
+    aspect-ratio: 1/1;
+    height: auto;
+}
+
+.card--horizontal .card__main {
+    margin-block-start: var(--spacing-150);
+    margin-inline-start: 0;
+}
+
+.card--full-hero .card__media {
+    margin: 0;
+    margin-block-end: var(--spacing-200);
+}
+
+.card--aspect-5-4 .card__media {
+    aspect-ratio: 5/4;
+}
+
+.card--aspect-16-9 .card__media {
+    aspect-ratio: 16/9;
+}
+
+@keyframes card-focus-animation {
+    0% {
+        outline-color: var(--color-stroke-accent);
+        outline-offset: 4px;
+        outline-width: 6px;
+    }
+    to {
+        outline-color: var(--color-stroke-accent);
+        outline-offset: 0;
+        outline-width: 2px;
+    }
+}

package/index.browser.json

@@ -7,6 +7,7 @@
     "require: ./breadcrumbs.js",
     "require: ./button.js",
     "require: ./calendar.js",
+    "require: ./card.js",
     "require: ./carousel.js",
     "require: ./ccd.js",
     "require: ./chart-legend.js",

package/index.css

@@ -5,6 +5,7 @@
 @import "./breadcrumbs.css";
 @import "./button.css";
 @import "./calendar.css";
+@import "./card.css";
 @import "./carousel.css";
 @import "./ccd.css";
 @import "./chart-legend.css";

package/index.js

@@ -5,6 +5,7 @@ require('./badge.js');
 require('./breadcrumbs.js');
 require('./button.js');
 require('./calendar.js');
+require('./card.js');
 require('./carousel.js');
 require('./ccd.js');
 require('./chart-legend.js');

package/index.mjs

@@ -5,6 +5,7 @@ import './dist/badge/badge.css';
 import './dist/breadcrumbs/breadcrumbs.css';
 import './dist/button/button.css';
 import './dist/calendar/calendar.css';
+import './dist/card/card.css';
 import './dist/carousel/carousel.css';
 import './dist/ccd/ccd.css';
 import './dist/chart-legend/chart-legend.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.9.0",
+    "version": "19.10.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",