ui-svelte 0.2.11 → 0.2.13

package/dist/display/css/section.css

@@ -15,75 +15,99 @@
 		}
 
 		.section-body {
-			@apply w-full p-4 md:p-6;
+			@apply column gap-4 md:gap-6 w-full p-4 md:p-6;
 		}
-
-		.section-body:not(.prose) {
-			@apply column gap-4 md:gap-6;
-		}
-	}
-
-	.section.is-primary {
-		@apply bg-on-primary text-primary;
-	}
-
-	.section.is-primary.is-solid {
-		@apply bg-primary text-on-primary;
-	}
-
-	.section.is-secondary {
-		@apply bg-on-secondary text-secondary;
-	}
-
-	.section.is-secondary.is-solid {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.section.is-muted {
-		@apply bg-muted text-on-muted;
-	}
-
-	.section.is-muted.is-solid {
-		@apply bg-on-muted text-muted;
-	}
-
-	.section.is-success {
-		@apply bg-on-success text-success;
-	}
-
-	.section.is-success.is-solid {
-		@apply bg-success text-on-success;
-	}
-
-	.section.is-info {
-		@apply bg-on-info text-info;
-	}
-
-	.section.is-info.is-solid {
-		@apply bg-info text-on-info;
-	}
-
-	.section.is-warning {
-		@apply bg-on-warning text-warning;
-	}
-
-	.section.is-warning.is-solid {
-		@apply bg-warning text-on-warning;
 	}
 
-	.section.is-danger {
-		@apply bg-on-danger text-danger;
-	}
-
-	.section.is-danger.is-solid {
-		@apply bg-danger text-on-danger;
-	}
+	.section {
+		&.is-soft {
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-danger text-danger;
+			}
+		}
 
-	.section.is-surface {
-		@apply bg-surface text-on-surface;
-	}
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
+		}
 
-	.section.is-ghost {
-		@apply bg-transparent;
+		&.is-ghost {
+			&.is-primary {
+				@apply bg-transparent text-primary;
+			}
+			&.is-secondary {
+				@apply bg-transparent text-secondary;
+			}
+			&.is-muted {
+				@apply bg-transparent text-on-muted;
+			}
+			&.is-background {
+				@apply bg-transparent text-on-background;
+			}
+			&.is-surface {
+				@apply bg-transparent text-on-surface;
+			}
+			&.is-success {
+				@apply bg-transparent text-success;
+			}
+			&.is-info {
+				@apply bg-transparent text-info;
+			}
+			&.is-warning {
+				@apply bg-transparent text-warning;
+			}
+			&.is-danger {
+				@apply bg-transparent text-danger;
+			}
+		}
 	}
 }

package/dist/display/css/skeleton.css

@@ -0,0 +1,58 @@
+@layer components {
+	.skeleton {
+		@apply bg-muted rounded-md;
+		will-change: background-position;
+
+		&.is-text {
+			@apply h-4 w-full rounded-md;
+		}
+
+		&.is-circular {
+			@apply rounded-full aspect-square;
+		}
+
+		&.is-rectangular {
+			@apply rounded-none;
+		}
+
+		&.is-rounded {
+			@apply rounded-box;
+		}
+
+		&.is-wave {
+			animation: skeleton-wave 1.8s ease-in-out infinite;
+			background-image: linear-gradient(
+				105deg,
+				transparent 0% 40%,
+				var(--color-background) 50%,
+				transparent 60% 100%
+			);
+			background-size: 200% auto;
+			background-repeat: no-repeat;
+			background-position-x: -50%;
+		}
+
+		&.is-pulse {
+			animation: skeleton-pulse 1.5s ease-in-out infinite;
+		}
+	}
+
+	@keyframes skeleton-wave {
+		0% {
+			background-position: 150%;
+		}
+		100% {
+			background-position: -50%;
+		}
+	}
+
+	@keyframes skeleton-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.4;
+		}
+	}
+}