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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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