refactor: improve AccentColorId type constraints (#1972)

Author: maxchang3

app/composables/useSettings.ts

@@ -1,13 +1,11 @@
 import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
-import { ACCENT_COLORS } from '#shared/utils/constants'
+import { ACCENT_COLORS, type AccentColorId } from '#shared/utils/constants'
 import type { LocaleObject } from '@nuxtjs/i18n'
 import { BACKGROUND_THEMES } from '#shared/utils/constants'
 
 type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
 
-type AccentColorId = keyof typeof ACCENT_COLORS.light
-
 /** Available search providers */
 export type SearchProvider = 'npm' | 'algolia'
 

app/utils/prehydrate.ts

@@ -18,7 +18,7 @@ export function initPreferencesOnPrehydrate() {
       'violet',
       'magenta',
       'neutral',
-    ])
+    ] satisfies typeof ACCENT_COLOR_IDS)
 
     // Valid package manager IDs
     const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt'])

shared/utils/constants.ts

@@ -59,6 +59,18 @@ export const DISCORD_COMMUNITY_URL = 'https://chat.npmx.dev'
 export const DISCORD_BUILDERS_URL = 'https://build.npmx.dev'
 
 // Theming
+export const ACCENT_COLOR_IDS = [
+  'sky',
+  'coral',
+  'amber',
+  'emerald',
+  'violet',
+  'magenta',
+  'neutral',
+] as const
+
+export type AccentColorId = (typeof ACCENT_COLOR_IDS)[number]
+
 export const ACCENT_COLORS = {
   light: {
     sky: 'oklch(0.53 0.16 247.27)',
@@ -78,7 +90,7 @@ export const ACCENT_COLORS = {
     magenta: 'oklch(0.78 0.15 330)',
     neutral: 'oklch(1 0 0)',
   },
-} as const
+} as const satisfies Record<'light' | 'dark', Record<AccentColorId, string>>
 
 export const BACKGROUND_THEMES = {
   neutral: 'oklch(0.555 0 0)',