Page MenuHomePhabricator

Tokens: Use variable references in Less and Sass output
Closed, ResolvedPublic5 Estimated Story Points

Description

As part of T365207, we're using variable references in the CSS variable output, but not in the Less/Sass output files yet. We should also use variable references in the Less/Sass output.

Acceptance criteria

  • Do the same thing as T365207, but for the Less and Sass output formats:
    • Change @border-color-input--hover: #36c; to @border-color-input--hover: @border-color-progressive;
    • Keep @border-color-divider: #a2a9b1;, do not change it to @border-color-divider: @color-gray400; (since there is no @color-gray400 variable in the output)
  • Remove the CSS variable treatment from the border category, since we won't need it anymore. Verify that the output changes from @border-base: var( --border-base, 1px solid #202122 ); to @border-base: @border-width-base @border-style-base @border-color-base;
    • We may be able to do this even without touching the Less/Sass formatters. If we change the CSS output by using a transitive transform, then that may already cause the value of @border-base to be 1px solid var( --border-color-base, #202122 ); and that's good enough

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change #1035079 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] tokens: Use variable references in Sass, full CSS, and Less outputs

https://gerrit.wikimedia.org/r/1035079

Change #1035080 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] tokens: Remove CSS variables for border- tokens

https://gerrit.wikimedia.org/r/1035080

Change #1035079 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] tokens: Use transform instead of custom formatter for Less with CSS vars

https://gerrit.wikimedia.org/r/1035079

Change #1039598 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] tokens: Use variable references in Sass, Less and full CSS outputs

https://gerrit.wikimedia.org/r/1039598

Change #1035080 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] tokens: Remove CSS variables for border- tokens

https://gerrit.wikimedia.org/r/1035080

AnneT triaged this task as Medium priority.Jun 10 2024, 5:38 PM
AnneT set the point value for this task to 5.

Change #1035079 merged by jenkins-bot:

[design/codex@main] tokens: Use transform instead of custom formatter for Less with CSS vars

https://gerrit.wikimedia.org/r/1035079

Change #1039598 merged by jenkins-bot:

[design/codex@main] tokens: Use variable references in Sass, Less and full CSS outputs

https://gerrit.wikimedia.org/r/1039598

Change #1035080 merged by jenkins-bot:

[design/codex@main] tokens: Remove CSS variables for border- tokens

https://gerrit.wikimedia.org/r/1035080

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

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

https://gerrit.wikimedia.org/r/1049640

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f74be9bc8e/w

Change #1049640 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

https://gerrit.wikimedia.org/r/1049640