tests/e2e: add test for authentication flow in compatibility mode (#14392)

* tests/e2e: add test for authentication flow in compatibility mode

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: Add prefix class to CSS for easier debugging of constructed stylesheets.

- Use CSS variables for highlighter.

* web: Fix issue where MDX components apply styles out of order.

* web: Fix hover color.

* web: Fix CSS module types. Clean up globals.

* web: Fix issues surrounding availability of shadow root in compatibility mode.

* web: Fix typo.

* web: Partial fixes for storybook dark theme.

* web: Fix overflow.

* web: Fix issues surrounding competing interfaces attempting to apply styles.

* fix padding in ak-alert in. markdown

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: Minimize use of sub-module exports.

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Teffen Ellis <teffen@sister.software>

web/src/components/ak-hint/ak-hint.stories.ts

@@ -31,18 +31,19 @@ const container = (testItem: TemplateResult) =>
             li {
                 display: block;
             }
-            p {
-                color: black;
-                margin-top: 1em;
+
+            ak-hint {
+                --ak-hint--Color: var(--pf-global--Color--dark-100);
             }
 
-            * {
-                --ak-hint--Color: black !important;
+            @media (prefers-color-scheme: dark) {
+                ak-hint {
+                    --ak-hint--Color: var(--pf-global--Color--light-100);
+                }
             }
-            ak-hint-title::part(ak-hint-title),
-            ak-hint-footer::part(ak-hint-footer),
-            slotted::(*) {
-                color: black;
+
+            p {
+                margin-top: 1em;
             }
         </style>