@hua-labs/ui 2.1.0 → 2.2.0

package/src/styles/landing.css

@@ -0,0 +1,107 @@
+/**
+ * HUA-UI Landing Page Utilities
+ *
+ * Usage: @import "@hua-labs/ui/styles/landing.css";
+ *
+ * Opt-in CSS utilities for landing pages.
+ * All values use CSS custom properties — works with any theme.
+ *
+ * Provides: .gradient-bg, .gradient-bg-soft, .section-line, .section-line-left,
+ *           .mesh-primary, .mesh-accent, .stat-number, .card-hover-lift
+ */
+
+/* ── Gradient backgrounds ─────────────────────────── */
+
+.gradient-bg {
+  background: linear-gradient(
+    135deg,
+    var(--color-primary, hsl(var(--primary))) 0%,
+    var(--color-accent, hsl(var(--accent-foreground))) 100%
+  );
+}
+
+.gradient-bg-soft {
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--color-primary, hsl(var(--primary))) 15%, transparent) 0%,
+    color-mix(in srgb, var(--color-accent, hsl(var(--accent-foreground))) 10%, transparent) 100%
+  );
+}
+
+/* ── Section decorator ────────────────────────────── */
+
+.section-line {
+  width: 80px;
+  height: 3px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    90deg,
+    var(--color-primary, hsl(var(--primary))),
+    var(--color-accent, hsl(var(--accent-foreground)))
+  );
+  margin-bottom: 1.5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.section-line-left {
+  width: 80px;
+  height: 3px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    90deg,
+    var(--color-primary, hsl(var(--primary))),
+    var(--color-accent, hsl(var(--accent-foreground)))
+  );
+  margin-bottom: 1.5rem;
+}
+
+/* ── Mesh backgrounds ─────────────────────────────── */
+
+.mesh-primary {
+  background:
+    radial-gradient(
+      ellipse 80% 60% at 20% 40%,
+      color-mix(in srgb, var(--color-primary, hsl(var(--primary))) 8%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      ellipse 60% 80% at 80% 60%,
+      color-mix(in srgb, var(--color-primary, hsl(var(--primary))) 5%, transparent),
+      transparent
+    );
+}
+
+.mesh-accent {
+  background:
+    radial-gradient(
+      ellipse 80% 60% at 80% 30%,
+      color-mix(in srgb, var(--color-accent, hsl(var(--accent-foreground))) 8%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      ellipse 60% 80% at 20% 70%,
+      color-mix(in srgb, var(--color-accent, hsl(var(--accent-foreground))) 5%, transparent),
+      transparent
+    );
+}
+
+/* ── Stat number ──────────────────────────────────── */
+
+.stat-number {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+
+/* ── Card hover lift ──────────────────────────────── */
+
+.card-hover-lift {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card-hover-lift:hover {
+  transform: translateY(-8px);
+  box-shadow:
+    0 20px 40px -12px rgba(0, 0, 0, 0.15),
+    0 8px 16px -8px rgba(0, 0, 0, 0.1);
+}

package/src/styles/utilities.css

@@ -0,0 +1,58 @@
+/**
+ * HUA-UI CSS Utilities
+ *
+ * Usage: @import "@hua-labs/ui/styles/utilities.css";
+ *
+ * Provides: .glass, .gradient-text, .sr-only
+ */
+
+/* Glass effect — theme-aware backdrop blur */
+.glass {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.dark .glass {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+/* Gradient text — CSS variable based */
+.gradient-text {
+  background: linear-gradient(135deg, var(--gradient-from, hsl(var(--primary))) 0%, var(--gradient-to, hsl(var(--accent-foreground))) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Screen reader only — accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sr-only:focus,
+.sr-only:focus-visible {
+  position: absolute;
+  width: auto;
+  height: auto;
+  padding: 0.5rem 1rem;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  top: 1rem;
+  left: 1rem;
+  z-index: 50;
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-radius: 0.375rem;
+  font-weight: 500;
+}