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 23, 2024 · a9d7f41 · a9d7f41
1 parent 07f5a3a
commit a9d7f41
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 30 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,30 +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-small );
 
 	// 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;
+	/* 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;
 	margin-bottom: 0;
 }
 

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,5 @@
+* {
+	/* layout */
+	--dimension-layout-xsmall: 1rem;
+	--dimension-layout-small: 1.5rem;
+}