@rcnr/theme 2.0.6 → 4.0.0
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/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +125 -61
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +111 -48
- package/dist/index.mjs.map +1 -1
- package/index.css +301 -66
- package/package.json +3 -1
package/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* @rcnr/theme
|
|
2
|
-
RCNR Brand Foundation — tokens,
|
|
1
|
+
/* @rcnr/theme v4.0.0
|
|
2
|
+
RCNR Brand Foundation — tokens, components, scrollbars, animations
|
|
3
3
|
|
|
4
4
|
Usage (Tailwind 4):
|
|
5
5
|
@import "tailwindcss";
|
|
@@ -14,54 +14,103 @@
|
|
|
14
14
|
@source "./dist";
|
|
15
15
|
|
|
16
16
|
/* --- Tailwind 4 theme tokens ---
|
|
17
|
-
Generates utility classes: bg-brand, text-
|
|
17
|
+
Generates utility classes: bg-brand, text-fg, text-fg-muted, etc.
|
|
18
18
|
Tailwind 3 consumers: this block is harmlessly ignored. */
|
|
19
19
|
@theme {
|
|
20
20
|
--font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
21
21
|
--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
|
|
22
22
|
|
|
23
|
-
--color-brand: #
|
|
24
|
-
--color-brand-dark: #
|
|
25
|
-
--color-brand-glow: rgba(
|
|
23
|
+
--color-brand: #7ec8c8;
|
|
24
|
+
--color-brand-dark: #5a9ea5;
|
|
25
|
+
--color-brand-glow: rgba(126, 200, 200, 0.15);
|
|
26
26
|
|
|
27
|
-
--color-amber: #
|
|
28
|
-
--color-amber-hover: #
|
|
27
|
+
--color-amber: #E8B84D;
|
|
28
|
+
--color-amber-hover: #F0C870;
|
|
29
29
|
|
|
30
30
|
--color-rose: #FB7185;
|
|
31
31
|
|
|
32
|
-
--color-surface: #
|
|
33
|
-
--color-surface-light: #
|
|
34
|
-
--color-surface-lighter: #
|
|
35
|
-
--color-midnight: #
|
|
32
|
+
--color-surface: #1c2028;
|
|
33
|
+
--color-surface-light: #22262f;
|
|
34
|
+
--color-surface-lighter: #2c3340;
|
|
35
|
+
--color-midnight: #111418;
|
|
36
|
+
|
|
37
|
+
/* Theme-aware text utilities: text-fg, text-fg-muted, text-fg-dim */
|
|
38
|
+
--color-fg: var(--rcnr-text);
|
|
39
|
+
--color-fg-muted: var(--rcnr-text2);
|
|
40
|
+
--color-fg-dim: var(--rcnr-text3);
|
|
36
41
|
}
|
|
37
42
|
|
|
38
43
|
/* --- CSS custom properties (universal) ---
|
|
39
44
|
Works in Tailwind 3, Tailwind 4, and non-Tailwind contexts.
|
|
40
|
-
|
|
45
|
+
Legacy shorthand names kept for backward compatibility. */
|
|
41
46
|
:root {
|
|
42
|
-
--deep-sea: #
|
|
43
|
-
--midnight: #
|
|
44
|
-
--ice: #
|
|
45
|
-
--ice-muted: #
|
|
46
|
-
--ice-glow: rgba(
|
|
47
|
-
--ice-subtle: #
|
|
48
|
-
--amber: #
|
|
49
|
-
--amber-hover: #
|
|
47
|
+
--deep-sea: #1c2028;
|
|
48
|
+
--midnight: #111418;
|
|
49
|
+
--ice: #7ec8c8;
|
|
50
|
+
--ice-muted: #5a9ea5;
|
|
51
|
+
--ice-glow: rgba(126, 200, 200, 0.15);
|
|
52
|
+
--ice-subtle: #22262f;
|
|
53
|
+
--amber: #E8B84D;
|
|
54
|
+
--amber-hover: #F0C870;
|
|
55
|
+
|
|
56
|
+
/* --- RCNR design tokens (dark mode default) --- */
|
|
57
|
+
--rcnr-bg: #161a20;
|
|
58
|
+
--rcnr-nav: #111418;
|
|
59
|
+
--rcnr-surface: #1c2028;
|
|
60
|
+
--rcnr-surface2: #22262f;
|
|
61
|
+
--rcnr-border: #2c3340;
|
|
62
|
+
--rcnr-text: #e4ecf4;
|
|
63
|
+
--rcnr-text2: #8ea3ba;
|
|
64
|
+
--rcnr-text3: #506680;
|
|
65
|
+
--rcnr-accent: #7ec8c8;
|
|
66
|
+
--rcnr-accent-dim: rgba(126, 200, 200, 0.10);
|
|
67
|
+
--rcnr-accent-muted:#5a9ea5;
|
|
68
|
+
--rcnr-cta: #E8B84D;
|
|
69
|
+
--rcnr-cta-hover: #F0C870;
|
|
70
|
+
--rcnr-cta-text: #1a0f00;
|
|
71
|
+
--rcnr-danger: #fb7185;
|
|
72
|
+
--rcnr-overlay: rgba(0, 12, 23, 0.85);
|
|
73
|
+
--rcnr-logo-fill: #7ec8c8;
|
|
74
|
+
|
|
75
|
+
--rcnr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
|
|
76
|
+
--rcnr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
77
|
+
--rcnr-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.20);
|
|
50
78
|
}
|
|
51
79
|
|
|
52
|
-
/* ---
|
|
80
|
+
/* --- RCNR design tokens (light mode) --- */
|
|
81
|
+
[data-theme="light"] {
|
|
82
|
+
--rcnr-bg: #f4f5f7;
|
|
83
|
+
--rcnr-nav: #ffffff;
|
|
84
|
+
--rcnr-surface: #ffffff;
|
|
85
|
+
--rcnr-surface2: #eef0f3;
|
|
86
|
+
--rcnr-border: #d4d8e0;
|
|
87
|
+
--rcnr-text: #1c1f26;
|
|
88
|
+
--rcnr-text2: #545c6a;
|
|
89
|
+
--rcnr-text3: #8990a0;
|
|
90
|
+
--rcnr-accent: #0f8588;
|
|
91
|
+
--rcnr-accent-dim: rgba(15, 133, 136, 0.07);
|
|
92
|
+
--rcnr-accent-muted:#1a9e9e;
|
|
93
|
+
--rcnr-cta: #cf8f1a;
|
|
94
|
+
--rcnr-cta-hover: #b87e10;
|
|
95
|
+
--rcnr-cta-text: #ffffff;
|
|
96
|
+
--rcnr-danger: #dc2646;
|
|
97
|
+
--rcnr-overlay: rgba(0, 0, 0, 0.4);
|
|
98
|
+
--rcnr-logo-fill: #1c1f26;
|
|
99
|
+
|
|
100
|
+
--rcnr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
101
|
+
--rcnr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
102
|
+
--rcnr-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.06);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* --- Body --- */
|
|
53
106
|
body {
|
|
54
107
|
margin: 0;
|
|
55
|
-
color:
|
|
108
|
+
color: var(--rcnr-text);
|
|
56
109
|
font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
57
110
|
-webkit-font-smoothing: antialiased;
|
|
58
111
|
-moz-osx-font-smoothing: grayscale;
|
|
59
|
-
background:
|
|
60
|
-
|
|
61
|
-
linear-gradient(90deg, rgba(153, 217, 217, 0.05) 1px, transparent 1px),
|
|
62
|
-
#001628;
|
|
63
|
-
background-size: 60px 60px, 60px 60px, auto;
|
|
64
|
-
background-attachment: fixed;
|
|
112
|
+
background: var(--rcnr-bg);
|
|
113
|
+
transition: background-color 0.35s ease, color 0.35s ease;
|
|
65
114
|
}
|
|
66
115
|
|
|
67
116
|
/* --- Root container --- */
|
|
@@ -72,24 +121,74 @@ body {
|
|
|
72
121
|
flex-direction: column;
|
|
73
122
|
}
|
|
74
123
|
|
|
75
|
-
/* --- Glass card --- */
|
|
124
|
+
/* --- Glass card (nav bar) --- */
|
|
76
125
|
.glass-card {
|
|
77
|
-
background:
|
|
126
|
+
background: var(--rcnr-nav);
|
|
127
|
+
backdrop-filter: blur(16px);
|
|
128
|
+
-webkit-backdrop-filter: blur(16px);
|
|
129
|
+
border: 1px solid var(--rcnr-border);
|
|
130
|
+
transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
[data-theme="light"] .glass-card {
|
|
78
134
|
backdrop-filter: blur(12px);
|
|
79
135
|
-webkit-backdrop-filter: blur(12px);
|
|
80
|
-
|
|
136
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.03);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* --- Card --- */
|
|
140
|
+
.rcnr-card {
|
|
141
|
+
background: var(--rcnr-surface);
|
|
142
|
+
border: 1px solid var(--rcnr-border);
|
|
143
|
+
border-radius: 16px;
|
|
144
|
+
box-shadow: var(--rcnr-shadow-sm);
|
|
145
|
+
transition: transform 0.28s cubic-bezier(0.25, 0.1, 0.25, 1.0),
|
|
146
|
+
box-shadow 0.28s cubic-bezier(0.25, 0.1, 0.25, 1.0),
|
|
147
|
+
border-color 0.28s cubic-bezier(0.25, 0.1, 0.25, 1.0),
|
|
148
|
+
background-color 0.28s cubic-bezier(0.25, 0.1, 0.25, 1.0);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.rcnr-card:hover {
|
|
152
|
+
transform: translateY(-3px);
|
|
153
|
+
box-shadow: var(--rcnr-shadow-lg);
|
|
154
|
+
border-color: color-mix(in srgb, var(--rcnr-accent) 50%, var(--rcnr-border));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.rcnr-card-flat {
|
|
158
|
+
background: var(--rcnr-surface);
|
|
159
|
+
border: 1px solid var(--rcnr-border);
|
|
160
|
+
border-radius: 16px;
|
|
161
|
+
box-shadow: var(--rcnr-shadow-sm);
|
|
162
|
+
transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
|
|
81
163
|
}
|
|
82
164
|
|
|
83
165
|
/* --- Ice button --- */
|
|
84
166
|
.btn-ice {
|
|
85
|
-
|
|
86
|
-
|
|
167
|
+
display: inline-flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
gap: 0.5rem;
|
|
170
|
+
padding: 0.625rem 1.25rem;
|
|
171
|
+
background: linear-gradient(135deg, #7ec8c8 0%, #5a9ea5 100%);
|
|
172
|
+
border: none;
|
|
173
|
+
border-radius: 10px;
|
|
174
|
+
color: #111418;
|
|
87
175
|
font-weight: 600;
|
|
176
|
+
font-size: 0.875rem;
|
|
177
|
+
cursor: pointer;
|
|
88
178
|
transition: all 0.2s ease;
|
|
89
179
|
}
|
|
90
180
|
|
|
91
181
|
.btn-ice:hover {
|
|
92
|
-
box-shadow: 0
|
|
182
|
+
box-shadow: 0 4px 20px rgba(126, 200, 200, 0.35);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
[data-theme="light"] .btn-ice {
|
|
186
|
+
background: linear-gradient(135deg, #0f8588 0%, #0a6e70 100%);
|
|
187
|
+
color: #ffffff;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
[data-theme="light"] .btn-ice:hover {
|
|
191
|
+
box-shadow: 0 4px 20px rgba(15, 133, 136, 0.3);
|
|
93
192
|
}
|
|
94
193
|
|
|
95
194
|
/* --- Amber CTA button --- */
|
|
@@ -97,31 +196,37 @@ body {
|
|
|
97
196
|
display: inline-flex;
|
|
98
197
|
align-items: center;
|
|
99
198
|
gap: 0.5rem;
|
|
100
|
-
padding: 0.
|
|
101
|
-
background:
|
|
199
|
+
padding: 0.5rem 1.1rem;
|
|
200
|
+
background: var(--rcnr-cta);
|
|
102
201
|
border: none;
|
|
103
|
-
border-radius:
|
|
104
|
-
color:
|
|
202
|
+
border-radius: 10px;
|
|
203
|
+
color: var(--rcnr-cta-text);
|
|
105
204
|
font-weight: 600;
|
|
106
|
-
font-size: 0.
|
|
205
|
+
font-size: 0.8125rem;
|
|
107
206
|
text-decoration: none;
|
|
108
207
|
cursor: pointer;
|
|
109
208
|
transition: all 0.2s ease;
|
|
110
209
|
}
|
|
111
210
|
|
|
112
211
|
.btn-amber:hover {
|
|
113
|
-
background:
|
|
114
|
-
box-shadow: 0
|
|
212
|
+
background: var(--rcnr-cta-hover);
|
|
213
|
+
box-shadow: 0 4px 16px rgba(232, 184, 77, 0.2);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
[data-theme="light"] .btn-amber:hover {
|
|
217
|
+
box-shadow: 0 4px 12px rgba(207, 143, 26, 0.18);
|
|
115
218
|
}
|
|
116
219
|
|
|
117
220
|
.btn-amber:disabled {
|
|
118
|
-
background:
|
|
119
|
-
color:
|
|
221
|
+
background: var(--rcnr-surface2);
|
|
222
|
+
color: var(--rcnr-text3);
|
|
120
223
|
cursor: not-allowed;
|
|
224
|
+
box-shadow: none;
|
|
121
225
|
}
|
|
122
226
|
|
|
123
227
|
.btn-amber:disabled:hover {
|
|
124
|
-
background:
|
|
228
|
+
background: var(--rcnr-surface2);
|
|
229
|
+
box-shadow: none;
|
|
125
230
|
}
|
|
126
231
|
|
|
127
232
|
/* --- Ghost button (secondary) --- */
|
|
@@ -129,48 +234,178 @@ body {
|
|
|
129
234
|
display: inline-flex;
|
|
130
235
|
align-items: center;
|
|
131
236
|
gap: 0.4rem;
|
|
132
|
-
padding: 0.
|
|
237
|
+
padding: 0.5rem 0.875rem;
|
|
133
238
|
background: transparent;
|
|
134
|
-
border: 1px solid
|
|
135
|
-
border-radius:
|
|
136
|
-
color:
|
|
137
|
-
font-size: 0.
|
|
239
|
+
border: 1px solid var(--rcnr-border);
|
|
240
|
+
border-radius: 10px;
|
|
241
|
+
color: var(--rcnr-text2);
|
|
242
|
+
font-size: 0.8125rem;
|
|
138
243
|
cursor: pointer;
|
|
139
244
|
transition: all 0.2s ease;
|
|
140
245
|
}
|
|
141
246
|
|
|
142
247
|
.btn-ghost:hover {
|
|
143
|
-
border-color:
|
|
144
|
-
color:
|
|
248
|
+
border-color: var(--rcnr-text3);
|
|
249
|
+
color: var(--rcnr-text);
|
|
250
|
+
background: var(--rcnr-surface2);
|
|
145
251
|
}
|
|
146
252
|
|
|
147
|
-
/* ---
|
|
148
|
-
|
|
149
|
-
width:
|
|
150
|
-
|
|
253
|
+
/* --- Input --- */
|
|
254
|
+
.rcnr-input {
|
|
255
|
+
width: 100%;
|
|
256
|
+
padding: 0.625rem 1rem;
|
|
257
|
+
border-radius: 12px;
|
|
258
|
+
background: var(--rcnr-surface);
|
|
259
|
+
border: 1px solid var(--rcnr-border);
|
|
260
|
+
color: var(--rcnr-text);
|
|
261
|
+
font-size: 0.875rem;
|
|
262
|
+
font-family: inherit;
|
|
263
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.35s ease;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
[data-theme="light"] .rcnr-input {
|
|
267
|
+
background: #ffffff;
|
|
268
|
+
border-color: #d4d8e0;
|
|
269
|
+
box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.rcnr-input::placeholder {
|
|
273
|
+
color: var(--rcnr-text3);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.rcnr-input:focus {
|
|
277
|
+
outline: none;
|
|
278
|
+
border-color: var(--rcnr-accent);
|
|
279
|
+
box-shadow: 0 0 0 3px var(--rcnr-accent-dim);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* --- Chips --- */
|
|
283
|
+
.rcnr-chip {
|
|
284
|
+
display: inline-flex;
|
|
285
|
+
align-items: center;
|
|
286
|
+
padding: 0.375rem 0.75rem;
|
|
287
|
+
border-radius: 10px;
|
|
288
|
+
font-size: 0.8125rem;
|
|
289
|
+
font-weight: 500;
|
|
290
|
+
border: 1px solid var(--rcnr-border);
|
|
291
|
+
background: transparent;
|
|
292
|
+
color: var(--rcnr-text2);
|
|
293
|
+
cursor: pointer;
|
|
294
|
+
transition: all 0.15s ease;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.rcnr-chip:hover {
|
|
298
|
+
background: var(--rcnr-surface2);
|
|
299
|
+
border-color: var(--rcnr-text3);
|
|
300
|
+
color: var(--rcnr-text);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.rcnr-chip-active {
|
|
304
|
+
background: var(--rcnr-accent-dim);
|
|
305
|
+
border-color: var(--rcnr-accent);
|
|
306
|
+
color: var(--rcnr-accent);
|
|
307
|
+
font-weight: 600;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/* --- Badges --- */
|
|
311
|
+
.rcnr-badge {
|
|
312
|
+
display: inline-block;
|
|
313
|
+
padding: 0.2rem 0.55rem;
|
|
314
|
+
border-radius: 6px;
|
|
315
|
+
font-size: 0.625rem;
|
|
316
|
+
font-weight: 700;
|
|
317
|
+
text-transform: uppercase;
|
|
318
|
+
letter-spacing: 0.06em;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.rcnr-badge-coming {
|
|
322
|
+
background: var(--rcnr-surface2);
|
|
323
|
+
color: var(--rcnr-text3);
|
|
324
|
+
border: 1px solid var(--rcnr-border);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
[data-theme="light"] .rcnr-badge-coming {
|
|
328
|
+
background: #e8eaee;
|
|
329
|
+
color: #6b7280;
|
|
330
|
+
border-color: #d0d4dc;
|
|
151
331
|
}
|
|
152
332
|
|
|
153
|
-
|
|
154
|
-
background: rgba(
|
|
333
|
+
.rcnr-badge-beta {
|
|
334
|
+
background: rgba(251, 113, 133, 0.1);
|
|
335
|
+
color: var(--rcnr-danger);
|
|
336
|
+
border: 1px solid rgba(251, 113, 133, 0.2);
|
|
155
337
|
}
|
|
156
338
|
|
|
157
|
-
|
|
158
|
-
background:
|
|
159
|
-
|
|
339
|
+
.rcnr-badge-admin {
|
|
340
|
+
background: var(--rcnr-accent-dim);
|
|
341
|
+
color: var(--rcnr-accent);
|
|
342
|
+
border: 1px solid color-mix(in srgb, var(--rcnr-accent) 25%, transparent);
|
|
160
343
|
}
|
|
161
344
|
|
|
162
|
-
|
|
163
|
-
|
|
345
|
+
/* --- Empty state --- */
|
|
346
|
+
.rcnr-empty {
|
|
347
|
+
border-radius: 16px;
|
|
348
|
+
padding: 2rem 1.5rem;
|
|
349
|
+
text-align: center;
|
|
350
|
+
background: var(--rcnr-surface);
|
|
351
|
+
border: 1px dashed var(--rcnr-border);
|
|
352
|
+
color: var(--rcnr-text3);
|
|
353
|
+
font-size: 0.875rem;
|
|
354
|
+
transition: background-color 0.35s ease, border-color 0.35s ease;
|
|
164
355
|
}
|
|
165
356
|
|
|
357
|
+
[data-theme="light"] .rcnr-empty {
|
|
358
|
+
border-color: #c0c6d0;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* --- Section heading --- */
|
|
362
|
+
.rcnr-section-heading {
|
|
363
|
+
display: flex;
|
|
364
|
+
align-items: center;
|
|
365
|
+
gap: 0.75rem;
|
|
366
|
+
color: var(--rcnr-text);
|
|
367
|
+
font-weight: 600;
|
|
368
|
+
font-size: 1.125rem;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.rcnr-section-heading::before {
|
|
372
|
+
content: '';
|
|
373
|
+
width: 3px;
|
|
374
|
+
height: 1.2em;
|
|
375
|
+
background: var(--rcnr-accent);
|
|
376
|
+
border-radius: 2px;
|
|
377
|
+
flex-shrink: 0;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/* --- Clerk UserButton popover (dark mode fix) --- */
|
|
381
|
+
.rcnr-clerk-popover {
|
|
382
|
+
background: var(--rcnr-surface) !important;
|
|
383
|
+
border: 1px solid var(--rcnr-border) !important;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.rcnr-clerk-popover-btn:hover {
|
|
387
|
+
background: var(--rcnr-surface2) !important;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
/* --- Scrollbar --- */
|
|
391
|
+
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
392
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
393
|
+
::-webkit-scrollbar-thumb { background: var(--rcnr-border); border-radius: 4px; }
|
|
394
|
+
::-webkit-scrollbar-thumb:hover { background: var(--rcnr-text3); }
|
|
395
|
+
|
|
166
396
|
/* --- Focus ring --- */
|
|
167
397
|
*:focus-visible {
|
|
168
|
-
outline: 2px solid
|
|
398
|
+
outline: 2px solid var(--rcnr-accent);
|
|
169
399
|
outline-offset: 2px;
|
|
170
400
|
}
|
|
171
401
|
|
|
172
|
-
/* ---
|
|
402
|
+
/* --- Animations --- */
|
|
173
403
|
@keyframes fadeIn {
|
|
174
|
-
from { opacity: 0; transform: translateY(
|
|
404
|
+
from { opacity: 0; transform: translateY(10px); }
|
|
175
405
|
to { opacity: 1; transform: translateY(0); }
|
|
176
406
|
}
|
|
407
|
+
|
|
408
|
+
@keyframes cardEntrance {
|
|
409
|
+
from { opacity: 0; transform: translateY(16px) scale(0.98); }
|
|
410
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
411
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rcnr/theme",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "RCNR design system: CSS tokens, shared React components (header, footer, subnav), glass cards, buttons, grid",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -24,10 +24,12 @@
|
|
|
24
24
|
"prepublishOnly": "npm run build"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
+
"lucide-react": ">=0.300.0",
|
|
27
28
|
"react": ">=18"
|
|
28
29
|
},
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"@types/react": "^19.0.0",
|
|
32
|
+
"lucide-react": "^0.577.0",
|
|
31
33
|
"react": "^19.0.0",
|
|
32
34
|
"tsup": "^8.0.0",
|
|
33
35
|
"typescript": "^5.3.0"
|