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 Bug: T369509
wmde · Sep 20, 2024 · 6b0162c · 6b0162c
1 parent 8c35b7f
commit 6b0162c
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 29 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,16 +190,16 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@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-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;
@@ -209,12 +209,12 @@ export default {
 }
 
 .wbl-snl-copyright {
-	@include small-text;
-
-	font-size: 0.8125rem;
-	font-style: italic;
-	font-synthesis: none;
-	margin-bottom: 0;
+	/* 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;
 }
 
 </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;
+}