@reevit/react 0.2.0 → 0.2.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/dist/styles.css CHANGED
@@ -113,10 +113,9 @@
113
113
  }
114
114
 
115
115
  .reevit-modal__logo {
116
- font-size: 14px;
117
- font-weight: 600;
118
- color: var(--reevit-text);
119
- letter-spacing: -0.02em;
116
+ height: 18px;
117
+ width: auto;
118
+ object-fit: contain;
120
119
  }
121
120
 
122
121
  .reevit-modal__close {
@@ -344,8 +343,14 @@
344
343
  }
345
344
 
346
345
  .reevit-network-btn:hover {
347
- border-color: var(--reevit-text-secondary);
348
- background: var(--reevit-surface);
346
+ border-color: var(--reevit-text);
347
+ background: transparent;
348
+ }
349
+
350
+ .reevit-network-btn:focus {
351
+ outline: none;
352
+ border-color: var(--reevit-text);
353
+ box-shadow: 0 0 0 2px var(--reevit-border);
349
354
  }
350
355
 
351
356
  .reevit-network-btn--selected {
@@ -354,6 +359,11 @@
354
359
  color: var(--reevit-background);
355
360
  }
356
361
 
362
+ .reevit-network-btn--selected:hover {
363
+ background: var(--reevit-text-secondary);
364
+ border-color: var(--reevit-text-secondary);
365
+ }
366
+
357
367
  .reevit-momo-form__actions {
358
368
  display: flex;
359
369
  gap: 10px;
@@ -387,12 +397,25 @@
387
397
 
388
398
  .reevit-btn--primary {
389
399
  flex: 1;
390
- background: var(--reevit-primary);
391
- color: var(--reevit-primary-foreground);
400
+ background: oklch(1 0 0);
401
+ color: oklch(0.145 0 0);
402
+ border: 1px solid var(--reevit-border);
392
403
  }
393
404
 
394
405
  .reevit-btn--primary:hover:not(:disabled) {
395
- background: var(--reevit-primary-hover);
406
+ background: oklch(0.97 0 0);
407
+ border-color: var(--reevit-text-secondary);
408
+ }
409
+
410
+ .reevit-btn--primary:focus:not(:disabled) {
411
+ outline: none;
412
+ border-color: var(--reevit-text);
413
+ box-shadow: 0 0 0 2px var(--reevit-border);
414
+ }
415
+
416
+ .reevit-btn--primary:active:not(:disabled) {
417
+ background: oklch(0.95 0 0);
418
+ transform: scale(0.98);
396
419
  }
397
420
 
398
421
  .reevit-btn--primary:disabled {
@@ -407,17 +430,23 @@
407
430
  }
408
431
 
409
432
  .reevit-btn--secondary:hover:not(:disabled) {
410
- background: var(--reevit-surface);
411
- border-color: var(--reevit-text-secondary);
433
+ background: transparent;
434
+ border-color: var(--reevit-text);
435
+ }
436
+
437
+ .reevit-btn--secondary:focus:not(:disabled) {
438
+ outline: none;
439
+ border-color: var(--reevit-text);
440
+ box-shadow: 0 0 0 2px var(--reevit-border);
412
441
  }
413
442
 
414
443
  .reevit-trigger-btn {
415
444
  padding: 10px 18px;
416
445
  font-size: 13px;
417
446
  font-weight: 600;
418
- background: var(--reevit-primary);
419
- color: var(--reevit-primary-foreground);
420
- border: none;
447
+ background: oklch(1 0 0);
448
+ color: oklch(0.145 0 0);
449
+ border: 1px solid var(--reevit-border);
421
450
  border-radius: var(--reevit-radius);
422
451
  cursor: pointer;
423
452
  font-family: var(--reevit-font);
@@ -426,7 +455,39 @@
426
455
  }
427
456
 
428
457
  .reevit-trigger-btn:hover {
429
- background: var(--reevit-primary-hover);
458
+ background: oklch(0.97 0 0);
459
+ border-color: var(--reevit-text-secondary);
460
+ }
461
+
462
+ .reevit-trigger-btn:focus {
463
+ outline: none;
464
+ border-color: var(--reevit-text);
465
+ box-shadow: 0 0 0 2px var(--reevit-border);
466
+ }
467
+
468
+ /* Dark mode button overrides */
469
+ @media (prefers-color-scheme: dark) {
470
+ .reevit-btn--primary {
471
+ background: oklch(0.985 0 0);
472
+ color: oklch(0.145 0 0);
473
+ }
474
+
475
+ .reevit-btn--primary:hover:not(:disabled) {
476
+ background: oklch(0.9 0 0);
477
+ }
478
+
479
+ .reevit-btn--primary:active:not(:disabled) {
480
+ background: oklch(0.85 0 0);
481
+ }
482
+
483
+ .reevit-trigger-btn {
484
+ background: oklch(0.985 0 0);
485
+ color: oklch(0.145 0 0);
486
+ }
487
+
488
+ .reevit-trigger-btn:hover {
489
+ background: oklch(0.9 0 0);
490
+ }
430
491
  }
431
492
 
432
493
  /* ===== STATES ===== */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reevit/react",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "description": "Reevit React SDK - Unified Payment Widget",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",