update (#107)

canoypa · Apr 15, 2024 · 7e66a4e · 7e66a4e
1 parent 991ea89
commit 7e66a4e
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 34 deletions.
diff --git a/panda.config.ts b/panda.config.ts
@@ -56,33 +56,6 @@ export default defineConfig({
     },
   },
 
-  utilities: {
-    extend: {
-      backgroundWithAlpha_EXPERIMENTAL: {
-        property: 'backgroundColor',
-        className: 'background-with-alpha-experimental',
-        values: { type: 'string' },
-        transform: (value, { token }) => {
-          if (!/.+\/.+/.test(value)) return {}
-
-          const [color, opacity] = value.split('/')
-
-          const colorToken = token(`colors.${color}`) ?? color
-          const opacityToken = token.raw(`opacity.${opacity}`)?.value ?? opacity
-
-          const colorValue = colorToken
-          const opacityValue =
-            (!isNaN(Number(opacityToken)) ? Number(opacityToken) : 1) * 100
-
-          return {
-            // srgb がなにかわかってない
-            backgroundColor: `color-mix(in srgb, ${colorValue} ${opacityValue}%, transparent)`,
-          }
-        },
-      },
-    },
-  },
-
   presets: [
     presetMaterialTokens({
       sourceColor: 0x8282f4,

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -17,7 +17,7 @@ const styles = {
       color: 'dark.primary',
       fill: 'dark.primary',
 
-      backgroundWithAlpha_EXPERIMENTAL: {
+      backgroundColor: {
         _hover: 'dark.primary/hover',
         _focusVisible: 'dark.primary/hover',
       },

diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
@@ -15,14 +15,14 @@ const styles = {
   root: css({
     p: 16,
     rounded: 'medium',
-    backgroundWithAlpha_EXPERIMENTAL: 'dark.primary/1',
+    backgroundColor: 'dark.primary/1',
     transitionProperty: 'background-color',
     transitionDuration: 'medium-1',
 
     '&[data-clickable=true]': { cursor: 'pointer' },
 
-    _hover: { backgroundWithAlpha_EXPERIMENTAL: 'dark.primary/2' },
-    _focusVisible: { backgroundWithAlpha_EXPERIMENTAL: 'dark.primary/2' },
+    _hover: { backgroundColor: 'dark.primary/2' },
+    _focusVisible: { backgroundColor: 'dark.primary/2' },
 
     _horizontal: {
       display: 'flex',

diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx
@@ -17,7 +17,7 @@ const styles = {
     transitionProperty: 'background-color',
     transitionDuration: 'medium-1',
 
-    backgroundWithAlpha_EXPERIMENTAL: {
+    backgroundColor: {
       _hover: 'dark.primary/hover',
       _focusVisible: 'dark.primary/hover',
     },

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -25,7 +25,7 @@ const styles = {
       outline: 'none',
 
       _backdrop: {
-        backgroundWithAlpha_EXPERIMENTAL: 'dark.surface/0.32',
+        backgroundColor: 'dark.surface/0.32',
         backdropFilter: 'blur(4px)',
       },
     },

diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
@@ -16,7 +16,7 @@ const styles = {
     textStyle: 'label-large',
     fontFamily: 'comfortaa',
 
-    backgroundWithAlpha_EXPERIMENTAL: {
+    backgroundColor: {
       _hover: 'dark.primary/hover',
       _focusVisible: 'dark.primary/hover',
     },