Skip to content

Commit 286d1b3

Browse files
alexcarpenterpanteliselef
alexcarpenter
and
panteliselef
authored
feat(repo): Add appearance variables to sandbox (#5207)
Co-authored-by: panteliselef <panteliselef@outlook.com>
1 parent 968c747 commit 286d1b3

File tree

3 files changed

+215
-4
lines changed

3 files changed

+215
-4
lines changed

‎.changeset/witty-yaks-poke.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/clerk-js/sandbox/app.ts

+77
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,84 @@ function addCurrentRouteIndicator(currentRoute: string) {
127127
link.setAttribute('aria-current', 'page');
128128
}
129129

130+
function appearanceVariableOptions() {
131+
assertClerkIsLoaded(Clerk);
132+
133+
const resetVariablesBtn = document.getElementById('resetVariablesBtn');
134+
135+
const variableInputIds = [
136+
'colorPrimary',
137+
'colorNeutral',
138+
'colorBackground',
139+
'colorTextOnPrimaryBackground',
140+
'colorDanger',
141+
'colorSuccess',
142+
'colorWarning',
143+
'colorText',
144+
'colorTextSecondary',
145+
'colorInputText',
146+
'colorInputBackground',
147+
'colorShimmer',
148+
'spacingUnit',
149+
'borderRadius',
150+
] as const;
151+
152+
const variableInputs = variableInputIds.reduce(
153+
(acc, id) => {
154+
const element = document.getElementById(id) as HTMLInputElement | null;
155+
if (!element) {
156+
throw new Error(`Could not find input element with id: ${id}`);
157+
}
158+
acc[id] = element;
159+
return acc;
160+
},
161+
{} as Record<(typeof variableInputIds)[number], HTMLInputElement>,
162+
);
163+
164+
Object.entries(variableInputs).forEach(([key, input]) => {
165+
const savedColor = sessionStorage.getItem(key);
166+
if (savedColor) {
167+
input.value = savedColor;
168+
}
169+
});
170+
171+
const updateVariables = () => {
172+
Clerk.__unstable__updateProps({
173+
appearance: {
174+
variables: Object.fromEntries(
175+
Object.entries(variableInputs).map(([key, input]) => {
176+
sessionStorage.setItem(key, input.value);
177+
return [key, input.value];
178+
}),
179+
),
180+
},
181+
});
182+
};
183+
184+
Object.values(variableInputs).forEach(input => {
185+
input.addEventListener('change', updateVariables);
186+
});
187+
188+
resetVariablesBtn?.addEventListener('click', () => {
189+
Object.values(variableInputs).forEach(input => {
190+
input.value = input.defaultValue;
191+
});
192+
updateVariables();
193+
});
194+
195+
return { updateVariables };
196+
}
197+
130198
(async () => {
131199
assertClerkIsLoaded(Clerk);
200+
const { updateVariables } = appearanceVariableOptions();
201+
202+
const sidebars = document.querySelectorAll('[data-sidebar]');
203+
document.addEventListener('keydown', e => {
204+
if (e.key === '/') {
205+
sidebars.forEach(s => s.classList.toggle('hidden'));
206+
}
207+
});
132208

133209
const routes = {
134210
'/': () => {
@@ -191,6 +267,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
191267
experimental: { commerce: true },
192268
});
193269
renderCurrentRoute();
270+
updateVariables();
194271
} else {
195272
console.error(`Unknown route: "${route}".`);
196273
}

‎packages/clerk-js/sandbox/template.html

+136-4
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,11 @@
131131
};
132132
</script>
133133
</head>
134-
<body class="flex min-h-full flex-col overflow-x-hidden bg-gray-50">
135-
<div class="fixed inset-y-0 left-0 w-72 overflow-y-auto border-r border-gray-100 bg-white px-2 py-4 max-lg:hidden">
134+
<body class="flex min-h-full flex-col overflow-x-hidden bg-gray-50 lg:has-[*[data-sidebar]:not(.hidden)]:px-72">
135+
<div
136+
data-sidebar
137+
class="fixed inset-y-0 left-0 w-72 overflow-y-auto border-r border-gray-100 bg-white px-2 py-4 max-lg:hidden"
138+
>
136139
<header class="mb-2 flex items-center justify-center gap-x-2 border-b border-gray-100 pb-4">
137140
<svg
138141
viewBox="0 0 62 18"
@@ -277,9 +280,138 @@
277280
</nav>
278281
</div>
279282

280-
<main
281-
class="bg-gray-25 flex h-full min-w-px flex-1 items-center justify-center overflow-y-auto overflow-x-hidden py-12 lg:pl-72"
283+
<div
284+
data-sidebar
285+
class="fixed inset-y-0 right-0 w-72 overflow-y-auto border-l border-gray-100 bg-white px-2 py-4 max-lg:hidden"
282286
>
287+
<fieldset>
288+
<div class="mb-2 flex items-center justify-between">
289+
<legend class="block text-sm">Variables</legend>
290+
<button
291+
id="resetVariablesBtn"
292+
class="text-sm"
293+
>
294+
Reset
295+
</button>
296+
</div>
297+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
298+
<span class="font-mono text-xs">colorPrimary</span>
299+
<input
300+
type="color"
301+
id="colorPrimary"
302+
value="#2F3037"
303+
/>
304+
</label>
305+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
306+
<span class="font-mono text-xs">colorNeutral</span>
307+
<input
308+
type="color"
309+
id="colorNeutral"
310+
value="#000000"
311+
/>
312+
</label>
313+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
314+
<span class="font-mono text-xs">colorBackground</span>
315+
<input
316+
type="color"
317+
id="colorBackground"
318+
value="#ffffff"
319+
/>
320+
</label>
321+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
322+
<span class="font-mono text-xs">colorTextOnPrimaryBackground</span>
323+
<input
324+
type="color"
325+
id="colorTextOnPrimaryBackground"
326+
value="#ffffff"
327+
/>
328+
</label>
329+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
330+
<span class="font-mono text-xs">colorDanger</span>
331+
<input
332+
type="color"
333+
id="colorDanger"
334+
value="#EF4444"
335+
/>
336+
</label>
337+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
338+
<span class="font-mono text-xs">colorSuccess</span>
339+
<input
340+
type="color"
341+
id="colorSuccess"
342+
value="#22C543"
343+
/>
344+
</label>
345+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
346+
<span class="font-mono text-xs">colorWarning</span>
347+
<input
348+
type="color"
349+
id="colorWarning"
350+
value="#F36B16"
351+
/>
352+
</label>
353+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
354+
<span class="font-mono text-xs">colorText</span>
355+
<input
356+
type="color"
357+
id="colorText"
358+
value="#212126"
359+
/>
360+
</label>
361+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
362+
<span class="font-mono text-xs">colorTextSecondary</span>
363+
<input
364+
type="color"
365+
id="colorTextSecondary"
366+
value="#747686"
367+
/>
368+
</label>
369+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
370+
<span class="font-mono text-xs">colorInputText</span>
371+
<input
372+
type="color"
373+
id="colorInputText"
374+
value="#000000"
375+
/>
376+
</label>
377+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
378+
<span class="font-mono text-xs">colorInputBackground</span>
379+
<input
380+
type="color"
381+
id="colorInputBackground"
382+
value="#ffffff"
383+
/>
384+
</label>
385+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
386+
<span class="font-mono text-xs">colorShimmer</span>
387+
<input
388+
type="color"
389+
id="colorShimmer"
390+
value="#ffffff"
391+
/>
392+
</label>
393+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
394+
<span class="font-mono text-xs">spacingUnit</span>
395+
<input
396+
type="text"
397+
id="spacingUnit"
398+
value="1rem"
399+
class="text-sm outline-none [field-sizing:content]"
400+
/>
401+
</label>
402+
<label class="flex items-center justify-between border-t border-gray-100 py-2">
403+
<span class="font-mono text-xs">borderRadius</span>
404+
<input
405+
type="text"
406+
id="borderRadius"
407+
value="0.375rem"
408+
class="text-sm outline-none [field-sizing:content]"
409+
/>
410+
</label>
411+
</fieldset>
412+
</div>
413+
414+
<main class="flex h-full min-w-px flex-1 items-center justify-center overflow-y-auto overflow-x-hidden py-12">
283415
<div
284416
id="app"
285417
class="container w-full p-12"

0 commit comments

Comments
 (0)