feat(x-design-system): integrate xds with x-components

packages/x-components/eslint.config.mjs

@@ -2,13 +2,7 @@ import { empathyco } from '@empathyco/eslint-config'
 
 export default empathyco(
   {
-    ignores: [
-      '.loaded_actions',
-      'vite.config.ts',
-      'tailwind.config.ts',
-      'jest.setup.ts',
-      'cypress.config.ts',
-    ],
+    ignores: ['.loaded_actions', 'vite.config.ts', 'jest.setup.ts', 'cypress.config.ts'],
   },
   {
     files: ['**/*.spec.{ts,tsx,js,jsx}'],

packages/x-components/package.json

@@ -99,26 +99,23 @@
     "@badeball/cypress-cucumber-preprocessor": "24.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "2.2.8",
     "@cucumber/messages": "32.0.1",
-    "@empathyco/x-tailwindcss": "2.0.0-alpha.22",
+    "@empathyco/x-design-system": "0.0.2-alpha.1",
     "@microsoft/api-documenter": "7.28.2",
     "@microsoft/api-extractor": "7.55.2",
+    "@tailwindcss/vite": "4.1.18",
     "@testing-library/jest-dom": "6.9.1",
     "@types/aria-query": "5.0.4",
     "@types/jest": "29.5.14",
     "@types/node": "24.10.9",
     "@vitejs/plugin-vue": "5.2.4",
     "@vue/test-utils": "2.4.6",
     "@vue/vue3-jest": "29.2.6",
-    "autoprefixer": "10.4.23",
     "convert-source-map": "2.0.0",
     "cypress": "15.9.0",
     "esbuild": "0.27.2",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-scss-transform": "1.0.4",
-    "postcss": "8.5.6",
-    "postcss-dir-pseudo-class": "7.0.2",
-    "postcss-logical": "4.0.2",
     "rimraf": "3.0.2",
     "rollup": "4.56.0",
     "rollup-plugin-copy": "3.5.0",
@@ -128,7 +125,7 @@
     "rollup-plugin-vue": "6.0.0",
     "sass": "1.97.3",
     "start-server-and-test": "2.1.3",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.1.18",
     "ts-jest": "29.4.6",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",

packages/x-components/src/main.ts

@@ -8,7 +8,7 @@ import { XInstaller } from './x-installer/x-installer/x-installer'
 import { FilterEntityFactory } from './x-modules/facets/entities/filter-entity.factory'
 import { SingleSelectModifier } from './x-modules/facets/entities/single-select.modifier'
 import { StickyModifier } from './x-modules/facets/entities/sticky.modifier'
-import './tailwind/index.css'
+import './tailwind/xds.css'
 
 /* eslint-disable ts/no-unsafe-argument */
 

packages/x-components/src/tailwind/xds.css

@@ -0,0 +1 @@
+@import '../../node_modules/@empathyco/x-design-system/dist/index.css';

packages/x-components/src/views/home/Home.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="x x-text-neutral-90">
+  <div class="x xds:text-neutral-90">
     <Tagging :consent="false" />
     <SnippetConfigExtraParams :values="initialExtraParams" />
     <PreselectedFilters />
     <UrlHandler query="q" store="store" />
     <SnippetCallbacks />
     <ExperienceControls />
     <OpenMainModal>Start</OpenMainModal>
-    <h1 class="x-text-primary-50 x-text-4xl x-font-bold x-leading-[1.5]">Test controls</h1>
-    <ul class="x-test-controls x-flex x-flex-col x-gap-16">
+    <h1 class="xds:text-lead-50 xds:text-4xl xds:font-bold xds:leading-normal">Test controls</h1>
+    <ul class="x-test-controls xds:flex xds:flex-col xds:gap-16">
       <li class="x-test-controls__item">
         <label for="searchInput.instant">
           search-input - instant
@@ -110,18 +110,18 @@
         </label>
       </li>
     </ul>
-    <hr class="x-mt-10" />
-    <h1 class="x-text-primary-50 x-text-4xl x-font-bold x-leading-[1.5]">Teleport test</h1>
+    <hr class="xds:mt-10" />
+    <h1 class="xds:text-lead-50 xds:text-4xl xds:font-bold xds:leading-normal">Teleport test</h1>
     <div id="teleport-here"></div>
     <MainModal :animation="modalAnimation" :reference-selector="referenceSelector">
-      <MultiColumnMaxWidthLayout class="x-bg-neutral-0">
+      <MultiColumnMaxWidthLayout class="xds:bg-neutral-0">
         <template #header-middle>
           <div
-            class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto"
+            class="xds:flex xds:flex-col xds:gap-16 xds:items-stretch xds:flex-auto"
             :data-test="`main-scroll-${mainScrollDirection}`"
           >
-            <div class="x-input-group x-input-group-lead x-rounded-sm">
-              <div class="x-input x-search-input-placeholder-container x-flex">
+            <div class="x-input-group x-input-group-lead xds:rounded-sm">
+              <div class="x-input x-search-input-placeholder-container xds:flex">
                 <SearchInputPlaceholder :messages="searchInputPlaceholderMessages" />
                 <SearchInput
                   aria-label="Search for products"
@@ -155,7 +155,7 @@
               </template>
               <RelatedTags
                 :animation="resultsAnimation"
-                class="x-gap-8"
+                class="xds:gap-8"
                 item-class="x-tag-outlined"
               />
               <template #sliding-panel-right-button>
@@ -186,11 +186,11 @@
         </template>
 
         <template #toolbar-body>
-          <div v-if="x.totalResults > 0" class="x-flex x-items-center x-gap-12">
-            <span class="x-text1">{{ x.totalResults }} Results</span>
+          <div v-if="x.totalResults > 0" class="xds:flex xds:items-center xds:gap-12">
+            <span class="xds:text-lg">{{ x.totalResults }} Results</span>
             <BaseColumnPickerList
               :model-value="selectedColumns"
-              class="x-gap-4"
+              class="xds:gap-4"
               :columns="columnPickerValues"
               @update:model-value="(col: any) => (selectedColumns = col)"
             >
@@ -233,14 +233,14 @@
           <!--  Redirection  -->
           <Redirection
             v-slot="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
-            class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+            class="xds:p-28 xds:flex xds:flex-col xds:gap-8 xds:items-center xds:bg-lead-25 xds:my-8"
             :delay-in-seconds="5"
           >
             <p>Your search matches a special place in our website. You are being redirected to:</p>
             <a :href="redirection.url" data-test="redirection-link" @click="redirect">
               {{ redirection.url }}
             </a>
-            <div class="x-flex x-gap-32">
+            <div class="xds:flex xds:gap-32">
               <button class="x-button--ghost x-button x-text-neutral-25" @click="abortRedirect">
                 No, I'll stay here
               </button>
@@ -257,30 +257,32 @@
             <!--  No Results Message  -->
             <div
               v-if="x.noResults && !x.fromNoResultsWithFilters"
-              class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+              class="xds:p-28 xds:flex xds:flex-col xds:gap-8 xds:items-center xds:bg-lead-25 xds:my-8"
               data-test="no-results-message"
             >
               <p>
                 There are no results for
-                <span class="x-font-bold">{{ x.query.search }}</span>
+                <span class="xds:font-bold">{{ x.query.search }}</span>
               </p>
               <p>You may be interested in these:</p>
             </div>
             <LocationProvider location="results">
-              <AiOverview class="x-mb-28">
+              <AiOverview class="xds:mb-28">
                 <template #result="{ result }">
                   <Result :result="result" class="x-w-[150px]" />
                 </template>
                 <template #extra-content>
-                  <button class="x-bg-lead-50 x-absolute x-bottom-0 x-right-0 x-translate-y-full">
+                  <button
+                    class="xds:bg-lead-50 xds:absolute xds:bottom-0 xds:right-0 xds:translate-y-full"
+                  >
                     extra content
                   </button>
                 </template>
               </AiOverview>
             </LocationProvider>
             <template v-if="!x.query.searchBox">
               <!-- Brand Recommendations -->
-              <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
+              <h1 class="xds:mb-16 x-title1">Brand Recommendations</h1>
               <LocationProvider location="no_results">
                 <QueryPreviewList
                   v-slot="{ queryPreviewInfo, totalResults, results, displayTagging, queryTagging }"
@@ -294,17 +296,17 @@
                     :payload="displayTagging"
                     :event-metadata="{ feature: 'customer', replaceable: false }"
                   >
-                    <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                    <div class="xds:flex xds:flex-col xds:gap-8 xds:mb-16">
                       <QueryPreviewButton
-                        class="x-w-fit x-button-xl x-button-ghost"
+                        class="xds:w-fit x-button-xl x-button-ghost"
                         :query-preview-info="queryPreviewInfo"
                         :metadata="{ feature: 'customer' }"
                       >
                         {{ `${queryPreviewInfo.query} (${totalResults})` }}
                       </QueryPreviewButton>
                       <DisplayResultProvider :query-tagging="queryTagging">
                         <SlidingPanel :reset-on-content-change="false">
-                          <div class="x-flex x-gap-8">
+                          <div class="xds:flex xds:gap-8">
                             <Result
                               v-for="result in results"
                               :key="result.id"
@@ -340,7 +342,7 @@
                       >
                         <BaseVariableColumnGrid
                           style="--x-size-min-width-grid-item: 150px"
-                          class="x-gap-12"
+                          class="xds:gap-12"
                           :animation="resultsAnimation"
                           :columns="x.device === 'mobile' ? 2 : 4"
                         >
@@ -363,19 +365,19 @@
                               v-slot="{ results }"
                               :suggestion="nextQueries[0]"
                               :max-items-to-render="controls.nextQueriesPreview.maxItemsToRender"
-                              class="x-pt-24"
+                              class="xds:pt-24"
                             >
                               <h1 class="x-title2">Others clients have searched</h1>
                               <NextQuery
                                 class="x-suggestion x-text1 x-text1-lg"
                                 :suggestion="nextQueries[0]"
                                 data-test="next-query-preview-name"
                               >
-                                <span class="x-font-bold">{{ nextQueries[0].query }}</span>
+                                <span class="xds:font-bold">{{ nextQueries[0].query }}</span>
                               </NextQuery>
-                              <div class="x-mb-24">
+                              <div class="xds:mb-24">
                                 <SlidingPanel :reset-on-content-change="false">
-                                  <div class="x-flex x-flex-row x-gap-8">
+                                  <div class="xds:flex xds:flex-row xds:gap-8">
                                     <Result
                                       v-for="result in results"
                                       :key="result.id"
@@ -389,7 +391,7 @@
                               <NextQuery
                                 :suggestion="nextQueries[0]"
                                 data-test="view-all-results"
-                                class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
+                                class="x-button x-button-outlined xds:rounded-full xds:mx-auto xds:mt-8 xds:mb-24"
                               >
                                 {{ 'View all results' }}
                               </NextQuery>
@@ -398,10 +400,14 @@
 
                           <template #related-prompts-group>
                             <RelatedPromptsTagList
-                              button-class="x-button-lead x-button-circle x-button-ghost x-p-0"
-                              class="-x-mb-1 x-mt-24 desktop:x-mt-0 x-p-0 x-h-[70px]"
-                              tag-class="x-rounded-xl x-gap-8 x-w-[300px] x-max-w-[400px]"
-                              :tag-colors="['x-bg-amber-300', 'x-bg-amber-400', 'x-bg-amber-500']"
+                              button-class="x-button-lead x-button-circle x-button-ghost xds:p-0"
+                              class="xds:mb-1 xds:mt-24 desktop:xds:mt-0 xds:p-0 xds:h-[70px]"
+                              tag-class="xds:rounded-xl xds:gap-8 xds:w-[300px] xds:max-w-[400px]"
+                              :tag-colors="[
+                                'xds:bg-amber-300',
+                                'xds:bg-amber-400',
+                                'xds:bg-amber-500',
+                              ]"
                               scroll-container-class="desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm"
                             >
                               <template #default="{ relatedPrompt, isSelected, onSelect }">
@@ -430,10 +436,10 @@
                                 :queries-preview-info="relatedPromptsQueriesPreviewInfo"
                                 query-feature="related_prompts"
                               >
-                                <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                                <div class="xds:flex xds:flex-col xds:gap-8 xds:mb-16">
                                   <QueryPreviewButton
                                     :query-preview-info="queryPreviewInfo"
-                                    class="x-button x-button-lead x-button-tight x-title3 x-title3-sm desktop:x-title3-md max-desktop:x-px-16"
+                                    class="x-button x-button-lead x-button-tight x-title3 x-title3-sm desktop:x-title3-md max-desktop:xds:px-16"
                                   >
                                     {{ queryPreviewInfo.query }}
                                     ({{ totalResults }})
@@ -456,7 +462,7 @@
                                           getToolingAdd2CartTagging(queryPreviewInfo)
                                         "
                                       >
-                                        <div class="x-flex x-gap-8">
+                                        <div class="xds:flex xds:gap-8">
                                           <Result
                                             v-for="result in results"
                                             :key="result.id"
@@ -482,7 +488,7 @@
 
             <!-- Semantic Queries -->
             <SemanticQueries v-slot="{ queries: semanticQueries, findSemanticQuery }">
-              <section class="x-mt-28">
+              <section class="xds:mt-28">
                 <h1 v-if="isAnyQueryLoadedInPreview(semanticQueries)" class="x-title1">
                   Similar Semantic Queries
                 </h1>
@@ -493,7 +499,7 @@
                     query-feature="semantics"
                   >
                     <div
-                      class="x-flex x-flex-col x-gap-8 x-mb-16"
+                      class="xds:flex xds:flex-col xds:gap-8 xds:mb-16"
                       data-test="semantic-query-preview"
                       :data-query="query"
                     >
@@ -509,7 +515,7 @@
                       <!-- eslint-enable vue/no-template-shadow -->
                       <DisplayResultProvider :query-tagging="queryTagging">
                         <SlidingPanel :reset-on-content-change="false">
-                          <div class="x-flex x-gap-8">
+                          <div class="xds:flex xds:gap-8">
                             <Result
                               v-for="result in results"
                               :key="result.id"

packages/x-components/vite.config.ts

@@ -2,6 +2,8 @@ import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 import Inspector from 'vite-plugin-vue-inspector'
+// @ts-ignore
+import tailwindcss from '@tailwindcss/vite'
 
 export const vueDocsPlugin = {
   name: 'vue-docs',
@@ -11,7 +13,7 @@ export const vueDocsPlugin = {
 }
 
 export default defineConfig({
-  plugins: [vue(), vueDocsPlugin, Inspector()],
+  plugins: [vue(), tailwindcss(), vueDocsPlugin, Inspector()],
   resolve: {
     alias: {
       vue: resolve(__dirname, 'node_modules/vue'),