moon-inferno 0.3.8 → 0.4.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.
Files changed (3) hide show
  1. package/dist/index.css +59 -0
  2. package/dist/styles.css +59 -0
  3. package/package.json +5 -5
package/dist/index.css CHANGED
@@ -53,6 +53,17 @@
53
53
  border-color: var(--mi-color-primary-hover, #FF661A);
54
54
  box-shadow: var(--mi-shadow-glow);
55
55
  }
56
+ .mi-button--success {
57
+ background-color: var(--mi-color-success, #00FF66);
58
+ color: #05130A;
59
+ font-weight: 700;
60
+ border-color: var(--mi-color-success, #00FF66);
61
+ }
62
+ .mi-button--success:hover:not(:disabled) {
63
+ background-color: #33FF85;
64
+ border-color: #33FF85;
65
+ box-shadow: 0 0 16px rgba(0, 255, 102, 0.45);
66
+ }
56
67
  .mi-button--inferno:active:not(:disabled) {
57
68
  background-color: var(--mi-color-primary-active, #FF2E00);
58
69
  transform: translateY(1px);
@@ -777,6 +788,34 @@
777
788
  font-family: var(--mi-font-sans, sans-serif);
778
789
  line-height: 1.6;
779
790
  }
791
+ .mi-pixel-container--inferno .mi-pixel-container__titlebar {
792
+ background-color: var(--mi-color-primary, #FF4D00);
793
+ color: #000000;
794
+ }
795
+ .mi-pixel-container--terminal .mi-pixel-container__titlebar {
796
+ background-color: #00FF66;
797
+ color: #05130A;
798
+ }
799
+ .mi-pixel-container--terminal {
800
+ box-shadow:
801
+ 0 -3px 0 0 #00FF66,
802
+ 0 3px 0 0 #00FF66,
803
+ -3px 0 0 0 #00FF66,
804
+ 3px 0 0 0 #00FF66,
805
+ 3px 3px 0 0 #000000;
806
+ }
807
+ .mi-pixel-container--y2k .mi-pixel-container__titlebar {
808
+ background-color: #00E5FF;
809
+ color: #0F0E17;
810
+ }
811
+ .mi-pixel-container--y2k {
812
+ box-shadow:
813
+ 0 -3px 0 0 #00E5FF,
814
+ 0 3px 0 0 #00E5FF,
815
+ -3px 0 0 0 #00E5FF,
816
+ 3px 0 0 0 #00E5FF,
817
+ 3px 3px 0 0 #0F0E17;
818
+ }
780
819
  @media (max-width: 640px) {
781
820
  .mi-pixel-container {
782
821
  margin: 2px 4px 4px 2px;
@@ -829,6 +868,7 @@
829
868
  color: var(--mi-color-success, #00FF66);
830
869
  border: 1px solid var(--mi-color-success, #00FF66);
831
870
  }
871
+ .mi-badge--danger,
832
872
  .mi-badge--error {
833
873
  background-color: rgba(255, 0, 51, 0.15);
834
874
  color: #FF6680;
@@ -839,6 +879,12 @@
839
879
  color: var(--mi-color-text-muted, #94A3B8);
840
880
  border: 1px solid var(--mi-color-border, #332D40);
841
881
  }
882
+ .mi-badge--ghost {
883
+ background-color: transparent;
884
+ color: var(--mi-color-text-muted, #94A3B8);
885
+ border: 1px solid transparent;
886
+ opacity: 0.85;
887
+ }
842
888
 
843
889
  /* src/Container/Container.css */
844
890
  .mi-container {
@@ -1327,6 +1373,13 @@
1327
1373
  .mi-accordion-item--open {
1328
1374
  border-color: var(--mi-color-border-accent, #FF4D00);
1329
1375
  }
1376
+ .mi-accordion-item--pixel {
1377
+ border-radius: 0;
1378
+ box-shadow: 2px 2px 0 #000;
1379
+ }
1380
+ .mi-accordion-item--terminal.mi-accordion-item--open {
1381
+ border-color: #00FF66;
1382
+ }
1330
1383
  .mi-accordion-header {
1331
1384
  width: 100%;
1332
1385
  padding: 0.875rem 1.125rem;
@@ -3960,6 +4013,8 @@
3960
4013
  }
3961
4014
 
3962
4015
  /* ../themes/src/terminal.css */
4016
+ :root[data-theme=terminal],
4017
+ body[data-theme=terminal],
3963
4018
  [data-theme=terminal] {
3964
4019
  --mi-color-bg: #05130A;
3965
4020
  --mi-color-bg-subtle: #0B2213;
@@ -3975,6 +4030,7 @@
3975
4030
  --mi-color-text-dim: #26994D;
3976
4031
  --mi-color-focus-ring: #00FF66;
3977
4032
  --mi-shadow-glow: 0 0 16px rgba(0, 255, 102, 0.45);
4033
+ --mi-shadow-pixel: 3px 3px 0px #000000;
3978
4034
  --mi-crt-scanline: rgba(0, 255, 102, 0.08);
3979
4035
  scrollbar-width: thin;
3980
4036
  scrollbar-color: #00FF66 #0B2213;
@@ -3997,6 +4053,8 @@
3997
4053
  }
3998
4054
 
3999
4055
  /* ../themes/src/y2k.css */
4056
+ :root[data-theme=y2k],
4057
+ body[data-theme=y2k],
4000
4058
  [data-theme=y2k] {
4001
4059
  --mi-color-bg: #0F0E17;
4002
4060
  --mi-color-bg-subtle: #1B1A2E;
@@ -4012,6 +4070,7 @@
4012
4070
  --mi-color-text-dim: #8B85C1;
4013
4071
  --mi-color-focus-ring: #00E5FF;
4014
4072
  --mi-shadow-glow: 0 0 16px rgba(0, 229, 255, 0.45);
4073
+ --mi-shadow-pixel: 3px 3px 0px #0F0E17;
4015
4074
  --mi-crt-scanline: rgba(0, 229, 255, 0.05);
4016
4075
  scrollbar-width: thin;
4017
4076
  scrollbar-color: #00E5FF #1B1A2E;
package/dist/styles.css CHANGED
@@ -53,6 +53,17 @@
53
53
  border-color: var(--mi-color-primary-hover, #FF661A);
54
54
  box-shadow: var(--mi-shadow-glow);
55
55
  }
56
+ .mi-button--success {
57
+ background-color: var(--mi-color-success, #00FF66);
58
+ color: #05130A;
59
+ font-weight: 700;
60
+ border-color: var(--mi-color-success, #00FF66);
61
+ }
62
+ .mi-button--success:hover:not(:disabled) {
63
+ background-color: #33FF85;
64
+ border-color: #33FF85;
65
+ box-shadow: 0 0 16px rgba(0, 255, 102, 0.45);
66
+ }
56
67
  .mi-button--inferno:active:not(:disabled) {
57
68
  background-color: var(--mi-color-primary-active, #FF2E00);
58
69
  transform: translateY(1px);
@@ -777,6 +788,34 @@
777
788
  font-family: var(--mi-font-sans, sans-serif);
778
789
  line-height: 1.6;
779
790
  }
791
+ .mi-pixel-container--inferno .mi-pixel-container__titlebar {
792
+ background-color: var(--mi-color-primary, #FF4D00);
793
+ color: #000000;
794
+ }
795
+ .mi-pixel-container--terminal .mi-pixel-container__titlebar {
796
+ background-color: #00FF66;
797
+ color: #05130A;
798
+ }
799
+ .mi-pixel-container--terminal {
800
+ box-shadow:
801
+ 0 -3px 0 0 #00FF66,
802
+ 0 3px 0 0 #00FF66,
803
+ -3px 0 0 0 #00FF66,
804
+ 3px 0 0 0 #00FF66,
805
+ 3px 3px 0 0 #000000;
806
+ }
807
+ .mi-pixel-container--y2k .mi-pixel-container__titlebar {
808
+ background-color: #00E5FF;
809
+ color: #0F0E17;
810
+ }
811
+ .mi-pixel-container--y2k {
812
+ box-shadow:
813
+ 0 -3px 0 0 #00E5FF,
814
+ 0 3px 0 0 #00E5FF,
815
+ -3px 0 0 0 #00E5FF,
816
+ 3px 0 0 0 #00E5FF,
817
+ 3px 3px 0 0 #0F0E17;
818
+ }
780
819
  @media (max-width: 640px) {
781
820
  .mi-pixel-container {
782
821
  margin: 2px 4px 4px 2px;
@@ -829,6 +868,7 @@
829
868
  color: var(--mi-color-success, #00FF66);
830
869
  border: 1px solid var(--mi-color-success, #00FF66);
831
870
  }
871
+ .mi-badge--danger,
832
872
  .mi-badge--error {
833
873
  background-color: rgba(255, 0, 51, 0.15);
834
874
  color: #FF6680;
@@ -839,6 +879,12 @@
839
879
  color: var(--mi-color-text-muted, #94A3B8);
840
880
  border: 1px solid var(--mi-color-border, #332D40);
841
881
  }
882
+ .mi-badge--ghost {
883
+ background-color: transparent;
884
+ color: var(--mi-color-text-muted, #94A3B8);
885
+ border: 1px solid transparent;
886
+ opacity: 0.85;
887
+ }
842
888
 
843
889
  /* src/Container/Container.css */
844
890
  .mi-container {
@@ -1327,6 +1373,13 @@
1327
1373
  .mi-accordion-item--open {
1328
1374
  border-color: var(--mi-color-border-accent, #FF4D00);
1329
1375
  }
1376
+ .mi-accordion-item--pixel {
1377
+ border-radius: 0;
1378
+ box-shadow: 2px 2px 0 #000;
1379
+ }
1380
+ .mi-accordion-item--terminal.mi-accordion-item--open {
1381
+ border-color: #00FF66;
1382
+ }
1330
1383
  .mi-accordion-header {
1331
1384
  width: 100%;
1332
1385
  padding: 0.875rem 1.125rem;
@@ -3960,6 +4013,8 @@
3960
4013
  }
3961
4014
 
3962
4015
  /* ../themes/src/terminal.css */
4016
+ :root[data-theme=terminal],
4017
+ body[data-theme=terminal],
3963
4018
  [data-theme=terminal] {
3964
4019
  --mi-color-bg: #05130A;
3965
4020
  --mi-color-bg-subtle: #0B2213;
@@ -3975,6 +4030,7 @@
3975
4030
  --mi-color-text-dim: #26994D;
3976
4031
  --mi-color-focus-ring: #00FF66;
3977
4032
  --mi-shadow-glow: 0 0 16px rgba(0, 255, 102, 0.45);
4033
+ --mi-shadow-pixel: 3px 3px 0px #000000;
3978
4034
  --mi-crt-scanline: rgba(0, 255, 102, 0.08);
3979
4035
  scrollbar-width: thin;
3980
4036
  scrollbar-color: #00FF66 #0B2213;
@@ -3997,6 +4053,8 @@
3997
4053
  }
3998
4054
 
3999
4055
  /* ../themes/src/y2k.css */
4056
+ :root[data-theme=y2k],
4057
+ body[data-theme=y2k],
4000
4058
  [data-theme=y2k] {
4001
4059
  --mi-color-bg: #0F0E17;
4002
4060
  --mi-color-bg-subtle: #1B1A2E;
@@ -4012,6 +4070,7 @@
4012
4070
  --mi-color-text-dim: #8B85C1;
4013
4071
  --mi-color-focus-ring: #00E5FF;
4014
4072
  --mi-shadow-glow: 0 0 16px rgba(0, 229, 255, 0.45);
4073
+ --mi-shadow-pixel: 3px 3px 0px #0F0E17;
4015
4074
  --mi-crt-scanline: rgba(0, 229, 255, 0.05);
4016
4075
  scrollbar-width: thin;
4017
4076
  scrollbar-color: #00E5FF #1B1A2E;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "moon-inferno",
3
- "version": "0.3.8",
3
+ "version": "0.4.2",
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.3.8",
33
- "@moon-inferno/icons": "0.3.8",
34
- "@moon-inferno/react": "0.3.8",
35
- "@moon-inferno/themes": "0.3.8"
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"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": ">=18.0.0",