@whykusanagi/corrupted-theme 0.1.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 (30) hide show
  1. package/CHANGELOG.md +339 -0
  2. package/Dockerfile +32 -0
  3. package/LICENSE +21 -0
  4. package/README.md +399 -0
  5. package/docker-entrypoint.sh +48 -0
  6. package/docs/COMPONENTS_REFERENCE.md +659 -0
  7. package/examples/.env.example +100 -0
  8. package/examples/button.html +436 -0
  9. package/examples/card.html +678 -0
  10. package/examples/form.html +555 -0
  11. package/examples/index.html +520 -0
  12. package/examples/layout.html +507 -0
  13. package/examples/nikke-team-builder.html +580 -0
  14. package/examples/showcase-complete.html +1071 -0
  15. package/examples/showcase.html +502 -0
  16. package/package.json +70 -0
  17. package/scripts/celeste-proxy-server.js +99 -0
  18. package/scripts/static-server.js +113 -0
  19. package/src/css/animations.css +649 -0
  20. package/src/css/components.css +1441 -0
  21. package/src/css/glassmorphism.css +217 -0
  22. package/src/css/nikke-utilities.css +530 -0
  23. package/src/css/theme.css +478 -0
  24. package/src/css/typography.css +198 -0
  25. package/src/css/utilities.css +239 -0
  26. package/src/css/variables.css +73 -0
  27. package/src/lib/celeste-proxy.js +215 -0
  28. package/src/lib/celeste-widget.js +1089 -0
  29. package/src/lib/corrupted-text.js +193 -0
  30. package/src/lib/corruption-loading.js +405 -0
package/src/css/glassmorphism.css ADDED
@@ -0,0 +1,217 @@
1
+ /* glassmorphism.css — Glass morphism effect utilities and foundations */
2
+ /* Creates the frosted glass aesthetic that defines the corrupted theme */
3
+
4
+ /* ========== GLASS BACKDROP LAYER ========== */
5
+ /* Apply to fixed/positioned background elements */
6
+
7
+ .glass-backdrop {
8
+ position: fixed;
9
+ inset: 0;
10
+ z-index: var(--z-background);
11
+ background: linear-gradient(180deg, rgba(5, 0, 16, 0.8), rgba(10, 10, 10, 0.8) 50%, rgba(15, 10, 25, 0.9));
12
+ backdrop-filter: blur(3px);
13
+ pointer-events: none;
14
+ }
15
+
16
+ /* ========== GLASS CONTAINER ========== */
17
+ /* Main glass effect container for cards, sections, etc */
18
+
19
+ .glass,
20
+ .glass-container {
21
+ background: var(--glass);
22
+ border: 1px solid var(--border);
23
+ backdrop-filter: blur(15px);
24
+ border-radius: var(--radius-xl);
25
+ }
26
+
27
+ /* Light variant */
28
+ .glass.light,
29
+ .glass-container.light {
30
+ background: var(--glass-light);
31
+ border-color: rgba(90, 69, 117, 0.5);
32
+ }
33
+
34
+ /* Dark variant */
35
+ .glass.dark,
36
+ .glass-container.dark {
37
+ background: rgba(15, 15, 26, 0.9);
38
+ border-color: var(--border);
39
+ }
40
+
41
+ /* ========== GLASS SHADOW SYSTEM ========== */
42
+
43
+ .glass-shadow-sm {
44
+ box-shadow: 0 4px 16px rgba(217, 79, 144, 0.1);
45
+ }
46
+
47
+ .glass-shadow {
48
+ box-shadow: 0 8px 32px rgba(217, 79, 144, 0.15), inset 0 0 20px rgba(217, 79, 144, 0.05);
49
+ }
50
+
51
+ .glass-shadow-lg {
52
+ box-shadow: 0 12px 48px rgba(217, 79, 144, 0.25), inset 0 0 30px rgba(217, 79, 144, 0.08);
53
+ }
54
+
55
+ .glass-shadow-xl {
56
+ box-shadow: 0 20px 60px rgba(217, 79, 144, 0.35), inset 0 0 40px rgba(217, 79, 144, 0.1);
57
+ }
58
+
59
+ /* ========== FROSTED GLASS CARD ========== */
60
+ /* Complete card with glass effect, padding, and shadows */
61
+
62
+ .frosted-card {
63
+ padding: 2rem;
64
+ background: var(--glass);
65
+ border: 1px solid var(--border);
66
+ border-radius: var(--radius-xl);
67
+ backdrop-filter: blur(15px);
68
+ box-shadow: 0 8px 32px rgba(217, 79, 144, 0.15), inset 0 0 20px rgba(217, 79, 144, 0.05);
69
+ transition: all var(--transition-normal) var(--transition-easing);
70
+ }
71
+
72
+ .frosted-card:hover {
73
+ transform: translateY(-4px);
74
+ box-shadow: 0 12px 48px rgba(217, 79, 144, 0.25);
75
+ border-color: var(--border-light);
76
+ }
77
+
78
+ /* Size variants */
79
+ .frosted-card.sm {
80
+ padding: 1.5rem;
81
+ border-radius: var(--radius-lg);
82
+ }
83
+
84
+ .frosted-card.lg {
85
+ padding: 3rem;
86
+ }
87
+
88
+ /* ========== GLASS BUTTON BASE ========== */
89
+ /* Glass effect for interactive elements */
90
+
91
+ .glass-btn {
92
+ padding: 0.875rem 1.75rem;
93
+ background: var(--glass);
94
+ color: var(--text);
95
+ border: 1px solid var(--border);
96
+ border-radius: var(--radius-lg);
97
+ cursor: pointer;
98
+ transition: all var(--transition-normal) var(--transition-easing);
99
+ backdrop-filter: blur(10px);
100
+ font-weight: 600;
101
+ }
102
+
103
+ .glass-btn:hover {
104
+ background: var(--glass-light);
105
+ border-color: var(--border-light);
106
+ transform: translateY(-2px);
107
+ }
108
+
109
+ .glass-btn:active {
110
+ transform: translateY(0);
111
+ }
112
+
113
+ /* ========== GLASS NAVBAR ========== */
114
+ /* Navigation bar with glass effect */
115
+
116
+ .glass-navbar {
117
+ position: sticky;
118
+ top: 0;
119
+ z-index: var(--z-navbar);
120
+ background: rgba(10, 10, 10, 0.95);
121
+ border-bottom: 1px solid var(--border);
122
+ backdrop-filter: blur(15px);
123
+ padding: 0;
124
+ }
125
+
126
+ /* ========== GLASS MODAL OVERLAY ========== */
127
+ /* Backdrop for modals and overlays */
128
+
129
+ .glass-overlay {
130
+ position: fixed;
131
+ inset: 0;
132
+ background: rgba(0, 0, 0, 0.6);
133
+ backdrop-filter: blur(4px);
134
+ z-index: calc(var(--z-modal) - 1);
135
+ }
136
+
137
+ .glass-modal {
138
+ position: relative;
139
+ z-index: var(--z-modal);
140
+ background: var(--glass);
141
+ border: 1px solid var(--border);
142
+ border-radius: var(--radius-xl);
143
+ backdrop-filter: blur(15px);
144
+ box-shadow: 0 20px 60px rgba(217, 79, 144, 0.35), inset 0 0 40px rgba(217, 79, 144, 0.1);
145
+ }
146
+
147
+ /* ========== GLASS BORDER VARIANTS ========== */
148
+
149
+ .glass-border {
150
+ border: 1px solid var(--border);
151
+ border-radius: var(--radius-lg);
152
+ }
153
+
154
+ .glass-border-light {
155
+ border: 1px solid rgba(90, 69, 117, 0.3);
156
+ border-radius: var(--radius-lg);
157
+ }
158
+
159
+ .glass-border-accent {
160
+ border: 1px solid var(--accent);
161
+ border-radius: var(--radius-lg);
162
+ }
163
+
164
+ /* ========== OPACITY UTILITIES ========== */
165
+ /* For layering glass effects */
166
+
167
+ .glass-opacity-50 {
168
+ background: rgba(20, 12, 40, 0.5);
169
+ }
170
+
171
+ .glass-opacity-60 {
172
+ background: rgba(20, 12, 40, 0.6);
173
+ }
174
+
175
+ .glass-opacity-70 {
176
+ background: rgba(20, 12, 40, 0.7);
177
+ }
178
+
179
+ .glass-opacity-80 {
180
+ background: rgba(20, 12, 40, 0.8);
181
+ }
182
+
183
+ /* ========== BLUR UTILITIES ========== */
184
+
185
+ .blur-sm {
186
+ backdrop-filter: blur(2px);
187
+ }
188
+
189
+ .blur-md {
190
+ backdrop-filter: blur(5px);
191
+ }
192
+
193
+ .blur-lg {
194
+ backdrop-filter: blur(10px);
195
+ }
196
+
197
+ .blur-xl {
198
+ backdrop-filter: blur(15px);
199
+ }
200
+
201
+ .blur-2xl {
202
+ backdrop-filter: blur(20px);
203
+ }
204
+
205
+ /* ========== RESPONSIVENESS ========== */
206
+
207
+ @media screen and (max-width: 768px) {
208
+ .frosted-card {
209
+ padding: 1.5rem;
210
+ border-radius: var(--radius-lg);
211
+ }
212
+
213
+ .glass-modal {
214
+ margin: 1rem;
215
+ border-radius: var(--radius-lg);
216
+ }
217
+ }