Problem
The Special:NewLexeme's user interface was styled using WiKit tokens. With the WiKit design system being superseded by Codex (the official Wikimedia design system), the utilization of WiKit tokens is not recommended. These styles should be replaced in order to unblock the deprecation of WiKit, reduce maintenance costs and ensure consistency.
Solution
We have to replace WiKit tokens used to define the Special:NewLexeme's spacing by their Codex equivalents. In case a Codex equivalent is missing, we'll have to use our custom relative variables (see custom-variables.css file in the QB repo for reference).
Overview of files that contain spacing tokens and discrete values to be replaced (when applicable):
| File | Style | Replacement |
| AnonymousEditWarning.vue | .wbl-snl-anonymous-edit-warning margin: 1rem 0; | margin: var(--dimension-layout-xsmall) 0; [custom variable] |
| LanguageInput.vue | .wbl-snl-language-lookup .wikit .wikit-Lookup__label-wrapper gap: $dimension-spacing-xsmall; | This WiKit token specifies the gap between the label and the required asterisk. Under Codex guidelines, the asterisk is not the standard to indicate required fields anymore. In case we have arguments to keep it, then the replacement for the listed spacing token would be: gap: $spacing-50; |
| LemmaInput.vue | .wbl-snl-lemma-input.wikit .wikit-TextInput__label-wrapper gap: $dimension-spacing-xsmall; | This WiKit token specifies the gap between the label and the required asterisk. Under Codex guidelines, the asterisk is not the standard to indicate required fields anymore. In case we have arguments to keep it, then the replacement for the listed spacing token would be: gap: $spacing-50; |
| LexicalCategoryInput.vue | .wbl-snl-lexical-category-lookup .wikit .wikit-Lookup__label-wrapper gap: $dimension-spacing-xsmall; | This WiKit token specifies the gap between the label and the required asterisk. Under Codex guidelines, the asterisk is not the standard to indicate required fields anymore. In case we have arguments to keep it, then the replacement for the listed spacing token would be: gap:$spacing-50; |
| NewLexemeForm.vue | .wbl-snl-form: margin-top: $dimension-layout-xsmall; padding: $dimension-layout-small; | .wbl-snl-form: margin-top: var(--dimension-layout-xsmall); padding: var(--dimension-layout-small); [Replace by custom spacing variables to preserve our/Vector decision to use rem for layout spacing] |
| RequiredAsterisk.vue | .wbl-snl-required-asterisk margin-inline-start: $dimension-spacing-small; margin-inline-end: $dimension-spacing-small; | Under Codex guidelines, the asterisk is not the standard to indicate required fields anymore. In case we have arguments to keep it, then the replacement for the listed spacing tokens would be: margin-inline-start: $spacing-50 margin-inline-end: $spacing-50; [Replace by static values for consistency with Codex's approach to component spacing] |
| SearchExisting.vue | .wbl-snl-search-existing margin-top: 1rem; margin-bottom: 1rem; | .wbl-snl-search-existing margin-top: var(--dimension-layout-xsmall); margin-bottom: var(--dimension-layout-xsmall); |
| SpellingVariantInput.vue | &.wikit .wikit-Lookup label-wrapper: gap: $dimension-spacing-xsmall; // &__help-link padding-bottom: $wikit-Label-padding-block-end; | &.wikit .wikit-Lookup label-wrapper: This specifies the gap between the label and the required asterisk. Under Codex guidelines, the asterisk is not the standard to indicate required fields anymore. In case we have arguments to keep it, then the replacement for the listed spacing token would be: gap:$spacing-50;) // &__help-link padding-bottom: $spacing-50; [Using fixed units for consistency with Codex's elements] |
Acceptance criteria
- WiKit tokens used to define the spacing of the Special:NewLexeme page are replaced by Codex tokens or custom variables