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
package/primitives/icons.css
CHANGED
|
@@ -1,90 +1,90 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/* Icon primitives -- size scale, icon button, status icons, collapse/expand */
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/* Icon size scale (referenced by theme tokens) */
|
|
8
|
-
.ak-icon-xs { font-size: var(--size-ak-icon-xs); line-height: 1; }
|
|
9
|
-
.ak-icon-sm { font-size: var(--size-ak-icon-sm); line-height: 1; }
|
|
10
|
-
.ak-icon-md { font-size: var(--size-ak-icon-md); line-height: 1; }
|
|
11
|
-
.ak-icon-lg { font-size: var(--size-ak-icon-lg); line-height: 1; }
|
|
12
|
-
.ak-icon-xl { font-size: var(--size-ak-icon-xl); line-height: 1; }
|
|
13
|
-
.ak-icon-2xl { font-size: var(--size-ak-icon-2xl); line-height: 1; }
|
|
14
|
-
.ak-icon-3xl { font-size: var(--size-ak-icon-3xl); line-height: 1; }
|
|
15
|
-
|
|
16
|
-
/* Base icon container */
|
|
17
|
-
.ak-icon {
|
|
18
|
-
display: inline-flex;
|
|
19
|
-
align-items: center;
|
|
20
|
-
justify-content: center;
|
|
21
|
-
line-height: 1;
|
|
22
|
-
}
|
|
23
|
-
.ak-icon--sm { font-size: var(--size-ak-icon-sm); }
|
|
24
|
-
.ak-icon--md { font-size: var(--size-ak-icon-md); }
|
|
25
|
-
.ak-icon--lg { font-size: var(--size-ak-icon-lg); }
|
|
26
|
-
|
|
27
|
-
/* Icon button */
|
|
28
|
-
.ak-icon-btn {
|
|
29
|
-
display: inline-flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
justify-content: center;
|
|
32
|
-
width: 2rem;
|
|
33
|
-
height: 2rem;
|
|
34
|
-
border-radius: var(--radius-ak-md);
|
|
35
|
-
border: none;
|
|
36
|
-
background: none;
|
|
37
|
-
color: var(--color-ak-text-secondary);
|
|
38
|
-
cursor: pointer;
|
|
39
|
-
transition: background-color var(--duration-ak-fast) var(--ease-ak-default),
|
|
40
|
-
color var(--duration-ak-fast) var(--ease-ak-default);
|
|
41
|
-
}
|
|
42
|
-
.ak-icon-btn i {
|
|
43
|
-
font-size: var(--size-ak-icon-md);
|
|
44
|
-
}
|
|
45
|
-
.ak-icon-btn:hover {
|
|
46
|
-
background: var(--color-ak-hover);
|
|
47
|
-
color: var(--color-ak-text);
|
|
48
|
-
}
|
|
49
|
-
.ak-icon-btn:focus { outline: none; }
|
|
50
|
-
.ak-icon-btn:focus-visible {
|
|
51
|
-
outline: 2px solid var(--color-ak-border-focus);
|
|
52
|
-
outline-offset: 2px;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/* Icon box (decorative icon container) */
|
|
56
|
-
.ak-icon-box {
|
|
57
|
-
display: flex;
|
|
58
|
-
align-items: center;
|
|
59
|
-
justify-content: center;
|
|
60
|
-
flex-shrink: 0;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/* Status icons (avatar badges with monochrome backgrounds by default).
|
|
64
|
-
Icon shape carries the semantic meaning; color adds weight only when
|
|
65
|
-
truly needed (e.g., --blocked stays red as a hard warning signal).
|
|
66
|
-
Add a semantic modifier class to override any of these on a per-use basis. */
|
|
67
|
-
.ak-status-icon {
|
|
68
|
-
position: absolute;
|
|
69
|
-
border-radius: var(--radius-ak-full);
|
|
70
|
-
display: flex;
|
|
71
|
-
align-items: center;
|
|
72
|
-
justify-content: center;
|
|
73
|
-
color: var(--color-ak-on-primary);
|
|
74
|
-
}
|
|
75
|
-
.ak-status-icon--add { background: var(--color-ak-text-secondary); }
|
|
76
|
-
.ak-status-icon--blocked { background: var(--color-ak-danger); } /* hard warning — color is semantic */
|
|
77
|
-
.ak-status-icon--call { background: var(--color-ak-primary); }
|
|
78
|
-
.ak-status-icon--camera { background: var(--color-ak-primary); }
|
|
79
|
-
.ak-status-icon--editing { background: var(--color-ak-primary); }
|
|
80
|
-
.ak-status-icon--locked { background: var(--color-ak-primary); }
|
|
81
|
-
.ak-status-icon--sparkle { background: var(--color-ak-primary); }
|
|
82
|
-
.ak-status-icon--star { background: var(--color-ak-primary); }
|
|
83
|
-
.ak-status-icon--timer { background: var(--color-ak-text-secondary); }
|
|
84
|
-
.ak-status-icon--verified { background: var(--color-ak-primary); }
|
|
85
|
-
|
|
86
|
-
/* Collapse / expand toggle icons */
|
|
87
|
-
.ak-collapse-icon { display: none; }
|
|
88
|
-
.ak-expand-icon { display: block; }
|
|
89
|
-
|
|
90
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
/* Icon primitives -- size scale, icon button, status icons, collapse/expand */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
/* Icon size scale (referenced by theme tokens) */
|
|
8
|
+
.ak-icon-xs { font-size: var(--size-ak-icon-xs); line-height: 1; }
|
|
9
|
+
.ak-icon-sm { font-size: var(--size-ak-icon-sm); line-height: 1; }
|
|
10
|
+
.ak-icon-md { font-size: var(--size-ak-icon-md); line-height: 1; }
|
|
11
|
+
.ak-icon-lg { font-size: var(--size-ak-icon-lg); line-height: 1; }
|
|
12
|
+
.ak-icon-xl { font-size: var(--size-ak-icon-xl); line-height: 1; }
|
|
13
|
+
.ak-icon-2xl { font-size: var(--size-ak-icon-2xl); line-height: 1; }
|
|
14
|
+
.ak-icon-3xl { font-size: var(--size-ak-icon-3xl); line-height: 1; }
|
|
15
|
+
|
|
16
|
+
/* Base icon container */
|
|
17
|
+
.ak-icon {
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
line-height: 1;
|
|
22
|
+
}
|
|
23
|
+
.ak-icon--sm { font-size: var(--size-ak-icon-sm); }
|
|
24
|
+
.ak-icon--md { font-size: var(--size-ak-icon-md); }
|
|
25
|
+
.ak-icon--lg { font-size: var(--size-ak-icon-lg); }
|
|
26
|
+
|
|
27
|
+
/* Icon button */
|
|
28
|
+
.ak-icon-btn {
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
width: 2rem;
|
|
33
|
+
height: 2rem;
|
|
34
|
+
border-radius: var(--radius-ak-md);
|
|
35
|
+
border: none;
|
|
36
|
+
background: none;
|
|
37
|
+
color: var(--color-ak-text-secondary);
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
transition: background-color var(--duration-ak-fast) var(--ease-ak-default),
|
|
40
|
+
color var(--duration-ak-fast) var(--ease-ak-default);
|
|
41
|
+
}
|
|
42
|
+
.ak-icon-btn i {
|
|
43
|
+
font-size: var(--size-ak-icon-md);
|
|
44
|
+
}
|
|
45
|
+
.ak-icon-btn:hover {
|
|
46
|
+
background: var(--color-ak-hover);
|
|
47
|
+
color: var(--color-ak-text);
|
|
48
|
+
}
|
|
49
|
+
.ak-icon-btn:focus { outline: none; }
|
|
50
|
+
.ak-icon-btn:focus-visible {
|
|
51
|
+
outline: 2px solid var(--color-ak-border-focus);
|
|
52
|
+
outline-offset: 2px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Icon box (decorative icon container) */
|
|
56
|
+
.ak-icon-box {
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
flex-shrink: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Status icons (avatar badges with monochrome backgrounds by default).
|
|
64
|
+
Icon shape carries the semantic meaning; color adds weight only when
|
|
65
|
+
truly needed (e.g., --blocked stays red as a hard warning signal).
|
|
66
|
+
Add a semantic modifier class to override any of these on a per-use basis. */
|
|
67
|
+
.ak-status-icon {
|
|
68
|
+
position: absolute;
|
|
69
|
+
border-radius: var(--radius-ak-full);
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
color: var(--color-ak-on-primary);
|
|
74
|
+
}
|
|
75
|
+
.ak-status-icon--add { background: var(--color-ak-text-secondary); }
|
|
76
|
+
.ak-status-icon--blocked { background: var(--color-ak-danger); } /* hard warning — color is semantic */
|
|
77
|
+
.ak-status-icon--call { background: var(--color-ak-primary); }
|
|
78
|
+
.ak-status-icon--camera { background: var(--color-ak-primary); }
|
|
79
|
+
.ak-status-icon--editing { background: var(--color-ak-primary); }
|
|
80
|
+
.ak-status-icon--locked { background: var(--color-ak-primary); }
|
|
81
|
+
.ak-status-icon--sparkle { background: var(--color-ak-primary); }
|
|
82
|
+
.ak-status-icon--star { background: var(--color-ak-primary); }
|
|
83
|
+
.ak-status-icon--timer { background: var(--color-ak-text-secondary); }
|
|
84
|
+
.ak-status-icon--verified { background: var(--color-ak-primary); }
|
|
85
|
+
|
|
86
|
+
/* Collapse / expand toggle icons */
|
|
87
|
+
.ak-collapse-icon { display: none; }
|
|
88
|
+
.ak-expand-icon { display: block; }
|
|
89
|
+
|
|
90
|
+
|
package/primitives/layout.css
CHANGED
|
@@ -1,217 +1,217 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/* Layout primitives -- stack, cluster, center, sidebar, grid, surfaces, skeleton, card shell, scrollbar */
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/* ================================================================
|
|
8
|
-
Layout Primitives
|
|
9
|
-
Breakpoint-free, intrinsic responsive patterns.
|
|
10
|
-
Based on Every Layout (Heydon Pickering & Andy Bell).
|
|
11
|
-
================================================================ */
|
|
12
|
-
|
|
13
|
-
/* Stack -- vertical spacing between children */
|
|
14
|
-
.ak-stack {
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: column;
|
|
17
|
-
gap: var(--ak-stack-gap, var(--spacing-ak-fl-sm));
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/* Cluster -- horizontal wrapping group */
|
|
21
|
-
.ak-cluster {
|
|
22
|
-
display: flex;
|
|
23
|
-
flex-wrap: wrap;
|
|
24
|
-
gap: var(--ak-cluster-gap, var(--spacing-ak-fl-xs));
|
|
25
|
-
align-items: var(--ak-cluster-align, center);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* Center -- horizontally centered content with max-width */
|
|
29
|
-
.ak-center {
|
|
30
|
-
box-sizing: content-box;
|
|
31
|
-
max-inline-size: var(--ak-center-max, 75rem);
|
|
32
|
-
margin-inline: auto;
|
|
33
|
-
padding-inline: var(--ak-center-gutter, var(--spacing-ak-fl-sm));
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* Sidebar layout -- two-panel: fixed sidebar + flexible main */
|
|
37
|
-
.ak-sidebar {
|
|
38
|
-
display: flex;
|
|
39
|
-
flex-wrap: wrap;
|
|
40
|
-
gap: var(--ak-sidebar-gap, var(--spacing-ak-fl-md));
|
|
41
|
-
}
|
|
42
|
-
.ak-sidebar > :first-child {
|
|
43
|
-
flex-basis: var(--ak-sidebar-width, 18rem);
|
|
44
|
-
flex-grow: 1;
|
|
45
|
-
}
|
|
46
|
-
.ak-sidebar > :last-child {
|
|
47
|
-
flex-basis: 0;
|
|
48
|
-
flex-grow: 999;
|
|
49
|
-
min-inline-size: var(--ak-sidebar-threshold, 50%);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/* Switcher -- horizontal that flips to vertical */
|
|
53
|
-
.ak-switcher {
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-wrap: wrap;
|
|
56
|
-
gap: var(--ak-switcher-gap, var(--spacing-ak-fl-sm));
|
|
57
|
-
}
|
|
58
|
-
.ak-switcher > * {
|
|
59
|
-
flex-basis: calc((var(--ak-switcher-threshold, 30rem) - 100%) * 999);
|
|
60
|
-
flex-grow: 1;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/* Cover -- fills viewport, centers primary content */
|
|
64
|
-
.ak-cover {
|
|
65
|
-
display: flex;
|
|
66
|
-
flex-direction: column;
|
|
67
|
-
min-block-size: var(--ak-cover-min, 100dvh);
|
|
68
|
-
padding: var(--ak-cover-padding, var(--spacing-ak-fl-md));
|
|
69
|
-
}
|
|
70
|
-
.ak-cover > * { margin-block: auto; }
|
|
71
|
-
.ak-cover > :first-child:not(.ak-cover-center) { margin-block-start: 0; }
|
|
72
|
-
.ak-cover > :last-child:not(.ak-cover-center) { margin-block-end: 0; }
|
|
73
|
-
|
|
74
|
-
/* Auto-Responsive Grid (RAM pattern) */
|
|
75
|
-
.ak-grid {
|
|
76
|
-
display: grid;
|
|
77
|
-
gap: var(--ak-grid-gap, var(--spacing-ak-fl-sm));
|
|
78
|
-
grid-template-columns: repeat(
|
|
79
|
-
auto-fill,
|
|
80
|
-
minmax(min(var(--ak-grid-min, 280px), 100%), 1fr)
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/* Container query helper */
|
|
85
|
-
.ak-container {
|
|
86
|
-
container-type: inline-size;
|
|
87
|
-
}
|
|
88
|
-
.ak-container-named {
|
|
89
|
-
container-type: inline-size;
|
|
90
|
-
container-name: var(--ak-container-name, content);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
/* Raised card / panel surface */
|
|
94
|
-
.ak-surface-raised {
|
|
95
|
-
background: var(--ak-surface-raised-bg, var(--color-ak-surface-raised));
|
|
96
|
-
border: 1px solid var(--ak-surface-raised-border, var(--color-ak-border));
|
|
97
|
-
box-shadow: var(--ak-surface-raised-shadow, var(--shadow-ak-md));
|
|
98
|
-
}
|
|
99
|
-
/* Glass-like elevated surface */
|
|
100
|
-
.ak-surface-glass {
|
|
101
|
-
background: var(--ak-surface-glass-bg, var(--color-ak-surface-glass));
|
|
102
|
-
border: 1px solid var(--ak-surface-glass-border, var(--color-ak-border-subtle));
|
|
103
|
-
backdrop-filter: blur(var(--ak-surface-glass-blur, 12px));
|
|
104
|
-
}
|
|
105
|
-
/* Highlight overlay for premium surfaces */
|
|
106
|
-
.ak-sheen {
|
|
107
|
-
position: relative;
|
|
108
|
-
}
|
|
109
|
-
.ak-sheen::before {
|
|
110
|
-
content: "";
|
|
111
|
-
position: absolute;
|
|
112
|
-
inset: 0;
|
|
113
|
-
border-radius: inherit;
|
|
114
|
-
background: linear-gradient(
|
|
115
|
-
145deg,
|
|
116
|
-
var(--ak-sheen-highlight, var(--color-ak-highlight-soft)),
|
|
117
|
-
rgba(255, 255, 255, 0) 65%
|
|
118
|
-
);
|
|
119
|
-
opacity: var(--ak-sheen-opacity, 1);
|
|
120
|
-
pointer-events: none;
|
|
121
|
-
}
|
|
122
|
-
.ak-sheen-strong {
|
|
123
|
-
--ak-sheen-highlight: var(--color-ak-highlight-strong);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
/* Skeleton loading */
|
|
127
|
-
.ak-skeleton {
|
|
128
|
-
position: relative;
|
|
129
|
-
overflow: hidden;
|
|
130
|
-
background: linear-gradient(
|
|
131
|
-
180deg,
|
|
132
|
-
var(--ak-skeleton-base, var(--color-ak-skeleton-base)),
|
|
133
|
-
var(--ak-skeleton-base-end, var(--color-ak-surface-2))
|
|
134
|
-
);
|
|
135
|
-
border-radius: var(--ak-skeleton-radius, var(--radius-ak-md));
|
|
136
|
-
color: transparent !important;
|
|
137
|
-
user-select: none;
|
|
138
|
-
}
|
|
139
|
-
.ak-skeleton::after {
|
|
140
|
-
content: "";
|
|
141
|
-
position: absolute;
|
|
142
|
-
inset: 0;
|
|
143
|
-
transform: translateX(-100%);
|
|
144
|
-
background: linear-gradient(
|
|
145
|
-
90deg,
|
|
146
|
-
rgba(255, 255, 255, 0),
|
|
147
|
-
var(--ak-skeleton-shine, var(--color-ak-skeleton-shine)),
|
|
148
|
-
rgba(255, 255, 255, 0)
|
|
149
|
-
);
|
|
150
|
-
animation: ak-skeleton-shimmer var(--duration-ak-skeleton) ease-in-out infinite;
|
|
151
|
-
}
|
|
152
|
-
.ak-skeleton-pill { border-radius: var(--radius-ak-full); }
|
|
153
|
-
.ak-skeleton-circle { border-radius: var(--radius-ak-full); }
|
|
154
|
-
|
|
155
|
-
/* Card shell scaffold */
|
|
156
|
-
.ak-card-shell {
|
|
157
|
-
position: relative;
|
|
158
|
-
overflow: hidden;
|
|
159
|
-
border: 1px solid var(--ak-card-shell-border, var(--color-ak-border));
|
|
160
|
-
border-radius: var(--ak-card-shell-radius, var(--radius-ak-lg));
|
|
161
|
-
background: var(--ak-card-shell-bg, var(--color-ak-surface-raised));
|
|
162
|
-
box-shadow: var(--ak-card-shell-shadow, var(--shadow-ak-md));
|
|
163
|
-
transition:
|
|
164
|
-
transform var(--duration-ak-base) var(--ease-ak-default),
|
|
165
|
-
box-shadow var(--duration-ak-base) var(--ease-ak-default),
|
|
166
|
-
border-color var(--duration-ak-base) var(--ease-ak-default);
|
|
167
|
-
}
|
|
168
|
-
.ak-card-shell-interactive:hover,
|
|
169
|
-
.ak-card-shell-interactive:focus-within {
|
|
170
|
-
transform: translateY(var(--ak-card-shell-lift, -2px));
|
|
171
|
-
border-color: var(--ak-card-shell-border-hover, var(--color-ak-border-strong));
|
|
172
|
-
box-shadow: var(--ak-card-shell-shadow-hover, var(--shadow-ak-lg));
|
|
173
|
-
}
|
|
174
|
-
.ak-card-shell-inner {
|
|
175
|
-
position: relative;
|
|
176
|
-
z-index: 1;
|
|
177
|
-
display: flex;
|
|
178
|
-
flex-direction: column;
|
|
179
|
-
gap: var(--ak-card-shell-gap, var(--spacing-ak-3));
|
|
180
|
-
}
|
|
181
|
-
.ak-card-shell-header {
|
|
182
|
-
display: grid;
|
|
183
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
184
|
-
align-items: start;
|
|
185
|
-
gap: var(--ak-card-shell-header-gap, var(--spacing-ak-2));
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
/* Scrollbar */
|
|
189
|
-
.ak-scrollbar {
|
|
190
|
-
scrollbar-width: thin;
|
|
191
|
-
scrollbar-color: var(--color-ak-border-strong) transparent;
|
|
192
|
-
}
|
|
193
|
-
.ak-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
194
|
-
.ak-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
195
|
-
.ak-scrollbar::-webkit-scrollbar-thumb {
|
|
196
|
-
background: var(--color-ak-border-strong);
|
|
197
|
-
border-radius: var(--radius-ak-full);
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
/* Grid tile */
|
|
201
|
-
.ak-grid-tile {
|
|
202
|
-
border: 1px solid var(--color-ak-border);
|
|
203
|
-
border-radius: var(--radius-ak-lg);
|
|
204
|
-
padding: var(--spacing-ak-3);
|
|
205
|
-
transition: border-color var(--duration-ak-fast) var(--ease-ak-default);
|
|
206
|
-
}
|
|
207
|
-
.ak-grid-tile:hover { border-color: var(--color-ak-border-strong); }
|
|
208
|
-
|
|
209
|
-
/* CTA wrap */
|
|
210
|
-
.ak-cta-wrap {
|
|
211
|
-
display: flex;
|
|
212
|
-
flex-wrap: wrap;
|
|
213
|
-
gap: var(--spacing-ak-2);
|
|
214
|
-
align-items: center;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
/* Layout primitives -- stack, cluster, center, sidebar, grid, surfaces, skeleton, card shell, scrollbar */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
/* ================================================================
|
|
8
|
+
Layout Primitives
|
|
9
|
+
Breakpoint-free, intrinsic responsive patterns.
|
|
10
|
+
Based on Every Layout (Heydon Pickering & Andy Bell).
|
|
11
|
+
================================================================ */
|
|
12
|
+
|
|
13
|
+
/* Stack -- vertical spacing between children */
|
|
14
|
+
.ak-stack {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
gap: var(--ak-stack-gap, var(--spacing-ak-fl-sm));
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Cluster -- horizontal wrapping group */
|
|
21
|
+
.ak-cluster {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-wrap: wrap;
|
|
24
|
+
gap: var(--ak-cluster-gap, var(--spacing-ak-fl-xs));
|
|
25
|
+
align-items: var(--ak-cluster-align, center);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Center -- horizontally centered content with max-width */
|
|
29
|
+
.ak-center {
|
|
30
|
+
box-sizing: content-box;
|
|
31
|
+
max-inline-size: var(--ak-center-max, 75rem);
|
|
32
|
+
margin-inline: auto;
|
|
33
|
+
padding-inline: var(--ak-center-gutter, var(--spacing-ak-fl-sm));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Sidebar layout -- two-panel: fixed sidebar + flexible main */
|
|
37
|
+
.ak-sidebar {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-wrap: wrap;
|
|
40
|
+
gap: var(--ak-sidebar-gap, var(--spacing-ak-fl-md));
|
|
41
|
+
}
|
|
42
|
+
.ak-sidebar > :first-child {
|
|
43
|
+
flex-basis: var(--ak-sidebar-width, 18rem);
|
|
44
|
+
flex-grow: 1;
|
|
45
|
+
}
|
|
46
|
+
.ak-sidebar > :last-child {
|
|
47
|
+
flex-basis: 0;
|
|
48
|
+
flex-grow: 999;
|
|
49
|
+
min-inline-size: var(--ak-sidebar-threshold, 50%);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Switcher -- horizontal that flips to vertical */
|
|
53
|
+
.ak-switcher {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-wrap: wrap;
|
|
56
|
+
gap: var(--ak-switcher-gap, var(--spacing-ak-fl-sm));
|
|
57
|
+
}
|
|
58
|
+
.ak-switcher > * {
|
|
59
|
+
flex-basis: calc((var(--ak-switcher-threshold, 30rem) - 100%) * 999);
|
|
60
|
+
flex-grow: 1;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Cover -- fills viewport, centers primary content */
|
|
64
|
+
.ak-cover {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
min-block-size: var(--ak-cover-min, 100dvh);
|
|
68
|
+
padding: var(--ak-cover-padding, var(--spacing-ak-fl-md));
|
|
69
|
+
}
|
|
70
|
+
.ak-cover > * { margin-block: auto; }
|
|
71
|
+
.ak-cover > :first-child:not(.ak-cover-center) { margin-block-start: 0; }
|
|
72
|
+
.ak-cover > :last-child:not(.ak-cover-center) { margin-block-end: 0; }
|
|
73
|
+
|
|
74
|
+
/* Auto-Responsive Grid (RAM pattern) */
|
|
75
|
+
.ak-grid {
|
|
76
|
+
display: grid;
|
|
77
|
+
gap: var(--ak-grid-gap, var(--spacing-ak-fl-sm));
|
|
78
|
+
grid-template-columns: repeat(
|
|
79
|
+
auto-fill,
|
|
80
|
+
minmax(min(var(--ak-grid-min, 280px), 100%), 1fr)
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Container query helper */
|
|
85
|
+
.ak-container {
|
|
86
|
+
container-type: inline-size;
|
|
87
|
+
}
|
|
88
|
+
.ak-container-named {
|
|
89
|
+
container-type: inline-size;
|
|
90
|
+
container-name: var(--ak-container-name, content);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Raised card / panel surface */
|
|
94
|
+
.ak-surface-raised {
|
|
95
|
+
background: var(--ak-surface-raised-bg, var(--color-ak-surface-raised));
|
|
96
|
+
border: 1px solid var(--ak-surface-raised-border, var(--color-ak-border));
|
|
97
|
+
box-shadow: var(--ak-surface-raised-shadow, var(--shadow-ak-md));
|
|
98
|
+
}
|
|
99
|
+
/* Glass-like elevated surface */
|
|
100
|
+
.ak-surface-glass {
|
|
101
|
+
background: var(--ak-surface-glass-bg, var(--color-ak-surface-glass));
|
|
102
|
+
border: 1px solid var(--ak-surface-glass-border, var(--color-ak-border-subtle));
|
|
103
|
+
backdrop-filter: blur(var(--ak-surface-glass-blur, 12px));
|
|
104
|
+
}
|
|
105
|
+
/* Highlight overlay for premium surfaces */
|
|
106
|
+
.ak-sheen {
|
|
107
|
+
position: relative;
|
|
108
|
+
}
|
|
109
|
+
.ak-sheen::before {
|
|
110
|
+
content: "";
|
|
111
|
+
position: absolute;
|
|
112
|
+
inset: 0;
|
|
113
|
+
border-radius: inherit;
|
|
114
|
+
background: linear-gradient(
|
|
115
|
+
145deg,
|
|
116
|
+
var(--ak-sheen-highlight, var(--color-ak-highlight-soft)),
|
|
117
|
+
rgba(255, 255, 255, 0) 65%
|
|
118
|
+
);
|
|
119
|
+
opacity: var(--ak-sheen-opacity, 1);
|
|
120
|
+
pointer-events: none;
|
|
121
|
+
}
|
|
122
|
+
.ak-sheen-strong {
|
|
123
|
+
--ak-sheen-highlight: var(--color-ak-highlight-strong);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Skeleton loading */
|
|
127
|
+
.ak-skeleton {
|
|
128
|
+
position: relative;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
background: linear-gradient(
|
|
131
|
+
180deg,
|
|
132
|
+
var(--ak-skeleton-base, var(--color-ak-skeleton-base)),
|
|
133
|
+
var(--ak-skeleton-base-end, var(--color-ak-surface-2))
|
|
134
|
+
);
|
|
135
|
+
border-radius: var(--ak-skeleton-radius, var(--radius-ak-md));
|
|
136
|
+
color: transparent !important;
|
|
137
|
+
user-select: none;
|
|
138
|
+
}
|
|
139
|
+
.ak-skeleton::after {
|
|
140
|
+
content: "";
|
|
141
|
+
position: absolute;
|
|
142
|
+
inset: 0;
|
|
143
|
+
transform: translateX(-100%);
|
|
144
|
+
background: linear-gradient(
|
|
145
|
+
90deg,
|
|
146
|
+
rgba(255, 255, 255, 0),
|
|
147
|
+
var(--ak-skeleton-shine, var(--color-ak-skeleton-shine)),
|
|
148
|
+
rgba(255, 255, 255, 0)
|
|
149
|
+
);
|
|
150
|
+
animation: ak-skeleton-shimmer var(--duration-ak-skeleton) ease-in-out infinite;
|
|
151
|
+
}
|
|
152
|
+
.ak-skeleton-pill { border-radius: var(--radius-ak-full); }
|
|
153
|
+
.ak-skeleton-circle { border-radius: var(--radius-ak-full); }
|
|
154
|
+
|
|
155
|
+
/* Card shell scaffold */
|
|
156
|
+
.ak-card-shell {
|
|
157
|
+
position: relative;
|
|
158
|
+
overflow: hidden;
|
|
159
|
+
border: 1px solid var(--ak-card-shell-border, var(--color-ak-border));
|
|
160
|
+
border-radius: var(--ak-card-shell-radius, var(--radius-ak-lg));
|
|
161
|
+
background: var(--ak-card-shell-bg, var(--color-ak-surface-raised));
|
|
162
|
+
box-shadow: var(--ak-card-shell-shadow, var(--shadow-ak-md));
|
|
163
|
+
transition:
|
|
164
|
+
transform var(--duration-ak-base) var(--ease-ak-default),
|
|
165
|
+
box-shadow var(--duration-ak-base) var(--ease-ak-default),
|
|
166
|
+
border-color var(--duration-ak-base) var(--ease-ak-default);
|
|
167
|
+
}
|
|
168
|
+
.ak-card-shell-interactive:hover,
|
|
169
|
+
.ak-card-shell-interactive:focus-within {
|
|
170
|
+
transform: translateY(var(--ak-card-shell-lift, -2px));
|
|
171
|
+
border-color: var(--ak-card-shell-border-hover, var(--color-ak-border-strong));
|
|
172
|
+
box-shadow: var(--ak-card-shell-shadow-hover, var(--shadow-ak-lg));
|
|
173
|
+
}
|
|
174
|
+
.ak-card-shell-inner {
|
|
175
|
+
position: relative;
|
|
176
|
+
z-index: 1;
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-direction: column;
|
|
179
|
+
gap: var(--ak-card-shell-gap, var(--spacing-ak-3));
|
|
180
|
+
}
|
|
181
|
+
.ak-card-shell-header {
|
|
182
|
+
display: grid;
|
|
183
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
184
|
+
align-items: start;
|
|
185
|
+
gap: var(--ak-card-shell-header-gap, var(--spacing-ak-2));
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* Scrollbar */
|
|
189
|
+
.ak-scrollbar {
|
|
190
|
+
scrollbar-width: thin;
|
|
191
|
+
scrollbar-color: var(--color-ak-border-strong) transparent;
|
|
192
|
+
}
|
|
193
|
+
.ak-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
194
|
+
.ak-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
195
|
+
.ak-scrollbar::-webkit-scrollbar-thumb {
|
|
196
|
+
background: var(--color-ak-border-strong);
|
|
197
|
+
border-radius: var(--radius-ak-full);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Grid tile */
|
|
201
|
+
.ak-grid-tile {
|
|
202
|
+
border: 1px solid var(--color-ak-border);
|
|
203
|
+
border-radius: var(--radius-ak-lg);
|
|
204
|
+
padding: var(--spacing-ak-3);
|
|
205
|
+
transition: border-color var(--duration-ak-fast) var(--ease-ak-default);
|
|
206
|
+
}
|
|
207
|
+
.ak-grid-tile:hover { border-color: var(--color-ak-border-strong); }
|
|
208
|
+
|
|
209
|
+
/* CTA wrap */
|
|
210
|
+
.ak-cta-wrap {
|
|
211
|
+
display: flex;
|
|
212
|
+
flex-wrap: wrap;
|
|
213
|
+
gap: var(--spacing-ak-2);
|
|
214
|
+
align-items: center;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
|