feat: upgrade srjuggernaut-panda-preset and centralize theme config

bun.lock

@@ -6,7 +6,7 @@
       "name": "srjuggernaut_dev",
       "dependencies": {
         "@fontsource-variable/roboto": "^5.2.9",
-        "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.16",
+        "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.17",
         "astro": "^5.17.1",
       },
       "devDependencies": {
@@ -327,7 +327,7 @@
 
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
 
-    "@srjuggernaut-dev/srjuggernaut-panda-preset": ["@srjuggernaut-dev/srjuggernaut-panda-preset@0.0.16", "https://git.srjuggernaut.dev/api/packages/SrJuggernaut/npm/%40srjuggernaut-dev%2Fsrjuggernaut-panda-preset/-/0.0.16/srjuggernaut-panda-preset-0.0.16.tgz", { "peerDependencies": { "@pandacss/dev": "^1.4.3", "@radix-ui/colors": "3.0.0" } }, "sha512-QtBCBFf2PGfQPTfoNiHQmtNoeLoZil4kOs5/yaUJokYEXrIPOhesgGjKh18sNc/EsQALqpN6X74WYnDAnZjfkw=="],
+    "@srjuggernaut-dev/srjuggernaut-panda-preset": ["@srjuggernaut-dev/srjuggernaut-panda-preset@0.0.17", "https://git.srjuggernaut.dev/api/packages/SrJuggernaut/npm/%40srjuggernaut-dev%2Fsrjuggernaut-panda-preset/-/0.0.17/srjuggernaut-panda-preset-0.0.17.tgz", { "peerDependencies": { "@pandacss/dev": "^1.4.3", "@radix-ui/colors": "3.0.0" } }, "sha512-HCqXwcyZ1RLt3qeXxqT/DtqxlXKwVP5RaXivwc3HDNL0Qq1rSGzt+OAVtpFL/0pHo88BplccNieBnlhdo2XoQQ=="],
 
     "@ts-morph/common": ["@ts-morph/common@0.28.1", "", { "dependencies": { "minimatch": "^10.0.1", "path-browserify": "^1.0.1", "tinyglobby": "^0.2.14" } }, "sha512-W74iWf7ILp1ZKNYXY5qbddNaml7e9Sedv5lvU1V8lftlitkc9Pq1A+jlH23ltDgWYeZFFEqGCD1Ies9hqu3O+g=="],
 

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@fontsource-variable/roboto": "^5.2.9",
-    "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.16",
+    "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.17",
     "astro": "^5.17.1"
   },
   "devDependencies": {

panda.config.ts

@@ -1,14 +1,9 @@
 import { defineConfig } from '@pandacss/dev'
 import srJuggernautPandaPreset from '@srjuggernaut-dev/srjuggernaut-panda-preset'
+import themeConfig from '@/styles/theme'
+
 export default defineConfig({
-  presets: [
-    srJuggernautPandaPreset({
-      neutral: 'gray',
-      colorVariation: { dark: true, alpha: false, p3: false },
-      includeColors: ['teal', 'gray'],
-      semanticColors: { primary: 'teal' }
-    })
-  ],
+  presets: [srJuggernautPandaPreset(themeConfig)],
   preflight: true,
   include: ['./src/**/*.{ts,tsx,js,jsx,astro}'],
   exclude: [],

src/components/ui/button.astro

@@ -0,0 +1,22 @@
+---
+import { cx } from '@styled-system/css'
+import {
+  type ButtonVariantProps,
+  button as buttonRecipe
+} from '@styled-system/recipes/button'
+import type { HTMLAttributes } from 'astro/types'
+import type { MergeOmitting } from '@/types/utilities'
+
+type ButtonProps = MergeOmitting<HTMLAttributes<'button'>, ButtonVariantProps>
+
+export type Props = ButtonProps
+
+const { class: className, ...props } = Astro.props
+
+const [buttonRecipeArgs, ButtonProps] = buttonRecipe.splitVariantProps(props)
+const buttonClass = buttonRecipe(buttonRecipeArgs)
+---
+
+<button {...ButtonProps} class={cx(buttonClass, className)}>
+  <slot />
+</button>

src/styles/container.ts

@@ -0,0 +1,13 @@
+import { css } from '@styled-system/css'
+
+export const containerClass = css({
+  width: '100%',
+  marginInline: 'auto',
+  maxWidth: {
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})

src/styles/theme.ts

@@ -0,0 +1,19 @@
+import type { ThemeConfig } from '@srjuggernaut-dev/srjuggernaut-panda-preset'
+
+export const breakpoints = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  '2xl': 1400
+} satisfies ThemeConfig['breakpoints']
+
+export const themeConfig: ThemeConfig = {
+  neutral: 'gray',
+  colorVariation: { dark: true, alpha: false, p3: false },
+  includeColors: ['teal', 'gray'],
+  semanticColors: { primary: 'teal' },
+  breakpoints
+}
+
+export default themeConfig

src/types/utilities.ts

@@ -0,0 +1,5 @@
+export type MergeOmitting<ReplaceableType, ReplacerType> = Omit<
+  ReplaceableType,
+  keyof ReplacerType
+> &
+  ReplacerType