Allow extending palettes

[BasixKOR]

Feature request 🚀

• [ ] I will create Pull Request
• [x] It's just a suggestion

Expected

It would be nice to use more colors other than the defined names on Geist. Nice example would be brand colors, which currently doesn't really fit in current theme model.

Examples

const myTheme = {
  type: 'Custom',
  palette: {
    twitter: '#1DA1F2',
  },
};

// and use it like 

function Login() {
  return <Button type="twitter">Log in with Twitter</Button>;
}

Programme (Optional)

Others (Optional)

[unix]

The current value (or types) of type is fixed and not inferred from palette, to implement this feature may require changes to all components.

On the other hand, some components need to provide multiple color values, such as background, foreground, border color, color in the hover state, color in the disabled state, etc.

But I think the proposal is still very good, maybe we can specify the hue object for each component:

<Button palette={{
  primar: '#fff',
  secondary: '#000',
}} />

Each component contains at least A and may be extended with more. Manual definition and assembly when the developer wants to extend the component:

const myTheme = {
  type: 'Custom',
  palette: {
    twitter: '#1DA1F2',
  },
};

const MyButton = () => {
  const theme = useTheme()
  return <Button palette={{ primar: theme.palette.twitter }} />
}

This allows users to change just one component or customize the global. For single components, if the definition of a color is missing, the color value is automatically supplemented by inference based on the primary color.

This is going to be a big change and I would like to hear all the ideas.

[Xariwey]

@unix

Going to bump this one intead of opennig a new one since its very similar currently the types are very defined but it would be nice to include the gradients of the default palletes

ex: <Card type="successLight" >

it would be a nice addition