Prop for page header background color

[matheusps]

Problem

There are designs where the background is soft instead of base. This is not supported by the Page component by default.

Solution

Accept a variant on the page

<Page variant="soft | base">

Usage examples

No response

Dependencies

No response

References

Figma Page: https://www.figma.com/design/xmWRVrjShWlZwchJg0huzZ/Product-%E2%80%93-FastStore-WebOps-v2?node-id=929-75490&node-type=frame&m=dev.

[beatrizmilhomem]

Agreed!

Related issue to define the pattern #1788

[renatamottam]

Nice! This background is being used on dashboards proposals. It'll definitely help :)

[davicostalf]

• Have we decided on changing the page header background color based on the page background. I'm all for it, but I remember there were hold outs.

• I'm worried about calling this prop variant. We may have different types of page headers in the future, with differences other than just the background color.

• One token is called bg-base and the other is bg-base-soft. Won't it be confusing for the prop values to be named soft and base?

[lucasaarcoverde]

One token is called bg-base and the other is bg-base-soft. Won't it be confusing for the prop values to be named soft and base?

I agree with that! Maybe we should take the primary and secondary approaches, which would open space for other variants

[felipepowlist]

Isn't it a matter of the header having a background color vs being transparent? 🤔