Refactor consent components to use CSS variables that match the brandable colour palette from designs

[NevilleS]

Description

Our latest beautiful consent components designs Figma link use 12 brandable colours to set the styles:

I'd recommend a nice global colour palette of CSS variables to match these like:

--fides-consent-overlay-primary-color (used for "Modal & Banner Outline")
--fides-consent-overlay-primary-button-color (used for "Primary button resting")
--fides-consent-overlay-primary-hover-color (used for "Primary button hover")
--fides-consent-overlay-primary-active-color (used for "Switch active")
--fides-consent-overlay-primary-active-disabled-color (used for "Switch active disabled")
--fides-consent-overlay-inactive-color (used for "Switch inactive")
--fides-consent-overlay-disabled-color (used for "Switch disabled")
--fides-consent-overlay-background-color (used for "Background")
--fides-consent-overlay-row-hover-color (used for "Row hover")
--fides-consent-overlay-row-divider-color (used for "Row divider")
--fides-consent-overlay-title-font-color (used for "Title font")
--fides-consent-overlay-body-font-color (used for "Body font")

Assumptions

Main assumption here is that these should form the core 12 brandable colours for all the components. It's also safe to assume we'll want to make it easy to configure these with a styling editor in the future!

Acceptance Criteria

• Banner styles can be customized using the 12-colour palette above
• Modal styles can be customized using the 12-colour palette above

Mockups

See Figma links:

• Stylesheet: https://www.figma.com/file/dmEwdK3xZwjKfGVQ9t66xe/Fides-v.2-Master-Working-Files?type=design&node-id=6464-134350&t=8104bV4t4W5TBKPv-0
• Two alternative mockups using different branding: https://www.figma.com/file/dmEwdK3xZwjKfGVQ9t66xe/Fides-v.2-Master-Working-Files?type=design&node-id=6464-134350&t=ls6XpE1B1Ume7uLk-0

Implementation Notes/Details

[Roger-Ethyca]

moving to done