스타일 토큰 회귀 강화: focus-visible 링/오프셋, disabled/readonly 토큰 및 규칙 추가, 테스트 보강

2025-11-17 17:44:18 +09:00
parent 5bf78b3e01
commit dc54226351
4 changed files with 61 additions and 3 deletions
@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function baseFrame(): Frame {
+  return {
+    id: 'f', width: 320, height: 200, background: '#111111',
+    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
+  }
+}
+
+describe('wysiwyg export - disabled/read-only control tokens', () => {
+  it('defines disabled tokens and uses them for :disabled and [readonly]', () => {
+    const out = exportFrame(baseFrame())
+    // tokens
+    expect(out.css).toMatch(/:root\s*{[^}]*--disabled-bg:/)
+    expect(out.css).toMatch(/:root\s*{[^}]*--disabled-fg:/)
+    // usage
+    expect(out.css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*background:var\(--disabled-bg\)/)
+    expect(out.css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*color:var\(--disabled-fg\)/)
+    expect(out.css).toMatch(/input\[readonly\],select\[readonly\],textarea\[readonly\]\s*{[^}]*color:var\(--disabled-fg\)/)
+  })
+})