@blockscout/ui-toolkit 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/theme/foundations/semanticTokens.ts

@@ -1,471 +0,0 @@
-import type { ThemingConfig } from '@chakra-ui/react';
-
-import config from 'configs/app';
-
-const heroBannerButton = config.UI.homepage.heroBanner?.button;
-
-const semanticTokens: ThemingConfig['semanticTokens'] = {
-  colors: {
-    button: {
-      outline: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.600}' } },
-        },
-      },
-      subtle: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-        bg: {
-          DEFAULT: { value: { _light: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.200}' } },
-        },
-      },
-      dropdown: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-        bg: {
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
-        },
-        border: {
-          DEFAULT: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.600}' } },
-        },
-      },
-      header: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.gray.400}' } },
-          selected: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-          highlighted: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-        bg: {
-          selected: { value: { _light: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
-          highlighted: { value: { _light: '{colors.orange.100}', _dark: '{colors.orange.900}' } },
-        },
-        border: {
-          DEFAULT: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
-        },
-      },
-      segmented: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' } },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
-        },
-        border: {
-          DEFAULT: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
-        },
-      },
-      icon_secondary: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-        bg: {
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
-        },
-      },
-      hero: {
-        bg: {
-          DEFAULT: {
-            value: {
-              _light: heroBannerButton?._default?.background?.[0] || '{colors.blue.600}',
-              _dark: heroBannerButton?._default?.background?.[1] || heroBannerButton?._default?.background?.[0] || '{colors.blue.600}',
-            },
-          },
-          hover: {
-            value: {
-              _light: heroBannerButton?._hover?.background?.[0] || '{colors.blue.400}',
-              _dark: heroBannerButton?._hover?.background?.[1] || heroBannerButton?._hover?.background?.[0] || '{colors.blue.400}',
-            },
-          },
-          selected: {
-            value: {
-              _light: heroBannerButton?._selected?.background?.[0] || '{colors.blue.50}',
-              _dark: heroBannerButton?._selected?.background?.[1] || heroBannerButton?._selected?.background?.[0] || '{colors.blue.50}',
-            },
-          },
-        },
-        fg: {
-          DEFAULT: {
-            value: {
-              _light: heroBannerButton?._default?.text_color?.[0] || '{colors.white}',
-              _dark: heroBannerButton?._default?.text_color?.[1] || heroBannerButton?._default?.text_color?.[0] || '{colors.white}',
-            },
-          },
-          hover: {
-            value: {
-              _light: heroBannerButton?._hover?.text_color?.[0] || '{colors.white}',
-              _dark: heroBannerButton?._hover?.text_color?.[1] || heroBannerButton?._hover?.text_color?.[0] || '{colors.white}',
-            },
-          },
-          selected: {
-            value: {
-              _light: heroBannerButton?._selected?.text_color?.[0] || '{colors.blackAlpha.800}',
-              _dark: heroBannerButton?._selected?.text_color?.[1] || heroBannerButton?._selected?.text_color?.[0] || '{colors.blackAlpha.800}',
-            },
-          },
-        },
-      },
-    },
-    closeButton: {
-      fg: {
-        DEFAULT: { value: { _light: '{colors.blackAlpha.500}', _dark: '{colors.whiteAlpha.500}' } },
-      },
-    },
-    link: {
-      primary: {
-        DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' } },
-        hover: { value: { _light: '{colors.blue.400}' } },
-      },
-      secondary: {
-        DEFAULT: { value: { _light: '{colors.gray.500}', _dark: '{colors.gray.400}' } },
-      },
-      underlaid: {
-        bg: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.800}' } },
-      },
-      subtle: {
-        DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.gray.400}' } },
-        hover: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.gray.400}' } },
-      },
-      navigation: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.gray.600}', _dark: '{colors.gray.400}' } },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
-          hover: { value: { _light: '{colors.link.primary.hover}' } },
-          active: { value: { _light: '{colors.link.primary.hover}' } },
-        },
-        bg: {
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
-          group: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
-        },
-      },
-      menu: {
-        DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-      },
-    },
-    tooltip: {
-      DEFAULT: {
-        bg: { value: '{colors.gray.900}' },
-        fg: { value: '{colors.white}' },
-      },
-      navigation: {
-        bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
-        fg: {
-          DEFAULT: { value: '{colors.blue.400}' },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
-        },
-      },
-    },
-    popover: {
-      DEFAULT: {
-        bg: { value: { _light: '{colors.white}', _dark: '{colors.gray.900}' } },
-        shadow: { value: { _light: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.300}' } },
-      },
-    },
-    progressCircle: {
-      trackColor: {
-        DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.whiteAlpha.100}' } },
-      },
-    },
-    skeleton: {
-      bg: {
-        start: { value: { _light: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.50}' } },
-        end: { value: { _light: '{colors.blackAlpha.100}', _dark: '{colors.whiteAlpha.100}' } },
-      },
-    },
-    tabs: {
-      solid: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.blue.700}', _dark: '{colors.blue.100}' } },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
-        },
-        bg: {
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
-        },
-      },
-      secondary: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-        bg: {
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
-        },
-        border: {
-          DEFAULT: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
-        },
-      },
-      segmented: {
-        fg: {
-          DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' } },
-          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
-        },
-        border: {
-          DEFAULT: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
-        },
-      },
-    },
-    'switch': {
-      primary: {
-        bg: {
-          DEFAULT: { value: { _light: '{colors.gray.300}', _dark: '{colors.whiteAlpha.400}' } },
-          checked: { value: { _light: '{colors.blue.500}', _dark: '{colors.blue.300}' } },
-          hover: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.400}' } },
-        },
-      },
-    },
-    alert: {
-      fg: {
-        DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-      },
-      bg: {
-        info: { value: { _light: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
-        warning: { value: { _light: '{colors.orange.100}', _dark: '{colors.orange.800/60}' } },
-        warning_table: { value: { _light: '{colors.orange.50}', _dark: '{colors.orange.800/60}' } },
-        success: { value: { _light: '{colors.green.100}', _dark: '{colors.green.900}' } },
-        error: { value: { _light: '{colors.red.100}', _dark: '{colors.red.900}' } },
-      },
-    },
-    toast: {
-      fg: {
-        DEFAULT: { value: '{colors.alert.fg}' },
-      },
-      bg: {
-        DEFAULT: { value: '{colors.alert.bg.info}' },
-        info: { value: { _light: '{colors.blue.100}', _dark: '{colors.blue.900}' } },
-        warning: { value: '{colors.alert.bg.warning}' },
-        success: { value: '{colors.alert.bg.success}' },
-        error: { value: '{colors.alert.bg.error}' },
-        loading: { value: { _light: '{colors.blue.100}', _dark: '{colors.blue.900}' } },
-      },
-    },
-    input: {
-      fg: {
-        DEFAULT: { value: { _light: '{colors.gray.800}', _dark: '{colors.gray.50}' } },
-        error: { value: '{colors.text.error}' },
-      },
-      bg: {
-        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
-        readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
-      },
-      border: {
-        DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.700}' } },
-        hover: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.500}' } },
-        focus: { value: '{colors.blue.400}' },
-        filled: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
-        readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
-        error: { value: '{colors.red.500}' },
-      },
-      placeholder: {
-        DEFAULT: { value: '{colors.gray.500}' },
-        error: { value: '{colors.red.500}' },
-      },
-    },
-    field: {
-      placeholder: {
-        DEFAULT: { value: '{colors.gray.500}' },
-        disabled: { value: '{colors.gray.500/20}' },
-        error: { value: '{colors.red.500}' },
-      },
-    },
-    dialog: {
-      bg: {
-        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.gray.900}' } },
-      },
-      fg: {
-        DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-      },
-    },
-    drawer: {
-      bg: {
-        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.gray.900}' } },
-      },
-    },
-    select: {
-      trigger: {
-        outline: {
-          fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-      },
-      item: {
-        bg: {
-          highlighted: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
-        },
-      },
-      indicator: {
-        fg: {
-          DEFAULT: { value: '{colors.gray.500}' },
-        },
-      },
-      placeholder: {
-        fg: {
-          DEFAULT: { value: '{colors.gray.500}' },
-          error: { value: '{colors.red.500}' },
-        },
-      },
-    },
-    menu: {
-      item: {
-        bg: {
-          highlighted: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
-        },
-      },
-    },
-    spinner: {
-      track: {
-        DEFAULT: { value: { _light: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.200}' } },
-      },
-    },
-    badge: {
-      gray: {
-        bg: { value: { _light: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
-        fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-      },
-      green: {
-        bg: { value: { _light: '{colors.green.50}', _dark: '{colors.green.800}' } },
-        fg: { value: { _light: '{colors.green.500}', _dark: '{colors.green.200}' } },
-      },
-      red: {
-        bg: { value: { _light: '{colors.red.50}', _dark: '{colors.red.800}' } },
-        fg: { value: { _light: '{colors.red.500}', _dark: '{colors.red.200}' } },
-      },
-      purple: {
-        bg: { value: { _light: '{colors.purple.50}', _dark: '{colors.purple.800}' } },
-        fg: { value: { _light: '{colors.purple.500}', _dark: '{colors.purple.100}' } },
-      },
-      purple_alt: {
-        bg: { value: { _light: '{colors.purple.100}', _dark: '{colors.purple.800}' } },
-        fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-      },
-      orange: {
-        bg: { value: { _light: '{colors.orange.50}', _dark: '{colors.orange.800}' } },
-        fg: { value: { _light: '{colors.orange.500}', _dark: '{colors.orange.100}' } },
-      },
-      blue: {
-        bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.800}' } },
-        fg: { value: { _light: '{colors.blue.500}', _dark: '{colors.blue.100}' } },
-      },
-      blue_alt: {
-        bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.800}' } },
-        fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-      },
-      yellow: {
-        bg: { value: { _light: '{colors.yellow.50}', _dark: '{colors.yellow.800}' } },
-        fg: { value: { _light: '{colors.yellow.500}', _dark: '{colors.yellow.100}' } },
-      },
-      teal: {
-        bg: { value: { _light: '{colors.teal.50}', _dark: '{colors.teal.800}' } },
-        fg: { value: { _light: '{colors.teal.500}', _dark: '{colors.teal.100}' } },
-      },
-      cyan: {
-        bg: { value: { _light: '{colors.cyan.50}', _dark: '{colors.cyan.800}' } },
-        fg: { value: { _light: '{colors.cyan.500}', _dark: '{colors.cyan.100}' } },
-      },
-    },
-    tag: {
-      root: {
-        subtle: {
-          bg: { value: { _light: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
-          fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-        clickable: {
-          bg: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.800}' } },
-          fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-        filter: {
-          bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.800}' } },
-        },
-        select: {
-          bg: {
-            DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.800}' } },
-            selected: { value: { _light: '{colors.blue.500}', _dark: '{colors.blue.900}' } },
-          },
-          fg: { value: { _light: '{colors.gray.500}', _dark: '{colors.whiteAlpha.800}' } },
-        },
-      },
-    },
-    table: {
-      header: {
-        bg: { value: { _light: '{colors.blackAlpha.100}', _dark: '{colors.whiteAlpha.200}' } },
-        fg: { value: { _light: '{colors.blackAlpha.700}', _dark: '{colors.whiteAlpha.700}' } },
-      },
-    },
-    checkbox: {
-      control: {
-        border: {
-          DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.700}' } },
-          hover: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.500}' } },
-          readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
-        },
-      },
-    },
-    radio: {
-      control: {
-        border: {
-          DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.700}' } },
-          hover: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.500}' } },
-          readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
-        },
-      },
-    },
-    stat: {
-      indicator: {
-        up: { value: { _light: '{colors.green.500}', _dark: '{colors.green.400}' } },
-        down: { value: { _light: '{colors.red.600}', _dark: '{colors.red.400}' } },
-      },
-    },
-    rating: {
-      DEFAULT: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.700}' } },
-      highlighted: { value: '{colors.yellow.400}' },
-    },
-    heading: {
-      DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-    },
-    text: {
-      primary: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
-      secondary: { value: { _light: '{colors.gray.500}', _dark: '{colors.gray.400}' } },
-      error: { value: '{colors.red.500}' },
-    },
-    border: {
-      divider: { value: { _light: '{colors.blackAlpha.100}', _dark: '{colors.whiteAlpha.100}' } },
-      error: { value: '{colors.red.500}' },
-    },
-    icon: {
-      backTo: { value: '{colors.gray.400}' },
-      externalLink: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
-      info: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
-    },
-    address: {
-      highlighted: {
-        bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.900}' } },
-        border: { value: { _light: '{colors.blue.200}', _dark: '{colors.blue.600}' } },
-      },
-    },
-    global: {
-      body: {
-        bg: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
-        fg: { value: '{colors.text.primary}' },
-      },
-      mark: {
-        bg: { value: { _light: '{colors.green.100}', _dark: '{colors.green.800}' } },
-      },
-      scrollbar: {
-        thumb: { value: { _light: '{colors.blackAlpha.300}', _dark: '{colors.whiteAlpha.300}' } },
-      },
-    },
-  },
-  shadows: {
-    popover: {
-      DEFAULT: { value: { _light: '{shadows.size.2xl}', _dark: '{shadows.dark-lg}' } },
-    },
-    drawer: {
-      DEFAULT: { value: { _light: '{shadows.size.lg}', _dark: '{shadows.dark-lg}' } },
-    },
-  },
-  opacity: {
-    control: {
-      disabled: { value: '0.2' },
-    },
-  },
-};
-
-export default semanticTokens;

package/dist/theme/foundations/shadows.ts

@@ -1,19 +0,0 @@
-import type { ThemingConfig } from '@chakra-ui/react';
-
-import type { ExcludeUndefined } from 'types/utils';
-
-const shadows: ExcludeUndefined<ThemingConfig['tokens']>['shadows'] = {
-  action_bar: { value: '0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)' },
-  size: {
-    xs: { value: '0px 0px 0px 1px rgba(0, 0, 0, 0.05)' },
-    sm: { value: '0px 1px 2px 0px rgba(0, 0, 0, 0.05)' },
-    base: { value: '0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)' },
-    md: { value: '0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)' },
-    lg: { value: '0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)' },
-    xl: { value: '0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)' },
-    '2xl': { value: '0px 15px 50px -12px rgba(0, 0, 0, 0.25)' },
-  },
-  'dark-lg': { value: '0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1)' },
-};
-
-export default shadows;

package/dist/theme/foundations/typography.ts

@@ -1,93 +0,0 @@
-import type { ThemingConfig } from '@chakra-ui/react';
-
-import type { ExcludeUndefined } from 'types/utils';
-
-import config from 'configs/app';
-
-export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Inter';
-export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Poppins';
-
-export const fonts: ExcludeUndefined<ThemingConfig['tokens']>['fonts'] = {
-  heading: { value: `${ HEADING_TYPEFACE }, sans-serif` },
-  body: { value: `${ BODY_TYPEFACE }, sans-serif` },
-};
-
-export const textStyles: ThemingConfig['textStyles'] = {
-  heading: {
-    xl: {
-      value: {
-        fontSize: '32px',
-        lineHeight: '40px',
-        fontWeight: '500',
-        letterSpacing: '-0.5px',
-        fontFamily: 'heading',
-      },
-    },
-    lg: {
-      value: {
-        fontSize: '24px',
-        lineHeight: '32px',
-        fontWeight: '500',
-        fontFamily: 'heading',
-      },
-    },
-    md: {
-      value: {
-        fontSize: '18px',
-        lineHeight: '24px',
-        fontWeight: '500',
-        fontFamily: 'heading',
-      },
-    },
-    sm: {
-      value: {
-        fontSize: '16px',
-        lineHeight: '24px',
-        fontWeight: '500',
-        fontFamily: 'heading',
-      },
-    },
-    xs: {
-      value: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        fontWeight: '600',
-        fontFamily: 'heading',
-      },
-    },
-  },
-  text: {
-    xl: {
-      value: {
-        fontSize: '20px',
-        lineHeight: '28px',
-        fontWeight: '400',
-        fontFamily: 'body',
-      },
-    },
-    md: {
-      value: {
-        fontSize: '16px',
-        lineHeight: '24px',
-        fontWeight: '400',
-        fontFamily: 'body',
-      },
-    },
-    sm: {
-      value: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        fontWeight: '400',
-        fontFamily: 'body',
-      },
-    },
-    xs: {
-      value: {
-        fontSize: '12px',
-        lineHeight: '16px',
-        fontWeight: '400',
-        fontFamily: 'body',
-      },
-    },
-  },
-};

package/dist/theme/foundations/zIndex.ts

@@ -1,20 +0,0 @@
-export const zIndex = {
-  hide: { value: -1 },
-  auto: { value: 'auto' },
-  base: { value: 0 },
-  docked: { value: 10 },
-  dropdown: { value: 1000 },
-  sticky: { value: 1100 },
-  sticky1: { value: 1101 },
-  sticky2: { value: 1102 },
-  banner: { value: 1200 },
-  overlay: { value: 1300 },
-  modal: { value: 1400 },
-  popover: { value: 1500 },
-  tooltip: { value: 1550 }, // otherwise tooltips will not be visible in modals
-  tooltip2: { value: 1551 }, // for tooltips in tooltips
-  skipLink: { value: 1600 },
-  toast: { value: 1700 },
-};
-
-export default zIndex;

package/dist/theme/globalCss.ts

@@ -1,57 +0,0 @@
-import type { SystemConfig } from '@chakra-ui/react';
-
-import addressEntity from './globals/address-entity';
-import recaptcha from './globals/recaptcha';
-import scrollbar from './globals/scrollbar';
-
-const webkitAutofillOverrides = {
-  WebkitTextFillColor: 'var(--chakra-colors-input-fg)',
-  '-webkit-box-shadow': '0 0 0px 1000px var(--chakra-colors-input-bg) inset',
-  transition: 'background-color 5000s ease-in-out 0s',
-};
-
-const webkitAutofillRules = {
-  '&:-webkit-autofill': webkitAutofillOverrides,
-  '&:-webkit-autofill:hover': webkitAutofillOverrides,
-  '&:-webkit-autofill:focus': webkitAutofillOverrides,
-};
-
-const globalCss: SystemConfig['globalCss'] = {
-  body: {
-    bg: 'global.body.bg',
-    color: 'global.body.fg',
-    WebkitTapHighlightColor: 'transparent',
-    fontVariantLigatures: 'no-contextual',
-    focusRingStyle: 'hidden',
-  },
-  mark: {
-    bg: 'global.mark.bg',
-    color: 'inherit',
-  },
-  'svg *::selection': {
-    color: 'none',
-    background: 'none',
-  },
-  form: {
-    w: '100%',
-  },
-  input: {
-    // hide number input arrows in Google Chrome
-    '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-      WebkitAppearance: 'none',
-      margin: 0,
-    },
-    ...webkitAutofillRules,
-  },
-  textarea: {
-    ...webkitAutofillRules,
-  },
-  select: {
-    ...webkitAutofillRules,
-  },
-  ...recaptcha,
-  ...scrollbar,
-  ...addressEntity,
-};
-
-export default globalCss;

package/dist/theme/globals/address-entity.ts

@@ -1,33 +0,0 @@
-const styles = {
-  '.address-entity': {
-    '&.address-entity_highlighted': {
-      _before: {
-        content: `" "`,
-        position: 'absolute',
-        py: 1,
-        pl: 1,
-        pr: 0,
-        top: '-5px',
-        left: '-5px',
-        width: `calc(100% + 6px)`,
-        height: 'calc(100% + 10px)',
-        borderRadius: 'base',
-        borderColor: 'address.highlighted.border',
-        borderWidth: '1px',
-        borderStyle: 'dashed',
-        bgColor: 'address.highlighted.bg',
-        zIndex: -1,
-      },
-    },
-  },
-  '.address-entity_no-copy': {
-    '&.address-entity_highlighted': {
-      _before: {
-        pr: 2,
-        width: `calc(100% + 6px + 8px)`,
-      },
-    },
-  },
-};
-
-export default styles;