hikari-components 0.1.8

Core UI components (40+) for the Hikari design system
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Use theme variables with namespace to avoid conflicts
@use 'variables' as vars;
@use 'mixins' as mix;

// ============================================
// Background Component - Gradient Animation
// ============================================

.hi-background {
  // Fixed positioning - covers entire viewport, ignores scroll
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  // Behind all content
  z-index: -1;

  // Click-through - does not block interactions
  pointer-events: none;

  // Dynamic gradient with rotating center and breathing colors
  // Updated by JS animation loop
  background: radial-gradient(
    circle at var(--bg-center-x, 50%) var(--bg-center-y, 50%),
    var(--bg-color-1, rgba(245, 245, 245, 0.9)) 0%,
    var(--bg-color-2, rgba(255, 182, 193, 0.7)) 100%
  );

  // Smooth transition for color changes
  transition: background 0.1s ease-out;
}