vanilla-jui 1.3.9 → 1.3.10

package/src/css/gradient.css

@@ -0,0 +1,211 @@
+@layer gradient {
+
+    :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-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-light)),
+                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-light)));
+    }
+
+    .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-light)));
+    }
+
+    .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-light)),
+                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

@@ -0,0 +1,63 @@
+@layer icon {
+	svg {
+		display: block;
+	}
+
+	/* loader icon */
+	.icon-loader {
+		display: inline-block;
+		width: var(--font-size-xl);
+		height: var(--font-size-xl);
+		border: 1px solid currentcolor;
+		border-right-color: transparent;
+		border-radius: 50%;
+		animation: var(--speed-xl) linear infinite animate-spin;
+	}
+
+	/* 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: 2px;
+		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

@@ -0,0 +1,12 @@
+@layer config, layout, content, icon, font, components, menu, form, animation, status;
+
+@import url('./tokens.css');
+@import url('./gradient.css');
+@import url('./layout.css');
+@import url('./icon.css');
+@import url('./font.css');
+@import url('./components.css');
+@import url('./form.css');
+@import url('./content.css');
+@import url('./animation.css');
+@import url('./status.css');