스타일 토큰 회귀 강화: focus-visible 링/오프셋, disabled/readonly 토큰 및 규칙 추가, 테스트 보강
Auto PR / open-pr (push) Successful in 20s
Auto Label PR / add-automerge-label (pull_request) Successful in 6s
CI / test (pull_request) Successful in 1m28s

This commit is contained in:
2025-11-17 17:44:18 +09:00
parent 5bf78b3e01
commit dc54226351
4 changed files with 61 additions and 3 deletions
+6 -3
View File
@@ -120,15 +120,18 @@ export function exportFrame(frame: Frame): Exported {
}
const inner = `<div class="frame-scale"><div class="frame">${piecesHtml.join('')}</div></div>`
const css = [
`:root{--bg:${frame.background};--text:#f9fafb;--border:#94a3b8;--primary:#0ea5e9;--danger:#ef4444}`,
`[data-theme="light"]{--bg:#ffffff;--text:#0f172a;--border:#cbd5e1;--primary:#0ea5e9;--danger:#ef4444}`,
`[data-theme="dark"]{--bg:#111111;--text:#f9fafb;--border:#94a3b8;--primary:#0ea5e9;--danger:#ef4444}`,
`:root{--bg:${frame.background};--text:#f9fafb;--border:#94a3b8;--primary:#0ea5e9;--danger:#ef4444;--ring:#22c55e;--ring-offset:2px;--disabled-bg:#e5e7eb;--disabled-fg:#9ca3af}`,
`[data-theme="light"]{--bg:#ffffff;--text:#0f172a;--border:#cbd5e1;--primary:#0ea5e9;--danger:#ef4444;--ring:#22c55e;--ring-offset:2px;--disabled-bg:#e5e7eb;--disabled-fg:#6b7280}`,
`[data-theme="dark"]{--bg:#111111;--text:#f9fafb;--border:#94a3b8;--primary:#0ea5e9;--danger:#ef4444;--ring:#22c55e;--ring-offset:2px;--disabled-bg:#1f2937;--disabled-fg:#9ca3af}`,
`.frame{position:relative;width:${frame.width}px;height:${frame.height}px;background:var(--bg)}`,
`.frame-scale{transform-origin:0 0}`,
`a{color:var(--primary);text-decoration:none}`,
`input,select,textarea{color:var(--text);background:transparent;border:1px solid var(--border)}`,
`:focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset)}`,
`input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:2px}`,
`input:invalid,select:invalid,textarea:invalid{border-color:var(--danger)}`,
`input:disabled,select:disabled,textarea:disabled{background:var(--disabled-bg);color:var(--disabled-fg)}`,
`input[readonly],select[readonly],textarea[readonly]{color:var(--disabled-fg)}`,
`fieldset{border:1px solid var(--border)}`,
`legend{color:var(--text)}`,
...piecesCss,