Skip to content

Element styles left un-tokenized by the interface-token audit #63

Description

@minimaldesign

During the element-token audit (branch element-interface-tokens), every themable value in elements.*.css moved behind interface tokens in settings.ui.css. The items below were deliberately left hardcoded, mostly because they are decorative one-offs, structural plumbing, or typographic fine detail a theme is unlikely to tune. Listing them here for review: some need a redesign before it's worth deciding, and any of them can graduate to tokens later.

Decorative treatments (redesign candidates)

  • address stripe treatment (elements.text.css): padding, light-dark() background, and the repeating striped border-image built from --no-500 and --primary-500 are all inline. The whole treatment is one deliberate design; tokenizing its parts individually seemed pointless. If it survives a redesign, it could get an --address-* family.
  • abbr tooltip and help icon (elements.text.css): the ::before bubble hardcodes --base-0 on --base-900, a 400px max-width, and --o-4 opacity; the ::after help icon is an SVG in background, so it always renders black (SVG-as-image cannot resolve currentColor). Same bug the details marker had before it switched to a mask painted with currentColor; if abbr keeps the icon, it should get the same mask treatment and an --abbr-icon token.
  • mark shape (elements.text.css): padding: 0.15em 0.5em and the highlighter-style border-radius: 1em 0. The color already comes from --marker-color; the shape felt like part of the design, not a knob.

Typographic fine detail (em-relative, scales with context)

  • text-underline-offset: 2px on a, u, ins, abbr (elements.text.css)
  • code/var/kbd at 0.9em (elements.text.css): relative so inline code tracks the surrounding text size (pre got --pre-font-size since it sets its own size)
  • dd + dt at 0.5em (elements.text.css)
  • ins prefix marker content: "+ " (elements.text.css): could be --ins-content if anyone would change it
  • hr label internals (elements.text.css): the ::after padding, line-height: 1, and --tracking-sm around --hr-content

Structural plumbing (probably never tokens)

  • legend visually-hidden pattern (elements.form.css): replaced by the fieldset > [aria-hidden] heading
  • fieldset legend-replacement internals (elements.form.css): margin-bottom: var(--sm3) and font-size: var(--text-lg) on the [aria-hidden] heading
  • select mask plumbing (elements.form.css): the derived --split calc, the gradient layers that carve the icon zone, and the hsl(from ...) disabled colors (the chevron URL itself is now --select-icon)
  • input[type="number"] padding-inline-end: var(--xs1) (elements.form.css)
  • textarea fallback min-height: 6em when no rows attribute (elements.form.css)
  • dialog close-button positioning (elements.interactive.css): the --xs3 offsets pinning [aria-label="close pop-up"] to the corner
  • elements.text.quotes.css: spec-mandated per-language quote pairs, nothing themable

Sizing and small type defaults

  • audio max-width var(--tera1) (elements.media.css)
  • figcaption font-size: var(--text-sm) and font-style: italic (elements.media.css): the gap became --figcaption-spacing, the type did not
  • caption font-size: var(--text-sm) (elements.table.css): the gap became --table-caption-spacing

Related open question

--heading-spacing-condensed keeping its larger-than-default 20px value is now tracked separately in #64.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions