moon-inferno 0.4.2 → 0.4.3

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/index.css +69 -69
  2. package/dist/styles.css +69 -69
  3. package/package.json +5 -5
package/dist/index.css CHANGED
@@ -397,7 +397,7 @@
397
397
  }
398
398
  .mi-tab:hover:not(.mi-tab--selected):not(:disabled) {
399
399
  color: var(--mi-color-text, #F1F5F9);
400
- background-color: rgba(255, 77, 0, 0.08);
400
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.08));
401
401
  }
402
402
  .mi-tab:disabled {
403
403
  opacity: 0.45;
@@ -408,7 +408,7 @@
408
408
  outline-offset: 2px;
409
409
  }
410
410
  .mi-tabs--inferno .mi-tab-list {
411
- background: rgba(18, 16, 25, 0.95);
411
+ background: var(--mi-color-surface, rgba(18, 16, 25, 0.95));
412
412
  backdrop-filter: blur(16px);
413
413
  -webkit-backdrop-filter: blur(16px);
414
414
  border: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.12));
@@ -417,9 +417,9 @@
417
417
  }
418
418
  .mi-tabs--inferno .mi-tab--selected {
419
419
  color: var(--mi-color-primary, #FF4D00);
420
- background: rgba(255, 77, 0, 0.14);
420
+ background: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.14));
421
421
  border-color: var(--mi-color-border-accent, #FF4D00);
422
- box-shadow: 0 0 16px rgba(255, 77, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
422
+ box-shadow: var(--mi-shadow-glow, 0 0 16px rgba(255, 77, 0, 0.25));
423
423
  }
424
424
  .mi-tabs--inferno .mi-tab--selected::after {
425
425
  content: "";
@@ -429,10 +429,10 @@
429
429
  right: 0.5rem;
430
430
  height: 2px;
431
431
  background: var(--mi-color-primary, #FF4D00);
432
- box-shadow: 0 0 10px var(--mi-color-primary, #FF4D00);
432
+ box-shadow: var(--mi-shadow-glow);
433
433
  }
434
434
  .mi-tabs--pills .mi-tab-list {
435
- background: rgba(10, 9, 14, 0.8);
435
+ background: var(--mi-color-bg-subtle, rgba(10, 9, 14, 0.8));
436
436
  border: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.12));
437
437
  border-radius: 10px;
438
438
  padding: 4px;
@@ -441,16 +441,16 @@
441
441
  border-radius: 7px;
442
442
  }
443
443
  .mi-tabs--pills .mi-tab--selected {
444
- color: #000;
444
+ color: var(--mi-color-primary-text, #000);
445
445
  background-color: var(--mi-color-primary, #FF4D00);
446
446
  font-weight: 700;
447
- box-shadow: 0 4px 14px rgba(255, 77, 0, 0.4);
447
+ box-shadow: var(--mi-shadow-glow);
448
448
  }
449
449
  .mi-tabs--pills .mi-tab--selected .mi-tab__icon {
450
- color: #000;
450
+ color: var(--mi-color-primary-text, #000);
451
451
  }
452
452
  .mi-tabs--pixel .mi-tab-list {
453
- background-color: #0D0F14;
453
+ background-color: var(--mi-color-bg-subtle, #0D0F14);
454
454
  border: 2px solid var(--mi-color-primary, #FF4D00);
455
455
  border-radius: 0;
456
456
  padding: 4px;
@@ -461,7 +461,7 @@
461
461
  font-family: var(--mi-font-mono, monospace);
462
462
  }
463
463
  .mi-tabs--pixel .mi-tab--selected {
464
- color: #FFF;
464
+ color: var(--mi-color-primary-text, #000);
465
465
  background-color: var(--mi-color-primary, #FF4D00);
466
466
  border: 2px solid #000;
467
467
  box-shadow: 3px 3px 0 #000;
@@ -848,19 +848,19 @@
848
848
  box-sizing: border-box;
849
849
  }
850
850
  .mi-badge--inferno {
851
- background-color: rgba(255, 77, 0, 0.15);
852
- color: #FF8533;
853
- border: 1px solid #FF661A;
851
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
852
+ color: var(--mi-color-primary, #FF8533);
853
+ border: 1px solid var(--mi-color-border-accent, #FF661A);
854
854
  }
855
855
  .mi-badge--pixel {
856
856
  background-color: var(--mi-color-bg-subtle, #14121A);
857
- color: #FF8533;
857
+ color: var(--mi-color-primary, #FF8533);
858
858
  border: none;
859
859
  box-shadow:
860
- 0 -2px 0 0 #FF8533,
861
- 0 2px 0 0 #FF8533,
862
- -2px 0 0 0 #FF8533,
863
- 2px 0 0 0 #FF8533;
860
+ 0 -2px 0 0 var(--mi-color-primary, #FF8533),
861
+ 0 2px 0 0 var(--mi-color-primary, #FF8533),
862
+ -2px 0 0 0 var(--mi-color-primary, #FF8533),
863
+ 2px 0 0 0 var(--mi-color-primary, #FF8533);
864
864
  margin: 2px;
865
865
  }
866
866
  .mi-badge--success {
@@ -2705,7 +2705,7 @@
2705
2705
  text-align: left;
2706
2706
  }
2707
2707
  .mi-table-header {
2708
- background-color: rgba(255, 77, 0, 0.1);
2708
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.1));
2709
2709
  border-bottom: 2px solid var(--mi-color-border-accent, #FF4D00);
2710
2710
  }
2711
2711
  .mi-table-head {
@@ -2724,7 +2724,7 @@
2724
2724
  transition: background-color 0.15s ease;
2725
2725
  }
2726
2726
  .mi-table--hoverable .mi-table-row:hover {
2727
- background-color: rgba(255, 77, 0, 0.15);
2727
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
2728
2728
  }
2729
2729
  .mi-table--striped .mi-table-row:nth-child(even) {
2730
2730
  background-color: rgba(255, 255, 255, 0.02);
@@ -3685,9 +3685,9 @@
3685
3685
  }
3686
3686
  .mi-visualizer__tab--active {
3687
3687
  background-color: var(--mi-color-primary, #FF4D00);
3688
- color: #050406 !important;
3688
+ color: var(--mi-color-primary-text, #050406) !important;
3689
3689
  font-weight: 700;
3690
- box-shadow: 0 0 8px rgba(255, 77, 0, 0.4);
3690
+ box-shadow: var(--mi-shadow-glow);
3691
3691
  }
3692
3692
  .mi-visualizer__actions {
3693
3693
  display: flex;
@@ -3730,7 +3730,7 @@
3730
3730
  color: var(--mi-color-text, #F1F5F9);
3731
3731
  }
3732
3732
  .mi-visualizer__btn-pill--active {
3733
- background-color: rgba(255, 77, 0, 0.2);
3733
+ background-color: var(--mi-color-bg-subtle, #14121A);
3734
3734
  color: var(--mi-color-primary, #FF4D00) !important;
3735
3735
  font-weight: 700;
3736
3736
  }
@@ -3764,9 +3764,9 @@
3764
3764
  display: inline-flex;
3765
3765
  align-items: center;
3766
3766
  gap: 0.35rem;
3767
- background-color: rgba(255, 77, 0, 0.15);
3767
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
3768
3768
  border: 1px solid var(--mi-color-primary, #FF4D00);
3769
- color: #FF8533;
3769
+ color: var(--mi-color-primary, #FF8533);
3770
3770
  font-family: inherit;
3771
3771
  font-size: 0.75rem;
3772
3772
  font-weight: 700;
@@ -3778,8 +3778,8 @@
3778
3778
  }
3779
3779
  .mi-visualizer__btn-action:hover {
3780
3780
  background-color: var(--mi-color-primary, #FF4D00);
3781
- color: #050406;
3782
- box-shadow: 0 0 10px rgba(255, 77, 0, 0.4);
3781
+ color: var(--mi-color-primary-text, #050406);
3782
+ box-shadow: var(--mi-shadow-glow);
3783
3783
  }
3784
3784
  .mi-visualizer__body {
3785
3785
  display: flex;
@@ -3810,7 +3810,7 @@
3810
3810
  .mi-visualizer__pane {
3811
3811
  display: flex;
3812
3812
  flex-direction: column;
3813
- background-color: #0A090D;
3813
+ background-color: var(--mi-color-bg, #0A090D);
3814
3814
  border-right: 1px solid var(--mi-color-border, #332D40);
3815
3815
  position: relative;
3816
3816
  overflow: hidden;
@@ -3856,9 +3856,9 @@
3856
3856
  color: var(--mi-color-text, #F1F5F9);
3857
3857
  }
3858
3858
  .mi-visualizer__pane-tab--active {
3859
- background-color: rgba(255, 77, 0, 0.15);
3859
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
3860
3860
  border-color: var(--mi-color-primary, #FF4D00);
3861
- color: #FF8533 !important;
3861
+ color: var(--mi-color-primary, #FF8533) !important;
3862
3862
  }
3863
3863
  .mi-visualizer__pane-badge {
3864
3864
  display: inline-flex;
@@ -3877,8 +3877,8 @@
3877
3877
  width: 100%;
3878
3878
  height: 100%;
3879
3879
  padding: 1rem;
3880
- background-color: #050406;
3881
- color: #00FF66;
3880
+ background-color: var(--mi-color-bg, #050406);
3881
+ color: var(--mi-color-text, #00FF66);
3882
3882
  font-family: var(--mi-font-mono, "JetBrains Mono", monospace);
3883
3883
  font-size: 0.85rem;
3884
3884
  line-height: 1.55;
@@ -3890,7 +3890,7 @@
3890
3890
  box-sizing: border-box;
3891
3891
  }
3892
3892
  .mi-visualizer__textarea:focus {
3893
- background-color: #08070A;
3893
+ background-color: var(--mi-color-bg-subtle, #08070A);
3894
3894
  }
3895
3895
  .mi-visualizer__canvas-container {
3896
3896
  flex: 1;
@@ -4485,10 +4485,10 @@ textarea {
4485
4485
  justify-content: center;
4486
4486
  z-index: 1000;
4487
4487
  box-sizing: border-box;
4488
- background-color: var(--moon-bg-surface, rgba(13, 11, 18, 0.92));
4488
+ background-color: var(--mi-color-surface, rgba(13, 11, 18, 0.92));
4489
4489
  backdrop-filter: blur(16px);
4490
4490
  -webkit-backdrop-filter: blur(16px);
4491
- transition: all var(--moon-transition-speed, 0.2s) ease;
4491
+ transition: all 0.2s ease;
4492
4492
  }
4493
4493
  .moon-navbar--sticky {
4494
4494
  position: sticky;
@@ -4498,40 +4498,40 @@ textarea {
4498
4498
  width: 100%;
4499
4499
  max-width: 1280px;
4500
4500
  min-height: 64px;
4501
- padding: 0.5rem var(--moon-space-md, 1rem);
4501
+ padding: 0.5rem 1rem;
4502
4502
  display: flex;
4503
4503
  align-items: center;
4504
4504
  justify-content: space-between;
4505
- gap: var(--moon-space-md, 1rem);
4505
+ gap: 1rem;
4506
4506
  box-sizing: border-box;
4507
4507
  }
4508
4508
  .moon-navbar--inferno {
4509
- border-bottom: 1px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4510
- box-shadow: 0 4px 20px rgba(255, 77, 0, 0.15);
4509
+ border-bottom: 1px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4510
+ box-shadow: var(--mi-shadow-glow, 0 4px 20px rgba(255, 77, 0, 0.15));
4511
4511
  }
4512
4512
  .moon-navbar--pixel {
4513
- border-bottom: 3px solid var(--moon-color-border, #ff4444);
4514
- background-color: var(--moon-bg-surface, #0d0f14);
4513
+ border-bottom: 3px solid var(--mi-color-primary, #ff4444);
4514
+ background-color: var(--mi-color-surface, #0d0f14);
4515
4515
  box-shadow: 0 4px 0 #000;
4516
4516
  }
4517
4517
  .moon-navbar--ghost {
4518
- border-bottom: 1px solid var(--moon-color-border-subtle, rgba(255, 255, 255, 0.1));
4518
+ border-bottom: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.1));
4519
4519
  background-color: transparent;
4520
4520
  }
4521
4521
  .moon-navbar__brand {
4522
4522
  display: flex;
4523
4523
  align-items: center;
4524
- gap: var(--moon-space-sm, 0.5rem);
4524
+ gap: 0.5rem;
4525
4525
  font-weight: 700;
4526
- color: var(--moon-color-text, #ffffff);
4526
+ color: var(--mi-color-text, #ffffff);
4527
4527
  text-decoration: none;
4528
- font-family: var(--moon-font-mono, monospace);
4528
+ font-family: var(--mi-font-mono, monospace);
4529
4529
  flex-shrink: 0;
4530
4530
  }
4531
4531
  .moon-navbar__content {
4532
4532
  display: flex;
4533
4533
  align-items: center;
4534
- gap: var(--moon-space-lg, 1.25rem);
4534
+ gap: 1.25rem;
4535
4535
  list-style: none;
4536
4536
  margin: 0;
4537
4537
  padding: 0;
@@ -4550,15 +4550,15 @@ textarea {
4550
4550
  display: flex;
4551
4551
  align-items: center;
4552
4552
  position: relative;
4553
- font-family: var(--moon-font-mono, monospace);
4553
+ font-family: var(--mi-font-mono, monospace);
4554
4554
  font-size: 0.9rem;
4555
- color: var(--moon-color-text-muted, #a0a5b5);
4555
+ color: var(--mi-color-text-muted, #a0a5b5);
4556
4556
  transition: color 0.2s ease;
4557
4557
  cursor: pointer;
4558
4558
  }
4559
4559
  .moon-navbar__item:hover,
4560
4560
  .moon-navbar__item--active {
4561
- color: var(--moon-color-primary, #ff4444);
4561
+ color: var(--mi-color-primary, #FF4D00);
4562
4562
  }
4563
4563
  .moon-navbar__item--active::after {
4564
4564
  content: "";
@@ -4567,27 +4567,27 @@ textarea {
4567
4567
  left: 0;
4568
4568
  right: 0;
4569
4569
  height: 2px;
4570
- background-color: var(--moon-color-primary, #ff4444);
4571
- box-shadow: 0 0 8px var(--moon-color-primary, #ff4444);
4570
+ background-color: var(--mi-color-primary, #FF4D00);
4571
+ box-shadow: var(--mi-shadow-glow);
4572
4572
  }
4573
4573
  .moon-navbar__toggle {
4574
4574
  display: none;
4575
4575
  align-items: center;
4576
4576
  justify-content: center;
4577
- background: rgba(255, 77, 0, 0.08);
4578
- border: 1.5px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4577
+ background: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.08));
4578
+ border: 1.5px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4579
4579
  padding: 0.45rem 0.6rem;
4580
4580
  border-radius: 8px;
4581
4581
  cursor: pointer;
4582
4582
  outline: none;
4583
4583
  transition: all 0.15s ease;
4584
- color: var(--moon-color-primary, #FF4D00);
4584
+ color: var(--mi-color-primary, #FF4D00);
4585
4585
  }
4586
4586
  .moon-navbar__toggle:focus-visible,
4587
4587
  .moon-navbar__toggle:hover {
4588
- background: var(--moon-color-primary, #FF4D00);
4589
- color: #000;
4590
- box-shadow: 0 0 14px rgba(255, 77, 0, 0.45);
4588
+ background: var(--mi-color-primary, #FF4D00);
4589
+ color: var(--mi-color-primary-text, #000);
4590
+ box-shadow: var(--mi-shadow-glow);
4591
4591
  }
4592
4592
  .moon-navbar__toggle-icon {
4593
4593
  display: flex;
@@ -4602,12 +4602,12 @@ textarea {
4602
4602
  top: calc(100% + 8px);
4603
4603
  left: 0;
4604
4604
  right: 0;
4605
- background: rgba(13, 11, 18, 0.96);
4605
+ background: var(--mi-color-surface, rgba(13, 11, 18, 0.96));
4606
4606
  backdrop-filter: blur(20px);
4607
4607
  -webkit-backdrop-filter: blur(20px);
4608
- border: 1.5px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4608
+ border: 1.5px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4609
4609
  border-radius: 12px;
4610
- box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 77, 0, 0.2);
4610
+ box-shadow: var(--mi-shadow-glow, 0 16px 40px rgba(0, 0, 0, 0.8));
4611
4611
  z-index: 1001;
4612
4612
  padding: 1.25rem;
4613
4613
  animation: moonNavbarSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -4616,7 +4616,7 @@ textarea {
4616
4616
  .moon-navbar__menu-content {
4617
4617
  display: flex;
4618
4618
  flex-direction: column;
4619
- gap: var(--moon-space-md, 0.85rem);
4619
+ gap: 0.85rem;
4620
4620
  width: 100%;
4621
4621
  }
4622
4622
  .moon-navbar__menu .moon-navbar__item {
@@ -4815,11 +4815,11 @@ textarea {
4815
4815
  /* src/HoloCard/HoloCard.css */
4816
4816
  .moon-holocard {
4817
4817
  position: relative;
4818
- border-radius: var(--moon-radius-md, 12px);
4819
- padding: var(--moon-space-lg, 1.5rem);
4820
- background: var(--moon-bg-surface, rgba(13, 15, 20, 0.9));
4821
- border: 1px solid var(--moon-color-border, rgba(255, 68, 68, 0.4));
4822
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
4818
+ border-radius: var(--mi-radius-md, 12px);
4819
+ padding: 1.5rem;
4820
+ background: var(--mi-color-surface, rgba(13, 15, 20, 0.9));
4821
+ border: 1px solid var(--mi-color-border-accent, rgba(255, 68, 68, 0.4));
4822
+ box-shadow: var(--mi-shadow-glow, 0 10px 30px rgba(0, 0, 0, 0.5));
4823
4823
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
4824
4824
  transform-style: preserve-3d;
4825
4825
  overflow: hidden;
@@ -4842,8 +4842,8 @@ textarea {
4842
4842
  mix-blend-mode: overlay;
4843
4843
  }
4844
4844
  .moon-holocard--inferno {
4845
- border-color: rgba(255, 68, 68, 0.5);
4846
- box-shadow: 0 10px 30px rgba(255, 68, 68, 0.2);
4845
+ border-color: var(--mi-color-border-accent, rgba(255, 68, 68, 0.5));
4846
+ box-shadow: var(--mi-shadow-glow, 0 10px 30px rgba(255, 68, 68, 0.2));
4847
4847
  }
4848
4848
  .moon-holocard--cyber {
4849
4849
  border-color: rgba(0, 240, 255, 0.6);
package/dist/styles.css CHANGED
@@ -397,7 +397,7 @@
397
397
  }
398
398
  .mi-tab:hover:not(.mi-tab--selected):not(:disabled) {
399
399
  color: var(--mi-color-text, #F1F5F9);
400
- background-color: rgba(255, 77, 0, 0.08);
400
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.08));
401
401
  }
402
402
  .mi-tab:disabled {
403
403
  opacity: 0.45;
@@ -408,7 +408,7 @@
408
408
  outline-offset: 2px;
409
409
  }
410
410
  .mi-tabs--inferno .mi-tab-list {
411
- background: rgba(18, 16, 25, 0.95);
411
+ background: var(--mi-color-surface, rgba(18, 16, 25, 0.95));
412
412
  backdrop-filter: blur(16px);
413
413
  -webkit-backdrop-filter: blur(16px);
414
414
  border: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.12));
@@ -417,9 +417,9 @@
417
417
  }
418
418
  .mi-tabs--inferno .mi-tab--selected {
419
419
  color: var(--mi-color-primary, #FF4D00);
420
- background: rgba(255, 77, 0, 0.14);
420
+ background: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.14));
421
421
  border-color: var(--mi-color-border-accent, #FF4D00);
422
- box-shadow: 0 0 16px rgba(255, 77, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
422
+ box-shadow: var(--mi-shadow-glow, 0 0 16px rgba(255, 77, 0, 0.25));
423
423
  }
424
424
  .mi-tabs--inferno .mi-tab--selected::after {
425
425
  content: "";
@@ -429,10 +429,10 @@
429
429
  right: 0.5rem;
430
430
  height: 2px;
431
431
  background: var(--mi-color-primary, #FF4D00);
432
- box-shadow: 0 0 10px var(--mi-color-primary, #FF4D00);
432
+ box-shadow: var(--mi-shadow-glow);
433
433
  }
434
434
  .mi-tabs--pills .mi-tab-list {
435
- background: rgba(10, 9, 14, 0.8);
435
+ background: var(--mi-color-bg-subtle, rgba(10, 9, 14, 0.8));
436
436
  border: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.12));
437
437
  border-radius: 10px;
438
438
  padding: 4px;
@@ -441,16 +441,16 @@
441
441
  border-radius: 7px;
442
442
  }
443
443
  .mi-tabs--pills .mi-tab--selected {
444
- color: #000;
444
+ color: var(--mi-color-primary-text, #000);
445
445
  background-color: var(--mi-color-primary, #FF4D00);
446
446
  font-weight: 700;
447
- box-shadow: 0 4px 14px rgba(255, 77, 0, 0.4);
447
+ box-shadow: var(--mi-shadow-glow);
448
448
  }
449
449
  .mi-tabs--pills .mi-tab--selected .mi-tab__icon {
450
- color: #000;
450
+ color: var(--mi-color-primary-text, #000);
451
451
  }
452
452
  .mi-tabs--pixel .mi-tab-list {
453
- background-color: #0D0F14;
453
+ background-color: var(--mi-color-bg-subtle, #0D0F14);
454
454
  border: 2px solid var(--mi-color-primary, #FF4D00);
455
455
  border-radius: 0;
456
456
  padding: 4px;
@@ -461,7 +461,7 @@
461
461
  font-family: var(--mi-font-mono, monospace);
462
462
  }
463
463
  .mi-tabs--pixel .mi-tab--selected {
464
- color: #FFF;
464
+ color: var(--mi-color-primary-text, #000);
465
465
  background-color: var(--mi-color-primary, #FF4D00);
466
466
  border: 2px solid #000;
467
467
  box-shadow: 3px 3px 0 #000;
@@ -848,19 +848,19 @@
848
848
  box-sizing: border-box;
849
849
  }
850
850
  .mi-badge--inferno {
851
- background-color: rgba(255, 77, 0, 0.15);
852
- color: #FF8533;
853
- border: 1px solid #FF661A;
851
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
852
+ color: var(--mi-color-primary, #FF8533);
853
+ border: 1px solid var(--mi-color-border-accent, #FF661A);
854
854
  }
855
855
  .mi-badge--pixel {
856
856
  background-color: var(--mi-color-bg-subtle, #14121A);
857
- color: #FF8533;
857
+ color: var(--mi-color-primary, #FF8533);
858
858
  border: none;
859
859
  box-shadow:
860
- 0 -2px 0 0 #FF8533,
861
- 0 2px 0 0 #FF8533,
862
- -2px 0 0 0 #FF8533,
863
- 2px 0 0 0 #FF8533;
860
+ 0 -2px 0 0 var(--mi-color-primary, #FF8533),
861
+ 0 2px 0 0 var(--mi-color-primary, #FF8533),
862
+ -2px 0 0 0 var(--mi-color-primary, #FF8533),
863
+ 2px 0 0 0 var(--mi-color-primary, #FF8533);
864
864
  margin: 2px;
865
865
  }
866
866
  .mi-badge--success {
@@ -2705,7 +2705,7 @@
2705
2705
  text-align: left;
2706
2706
  }
2707
2707
  .mi-table-header {
2708
- background-color: rgba(255, 77, 0, 0.1);
2708
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.1));
2709
2709
  border-bottom: 2px solid var(--mi-color-border-accent, #FF4D00);
2710
2710
  }
2711
2711
  .mi-table-head {
@@ -2724,7 +2724,7 @@
2724
2724
  transition: background-color 0.15s ease;
2725
2725
  }
2726
2726
  .mi-table--hoverable .mi-table-row:hover {
2727
- background-color: rgba(255, 77, 0, 0.15);
2727
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
2728
2728
  }
2729
2729
  .mi-table--striped .mi-table-row:nth-child(even) {
2730
2730
  background-color: rgba(255, 255, 255, 0.02);
@@ -3685,9 +3685,9 @@
3685
3685
  }
3686
3686
  .mi-visualizer__tab--active {
3687
3687
  background-color: var(--mi-color-primary, #FF4D00);
3688
- color: #050406 !important;
3688
+ color: var(--mi-color-primary-text, #050406) !important;
3689
3689
  font-weight: 700;
3690
- box-shadow: 0 0 8px rgba(255, 77, 0, 0.4);
3690
+ box-shadow: var(--mi-shadow-glow);
3691
3691
  }
3692
3692
  .mi-visualizer__actions {
3693
3693
  display: flex;
@@ -3730,7 +3730,7 @@
3730
3730
  color: var(--mi-color-text, #F1F5F9);
3731
3731
  }
3732
3732
  .mi-visualizer__btn-pill--active {
3733
- background-color: rgba(255, 77, 0, 0.2);
3733
+ background-color: var(--mi-color-bg-subtle, #14121A);
3734
3734
  color: var(--mi-color-primary, #FF4D00) !important;
3735
3735
  font-weight: 700;
3736
3736
  }
@@ -3764,9 +3764,9 @@
3764
3764
  display: inline-flex;
3765
3765
  align-items: center;
3766
3766
  gap: 0.35rem;
3767
- background-color: rgba(255, 77, 0, 0.15);
3767
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
3768
3768
  border: 1px solid var(--mi-color-primary, #FF4D00);
3769
- color: #FF8533;
3769
+ color: var(--mi-color-primary, #FF8533);
3770
3770
  font-family: inherit;
3771
3771
  font-size: 0.75rem;
3772
3772
  font-weight: 700;
@@ -3778,8 +3778,8 @@
3778
3778
  }
3779
3779
  .mi-visualizer__btn-action:hover {
3780
3780
  background-color: var(--mi-color-primary, #FF4D00);
3781
- color: #050406;
3782
- box-shadow: 0 0 10px rgba(255, 77, 0, 0.4);
3781
+ color: var(--mi-color-primary-text, #050406);
3782
+ box-shadow: var(--mi-shadow-glow);
3783
3783
  }
3784
3784
  .mi-visualizer__body {
3785
3785
  display: flex;
@@ -3810,7 +3810,7 @@
3810
3810
  .mi-visualizer__pane {
3811
3811
  display: flex;
3812
3812
  flex-direction: column;
3813
- background-color: #0A090D;
3813
+ background-color: var(--mi-color-bg, #0A090D);
3814
3814
  border-right: 1px solid var(--mi-color-border, #332D40);
3815
3815
  position: relative;
3816
3816
  overflow: hidden;
@@ -3856,9 +3856,9 @@
3856
3856
  color: var(--mi-color-text, #F1F5F9);
3857
3857
  }
3858
3858
  .mi-visualizer__pane-tab--active {
3859
- background-color: rgba(255, 77, 0, 0.15);
3859
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
3860
3860
  border-color: var(--mi-color-primary, #FF4D00);
3861
- color: #FF8533 !important;
3861
+ color: var(--mi-color-primary, #FF8533) !important;
3862
3862
  }
3863
3863
  .mi-visualizer__pane-badge {
3864
3864
  display: inline-flex;
@@ -3877,8 +3877,8 @@
3877
3877
  width: 100%;
3878
3878
  height: 100%;
3879
3879
  padding: 1rem;
3880
- background-color: #050406;
3881
- color: #00FF66;
3880
+ background-color: var(--mi-color-bg, #050406);
3881
+ color: var(--mi-color-text, #00FF66);
3882
3882
  font-family: var(--mi-font-mono, "JetBrains Mono", monospace);
3883
3883
  font-size: 0.85rem;
3884
3884
  line-height: 1.55;
@@ -3890,7 +3890,7 @@
3890
3890
  box-sizing: border-box;
3891
3891
  }
3892
3892
  .mi-visualizer__textarea:focus {
3893
- background-color: #08070A;
3893
+ background-color: var(--mi-color-bg-subtle, #08070A);
3894
3894
  }
3895
3895
  .mi-visualizer__canvas-container {
3896
3896
  flex: 1;
@@ -4485,10 +4485,10 @@ textarea {
4485
4485
  justify-content: center;
4486
4486
  z-index: 1000;
4487
4487
  box-sizing: border-box;
4488
- background-color: var(--moon-bg-surface, rgba(13, 11, 18, 0.92));
4488
+ background-color: var(--mi-color-surface, rgba(13, 11, 18, 0.92));
4489
4489
  backdrop-filter: blur(16px);
4490
4490
  -webkit-backdrop-filter: blur(16px);
4491
- transition: all var(--moon-transition-speed, 0.2s) ease;
4491
+ transition: all 0.2s ease;
4492
4492
  }
4493
4493
  .moon-navbar--sticky {
4494
4494
  position: sticky;
@@ -4498,40 +4498,40 @@ textarea {
4498
4498
  width: 100%;
4499
4499
  max-width: 1280px;
4500
4500
  min-height: 64px;
4501
- padding: 0.5rem var(--moon-space-md, 1rem);
4501
+ padding: 0.5rem 1rem;
4502
4502
  display: flex;
4503
4503
  align-items: center;
4504
4504
  justify-content: space-between;
4505
- gap: var(--moon-space-md, 1rem);
4505
+ gap: 1rem;
4506
4506
  box-sizing: border-box;
4507
4507
  }
4508
4508
  .moon-navbar--inferno {
4509
- border-bottom: 1px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4510
- box-shadow: 0 4px 20px rgba(255, 77, 0, 0.15);
4509
+ border-bottom: 1px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4510
+ box-shadow: var(--mi-shadow-glow, 0 4px 20px rgba(255, 77, 0, 0.15));
4511
4511
  }
4512
4512
  .moon-navbar--pixel {
4513
- border-bottom: 3px solid var(--moon-color-border, #ff4444);
4514
- background-color: var(--moon-bg-surface, #0d0f14);
4513
+ border-bottom: 3px solid var(--mi-color-primary, #ff4444);
4514
+ background-color: var(--mi-color-surface, #0d0f14);
4515
4515
  box-shadow: 0 4px 0 #000;
4516
4516
  }
4517
4517
  .moon-navbar--ghost {
4518
- border-bottom: 1px solid var(--moon-color-border-subtle, rgba(255, 255, 255, 0.1));
4518
+ border-bottom: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.1));
4519
4519
  background-color: transparent;
4520
4520
  }
4521
4521
  .moon-navbar__brand {
4522
4522
  display: flex;
4523
4523
  align-items: center;
4524
- gap: var(--moon-space-sm, 0.5rem);
4524
+ gap: 0.5rem;
4525
4525
  font-weight: 700;
4526
- color: var(--moon-color-text, #ffffff);
4526
+ color: var(--mi-color-text, #ffffff);
4527
4527
  text-decoration: none;
4528
- font-family: var(--moon-font-mono, monospace);
4528
+ font-family: var(--mi-font-mono, monospace);
4529
4529
  flex-shrink: 0;
4530
4530
  }
4531
4531
  .moon-navbar__content {
4532
4532
  display: flex;
4533
4533
  align-items: center;
4534
- gap: var(--moon-space-lg, 1.25rem);
4534
+ gap: 1.25rem;
4535
4535
  list-style: none;
4536
4536
  margin: 0;
4537
4537
  padding: 0;
@@ -4550,15 +4550,15 @@ textarea {
4550
4550
  display: flex;
4551
4551
  align-items: center;
4552
4552
  position: relative;
4553
- font-family: var(--moon-font-mono, monospace);
4553
+ font-family: var(--mi-font-mono, monospace);
4554
4554
  font-size: 0.9rem;
4555
- color: var(--moon-color-text-muted, #a0a5b5);
4555
+ color: var(--mi-color-text-muted, #a0a5b5);
4556
4556
  transition: color 0.2s ease;
4557
4557
  cursor: pointer;
4558
4558
  }
4559
4559
  .moon-navbar__item:hover,
4560
4560
  .moon-navbar__item--active {
4561
- color: var(--moon-color-primary, #ff4444);
4561
+ color: var(--mi-color-primary, #FF4D00);
4562
4562
  }
4563
4563
  .moon-navbar__item--active::after {
4564
4564
  content: "";
@@ -4567,27 +4567,27 @@ textarea {
4567
4567
  left: 0;
4568
4568
  right: 0;
4569
4569
  height: 2px;
4570
- background-color: var(--moon-color-primary, #ff4444);
4571
- box-shadow: 0 0 8px var(--moon-color-primary, #ff4444);
4570
+ background-color: var(--mi-color-primary, #FF4D00);
4571
+ box-shadow: var(--mi-shadow-glow);
4572
4572
  }
4573
4573
  .moon-navbar__toggle {
4574
4574
  display: none;
4575
4575
  align-items: center;
4576
4576
  justify-content: center;
4577
- background: rgba(255, 77, 0, 0.08);
4578
- border: 1.5px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4577
+ background: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.08));
4578
+ border: 1.5px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4579
4579
  padding: 0.45rem 0.6rem;
4580
4580
  border-radius: 8px;
4581
4581
  cursor: pointer;
4582
4582
  outline: none;
4583
4583
  transition: all 0.15s ease;
4584
- color: var(--moon-color-primary, #FF4D00);
4584
+ color: var(--mi-color-primary, #FF4D00);
4585
4585
  }
4586
4586
  .moon-navbar__toggle:focus-visible,
4587
4587
  .moon-navbar__toggle:hover {
4588
- background: var(--moon-color-primary, #FF4D00);
4589
- color: #000;
4590
- box-shadow: 0 0 14px rgba(255, 77, 0, 0.45);
4588
+ background: var(--mi-color-primary, #FF4D00);
4589
+ color: var(--mi-color-primary-text, #000);
4590
+ box-shadow: var(--mi-shadow-glow);
4591
4591
  }
4592
4592
  .moon-navbar__toggle-icon {
4593
4593
  display: flex;
@@ -4602,12 +4602,12 @@ textarea {
4602
4602
  top: calc(100% + 8px);
4603
4603
  left: 0;
4604
4604
  right: 0;
4605
- background: rgba(13, 11, 18, 0.96);
4605
+ background: var(--mi-color-surface, rgba(13, 11, 18, 0.96));
4606
4606
  backdrop-filter: blur(20px);
4607
4607
  -webkit-backdrop-filter: blur(20px);
4608
- border: 1.5px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4608
+ border: 1.5px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4609
4609
  border-radius: 12px;
4610
- box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 77, 0, 0.2);
4610
+ box-shadow: var(--mi-shadow-glow, 0 16px 40px rgba(0, 0, 0, 0.8));
4611
4611
  z-index: 1001;
4612
4612
  padding: 1.25rem;
4613
4613
  animation: moonNavbarSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -4616,7 +4616,7 @@ textarea {
4616
4616
  .moon-navbar__menu-content {
4617
4617
  display: flex;
4618
4618
  flex-direction: column;
4619
- gap: var(--moon-space-md, 0.85rem);
4619
+ gap: 0.85rem;
4620
4620
  width: 100%;
4621
4621
  }
4622
4622
  .moon-navbar__menu .moon-navbar__item {
@@ -4815,11 +4815,11 @@ textarea {
4815
4815
  /* src/HoloCard/HoloCard.css */
4816
4816
  .moon-holocard {
4817
4817
  position: relative;
4818
- border-radius: var(--moon-radius-md, 12px);
4819
- padding: var(--moon-space-lg, 1.5rem);
4820
- background: var(--moon-bg-surface, rgba(13, 15, 20, 0.9));
4821
- border: 1px solid var(--moon-color-border, rgba(255, 68, 68, 0.4));
4822
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
4818
+ border-radius: var(--mi-radius-md, 12px);
4819
+ padding: 1.5rem;
4820
+ background: var(--mi-color-surface, rgba(13, 15, 20, 0.9));
4821
+ border: 1px solid var(--mi-color-border-accent, rgba(255, 68, 68, 0.4));
4822
+ box-shadow: var(--mi-shadow-glow, 0 10px 30px rgba(0, 0, 0, 0.5));
4823
4823
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
4824
4824
  transform-style: preserve-3d;
4825
4825
  overflow: hidden;
@@ -4842,8 +4842,8 @@ textarea {
4842
4842
  mix-blend-mode: overlay;
4843
4843
  }
4844
4844
  .moon-holocard--inferno {
4845
- border-color: rgba(255, 68, 68, 0.5);
4846
- box-shadow: 0 10px 30px rgba(255, 68, 68, 0.2);
4845
+ border-color: var(--mi-color-border-accent, rgba(255, 68, 68, 0.5));
4846
+ box-shadow: var(--mi-shadow-glow, 0 10px 30px rgba(255, 68, 68, 0.2));
4847
4847
  }
4848
4848
  .moon-holocard--cyber {
4849
4849
  border-color: rgba(0, 240, 255, 0.6);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "moon-inferno",
3
- "version": "0.4.2",
3
+ "version": "0.4.3",
4
4
  "description": "All-in-one bundle for Moon-Inferno: Expressive, accessibility-first React UI framework for retro, Y2K, CRT, cyberpunk, gaming, and Web3 applications.",
5
5
  "license": "MIT",
6
6
  "author": "Biagio Scaglia",
@@ -29,10 +29,10 @@
29
29
  "LICENSE"
30
30
  ],
31
31
  "dependencies": {
32
- "@moon-inferno/core": "0.4.2",
33
- "@moon-inferno/icons": "0.4.2",
34
- "@moon-inferno/react": "0.4.2",
35
- "@moon-inferno/themes": "0.4.2"
32
+ "@moon-inferno/core": "0.4.3",
33
+ "@moon-inferno/icons": "0.4.3",
34
+ "@moon-inferno/themes": "0.4.3",
35
+ "@moon-inferno/react": "0.4.3"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": ">=18.0.0",