refactor and restructure ui theme hooks

hyperglass/ui/components/debugger.tsx

@@ -3,18 +3,22 @@ import {
   Modal,
   HStack,
   Button,
-  useTheme,
   ModalBody,
   ModalHeader,
   ModalOverlay,
   ModalContent,
-  useColorMode,
   useDisclosure,
   ModalCloseButton,
 } from '@chakra-ui/react';
-import { useConfig, useColorValue, useBreakpointValue } from '~/context';
+import { useConfig } from '~/context';
 import { CodeBlock, DynamicIcon } from '~/elements';
-import { useHyperglassConfig } from '~/hooks';
+import {
+  useTheme,
+  useColorMode,
+  useColorValue,
+  useBreakpointValue,
+  useHyperglassConfig,
+} from '~/hooks';
 
 import type { UseDisclosureReturn } from '@chakra-ui/react';
 

hyperglass/ui/components/directive-info-modal.tsx

@@ -9,8 +9,8 @@ import {
   useDisclosure,
   ModalCloseButton,
 } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
 import { DynamicIcon, Markdown } from '~/elements';
+import { useColorValue } from '~/hooks';
 
 import type { ModalContentProps } from '@chakra-ui/react';
 

hyperglass/ui/components/footer/button.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { Button, Menu, MenuButton, MenuList } from '@chakra-ui/react';
-import { useColorValue, useBreakpointValue, useConfig } from '~/context';
+import { useConfig } from '~/context';
 import { Markdown } from '~/elements';
-import { useOpposingColor, useStrf } from '~/hooks';
+import { useColorValue, useBreakpointValue, useOpposingColor, useStrf } from '~/hooks';
 
 import type { MenuListProps } from '@chakra-ui/react';
 import type { Config } from '~/types';

hyperglass/ui/components/footer/color-mode.tsx

@@ -1,9 +1,8 @@
 import { forwardRef } from 'react';
 import { Button, Tooltip } from '@chakra-ui/react';
 import { Switch, Case } from 'react-if';
-import { useColorMode, useColorValue, useBreakpointValue } from '~/context';
 import { DynamicIcon } from '~/elements';
-import { useOpposingColor } from '~/hooks';
+import { useOpposingColor, useColorMode, useColorValue, useBreakpointValue } from '~/hooks';
 
 import type { ButtonProps } from '@chakra-ui/react';
 

hyperglass/ui/components/footer/footer.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { Flex, HStack, useToken } from '@chakra-ui/react';
 import { If, Then } from 'react-if';
-import { useConfig, useMobile, useColorValue, useBreakpointValue } from '~/context';
+import { useConfig } from '~/context';
 import { DynamicIcon } from '~/elements';
-import { useStrf } from '~/hooks';
+import { useStrf, useMobile, useColorValue, useBreakpointValue } from '~/hooks';
 import { FooterButton } from './button';
 import { ColorModeToggle } from './color-mode';
 import { FooterLink } from './link';

hyperglass/ui/components/footer/link.tsx

@@ -1,4 +1,5 @@
-import { Button, Link, useBreakpointValue } from '@chakra-ui/react';
+import { Button, Link } from '@chakra-ui/react';
+import { useBreakpointValue } from '~/hooks';
 
 import type { ButtonProps, LinkProps } from '@chakra-ui/react';
 

hyperglass/ui/components/form-field.tsx

@@ -2,8 +2,7 @@ import { useMemo } from 'react';
 import { Flex, FormControl, FormLabel, FormErrorMessage } from '@chakra-ui/react';
 import { useFormContext } from 'react-hook-form';
 import { If, Then } from 'react-if';
-import { useColorValue } from '~/context';
+import { useBooleanValue, useColorValue } from '~/hooks';
-import { useBooleanValue } from '~/hooks';
 
 import type { FormControlProps } from '@chakra-ui/react';
 import type { FieldError } from 'react-hook-form';

hyperglass/ui/components/greeting.tsx

@@ -11,8 +11,8 @@ import {
 } from '@chakra-ui/react';
 import { If, Then } from 'react-if';
 import { Markdown } from '~/elements';
-import { useConfig, useColorValue } from '~/context';
+import { useConfig } from '~/context';
-import { useGreeting, useOpposingColor } from '~/hooks';
+import { useGreeting, useColorValue, useOpposingColor } from '~/hooks';
 
 import type { ModalContentProps } from '@chakra-ui/react';
 

hyperglass/ui/components/header/header.tsx

@@ -1,7 +1,6 @@
 import { Flex, ScaleFade } from '@chakra-ui/react';
-import { useBreakpointValue } from '~/context';
 import { motionChakra } from '~/elements';
-import { useBooleanValue, useFormInteractive } from '~/hooks';
+import { useBooleanValue, useFormInteractive, useBreakpointValue } from '~/hooks';
 import { Title } from './title';
 
 const Wrapper = motionChakra('header', {

hyperglass/ui/components/header/logo.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Image, Skeleton } from '@chakra-ui/react';
-import { useColorValue, useConfig } from '~/context';
+import { useConfig } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { ImageProps } from '@chakra-ui/react';
 

hyperglass/ui/components/header/subtitle-only.tsx

@@ -1,6 +1,7 @@
 import { Heading } from '@chakra-ui/react';
-import { useConfig, useBreakpointValue } from '~/context';
+import { useConfig } from '~/context';
-import { useTitleSize } from './useTitleSize';
+import { useBreakpointValue } from '~/hooks';
+import { useTitleSize } from './use-title-size';
 
 export const SubtitleOnly = (): JSX.Element => {
   const { web } = useConfig();

hyperglass/ui/components/header/title-only.tsx

@@ -1,7 +1,7 @@
 import { Heading } from '@chakra-ui/react';
 import { useConfig } from '~/context';
 import { useBooleanValue, useFormInteractive } from '~/hooks';
-import { useTitleSize } from './useTitleSize';
+import { useTitleSize } from './use-title-size';
 
 export const TitleOnly = (): JSX.Element => {
   const { web } = useConfig();

hyperglass/ui/components/header/title.tsx

@@ -2,8 +2,8 @@ import { Flex, Button, VStack } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import { isSafari } from 'react-device-detect';
 import { Switch, Case } from 'react-if';
-import { useConfig, useMobile } from '~/context';
+import { useConfig } from '~/context';
-import { useFormState, useFormInteractive } from '~/hooks';
+import { useFormState, useFormInteractive, useMobile } from '~/hooks';
 import { Logo } from './logo';
 import { SubtitleOnly } from './subtitle-only';
 import { TitleOnly } from './title-only';

hyperglass/ui/components/header/use-title-size.ts

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useToken } from '@chakra-ui/react';
-import { useMobile } from '~/context';
+import { useMobile } from '~/hooks';
 
 // Mobile:
 // xs: 32

hyperglass/ui/components/location-card.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
-import { Flex, Box, Avatar, chakra } from '@chakra-ui/react';
+import { Flex, Avatar, chakra } from '@chakra-ui/react';
-import { motion } from 'framer-motion';
+import { motionChakra } from '~/elements';
-import { useColorValue } from '~/context';
+import { useColorValue, useOpposingColor } from '~/hooks';
-import { useOpposingColor } from '~/hooks';
 
 import type { SingleOption } from '~/types';
 import type { LocationOption } from './query-location';
@@ -14,7 +13,21 @@ interface LocationCardProps {
   hasError: boolean;
 }
 
-const MotionBox = motion(Box);
+const LocationCardWrapper = motionChakra('div', {
+  baseStyle: {
+    py: 4,
+    px: 6,
+    w: '100%',
+    minW: 'xs',
+    maxW: 'sm',
+    mx: 'auto',
+    shadow: 'sm',
+    rounded: 'lg',
+    cursor: 'pointer',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+  },
+});
 
 export const LocationCard = (props: LocationCardProps): JSX.Element => {
   const { option, onChange, defaultChecked, hasError } = props;
@@ -51,20 +64,9 @@ export const LocationCard = (props: LocationCardProps): JSX.Element => {
     [hasError, isChecked, checkedBorder, errorBorder],
   );
   return (
-    <MotionBox
+    <LocationCardWrapper
-      py={4}
-      px={6}
       bg={bg}
-      w="100%"
-      minW="xs"
-      maxW="sm"
-      mx="auto"
-      shadow="sm"
       key={label}
-      rounded="lg"
-      cursor="pointer"
-      borderWidth="1px"
-      borderStyle="solid"
       whileHover={{ scale: 1.05 }}
       borderColor={borderColor}
       onClick={(e: React.MouseEvent) => {
@@ -101,6 +103,6 @@ export const LocationCard = (props: LocationCardProps): JSX.Element => {
           {option.data.description as string}
         </chakra.p>
       )}
-    </MotionBox>
+    </LocationCardWrapper>
   );
 };

hyperglass/ui/components/meta.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import Head from 'next/head';
-import { useTheme } from '@chakra-ui/react';
 import { useConfig } from '~/context';
+import { useTheme } from '~/hooks';
 import { googleFontUrl } from '~/util';
 
 export const Meta = (): JSX.Element => {

hyperglass/ui/components/output/fields.tsx

@@ -4,9 +4,9 @@ import dayjs from 'dayjs';
 import relativeTimePlugin from 'dayjs/plugin/relativeTime';
 import utcPlugin from 'dayjs/plugin/utc';
 import { If, Then, Else } from 'react-if';
-import { useConfig, useColorValue } from '~/context';
+import { useConfig } from '~/context';
 import { DynamicIcon } from '~/elements';
-import { useOpposingColor } from '~/hooks';
+import { useOpposingColor, useColorValue } from '~/hooks';
 
 import type { TextProps } from '@chakra-ui/react';
 

hyperglass/ui/components/output/text-output.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@chakra-ui/react';
-import { useColorValue, useConfig } from '~/context';
+import { useConfig } from '~/context';
+import { useColorValue } from '~/hooks';
 import { Highlighted } from './highlighted';
 
 import type { BoxProps } from '@chakra-ui/react';

hyperglass/ui/components/path/chart.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, SkeletonText, Badge, VStack } from '@chakra-ui/react';
 import ReactFlow, { Background, ReactFlowProvider, Handle, Position } from 'react-flow-renderer';
-import { useConfig, useColorValue, useColorToken } from '~/context';
+import { useConfig } from '~/context';
-import { useASNDetail } from '~/hooks';
+import { useASNDetail, useColorValue, useColorToken } from '~/hooks';
 import { Controls } from './controls';
 import { useElements } from './useElements';
 

hyperglass/ui/components/path/path.tsx

@@ -8,8 +8,7 @@ import {
   useDisclosure,
   ModalCloseButton,
 } from '@chakra-ui/react';
-import { useColorValue, useBreakpointValue } from '~/context';
+import { useFormState, useColorValue, useBreakpointValue } from '~/hooks';
-import { useFormState } from '~/hooks';
 import { PathButton } from './path-button';
 import { Chart } from './chart';
 

hyperglass/ui/components/prompt/desktop.tsx

@@ -6,7 +6,7 @@ import {
   PopoverContent,
   PopoverCloseButton,
 } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { PromptProps } from './types';
 

hyperglass/ui/components/prompt/index.tsx

@@ -1,4 +1,4 @@
-import { useMobile } from '~/context';
+import { useMobile } from '~/hooks';
 import { DesktopPrompt } from './desktop';
 import { MobilePrompt } from './mobile';
 

hyperglass/ui/components/prompt/mobile.tsx

@@ -1,5 +1,5 @@
 import { Modal, ModalBody, ModalOverlay, ModalContent, ModalCloseButton } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { PromptProps } from './types';
 

hyperglass/ui/components/query-target.tsx

@@ -4,8 +4,7 @@ import { components } from 'react-select';
 import { If, Then, Else } from 'react-if';
 import { Select } from '~/components';
 import { isSingleValue } from '~/components/select';
-import { useColorValue } from '~/context';
+import { useColorValue, useDirective, useFormState } from '~/hooks';
-import { useDirective, useFormState } from '~/hooks';
 import { isSelectDirective } from '~/types';
 import { UserIP } from './user-ip';
 

hyperglass/ui/components/reset-button.tsx

@@ -1,8 +1,7 @@
 import { Flex, IconButton } from '@chakra-ui/react';
 import { AnimatePresence } from 'framer-motion';
-import { useColorValue } from '~/context';
 import { AnimatedDiv, DynamicIcon } from '~/elements';
-import { useOpposingColor, useFormState } from '~/hooks';
+import { useColorValue, useOpposingColor, useFormState } from '~/hooks';
 
 import type { FlexProps } from '@chakra-ui/react';
 

hyperglass/ui/components/resolved-target.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { Button, Stack, Text, VStack } from '@chakra-ui/react';
-import { useConfig, useColorValue } from '~/context';
+import { useConfig } from '~/context';
 import { DynamicIcon } from '~/elements';
-import { useStrf, useDNSQuery, useFormState } from '~/hooks';
+import { useStrf, useColorValue, useDNSQuery, useFormState } from '~/hooks';
 
 import type { DnsOverHttps } from '~/types';
 

hyperglass/ui/components/results/header.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { AccordionIcon, Box, Spinner, HStack, Text, Tooltip } from '@chakra-ui/react';
-import { useConfig, useColorValue } from '~/context';
+import { useConfig } from '~/context';
 import { DynamicIcon } from '~/elements';
-import { useOpposingColor, useStrf } from '~/hooks';
+import { useColorValue, useOpposingColor, useStrf } from '~/hooks';
 
 import type { ErrorLevels } from '~/types';
 

hyperglass/ui/components/results/individual.tsx

@@ -17,9 +17,17 @@ import startCase from 'lodash/startCase';
 import isEqual from 'react-fast-compare';
 import { If, Then, Else } from 'react-if';
 import { BGPTable, Path, TextOutput } from '~/components';
-import { useColorValue, useConfig, useMobile } from '~/context';
+import { useConfig } from '~/context';
 import { Countdown, DynamicIcon } from '~/elements';
-import { useStrf, useLGQuery, useTableToString, useFormState, useDevice } from '~/hooks';
+import {
+  useStrf,
+  useDevice,
+  useMobile,
+  useLGQuery,
+  useFormState,
+  useColorValue,
+  useTableToString,
+} from '~/hooks';
 import { isStructuredOutput, isStringOutput } from '~/types';
 import { isStackError, isFetchError, isLGError, isLGOutputOrError } from './guards';
 import { RequeryButton } from './requery-button';

hyperglass/ui/components/results/tags.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { Box, Stack, useToken } from '@chakra-ui/react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { useConfig, useBreakpointValue } from '~/context';
+import { useConfig } from '~/context';
 import { Label } from '~/elements';
-import { useFormState } from '~/hooks';
+import { useFormState, useBreakpointValue } from '~/hooks';
 
 import type { Transition } from 'framer-motion';
 

hyperglass/ui/components/select/select.tsx

@@ -1,7 +1,7 @@
 import { createContext, forwardRef, useContext } from 'react';
 import ReactSelect from 'react-select';
 import { useDisclosure } from '@chakra-ui/react';
-import { useColorMode } from '~/context';
+import { useColorMode } from '~/hooks';
 import { Option } from './option';
 import {
   useRSTheme,

hyperglass/ui/components/select/styles.ts

@@ -3,8 +3,13 @@ import { useCallback } from 'react';
 import { useToken } from '@chakra-ui/react';
 import { mergeWith } from '@chakra-ui/utils';
 import { merge } from 'merge-anything';
-import { useOpposingColor, useOpposingColorCallback } from '~/hooks';
+import {
-import { useColorValue, useColorToken, useMobile } from '~/context';
+  useMobile,
+  useColorValue,
+  useColorToken,
+  useOpposingColor,
+  useOpposingColorCallback,
+} from '~/hooks';
 import { useSelectContext } from './select';
 
 import * as ReactSelect from 'react-select';

hyperglass/ui/components/submit-button.tsx

@@ -16,9 +16,8 @@ import {
 import { useFormContext } from 'react-hook-form';
 import { If, Then, Else } from 'react-if';
 import { ResolvedTarget } from '~/components';
-import { useMobile, useColorValue } from '~/context';
 import { DynamicIcon } from '~/elements';
-import { useFormState } from '~/hooks';
+import { useFormState, useMobile, useColorValue } from '~/hooks';
 
 import type { IconButtonProps } from '@chakra-ui/react';
 

hyperglass/ui/components/table/cell.tsx

@@ -1,5 +1,5 @@
 import { chakra } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { BoxProps } from '@chakra-ui/react';
 

hyperglass/ui/components/table/head.tsx

@@ -1,5 +1,5 @@
 import { chakra } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { BoxProps } from '@chakra-ui/react';
 

hyperglass/ui/components/table/main.tsx

@@ -3,8 +3,8 @@
 import { Flex, Text } from '@chakra-ui/react';
 import { usePagination, useSortBy, useTable } from 'react-table';
 import { If, Then, Else } from 'react-if';
-import { useMobile } from '~/context';
 import { CardBody, CardFooter, CardHeader, DynamicIcon } from '~/elements';
+import { useMobile } from '~/hooks';
 import { TableMain } from './table';
 import { TableCell } from './cell';
 import { TableHead } from './head';

hyperglass/ui/components/table/row.tsx

@@ -1,9 +1,7 @@
 import { chakra } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue, useOpposingColor } from '~/hooks';
-import { useOpposingColor } from '~/hooks';
 
 import type { BoxProps } from '@chakra-ui/react';
-
 import type { Theme } from '~/types';
 
 interface TableRowProps extends BoxProps {

hyperglass/ui/components/table/table.tsx

@@ -1,5 +1,5 @@
 import { chakra } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { BoxProps } from '@chakra-ui/react';
 

hyperglass/ui/components/user-ip.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { Button, Stack, Text, VStack, useDisclosure } from '@chakra-ui/react';
 import { Prompt } from '~/components';
-import { useConfig, useColorValue } from '~/context';
+import { useConfig } from '~/context';
 import { DynamicIcon } from '~/elements';
-import { useStrf, useWtf } from '~/hooks';
+import { useStrf, useWtf, useColorValue } from '~/hooks';
 
 interface UserIPProps {
   setTarget(target: string): void;

hyperglass/ui/context/HyperglassProvider.tsx

@@ -1,62 +0,0 @@
-import { createContext, useContext, useMemo } from 'react';
-import {
-  useToken,
-  ChakraProvider,
-  useColorModeValue,
-  useBreakpointValue,
-  useTheme as useChakraTheme,
-} from '@chakra-ui/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { makeTheme, defaultTheme } from '~/util';
-
-import type { Config, Theme } from '~/types';
-import type { THyperglassProvider } from './types';
-
-export const HyperglassContext = createContext<Config>({} as Config);
-
-const queryClient = new QueryClient();
-
-export const HyperglassProvider = (props: THyperglassProvider): JSX.Element => {
-  const { config, children } = props;
-  const value = useMemo(() => config, [config]);
-  const userTheme = value && makeTheme(value.web.theme, value.web.theme.defaultColorMode);
-  const theme = value ? userTheme : defaultTheme;
-  return (
-    <ChakraProvider theme={theme}>
-      <HyperglassContext.Provider value={value}>
-        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-      </HyperglassContext.Provider>
-    </ChakraProvider>
-  );
-};
-
-/**
- * Get the current configuration.
- */
-export const useConfig = (): Config => useContext(HyperglassContext);
-
-/**
- * Get the current theme object.
- */
-export const useTheme = (): Theme.Full => useChakraTheme();
-
-/**
- * Determine if device is mobile or desktop based on Chakra UI theme breakpoints.
- */
-export const useMobile = (): boolean =>
-  useBreakpointValue<boolean>({ base: true, md: true, lg: false, xl: false }) ?? true;
-
-/**
- * Convenience function to combine Chakra UI's useToken & useColorModeValue.
- */
-export const useColorToken = <L extends string, D extends string>(
-  token: keyof Theme.Full,
-  light: L,
-  dark: D,
-): L | D => useColorModeValue(useToken(token, light), useToken(token, dark));
-
-export {
-  useColorMode,
-  useBreakpointValue,
-  useColorModeValue as useColorValue,
-} from '@chakra-ui/react';

hyperglass/ui/context/hyperglass-provider.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext, useMemo } from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { makeTheme, defaultTheme } from '~/util';
+
+import type { Config } from '~/types';
+
+interface HyperglassProviderProps {
+  config: Config;
+  children: React.ReactNode;
+}
+
+export const HyperglassContext = createContext<Config>({} as Config);
+
+const queryClient = new QueryClient();
+
+export const HyperglassProvider = (props: HyperglassProviderProps): JSX.Element => {
+  const { config, children } = props;
+  const value = useMemo(() => config, [config]);
+  const userTheme = value && makeTheme(value.web.theme, value.web.theme.defaultColorMode);
+  const theme = value ? userTheme : defaultTheme;
+  return (
+    <ChakraProvider theme={theme}>
+      <HyperglassContext.Provider value={value}>
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      </HyperglassContext.Provider>
+    </ChakraProvider>
+  );
+};
+
+/**
+ * Get the current configuration.
+ */
+export const useConfig = (): Config => useContext(HyperglassContext);

hyperglass/ui/context/index.ts

@@ -1 +1 @@
-export * from './HyperglassProvider';
+export * from './hyperglass-provider';

hyperglass/ui/context/types.ts

@@ -1,6 +0,0 @@
-import type { Config } from '~/types';
-
-export interface THyperglassProvider {
-  config: Config;
-  children: React.ReactNode;
-}

hyperglass/ui/elements/card/body.tsx

@@ -1,5 +1,5 @@
 import { Flex } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { FlexProps } from '@chakra-ui/react';
 

hyperglass/ui/elements/card/header.tsx

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { FlexProps } from '@chakra-ui/react';
 

hyperglass/ui/elements/code-block.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { BoxProps } from '@chakra-ui/react';
 

hyperglass/ui/elements/countdown.tsx

@@ -1,7 +1,7 @@
 import { chakra, Text } from '@chakra-ui/react';
 import ReactCountdown, { zeroPad } from 'react-countdown';
 import { If, Then, Else } from 'react-if';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type { CountdownRenderProps } from 'react-countdown';
 

hyperglass/ui/elements/label.tsx

@@ -1,7 +1,6 @@
 import { forwardRef } from 'react';
 import { Flex } from '@chakra-ui/react';
-import { useColorValue } from '~/context';
+import { useColorValue, useOpposingColor } from '~/hooks';
-import { useOpposingColor } from '~/hooks';
 
 import type { FlexProps } from '@chakra-ui/react';
 

hyperglass/ui/elements/markdown/elements.tsx

@@ -19,7 +19,7 @@ import {
 } from '@chakra-ui/react';
 import { If, Then, Else } from 'react-if';
 import { CodeBlock as CustomCodeBlock } from '~/elements';
-import { useColorValue } from '~/context';
+import { useColorValue } from '~/hooks';
 
 import type {
   BoxProps,

hyperglass/ui/hooks/use-opposing-color.ts

@@ -1,6 +1,6 @@
 import { useMemo, useCallback } from 'react';
 import { getColor, isLight } from '@chakra-ui/theme-tools';
-import { useTheme } from '~/context';
+import { useTheme } from './theme-hooks';
 
 interface OpposingColorOptions {
   light?: string;

hyperglass/ui/types/theme.ts

@@ -12,7 +12,8 @@ export namespace Theme {
 
   export type FontWeights = Partial<ChakraTheme['fontWeights']>;
 
-  export interface Full extends Omit<ChakraTheme, 'colors'> {
+  export interface Full extends Omit<ChakraTheme, 'colors' | 'fonts'> {
     colors: Colors;
+    fonts: Fonts;
   }
 }