vanilla-jui 1.4.4 → 1.4.6

package/src/css/gradient.css

@@ -1,224 +1,301 @@
 @layer gradient {
+  :root,
+  .light,
+  .light-theme,
+  .dark,
+  .dark-theme {
+    --gradient-card-border: var(--ui-border);
+    --gradient-card-shadow: var(--shadow-md);
+  }
 
-    :root,
-    .light,
-    .light-theme,
-    .dark,
-    .dark-theme {
-        --gradient-card-border: var(--ui-border);
-        --gradient-card-shadow: var(--shadow-md);
-    }
-
-    .bg-gradient-sunrise,
-    .bg-gradient-aurora,
-    .bg-gradient-ocean,
-    .bg-gradient-meadow,
-    .bg-gradient-ember,
-    .bg-gradient-dusk,
-    .bg-gradient-gold,
-    .bg-gradient-forest {
-        color: var(--ui-fg);
-        background-color: var(--ui-bg);
-    }
-
-    .bg-gradient-auto {
-        background:
-            radial-gradient(circle at 16% 16%,
-                color-mix(in srgb, var(--tone-solid) 30%, transparent),
-                transparent 34%),
-            radial-gradient(circle at 84% 0%,
-                color-mix(in srgb, var(--tone-tint) 24%, transparent),
-                transparent 30%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
-                color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle)));
-    }
-
-    .bg-gradient-sunrise {
-        background:
-            radial-gradient(circle at 16% 16%,
-                color-mix(in srgb, var(--tone-solid) 30%, transparent),
-                transparent 34%),
-            radial-gradient(circle at 84% 0%,
-                color-mix(in srgb, var(--state-warning) 24%, transparent),
-                transparent 30%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
-                color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle)));
-    }
-
-    .bg-gradient-aurora {
-        background:
-            radial-gradient(circle at 12% 12%,
-                color-mix(in srgb, var(--state-info) 24%, transparent),
-                transparent 32%),
-            radial-gradient(circle at 84% 18%,
-                color-mix(in srgb, var(--state-success) 20%, transparent),
-                transparent 30%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 82%, var(--state-info-subtle)),
-                color-mix(in srgb, var(--ui-surface-raised) 84%, var(--state-success-subtle)));
-    }
-
-    .bg-gradient-ocean {
-        background:
-            radial-gradient(circle at 22% 12%,
-                color-mix(in srgb, var(--state-info) 28%, transparent),
-                transparent 34%),
-            radial-gradient(circle at 78% 0%,
-                color-mix(in srgb, var(--ui-blue) 22%, transparent),
-                transparent 28%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-tint)),
-                color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-teal-subtle, var(--state-info-subtle))));
-    }
-
-    .bg-gradient-meadow {
-        background:
-            radial-gradient(circle at 18% 16%,
-                color-mix(in srgb, var(--state-success) 28%, transparent),
-                transparent 34%),
-            radial-gradient(circle at 82% 14%,
-                color-mix(in srgb, var(--ui-mint) 24%, transparent),
-                transparent 30%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 80%, var(--state-success-subtle)),
-                color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint)));
-    }
-
-    .bg-gradient-ember {
-        background:
-            radial-gradient(circle at 18% 10%,
-                color-mix(in srgb, var(--state-warning) 30%, transparent),
-                transparent 32%),
-            radial-gradient(circle at 84% 18%,
-                color-mix(in srgb, var(--state-danger) 22%, transparent),
-                transparent 28%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 80%, var(--state-warning-subtle)),
-                color-mix(in srgb, var(--ui-surface-raised) 84%, var(--state-danger-subtle)));
-    }
-
-    .bg-gradient-dusk {
-        background:
-            radial-gradient(circle at 18% 16%,
-                color-mix(in srgb, var(--tone-solid) 28%, transparent),
-                transparent 33%),
-            radial-gradient(circle at 82% 14%,
-                color-mix(in srgb, var(--ui-violet) 22%, transparent),
-                transparent 30%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 78%, var(--tone-wash)),
-                color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-violet-subtle, var(--tone-subtle))));
-    }
-
-    .bg-gradient-gold {
-        background:
-            radial-gradient(circle at 20% 16%,
-                color-mix(in srgb, var(--ui-gold) 24%, transparent),
-                transparent 34%),
-            radial-gradient(circle at 80% 10%,
-                color-mix(in srgb, var(--state-warning) 18%, transparent),
-                transparent 28%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 80%, var(--ui-gold-surface, var(--state-warning-subtle))),
-                color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint)));
-    }
-
-    .bg-gradient-forest {
-        background:
-            radial-gradient(circle at 16% 16%,
-                color-mix(in srgb, var(--ui-olive) 24%, transparent),
-                transparent 34%),
-            radial-gradient(circle at 84% 14%,
-                color-mix(in srgb, var(--state-success) 18%, transparent),
-                transparent 30%),
-            linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-tint)),
-                color-mix(in srgb, var(--ui-surface-raised) 86%, var(--state-success-subtle)));
-    }
-
-    .gradient-grid {
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    }
-
-    .gradient-card {
-        display: grid;
-        gap: 12px;
-        padding: 16px;
-        border-radius: 22px;
-        border: 1px solid var(--gradient-card-border);
-        background: var(--ui-surface-raised);
-        box-shadow: var(--gradient-card-shadow);
-        overflow: hidden;
-    }
-
-    .gradient-preview {
-        min-height: 150px;
-        display: grid;
-        align-content: space-between;
-        gap: 12px;
-        padding: 16px;
-        border-radius: 18px;
-        border: 1px solid var(--ui-border-subtle);
-        color: var(--ui-fg);
-    }
-
-    .gradient-preview-title {
-        display: inline-flex;
-        width: fit-content;
-        align-items: center;
-        padding: 0.38rem 0.64rem;
-        border-radius: 9999px;
-        background: color-mix(in srgb, var(--ui-surface-raised) 72%, transparent);
-        border: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent);
-        font-size: 0.76rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-    }
-
-    .gradient-preview-token {
-        font-size: 0.82rem;
-        font-weight: 700;
-        letter-spacing: 0.04em;
-        color: color-mix(in srgb, var(--ui-fg) 78%, transparent);
-    }
-
-    .gradient-card h3 {
-        margin: 0;
-        font-size: 1.02rem;
-    }
-
-    .gradient-card p {
-        margin: 0;
-        line-height: 1.65;
-        color: var(--ui-fg-muted);
-    }
-
-    .gradient-note {
-        padding: 0.82rem 0.9rem;
-        border-radius: 14px;
-        border: 1px solid var(--ui-border-subtle);
-        background: var(--ui-surface-subtle);
-    }
-
-    .gradient-meta {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-
-    .gradient-pill {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.35rem;
-        padding: 0.34rem 0.6rem;
-        border-radius: 9999px;
-        border: 1px solid var(--ui-border-subtle);
-        background: var(--ui-surface-subtle);
-        color: var(--ui-fg-soft);
-        font-size: 0.76rem;
-        font-weight: 700;
-    }
-}
+  .bg-gradient-sunrise,
+  .bg-gradient-aurora,
+  .bg-gradient-ocean,
+  .bg-gradient-meadow,
+  .bg-gradient-ember,
+  .bg-gradient-dusk,
+  .bg-gradient-gold,
+  .bg-gradient-forest {
+    color: var(--ui-fg);
+    background-color: var(--ui-bg);
+  }
+
+  .bg-gradient-auto {
+    background:
+      radial-gradient(
+        circle at 16% 16%,
+        color-mix(in srgb, var(--tone-solid) 30%, transparent),
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 0%,
+        color-mix(in srgb, var(--tone-tint) 24%, transparent),
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle))
+      );
+  }
+
+  .bg-gradient-sunrise {
+    background:
+      radial-gradient(
+        circle at 16% 16%,
+        color-mix(in srgb, var(--tone-solid) 30%, transparent),
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 0%,
+        color-mix(in srgb, var(--state-warning) 24%, transparent),
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle))
+      );
+  }
+
+  .bg-gradient-aurora {
+    background:
+      radial-gradient(
+        circle at 12% 12%,
+        color-mix(in srgb, var(--state-info) 24%, transparent),
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at 84% 18%,
+        color-mix(in srgb, var(--state-success) 20%, transparent),
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-bg) 82%, var(--state-info-subtle)),
+        color-mix(
+          in srgb,
+          var(--ui-surface-raised) 84%,
+          var(--state-success-subtle)
+        )
+      );
+  }
+
+  .bg-gradient-ocean {
+    background:
+      radial-gradient(
+        circle at 22% 12%,
+        color-mix(in srgb, var(--state-info) 28%, transparent),
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 78% 0%,
+        color-mix(in srgb, var(--ui-blue) 22%, transparent),
+        transparent 28%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-tint)),
+        color-mix(
+          in srgb,
+          var(--ui-surface-raised) 84%,
+          var(--ui-teal-subtle, var(--state-info-subtle))
+        )
+      );
+  }
+
+  .bg-gradient-meadow {
+    background:
+      radial-gradient(
+        circle at 18% 16%,
+        color-mix(in srgb, var(--state-success) 28%, transparent),
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 82% 14%,
+        color-mix(in srgb, var(--ui-mint) 24%, transparent),
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-bg) 80%, var(--state-success-subtle)),
+        color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint))
+      );
+  }
+
+  .bg-gradient-ember {
+    background:
+      radial-gradient(
+        circle at 18% 10%,
+        color-mix(in srgb, var(--state-warning) 30%, transparent),
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at 84% 18%,
+        color-mix(in srgb, var(--state-danger) 22%, transparent),
+        transparent 28%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-bg) 80%, var(--state-warning-subtle)),
+        color-mix(
+          in srgb,
+          var(--ui-surface-raised) 84%,
+          var(--state-danger-subtle)
+        )
+      );
+  }
+
+  .bg-gradient-dusk {
+    background:
+      radial-gradient(
+        circle at 18% 16%,
+        color-mix(in srgb, var(--tone-solid) 28%, transparent),
+        transparent 33%
+      ),
+      radial-gradient(
+        circle at 82% 14%,
+        color-mix(in srgb, var(--ui-violet) 22%, transparent),
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-bg) 78%, var(--tone-wash)),
+        color-mix(
+          in srgb,
+          var(--ui-surface-raised) 86%,
+          var(--ui-violet-subtle, var(--tone-subtle))
+        )
+      );
+  }
+
+  .bg-gradient-gold {
+    background:
+      radial-gradient(
+        circle at 20% 16%,
+        color-mix(in srgb, var(--ui-gold) 24%, transparent),
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 80% 10%,
+        color-mix(in srgb, var(--state-warning) 18%, transparent),
+        transparent 28%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(
+          in srgb,
+          var(--ui-bg) 80%,
+          var(--ui-gold-surface, var(--state-warning-subtle))
+        ),
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint))
+      );
+  }
+
+  .bg-gradient-forest {
+    background:
+      radial-gradient(
+        circle at 16% 16%,
+        color-mix(in srgb, var(--ui-olive) 24%, transparent),
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 14%,
+        color-mix(in srgb, var(--state-success) 18%, transparent),
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-tint)),
+        color-mix(
+          in srgb,
+          var(--ui-surface-raised) 86%,
+          var(--state-success-subtle)
+        )
+      );
+  }
+
+  .gradient-grid {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+
+  .gradient-card {
+    display: grid;
+    gap: 12px;
+    padding: 16px;
+    border-radius: 22px;
+    border: 1px solid var(--gradient-card-border);
+    background: var(--ui-surface-raised);
+    box-shadow: var(--gradient-card-shadow);
+    overflow: hidden;
+  }
+
+  .gradient-preview {
+    min-height: 150px;
+    display: grid;
+    align-content: space-between;
+    gap: 12px;
+    padding: 16px;
+    border-radius: 18px;
+    border: 1px solid var(--ui-border-subtle);
+    color: var(--ui-fg);
+  }
+
+  .gradient-preview-title {
+    display: inline-flex;
+    width: fit-content;
+    align-items: center;
+    padding: 0.38rem 0.64rem;
+    border-radius: 9999px;
+    background: color-mix(in srgb, var(--ui-surface-raised) 72%, transparent);
+    border: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent);
+    font-size: 0.76rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .gradient-preview-token {
+    font-size: 0.82rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    color: color-mix(in srgb, var(--ui-fg) 78%, transparent);
+  }
+
+  .gradient-card h3 {
+    margin: 0;
+    font-size: 1.02rem;
+  }
+
+  .gradient-card p {
+    margin: 0;
+    line-height: 1.65;
+    color: var(--ui-fg-muted);
+  }
+
+  .gradient-note {
+    padding: 0.82rem 0.9rem;
+    border-radius: 14px;
+    border: 1px solid var(--ui-border-subtle);
+    background: var(--ui-surface-subtle);
+  }
+
+  .gradient-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .gradient-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.34rem 0.6rem;
+    border-radius: 9999px;
+    border: 1px solid var(--ui-border-subtle);
+    background: var(--ui-surface-subtle);
+    color: var(--ui-fg-soft);
+    font-size: 0.76rem;
+    font-weight: 700;
+  }
+}

package/src/css/icon.css

@@ -1,58 +1,58 @@
 @layer icon {
-	svg {
-		display: block;
-	}
-
-	/* close icon */
-	.icon-close {
-		box-sizing: border-box;
-		position: relative;
-		display: block;
-		transform: scale(1);
-		width: var(--font-size-xl);
-		height: var(--font-size-xl);
-		/* border: 1px solid; */
-		/* border-radius: 50%; */
-		color: inherit;
-		cursor: pointer;
-	}
-
-	.icon-close::after,
-	.icon-close::before {
-		content: "";
-		position: absolute;
-		box-sizing: border-box;
-		top: 50%;
-		left: 50%;
-		width: 12px;
-		height: 1.5px;
-		background: currentColor;
-		border-radius: 1px;
-		transform-origin: center center;
-	}
-
-	.icon-close::before {
-		transform: translate(-50%, -50%) rotate(45deg);
-	}
-
-	.icon-close::after {
-		transform: translate(-50%, -50%) rotate(-45deg);
-	}
-
-	.icon-close:active {
-		transform: translateY(1px);
-	}
-
-	.icon-close:focus-within {
-		background-color: var(--tone-subtle);
-	}
-
-	/* icon element status */
-	.el-icon[data-action-close] {
-		cursor: pointer;
-	}
-
-	.el-icon[data-action-close]:active {
-		transform: scale(0.85);
-	}
-}
+  svg {
+    display: block;
+  }
+
+  /* close icon */
+  .icon-close {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    transform: scale(1);
+    width: var(--font-size-xl);
+    height: var(--font-size-xl);
+    /* border: 1px solid; */
+    /* border-radius: 50%; */
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .icon-close::after,
+  .icon-close::before {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: 1.5px;
+    background: currentColor;
+    border-radius: 1px;
+    transform-origin: center center;
+  }
+
+  .icon-close::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  .icon-close::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+
+  .icon-close:active {
+    transform: translateY(1px);
+  }
+
+  .icon-close:focus-within {
+    background-color: var(--tone-subtle);
+  }
+
+  /* icon element status */
+  .el-icon[data-action-close] {
+    cursor: pointer;
+  }
+
+  .el-icon[data-action-close]:active {
+    transform: scale(0.85);
+  }
+}

package/src/css/index.css

@@ -12,4 +12,4 @@
 @import url('./themes/index.css');
 
 @import url('./animation.css');
-@import url('./status.css');
+@import url('./status.css');