From 6a7a13f31a48a25e1e5d7802ec02e91af3657aa7 Mon Sep 17 00:00:00 2001
From: Lucas Werkmeister <lucas.werkmeister@wikimedia.de>
Date: Tue, 10 Sep 2024 17:34:45 +0200
Subject: [PATCH] POC: Use Codex in NewLexemeForm
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Using the Button component from Codex instead of Wikit is
straightforward – we just need to rename a few props.

Using the variables is a bit more involved. Not only do we need
replacement variables from Codex that aren’t always clear, but the
small-text mixin used for the copyright notice also relies on the Wikit
variables. So for now, this change just keeps importing the Wikit
variables and lets Codex override them wherever they both use the same
name.

Bug: T369505
---
 src/components/NewLexemeForm.vue | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/NewLexemeForm.vue b/src/components/NewLexemeForm.vue
index 05a2a405..b0bd3849 100644
--- a/src/components/NewLexemeForm.vue
+++ b/src/components/NewLexemeForm.vue
@@ -6,7 +6,7 @@ import {
 	ref,
 } from 'vue';
 import { useStore } from 'vuex';
-import { Button as WikitButton } from '@wmde/wikit-vue-components';
+import { CdxButton } from '@wikimedia/codex';
 import { useConfig } from '@/plugins/ConfigPlugin/Config';
 import { useMessages } from '@/plugins/MessagesPlugin/Messages';
 import LemmaInput from '@/components/LemmaInput.vue';
@@ -176,21 +176,22 @@ export default {
 			<span v-html="error" />
 		</error-message>
 		<div>
-			<wikit-button
+			<cdx-button
 				class="form-button-submit"
-				type="progressive"
-				variant="primary"
-				native-type="submit"
+				action="progressive"
+				weight="primary"
+				type="submit"
 				:disabled="submitting"
 			>
 				{{ submitButtonText }}
-			</wikit-button>
+			</cdx-button>
 		</div>
 	</form>
 </template>
 
 <style scoped lang="scss">
-@import '@wmde/wikit-tokens/variables';
+@import '@wmde/wikit-tokens/variables'; // TODO remove
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 @import '@wmde/wikit-vue-components/src/styles/mixins/Typography';
 
 .wbl-snl-form {
@@ -203,9 +204,9 @@ export default {
 
 	// 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 {