@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/canvas/CanvasControls.module.css

@@ -33,16 +33,16 @@
   width: 32px;
   height: 32px;
   border-radius: 8px;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   transition: background 120ms;
 }
 
 .btn:hover:not(:disabled) {
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--color-background-muted, #f6f8fa);
 }
 
 .btn:active:not(:disabled) {
-  background: var(--bgColor-neutral-muted, #eaeef2);
+  background: var(--color-background-neutral-muted, #eaeef2);
 }
 
 .btn:disabled {
@@ -82,7 +82,7 @@
   padding: 6px 10px 4px;
   font-size: 11px;
   font-weight: 600;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   text-transform: uppercase;
   letter-spacing: 0.4px;
 }
@@ -94,31 +94,31 @@
   width: 100%;
   padding: 6px 10px;
   font-size: 13px;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   border-radius: 6px;
   box-sizing: border-box;
 }
 
 .menuItem:hover {
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--color-background-muted, #f6f8fa);
 }
 
 .menuDivider {
   height: 1px;
   margin: 4px 8px;
-  background: var(--borderColor-muted, rgba(0, 0, 0, 0.1));
+  background: var(--color-border-muted, rgba(0, 0, 0, 0.1));
 }
 
 .menuHint {
   font-size: 11px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   margin-left: 8px;
 }
 
 .menuEmpty {
   padding: 8px 10px;
   font-size: 12px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   font-style: italic;
 }
 
@@ -127,11 +127,11 @@
   cursor: pointer;
   margin-right: 4px;
   font-size: 13px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 .backBtn:hover {
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
 }
 
 /* Hide canvas controls when toolbars are hidden */

package/src/internals/canvas/CanvasPage.bridge.test.jsx

@@ -295,40 +295,14 @@ describe('CanvasPage canvas bridge', () => {
 })
 
 describe('getCanvasThemeVars', () => {
-  it('returns correct tokens for each theme', () => {
-    expect(getCanvasThemeVars('light')['--sb--canvas-bg']).toBe('#f6f8fa')
-    expect(getCanvasThemeVars('light')['--tc-bg-muted']).toBe('#f6f8fa')
-    expect(getCanvasThemeVars('dark')['--sb--canvas-bg']).toBe('#151b23')
-    expect(getCanvasThemeVars('dark')['--bgColor-muted']).toBe('#151b23')
-    expect(getCanvasThemeVars('dark')['--tc-bg-muted']).toBe('#151b23')
-    expect(getCanvasThemeVars('dark_dimmed')['--sb--canvas-bg']).toBe('#262c36')
-    expect(getCanvasThemeVars('dark_dimmed')['--bgColor-muted']).toBe('#262c36')
-    expect(getCanvasThemeVars('dark_dimmed')['--tc-bg-muted']).toBe('#262c36')
-    expect(getCanvasThemeVars('dark_dimmed')['--tc-dot-color']).toBe('rgba(209, 215, 224, 0.18)')
-    expect(getCanvasThemeVars('dark_dimmed')['--overlay-backdrop-bgColor']).toBe('rgba(209, 215, 224, 0.18)')
-  })
-
-  it('returns distinct values for dark_high_contrast', () => {
-    const vars = getCanvasThemeVars('dark_high_contrast')
-    expect(vars['--bgColor-default']).toBe('#010409')
-    expect(vars['--borderColor-default']).toBe('#b7bdc8')
-    expect(vars['--fgColor-default']).toBe('#ffffff')
-  })
-
-  it('returns distinct values for dark_colorblind', () => {
-    const vars = getCanvasThemeVars('dark_colorblind')
-    expect(vars['--bgColor-default']).toBe('#0d1117')
-    expect(vars['--fgColor-muted']).toBe('#9198a1')
-  })
-
-  it('returns distinct values for light_colorblind', () => {
-    const vars = getCanvasThemeVars('light_colorblind')
-    expect(vars['--bgColor-default']).toBe('#ffffff')
-    expect(vars['--fgColor-muted']).toBe('#59636e')
-  })
-
-  it('falls back to light for unknown themes', () => {
-    expect(getCanvasThemeVars('unknown')).toEqual(getCanvasThemeVars('light'))
+  it('is a no-op shim — canvas color tokens now cascade via data-sb-canvas-theme + tailwind.css', () => {
+    expect(getCanvasThemeVars('light')).toEqual({})
+    expect(getCanvasThemeVars('dark')).toEqual({})
+    expect(getCanvasThemeVars('dark_dimmed')).toEqual({})
+    expect(getCanvasThemeVars('dark_high_contrast')).toEqual({})
+    expect(getCanvasThemeVars('dark_colorblind')).toEqual({})
+    expect(getCanvasThemeVars('light_colorblind')).toEqual({})
+    expect(getCanvasThemeVars('unknown')).toEqual({})
   })
 })
 
@@ -382,10 +356,10 @@ describe('canvas target fallback', () => {
 
     const scroll = document.querySelector('[data-storyboard-canvas-scroll]')
     const jsxWidget = document.getElementById('jsx-PrimaryButtons')
-    expect(scroll?.style.getPropertyValue('--sb--canvas-bg')).toBe('#f6f8fa')
-    expect(scroll?.style.getPropertyValue('--tc-bg-muted')).toBe('#f6f8fa')
+    // Canvas color attribute should be light when canvas sync is off, even
+    // if a stale dark attribute remains on the root — CanvasPage reapplies
+    // the resolved theme attribute on its own scroll wrapper.
     expect(scroll?.getAttribute('data-color-mode')).toBe('light')
     expect(jsxWidget?.getAttribute('data-color-mode')).toBe('light')
-    expect(jsxWidget?.style.getPropertyValue('--bgColor-default')).toBe('#ffffff')
   })
 })