From a9d7f4163d18ac564148089e9d57e9a14fdb5bd5 Mon Sep 17 00:00:00 2001
From: Arthur Taylor <arthur.taylor@wikimedia.de>
Date: Thu, 19 Sep 2024 10:02:40 +0200
Subject: [PATCH] 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
---
 src/components/AnonymousEditWarning.vue |  4 +++-
 src/components/LanguageInput.vue        |  4 ++--
 src/components/LemmaInput.vue           |  4 ++--
 src/components/LexicalCategoryInput.vue |  4 ++--
 src/components/NewLexemeForm.vue        | 23 ++++++++++++-----------
 src/components/RequiredAsterisk.vue     |  8 ++++----
 src/components/SearchExisting.vue       | 16 +++++++++++-----
 src/components/SpellingVariantInput.vue |  6 +++---
 src/styles/custom-variables.css         |  5 +++++
 9 files changed, 44 insertions(+), 30 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 addb0515..a0f5f1c3 100644
--- 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
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 b22d6576..0db0276a 100644
--- 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
index a1018c16..c7ea9669 100644
--- 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
index 3bd87532..9f140393 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-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
index 7e873a1c..1b5f7f3e 100644
--- 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
new file mode 100644
index 00000000..12d342f0
--- /dev/null
+++ b/src/styles/custom-variables.css
@@ -0,0 +1,5 @@
+* {
+	/* layout */
+	--dimension-layout-xsmall: 1rem;
+	--dimension-layout-small: 1.5rem;
+}