Light mode for NavPage & FormPage

[feloy]

What does this PR do?

Adds support to light mode on NavPage & FormPage components

Screenshot / video of UI

NavPage

FormPage

What issues does this PR fix or reference?

Fixes #6889

[axel7083]

Nice!

[ekidneyrh]

Nice! I'm still working on what colours to work for the missing components on here, but I'll update asap on the tracking ticket :)

[deboer-tim]

In the current design, forms have an intentional color change between the header area and the content. These color values remove that. @ekidneyrh is this an intentional design change? If so, do we need to keep a separate -bg color? The area between the title and start of form also looks big (since it's effectively double-padded), should we reduce this?

[ekidneyrh]

Nav Page:
Nav Page.pdf

Form Page:

Content Theming.pdf

Yah I'm in favour of getting rid of of the extra padding and use the same background for the header and the rest of the form. I don't think there's a reason to have two different colours.

Is there any values im missing? I know there is some overlap with the image and volumes pages. I dont think there's a need to have a bg colour for the table-body-label-text on the nav pages.

[feloy]

Yah I'm in favour of getting rid of of the extra padding and use the same background for the header and the rest of the form. I don't think there's a reason to have two different colours.

I have added a commit to remove the top padding of the forms using the FormPage component

[feloy]

Nav Page: Nav Page.pdf

The table-body-label-text defined in #7151 was intended for the text Kubernetes/Podman in the Environment column (inside a label). You are reusing this name for the text of the header (which was defined by table-header-text in #7151). I'm ok to use table-body-label-text for the header text, but in this case it will be missing the color for the text in the Environment column.