studio-engine 0.17.0 → 0.18.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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +67 -0
- data/app/assets/tailwind/studio_engine/engine-motion.css +620 -5
- data/app/controllers/style_controller.rb +25 -0
- data/app/views/studio/modals/_crop_photo.html.erb +5 -1
- data/app/views/studio/modals/_host.html.erb +5 -0
- data/app/views/studio/modals/_image_upload.html.erb +16 -5
- data/app/views/studio/modals/_saving.html.erb +6 -2
- data/app/views/studio/modals/auth/_resend_footer.html.erb +25 -0
- data/app/views/studio/modals/blocks/_card_header.html.erb +83 -0
- data/app/views/studio/modals/blocks/_cta_redirect.html.erb +73 -0
- data/app/views/studio/modals/blocks/_onchain_success.html.erb +52 -0
- data/app/views/studio/modals/blocks/_progress_pill.html.erb +23 -0
- data/app/views/studio/modals/blocks/_shell.html.erb +35 -0
- data/app/views/studio/modals/blocks/_solana_tx_link.html.erb +42 -0
- data/app/views/studio/modals/shared/_age_attestation.html.erb +34 -0
- data/app/views/studio/modals/shared/_email_field.html.erb +70 -0
- data/app/views/studio/modals/templates/_action.html.erb +25 -0
- data/app/views/studio/modals/templates/_form.html.erb +25 -0
- data/app/views/studio/modals/templates/_status.html.erb +45 -0
- data/app/views/studio/modals/templates/_success.html.erb +23 -0
- data/app/views/studio/modals/templates/_wizard.html.erb +75 -0
- data/app/views/style/_modal_specimen.html.erb +120 -0
- data/app/views/style/_modals.html.erb +690 -0
- data/app/views/style/_specimen.html.erb +64 -0
- data/app/views/style/_tasks.html.erb +112 -0
- data/app/views/style/_theme.html.erb +222 -0
- data/app/views/style/_tricks.html.erb +323 -0
- data/app/views/style/index.html.erb +60 -0
- data/app/views/style/modals/_auth.html.erb +252 -0
- data/app/views/style/modals/_onchain_tx.html.erb +62 -0
- data/app/views/style/modals/_wallet_connect.html.erb +138 -0
- data/app/views/style/modals/_wallet_deposit.html.erb +56 -0
- data/lib/studio/version.rb +1 -1
- data/lib/studio.rb +27 -1
- metadata +32 -6
- data/app/controllers/design_system_controller.rb +0 -12
- data/app/views/design_system/_specimen.html.erb +0 -27
- data/app/views/design_system/index.html.erb +0 -232
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
<%# admin/design_system - the living style guide (slice A: shell + Style section).
|
|
2
|
-
A bare content wrapper (no `layout` call): it renders inside each host's
|
|
3
|
-
application.html.erb, inheriting that app's navbar and theme, so every
|
|
4
|
-
specimen restyles per app and in dark or light automatically.
|
|
5
|
-
|
|
6
|
-
Specimens use ONLY the engine's own classes (engine.css component layer plus
|
|
7
|
-
engine-motion.css motion layer), so a consumer that bundles engine.css and
|
|
8
|
-
imports engine-motion.css styles them for real. The primitive CSS is NOT
|
|
9
|
-
inlined here - the consumer's Tailwind build provides it. Page chrome uses
|
|
10
|
-
the engine's own .card / .label-upper / theme tokens. %>
|
|
11
|
-
<%
|
|
12
|
-
button_variants = {
|
|
13
|
-
"primary" => "Primary",
|
|
14
|
-
"secondary" => "Secondary",
|
|
15
|
-
"success" => "Success",
|
|
16
|
-
"danger" => "Danger",
|
|
17
|
-
"warning" => "Warning",
|
|
18
|
-
"neutral" => "Neutral",
|
|
19
|
-
"outline" => "Outline",
|
|
20
|
-
"google" => "Continue with Google"
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
# The 7 theme role tokens, read LIVE off the host theme so each swatch restyles
|
|
24
|
-
# per app and in dark/light. Names verified against Studio::ThemeResolver
|
|
25
|
-
# (the heading role reads --color-text; there is no --color-heading var).
|
|
26
|
-
theme_tokens = [
|
|
27
|
-
["--color-cta", "CTA / primary action"],
|
|
28
|
-
["--color-surface", "Surface"],
|
|
29
|
-
["--color-success", "Success"],
|
|
30
|
-
["--color-danger", "Danger"],
|
|
31
|
-
["--color-warning", "Warning"],
|
|
32
|
-
["--color-text", "Heading / text"],
|
|
33
|
-
["--color-border-strong", "Border (strong)"]
|
|
34
|
-
]
|
|
35
|
-
%>
|
|
36
|
-
<div class="max-w-6xl mx-auto px-4 py-8 space-y-14">
|
|
37
|
-
<header class="space-y-2">
|
|
38
|
-
<p class="label-upper">studio-engine · v<%= Studio::VERSION %></p>
|
|
39
|
-
<h1 class="text-3xl font-bold text-heading">Design System</h1>
|
|
40
|
-
<p class="text-body max-w-2xl">
|
|
41
|
-
A living gallery of the shared UI primitives, rendered live in this app's
|
|
42
|
-
theme. Everything below is styled by the engine's own
|
|
43
|
-
<code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">engine.css</code>
|
|
44
|
-
and
|
|
45
|
-
<code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">engine-motion.css</code>
|
|
46
|
-
layers - toggle this app between light and dark and every specimen follows.
|
|
47
|
-
</p>
|
|
48
|
-
</header>
|
|
49
|
-
|
|
50
|
-
<!-- Buttons -->
|
|
51
|
-
<section class="space-y-5">
|
|
52
|
-
<div class="space-y-1">
|
|
53
|
-
<h2 class="text-xl font-bold text-heading">Buttons</h2>
|
|
54
|
-
<p class="text-muted text-sm">
|
|
55
|
-
<code class="font-mono text-2xs">.btn</code> base plus one role variant, and the
|
|
56
|
-
<code class="font-mono text-2xs">.btn-sm</code> / <code class="font-mono text-2xs">.btn-lg</code> sizes.
|
|
57
|
-
</p>
|
|
58
|
-
</div>
|
|
59
|
-
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
60
|
-
<% button_variants.each do |name, label| %>
|
|
61
|
-
<%= render layout: "design_system/specimen",
|
|
62
|
-
locals: { klass: ".btn .btn-#{name}",
|
|
63
|
-
usage: %(<button class="btn btn-#{name}">#{label}</button>) } do %>
|
|
64
|
-
<button type="button" class="btn btn-<%= name %>"><%= label %></button>
|
|
65
|
-
<% end %>
|
|
66
|
-
<% end %>
|
|
67
|
-
|
|
68
|
-
<%= render layout: "design_system/specimen",
|
|
69
|
-
locals: { klass: ".btn-sm / .btn (default) / .btn-lg",
|
|
70
|
-
usage: %(<button class="btn btn-primary btn-sm">Small</button>\n<button class="btn btn-primary">Default</button>\n<button class="btn btn-primary btn-lg">Large</button>) } do %>
|
|
71
|
-
<div class="flex flex-wrap items-center justify-center gap-3">
|
|
72
|
-
<button type="button" class="btn btn-primary btn-sm">Small</button>
|
|
73
|
-
<button type="button" class="btn btn-primary">Default</button>
|
|
74
|
-
<button type="button" class="btn btn-primary btn-lg">Large</button>
|
|
75
|
-
</div>
|
|
76
|
-
<% end %>
|
|
77
|
-
</div>
|
|
78
|
-
</section>
|
|
79
|
-
|
|
80
|
-
<!-- Surfaces, text and form -->
|
|
81
|
-
<section class="space-y-5">
|
|
82
|
-
<div class="space-y-1">
|
|
83
|
-
<h2 class="text-xl font-bold text-heading">Surfaces, text & form</h2>
|
|
84
|
-
<p class="text-muted text-sm">Cards, badges, inputs, the empty state, and the uppercase meta label.</p>
|
|
85
|
-
</div>
|
|
86
|
-
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
87
|
-
<%= render layout: "design_system/specimen",
|
|
88
|
-
locals: { klass: ".card", usage: %(<div class="card p-5">...</div>) } do %>
|
|
89
|
-
<div class="card p-5 text-sm text-body w-full max-w-xs text-center">Surface card</div>
|
|
90
|
-
<% end %>
|
|
91
|
-
|
|
92
|
-
<%= render layout: "design_system/specimen",
|
|
93
|
-
locals: { klass: ".card-hover", usage: %(<div class="card-hover p-5">...</div>) } do %>
|
|
94
|
-
<div class="card-hover p-5 text-sm text-body w-full max-w-xs text-center">Hover me</div>
|
|
95
|
-
<% end %>
|
|
96
|
-
|
|
97
|
-
<%= render layout: "design_system/specimen",
|
|
98
|
-
locals: { klass: ".badge", usage: %(<span class="badge">Neutral</span>) } do %>
|
|
99
|
-
<div class="flex flex-wrap items-center justify-center gap-2">
|
|
100
|
-
<span class="badge text-body">Neutral</span>
|
|
101
|
-
<span class="badge" style="color: var(--color-success); border-color: var(--color-success)">Success</span>
|
|
102
|
-
<span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">Warning</span>
|
|
103
|
-
<span class="badge" style="color: var(--color-danger); border-color: var(--color-danger)">Danger</span>
|
|
104
|
-
</div>
|
|
105
|
-
<% end %>
|
|
106
|
-
|
|
107
|
-
<%= render layout: "design_system/specimen",
|
|
108
|
-
locals: { klass: ".input-field", usage: %(<input class="input-field" placeholder="you@example.com">) } do %>
|
|
109
|
-
<input type="text" class="input-field" placeholder="you@example.com" aria-label="Sample input">
|
|
110
|
-
<% end %>
|
|
111
|
-
|
|
112
|
-
<%= render layout: "design_system/specimen",
|
|
113
|
-
locals: { klass: ".label-upper", usage: %(<p class="label-upper">Section label</p>) } do %>
|
|
114
|
-
<p class="label-upper">Section label</p>
|
|
115
|
-
<% end %>
|
|
116
|
-
|
|
117
|
-
<%= render layout: "design_system/specimen",
|
|
118
|
-
locals: { klass: ".empty-state", usage: %(<div class="empty-state">Nothing here yet</div>) } do %>
|
|
119
|
-
<div class="empty-state w-full max-w-xs text-sm text-muted">Nothing here yet</div>
|
|
120
|
-
<% end %>
|
|
121
|
-
</div>
|
|
122
|
-
</section>
|
|
123
|
-
|
|
124
|
-
<!-- Motion primitives -->
|
|
125
|
-
<section class="space-y-5">
|
|
126
|
-
<div class="space-y-1">
|
|
127
|
-
<h2 class="text-xl font-bold text-heading">Motion primitives</h2>
|
|
128
|
-
<p class="text-muted text-sm">
|
|
129
|
-
The seven <code class="font-mono text-2xs">engine-motion.css</code> primitives. Each knob is a themeable
|
|
130
|
-
CSS variable - tune it inline with <code class="font-mono text-2xs">style="--knob: value"</code>.
|
|
131
|
-
</p>
|
|
132
|
-
</div>
|
|
133
|
-
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
134
|
-
<%= render layout: "design_system/specimen",
|
|
135
|
-
locals: { klass: ".studio-border-glow (rounded-xl wrapper)",
|
|
136
|
-
usage: %(<div class="studio-border-glow rounded-xl">...</div>) } do %>
|
|
137
|
-
<div class="studio-border-glow rounded-xl p-5 bg-surface text-center text-sm text-heading">Border glow</div>
|
|
138
|
-
<% end %>
|
|
139
|
-
|
|
140
|
-
<%= render layout: "design_system/specimen",
|
|
141
|
-
locals: { klass: ".spinner (knob: --spinner-size)",
|
|
142
|
-
usage: %(<span class="spinner"></span>\n<span class="spinner" style="--spinner-size: 2rem"></span>) } do %>
|
|
143
|
-
<span class="spinner"></span>
|
|
144
|
-
<span class="spinner" style="--spinner-size: 1.6rem"></span>
|
|
145
|
-
<span class="spinner" style="--spinner-size: 2.4rem; --spinner-thickness: 3px"></span>
|
|
146
|
-
<button type="button" class="btn btn-primary">
|
|
147
|
-
<span class="spinner" style="--spinner-color: currentColor; --spinner-track: rgba(255,255,255,.35)"></span>
|
|
148
|
-
<span class="ml-2">Saving</span>
|
|
149
|
-
</button>
|
|
150
|
-
<% end %>
|
|
151
|
-
|
|
152
|
-
<%= render layout: "design_system/specimen",
|
|
153
|
-
locals: { klass: ".loading-dots (3 span children)",
|
|
154
|
-
usage: %(<span class="loading-dots"><span></span><span></span><span></span></span>) } do %>
|
|
155
|
-
<span class="loading-dots"><span></span><span></span><span></span></span>
|
|
156
|
-
<span class="loading-dots" style="--loading-dots-size: 12px; --loading-dots-color: var(--color-cta)"><span></span><span></span><span></span></span>
|
|
157
|
-
<% end %>
|
|
158
|
-
|
|
159
|
-
<%= render layout: "design_system/specimen",
|
|
160
|
-
locals: { klass: ".sheen .sheen--loop",
|
|
161
|
-
usage: %(<span class="sheen sheen--loop">...</span>) } do %>
|
|
162
|
-
<span class="sheen sheen--loop badge text-body">Level 5 unlocked</span>
|
|
163
|
-
<span class="sheen sheen--loop card px-4 py-2 text-sm text-body" style="--sheen-duration: 3s">Sheen sweep</span>
|
|
164
|
-
<% end %>
|
|
165
|
-
|
|
166
|
-
<%= render layout: "design_system/specimen",
|
|
167
|
-
locals: { klass: ".ping .ping--dot (knob: --ping-color)",
|
|
168
|
-
usage: %(<span class="ping ping--dot"></span>) } do %>
|
|
169
|
-
<span class="ping ping--dot"></span>
|
|
170
|
-
<span class="ping ping--dot" style="--ping-color: var(--color-success)"></span>
|
|
171
|
-
<span class="ping ping--dot" style="--ping-color: var(--color-danger); --ping-size: 0.9rem"></span>
|
|
172
|
-
<% end %>
|
|
173
|
-
|
|
174
|
-
<%= render layout: "design_system/specimen",
|
|
175
|
-
locals: { klass: ".fade-edge-{t,b,l,r,x,y} (knob: --fade-edge-size)",
|
|
176
|
-
usage: %(<div class="fade-edge-y overflow-y-auto">...long content...</div>) } do %>
|
|
177
|
-
<div class="fade-edge-y overflow-y-auto h-32 w-full max-w-xs bg-surface rounded-lg p-3 text-sm text-body space-y-2">
|
|
178
|
-
<p>Scroll me - the top and bottom edges dissolve.</p>
|
|
179
|
-
<p>The mask softens content near either end of the container.</p>
|
|
180
|
-
<p>No JavaScript, no gradient overlay - just a mask-image.</p>
|
|
181
|
-
<p>It masks the element itself, so it works over any background.</p>
|
|
182
|
-
<p>Keep scrolling to watch the fade track the edge.</p>
|
|
183
|
-
</div>
|
|
184
|
-
<% end %>
|
|
185
|
-
|
|
186
|
-
<%= render layout: "design_system/specimen",
|
|
187
|
-
locals: { klass: ".progress-meter (knob: --progress)",
|
|
188
|
-
usage: %(<div class="progress-meter" style="--progress: 62%">\n <div class="progress-meter-track"><span class="progress-meter-label">62%</span></div>\n <div class="progress-meter-fill"><span class="progress-meter-label">62%</span></div>\n</div>) } do %>
|
|
189
|
-
<div class="w-full max-w-xs space-y-3">
|
|
190
|
-
<div class="progress-meter" style="--progress: 25%">
|
|
191
|
-
<div class="progress-meter-track"><span class="progress-meter-label">25%</span></div>
|
|
192
|
-
<div class="progress-meter-fill"><span class="progress-meter-label">25%</span></div>
|
|
193
|
-
</div>
|
|
194
|
-
<div class="progress-meter" style="--progress: 62%">
|
|
195
|
-
<div class="progress-meter-track"><span class="progress-meter-label">62%</span></div>
|
|
196
|
-
<div class="progress-meter-fill"><span class="progress-meter-label">62%</span></div>
|
|
197
|
-
</div>
|
|
198
|
-
<div class="progress-meter" style="--progress: 88%; --progress-fill: var(--color-success)">
|
|
199
|
-
<div class="progress-meter-track"><span class="progress-meter-label">88% complete</span></div>
|
|
200
|
-
<div class="progress-meter-fill"><span class="progress-meter-label">88% complete</span></div>
|
|
201
|
-
</div>
|
|
202
|
-
<div class="progress-meter progress-meter--indeterminate">
|
|
203
|
-
<div class="progress-meter-track"></div>
|
|
204
|
-
<div class="progress-meter-fill"></div>
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
<% end %>
|
|
208
|
-
</div>
|
|
209
|
-
</section>
|
|
210
|
-
|
|
211
|
-
<!-- Theme tokens -->
|
|
212
|
-
<section class="space-y-5">
|
|
213
|
-
<div class="space-y-1">
|
|
214
|
-
<h2 class="text-xl font-bold text-heading">Theme tokens</h2>
|
|
215
|
-
<p class="text-muted text-sm">
|
|
216
|
-
The 7 role colors, read live off this app's theme via <code class="font-mono text-2xs">var(--color-*)</code>.
|
|
217
|
-
Change the app or its light/dark mode and every swatch (and every specimen above) follows.
|
|
218
|
-
</p>
|
|
219
|
-
</div>
|
|
220
|
-
<div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
|
|
221
|
-
<% theme_tokens.each do |var, label| %>
|
|
222
|
-
<div class="card overflow-hidden">
|
|
223
|
-
<div class="h-16 border-b border-subtle" style="background: var(<%= var %>)"></div>
|
|
224
|
-
<div class="p-3 space-y-0.5">
|
|
225
|
-
<p class="text-sm text-heading font-medium"><%= label %></p>
|
|
226
|
-
<code class="font-mono text-2xs text-muted break-all"><%= var %></code>
|
|
227
|
-
</div>
|
|
228
|
-
</div>
|
|
229
|
-
<% end %>
|
|
230
|
-
</div>
|
|
231
|
-
</section>
|
|
232
|
-
</div>
|