chore: update logic

entrypoints/injected/App.tsx

@@ -45,7 +45,7 @@ export default () => {
 
   return (
     <div
-      className={`fixed overflow-hidden text-xs text-#000 bg-#fff rounded border-1 border-#e5e5e5 border-solid shadow-md z-1000 antialiased h-auto transition-width ${minimized ? 'w-50' : 'w-80'}`}
+      className={`fixed overflow-hidden text-xs text-#000 bg-popover rounded border-1 border-#e5e5e5 border-solid shadow-md z-10 antialiased h-auto transition-width ${minimized ? 'w-50' : 'w-80'}`}
       style={{
         left: position[0],
         top: position[1],

entrypoints/injected/components/Code.tsx

@@ -148,7 +148,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
                     if (!selection.trim()) return
                     handleCopy(selection)()
                   }}
-                  className="px-4 h-10 flex items-center overflow-auto whitespace-nowrap font-['Roboto_Mono'] bg-#f5f5f5 cursor-text"
+                  className="px-4 h-10 flex items-center overflow-auto whitespace-nowrap font-['Roboto_Mono'] bg-#f5f5f5 cursor-text text-popover-foreground"
                   value={u.code}
                   readOnly
                 ></input>
@@ -158,7 +158,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
                     ref={inputRef}
                     rows={1}
                     autoComplete="off"
-                    className="px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] resize-none scrollbar-hide"
+                    className="px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] text-popover-foreground resize-none scrollbar-hide"
                     value={u.code}
                     readOnly
                     onSelect={(e) => {

entrypoints/injected/components/Colors.tsx

@@ -3,7 +3,7 @@ import { useAtom, useAtomValue } from 'jotai'
 import { memo, useEffect, useMemo, useState } from 'react'
 import { useCopyToClipboard } from 'usehooks-ts'
 
-import { figmaRGBToHex, figmaRGBToWebRGB } from '@/entrypoints/utils/convert'
+import { figmaRGBToHex, figmaRGBToHSL, figmaRGBToWebRGB } from '@/entrypoints/utils/convert'
 
 import { colorMode, currentSelection } from '../store'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '../ui/select'
@@ -18,7 +18,15 @@ export const Colors = memo((props: { minimized?: boolean }) => {
       paints
         .filter((p) => p.type === 'SOLID')
         .filter((p) => 'color' in p)
-        .map((p) => ('color' in p ? (mode === 'rgb' ? figmaRGBToWebRGB(p.color) : figmaRGBToHex(p.color)) : null))
+        .map((p) =>
+          'color' in p
+            ? mode === 'rgb'
+              ? figmaRGBToWebRGB(p.color)
+              : mode === 'hex'
+                ? figmaRGBToHex(p.color)
+                : figmaRGBToHSL(p.color)
+            : null,
+        )
         .filter((p) => p !== null),
     [mode, paints],
   )
@@ -46,20 +54,28 @@ export const Colors = memo((props: { minimized?: boolean }) => {
 
   const [showMore, setShowMore] = useState(false)
 
+  const formatColor = (c: any) => {
+    return Array.isArray(c)
+      ? mode === 'rgb'
+        ? `rgba(${c?.join(', ')})`
+        : `hsla(${c[0]}, ${c[1].toFixed(2).replace(/.00$/, '')}%, ${c[2].toFixed(2).replace(/.00$/, '')}%, ${c[3]})`
+      : `${c}`
+  }
+
   return (
     <div
       className={`${props.minimized ? 'hidden' : 'block'} p-4 border-t border-#e5e5e5 border-solid font-600 text-13px`}
     >
       <div className="flex items-center gap-2">
         <span className="flex-1">Colors</span>
 
-        <Select onValueChange={(e: 'rgb') => setMode(e)} defaultValue={mode}>
+        <Select onValueChange={(e: 'rgb') => setMode(e)} value={mode}>
           <SelectTrigger className="w-auto h-auto p-0 uppercase [&_span]:uppercase !shadow-[none] text-xs">
             <SelectValue placeholder={mode} className="uppercase" />
           </SelectTrigger>
           <SelectContent className="z-1002 border-1 border-solid border-muted">
             <SelectGroup>
-              {(['rgb', 'hex'] as const).map((m) => (
+              {(['rgb', 'hex', 'hsl'] as const).map((m) => (
                 <SelectItem key={m} value={m} className="w-30 uppercase text-xs">
                   {m}
                 </SelectItem>
@@ -77,19 +93,19 @@ export const Colors = memo((props: { minimized?: boolean }) => {
         {colors.slice(0, showMore ? colors.length : 3).map((c, index) => (
           <div
             className="shrink-0 h-7.5 flex items-center p-1 box-border hover:bg-#e5e5e5/50 rounded-sm cursor-pointer"
-            onClick={handleCopy(Array.isArray(c) ? `rgba(${c?.join(', ')})` : `${c}`)}
+            onClick={handleCopy(formatColor(c))}
           >
             <span
               className="w-4 h-4 rounded-sm border-1 border-muted border-solid"
               style={{
-                backgroundColor: Array.isArray(c) ? `rgba(${c?.join(', ')})` : `${c}`,
+                backgroundColor: formatColor(c),
               }}
             ></span>
             <input
               type="text"
               readOnly
-              value={Array.isArray(c) ? `rgba(${c?.join(', ')})` : `${c}`}
-              className="ml-4 font-400 text-xs font-['Inter'] bg-transparent"
+              value={formatColor(c)}
+              className="ml-4 w-full font-400 text-xs font-['Inter'] bg-transparent text-popover-foreground"
             />
           </div>
         ))}

entrypoints/injected/store/index.ts

@@ -11,4 +11,4 @@ export const exportExt = atomWithStorage<'png' | 'jpg' | 'svg'>('fubuki_export_e
 
 export const exportScale = atomWithStorage<1 | 1.5 | 2 | 3 | 4>('fubuki_export_scale', 3)
 
-export const colorMode = atomWithStorage<'rgb' | 'hex'>('fubuki_export_color_mode', 'hex')
+export const colorMode = atomWithStorage<'rgb' | 'hex' | 'hsl'>('fubuki_export_color_mode', 'hex')

entrypoints/utils/convert.ts

@@ -101,6 +101,50 @@ function hexToFigmaRGB(color: string): RGB | RGBA {
   }
 }
 
+export function figmaRGBToHSL(color: RGBA | RGB): number[] {
+  const a = 'a' in color ? Math.round(color['a'] * 100) / 100 : 1
+  const H = figmaRGBToHex(color)
+  // Convert hex to RGB first
+  let r: any = 0,
+    g: any = 0,
+    b: any = 0
+  if (H.length === 4) {
+    r = '0x' + H[1] + H[1]
+    g = '0x' + H[2] + H[2]
+    b = '0x' + H[3] + H[3]
+  } else if (H.length === 7) {
+    r = '0x' + H[1] + H[2]
+    g = '0x' + H[3] + H[4]
+    b = '0x' + H[5] + H[6]
+  }
+  // Then to HSL
+  r /= 255
+  g /= 255
+  b /= 255
+  let cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin,
+    h = 0,
+    s = 0,
+    l = 0
+
+  if (delta === 0) h = 0
+  else if (cmax === r) h = ((g - b) / delta) % 6
+  else if (cmax === g) h = (b - r) / delta + 2
+  else h = (r - g) / delta + 4
+
+  h = Math.round(h * 60)
+
+  if (h < 0) h += 360
+
+  l = (cmax + cmin) / 2
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
+  s = +(s * 100).toFixed(1)
+  l = +(l * 100).toFixed(1)
+
+  return [h, s, l, a]
+}
+
 export { figmaRGBToHex, figmaRGBToWebRGB, hexToFigmaRGB, webRGBToFigmaRGB }
 
 type webRGB = [number, number, number]