-
-
Notifications
You must be signed in to change notification settings - Fork 807
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
Update to Ant Design v5 #2359
Comments
I could try to update it to v5. If I fail or get stuck, I will ask for help. |
That would be super cool! But I think there's major things that we'll have to re-architect to support it. That doesn't mean we can't start now, but I didn't plan on that work before we release v0.1.0. The biggest change that I'm aware of is how we'll be able to customize the appearance of components with Ant v5. We're doing it with CSS variables now, but I don't believe that's possible with v5 and they have a completely different approach that I didn't look much into since I wasn't personally ready for it. |
I'm currently trying to get an overview about the current theming. I'll probably start off with a little sandbox example. Because I still need to wrap around my head about |
Hopefully I can explain how colors are handled and turned into themes. This should probably be documented! The generated CSS file with all the variables is variables.css and is created with all the values of the following:
Our colors -> Our theme -> Ant Design components So as far as I can tell with Ant Design they no longer support using CSS variables to customize with v5, and instead require passing values through a
|
That was already helpful to me to understand it! I wasn't aware of this 😆 Then we should keep most of the tooling as it is I guess and try to find a way of how to adjust the theme for the ant design components. Did I get this right? |
That sounds right! And we could probably still use our existing CSS variables by passing them to This is the example that's on that Ant page. So if in this example we wanted to use our color called <ConfigProvider
theme={{
token: {
colorPrimary: getComputedStyle(document.documentElement).getPropertyValue('--theme-color-components-primary-button-text')
},
}}
>
<Button />
</ConfigProvider> But maybe not. I'm just guessing that it should :) We could also generate a json file with style-dictionary that we can pass into that |
Wow! This might work 🤯 |
This is our style-dictionary config file. Basically it just says go through all those yaml files and spit out a bunch of CSS files. But you could also say spit out json, or Sketch, or a bunch of other types. |
And just for completeness, the way that the user-defined custom values get set from the Owncast admin is in Theme.tsx. It sets a bunch of CSS variables to overwrite all the ones that were previously set by the Owncast values. |
Ah cool that's also good to know. I learned so much stuff about theming 🤩 |
Hey @gabek , if you don't mind, I'd like to take a crack at this task. I'm wondering though, how much would you want to lean into the recommended conventions of Ant Design v5 during this upgrade versus trying to keep what exists while patching in Ant Design v5? I ask because I would look to remove more custom code, as an example, replace some of the code in |
I'm totally with you, less custom code is better, but it will probably take more upfront effort. But since there's no rush and no pressure to upgrade, it can take as long as it needs to. While the theming is the big change, there's probably smaller changes as well that I'm not aware of. So who knows how much stuff needs to get addressed, but if you're up for a challenge, it's all yours :D Sorry all the links above no longer work, since the Thanks for being interested in looking at this. It's been a todo for a long time, but has never been pressing enough to be a priority. But it would be great to be up to date. |
It would make sense to figure this out before any of the UI heavy features slated for the future, so we're not building new UI with deprecated components. |
Share your bug report, feature request, or comment.
This is likely a large task, especially from the theming side, they dropped Less support. In general that's good, but that's how we were previously customizing Ant's theme.
https://ant.design/docs/react/migration-v5
The text was updated successfully, but these errors were encountered: