DesignTokenPanel

designtokenpanel-1779388706198.tsx

'use client';
import { useState } from 'react';

export default function DesignTokenPanel() {
  const [tokens, setTokens] = useState({
    primary: '#C9A84C',
    secondary: '#6366f1',
    background: '#0A0A0A',
    text: '#F5F5F0',
    radius: 12,
    spacing: 16,
    fontSize: 14,
  });
  const [copied, setCopied] = useState(false);

  const update = (key, val) => setTokens(t => ({ ...t, [key]: val }));

  const exportCSS = () => {
    const css = Object.entries(tokens).map(([k, v]) => `  --${k}: ${typeof v === 'number' ? v + 'px' : v};`).join('\n');
    navigator.clipboard?.writeText(`:root {\n${css}\n}`);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '360px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '15px', fontWeight: 700 }}>Design Tokens</h3>
        <button onClick={exportCSS} style={{
          background: copied ? 'rgba(74,222,128,0.1)' : 'rgba(255,255,255,0.05)',
          border: `1px solid ${copied ? 'rgba(74,222,128,0.3)' : 'rgba(255,255,255,0.1)'}`,
          borderRadius: '8px', padding: '6px 14px',
          color: copied ? '#4ade80' : 'rgba(245,245,240,0.6)',
          fontSize: '12px', cursor: 'pointer',
        }}>{copied ? '✓ Copied!' : 'Export CSS'}</button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
        {[['primary', 'Primary Color'], ['secondary', 'Accent Color'], ['background', 'Background'], ['text', 'Text Color']].map(([key, label]) => (
          <div key={key} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 14px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: '10px' }}>
            <input type="color" value={tokens[key]} onChange={e => update(key, e.target.value)}
              style={{ width: '32px', height: '32px', borderRadius: '8px', border: 'none', cursor: 'pointer', background: 'none', padding: 0 }} />
            <div style={{ flex: 1 }}>
              <p style={{ margin: 0, color: 'rgba(245,245,240,0.7)', fontSize: '12px', fontWeight: 600 }}>{label}</p>
              <code style={{ color: '#C9A84C', fontSize: '12px', fontFamily: 'monospace' }}>{tokens[key]}</code>
            </div>
            <div style={{ width: '24px', height: '24px', borderRadius: '6px', background: tokens[key], border: '1px solid rgba(255,255,255,0.1)' }} />
          </div>
        ))}
        {[['radius', 'Border Radius', 0, 32, 'px'], ['spacing', 'Base Spacing', 4, 48, 'px'], ['fontSize', 'Base Font Size', 10, 24, 'px']].map(([key, label, min, max, unit]) => (
          <div key={key} style={{ padding: '10px 14px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: '10px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
              <span style={{ color: 'rgba(245,245,240,0.7)', fontSize: '12px', fontWeight: 600 }}>{label}</span>
              <code style={{ color: '#C9A84C', fontSize: '12px', fontFamily: 'monospace' }}>{tokens[key]}{unit}</code>
            </div>
            <input type="range" min={min} max={max} value={tokens[key]} onChange={e => update(key, parseInt(e.target.value))}
              style={{ width: '100%', accentColor: '#C9A84C', cursor: 'pointer' }} />
          </div>
        ))}
      </div>
      <div style={{ marginTop: '16px', padding: '16px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.07)', background: tokens.background }}>
        <p style={{ margin: '0 0 10px 0', color: tokens.text, fontSize: tokens.fontSize + 'px', fontWeight: 700 }}>Preview</p>
        <button style={{ background: tokens.primary, border: 'none', borderRadius: tokens.radius + 'px', padding: `${tokens.spacing / 2}px ${tokens.spacing}px`, fontSize: tokens.fontSize + 'px', cursor: 'pointer', color: '#0A0A0A', fontWeight: 700 }}>Sample Button</button>
      </div>
    </div>
  );
}

Component info

CategorySettings

Frameworkreact

TierFREE

Copies0

About

Design token editor with color and spacing controls

More from Settings

'use client'
import { useState } from 'react'

function Toggle({ on, onChange }: { on: boolean; onChange: (v: boolean) => void }) {
  return (
    <button onClick={() => onChange(!on)} style={{
      width: 40, height: 22, borderRadius: 11, border: '

SettingsPanel

Settings

'use client';
import { useState } from 'react';

export default function APIKeyManager() {
  const [keys, setKeys] = useState([
    { id: 1, name: 'Production', key: 'sk-prod-xK9mN2pL8qR4vT7wZ3aB', created: '2026-01-15', usage: '48,293' },
    { id:

APIKeyManager

Settings