January 2026, and here we are with a new release. Milestone 2.d focuses on everything CSS in mashlib and started adding accessibility to the profile-pane. Requirements have been discussed, and prototypes were implemented to make sure the work covers all community aspects.
In previous releases of SolidOS, a lot of effort was already contributed towards consolidating the existing styling. There were JavaScript files loading style, inline styles, jss and some ns.ui, which I cannot remember what they did. This work was reported in this ticket. In any case, that was where the SolidOS styling task was left before the grant. And of course, the panes and all repos have a lot of CSS, debatable if their location is correct or not.
The work of this milestone contained 3 goals:
A discussion was opened in the SolidOS GitHub repo where everyone could contribute to the discussion. Dissemination and further discussions happened on the SolidOS Matrix channel and in a weekly team meeting.
Next, I report on the conclusions.
High-level gathered requirements for SolidOS are:
The longevity requirement is undebatable.
Accessibility is a requirement by the grant, which involves using HTML5 and ARIA.
solid-ui was always envisioned as an HTML elements library dedicated to Solid functionality. Example: a list built based on a given predicate to more complex widgets like a login window. These HTML elements will have styles that can be themed to look like the app they are used in.
solid-panes are mini applications, such as profile dashboard, file explorer, and contacts. They use solid-ui HTML elements and add more HTML functionality where needed. They also have their own style elements for extra elements it implements. For example, the QR code in the profile card. Like solid-ui, the entire pane's style will be able to be themed to look like the app they are used in.
To make it easy for developers to reuse solid-ui HTML elements and maybe an entire pane, they need to be easy to add into their existing frameworks (React/Vue/Svelte/etc.) or use in simple HTML.
Different approaches were considered, directly prototyping in profile-pane what is possible. It was easy, together with these CSS decisions, to also implement accessibility features.
First, we tried to implement CSS modules in profile-pane. See the corresponding closed PR. Another approach was the usage of Shadow DOM. This work was consolidated in this closed PR. These prototypes were important to flesh out the requirements. At the same time, both of these approaches brought in technical implementation overhead that the team was not comfortable with.
In the end, changes will be introduced gradually to the above requirements. The panes, such as profile-pane will consolidate their CSS in dedicated style files which are directly imported in JavaScript, TypeScript, respectively, and released together with the lib of the repository. Later, solid-ui will possibly make use of Web Components for non-native HTML elements, which need to encapsulate solid-tailored features while preserving accessibility too.
Panes will make use of an overall SolidOS theme which, for now, resides in the mashlib repository. Attempts were made to create a light and a dark theme that automatically switch based on the user's OS preference. This will be rolled out later. For the future, we will consider a dedicated SolidOS or even a Solid theme repo. This choice only influences local development of panes, and for now, a copy of the light SolidOS theme is added to the dev folders of the panes, to make sure we get to see something when developing locally (npm run start). The choice was to have a fast solution for this milestone and debate later about a more holistic approach (a goal which is part of the grant work in a following milestone).
On the accessibility topic: profile-pane got a minimal facelift, just a few elements were rearranged while the heavier work was in HTML, moving everything to HTML5 with ARIA labels and CSS (focus, keyboard navigation to just name a few). A test library was added to signal WCAG standard violations in the future. We chose to work with the axe library.
All this work was tracked in a single GitHub issue: #225.
The profile dashboard is now WCAG 2.1 fully compliant. SolidOS has an agreed technical solution for the CSS usage. Minor dependency and vulnerability updates were also considered. Rdflib is now on the latest version too: 2.3.5!