- chore: add small comments

- chore: move Palette,ConfigValue and Config types into types.ts

Author: VasylHryha

packages/ui/src/services/color/presetsToShare.ts

@@ -1,3 +1,4 @@
+import type { Config, Palette } from './types'
 
 export const presetToShare = {
   blue: '#154ec1',
@@ -97,7 +98,7 @@ export const presetToShare = {
   skySoftDark: '#4b97de',
   skyLight: '#2379b6',
   skyDark: '#0a5c97',
-}
+} as Palette
 
 export const lightNewTheme = {
   text: {
@@ -183,7 +184,7 @@ export const lightNewTheme = {
     info: 'sky20',
     brand: 'blue20',
   },
-}
+} as Config
 
 export const darkNewTheme = {
   text: {
@@ -200,7 +201,7 @@ export const darkNewTheme = {
     brandHover: 'blueSoftLight',
     brandPressed: 'blueSoftDark',
     dangerHover: 'redSoftLight',
-    dangerPressed: ['redPaleDark', 'redSoftDark'], // not all names from figma follow the same pattern
+    dangerPressed: ['redPaleDark', 'redSoftDark'], // not all names from figma follow the same pattern - recommend to normalize them
     successHover: 'greenSoftLight',
     successPressed: 'greenSoftDark',
     warningHover: 'yellowSoftLight',
@@ -240,7 +241,7 @@ export const darkNewTheme = {
     dangerPressed: 'redSoft7',
     dangerHover: 'redSoft13',
     dangerAccentHover: 'redSoftLight',
-    dangerAccentPressed: ['redPaleDark', 'redSoftDark'],
+    dangerAccentPressed: ['redPaleDark', 'redSoftDark'], // not all names from figma follow the same pattern - recommend to normalize them
     successPressed: 'greenSoft7',
     successHover: 'greenSoft13',
     successAccentHover: 'greenSoftLight',
@@ -269,4 +270,4 @@ export const darkNewTheme = {
     info: 'skySoft20',
     brand: 'blueSoft20',
   },
-}
+} as Config

packages/ui/src/services/color/types.ts

@@ -64,3 +64,7 @@ export type ColorConfig = {
   },
   currentPresetName: string,
 }
+
+export type Palette = Record<string, string>
+export type ConfigValue = string | string[] | Record<string, any>
+export type Config = Record<string, ConfigValue>

packages/ui/src/services/color/utils.ts

@@ -2,6 +2,8 @@ import { camelCaseToKebabCase, kebabCaseToCamelCase } from '@/utils/text-case'
 
 import { setHSLA, shiftHSLA, parseColorToRGB, parseColorToHSL, rgbToString, hslToString, colorToString, type RGBObject, type HSLObject } from '@/utils/color'
 
+import type { Config, Palette } from './types'
+
 export const isCSSVariable = (strColor: string): boolean => /var\(--.+\)/.test(strColor)
 export const cssVariableName = (colorName: string) => `--va-${camelCaseToKebabCase(colorName)}`
 export const normalizeColorName = (colorName: string) => kebabCaseToCamelCase(colorName)
@@ -122,63 +124,45 @@ export const isColorTransparent = (color: string) => {
 
 export { isColor } from './../../utils/color'
 
-type Palette = Record<string, string>
-
-// Values in a theme config can be:
-// - a token string ("blue10")
-// - a prioritized list of token strings (["redPaleDark","redSoftDark"])
-// - a nested object (e.g., { brand: "...", danger: "..." })
-type ConfigValue = string | string[] | Record<string, any>
-type Config = Record<string, ConfigValue>
-
 /**
- * resolveColors
+ * Resolves color token references in config to actual color values from palette.
  *
- * Replaces token references in a config using a palette. Behavior:
- *  - string:   replace with palette[token] if present; otherwise keep as-is
- *  - string[]: treat as fallback list; return the first palette hit;
- *              if none hit, return the first element unchanged
- *  - object:   recurse into properties
+ * Handles three types:
+ * - String: "blue10" → palette["blue10"] or unchanged if not found
+ * - Array: ["redPaleDark", "redSoftDark"] → first match from palette, or first item if none match
+ * - Object: Recursively resolves nested properties
  *
- * Example:
- *  dangerPressed: ["redPaleDark", "redSoftDark"]
- *    -> resolves to palette["redPaleDark"] if it exists,
- *       otherwise palette["redSoftDark"] if it exists,
- *       otherwise "redPaleDark" (the first item) unchanged.
+ * @example
+ * resolveColors(
+ *   { danger: "red", fallback: ["custom", "red"] },
+ *   { red: "#ff0000" }
+ * )
+ * // Returns: { danger: "#ff0000", fallback: "#ff0000" }
  */
 export function resolveColors (config: Config, palette: Palette): Config {
-  const replaceValues = (obj: any): any => {
-    // simple token string
-    if (typeof obj === 'string') {
-      return palette[obj] ?? obj
+  const resolve = (value: any): any => {
+    if (typeof value === 'string') {
+      return palette[value] ?? value
     }
 
-    // arrays
-    if (Array.isArray(obj)) {
-      // If it's a list of strings, treat as fallback tokens
-      if (obj.every((x) => typeof x === 'string')) {
-        for (const token of obj) {
-          if (palette[token]) { return palette[token] }
-        }
-        // no token matched: return the first entry unchanged (best-effort fallback)
-        return obj[0]
+    if (Array.isArray(value)) {
+      // String array = fallback list (try each token until one matches)
+      if (value.every((x) => typeof x === 'string')) {
+        const match = value.find((token) => palette[token])
+        return match ? palette[match] : value[0]
       }
-      // Mixed array / non-strings: preserve previous behavior (map recursively)
-      return obj.map(replaceValues)
+      // Non-string array = map recursively
+      return value.map(resolve)
     }
 
-    // objects (recurse)
-    if (obj && typeof obj === 'object') {
-      const result: Record<string, any> = {}
-      for (const key of Object.keys(obj)) {
-        result[key] = replaceValues(obj[key])
-      }
-      return result
+    if (value && typeof value === 'object') {
+      return Object.fromEntries(
+        Object.entries(value).map(([key, val]) => [key, resolve(val)]),
+      )
     }
 
-    // everything else (numbers, null, etc.)
-    return obj
+    return value
   }
 
-  return replaceValues(config)
+  return resolve(config)
 }