@changerawr/markdown 1.1.10 → 1.1.11

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.
@@ -72,85 +72,447 @@
72
72
  /* Interaction utilities */
73
73
  .hover\:underline:hover { text-decoration-line: underline; }
74
74
  .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
75
+ .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
75
76
  .duration-200 { transition-duration: 200ms; }
76
77
  .cursor-pointer { cursor: pointer; }
77
78
 
78
79
  /* Leading utilities */
79
80
  .leading-7 { line-height: 1.75rem; }
80
81
  .leading-relaxed { line-height: 1.625; }
81
- }
82
82
 
83
- @layer components {
84
- /* Alert components */
85
- .changerawr-alert {
86
- @apply border-l-4 p-4 mb-4 rounded-md transition-all duration-200;
83
+ /* Opacity utilities */
84
+ .opacity-0 { opacity: 0; }
85
+ .opacity-100 { opacity: 1; }
86
+
87
+ /* Group utilities for heading hover effects */
88
+ .group { position: relative; }
89
+ .group:hover .group-hover\:opacity-100 { opacity: 1; }
90
+
91
+ /* Text color utilities */
92
+ .text-muted-foreground {
93
+ color: color-mix(in srgb, currentColor 60%, transparent);
87
94
  }
95
+ }
88
96
 
89
- .changerawr-alert-info {
97
+ @layer components {
98
+ /* Alert components - matching AlertExtension classes */
99
+ .bg-blue-500\/10 {
90
100
  background-color: color-mix(in srgb, #3b82f6 10%, transparent);
101
+ }
102
+ .border-blue-500\/30 {
91
103
  border-color: color-mix(in srgb, #3b82f6 30%, transparent);
92
- color: #3b82f6;
104
+ }
105
+ .text-blue-600 {
106
+ color: #2563eb;
107
+ }
108
+ .border-l-blue-500 {
93
109
  border-left-color: #3b82f6;
94
110
  }
95
111
 
96
- .changerawr-alert-warning {
112
+ .bg-amber-500\/10 {
97
113
  background-color: color-mix(in srgb, #f59e0b 10%, transparent);
114
+ }
115
+ .border-amber-500\/30 {
98
116
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
99
- color: #f59e0b;
117
+ }
118
+ .text-amber-600 {
119
+ color: #d97706;
120
+ }
121
+ .border-l-amber-500 {
100
122
  border-left-color: #f59e0b;
101
123
  }
102
124
 
103
- .changerawr-alert-error {
125
+ .bg-red-500\/10 {
104
126
  background-color: color-mix(in srgb, #ef4444 10%, transparent);
127
+ }
128
+ .border-red-500\/30 {
105
129
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
106
- color: #ef4444;
130
+ }
131
+ .text-red-600 {
132
+ color: #dc2626;
133
+ }
134
+ .border-l-red-500 {
107
135
  border-left-color: #ef4444;
108
136
  }
109
137
 
110
- .changerawr-alert-success {
138
+ .bg-green-500\/10 {
111
139
  background-color: color-mix(in srgb, #10b981 10%, transparent);
140
+ }
141
+ .border-green-500\/30 {
112
142
  border-color: color-mix(in srgb, #10b981 30%, transparent);
113
- color: #10b981;
143
+ }
144
+ .text-green-600 {
145
+ color: #16a34a;
146
+ }
147
+ .border-l-green-500 {
114
148
  border-left-color: #10b981;
115
149
  }
116
150
 
117
- /* Button components */
118
- .changerawr-button {
119
- @apply inline-flex items-center justify-center px-4 py-2 rounded-lg transition-all duration-200 cursor-pointer;
120
- border: 1px solid transparent;
121
- font-weight: 500;
122
- text-decoration: none;
151
+ .bg-purple-500\/10 {
152
+ background-color: color-mix(in srgb, #a855f7 10%, transparent);
153
+ }
154
+ .border-purple-500\/30 {
155
+ border-color: color-mix(in srgb, #a855f7 30%, transparent);
156
+ }
157
+ .text-purple-600 {
158
+ color: #9333ea;
159
+ }
160
+ .border-l-purple-500 {
161
+ border-left-color: #a855f7;
123
162
  }
124
163
 
125
- .changerawr-button-primary {
126
- background-color: #3b82f6;
127
- color: white;
164
+ .bg-gray-500\/10 {
165
+ background-color: color-mix(in srgb, #6b7280 10%, transparent);
166
+ }
167
+ .border-gray-500\/30 {
168
+ border-color: color-mix(in srgb, #6b7280 30%, transparent);
169
+ }
170
+ .text-gray-600 {
171
+ color: #4b5563;
172
+ }
173
+ .border-l-gray-500 {
174
+ border-left-color: #6b7280;
128
175
  }
129
176
 
130
- .changerawr-button-primary:hover:not(:disabled) {
131
- background-color: color-mix(in srgb, #3b82f6 90%, black);
177
+ /* Button components - matching ButtonExtension classes */
178
+ .bg-slate-600 {
179
+ background-color: #475569;
180
+ }
181
+ .bg-slate-700 {
182
+ background-color: #334155;
183
+ }
184
+ .hover\:bg-slate-700:hover {
185
+ background-color: #334155;
186
+ }
187
+ .border-slate-500 {
188
+ border-color: #64748b;
189
+ }
190
+ .border-slate-400 {
191
+ border-color: #94a3b8;
192
+ }
193
+ .hover\:border-slate-400:hover {
194
+ border-color: #94a3b8;
195
+ }
196
+ .focus\:ring-slate-500:focus {
197
+ --tw-ring-color: #64748b;
198
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--tw-ring-color) 50%, transparent);
199
+ }
200
+
201
+ .bg-blue-600 {
202
+ background-color: #2563eb;
203
+ }
204
+ .bg-blue-700 {
205
+ background-color: #1d4ed8;
206
+ }
207
+ .hover\:bg-blue-700:hover {
208
+ background-color: #1d4ed8;
209
+ }
210
+ .hover\:bg-blue-50:hover {
211
+ background-color: #eff6ff;
212
+ }
213
+ .border-blue-500 {
214
+ border-color: #3b82f6;
215
+ }
216
+ .border-blue-400 {
217
+ border-color: #60a5fa;
218
+ }
219
+ .border-blue-600 {
220
+ border-color: #2563eb;
221
+ }
222
+ .border-blue-700 {
223
+ border-color: #1d4ed8;
224
+ }
225
+ .hover\:border-blue-400:hover {
226
+ border-color: #60a5fa;
227
+ }
228
+ .hover\:border-blue-700:hover {
229
+ border-color: #1d4ed8;
230
+ }
231
+ .focus\:ring-blue-500:focus {
232
+ --tw-ring-color: #3b82f6;
233
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--tw-ring-color) 50%, transparent);
234
+ }
235
+
236
+ .bg-gray-600 {
237
+ background-color: #4b5563;
238
+ }
239
+ .bg-gray-700 {
240
+ background-color: #374151;
241
+ }
242
+ .bg-gray-100 {
243
+ background-color: #f3f4f6;
244
+ }
245
+ .hover\:bg-gray-700:hover {
246
+ background-color: #374151;
247
+ }
248
+ .hover\:bg-gray-100:hover {
249
+ background-color: #f3f4f6;
250
+ }
251
+ .border-gray-400 {
252
+ border-color: #9ca3af;
253
+ }
254
+ .border-gray-500 {
255
+ border-color: #6b7280;
256
+ }
257
+ .hover\:border-gray-400:hover {
258
+ border-color: #9ca3af;
259
+ }
260
+ .focus\:ring-gray-500:focus {
261
+ --tw-ring-color: #6b7280;
262
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--tw-ring-color) 50%, transparent);
263
+ }
264
+
265
+ .bg-green-600 {
266
+ background-color: #16a34a;
267
+ }
268
+ .bg-green-700 {
269
+ background-color: #15803d;
270
+ }
271
+ .hover\:bg-green-700:hover {
272
+ background-color: #15803d;
273
+ }
274
+ .border-green-400 {
275
+ border-color: #4ade80;
276
+ }
277
+ .hover\:border-green-400:hover {
278
+ border-color: #4ade80;
279
+ }
280
+ .focus\:ring-green-500:focus {
281
+ --tw-ring-color: #22c55e;
282
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--tw-ring-color) 50%, transparent);
283
+ }
284
+
285
+ .bg-red-600 {
286
+ background-color: #dc2626;
287
+ }
288
+ .bg-red-700 {
289
+ background-color: #b91c1c;
290
+ }
291
+ .hover\:bg-red-700:hover {
292
+ background-color: #b91c1c;
293
+ }
294
+ .border-red-400 {
295
+ border-color: #f87171;
296
+ }
297
+ .hover\:border-red-400:hover {
298
+ border-color: #f87171;
299
+ }
300
+ .focus\:ring-red-500:focus {
301
+ --tw-ring-color: #ef4444;
302
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--tw-ring-color) 50%, transparent);
303
+ }
304
+
305
+ .bg-transparent {
306
+ background-color: transparent;
307
+ }
308
+ .border-transparent {
309
+ border-color: transparent;
310
+ }
311
+ .text-gray-700 {
312
+ color: #374151;
313
+ }
314
+ .text-gray-900 {
315
+ color: #111827;
316
+ }
317
+ .hover\:text-gray-900:hover {
318
+ color: #111827;
319
+ }
320
+ .hover\:text-blue-700:hover {
321
+ color: #1d4ed8;
322
+ }
323
+
324
+ /* Button size utilities */
325
+ .py-1\.5 {
326
+ padding-top: 0.375rem;
327
+ padding-bottom: 0.375rem;
328
+ }
329
+ .px-6 {
330
+ padding-left: 1.5rem;
331
+ padding-right: 1.5rem;
332
+ }
333
+ .py-3 {
334
+ padding-top: 0.75rem;
335
+ padding-bottom: 0.75rem;
336
+ }
337
+ .gap-1\.5 {
338
+ gap: 0.375rem;
339
+ }
340
+ .gap-2\.5 {
341
+ gap: 0.625rem;
342
+ }
343
+
344
+ /* Button interaction utilities */
345
+ .focus\:outline-none:focus {
346
+ outline: 2px solid transparent;
347
+ outline-offset: 2px;
348
+ }
349
+ .focus\:ring-2:focus {
350
+ box-shadow: 0 0 0 2px currentColor;
351
+ }
352
+ .focus\:ring-offset-2:focus {
353
+ --tw-ring-offset-width: 2px;
354
+ }
355
+ .disabled\:opacity-50:disabled {
356
+ opacity: 0.5;
357
+ }
358
+ .disabled\:cursor-not-allowed:disabled {
359
+ cursor: not-allowed;
360
+ }
361
+ .disabled\:pointer-events-none:disabled {
362
+ pointer-events: none;
363
+ }
364
+ .transform {
365
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
366
+ }
367
+ .hover\:scale-\[1\.02\]:hover {
368
+ --tw-scale-x: 1.02;
369
+ --tw-scale-y: 1.02;
370
+ transform: scale(1.02);
371
+ }
372
+ .active\:scale-\[0\.98\]:active {
373
+ --tw-scale-x: 0.98;
374
+ --tw-scale-y: 0.98;
375
+ transform: scale(0.98);
376
+ }
377
+ .shadow-sm {
378
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
379
+ }
380
+ .shadow-md {
381
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
382
+ }
383
+ .hover\:shadow-md:hover {
384
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
385
+ }
386
+ .active\:shadow-sm:active {
387
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
388
+ }
389
+ .shadow-none {
390
+ box-shadow: none;
391
+ }
392
+ .border {
393
+ border-width: 1px;
394
+ }
395
+ .relative {
396
+ position: relative;
397
+ }
398
+ .overflow-hidden {
399
+ overflow: hidden;
400
+ }
401
+ .before\:absolute::before {
402
+ content: '';
403
+ position: absolute;
404
+ }
405
+ .before\:inset-0::before {
406
+ top: 0;
407
+ right: 0;
408
+ bottom: 0;
409
+ left: 0;
410
+ }
411
+ .before\:rounded-lg::before {
412
+ border-radius: 0.5rem;
413
+ }
414
+ .before\:bg-gradient-to-br::before {
415
+ background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
416
+ }
417
+ .before\:from-white\/20::before {
418
+ --tw-gradient-from: rgb(255 255 255 / 0.2);
419
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
420
+ }
421
+ .before\:to-transparent::before {
422
+ --tw-gradient-to: transparent;
423
+ }
424
+ .before\:opacity-0::before {
425
+ opacity: 0;
426
+ }
427
+ .hover\:before\:opacity-100:hover::before {
428
+ opacity: 1;
429
+ }
430
+ .before\:transition-opacity::before {
431
+ transition-property: opacity;
432
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
433
+ transition-duration: 150ms;
434
+ }
435
+ .before\:duration-200::before {
436
+ transition-duration: 200ms;
437
+ }
438
+ .ease-out {
439
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
440
+ }
441
+ .w-4 {
442
+ width: 1rem;
443
+ }
444
+ .h-4 {
445
+ height: 1rem;
446
+ }
447
+ .ml-1 {
448
+ margin-left: 0.25rem;
449
+ }
450
+ .opacity-75 {
451
+ opacity: 0.75;
452
+ }
453
+ .text-white {
454
+ color: #ffffff;
455
+ }
456
+ .z-10 {
457
+ z-index: 10;
132
458
  }
133
459
  }
134
460
 
135
- /* Dark mode variants */
461
+ /* Dark mode variants for alerts */
136
462
  @media (prefers-color-scheme: dark) {
137
- .changerawr-alert-info {
138
- color: #60a5fa;
463
+ .bg-blue-500\/10 {
139
464
  background-color: color-mix(in srgb, #3b82f6 20%, transparent);
140
465
  }
466
+ .text-blue-600 {
467
+ color: #60a5fa;
468
+ }
141
469
 
142
- .changerawr-alert-warning {
143
- color: #fbbf24;
470
+ .bg-amber-500\/10 {
144
471
  background-color: color-mix(in srgb, #f59e0b 20%, transparent);
145
472
  }
473
+ .text-amber-600 {
474
+ color: #fbbf24;
475
+ }
146
476
 
147
- .changerawr-alert-error {
148
- color: #f87171;
477
+ .bg-red-500\/10 {
149
478
  background-color: color-mix(in srgb, #ef4444 20%, transparent);
150
479
  }
480
+ .text-red-600 {
481
+ color: #f87171;
482
+ }
151
483
 
152
- .changerawr-alert-success {
153
- color: #34d399;
484
+ .bg-green-500\/10 {
154
485
  background-color: color-mix(in srgb, #10b981 20%, transparent);
155
486
  }
487
+ .text-green-600 {
488
+ color: #34d399;
489
+ }
490
+
491
+ .bg-purple-500\/10 {
492
+ background-color: color-mix(in srgb, #a855f7 20%, transparent);
493
+ }
494
+ .text-purple-600 {
495
+ color: #c084fc;
496
+ }
497
+
498
+ .bg-gray-500\/10 {
499
+ background-color: color-mix(in srgb, #6b7280 20%, transparent);
500
+ }
501
+ .text-gray-600 {
502
+ color: #9ca3af;
503
+ }
504
+
505
+ /* Dark mode button adjustments */
506
+ .text-gray-700 {
507
+ color: #d1d5db;
508
+ }
509
+ .text-gray-900 {
510
+ color: #f9fafb;
511
+ }
512
+ .bg-gray-100 {
513
+ background-color: #374151;
514
+ }
515
+ .hover\:bg-gray-100:hover {
516
+ background-color: #4b5563;
517
+ }
156
518
  }