Page MenuHomePhabricator

Add border shorthand tokens
Closed, ResolvedPublic



Developer experience feedback from applying Codex tokens into GrowthExperiments in T332567 was the confusion to have to write
border: @border-width-base @border-style-base @border-color-subtle instead of a border: @border-subtle token featuring all three common values.

We've discussed a number of options:

  1. Create border shorthands for most used border styles (e.g. border-base): Potential issue: we might have to create as many border shortcuts as border colors there are: border: @border-base
  2. Create border shorthands for only width and style (border-thin-solid), and allow specifying border color separately in the same line. Potential issue: Unionizing first two property values is unseen in my 25y of CSS border: @border-thin-solid @border-color-progressive
  3. Create border color mixins that allow customizing style, width and color. Potential issue: Using a mixin for borders seems obfuscated code for questionable value – .border( @border-color-progressive )


We've decided to add ~5 shorthand tokens for the most common cases – @border-base, @border-progressive, etc

Acceptance criteria for done

  • Add border shorthand tokens
    • Apply them in Codex and
    • …in extensions transformed
  • Document them in the Figma library

Event Timeline

Restricted Application triaged this task as High priority. · View Herald TranscriptApr 5 2023, 6:28 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 906091 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Add common `border` shorthand tokens

You could also have a single shorthand for some default value and then more targeted attributes like border-color could be used to override it. (That would transpile to slightly more verbose CSS but I don't think there's any real disadvantage to it.) The approach taken by the patch is nicer though, IMO.

Change 906091 merged by jenkins-bot:

[design/codex@main] tokens: Add common `border` shorthand tokens

Change 907988 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.8.0 to v0.9.0

Change 907988 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.8.0 to v0.9.0

Test wiki created on Patch demo by KHarlan (WMF) using patch(es) linked to this task:

Test wiki on Patch demo by KHarlan (WMF) using patch(es) linked to this task was deleted: