ds.css: A css framework recreating the DS / DS Lite's UI

I should go to sleep, so I’ll just mention a couple of things:

---

--font-system: 'ds-system', 'system-ui';

Generic families are keywords, not to be quoted. s/'system-ui'/system-ui/.

Also, avoid system-ui for general web content, which I would count this (though it’s more defensible than most uses). It’s fundamentally unsuitable and problematic. In light of the time, I leave you to find references; spec and MDN and various other easily-findable discussions all help.

---

outline-style: none;

… and then no :focus/:focus-visible styles.

You need focus styles. Keyboard accessibility is shot at present. Never clear outline without replacing it with something else.

---

details:open > p {

:open is far too new to rely on. It first shipped in any browser less than a year and a half ago, and Safari hasn’t quite shipped it yet. s/:open/[open]/. On that note, I suspect your details styles may have other issues in Safari, which still hasn’t finished switching to using display: list-item and ::marker for summary, like Firefox did ten years ago and Chromium five. Test it in Safari if convenient, or on Linux Epiphany/GNOME Web is a very good proxy for what Safari will do with web content.

---

button {
  /* "preload" button hold svg */
  @starting-style {
    background-image: url('./assets/svg/button_active.svg');
  }
  background-image: url('./assets/svg/button.svg');
}

button:active {
  background-image: url('./assets/svg/button_active.svg');
}

Ouch. I… guess that probably works. Wouldn’t surprise me if it didn’t, though, now or at some future time, aborting the request before it ever flies since the starting style is instantly discarded.

How about merging all the SVG files into one sprite sheet? In your CSS:

background-image: url('assets.svg#button');

And in assets.svg:

<view id="button" viewBox="…"/>

And take the opportunity to optimise the SVG. button_active.svg is 155 kB, 4.5 kB gzipped. Glancing at its source, it looks to be a 156 × 32 bitmap encoded as a bunch of 1 × 1 rectangles that have then been converted to paths and merged where adjacent, at a guess by svgo. That’s awful, at that point it should be just a raster image. Replace it with properly-designed paths, or raster. If staying with SVG, consider using patterns. You could also consider doing the whole thing with a (considerable) bunch of background-image linear-gradients. It would work for things like the buttons.

In the case of buttons, consider isolating the border from the rest; if it needs to be more complex than a single line, look into border-image (I see later on that you do use it for one thing). Or consider whether an inset box-shadow may be usable.

---

Huh. Longer than I intended, and more than a couple. Probably more I could say, but I really should go to sleep.

ah this is so nostalgic, i want to find a use for this!

The demo site seems really slow on phone