moon-inferno 0.3.9 → 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 +75 -69
  2. package/dist/styles.css +75 -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;
@@ -4013,6 +4013,8 @@
4013
4013
  }
4014
4014
 
4015
4015
  /* ../themes/src/terminal.css */
4016
+ :root[data-theme=terminal],
4017
+ body[data-theme=terminal],
4016
4018
  [data-theme=terminal] {
4017
4019
  --mi-color-bg: #05130A;
4018
4020
  --mi-color-bg-subtle: #0B2213;
@@ -4028,6 +4030,7 @@
4028
4030
  --mi-color-text-dim: #26994D;
4029
4031
  --mi-color-focus-ring: #00FF66;
4030
4032
  --mi-shadow-glow: 0 0 16px rgba(0, 255, 102, 0.45);
4033
+ --mi-shadow-pixel: 3px 3px 0px #000000;
4031
4034
  --mi-crt-scanline: rgba(0, 255, 102, 0.08);
4032
4035
  scrollbar-width: thin;
4033
4036
  scrollbar-color: #00FF66 #0B2213;
@@ -4050,6 +4053,8 @@
4050
4053
  }
4051
4054
 
4052
4055
  /* ../themes/src/y2k.css */
4056
+ :root[data-theme=y2k],
4057
+ body[data-theme=y2k],
4053
4058
  [data-theme=y2k] {
4054
4059
  --mi-color-bg: #0F0E17;
4055
4060
  --mi-color-bg-subtle: #1B1A2E;
@@ -4065,6 +4070,7 @@
4065
4070
  --mi-color-text-dim: #8B85C1;
4066
4071
  --mi-color-focus-ring: #00E5FF;
4067
4072
  --mi-shadow-glow: 0 0 16px rgba(0, 229, 255, 0.45);
4073
+ --mi-shadow-pixel: 3px 3px 0px #0F0E17;
4068
4074
  --mi-crt-scanline: rgba(0, 229, 255, 0.05);
4069
4075
  scrollbar-width: thin;
4070
4076
  scrollbar-color: #00E5FF #1B1A2E;
@@ -4479,10 +4485,10 @@ textarea {
4479
4485
  justify-content: center;
4480
4486
  z-index: 1000;
4481
4487
  box-sizing: border-box;
4482
- 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));
4483
4489
  backdrop-filter: blur(16px);
4484
4490
  -webkit-backdrop-filter: blur(16px);
4485
- transition: all var(--moon-transition-speed, 0.2s) ease;
4491
+ transition: all 0.2s ease;
4486
4492
  }
4487
4493
  .moon-navbar--sticky {
4488
4494
  position: sticky;
@@ -4492,40 +4498,40 @@ textarea {
4492
4498
  width: 100%;
4493
4499
  max-width: 1280px;
4494
4500
  min-height: 64px;
4495
- padding: 0.5rem var(--moon-space-md, 1rem);
4501
+ padding: 0.5rem 1rem;
4496
4502
  display: flex;
4497
4503
  align-items: center;
4498
4504
  justify-content: space-between;
4499
- gap: var(--moon-space-md, 1rem);
4505
+ gap: 1rem;
4500
4506
  box-sizing: border-box;
4501
4507
  }
4502
4508
  .moon-navbar--inferno {
4503
- border-bottom: 1px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4504
- 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));
4505
4511
  }
4506
4512
  .moon-navbar--pixel {
4507
- border-bottom: 3px solid var(--moon-color-border, #ff4444);
4508
- 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);
4509
4515
  box-shadow: 0 4px 0 #000;
4510
4516
  }
4511
4517
  .moon-navbar--ghost {
4512
- 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));
4513
4519
  background-color: transparent;
4514
4520
  }
4515
4521
  .moon-navbar__brand {
4516
4522
  display: flex;
4517
4523
  align-items: center;
4518
- gap: var(--moon-space-sm, 0.5rem);
4524
+ gap: 0.5rem;
4519
4525
  font-weight: 700;
4520
- color: var(--moon-color-text, #ffffff);
4526
+ color: var(--mi-color-text, #ffffff);
4521
4527
  text-decoration: none;
4522
- font-family: var(--moon-font-mono, monospace);
4528
+ font-family: var(--mi-font-mono, monospace);
4523
4529
  flex-shrink: 0;
4524
4530
  }
4525
4531
  .moon-navbar__content {
4526
4532
  display: flex;
4527
4533
  align-items: center;
4528
- gap: var(--moon-space-lg, 1.25rem);
4534
+ gap: 1.25rem;
4529
4535
  list-style: none;
4530
4536
  margin: 0;
4531
4537
  padding: 0;
@@ -4544,15 +4550,15 @@ textarea {
4544
4550
  display: flex;
4545
4551
  align-items: center;
4546
4552
  position: relative;
4547
- font-family: var(--moon-font-mono, monospace);
4553
+ font-family: var(--mi-font-mono, monospace);
4548
4554
  font-size: 0.9rem;
4549
- color: var(--moon-color-text-muted, #a0a5b5);
4555
+ color: var(--mi-color-text-muted, #a0a5b5);
4550
4556
  transition: color 0.2s ease;
4551
4557
  cursor: pointer;
4552
4558
  }
4553
4559
  .moon-navbar__item:hover,
4554
4560
  .moon-navbar__item--active {
4555
- color: var(--moon-color-primary, #ff4444);
4561
+ color: var(--mi-color-primary, #FF4D00);
4556
4562
  }
4557
4563
  .moon-navbar__item--active::after {
4558
4564
  content: "";
@@ -4561,27 +4567,27 @@ textarea {
4561
4567
  left: 0;
4562
4568
  right: 0;
4563
4569
  height: 2px;
4564
- background-color: var(--moon-color-primary, #ff4444);
4565
- 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);
4566
4572
  }
4567
4573
  .moon-navbar__toggle {
4568
4574
  display: none;
4569
4575
  align-items: center;
4570
4576
  justify-content: center;
4571
- background: rgba(255, 77, 0, 0.08);
4572
- 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));
4573
4579
  padding: 0.45rem 0.6rem;
4574
4580
  border-radius: 8px;
4575
4581
  cursor: pointer;
4576
4582
  outline: none;
4577
4583
  transition: all 0.15s ease;
4578
- color: var(--moon-color-primary, #FF4D00);
4584
+ color: var(--mi-color-primary, #FF4D00);
4579
4585
  }
4580
4586
  .moon-navbar__toggle:focus-visible,
4581
4587
  .moon-navbar__toggle:hover {
4582
- background: var(--moon-color-primary, #FF4D00);
4583
- color: #000;
4584
- 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);
4585
4591
  }
4586
4592
  .moon-navbar__toggle-icon {
4587
4593
  display: flex;
@@ -4596,12 +4602,12 @@ textarea {
4596
4602
  top: calc(100% + 8px);
4597
4603
  left: 0;
4598
4604
  right: 0;
4599
- background: rgba(13, 11, 18, 0.96);
4605
+ background: var(--mi-color-surface, rgba(13, 11, 18, 0.96));
4600
4606
  backdrop-filter: blur(20px);
4601
4607
  -webkit-backdrop-filter: blur(20px);
4602
- 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));
4603
4609
  border-radius: 12px;
4604
- 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));
4605
4611
  z-index: 1001;
4606
4612
  padding: 1.25rem;
4607
4613
  animation: moonNavbarSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -4610,7 +4616,7 @@ textarea {
4610
4616
  .moon-navbar__menu-content {
4611
4617
  display: flex;
4612
4618
  flex-direction: column;
4613
- gap: var(--moon-space-md, 0.85rem);
4619
+ gap: 0.85rem;
4614
4620
  width: 100%;
4615
4621
  }
4616
4622
  .moon-navbar__menu .moon-navbar__item {
@@ -4809,11 +4815,11 @@ textarea {
4809
4815
  /* src/HoloCard/HoloCard.css */
4810
4816
  .moon-holocard {
4811
4817
  position: relative;
4812
- border-radius: var(--moon-radius-md, 12px);
4813
- padding: var(--moon-space-lg, 1.5rem);
4814
- background: var(--moon-bg-surface, rgba(13, 15, 20, 0.9));
4815
- border: 1px solid var(--moon-color-border, rgba(255, 68, 68, 0.4));
4816
- 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));
4817
4823
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
4818
4824
  transform-style: preserve-3d;
4819
4825
  overflow: hidden;
@@ -4836,8 +4842,8 @@ textarea {
4836
4842
  mix-blend-mode: overlay;
4837
4843
  }
4838
4844
  .moon-holocard--inferno {
4839
- border-color: rgba(255, 68, 68, 0.5);
4840
- 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));
4841
4847
  }
4842
4848
  .moon-holocard--cyber {
4843
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;
@@ -4013,6 +4013,8 @@
4013
4013
  }
4014
4014
 
4015
4015
  /* ../themes/src/terminal.css */
4016
+ :root[data-theme=terminal],
4017
+ body[data-theme=terminal],
4016
4018
  [data-theme=terminal] {
4017
4019
  --mi-color-bg: #05130A;
4018
4020
  --mi-color-bg-subtle: #0B2213;
@@ -4028,6 +4030,7 @@
4028
4030
  --mi-color-text-dim: #26994D;
4029
4031
  --mi-color-focus-ring: #00FF66;
4030
4032
  --mi-shadow-glow: 0 0 16px rgba(0, 255, 102, 0.45);
4033
+ --mi-shadow-pixel: 3px 3px 0px #000000;
4031
4034
  --mi-crt-scanline: rgba(0, 255, 102, 0.08);
4032
4035
  scrollbar-width: thin;
4033
4036
  scrollbar-color: #00FF66 #0B2213;
@@ -4050,6 +4053,8 @@
4050
4053
  }
4051
4054
 
4052
4055
  /* ../themes/src/y2k.css */
4056
+ :root[data-theme=y2k],
4057
+ body[data-theme=y2k],
4053
4058
  [data-theme=y2k] {
4054
4059
  --mi-color-bg: #0F0E17;
4055
4060
  --mi-color-bg-subtle: #1B1A2E;
@@ -4065,6 +4070,7 @@
4065
4070
  --mi-color-text-dim: #8B85C1;
4066
4071
  --mi-color-focus-ring: #00E5FF;
4067
4072
  --mi-shadow-glow: 0 0 16px rgba(0, 229, 255, 0.45);
4073
+ --mi-shadow-pixel: 3px 3px 0px #0F0E17;
4068
4074
  --mi-crt-scanline: rgba(0, 229, 255, 0.05);
4069
4075
  scrollbar-width: thin;
4070
4076
  scrollbar-color: #00E5FF #1B1A2E;
@@ -4479,10 +4485,10 @@ textarea {
4479
4485
  justify-content: center;
4480
4486
  z-index: 1000;
4481
4487
  box-sizing: border-box;
4482
- 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));
4483
4489
  backdrop-filter: blur(16px);
4484
4490
  -webkit-backdrop-filter: blur(16px);
4485
- transition: all var(--moon-transition-speed, 0.2s) ease;
4491
+ transition: all 0.2s ease;
4486
4492
  }
4487
4493
  .moon-navbar--sticky {
4488
4494
  position: sticky;
@@ -4492,40 +4498,40 @@ textarea {
4492
4498
  width: 100%;
4493
4499
  max-width: 1280px;
4494
4500
  min-height: 64px;
4495
- padding: 0.5rem var(--moon-space-md, 1rem);
4501
+ padding: 0.5rem 1rem;
4496
4502
  display: flex;
4497
4503
  align-items: center;
4498
4504
  justify-content: space-between;
4499
- gap: var(--moon-space-md, 1rem);
4505
+ gap: 1rem;
4500
4506
  box-sizing: border-box;
4501
4507
  }
4502
4508
  .moon-navbar--inferno {
4503
- border-bottom: 1px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4504
- 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));
4505
4511
  }
4506
4512
  .moon-navbar--pixel {
4507
- border-bottom: 3px solid var(--moon-color-border, #ff4444);
4508
- 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);
4509
4515
  box-shadow: 0 4px 0 #000;
4510
4516
  }
4511
4517
  .moon-navbar--ghost {
4512
- 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));
4513
4519
  background-color: transparent;
4514
4520
  }
4515
4521
  .moon-navbar__brand {
4516
4522
  display: flex;
4517
4523
  align-items: center;
4518
- gap: var(--moon-space-sm, 0.5rem);
4524
+ gap: 0.5rem;
4519
4525
  font-weight: 700;
4520
- color: var(--moon-color-text, #ffffff);
4526
+ color: var(--mi-color-text, #ffffff);
4521
4527
  text-decoration: none;
4522
- font-family: var(--moon-font-mono, monospace);
4528
+ font-family: var(--mi-font-mono, monospace);
4523
4529
  flex-shrink: 0;
4524
4530
  }
4525
4531
  .moon-navbar__content {
4526
4532
  display: flex;
4527
4533
  align-items: center;
4528
- gap: var(--moon-space-lg, 1.25rem);
4534
+ gap: 1.25rem;
4529
4535
  list-style: none;
4530
4536
  margin: 0;
4531
4537
  padding: 0;
@@ -4544,15 +4550,15 @@ textarea {
4544
4550
  display: flex;
4545
4551
  align-items: center;
4546
4552
  position: relative;
4547
- font-family: var(--moon-font-mono, monospace);
4553
+ font-family: var(--mi-font-mono, monospace);
4548
4554
  font-size: 0.9rem;
4549
- color: var(--moon-color-text-muted, #a0a5b5);
4555
+ color: var(--mi-color-text-muted, #a0a5b5);
4550
4556
  transition: color 0.2s ease;
4551
4557
  cursor: pointer;
4552
4558
  }
4553
4559
  .moon-navbar__item:hover,
4554
4560
  .moon-navbar__item--active {
4555
- color: var(--moon-color-primary, #ff4444);
4561
+ color: var(--mi-color-primary, #FF4D00);
4556
4562
  }
4557
4563
  .moon-navbar__item--active::after {
4558
4564
  content: "";
@@ -4561,27 +4567,27 @@ textarea {
4561
4567
  left: 0;
4562
4568
  right: 0;
4563
4569
  height: 2px;
4564
- background-color: var(--moon-color-primary, #ff4444);
4565
- 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);
4566
4572
  }
4567
4573
  .moon-navbar__toggle {
4568
4574
  display: none;
4569
4575
  align-items: center;
4570
4576
  justify-content: center;
4571
- background: rgba(255, 77, 0, 0.08);
4572
- 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));
4573
4579
  padding: 0.45rem 0.6rem;
4574
4580
  border-radius: 8px;
4575
4581
  cursor: pointer;
4576
4582
  outline: none;
4577
4583
  transition: all 0.15s ease;
4578
- color: var(--moon-color-primary, #FF4D00);
4584
+ color: var(--mi-color-primary, #FF4D00);
4579
4585
  }
4580
4586
  .moon-navbar__toggle:focus-visible,
4581
4587
  .moon-navbar__toggle:hover {
4582
- background: var(--moon-color-primary, #FF4D00);
4583
- color: #000;
4584
- 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);
4585
4591
  }
4586
4592
  .moon-navbar__toggle-icon {
4587
4593
  display: flex;
@@ -4596,12 +4602,12 @@ textarea {
4596
4602
  top: calc(100% + 8px);
4597
4603
  left: 0;
4598
4604
  right: 0;
4599
- background: rgba(13, 11, 18, 0.96);
4605
+ background: var(--mi-color-surface, rgba(13, 11, 18, 0.96));
4600
4606
  backdrop-filter: blur(20px);
4601
4607
  -webkit-backdrop-filter: blur(20px);
4602
- 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));
4603
4609
  border-radius: 12px;
4604
- 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));
4605
4611
  z-index: 1001;
4606
4612
  padding: 1.25rem;
4607
4613
  animation: moonNavbarSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -4610,7 +4616,7 @@ textarea {
4610
4616
  .moon-navbar__menu-content {
4611
4617
  display: flex;
4612
4618
  flex-direction: column;
4613
- gap: var(--moon-space-md, 0.85rem);
4619
+ gap: 0.85rem;
4614
4620
  width: 100%;
4615
4621
  }
4616
4622
  .moon-navbar__menu .moon-navbar__item {
@@ -4809,11 +4815,11 @@ textarea {
4809
4815
  /* src/HoloCard/HoloCard.css */
4810
4816
  .moon-holocard {
4811
4817
  position: relative;
4812
- border-radius: var(--moon-radius-md, 12px);
4813
- padding: var(--moon-space-lg, 1.5rem);
4814
- background: var(--moon-bg-surface, rgba(13, 15, 20, 0.9));
4815
- border: 1px solid var(--moon-color-border, rgba(255, 68, 68, 0.4));
4816
- 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));
4817
4823
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
4818
4824
  transform-style: preserve-3d;
4819
4825
  overflow: hidden;
@@ -4836,8 +4842,8 @@ textarea {
4836
4842
  mix-blend-mode: overlay;
4837
4843
  }
4838
4844
  .moon-holocard--inferno {
4839
- border-color: rgba(255, 68, 68, 0.5);
4840
- 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));
4841
4847
  }
4842
4848
  .moon-holocard--cyber {
4843
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.3.9",
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/icons": "0.3.9",
33
- "@moon-inferno/core": "0.3.9",
34
- "@moon-inferno/react": "0.3.9",
35
- "@moon-inferno/themes": "0.3.9"
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",