feat(passport): Support Designer-customized authn/authz screens

[Cosmin-Parvulescu]

Description

• Moved RGB extractor to helper in design system
• Consolidated design system helpers as module
• Added code based defaults to designer and authn and authz
• Updated handling of empty properties in designer form
• Added typings to app props
• Added dark mode hooks and outlet context for clientId and authorization routes
• Added primary color variables and injected them through Helmet
• Added theme contexts for authn and authz

IMPORTANT

• After demo and discussions, I disabled dark mode for authn/z components
• GraphicURL (side-graphics) is taken from the designer
• Border radius is taken from the designer
• Ring colors are taken from the designer

Related Issues

• Closes feat(passport): Support Designer-customized authn/authz screens #2195

Testing

• Visual

Checklist

• I have read the CONTRIBUTING guidelines
• I have tested my code (manually and/or automated if applicable)
• I have updated the documentation (if necessary)

[Cosmin-Parvulescu]

Had a chat with @picassobanana, waiting for product meeting feedback with next steps:
~

• Use background image
• Preserve aspect ratio
• Flex right side of authn/z screen
• Create dark mode colors for background
• Create dark mode colors for email (2-steps)

[maurerbot]

Let's add some docs: https://docs.rollup.id/platform/console/designer

[Cosmin-Parvulescu]

Let's add some docs: https://docs.rollup.id/platform/console/designer

What would the docs contain? Ideally this would be some copy with the motivation behind the features, how it impacts users, how we hope for it to be used, with some screenshots maybe. This maybe should come from product? And in future features, perhaps should be written down beforehand just to give a north star to the feature. :)

[betimshahini]

Docs will be addressed holistically under #2349

conflicts