Skip to content

Conversation

DrJKL
Copy link
Contributor

@DrJKL DrJKL commented Oct 3, 2025

Summary

Replace color/dark-color pairs in components with design tokens to allow for easy overriding.
Also standardizes the icon pattern to simplify the tailwind config.

Changes

  • What: Token based colors, for now, mostly.
  • Breaking: Got approval from Design to collapse some very similar pairs of colors that seem to have diverged in implementations over time. Some of the colors might be a little different, but we can tweak them later.

Review Focus

Still have quite a few places from which to remove dark-theme, but this at least gets the theming much closer.
Need to decide if I want to keep going in here or cut this and do the rest in a subsequent PR.

Screenshots (if applicable)

┆Issue is synchronized with this Notion page by Unito

Copy link

github-actions bot commented Oct 3, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 10/05/2025, 07:52:27 AM UTC

🔗 Links


🎉 Your Storybook is ready for review!

Copy link

github-actions bot commented Oct 3, 2025

🎭 Playwright Test Results

Some tests failed

⏰ Completed at: 10/05/2025, 08:05:22 AM UTC

📈 Summary

  • Total Tests: 471
  • Passed: 421 ✅
  • Failed: 18 ❌
  • Flaky: 2 ⚠️
  • Skipped: 30 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 416 / ❌ 16 / ⚠️ 2 / ⏭️ 30
  • chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • mobile-chrome: View Report • ✅ 2 / ❌ 2 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@DrJKL DrJKL changed the title WIP: Make components themeable Style: Make components themeable Oct 4, 2025
@DrJKL DrJKL marked this pull request as ready for review October 4, 2025 03:48
@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Oct 4, 2025
Myestery
Myestery previously approved these changes Oct 4, 2025
Copy link
Collaborator

@Myestery Myestery left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

WIDGET_TEXT_COLOR: 'node-component-widget-input'
// /* TOGGLE
} as const satisfies Partial<Record<keyof Colors['litegraph_base'], string>>
/*/
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we can take away this comment

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but it's useful to see which properties haven't yet had equivalent tokens defined.

@christian-byrne christian-byrne added the claude-review Add to trigger a PR code review from Claude Code label Oct 4, 2025
@DrJKL DrJKL added the New Browser Test Expectations New browser test screenshot should be set by github action label Oct 5, 2025
@DrJKL DrJKL added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Oct 5, 2025
arjansingh
arjansingh previously approved these changes Oct 5, 2025

## Icon Usage in Storybook

In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude and Codex thank you.

## Icon Usage in Storybook

In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.
In this project, the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is not supported in Storybook.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

non-blocker: This should go in the root CLAUDE.md as well. Will prevent many bad generations.

root: {
class:
'!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5 bg-gray-500 dark-theme:bg-neutral-700 text-white'
'!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5 bg-dialog-surface text-white'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

non-blocker: this is where we'd have to start removing !importants if we wanted to fix the dialogs.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yessssss

@DrJKL DrJKL added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Oct 5, 2025
@DrJKL DrJKL added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Oct 5, 2025
@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Oct 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
claude-review Add to trigger a PR code review from Claude Code New Browser Test Expectations New browser test screenshot should be set by github action size:S This PR changes 10-29 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants