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

package/src/components/select/Select.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 const selectProps = {
+  ...useColors.props('primary'),
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
@@ -33,6 +34,7 @@ export default {
 <script setup lang="ts">
 import { computed, ref, watch, type PropType, type ExtractPublicPropTypes, type Ref, nextTick, unref } from 'vue'
 import { useEventListener } from '@vueuse/core'
+import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
@@ -325,6 +327,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
     v-on="labelListeners"
   >
     <div class="relative">
@@ -347,7 +350,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         <template v-else>
           <div
             v-if="placeholder"
-            class="text-gray-400 dark:text-gray-500"
+            class="text-secondary-400 dark:text-secondary-500"
           >
             {{ placeholder }}
           </div>
@@ -357,10 +360,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-popover
         v-else
         ref="popoverRef"
-        block
         :disabled="disabled || loading || readonly"
-        :dismiss-on-click="!multiple"
-        align="left"
       >
         <div
           :class="[classes.box]"
@@ -384,7 +384,7 @@ defineExpose({ focus, blur, reset, validate, setError })
           <template v-else>
             <div
               v-if="placeholder"
-              class="text-gray-400 dark:text-gray-500"
+              class="text-secondary-400 dark:text-secondary-500"
             >
               {{ placeholder }}
             </div>
@@ -403,12 +403,12 @@ defineExpose({ focus, blur, reset, validate, setError })
                 :size="size"
                 :disabled="item.disabled"
                 :selected="index === selectedIndex"
-                color="primary"
+                :color="color"
                 filled
                 @click="() => !multiple && popoverRef?.hide()"
               />
             </template>
-            <div v-else class="px-2 text-center text-gray-400">
+            <div v-else class="px-2 text-center text-secondary-400">
               No options
             </div>
           </x-popover-container>

package/src/components/select/theme/Select.base.theme.ts

@@ -5,9 +5,9 @@ const theme: SelectTheme = {
     wrapper: '',
 
     box: ({ props, data }) => {
-      const classes = ['w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm']
+      const classes = ['w-full border border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm']
 
-      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')
@@ -15,11 +15,11 @@ const theme: SelectTheme = {
       else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
       else classes.push('px-3 py-2')
 
-      if (props.disabled) classes.push('bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed')
-      else classes.push('bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+      if (props.disabled) classes.push('bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed')
+      else classes.push('bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
 
       if (data.errorInternal) {
-        classes.push('border-red-500 dark:border-red-400 group-focus:outline-red-500')
+        classes.push('border-error-500 dark:border-error-400 group-focus:outline-error-500')
       } else if (!props.disabled) {
         classes.push('group-focus:outline-[color:var(--x-select-border)]')
       }
@@ -27,7 +27,7 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-y-auto',
+    content: 'p-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 
@@ -39,8 +39,8 @@ const theme: SelectTheme = {
       else if (props.size === 'xl') classes.push('h-7 w-7')
       else classes.push('h-5 w-5')
 
-      if (props.disabled) classes.push('text-gray-300 dark:text-gray-500')
-      else classes.push('text-gray-500 dark:text-gray-400')
+      if (props.disabled) classes.push('text-secondary-300 dark:text-secondary-500')
+      else classes.push('text-secondary-500 dark:text-secondary-400')
 
       return classes
     },

package/src/components/select/theme/Select.carbon.theme.ts

@@ -5,24 +5,24 @@ const theme: SelectTheme = {
     wrapper: '',
 
     box: ({ props, data }) => {
-      const classes = ['w-full border-b text-sm px-4 border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out']
+      const classes = ['w-full border-b text-sm px-4 border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out']
 
-      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')
       }
 
       if (data.errorInternal) {
-        classes.push('border-red-500 dark:border-red-400 group-focus:outline-red-500')
+        classes.push('border-error-500 dark:border-error-400 group-focus:outline-error-500')
       } else if (!props.disabled) {
         classes.push('group-focus:outline-[color:var(--x-select-border)]')
       }
@@ -37,8 +37,8 @@ const theme: SelectTheme = {
     icon: ({ props }) => {
       const classes = ['h-5 w-5']
 
-      if (props.disabled) classes.push('text-gray-300 dark:text-gray-500')
-      else classes.push('text-gray-500 dark:text-gray-400')
+      if (props.disabled) classes.push('text-secondary-300 dark:text-secondary-500')
+      else classes.push('text-secondary-500 dark:text-secondary-400')
 
       return classes
     },

package/src/components/skeleton/theme/Skeleton.base.theme.ts

@@ -3,7 +3,7 @@ import type { SkeletonTheme } from '../Skeleton.vue'
 const theme: SkeletonTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes = ['animate-pulse bg-gray-300 dark:bg-gray-600']
+      const classes = ['animate-pulse bg-secondary-300 dark:bg-secondary-600']
 
       if (props.shape === 'circle') classes.push('w-8 h-8 rounded-full')
       else classes.push('rounded-md')

package/src/components/slider/Slider.vue

@@ -211,6 +211,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       <slot name="suffix" :value="value"></slot>
     </div>
 
-    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
   </x-label>
 </template>

package/src/components/slider/theme/Slider.carbon.theme.ts

@@ -4,7 +4,7 @@ const theme: SliderTheme = {
   classes: {
     wrapper: '',
 
-    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900',
+    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-secondary-900 dark:bg-secondary-100',
   },
 
   styles: ({ props, colors, css }) => {

package/src/components/stepper/Stepper.vue

@@ -116,7 +116,7 @@ const { styles, classes, className } = useTheme('Stepper', {}, props)
             :key="index"
             :class="[classes.step, {
               'cursor-pointer': interactive && !step.disabled,
-              'text-gray-400 dark:text-gray-600': step.disabled,
+              'text-secondary-400 dark:text-secondary-600': step.disabled,
               'flex-1': grow,
             }]"
             :disabled="step.disabled || !interactive"
@@ -125,7 +125,7 @@ const { styles, classes, className } = useTheme('Stepper', {}, props)
             <div class="overflow-hidden">
               <div
                 class="h-0.5 w-full mb-2"
-                :class="[step.status === 'complete' || step.status === 'incomplete' ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-700']"
+                :class="[step.status === 'complete' || step.status === 'incomplete' ? 'bg-primary-500' : 'bg-secondary-200 dark:bg-secondary-700']"
               ></div>
               <div class="flex items-start pr-4">
                 <x-icon
@@ -138,7 +138,7 @@ const { styles, classes, className } = useTheme('Stepper', {}, props)
                 />
                 <div class="grid text-left">
                   <div class="text-sm truncate">{{ step.label }}</div>
-                  <div v-if="step.description" class="text-xs text-gray-500">{{ step.description }}</div>
+                  <div v-if="step.description" class="text-xs text-secondary-500">{{ step.description }}</div>
                 </div>
               </div>
             </div>

package/src/components/tab/Tab.vue

@@ -139,7 +139,7 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
         'text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]': selected,
         'cursor-pointer': !disabled,
         'cursor-not-allowed': disabled,
-        'cursor-not-allowed text-gray-500': disabled && !selected,
+        'cursor-not-allowed text-secondary-500': disabled && !selected,
       },
     ]"
     :aria-disabled="disabled ? 'true' : undefined"
@@ -165,13 +165,13 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
           v-if="removable"
           size="sm"
           :icon="closeIcon"
-          class="ml-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-500 transition-colors duration-150"
+          class="ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150"
           @click="(e: Event) => $emit('remove', e)"
         />
       </div>
     </slot>
     <teleport v-if="selected && teleportTo" :to="teleportTo">
-      <div role="tabpanel" :class="classes.tabpanel">
+      <div v-if="$slots.default" role="tabpanel" :class="classes.tabpanel">
         <slot></slot>
       </div>
     </teleport>

package/src/components/tab/theme/TabGroup.base.theme.ts

@@ -9,7 +9,7 @@ const theme: TabGroupTheme = {
 
       if (!props.fullWidth) c.push('!w-fit')
       if (props.variant === 'block') c.push('rounded-md')
-      if (props.variant === 'block' && !props.ghost) c.push('bg-slate-100 dark:bg-gray-800 p-1')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-100 dark:bg-secondary-800 p-1')
 
       return c
     },
@@ -17,7 +17,7 @@ const theme: TabGroupTheme = {
     list: ({ props }) => {
       const c = ['flex min-w-full w-fit']
 
-      if (props.variant === 'line') c.push('border-b border-gray-200 dark:border-gray-700')
+      if (props.variant === 'line') c.push('border-b border-secondary-200 dark:border-secondary-700')
       if (props.variant === 'line' && !props.grow) c.push('space-x-8')
       if (props.variant === 'block') c.push('z-[1]')
       if (props.align === 'center') c.push('justify-center')
@@ -38,7 +38,7 @@ const theme: TabGroupTheme = {
   },
 
   styles: ({ props, colors, css }) => {
-    const gray = colors.getPalette('gray')
+    const secondary = colors.getPalette('secondary')
     const color = colors.getPalette(props.color)
 
     return css.variables({
@@ -46,7 +46,7 @@ const theme: TabGroupTheme = {
       bg: props.ghost ? color[50] : '#fff',
       dark: {
         text: color[400],
-        bg: props.ghost ? color[900] : gray[700],
+        bg: props.ghost ? color[900] : secondary[700],
       },
     })
   },

package/src/components/tab/theme/TabGroup.carbon.theme.ts

@@ -9,7 +9,7 @@ const theme: TabGroupTheme = {
 
       if (!props.fullWidth) c.push('!w-fit')
       if (props.variant === 'block') c.push('')
-      if (props.variant === 'block' && !props.ghost) c.push('bg-gray-200 dark:bg-gray-800')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-200 dark:bg-secondary-800')
 
       return c
     },
@@ -17,7 +17,7 @@ const theme: TabGroupTheme = {
     list: ({ props }) => {
       const c = ['flex min-w-full w-fit']
 
-      if (props.variant === 'line') c.push('border-b border-gray-200 dark:border-gray-700')
+      if (props.variant === 'line') c.push('border-b border-secondary-200 dark:border-secondary-700')
       if (props.variant === 'line' && !props.grow) c.push('')
       if (props.variant === 'block') c.push('z-[1] py-1.5')
       if (props.align === 'center') c.push('justify-center')
@@ -31,7 +31,7 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('border-t-2 border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-gray-100 dark:bg-gray-700')
+      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-secondary-100 dark:bg-secondary-700')
 
       return c
     },

package/src/components/table/Table.vue

@@ -66,6 +66,8 @@ import XSpinner from '../spinner/Spinner.vue'
 import XSkeleton from '../skeleton/Skeleton.vue'
 import type { SkeletonShape } from '../skeleton/Skeleton.vue'
 
+import XIcon from '../icon/Icon.vue'
+
 import { chevronDownIcon } from '../../common/icons'
 
 const props = defineProps({

package/src/components/table/theme/Table.base.theme.ts

@@ -16,7 +16,7 @@ const theme: TableTheme = {
       return classes
     },
 
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30',
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-secondary-300 dark:bg-secondary-600 rounded opacity-30',
   },
 }
 

package/src/components/table/theme/Table.carbon.theme.ts

@@ -2,7 +2,7 @@ import type { TableTheme } from '../Table.vue'
 
 const theme: TableTheme = {
   classes: {
-    wrapper: 'w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-gray-800',
+    wrapper: 'w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-secondary-800',
 
     table: ({ props }) => {
       const classes = ['w-full relative']
@@ -16,7 +16,7 @@ const theme: TableTheme = {
       return classes
     },
 
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30',
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-secondary-300 dark:bg-secondary-600 rounded opacity-30',
   },
 }
 

package/src/components/table/theme/TableHead.base.theme.ts

@@ -3,7 +3,7 @@ import type { TableHeadTheme } from '../TableHead.vue'
 const theme: TableHeadTheme = {
   classes: {
     thead: 'align-bottom',
-    row: 'text-sm text-gray-600 dark:text-gray-400 border-b',
+    row: 'text-sm text-secondary-600 dark:text-secondary-400 border-b',
   },
 }
 

package/src/components/table/theme/TableHead.carbon.theme.ts

@@ -3,7 +3,7 @@ import type { TableHeadTheme } from '../TableHead.vue'
 const theme: TableHeadTheme = {
   classes: {
     thead: 'align-bottom',
-    row: 'text-gray-900 dark:text-gray-50',
+    row: 'text-secondary-900 dark:text-secondary-50',
   },
 }
 

package/src/components/table/theme/TableHeader.base.theme.ts

@@ -5,7 +5,7 @@ const theme: TableHeaderTheme = {
     th: ({ props }) => {
       const classes = ['relative py-2 font-semibold tracking-widest uppercase text-xs px-3']
 
-      if (props.sortable) classes.push('cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out')
+      if (props.sortable) classes.push('cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out')
 
       if (props.stickyHeader) classes.push('sticky top-0')
 

package/src/components/table/theme/TableHeader.carbon.theme.ts

@@ -3,9 +3,9 @@ import type { TableHeaderTheme } from '../TableHeader.vue'
 const theme: TableHeaderTheme = {
   classes: {
     th: ({ props }) => {
-      const classes = ['relative py-3.5 font-semibold text-sm px-3 bg-gray-200 dark:bg-gray-700 select-none']
+      const classes = ['relative py-3.5 font-semibold text-sm px-3 bg-secondary-200 dark:bg-secondary-700 select-none']
 
-      if (props.sortable) classes.push('cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-150 ease-in-out pr-5')
+      if (props.sortable) classes.push('cursor-pointer hover:bg-secondary-300 dark:hover:bg-secondary-600 transition-colors duration-150 ease-in-out pr-5')
 
       if (props.stickyHeader) classes.push('sticky top-0')
 

package/src/components/table/theme/TableRow.base.theme.ts

@@ -6,12 +6,12 @@ const theme: TableRowTheme = {
       const classes = []
 
       if (props.striped) {
-        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+        classes.push('odd:bg-secondary-50 dark:odd:bg-secondary-800')
       } else {
-        classes.push('border-b border-gray-200 dark:border-gray-700')
+        classes.push('border-b border-secondary-200 dark:border-secondary-700')
       }
 
-      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer')
+      if (props.pointer) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer')
 
       return classes
     },

package/src/components/table/theme/TableRow.carbon.theme.ts

@@ -6,12 +6,12 @@ const theme: TableRowTheme = {
       const classes = []
 
       if (props.striped) {
-        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+        classes.push('odd:bg-secondary-50 dark:odd:bg-secondary-800')
       } else {
-        classes.push('border-b border-gray-200 dark:border-gray-700')
+        classes.push('border-b border-secondary-200 dark:border-secondary-700')
       }
 
-      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer')
+      if (props.pointer) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-600 cursor-pointer')
 
       return classes
     },

package/src/components/tag/Tag.vue

@@ -70,7 +70,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       <x-icon
         :size="closeIconSize"
         :icon="closeIcon"
-        class="ml-1.5 cursor-pointer hover:text-gray-700 transition-colors duration-150"
+        class="ml-1.5 cursor-pointer hover:text-secondary-700 transition-colors duration-150"
         @click="(e: Event) => $emit('remove', e)"
       />
     </span>

package/src/components/textarea/Textarea.vue

@@ -19,6 +19,7 @@ const textareaProps = {
   adjustToText: Boolean,
   preventEnter: Boolean,
   block: Boolean,
+  resizable: Boolean,
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
@@ -114,6 +115,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
   >
     <textarea
       :id="id"
@@ -123,7 +125,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       :class="[
         classes.input,
         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-textarea-border)]',
       ]"
       :disabled="disabled"

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -5,9 +5,10 @@ const theme: TextareaTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition 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 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 (!props.resizable) classes.push('resize-none')
+      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,8 +17,8 @@ const theme: TextareaTheme = {
       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
     },

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -5,20 +5,20 @@ const theme: TextareaTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+      const classes = ['resize-none appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition 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

package/src/components/toggle/Toggle.vue

@@ -76,8 +76,8 @@ defineExpose({ focus, blur, reset, validate, setError })
         :style="styles"
         :class="{
           [`shadow-lg shadow-${color}-500/50`]: glow && modelValue,
-          'bg-gray-300 dark:bg-gray-500': !disabled && !checked && !loading,
-          'bg-gray-100 dark:bg-gray-700': disabled || loading,
+          'bg-secondary-300 dark:bg-secondary-500': !disabled && !checked && !loading,
+          'bg-secondary-100 dark:bg-secondary-700': disabled || loading,
           'bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]': !disabled && checked,
         }"
       >
@@ -102,7 +102,7 @@ defineExpose({ focus, blur, reset, validate, setError })
                 'translate-x-full': checked,
                 'shadow': !disabled
               },
-              disabled ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-800'
+              disabled ? 'bg-secondary-50 dark:bg-secondary-800' : 'bg-white dark:bg-secondary-800'
             ]"
           ></div>
         </div>

package/src/components/toggle/theme/Toggle.base.theme.ts

@@ -5,7 +5,7 @@ const theme: ToggleTheme = {
     wrapper: '',
 
     label: ({ props }) => {
-      const c = 'font-medium text-gray-800 dark:text-gray-200'
+      const c = 'font-medium text-secondary-800 dark:text-secondary-200'
 
       if (props.size === 'xs') return c + ' text-xs'
       else if (props.size === 'sm') return c + ' text-sm'

package/src/components/tooltip/ToggleTip.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+const toggleTipProps = {
+  content: String,
+  icon: String,
+}
+
+export type ToggleTipProps = ExtractPublicPropTypes<typeof toggleTipProps>
+
+export default { name: 'XToggleTip' }
+</script>
+
+<script setup lang="ts">
+import { computed, type ExtractPublicPropTypes } from 'vue'
+import XTooltip from './Tooltip.vue'
+import XIcon from '../icon/Icon.vue'
+
+import { infoIcon } from '../../common/icons'
+
+const props = defineProps(toggleTipProps)
+
+const computedIcon = computed(() => props.icon || infoIcon)
+</script>
+
+<template>
+  <x-tooltip placement="auto">
+    <x-icon :icon="computedIcon" class="text-secondary-500 dark:text-secondary-300 cursor-pointer" />
+    <template #tooltip>
+      <div v-html="content"></div>
+    </template>
+  </x-tooltip>
+</template>

package/src/components/tooltip/Tooltip.vue

@@ -1,5 +1,12 @@
 <script lang="ts">
-const tooltipProps = {}
+const tooltipProps = {
+  placement: {
+    type: String as PropType<PopoverPlacement>,
+    default: 'bottom',
+  },
+}
+
+export type PopoverPlacement = Placement
 
 export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>
 
@@ -7,17 +14,20 @@ export default { name: 'XTooltip' }
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes, PropType } from 'vue'
 import XPopover from '../../components/popover/Popover.vue'
 import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
+import { type Placement } from 'floating-vue'
+
+const props = defineProps(tooltipProps)
 </script>
 
 <template>
-  <x-popover :triggers="['hover']" class="inline-block">
+  <x-popover :triggers="['hover', 'click']" class="inline-block" :hide-arrow="false" :placement="placement">
     <slot></slot>
     <template #content>
       <div class="dark">
-        <x-popover-container class="p-2 text-white text-sm w-max max-w-xs">
+        <x-popover-container class="p-2 text-white text-xs w-max max-w-xs">
           <slot name="tooltip"></slot>
         </x-popover-container>
       </div>

package/src/components/tooltip/__tests__/ToggleTip.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ToggleTip from '../ToggleTip.vue'
+
+describe('ToggleTip', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(ToggleTip)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/tooltip/index.ts

@@ -1,2 +1,5 @@
 export { default as XTooltip } from './Tooltip.vue'
 export type { TooltipProps } from './Tooltip.vue'
+
+export { default as XToggleTip } from './ToggleTip.vue'
+export type { ToggleTipProps } from './ToggleTip.vue'