@revikornmann/muka-ui 0.6.0 → 0.8.0

package/dist/styles/components/Thumbnail.css

@@ -0,0 +1,171 @@
+/* Thumbnail Component Styles - Using Muka Design Tokens */
+
+.muka-thumbnail {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* The frame carries the border, background and shape clip. Keeping it separate
+   from the root lets the remove (×) button sit outside the clip (needed for the
+   circular/ellipse shape, whose corners would otherwise clip the button). */
+.muka-thumbnail__frame {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border: var(--border-width-regular, 1px) solid var(--color-black-alpha-3);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--color-surface-level1);
+}
+
+/* ─── Shapes ──────────────────────────────────────────── */
+.muka-thumbnail--4-3 {
+  width: 160px;
+  height: 120px;
+}
+
+.muka-thumbnail--1-1 {
+  width: 120px;
+  height: 120px;
+}
+
+.muka-thumbnail--ellipse {
+  width: 120px;
+  height: 120px;
+}
+
+.muka-thumbnail--ellipse .muka-thumbnail__frame {
+  border-radius: var(--border-radius-full);
+}
+
+/* Image fills the frame, cropped to cover. Sits at scale(1) by default so the
+   interactive hover zoom has a clean origin. */
+.muka-thumbnail__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transform-origin: center;
+  /* Micro-interaction: hover zoom eases out over the "micro" duration. */
+  transition: transform var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+/* ─── Interactive (click-to-enlarge) ──────────────────── */
+.muka-thumbnail__trigger {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.muka-thumbnail__trigger:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* On hover the image scales up ~8px (160px → 168px) with an ease-out feel. */
+.muka-thumbnail--interactive:hover .muka-thumbnail__image {
+  transform: scale(1.05);
+}
+
+/* ─── Loading overlay + progress donut ────────────────── */
+.muka-thumbnail__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--dialog-color-backdrop);
+}
+
+.muka-thumbnail__progress {
+  width: 40px;
+  height: 40px;
+}
+
+/* ─── Error / corrupt state ───────────────────────────── */
+.muka-thumbnail--error .muka-thumbnail__frame {
+  background-color: var(--alias-color-state-error-muted);
+  border-color: var(--alias-color-state-error-default);
+}
+
+.muka-thumbnail__error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  text-align: center;
+}
+
+.muka-thumbnail__error-icon {
+  color: var(--alert-color-error-accent);
+}
+
+.muka-thumbnail__caption {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--alert-color-error-accent);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-size: var(--text-body-sm-regular-fontSize);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+/* ─── Remove (×) button ───────────────────────────────── */
+.muka-thumbnail__remove {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-2xl);
+  height: var(--size-2xl);
+  padding: 0;
+  color: var(--button-color-tertiary-foreground-default);
+  background-color: var(--button-color-tertiary-background-default);
+  border: var(--border-width-regular, 1px) solid var(--button-color-tertiary-border-default);
+  border-radius: var(--border-radius-lg);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-micro) var(--motion-easing-enter),
+    border-color var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+.muka-thumbnail__remove:hover {
+  color: var(--button-color-tertiary-foreground-hover);
+  background-color: var(--button-color-tertiary-background-hover);
+  border-color: var(--button-color-tertiary-border-hover);
+}
+
+.muka-thumbnail__remove:active {
+  color: var(--button-color-tertiary-foreground-pressed);
+  background-color: var(--button-color-tertiary-background-pressed);
+  border-color: var(--button-color-tertiary-border-pressed);
+}
+
+.muka-thumbnail__remove:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .muka-thumbnail__image,
+  .muka-thumbnail__remove {
+    transition: none;
+  }
+
+  .muka-thumbnail--interactive:hover .muka-thumbnail__image {
+    transform: none;
+  }
+}