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>
18 lines
937 B
React
18 lines
937 B
React
const css = `
|
|
.m-toast{font-family:var(--mono);font-size:12.5px;background:var(--bg-deep);border:1px solid var(--line);color:var(--ink);padding:9px 16px;max-width:70vw;animation:m-toast-in .18s ease both;box-shadow:0 8px 30px rgba(0,0,0,.55);border-radius:var(--radius-md,6px)}
|
|
.m-toast--err{border-color:var(--red);color:var(--red)}
|
|
.m-toast--ok{border-color:var(--green-dim);color:var(--green)}
|
|
.m-toast--warn{border-color:var(--amber-dim);color:var(--amber)}
|
|
@keyframes m-toast-in{from{opacity:0;transform:translateY(8px)}}
|
|
`;
|
|
function ensureCss() {
|
|
if (typeof document === 'undefined' || document.getElementById('m-toast-css')) return;
|
|
const s = document.createElement('style'); s.id = 'm-toast-css'; s.textContent = css;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
export function Toast({ kind, children, style }) {
|
|
ensureCss();
|
|
return <div className={'m-toast' + (kind ? ' m-toast--' + kind : '')} style={style}>{children}</div>;
|
|
}
|