gnomical / solid-theme-provider Goto Github PK

Awesome Project! thanks for the cool utility!

I have copied your config file over to my project and cannot seem to get the drop-down to drop down.

Happy to upload a sample if you need it.

Thanks again!

It would be nice to accept a function that allows the developer to customize the calculation and suffix of the complementary variables. This would allow the developer to override the default behavior of complementary transparencies.

At the very least, disabling the complementary could come in handy to avoid the bloat of all the extra css variables.

Description

To enhance the theming capabilities of the solid-theme-provider, it's proposed to introduce a sophisticated algorithmic theme generation feature, drawing inspiration from Material Design 3's color system. This new feature aims to elevate the current simplistic and naive approach to a more robust and dynamic system that can generate comprehensive themes based on one or more source colors.

The current implementation, as outlined in special considerations for color and the calculate variants prop, provides a foundational layer. However, to achieve more adaptive, aesthetically pleasing, and efficient color schemes, a more advanced algorithm is required.

Design Considerations

The primary goal is to ensure that any theme generated by this feature is not only aesthetically pleasing but also maintains backward compatibility. As such, the system should:

• Generate themes dynamically based on input colors, adjusting hues, saturation, and lightness to create a balanced and harmonious palette.
• Include a set of predefined color roles for UI elements (e.g., background, foreground, container, button, error states) ensuring sufficient contrast and readability according to WCAG guidelines.
• Allow for the future introduction of additional color roles or adjustments without breaking existing themes.

Implementation Steps

1. Algorithm Development: Develop a JavaScript algorithm to include dynamic generation of complementary and contrasting colors, ensuring accessibility standards are met for text and background contrast ratios.
2. Integration: Embed the algorithm within the solid-theme-provider, allowing users to input one or more seed colors to generate a theme dynamically.
3. Demo Site Creation: Develop a demo site that visually represents the generated theme based on user-input seed colors. This site should allow users to tweak colors and see the effects in real-time, providing an intuitive interface for theme customization.
4. Export Functionality: Implement a feature to export the generated theme as a themes.json file, serving both as a reference for available CSS variables and as a tool for preserving theme versions.

Future Enhancements

• Theme Customization: Introduce advanced options for users to fine-tune generated themes, including adjusting color contrasts, adding custom color roles, and modifying saturation or lightness for specific UI elements.
• Documentation and Tutorials: Provide comprehensive documentation and tutorials on using the theme generation feature, including best practices for selecting seed colors and integrating the generated themes into projects.

Conclusion

This feature represents a significant enhancement to the solid-theme-provider, promising to deliver a dynamic and user-friendly approach to theme generation that is both aesthetically pleasing and accessible. By drawing inspiration from established design systems and focusing on adaptability and backward compatibility, we can ensure that this feature remains valuable for a wide range of applications and user needs.

Thanks for the library.

I seem to get this error with parcel. Will see what I can find

`🚨 @parcel/transformer-js: Expected ',', got 'xmlns'

../node_modules/solid-theme-provider/dist/solid-theme-provider.jsx:71:33
70 |

71 |
| ^^^^^
72 | <path d="M7.95,24.88c-1.56-.68-2.94-1.61-4.13-2.81s-2.13-2.57-2.81-4.
73 | );`

Versions:
"solid-js": "^1.4.8",
"solid-theme-provider": "^0.5.0",