@chinggis.systems/collection-ui 1.0.0 → 1.0.2

package/dist/styles.css

@@ -3,19 +3,31 @@
 
 .collection-ui {
   --collection-ui-bg: transparent;
-  --collection-ui-band-bg: rgb(0 0 0 / 4%);
+  --collection-ui-band-bg: var(--color-fg-alt, rgb(0 0 0 / 4%));
   --collection-ui-card-bg: transparent;
-  --collection-ui-fg: inherit;
-  --collection-ui-muted: color-mix(in srgb, currentColor 62%, transparent);
-  --collection-ui-link: #0f79d0;
-  --collection-ui-button-bg: #111827;
-  --collection-ui-button-fg: #fff;
-  --collection-ui-special-bg: rgb(0 0 0 / 4%);
+  --collection-ui-fg: var(--color-t-default, inherit);
+  --collection-ui-muted: var(--color-t-muted, color-mix(in srgb, currentColor 62%, transparent));
+  --collection-ui-link: var(--color-link, #0f79d0);
+  --collection-ui-button-bg: #f6a0a8;
+  --collection-ui-button-fg: #151515;
+  --collection-ui-special-bg: var(--color-fg-alt, rgb(0 0 0 / 4%));
   --collection-ui-special-panel: transparent;
   color: var(--collection-ui-fg);
   min-width: 0;
 }
 
+.collection-ui--ecommerce {
+  --collection-ui-bg: var(--color-bg-default, transparent);
+  --collection-ui-band-bg: var(--color-fg-main, transparent);
+  --collection-ui-fg: var(--color-t-default, inherit);
+  --collection-ui-muted: var(--color-t-muted, color-mix(in srgb, currentColor 62%, transparent));
+  --collection-ui-link: var(--color-link, #0f79d0);
+  --collection-ui-button-bg: #6e0b0f;
+  --collection-ui-button-fg: var(--color-fg-main, #151515);
+  --collection-ui-special-bg: var(--color-fg-main, transparent);
+  --collection-ui-special-panel: transparent;
+}
+
 .collection-ui--dark {
   --collection-ui-bg: #141515;
   --collection-ui-band-bg: #141515;
@@ -30,6 +42,10 @@
   background: var(--collection-ui-bg);
 }
 
+.dark .collection-ui--ecommerce {
+  --collection-ui-button-bg: #f6a2a5;
+}
+
 .collection-ui--preview {
   --collection-ui-preview-max-height: 420px;
   border-radius: 6px;
@@ -55,20 +71,23 @@
 
 .collection-ui-container {
   margin-inline: auto;
-  max-width: 1200px;
+  max-width: 1120px;
+  min-width: 0;
   padding-inline: 16px;
   width: 100%;
 }
 
 .collection-ui-container--wide {
-  max-width: 1280px;
+  max-width: 1536px;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
 .collection-ui-title {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-bottom: 8px;
+  gap: 0;
+  margin-bottom: 4px;
 }
 
 .collection-ui-title__row {
@@ -78,9 +97,36 @@
   justify-content: space-between;
 }
 
+.collection-ui-title__actions {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 16px;
+}
+
+.collection-ui-title__controls {
+  align-items: center;
+  display: none;
+  gap: 4px;
+}
+
+.collection-ui-title__controls button {
+  align-items: center;
+  background: var(--color-fg-main, transparent);
+  border: 2px solid var(--color-border-main, rgb(255 255 255 / 12%));
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+}
+
 .collection-ui-title__heading {
   font-size: 1.125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.35;
   margin: 0;
 }
@@ -93,17 +139,31 @@
 
 .collection-ui-title__description {
   color: var(--collection-ui-muted);
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   line-height: 1.45;
   margin: 0;
 }
 
-.collection-ui-title__link,
-.collection-ui-featured-card__link {
+.collection-ui .collection-ui-title__link,
+.collection-ui .collection-ui-featured-card__link {
   color: var(--collection-ui-link);
   flex-shrink: 0;
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 400;
+}
+
+.collection-ui-title__link {
+  display: none;
+}
+
+.collection-ui-horizontal .collection-ui-title__link {
+  display: block;
+}
+
+.collection-ui-horizontal,
+.collection-ui-grid {
+  min-width: 0;
+  position: relative;
 }
 
 .collection-ui-scroll {
@@ -129,12 +189,12 @@
 .collection-ui-carousel__track {
   margin-inline: -16px;
   overflow: hidden;
-  padding-inline: 16px;
+  padding: 4px 16px 0;
 }
 
 .collection-ui-carousel__slide {
   height: auto;
-  padding-top: 16px;
+  padding-top: 12px;
   width: max-content;
 }
 
@@ -169,33 +229,86 @@
   align-items: center;
   background: linear-gradient(135deg, #1f2937, #111827);
   border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 6px;
-  color: white;
+  border-radius: 2px;
+  color: rgb(212 212 212);
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  font-size: 0.875rem;
+  font-weight: 500;
   height: 266px;
   justify-content: center;
+  overflow: hidden;
   padding: 24px;
+  position: relative;
+  transition: border-color 300ms ease, color 300ms ease;
   width: 180px;
 }
 
+.collection-ui-view-all:hover {
+  border-color: rgb(255 255 255 / 20%);
+  color: white;
+}
+
+.collection-ui-view-all::before {
+  background: linear-gradient(135deg, rgb(14 165 233 / 10%), rgb(168 85 247 / 10%));
+  content: "";
+  filter: blur(16px);
+  inset: 0;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 500ms ease;
+}
+
+.collection-ui-view-all:hover::before {
+  opacity: 1;
+}
+
 .collection-ui-view-all__icon {
   align-items: center;
-  background: rgb(255 255 255 / 10%);
+  background: rgb(38 38 38);
   border-radius: 999px;
+  color: rgb(56 189 248);
   display: inline-flex;
   font-size: 1.5rem;
   height: 56px;
   justify-content: center;
+  margin-bottom: 16px;
+  position: relative;
+  transition: background-color 300ms ease, transform 200ms ease;
   width: 56px;
 }
 
+.collection-ui-view-all:hover .collection-ui-view-all__icon {
+  background: rgb(14 165 233 / 20%);
+  transform: translateX(4px);
+}
+
 .collection-ui-vertical__grid {
   display: grid;
   gap: 16px;
 }
 
+.collection-ui-grid__items {
+  display: grid;
+  gap: 32px 16px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding-top: 16px;
+}
+
+.collection-ui-grid__item {
+  min-width: 0;
+}
+
+.collection-ui-grid__item .collection-ui-card,
+.collection-ui-grid__view-all {
+  width: 100%;
+}
+
+.collection-ui-grid__item .collection-ui-card__media,
+.collection-ui-grid__view-all {
+  min-height: 168px;
+}
+
 .collection-ui-item {
   align-items: flex-start;
   display: flex;
@@ -244,21 +357,21 @@
   flex-direction: column;
   height: 100%;
   justify-content: flex-end;
-  width: 180px;
+  width: 112px;
 }
 
 .collection-ui-card__media {
   align-items: flex-end;
   display: flex;
   justify-content: center;
-  min-height: 266px;
+  min-height: 144px;
 }
 
 .collection-ui-card__body {
   display: flex;
-  gap: 12px;
-  min-height: 112px;
-  padding-top: 8px;
+  gap: 8px;
+  min-height: 80px;
+  padding-top: 6px;
 }
 
 .collection-ui-card__rank,
@@ -272,7 +385,7 @@
 .collection-ui-row-item__title {
   color: var(--collection-ui-link);
   display: -webkit-box;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 500;
   line-height: 1.2;
   margin: 0 0 4px;
@@ -285,7 +398,7 @@
 .collection-ui-row-item__author {
   color: var(--collection-ui-muted);
   display: -webkit-box;
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   line-height: 1.35;
   margin: 0;
   overflow: hidden;
@@ -440,7 +553,8 @@
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  font-weight: 600;
+  font-size: 0.75rem;
+  font-weight: 500;
   gap: 4px;
   margin-top: 8px;
 }
@@ -488,6 +602,7 @@
   align-items: flex-start;
   display: flex;
   gap: 24px;
+  max-width: 420px;
 }
 
 .collection-ui-row-item__media {
@@ -504,9 +619,9 @@
   align-items: center;
   background: var(--collection-ui-special-panel);
   display: grid;
-  gap: 32px;
+  gap: 24px;
   justify-items: center;
-  padding: clamp(20px, 3vw, 32px);
+  padding: 0;
   width: 100%;
 }
 
@@ -533,7 +648,7 @@
 
 .collection-ui-special-item__content h3 {
   font-size: 1.5rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.25;
   margin: 0 0 16px;
   text-align: center;
@@ -562,6 +677,10 @@
   padding-block: 32px;
 }
 
+.collection-ui--ecommerce .collection-ui-band {
+  color: var(--collection-ui-fg);
+}
+
 .collection-ui-special-section {
   background: var(--collection-ui-special-bg);
   padding-block: 40px;
@@ -579,34 +698,43 @@
 .collection-ui-banner {
   align-items: center;
   display: grid;
-  gap: 24px;
+  gap: 0;
   grid-template-columns: 1fr;
 }
 
+.collection-ui-banner-carousel {
+  min-width: 0;
+}
+
+.collection-ui-banner-carousel__slide {
+  height: auto;
+}
+
 .collection-ui-banner__copy {
-  padding-top: 16px;
+  padding: 16px;
 }
 
 .collection-ui-banner__eyebrow {
   border-bottom: 2px solid currentColor;
   display: inline-block;
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: 1.125rem;
+  font-weight: 500;
   margin-bottom: 24px;
   padding-bottom: 4px;
 }
 
 .collection-ui-banner__title {
-  font-size: clamp(1.5rem, 2vw, 2.5rem);
-  font-weight: 600;
+  font-size: clamp(1.5rem, 2vw, 2.25rem);
+  font-weight: 500;
   line-height: 1.15;
   margin: 0 0 16px;
 }
 
 .collection-ui-banner__description {
-  font-size: 1rem;
-  line-height: 1.65;
+  font-size: 0.875rem;
+  line-height: 1.55;
   margin: 0;
+  text-align: justify;
 }
 
 .collection-ui-banner__image,
@@ -618,17 +746,101 @@
   width: 100%;
 }
 
-.collection-ui-button {
+.collection-ui-banner__media-link {
+  border-radius: 8px;
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.collection-ui-banner__image--zoom {
+  transform: scale(1);
+  transition: transform 5000ms linear;
+  will-change: transform;
+}
+
+.collection-ui-banner-carousel .swiper-slide-active .collection-ui-banner__image--zoom {
+  transform: scale(1.06);
+}
+
+.collection-ui-banner-source {
   align-items: center;
-  background: var(--collection-ui-button-bg);
+  background: #030712;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  min-height: 260px;
+  overflow: hidden;
+  padding: 32px;
+  position: relative;
+}
+
+.collection-ui-banner-source__background {
+  height: 100%;
+  inset: 0;
+  object-fit: cover;
+  opacity: 0.6;
+  position: absolute;
+  width: 100%;
+}
+
+.collection-ui-banner-source__overlay {
+  background: linear-gradient(135deg, rgb(0 0 0 / 40%), rgb(255 255 255 / 10%), rgb(0 0 0 / 55%));
+  inset: 0;
+  position: absolute;
+}
+
+.collection-ui-banner-source__frame {
+  align-items: center;
+  background: rgb(255 255 255 / 15%);
   border-radius: 6px;
+  box-shadow: 0 24px 80px rgb(0 0 0 / 35%);
+  display: flex;
+  height: 210px;
+  justify-content: center;
+  padding: 12px;
+  position: relative;
+  width: 150px;
+}
+
+@supports (backdrop-filter: blur(12px)) {
+  .collection-ui-banner-source__frame {
+    backdrop-filter: blur(12px);
+  }
+}
+
+.collection-ui-banner-source__foreground {
+  filter: drop-shadow(0 22px 28px rgb(0 0 0 / 35%));
+  height: 100%;
+  object-fit: contain;
+  width: 100%;
+}
+
+.collection-ui .collection-ui-button {
+  align-items: center;
+  background: var(--collection-ui-button-bg);
+  border-radius: 8px;
   color: var(--collection-ui-button-fg);
   display: inline-flex;
-  font-weight: 600;
+  font-weight: 500;
   justify-content: center;
-  margin-top: 20px;
-  min-height: 44px;
-  padding: 10px 20px;
+  margin-bottom: 32px;
+  margin-top: 16px;
+  min-height: 48px;
+  min-width: 152px;
+  padding: 10px 32px;
+  text-align: center;
+  transition: background-color 160ms ease, transform 160ms ease;
+  white-space: nowrap;
+}
+
+.collection-ui-button:hover {
+  transform: scale(1.04);
+}
+
+.collection-ui-button::after {
+  content: "→";
+  margin-left: 0.5rem;
 }
 
 .collection-ui-special {
@@ -647,12 +859,12 @@
 }
 
 .collection-ui-featured-card__body {
-  padding-top: 16px;
+  padding: 16px 0 0;
 }
 
 .collection-ui-featured-card__title {
   font-size: 1.125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.35;
   margin: 0 0 10px;
 }
@@ -667,14 +879,32 @@
   text-align: center;
 }
 
+.collection-ui-image-grid .collection-ui-title {
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 40px;
+}
+
 .collection-ui-image-grid .collection-ui-title__row {
   justify-content: center;
 }
 
+.collection-ui-image-grid .collection-ui-title__heading {
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+.collection-ui-image-grid .collection-ui-title__description {
+  color: var(--collection-ui-fg);
+  font-size: 1rem;
+  font-style: italic;
+  font-weight: 300;
+}
+
 .collection-ui-image-grid__items {
   align-items: center;
   display: grid;
-  gap: 32px;
+  gap: 28px;
   grid-template-columns: repeat(var(--collection-ui-columns, 2), minmax(0, 1fr));
   justify-content: center;
   margin-top: 32px;
@@ -693,6 +923,15 @@
   object-fit: cover;
 }
 
+.collection-ui-image-grid--circle .collection-ui-image-grid__image {
+  height: 128px;
+  width: 128px;
+}
+
+.collection-ui-image-grid--block .collection-ui-image-grid__image {
+  max-height: 96px;
+}
+
 .collection-ui-image-grid__image--circle {
   aspect-ratio: 1;
   border-radius: 999px;
@@ -713,10 +952,18 @@
 }
 
 @media (min-width: 768px) {
+  .collection-ui-title__controls {
+    display: flex;
+  }
+
   .collection-ui-container {
     padding-inline: 24px;
   }
 
+  .collection-ui-grid__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .collection-ui-vertical__grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -726,7 +973,32 @@
   }
 
   .collection-ui-banner {
-    grid-template-columns: minmax(240px, 0.35fr) minmax(0, 0.65fr);
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    padding: 16px;
+  }
+
+  .collection-ui-banner__copy {
+    grid-column: span 4 / span 4;
+    padding: 0 32px 24px 0;
+  }
+
+  .collection-ui-banner > a {
+    display: block;
+    grid-column: span 8 / span 8;
+  }
+
+  .collection-ui-banner-source {
+    min-height: 420px;
+    padding: 48px;
+  }
+
+  .collection-ui-banner-source__frame {
+    height: 420px;
+    width: 300px;
+  }
+
+  .collection-ui-banner__eyebrow {
+    font-size: 0.875rem;
   }
 
   .collection-ui-featured {
@@ -748,7 +1020,7 @@
   }
 
   .collection-ui-special-item {
-    grid-template-columns: minmax(260px, 0.38fr) minmax(0, 0.42fr) minmax(180px, 0.2fr);
+    grid-template-columns: minmax(160px, 0.28fr) minmax(0, 0.52fr) minmax(156px, 0.2fr);
     justify-items: stretch;
   }
 
@@ -761,12 +1033,21 @@
     flex-wrap: wrap;
   }
 
+  .collection-ui-image-grid--circle .collection-ui-image-grid__items {
+    flex-wrap: nowrap;
+    gap: clamp(24px, 4vw, 56px);
+  }
+
   .collection-ui-image-grid--block .collection-ui-image-grid__items {
     gap: 16px;
   }
 }
 
 @media (min-width: 1200px) {
+  .collection-ui-grid__items {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
   .collection-ui-vertical__grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }