wangjia
5a1e185b1a
phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/ typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile) + assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
32 lines
1.8 KiB
React
32 lines
1.8 KiB
React
const css = `
|
|
.m-btn{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:transparent;color:var(--ink);border:1px solid var(--line);padding:6px 14px;cursor:pointer;transition:all .12s;border-radius:var(--radius-sm,4px);white-space:nowrap}
|
|
.m-btn:hover{border-color:var(--muted);background:var(--panel-2)}
|
|
.m-btn--xs{padding:2px 8px;font-size:11px}
|
|
.m-btn--ghost{border-color:transparent;color:var(--muted)}
|
|
.m-btn--ghost:hover{color:var(--green);border-color:var(--green-dim);background:transparent}
|
|
.m-btn--solid{background:var(--green);color:var(--bg-deep);border-color:var(--green)}
|
|
.m-btn--solid:hover{background:#79ec94;border-color:#79ec94;box-shadow:0 0 14px rgba(95,221,125,.35)}
|
|
.m-btn--accept{border-color:var(--green-dim);color:var(--green)}
|
|
.m-btn--accept:hover{background:var(--green);color:var(--bg-deep);border-color:var(--green);box-shadow:0 0 14px rgba(95,221,125,.3)}
|
|
.m-btn--reject{border-color:var(--red-dim);color:var(--red)}
|
|
.m-btn--reject:hover{background:var(--red);color:var(--bg-deep);border-color:var(--red);box-shadow:0 0 14px rgba(255,93,93,.3)}
|
|
.m-btn:disabled{opacity:.4;cursor:not-allowed}
|
|
`;
|
|
function ensureCss() {
|
|
if (typeof document === 'undefined' || document.getElementById('m-btn-css')) return;
|
|
const s = document.createElement('style'); s.id = 'm-btn-css'; s.textContent = css;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
export function Button({ variant = 'default', size, disabled, onClick, type = 'button', style, children }) {
|
|
ensureCss();
|
|
const cls = ['m-btn'];
|
|
if (variant !== 'default') cls.push('m-btn--' + variant);
|
|
if (size === 'xs') cls.push('m-btn--xs');
|
|
return (
|
|
<button type={type} className={cls.join(' ')} disabled={disabled} onClick={onClick} style={style}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|