feat(theme): update custom render

zyyv · Jan 31, 2024 · c9d1d77 · c9d1d77
1 parent 4803ed2
commit c9d1d77
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -34,11 +34,11 @@ theme('#9955ff')
 
 // Will output:
 // {
+//   "50": "#faf7ff",
 //   "100": "#f5eeff",
 //   "200": "#e6d5ff",
 //   "300": "#d6bbff",
 //   "400": "#b888ff",
-//   "50": "#faf7ff",
 //   "500": "#9955ff",
 //   "600": "#8a4de6",
 //   "700": "#5c3399",
@@ -50,29 +50,51 @@ theme('#9955ff')
 
 And you can custom it with `themeOptions`.
 
+```ts
+export interface ThemeOptions {
+  /**
+   * Output color type
+   *
+   * @default same type as input
+   */
+  type?: ColorType
+
+  /**
+   * Custom render output color
+   *
+   * @param meta [name, color]
+   * @returns [CustomedName, CustomedColor]
+   */
+  render?: (meta: [string, string]) => [string, string]
+}
+```
+
 ```ts
 import { theme } from 'magic-color'
 
 theme('#9955ff', {
   type: 'rgb',
-  render: (c) => {
-    return c.replace(/rgb\((.*)\)/, '$1').replace(/,/g, '')
+  render: (meta) => {
+    return [
+      `--color-primary-${meta[0]}`,
+      meta[1].replace(/rgb\((.*)\)/, '$1').replace(/,/g, ''),
+    ]
   },
 })
 
 // Will output:
 // {
-//   "100": "245 238 255",
-//   "200": "230 213 255",
-//   "300": "214 187 255",
-//   "400": "184 136 255",
-//   "50": "250 247 255",
-//   "500": "153 85 255",
-//   "600": "138 77 230",
-//   "700": "92 51 153",
-//   "800": "69 38 115",
-//   "900": "46 26 77",
-//   "950": "31 17 51",
+//   "--color-primary-100": "245 238 255",
+//   "--color-primary-200": "230 213 255",
+//   "--color-primary-300": "214 187 255",
+//   "--color-primary-400": "184 136 255",
+//   "--color-primary-50": "250 247 255",
+//   "--color-primary-500": "153 85 255",
+//   "--color-primary-600": "138 77 230",
+//   "--color-primary-700": "92 51 153",
+//   "--color-primary-800": "69 38 115",
+//   "--color-primary-900": "46 26 77",
+//   "--color-primary-950": "31 17 51",
 // }
 ```
 

diff --git a/src/theme.ts b/src/theme.ts
@@ -27,10 +27,11 @@ export interface ThemeOptions {
 
   /**
    * Custom render output color
-   * @param color result color
-   * @returns
+   *
+   * @param meta [name, color]
+   * @returns [CustomedName, CustomedColor]
    */
-  render?: (color: string) => string
+  render?: (meta: [string, string]) => [string, string]
 }
 
 /**
@@ -69,24 +70,20 @@ export function theme(color: string, options: ThemeOptions = {}): Record<string,
   }
 
   const { type, render } = { ...defaultOptions, ...options } as Required<ThemeOptions>
-  const finnalRender = (color: string) => {
-    let c = ''
+  const finnalRender = (meta: [string, string]) => {
     switch (type) {
       case 'hsl':
-        c = rgbToHsl(color)
+        meta[1] = rgbToHsl(meta[1])
         break
       case 'hsb':
-        c = rgbToHsb(color)
+        meta[1] = rgbToHsb(meta[1])
         break
       case 'hex':
-        c = rgbToHex(color)
+        meta[1] = rgbToHex(meta[1])
         break
-      case 'rgb':
-      default:
-        c = color
     }
 
-    return render(c)
+    return render(meta)
   }
 
   const rgb = convertColor(color, 'rgb')
@@ -108,8 +105,12 @@ export function theme(color: string, options: ThemeOptions = {}): Record<string,
 
   const colors: Record<string, string> = {}
 
-  for (const [name, fn] of Object.entries(variants))
-    colors[name] = finnalRender(`rgb(${fn(components).join(', ')})`)
+  for (const [name, fn] of Object.entries(variants)) {
+    Object.assign(
+      colors,
+      Object.fromEntries([finnalRender([name, `rgb(${fn(components).join(', ')})`])]),
+    )
+  }
 
   return colors
 }
diff --git a/test/theme.test.ts b/test/theme.test.ts
@@ -43,22 +43,25 @@ describe('theme colors', () => {
   it('theme with render', () => {
     expect(theme(testColor, {
       type: 'rgb',
-      render: (c) => {
-        return c.replace(/rgb\((.*)\)/, '$1').replace(/,/g, '')
+      render: (meta) => {
+        return [
+          `--color-primary-${meta[0]}`,
+          meta[1].replace(/rgb\((.*)\)/, '$1').replace(/,/g, ''),
+        ]
       },
     })).toMatchInlineSnapshot(`
       {
-        "100": "245 238 255",
-        "200": "230 213 255",
-        "300": "214 187 255",
-        "400": "184 136 255",
-        "50": "250 247 255",
-        "500": "153 85 255",
-        "600": "138 77 230",
-        "700": "92 51 153",
-        "800": "69 38 115",
-        "900": "46 26 77",
-        "950": "31 17 51",
+        "--color-primary-100": "245 238 255",
+        "--color-primary-200": "230 213 255",
+        "--color-primary-300": "214 187 255",
+        "--color-primary-400": "184 136 255",
+        "--color-primary-50": "250 247 255",
+        "--color-primary-500": "153 85 255",
+        "--color-primary-600": "138 77 230",
+        "--color-primary-700": "92 51 153",
+        "--color-primary-800": "69 38 115",
+        "--color-primary-900": "46 26 77",
+        "--color-primary-950": "31 17 51",
       }
     `)
   })