[FR] Public styles API for existing components

Is your feature request related to a problem? Please describe. Hey, I always prefer to use component libraries such hope-ui, and in a case when an ecosystem isn’t mature, like now with solid-js, I faced an issue with the deep styling of third-party libraries.

Let’s describe an example with code:

const MyComponent = (props) => {
  // some logic
  return (
    <Box>
       <Heading>Format your text!</Heading>
       {* A third-party rich text editor *}
       <TextEditor {...props} />
     </Box>
  )
}

In that case, I can’t apply hope-ui styles to inner buttons, because they are deeply nested. Of course I can write something like:

const MyComponent = (props) => {
  // some logic
  return (
    <Box css={{
        '& button': {
            color: '$primary2',
            //.....
        }
     }}>
       <Heading>Format your text!</Heading>
       {* A third-party rich text editor *}
       <TextEditor {...props} />
     </Box>
  )
}

but this means that I should rewrite all styles from scratch using theme variables to keep design consistency

Describe the solution you’d like The simple solution will be to export styles from existing barrels like this https://github.com/fabien-ml/hope-ui/blob/main/packages/solid/src/components/button/button.styles.ts

and our previous example could look like this:

import { buttonStyles } from '@hope-ui/core'

const MyComponent = (props) => {
  // some logic
  return (
    <Box css={{
        '& button': buttonStyles,
     }}>
       <Heading>Format your text!</Heading>
       {* A third-party rich text editor *}
       <TextEditor {...props} />
     </Box>
  )
}

Describe alternatives you’ve considered The alternative way is to apply CSS presets in global styles but this will decrease flexibility

[fabien-ml]

@Miruzz i’ve published the v0.4.3 which export the styles. It’s available over the next tag on npm. I’ll switch it to latest after the end of the SolidJS hackathon voting period.

[Miruzz]

Such great news! I’ll wait then and meanwhile play a bit with the library. BTW my star is for you ❤️