https://ditheritv3.netlify.app/_nuxt/BjmyjOMx.js

1import{_ as $}from"./BfJwa2QR.js";import{e as E,c as i,a as e,F as g,r as m,b as s,d,K as b,y as u,t as l,h as C,w as U,I as f,o as n,z as v,J as P,g as q}from"./BYXglTKb.js";import{_ as L,a as T}from"./BZUdamNI.js";import{_ as j,a as H,b as R,c as G}from"./BUTk4YX7.js";import{_ as K}from"./DOpdko_8.js";import"./CFfQEWb3.js";import"./CLlTphrH.js";import"./B2qxv47W.js";import"./BM1JuYy8.js";import"./C8de3H37.js";import"./BzhtglvI.js";import"./i7fPIw8J.js";const O={class:"space-y-16"},J={class:"mt-3 flex flex-wrap gap-2"},M=["href"],W={id:"colors"},Y={class:"space-y-6"},Q={class:"mb-2 flex items-baseline gap-2"},X={class:"text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"},Z={class:"text-xs text-gray-500 dark:text-gray-400"},ee={class:"flex flex-wrap gap-2"},te={id:"typography"},se={class:"space-y-5"},ae={class:"flex items-baseline gap-3"},re={class:"w-32 shrink-0 text-xs text-gray-500 dark:text-gray-400"},le={class:"ml-32 text-xs text-gray-500 dark:text-gray-400"},oe={id:"buttons"},ie={class:"space-y-8"},de={class:"flex flex-wrap items-center gap-3"},ne={class:"flex flex-wrap items-center gap-3"},xe={class:"flex flex-wrap items-center gap-3"},ce={class:"flex flex-wrap items-center gap-3"},ge={class:"flex flex-wrap items-end gap-3"},me={id:"forms"},ue={class:"space-y-8"},pe={class:"flex flex-col gap-3 sm:flex-row sm:items-start"},ye={class:"flex flex-col gap-4"},be={class:"flex gap-4"},fe={class:"w-64"},ve={class:"mt-1 text-xs text-gray-500"},ke={id:"badges"},he={class:"space-y-4"},we={class:"flex flex-wrap items-center gap-2"},_e={id:"icons"},Ce={class:"flex flex-wrap gap-3"},Ue=["title"],Be={class:"w-16 text-center text-[9px] text-gray-500"},Se={id:"cards"},Ve={class:"space-y-8"},Fe={class:"flex flex-col gap-3 max-w-xs"},Ge=E({__name:"design-system",setup(Ne){const S=[{label:"Brand & Primary",note:'#C53030 — css var --color-ditherit, ui.colors.primary: "ditherit"',colors:[{name:"ditherit",hex:"#C53030",class:"bg-[#C53030]",textClass:"text-white"},{name:"red-100",hex:"#FEE2E2",class:"bg-red-100",textClass:"text-gray-800"}]},{label:"Neutral",note:"Light mode: gray-100/500/800. Dark mode adds gray-400 (muted text) and gray-900 (app bg)",colors:[{name:"gray-100",hex:"#F3F4F6",class:"bg-gray-100",textClass:"text-gray-800"},{name:"gray-400",hex:"#9CA3AF",class:"bg-gray-400",textClass:"text-gray-800"},{name:"gray-500",hex:"#6B7280",class:"bg-gray-500",textClass:"text-white"},{name:"gray-800",hex:"#1F2937",class:"bg-gray-800",textClass:"text-white"},{name:"gray-900",hex:"#111827",class:"bg-gray-900",textClass:"text-white"}]},{label:"Semantic",note:"Success, error, warning, info",colors:[{name:"green-400",hex:"#00DC82",class:"bg-green-400",textClass:"text-gray-800"},{name:"red-500",hex:"#EF4444",class:"bg-red-500",textClass:"text-white"},{name:"amber-500",hex:"#F59E0B",class:"bg-amber-500",textClass:"text-white"},{name:"blue-500",hex:"#3B82F6",class:"bg-blue-500",textClass:"text-white"}]}],V=[{role:"Page Title",classes:"text-3xl font-bold",sample:"Dither it!"},{role:"Section Header",classes:"text-xl font-semibold",sample:"Color Palette"},{role:"Body",classes:"text-base font-normal",sample:"Dithering is a technique to create the illusion of color depth in images with a limited palette."},{role:"Label",classes:"text-sm font-medium",sample:"Pixel Scale"},{role:"Section Label",classes:"text-xs font-medium uppercase tracking-wide",sample:"Advanced Options"},{role:"Caption",classes:"text-xs font-normal",sample:"14.2 KB → 3.1 KB"}],F=["i-lucide-upload","i-lucide-download","i-lucide-image","i-lucide-palette","i-lucide-trash-2","i-lucide-check","i-lucide-x","i-lucide-plus","i-lucide-chevron-down","i-lucide-chevron-right","i-lucide-arrow-left","i-lucide-arrow-up-right","i-lucide-sun","i-lucide-moon","i-lucide-menu","i-lucide-help-circle","i-lucide-copy","i-lucide-rss","i-lucide-mail","i-simple-icons-github"],N=["Floyd-Steinberg","Atkinson","Stucki"],k=f("Floyd-Steinberg"),h=f(!0),p=f(4),w=f(16);return(Ie,t)=>{const o=$,r=P,y=T,I=j,B=H,D=R,z=G,c=K,A=q,_=L;return n(),i("div",O,[e("section",null,[t[4]||(t[4]=e("p",{class:"text-base text-gray-500 dark:text-gray-400"}," Visual language reference for Dither it! — use this when building new features to ensure consistency. ",-1)),e("nav",J,[(n(),i(g,null,m(["colors","typography","buttons","forms","badges","icons","borders"],a=>e("a",{key:a,href:`#${a}`,class:"text-xs text-[#C53030] hover:underline capitalize"}

1,l(a),9,M)),64))])]),e("section",W,[t[5]||(t[5]=e("h2",{class:"mb-6 text-xl font-semibold text-gray-800 dark:text-gray-100"}," Colors ",-1)),e("div",Y,[(n(),i(g,null,m(S,a=>e("div",{key:a.label},[e("div",Q,[e("p",X,l(a.label),1),e("span",Z,l(a.note),1)]),e("div",ee,[(n(!0),i(g,null,m(a.colors,x=>(n(),i("div",{key:x.name,class:v([x.class,"flex h-14 w-24 flex-col items-center justify-center rounded-md border border-black/5 text-center"])},[e("span",{class:v([x.textClass,"text-[10px] font-medium leading-tight px-1"])},l(x.name),3),e("span",{class:v([x.textClass,"text-[10px] opacity-70"])},l(x.hex),3)],2))),128))])])),64))])]),s(o),e("section",te,[t[6]||(t[6]=e("h2",{class:"mb-6 text-xl font-semibold text-gray-800 dark:text-gray-100"}," Typography ",-1)),t[7]||(t[7]=e("p",{class:"mb-6 text-sm text-gray-500 dark:text-gray-400"},[d(" Font: "),e("strong",null,"Public Sans"),d(". ")],-1)),e("div",se,[(n(),i(g,null,m(V,a=>e("div",{key:a.role,class:"flex flex-col gap-1 border-b border-gray-100 pb-5 dark:border-gray-800"},[e("div",ae,[e("span",re,l(a.role),1),e("span",{class:v([a.classes,"text-gray-800 dark:text-gray-100"])},l(a.sample),3)]),e("code",le,l(a.classes),1)])),64))])]),s(o),e("section",oe,[t[17]||(t[17]=e("h2",{class:"mb-2 text-xl font-semibold text-gray-800 dark:text-gray-100"}," Buttons ",-1)),t[18]||(t[18]=e("p",{class:"mb-6 text-sm text-gray-500 dark:text-gray-400"},[d(" Always use "),e("code",{class:"rounded bg-gray-100 px-1 dark:bg-gray-800"},"UButton"),d(". Never use raw "),e("code",{class:"rounded bg-gray-100 px-1 dark:bg-gray-800"},"<button>"),d(" except in Netlify forms. ")],-1)),e("div",ie,[e("div",null,[t[8]||(t[8]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}," Primary CTA ",-1)),e("div",de,[s(r,{label:"Download",icon:"i-lucide-download",color:"primary",variant:"solid"}),s(r,{label:"Apply",color:"primary",variant:"solid"}),s(r,{label:"Loading",color:"primary",variant:"solid",loading:""}),s(r,{label:"Disabled",color:"primary",variant:"solid",disabled:""})]),t[9]||(t[9]=e("code",{class:"mt-2 block text-xs text-gray-500"},'color="primary" variant="solid"',-1))]),e("div",null,[t[10]||(t[10]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}," Secondary / Ghost ",-1)),e("div",ne,[s(r,{label:"About",color:"neutral",variant:"ghost"}),s(r,{icon:"i-lucide-copy",color:"neutral",variant:"ghost","aria-label":"Copy"}),s(r,{label:"GitHub",icon:"i-simple-icons-github",color:"neutral",variant:"ghost","trailing-icon":"i-lucide-arrow-up-right"})]),t[11]||(t[11]=e("code",{class:"mt-2 block text-xs text-gray-500"},'color="neutral" variant="ghost" — active route uses variant="soft"',-1))]),e("div",null,[t[12]||(t[12]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}," Destructive ",-1)),e("div",xe,[s(r,{label:"Delete",icon:"i-lucide-trash-2",color:"error",variant:"ghost"}),s(r,{label:"Remove all",color:"error",variant:"soft"})]),t[13]||(t[13]=e("code",{class:"mt-2 block text-xs text-gray-500"},'color="error"',-1))]),e("div",null,[t[14]||(t[14]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}," Outline ",-1)),e("div",ce,[s(r,{label:"❤️ Support",color:"primary",variant:"outline",class:"bg-white dark:bg-gray-800"}),s(r,{label:"Learn more",color:"primary",variant:"outline",class:"bg-white dark:bg-gray-800"})]),t[15]||(t[15]=e("code",{class:"mt-2 block text-xs text-gray-500"},'color="primary" variant="outline" class="bg-white dark:bg-gray-800" — white bg is standard for outline buttons',-1))]),e("div",null,[t[16]||(t[16]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}," Sizes — two tiers ",-1)),e("div",ge,[s(r,{label:"sm — toolbar, nav, secondary",color:"neutral",variant:"ghost",size:"sm"}),s(r,{label:"md — standalone CTAs",color:"neutral",variant:"ghost",size:"md"})])])])]),s(o),e("section",me,[t[24]||(t[24]=e("h2",{class:"mb-2 text-xl font-semibold text-gray-800 dark:text-gray-100"}," Form Controls ",-1)),t[25]||(t[25]=e("p",{class:"mb-6 text-sm text-gray-500 dark:text-gray-400"}," Always use NuxtUI. Exception: Netlify form inputs must be raw HTML for bot detection. ",-1)),e("div",ue,[e("div",null,[t[19]||(t[19]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}

1," UInput ",-1)),e("div",pe,[s(y,{placeholder:"Default"}),s(y,{placeholder:"With icon",icon:"i-lucide-mail"}),s(y,{placeholder:"Error",color:"error"}),s(y,{placeholder:"Disabled",disabled:""})])]),e("div",null,[t[20]||(t[20]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}," USelect ",-1)),s(I,{modelValue:u(k),"onUpdate:modelValue":t[0]||(t[0]=a=>b(k)?k.value=a:null),items:N,class:"w-56"},null,8,["modelValue"])]),e("div",null,[t[21]||(t[21]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}," UCheckbox & USlider ",-1)),e("div",ye,[e("div",be,[s(B,{modelValue:u(h),"onUpdate:modelValue":t[1]||(t[1]=a=>b(h)?h.value=a:null),label:"Serpentine"},null,8,["modelValue"]),s(B,{"model-value":!1,label:"Unchecked"})]),e("div",fe,[s(D,{modelValue:u(p),"onUpdate:modelValue":t[2]||(t[2]=a=>b(p)?p.value=a:null),min:1,max:25,step:1},null,8,["modelValue"]),e("p",ve,l(u(p))+"x ",1)])])]),e("div",null,[t[22]||(t[22]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"}," UInputNumber ",-1)),s(z,{modelValue:u(w),"onUpdate:modelValue":t[3]||(t[3]=a=>b(w)?w.value=a:null),min:2,max:32,size:"xs",class:"w-24"},null,8,["modelValue"]),t[23]||(t[23]=e("code",{class:"mt-2 block text-xs text-gray-500"},'size="xs" — used for color count',-1))])])]),s(o),e("section",ke,[t[28]||(t[28]=e("h2",{class:"mb-2 text-xl font-semibold text-gray-800 dark:text-gray-100"}," Badges ",-1)),t[29]||(t[29]=e("p",{class:"mb-6 text-sm text-gray-500 dark:text-gray-400"},[d(" Use "),e("code",{class:"rounded bg-gray-100 px-1 dark:bg-gray-800"},"UBadge"),d(" for semantic labels. Algorithm mode badges use custom classes to match the sidebar. ")],-1)),e("div",he,[e("div",we,[s(c,{label:"neutral",color:"neutral",variant:"subtle"}),s(c,{label:"primary",color:"primary",variant:"solid"}),s(c,{label:"success",color:"success",variant:"solid"}),s(c,{label:"error",color:"error",variant:"solid"}),s(c,{label:"warning",color:"warning",variant:"solid"})]),t[26]||(t[26]=e("div",{class:"flex gap-2"},[e("span",{class:"rounded bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"},"Bayer"),e("span",{class:"rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"},"Diffusion")],-1)),t[27]||(t[27]=e("code",{class:"block text-xs text-gray-500"},"Algorithm badges: bg-amber-100/blue-100 text-amber-700/blue-700 (custom, not UBadge)",-1))])]),s(o),e("section",_e,[t[30]||(t[30]=C('<h2 class="mb-2 text-xl font-semibold text-gray-800 dark:text-gray-100"> Icons </h2><p class="mb-6 text-sm text-gray-500 dark:text-gray-400"> Use <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">i-lucide-*</code> for all UI icons. Brand logos: <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">i-simple-icons-*</code>. Sizes: <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">size-4</code> inline, <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">size-5</code> standalone, <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">size-6</code> decorative. </p>',2)),e("div",Ce,[(n(),i(g,null,m(F,a=>e("div",{key:a,class:"flex flex-col items-center gap-1 rounded-md border border-gray-100 p-2 dark:border-gray-800",title:a},[s(A,{name:a,class:"size-5 text-gray-800 dark:text-gray-100"},null,8,["name"]),e("span",Be,l(a.replace("i-lucide-","").replace("i-simple-icons-","")),1)],8,Ue)),64))])]),s(o),t[39]||(t[39]=C('<section id="borders"><h2 class="mb-2 text-xl font-semibold text-gray-800 dark:text-gray-100"> Borders &amp; Radius </h2><p class="mb-6 text-sm text-gray-500 dark:text-gray-400"> No drop shadows except NuxtUI defaults. </p><div class="space-y-6"><div><p class="mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"> Border Colors </p><div class="space-y-2"><div class="flex items-center gap-3"><div class="h-8 w-32 rounded border border-gray-100 dark:border-gray-800"></div><code class="text-xs text-gray-500">border-gray-100 dark:border-gray-800 — all borders</code></div><div class="flex items-center gap-3"><div class="h-8 w-32 rounded border-2 border-[#C53030]"></div><code class="text-xs text-gray-500">border-[#C53030] — focus rings, active swatches</code></div></div></div><div><p class="mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"> Border Radius </p><div class="flex flex-wrap items-end gap-4"><div class="flex flex-col items-center gap-2"><div class="h-12 w-12 rounded-lg bg-gray-100 dark:bg-gray-800"></div><code class="text-xs text-gray-500">rounded-lg</code><span class="text-xs text-gray-500">everything</span></div><div class="flex flex-col items-center gap-2"><div class="h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-800"></div><code class="text-xs text-gray-500">rounded-full</code><span class="text-xs text-gray-500">swatches, circles</span></div></div><p class="mt-3 text-xs text-gray-500 dark:text-gray-400">NuxtUI components (UButton, UInput) use <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">rounded-md</code> internally — don&#39;t override them.</p></div></div></section>',1)),s(o),e("section",Se,[t[38]||(t[38]=C('<h2 class="mb-2 text-xl font-semibold text-gray-800 dark:text-gray-100"> Cards </h2><p class="mb-6 text-sm text-gray-500 dark:text-gray-400"> Always use <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">UCard</code>. Use <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">variant=&quot;outline&quot;</code> (default) for neutral cards, <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">variant=&quot;soft&quot;</code> with a custom background for colored/semantic cards. Emoji prefix required on colored card titles. </p>',2)),e("div",Ve,[e("div",null,[t[32]||(t[32]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"},' Neutral — variant="outline" (default) ',-1)),s(_,{class:"max-w-xs",ui:{body:"p-3 sm:p-3"}},{default:U(()=>[...t[31]||(t[31]=[e("p",{class:"mb-1 text-sm font-medium text-highlighted"},"🔒 Privacy First",-1),e("p",{class:"text-sm text-gray-500 dark:text-gray-400"},"100% client-side. Your images never leave your device.",-1)])]),_:1}

1),t[33]||(t[33]=e("code",{class:"mt-3 block text-xs text-gray-500"},`<UCard :ui="{ body: 'p-3 sm:p-3' }"> — emoji prefix, text-sm font-medium text-highlighted title`,-1))]),e("div",null,[t[36]||(t[36]=e("p",{class:"mb-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"},' Colored / Semantic — variant="soft" + custom bg ',-1)),e("div",Fe,[s(_,{variant:"soft",ui:{root:"bg-ditherit-tint",body:"p-4 sm:p-4"}},{default:U(()=>[...t[34]||(t[34]=[e("p",{class:"mb-1 text-sm font-medium text-highlighted"},"📋 Improve Dither it!",-1),e("p",{class:"text-sm text-gray-500 dark:text-gray-400"},"Found a bug? Have an idea for a feature?",-1)])]),_:1}),s(_,{variant:"soft",ui:{root:"bg-gray-100 dark:bg-gray-800",body:"p-3 sm:p-3"}},{default:U(()=>[...t[35]||(t[35]=[e("p",{class:"mb-1 text-sm font-medium text-highlighted"},"✏️ From the blog",-1),e("p",{class:"text-sm font-medium text-gray-800 dark:text-gray-100"},"Post title here",-1),e("p",{class:"mt-0.5 text-xs text-gray-500 dark:text-gray-400"},"Post description here",-1)])]),_:1})]),t[37]||(t[37]=e("div",{class:"mt-3 space-y-1"},[e("code",{class:"block text-xs text-gray-500"},`<UCard variant="soft" :ui="{ root: 'bg-ditherit-tint', body: 'p-4 sm:p-4' }">`),e("code",{class:"block text-xs text-gray-500"},"Title: text-sm font-medium text-highlighted + emoji prefix (required)"),e("code",{class:"block text-xs text-gray-500"},"Body: text-sm text-gray-500 dark:text-gray-400")],-1))])])])])}}});export{Ge as default};