@kwirthmagnify/kwirth-theme-matrix 0.1.1

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/front.js +238 -0
  2. package/package.json +7 -0
package/front.js ADDED
@@ -0,0 +1,238 @@
1
+ (() => {
2
+ // src/front/index.ts
3
+ window.__kwirth_themes__ = window.__kwirth_themes__ ?? {};
4
+ window.__kwirth_themes__["matrix"] = {
5
+ displayName: "Matrix",
6
+ getThemeOptions: (mode) => ({
7
+ cssVariables: true,
8
+ palette: {
9
+ mode,
10
+ primary: { main: "#00ff41" },
11
+ secondary: { main: "#006620" },
12
+ background: {
13
+ default: "#000000",
14
+ paper: "#030a03"
15
+ },
16
+ text: {
17
+ primary: "#c8f0c8",
18
+ secondary: "#006620",
19
+ disabled: "rgba(0,255,65,0.38)"
20
+ },
21
+ divider: "#0a2a0a",
22
+ action: {
23
+ active: "#00ff41",
24
+ hover: "rgba(0,255,65,0.08)",
25
+ selected: "rgba(0,255,65,0.12)",
26
+ disabled: "rgba(0,255,65,0.28)",
27
+ disabledBackground: "rgba(0,255,65,0.05)"
28
+ }
29
+ },
30
+ typography: {
31
+ fontFamily: '"IBM Plex Mono", "Cascadia Code", "Fira Code", "Courier New", monospace',
32
+ fontSize: 12
33
+ },
34
+ components: {
35
+ MuiButton: {
36
+ styleOverrides: {
37
+ outlinedPrimary: () => ({
38
+ borderColor: "#006620",
39
+ color: "#00ff41",
40
+ "&:hover": {
41
+ borderColor: "#00ff41",
42
+ backgroundColor: "rgba(0,255,65,0.08)",
43
+ boxShadow: "0 0 8px rgba(0,255,65,0.25)"
44
+ }
45
+ }),
46
+ containedPrimary: () => ({
47
+ backgroundColor: "#003310",
48
+ color: "#00ff41",
49
+ "&:hover": { backgroundColor: "#004d18" }
50
+ })
51
+ }
52
+ },
53
+ MuiCardHeader: {
54
+ styleOverrides: {
55
+ root: () => ({
56
+ backgroundColor: "#030a03",
57
+ borderBottom: "1px solid #0a2a0a"
58
+ })
59
+ }
60
+ },
61
+ MuiCard: {
62
+ styleOverrides: {
63
+ root: () => ({
64
+ backgroundColor: "#030a03",
65
+ border: "1px solid #0a2a0a",
66
+ backgroundImage: "none"
67
+ })
68
+ }
69
+ },
70
+ MuiPaper: {
71
+ styleOverrides: {
72
+ root: () => ({
73
+ backgroundImage: "none !important",
74
+ backgroundColor: "#030a03"
75
+ })
76
+ }
77
+ },
78
+ MuiDialog: {
79
+ defaultProps: {
80
+ TransitionProps: { onExit: () => {
81
+ document.activeElement?.blur();
82
+ } }
83
+ },
84
+ styleOverrides: {
85
+ paper: () => ({
86
+ backgroundImage: "none !important",
87
+ backgroundColor: "#020802",
88
+ border: "1px solid #006620"
89
+ })
90
+ }
91
+ },
92
+ MuiDialogTitle: {
93
+ styleOverrides: {
94
+ root: () => ({
95
+ "&.MuiDialogTitle-root": {
96
+ backgroundColor: "#030a03",
97
+ backgroundImage: "none !important",
98
+ borderBottom: "1px solid #0a2a0a",
99
+ paddingTop: "8px",
100
+ paddingBottom: "8px",
101
+ color: "#00ff41",
102
+ fontFamily: '"IBM Plex Mono", monospace'
103
+ }
104
+ })
105
+ }
106
+ },
107
+ MuiDialogContent: {
108
+ styleOverrides: {
109
+ root: () => ({
110
+ "&.MuiDialogContent-dividers": { borderColor: "#0a2a0a" }
111
+ })
112
+ }
113
+ },
114
+ MuiDialogActions: {
115
+ styleOverrides: {
116
+ root: () => ({
117
+ backgroundColor: "#030a03",
118
+ borderTop: "1px solid #0a2a0a",
119
+ padding: "12px 16px"
120
+ })
121
+ }
122
+ },
123
+ MuiAppBar: {
124
+ styleOverrides: {
125
+ root: () => ({
126
+ backgroundImage: "none",
127
+ backgroundColor: "#000000",
128
+ color: "#c8f0c8",
129
+ borderBottom: "1px solid #0a2a0a",
130
+ boxShadow: "0 1px 8px rgba(0,255,65,0.08)",
131
+ "& .MuiTypography-root": { color: "#c8f0c8" },
132
+ "& .MuiIconButton-root": { color: "#c8f0c8" },
133
+ "& .MuiButtonBase-root": { color: "#c8f0c8" },
134
+ "& svg": { color: "#c8f0c8" }
135
+ })
136
+ }
137
+ },
138
+ MuiSelect: {
139
+ styleOverrides: {
140
+ icon: () => ({
141
+ color: "#006620",
142
+ ".Mui-disabled &": { color: "rgba(0,255,65,0.28)" }
143
+ })
144
+ }
145
+ },
146
+ MuiMenuItem: {
147
+ styleOverrides: {
148
+ root: () => ({
149
+ "&.Mui-disabled": {
150
+ color: "rgba(0,255,65,0.28)",
151
+ opacity: 1
152
+ }
153
+ })
154
+ }
155
+ },
156
+ MuiListItemButton: {
157
+ styleOverrides: {
158
+ root: () => ({
159
+ "&.Mui-disabled": {
160
+ color: "rgba(0,255,65,0.28)",
161
+ opacity: 1
162
+ }
163
+ })
164
+ }
165
+ },
166
+ MuiInputLabel: {
167
+ styleOverrides: {
168
+ root: () => ({
169
+ color: "#006620",
170
+ "&.Mui-disabled": { color: "rgba(0,255,65,0.38)" }
171
+ })
172
+ }
173
+ },
174
+ MuiOutlinedInput: {
175
+ styleOverrides: {
176
+ root: () => ({
177
+ color: "#c8f0c8",
178
+ "& .MuiOutlinedInput-notchedOutline": { borderColor: "#0a2a0a" },
179
+ "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "#006620" },
180
+ "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "#00ff41" },
181
+ "&.Mui-disabled": {
182
+ color: "rgba(0,255,65,0.38)",
183
+ "& .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0,255,65,0.15)" }
184
+ }
185
+ })
186
+ }
187
+ },
188
+ MuiFormControlLabel: {
189
+ styleOverrides: {
190
+ label: () => ({
191
+ "&.Mui-disabled": { color: "rgba(0,255,65,0.38)" }
192
+ })
193
+ }
194
+ },
195
+ MuiIconButton: {
196
+ styleOverrides: {
197
+ root: () => ({
198
+ "&.Mui-disabled": { color: "rgba(0,255,65,0.28)" }
199
+ })
200
+ }
201
+ },
202
+ MuiTab: {
203
+ styleOverrides: {
204
+ root: () => ({
205
+ fontFamily: '"IBM Plex Mono", monospace',
206
+ color: "#006620",
207
+ "&.Mui-selected": { color: "#00ff41" }
208
+ })
209
+ }
210
+ },
211
+ MuiTableHead: {
212
+ styleOverrides: {
213
+ root: () => ({ backgroundColor: "#030a03" })
214
+ }
215
+ },
216
+ MuiChip: {
217
+ styleOverrides: {
218
+ root: () => ({
219
+ backgroundColor: "#030a03",
220
+ border: "1px solid #006620",
221
+ color: "#00ff41",
222
+ fontFamily: '"IBM Plex Mono", monospace'
223
+ })
224
+ }
225
+ },
226
+ MuiCssBaseline: {
227
+ styleOverrides: `
228
+ ::-webkit-scrollbar { width: 5px; height: 5px; }
229
+ ::-webkit-scrollbar-thumb { background-color: rgba(0,255,65,0.3); border-radius: 2px; }
230
+ ::-webkit-scrollbar-track { background: transparent; }
231
+ ::-webkit-scrollbar-corner { background: transparent; }
232
+ * { caret-color: #00ff41; }
233
+ `
234
+ }
235
+ }
236
+ })
237
+ };
238
+ })();
package/package.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "id": "matrix",
3
+ "name": "@kwirthmagnify/kwirth-theme-matrix",
4
+ "displayName": "Matrix",
5
+ "version": "0.1.1",
6
+ "description": "Matrix digital rain theme — pure black background, phosphor-green monospace typography, matching the Matrix homepage aesthetic."
7
+ }