Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map Theme variables to tailwind classes #2075

Open
baptisteArno opened this issue Mar 17, 2025 · 1 comment
Open

Map Theme variables to tailwind classes #2075

baptisteArno opened this issue Mar 17, 2025 · 1 comment

Comments

@baptisteArno
Copy link
Owner

baptisteArno commented Mar 17, 2025

Currently, every Theme CSS variables are applied to component classes: https://github.com/baptisteArno/typebot.io/blob/b61b5f5e4eda38592df1ae19442c18ade128c625/packages/embeds/js/src/assets/index.css

It will be better to just map the CSS variables to Tailwind classes and use these classes on every components.

@github-project-automation github-project-automation bot moved this to Backlog ☁️ in Typebot Mar 17, 2025
@baptisteArno baptisteArno moved this from Backlog ☁️ to Ongoing ✍️ in Typebot Mar 17, 2025
@baptisteArno
Copy link
Owner Author

Done for Button. For example, the colors:

"button-text": "var(--typebot-button-color)",
"button-bg":
"rgba(var(--typebot-button-bg-rgb), var(--typebot-button-opacity));",
"button-border":
"rgba(var(--typebot-button-border-rgb), var(--typebot-button-border-opacity));",
"host-bubble-text": "var(--typebot-host-bubble-color)",
"host-bubble-bg":
"rgba(var(--typebot-host-bubble-bg-rgb), var(--typebot-host-bubble-opacity));",
"host-bubble-border":
"rgba(var(--typebot-host-bubble-border-rgb), var(--typebot-host-bubble-border-opacity));",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Ongoing ✍️
Development

No branches or pull requests

1 participant