From 71a7cd568c61247f095d0eb11f546f69b90458b8 Mon Sep 17 00:00:00 2001
From: Arthur Taylor <arthur.taylor@wikimedia.de>
Date: Fri, 11 Oct 2024 12:28:17 +0200
Subject: [PATCH] Use Codex tokens and custom spacing variables (#762)

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
---
 src/components/AnonymousEditWarning.vue |  4 +++-
 src/components/LanguageInput.vue        |  4 ++--
 src/components/LemmaInput.vue           |  8 --------
 src/components/LexicalCategoryInput.vue |  4 ++--
 src/components/NewLexemeForm.vue        | 23 ++++++++++++-----------
 src/components/RequiredAsterisk.vue     | 14 ++++----------
 src/components/SearchExisting.vue       | 16 +++++++++++-----
 src/components/SpellingVariantInput.vue |  9 +++++++--
 src/styles/custom-variables.css         |  8 ++++++++
 9 files changed, 49 insertions(+), 41 deletions(-)
 create mode 100644 src/styles/custom-variables.css

diff --git a/src/components/AnonymousEditWarning.vue b/src/components/AnonymousEditWarning.vue
index ec7ac614..4d998e9c 100644
--- 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
index bab445d3..d632bde5 100644
--- 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
index 7f77697a..8df746e2 100644
--- a/src/components/LemmaInput.vue
+++ b/src/components/LemmaInput.vue
@@ -83,11 +83,3 @@ export default {
 		</template>
 	</cdx-field>
 </template>
-
-<style lang="scss">
-@import '@wmde/wikit-tokens/variables';
-
-.wbl-snl-required-asterisk {
-	margin-inline-start: $dimension-spacing-xsmall;
-}
-</style>
diff --git a/src/components/LexicalCategoryInput.vue b/src/components/LexicalCategoryInput.vue
index 54427801..b93ead0b 100644
--- 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
index 07d5ed76..d5999e31 100644
--- a/src/components/NewLexemeForm.vue
+++ b/src/components/NewLexemeForm.vue
@@ -191,30 +191,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
index a1018c16..31aad707 100644
--- a/src/components/RequiredAsterisk.vue
+++ b/src/components/RequiredAsterisk.vue
@@ -21,18 +21,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import '@wmde/wikit-tokens/variables';
+@import '../styles/custom-variables.css';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .wbl-snl-required-asterisk {
-	font-size: $font-size-xxlarge;
+	font-size: $font-size-x-large;
 	line-height: 0;
-
-	&:not( :first-child ) {
-		margin-inline-start: $dimension-spacing-small;
-	}
-
-	&:not( :last-child ) {
-		margin-inline-end: $dimension-spacing-small;
-	}
+	margin-inline-start: var( --dimension-spacing-xsmall );
 }
 </style>
diff --git a/src/components/SearchExisting.vue b/src/components/SearchExisting.vue
index 3bd87532..b421e5bf 100644
--- 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-small;
+	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
index 901dae2f..d5b8bbf6 100644
--- a/src/components/SpellingVariantInput.vue
+++ b/src/components/SpellingVariantInput.vue
@@ -127,13 +127,18 @@ 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: $spacing-50;
+		display: inline-block;
+	}
 }
 </style>
diff --git a/src/styles/custom-variables.css b/src/styles/custom-variables.css
new file mode 100644
index 00000000..17aadaa6
--- /dev/null
+++ b/src/styles/custom-variables.css
@@ -0,0 +1,8 @@
+* {
+	/* layout */
+	--dimension-layout-xsmall: 1rem;
+	--dimension-layout-small: 1.5rem;
+
+	/* spacing */
+	--dimension-spacing-xsmall: 0.25rem;
+}