@asteby/storefront-react 0.19.0 → 0.21.0

package/dist/account.css

@@ -38,3 +38,365 @@
   cursor: pointer;
   font: inherit;
 }
+
+/*
+ * Order screens (<OrderList>, <OrderProgress>, <NextActionBar>, <ShipmentCard>, <InvoiceList>, <PendingPaymentCard>,
+ * <RefundList>). Optional and neutral: no brand colors, everything reads currentColor. Variables:
+ *   --sf-account-muted   secondary text            --sf-account-line   hairlines and card borders
+ *   --sf-account-gap     spacing between blocks    --sf-account-radius card radius
+ *   --sf-tone-done / --sf-tone-current / --sf-tone-problem / --sf-tone-muted   semantic tones (default: currentColor)
+ *   --sf-skeleton-height  height of a loading card (fixed: no layout shift)
+ * Contrast of the tones is the store's responsibility: they are applied to TEXT, so pick colors with 4.5:1 or better.
+ */
+[data-sf-orders-list],
+[data-sf-pending] ul,
+[data-sf-invoice-list] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--sf-account-gap, 1rem);
+}
+[data-sf-order],
+[data-sf-shipment],
+[data-sf-voucher],
+[data-sf-invoice-doc],
+[data-sf-refund],
+[data-sf-payment] {
+  border: 1px solid var(--sf-account-line, color-mix(in srgb, currentColor 22%, transparent));
+  border-radius: var(--sf-account-radius, 0.5rem);
+  padding: var(--sf-account-gap, 1rem);
+}
+[data-sf-order] > header,
+[data-sf-shipment-header],
+[data-sf-voucher] > header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem 1rem;
+}
+[data-sf-order] h2,
+[data-sf-order] h3,
+[data-sf-order] h4 {
+  margin: 0;
+}
+[data-sf-order-meta],
+[data-sf-shipment-dates],
+[data-sf-invoice-note],
+[data-sf-voucher-expiry] {
+  color: var(--sf-account-muted, color-mix(in srgb, currentColor 72%, transparent));
+}
+[data-sf-tone='done'] {
+  color: var(--sf-tone-done, inherit);
+}
+[data-sf-tone='current'] {
+  color: var(--sf-tone-current, inherit);
+}
+[data-sf-tone='problem'] {
+  color: var(--sf-tone-problem, #b42318);
+  font-weight: 600;
+}
+[data-sf-tone='muted'] {
+  color: var(--sf-tone-muted, var(--sf-account-muted, inherit));
+}
+[data-sf-order-badge],
+[data-sf-shipment-state],
+[data-sf-voucher-badge] {
+  font-weight: 600;
+}
+
+/* progress: a vertical list on phones, a row from 40rem */
+[data-sf-progress-list] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+[data-sf-step] {
+  display: grid;
+  grid-template-columns: 1.5rem 1fr;
+  align-items: baseline;
+  column-gap: 0.5rem;
+}
+[data-sf-step] time {
+  grid-column: 2;
+  color: var(--sf-account-muted, color-mix(in srgb, currentColor 72%, transparent));
+  font-size: 0.875em;
+}
+[data-sf-step-state='pending'] {
+  color: var(--sf-account-muted, color-mix(in srgb, currentColor 72%, transparent));
+}
+[data-sf-step-state='current'] [data-sf-step-label],
+[data-sf-step-state='problem'] [data-sf-step-label] {
+  font-weight: 700;
+}
+[data-sf-step-state='problem'] {
+  color: var(--sf-tone-problem, #b42318);
+}
+@media (min-width: 40rem) {
+  [data-sf-progress-list] {
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+  }
+  [data-sf-step] {
+    grid-template-columns: 1fr;
+    justify-items: start;
+  }
+  [data-sf-step] time {
+    grid-column: 1;
+  }
+}
+
+/* actions: every target at least 44x44 (WCAG 2.5.5 AAA; 2.5.8 AA asks 24x24) */
+[data-sf-action-bar] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+}
+[data-sf-action],
+[data-sf-copy],
+[data-sf-retry],
+[data-sf-shipment-toggle],
+[data-sf-shipment-track],
+[data-sf-shipment-label],
+[data-sf-invoice-download],
+[data-sf-voucher-print],
+[data-sf-voucher-download],
+[data-sf-orders-more] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  min-width: 44px;
+  padding-inline: 0.75rem;
+}
+[data-sf-action]:focus-visible,
+[data-sf-copy]:focus-visible,
+[data-sf-retry]:focus-visible,
+[data-sf-order-link]:focus-visible,
+[data-sf-shipment-toggle]:focus-visible,
+[data-sf-shipment-label]:focus-visible,
+[data-sf-shipment-track]:focus-visible,
+[data-sf-invoice-download]:focus-visible,
+[data-sf-voucher-print]:focus-visible,
+[data-sf-voucher-download]:focus-visible,
+[data-sf-orders-more]:focus-visible {
+  outline: 3px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* shipment events */
+[data-sf-shipment-events] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+[data-sf-event-description],
+[data-sf-event-location] {
+  color: var(--sf-account-muted, color-mix(in srgb, currentColor 72%, transparent));
+}
+
+/* voucher */
+[data-sf-voucher-value] {
+  font: 700 1.25rem/1.3 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  letter-spacing: 0.04em;
+  overflow-wrap: anywhere;
+  user-select: all;
+}
+[data-sf-voucher-barcode] {
+  overflow-x: auto;
+  background: #fff;
+  padding: 0.5rem;
+}
+[data-sf-voucher-barcode] svg {
+  display: block;
+  margin-inline: auto;
+  max-width: 100%;
+  height: auto;
+}
+[data-sf-voucher-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+}
+
+/* loading: fixed height so nothing jumps when the real cards arrive */
+[data-sf-skeleton] {
+  min-height: var(--sf-skeleton-height, 11rem);
+  border-radius: var(--sf-account-radius, 0.5rem);
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  animation: sf-account-pulse 1.4s ease-in-out infinite;
+}
+@keyframes sf-account-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-sf-skeleton] {
+    animation: none;
+  }
+}
+
+/* products of an order card (`OrderProductsStack`); the line list is `OrderLines` (`ProductPreview` rows) */
+[data-sf-order-products] {
+  margin-block: 0.5rem 0.25rem;
+}
+[data-sf-order-lines-list] {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+[data-sf-order-line] {
+  padding-block: 0.75rem;
+}
+[data-sf-order-line] + [data-sf-order-line] {
+  border-top: 1px solid var(--sf-account-line, color-mix(in srgb, currentColor 14%, transparent));
+}
+
+/*
+ * <ProductThumb>, <ProductPreview>, <ProductThumbStack>: la foto del producto y la línea de producto de la tienda.
+ * CSS plano sobre los tokens de la tienda (--foreground, --background, --border, --muted-foreground, --radius); en tema
+ * oscuro la superficie y el brillo salen de color-mix, sin colores escritos aquí. Va incluido en cart.css, checkout.css,
+ * account.css y ui.css (misma regla, un solo origen: src/ui/product-preview.css).
+ */
+[data-sf-thumb] {
+  --_surface: color-mix(in srgb, var(--foreground, #111) 5%, var(--background, #fff));
+  position: relative;
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--sf-preview-size, 3.5rem);
+  aspect-ratio: var(--sf-preview-ratio, 1 / 1);
+  overflow: hidden;
+  border-radius: calc(var(--radius, 0.5rem) * 1.25);
+  background: var(--_surface);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground, #111) 9%, transparent);
+  vertical-align: middle;
+}
+:root[data-theme="dark"] [data-sf-thumb] { --_surface: color-mix(in srgb, var(--foreground, #fff) 9%, var(--background, #111)); }
+[data-sf-thumb] > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  object-fit: contain;
+  padding: 6%;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms;
+}
+[data-sf-thumb][data-fit="cover"] > img { object-fit: cover; padding: 0; }
+/* Fotos sobre fondo blanco: se funden con la superficie en tema claro (no hay caja blanca dentro del marco). */
+[data-sf-thumb][data-fit="contain"] > img { mix-blend-mode: multiply; }
+:root[data-theme="dark"] [data-sf-thumb] > img { mix-blend-mode: normal; }
+[data-sf-thumb][data-state="loading"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--foreground, #111) 8%, transparent) 50%, transparent 80%);
+  background-size: 200% 100%;
+  animation: sf-thumb-shimmer 1.4s linear infinite;
+  pointer-events: none;
+}
+@keyframes sf-thumb-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
+[data-sf-thumb][data-zoom]:hover > img { transform: scale(1.07); }
+@media (prefers-reduced-motion: reduce) {
+  [data-sf-thumb][data-state="loading"]::before { animation: none; }
+  [data-sf-thumb] > img { transition: none; }
+  [data-sf-thumb][data-zoom]:hover > img { transform: none; }
+}
+
+[data-sf-thumb-fallback] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: color-mix(in srgb, var(--foreground, #111) 42%, transparent);
+  background: linear-gradient(145deg, color-mix(in srgb, var(--foreground, #111) 3%, transparent), color-mix(in srgb, var(--foreground, #111) 9%, transparent));
+}
+[data-sf-thumb-initial] {
+  font-size: calc(var(--sf-preview-size, 3.5rem) * 0.36);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+[data-sf-thumb-qty] {
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  background: var(--sf-summary-qty-bg, color-mix(in srgb, var(--foreground, #111) 78%, transparent));
+  color: var(--sf-summary-qty-fg, var(--background, #fff));
+}
+
+/* Línea de producto: foto | texto | importe. */
+[data-sf-preview] {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  min-width: 0;
+}
+[data-sf-preview][data-missing] [data-sf-preview-name] { font-style: italic; color: var(--muted-foreground, color-mix(in srgb, currentColor 60%, transparent)); }
+[data-sf-preview-media] { flex: none; display: inline-flex; }
+[data-sf-preview-body] { display: grid; flex: 1 1 auto; gap: 0.125rem; min-width: 0; }
+[data-sf-preview-name] {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+[data-sf-preview-name] a { color: inherit; text-decoration: none; }
+[data-sf-preview-name] a:hover { text-decoration: underline; }
+[data-sf-preview-variant],
+[data-sf-preview-sku],
+[data-sf-preview-meta] {
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  color: var(--muted-foreground, color-mix(in srgb, currentColor 66%, transparent));
+}
+[data-sf-preview-sku] { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
+[data-sf-preview-total] {
+  flex: none;
+  align-self: flex-start;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* Fotos apiladas (tarjeta de pedido). */
+[data-sf-thumb-stack] { display: inline-flex; align-items: center; }
+[data-sf-thumb-stack] > * { box-shadow: 0 0 0 2px var(--card, var(--background, #fff)), inset 0 0 0 1px color-mix(in srgb, var(--foreground, #111) 9%, transparent); }
+[data-sf-thumb-stack] > * + * { margin-inline-start: -0.625rem; }
+[data-sf-thumb-more] {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--sf-preview-size, 2.75rem);
+  aspect-ratio: 1 / 1;
+  border-radius: calc(var(--radius, 0.5rem) * 1.25);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted-foreground, color-mix(in srgb, currentColor 66%, transparent));
+  background: color-mix(in srgb, var(--foreground, #111) 7%, var(--background, #fff));
+}