POC: Use Codex in NewLexemeForm

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

@@ -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 {