ui-svelte 0.2.11 → 0.2.13

package/dist/display/css/accordion.css

@@ -2,63 +2,15 @@
 	.accordion {
 		@apply flex flex-col gap-2 w-full;
 
-		&.is-primary {
-			.accordion-item {
-				@apply border border-primary/20 rounded-lg overflow-hidden;
-				.accordion-header {
-					@apply bg-primary/5 hover:bg-primary/10;
-					&.is-open {
-						@apply bg-primary/10 text-primary;
-					}
-				}
-			}
-		}
-
-		&.is-secondary {
-			.accordion-item {
-				@apply border border-secondary/20 rounded-lg overflow-hidden;
-				.accordion-header {
-					@apply bg-secondary/5 hover:bg-secondary/10;
-					&.is-open {
-						@apply bg-secondary/10 text-secondary;
-					}
-				}
-			}
-		}
-
-		&.is-muted {
-			.accordion-item {
-				@apply border border-muted rounded-lg overflow-hidden;
-				.accordion-header {
-					@apply bg-muted/30 hover:bg-muted/50;
-					&.is-open {
-						@apply bg-muted text-on-muted;
-					}
-				}
-			}
-		}
-
-		&.is-outline {
-			.accordion-item {
-				@apply border border-muted rounded-lg overflow-hidden;
-				.accordion-header {
-					@apply hover:bg-muted/30;
-					&.is-open {
-						@apply bg-muted/20;
-					}
-				}
-			}
-		}
-
 		.accordion-item {
-			@apply transition-all duration-200;
+			@apply transition-all duration-300 rounded-lg overflow-hidden;
 
 			&.is-disabled {
 				@apply opacity-50 pointer-events-none;
 			}
 
 			.accordion-header {
-				@apply flex justify-between items-center gap-3 px-4 py-3 cursor-pointer select-none transition-all duration-200;
+				@apply flex justify-between items-center gap-3 px-4 py-3 cursor-pointer select-none transition-all duration-300;
 
 				.accordion-start {
 					@apply flex items-center gap-3 flex-1;
@@ -76,16 +28,17 @@
 					@apply flex items-center;
 
 					.accordion-arrow {
-						@apply size-5 transition-transform duration-200 text-on-muted;
+						@apply size-5 transition-transform duration-300 text-on-muted;
 						&.is-active {
 							@apply rotate-180;
+							color: inherit;
 						}
 					}
 				}
 
 				&:hover:not(.is-disabled) {
 					.accordion-arrow {
-						@apply text-on-surface;
+						color: inherit;
 					}
 				}
 			}
@@ -94,5 +47,349 @@
 				@apply px-4 py-3 text-sm text-on-surface/80;
 			}
 		}
+
+		&.is-ghost {
+			.accordion-item {
+				@apply border border-transparent;
+
+				.accordion-header {
+					.accordion-label {
+						@apply font-normal;
+					}
+
+					&:hover .accordion-label {
+						@apply font-semibold;
+					}
+				}
+
+				.accordion-header.is-open .accordion-label {
+					@apply font-semibold;
+				}
+			}
+
+			&.is-primary .accordion-item {
+				.accordion-header:hover {
+					@apply text-primary;
+				}
+				.accordion-header.is-open {
+					@apply text-primary;
+				}
+			}
+			&.is-secondary .accordion-item {
+				.accordion-header:hover {
+					@apply text-secondary;
+				}
+				.accordion-header.is-open {
+					@apply text-secondary;
+				}
+			}
+			&.is-muted .accordion-item {
+				.accordion-header:hover {
+					@apply text-on-muted;
+				}
+				.accordion-header.is-open {
+					@apply text-on-muted;
+				}
+			}
+			&.is-success .accordion-item {
+				.accordion-header:hover {
+					@apply text-success;
+				}
+				.accordion-header.is-open {
+					@apply text-success;
+				}
+			}
+			&.is-info .accordion-item {
+				.accordion-header:hover {
+					@apply text-info;
+				}
+				.accordion-header.is-open {
+					@apply text-info;
+				}
+			}
+			&.is-warning .accordion-item {
+				.accordion-header:hover {
+					@apply text-warning;
+				}
+				.accordion-header.is-open {
+					@apply text-warning;
+				}
+			}
+			&.is-danger .accordion-item {
+				.accordion-header:hover {
+					@apply text-danger;
+				}
+				.accordion-header.is-open {
+					@apply text-danger;
+				}
+			}
+			&.is-surface .accordion-item {
+				.accordion-header:hover {
+					@apply text-on-surface;
+				}
+				.accordion-header.is-open {
+					@apply text-on-surface;
+				}
+			}
+			&.is-background .accordion-item {
+				.accordion-header:hover {
+					@apply text-on-background;
+				}
+				.accordion-header.is-open {
+					@apply text-on-background;
+				}
+			}
+		}
+
+		&.is-soft {
+			.accordion-item {
+				@apply border border-transparent;
+			}
+
+			&.is-primary .accordion-item {
+				@apply bg-on-primary/50;
+				.accordion-header:hover {
+					@apply bg-on-primary/80;
+				}
+				.accordion-header.is-open {
+					@apply bg-on-primary text-primary;
+				}
+			}
+			&.is-secondary .accordion-item {
+				@apply bg-on-secondary/50;
+				.accordion-header:hover {
+					@apply bg-on-secondary/80;
+				}
+				.accordion-header.is-open {
+					@apply bg-on-secondary text-secondary;
+				}
+			}
+			&.is-muted .accordion-item {
+				@apply bg-muted/30;
+				.accordion-header:hover {
+					@apply bg-muted/50;
+				}
+				.accordion-header.is-open {
+					@apply bg-muted text-on-muted;
+				}
+			}
+			&.is-success .accordion-item {
+				@apply bg-on-success/50;
+				.accordion-header:hover {
+					@apply bg-on-success/80;
+				}
+				.accordion-header.is-open {
+					@apply bg-on-success text-success;
+				}
+			}
+			&.is-info .accordion-item {
+				@apply bg-on-info/50;
+				.accordion-header:hover {
+					@apply bg-on-info/80;
+				}
+				.accordion-header.is-open {
+					@apply bg-on-info text-info;
+				}
+			}
+			&.is-warning .accordion-item {
+				@apply bg-on-warning/50;
+				.accordion-header:hover {
+					@apply bg-on-warning/80;
+				}
+				.accordion-header.is-open {
+					@apply bg-on-warning text-warning;
+				}
+			}
+			&.is-danger .accordion-item {
+				@apply bg-on-danger/50;
+				.accordion-header:hover {
+					@apply bg-on-danger/80;
+				}
+				.accordion-header.is-open {
+					@apply bg-on-danger text-danger;
+				}
+			}
+			&.is-surface .accordion-item {
+				@apply bg-surface/50;
+				.accordion-header:hover {
+					@apply bg-surface/80;
+				}
+				.accordion-header.is-open {
+					@apply bg-surface text-on-surface;
+				}
+			}
+			&.is-background .accordion-item {
+				@apply bg-background/20;
+				.accordion-header:hover {
+					@apply bg-background/30;
+				}
+				.accordion-header.is-open {
+					@apply bg-background;
+				}
+			}
+		}
+
+		&.is-solid {
+			.accordion-item {
+				@apply border border-transparent;
+			}
+
+			&.is-primary .accordion-item {
+				.accordion-header:hover {
+					@apply bg-primary/20;
+				}
+				.accordion-header.is-open {
+					@apply bg-primary text-on-primary;
+				}
+			}
+			&.is-secondary .accordion-item {
+				.accordion-header:hover {
+					@apply bg-secondary/20;
+				}
+				.accordion-header.is-open {
+					@apply bg-secondary text-on-secondary;
+				}
+			}
+			&.is-muted .accordion-item {
+				.accordion-header:hover {
+					@apply bg-muted/50;
+				}
+				.accordion-header.is-open {
+					@apply bg-on-muted text-muted;
+				}
+			}
+			&.is-success .accordion-item {
+				.accordion-header:hover {
+					@apply bg-success/20;
+				}
+				.accordion-header.is-open {
+					@apply bg-success text-on-success;
+				}
+			}
+			&.is-info .accordion-item {
+				.accordion-header:hover {
+					@apply bg-info/20;
+				}
+				.accordion-header.is-open {
+					@apply bg-info text-on-info;
+				}
+			}
+			&.is-warning .accordion-item {
+				.accordion-header:hover {
+					@apply bg-warning/20;
+				}
+				.accordion-header.is-open {
+					@apply bg-warning text-on-warning;
+				}
+			}
+			&.is-danger .accordion-item {
+				.accordion-header:hover {
+					@apply bg-danger/20;
+				}
+				.accordion-header.is-open {
+					@apply bg-danger text-on-danger;
+				}
+			}
+			&.is-surface .accordion-item {
+				.accordion-header:hover {
+					@apply bg-surface/50;
+				}
+				.accordion-header.is-open {
+					@apply bg-surface text-on-surface;
+				}
+			}
+			&.is-background .accordion-item {
+				.accordion-header:hover {
+					@apply bg-background/50;
+				}
+				.accordion-header.is-open {
+					@apply bg-background text-on-background;
+				}
+			}
+		}
+
+		&.is-outlined {
+			&.is-primary .accordion-item {
+				@apply border border-primary/30;
+				.accordion-header:hover {
+					@apply bg-primary/10;
+				}
+				.accordion-header.is-open {
+					@apply bg-primary/20 text-primary;
+				}
+			}
+			&.is-secondary .accordion-item {
+				@apply border border-secondary/30;
+				.accordion-header:hover {
+					@apply bg-secondary/10;
+				}
+				.accordion-header.is-open {
+					@apply bg-secondary/20 text-secondary;
+				}
+			}
+			&.is-muted .accordion-item {
+				@apply border border-muted;
+				.accordion-header:hover {
+					@apply bg-muted/30;
+				}
+				.accordion-header.is-open {
+					@apply bg-muted/50 text-on-muted;
+				}
+			}
+			&.is-success .accordion-item {
+				@apply border border-success/30;
+				.accordion-header:hover {
+					@apply bg-success/10;
+				}
+				.accordion-header.is-open {
+					@apply bg-success/20 text-success;
+				}
+			}
+			&.is-info .accordion-item {
+				@apply border border-info/30;
+				.accordion-header:hover {
+					@apply bg-info/10;
+				}
+				.accordion-header.is-open {
+					@apply bg-info/20 text-info;
+				}
+			}
+			&.is-warning .accordion-item {
+				@apply border border-warning/30;
+				.accordion-header:hover {
+					@apply bg-warning/10;
+				}
+				.accordion-header.is-open {
+					@apply bg-warning/20 text-warning;
+				}
+			}
+			&.is-danger .accordion-item {
+				@apply border border-danger/30;
+				.accordion-header:hover {
+					@apply bg-danger/10;
+				}
+				.accordion-header.is-open {
+					@apply bg-danger/20 text-danger;
+				}
+			}
+			&.is-surface .accordion-item {
+				@apply border border-on-surface/30;
+				.accordion-header:hover {
+					@apply bg-surface/50;
+				}
+				.accordion-header.is-open {
+					@apply bg-surface text-on-surface;
+				}
+			}
+			&.is-background .accordion-item {
+				@apply border border-background;
+				.accordion-header:hover {
+					@apply bg-background/30;
+				}
+				.accordion-header.is-open {
+					@apply bg-background/20;
+				}
+			}
+		}
 	}
 }

package/dist/display/css/alert.css

@@ -1,35 +1,55 @@
 @layer components {
 	.alert {
-		@apply flex rounded-ui text-sm w-full px-4 py-2 md:px-6 md:py-4 gap-4;
+		@apply flex rounded-box text-sm w-full px-4 py-2 md:px-6 md:py-4 gap-4;
+
+		&.is-soft {
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.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;
+			}
+		}
 
 		&.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-success {
 				@apply bg-success text-on-success;
 			}
-			&.is-error {
-				@apply bg-danger text-on-danger;
+			&.is-info {
+				@apply bg-info text-on-info;
 			}
 			&.is-warning {
 				@apply bg-warning text-on-warning;
 			}
-			&.is-info {
-				@apply bg-info text-on-info;
+			&.is-danger {
+				@apply bg-danger text-on-danger;
 			}
 		}
 
-		&.is-success {
-			@apply bg-on-success text-success;
-		}
-		&.is-danger {
-			@apply bg-on-danger text-danger;
-		}
-		&.is-warning {
-			@apply bg-on-warning text-warning;
-		}
-		&.is-info {
-			@apply bg-on-info text-info;
-		}
-
 		.alert-start {
 			@apply flex items-center justify-start;
 

package/dist/display/css/avatar-group.css

@@ -1,77 +1,40 @@
 @layer components {
-    .avatar-group {
-        @apply inline-flex items-center gap-2;
-    }
-
-    .avatar-group.is-stacked {
-        @apply gap-0;
-
-        &>.avatar {
-            @apply -ml-3 first:ml-0;
-            @apply ring-3 ring-background rounded-ui;
-            @apply transition-transform hover:z-10 hover:scale-110;
-        }
-
-        &>.avatar-group-counter {
-            @apply -ml-3 z-10;
-        }
-    }
-
-    .avatar-group-counter {
-        @apply flex items-center justify-center;
-        @apply rounded-ui font-medium;
-        @apply ring-3 ring-background;
-    }
-
-    .avatar-group-counter.is-primary {
-        @apply bg-primary text-on-primary;
-    }
-
-    .avatar-group-counter.is-secondary {
-        @apply bg-secondary text-on-secondary;
-    }
-
-    .avatar-group-counter.is-muted {
-        @apply bg-muted text-on-muted;
-    }
-
-    .avatar-group-counter.is-success {
-        @apply bg-success text-on-success;
-    }
-
-    .avatar-group-counter.is-warning {
-        @apply bg-warning text-on-warning;
-    }
-
-    .avatar-group-counter.is-danger {
-        @apply bg-danger text-on-danger;
-    }
-
-    .avatar-group-counter.is-info {
-        @apply bg-info text-on-info;
-    }
-
-    .avatar-group-counter.is-transparent {
-        @apply bg-transparent text-on-background;
-    }
-
-    .avatar-group-counter.is-xs {
-        @apply size-5 text-[10px];
-    }
-
-    .avatar-group-counter.is-sm {
-        @apply size-6 text-xs;
-    }
-
-    .avatar-group-counter.is-md {
-        @apply size-7 text-sm;
-    }
-
-    .avatar-group-counter.is-lg {
-        @apply size-10 text-base;
-    }
-
-    .avatar-group-counter.is-xl {
-        @apply size-14 text-lg;
-    }
+	.avatar-group {
+		@apply inline-flex items-center gap-2;
+
+		&.is-stacked {
+			@apply gap-0;
+
+			& > .avatar {
+				@apply -ml-3 first:ml-0;
+				@apply ring-3 ring-background rounded-avatar;
+				@apply transition-transform hover:z-10 hover:scale-110;
+			}
+
+			& > .avatar-group-counter {
+				@apply -ml-3 z-10;
+			}
+		}
+	}
+
+	.avatar-group-counter {
+		@apply flex items-center justify-center;
+		@apply rounded-avatar font-medium;
+		@apply ring-3 ring-background;
+
+		&.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-success { @apply bg-success text-on-success; }
+		&.is-warning { @apply bg-warning text-on-warning; }
+		&.is-danger { @apply bg-danger text-on-danger; }
+		&.is-info { @apply bg-info text-on-info; }
+		&.is-transparent { @apply bg-transparent text-on-background; }
+
+		&.is-xs { @apply size-5 text-[10px]; }
+		&.is-sm { @apply size-6 text-xs; }
+		&.is-md { @apply size-7 text-sm; }
+		&.is-lg { @apply size-10 text-base; }
+		&.is-xl { @apply size-14 text-lg; }
+	}
 }