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/04/2025, 04:04:41 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/04/2025, 04:20:48 AM UTC

📈 Summary

  • Total Tests: 454
  • Passed: 389 ✅
  • Failed: 32 ❌
  • Flaky: 3 ⚠️
  • Skipped: 30 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 384 / ❌ 30 / ⚠️ 3 / ⏭️ 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
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.

@click="handleDownload"
>
<i-lucide:download class="w-4 h-4" />
<i class="icon-[lucide--download] w-4 h-4" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

question: is the icon class replacement related to this PR?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Tangentially 😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
size:L This PR changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants