feat(x-design-system): highlight component

packages/x-design-system/demo/src/app.vue

@@ -2,12 +2,14 @@
   <Badge />
   <Button />
   <ButtonGroup />
+  <Highlight />
   <Integration />
 </template>
 
 <script setup lang="ts">
 import Badge from './components/badge.vue'
 import ButtonGroup from './components/button-group.vue'
 import Button from './components/button.vue'
+import Highlight from './components/highlight.vue'
 import Integration from './components/integration.vue'
 </script>

packages/x-design-system/demo/src/components/highlight.vue

@@ -0,0 +1,16 @@
+<template>
+  <Wrapper feature="Highlight" :rows="rows">
+    <template #default>
+      <div class="xds:highlight-text">
+        <span>Def</span>
+        <span class="xds:highlight-text-match">ault</span>
+      </div>
+    </template>
+  </Wrapper>
+</template>
+
+<script setup lang="ts">
+import Wrapper from './wrapper.vue'
+
+const rows = ['default']
+</script>

packages/x-design-system/demo/src/components/wrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <table class="xds:min-w-full">
+  <table class="xds:min-w-full xds:mb-16">
     <thead class="xds:bg-neutral-25">
       <tr>
         <th colspan="2" class="xds:p-8">{{ feature }}</th>

packages/x-design-system/lib/components/highlight.css

@@ -0,0 +1,9 @@
+/* Base */
+@utility highlight-text {
+  @apply xds:font-bold;
+}
+
+/* Match */
+@utility highlight-text-match {
+  @apply xds:font-regular;
+}

packages/x-design-system/lib/components/index.css

@@ -1,3 +1,4 @@
 @import './badge.css';
 @import './button.css';
 @import './button-group.css';
+@import './highlight.css';