@zhang_jifan/fanui 2.1.0

package/src/utilities/_texture.scss

@@ -0,0 +1,323 @@
+// =============================================================================
+// fanUI · 纹理与氛围工具 (Texture & Ambience)
+// -----------------------------------------------------------------------------
+// 官网、博客、登录页、数据大屏的"高级感"多来自背景与氛围层。
+// 这里把常用的氛围手法封装为可组合的工具类，全部使用主题色令牌，
+// 因此换主题色后极光、网格、辉光会整体换色，而不是留下一堆写死的紫蓝渐变。
+//
+//   .fanui-bg-aurora / --mesh / --dots / --grid-fade / --noise / --conic
+//   .fanui-glow / .fanui-glow--brand / .fanui-glow--accent
+//   .fanui-text-brand / .fanui-text-aurora
+//   .fanui-border-gradient / .fanui-divider-gradient
+//   .fanui-mask-fade-y / --x / --circle
+//   .fanui-shimmer / .fanui-grain
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 背景氛围
+// -----------------------------------------------------------------------------
+
+.fanui-bg-aurora {
+  position: relative;
+  isolation: isolate;
+  background-color: fn.fanui-var("color-bg");
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: -25% -15%;
+    z-index: -1;
+    pointer-events: none;
+    background:
+      radial-gradient(40% 44% at 22% 28%, var(--fanui-brand-aura-a), transparent 62%),
+      radial-gradient(36% 40% at 78% 20%, var(--fanui-brand-aura-b), transparent 60%),
+      radial-gradient(46% 46% at 50% 88%, fn.fanui-var("primary-soft"), transparent 66%);
+    filter: blur(32px);
+    animation: fanui-aurora-drift 26s ease-in-out infinite alternate;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before { animation: none; }
+  }
+}
+
+@keyframes fanui-aurora-drift {
+  0%   { transform: translate3d(0, 0, 0) scale(1); }
+  50%  { transform: translate3d(2%, -2%, 0) scale(1.06); }
+  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
+}
+
+.fanui-bg-mesh {
+  background-color: fn.fanui-var("color-bg");
+  background-image:
+    radial-gradient(at 12% 18%, var(--fanui-brand-aura-a) 0px, transparent 52%),
+    radial-gradient(at 82% 12%, var(--fanui-brand-aura-b) 0px, transparent 48%),
+    radial-gradient(at 70% 82%, fn.fanui-var("primary-soft") 0px, transparent 46%),
+    radial-gradient(at 24% 84%, fn.fanui-var("accent-soft") 0px, transparent 44%);
+}
+
+.fanui-bg-dots {
+  background-image: radial-gradient(fn.fanui-alpha(#64748b, 0.22) 1px, transparent 1px);
+  background-size: var(--fanui-dots-size, 18px) var(--fanui-dots-size, 18px);
+}
+
+.fanui-bg-grid-fade {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(fn.fanui-alpha(#64748b, 0.10) 1px, transparent 1px),
+      linear-gradient(90deg, fn.fanui-alpha(#64748b, 0.10) 1px, transparent 1px);
+    background-size: var(--fanui-grid-size, 56px) var(--fanui-grid-size, 56px);
+    -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 100%);
+    mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 100%);
+  }
+}
+
+.fanui-bg-conic {
+  background-image: conic-gradient(
+    from 210deg at 50% 50%,
+    fn.fanui-var("primary-soft"),
+    fn.fanui-var("accent-soft"),
+    fn.fanui-var("primary-soft")
+  );
+}
+
+// 细颗粒噪点：用内联 SVG feTurbulence，零外部资源
+.fanui-bg-noise,
+.fanui-grain {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    opacity: var(--fanui-noise-opacity, 0.035);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 辉光
+// -----------------------------------------------------------------------------
+
+.fanui-glow {
+  position: relative;
+  isolation: isolate;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: -40%;
+    z-index: -1;
+    pointer-events: none;
+    background: radial-gradient(closest-side, var(--fanui-glow-color, var(--fanui-brand-aura-a)), transparent 100%);
+    filter: blur(var(--fanui-glow-blur, 24px));
+  }
+
+  &--brand { --fanui-glow-color: var(--fanui-brand-aura-a); }
+  &--accent { --fanui-glow-color: var(--fanui-brand-aura-b); }
+  &--success { --fanui-glow-color: fn.fanui-var("success-glow"); }
+  &--danger { --fanui-glow-color: fn.fanui-var("danger-glow"); }
+  &--soft { --fanui-glow-blur: 40px; opacity: 0.7; }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 文字
+// -----------------------------------------------------------------------------
+
+.fanui-text-brand {
+  @include mx.fanui-text-gradient(var(--fanui-brand-grad-a), var(--fanui-brand-grad-b), 100deg);
+}
+
+.fanui-text-aurora {
+  background-image: linear-gradient(
+    100deg,
+    var(--fanui-brand-grad-a),
+    var(--fanui-brand-grad-b),
+    var(--fanui-brand-grad-a)
+  );
+  background-size: 220% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: fanui-text-aurora 8s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) { animation: none; }
+}
+
+@keyframes fanui-text-aurora {
+  from { background-position: 0% 50%; }
+  to   { background-position: 200% 50%; }
+}
+
+// 骨架屏流光文字（加载中的标题占位）
+.fanui-shimmer {
+  background-image: linear-gradient(
+    90deg,
+    fn.fanui-var("color-surface-sunken") 0%,
+    fn.fanui-var("color-hover") 50%,
+    fn.fanui-var("color-surface-sunken") 100%
+  );
+  background-size: 200% 100%;
+  animation: fanui-shimmer 1.6s linear infinite;
+  border-radius: fn.fanui-var("radius-sm");
+  color: transparent;
+
+  @media (prefers-reduced-motion: reduce) { animation: none; }
+}
+
+@keyframes fanui-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 渐变描边 / 分隔线
+// -----------------------------------------------------------------------------
+
+.fanui-border-gradient {
+  position: relative;
+  border: 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: var(--fanui-border-width, 1px);
+    pointer-events: none;
+    background: linear-gradient(
+      var(--fanui-border-angle, 135deg),
+      var(--fanui-brand-grad-a),
+      var(--fanui-brand-grad-b)
+    );
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+
+  &--strong::before { padding: 2px; }
+  &--soft::before {
+    background: linear-gradient(
+      135deg,
+      fn.fanui-var("primary-border"),
+      fn.fanui-var("accent-border")
+    );
+  }
+}
+
+.fanui-divider-gradient {
+  height: 1px;
+  border: 0;
+  margin-block: fn.fanui-var("space-6");
+  background: linear-gradient(
+    90deg,
+    transparent,
+    fn.fanui-var("primary-border"),
+    fn.fanui-var("accent-border"),
+    transparent
+  );
+}
+
+// 带文字的居中分隔线
+.fanui-divider-text {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+  margin-block: fn.fanui-var("space-6");
+  font-size: fn.fanui-var("font-size-xs");
+  color: fn.fanui-var("color-text-subtle");
+
+  &::before,
+  &::after {
+    content: "";
+    flex: 1 1 auto;
+    height: 1px;
+    background-color: fn.fanui-var("color-border");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 遮罩渐隐
+// -----------------------------------------------------------------------------
+
+.fanui-mask-fade-b {
+  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
+  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
+}
+
+.fanui-mask-fade-t {
+  -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
+  mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
+}
+
+.fanui-mask-fade-x {
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+}
+
+.fanui-mask-fade-circle {
+  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
+  mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
+}
+
+// -----------------------------------------------------------------------------
+// 6. 点击水波纹（配合 FanUI.ripple() 使用；无 JS 时静默不生效）
+// -----------------------------------------------------------------------------
+
+.fanui-ripple-host {
+  position: relative;
+  overflow: hidden;
+
+  --fanui-ripple-color: #{fn.fanui-alpha(#ffffff, 0.45)};
+}
+
+.fanui-ripple {
+  position: absolute;
+  border-radius: fn.fanui-var("radius-full");
+  transform: translate(-50%, -50%) scale(0);
+  background-color: var(--fanui-ripple-color);
+  pointer-events: none;
+  animation: fanui-ripple 620ms v.$fanui-ease-out forwards;
+}
+
+@keyframes fanui-ripple {
+  to {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 7. 玻璃噪点（让大面积玻璃不至于"太干净"而显得廉价）
+// -----------------------------------------------------------------------------
+
+.fanui-glass-noise {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+    border-radius: inherit;
+    opacity: 0.03;
+    mix-blend-mode: overlay;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+}