@jjlmoya/utils-sports 1.1.0 → 1.2.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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/tool/reactionTester/component.astro +57 -28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jjlmoya/utils-sports",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/tool/reactionTester/component.astro CHANGED
@@ -370,6 +370,15 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
370
370
 
371
371
  <style>
372
372
  :global(.rt-app) {
373
+ --rt-primary: #6366f1;
374
+ --rt-primary-soft: rgba(99, 102, 241, 0.25);
375
+ --rt-bg-surface: #f1f5f9;
376
+ --rt-bg-page: #fff;
377
+ --rt-text-base: #0f172a;
378
+ --rt-text-muted: #64748b;
379
+ --rt-border-base: #e2e8f0;
380
+ --rt-shadow-base: rgba(0, 0, 0, 0.06);
381
+
373
382
  display: flex;
374
383
  flex-direction: column;
375
384
  gap: 2.5rem;
@@ -380,6 +389,26 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
380
389
  user-select: none;
381
390
  }
382
391
 
392
+ @media (prefers-color-scheme: dark) {
393
+ :global(.rt-app) {
394
+ --rt-bg-surface: #1e293b;
395
+ --rt-bg-page: #0f172a;
396
+ --rt-text-base: #f1f5f9;
397
+ --rt-text-muted: #94a3b8;
398
+ --rt-border-base: #334155;
399
+ --rt-shadow-base: rgba(0, 0, 0, 0.3);
400
+ }
401
+ }
402
+
403
+ :global(.theme-dark .rt-app) {
404
+ --rt-bg-surface: #1e293b;
405
+ --rt-bg-page: #0f172a;
406
+ --rt-text-base: #f1f5f9;
407
+ --rt-text-muted: #94a3b8;
408
+ --rt-border-base: #334155;
409
+ --rt-shadow-base: rgba(0, 0, 0, 0.3);
410
+ }
411
+
383
412
  :global(.rt-area) {
384
413
  position: relative;
385
414
  width: 100%;
@@ -389,7 +418,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
389
418
  overflow: hidden;
390
419
  cursor: pointer;
391
420
  touch-action: manipulation;
392
- background: var(--bg-surface);
421
+ background: var(--rt-bg-surface);
393
422
  display: flex;
394
423
  flex-direction: column;
395
424
  transition: min-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.4s ease;
@@ -431,7 +460,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
431
460
  }
432
461
 
433
462
  :global(.rt-idle) {
434
- background: var(--bg-surface);
463
+ background: var(--rt-bg-surface);
435
464
  }
436
465
 
437
466
  :global(.rt-wait) {
@@ -467,16 +496,16 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
467
496
  display: inline-flex;
468
497
  padding: 1.75rem;
469
498
  border-radius: 2rem;
470
- background: var(--bg-page);
499
+ background: var(--rt-bg-page);
471
500
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
472
501
  margin-bottom: 2rem;
473
- color: var(--primary);
502
+ color: var(--rt-primary);
474
503
  }
475
504
 
476
505
  :global(.rt-idle-title) {
477
506
  font-size: clamp(2rem, 8vw, 4rem);
478
507
  font-weight: 950;
479
- color: var(--text-base);
508
+ color: var(--rt-text-base);
480
509
  margin: 0 0 1rem;
481
510
  letter-spacing: -0.04em;
482
511
  line-height: 1.1;
@@ -484,7 +513,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
484
513
 
485
514
  :global(.rt-idle-sub) {
486
515
  font-size: 1.15rem;
487
- color: var(--text-muted);
516
+ color: var(--rt-text-muted);
488
517
  max-width: 25rem;
489
518
  margin: 0 auto 2.5rem;
490
519
  line-height: 1.6;
@@ -495,20 +524,20 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
495
524
  align-items: center;
496
525
  gap: 0.75rem;
497
526
  padding: 1.1rem 2.2rem;
498
- background: var(--primary);
527
+ background: var(--rt-primary);
499
528
  color: white;
500
529
  border-radius: 1.25rem;
501
530
  font-weight: 800;
502
531
  font-size: 1.15rem;
503
532
  text-transform: uppercase;
504
533
  letter-spacing: 0.05em;
505
- box-shadow: 0 10px 30px var(--primary-soft);
534
+ box-shadow: 0 10px 30px var(--rt-primary-soft);
506
535
  transition: all 0.3s ease;
507
536
  }
508
537
 
509
538
  :global(.rt-start-btn:hover) {
510
539
  transform: translateY(-4px);
511
- box-shadow: 0 15px 40px var(--primary-soft);
540
+ box-shadow: 0 15px 40px var(--rt-primary-soft);
512
541
  }
513
542
 
514
543
  :global(.rt-wait-content) {
@@ -784,7 +813,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
784
813
  :global(.rt-bar-item) {
785
814
  flex: 1;
786
815
  max-width: 3.5rem;
787
- background: var(--primary);
816
+ background: var(--rt-primary);
788
817
  border-radius: 0.75rem 0.75rem 0 0;
789
818
  position: relative;
790
819
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.2);
@@ -887,7 +916,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
887
916
  flex-wrap: wrap;
888
917
  justify-content: center;
889
918
  gap: 1.5rem;
890
- color: var(--text-muted);
919
+ color: var(--rt-text-muted);
891
920
  font-size: 0.85rem;
892
921
  font-weight: 700;
893
922
  text-transform: uppercase;
@@ -902,17 +931,17 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
902
931
 
903
932
  :global(.rt-hint-key) {
904
933
  padding: 0.3rem 0.6rem;
905
- border: 2px solid var(--border-base);
934
+ border: 2px solid var(--rt-border-base);
906
935
  border-radius: 0.6rem;
907
- background: var(--bg-surface);
936
+ background: var(--rt-bg-surface);
908
937
  min-width: 2rem;
909
938
  height: 2rem;
910
939
  display: flex;
911
940
  align-items: center;
912
941
  justify-content: center;
913
942
  font-size: 0.8rem;
914
- color: var(--text-base);
915
- box-shadow: 0 2px 5px var(--shadow-base);
943
+ color: var(--rt-text-base);
944
+ box-shadow: 0 2px 5px var(--rt-shadow-base);
916
945
  }
917
946
 
918
947
  :global(.rt-history) {
@@ -926,7 +955,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
926
955
  :global(.rt-history-title) {
927
956
  font-size: 1.5rem;
928
957
  font-weight: 900;
929
- color: var(--text-base);
958
+ color: var(--rt-text-base);
930
959
  margin: 0;
931
960
  text-align: center;
932
961
  display: flex;
@@ -950,11 +979,11 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
950
979
  }
951
980
 
952
981
  :global(.rt-history-card) {
953
- background: var(--bg-surface);
954
- border: 1px solid var(--border-base);
982
+ background: var(--rt-bg-surface);
983
+ border: 1px solid var(--rt-border-base);
955
984
  border-radius: 2rem;
956
985
  padding: 1.75rem;
957
- box-shadow: 0 10px 25px var(--shadow-base);
986
+ box-shadow: 0 10px 25px var(--rt-shadow-base);
958
987
  transition: transform 0.3s ease;
959
988
  }
960
989
 
@@ -969,7 +998,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
969
998
  letter-spacing: 0.1em;
970
999
  margin: 0 0 1.25rem;
971
1000
  padding-bottom: 1rem;
972
- border-bottom: 1px solid var(--border-base);
1001
+ border-bottom: 1px solid var(--rt-border-base);
973
1002
  display: flex;
974
1003
  align-items: center;
975
1004
  gap: 0.6rem;
@@ -992,7 +1021,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
992
1021
  }
993
1022
 
994
1023
  :global(.rt-list-empty) {
995
- color: var(--text-muted);
1024
+ color: var(--rt-text-muted);
996
1025
  font-size: 0.9rem;
997
1026
  font-style: italic;
998
1027
  text-align: center;
@@ -1003,16 +1032,16 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
1003
1032
  display: flex;
1004
1033
  justify-content: space-between;
1005
1034
  align-items: center;
1006
- background: var(--bg-page);
1035
+ background: var(--rt-bg-page);
1007
1036
  border-radius: 1rem;
1008
1037
  padding: 0.75rem 1rem;
1009
- border: 1px solid var(--border-base);
1038
+ border: 1px solid var(--rt-border-base);
1010
1039
  transition: all 0.2s ease;
1011
1040
  }
1012
1041
 
1013
1042
  :global(.rt-history-entry:hover) {
1014
1043
  transform: translateX(8px);
1015
- border-color: var(--primary-soft);
1044
+ border-color: var(--rt-primary-soft);
1016
1045
  }
1017
1046
 
1018
1047
  :global(.rt-entry-left) {
@@ -1037,9 +1066,9 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
1037
1066
  font-size: 0.7rem;
1038
1067
  padding: 0.25rem 0.6rem;
1039
1068
  border-radius: 0.6rem;
1040
- background: var(--bg-surface);
1041
- color: var(--text-muted);
1042
- border: 1px solid var(--border-base);
1069
+ background: var(--rt-bg-surface);
1070
+ color: var(--rt-text-muted);
1071
+ border: 1px solid var(--rt-border-base);
1043
1072
  font-weight: 800;
1044
1073
  text-transform: uppercase;
1045
1074
  }
@@ -1047,7 +1076,7 @@ const CLICK = `<svg xmlns="http://www.w3.org/2000/svg" class="rt-icon-sm" viewBo
1047
1076
  :global(.rt-entry-date) {
1048
1077
  font-size: 0.7rem;
1049
1078
  font-weight: 700;
1050
- color: var(--text-muted);
1079
+ color: var(--rt-text-muted);
1051
1080
  opacity: 0.7;
1052
1081
  }
1053
1082