web/a11y: Prefers more field contrast

web/src/admin/AdminInterface/index.entrypoint.ts

@@ -83,11 +83,13 @@ export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterfac
         PFButton,
         PFDrawer,
         PFNav,
-        css`
+        // HACK: Fixes Lit Analyzer's outdated parser.
+        (css as typeof css) /*css*/ `
             .pf-c-page__main {
                 scrollbar-gutter: stable;
             }
-
+        `,
+        css`
             .pf-c-page__main,
             .pf-c-drawer__content,
             .pf-c-page__drawer {

web/src/common/styles/authentik.css

@@ -201,8 +201,28 @@ html > form > input {
 /* #region Form controls */
 
 .pf-c-form-control {
-    --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--200);
-    --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--BackgroundColor--200);
+    /* !important is required to ensure priority when in compatibility mode. */
+
+    --pf-c-form-control--readonly--BackgroundColor: var(
+        --pf-global--BackgroundColor--200
+    ) !important;
+    --pf-c-form-control--disabled--BackgroundColor: var(
+        --pf-global--BackgroundColor--200
+    ) !important;
+
+    --pf-c-form-control--BorderTopColor: transparent !important;
+    --pf-c-form-control--BorderRightColor: transparent !important;
+    --pf-c-form-control--BorderLeftColor: transparent !important;
+
+    --pf-c-form-control--Color: FieldText !important;
+    --pf-c-form-control--BackgroundColor: transparent !important;
+
+    @media (prefers-contrast: more) {
+        --pf-c-text-input-group--placeholder--Color: GrayText !important;
+        --pf-c-form-control--placeholder--Color: GrayText !important;
+
+        --pf-c-form-control--BackgroundColor: Field !important;
+    }
 
     /* #region Caps Lock */
 
@@ -217,6 +237,33 @@ html > form > input {
     /* #endregion */
 }
 
+input.pf-c-form-control {
+    &[type="text"],
+    &[type="email"],
+    &[type="password"],
+    &[type="search"],
+    textarea {
+        @media not (prefers-contrast: more) {
+            border-inline: 0;
+            border-block-start-color: transparent;
+        }
+
+        @media (prefers-contrast: more) {
+            border: 1px solid ButtonBorder !important;
+
+            &:focus {
+                border: 1px solid Highlight !important;
+            }
+        }
+    }
+}
+
+@media (prefers-contrast: less) {
+    input {
+        outline: none !important;
+    }
+}
+
 /* #region Buttons */
 
 .pf-c-button {

web/src/common/styles/theme-dark.css

@@ -207,13 +207,6 @@ select.pf-c-form-control {
 .pf-c-form-control {
     /* !important is required to ensure priority when in compatibility mode. */
 
-    --pf-c-form-control--BorderTopColor: transparent !important;
-    --pf-c-form-control--BorderRightColor: transparent !important;
-    --pf-c-form-control--BorderLeftColor: transparent !important;
-    --pf-global--BackgroundColor--100: var(--ak-dark-background-light) !important;
-    --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light) !important;
-    --pf-c-form-control--Color: var(--ak-dark-foreground) !important;
-
     --pf-c-form-control--readonly--BackgroundColor: var(--ak-dark-background-light) !important;
     --pf-c-form-control--disabled--BackgroundColor: var(--ak-dark-background-light) !important;
 }
@@ -236,7 +229,7 @@ select.pf-c-form-control {
 }
 
 .pf-c-select__toggle.pf-m-typeahead {
-    --pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light);
+    --pf-c-select__toggle--BackgroundColor: Field;
 }
 
 .pf-c-select__menu {

web/src/components/ak-search-ql/index.ts

@@ -111,10 +111,6 @@ export class QLSearch extends FormAssociatedElement<string> implements FormAssoc
                         --ak-dark-background-light
                     );
                 }
-
-                .pf-c-search-input__text::before {
-                    border: 0;
-                }
             }
 
             .pf-c-search-input__menu {
@@ -124,6 +120,14 @@ export class QLSearch extends FormAssociatedElement<string> implements FormAssoc
                 max-height: 50vh;
             }
         `,
+        // HACK: Fixes Lit Analyzer's outdated parser.
+        (css as typeof css) /*css*/ `
+            @media not (prefers-contrast: more) {
+                .pf-c-search-input__text::before {
+                    border: none;
+                }
+            }
+        `,
     ];
 
     //#region Properties

web/src/elements/ak-mdx/ak-mdx.tsx

@@ -57,13 +57,15 @@ export type Replacer = (input: string) => string;
 
 @customElement("ak-mdx")
 export class AKMDX extends AKElement {
-    @property({ type: String, reflect: true })
+    // HACK: Fixes Lit Analyzer's parsing of TSX files with decorators.
+
+    @((property as typeof property)({ type: String, reflect: true }))
     public url?: string;
 
-    @property()
+    @((property as typeof property)())
     public content?: string;
 
-    @property({ attribute: false })
+    @((property as typeof property)({ attribute: false }))
     public replacers: Replacer[] = [];
 
     #reactRoot: Root | null = null;

web/src/elements/forms/FormGroup.ts

@@ -25,22 +25,30 @@ export class AKFormGroup extends AKElement {
         PFForm,
         PFButton,
         PFFormControl,
-
         css`
             :host([theme="dark"]) {
                 --marker-color: var(--pf-global--Color--200);
                 --marker-color-hover: var(--ak-dark-foreground-darker);
-            }
 
-            .pf-c-form__field-group-header-description {
-                text-wrap: balance;
+                details {
+                    @media (prefers-contrast: more) {
+                        background: var(--ak-dark-background-light);
+                    }
+                }
             }
 
             details {
+                @media (prefers-contrast: more) {
+                    border: 1px solid var(--pf-global--BorderColor--200);
+                    background: var(--pf-global--BackgroundColor--150);
+                }
+
                 &::details-content {
                     padding-inline-start: var(
                         --pf-c-form__field-group--GridTemplateColumns--toggle
                     );
+                    padding-inline-end: var(--pf-global--spacer--md);
+                    padding-block-end: var(--pf-global--spacer--md);
                 }
 
                 & > summary {
@@ -52,6 +60,9 @@ export class AKFormGroup extends AKElement {
                     cursor: pointer;
                     user-select: none;
 
+                    font-weight: bold;
+                    text-decoration: underline;
+
                     &::marker {
                         color: var(--marker-color, var(--pf-global--Color--200));
                         transition: var(--pf-c-form__field-group-toggle-icon--Transition);
@@ -70,6 +81,12 @@ export class AKFormGroup extends AKElement {
                 }
             }
         `,
+        // HACK: Fixes Lit Analyzer's outdated parser.
+        (css as typeof css) /*css*/ `
+            .pf-c-form__field-group-header-description {
+                text-wrap: balance;
+            }
+        `,
     ];
 
     //region Properties

web/src/elements/forms/Radio.ts

@@ -56,7 +56,9 @@ export class Radio<T> extends CustomEmitterElement(AKElement) {
                     color: var(--pf-global--disabled-color--100);
                 }
             }
-
+        `,
+        // HACK: Fixes Lit Analyzer's outdated parser.
+        (css as typeof css) /*css*/ `
             .pf-c-radio__description {
                 text-wrap: balance;
             }

web/src/elements/forms/SearchSelect/ak-search-select-view.ts

@@ -9,7 +9,7 @@ import type { GroupedOptions, SelectOption, SelectOptions } from "#elements/type
 import { randomId } from "#elements/utils/randomId";
 
 import { msg } from "@lit/localize";
-import { CSSResult, html, nothing, PropertyValues } from "lit";
+import { css, CSSResult, html, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
@@ -69,7 +69,17 @@ export interface ISearchSelectView {
  */
 @customElement("ak-search-select-view")
 export class SearchSelectView extends AKElement implements ISearchSelectView {
-    static styles: CSSResult[] = [PFBase, PFForm, PFFormControl, PFSelect];
+    static styles: CSSResult[] = [
+        PFBase,
+        PFForm,
+        PFFormControl,
+        PFSelect,
+        css`
+            .pf-c-select {
+                --pf-c-select__toggle-wrapper--MaxWidth: unset;
+            }
+        `,
+    ];
 
     //#region Properties
 

web/src/elements/table/Table.ts

@@ -80,10 +80,6 @@ export abstract class Table<T extends object>
         PFDropdown,
         PFPagination,
         css`
-            :host {
-                container-type: inline-size;
-            }
-
             [part="table-container"] {
                 @media (max-width: 1199px) {
                     overflow-x: auto;
@@ -94,9 +90,6 @@ export abstract class Table<T extends object>
                 .presentational {
                     --pf-c-table--cell--MinWidth: 0;
                 }
-                @container (width > 1200px) {
-                    --pf-c-table--cell--MinWidth: 9em;
-                }
             }
 
             /**
@@ -220,6 +213,18 @@ export abstract class Table<T extends object>
                 z-index: var(--pf-global--ZIndex--lg);
             }
         `,
+        // HACK: Fixes Lit Analyzer's outdated parser.
+        (css as typeof css) /*css*/ `
+            :host {
+                container-type: inline-size;
+            }
+
+            .pf-c-table {
+                @container (width > 1200px) {
+                    --pf-c-table--cell--MinWidth: 9em;
+                }
+            }
+        `,
     ];
 
     protected abstract apiEndpoint(): Promise<PaginatedResponse<T>>;