fixes for select, color-mode, navigation

toolkit/chakra/color-mode.tsx

@@ -15,9 +15,9 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
     <ThemeProvider
       attribute="class"
       scriptProps={{ 'data-cfasync': 'false' }}
-      enableSystem={ false }
       defaultTheme={ config.UI.colorTheme.default?.colorMode }
-      disableTransitionOnChange { ...props }
+      disableTransitionOnChange
+      { ...props }
     />
   );
 }

toolkit/chakra/select.tsx

@@ -200,7 +200,7 @@ export const SelectRoot = React.forwardRef<
       lazyMount={ lazyMount }
       unmountOnExit={ unmountOnExit }
       { ...rest }
-      positioning={{ sameWidth: true, ...props.positioning, offset: { mainAxis: 4, ...props.positioning?.offset } }}
+      positioning={{ sameWidth: false, ...props.positioning, offset: { mainAxis: 4, ...props.positioning?.offset } }}
     >
       { props.asChild ? (
         props.children

toolkit/theme/recipes/select.recipe.ts

@@ -196,6 +196,10 @@ export const recipe = defineSlotRecipe({
           },
         },
       },
+      plain: {
+        trigger: {},
+        indicatorGroup: {},
+      },
     },
 
     size: {
@@ -257,6 +261,9 @@ export const recipe = defineSlotRecipe({
         trigger: {
           _placeholderShown: {
             color: 'select.trigger.outline.fg',
+            _hover: {
+              color: 'select.trigger.outline.fg',
+            },
           },
         },
       },

ui/shared/filters/PopoverFilterRadio.tsx

@@ -26,7 +26,8 @@ const PopoverFilterRadio = ({ name, hasActiveFilter, collection, isLoading, onCh
       collection={ collection }
       defaultValue={ initialValue ? [ initialValue ] : [ collection.items[0].value ] }
       onValueChange={ handleValueChange }
-      positioning={{ sameWidth: false }}
+      w="fit-content"
+      variant="plain"
     >
       <SelectControl
         triggerProps={{ asChild: true, px: { base: 1, lg: 2 } }}

ui/shared/forms/fields/FormFieldSelect.tsx

@@ -49,6 +49,7 @@ const FormFieldSelect = <
       invalid={ Boolean(fieldState.error) }
       errorText={ getFieldErrorText(fieldState.error) }
       size={ size }
+      positioning={{ sameWidth: true }}
       { ...rest }
     />
   );

ui/shared/forms/fields/FormFieldSelectAsync.tsx

@@ -49,6 +49,7 @@ const FormFieldSelectAsync = <
       invalid={ Boolean(fieldState.error) }
       errorText={ getFieldErrorText(fieldState.error) }
       size={ size }
+      positioning={{ sameWidth: true }}
       { ...rest }
     />
   );

ui/shared/sort/Sort.tsx

@@ -33,8 +33,9 @@ const Sort = (props: Props) => {
 
     return (
       <SelectControl
-        triggerProps={{ borderColor: 'transparent' }}
         loading={ isLoading }
+        _hover={{ color: 'link.primary.hover' }}
+        _open={{ color: 'link.primary.hover' }}
       >
         <chakra.span
           flexShrink={ 0 }
@@ -55,7 +56,7 @@ const Sort = (props: Props) => {
   })();
 
   return (
-    <SelectRoot collection={ collection } positioning={{ sameWidth: false }} { ...rest }>
+    <SelectRoot collection={ collection } w="fit-content" variant="plain" { ...rest }>
       { trigger }
       <SelectContent>
         { collection.items.map((item) => (

ui/shared/stats/StatsWidget.tsx

@@ -90,7 +90,7 @@ const StatsWidget = ({
             display="flex"
             alignItems="baseline"
             fontWeight={ 500 }
-            textStyle="lg"
+            textStyle="heading.md"
           >
             { valuePrefix && <chakra.span whiteSpace="pre">{ valuePrefix }</chakra.span> }
             { typeof value === 'string' ? (

ui/snippets/navigation/vertical/NavLinkGroup.tsx

@@ -68,6 +68,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
           pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
           aria-label={ `${ item.text } link group` }
           position="relative"
+          color={ item.isActive ? 'link.navigation.fg.selected' : 'link.navigation.fg' }
           bgColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
         >
           <HStack gap={ 0 } overflow="hidden">

ui/snippets/networkMenu/NetworkMenuButton.tsx

@@ -29,7 +29,7 @@ const NetworkMenuButton = ({ isActive, onClick, className, ...rest }: Props, ref
         name="networks"
         boxSize={ 4 }
         color={ isActive ? { _light: 'blue.700', _dark: 'blue.50' } : { _light: 'gray.600', _dark: 'gray.400' } }
-        _hover={{ color: 'link.hovered' }}
+        _hover={{ color: 'link.primary.hover' }}
         cursor="pointer"
       />
     </IconButton>