@ttt-productions/theme-core 0.1.22 → 0.1.24

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.
Files changed (3) hide show
  1. package/dist/styles/components.css +469 -123
  2. package/dist/styles/hooks.css +38 -11
  3. package/package.json +1 -1
package/dist/styles/components.css CHANGED
@@ -4,132 +4,259 @@
4
4
  ========================================================= */
5
5
 
6
6
  /* Icons */
7
- .icon-xxs { @apply h-3 w-3; }
8
- .icon-xs { @apply h-4 w-4; }
9
- .icon-sm { @apply h-5 w-5; }
10
- .icon-md { @apply h-6 w-6; }
11
- .icon-lg { @apply h-8 w-8; }
12
- .icon-xl { @apply h-10 w-10; }
13
- .icon-2xl { @apply h-12 w-12; }
7
+ .icon-xxs { height: 0.75rem; width: 0.75rem; }
8
+ .icon-xs { height: 1rem; width: 1rem; }
9
+ .icon-sm { height: 1.25rem; width: 1.25rem; }
10
+ .icon-md { height: 1.5rem; width: 1.5rem; }
11
+ .icon-lg { height: 2rem; width: 2rem; }
12
+ .icon-xl { height: 2.5rem; width: 2.5rem; }
13
+ .icon-2xl { height: 3rem; width: 3rem; }
14
14
 
15
15
  /* Spinners */
16
- .spinner-xs { @apply icon-xs animate-spin; color: hsl(var(--primary)); }
17
- .spinner-sm { @apply icon-sm animate-spin; color: hsl(var(--primary)); }
18
- .spinner-md { @apply icon-md animate-spin; color: hsl(var(--primary)); }
19
- .spinner-lg { @apply icon-lg animate-spin; color: hsl(var(--primary)); }
20
- .spinner-xl { @apply icon-xl animate-spin; color: hsl(var(--primary)); }
21
- .spinner-with-gap { @apply mr-2; }
16
+ .spinner-xs {
17
+ height: 1rem;
18
+ width: 1rem;
19
+ animation: spin 1s linear infinite;
20
+ color: hsl(var(--primary));
21
+ }
22
+ .spinner-sm {
23
+ height: 1.25rem;
24
+ width: 1.25rem;
25
+ animation: spin 1s linear infinite;
26
+ color: hsl(var(--primary));
27
+ }
28
+ .spinner-md {
29
+ height: 1.5rem;
30
+ width: 1.5rem;
31
+ animation: spin 1s linear infinite;
32
+ color: hsl(var(--primary));
33
+ }
34
+ .spinner-lg {
35
+ height: 2rem;
36
+ width: 2rem;
37
+ animation: spin 1s linear infinite;
38
+ color: hsl(var(--primary));
39
+ }
40
+ .spinner-xl {
41
+ height: 2.5rem;
42
+ width: 2.5rem;
43
+ animation: spin 1s linear infinite;
44
+ color: hsl(var(--primary));
45
+ }
46
+ .spinner-with-gap { margin-right: 0.5rem; }
47
+
48
+ @keyframes spin {
49
+ from { transform: rotate(0deg); }
50
+ to { transform: rotate(360deg); }
51
+ }
22
52
 
23
53
  /* Common centering */
24
- .center-row { @apply flex items-center justify-center; }
25
- .center-col { @apply flex flex-col items-center justify-center; }
26
- .loading-block { @apply center-row py-8; }
27
- .loading-block-padded { @apply center-row p-8; }
28
- .loading-screen { @apply flex flex-col h-screen-mobile w-screen items-center justify-center bg-background space-y-4; }
54
+ .center-row {
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ }
59
+ .center-col {
60
+ display: flex;
61
+ flex-direction: column;
62
+ align-items: center;
63
+ justify-content: center;
64
+ }
65
+ .loading-block {
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ padding-top: 2rem;
70
+ padding-bottom: 2rem;
71
+ }
72
+ .loading-block-padded {
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ padding: 2rem;
77
+ }
78
+ .loading-screen {
79
+ display: flex;
80
+ flex-direction: column;
81
+ height: 100vh;
82
+ height: calc(var(--vh, 1vh) * 100);
83
+ width: 100vw;
84
+ align-items: center;
85
+ justify-content: center;
86
+ background-color: hsl(var(--background));
87
+ }
88
+ .loading-screen > * + * {
89
+ margin-top: 1rem;
90
+ }
29
91
 
30
92
  /* Stacks */
31
- .stack-1 { @apply space-y-1; }
32
- .stack-2 { @apply space-y-2; }
33
- .stack-4 { @apply space-y-4; }
34
- .stack-6 { @apply space-y-6; }
93
+ .stack-1 > * + * { margin-top: 0.25rem; }
94
+ .stack-2 > * + * { margin-top: 0.5rem; }
95
+ .stack-4 > * + * { margin-top: 1rem; }
96
+ .stack-6 > * + * { margin-top: 1.5rem; }
35
97
 
36
98
  /* =========================================================
37
99
  PAGE LAYOUT
38
100
  ========================================================= */
39
101
  .page-container {
40
- @apply flex-1 w-full mx-auto py-4;
102
+ flex: 1 1 0%;
103
+ width: 100%;
104
+ margin-left: auto;
105
+ margin-right: auto;
106
+ padding-top: 1rem;
107
+ padding-bottom: 1rem;
41
108
  }
42
109
 
43
110
  .page-card {
44
- @apply w-full bg-card text-card-foreground shadow-xl rounded-lg border-2 border-border;
111
+ width: 100%;
112
+ background-color: hsl(var(--card));
113
+ color: hsl(var(--card-foreground));
114
+ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
115
+ border-radius: 0.5rem;
116
+ border-width: 2px;
117
+ border-color: hsl(var(--border));
45
118
  }
46
119
 
47
120
  .page-card-header {
48
- @apply text-center p-4 sm:p-6 items-center;
121
+ text-align: center;
122
+ padding: 1rem;
123
+ align-items: center;
124
+ }
125
+ @media (min-width: 640px) {
126
+ .page-card-header {
127
+ padding: 1.5rem;
128
+ }
49
129
  }
50
130
 
51
131
  .page-card-header-left {
52
- @apply p-4 sm:p-6 text-left;
132
+ padding: 1rem;
133
+ text-align: left;
134
+ }
135
+ @media (min-width: 640px) {
136
+ .page-card-header-left {
137
+ padding: 1.5rem;
138
+ }
53
139
  }
54
140
 
55
141
  .page-card-title {
56
- @apply text-3xl font-bold text-foreground;
142
+ font-size: 1.875rem;
143
+ line-height: 2.25rem;
144
+ font-weight: 700;
145
+ color: hsl(var(--foreground));
57
146
  }
58
147
 
59
148
  .page-card-content {
60
- @apply px-2 sm:px-6 pb-4;
149
+ padding-left: 0.5rem;
150
+ padding-right: 0.5rem;
151
+ padding-bottom: 1rem;
152
+ }
153
+ @media (min-width: 640px) {
154
+ .page-card-content {
155
+ padding-left: 1.5rem;
156
+ padding-right: 1.5rem;
157
+ }
61
158
  }
62
159
 
63
160
  .inner-card-container {
64
- @apply px-4 py-2;
161
+ padding-left: 1rem;
162
+ padding-right: 1rem;
163
+ padding-top: 0.5rem;
164
+ padding-bottom: 0.5rem;
65
165
  }
66
166
 
67
167
  /* =========================================================
68
168
  TYPOGRAPHY (high-level)
69
169
  ========================================================= */
70
170
  .text-body {
71
- @apply text-sm font-medium;
171
+ font-size: 0.875rem;
172
+ line-height: 1.25rem;
173
+ font-weight: 500;
72
174
  color: hsl(var(--foreground));
73
175
  }
74
176
 
75
177
  .text-muted {
76
- @apply text-sm font-medium;
178
+ font-size: 0.875rem;
179
+ line-height: 1.25rem;
180
+ font-weight: 500;
77
181
  color: hsl(var(--muted-foreground));
78
182
  }
79
183
 
80
184
  .text-caption {
81
- @apply text-xs font-medium;
185
+ font-size: 0.75rem;
186
+ line-height: 1rem;
187
+ font-weight: 500;
82
188
  color: hsl(var(--muted-foreground));
83
189
  }
84
190
 
85
191
  .text-small {
86
- @apply text-sm font-bold;
192
+ font-size: 0.875rem;
193
+ line-height: 1.25rem;
194
+ font-weight: 700;
87
195
  color: hsl(var(--foreground));
88
196
  }
89
197
 
90
198
  .text-xs-bold {
91
- @apply text-xs font-bold;
199
+ font-size: 0.75rem;
200
+ line-height: 1rem;
201
+ font-weight: 700;
92
202
  color: hsl(var(--foreground));
93
203
  }
94
204
 
95
205
  .text-label {
96
- @apply font-bold;
206
+ font-weight: 700;
97
207
  color: hsl(var(--foreground));
98
208
  }
99
209
 
100
210
  .text-counter {
101
- @apply text-sm font-bold;
211
+ font-size: 0.875rem;
212
+ line-height: 1.25rem;
213
+ font-weight: 700;
102
214
  color: hsl(var(--muted-foreground));
103
215
  }
104
216
 
105
217
  .empty-state-text {
106
- @apply text-center py-8 font-bold;
218
+ text-align: center;
219
+ padding-top: 2rem;
220
+ padding-bottom: 2rem;
221
+ font-weight: 700;
107
222
  color: hsl(var(--muted-foreground));
108
223
  }
109
224
 
110
225
  .card-description {
111
- @apply text-sm font-bold;
226
+ font-size: 0.875rem;
227
+ line-height: 1.25rem;
228
+ font-weight: 700;
112
229
  color: hsl(var(--muted-foreground));
113
230
  }
114
231
 
115
232
  .input-description {
116
- @apply text-xs;
233
+ font-size: 0.75rem;
234
+ line-height: 1rem;
117
235
  color: hsl(var(--muted-foreground));
118
236
  }
119
237
 
120
238
  .disclaimer-text {
121
- @apply text-sm font-bold text-center;
239
+ font-size: 0.875rem;
240
+ line-height: 1.25rem;
241
+ font-weight: 700;
242
+ text-align: center;
122
243
  color: hsl(var(--muted-foreground));
123
244
  }
124
245
 
125
246
  /* Error blocks / inline */
126
247
  .text-error {
127
- @apply text-sm font-bold;
248
+ font-size: 0.875rem;
249
+ line-height: 1.25rem;
250
+ font-weight: 700;
128
251
  color: hsl(var(--destructive));
129
252
  }
130
253
 
131
254
  .text-error-block {
132
- @apply text-center p-4 font-bold rounded-md border;
255
+ text-align: center;
256
+ padding: 1rem;
257
+ font-weight: 700;
258
+ border-radius: 0.375rem;
259
+ border-width: 1px;
133
260
  color: hsl(var(--destructive));
134
261
  border-color: hsl(var(--destructive) / 0.5);
135
262
  background-color: hsl(var(--destructive) / 0.10);
@@ -139,7 +266,10 @@
139
266
  LINKS
140
267
  ========================================================= */
141
268
  .auth-link {
142
- @apply text-sm underline font-semibold;
269
+ font-size: 0.875rem;
270
+ line-height: 1.25rem;
271
+ text-decoration: underline;
272
+ font-weight: 600;
143
273
  color: hsl(var(--primary));
144
274
  }
145
275
 
@@ -147,13 +277,31 @@
147
277
  CHAT
148
278
  ========================================================= */
149
279
  .chat-date-separator {
150
- @apply text-xs font-bold bg-muted px-3 py-1 rounded-full;
280
+ font-size: 0.75rem;
281
+ line-height: 1rem;
282
+ font-weight: 700;
283
+ background-color: hsl(var(--muted));
284
+ padding-left: 0.75rem;
285
+ padding-right: 0.75rem;
286
+ padding-top: 0.25rem;
287
+ padding-bottom: 0.25rem;
288
+ border-radius: 9999px;
151
289
  color: hsl(var(--foreground));
152
290
  }
153
291
 
154
292
  /* Status pills (replaces bg-blue-100/text-blue-700 etc.) */
155
293
  .status-pill {
156
- @apply text-xs-bold px-2 py-0.5 rounded-full inline-flex items-center;
294
+ font-size: 0.75rem;
295
+ line-height: 1rem;
296
+ font-weight: 700;
297
+ color: hsl(var(--foreground));
298
+ padding-left: 0.5rem;
299
+ padding-right: 0.5rem;
300
+ padding-top: 0.125rem;
301
+ padding-bottom: 0.125rem;
302
+ border-radius: 9999px;
303
+ display: inline-flex;
304
+ align-items: center;
157
305
  }
158
306
 
159
307
  .status-pill--info {
@@ -189,44 +337,56 @@
189
337
  /* ===================
190
338
  SCREEN ADAPTIVE VIEW
191
339
  =================== */
192
- .screen-adaptive-root {
193
- @apply flex flex-1 flex-col w-full;
194
- }
340
+ .screen-adaptive-root {
341
+ display: flex;
342
+ flex: 1 1 0%;
343
+ flex-direction: column;
344
+ width: 100%;
345
+ }
195
346
 
196
- .screen-adaptive-inner {
197
- @apply mx-auto w-full;
198
- }
347
+ .screen-adaptive-inner {
348
+ margin-left: auto;
349
+ margin-right: auto;
350
+ width: 100%;
351
+ }
199
352
 
200
- /* Max width variants */
201
- .screen-max-w-none { max-width: none; }
202
- .screen-max-w-full { max-width: 100%; }
353
+ /* Max width variants */
354
+ .screen-max-w-none { max-width: none; }
355
+ .screen-max-w-full { max-width: 100%; }
203
356
 
204
- .screen-max-w-sm { max-width: 24rem; } /* 384px */
205
- .screen-max-w-md { max-width: 28rem; } /* 448px */
206
- .screen-max-w-lg { max-width: 32rem; } /* 512px */
207
- .screen-max-w-xl { max-width: 36rem; } /* 576px */
357
+ .screen-max-w-sm { max-width: 24rem; } /* 384px */
358
+ .screen-max-w-md { max-width: 28rem; } /* 448px */
359
+ .screen-max-w-lg { max-width: 32rem; } /* 512px */
360
+ .screen-max-w-xl { max-width: 36rem; } /* 576px */
208
361
 
209
- .screen-max-w-2xl { max-width: 42rem; } /* 672px */
210
- .screen-max-w-3xl { max-width: 48rem; } /* 768px */
211
- .screen-max-w-4xl { max-width: 56rem; } /* 896px */
212
- .screen-max-w-5xl { max-width: 64rem; } /* 1024px */
213
- .screen-max-w-6xl { max-width: 72rem; } /* 1152px */
214
- .screen-max-w-7xl { max-width: 80rem; } /* 1280px */
362
+ .screen-max-w-2xl { max-width: 42rem; } /* 672px */
363
+ .screen-max-w-3xl { max-width: 48rem; } /* 768px */
364
+ .screen-max-w-4xl { max-width: 56rem; } /* 896px */
365
+ .screen-max-w-5xl { max-width: 64rem; } /* 1024px */
366
+ .screen-max-w-6xl { max-width: 72rem; } /* 1152px */
367
+ .screen-max-w-7xl { max-width: 80rem; } /* 1280px */
215
368
 
216
369
  /* =========================================================
217
370
  RULE CARDS
218
371
  ========================================================= */
219
372
  .rule-card {
220
- @apply p-4 rounded-lg border-2 border-border bg-card;
373
+ padding: 1rem;
374
+ border-radius: 0.5rem;
375
+ border-width: 2px;
376
+ border-color: hsl(var(--border));
377
+ background-color: hsl(var(--card));
221
378
  }
222
379
 
223
380
  .rule-card-title {
224
- @apply font-bold mb-2;
381
+ font-weight: 700;
382
+ margin-bottom: 0.5rem;
225
383
  color: hsl(var(--foreground));
226
384
  }
227
385
 
228
386
  .rule-card-description {
229
- @apply text-sm leading-relaxed font-bold;
387
+ font-size: 0.875rem;
388
+ line-height: 1.625;
389
+ font-weight: 700;
230
390
  color: hsl(var(--muted-foreground));
231
391
  }
232
392
 
@@ -234,29 +394,56 @@
234
394
  ACCORDION
235
395
  ========================================================= */
236
396
  .accordion-trigger {
237
- @apply p-6 hover:no-underline rounded-t-lg;
397
+ padding: 1.5rem;
398
+ border-radius: 0.5rem 0.5rem 0 0;
399
+ }
400
+ .accordion-trigger:hover {
401
+ text-decoration: none;
238
402
  }
239
403
 
240
404
  .accordion-icon-container {
241
- @apply p-2 rounded-lg;
405
+ padding: 0.5rem;
406
+ border-radius: 0.5rem;
242
407
  background-color: hsl(var(--primary) / 0.10);
243
408
  color: hsl(var(--primary));
244
409
  }
245
410
 
246
411
  .accordion-title {
247
- @apply text-lg font-semibold;
412
+ font-size: 1.125rem;
413
+ line-height: 1.75rem;
414
+ font-weight: 600;
248
415
  color: hsl(var(--foreground));
249
416
  }
250
417
 
251
418
  .accordion-content-container {
252
- @apply px-6 py-4 rounded-b-lg space-y-4 bg-card;
419
+ padding-left: 1.5rem;
420
+ padding-right: 1.5rem;
421
+ padding-top: 1rem;
422
+ padding-bottom: 1rem;
423
+ border-radius: 0 0 0.5rem 0.5rem;
424
+ background-color: hsl(var(--card));
425
+ }
426
+ .accordion-content-container > * + * {
427
+ margin-top: 1rem;
253
428
  }
254
429
 
255
430
  /* =========================================================
256
431
  DETAILS (nested accordions)
257
432
  ========================================================= */
258
433
  .details-summary {
259
- @apply flex items-center justify-between cursor-pointer list-none p-4 rounded-lg border-2 border-border bg-card transition-all;
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: space-between;
437
+ cursor: pointer;
438
+ list-style: none;
439
+ padding: 1rem;
440
+ border-radius: 0.5rem;
441
+ border-width: 2px;
442
+ border-color: hsl(var(--border));
443
+ background-color: hsl(var(--card));
444
+ transition-property: all;
445
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
446
+ transition-duration: 150ms;
260
447
  }
261
448
 
262
449
  .details-summary:hover {
@@ -265,7 +452,11 @@
265
452
  }
266
453
 
267
454
  .details-icon-container {
268
- @apply p-2 rounded-lg transition-colors;
455
+ padding: 0.5rem;
456
+ border-radius: 0.5rem;
457
+ transition-property: color, background-color;
458
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
459
+ transition-duration: 150ms;
269
460
  background-color: hsl(var(--primary) / 0.10);
270
461
  color: hsl(var(--primary));
271
462
  }
@@ -276,7 +467,9 @@
276
467
  }
277
468
 
278
469
  .details-title {
279
- @apply font-semibold text-base;
470
+ font-weight: 600;
471
+ font-size: 1rem;
472
+ line-height: 1.5rem;
280
473
  color: hsl(var(--foreground));
281
474
  }
282
475
 
@@ -288,7 +481,11 @@
288
481
  AGREEMENT LIST ITEMS
289
482
  ========================================================= */
290
483
  .agreement-list-item {
291
- @apply flex gap-2 text-sm font-bold;
484
+ display: flex;
485
+ gap: 0.5rem;
486
+ font-size: 0.875rem;
487
+ line-height: 1.25rem;
488
+ font-weight: 700;
292
489
  color: hsl(var(--muted-foreground));
293
490
  }
294
491
 
@@ -296,28 +493,51 @@
296
493
  FUTURE PLANS / MEDIA
297
494
  ========================================================= */
298
495
  .future-plan-description {
299
- @apply text-base whitespace-pre-wrap leading-relaxed max-w-prose font-bold;
496
+ font-size: 1rem;
497
+ line-height: 1.5rem;
498
+ white-space: pre-wrap;
499
+ line-height: 1.625;
500
+ max-width: 65ch;
501
+ font-weight: 700;
300
502
  color: hsl(var(--muted-foreground));
301
503
  }
302
504
 
303
505
  .future-plan-media {
304
- @apply w-full aspect-video rounded-lg overflow-hidden border;
506
+ width: 100%;
507
+ aspect-ratio: 16 / 9;
508
+ border-radius: 0.5rem;
509
+ overflow: hidden;
510
+ border-width: 1px;
305
511
  border-color: hsl(var(--border));
306
512
  background-color: hsl(var(--muted));
307
513
  }
308
514
 
309
515
  /* Media helpers (replaces repeated w/full/max-w/aspect) */
310
516
  .media-image-sm-centered {
311
- @apply w-full h-auto max-w-sm mx-auto;
517
+ width: 100%;
518
+ height: auto;
519
+ max-width: 24rem;
520
+ margin-left: auto;
521
+ margin-right: auto;
312
522
  }
313
523
 
314
524
  .media-square-centered {
315
- @apply w-full max-w-[400px] mx-auto aspect-square rounded-md overflow-hidden;
525
+ width: 100%;
526
+ max-width: 400px;
527
+ margin-left: auto;
528
+ margin-right: auto;
529
+ aspect-ratio: 1 / 1;
530
+ border-radius: 0.375rem;
531
+ overflow: hidden;
316
532
  background-color: hsl(var(--muted));
317
533
  }
318
534
 
319
535
  .media-wide {
320
- @apply w-full aspect-video rounded-lg overflow-hidden border;
536
+ width: 100%;
537
+ aspect-ratio: 16 / 9;
538
+ border-radius: 0.5rem;
539
+ overflow: hidden;
540
+ border-width: 1px;
321
541
  border-color: hsl(var(--border));
322
542
  background-color: hsl(var(--muted));
323
543
  }
@@ -326,31 +546,40 @@
326
546
  INFO SECTIONS
327
547
  ========================================================= */
328
548
  .info-section {
329
- @apply flex items-start gap-4;
549
+ display: flex;
550
+ align-items: flex-start;
551
+ gap: 1rem;
330
552
  }
331
553
 
332
554
  .info-section-icon {
333
- @apply mt-1;
555
+ margin-top: 0.25rem;
334
556
  color: hsl(var(--primary));
335
557
  }
336
558
 
337
559
  .info-section-title {
338
- @apply font-semibold;
560
+ font-weight: 600;
339
561
  color: hsl(var(--foreground));
340
562
  }
341
563
 
342
564
  .info-section-description {
343
- @apply text-sm font-bold;
565
+ font-size: 0.875rem;
566
+ line-height: 1.25rem;
567
+ font-weight: 700;
344
568
  color: hsl(var(--muted-foreground));
345
569
  }
346
570
 
347
571
  .info-section-divider {
348
- @apply w-full h-px;
572
+ width: 100%;
573
+ height: 1px;
349
574
  background-color: hsl(var(--border));
350
575
  }
351
576
 
352
577
  .info-section-header {
353
- @apply text-lg font-semibold text-center pt-4;
578
+ font-size: 1.125rem;
579
+ line-height: 1.75rem;
580
+ font-weight: 600;
581
+ text-align: center;
582
+ padding-top: 1rem;
354
583
  color: hsl(var(--foreground));
355
584
  }
356
585
 
@@ -358,26 +587,33 @@
358
587
  ATTRIBUTION SECTIONS
359
588
  ========================================================= */
360
589
  .attribution-item {
361
- @apply flex items-start gap-4;
590
+ display: flex;
591
+ align-items: flex-start;
592
+ gap: 1rem;
362
593
  }
363
594
 
364
595
  .attribution-icon {
365
- @apply mt-1;
596
+ margin-top: 0.25rem;
366
597
  color: hsl(var(--primary));
367
598
  }
368
599
 
369
600
  .attribution-title {
370
- @apply font-semibold;
601
+ font-weight: 600;
371
602
  color: hsl(var(--foreground));
372
603
  }
373
604
 
374
605
  .attribution-cost {
375
- @apply text-sm font-semibold;
606
+ font-size: 0.875rem;
607
+ line-height: 1.25rem;
608
+ font-weight: 600;
376
609
  color: hsl(var(--primary));
377
610
  }
378
611
 
379
612
  .attribution-description {
380
- @apply text-sm mt-1 font-bold;
613
+ font-size: 0.875rem;
614
+ line-height: 1.25rem;
615
+ margin-top: 0.25rem;
616
+ font-weight: 700;
381
617
  color: hsl(var(--muted-foreground));
382
618
  }
383
619
 
@@ -385,20 +621,27 @@
385
621
  DEDICATION SECTIONS
386
622
  ========================================================= */
387
623
  .dedication-section {
388
- @apply text-center space-y-2;
624
+ text-align: center;
625
+ }
626
+ .dedication-section > * + * {
627
+ margin-top: 0.5rem;
389
628
  }
390
629
 
391
630
  .dedication-header {
392
- @apply inline-flex items-center gap-2;
631
+ display: inline-flex;
632
+ align-items: center;
633
+ gap: 0.5rem;
393
634
  }
394
635
 
395
636
  .dedication-title {
396
- @apply font-semibold text-lg;
637
+ font-weight: 600;
638
+ font-size: 1.125rem;
639
+ line-height: 1.75rem;
397
640
  color: hsl(var(--foreground));
398
641
  }
399
642
 
400
643
  .dedication-content {
401
- @apply font-bold;
644
+ font-weight: 700;
402
645
  color: hsl(var(--muted-foreground));
403
646
  }
404
647
 
@@ -406,26 +649,47 @@
406
649
  DMCA INFO
407
650
  ========================================================= */
408
651
  .dmca-section-title {
409
- @apply text-lg font-semibold;
652
+ font-size: 1.125rem;
653
+ line-height: 1.75rem;
654
+ font-weight: 600;
410
655
  color: hsl(var(--foreground));
411
656
  }
412
657
 
413
658
  .dmca-info-container {
414
- @apply space-y-2 pl-4 border-l-2;
659
+ padding-left: 1rem;
660
+ border-left-width: 2px;
415
661
  border-color: hsl(var(--border));
416
662
  }
663
+ .dmca-info-container > * + * {
664
+ margin-top: 0.5rem;
665
+ }
417
666
 
418
667
  .dmca-info-row {
419
- @apply flex flex-col sm:flex-row sm:items-center;
668
+ display: flex;
669
+ flex-direction: column;
670
+ }
671
+ @media (min-width: 640px) {
672
+ .dmca-info-row {
673
+ flex-direction: row;
674
+ align-items: center;
675
+ }
420
676
  }
421
677
 
422
678
  .dmca-label {
423
- @apply w-full sm:w-40 font-semibold shrink-0;
679
+ width: 100%;
680
+ font-weight: 600;
681
+ flex-shrink: 0;
424
682
  color: hsl(var(--foreground));
425
683
  }
684
+ @media (min-width: 640px) {
685
+ .dmca-label {
686
+ width: 10rem;
687
+ }
688
+ }
426
689
 
427
690
  .dmca-value {
428
- @apply break-all font-bold;
691
+ word-break: break-all;
692
+ font-weight: 700;
429
693
  color: hsl(var(--muted-foreground));
430
694
  }
431
695
 
@@ -433,29 +697,51 @@
433
697
  BUTTONS
434
698
  ========================================================= */
435
699
  .primary-action-button {
436
- @apply w-full text-lg py-6;
700
+ width: 100%;
701
+ font-size: 1.125rem;
702
+ line-height: 1.75rem;
703
+ padding-top: 1.5rem;
704
+ padding-bottom: 1.5rem;
437
705
  }
438
706
 
439
707
  .secondary-action-grid {
440
- @apply grid grid-cols-2 md:grid-cols-3 gap-4 mt-6;
708
+ display: grid;
709
+ grid-template-columns: repeat(2, minmax(0, 1fr));
710
+ gap: 1rem;
711
+ margin-top: 1.5rem;
712
+ }
713
+ @media (min-width: 768px) {
714
+ .secondary-action-grid {
715
+ grid-template-columns: repeat(3, minmax(0, 1fr));
716
+ }
441
717
  }
442
718
 
443
719
  .secondary-action-button {
444
- @apply justify-center;
720
+ justify-content: center;
445
721
  }
446
722
 
447
723
  /* =========================================================
448
724
  FOOTER
449
725
  ========================================================= */
450
726
  .app-footer {
451
- @apply w-full h-12 flex-shrink-0 bg-secondary pt-4;
727
+ width: 100%;
728
+ height: 3rem;
729
+ flex-shrink: 0;
730
+ background-color: hsl(var(--secondary));
731
+ padding-top: 1rem;
452
732
  }
453
733
 
454
734
  /* =========================================================
455
735
  CUSTOM FORM ELEMENTS
456
736
  ========================================================= */
457
737
  .form-select-trigger {
458
- @apply font-semibold rounded-xl h-11 px-4 shadow-sm border-2;
738
+ font-weight: 600;
739
+ border-radius: 0.75rem;
740
+ height: 2.75rem;
741
+ padding-left: 1rem;
742
+ padding-right: 1rem;
743
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
744
+ border-width: 2px;
459
745
  background-color: hsl(var(--background));
460
746
  border-color: hsl(var(--border)) !important;
461
747
  color: hsl(var(--foreground));
@@ -476,25 +762,39 @@
476
762
  LANDING PAGE
477
763
  ========================================================= */
478
764
  .landing-tabs-list {
479
- @apply grid w-full grid-cols-2 bg-transparent p-0 gap-2 mb-4;
765
+ display: grid;
766
+ width: 100%;
767
+ grid-template-columns: repeat(2, minmax(0, 1fr));
768
+ background-color: transparent;
769
+ padding: 0;
770
+ gap: 0.5rem;
771
+ margin-bottom: 1rem;
480
772
  }
481
773
 
482
774
  .landing-tab-trigger {
483
- @apply flex-1;
775
+ flex: 1 1 0%;
484
776
  }
485
777
 
486
778
  .landing-section-title {
487
- @apply text-xl font-semibold text-center;
779
+ font-size: 1.25rem;
780
+ line-height: 1.75rem;
781
+ font-weight: 600;
782
+ text-align: center;
488
783
  color: hsl(var(--foreground));
489
784
  }
490
785
 
491
786
  .landing-section-description {
492
- @apply text-center font-bold;
787
+ text-align: center;
788
+ font-weight: 700;
493
789
  color: hsl(var(--muted-foreground));
494
790
  }
495
791
 
496
792
  .landing-video-container {
497
- @apply aspect-video w-full rounded-lg overflow-hidden border;
793
+ aspect-ratio: 16 / 9;
794
+ width: 100%;
795
+ border-radius: 0.5rem;
796
+ overflow: hidden;
797
+ border-width: 1px;
498
798
  border-color: hsl(var(--border));
499
799
  background-color: hsl(var(--muted));
500
800
  }
@@ -503,31 +803,55 @@
503
803
  APP HEADER
504
804
  ========================================================= */
505
805
  .app-header {
506
- @apply flex items-center h-[60px] shadow-md;
806
+ display: flex;
807
+ align-items: center;
808
+ height: 60px;
809
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
507
810
  background-color: hsl(var(--secondary));
508
811
  border-bottom: 2px solid hsl(var(--border));
509
812
  }
510
813
 
511
814
  .app-header-container {
512
- @apply flex items-center justify-between w-full px-0.5;
815
+ display: flex;
816
+ align-items: center;
817
+ justify-content: space-between;
818
+ width: 100%;
819
+ padding-left: 0.125rem;
820
+ padding-right: 0.125rem;
513
821
  }
514
822
 
515
823
  .app-header-actions {
516
- @apply flex items-center space-x-3;
824
+ display: flex;
825
+ align-items: center;
826
+ }
827
+ .app-header-actions > * + * {
828
+ margin-left: 0.75rem;
517
829
  }
518
830
 
519
831
  .app-header-menu-button {
520
- @apply flex items-center space-x-2 h-10 px-3 rounded-full;
832
+ display: flex;
833
+ align-items: center;
834
+ height: 2.5rem;
835
+ padding-left: 0.75rem;
836
+ padding-right: 0.75rem;
837
+ border-radius: 9999px;
838
+ }
839
+ .app-header-menu-button > * + * {
840
+ margin-left: 0.5rem;
521
841
  }
522
842
 
523
843
  .app-dropdown-menu {
524
- @apply w-56 border-2;
844
+ width: 14rem;
845
+ border-width: 2px;
525
846
  background-color: hsl(var(--card));
526
847
  border-color: hsl(var(--border));
527
848
  }
528
849
 
529
850
  .app-dropdown-item {
530
- @apply flex items-center cursor-pointer font-bold;
851
+ display: flex;
852
+ align-items: center;
853
+ cursor: pointer;
854
+ font-weight: 700;
531
855
  color: hsl(var(--foreground)) !important;
532
856
  }
533
857
 
@@ -541,7 +865,9 @@
541
865
  POPOVERS
542
866
  ========================================================= */
543
867
  .app-popover {
544
- @apply w-80 p-2 border-2;
868
+ width: 20rem;
869
+ padding: 0.5rem;
870
+ border-width: 2px;
545
871
  background-color: hsl(var(--card));
546
872
  border-color: hsl(var(--border));
547
873
  color: hsl(var(--card-foreground));
@@ -551,7 +877,7 @@
551
877
  HELP DIALOG
552
878
  ========================================================= */
553
879
  .help-dialog-title {
554
- @apply font-semibold;
880
+ font-weight: 600;
555
881
  color: hsl(var(--foreground)) !important;
556
882
  }
557
883
 
@@ -571,11 +897,24 @@
571
897
  ========================================================= */
572
898
  .filter-select-trigger,
573
899
  .sort-select-trigger {
574
- @apply w-full sm:w-auto rounded-xl h-11 px-4 font-bold shadow-sm border-2;
900
+ width: 100%;
901
+ border-radius: 0.75rem;
902
+ height: 2.75rem;
903
+ padding-left: 1rem;
904
+ padding-right: 1rem;
905
+ font-weight: 700;
906
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
907
+ border-width: 2px;
575
908
  background-color: hsl(var(--primary));
576
909
  border-color: hsl(var(--border));
577
910
  color: hsl(var(--primary-foreground));
578
911
  }
912
+ @media (min-width: 640px) {
913
+ .filter-select-trigger,
914
+ .sort-select-trigger {
915
+ width: auto;
916
+ }
917
+ }
579
918
 
580
919
  .filter-select-content,
581
920
  .sort-select-content {
@@ -586,7 +925,7 @@
586
925
 
587
926
  .filter-select-item,
588
927
  .sort-select-item {
589
- @apply font-bold;
928
+ font-weight: 700;
590
929
  color: hsl(var(--foreground));
591
930
  }
592
931
 
@@ -621,12 +960,19 @@
621
960
  VIEW TOGGLE (GENERIC)
622
961
  ========================================================= */
623
962
  .view-toggle-container {
624
- @apply flex items-center p-1 rounded-xl border-2 shadow-sm;
963
+ display: flex;
964
+ align-items: center;
965
+ padding: 0.25rem;
966
+ border-radius: 0.75rem;
967
+ border-width: 2px;
968
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
625
969
  background-color: hsl(var(--muted));
626
970
  border-color: hsl(var(--border));
627
971
  }
628
972
 
629
973
  .view-toggle-button {
630
- @apply rounded-lg h-8 w-8;
974
+ border-radius: 0.5rem;
975
+ height: 2rem;
976
+ width: 2rem;
631
977
  color: hsl(var(--foreground));
632
- }
978
+ }
package/dist/styles/hooks.css CHANGED
@@ -4,14 +4,19 @@
4
4
  BUTTONS
5
5
  =================== */
6
6
  .btn-destructive {
7
- @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
7
+ background-color: hsl(var(--destructive));
8
+ color: hsl(var(--destructive-foreground));
9
+ }
10
+ .btn-destructive:hover {
11
+ background-color: hsl(var(--destructive) / 0.9);
8
12
  }
9
13
 
10
14
  /* ===================
11
15
  MESSAGE BUBBLES
12
16
  =================== */
13
17
  .msg-bubble {
14
- @apply p-3 rounded-lg;
18
+ padding: 0.75rem;
19
+ border-radius: 0.5rem;
15
20
  }
16
21
 
17
22
  .msg-bubble--mine {
@@ -19,14 +24,21 @@
19
24
  }
20
25
 
21
26
  .msg-bubble--theirs {
22
- @apply bg-muted;
27
+ background-color: hsl(var(--muted));
23
28
  }
24
29
 
25
30
  /* ===================
26
31
  STATUS PILLS
27
32
  =================== */
28
33
  .status-pill {
29
- @apply text-xs-bold px-2 py-0.5 rounded-full;
34
+ font-size: 0.75rem;
35
+ line-height: 1rem;
36
+ font-weight: 700;
37
+ padding-left: 0.5rem;
38
+ padding-right: 0.5rem;
39
+ padding-top: 0.125rem;
40
+ padding-bottom: 0.125rem;
41
+ border-radius: 9999px;
30
42
  }
31
43
 
32
44
  /* map to semantic tokens (no blue/yellow/green hardcodes) */
@@ -46,18 +58,21 @@
46
58
  }
47
59
 
48
60
  .status-pill--closed {
49
- @apply bg-muted text-muted-foreground;
61
+ background-color: hsl(var(--muted));
62
+ color: hsl(var(--muted-foreground));
50
63
  }
51
64
 
52
65
  .status-pill--default {
53
- @apply bg-muted text-muted-foreground;
66
+ background-color: hsl(var(--muted));
67
+ color: hsl(var(--muted-foreground));
54
68
  }
55
69
 
56
70
  /* ===================
57
71
  STATUS ICONS
58
72
  =================== */
59
73
  .status-icon {
60
- @apply h-5 w-5;
74
+ height: 1.25rem;
75
+ width: 1.25rem;
61
76
  }
62
77
 
63
78
  .status-icon--success { color: hsl(var(--success)); }
@@ -69,7 +84,12 @@
69
84
  NOTIFICATIONS
70
85
  =================== */
71
86
  .notify-dot {
72
- @apply absolute top-1 right-1 h-2 w-2 rounded-full;
87
+ position: absolute;
88
+ top: 0.25rem;
89
+ right: 0.25rem;
90
+ height: 0.5rem;
91
+ width: 0.5rem;
92
+ border-radius: 9999px;
73
93
  background-color: hsl(var(--destructive));
74
94
  }
75
95
 
@@ -81,13 +101,20 @@
81
101
  MEDIA PREVIEW
82
102
  =================== */
83
103
  .media-preview {
84
- @apply relative w-full h-full;
104
+ position: relative;
105
+ width: 100%;
106
+ height: 100%;
85
107
  }
86
108
 
87
109
  .media-preview--frame {
88
- @apply w-full h-auto max-w-sm mx-auto;
110
+ width: 100%;
111
+ height: auto;
112
+ max-width: 24rem;
113
+ margin-left: auto;
114
+ margin-right: auto;
89
115
  }
90
116
 
91
117
  .media-preview--fullwidth {
92
- @apply w-full h-auto;
118
+ width: 100%;
119
+ height: auto;
93
120
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttt-productions/theme-core",
3
- "version": "0.1.22",
3
+ "version": "0.1.24",
4
4
  "description": "Theme provider + CSS token contract for TTT Productions apps",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",