From 3e34e8dc6b8c482999a778a2ba08a2f67fc44852 Mon Sep 17 00:00:00 2001
From: "Azat S." <to@azat.io>
Date: Fri, 15 Nov 2024 00:08:19 +0300
Subject: [PATCH] refactor: improve code quality

---
 data/themes.ts                                |   2 +-
 docs/adapters/netlify-edge/vite.config.ts     |   2 +-
 docs/blocks/demo/index.tsx                    |   2 +-
 docs/blocks/head/index.tsx                    |  30 +--
 docs/elements/code/index.tsx                  |  19 +-
 docs/elements/color-list/index.tsx            |  20 +-
 docs/elements/icon-item/index.tsx             |   2 +-
 docs/elements/icon/index.tsx                  |  16 +-
 docs/elements/theme-dropdown/index.tsx        |  33 +--
 docs/elements/theme-select/index.tsx          |  14 +-
 docs/elements/theme/index.tsx                 |  17 +-
 docs/entry.dev.tsx                            |   5 +-
 docs/entry.ssr.tsx                            |  15 +-
 docs/hooks/use-click-outside.ts               |  12 +-
 docs/mocks/vscode.ts                          |   4 +-
 docs/routes/layout.tsx                        |   2 +-
 docs/routes/service-worker.ts                 |   2 +-
 docs/typings/index.d.ts                       | 191 ++++++++++++++++++
 docs/utils/create-highlighter.ts              |  11 +-
 ...te-css-vars.ts => update-css-variables.ts} |  31 +--
 extension/colorize/check-contrast.ts          |   2 +-
 extension/colorize/color-pattern.ts           |   6 +-
 extension/colorize/index.ts                   |   2 +-
 extension/colorize/override.ts                |   5 +-
 extension/colorize/recolor-folder.ts          |   7 +-
 extension/colorize/recolor.ts                 |   4 +-
 extension/colorize/to-rgb.ts                  |   2 +-
 extension/index.ts                            |  18 +-
 extension/utils/console.ts                    |   8 +-
 scripts/generate-preview.ts                   |  22 +-
 test/colorize/recolor.test.ts                 |  12 +-
 test/colorize/to-rgb.test.ts                  |   2 +-
 tsconfig.json                                 |   2 +-
 ...ig.docs.ts => vite.config.documentation.ts |   0
 vite.config.extension.ts                      |  63 +++---
 35 files changed, 417 insertions(+), 168 deletions(-)
 create mode 100644 docs/typings/index.d.ts
 rename docs/utils/{update-css-vars.ts => update-css-variables.ts} (71%)
 rename vite.config.docs.ts => vite.config.documentation.ts (100%)

diff --git a/data/themes.ts b/data/themes.ts
index 976c716..f362730 100644
--- a/data/themes.ts
+++ b/data/themes.ts
@@ -91,7 +91,7 @@ export let themes = [
   },
 ]
 
-export let getThemeNameById = (id: string) => {
+export let getThemeNameById = (id: string): string => {
   let theme = themes.find(themeValue => themeValue.id === id)
   return theme ? theme.name : ''
 }
diff --git a/docs/adapters/netlify-edge/vite.config.ts b/docs/adapters/netlify-edge/vite.config.ts
index 7002b3e..b6ec12f 100644
--- a/docs/adapters/netlify-edge/vite.config.ts
+++ b/docs/adapters/netlify-edge/vite.config.ts
@@ -2,7 +2,7 @@ import { netlifyEdgeAdapter } from '@builder.io/qwik-city/adapters/netlify-edge/
 import { extendConfig } from '@builder.io/qwik-city/vite'
 import path from 'node:path'
 
-import baseConfig from '../../../vite.config.docs'
+import baseConfig from '../../../vite.config.documentation'
 
 export default extendConfig(baseConfig, () => ({
   build: {
diff --git a/docs/blocks/demo/index.tsx b/docs/blocks/demo/index.tsx
index caa4ac4..2e08c5b 100644
--- a/docs/blocks/demo/index.tsx
+++ b/docs/blocks/demo/index.tsx
@@ -37,7 +37,7 @@ export let Demo = component$(() => (
             </div>
             <IconList>
               {fileIcons.map(icon => (
-                <IconItem {...icon} />
+                <IconItem key={icon.id} {...icon} />
               ))}
             </IconList>
           </div>
diff --git a/docs/blocks/head/index.tsx b/docs/blocks/head/index.tsx
index 3871b52..8b47a25 100644
--- a/docs/blocks/head/index.tsx
+++ b/docs/blocks/head/index.tsx
@@ -1,7 +1,7 @@
 import { useDocumentHead, useLocation } from '@builder.io/qwik-city'
 import { component$ } from '@builder.io/qwik'
 
-export const Head = component$(() => {
+export let Head = component$(() => {
   let head = useDocumentHead()
   let loc = useLocation()
 
@@ -18,31 +18,31 @@ export const Head = component$(() => {
       <link href="/apple-touch-icon.png" rel="apple-touch-icon" />
       <link href={`${import.meta.env.BASE_URL}manifest.json`} rel="manifest" />
 
-      {head.meta.map(m => (
-        <meta key={m.key} {...m} />
+      {head.meta.map(meta => (
+        <meta key={meta.key} {...meta} />
       ))}
 
-      {head.links.map(l => (
-        <link key={l.key} {...l} />
+      {head.links.map(link => (
+        <link key={link.key} {...link} />
       ))}
 
-      {head.styles.map(s => (
+      {head.styles.map(style => (
         <style
-          key={s.key}
-          {...s.props}
-          {...(s.props?.dangerouslySetInnerHTML
+          key={style.key}
+          {...style.props}
+          {...(style.props?.dangerouslySetInnerHTML
             ? {}
-            : { dangerouslySetInnerHTML: s.style })}
+            : { dangerouslySetInnerHTML: style.style })}
         />
       ))}
 
-      {head.scripts.map(s => (
+      {head.scripts.map(script => (
         <script
-          key={s.key}
-          {...s.props}
-          {...(s.props?.dangerouslySetInnerHTML
+          key={script.key}
+          {...script.props}
+          {...(script.props?.dangerouslySetInnerHTML
             ? {}
-            : { dangerouslySetInnerHTML: s.script })}
+            : { dangerouslySetInnerHTML: script.script })}
         />
       ))}
     </head>
diff --git a/docs/elements/code/index.tsx b/docs/elements/code/index.tsx
index c9eba61..046fc21 100644
--- a/docs/elements/code/index.tsx
+++ b/docs/elements/code/index.tsx
@@ -1,6 +1,11 @@
+import type { Signal } from '@builder.io/qwik'
+import type { ThemeInput } from 'shiki'
+
 import { component$, useContext, useSignal, useTask$ } from '@builder.io/qwik'
 import { isDev } from '@builder.io/qwik/build'
 
+import type { Theme } from '../../typings'
+
 import { ThemeSourceContext, ThemeTypeContext, ThemeContext } from '../theme'
 import { createHighlighter } from '../../utils/create-highlighter'
 import { getThemeNameById } from '../../../data/themes'
@@ -36,12 +41,12 @@ root.render(<Counter />)`
 let metaGlobThemes = import.meta.glob('../../themes/*', {
   import: 'default',
   eager: !isDev,
-}) as Record<string, any>
+}) as Record<string, () => Promise<Promise<Theme>>>
 
 export let Code = component$(() => {
-  let theme = useContext(ThemeContext)
-  let themeSource = useContext(ThemeSourceContext)
-  let themeType = useContext(ThemeTypeContext)
+  let theme = useContext<Signal<string>>(ThemeContext)
+  let themeSource = useContext<Signal<Theme | null>>(ThemeSourceContext)
+  let themeType = useContext<Signal<string>>(ThemeTypeContext)
 
   let html = useSignal('')
 
@@ -53,8 +58,8 @@ export let Code = component$(() => {
     let themePath = `../../themes/${theme.value}.json`
 
     let themeValue = isDev
-      ? await metaGlobThemes[themePath]()
-      : metaGlobThemes[themePath]
+      ? await (metaGlobThemes[themePath] as unknown as () => Promise<Theme>)()
+      : (metaGlobThemes[themePath] as unknown as Theme)
 
     if (themeValue.name.toLowerCase().includes('light')) {
       themeType.value = 'light'
@@ -67,7 +72,7 @@ export let Code = component$(() => {
     themeSource.value = themeValue
 
     let highlighter = await createHighlighter()
-    await highlighter.loadTheme(themeValue)
+    await highlighter.loadTheme(themeValue as unknown as ThemeInput)
 
     let htmlValue = highlighter.codeToHtml(code, {
       theme: getThemeNameById(theme.value),
diff --git a/docs/elements/color-list/index.tsx b/docs/elements/color-list/index.tsx
index 94c09d7..bc39666 100644
--- a/docs/elements/color-list/index.tsx
+++ b/docs/elements/color-list/index.tsx
@@ -1,7 +1,12 @@
 import { useVisibleTask$, component$, useContext } from '@builder.io/qwik'
 import { isDev } from '@builder.io/qwik/build'
 
-import { updateBaseCSSVars, colorNames } from '../../utils/update-css-vars'
+import type { ThemeData } from '../../typings'
+
+import {
+  updateBaseCSSVariables,
+  colorNames,
+} from '../../utils/update-css-variables'
 import { ThemeTypeContext, ThemeContext } from '../theme'
 import { ColorItem } from '../color-item'
 import styles from './index.module.css'
@@ -9,7 +14,7 @@ import styles from './index.module.css'
 let metaGlobData = import.meta.glob('../../../themes/*', {
   import: 'default',
   eager: !isDev,
-}) as Record<string, any>
+}) as Record<string, () => Promise<ThemeData>>
 
 export let ColorList = component$(() => {
   let theme = useContext(ThemeContext)
@@ -21,11 +26,14 @@ export let ColorList = component$(() => {
 
     let dataPath = `../../../themes/${theme.value}.json`
 
-    let dataValue = isDev
-      ? await metaGlobData[dataPath]()
-      : metaGlobData[dataPath]
+    let dataValue = (
+      isDev ? await metaGlobData[dataPath]() : metaGlobData[dataPath]
+    ) as ThemeData
 
-    updateBaseCSSVars(dataValue.colors ?? [], themeType.value)
+    updateBaseCSSVariables(
+      dataValue.colors.length ? dataValue.colors : [],
+      themeType.value,
+    )
   })
 
   return (
diff --git a/docs/elements/icon-item/index.tsx b/docs/elements/icon-item/index.tsx
index fea41ec..011dbbe 100644
--- a/docs/elements/icon-item/index.tsx
+++ b/docs/elements/icon-item/index.tsx
@@ -10,7 +10,7 @@ interface IconItemProps {
   id: string
 }
 
-export const IconItem = component$<IconItemProps>(
+export let IconItem = component$<IconItemProps>(
   ({ light = false, name, id }) => (
     <li class={styles.item}>
       <Icon light={light} id={id} />
diff --git a/docs/elements/icon/index.tsx b/docs/elements/icon/index.tsx
index 60c641f..8fb86ac 100644
--- a/docs/elements/icon/index.tsx
+++ b/docs/elements/icon/index.tsx
@@ -1,6 +1,8 @@
 import { component$, useContext, useSignal, useTask$ } from '@builder.io/qwik'
 import { isDev } from '@builder.io/qwik/build'
 
+import type { ThemeData } from '../../typings'
+
 import { ThemeTypeContext, ThemeContext } from '../theme'
 import { colorize } from '../../../extension/colorize'
 
@@ -13,12 +15,12 @@ let metaGlobIcons = import.meta.glob('../../../icons/files/*', {
   import: 'default',
   eager: !isDev,
   query: '?raw',
-}) as Record<string, any>
+}) as Record<string, () => Promise<string>>
 
 let metaGlobThemeData = import.meta.glob('../../../themes/*', {
   import: 'default',
   eager: !isDev,
-}) as Record<string, any>
+}) as Record<string, () => Promise<string>>
 
 export let Icon = component$<IconProps>(({ light, id }) => {
   let icon = useSignal<string | null>(null)
@@ -34,15 +36,15 @@ export let Icon = component$<IconProps>(({ light, id }) => {
       themeType.value === 'light' && light ? '-light' : ''
     }.svg`
 
-    let svgValue = isDev
-      ? await metaGlobIcons[iconPath]()
-      : metaGlobIcons[iconPath]
+    let svgValue = (
+      isDev ? await metaGlobIcons[iconPath]() : metaGlobIcons[iconPath]
+    ) as string
 
     let themeDataPath = `../../../themes/${theme.value}.json`
 
-    let themeData = isDev
+    let themeData = (isDev
       ? await metaGlobThemeData[themeDataPath]()
-      : metaGlobThemeData[themeDataPath]
+      : metaGlobThemeData[themeDataPath]) as unknown as ThemeData
 
     icon.value = await colorize(id, themeData, svgValue)
   })
diff --git a/docs/elements/theme-dropdown/index.tsx b/docs/elements/theme-dropdown/index.tsx
index f668a02..3681d19 100644
--- a/docs/elements/theme-dropdown/index.tsx
+++ b/docs/elements/theme-dropdown/index.tsx
@@ -1,10 +1,11 @@
+import type { NoSerialize } from '@builder.io/qwik'
 import type { FocusTrap } from 'focus-trap'
 
 import {
-  useVisibleTask$,
   component$,
   useContext,
   useSignal,
+  useTask$,
   $,
 } from '@builder.io/qwik'
 import { createFocusTrap } from 'focus-trap'
@@ -14,32 +15,38 @@ import { ThemeContext } from '../theme'
 import styles from './index.module.css'
 
 interface ThemeDropdownProps {
-  close: () => void
+  close: NoSerialize<() => void>
 }
 
 export let ThemeDropdown = component$<ThemeDropdownProps>(({ close }) => {
-  let ref = useSignal<HTMLDivElement | undefined>(undefined)
+  let reference = useSignal<HTMLDivElement | undefined>()
   let theme = useContext(ThemeContext)
-  let setTheme$ = $((themeValue: string) => {
+
+  let setTheme$ = $((themeValue: string): void => {
     theme.value = themeValue
-    close()
+    close?.()
   })
 
-  useVisibleTask$(() => {
+  useTask$(({ track }) => {
+    track(() => reference.value)
+
     let focusTrap: FocusTrap | null = null
-    if (ref.value) {
-      focusTrap = createFocusTrap(ref.value, {
+    if (reference.value) {
+      focusTrap = createFocusTrap(reference.value, {
         returnFocusOnDeactivate: false,
         allowOutsideClick: true,
       })
     }
-    let handleEscape = (event: KeyboardEvent) => {
+
+    let handleEscape = (event: KeyboardEvent): void => {
       if (event.key === 'Escape') {
-        close()
+        close?.()
       }
     }
+
     document.addEventListener('keydown', handleEscape)
     focusTrap?.activate()
+
     return () => {
       focusTrap?.deactivate()
       document.removeEventListener('keydown', handleEscape)
@@ -52,12 +59,12 @@ export let ThemeDropdown = component$<ThemeDropdownProps>(({ close }) => {
         '--total': themes.length,
       }}
       class={styles.dropdown}
-      ref={ref}
+      ref={reference}
     >
       {themes.map(({ name, id }) => (
         <button
-          onClick$={() => {
-            setTheme$(id)
+          onClick$={async () => {
+            await setTheme$(id)
           }}
           class={styles['dropdown-item']}
           data-umami-event="Select Theme"
diff --git a/docs/elements/theme-select/index.tsx b/docs/elements/theme-select/index.tsx
index 48b7962..683ec33 100644
--- a/docs/elements/theme-select/index.tsx
+++ b/docs/elements/theme-select/index.tsx
@@ -1,3 +1,5 @@
+import type { NoSerialize } from '@builder.io/qwik'
+
 import { component$, useContext, useSignal, $ } from '@builder.io/qwik'
 
 import { useClickOutside } from '../../hooks/use-click-outside'
@@ -9,15 +11,15 @@ import { Label } from '../label'
 
 export let ThemeSelect = component$(() => {
   let dropdownVisible = useSignal(false)
-  let ref = useSignal<HTMLDivElement | undefined>(undefined)
+  let reference = useSignal<HTMLDivElement | undefined>()
   let theme = useContext(ThemeContext)
   let closeDropdown = $(() => {
     dropdownVisible.value = false
   })
-  useClickOutside(ref, closeDropdown)
+  useClickOutside(reference, closeDropdown)
 
   return (
-    <div class={styles.wrapper} ref={ref}>
+    <div class={styles.wrapper} ref={reference}>
       <Label for="theme">Select Theme:</Label>
       <div class={styles['input-wrapper']}>
         <button
@@ -44,7 +46,11 @@ export let ThemeSelect = component$(() => {
           />
         </svg>
       </div>
-      {dropdownVisible.value && <ThemeDropdown close={closeDropdown} />}
+      {dropdownVisible.value && (
+        <ThemeDropdown
+          close={closeDropdown as unknown as NoSerialize<() => void>}
+        />
+      )}
     </div>
   )
 })
diff --git a/docs/elements/theme/index.tsx b/docs/elements/theme/index.tsx
index 435e943..635242d 100644
--- a/docs/elements/theme/index.tsx
+++ b/docs/elements/theme/index.tsx
@@ -9,7 +9,10 @@ import {
   Slot,
 } from '@builder.io/qwik'
 
-import { updateThemeCSSVars } from '../../utils/update-css-vars'
+import type { Arguments as ThemeArguments } from '../../utils/update-css-variables'
+import type { Theme as ThemeType } from '../../typings'
+
+import { updateThemeCSSVariables } from '../../utils/update-css-variables'
 
 export let ThemeContext = createContextId<Signal<string>>('docs.theme-context')
 
@@ -17,30 +20,28 @@ export let ThemeTypeContext = createContextId<Signal<string>>(
   'docs.theme-type-context',
 )
 
-export let ThemeSourceContext = createContextId<Signal<Object | null>>(
+export let ThemeSourceContext = createContextId<Signal<ThemeType | null>>(
   'docs.theme-source-context',
 )
 
 export let Theme = component$(() => {
   let theme = useSignal('nord')
   let themeType = useSignal<'light' | 'dark'>('dark')
-  let themeSource = useSignal<Record<'colors', Record<string, string>> | null>(
-    null,
-  )
+  let themeSource = useSignal<ThemeType | null>(null)
 
   useContextProvider(ThemeContext, theme)
   useContextProvider(ThemeTypeContext, themeType)
   useContextProvider(ThemeSourceContext, themeSource)
 
-  useVisibleTask$(async ({ track }) => {
+  useVisibleTask$(({ track }) => {
     track(() => themeSource.value)
     track(() => themeType.value)
 
     if (themeSource.value) {
-      updateThemeCSSVars({
+      updateThemeCSSVariables({
         themeType: themeType.value,
         ...themeSource.value,
-      })
+      } as unknown as ThemeArguments)
     }
   })
 
diff --git a/docs/entry.dev.tsx b/docs/entry.dev.tsx
index 7b87ccb..b59bed7 100644
--- a/docs/entry.dev.tsx
+++ b/docs/entry.dev.tsx
@@ -1,7 +1,8 @@
-import type { RenderOptions } from '@builder.io/qwik'
+import type { RenderOptions, RenderResult } from '@builder.io/qwik'
 
 import { render } from '@builder.io/qwik'
 
 import Root from './root'
 
-export default (opts: RenderOptions) => render(document, <Root />, opts)
+export default (options: RenderOptions): Promise<RenderResult> =>
+  render(document, <Root />, options)
diff --git a/docs/entry.ssr.tsx b/docs/entry.ssr.tsx
index 0056f23..5f3f3d3 100644
--- a/docs/entry.ssr.tsx
+++ b/docs/entry.ssr.tsx
@@ -1,19 +1,24 @@
-import type { RenderToStreamOptions } from '@builder.io/qwik/server'
+import type {
+  RenderToStreamOptions,
+  RenderToStreamResult,
+} from '@builder.io/qwik/server'
 
 import { renderToStream } from '@builder.io/qwik/server'
 import { manifest } from '@qwik-client-manifest'
 
 import Root from './root'
 
-export default (opts: RenderToStreamOptions) =>
+export default (
+  options: RenderToStreamOptions,
+): Promise<RenderToStreamResult> =>
   renderToStream(<Root />, {
     manifest,
-    ...opts,
+    ...options,
     containerAttributes: {
       lang: 'en-us',
-      ...opts.containerAttributes,
+      ...options.containerAttributes,
     },
     serverData: {
-      ...opts.serverData,
+      ...options.serverData,
     },
   })
diff --git a/docs/hooks/use-click-outside.ts b/docs/hooks/use-click-outside.ts
index bcee29c..59e802f 100644
--- a/docs/hooks/use-click-outside.ts
+++ b/docs/hooks/use-click-outside.ts
@@ -3,18 +3,18 @@ import type { Signal, QRL } from '@builder.io/qwik'
 import { useOnDocument, $ } from '@builder.io/qwik'
 
 export let useClickOutside = (
-  ref: Signal<HTMLElement | undefined>,
+  reference: Signal<HTMLElement | undefined>,
   onClickOut: QRL<() => void>,
-) => {
+): void => {
   useOnDocument(
     'click',
-    $(event => {
-      if (!ref.value) {
+    $(async event => {
+      if (!reference.value) {
         return
       }
       let target = event.target as HTMLElement
-      if (!ref.value.contains(target)) {
-        onClickOut()
+      if (!reference.value.contains(target)) {
+        await onClickOut()
       }
     }),
   )
diff --git a/docs/mocks/vscode.ts b/docs/mocks/vscode.ts
index 0ae9348..46830e9 100644
--- a/docs/mocks/vscode.ts
+++ b/docs/mocks/vscode.ts
@@ -1,5 +1,7 @@
 export let workspace = {
-  getConfiguration: () => ({
+  getConfiguration: (): {
+    get: () => void
+  } => ({
     get: () => {},
   }),
 }
diff --git a/docs/routes/layout.tsx b/docs/routes/layout.tsx
index b9753b8..eb68dc7 100644
--- a/docs/routes/layout.tsx
+++ b/docs/routes/layout.tsx
@@ -2,7 +2,7 @@ import type { RequestHandler } from '@builder.io/qwik-city'
 
 import { component$, Slot } from '@builder.io/qwik'
 
-export const onGet: RequestHandler = async ({ cacheControl }) => {
+export let onGet: RequestHandler = ({ cacheControl }): void => {
   cacheControl({
     staleWhileRevalidate: 60 * 60 * 24 * 7,
     maxAge: 5,
diff --git a/docs/routes/service-worker.ts b/docs/routes/service-worker.ts
index 08fdadb..33b512d 100644
--- a/docs/routes/service-worker.ts
+++ b/docs/routes/service-worker.ts
@@ -6,4 +6,4 @@ addEventListener('install', () => self.skipWaiting())
 
 addEventListener('activate', () => self.clients.claim())
 
-declare const self: ServiceWorkerGlobalScope
+declare let self: ServiceWorkerGlobalScope
diff --git a/docs/typings/index.d.ts b/docs/typings/index.d.ts
new file mode 100644
index 0000000..50b55d7
--- /dev/null
+++ b/docs/typings/index.d.ts
@@ -0,0 +1,191 @@
+export interface Theme {
+  semanticHighlighting: boolean
+  tokenColors: TokenColor[]
+  $schema: string
+  colors: Colors
+  name: string
+  type: string
+}
+
+export interface ThemeData {
+  overrides: Record<string, Record<string, string>>
+  colors: string[]
+}
+
+export interface Colors {
+  'gitDecoration.conflictingResourceForeground': string
+  'gitDecoration.untrackedResourceForeground': string
+  'gitDecoration.modifiedResourceForeground': string
+  'gitDecoration.deletedResourceForeground': string
+  'gitDecoration.ignoredResourceForeground': string
+  'peekViewEditor.matchHighlightBackground': string
+  'peekViewResult.matchHighlightBackground': string
+  'editorOverviewRuler.modifiedForeground': string
+  'editorOverviewRuler.deletedForeground': string
+  'editorOverviewRuler.warningForeground': string
+  'gitDecoration.addedResourceForeground': string
+  'minimap.selectionOccurrenceHighlight': string
+  'editorOverviewRuler.addedForeground': string
+  'editorOverviewRuler.errorForeground': string
+  'notificationCenterHeader.background': string
+  'notificationCenterHeader.foreground': string
+  'editor.inactiveSelectionBackground': string
+  'editorOverviewRuler.infoForeground': string
+  'editorLineNumber.activeForeground': string
+  'statusBarItem.prominentBackground': string
+  'editorGroupHeader.tabsBackground': string
+  'editorGutter.modifiedBackground': string
+  'button.secondaryHoverBackground': string
+  'sideBarSectionHeader.background': string
+  'sideBarSectionHeader.foreground': string
+  'welcomePage.progress.foreground': string
+  'editorGutter.deletedBackground': string
+  'activityBar.inactiveForeground': string
+  'settings.modifiedItemIndicator': string
+  'statusBarItem.remoteBackground': string
+  'statusBarItem.remoteForeground': string
+  'statusBar.debuggingBackground': string
+  'panelTitle.inactiveForeground': string
+  'statusBar.debuggingForeground': string
+  'editorGutter.addedBackground': string
+  'terminal.selectionBackground': string
+  'statusBar.noFolderBackground': string
+  'editorGroupHeader.tabsBorder': string
+  'inputOption.activeBackground': string
+  'tab.unfocusedActiveBorderTop': string
+  'tab.unfocusedHoverBackground': string
+  'activityBarBadge.background': string
+  'activityBarBadge.foreground': string
+  'chat.slashCommandBackground': string
+  'chat.slashCommandForeground': string
+  'editorLineNumber.foreground': string
+  'input.placeholderForeground': string
+  'panelTitle.activeForeground': string
+  'settings.dropdownBackground': string
+  'sideBarSectionHeader.border': string
+  'titleBar.inactiveBackground': string
+  'titleBar.inactiveForeground': string
+  'editor.selectionBackground': string
+  'terminal.ansiBrightMagenta': string
+  'button.secondaryBackground': string
+  'button.secondaryForeground': string
+  'editor.findMatchBackground': string
+  'editorOverviewRuler.border': string
+  'keybindingLabel.foreground': string
+  'welcomePage.tileBackground': string
+  'terminalCursor.foreground': string
+  'terminal.ansiBrightYellow': string
+  'peekViewEditor.background': string
+  'peekViewResult.background': string
+  'settings.headerForeground': string
+  'statusBarItem.focusBorder': string
+  'tab.unfocusedActiveBorder': string
+  'terminal.tab.activeBorder': string
+  'textBlockQuote.background': string
+  'textLink.activeForeground': string
+  'titleBar.activeBackground': string
+  'titleBar.activeForeground': string
+  'editorWarning.foreground': string
+  'terminal.ansiBrightBlack': string
+  'terminal.ansiBrightGreen': string
+  'terminal.ansiBrightWhite': string
+  'activityBar.activeBorder': string
+  'inputOption.activeBorder': string
+  'menu.selectionBackground': string
+  'notifications.background': string
+  'notifications.foreground': string
+  'textCodeBlock.background': string
+  'textPreformat.foreground': string
+  'textPreformat.background': string
+  'textSeparator.foreground': string
+  'sideBarTitle.foreground': string
+  'terminal.ansiBrightBlue': string
+  'terminal.ansiBrightCyan': string
+  'debugToolBar.background': string
+  'dropdown.listBackground': string
+  'editorWidget.background': string
+  'panelTitle.activeBorder': string
+  'settings.dropdownBorder': string
+  'editorError.foreground': string
+  'terminal.ansiBrightRed': string
+  'activityBar.background': string
+  'activityBar.foreground': string
+  'button.hoverBackground': string
+  'progressBar.background': string
+  'tab.inactiveBackground': string
+  'tab.inactiveForeground': string
+  'editorInfo.foreground': string
+  'quickInput.background': string
+  'quickInput.foreground': string
+  'statusBar.focusBorder': string
+  'tab.selectedBorderTop': string
+  'textBlockQuote.border': string
+  'editorWarning.border': string
+  'terminal.ansiMagenta': string
+  'statusBar.background': string
+  'notifications.border': string
+  'statusBar.foreground': string
+  'tab.activeBackground': string
+  'tab.activeForeground': string
+  'list.dropBackground': string
+  'terminal.background': string
+  'terminal.foreground': string
+  'terminal.ansiYellow': string
+  'checkbox.background': string
+  descriptionForeground: string
+  'dropdown.background': string
+  'dropdown.foreground': string
+  'tab.activeBorderTop': string
+  'tab.hoverBackground': string
+  'textLink.foreground': string
+  'editorError.border': string
+  'terminal.ansiBlack': string
+  'terminal.ansiGreen': string
+  'terminal.ansiWhite': string
+  'activityBar.border': string
+  'editorGroup.border': string
+  'pickerGroup.border': string
+  'sideBar.background': string
+  'sideBar.foreground': string
+  'editor.background': string
+  'editor.foreground': string
+  'editorInfo.border': string
+  'terminal.ansiBlue': string
+  'terminal.ansiCyan': string
+  'button.background': string
+  'button.foreground': string
+  'panelInput.border': string
+  'terminal.ansiRed': string
+  'badge.background': string
+  'badge.foreground': string
+  'input.background': string
+  'input.foreground': string
+  'panel.background': string
+  'statusBar.border': string
+  'tab.activeBorder': string
+  'checkbox.border': string
+  'dropdown.border': string
+  'icon.foreground': string
+  'menu.background': string
+  'titleBar.border': string
+  'sideBar.border': string
+  'button.border': string
+  errorForeground: string
+  'widget.border': string
+  'input.border': string
+  'panel.border': string
+  'tab.border': string
+  focusBorder: string
+  foreground: string
+}
+
+export interface TokenColor {
+  settings: Settings
+  scope: string[]
+  name?: string
+}
+
+export interface Settings {
+  foreground?: string
+  fontStyle?: string
+}
diff --git a/docs/utils/create-highlighter.ts b/docs/utils/create-highlighter.ts
index 05da397..aa195d5 100644
--- a/docs/utils/create-highlighter.ts
+++ b/docs/utils/create-highlighter.ts
@@ -1,4 +1,9 @@
-import type { HighlighterGeneric, BundledLanguage, BuiltinTheme } from 'shiki'
+import type {
+  HighlighterGeneric,
+  BundledLanguage,
+  BundledTheme,
+  BuiltinTheme,
+} from 'shiki'
 
 import {
   createHighlighter as createShikiHighlighter,
@@ -9,7 +14,9 @@ let highlighter: HighlighterGeneric<BundledLanguage, BuiltinTheme> | null = null
 
 let jsEngine = createJavaScriptRegexEngine()
 
-export let createHighlighter = async () => {
+export let createHighlighter = async (): Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> => {
   if (!highlighter) {
     highlighter = await createShikiHighlighter({
       engine: jsEngine,
diff --git a/docs/utils/update-css-vars.ts b/docs/utils/update-css-variables.ts
similarity index 71%
rename from docs/utils/update-css-vars.ts
rename to docs/utils/update-css-variables.ts
index ba3a719..81a50e0 100644
--- a/docs/utils/update-css-vars.ts
+++ b/docs/utils/update-css-variables.ts
@@ -1,12 +1,12 @@
 import { toOklch } from '../../extension/colorize/to-oklch'
 import { toRgb } from '../../extension/colorize/to-rgb'
 
-interface Args {
-  colors: Record<string, undefined | string>
+export interface Arguments {
+  colors: Record<string, string>
   themeType: 'light' | 'dark'
 }
 
-let set = (key: string, values: (undefined | string)[]) => {
+let set = (key: string, values: (undefined | string)[]): void => {
   let root = document.documentElement
   for (let value of values) {
     if (value) {
@@ -16,21 +16,24 @@ let set = (key: string, values: (undefined | string)[]) => {
   }
 }
 
-export let updateThemeCSSVars = ({ themeType, colors }: Args) => {
+export let updateThemeCSSVariables = ({
+  themeType,
+  colors,
+}: Arguments): void => {
   set('background-brand', [
     colors['activityBarBadge.background'],
     colors['button.background'],
   ])
   set('background-primary', [colors['editor.background']])
   set('background-secondary', [
-    colors['editor.background']?.toLowerCase() !==
-    colors['tab.activeBackground']?.toLowerCase()
-      ? colors['tab.activeBackground']
-      : undefined,
-    colors['editor.background']?.toLowerCase() !==
-    colors['tab.inactiveBackground']?.toLowerCase()
-      ? colors['tab.inactiveBackground']
-      : undefined,
+    colors['editor.background'].toLowerCase() ===
+    colors['tab.activeBackground'].toLowerCase()
+      ? '#000'
+      : colors['tab.activeBackground'],
+    colors['editor.background'].toLowerCase() ===
+    colors['tab.inactiveBackground'].toLowerCase()
+      ? '#000'
+      : colors['tab.inactiveBackground'],
     colors['sideBar.background'],
   ])
   set('background-tertiary', [
@@ -61,11 +64,11 @@ export let updateThemeCSSVars = ({ themeType, colors }: Args) => {
 
 export let colorNames = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']
 
-export let updateBaseCSSVars = (colors: string[], type: string) => {
+export let updateBaseCSSVariables = (colors: string[], type: string): void => {
   for (let [i, color] of colors.slice(0, colorNames.length).entries()) {
     if (type === 'light') {
       let oklch = toOklch(color)
-      oklch.l = oklch.l + 0.2
+      oklch.l += 0.2
       color = toRgb(oklch)
     }
     set(colorNames[i], [color])
diff --git a/extension/colorize/check-contrast.ts b/extension/colorize/check-contrast.ts
index 711b1d7..da7f032 100644
--- a/extension/colorize/check-contrast.ts
+++ b/extension/colorize/check-contrast.ts
@@ -5,5 +5,5 @@ interface SvgInfo {
   foreground: string
 }
 
-export let checkContrast = ({ background, foreground }: SvgInfo) =>
+export let checkContrast = ({ background, foreground }: SvgInfo): boolean =>
   wcagContrast(background, foreground) > 1.25
diff --git a/extension/colorize/color-pattern.ts b/extension/colorize/color-pattern.ts
index 1de3be1..df6a5ab 100644
--- a/extension/colorize/color-pattern.ts
+++ b/extension/colorize/color-pattern.ts
@@ -1,12 +1,12 @@
 import { colorsNamed } from 'culori'
 
-let getColorPattern = () => {
+let getColorPattern = (): RegExp => {
   let colorKeys = Object.keys(colorsNamed)
   let colorRegexPart = colorKeys
-    .reduce((acc, color) => acc + '|' + color, '')
+    .reduce((accumulator, color) => `${accumulator}|${color}`, '')
     .slice(1)
 
-  let hexPattern = /#([\da-f]{6}|[\da-f]{3})/gi
+  let hexPattern = /#(?<color>[\da-f]{6}|[\da-f]{3})/giu
   return new RegExp(`(${colorRegexPart}|${hexPattern.source})`, 'gi')
 }
 
diff --git a/extension/colorize/index.ts b/extension/colorize/index.ts
index ff2242b..d66009b 100644
--- a/extension/colorize/index.ts
+++ b/extension/colorize/index.ts
@@ -23,7 +23,7 @@ export let colorize = async (
   let overrided = theme.overrides
     ? override(id, theme.overrides, source)
     : source
-  let recolored = await recolor(theme, overrided)
+  let recolored = recolor(theme, overrided)
   let parsed = parseSvg(recolored)
   if (!parsed) {
     return recolored
diff --git a/extension/colorize/override.ts b/extension/colorize/override.ts
index 765a6b4..1b147d1 100644
--- a/extension/colorize/override.ts
+++ b/extension/colorize/override.ts
@@ -3,10 +3,11 @@ export let override = (
   overrides: Record<string, Record<string, string>>,
   source: string,
 ): string => {
+  let result = source
   if (id in overrides) {
     for (let [from, to] of Object.entries(overrides[id])) {
-      source = source.replaceAll(new RegExp(from, 'g'), to)
+      result = result.replaceAll(new RegExp(from, 'g'), to)
     }
   }
-  return source
+  return result
 }
diff --git a/extension/colorize/recolor-folder.ts b/extension/colorize/recolor-folder.ts
index a5725ea..051a394 100644
--- a/extension/colorize/recolor-folder.ts
+++ b/extension/colorize/recolor-folder.ts
@@ -8,14 +8,11 @@ import { toRgb } from './to-rgb'
 let primaryColor = '#ffca28'
 let secondaryColor = '#ffa000'
 
-export let recolorFolder = async (
-  source: string,
-  colors: string[],
-): Promise<string> => {
+export let recolorFolder = (source: string, colors: string[]): string => {
   let folderColor = getFolderValue()
   let newPrimaryColor = colors[colorNames.indexOf(folderColor)]
   let newSecondaryColor: string | Oklch = toOklch(newPrimaryColor)
-  newSecondaryColor.l = newSecondaryColor.l - 0.2
+  newSecondaryColor.l -= 0.2
   newSecondaryColor = toRgb(newSecondaryColor)
 
   return source
diff --git a/extension/colorize/recolor.ts b/extension/colorize/recolor.ts
index 6a82fd8..a310f20 100644
--- a/extension/colorize/recolor.ts
+++ b/extension/colorize/recolor.ts
@@ -3,10 +3,10 @@ import { differenceCiede2000, nearest } from 'culori'
 import { colorPattern } from './color-pattern'
 import { toOklch } from './to-oklch'
 
-export let recolor = async (
+export let recolor = (
   theme: Record<'colors', string[]>,
   source: string,
-): Promise<string> => {
+): string => {
   let findNearestBaseColor = nearest(theme.colors, differenceCiede2000(1, 2, 2))
   let findNearestExtremeColor = nearest(
     theme.colors,
diff --git a/extension/colorize/to-rgb.ts b/extension/colorize/to-rgb.ts
index c7103ce..4e4453e 100644
--- a/extension/colorize/to-rgb.ts
+++ b/extension/colorize/to-rgb.ts
@@ -5,7 +5,7 @@ import { formatHex } from 'culori'
 export let toRgb = (color: string | Color): string => {
   let hex = formatHex(color)
   if (!hex) {
-    throw new Error(`Could not convert ${color} to RGB`)
+    throw new Error(`Could not convert ${JSON.stringify(color)} to RGB`)
   }
   return hex
 }
diff --git a/extension/index.ts b/extension/index.ts
index b7b0c29..6ef8eb8 100644
--- a/extension/index.ts
+++ b/extension/index.ts
@@ -8,7 +8,7 @@ import { build } from './build'
 
 let buildInProgress = false
 
-let buildEyecons = async () => {
+let buildEyecons = async (): Promise<void> => {
   try {
     if (buildInProgress) {
       return
@@ -32,7 +32,11 @@ export let activate = async (context: ExtensionContext): Promise<void> => {
 
   try {
     let previousVersion = context.globalState.get<string>('extensionVersion')
-    let currentVersion = context.extension.packageJSON.version
+    let currentVersion = (
+      context.extension.packageJSON as {
+        version: string
+      }
+    ).version
 
     commands.registerCommand('eyecons.rebuild', build)
     workspace.onDidChangeConfiguration(buildEyecons)
@@ -40,15 +44,15 @@ export let activate = async (context: ExtensionContext): Promise<void> => {
     console.log('Previous version:', previousVersion)
     console.log('Current version:', currentVersion)
 
-    if (previousVersion !== currentVersion) {
-      await build()
-      context.globalState.update('extensionVersion', currentVersion)
-    } else {
+    if (previousVersion === currentVersion) {
       await buildEyecons()
+    } else {
+      await build()
+      await context.globalState.update('extensionVersion', currentVersion)
     }
   } catch (error) {
     console.log(error)
   }
 }
 
-export let deactivate = () => {}
+export let deactivate = (): void => {}
diff --git a/extension/utils/console.ts b/extension/utils/console.ts
index ff268c2..6ed5b32 100644
--- a/extension/utils/console.ts
+++ b/extension/utils/console.ts
@@ -4,7 +4,7 @@ import { window } from 'vscode'
 
 let output: OutputChannel
 
-let getDate = () =>
+let getDate = (): string =>
   new Intl.DateTimeFormat('en-US', {
     minute: 'numeric',
     second: 'numeric',
@@ -16,11 +16,11 @@ let getDate = () =>
   }).format(new Date())
 
 export let console = {
-  init: () => {
+  init: (): void => {
     output = window.createOutputChannel('Eyecons')
     output.appendLine(`${getDate()}: Eyecons initialized`)
   },
-  log: (...args: unknown[]) => {
-    output.appendLine(`${getDate()}: ${args.join(' ')}`)
+  log: (...arguments_: unknown[]): void => {
+    output.appendLine(`${getDate()}: ${arguments_.join(' ')}`)
   },
 }
diff --git a/scripts/generate-preview.ts b/scripts/generate-preview.ts
index e310d69..20d0696 100644
--- a/scripts/generate-preview.ts
+++ b/scripts/generate-preview.ts
@@ -3,6 +3,8 @@ import puppeteer from 'puppeteer'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 
+import type { ThemeData, Theme } from '../docs/typings'
+
 import { colorize } from '../extension/colorize'
 import { fileIcons } from '../data/file-icons'
 
@@ -15,23 +17,23 @@ let createScreenshot = async (theme: string): Promise<void> => {
     })
 
     let page = await browser.newPage()
-    let numOfItemsPerLine = 10
+    let numberOfItemsPerLine = 10
     let itemSize = 48
     let paddingSize = 16
     let gapSize = 20
 
-    let themeData = await import(
+    let themeData = (await import(
       path.join(__dirname, '../docs/themes', `${theme}.json`)
-    )
-    let themeValueData = await import(
+    )) as Theme
+    let themeValueData = (await import(
       path.join(__dirname, '../themes', `${theme}.json`)
-    )
+    )) as ThemeData
 
-    let getIconsSources = async () => {
+    let getIconsSources = async (): Promise<Record<string, string>> => {
       let iconPromises = fileIcons.map(async ({ id }) => {
         let iconContent = await fs.readFile(
           path.join(__dirname, `../icons/files/${id}.svg`),
-          'utf-8',
+          'utf8',
         )
         return { iconContent, id }
       })
@@ -52,13 +54,13 @@ let createScreenshot = async (theme: string): Promise<void> => {
     await page.setViewport({
       width:
         paddingSize * 2 +
-        itemSize * numOfItemsPerLine +
-        gapSize * (numOfItemsPerLine - 1),
+        itemSize * numberOfItemsPerLine +
+        gapSize * (numberOfItemsPerLine - 1),
       deviceScaleFactor: 3,
       height: 10,
     })
 
-    let colorizeIcons = async () =>
+    let colorizeIcons = async (): Promise<string> =>
       await fileIcons.reduce(async (accumulatorPromise, { name, id }) => {
         let accumulator = await accumulatorPromise
         let coloredIcon = await colorize(id, themeValueData, iconsSources[id])
diff --git a/test/colorize/recolor.test.ts b/test/colorize/recolor.test.ts
index 5a1ce27..ddb12e9 100644
--- a/test/colorize/recolor.test.ts
+++ b/test/colorize/recolor.test.ts
@@ -8,12 +8,12 @@ describe('colorize', () => {
     colors: ['#ff0000', '#00ff00', '#0000ff', '#66cc66', '#eeeeee'],
   }
 
-  it('should colorize source code', async () => {
+  it('should colorize source code', () => {
     let source = dedent`
       <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <circle cx="50" cy="50" r="50" fill="#dc143c" />
       </svg>`
-    let result = await recolor(theme, source)
+    let result = recolor(theme, source)
 
     expect(result).toBe(dedent`
       <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
@@ -21,12 +21,12 @@ describe('colorize', () => {
       </svg>`)
   })
 
-  it('colorizes source code with light colors', async () => {
+  it('colorizes source code with light colors', () => {
     let source = dedent`
       <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <circle cx="50" cy="50" r="50" fill="#fff" />
       </svg>`
-    let result = await recolor(theme, source)
+    let result = recolor(theme, source)
 
     expect(result).toBe(dedent`
       <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
@@ -34,12 +34,12 @@ describe('colorize', () => {
       </svg>`)
   })
 
-  it('colorizes source code with dark colors', async () => {
+  it('colorizes source code with dark colors', () => {
     let source = dedent`
       <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <circle cx="50" cy="50" r="50" fill="#000" />
       </svg>`
-    let result = await recolor(theme, source)
+    let result = recolor(theme, source)
 
     expect(result).toBe(dedent`
       <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
diff --git a/test/colorize/to-rgb.test.ts b/test/colorize/to-rgb.test.ts
index 8830261..180e2a0 100644
--- a/test/colorize/to-rgb.test.ts
+++ b/test/colorize/to-rgb.test.ts
@@ -23,6 +23,6 @@ describe('toRgb', () => {
   })
 
   it('should throw error for invalid color', () => {
-    expect(() => toRgb('invalid')).toThrow('Could not convert invalid to RGB')
+    expect(() => toRgb('invalid')).toThrow('Could not convert "invalid" to RGB')
   })
 })
diff --git a/tsconfig.json b/tsconfig.json
index 320303a..a41a7c1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
-    "target": "ES2017",
+    "target": "ES2022",
     "module": "ES2022",
     "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
     "types": ["vite/client"],
diff --git a/vite.config.docs.ts b/vite.config.documentation.ts
similarity index 100%
rename from vite.config.docs.ts
rename to vite.config.documentation.ts
diff --git a/vite.config.extension.ts b/vite.config.extension.ts
index 8bbbb93..749316a 100644
--- a/vite.config.extension.ts
+++ b/vite.config.extension.ts
@@ -15,8 +15,11 @@ interface MakeFilePluginOptions {
   dest: string
 }
 
-let copyRecursiveSync = async (src: string, dest: string) => {
-  let checkIfExists = async (file: string) => {
+let copyRecursive = async (
+  source: string,
+  destination: string,
+): Promise<void> => {
+  let checkIfExists = async (file: string): Promise<boolean> => {
     try {
       await fs.stat(file)
       return true
@@ -25,25 +28,27 @@ let copyRecursiveSync = async (src: string, dest: string) => {
     }
   }
 
-  let exists = await checkIfExists(src)
-  let stats = await fs.stat(src)
+  let exists = await checkIfExists(source)
+  let stats = await fs.stat(source)
   let isDirectory = exists && stats.isDirectory()
   if (isDirectory) {
-    fs.mkdir(dest, { recursive: true })
-    let children = await fs.readdir(src)
-    children.forEach(childItemName => {
-      copyRecursiveSync(
-        path.join(src, childItemName),
-        path.join(dest, childItemName),
-      )
-    })
+    await fs.mkdir(destination, { recursive: true })
+    let children = await fs.readdir(source)
+    await Promise.all(
+      children.map(async childItemName => {
+        await copyRecursive(
+          path.join(source, childItemName),
+          path.join(destination, childItemName),
+        )
+      }),
+    )
   } else {
-    await fs.copyFile(src, dest)
+    await fs.copyFile(source, destination)
   }
 }
 
 let copyFoldersPlugin = (options: CopyFoldersPluginOptions[] = []): Plugin => ({
-  closeBundle: () => {
+  closeBundle: async () => {
     if (!Array.isArray(options) || options.length === 0) {
       console.error(
         'vite-plugin-copy-folders: "options" should be a non-empty array',
@@ -51,19 +56,21 @@ let copyFoldersPlugin = (options: CopyFoldersPluginOptions[] = []): Plugin => ({
       return
     }
 
-    options.forEach(({ dest, src }) => {
-      if (!src || !dest) {
-        console.error(
-          'vite-plugin-copy-folders: "src" and "dest" options are required',
-        )
-        return
-      }
-      try {
-        copyRecursiveSync(src, dest)
-      } catch (error) {
-        console.error(`vite-plugin-copy-folders: ${error}`)
-      }
-    })
+    await Promise.all(
+      options.map(async ({ dest, src }) => {
+        if (!src || !dest) {
+          console.error(
+            'vite-plugin-copy-folders: "src" and "dest" options are required',
+          )
+          return
+        }
+        try {
+          await copyRecursive(src, dest)
+        } catch (error) {
+          console.error(`vite-plugin-copy-folders: ${error as string}`)
+        }
+      }),
+    )
   },
   name: 'vite-plugin-copy-folders',
   apply: 'build',
@@ -74,7 +81,7 @@ let makeFile = (options: MakeFilePluginOptions): Plugin => ({
     try {
       await fs.writeFile(options.dest, options.content)
     } catch (error) {
-      console.error(`vite-plugin-make-file: ${error}`)
+      console.error(`vite-plugin-make-file: ${error as string}`)
     }
   },
   name: 'vite-plugin-make-file',