fix(xds): default tailwind classes on showcasing

empathyco · Nov 22, 2024 · 8a01e9c · 8a01e9c
1 parent 88ca398
commit 8a01e9c
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 41 deletions.
diff --git a/packages/x-tailwindcss/demo/src/components/xds-badge.vue b/packages/x-tailwindcss/demo/src/components/xds-badge.vue
@@ -118,7 +118,7 @@
     },
     setup(props) {
       const sectionClasses: ShowcaseSectionsClasses<Sections> = {
-        Bright: 'x-bg-neutral-90 x-p-8'
+        Bright: 'bg-gray-700 p-8'
       };
       const sections = computed(() => {
         return {

diff --git a/packages/x-tailwindcss/demo/src/components/xds-button-group.vue b/packages/x-tailwindcss/demo/src/components/xds-button-group.vue
@@ -66,7 +66,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-text-accent-50"
+        class="text-red-500"
       >
         <button class="x-button x-button-ghost">BUTTON 1</button>
         <span class="x-button-group-divider" />
@@ -79,7 +79,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-text-accent-50 gap-2"
+        class="gap-2 text-red-500"
       >
         <button class="x-button x-button-tight">BUTTON 1</button>
         <button class="x-button x-button-tight">BUTTON 2</button>
@@ -90,7 +90,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-text-accent-50"
+        class="text-red-500"
       >
         <button class="x-button x-button-highlight x-button-circle">
           <PlusIcon class="x-icon" />
@@ -104,7 +104,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-text-accent-50"
+        class="text-red-500"
       >
         <button class="x-button x-button-highlight x-button-square">
           <PlusIcon class="x-icon" />

diff --git a/packages/x-tailwindcss/demo/src/components/xds-icon.vue b/packages/x-tailwindcss/demo/src/components/xds-icon.vue
@@ -4,7 +4,7 @@
     title="Icon"
     :sections="sections"
   >
-    <h3 class="x-text-xxs">{{ removeClassPrefix(cssClass, base) }}</h3>
+    <h3 class="text-xs">{{ removeClassPrefix(cssClass, base) }}</h3>
     <slot v-bind="{ cssClass, section, copyCssClassesToClipboard }">
       <div class="flex">
         <CheckIcon @click="copyCssClassesToClipboard" :class="cssClass" />

diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
@@ -3,8 +3,8 @@
     <label for="layout-fixed-header-modal" class="x-button">Open layout example</label>
     <input id="layout-fixed-header-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-0">
-      <div :class="[cssClass, 'x-layout-min-margin-48 x-bg-neutral-10']">
+    <div class="modal bg-white">
+      <div :class="[cssClass, 'x-layout-min-margin-48 bg-gray-100']">
         <div class="x-scroll flex flex-col">
           <div class="x-layout-item bg-neutral-0 border-b-1 border-neutral-25 sticky top-0">
             <div class="flex items-center justify-between py-2">
@@ -26,11 +26,11 @@
           </div>
 
           <div class="x-layout-item">
-            <div class="x-title3 x-bg-neutral-10 flex justify-center p-4">TOOLBAR</div>
+            <div class="x-title3 flex justify-center bg-gray-100 p-4">TOOLBAR</div>
           </div>
 
           <div class="x-layout-item x-layout-expand">
-            <div class="x-bg-neutral-25 flex h-[2000px] flex-col justify-between p-3">
+            <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
               <section>MAIN</section>
               <span class="place-self-end">MAIN BOTTOM</span>
             </div>

diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue
@@ -3,9 +3,9 @@
     <label for="layout-single-column-modal" class="x-button">Open layout example</label>
     <input id="layout-single-column-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-10">
+    <div class="modal bg-white">
       <div :class="[cssClass, 'x-layout-min-margin-48']">
-        <div class="x-layout-item x-bg-neutral-0 border-b-1 x-border-neutral-25">
+        <div class="x-layout-item border-b border-gray-400 bg-white">
           <div class="flex items-center justify-between py-2">
             <span class="x-title3">SINGLE COLUMN LAYOUT</span>
             <label for="layout-single-column-modal" class="x-button x-button-ghost ml-auto">
@@ -14,21 +14,21 @@
           </div>
         </div>
 
-        <div class="x-layout-item border-b-1 x-border-neutral-25">
+        <div class="x-layout-item border-b border-gray-400">
           <div class="flex items-center justify-between py-4">
             <div class="x-title3">HEADER START</div>
             <div class="x-title2">HEADER MIDDLE</div>
             <div class="x-title3">HEADER END</div>
           </div>
         </div>
 
-        <div class="x-layout-item border-b-1 x-border-neutral-25">
+        <div class="x-layout-item border-b border-gray-400">
           <div class="x-title3 flex justify-center p-4">SUB HEADER</div>
         </div>
 
         <div class="x-scroll">
           <div class="x-layout-item x-layout-expand">
-            <div class="x-bg-neutral-25 flex h-[2000px] flex-col justify-between p-3">
+            <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
               <section>MAIN</section>
               <span class="place-self-end">MAIN BOTTOM</span>
             </div>

diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
@@ -3,9 +3,9 @@
     <label for="layout-two-columns-modal" class="x-button">Open layout example</label>
     <input id="layout-two-columns-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-10">
+    <div class="modal bg-gray-100">
       <div :class="[cssClass, 'x-layout-min-margin-48']">
-        <div class="x-layout-item x-bg-neutral-0 border-b-1 x-border-neutral-25">
+        <div class="x-layout-item border-b-1 x-border-neutral-25 bg-white">
           <div class="flex items-center justify-between py-2">
             <span class="x-title3">TWO COLUMNS LAYOUT</span>
             <label for="layout-two-columns-modal" class="x-button x-button-ghost ml-auto">
@@ -29,15 +29,15 @@
         <div class="x-layout-item x-layout-no-margin-right x-layout-expand mb-4 mt-4">
           <div class="x-layout-expand flex gap-6">
             <div class="x-scroll w-[128px]">
-              <div class="x-bg-neutral-25 flex h-[2000px] flex-col justify-between p-3">
+              <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
                 <span>ASIDE</span>
                 <span class="place-self-end">ASIDE BOTTOM</span>
               </div>
             </div>
 
             <div class="x-scroll x-layout-expand">
               <div class="x-layout-item x-layout-no-margin-left">
-                <div class="x-bg-neutral-25 flex h-[2000px] flex-col justify-between p-3">
+                <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
                   <section>MAIN</section>
                   <span class="place-self-end">MAIN BOTTOM</span>
                 </div>

diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue
@@ -7,25 +7,25 @@
     <label for="layout-utils-modal" class="x-button">See layout utils</label>
     <input id="layout-utils-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-0">
-      <div class="x-p-4 flex">
+    <div class="modal bg-white">
+      <div class="flex p-4">
         <div class="x-title2">Layout utilities</div>
         <label for="layout-utils-modal" class="x-button x-button-link ml-auto">Close</label>
       </div>
 
       <div v-for="(sectionClasses, sectionName) in modalContent" :key="sectionName">
         <div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
-        <div class="x-text-md mb-4 px-4">
+        <div class="mb-4 px-4 text-xl">
           {{ sectionDescriptions[sectionName] }}
         </div>
         <div v-for="cssClass in sectionClasses" :key="cssClass" class="flex flex-col pb-3">
           <code class="px-4 py-2">{{ cssClass }}</code>
           <div
-            class="x-layout-container x-layout-min-margin-256 x-layout-max-width-md x-bg-neutral-25 h-[80px] w-full"
+            class="x-layout-container x-layout-min-margin-256 x-layout-max-width-md h-[80px] w-full bg-gray-200"
           >
             <template v-if="sectionName === 'Overlap'">
               <div v-if="cssClass.split(' ')[1] === 'x-layout-overlap'" class="x-layout-item">
-                <span class="x-bg-lead-25 h-[60px] p-2">item</span>
+                <span class="h-[60px] bg-gray-300 p-2">item</span>
               </div>
 
               <div
@@ -35,19 +35,17 @@
                 :class="cssClass"
                 title="Click me to copy CSS classes"
               >
-                <span class="x-bg-lead-50 w-[80%] justify-self-center p-2">
-                  This is overlapping
-                </span>
+                <span class="w-[80%] justify-self-center bg-gray-400 p-2">This is overlapping</span>
               </div>
 
               <div v-if="cssClass.includes('x-layout-overlap-from-top')" class="x-layout-item">
-                <span class="x-bg-lead-25 h-[60px] p-2">item</span>
+                <span class="h-[60px] bg-gray-300 p-2">item</span>
               </div>
             </template>
 
             <template v-else-if="sectionName === 'On margin'">
               <div class="x-layout-item">
-                <div v-if="cssClass === 'x-layout-on-margin-right'" class="x-bg-lead-25 p-2">
+                <div v-if="cssClass === 'x-layout-on-margin-right'" class="bg-gray-300 p-2">
                   item
                 </div>
                 <div
@@ -57,11 +55,11 @@
                   :class="cssClass"
                   title="Click me to copy CSS classes"
                 >
-                  <div class="x-bg-lead-50 p-2">
+                  <div class="bg-gray-400 p-2">
                     {{ cssClass }}
                   </div>
                 </div>
-                <div v-if="cssClass === 'x-layout-on-margin-left'" class="x-bg-lead-25 p-2">
+                <div v-if="cssClass === 'x-layout-on-margin-left'" class="bg-gray-300 p-2">
                   item
                 </div>
               </div>
@@ -75,7 +73,7 @@
               :class="cssClass"
               title="Click me to copy CSS classes"
             >
-              <span class="x-bg-lead-25 self-stretch p-2">item</span>
+              <span class="self-stretch bg-gray-300 p-2">item</span>
             </div>
           </div>
         </div>

diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout.vue b/packages/x-tailwindcss/demo/src/components/xds-layout.vue
@@ -3,7 +3,7 @@
     <label for="layout-modal" class="x-button">See layouts</label>
     <input id="layout-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-0">
+    <div class="modal bg-white">
       <div class="flex p-4">
         <div class="x-title2">Layouts</div>
         <label for="layout-modal" class="x-button x-button-link ml-auto">Close</label>
@@ -12,11 +12,11 @@
       <div v-for="(sectionClasses, sectionName) in modalContent" :key="sectionName">
         <div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
         <div v-for="cssClass in sectionClasses" :key="cssClass" class="flex flex-col pb-3">
-          <div v-if="cssClass.includes('x-layout-min-margin-12')" class="x-text-md mb-4 px-4">
+          <div v-if="cssClass.includes('x-layout-min-margin-12')" class="mb-4 px-4 text-xl">
             There are as many classes as spacing variables declared in the Tailwind theme:
             <code>x-layout-min-margin-[spacing-value]</code>
           </div>
-          <div v-if="cssClass.includes('x-layout-container-mx-128')" class="x-text-md mb-4 px-4">
+          <div v-if="cssClass.includes('x-layout-container-mx-128')" class="mb-4 px-4 text-xl">
             Custom alignment is available with Tailwind spacing classes or arbitrary values:
           </div>
           <code class="px-4 py-2">{{ cssClass }}</code>
@@ -25,9 +25,9 @@
             @keydown="copyCssClassesToClipboard"
             :class="cssClass"
             title="Click me to copy CSS classes"
-            class="x-bg-neutral-25 w-full"
+            class="w-full bg-gray-300"
           >
-            <div class="x-layout-item"><span class="x-bg-lead-25 p-2">item</span></div>
+            <div class="x-layout-item"><span class="bg-gray-400 p-2">item</span></div>
           </div>
         </div>
       </div>

diff --git a/packages/x-tailwindcss/demo/src/components/xds-picture.vue b/packages/x-tailwindcss/demo/src/components/xds-picture.vue
@@ -11,7 +11,7 @@
       :class="cssClass"
       title="Click me to copy CSS classes"
       style="width: 200px"
-      class="x-bg-neutral-50/60"
+      class="bg-white/60"
     >
       <img
         src="https://assets.empathy.co/images-demo/2885.jpg"

diff --git a/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue b/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue
@@ -12,7 +12,7 @@
         class="w-[320px]"
         :class="cssClass"
       >
-        <div class="x-progress-bar-fill x-w-[30%]" />
+        <div class="x-progress-bar-fill w-[30%]" />
       </div>
     </div>
   </XdsBaseShowcase>

diff --git a/packages/x-tailwindcss/demo/src/components/xds-scroll.vue b/packages/x-tailwindcss/demo/src/components/xds-scroll.vue
@@ -8,7 +8,7 @@
       @keydown="copyCssClassesToClipboard"
       @click="copyCssClassesToClipboard"
       :class="cssClass"
-      class="x-bg-warning-25 h-[200px] w-[200px]"
+      class="h-[200px] w-[200px] bg-amber-400"
     >
       <div :key="cssClass" class="h-[1000px]"></div>
     </div>

diff --git a/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue b/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue
@@ -24,7 +24,7 @@
         <div
           v-for="(item, index) of items"
           :key="index"
-          class="x-bg-lead-25 flex min-h-[100px] min-w-[100px] items-center justify-center"
+          class="flex min-h-[100px] min-w-[100px] items-center justify-center bg-gray-300"
         >
           <span>{{ item }}</span>
         </div>