#####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 [[ https://github.com/wikimedia/wikidata-query-builder/blob/master/src/styles/custom-variables.css | 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
| [[ https://github.com/wmde/new-lexeme-special-page/blob/main/src/components/AnonymousEditWarning.vue | AnonymousEditWarning.vue ]] | .wbl-snl-anonymous-edit-warning `margin: 1rem 0;` | `margin: var(--dimension-layout-xsmall) 0;` [custom variable]
| [[ https://github.com/wmde/new-lexeme-special-page/blob/main/src/components/LanguageInput.vue | LanguageInput.vue ]] | .wbl-snl-language-lookup .wikit .wikit-Lookup__label-wrapper `gap: $dimension-spacing-xsmall;` | Replacement shouldn't be necessary if Lookup is combined with Field, which will take care of the input's label style (see T370057)
| [[ https://github.com/wmde/new-lexeme-special-page/blob/main/src/components/LemmaInput.vue | LemmaInput.vue ]]| .wbl-snl-lemma-input.wikit .wikit-TextInput__label-wrapper `gap: $dimension-spacing-xsmall;` | Replacement shouldn't be necessary if TextInput is combined with Field, which will take care of the input's label style (see T370054)
| [[ https://github.com/wmde/new-lexeme-special-page/blob/main/src/components/LexicalCategoryInput.vue | LexicalCategoryInput.vue ]] | .wbl-snl-lexical-category-lookup .wikit .wikit-Lookup__label-wrapper `gap: $dimension-spacing-xsmall;` | Replacement shouldn't be necessary if Lookup is combined with Field, which will take care of the input's label style (see T370057)
| [[ https://github.com/wmde/new-lexeme-special-page/blob/main/src/components/NewLexemeForm.vue | NewLexemeForm.vue ]] | .wbl-snl-form: `margin-top: $dimension-layout-xsmall;` `padding: $dimension-layout-small;` | [Replace by custom spacing variables] .wbl-snl-form: `margin-top: var(--dimension-layout-xsmall);` `padding: var(--dimension-layout-small);`
| [[ https://github.com/wmde/new-lexeme-special-page/blob/main/src/components/RequiredAsterisk.vue | 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 tokens would be: `font-size: $font-size-xxlarge;` [no change required], `margin-inline-start: $spacing-50` margin-inline-end: $spacing-50; [Replace by static values for consistency with Codex's approach to component spacing]
| [[ https://github.com/wmde/new-lexeme-special-page/blob/main/src/components/SearchExisting.vue | SearchExisting.vue ]] | .wbl-snl-search-existing `margin-top: 1rem;` `margin-bottom: 1rem;` | .wbl-snl-search-existing `margin-top: var(--dimension-spacing-large);` `margin-bottom: var(--dimension-spacing-large);`
| [[ https://github.com/wmde/new-lexeme-special-page/blob/main/src/components/SpellingVariantInput.vue | 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: Replacement shouldn't be necessary if Lookup is combined with Field, which will take care of the input's label style (see T370057) // &__help-link `padding-bottom: $spacing-50;`
#####Acceptance criteria
[] WiKit tokens used to define the spacing of the Special:NewLexeme page are replaced by Codex tokens or custom variables