Background
Coming from T330694, there have been 10 deprecated legacy tokens identified in Codex, originated in WikimediaUI Base.
Colors and line-height are at maximum quick exchanges with designers/volunteers on the affected products.
Exchanging the breakpoint variables on the other hand has a minimal potential for a change in user-interface presentation. For one, the tablet breakpoint is decreased by 80px, pushing lesser devices into a mobile phone only experience. Second, desktop and desktop-wide kicks in later, by 120px and 480px each.
Specifically latter change will need a closer look when testing the patches.
Note that these changes are an important predecessor to work on a unified Grid in our interface. Without having one reliable breakpoint source, we can't ensure consistent design expectations! See T337282: Implement Grid in Codex for the Codex part of it.
@background-color-primary--hover: rgba( 51, 102, 204, 0.1 ); /* Neither A nor B: unique value, no replacement suggested */ @color-base--subtle: #72777d; /* A and B: @color-subtle is #54595d; @color-placeholder and @color-disabled have the same value */ @width-breakpoint-tablet: 720px; /* A: @min-width-breakpoint-tablet is 640px */ @width-breakpoint-desktop: 1000px; /* A: @min-width-breakpoint-desktop is 1120px */ @width-breakpoint-desktop-wide: 1200px; /* A: @min-width-breakpoint-desktop-wide is 1680px */ @width-breakpoint-desktop-extrawide: 2000px; /* Neither A nor B: unique value, no replacement suggested */ @font-family-sans: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif; /* A: @font-family-sans--fallback is suggested but it's sans-serif */ @line-height-x-small: 1.4285714; /* A: @line-height-small is suggested but it's 1.5714285 */
@line-height-heading: 1.3; /* A: @line-height-xx-small is suggested but it's 1.375 */
Proposal
Find a design-approved way to remove the deprecated tokens that don't have a 1:1 replacement value-wise.
Acceptance criteria
- Replace all mentioned tokens from codebases downstream
- Replace @background-color-primary--hover – CodeSearch
- Replace @color-base--subtle CodeSearch
- Replace @width-breakpoint-* CodeSearch
- Replace @font-family-sans CodeSearch
- Replace @line-height-x-small CodeSearch
- Replace @line-height-heading CodeSearch
- Remove all the tokens above from Codex
Note that MachineVision has been disabled on Commons, and it's planned to be archived (see T352884)