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 · 41e42f3 · 41e42f3
1 parent 8c35b7f
commit 41e42f3
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 31 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,31 +190,31 @@ 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;
-	border-width: $border-width-thin;
+	border-width: $border-width-base;
 	border-radius: $border-radius-base;
-	border-color: $border-color-base-subtle;
+	border-color: $border-color-muted;
 }
 
 .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;
+}