move out unused color utils

components/src/index.ts

@@ -5,5 +5,6 @@ export * from './icons'
 export { tokens, baseTheme, lightTheme, darkTheme } from './tokens'
 export type { DefaultTheme, EmptyObject, Accent, Mode, ReactNodeNoStrings } from './types'
 export type { Hue, Colors, Space } from './tokens'
+export type { RawColor } from './tokens/color'
 export * from './css/theme.css'
 export * from './tokens/color'

components/src/tokens/color.ts

@@ -355,37 +355,6 @@ export type Color = PaletteColor | AdditionalColor | Gradient
 export const rawColorToRGB = (color: RawColor): string =>
   `rgb(${color.join(', ')})`
 
-export const rawColorToRGBA = (color: RawColor, opacity = 1): string =>
-  `rgba(${[...color, opacity].join(', ')})`
-
-export const rawColorToHex = (color: RawColor): string => {
-  return `#${color.map(c => c.toString(16)).join('')}`
-}
-
-export const rawColorToHSL = ([r, g, b]: RawColor): string => {
-  r /= 255
-  g /= 255
-  b /= 255
-  const l = Math.max(r, g, b)
-  const s = l - Math.min(r, g, b)
-  const h = s
-    ? l === r
-      ? (g - b) / s
-      : l === g
-        ? 2 + (b - r) / s
-        : 4 + (r - g) / s
-    : 0
-  const rawHsl = [
-    60 * h < 0 ? 60 * h + 360 : 60 * h,
-    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
-    (100 * (2 * l - s)) / 2,
-  ]
-
-  return `hsl(${rawHsl[0].toFixed(0)}, ${rawHsl[1].toFixed(
-    0,
-  )}%, ${rawHsl[2].toFixed(0)}%)`
-}
-
 const convertMapColors = <T extends PaletteColor | AdditionalColor>(
   map: { [key in T]: RawColor },
   converter: (color: RawColor) => string,

docs/src/components/PaletteModal/PaletteModal.tsx

@@ -8,12 +8,10 @@ import {
   Dialog,
   RecordItem,
   modeVars,
-  rawColorToHSL,
-  rawColorToHex,
   rawColorToRGB,
-  rawColorToRGBA,
 } from '@ensdomains/thorin'
 import { match, P } from 'ts-pattern'
+import { rawColorToHex, rawColorToHSL, rawColorToRGBA } from '~/utils/color'
 
 const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
 

docs/src/utils/color.ts

@@ -0,0 +1,32 @@
+import type { RawColor } from '@ensdomains/thorin'
+
+export const rawColorToRGBA = (color: RawColor, opacity = 1): string =>
+  `rgba(${[...color, opacity].join(', ')})`
+
+export const rawColorToHex = (color: RawColor): string => {
+  return `#${color.map(c => c.toString(16)).join('')}`
+}
+
+export const rawColorToHSL = ([r, g, b]: RawColor): string => {
+  r /= 255
+  g /= 255
+  b /= 255
+  const l = Math.max(r, g, b)
+  const s = l - Math.min(r, g, b)
+  const h = s
+    ? l === r
+      ? (g - b) / s
+      : l === g
+        ? 2 + (b - r) / s
+        : 4 + (r - g) / s
+    : 0
+  const rawHsl = [
+    60 * h < 0 ? 60 * h + 360 : 60 * h,
+    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
+    (100 * (2 * l - s)) / 2,
+  ]
+
+  return `hsl(${rawHsl[0].toFixed(0)}, ${rawHsl[1].toFixed(
+    0,
+  )}%, ${rawHsl[2].toFixed(0)}%)`
+}