From 630af78d9c890c99521cc2500d38d1d449e8842d Mon Sep 17 00:00:00 2001
From: Cano <developer.sasazono@gmail.com>
Date: Mon, 18 Dec 2023 17:40:10 +0900
Subject: [PATCH] using color-mix

* using color-mix

* remove colord
---
 package.json    |  1 -
 panda.config.ts | 11 ++++-------
 pnpm-lock.yaml  |  7 -------
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index fa95089..e9de51e 100644
--- 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
index 286ccd1..9e96ef6 100644
--- 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
index 170a5ea..3c4f04b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,9 +31,6 @@ devDependencies:
   '@types/react-dom':
     specifier: ^18.2.17
     version: 18.2.17
-  colord:
-    specifier: ^2.9.3
-    version: 2.9.3
   eslint:
     specifier: ^8.54.0
     version: 8.54.0
@@ -2086,10 +2083,6 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
-  /colord@2.9.3:
-    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
-    dev: true
-
   /comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
     dev: true