@antify/ui 1.3.0 → 2.0.0

package/dist/components/AntAccordion.vue

@@ -49,7 +49,7 @@ function onClose(index: number) {
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col bg-neutral-300 gap-px">
+  <div class="w-full h-full flex flex-col bg-base-300 gap-px">
     <slot>
       <AntAccordionItem
         v-for="(item, index) in items"

package/dist/components/AntAlert.vue

@@ -48,7 +48,7 @@ const classes = computed(() => {
   const variants: Record<InputState, string> = {
     [InputState.danger]: 'bg-danger-100 text-danger-700',
     [InputState.info]: 'bg-info-100 text-info-700',
-    [InputState.base]: 'bg-neutral-100 text-neutral-100-font',
+    [InputState.base]: 'bg-base-100 text-base-100-font',
     [InputState.success]: 'bg-success-100 text-success-700',
     [InputState.warning]: 'bg-warning-100 text-warning-700',
   };
@@ -63,7 +63,7 @@ const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const hasQuestionMark = computed(() => (useSlots()['question-mark-text'] || false) || props.questionMarkText);
 const iconColor = computed(() => {
   const variants = {
-    [InputState.base]: 'text-neutral-100-font',
+    [InputState.base]: 'text-base-100-font',
     [InputState.danger]: 'text-danger-700',
     [InputState.info]: 'text-info-700',
     [InputState.success]: 'text-success-700',

package/dist/components/AntCard.vue

@@ -27,7 +27,7 @@ const cardClass = computed(() => ({
 <template>
   <div
     :class="cardClass"
-    class="bg-white border border-neutral-300 rounded-md"
+    class="bg-white border border-base-300 rounded-md"
   >
     <slot/>
   </div>

package/dist/components/AntDropdown.vue

@@ -77,7 +77,7 @@ const onClickOutside = [
           :style="floatingStyles"
         >
           <div
-            class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col bg-white text-for-white-bg-font w-full overflow-hidden"
+            class="shadow-lg border border-base-300 rounded-md text-sm relative inline-flex flex-col bg-white text-for-white-bg-font w-full overflow-hidden"
             :class="{'p-2': contentPadding}"
           >
             <slot name="content"/>

package/dist/components/AntKeycap.vue

@@ -37,7 +37,7 @@ const iconClasses = computed(() => {
 </script>
 
 <template>
-  <div class="inline-flex relative justify-center items-center bg-neutral-300 rounded-md text-center text-neutral-300-font font-medium" :class="classes">
+  <div class="inline-flex relative justify-center items-center bg-base-300 rounded-md text-center text-base-300-font font-medium" :class="classes">
       <AntIcon
       v-if="icon"
       :icon="icon"

package/dist/components/AntListGroup.vue

@@ -17,7 +17,7 @@ withDefaults(
     <AntSkeleton v-if="skeleton" absolute rounded/>
 
     <div
-      class="flex flex-col rounded-md bg-neutral-300 gap-px relative border border-neutral-300 overflow-hidden"
+      class="flex flex-col rounded-md bg-base-300 gap-px relative border border-base-300 overflow-hidden"
       :class="{'invisible': skeleton, 'shadow-md': shadow}"
     >
       <slot/>

package/dist/components/AntListGroupItem.vue

@@ -19,7 +19,7 @@ const classes = computed(() => {
   const variants: Record<ListGroupItemState, string> = {
     [ListGroupItemState.danger]: 'bg-danger-500 text-danger-500-font hover:bg-danger-700',
     [ListGroupItemState.info]: 'bg-info-500 text-info-500-font hover:bg-info-700',
-    [ListGroupItemState.base]: 'bg-white text-for-white-bg-font hover:bg-neutral-200',
+    [ListGroupItemState.base]: 'bg-white text-for-white-bg-font hover:bg-base-200',
     [ListGroupItemState.primary]: 'bg-primary-500 text-primary-500-font hover:bg-primary-700',
     [ListGroupItemState.secondary]: 'bg-secondary-500 text-secondary-500-font hover:bg-secondary-700',
     [ListGroupItemState.success]: 'bg-success-500 text-success-500-font hover:bg-success-700',

package/dist/components/AntModal.vue

@@ -54,8 +54,8 @@ function closeModal() {
       <Transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
         <div
           v-if="openModal"
-          class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto"
-          :class="{'w-full h-full': fullscreen, 'border border-neutral-300 rounded-md shadow-md': !fullscreen}"
+          class="flex flex-col gap-px bg-base-300 overflow-hidden cursor-auto"
+          :class="{'w-full h-full': fullscreen, 'border border-base-300 rounded-md shadow-md': !fullscreen}"
         >
           <div
             class="bg-white p-2 flex items-center justify-between"

package/dist/components/AntPopover.vue

@@ -107,10 +107,10 @@ const onClickOutside = [
             ref="floating"
             :style="floatingStyles"
           >
-            <div class="shadow-lg border-neutral-300 rounded-md text-sm relative inline-flex flex-col">
+            <div class="shadow-lg border-base-300 rounded-md text-sm relative inline-flex flex-col">
 
               <div
-                class="border-neutral-300 border-b p-2 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
+                class="border-base-300 border-b p-2 bg-base-100 rounded-t-md border-t border-l border-r text-base-100-font font-semibold"
               >
                 <slot name="title">
                   {{ title }}
@@ -118,7 +118,7 @@ const onClickOutside = [
               </div>
 
               <div
-                class="p-2 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
+                class="p-2 rounded-b-md text-for-white-bg-font border-base-300 border-l border-b border-r bg-white"
               >
                 <slot name="content"/>
               </div>
@@ -154,12 +154,12 @@ const onClickOutside = [
                 >
                   <path
                     d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
-                    :class="{'fill-neutral-100': placement === Position.bottom, 'fill-white': placement === Position.top || placement === Position.right || placement === Position.left}"
+                    :class="{'fill-base-100': placement === Position.bottom, 'fill-white': placement === Position.top || placement === Position.right || placement === Position.left}"
                   />
 
                   <path
                     d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
-                    :class="{'stroke-neutral-100': placement === Position.bottom, 'stroke-white': placement === Position.top || placement === Position.right || placement === Position.left}"
+                    :class="{'stroke-base-100': placement === Position.bottom, 'stroke-white': placement === Position.top || placement === Position.right || placement === Position.left}"
                   />
                 </svg>
 
@@ -173,7 +173,7 @@ const onClickOutside = [
                 >
                   <path
                     d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7"
-                    class="stroke-neutral-300"
+                    class="stroke-base-300"
                   />
                 </svg>
               </div>

package/dist/components/AntSpinner.vue

@@ -31,7 +31,7 @@ onMounted(() => {
 });
 const circleClass = computed(() => {
   const invertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-500',
+    [State.base]: 'fill-base-500',
     [State.primary]: 'fill-primary-700',
     [State.secondary]: 'fill-secondary-700',
     [State.danger]: 'fill-danger-700',
@@ -40,7 +40,7 @@ const circleClass = computed(() => {
     [State.warning]: 'fill-warning-700',
   };
   const notInvertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-100',
+    [State.base]: 'fill-base-100',
     [State.primary]: 'fill-primary-100',
     [State.secondary]: 'fill-secondary-100',
     [State.danger]: 'fill-danger-100',
@@ -56,7 +56,7 @@ const circleClass = computed(() => {
 });
 const spinningElementClass = computed(() => {
   const invertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-100',
+    [State.base]: 'fill-base-100',
     [State.primary]: 'fill-primary-100',
     [State.secondary]: 'fill-secondary-100',
     [State.danger]: 'fill-danger-100',
@@ -65,7 +65,7 @@ const spinningElementClass = computed(() => {
     [State.warning]: 'fill-warning-100',
   };
   const notInvertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-500',
+    [State.base]: 'fill-base-500',
     [State.primary]: 'fill-primary-500',
     [State.secondary]: 'fill-secondary-500',
     [State.danger]: 'fill-danger-500',

package/dist/components/AntTag.vue

@@ -24,7 +24,7 @@ const classes = computed(() => {
     [TagState.info]: 'bg-info-500 text-info-500-font',
     [TagState.primary]: 'bg-primary-500 text-primary-500-font',
     [TagState.secondary]: 'bg-secondary-500 text-secondary-500-font',
-    [TagState.base]: 'bg-neutral-300 text-neutral-300-font',
+    [TagState.base]: 'bg-base-300 text-base-300-font',
     [TagState.success]: 'bg-success-500 text-success-500-font',
     [TagState.warning]: 'bg-warning-500 text-warning-500-font',
   };
@@ -61,7 +61,7 @@ const iconState = computed(() => {
     case TagState.secondary:
       return 'text-secondary-500-font';
     default:
-      return 'text-neutral-300-font';
+      return 'text-base-300-font';
   }
 });
 const iconWrapperClass = computed(() => {

package/dist/components/AntToast.vue

@@ -35,7 +35,7 @@ const icons = {
 const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
+    [InputState.base]: 'bg-base-100 border-base-500 text-base-500',
     [InputState.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
     [InputState.info]: 'bg-info-100 border-info-500 text-info-500',
     [InputState.success]: 'bg-success-100 border-success-500 text-success-500',
@@ -50,7 +50,7 @@ const classes = computed(() => {
 const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const iconColor = computed(() => {
   const variants = {
-    [InputState.base]: 'text-neutral-100-font',
+    [InputState.base]: 'text-base-100-font',
     [InputState.danger]: 'text-danger-500',
     [InputState.info]: 'text-info-500',
     [InputState.success]: 'text-success-500',

package/dist/components/AntTooltip.vue

@@ -70,7 +70,7 @@ const svgPathClasses = computed(() => {
 });
 const arrowSvgPathClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'stroke-neutral-300',
+    [InputState.base]: 'stroke-base-300',
     [InputState.danger]: 'stroke-danger-500',
     [InputState.info]: 'stroke-info-500',
     [InputState.success]: 'stroke-success-500',
@@ -81,7 +81,7 @@ const arrowSvgPathClasses = computed(() => {
 });
 const contentClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
+    [InputState.base]: 'text-for-white-bg-font bg-white border-base-300',
     [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
     [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
     [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',

package/dist/components/__stories/AntContent.stories.js

@@ -33,7 +33,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-			<div class="outline outline-neutral-300">
+			<div class="outline outline-base-300">
 				<AntContent v-bind="args" class="h-40">
 					<div class="slot h-60">SLOT</div>
 				</AntContent>

package/dist/components/__stories/AntContent.stories.mjs

@@ -16,7 +16,7 @@ export const Docs = {
       return { args };
     },
     template: `
-			<div class="outline outline-neutral-300">
+			<div class="outline outline-base-300">
 				<AntContent v-bind="args" class="h-40">
 					<div class="slot h-60">SLOT</div>
 				</AntContent>

package/dist/components/__stories/AntListGroup.stories.js

@@ -35,7 +35,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-          <div class="p-4 bg-neutral-100">
+          <div class="p-4 bg-base-100">
             <AntListGroup v-bind="args">
               <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
               <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>

package/dist/components/__stories/AntListGroup.stories.mjs

@@ -15,7 +15,7 @@ export const Docs = {
       return { args, faUser, faDownload, faMessage, faCog };
     },
     template: `
-          <div class="p-4 bg-neutral-100">
+          <div class="p-4 bg-base-100">
             <AntListGroup v-bind="args">
               <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
               <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>

package/dist/components/__stories/AntListGroupItem.stories.js

@@ -48,7 +48,7 @@ const Docs = exports.Docs = {
         args
       };
     },
-    template: '<div class="p-4 bg-neutral-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
+    template: '<div class="p-4 bg-base-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
   }),
   args: {}
 };

package/dist/components/__stories/AntListGroupItem.stories.mjs

@@ -27,7 +27,7 @@ export const Docs = {
     setup() {
       return { args };
     },
-    template: '<div class="p-4 bg-neutral-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
+    template: '<div class="p-4 bg-base-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
   }),
   args: {}
 };

package/dist/components/buttons/AntButton.vue

@@ -61,7 +61,7 @@ const groupedClassList = computed(() => ({
 }));
 const classes = computed(() => {
   const variants = {
-    [State.base]: 'ring-primary-200 outline-neutral-300',
+    [State.base]: 'ring-primary-200 outline-base-300',
     [State.danger]: 'ring-danger-200 outline-danger-500',
     [State.info]: 'ring-info-200 outline-info-500',
     [State.primary]: 'ring-primary-200 outline-primary-500',
@@ -79,7 +79,7 @@ const classes = computed(() => {
     [State.warning]: 'bg-white text-warning-500',
   };
   const notFilledHoverVariants = {
-    [State.base]: 'hover:bg-neutral-100',
+    [State.base]: 'hover:bg-base-100',
     [State.danger]: 'hover:bg-danger-100',
     [State.info]: 'hover:bg-info-100',
     [State.primary]: 'hover:bg-primary-100',
@@ -88,7 +88,7 @@ const classes = computed(() => {
     [State.warning]: 'hover:bg-warning-100',
   };
   const filledVariants = {
-    [State.base]: 'bg-neutral-50 text-neutral-50-font',
+    [State.base]: 'bg-base-50 text-base-50-font',
     [State.danger]: 'bg-danger-500 text-danger-500-font',
     [State.info]: 'bg-info-500 text-info-500-font',
     [State.primary]: 'bg-primary-500 text-primary-500-font',
@@ -97,7 +97,7 @@ const classes = computed(() => {
     [State.warning]: 'bg-warning-500 text-warning-500-font',
   };
   const filledHoverVariants = {
-    [State.base]: 'hover:bg-neutral-200',
+    [State.base]: 'hover:bg-base-200',
     [State.danger]: 'hover:bg-danger-600',
     [State.info]: 'hover:bg-info-600',
     [State.primary]: 'hover:bg-primary-600',

package/dist/components/crud/AntCrud.vue

@@ -12,7 +12,7 @@ withDefaults(defineProps<{
     data-e2e="crud"
   >
     <div
-      class="left-content h-full flex flex-col bg-neutral-300 gap-px overflow-hidden"
+      class="left-content h-full flex flex-col bg-base-300 gap-px overflow-hidden"
       :class="{'w-[40rem]': showDetail, 'w-full': !showDetail}"
     >
       <div class="bg-white">
@@ -31,7 +31,7 @@ withDefaults(defineProps<{
     <Transition name="right-content">
       <div
         v-if="showDetail"
-        class="flex flex-col gap-px border-l border-neutral-300 overflow-hidden"
+        class="flex flex-col gap-px border-l border-base-300 overflow-hidden"
         :class="{'w-full': showDetail}"
       >
         <slot/>

package/dist/components/crud/AntCrudDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-neutral-300 gap-px h-full" data-e2e="crud-detail">
+  <div class="flex flex-col bg-base-300 gap-px h-full" data-e2e="crud-detail">
     <slot name="header"/>
 
     <div class="flex-grow bg-white h-full overflow-y-auto">

package/dist/components/crud/__stories/AntCrudDetailActions.stories.js

@@ -16,7 +16,7 @@ const meta = {
     }
   },
   decorators: [() => ({
-    template: '<div class="border border-dashed border-neutral-300"><story/></div>'
+    template: '<div class="border border-dashed border-base-300"><story/></div>'
   })],
   argTypes: {}
 };

package/dist/components/crud/__stories/AntCrudDetailActions.stories.mjs

@@ -4,7 +4,7 @@ const meta = {
   title: "Crud/Crud Detail Actions",
   component: AntCrudDetailActions,
   parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
+  decorators: [() => ({ template: '<div class="border border-dashed border-base-300"><story/></div>' })],
   argTypes: {}
 };
 export default meta;

package/dist/components/crud/__stories/AntCrudTableFilter.stories.js

@@ -30,7 +30,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <div class="border border-neutral-300 border-dashed">
+      <div class="border border-base-300 border-dashed">
         <AntCrudTableFilter
           v-model:search="args.search"
           v-bind="args"

package/dist/components/crud/__stories/AntCrudTableFilter.stories.mjs

@@ -15,7 +15,7 @@ export const Docs = {
       return { args };
     },
     template: `
-      <div class="border border-neutral-300 border-dashed">
+      <div class="border border-base-300 border-dashed">
         <AntCrudTableFilter
           v-model:search="args.search"
           v-bind="args"

package/dist/components/dialogs/AntDialog.vue

@@ -41,7 +41,7 @@ const icons = {
 
 const iconColor = computed(() => {
   const variants = {
-    [InputState.base]: 'text-neutral-100-font',
+    [InputState.base]: 'text-base-100-font',
     [InputState.danger]: 'text-danger-500',
     [InputState.info]: 'text-info-500',
     [InputState.success]: 'text-success-500',
@@ -91,11 +91,11 @@ function confirmDialog() {
       <Transition :name="'bounce'">
         <div
           v-if="openDialog"
-          class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto w-96 border border-neutral-300 rounded-md shadow-md"
+          class="flex flex-col gap-px bg-base-300 overflow-hidden cursor-auto w-96 border border-base-300 rounded-md shadow-md"
         >
           <div
             v-if="title || $slots['title']"
-            class="bg-neutral-100 p-2 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
+            class="bg-base-100 p-2 flex items-center justify-between text-base-100-font text-sm font-semibold"
           >
             <slot name="title">
               {{ title }}
@@ -117,7 +117,7 @@ function confirmDialog() {
           </div>
 
           <div
-            class="bg-neutral-100 p-2 gap-2 text-for-white-bg-font flex w-full justify-end"
+            class="bg-base-100 p-2 gap-2 text-for-white-bg-font flex w-full justify-end"
           >
             <slot name="footer">
               <AntButton

package/dist/components/dialogs/__stories/AntDialog.stories.js

@@ -17,7 +17,7 @@ const meta = {
     }
   },
   decorators: [() => ({
-    template: '<div class="border border-dashed border-neutral-300"><story/></div>'
+    template: '<div class="border border-dashed border-base-300"><story/></div>'
   })],
   argTypes: {
     state: {

package/dist/components/dialogs/__stories/AntDialog.stories.mjs

@@ -5,7 +5,7 @@ const meta = {
   title: "Components/Dialogs/Dialog",
   component: AntDialog,
   parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
+  decorators: [() => ({ template: '<div class="border border-dashed border-base-300"><story/></div>' })],
   argTypes: {
     state: {
       control: { type: "select" },

package/dist/components/inputs/AntCheckbox.vue

@@ -49,7 +49,7 @@ const inputClasses = computed(() => {
     [InputState.warning]: 'text-warning-500',
   };
   const inactiveColorVariant: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300',
+    [InputState.base]: 'outline-base-300',
     [InputState.danger]: 'outline-danger-500',
     [InputState.info]: 'outline-info-500',
     [InputState.success]: 'outline-success-500',
@@ -57,7 +57,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'relative inline-flex flex-shrink-0 bg-neutral-100 border-0': true,
+    'relative inline-flex flex-shrink-0 bg-base-100 border-0': true,
     'outline outline-1 outline-offset-[-1px] rounded': true,
     'focus:ring-offset-0': true,
     'invisible': props.skeleton,

package/dist/components/inputs/AntPasswordInput.vue

@@ -51,7 +51,7 @@ const iconColor = computed(() => {
     case InputState.danger:
       return 'text-danger-700';
     default:
-      return 'text-neutral-500';
+      return 'text-base-500';
   }
 });
 

package/dist/components/inputs/AntRadio.vue

@@ -47,7 +47,7 @@ const inputClasses = computed(() => {
     'rounded-full transition-colors ease-in-out duration-200 disabled:opacity-50': true,
     'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
     'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
-    'outline-neutral-300': props.state === InputState.base,
+    'outline-base-300': props.state === InputState.base,
     'outline-primary-500': props.state === InputState.base && isActive.value,
     'outline-info-500': props.state === InputState.info,
     'outline-success-500': props.state === InputState.success,

package/dist/components/inputs/AntRangeSlider.vue

@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<{
 const _modelValue = useVModel(props, 'modelValue', emit);
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-neutral-base',
+    [InputState.base]: 'text-base-base',
     [InputState.danger]: 'text-danger-base',
     [InputState.info]: 'text-info-base',
     [InputState.success]: 'text-success-base',
@@ -38,7 +38,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-neutral-300 rounded-md outline-none': true,
+    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-base-300 rounded-md outline-none': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     'invisible': props.skeleton,
     [variants[props.state]]: true

package/dist/components/inputs/AntSelect.vue

@@ -71,7 +71,7 @@ const hasInputState = computed(() => props.skeleton || props.readonly || props.d
 const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 bg-white focus:ring-primary-200',
+    [InputState.base]: 'outline-base-300 bg-white focus:ring-primary-200',
     [InputState.success]: 'outline-success-500 bg-success-100 focus:ring-success-200',
     [InputState.info]: 'outline-info-500 bg-info-100 focus:ring-info-200',
     [InputState.warning]: 'outline-warning-500 bg-warning-100 focus:ring-warning-200',
@@ -106,7 +106,7 @@ const inputClasses = computed(() => {
 });
 const placeholderClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-neutral-500',
+    [InputState.base]: 'text-base-500',
     [InputState.success]: 'text-success-700',
     [InputState.info]: 'text-info-700',
     [InputState.warning]: 'text-warning-700',

package/dist/components/inputs/AntSwitch.vue

@@ -38,7 +38,7 @@ const buttonClasses = computed(() => {
     'focus-within:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
     'h-5 w-9': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
     'h-4 w-[30px]': props.size === Size.xs || props.size === Size.xs2,
-    'bg-neutral-300': !_value.value,
+    'bg-base-300': !_value.value,
     'invisible': props.skeleton,
     // Disabled
     'opacity-50 cursor-not-allowed': props.disabled,
@@ -65,7 +65,7 @@ const buttonClasses = computed(() => {
   return classes;
 });
 const ballClasses = computed(() => ({
-  'pointer-events-none inline-block rounded-full bg-neutral-100 shadow transform ring-0 transition ease-in-out duration-200': true,
+  'pointer-events-none inline-block rounded-full bg-base-100 shadow transform ring-0 transition ease-in-out duration-200': true,
   'h-4 w-4 translate-y-0.5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
   'translate-x-[1.125rem]': _value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
   'translate-x-0.5': !_value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),

package/dist/components/inputs/AntSwitcher.vue

@@ -72,7 +72,7 @@ const itemClasses = computed(() => {
 
   const colorVariant = {
     [InputState.danger]: 'outline-danger-500 bg-danger-100',
-    [InputState.base]: 'outline-neutral-300 bg-white',
+    [InputState.base]: 'outline-base-300 bg-white',
     [InputState.info]: 'outline-info-500 bg-info-100',
     [InputState.success]: 'outline-success-500 bg-success-100',
     [InputState.warning]: 'outline-warning-500 bg-warning-100',

package/dist/components/inputs/AntTagInput.vue

@@ -64,7 +64,7 @@ const tagInput = ref('');
 const inputRef: Ref<HTMLElement | null> = ref(null);
 const inputContainerClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus-within:outline-neutral-300 focus-within:ring-primary-200 bg-white',
+    [InputState.base]: 'outline-base-300 focus-within:outline-base-300 focus-within:ring-primary-200 bg-white',
     [InputState.danger]: 'outline-danger-500 focus-within:outline-danger-500 focus-within:ring-danger-200 bg-danger-100',
     [InputState.info]: 'outline-info-500 focus-within:outline-info-500 focus-within:ring-info-200 bg-info-100',
     [InputState.success]: 'outline-success-500 focus-within:outline-success-500 focus-within:ring-success-200 bg-success-100',
@@ -93,7 +93,7 @@ const inputContainerClasses = computed(() => {
 });
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'placeholder:text-neutral-500',
+    [InputState.base]: 'placeholder:text-base-500',
     [InputState.danger]: 'placeholder:text-danger-700',
     [InputState.info]: 'placeholder:text-info-700',
     [InputState.success]: 'placeholder:text-success-700',

package/dist/components/inputs/AntTextarea.vue

@@ -62,7 +62,7 @@ const icons = {
 /*TODO #59:: If the scrollbar is showing than the pr is moving and the gap between icon and text is bigger and the icon is stuck in the scrollbar*/
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
+    [InputState.base]: 'outline-base-300 focus:ring-primary-200 bg-white placeholder:text-base-500',
     [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
     [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
     [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',

package/dist/components/inputs/Elements/AntBaseInput.vue

@@ -60,7 +60,7 @@ const icons = {
 };
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
+    [InputState.base]: 'outline-base-300 focus:ring-primary-200 bg-white placeholder:text-base-500',
     [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
     [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
     [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',

package/dist/components/inputs/Elements/AntSelectMenu.vue

@@ -61,7 +61,7 @@ const isOpen = useVModel(props, 'open', emit);
 const focusedDropDownItem = useVModel(props, 'focused', emit);
 const dropdownClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-300 border-neutral-300',
+    [InputState.base]: 'bg-base-300 border-base-300',
     [InputState.success]: 'bg-success-500 border-success-500',
     [InputState.info]: 'bg-info-500 border-info-500',
     [InputState.warning]: 'bg-warning-500 border-warning-500',
@@ -168,7 +168,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 
 function getActiveDropDownItemClasses(option: SelectOption) {
   const variants: Record<InputState, string> = {
-    [InputState.base]: '!bg-neutral-100',
+    [InputState.base]: '!bg-base-100',
     [InputState.success]: 'bg-success-200',
     [InputState.info]: 'bg-info-200',
     [InputState.warning]: 'bg-warning-200',

package/dist/components/layouts/AntNavLeftLayout.vue

@@ -13,8 +13,8 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
 </script>
 
 <template>
-  <div class="flex gap-px bg-neutral-300 h-screen min-w-full overflow-y-hidden">
-    <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
+  <div class="flex gap-px bg-base-300 h-screen min-w-full overflow-y-hidden">
+    <div class="flex flex-col gap-px bg-base-300 w-52 shrink-0">
       <component
         :is="logoRoute ? 'RouterLink' : 'div'"
         v-if="hasLogoImageSlot"