@indielayer/ui 0.0.0-dev-20240129122517 → 0.0.0-dev-20240205224808

package/lib/tailwind.preset.js

@@ -28,7 +28,6 @@ module.exports = () => ({
         secondary: getColorVarPallete('secondary'),
         success: getColorVarPallete('success'),
         warning: getColorVarPallete('warning'),
-        danger: getColorVarPallete('error'),
         error: getColorVarPallete('error'),
       },
       borderColor: getColorVar('border'),

package/lib/themes/base/index.js

@@ -1,14 +1,11 @@
 import * as e from "./components.js";
 import s from "./styles.css.js";
-const o = {
+const t = {
   name: "Base",
-  colors: {
-    primary: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", 950: "#022c22" }
-  },
   styles: `${s}`,
   classPrefix: "x-",
   components: e
-}, a = o;
+}, m = t;
 export {
-  a as default
+  m as default
 };

package/lib/themes/base/styles.css.js

@@ -9,6 +9,10 @@ html.dark {
   background-color: #111827;
 }
 
+body {
+  font-size: 14px;
+}
+
 *,
 ::before,
 ::after {

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.0.0-dev-20240129122517";
+declare const _default: "0.0.0-dev-20240205224808";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "0.0.0-dev-20240129122517";
+const e = "0.0.0-dev-20240205224808";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "0.0.0-dev-20240129122517",
+  "version": "0.0.0-dev-20240205224808",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -20,6 +20,7 @@
   "files": [
     "lib",
     "src",
+    "docs",
     "*.d.ts",
     "exports",
     "README.md"
@@ -34,6 +35,7 @@
       "require": "./lib/index.umd.js",
       "types": "./lib/index.d.ts"
     },
+    "./docs/*": "./docs/*",
     "./nuxt": "./exports/nuxt.mjs",
     "./nuxt.plugin": "./exports/nuxt.plugin.js",
     "./nuxt.plugin.js": "./exports/nuxt.plugin.js",
@@ -64,7 +66,7 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
-    "shiki": "^0.14.3",
+    "shiki": "1.0.0-beta.1",
     "stylelint": "^14.16.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.2.2",

package/src/components/accordion/Accordion.vue

@@ -16,6 +16,10 @@ const accordionProps = {
 
 export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>
 
+export type AccordionInjection = AccordionProps & {
+  isInsideAccordion: boolean;
+}
+
 type InternalClasses = 'wrapper'
 export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {}
 
@@ -33,7 +37,7 @@ import { injectAccordionKey } from '../../composables/keys'
 
 const props = defineProps(accordionProps)
 
-provide(injectAccordionKey, props)
+provide(injectAccordionKey, { ...props, isInsideAccordion: true })
 
 const { styles, classes, className } = useTheme('Accordion', {}, props)
 </script>

package/src/components/accordion/AccordionItem.vue

@@ -24,6 +24,7 @@ export type AccordionItemProps = ExtractPublicPropTypes<typeof accordionItemProp
 type InternalClasses = 'wrapper' | 'icon' | 'content'
 type InternalData = {
   collapsed: boolean;
+  isInsideAccordion: boolean;
 }
 export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {}
 
@@ -46,7 +47,9 @@ const props = defineProps(accordionItemProps)
 
 const emit = defineEmits(['expand'])
 
-const accordionProps = inject(injectAccordionKey, {})
+const accordionProps = inject(injectAccordionKey, {
+  isInsideAccordion: false,
+})
 
 const computedIconAlign = computed(() => accordionProps.iconAlign || props.iconAlign)
 const computedProps = reactive({
@@ -127,7 +130,7 @@ function onExpand(anim = true) {
 const { styles, classes, className } = useTheme('AccordionItem', {}, {
   ...props,
   ...computedProps,
-}, { collapsed })
+}, { collapsed, isInsideAccordion: accordionProps.isInsideAccordion })
 
 defineExpose({ toggle, open, close })
 </script>

package/src/components/accordion/index.ts

@@ -1,4 +1,4 @@
 export { default as XAccordion } from './Accordion.vue'
-export type { AccordionProps, AccordionTheme } from './Accordion.vue'
+export type { AccordionProps, AccordionInjection, AccordionTheme } from './Accordion.vue'
 export { default as XAccordionItem } from './AccordionItem.vue'
 export type { AccordionItemProps, AccordionItemTheme } from './AccordionItem.vue'

package/src/components/accordion/theme/Accordion.carbon.theme.ts

@@ -1,9 +1,7 @@
 import type { AccordionTheme } from '../Accordion.vue'
 
-const theme: AccordionTheme = {
-  classes: {
-    wrapper: 'grid grid-cols-1 divide-y border-b border-t',
-  },
-}
+import BaseTheme from './Accordion.base.theme'
+
+const theme: AccordionTheme = BaseTheme
 
 export default theme

package/src/components/accordion/theme/AccordionItem.base.theme.ts

@@ -2,28 +2,31 @@ import type { AccordionItemTheme } from '../AccordionItem.vue'
 
 const theme: AccordionItemTheme = {
   classes: {
-    wrapper: ({ props, slots }) => {
+    wrapper: ({ props, slots, data }) => {
       const classes = ['relative flex items-center w-full text-left']
 
+      if (!data.isInsideAccordion) return classes
+
       if (slots.default) {
-        classes.push('px-4 py-2')
-        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-800')
+        if (props.iconAlign === 'left') classes.push('pl-8 pr-4')
+        else classes.push('pr-8 pl-4')
+        classes.push('py-2')
+        if (!props.disabled) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-600')
       }
 
-      if (props.iconAlign === 'left') classes.push('flex-row-reverse')
-
       if (!props.disabled) classes.push('cursor-pointer')
 
       return classes
     },
 
     icon: ({ props, data }) => {
-      const classes = ['flex transform transition-transform duration-150']
+      const classes = ['absolute flex transform transition-transform duration-150']
 
       if (!data.collapsed) classes.push('rotate-180')
-      if (props.disabled) classes.push('text-gray-300')
+      if (props.disabled) classes.push('text-secondary-300')
 
-      if (props.iconAlign === 'left') classes.push('mr-4')
+      if (props.iconAlign === 'left') classes.push('left-2')
+      else classes.push('right-2')
 
       return classes
     },

package/src/components/accordion/theme/AccordionItem.carbon.theme.ts

@@ -1,35 +1,7 @@
 import type { AccordionItemTheme } from '../AccordionItem.vue'
 
-const theme: AccordionItemTheme = {
-  classes: {
-    wrapper: ({ props, slots }) => {
-      const classes = ['relative flex items-center w-full text-left']
+import BaseTheme from './AccordionItem.base.theme'
 
-      if (slots.default) {
-        classes.push('px-4 py-2')
-        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-800')
-      }
-
-      if (props.iconAlign === 'left') classes.push('flex-row-reverse')
-
-      if (!props.disabled) classes.push('cursor-pointer')
-
-      return classes
-    },
-
-    icon: ({ props, data }) => {
-      const classes = ['flex transform transition-transform duration-150']
-
-      if (!data.collapsed) classes.push('rotate-180')
-      if (props.disabled) classes.push('text-gray-300')
-
-      if (props.iconAlign === 'left') classes.push('mr-4')
-
-      return classes
-    },
-
-    content: 'px-4 pt-2 pb-6 transition-[height] duration-150 overflow-y-hidden',
-  },
-}
+const theme: AccordionItemTheme = BaseTheme
 
 export default theme

package/src/components/badge/Badge.vue

@@ -101,7 +101,7 @@ const { styles, classes, className } = useTheme('Badge', {}, props)
         :class="[
           positionClasses,
           {
-            'border-2 border-gray-50 dark:border-gray-900': outlined,
+            'border-2 border-secondary-50 dark:border-secondary-900': outlined,
           }
         ]"
       >

package/src/components/breadcrumbs/theme/Breadcrumbs.base.theme.ts

@@ -4,7 +4,7 @@ const theme: BreadcrumbsTheme = {
   classes: {
     wrapper: 'flex items-center flex-wrap',
     item: 'flex items-center last-of-type:font-semibold',
-    separator: 'text-gray-400 mx-1.5',
+    separator: 'text-secondary-400 mx-1.5',
   },
 }
 

package/src/components/button/Button.vue

@@ -122,7 +122,7 @@ defineExpose({ focus, blur })
       :label="loadingLabel"
       :status="loadingStatus"
     />
-    <div :class="{ 'invisible': loading }">
+    <div class="inline-flex items-center justify-center" :class="{ 'invisible': loading }">
       <x-icon
         v-if="computedIconLeft"
         :size="computedSize"

package/src/components/button/theme/Button.base.theme.ts

@@ -193,10 +193,10 @@ const theme: ButtonTheme = {
         // filled
         vars.push(css.variables({
           text: '#fff',
-          border: !data.isButtonGroup ? 'transparent' : color[600],
+          border: color[600],
           dark: {
             text: '#fff',
-            border: !data.isButtonGroup ? 'transparent' : color[500],
+            border: color[500],
           },
         }))
         if (props.disabled) {

package/src/components/card/theme/Card.base.theme.ts

@@ -2,7 +2,7 @@ import type { CardTheme } from '../Card.vue'
 
 const theme: CardTheme = {
   classes: {
-    wrapper: ({ props }) => `rounded bg-white dark:bg-gray-800${props.flat ? '' : ' shadow'}`,
+    wrapper: ({ props }) => `bg-slate-50 dark:bg-slate-800 rounded-md ${props.flat ? '' : 'shadow'}`,
   },
 }
 

package/src/components/carousel/CarouselSlide.vue

@@ -1,5 +1,10 @@
 <script lang="ts">
-const carouselSlideProps = {}
+const carouselSlideProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+}
 
 export type CarouselSlideProps = ExtractPublicPropTypes<typeof carouselSlideProps>
 
@@ -8,7 +13,6 @@ export interface CarouselSlideTheme extends ThemeComponent<CarouselSlideProps, I
 
 export default {
   name: 'XCarouselSlide',
-  validators: {},
 }
 </script>
 
@@ -22,7 +26,8 @@ const { styles, classes, className } = useTheme('CarouselSlide', {}, props)
 </script>
 
 <template>
-  <div
+  <component
+    :is="tag"
     :style="styles"
     :class="[
       className,
@@ -31,7 +36,7 @@ const { styles, classes, className } = useTheme('CarouselSlide', {}, props)
     ]"
   >
     <slot></slot>
-  </div>
+  </component>
 </template>
 
 <style lang="postcss" scoped module>

package/src/components/checkbox/Checkbox.vue

@@ -149,7 +149,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
-        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-gray-900"></span>
+        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-secondary-900"></span>
         <slot v-else name="icon">
           <svg
             viewBox="0 0 20 20"

package/src/components/checkbox/theme/Checkbox.base.theme.ts

@@ -5,23 +5,23 @@ const theme: CheckboxTheme = {
     wrapper: ({ data }) => {
       const classes = ['inline-block relative cursor-pointer align-middle']
 
-      if (data.isInsideForm) classes.push('mb-3')
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-4')
 
       return classes
     },
 
     box: ({ props }) => {
-      const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+      const classes = ['rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
 
-      if (props.size === 'xs' || props.size === 'sm') classes.push('h-4 w-4')
+      if (props.size === 'lg') classes.push('h-5 w-5')
       else if (props.size === 'xl') classes.push('h-6 w-6')
-      else classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
 
       return classes
     },
 
     content: ({ props }) => {
-      const classes = ['flex items-center']
+      const classes = ['flex items-baseline']
 
       if (props.disabled) classes.push('cursor-not-allowed')
 
@@ -29,17 +29,17 @@ const theme: CheckboxTheme = {
     },
 
     icon: ({ props }) => {
-      const classes = ['fill-current text-white dark:text-gray-900']
+      const classes = ['fill-current text-white']
 
-      if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
+      if (props.size === 'lg') classes.push('h-3 w-3')
       else if (props.size === 'xl') classes.push('h-4 w-4')
-      else classes.push('h-3 w-3')
+      else classes.push('h-2.5 w-2.5')
 
       return classes
     },
 
     label: ({ props }) => {
-      const classes = ['inline-block font-medium text-gray-800 dark:text-gray-200 pl-2']
+      const classes = ['inline-block font-medium text-secondary-800 dark:text-secondary-200 pl-2']
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')

package/src/components/checkbox/theme/Checkbox.carbon.theme.ts

@@ -29,7 +29,7 @@ const theme: CheckboxTheme = {
     },
 
     icon: ({ props }) => {
-      const classes = ['fill-current text-white dark:text-gray-900']
+      const classes = ['fill-current text-white dark:text-secondary-900']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
       else if (props.size === 'xl') classes.push('h-3.5 w-3.5')
@@ -39,7 +39,7 @@ const theme: CheckboxTheme = {
     },
 
     label: ({ props }) => {
-      const classes = ['text-gray-800 dark:text-gray-200 pl-2 text-sm']
+      const classes = ['text-secondary-800 dark:text-secondary-200 pl-2 text-sm']
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')

package/src/components/container/Container.vue

@@ -4,6 +4,10 @@ const containerProps = {
     type: String,
     default: 'div',
   },
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
 }
 
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>

package/src/components/container/theme/Container.base.theme.ts

@@ -2,7 +2,13 @@ import type { ContainerTheme } from '../Container.vue'
 
 const theme: ContainerTheme = {
   classes: {
-    wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
+    wrapper: ({ props }) => {
+      const classes = ['px-4 md:px-6']
+
+      if (!props.fluid) classes.push('max-w-screen-lg mx-auto')
+
+      return classes
+    },
   },
 }
 

package/src/components/divider/Divider.vue

@@ -40,7 +40,7 @@ const { styles, classes, className } = useTheme('Divider', {}, props)
     ></div>
     <div
       v-if="label"
-      class="font-medium text-sm text-gray-600 dark:text-gray-300"
+      class="font-medium text-sm text-secondary-600 dark:text-secondary-300"
       :class="[
         classes.label,
         {

package/src/components/divider/theme/Divider.base.theme.ts

@@ -4,9 +4,9 @@ const theme: DividerTheme = {
   classes: {
     wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
 
-    label: 'font-medium text-sm text-gray-600 dark:text-gray-300',
+    label: 'font-medium text-sm text-secondary-600 dark:text-secondary-300',
 
-    line: 'bg-gray-200 dark:bg-slate-700 flex-grow',
+    line: 'bg-secondary-200 dark:bg-secondary-700 flex-grow',
   },
 }
 

package/src/components/drawer/Drawer.vue

@@ -155,7 +155,7 @@ function onEnter(el: Element, done: () => void) {
   }
   el.addEventListener('transitionend', done)
   setTimeout(() => {
-    if (props.backdrop) el.classList.add('bg-gray-500/30')
+    if (props.backdrop) el.classList.add('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = '0'
     else if (props.position === 'bottom') (el as HTMLElement).style.bottom = '0'
     else if (props.position === 'left') (el as HTMLElement).style.left = '0'
@@ -168,7 +168,7 @@ function onBeforeLeave(el: Element) {}
 function onLeave(el: Element, done: () => void) {
   el.addEventListener('transitionend', done)
   setTimeout(() => {
-    if (props.backdrop) el.classList.remove('bg-gray-500/30')
+    if (props.backdrop) el.classList.remove('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
     else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
     else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`

package/src/components/drawer/theme/Drawer.base.theme.ts

@@ -2,7 +2,7 @@ import type { DrawerTheme } from '../Drawer.vue'
 
 const theme: DrawerTheme = {
   classes: {
-    wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
+    wrapper: 'flex flex-col max-h-full bg-white dark:bg-secondary-800',
 
     backdrop: 'duration-150 ease-in-out',
   },

package/src/components/form/Form.vue

@@ -139,7 +139,7 @@ const { styles, classes, className } = useTheme('Form', {}, props)
     @submit="submit"
   >
     <slot name="header">
-      <div v-if="title || description" class="mb-10">
+      <div v-if="title || description" class="mb-6">
         <p v-if="title" :class="classes.title">{{ title }}</p>
         <p v-if="description" :class="classes.description">{{ description }}</p>
       </div>

package/src/components/form/theme/Form.base.theme.ts

@@ -4,11 +4,11 @@ const theme: FormTheme = {
   classes: {
     wrapper: 'relative',
 
-    content: 'grid gap-4',
+    content: '',
 
     title: 'text-xl mb-1',
 
-    description: 'text-gray-500',
+    description: 'text-secondary-500',
 
     footer: 'space-x-4 mt-4',
   },

package/src/components/form/theme/Form.carbon.theme.ts

@@ -8,7 +8,7 @@ const theme: FormTheme = {
 
     title: 'text-xl mb-1',
 
-    description: 'text-gray-500',
+    description: 'text-secondary-500',
 
     footer: 'grid grid-cols-2 gap-4 lg:flex mt-8',
   },

package/src/components/formGroup/FormGroup.vue

@@ -106,6 +106,7 @@ defineExpose({ focus, blur, reset, validate, setError })
     :class="[
       className,
     ]"
+    :tooltip="tooltip"
     v-on="listeners"
   >
     <div :class="classes.wrapper">

package/src/components/formGroup/theme/FormGroup.base.theme.ts

@@ -5,7 +5,7 @@ const theme: FormGroupTheme = {
     wrapper: ({ props }) => {
       const classes = ['']
 
-      if (!props.vertical) classes.push('flex gap-2')
+      if (!props.vertical) classes.push('flex gap-4')
       else classes.push('grid gap-1')
 
       return classes

package/src/components/icon/theme/Icon.base.theme.ts

@@ -8,9 +8,9 @@ const theme: IconTheme = {
       if (props.size === 'xs') return classes + ' h-3 w-3'
       else if (props.size === 'sm') return classes + ' h-4 w-4'
       else if (props.size === 'lg') return classes + ' h-6 w-6'
-      else if (props.size === 'xl') return classes + ' h-9 w-9'
+      else if (props.size === 'xl') return classes + ' h-7 w-7'
 
-      return classes + ' h-5 w-5'
+      return classes + ' h-4 w-4'
     },
   },
 }

package/src/components/input/Input.vue

@@ -114,6 +114,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
   >
     <div class="relative">
       <slot name="prefix">
@@ -134,7 +135,7 @@ defineExpose({ focus, blur, reset, validate, setError })
           type === 'password' ? 'pr-10' : '',
           // error
           errorInternal
-            ? 'border-red-500 dark:border-red-400 focus:outline-red-500'
+            ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-input-border)]',
           {
             '!pl-10': iconLeft,

package/src/components/input/theme/Input.base.theme.ts

@@ -5,9 +5,9 @@ const theme: InputTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
       else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
@@ -16,13 +16,13 @@ const theme: InputTheme = {
       else classes.push('px-3 py-2')
 
       classes.push(props.disabled
-        ? 'bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
-        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        ? 'bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed'
+        : 'bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
 
       return classes
     },
 
-    icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
+    icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
   },
 
   styles: ({ colors, props, css }) => {

package/src/components/input/theme/Input.carbon.theme.ts

@@ -5,26 +5,26 @@ const theme: InputTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
       else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
       else classes.push('py-2.5')
 
       if (props.disabled) {
-        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+        classes.push('bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed')
       } else if (props.readonly) {
-        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+        classes.push('bg-white dark:bg-secondary-900 text-secondary-700')
       } else {
-        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
       }
 
       return classes
     },
 
-    icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
+    icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
   },
 
   styles: ({ colors, props, css }) => {