agama-project / agama / 27210549493
83%

DEFAULT BRANCH: master
Ran
Jobs 3
Files 949
Run time 2min
Badge
Embed ▾
README BADGES
x

If you need to use a raster PNG badge, change the '.svg' to '.png' in the link

Markdown

Textile

RDoc

HTML

Rst
coverage: 81.453% (-0.009%) from 81.462%
27210549493

push

github

web-flow 
feat(web): add dark and high-contrast styles (#3604)

# TL;DR

Introduce a full dark mode and a clean, maintainable styling system
built on [PatternFly
6.5.1](https://www.patternfly.org/releases/release-highlights). Users
can easily switch between Light, Dark, System, and Contrast modes, with
their preferences remembered and fully accessible. Shared styles have
been refactored into utilities, backed by a curated `--agm-t--*` token
API and class-based theming on `<html>`. The system also supports
per-product branding and theme-aware logos, creating a solid foundation
for theming that can evolve over time.

Related to https://jira.suse.com/browse/PED-14955 (private link)

## In depth

A dark theme has been one of the longest-missing pieces of the Agama web
UI sop far. It was not for lack of interest: it kept slipping behind
other priorities, and there was never quite enough time to do it
properly. Doing it properly mattered, because a real theming system is
is more than superficial styling. It needs solid foundations underneath,
and for a long time those foundations were a single, ever-growing
stylesheet full of one-off PatternFly tweaks :see_no_evil:

In retrospect, the delay has been somewhat beneficial for the project.
The web UI is much more stable now, and PatternFly has matured: its
design-token system and built-in dark theme have been part of v6 for a
while, and high contrast was finalized in 6.5 (it was a beta in 6.4) to
meet enhanced WCAG AAA contrast across both light and dark. So instead
of hand-building (and forever maintaining) a custom dark palette, Agama
could stand on PatternFly's styles and add only what makes Agama feel
like Agama. This PR finally delivers dark mode, and uses the moment to
clean up the styling foundations and put in place a long-term
foundation: a compact, understandable set of appearance controls, paired
with the flexibility for each product to give the installer its own
identity.


### Visual System Enhancements

- U... (continued)

4463 of 6537 branches covered (68.27%)

Branch coverage included in aggregate %.

89 of 109 new or added lines in 11 files covered. (81.65%)

32 existing lines in 7 files now uncovered.

24258 of 28724 relevant lines covered (84.45%)

104.67 hits per line

Uncovered Changes

Lines Coverage ∆ File
10
15.79
 web/src/hooks/use-product-appearance.ts
3
87.5
 web/src/components/core/AppearanceSettings.tsx
2
0.0
 0.0% web/src/index.tsx
1
31.82
 0.87% web/src/App.tsx
1
80.0
 -20.0% web/src/components/product/ProductLogo.tsx
1
94.64
 web/src/context/appearance.tsx
1
0.0
 0.0% web/src/context/root.tsx
1
85.71
 web/src/hooks/use-persisted-state.ts

Coverage Regressions

Lines Coverage ∆ File
13
88.06
 0.09% web/web/src/test-utils.tsx
12
34.15
 0.81% web/web/src/App.tsx
3
0.0
 0.0% web/web/src/context/root.tsx
1
0.0
 0.0% web/src/context/root.tsx
1
98.82
 0.01% web/web/src/components/core/Page.tsx
1
90.0
 -10.0% web/web/src/components/product/ProductLogo.tsx
1
31.82
 0.87% web/src/App.tsx
Subprojects
ID Flag name Job ID Ran Files Coverage
3 web 27210549493.3 631
77.59
 GitHub Action Run
3 service 27122915866.3 318
92.4
 GitHub Action Run
1 rust 19474749743.1 185
22.45
 GitHub Action Run
Source Files on build 27210549493