fix: replacing usecolormodevalue to _dark

[gracebir]

Describe your changes

replacing useColorModeValue with _dark

Screenshots

[vercel]

@gracebir is attempting to deploy a commit to the Team Bearstudio Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
start-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2023 10:52am

[ivan-dalmet]

Hi @gracebir!
Thanks a lot for this PR!
But unfortunately it's seems broken :/

You can check here the issue in dark mode
https://start-ui-git-fork-gracebir-revert-usecolormodevalue-bearstudio.vercel.app/storybook/index.html?path=/docs/components-select--docs

[ivan-dalmet]

And by reading the code change, this will not work unfortunately.
The object that you updated needs to output real css not Chakra values ;)

[gracebir]

And by reading the code change, this will not work unfortunately. The object that you updated needs to output real css not Chakra values ;)

@ivan-dalmet , could please you articulate, what do mean you by output real css?

[yoannfleurydev]

And by reading the code change, this will not work unfortunately. The object that you updated needs to output real css not Chakra values ;)

@ivan-dalmet , could please you articulate, what do mean you by output real css?

The library we are using for the Select component is react-select and to customize the react-select styles, we can't use Chakra UI "selectors" like _hover or _dark. I think we need to provide real CSS in JS for this component.

Also, we can't use Chakra variables as is (like brand.600) because it has no value in CSS, we need to convert it before (using Chakra's helper) so brand.600 become a CSS value like #ad032c for example.

[gracebir]

And by reading the code change, this will not work unfortunately. The object that you updated needs to output real css not Chakra values ;)

@ivan-dalmet , could please you articulate, what do mean you by output real css?

The library we are using for the Select component is react-select and to customize the react-select styles, we can't use Chakra UI "selectors" like _hover or _dark. I think we need to provide real CSS in JS for this component.

Also, we can't use Chakra variables as is (like brand.600) because it has no value in CSS, we need to convert it before (using Chakra's helper) so brand.600 become a CSS value like #ad032c for example.

sure @yoannfleurydev

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication