feat(xds)!: avoid overriding consumers theme by xds (#1658)

BREAKING CHANGE: the x tailwincss plugin no longer admits an options configuration. The plugin theme is accessible through theme: extend: { x: {...}} so now if you need to customize a value you can do it via extending the general tailwind theme: module.exports = { theme: { extend: { spacing: theme => theme('x.spacing'), colors: theme => theme('x.colors'), screens: theme => theme('x.screens'), fontSize: theme => theme('x.fontSize'), fontFamily: theme => theme('x.fontFamily'), x: { colors: { neutral: { 5: '#56ac91' } .... To add new components you can do it via https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
empathyco · Nov 25, 2024 · bd3ed79 · bd3ed79
1 parent 795153e
commit bd3ed79
Show file tree

Hide file tree

Showing 134 changed files with 680 additions and 820 deletions.
diff --git a/packages/x-components/src/tailwind/plugin-options.ts b/packages/x-components/src/tailwind/plugin-options.ts
@@ -1,3 +1 @@
-import { PluginOptions } from '@empathyco/x-tailwindcss';
-
-export default {} as PluginOptions;
+export default {};
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-base-showcase.vue b/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="x-flex x-flex-col x-gap-32">
-    <h1 class="x-text-lg">{{ title }}</h1>
+  <div class="flex flex-col gap-8">
+    <h1 class="text-lg">{{ title }}</h1>
     <div
       v-for="(classes, section) in sections"
       :key="section"
-      class="x-flex x-flex-row x-gap-16 x-items-baseline"
+      class="flex flex-row items-baseline gap-4"
     >
-      <h2 class="x-text-md x-w-128 x-text-right x-flex-none">{{ section }}</h2>
+      <h2 class="text-md w-[128px] flex-none text-right">{{ section }}</h2>
 
       <div
-        class="x-flex x-flex-row x-flex-wrap x-gap-16 x-items-baseline"
+        class="flex flex-row flex-wrap items-baseline gap-4"
         :class="sectionsClasses[section] || ''"
       >
         <div v-for="cssClass in classes" :key="cssClass">
@@ -18,8 +18,8 @@
       </div>
     </div>
     <div
-      class="x-fixed x-left-1/2 x-top-1/2 x-bg-neutral-25 x-p-8 x-transition-opacity x-duration-300 x-pointer-events-none -translate-x-1/2 -translate-y-1/2"
-      :class="isMessageVisible ? 'x-opacity-100' : 'x-opacity-0'"
+      class="pointer-events-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-300 p-8 transition-opacity duration-300"
+      :class="isMessageVisible ? 'opacity-100' : 'opacity-0'"
     >
       CSS classes copied to Clipboard!
     </div>

diff --git a/packages/x-tailwindcss/demo/src/components/xds-button-group.vue b/packages/x-tailwindcss/demo/src/components/xds-button-group.vue
@@ -4,7 +4,7 @@
     :sections="sections"
     #default="{ cssClass, copyCssClassesToClipboard }"
   >
-    <div class="x-flex x-gap-20 x-flex-wrap">
+    <div class="flex flex-wrap gap-5">
       <div
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
@@ -19,7 +19,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-gap-8"
+        class="gap-2"
       >
         <button class="x-button">BUTTON 1</button>
         <span class="x-button-group-divider" />
@@ -42,7 +42,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-gap-8"
+        class="gap-2"
       >
         <button class="x-button x-button-outlined">BUTTON 1</button>
         <button class="x-button x-button-outlined">BUTTON 2</button>
@@ -53,7 +53,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-gap-8"
+        class="gap-2"
       >
         <button class="x-button x-button-outlined">BUTTON 1</button>
         <span class="x-button-group-divider" />
@@ -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 x-gap-8"
+        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,9 +4,9 @@
     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="x-flex">
+      <div class="flex">
         <CheckIcon @click="copyCssClassesToClipboard" :class="cssClass" />
         <CheckFillIcon @click="copyCssClassesToClipboard" :class="cssClass" />
         <CuratedIcon @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,45 +3,43 @@
     <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="x-scroll x-flex x-flex-col">
-          <div
-            class="x-layout-item x-sticky x-top-0 x-bg-neutral-0 x-border-b-1 x-border-neutral-25"
-          >
-            <div class="x-flex x-justify-between x-items-center x-py-8">
+    <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 border-b-1 sticky top-0 border-gray-300 bg-white">
+            <div class="flex items-center justify-between py-2">
               <span class="x-title3">FIXED HEADER LAYOUT</span>
-              <label for="layout-fixed-header-modal" class="x-button x-button-ghost x-ml-auto">
+              <label for="layout-fixed-header-modal" class="x-button x-button-ghost ml-auto">
                 Close
               </label>
             </div>
 
-            <div class="x-flex x-justify-between x-items-center x-py-16">
+            <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 x-border-b-1 x-border-neutral-25">
-            <div class="x-flex x-justify-center x-p-16 x-title3">SUBHEADER</div>
+          <div class="x-layout-item border-b-1 border-gray-300">
+            <div class="x-title3 flex justify-center p-4">SUBHEADER</div>
           </div>
 
           <div class="x-layout-item">
-            <div class="x-flex x-justify-center x-p-16 x-title3 x-bg-neutral-10">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-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
+            <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
               <section>MAIN</section>
-              <span class="x-place-self-end">MAIN BOTTOM</span>
+              <span class="place-self-end">MAIN BOTTOM</span>
             </div>
           </div>
         </div>
 
         <div class="x-layout-item x-layout-overlap">
           <button
-            class="x-layout-on-margin-right x-justify-self-start x-self-end x-button x-button-sm x-button-circle x-mb-16"
+            class="x-layout-on-margin-right x-button x-button-sm x-button-circle mb-4 self-end justify-self-start"
           >
             ▲
           </button>

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,44 +3,44 @@
     <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 x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-between x-items-center x-py-8">
+        <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 x-ml-auto">
+            <label for="layout-single-column-modal" class="x-button x-button-ghost ml-auto">
               Close
             </label>
           </div>
         </div>
 
-        <div class="x-layout-item x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-between x-items-center x-py-16">
+        <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 x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-center x-p-16 x-title3">SUB HEADER</div>
+        <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-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
+            <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
               <section>MAIN</section>
-              <span class="x-place-self-end">MAIN BOTTOM</span>
+              <span class="place-self-end">MAIN BOTTOM</span>
             </div>
           </div>
         </div>
 
         <div class="x-layout-item x-layout-overlap">
-          <button class="x-justify-self-center x-self-end x-button x-mb-16">FLOATING</button>
+          <button class="x-button mb-4 self-end justify-self-center">FLOATING</button>
         </div>
 
         <div class="x-layout-item">
-          <div class="x-flex x-justify-center x-p-16 x-title3">FOOTER</div>
+          <div class="x-title3 flex justify-center p-4">FOOTER</div>
         </div>
       </div>
     </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,45 +3,43 @@
     <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 x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-between x-items-center x-py-8">
+        <div class="x-layout-item border-b-1 border-gray-300 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 x-ml-auto">
+            <label for="layout-two-columns-modal" class="x-button x-button-ghost ml-auto">
               Close
             </label>
           </div>
         </div>
 
-        <div class="x-layout-item x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-between x-items-center x-py-16">
+        <div class="x-layout-item border-b-1 border-gray-300">
+          <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 x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-center x-p-16 x-title3">SUB HEADER</div>
+        <div class="x-layout-item border-b-1 border-gray-300">
+          <div class="x-title3 flex justify-center p-4">SUB HEADER</div>
         </div>
 
-        <div class="x-layout-item x-layout-no-margin-right x-layout-expand x-mt-16 x-mb-16">
-          <div class="x-flex x-layout-expand x-gap-24">
-            <div class="x-scroll x-w-128">
-              <div class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
+        <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="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
                 <span>ASIDE</span>
-                <span class="x-place-self-end">ASIDE BOTTOM</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-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25"
-                >
+                <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
                   <section>MAIN</section>
-                  <span class="x-place-self-end">MAIN BOTTOM</span>
+                  <span class="place-self-end">MAIN BOTTOM</span>
                 </div>
               </div>
             </div>
@@ -50,7 +48,7 @@
 
         <div class="x-layout-item x-layout-overlap">
           <button
-            class="x-layout-on-margin-right x-justify-self-start x-self-end x-button x-button-sm x-button-circle x-mb-16"
+            class="x-layout-on-margin-right x-button x-button-sm x-button-circle mb-4 self-end justify-self-start"
           >
             ▲
           </button>

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-flex x-p-16">
+    <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 x-ml-auto">Close</label>
+        <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 x-mt-32 x-pb-8 x-px-16">{{ sectionName }}</div>
-        <div class="x-text-md x-mb-16 x-px-16">
+        <div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
+        <div class="mb-4 px-4 text-xl">
           {{ sectionDescriptions[sectionName] }}
         </div>
-        <div v-for="cssClass in sectionClasses" :key="cssClass" class="x-flex x-flex-col x-pb-12">
-          <code class="x-py-8 x-px-16">{{ cssClass }}</code>
+        <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-w-full x-h-[80px] x-bg-neutral-25"
+            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 x-p-8 x-h-[60px]">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-justify-self-center x-bg-lead-50 x-p-8 x-w-[80%]">
-                  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 x-p-8 x-h-[60px]">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 x-p-8">
+                <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 x-p-8">
+                  <div class="bg-gray-400 p-2">
                     {{ cssClass }}
                   </div>
                 </div>
-                <div v-if="cssClass === 'x-layout-on-margin-left'" class="x-bg-lead-25 x-p-8">
+                <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 x-p-8 x-self-stretch">item</span>
+              <span class="self-stretch bg-gray-300 p-2">item</span>
             </div>
           </div>
         </div>