fix: arrow style should be stroke-default and fill with bg

Author: canstand

src/theme/dropdown-menu.ts

@@ -4,7 +4,7 @@ export default (options: Required<ModuleOptions>) => ({
   slots: {
     content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col',
     viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1',
-    arrow: 'fill-default',
+    arrow: 'fill-(--ui-bg) stroke-default',
     group: 'p-1 isolate',
     label: 'w-full flex items-center font-semibold text-highlighted',
     separator: '-mx-1 my-1 h-px bg-border',

src/theme/input-menu.ts

@@ -8,7 +8,7 @@ export default (options: Required<ModuleOptions>) => {
       base: () => ['rounded-md', options.theme.transitions && 'transition-colors'],
       trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none',
       trailingClear: 'p-0',
-      arrow: 'fill-default',
+      arrow: 'fill-(--ui-bg) stroke-default',
       content: 'max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col',
       viewport: 'relative scroll-py-1 overflow-y-auto flex-1',
       group: 'p-1 isolate',

src/theme/popover.ts

@@ -1,6 +1,6 @@
 export default {
   slots: {
     content: 'bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
-    arrow: 'fill-default'
+    arrow: 'fill-(--ui-bg) stroke-default'
   }
 }

src/theme/select.ts

@@ -10,7 +10,7 @@ export default (options: Required<ModuleOptions>) => {
       base: () => ['relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
       value: 'truncate pointer-events-none',
       placeholder: 'truncate text-dimmed',
-      arrow: 'fill-default',
+      arrow: 'fill-(--ui-bg) stroke-default',
       content: 'max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col',
       viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1',
       group: 'p-1 isolate',

src/theme/tooltip.ts

@@ -1,7 +1,7 @@
 export default {
   slots: {
     content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
-    arrow: 'fill-default',
+    arrow: 'fill-(--ui-bg) stroke-default',
     text: 'truncate',
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5`,
     kbdsSize: 'sm'