POC: Start using Codex

index.html

@@ -17,6 +17,7 @@ <h1>New Lexeme</h1>
 				import DevLexemeCreator from './src/data-access/DevLexemeCreator';
 				import DevLangCodeRetriever from './src/data-access/DevLangCodeRetriever';
 				import LanguageItemSearcher from './src/data-access/LanguageItemSearcher';
+				import '@wikimedia/codex-design-tokens/theme-wikimedia-ui.css';
 
 				const config = {
 					rootSelector: '#app',

package.json

@@ -43,6 +43,8 @@
 		"node": ">=16"
 	},
 	"dependencies": {
+		"@wikimedia/codex": "^1.12.0",
+		"@wikimedia/codex-design-tokens": "^1.12.0",
 		"@wmde/wikibase-datamodel-types": "^0.2.0",
 		"@wmde/wikit-tokens": "^3.0.0-alpha.12",
 		"@wmde/wikit-vue-components": "^3.0.0-alpha.12",

src/App.vue

@@ -3,6 +3,7 @@ import AnonymousEditWarning from '@/components/AnonymousEditWarning.vue';
 import NewLexemeForm from '@/components/NewLexemeForm.vue';
 import SearchExisting from '@/components/SearchExisting.vue';
 import '@wmde/wikit-vue-components/dist/wikit-vue-components.css';
+import '@wikimedia/codex/dist/codex.style.css';
 
 </script>
 

src/components/LemmaInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TextInput } from '@wmde/wikit-vue-components';
-import RequiredAsterisk from '@/components/RequiredAsterisk.vue';
+import { CdxField, CdxTextInput } from '@wikimedia/codex';
+import RequiredAsterisk from '@/components/RequiredAsterisk.vue'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { useMessages } from '@/plugins/MessagesPlugin/Messages';
 import { useConfig } from '@/plugins/ConfigPlugin/Config';
 import { useStore } from 'vuex';
@@ -51,23 +51,32 @@
 </script>
 
 <template>
-	<text-input
-		class="wbl-snl-lemma-input"
-		:label="messages.getUnescaped( 'wikibaselexeme-newlexeme-lemma' )"
-		:placeholder="messages.getUnescaped(
-			'wikibaselexeme-newlexeme-lemma-placeholder-with-example',
-			exampleLemma
-		)"
-		name="lemma"
-		aria-required="true"
-		:error="error"
-		:value="modelValue"
-		@input="$emit( 'update:modelValue', $event )"
+	<!-- TODO should :status and :messages be separate computeds? -->
+	<cdx-field
+		:status="error !== null ? 'error' : 'default'"
+		:messages="error !== null ? { error: error.message } : {}"
 	>
-		<template #suffix>
-			<required-asterisk />
-		</template>
-	</text-input>
+		<!-- TODO check escaping of :placeholder -->
+		<cdx-text-input
+			class="wbl-snl-lemma-input"
+			:placeholder="messages.getUnescaped(
+				'wikibaselexeme-newlexeme-lemma-placeholder-with-example',
+				exampleLemma
+			)"
+			name="lemma"
+			aria-required="true"
+			:model-value="modelValue"
+			@update:modelValue="$emit( 'update:modelValue', $event )"
+		>
+			<!-- TODO codex docs say don’t mark required labels with an asterisk…
+			<template #suffix>
+				<required-asterisk />
+			</template>
+			-->
+		</cdx-text-input>
+		<template #label>{{ messages.getUnescaped( 'wikibaselexeme-newlexeme-lemma' ) }}</template><!-- TODO check escaping -->
+	</cdx-field>
+
 </template>
 
 <style lang="scss">

src/components/NewLexemeForm.vue

@@ -202,10 +202,10 @@ export default {
 	padding: $dimension-layout-small;
 
 	// Border
-	border-style: $border-style-base;
-	border-width: $border-width-thin;
-	border-radius: $border-radius-base;
-	border-color: $border-color-base-subtle;
+	border-style: var( --border-style-base );
+	border-width: var( --border-width-base );
+	border-radius: var( --border-radius-base );
+	border-color: var( --border-color-muted );
 }
 
 .wbl-snl-copyright {

vite.config.ts

@@ -21,7 +21,7 @@ function getBuildConfig( isAppBuild: boolean ): BuildOptions {
 			formats: [ 'cjs' ],
 		},
 		rollupOptions: {
-			external: [ 'vue', 'vuex' ],
+			external: [ 'vue', 'vuex', '@wikimedia/codex' ],
 		},
 	};
 }