fix: divider, link, navigation and select component style inconsisten…

…cies (#134)
giantnodes · Jun 18, 2024 · da7bdf3 · da7bdf3
1 parent 89ed12b
commit da7bdf3
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 14 deletions.
diff --git a/packages/theme/src/components/divider.ts b/packages/theme/src/components/divider.ts
@@ -4,15 +4,15 @@ import { tv } from 'tailwind-variants'
 
 export const divider = tv({
   slots: {
-    divider: ['list-item', 'shrink-0', 'bg-partition', 'border-none'],
+    divider: ['shrink-0', 'bg-partition', 'border-none'],
   },
   variants: {
     orientation: {
       horizontal: {
-        divider: ['w-px', 'h-full'],
+        divider: ['h-px', 'w-full'],
       },
       vertical: {
-        divider: ['h-px', 'w-full'],
+        divider: ['w-px', 'h-full'],
       },
     },
   },

diff --git a/packages/theme/src/components/link.ts b/packages/theme/src/components/link.ts
@@ -4,13 +4,7 @@ import { tv } from 'tailwind-variants'
 
 export const link = tv({
   slots: {
-    link: [
-      'text-inherit hover:text-sky-600',
-      'transition-all duration-200',
-      'rounded',
-      'disabled:cursor-default disabled:opacity-50',
-      'focus:outline-dashed focus:outline-offset-2 focus:outline-1 focus:outline-sky-600',
-    ],
+    link: ['text-sky-600', 'transition-all duration-200', 'rounded', 'disabled:cursor-default disabled:opacity-50'],
   },
   variants: {
     underline: {

diff --git a/packages/theme/src/components/navigation.ts b/packages/theme/src/components/navigation.ts
@@ -13,7 +13,6 @@ export const navigation = tv({
     divider: ['bg-partition', 'border-partition'],
     trigger: [
       'flex items-center grow gap-x-3',
-      'p-2',
       'focus:outline-dashed focus:outline-offset-2 focus:outline-1 focus:outline-partition',
     ],
   },
@@ -23,7 +22,7 @@ export const navigation = tv({
         wrapper: ['flex-row items-center', 'w-full', 'px-4 md:px-6'],
         segment: ['items-center'],
         divider: ['h-full', 'w-px', 'mx-2'],
-        trigger: ['py-2 px-6'],
+        trigger: ['p-2'],
       },
       vertical: {
         wrapper: ['flex-col', 'h-full', 'p-4'],
@@ -51,6 +50,7 @@ export const navigation = tv({
       lg: {},
     },
     variant: {
+      none: {},
       highlight: {
         item: ['rounded-md hover:bg-foreground'],
         trigger: ['rounded-md'],

diff --git a/packages/theme/src/components/select.ts b/packages/theme/src/components/select.ts
@@ -14,9 +14,9 @@ export const select = tv({
       'cursor-pointer',
       'has-[:disabled]:opacity-50',
     ],
-    placeholder: ['text-subtitle'],
+    placeholder: [],
     button: ['flex flex-row items-center justify-between', 'w-full', 'p-1.5', 'focus:outline-none'],
-    icon: [],
+    icon: ['shrink-0'],
     popover: ['bg-foreground', 'border border-solid border-partition', 'rounded-md', 'w-[--trigger-width]'],
     list: ['flex flex-col gap-1', 'p-1', 'outline-none'],
     option: [