[appflowy]

Summary

The AI presentation UI (the studio, mind map page, slide settings dialog and presenter controls) now follows the AppFlowy design system (Figma Design-System): semantic colour tokens, the app font and type scale, and the documented button, field, tab and message-box states.

The most visible fix is dark mode. The studio was locked to light (color-scheme: light and #fff backgrounds) while the mind map canvas inside it followed the theme, so in dark mode a dark canvas sat on a white page with dark text.

Changes

• Theme: studio surfaces, text, borders and focus rings use semantic tokens, so the studio follows dark mode.
• Typography: the app font replaces Inter. Body text is Body_S (14/20) instead of 13px. Page titles are Heading/H2 (24/36 semibold, no negative letter-spacing) instead of 36px. Captions and tags are Caption_S (12/18) instead of 9–11px.
• Buttons: Action follows Outline and Filled M: 32px, Body_S Enhanced, Fill/theme-thick instead of the off-palette #398af4, and the design system's disabled state. Disabled shared Buttons inside the presentation were double-dimmed (their own disabled style plus 42% opacity); now they only use their own.
• Fields: Textfield M (32px, padding 6/8) with hover, focus and disabled states, and a Caption_S label.
• Switches: the studio's AI Slides / Mind map / Source switch and the mind map's From page structure / AI mind map switch use Tab button styling.
• Notices: neutral Message Box styling (Fill/content-visible, radius 12, Body_S). The setup dialog's separate notice, field, checkbox and button overrides are gone, because the base styles now match them.
• Slide settings and preview window: Modal View radius 16 over the shared Surface/overlay scrim, instead of radius 12 over a 12% black backdrop.
• Source tab content: quotes, code, tables and properties use the editor's token colours.
• Cleanup: removed 150 CSS rules (about 790 lines) for 60 classes that no component uses any more (an old prototype's sidebar, steps, experiment bar, style grid and slide layouts). They held most of the hard-coded colours.

The token audit (ds_tokens.py audit) drops from 149 hard-coded colours in presentation.css to 3. All 3 are slide content.

Intentionally unchanged

• Slide content: server and local slide canvases and document slides keep their theme fonts, colours and line-height: 1.5. The document-slide title and section label keep their slide styling. These are paginated and exported, so this PR leaves them alone.
• Copy: no text changes.

Deviations from Figma

• The setup and preview window stays on Surface/primary, matching the shared Web dialog.tsx. Figma's Modal View uses Surface/layer-02; the two differ only in dark mode.
• Action keeps its own markup, because it has 44 call sites plus contextual overrides (presenter, map close, node popover). It now uses the same tokens as components/ui/button with Figma's M radius of 6px; the shared Button uses 8px.
• In Figma's Tab button, hover (Fill/content-hover) and active (Fill/content-visible) have the same value, so the active tab is told apart by its primary text colour.
• Drift found, not changed: the legacy light.variables.css / dark.variables.css define --icon-secondary: #59647a, which collides with the semantic Icon/secondary (#6f748c / #b5bbd3). Icons here use Icon/tertiary or text tokens instead.

Before / after

These screenshots come from the presentation Playwright fixtures in light and dark mode. No fixture mounts the full studio, so the mind map page is painted with the studio's own background in each build. Inter isn't installed on the capture machine, so the font change itself isn't visible here; users who have Inter installed will see it.

Mind map page, dark mode: the page now follows the theme instead of staying white around a dark canvas.

Mind map page and node popover, light mode: H2 title, caption section label, 12px tag, Body_S buttons, and the design-system disabled state on Generate with AI.

Slide settings, dark and light: shared scrim, radius 16 and Textfield M geometry. This dialog was already mostly on tokens.

Document and deck presenters: a check that nothing regressed. The slides are unchanged; the controls only pick up the 12px caption and the tertiary disabled state on the previous-slide button.

Tests

• TZ=UTC npx jest src/components/presentation: 60 suites, 485 tests pass.
• npx playwright test -c playwright.presentation.config.ts: 67 of 70 pass. The other 3 (mindmap-sources.spec.ts:35, mindmap.spec.ts:941 and mindmap.spec.ts:1001) fail the same way on main (885f86d).
• Design-token audit: the 3 colours left in presentation.css are all slide content.
• pnpm type-check and eslint pass.

🤖 Generated with Claude Code

Summary by Sourcery

Align the AI presentation interface with the AppFlowy design system while preserving the existing slide-content appearance.

Bug Fixes:

• Make the AI presentation studio and mind map UI correctly follow light and dark themes instead of forcing light-mode surfaces and text.
• Prevent shared presentation buttons from being unnecessarily dimmed twice when disabled.

Enhancements:

• Apply AppFlowy semantic design tokens, typography, and component states across the presentation studio, setup flows, presenters, mind map, dialogs, fields, tabs, notices, and source content.
• Update presentation dialogs and preview surfaces to use the design system's modal scrim, corner radius, shadows, and control geometry.
• Remove obsolete prototype presentation styles and consolidate component styling around shared design-system rules while preserving slide-content styling and export appearance.

[sourcery-ai]

Sorry @appflowy, you've used your own review budget of 250,000 diff characters for the last 7 days.

You can request another review in 1 day and 8 hours by commenting @sourcery-ai review. Upgrade to get a review now.

[sourcery-ai]

Reviewer's Guide

The PR refactors the AI presentation studio, mind map, source view, dialogs, and presenter controls onto AppFlowy’s semantic design system, fixing dark-mode inconsistencies while standardizing typography, component states, modal treatment, and removing obsolete CSS without changing exported slide content.

File-Level Changes

Change	Details	Files
Replaced presentation-specific hard-coded visual styling with AppFlowy semantic design tokens and shared theme behavior.	Switched surfaces, text, borders, controls, focus states, notices, source content, and shadows to semantic tokens. Removed the light-only color scheme and updated the studio, canvas, dialogs, and popovers to follow dark mode. Removed obsolete prototype styles and component-specific overrides that are no longer used.	src/components/presentation/presentation.css
Aligned presentation typography and component geometry with the design system while preserving slide-rendering styles.	Applied inherited app font, Body_S defaults, H2 headings, Caption_S labels and tags, and updated field and button sizing. Implemented design-system hover, focus, active, and disabled states for buttons, fields, segmented tabs, notices, and checkboxes. Kept paginated/exported slide content and document-slide-specific typography unchanged.	src/components/presentation/presentation.css
Updated presentation modal surfaces to use the shared design-system overlay treatment.	Changed setup and preview modal radius to 16px. Replaced the custom translucent black backdrop with the shared surface overlay token.	src/components/presentation/PresentationShell.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.