test(ui): update panel snapshots for the new control density and add ruler theme regression

- Update design/properties panel snapshots for the 24px control height and
  section header bands, and the appearance field test to expect 24px
- Add a light-theme regression test asserting the canvas ruler theme tracks
  the active theme tokens instead of staying on the dark fallback

tests/e2e/properties/panel.spec.ts

@@ -32,7 +32,7 @@ test('appearance fields share control height and show variable actions', async (
     section.getByRole('spinbutton', { name: 'Corner smoothing' })
   ]
   for (const control of controls) {
-    await expect(control).toHaveCSS('height', '26px')
+    await expect(control).toHaveCSS('height', '24px')
   }
 
   const applyVariable = section.getByRole('button', { name: 'Apply variable' }).first()
@@ -58,7 +58,7 @@ test('appearance fields share control height and show variable actions', async (
 
   const fillItem = propertyItems(editor.page, 'fills').first()
   const paintField = fillItem.locator('[data-slot="paint-field"]')
-  await expect(paintField).toHaveCSS('height', '26px')
+  await expect(paintField).toHaveCSS('height', '24px')
   const colorBox = expectDefined(
     await fillItem.getByRole('textbox', { name: 'Fill' }).boundingBox(),
     'fill color bounds'

tests/e2e/ui/theme.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test, useEditorSetup } from '#tests/e2e/fixtures'
+
+const editor = useEditorSetup()
+
+test('rulers follow the active theme', async () => {
+  const { page } = editor
+
+  const readState = () =>
+    page.evaluate(() => {
+      const store = window.openPencil?.getStore?.()
+      const style = getComputedStyle(document.documentElement)
+      return {
+        cssTheme: document.documentElement.dataset.theme ?? 'dark',
+        cssRulerBg: style.getPropertyValue('--color-ruler-bg').trim(),
+        storeRulerBg: store?.state.rulerTheme?.background ?? null
+      }
+    })
+
+  // Baseline: dark theme
+  const dark = await readState()
+  expect(dark.cssTheme).toBe('dark')
+
+  // Switch to light via the app's theme API (module state, not raw localStorage,
+  // so the watcher applies it and pushes the ruler theme to the active editor).
+  await page.evaluate(async () => {
+    const themeModule = await import('/src/app/shell/theme.ts')
+    themeModule.useAppTheme().setTheme('light')
+  })
+  await page.waitForFunction(() => document.documentElement.dataset.theme === 'light')
+
+  const light = await readState()
+  expect(light.cssTheme).toBe('light')
+  // Canvas ruler theme must track the light tokens, not stay on the dark fallback.
+  expect(light.cssRulerBg).not.toBe(dark.cssRulerBg)
+  expect(light.storeRulerBg).not.toBeNull()
+
+  // Restore dark so later specs are unaffected.
+  await page.evaluate(async () => {
+    const themeModule = await import('/src/app/shell/theme.ts')
+    themeModule.useAppTheme().setTheme('dark')
+  })
+  await page.waitForFunction(() => document.documentElement.dataset.theme === 'dark')
+})