Use Codex tokens and custom spacing variables

Migrate away from Wikit tokens to Codex SASS variables where they are available. In some cases we use custom CSS variables for values from Wikit whose Codex equivalents are missing. Bug: T369510 Bug: T369508
wmde · Sep 19, 2024 · d06bb61 · d06bb61
1 parent bc773e6
commit d06bb61
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 28 deletions.
diff --git a/src/components/AnonymousEditWarning.vue b/src/components/AnonymousEditWarning.vue
@@ -33,7 +33,9 @@ const warning = computed(
 </template>
 
 <style lang="scss" scoped>
+@import '@/styles/custom-variables.css';
+
 .wbl-snl-anonymous-edit-warning {
-	margin: 1rem 0;
+	margin: var( --dimension-layout-xsmall ) 0;
 }
 </style>
diff --git a/src/components/LanguageInput.vue b/src/components/LanguageInput.vue
@@ -79,11 +79,11 @@ export default {
 </template>
 
 <style lang="scss">
-@import '@wmde/wikit-tokens/variables';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 /* stylelint-disable selector-class-pattern */
 .wbl-snl-language-lookup .wikit .wikit-Lookup__label-wrapper {
-	gap: $dimension-spacing-xsmall;
+	gap: $spacing-50;
 }
 /* stylelint-enable selector-class-pattern */
 

diff --git a/src/components/LemmaInput.vue b/src/components/LemmaInput.vue
@@ -71,11 +71,11 @@ export default {
 </template>
 
 <style lang="scss">
-@import '@wmde/wikit-tokens/variables';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 /* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
 .wbl-snl-lemma-input.wikit .wikit-TextInput__label-wrapper {
-	gap: $dimension-spacing-xsmall;
+	gap: $spacing-50;
 }
 /* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
 </style>
diff --git a/src/components/LexicalCategoryInput.vue b/src/components/LexicalCategoryInput.vue
@@ -73,10 +73,10 @@ export default {
 </template>
 
 <style lang="scss">
-@import '@wmde/wikit-tokens/variables';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 /* stylelint-disable selector-class-pattern */
 .wbl-snl-lexical-category-lookup .wikit .wikit-Lookup__label-wrapper {
-	gap: $dimension-spacing-xsmall;
+	gap: $spacing-50;
 }
 /* stylelint-enable selector-class-pattern */
 

diff --git a/src/components/NewLexemeForm.vue b/src/components/NewLexemeForm.vue
@@ -190,17 +190,16 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import '@wmde/wikit-tokens/variables'; // TODO remove
+@import '@/styles/custom-variables.css';
 @import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
-@import '@wmde/wikit-vue-components/src/styles/mixins/Typography';
 
 .wbl-snl-form {
 	& > * + * {
-		margin-top: $dimension-layout-xsmall;
+		margin-top: var( --dimension-layout-xsmall );
 	}
 
 	// Box model
-	padding: $dimension-layout-small;
+	padding: var( --dimension-layout-xsmall );
 
 	// Border
 	border-style: $border-style-base;
@@ -210,12 +209,15 @@ export default {
 }
 
 .wbl-snl-copyright {
-	@include small-text;
-
-	font-size: 0.8125rem;
+	/* codex Body S */
+	font-family: $font-family-system-sans;
+	font-size: $font-size-small;
+	font-weight: $font-weight-normal;
+	line-height: $line-height-medium;
+	color: $color-base;
+
+	/* Italic for the copyright notice */
 	font-style: italic;
-	font-synthesis: none;
-	margin-bottom: 0;
 }
 
 </style>
diff --git a/src/components/RequiredAsterisk.vue b/src/components/RequiredAsterisk.vue
@@ -21,18 +21,18 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import '@wmde/wikit-tokens/variables';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .wbl-snl-required-asterisk {
-	font-size: $font-size-xxlarge;
+	font-size: $font-size-xx-large;
 	line-height: 0;
 
 	&:not( :first-child ) {
-		margin-inline-start: $dimension-spacing-small;
+		margin-inline-start: $spacing-50;
 	}
 
 	&:not( :last-child ) {
-		margin-inline-end: $dimension-spacing-small;
+		margin-inline-end: $spacing-50;
 	}
 }
 </style>
diff --git a/src/components/SearchExisting.vue b/src/components/SearchExisting.vue
@@ -24,13 +24,19 @@ const searchMessage = computed( () => messages.get(
 </template>
 
 <style lang="scss" scoped>
-@import '@wmde/wikit-tokens/variables';
-@import '@wmde/wikit-vue-components/src/styles/mixins/Typography';
+@import '@/styles/custom-variables.css';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .wbl-snl-search-existing {
-	@include body;
+	/* font Codex Body */
+	font-family: $font-family-system-sans;
+	font-size: $font-size-medium;
+	font-weight: $font-weight-normal;
+	line-height: $line-height-medium;
+	color: $color-base;
 
-	margin-top: 1rem;
-	margin-bottom: 1rem;
+	/* margins */
+	margin-top: var( --dimension-layout-xsmall );
+	margin-bottom: var( --dimension-layout-xsmall );
 }
 </style>
diff --git a/src/components/SpellingVariantInput.vue b/src/components/SpellingVariantInput.vue
@@ -128,17 +128,17 @@ export default {
 </template>
 
 <style lang="scss">
-@import '@wmde/wikit-tokens/variables';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .wbl-snl-spelling-variant-lookup {
 	/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
 	&.wikit .wikit-Lookup__label-wrapper {
-		gap: $dimension-spacing-xsmall;
+		gap: $spacing-50;
 	}
 	/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
 
 	&__help-link {
-		padding-bottom: $wikit-Label-padding-block-end;
+		padding-bottom: $spacing-50;
 		display: inline-block;
 	}
 }

diff --git a/src/styles/custom-variables.css b/src/styles/custom-variables.css
@@ -0,0 +1,4 @@
+* {
+	/* layout */
+	--dimension-layout-xsmall: 1rem;
+}