How to use custom color via components props?

[abdullahtariq1171]

Lets say our theme has a color maroon that we've added in tailwind.config.ts plugin

nextui({
      themes: {
        light: {
          colors: {
            maroon: {
              50: '#ffe2e2',
              100: '#ffb2b2',
              200: '#ff8080',
              300: '#fe4e4e',
              400: '#fe1f1c',
              500: '#e50a03',
              600: '#b20301',
              700: '#800000',
              800: '#4e0000',
              900: '#1f0000',
            },
          },
        },
      },
    }),

Now I want to use that color for my Button prop

<Button color='maroon'> Click me </Button>

I'm using "@nextui-org/react": "^2.3.6", "@nextui-org/system": "^2.0.7", and "@nextui-org/theme": "^2.2.3",