Panda CSS (#83)

.gitignore

@@ -1,6 +1,9 @@
 # private
 .private/
 
+# generated
+/lib/generated/
+
 # env
 *.env
 

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "packages/pandacss-preset-material-tokens"]
+	path = packages/pandacss-preset-material-tokens
+	url = https://github.com/canoypa/pandacss-preset-material-tokens

package.json

@@ -4,12 +4,13 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "pnpm run prepare && next build",
     "start": "next start",
     "lint": "pnpm run lint:next & pnpm run lint:ts",
     "lint:next": "next lint",
     "lint:ts": "tsc --noEmit",
-    "format": "prettier --write \"src/**/*.{ts,tsx,css}\""
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "prepare": "panda codegen"
   },
   "browserslist": [
     "last 3 chrome major versions",
@@ -27,18 +28,18 @@
     "next": "^13.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-use": "^17.4.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss": "^3.3.3",
-    "tailwindcss-material3-plugin": "^0.2.1"
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
+    "@pandacss/dev": "^0.15.2",
+    "@types/color": "^3.0.4",
     "@types/node": "^18.18.4",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
-    "autoprefixer": "^10.4.16",
+    "color": "^4.2.3",
     "eslint": "^8.51.0",
     "eslint-config-next": "^13.5.4",
+    "pandacss-preset-material-tokens": "link:packages\\pandacss-preset-material-tokens",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2"

panda.config.ts

@@ -0,0 +1,89 @@
+import { defineConfig } from '@pandacss/dev'
+import Color from 'color'
+import { presetMaterialTokens } from 'pandacss-preset-material-tokens'
+
+export default defineConfig({
+  // The output directory for your css system
+  outdir: 'lib/generated/pandacss',
+
+  // Where to look for your css declarations
+  include: ['./src/**/*.{ts,tsx}'],
+  // Files to exclude
+  exclude: [],
+
+  // Whether to use css reset
+  preflight: true,
+
+  // Useful for theme customization
+  theme: {
+    extend: {
+      tokens: {
+        fonts: {
+          comfortaa: { value: 'var(--font-comfortaa)' },
+        },
+      },
+    },
+  },
+
+  conditions: {
+    extend: {
+      groupHorizontal: '.group:is([data-orientation=horizontal]) &',
+      groupVertical: '.group:is([data-orientation=vertical]) &',
+    },
+  },
+
+  globalCss: {
+    body: {
+      backgroundColor: 'dark.surface',
+      color: 'dark.on-surface',
+      fill: 'dark.on-surface',
+    },
+    ':focus-visible': {
+      outlineWidth: 2,
+      outlineStyle: 'solid',
+      outlineColor: 'dark.primary',
+      outlineOffset: 2,
+    },
+  },
+
+  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.raw(`colors.${color}`)?.value ?? color
+          const opacityToken = token.raw(`opacity.${opacity}`)?.value ?? opacity
+
+          const colorValue = colorToken
+          const opacityValue = !isNaN(Number(opacityToken))
+            ? Number(opacityToken)
+            : 1
+
+          return {
+            backgroundColor: Color(colorValue)
+              .alpha(opacityValue)
+              .rgb()
+              .toString(),
+          }
+        },
+      },
+    },
+  },
+
+  presets: [
+    presetMaterialTokens({
+      sourceColor: 0x8282f4,
+      customColors: [
+        { name: 'info', value: 0x42a5f5, blend: true },
+        { name: 'warning', value: 0xffee58, blend: true },
+        { name: 'success', value: 0x66bb6a, blend: true },
+      ],
+    }),
+  ],
+})