Get the styles of a component from the theme's design token

[dylan-westbury]

Description

Is it possible to get the styles of a component from the theme's design token?

For example, below the user is setting styles for the input below.

const Example = () => {
  const NBInput = Factory(TextInput);
  return <NBInput placeholder="Click on the button" borderWidth="1" borderColor="cyan.400" borderRadius="md" />;
};

Where it would make more sense to get the styles from the theme's design token for a TextInput (e.g. outlined text input variant).

 <NBInput placeholder="Click on the button" ref={inputRef} borderWidth={inputStyles.borderWidth} borderColor={inputStyles.borderColor} borderRadius={inputStyles.borderRadius} />

I have tried tried useToken, but I can't actually access the styles I believe

const [token] = useToken('components', ['Input.variants.filled']);

Problem Statement

If it doesn't already exist, it should exist so custom components can refer to the styling of the theme, so when the theme does update the component will update, as opposed to updating the individual component .

Proposed Solution or API

const [styles] = useToken('components', ['Input.variants.filled.baseStyles']);

Alternatives

No response

Additional Information

No response

[Viraj-10]

Hi @dylan-westbury, although it's a good idea. not sure if we should do that. cause it contains styling specific to Input which is designed for NB Input. What I would suggest is to pass a second argument component theme to the factory function which you can copy from NativeBase input.ts file. then override inline where ever you want to.

[Viraj-10]

converting this to feature request discussion.