How can I customize the color of a checkout extension app?

[HeyKK]

Hello,

I'm trying to build just simple app to display a message in checkout page using checkout UI extension and I notice that if I want to change the color of this block, It just very simple with checkout.liquid before.

But for now, we only need to stick with the components here https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components

Is there anyway I can custom like using background-color: pink or something like that?

Thank you and I'm very appreciated for your time with this question.

[Vishal2141]

The Branding API has an option to add colors or you can add colors with limitations using this Prop,
Status: 'info' | 'success' | 'warning' | 'critical'

Here is an example: 

 <Banner title="checkout-ui" status='info'>

      {translate('welcome', {target: extension.target})}

    </Banner>

[CodieApps]

At the moment you can't do that. You can use for example View component with 'transparent' | 'base' | 'subdued' values only.