using color-mix

* using color-mix * remove colord
canoypa · Dec 18, 2023 · 630af78 · 630af78
1 parent 71b5522
commit 630af78
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
     "@types/node": "^20.9.5",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
-    "colord": "^2.9.3",
     "eslint": "^8.54.0",
     "eslint-config-next": "^14.0.3",
     "pandacss-preset-material-tokens": "^0.1.1",

diff --git a/panda.config.ts b/panda.config.ts
@@ -1,5 +1,4 @@
 import { defineConfig } from '@pandacss/dev'
-import { colord } from 'colord'
 import { presetMaterialTokens } from 'pandacss-preset-material-tokens'
 
 export default defineConfig({
@@ -72,14 +71,12 @@ export default defineConfig({
           const opacityToken = token.raw(`opacity.${opacity}`)?.value ?? opacity
 
           const colorValue = colorToken
-          const opacityValue = !isNaN(Number(opacityToken))
-            ? Number(opacityToken)
-            : 1
+          const opacityValue =
+            (!isNaN(Number(opacityToken)) ? Number(opacityToken) : 1) * 100
 
           return {
-            backgroundColor: colord(colorValue)
-              .alpha(opacityValue)
-              .toRgbString(),
+            // srgb がなにかわかってない
+            backgroundColor: `color-mix(in srgb, ${colorValue} ${opacityValue}%, transparent)`,
           }
         },
       },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml