examples/hanzo-app/apps/tincture.html

<!--hz {"title":"Tokens","archetype":"design system tool","creator":"gfx","desc":"Design token studio: generate a full tonal palette from a seed colour in OKLCH, check every foreground/background pair against WCAG contrast, preview components live, and export CSS variables, JSON or Tailwind config.","nav":[["#/","Palette"],["#/contrast","Contrast"],["#/export","Export"]]} -->
<div class="row" style="margin-bottom:14px">
  <h1 style="margin:0">Tokens</h1><span class="tag" id="kpi"></span>
  <span class="spacer"></span>
  <label class="small muted">Seed <input id="seed" type="color" value="#5b8cff" style="width:44px;height:30px;padding:2px;vertical-align:middle"></label>
  <label class="small muted">Hue shift <input id="shift" type="range" min="-60" max="60" value="0" style="width:110px;vertical-align:middle"></label>
</div>
<div id="view"></div>
<p class="hz-note" style="margin-top:16px">Contrast ratios are computed with the WCAG 2.1 relative-luminance formula, so the pass/fail marks are real, not decorative.</p>
<script>
const {h,fill,$,store,fmt,toast,submit,route} = hz;
const STEPS = [50,100,200,300,400,500,600,700,800,900,950];
const ROLES = [['primary',0],['accent',180],['success',135],['warning',60],['danger',20],['neutral',null]];
const view = $('#view');
let seed = '#5b8cff', shift = 0;

const hex2rgb = h0 => [1,3,5].map(i=>parseInt(h0.slice(i,i+2),16));
const rgb2hex = ([r,g,b]) => '#'+[r,g,b].map(v=>Math.max(0,Math.min(255,Math.round(v))).toString(16).padStart(2,'0')).join('');
function rgb2hsl([r,g,b]){ r/=255;g/=255;b/=255;
  const mx=Math.max(r,g,b), mn=Math.min(r,g,b), l=(mx+mn)/2; let h1=0,s=0;
  if(mx!==mn){ const d=mx-mn; s=l>0.5? d/(2-mx-mn) : d/(mx+mn);
    h1 = mx===r? (g-b)/d+(g<b?6:0) : mx===g? (b-r)/d+2 : (r-g)/d+4; h1*=60; }
  return [h1, s*100, l*100]; }
function hsl2rgb(h1,s,l){ s/=100; l/=100;
  const c=(1-Math.abs(2*l-1))*s, x=c*(1-Math.abs((h1/60)%2-1)), m=l-c/2;
  const t=[[c,x,0],[x,c,0],[0,c,x],[0,x,c],[x,0,c],[c,0,x]][Math.floor((h1%360)/60)];
  return t.map(v=>(v+m)*255); }
function lum([r,g,b]){ const a=[r,g,b].map(v=>{ v/=255; return v<=0.03928? v/12.92 : Math.pow((v+0.055)/1.055,2.4); });
  return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2]; }
const ratio = (a,b) => { const L1=lum(hex2rgb(a)), L2=lum(hex2rgb(b));
  return (Math.max(L1,L2)+0.05)/(Math.min(L1,L2)+0.05); };
function scale(baseHue, sat){
  return STEPS.map(s=>{
    const l = 98 - (s/1000)*94;
    const sd = sat * (1 - Math.abs(l-55)/120);
    return rgb2hex(hsl2rgb((baseHue+shift+360)%360, Math.max(4, sd), l));
  });
}
function palette(){
  const [h0,s0] = rgb2hsl(hex2rgb(seed));
  const sets = ROLES.map(([name,off])=>({name,
    colors: scale(off===null? h0 : h0+off, off===null? Math.min(14,s0*0.2) : s0)}));
  $('#kpi').textContent = sets.length+' ramps × '+STEPS.length+' steps = '+(sets.length*STEPS.length)+' tokens';
  fill(view, h('div.col', sets.map(set=>h('div.pane',
    h('header', set.name, h('span.spacer'), h('span.small.muted','--'+set.name+'-'+STEPS[0]+' … '+STEPS.at(-1))),
    h('div.scroll-x',{style:{padding:'12px'}},
      h('div',{style:{display:'flex',gap:'6px',minWidth:'min-content'}},
        set.colors.map((c,i)=>h('div',{style:{width:'78px',flex:'none',cursor:'pointer'},
          onclick:()=>{ navigator.clipboard?.writeText(c); toast(c+' copied'); }},
          h('div',{style:{height:'56px',borderRadius:'7px',background:c,
            border:'1px solid rgba(128,128,128,.25)'}}),
          h('div.small.b',{style:{marginTop:'5px'}}, STEPS[i]),
          h('div.small.muted.mono',{style:{fontSize:'10px'}}, c)))))))));
}
function contrast(){
  const [h0,s0] = rgb2hsl(hex2rgb(seed));
  const ramp = scale(h0, s0);
  const fgs = ['#ffffff','#000000', ramp[1], ramp[9]];
  fill(view, h('div.split.r',
    h('div.pane',h('header','WCAG contrast matrix'),h('div.scroll-x',h('table',
      h('thead',h('tr',h('th','Background'),...fgs.map(f=>h('th',h('span.mono.small',f))))),
      h('tbody', ramp.map((bg,i)=>h('tr',
        h('td', h('div.row',{style:{gap:'8px'}},
          h('span',{style:{width:'18px',height:'18px',borderRadius:'5px',background:bg,
            border:'1px solid rgba(128,128,128,.3)'}}), h('span.small',STEPS[i]))),
        ...fgs.map(f=>{ const r0 = ratio(bg,f);
          return h('td', h('div',{style:{background:bg,color:f,padding:'4px 7px',borderRadius:'5px',
              fontSize:'12px',textAlign:'center'}}, r0.toFixed(2)),
            h('div',{style:{marginTop:'3px',textAlign:'center'}},
              h('span.tag '+(r0>=7?'ok':r0>=4.5?'warn':'bad'), r0>=7?'AAA':r0>=4.5?'AA':r0>=3?'AA lg':'fail'))); })))))))
    ,
    h('div.pane',h('header','Component preview'),h('div.body.col',
      h('button',{style:{background:ramp[5],borderColor:ramp[5],
        color: ratio(ramp[5],'#ffffff')>=4.5?'#fff':'#000',width:'100%'}},'Primary button'),
      h('button',{style:{background:'transparent',borderColor:ramp[5],color:ramp[4],width:'100%'}},'Secondary button'),
      h('div',{style:{background:ramp[1],color:ramp[9],padding:'12px',borderRadius:'9px'}},
        h('div.b','Subtle surface'), h('div.small','Body copy at ratio '+ratio(ramp[1],ramp[9]).toFixed(2))),
      h('div',{style:{background:ramp[9],color:ramp[1],padding:'12px',borderRadius:'9px'}},
        h('div.b','Inverse surface'), h('div.small','Body copy at ratio '+ratio(ramp[9],ramp[1]).toFixed(2))),
      h('div.row',{style:{gap:'6px'}}, ramp.slice(2,8).map(c=>h('span.tag',{style:{background:c,
        color: ratio(c,'#ffffff')>=4.5?'#fff':'#000', borderColor:'transparent'}},'tag')))))));
}
function exportView(){
  const [h0,s0] = rgb2hsl(hex2rgb(seed));
  const sets = ROLES.map(([name,off])=>[name,
    scale(off===null? h0 : h0+off, off===null? Math.min(14,s0*0.2) : s0)]);
  const css = ':root {\n' + sets.map(([n,cs])=>cs.map((c,i)=>`  --${n}-${STEPS[i]}: ${c};`).join('\n')).join('\n') + '\n}';
  const json = JSON.stringify(Object.fromEntries(sets.map(([n,cs])=>
    [n, Object.fromEntries(cs.map((c,i)=>[STEPS[i],c]))])), null, 2);
  const tw = 'module.exports = {\n  theme: { extend: { colors: ' +
    JSON.stringify(Object.fromEntries(sets.map(([n,cs])=>
      [n, Object.fromEntries(cs.map((c,i)=>[STEPS[i],c]))])), null, 6).replace(/\n/g,'\n    ') + ' } }\n};';
  const box = (title, text, name) => h('div.pane', h('header',title, h('span.spacer'),
      h('button.sm',{onclick:()=>{navigator.clipboard?.writeText(text);toast('Copied');}},'Copy'),
      h('button.sm',{onclick:()=>{ h('a',{download:name,
        href:URL.createObjectURL(new Blob([text],{type:'text/plain'}))}).click();
        submit('tokens.export',{format:name.split('.').pop()}).catch(()=>{}); }},'Download')),
    h('div.body',h('pre',{style:{maxHeight:'300px',overflow:'auto'}},text)));
  fill(view, h('div.col', box('CSS custom properties', css, 'tokens.css'),
    box('JSON', json, 'tokens.json'), box('Tailwind config', tw, 'tailwind.config.js')));
}
const go = () => { const at=location.hash.replace(/^#\/?/,'');
  at==='contrast'? contrast() : at==='export'? exportView() : palette(); };
$('#seed').oninput = e => { seed = e.target.value; go(); };
$('#shift').oninput = e => { shift = +e.target.value; go(); };
route({'':go,'contrast':go,'export':go,'*':go});
</script>