y2k-social-ui 0.1.0 → 0.1.1
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/LICENSE +1 -1
- package/README.md +2 -2
- package/dist/theme.css +328 -69
- package/package.json +4 -1
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c) 2026
|
|
3
|
+
Copyright (c) 2026 y2k Social UI contributors
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# y2k Social UI
|
|
2
2
|
|
|
3
3
|
A plug-and-play Y2K / MySpace-inspired React component kit for Next.js and Tailwind CSS v4. It uses CSS variables for its design tokens, so components can switch themes without depending on Tailwind utility generation.
|
|
4
4
|
|
|
@@ -52,7 +52,7 @@ Place `data-rs-theme` on any wrapper. Components inside that wrapper inherit the
|
|
|
52
52
|
Available theme names:
|
|
53
53
|
|
|
54
54
|
- `myspace` — blue social-web gradients and light panels
|
|
55
|
-
- `cyber` — dark surfaces,
|
|
55
|
+
- `cyber` — dark surfaces, y2k pink, and lime accents
|
|
56
56
|
- `chrome` — cool greys and metallic-looking title bars
|
|
57
57
|
|
|
58
58
|
You can override any CSS custom property in your app:
|
package/dist/theme.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
*
|
|
2
|
+
* y2k Social UI — CSS-first theme tokens, compatible with Tailwind CSS v4.
|
|
3
3
|
* Import this file once in app/globals.css or app/layout.tsx.
|
|
4
4
|
*/
|
|
5
5
|
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
|
|
@@ -75,86 +75,345 @@
|
|
|
75
75
|
background: var(--rs-bg);
|
|
76
76
|
font-family: var(--rs-font-sans);
|
|
77
77
|
}
|
|
78
|
-
.rs-window,
|
|
78
|
+
.rs-window,
|
|
79
|
+
.rs-card,
|
|
80
|
+
.rs-profile,
|
|
81
|
+
.rs-player {
|
|
79
82
|
color: var(--rs-text);
|
|
80
83
|
border: 1px solid var(--rs-border);
|
|
81
84
|
border-radius: var(--rs-radius);
|
|
82
85
|
background: var(--rs-surface);
|
|
83
86
|
box-shadow: var(--rs-shadow);
|
|
84
87
|
}
|
|
85
|
-
.rs-window {
|
|
88
|
+
.rs-window {
|
|
89
|
+
overflow: hidden;
|
|
90
|
+
}
|
|
86
91
|
.rs-window__titlebar {
|
|
87
|
-
display: flex;
|
|
88
|
-
|
|
92
|
+
display: flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
justify-content: space-between;
|
|
95
|
+
gap: 12px;
|
|
96
|
+
min-height: 40px;
|
|
97
|
+
padding: 8px 12px;
|
|
98
|
+
color: white;
|
|
89
99
|
background: linear-gradient(110deg, var(--rs-primary), var(--rs-purple));
|
|
90
100
|
font: 500 12px var(--rs-font-mono);
|
|
91
101
|
}
|
|
92
|
-
.rs-window__title {
|
|
93
|
-
|
|
94
|
-
|
|
102
|
+
.rs-window__title {
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
gap: 8px;
|
|
106
|
+
min-width: 0;
|
|
107
|
+
overflow-wrap: anywhere;
|
|
108
|
+
}
|
|
109
|
+
.rs-window__icon {
|
|
110
|
+
display: inline-flex;
|
|
111
|
+
}
|
|
112
|
+
.rs-window__controls {
|
|
113
|
+
display: flex;
|
|
114
|
+
gap: 4px;
|
|
115
|
+
flex-shrink: 0;
|
|
116
|
+
}
|
|
95
117
|
.rs-window__controls span {
|
|
96
|
-
display: inline-grid;
|
|
97
|
-
|
|
98
|
-
|
|
118
|
+
display: inline-grid;
|
|
119
|
+
place-items: center;
|
|
120
|
+
width: 20px;
|
|
121
|
+
height: 18px;
|
|
122
|
+
color: var(--rs-text);
|
|
123
|
+
background: var(--rs-surface);
|
|
124
|
+
border: 1px solid rgb(255 255 255 / 70%);
|
|
125
|
+
border-radius: 3px;
|
|
126
|
+
font: 700 12px var(--rs-font-mono);
|
|
127
|
+
}
|
|
128
|
+
.rs-window__body {
|
|
129
|
+
padding: 16px;
|
|
130
|
+
}
|
|
131
|
+
.rs-window--chrome .rs-window__titlebar {
|
|
132
|
+
color: var(--rs-text);
|
|
133
|
+
background: linear-gradient(#fff, #cbd0db);
|
|
134
|
+
border-bottom: 1px solid var(--rs-border);
|
|
135
|
+
}
|
|
136
|
+
.rs-window--flat {
|
|
137
|
+
box-shadow: none;
|
|
99
138
|
}
|
|
100
|
-
.rs-window__body { padding: 16px; }
|
|
101
|
-
.rs-window--chrome .rs-window__titlebar { color: var(--rs-text); background: linear-gradient(#fff, #cbd0db); border-bottom: 1px solid var(--rs-border); }
|
|
102
|
-
.rs-window--flat { box-shadow: none; }
|
|
103
139
|
.rs-button {
|
|
104
|
-
display: inline-flex;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
.rs-button
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
.rs-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
.rs-
|
|
125
|
-
.rs-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
.rs-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
.rs-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
.rs-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
.rs-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
.rs-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
.rs-
|
|
156
|
-
|
|
140
|
+
display: inline-flex;
|
|
141
|
+
align-items: center;
|
|
142
|
+
justify-content: center;
|
|
143
|
+
gap: 8px;
|
|
144
|
+
min-height: 38px;
|
|
145
|
+
padding: 9px 14px;
|
|
146
|
+
border: 1px solid transparent;
|
|
147
|
+
border-radius: var(--rs-radius-sm);
|
|
148
|
+
cursor: pointer;
|
|
149
|
+
font: 600 13px var(--rs-font-sans);
|
|
150
|
+
transition: transform 120ms ease, filter 120ms ease;
|
|
151
|
+
text-decoration: none;
|
|
152
|
+
}
|
|
153
|
+
.rs-button:hover {
|
|
154
|
+
filter: brightness(1.06);
|
|
155
|
+
transform: translateY(-1px);
|
|
156
|
+
}
|
|
157
|
+
.rs-button:active {
|
|
158
|
+
transform: translate(1px, 1px);
|
|
159
|
+
}
|
|
160
|
+
.rs-button:focus-visible,
|
|
161
|
+
.rs-player__toggle:focus-visible {
|
|
162
|
+
outline: 3px solid var(--rs-focus);
|
|
163
|
+
outline-offset: 3px;
|
|
164
|
+
}
|
|
165
|
+
.rs-button--primary {
|
|
166
|
+
background: linear-gradient(120deg, var(--rs-primary), var(--rs-purple));
|
|
167
|
+
color: var(--rs-primary-contrast);
|
|
168
|
+
border-color: var(--rs-border);
|
|
169
|
+
box-shadow: 2px 2px 0 rgb(0 0 0 / 12%);
|
|
170
|
+
}
|
|
171
|
+
.rs-button--secondary {
|
|
172
|
+
background: var(--rs-lime);
|
|
173
|
+
color: #27203c;
|
|
174
|
+
border-color: var(--rs-border);
|
|
175
|
+
}
|
|
176
|
+
.rs-button--ghost {
|
|
177
|
+
background: transparent;
|
|
178
|
+
color: var(--rs-text);
|
|
179
|
+
border-color: var(--rs-border);
|
|
180
|
+
}
|
|
181
|
+
.rs-button--danger {
|
|
182
|
+
background: #ffdfeb;
|
|
183
|
+
color: #8d164b;
|
|
184
|
+
border-color: #e98bb2;
|
|
185
|
+
}
|
|
186
|
+
.rs-button--sm {
|
|
187
|
+
min-height: 30px;
|
|
188
|
+
padding: 6px 10px;
|
|
189
|
+
font-size: 12px;
|
|
190
|
+
}
|
|
191
|
+
.rs-button--lg {
|
|
192
|
+
min-height: 46px;
|
|
193
|
+
padding: 12px 18px;
|
|
194
|
+
font-size: 15px;
|
|
195
|
+
}
|
|
196
|
+
.rs-card {
|
|
197
|
+
overflow: hidden;
|
|
198
|
+
}
|
|
199
|
+
.rs-card__heading {
|
|
200
|
+
padding: 9px 12px;
|
|
201
|
+
background: var(--rs-surface-raised);
|
|
202
|
+
border-bottom: 1px solid var(--rs-border);
|
|
203
|
+
font: 500 11px var(--rs-font-mono);
|
|
204
|
+
text-transform: uppercase;
|
|
205
|
+
letter-spacing: 0.08em;
|
|
206
|
+
}
|
|
207
|
+
.rs-card__content {
|
|
208
|
+
padding: 14px;
|
|
209
|
+
}
|
|
210
|
+
.rs-card--accent {
|
|
211
|
+
border-top: 4px solid var(--rs-pink);
|
|
212
|
+
}
|
|
213
|
+
.rs-badge {
|
|
214
|
+
display: inline-flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
padding: 4px 8px;
|
|
217
|
+
border: 1px solid var(--rs-border);
|
|
218
|
+
border-radius: 4px;
|
|
219
|
+
font: 500 10px var(--rs-font-mono);
|
|
220
|
+
letter-spacing: 0.04em;
|
|
221
|
+
text-transform: uppercase;
|
|
222
|
+
}
|
|
223
|
+
.rs-badge--pink {
|
|
224
|
+
background: var(--rs-pink);
|
|
225
|
+
color: #25132c;
|
|
226
|
+
}
|
|
227
|
+
.rs-badge--blue {
|
|
228
|
+
background: #c9e5ff;
|
|
229
|
+
color: #143c74;
|
|
230
|
+
}
|
|
231
|
+
.rs-badge--lime {
|
|
232
|
+
background: var(--rs-lime);
|
|
233
|
+
color: #27330b;
|
|
234
|
+
}
|
|
235
|
+
.rs-badge--purple {
|
|
236
|
+
background: var(--rs-purple);
|
|
237
|
+
color: #21113b;
|
|
238
|
+
}
|
|
239
|
+
.rs-badge--neutral {
|
|
240
|
+
background: var(--rs-surface-raised);
|
|
241
|
+
color: var(--rs-text);
|
|
242
|
+
}
|
|
243
|
+
.rs-profile {
|
|
244
|
+
padding: 14px;
|
|
245
|
+
}
|
|
246
|
+
.rs-profile__top {
|
|
247
|
+
display: flex;
|
|
248
|
+
align-items: center;
|
|
249
|
+
gap: 12px;
|
|
250
|
+
}
|
|
251
|
+
.rs-profile__avatar {
|
|
252
|
+
width: 72px;
|
|
253
|
+
height: 72px;
|
|
254
|
+
object-fit: cover;
|
|
255
|
+
border: 2px solid var(--rs-pink);
|
|
256
|
+
border-radius: 8px;
|
|
257
|
+
background: var(--rs-surface-raised);
|
|
258
|
+
}
|
|
259
|
+
.rs-profile__avatar--placeholder {
|
|
260
|
+
display: grid;
|
|
261
|
+
place-items: center;
|
|
262
|
+
color: var(--rs-primary);
|
|
263
|
+
font-size: 36px;
|
|
264
|
+
}
|
|
265
|
+
.rs-profile__identity h2 {
|
|
266
|
+
margin: 0;
|
|
267
|
+
font-size: 19px;
|
|
268
|
+
font-weight: 700;
|
|
269
|
+
}
|
|
270
|
+
.rs-profile__identity p {
|
|
271
|
+
margin: 2px 0 7px;
|
|
272
|
+
color: var(--rs-muted);
|
|
273
|
+
font: 11px var(--rs-font-mono);
|
|
274
|
+
}
|
|
275
|
+
.rs-status {
|
|
276
|
+
display: inline-flex;
|
|
277
|
+
align-items: center;
|
|
278
|
+
gap: 6px;
|
|
279
|
+
color: var(--rs-muted);
|
|
280
|
+
font: 10px var(--rs-font-mono);
|
|
281
|
+
}
|
|
282
|
+
.rs-status i {
|
|
283
|
+
width: 7px;
|
|
284
|
+
height: 7px;
|
|
285
|
+
border-radius: 50%;
|
|
286
|
+
background: #69db83;
|
|
287
|
+
box-shadow: 0 0 0 3px rgb(105 219 131 / 18%);
|
|
288
|
+
}
|
|
289
|
+
.rs-profile__mood {
|
|
290
|
+
margin-top: 14px;
|
|
291
|
+
padding: 9px 10px;
|
|
292
|
+
border: 1px dashed var(--rs-border);
|
|
293
|
+
border-radius: 6px;
|
|
294
|
+
background: var(--rs-surface-raised);
|
|
295
|
+
font-size: 12px;
|
|
296
|
+
}
|
|
297
|
+
.rs-profile__extra {
|
|
298
|
+
margin-top: 12px;
|
|
299
|
+
}
|
|
300
|
+
.rs-marquee {
|
|
301
|
+
overflow: hidden;
|
|
302
|
+
border: 1px solid var(--rs-border);
|
|
303
|
+
border-radius: 5px;
|
|
304
|
+
background: var(--rs-surface-raised);
|
|
305
|
+
color: var(--rs-text);
|
|
306
|
+
}
|
|
307
|
+
.rs-marquee__track {
|
|
308
|
+
display: flex;
|
|
309
|
+
width: max-content;
|
|
310
|
+
animation: rs-marquee-scroll 22s linear infinite;
|
|
311
|
+
}
|
|
312
|
+
.rs-marquee__track span {
|
|
313
|
+
flex-shrink: 0;
|
|
314
|
+
padding: 8px 0;
|
|
315
|
+
font: 11px var(--rs-font-mono);
|
|
316
|
+
white-space: nowrap;
|
|
317
|
+
}
|
|
318
|
+
.rs-marquee--slow .rs-marquee__track {
|
|
319
|
+
animation-duration: 34s;
|
|
320
|
+
}
|
|
321
|
+
.rs-marquee--fast .rs-marquee__track {
|
|
322
|
+
animation-duration: 12s;
|
|
323
|
+
}
|
|
324
|
+
.rs-marquee:hover .rs-marquee__track {
|
|
325
|
+
animation-play-state: paused;
|
|
326
|
+
}
|
|
327
|
+
@keyframes rs-marquee-scroll {
|
|
328
|
+
to {
|
|
329
|
+
transform: translateX(-50%);
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
.rs-player {
|
|
333
|
+
display: flex;
|
|
334
|
+
align-items: center;
|
|
335
|
+
gap: 12px;
|
|
336
|
+
padding: 10px;
|
|
337
|
+
}
|
|
338
|
+
.rs-player audio {
|
|
339
|
+
display: none;
|
|
340
|
+
}
|
|
341
|
+
.rs-player__cover {
|
|
342
|
+
display: grid;
|
|
343
|
+
place-items: center;
|
|
344
|
+
width: 48px;
|
|
345
|
+
height: 48px;
|
|
346
|
+
overflow: hidden;
|
|
347
|
+
border-radius: 6px;
|
|
348
|
+
background: linear-gradient(135deg, var(--rs-pink), var(--rs-purple));
|
|
349
|
+
color: white;
|
|
350
|
+
font-size: 25px;
|
|
351
|
+
flex-shrink: 0;
|
|
352
|
+
}
|
|
353
|
+
.rs-player__cover img {
|
|
354
|
+
width: 100%;
|
|
355
|
+
height: 100%;
|
|
356
|
+
object-fit: cover;
|
|
357
|
+
}
|
|
358
|
+
.rs-player__meta {
|
|
359
|
+
display: grid;
|
|
360
|
+
gap: 2px;
|
|
361
|
+
min-width: 0;
|
|
362
|
+
flex: 1;
|
|
363
|
+
}
|
|
364
|
+
.rs-player__meta strong {
|
|
365
|
+
overflow: hidden;
|
|
366
|
+
text-overflow: ellipsis;
|
|
367
|
+
white-space: nowrap;
|
|
368
|
+
font-size: 12px;
|
|
369
|
+
}
|
|
370
|
+
.rs-player__meta > span {
|
|
371
|
+
color: var(--rs-muted);
|
|
372
|
+
font-size: 11px;
|
|
373
|
+
}
|
|
374
|
+
.rs-player__equalizer {
|
|
375
|
+
display: flex;
|
|
376
|
+
align-items: end;
|
|
377
|
+
gap: 2px;
|
|
378
|
+
height: 9px;
|
|
379
|
+
margin-top: 3px;
|
|
380
|
+
}
|
|
381
|
+
.rs-player__equalizer i {
|
|
382
|
+
width: 3px;
|
|
383
|
+
height: 4px;
|
|
384
|
+
background: var(--rs-primary);
|
|
385
|
+
}
|
|
386
|
+
.rs-player__equalizer i:nth-child(2),
|
|
387
|
+
.rs-player__equalizer i:nth-child(4) {
|
|
388
|
+
height: 9px;
|
|
389
|
+
}
|
|
390
|
+
.rs-player__toggle {
|
|
391
|
+
display: grid;
|
|
392
|
+
place-items: center;
|
|
393
|
+
width: 34px;
|
|
394
|
+
height: 34px;
|
|
395
|
+
border: 1px solid var(--rs-border);
|
|
396
|
+
border-radius: 50%;
|
|
397
|
+
background: var(--rs-surface-raised);
|
|
398
|
+
color: var(--rs-text);
|
|
399
|
+
cursor: pointer;
|
|
400
|
+
}
|
|
401
|
+
.rs-sr-only {
|
|
402
|
+
position: absolute;
|
|
403
|
+
width: 1px;
|
|
404
|
+
height: 1px;
|
|
405
|
+
padding: 0;
|
|
406
|
+
margin: -1px;
|
|
407
|
+
overflow: hidden;
|
|
408
|
+
clip: rect(0, 0, 0, 0);
|
|
409
|
+
white-space: nowrap;
|
|
410
|
+
border: 0;
|
|
411
|
+
}
|
|
157
412
|
@media (prefers-reduced-motion: reduce) {
|
|
158
|
-
.rs-marquee__track {
|
|
159
|
-
|
|
413
|
+
.rs-marquee__track {
|
|
414
|
+
animation: none;
|
|
415
|
+
}
|
|
416
|
+
.rs-button {
|
|
417
|
+
transition: none;
|
|
418
|
+
}
|
|
160
419
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "y2k-social-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A plug-and-play Y2K and MySpace-inspired UI kit for React and Next.js with Tailwind CSS v4.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -36,5 +36,8 @@
|
|
|
36
36
|
"@types/react-dom": "^19.0.0",
|
|
37
37
|
"tsup": "^8.3.0",
|
|
38
38
|
"typescript": "^5.7.0"
|
|
39
|
+
},
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"y2k-social-ui": "^0.1.0"
|
|
39
42
|
}
|
|
40
43
|
}
|