@jjlmoya/utils-games-development 1.49.0 → 1.50.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/spriteSheetPacker/sprite-sheet-packer.css +55 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jjlmoya/utils-games-development",
3
- "version": "1.49.0",
3
+ "version": "1.50.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/tool/spriteSheetPacker/sprite-sheet-packer.css CHANGED
@@ -108,7 +108,7 @@
108
108
  }
109
109
 
110
110
  .ssp-dropzone {
111
- border: 2px dashed #818cf8;
111
+ border: 2px dashed var(--color-primary-light, #818cf8);
112
112
  border-radius: 12px;
113
113
  padding: 1.5rem 1rem;
114
114
  text-align: center;
@@ -120,7 +120,7 @@
120
120
  .ssp-dropzone:hover,
121
121
  .ssp-dropzone.dragover {
122
122
  background: rgba(129, 140, 248, 0.12);
123
- border-color: #6366f1;
123
+ border-color: var(--color-primary, #6366f1);
124
124
  }
125
125
 
126
126
  .ssp-drop-title {
@@ -161,13 +161,13 @@
161
161
 
162
162
  .ssp-chip-btn:hover {
163
163
  background: rgba(129, 140, 248, 0.2);
164
- border-color: #6366f1;
164
+ border-color: var(--color-primary, #6366f1);
165
165
  }
166
166
 
167
167
  .ssp-chip-btn.active {
168
168
  background: linear-gradient(135deg, #6366f1, #4f46e5);
169
169
  color: var(--text-on-primary, #fff);
170
- border-color: #6366f1;
170
+ border-color: var(--color-primary, #6366f1);
171
171
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
172
172
  }
173
173
 
@@ -220,7 +220,7 @@
220
220
 
221
221
  .ssp-step-btn:hover {
222
222
  background: rgba(99, 102, 241, 0.2);
223
- border-color: #6366f1;
223
+ border-color: var(--color-primary, #6366f1);
224
224
  }
225
225
 
226
226
  .ssp-step-btn:active {
@@ -229,7 +229,7 @@
229
229
 
230
230
  .ssp-slider {
231
231
  flex: 1;
232
- accent-color: #6366f1;
232
+ accent-color: var(--color-primary, #6366f1);
233
233
  }
234
234
 
235
235
  .ssp-select,
@@ -259,7 +259,7 @@
259
259
  .ssp-toggle-input {
260
260
  width: 1.25rem;
261
261
  height: 1.25rem;
262
- accent-color: #6366f1;
262
+ accent-color: var(--color-primary, #6366f1);
263
263
  cursor: pointer;
264
264
  }
265
265
 
@@ -428,7 +428,12 @@
428
428
  flex-direction: column;
429
429
  border-radius: 10px;
430
430
  overflow: hidden;
431
- border: 1px solid #1e293b;
431
+ border: 1px solid var(--border-base, #e2e8f0);
432
+ background: var(--bg-surface-secondary, #f8fafc);
433
+ }
434
+
435
+ .theme-dark .ssp-code-container {
436
+ border-color: #1e293b;
432
437
  background: #090d16;
433
438
  }
434
439
 
@@ -436,21 +441,30 @@
436
441
  display: flex;
437
442
  align-items: center;
438
443
  justify-content: space-between;
439
- background: #0f172a;
444
+ background: rgba(148, 163, 184, 0.12);
440
445
  padding: 0.6rem 0.85rem;
441
- border-bottom: 1px solid #1e293b;
446
+ border-bottom: 1px solid var(--border-base, #e2e8f0);
447
+ }
448
+
449
+ .theme-dark .ssp-code-header {
450
+ background: #0f172a;
451
+ border-color: #1e293b;
442
452
  }
443
453
 
444
454
  .ssp-code-title {
445
455
  font-size: 0.82rem;
446
456
  font-weight: 600;
457
+ color: var(--text-base, #334155);
458
+ }
459
+
460
+ .theme-dark .ssp-code-title {
447
461
  color: var(--text-muted, #94a3b8);
448
462
  }
449
463
 
450
464
  .ssp-copy-btn {
451
- background: rgba(56, 189, 248, 0.12);
452
- border: 1px solid rgba(56, 189, 248, 0.3);
453
- color: var(--color-cyan, #38bdf8);
465
+ background: rgba(99, 102, 241, 0.1);
466
+ border: 1px solid rgba(99, 102, 241, 0.3);
467
+ color: var(--color-primary, #4f46e5);
454
468
  padding: 0.35rem 0.75rem;
455
469
  border-radius: 6px;
456
470
  font-size: 0.78rem;
@@ -459,7 +473,17 @@
459
473
  transition: all 0.15s ease;
460
474
  }
461
475
 
476
+ .theme-dark .ssp-copy-btn {
477
+ background: rgba(56, 189, 248, 0.12);
478
+ border-color: rgba(56, 189, 248, 0.3);
479
+ color: var(--color-cyan, #38bdf8);
480
+ }
481
+
462
482
  .ssp-copy-btn:hover {
483
+ background: rgba(99, 102, 241, 0.2);
484
+ }
485
+
486
+ .theme-dark .ssp-copy-btn:hover {
463
487
  background: rgba(56, 189, 248, 0.25);
464
488
  }
465
489
 
@@ -470,8 +494,8 @@
470
494
  .ssp-code-block {
471
495
  width: 100%;
472
496
  margin: 0;
473
- background: #070a12;
474
- color: var(--color-cyan, #38bdf8);
497
+ background: #f1f5f9;
498
+ color: var(--text-base, #0f172a);
475
499
  font-size: 0.82rem;
476
500
  padding: 0.85rem 1rem;
477
501
  overflow-x: auto;
@@ -479,6 +503,11 @@
479
503
  word-break: break-all;
480
504
  }
481
505
 
506
+ .theme-dark .ssp-code-block {
507
+ background: #070a12;
508
+ color: var(--color-cyan, #38bdf8);
509
+ }
510
+
482
511
  .ssp-toast {
483
512
  position: fixed;
484
513
  bottom: 2rem;
@@ -515,15 +544,22 @@
515
544
  position: absolute;
516
545
  font-size: 0.75rem;
517
546
  font-weight: 800;
518
- color: var(--color-cyan, #38bdf8);
519
- background: rgba(15, 23, 42, 0.9);
520
- border: 1px solid #38bdf8;
547
+ color: var(--color-primary, #4f46e5);
548
+ background: rgba(255, 255, 255, 0.95);
549
+ border: 1px solid var(--color-primary, #6366f1);
521
550
  border-radius: 4px;
522
551
  padding: 0.2rem 0.5rem;
523
- box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
552
+ box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
524
553
  animation: ssp-particle-float 1s forwards ease-out;
525
554
  }
526
555
 
556
+ .theme-dark .ssp-particle {
557
+ color: var(--color-cyan, #38bdf8);
558
+ background: rgba(15, 23, 42, 0.9);
559
+ border-color: #38bdf8;
560
+ box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
561
+ }
562
+
527
563
  @keyframes ssp-particle-float {
528
564
  0% {
529
565
  opacity: 1;