Skip to content

Commit fac5a69

Browse files
saadeghisaadeghi
committed
docs
1 parent 749525e commit fac5a69

File tree

1 file changed

+142
-32
lines changed

1 file changed

+142
-32
lines changed

‎src/docs/src/routes/(docs)/theme-generator/+page.svelte

Lines changed: 142 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@
3333
3434
const generateForegroundColorFrom = function (input, percentage = 0.8) {
3535
const result = interpolate([input, isDark(input) ? "white" : "black"], "oklch")(percentage)
36-
return formatHex('oklch(' + colorObjToString(result) + ')')
36+
return formatHex("oklch(" + colorObjToString(result) + ")")
3737
}
3838
3939
const generateDarkenColorFrom = function (input, percentage = 0.07) {
4040
const result = interpolate([input, "black"], "oklch")(percentage)
41-
return formatHex('oklch(' + colorObjToString(result) + ')')
41+
return formatHex("oklch(" + colorObjToString(result) + ")")
4242
}
4343
4444
function changeColorValuesToObject(input) {
@@ -194,15 +194,12 @@
194194
]
195195
196196
function darken(name, variable, source, percentage = 0.2) {
197-
return generateDarkenColorFrom(
198-
colors.find((item) => item.name === source).value,
199-
percentage,
200-
)
197+
return generateDarkenColorFrom(colors.find((item) => item.name === source).value, percentage)
201198
}
202199
function contrastMaker(name, variable, source, percentage = 0.8) {
203200
return generateForegroundColorFrom(
204201
colors.find((item) => item.name === source).value,
205-
percentage,
202+
percentage
206203
)
207204
}
208205
@@ -227,13 +224,12 @@
227224
if (onlyRequiredColorNames) {
228225
generateOptionalColors()
229226
}
230-
colors
231-
.forEach((color) => {
232-
wrapper.style.setProperty(
233-
color.variable,
234-
colorObjToString(toGamut("oklch")(color.value), "oklch")
235-
)
236-
})
227+
colors.forEach((color) => {
228+
wrapper.style.setProperty(
229+
color.variable,
230+
colorObjToString(toGamut("oklch")(color.value), "oklch")
231+
)
232+
})
237233
if (browser) {
238234
localStorage.setItem("theme-generator-colors", JSON.stringify(colors))
239235
}
@@ -333,25 +329,139 @@
333329
</div>
334330
<div class="flex flex-col gap-4 xl:flex-row">
335331
<div class="shrink-0 xl:min-w-[29rem]">
336-
<div class="sticky top-[5.5rem]">
332+
<div class="sticky top-8">
337333
<h2 class="px-2 pb-4 text-xl font-bold">tailwind.config.js</h2>
338334
{#if browser}
339-
<div class="mockup-code not-prose relative">
335+
<div class="mockup-code not-prose relative overflow-visible">
340336
<div class="absolute right-2 top-2">
341-
<button class="btn btn-xs" on:click={() => onlyRequiredColorNames = !onlyRequiredColorNames}>
342-
<Translate text="Show all" />
343-
</button>
344-
{#if !onlyRequiredColorNames}
345-
<button class="btn btn-xs" on:click={() => {generateOptionalColors(); generateColors()}}>
346-
<Translate text="Generate Optional" />
347-
</button>
348-
{/if}
349-
<button class="btn btn-xs" on:click={() => randomize()}>
350-
<Translate text="Randomize" />
351-
</button>
352-
<button class="btn btn-xs" on:click={() => resetColors()}>
353-
<Translate text="Reset" />
354-
</button>
337+
<div
338+
class="tooltip tooltip-bottom tooltip-info"
339+
data-tip="Fix contrast of optional colors">
340+
{#if !onlyRequiredColorNames}
341+
<button
342+
class="btn btn-xs btn-neutral btn-square"
343+
on:click={() => {
344+
generateOptionalColors()
345+
generateColors()
346+
}}>
347+
<svg
348+
width="16"
349+
height="16"
350+
viewBox="0 0 48 48"
351+
fill="none"
352+
xmlns="http://www.w3.org/2000/svg">
353+
<path
354+
fill-rule="evenodd"
355+
clip-rule="evenodd"
356+
d="M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44V4Z"
357+
stroke="currentColor"
358+
stroke-width="4"
359+
stroke-linecap="round"
360+
stroke-linejoin="round" />
361+
<path
362+
d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44V4Z"
363+
fill="none"
364+
stroke="currentColor"
365+
stroke-width="4"
366+
stroke-linejoin="round" />
367+
<path
368+
d="M24 36H9"
369+
stroke="currentColor"
370+
stroke-width="4"
371+
stroke-linecap="round"
372+
stroke-linejoin="round" />
373+
<path
374+
d="M24 28H5"
375+
stroke="currentColor"
376+
stroke-width="4"
377+
stroke-linecap="round"
378+
stroke-linejoin="round" />
379+
<path
380+
d="M24 20H5"
381+
stroke="currentColor"
382+
stroke-width="4"
383+
stroke-linecap="round"
384+
stroke-linejoin="round" />
385+
<path
386+
d="M24 12H9"
387+
stroke="currentColor"
388+
stroke-width="4"
389+
stroke-linecap="round"
390+
stroke-linejoin="round" />
391+
</svg>
392+
</button>
393+
{/if}
394+
</div>
395+
<div
396+
class="tooltip tooltip-bottom tooltip-info"
397+
data-tip={onlyRequiredColorNames ? "Show optional colors" : "Hide optional colors"}>
398+
<button
399+
class="btn btn-xs btn-neutral btn-square"
400+
on:click={() => (onlyRequiredColorNames = !onlyRequiredColorNames)}>
401+
{#if !onlyRequiredColorNames}
402+
<svg
403+
xmlns="http://www.w3.org/2000/svg"
404+
fill="currentColor"
405+
width="16px"
406+
height="16px"
407+
viewBox="0 0 24 24">
408+
<path
409+
d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z" />
410+
</svg>
411+
{/if}
412+
{#if onlyRequiredColorNames}
413+
<svg
414+
xmlns="http://www.w3.org/2000/svg"
415+
fill="currentColor"
416+
width="16px"
417+
height="16px"
418+
viewBox="0 0 24 24">
419+
<path
420+
d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" />
421+
</svg>
422+
{/if}
423+
</button>
424+
</div>
425+
<div class="tooltip tooltip-bottom tooltip-info" data-tip="Randomize">
426+
<button class="btn btn-xs btn-neutral btn-square" on:click={() => randomize()}>
427+
<svg
428+
width="16"
429+
height="16"
430+
viewBox="0 0 24 24"
431+
fill="none"
432+
xmlns="http://www.w3.org/2000/svg">
433+
<path
434+
d="M16.25 7.75H16.255M16.25 16.25H16.255M7.75 7.75H7.755M12 11.75H12.005M7.75 16.25H7.755M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21ZM16.5 7.75C16.5 7.88807 16.3881 8 16.25 8C16.1119 8 16 7.88807 16 7.75C16 7.61193 16.1119 7.5 16.25 7.5C16.3881 7.5 16.5 7.61193 16.5 7.75ZM16.5 16.25C16.5 16.3881 16.3881 16.5 16.25 16.5C16.1119 16.5 16 16.3881 16 16.25C16 16.1119 16.1119 16 16.25 16C16.3881 16 16.5 16.1119 16.5 16.25ZM8 7.75C8 7.88807 7.88807 8 7.75 8C7.61193 8 7.5 7.88807 7.5 7.75C7.5 7.61193 7.61193 7.5 7.75 7.5C7.88807 7.5 8 7.61193 8 7.75ZM12.25 11.75C12.25 11.8881 12.1381 12 12 12C11.8619 12 11.75 11.8881 11.75 11.75C11.75 11.6119 11.8619 11.5 12 11.5C12.1381 11.5 12.25 11.6119 12.25 11.75ZM8 16.25C8 16.3881 7.88807 16.5 7.75 16.5C7.61193 16.5 7.5 16.3881 7.5 16.25C7.5 16.1119 7.61193 16 7.75 16C7.88807 16 8 16.1119 8 16.25Z"
435+
stroke="currentColor"
436+
stroke-width="2"
437+
stroke-linecap="round"
438+
stroke-linejoin="round" />
439+
</svg>
440+
</button>
441+
</div>
442+
<div class="tooltip tooltip-bottom tooltip-info" data-tip="Reset">
443+
<button class="btn btn-xs btn-neutral btn-square" on:click={() => resetColors()}>
444+
<svg
445+
width="16px"
446+
height="16px"
447+
viewBox="0 0 48 48"
448+
fill="none"
449+
xmlns="http://www.w3.org/2000/svg">
450+
<path
451+
d="M36.7279 36.7279C33.4706 39.9853 28.9706 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C28.9706 6 33.4706 8.01472 36.7279 11.2721C38.3859 12.9301 42 17 42 17"
452+
stroke="currentColor"
453+
stroke-width="4"
454+
stroke-linecap="round"
455+
stroke-linejoin="round" />
456+
<path
457+
d="M42 8V17H33"
458+
stroke="currentColor"
459+
stroke-width="4"
460+
stroke-linecap="round"
461+
stroke-linejoin="round" />
462+
</svg>
463+
</button>
464+
</div>
355465
</div>
356466
<pre><code class="text-neutral-content/30">{`module.exports = {`}</code>
357467
<code>{` daisyui: {
@@ -361,8 +471,8 @@
361471
{#each colors.filter((item) => !onlyRequiredColorNames || requiredColorNames.includes(item.name)) as color}
362472
<code> <span
363473
data-tip="Pick →"
364-
class:tooltip={colors.filter((item) =>
365-
!onlyRequiredColorNames || requiredColorNames.includes(item.name)
474+
class:tooltip={colors.filter(
475+
(item) => !onlyRequiredColorNames || requiredColorNames.includes(item.name)
366476
)[0] === color}
367477
class="tooltip-open tooltip-accent tooltip-left align-middle"><span
368478
class="inline-block w-1" /><ColorPicker

0 commit comments

Comments
 (0)