astralkit 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +44 -0
- package/LICENSE +34 -34
- package/README.md +71 -58
- package/astralkit-theme-v4.css +618 -612
- package/astralkit-theme.css +618 -610
- package/astralkit-utilities.css +543 -543
- package/lib/utils.js +28 -28
- package/package.json +53 -45
- package/palettes.css +299 -299
- package/primitives/accounts.css +435 -435
- package/primitives/animations.css +136 -136
- package/primitives/avatar.css +410 -410
- package/primitives/badges.css +231 -231
- package/primitives/effects.css +388 -388
- package/primitives/focus.css +25 -25
- package/primitives/forms.css +2155 -2155
- package/primitives/icons.css +90 -90
- package/primitives/layout.css +217 -217
- package/primitives/mobile.css +557 -557
- package/primitives/navigation.css +1057 -1057
- package/primitives/sidebar.css +1819 -1819
- package/primitives/typography.css +324 -324
- package/tailwind.cjs +416 -416
- package/tailwind.js +491 -491
|
@@ -1,136 +1,136 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/* Animation primitives -- scroll fade, slideover, stagger, loading dots, keyframes */
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/* -- Active press feedback --
|
|
8
|
-
Subtle scale-down on press. Adds tactile feel to buttons and cards.
|
|
9
|
-
Usage: <button class="ak-press"> */
|
|
10
|
-
.ak-press {
|
|
11
|
-
transition: transform var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease);
|
|
12
|
-
}
|
|
13
|
-
.ak-press:active {
|
|
14
|
-
transform: scale(0.98);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
/* Scroll fade indicator */
|
|
19
|
-
.ak-scroll-fade {
|
|
20
|
-
position: absolute;
|
|
21
|
-
left: 0;
|
|
22
|
-
right: 0;
|
|
23
|
-
height: 2rem;
|
|
24
|
-
pointer-events: none;
|
|
25
|
-
z-index: 1;
|
|
26
|
-
transition: opacity var(--duration-ak-base) var(--ease-ak-default);
|
|
27
|
-
}
|
|
28
|
-
.ak-scroll-fade-hidden {
|
|
29
|
-
opacity: 0;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/* Scroll arrows */
|
|
33
|
-
.ak-scroll-arrow {
|
|
34
|
-
display: flex;
|
|
35
|
-
align-items: center;
|
|
36
|
-
justify-content: center;
|
|
37
|
-
position: absolute;
|
|
38
|
-
z-index: 2;
|
|
39
|
-
cursor: pointer;
|
|
40
|
-
transition: opacity var(--duration-ak-fast) var(--ease-ak-default);
|
|
41
|
-
}
|
|
42
|
-
.ak-scroll-arrow-hidden { opacity: 0; pointer-events: none; }
|
|
43
|
-
.ak-scroll-arrow:hover { opacity: 1; }
|
|
44
|
-
|
|
45
|
-
/* Slideover panel */
|
|
46
|
-
.ak-slideover {
|
|
47
|
-
position: fixed;
|
|
48
|
-
top: 0;
|
|
49
|
-
right: 0;
|
|
50
|
-
bottom: 0;
|
|
51
|
-
z-index: var(--z-ak-modal);
|
|
52
|
-
transform: translateX(100%);
|
|
53
|
-
transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
54
|
-
}
|
|
55
|
-
.ak-slideover-open { transform: translateX(0); }
|
|
56
|
-
.ak-slideover-overlay {
|
|
57
|
-
position: fixed;
|
|
58
|
-
inset: 0;
|
|
59
|
-
z-index: var(--z-ak-overlay);
|
|
60
|
-
background: var(--color-ak-overlay);
|
|
61
|
-
opacity: 0;
|
|
62
|
-
visibility: hidden;
|
|
63
|
-
transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
64
|
-
visibility 240ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
65
|
-
}
|
|
66
|
-
.ak-slideover-overlay-open { opacity: 1; visibility: visible; }
|
|
67
|
-
|
|
68
|
-
/* .ak-open state class (generic visibility toggle) */
|
|
69
|
-
.ak-open {
|
|
70
|
-
opacity: 1;
|
|
71
|
-
visibility: visible;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
/* Stagger animation items */
|
|
75
|
-
.ak-stagger-item {
|
|
76
|
-
opacity: 0;
|
|
77
|
-
transform: translateY(8px);
|
|
78
|
-
transition: opacity var(--duration-ak-base) var(--ease-ak-default),
|
|
79
|
-
transform var(--duration-ak-base) var(--ease-ak-default);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/* Loading dots */
|
|
83
|
-
.ak-loading-dot {
|
|
84
|
-
width: 8px;
|
|
85
|
-
height: 8px;
|
|
86
|
-
border-radius: var(--radius-ak-full);
|
|
87
|
-
background: var(--color-ak-text-muted);
|
|
88
|
-
animation: ak-bounce 1.2s ease-in-out infinite;
|
|
89
|
-
}
|
|
90
|
-
.ak-loading-dot:nth-child(2) { animation-delay: 150ms; }
|
|
91
|
-
.ak-loading-dot:nth-child(3) { animation-delay: 300ms; }
|
|
92
|
-
|
|
93
|
-
/* Floating / drifting animations */
|
|
94
|
-
.ak-float { animation: ak-float 6s ease-in-out infinite; }
|
|
95
|
-
.ak-float-delayed { animation: ak-float-delayed 7s ease-in-out infinite 1.8s; }
|
|
96
|
-
.ak-drift { animation: ak-drift 26s linear infinite; }
|
|
97
|
-
.ak-drift-reverse { animation: ak-drift-reverse 20s linear infinite; }
|
|
98
|
-
.ak-pulse-ring { animation: ak-pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
|
|
99
|
-
|
|
100
|
-
/* Keyframes */
|
|
101
|
-
@keyframes ak-bounce {
|
|
102
|
-
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
|
103
|
-
40% { transform: scale(1); opacity: 1; }
|
|
104
|
-
}
|
|
105
|
-
@keyframes ak-float {
|
|
106
|
-
0%, 100% { transform: translateY(0); }
|
|
107
|
-
50% { transform: translateY(-10px); }
|
|
108
|
-
}
|
|
109
|
-
@keyframes ak-float-delayed {
|
|
110
|
-
0%, 100% { transform: translateY(0); }
|
|
111
|
-
50% { transform: translateY(-8px); }
|
|
112
|
-
}
|
|
113
|
-
@keyframes ak-drift {
|
|
114
|
-
0% { transform: translate(0, 0); }
|
|
115
|
-
25% { transform: translate(10px, -10px); }
|
|
116
|
-
50% { transform: translate(-5px, -20px); }
|
|
117
|
-
75% { transform: translate(-15px, -5px); }
|
|
118
|
-
100% { transform: translate(0, 0); }
|
|
119
|
-
}
|
|
120
|
-
@keyframes ak-drift-reverse {
|
|
121
|
-
0% { transform: translate(0, 0); }
|
|
122
|
-
25% { transform: translate(-10px, 10px); }
|
|
123
|
-
50% { transform: translate(5px, 20px); }
|
|
124
|
-
75% { transform: translate(15px, 5px); }
|
|
125
|
-
100% { transform: translate(0, 0); }
|
|
126
|
-
}
|
|
127
|
-
@keyframes ak-pulse-ring {
|
|
128
|
-
0% { transform: scale(0.8); opacity: 0.5; }
|
|
129
|
-
50% { transform: scale(1); opacity: 0.2; }
|
|
130
|
-
100% { transform: scale(0.8); opacity: 0.5; }
|
|
131
|
-
}
|
|
132
|
-
@keyframes ak-shimmer {
|
|
133
|
-
100% { transform: translateX(100%); }
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
/* Animation primitives -- scroll fade, slideover, stagger, loading dots, keyframes */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
/* -- Active press feedback --
|
|
8
|
+
Subtle scale-down on press. Adds tactile feel to buttons and cards.
|
|
9
|
+
Usage: <button class="ak-press"> */
|
|
10
|
+
.ak-press {
|
|
11
|
+
transition: transform var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease);
|
|
12
|
+
}
|
|
13
|
+
.ak-press:active {
|
|
14
|
+
transform: scale(0.98);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
/* Scroll fade indicator */
|
|
19
|
+
.ak-scroll-fade {
|
|
20
|
+
position: absolute;
|
|
21
|
+
left: 0;
|
|
22
|
+
right: 0;
|
|
23
|
+
height: 2rem;
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
z-index: 1;
|
|
26
|
+
transition: opacity var(--duration-ak-base) var(--ease-ak-default);
|
|
27
|
+
}
|
|
28
|
+
.ak-scroll-fade-hidden {
|
|
29
|
+
opacity: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Scroll arrows */
|
|
33
|
+
.ak-scroll-arrow {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
position: absolute;
|
|
38
|
+
z-index: 2;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
transition: opacity var(--duration-ak-fast) var(--ease-ak-default);
|
|
41
|
+
}
|
|
42
|
+
.ak-scroll-arrow-hidden { opacity: 0; pointer-events: none; }
|
|
43
|
+
.ak-scroll-arrow:hover { opacity: 1; }
|
|
44
|
+
|
|
45
|
+
/* Slideover panel */
|
|
46
|
+
.ak-slideover {
|
|
47
|
+
position: fixed;
|
|
48
|
+
top: 0;
|
|
49
|
+
right: 0;
|
|
50
|
+
bottom: 0;
|
|
51
|
+
z-index: var(--z-ak-modal);
|
|
52
|
+
transform: translateX(100%);
|
|
53
|
+
transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
54
|
+
}
|
|
55
|
+
.ak-slideover-open { transform: translateX(0); }
|
|
56
|
+
.ak-slideover-overlay {
|
|
57
|
+
position: fixed;
|
|
58
|
+
inset: 0;
|
|
59
|
+
z-index: var(--z-ak-overlay);
|
|
60
|
+
background: var(--color-ak-overlay);
|
|
61
|
+
opacity: 0;
|
|
62
|
+
visibility: hidden;
|
|
63
|
+
transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
64
|
+
visibility 240ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
65
|
+
}
|
|
66
|
+
.ak-slideover-overlay-open { opacity: 1; visibility: visible; }
|
|
67
|
+
|
|
68
|
+
/* .ak-open state class (generic visibility toggle) */
|
|
69
|
+
.ak-open {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
visibility: visible;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Stagger animation items */
|
|
75
|
+
.ak-stagger-item {
|
|
76
|
+
opacity: 0;
|
|
77
|
+
transform: translateY(8px);
|
|
78
|
+
transition: opacity var(--duration-ak-base) var(--ease-ak-default),
|
|
79
|
+
transform var(--duration-ak-base) var(--ease-ak-default);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Loading dots */
|
|
83
|
+
.ak-loading-dot {
|
|
84
|
+
width: 8px;
|
|
85
|
+
height: 8px;
|
|
86
|
+
border-radius: var(--radius-ak-full);
|
|
87
|
+
background: var(--color-ak-text-muted);
|
|
88
|
+
animation: ak-bounce 1.2s ease-in-out infinite;
|
|
89
|
+
}
|
|
90
|
+
.ak-loading-dot:nth-child(2) { animation-delay: 150ms; }
|
|
91
|
+
.ak-loading-dot:nth-child(3) { animation-delay: 300ms; }
|
|
92
|
+
|
|
93
|
+
/* Floating / drifting animations */
|
|
94
|
+
.ak-float { animation: ak-float 6s ease-in-out infinite; }
|
|
95
|
+
.ak-float-delayed { animation: ak-float-delayed 7s ease-in-out infinite 1.8s; }
|
|
96
|
+
.ak-drift { animation: ak-drift 26s linear infinite; }
|
|
97
|
+
.ak-drift-reverse { animation: ak-drift-reverse 20s linear infinite; }
|
|
98
|
+
.ak-pulse-ring { animation: ak-pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
|
|
99
|
+
|
|
100
|
+
/* Keyframes */
|
|
101
|
+
@keyframes ak-bounce {
|
|
102
|
+
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
|
103
|
+
40% { transform: scale(1); opacity: 1; }
|
|
104
|
+
}
|
|
105
|
+
@keyframes ak-float {
|
|
106
|
+
0%, 100% { transform: translateY(0); }
|
|
107
|
+
50% { transform: translateY(-10px); }
|
|
108
|
+
}
|
|
109
|
+
@keyframes ak-float-delayed {
|
|
110
|
+
0%, 100% { transform: translateY(0); }
|
|
111
|
+
50% { transform: translateY(-8px); }
|
|
112
|
+
}
|
|
113
|
+
@keyframes ak-drift {
|
|
114
|
+
0% { transform: translate(0, 0); }
|
|
115
|
+
25% { transform: translate(10px, -10px); }
|
|
116
|
+
50% { transform: translate(-5px, -20px); }
|
|
117
|
+
75% { transform: translate(-15px, -5px); }
|
|
118
|
+
100% { transform: translate(0, 0); }
|
|
119
|
+
}
|
|
120
|
+
@keyframes ak-drift-reverse {
|
|
121
|
+
0% { transform: translate(0, 0); }
|
|
122
|
+
25% { transform: translate(-10px, 10px); }
|
|
123
|
+
50% { transform: translate(5px, 20px); }
|
|
124
|
+
75% { transform: translate(15px, 5px); }
|
|
125
|
+
100% { transform: translate(0, 0); }
|
|
126
|
+
}
|
|
127
|
+
@keyframes ak-pulse-ring {
|
|
128
|
+
0% { transform: scale(0.8); opacity: 0.5; }
|
|
129
|
+
50% { transform: scale(1); opacity: 0.2; }
|
|
130
|
+
100% { transform: scale(0.8); opacity: 0.5; }
|
|
131
|
+
}
|
|
132
|
+
@keyframes ak-shimmer {
|
|
133
|
+
100% { transform: translateX(100%); }
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
|