@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.
- package/CHANGELOG.md +339 -0
- package/Dockerfile +32 -0
- package/LICENSE +21 -0
- package/README.md +399 -0
- package/docker-entrypoint.sh +48 -0
- package/docs/COMPONENTS_REFERENCE.md +659 -0
- package/examples/.env.example +100 -0
- package/examples/button.html +436 -0
- package/examples/card.html +678 -0
- package/examples/form.html +555 -0
- package/examples/index.html +520 -0
- package/examples/layout.html +507 -0
- package/examples/nikke-team-builder.html +580 -0
- package/examples/showcase-complete.html +1071 -0
- package/examples/showcase.html +502 -0
- package/package.json +70 -0
- package/scripts/celeste-proxy-server.js +99 -0
- package/scripts/static-server.js +113 -0
- package/src/css/animations.css +649 -0
- package/src/css/components.css +1441 -0
- package/src/css/glassmorphism.css +217 -0
- package/src/css/nikke-utilities.css +530 -0
- package/src/css/theme.css +478 -0
- package/src/css/typography.css +198 -0
- package/src/css/utilities.css +239 -0
- package/src/css/variables.css +73 -0
- package/src/lib/celeste-proxy.js +215 -0
- package/src/lib/celeste-widget.js +1089 -0
- package/src/lib/corrupted-text.js +193 -0
- package/src/lib/corruption-loading.js +405 -0
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# Celeste Widget Configuration
|
|
2
|
+
# Copy this file to .env and fill in your actual values
|
|
3
|
+
# IMPORTANT: Add .env to .gitignore - NEVER commit this file!
|
|
4
|
+
# This file (.env.example) is safe to commit as it contains no real secrets
|
|
5
|
+
|
|
6
|
+
# ============================================================
|
|
7
|
+
# CELESTE WIDGET CONFIGURATION
|
|
8
|
+
# ============================================================
|
|
9
|
+
|
|
10
|
+
# Base URL for your DigitalOcean agent endpoint
|
|
11
|
+
# Example: https://svzuwvds2ipgf4ysetvzxvai.agents.do-ai.run
|
|
12
|
+
# Get this from your DigitalOcean agent deployment details
|
|
13
|
+
CELESTE_AGENT_BASE_URL=https://your-subdomain.agents.do-ai.run
|
|
14
|
+
|
|
15
|
+
# Your agent's unique identifier
|
|
16
|
+
# Example: c7bfa746-e7f8-11ef-bf8f-4e013e2ddde4
|
|
17
|
+
# Get this from your DigitalOcean agent settings
|
|
18
|
+
CELESTE_AGENT_ID=your-agent-id-uuid
|
|
19
|
+
|
|
20
|
+
# Your agent's API authentication key
|
|
21
|
+
# ⚠️ KEEP THIS SECRET! Never share or commit this value
|
|
22
|
+
# Example: 3AQ9e7HiaZWFP-Uk0yyAhFMo2uqCvYgj
|
|
23
|
+
# Get this from your DigitalOcean agent API settings
|
|
24
|
+
# NOTE: You won't be able to view this again, so save it securely!
|
|
25
|
+
CELESTE_AGENT_KEY=your-api-key-token
|
|
26
|
+
|
|
27
|
+
# ============================================================
|
|
28
|
+
# OPTIONAL: Additional Configuration
|
|
29
|
+
# ============================================================
|
|
30
|
+
|
|
31
|
+
# Page context schemas URL (if using custom context)
|
|
32
|
+
# Default: /static/data/celeste-context-schemas.json
|
|
33
|
+
# CELESTE_CONTEXT_SCHEMAS_URL=/path/to/schemas.json
|
|
34
|
+
|
|
35
|
+
# Widget position (for Phase 2 when customizable)
|
|
36
|
+
# CELESTE_WIDGET_POSITION=bottom-right
|
|
37
|
+
# CELESTE_WIDGET_BOTTOM=20px
|
|
38
|
+
# CELESTE_WIDGET_RIGHT=20px
|
|
39
|
+
|
|
40
|
+
# Widget styling (for Phase 2 when customizable)
|
|
41
|
+
# CELESTE_WIDGET_WIDTH=350px
|
|
42
|
+
# CELESTE_WIDGET_HEIGHT=500px
|
|
43
|
+
# CELESTE_WIDGET_ACCENT_COLOR=#d94f90
|
|
44
|
+
|
|
45
|
+
# Avatar image URL
|
|
46
|
+
# Default: https://s3.whykusanagi.xyz/Celeste_Vel_Icon.png
|
|
47
|
+
# CELESTE_AVATAR_URL=https://your-cdn.com/celeste.png
|
|
48
|
+
|
|
49
|
+
# ============================================================
|
|
50
|
+
# SETUP INSTRUCTIONS
|
|
51
|
+
# ============================================================
|
|
52
|
+
#
|
|
53
|
+
# 1. Copy this file:
|
|
54
|
+
# cp .env.example .env
|
|
55
|
+
#
|
|
56
|
+
# 2. Get your credentials from DigitalOcean:
|
|
57
|
+
# - Log into DigitalOcean
|
|
58
|
+
# - Find your agent in the Agents section
|
|
59
|
+
# - Copy your agent ID, API key, and base URL
|
|
60
|
+
#
|
|
61
|
+
# 3. Fill in your actual values in .env
|
|
62
|
+
# Do NOT use the example values!
|
|
63
|
+
#
|
|
64
|
+
# 4. Keep .env private:
|
|
65
|
+
# - Add .env to .gitignore
|
|
66
|
+
# - Never commit .env to git
|
|
67
|
+
# - Never share .env with others
|
|
68
|
+
#
|
|
69
|
+
# 5. In development, load this file:
|
|
70
|
+
# - Node.js: Use dotenv package
|
|
71
|
+
# - Browser: Load values before initializing widget
|
|
72
|
+
# - Cloudflare: Use wrangler secrets
|
|
73
|
+
#
|
|
74
|
+
# ============================================================
|
|
75
|
+
# SECURITY NOTES
|
|
76
|
+
# ============================================================
|
|
77
|
+
#
|
|
78
|
+
# - CELESTE_AGENT_KEY is a secret! Treat like an API key
|
|
79
|
+
# - Never hardcode secrets in your code
|
|
80
|
+
# - Rotate your API key every 90 days
|
|
81
|
+
# - Use different keys for dev/staging/production
|
|
82
|
+
# - If you accidentally expose your key:
|
|
83
|
+
# 1. Revoke it in DigitalOcean immediately
|
|
84
|
+
# 2. Generate a new key
|
|
85
|
+
# 3. Update all environments
|
|
86
|
+
# 4. Scan your git history for the old key
|
|
87
|
+
#
|
|
88
|
+
# ============================================================
|
|
89
|
+
# MIGRATION TO PHASE 2
|
|
90
|
+
# ============================================================
|
|
91
|
+
#
|
|
92
|
+
# Phase 1 (Current): Hardcoded in widget.js
|
|
93
|
+
# Phase 2 (Coming): Widget will read from env vars
|
|
94
|
+
#
|
|
95
|
+
# Once Phase 2 is released:
|
|
96
|
+
# 1. The widget will automatically read these env vars
|
|
97
|
+
# 2. No more hardcoding credentials in widget.js
|
|
98
|
+
# 3. For Cloudflare Workers, use wrangler secrets
|
|
99
|
+
#
|
|
100
|
+
# ============================================================
|
|
@@ -0,0 +1,436 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Button Component - Corrupted Theme</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../src/css/theme.css">
|
|
9
|
+
<style>
|
|
10
|
+
.container {
|
|
11
|
+
max-width: 1000px;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
padding: var(--spacing-lg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.example-group {
|
|
17
|
+
margin-bottom: var(--spacing-2xl);
|
|
18
|
+
background: var(--glass);
|
|
19
|
+
border: 1px solid var(--border);
|
|
20
|
+
border-radius: var(--radius-lg);
|
|
21
|
+
padding: var(--spacing-lg);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.example-group h3 {
|
|
25
|
+
color: var(--accent);
|
|
26
|
+
margin-bottom: var(--spacing-lg);
|
|
27
|
+
font-size: 1.25rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.button-grid {
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
33
|
+
gap: var(--spacing-lg);
|
|
34
|
+
margin-bottom: var(--spacing-lg);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.button-demo {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: var(--spacing-md);
|
|
42
|
+
padding: var(--spacing-lg);
|
|
43
|
+
background: var(--bg-secondary);
|
|
44
|
+
border-radius: var(--radius-md);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.code-block {
|
|
48
|
+
background: var(--bg);
|
|
49
|
+
border: 1px solid var(--border);
|
|
50
|
+
border-radius: var(--radius-md);
|
|
51
|
+
padding: var(--spacing-md);
|
|
52
|
+
margin-top: var(--spacing-md);
|
|
53
|
+
font-family: 'Courier New', monospace;
|
|
54
|
+
font-size: 0.875rem;
|
|
55
|
+
color: var(--text-secondary);
|
|
56
|
+
overflow-x: auto;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.button-variants {
|
|
60
|
+
display: grid;
|
|
61
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
62
|
+
gap: var(--spacing-lg);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.variant-showcase {
|
|
66
|
+
padding: var(--spacing-lg);
|
|
67
|
+
background: var(--bg-secondary);
|
|
68
|
+
border-radius: var(--radius-md);
|
|
69
|
+
text-align: center;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.variant-showcase p {
|
|
73
|
+
font-size: 0.875rem;
|
|
74
|
+
color: var(--text-secondary);
|
|
75
|
+
margin-top: var(--spacing-md);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.states-demo {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
gap: var(--spacing-lg);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.state-row {
|
|
85
|
+
display: flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
gap: var(--spacing-lg);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.state-label {
|
|
91
|
+
min-width: 120px;
|
|
92
|
+
color: var(--text-secondary);
|
|
93
|
+
font-size: 0.875rem;
|
|
94
|
+
font-weight: 500;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.size-demo {
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
flex-wrap: wrap;
|
|
101
|
+
gap: var(--spacing-lg);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.icon-demo {
|
|
105
|
+
display: grid;
|
|
106
|
+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
107
|
+
gap: var(--spacing-lg);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.icon-example {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
align-items: center;
|
|
114
|
+
gap: var(--spacing-md);
|
|
115
|
+
}
|
|
116
|
+
</style>
|
|
117
|
+
</head>
|
|
118
|
+
<body>
|
|
119
|
+
<nav class="navbar">
|
|
120
|
+
<div class="navbar-content">
|
|
121
|
+
<a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
|
|
122
|
+
<div class="navbar-links">
|
|
123
|
+
<a href="#basic">Basic</a>
|
|
124
|
+
<a href="#variants">Variants</a>
|
|
125
|
+
<a href="#sizes">Sizes</a>
|
|
126
|
+
<a href="#states">States</a>
|
|
127
|
+
<a href="#icons">Icons</a>
|
|
128
|
+
<a href="#groups">Groups</a>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</nav>
|
|
132
|
+
|
|
133
|
+
<div class="container">
|
|
134
|
+
<h1><i class="fas fa-square"></i> Button Component</h1>
|
|
135
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
|
|
136
|
+
Complete button system with variants, sizes, states, and icon support.
|
|
137
|
+
</p>
|
|
138
|
+
|
|
139
|
+
<!-- Basic Buttons -->
|
|
140
|
+
<section id="basic" class="example-group">
|
|
141
|
+
<h3>Basic Buttons</h3>
|
|
142
|
+
<p>The fundamental button styles for your UI.</p>
|
|
143
|
+
|
|
144
|
+
<div class="button-grid">
|
|
145
|
+
<div class="button-demo">
|
|
146
|
+
<button class="btn">Primary</button>
|
|
147
|
+
<span style="font-size: 0.75rem; color: var(--text-muted);">.btn</span>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="button-demo">
|
|
150
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
151
|
+
<span style="font-size: 0.75rem; color: var(--text-muted);">.btn-secondary</span>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="button-demo">
|
|
154
|
+
<button class="btn btn-ghost">Ghost</button>
|
|
155
|
+
<span style="font-size: 0.75rem; color: var(--text-muted);">.btn-ghost</span>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<div class="code-block">
|
|
160
|
+
<button class="btn">Primary Button</button>
|
|
161
|
+
<button class="btn btn-secondary">Secondary Button</button>
|
|
162
|
+
<button class="btn btn-ghost">Ghost Button</button>
|
|
163
|
+
</div>
|
|
164
|
+
</section>
|
|
165
|
+
|
|
166
|
+
<!-- Button Variants -->
|
|
167
|
+
<section id="variants" class="example-group">
|
|
168
|
+
<h3>Button Variants</h3>
|
|
169
|
+
<p>Different button styles for different purposes.</p>
|
|
170
|
+
|
|
171
|
+
<div class="button-variants">
|
|
172
|
+
<div class="variant-showcase">
|
|
173
|
+
<button class="btn">Primary</button>
|
|
174
|
+
<p>Default action button</p>
|
|
175
|
+
</div>
|
|
176
|
+
<div class="variant-showcase">
|
|
177
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
178
|
+
<p>Alternative action</p>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="variant-showcase">
|
|
181
|
+
<button class="btn btn-ghost">Ghost</button>
|
|
182
|
+
<p>Subtle, minimal style</p>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="code-block">
|
|
187
|
+
/* Primary (default) */
|
|
188
|
+
<button class="btn">Primary Button</button>
|
|
189
|
+
|
|
190
|
+
/* Secondary variant */
|
|
191
|
+
<button class="btn btn-secondary">Secondary Button</button>
|
|
192
|
+
|
|
193
|
+
/* Ghost variant */
|
|
194
|
+
<button class="btn btn-ghost">Ghost Button</button>
|
|
195
|
+
</div>
|
|
196
|
+
</section>
|
|
197
|
+
|
|
198
|
+
<!-- Button Sizes -->
|
|
199
|
+
<section id="sizes" class="example-group">
|
|
200
|
+
<h3>Button Sizes</h3>
|
|
201
|
+
<p>Adjust button size based on context and hierarchy.</p>
|
|
202
|
+
|
|
203
|
+
<div class="size-demo">
|
|
204
|
+
<button class="btn btn-sm">Small</button>
|
|
205
|
+
<button class="btn">Normal</button>
|
|
206
|
+
<button class="btn btn-lg">Large</button>
|
|
207
|
+
<button class="btn btn-block">Full Width</button>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="code-block">
|
|
211
|
+
<button class="btn btn-sm">Small Button</button>
|
|
212
|
+
<button class="btn">Normal Button</button>
|
|
213
|
+
<button class="btn btn-lg">Large Button</button>
|
|
214
|
+
<button class="btn btn-block">Full Width Button</button>
|
|
215
|
+
</div>
|
|
216
|
+
</section>
|
|
217
|
+
|
|
218
|
+
<!-- Button States -->
|
|
219
|
+
<section id="states" class="example-group">
|
|
220
|
+
<h3>Button States</h3>
|
|
221
|
+
<p>Different states for user interaction.</p>
|
|
222
|
+
|
|
223
|
+
<div class="states-demo">
|
|
224
|
+
<div class="state-row">
|
|
225
|
+
<div class="state-label">Default:</div>
|
|
226
|
+
<button class="btn">Click Me</button>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="state-row">
|
|
229
|
+
<div class="state-label">Hover:</div>
|
|
230
|
+
<button class="btn" style="transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217, 79, 144, 0.4);">Hover State</button>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="state-row">
|
|
233
|
+
<div class="state-label">Active:</div>
|
|
234
|
+
<button class="btn" style="opacity: 0.9;">Active State</button>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="state-row">
|
|
237
|
+
<div class="state-label">Disabled:</div>
|
|
238
|
+
<button class="btn" disabled>Disabled</button>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="state-row">
|
|
241
|
+
<div class="state-label">Loading:</div>
|
|
242
|
+
<button class="btn" disabled>
|
|
243
|
+
<i class="fas fa-spinner fa-spin"></i> Loading...
|
|
244
|
+
</button>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<div class="code-block">
|
|
249
|
+
/* Default state (automatically applied) */
|
|
250
|
+
<button class="btn">Default</button>
|
|
251
|
+
|
|
252
|
+
/* Disabled state */
|
|
253
|
+
<button class="btn" disabled>Disabled</button>
|
|
254
|
+
|
|
255
|
+
/* Loading state */
|
|
256
|
+
<button class="btn" disabled>
|
|
257
|
+
<i class="fas fa-spinner fa-spin"></i> Loading...
|
|
258
|
+
</button>
|
|
259
|
+
|
|
260
|
+
/* Active state */
|
|
261
|
+
<button class="btn" aria-pressed="true">Active</button>
|
|
262
|
+
</div>
|
|
263
|
+
</section>
|
|
264
|
+
|
|
265
|
+
<!-- Icon Buttons -->
|
|
266
|
+
<section id="icons" class="example-group">
|
|
267
|
+
<h3>Buttons with Icons</h3>
|
|
268
|
+
<p>Buttons can include icons for better visual communication.</p>
|
|
269
|
+
|
|
270
|
+
<div class="icon-demo">
|
|
271
|
+
<div class="icon-example">
|
|
272
|
+
<button class="btn">
|
|
273
|
+
<i class="fas fa-download"></i> Download
|
|
274
|
+
</button>
|
|
275
|
+
<code>Icon + Text</code>
|
|
276
|
+
</div>
|
|
277
|
+
<div class="icon-example">
|
|
278
|
+
<button class="btn btn-secondary">
|
|
279
|
+
<i class="fas fa-heart"></i> Favorite
|
|
280
|
+
</button>
|
|
281
|
+
<code>Heart Icon</code>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="icon-example">
|
|
284
|
+
<button class="btn btn-ghost">
|
|
285
|
+
<i class="fas fa-share-alt"></i> Share
|
|
286
|
+
</button>
|
|
287
|
+
<code>Share Icon</code>
|
|
288
|
+
</div>
|
|
289
|
+
<div class="icon-example">
|
|
290
|
+
<button class="btn btn-sm">
|
|
291
|
+
<i class="fas fa-plus"></i>
|
|
292
|
+
</button>
|
|
293
|
+
<code>Icon Only (Small)</code>
|
|
294
|
+
</div>
|
|
295
|
+
<div class="icon-example">
|
|
296
|
+
<button class="btn">
|
|
297
|
+
<i class="fas fa-trash"></i> Delete
|
|
298
|
+
</button>
|
|
299
|
+
<code>Delete Action</code>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="icon-example">
|
|
302
|
+
<button class="btn btn-lg">
|
|
303
|
+
<i class="fas fa-check"></i> Confirm
|
|
304
|
+
</button>
|
|
305
|
+
<code>Confirm (Large)</code>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<div class="code-block">
|
|
310
|
+
<!-- Icon with text -->
|
|
311
|
+
<button class="btn">
|
|
312
|
+
<i class="fas fa-download"></i> Download
|
|
313
|
+
</button>
|
|
314
|
+
|
|
315
|
+
<!-- Icon only (needs aria-label) -->
|
|
316
|
+
<button class="btn btn-sm" aria-label="Add item">
|
|
317
|
+
<i class="fas fa-plus"></i>
|
|
318
|
+
</button>
|
|
319
|
+
|
|
320
|
+
<!-- Icon after text -->
|
|
321
|
+
<button class="btn">
|
|
322
|
+
Delete <i class="fas fa-trash"></i>
|
|
323
|
+
</button>
|
|
324
|
+
</div>
|
|
325
|
+
</section>
|
|
326
|
+
|
|
327
|
+
<!-- Button Groups -->
|
|
328
|
+
<section id="groups" class="example-group">
|
|
329
|
+
<h3>Button Groups</h3>
|
|
330
|
+
<p>Multiple buttons arranged together for related actions.</p>
|
|
331
|
+
|
|
332
|
+
<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg);">
|
|
333
|
+
<div style="display: flex; gap: var(--spacing-sm);">
|
|
334
|
+
<button class="btn btn-sm">Left</button>
|
|
335
|
+
<button class="btn btn-sm">Middle</button>
|
|
336
|
+
<button class="btn btn-sm">Right</button>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div style="display: flex; gap: var(--spacing-md); flex-wrap: wrap;">
|
|
340
|
+
<button class="btn">Save</button>
|
|
341
|
+
<button class="btn btn-secondary">Cancel</button>
|
|
342
|
+
<button class="btn btn-ghost">Delete</button>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<div class="code-block">
|
|
347
|
+
<!-- Compact button group -->
|
|
348
|
+
<div style="display: flex; gap: var(--spacing-sm);">
|
|
349
|
+
<button class="btn btn-sm">Left</button>
|
|
350
|
+
<button class="btn btn-sm">Middle</button>
|
|
351
|
+
<button class="btn btn-sm">Right</button>
|
|
352
|
+
</div>
|
|
353
|
+
|
|
354
|
+
<!-- Form button group -->
|
|
355
|
+
<div style="display: flex; gap: var(--spacing-md);">
|
|
356
|
+
<button class="btn">Save</button>
|
|
357
|
+
<button class="btn btn-secondary">Cancel</button>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
</section>
|
|
361
|
+
|
|
362
|
+
<!-- Accessibility -->
|
|
363
|
+
<section id="accessibility" class="example-group">
|
|
364
|
+
<h3><i class="fas fa-universal-access"></i> Accessibility</h3>
|
|
365
|
+
<p>Best practices for accessible button implementations.</p>
|
|
366
|
+
|
|
367
|
+
<div class="code-block">
|
|
368
|
+
<!-- Good: Semantic button element -->
|
|
369
|
+
<button class="btn">Click me</button>
|
|
370
|
+
|
|
371
|
+
<!-- Good: Clear, descriptive text -->
|
|
372
|
+
<button class="btn">Delete Account</button>
|
|
373
|
+
|
|
374
|
+
<!-- Good: Icon button with label -->
|
|
375
|
+
<button class="btn" aria-label="Close menu">
|
|
376
|
+
<i class="fas fa-times"></i>
|
|
377
|
+
</button>
|
|
378
|
+
|
|
379
|
+
<!-- Good: Disabled button clearly marked -->
|
|
380
|
+
<button class="btn" disabled aria-disabled="true">
|
|
381
|
+
Disabled Action
|
|
382
|
+
</button>
|
|
383
|
+
|
|
384
|
+
<!-- Bad: Div acting as button -->
|
|
385
|
+
<div onclick="..." role="button">Click me</div>
|
|
386
|
+
|
|
387
|
+
<!-- Bad: No visible text -->
|
|
388
|
+
<button class="btn">
|
|
389
|
+
<i class="fas fa-arrow-right"></i>
|
|
390
|
+
</button>
|
|
391
|
+
</div>
|
|
392
|
+
</section>
|
|
393
|
+
|
|
394
|
+
<!-- CSS Variables -->
|
|
395
|
+
<section id="variables" class="example-group">
|
|
396
|
+
<h3><i class="fas fa-code"></i> Customization via Variables</h3>
|
|
397
|
+
<p>Override button styles using CSS variables.</p>
|
|
398
|
+
|
|
399
|
+
<div class="code-block">
|
|
400
|
+
/* Default button colors */
|
|
401
|
+
:root {
|
|
402
|
+
--accent: #d94f90;
|
|
403
|
+
--accent-light: #e86ca8;
|
|
404
|
+
--accent-dark: #b61b70;
|
|
405
|
+
--text: #f5f1f8;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
/* Override for your brand */
|
|
409
|
+
:root {
|
|
410
|
+
--accent: #3b82f6; /* Blue instead of pink */
|
|
411
|
+
--accent-light: #60a5fa;
|
|
412
|
+
--accent-dark: #1e40af;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
/* Override button padding */
|
|
416
|
+
:root {
|
|
417
|
+
--spacing-md: 1.25rem;
|
|
418
|
+
--spacing-lg: 2rem;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
/* Change border radius */
|
|
422
|
+
:root {
|
|
423
|
+
--radius-lg: 12px;
|
|
424
|
+
}
|
|
425
|
+
</div>
|
|
426
|
+
</section>
|
|
427
|
+
|
|
428
|
+
<footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
|
|
429
|
+
<p>Button Component Documentation • Corrupted Theme v0.1.0</p>
|
|
430
|
+
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
431
|
+
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
432
|
+
</p>
|
|
433
|
+
</footer>
|
|
434
|
+
</div>
|
|
435
|
+
</body>
|
|
436
|
+
</html>
|