chore: integrate latest park ui preset

chakra-ui · Nov 18, 2024 · 7dcc65c · 7dcc65c
1 parent 8afb764
commit 7dcc65c
Show file tree

Hide file tree

Showing 32 changed files with 136 additions and 76 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "lefthook": "1.8.4",
     "turbo": "2.3.0",
     "typescript": "5.6.3",
-    "vercel": "39.0.2"
+    "vercel": "39.0.3"
   },
   "packageManager": "[email protected]",
   "trustedDependencies": ["@ark-ui/website"]

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -31,7 +31,7 @@
     "@sveltejs/package": "2.3.7",
     "@sveltejs/vite-plugin-svelte": "4.0.1",
     "publint": "0.2.12",
-    "svelte": "5.2.2",
+    "svelte": "5.2.3",
     "svelte-check": "4.0.9",
     "tslib": "2.8.1",
     "typescript": "5.6.3",

diff --git a/website/package.json b/website/package.json
@@ -17,7 +17,7 @@
     "@effect/schema": "0.75.5",
     "@icons-pack/react-simple-icons": "10.1.0",
     "@pandacss/dev": "0.48.0",
-    "@park-ui/panda-preset": "0.42.0",
+    "@park-ui/panda-preset": "0.43.0",
     "@prisma/client": "5.22.0",
     "@shikijs/transformers": "1.23.1",
     "@types/node": "22.9.0",

diff --git a/website/panda.config.ts b/website/panda.config.ts
@@ -1,13 +1,15 @@
 import { defineConfig } from '@pandacss/dev'
 import { createPreset } from '@park-ui/panda-preset'
+import sand from '@park-ui/panda-preset/colors/sand'
 import typographyPreset from 'pandacss-preset-typography'
+import { coral } from '~/coral'
 
 export default defineConfig({
   preflight: true,
   validation: 'none',
   presets: [
     '@pandacss/preset-base',
-    createPreset({ grayColor: 'sand' }),
+    createPreset({ grayColor: sand, accentColor: coral, radius: 'sm' }),
     typographyPreset({
       recipe: {
         sizes: ['base'],
@@ -94,29 +96,6 @@ export default defineConfig({
           code: { value: 'var(--font-roboto-mono), monospace' },
         },
       },
-      semanticTokens: {
-        colors: {
-          accent: {
-            1: { value: { _light: '#fff8f7', _dark: '#1c1412' } },
-            2: { value: { _light: '#ffefef', _dark: '#391a18' } },
-            3: { value: { _light: '#ffe5e4', _dark: '#55221e' } },
-            4: { value: { _light: '#ffdbda', _dark: '#722b25' } },
-            5: { value: { _light: '#ffd2d1', _dark: '#8e342b' } },
-            6: { value: { _light: '#ffc9c8', _dark: '#aa3d32' } },
-            7: { value: { _light: '#ffbeb8', _dark: '#c6493a' } },
-            8: { value: { _light: '#ffb2a8', _dark: '#e2503f' } },
-            9: { value: { _light: '#EB5E41', _dark: '#EB5E41' } },
-            10: { value: { _light: '#de5045', _dark: '#ef6b4e' } },
-            11: { value: { _light: '#c9453b', _dark: '#f47a5c' } },
-            12: { value: { _light: '#762d25', _dark: '#faa19b' } },
-
-            default: { value: '{colors.accent.9}' },
-            emphasized: { value: '{colors.accent.10}' },
-            fg: { value: 'white' },
-          },
-        },
-      },
-
       slotRecipes: {
         field: {
           className: 'field',

diff --git a/website/src/components/command-menu.tsx b/website/src/components/command-menu.tsx
@@ -113,7 +113,7 @@ export const CommandMenu = (props: Props) => {
                         >
                           <Stack gap="0">
                             <Text fontWeight="medium">{item.label}</Text>
-                            <Text textStyle="sm" fontWeight="medium" color="accent.default">
+                            <Text textStyle="sm" fontWeight="medium" color="colorPalette.default">
                               {item.category}
                             </Text>
                             <Text textStyle="sm" color="fg.muted" mt="0.5" lineClamp={2}>

diff --git a/website/src/components/data-attr-table.tsx b/website/src/components/data-attr-table.tsx
@@ -39,7 +39,7 @@ export const DataAttrTable = (props: Props) => {
           {Object.entries(properties).map(([key, value]) => (
             <Table.Row key={key}>
               <Table.Cell px="4" py="2">
-                <Code size="sm" color="accent.default">
+                <Code size="sm" color="colorPalette.default">
                   [{key}]
                 </Code>
               </Table.Cell>

diff --git a/website/src/components/emits-table.tsx b/website/src/components/emits-table.tsx
@@ -41,7 +41,7 @@ export const EmitsTable = (props: Props) => {
           {Object.entries(emits).map(([name, property]) => (
             <Table.Row key={name}>
               <Table.Cell width="36" px="4" py="2" verticalAlign="top">
-                <Code size="sm" color="accent.default">
+                <Code size="sm" color="colorPalette.default">
                   {name}
                 </Code>
               </Table.Cell>

diff --git a/website/src/components/examples-preview.tsx b/website/src/components/examples-preview.tsx
@@ -28,7 +28,7 @@ export const ExamplesPreview = async () => {
                 {relatedExample?.title}
               </Text>
               {relatedExample.accessLevel === 'paid' && (
-                <Icon width="3.5" height="3.5" color="accent.default">
+                <Icon width="3.5" height="3.5" color="colorPalette.default">
                   <SparklesIcon />
                 </Icon>
               )}
@@ -56,12 +56,12 @@ const link = cva({
     transitionProperty: 'border-color, box-shadow',
     transitionTimingFunction: 'default',
     _hover: {
-      borderColor: 'accent.default',
+      borderColor: 'colorPalette.default',
       boxShadow: '0 0 0 1px var(--colors-accent-default)',
     },
     _focusVisible: {
       outline: 'none',
-      borderColor: 'accent.default',
+      borderColor: 'colorPalette.default',
       boxShadow: '0 0 0 1px var(--colors-accent-default)',
     },
   },

diff --git a/website/src/components/logo.tsx b/website/src/components/logo.tsx
@@ -9,7 +9,7 @@ export const Logo = () => {
           fillRule="evenodd"
           clipRule="evenodd"
           d="M9.07455 11.5775C9.21266 11.1733 9.35082 10.7689 9.48904 10.3643C9.64944 9.8968 9.80558 9.44041 9.96157 8.98444L9.97953 8.93194C10.0327 8.77661 10.0858 8.62127 10.1388 8.46593C10.3495 7.84944 10.5601 7.23296 10.7744 6.6177C10.7763 6.61225 10.7782 6.60648 10.7802 6.60048C10.8003 6.54059 10.8278 6.45874 10.8969 6.45874C10.9642 6.45874 10.9919 6.53319 11.0132 6.59071C11.016 6.59812 11.0186 6.60525 11.0212 6.6119C11.084 6.77175 11.1405 6.93408 11.197 7.09641C11.2174 7.15501 11.2378 7.2136 11.2585 7.27208C11.418 7.72322 11.5776 8.17435 11.7372 8.62548C12.2869 10.1792 12.8365 11.7329 13.3858 13.2867C13.511 13.641 13.4621 13.707 13.0802 13.707C12.8417 13.707 12.6032 13.707 12.3647 13.707C11.3032 13.707 10.2418 13.707 9.18038 13.7077C9.13956 13.7078 9.09874 13.7121 9.05372 13.717C9.03136 13.7194 9.00796 13.7219 8.98301 13.7241L12.6148 24L12.6531 23.9938V19.5735H21.8947C21.887 19.5488 21.8805 19.5271 21.8745 19.5073C21.8632 19.4702 21.8541 19.4401 21.8437 19.4104C21.5622 18.6035 21.2807 17.7967 20.9991 16.9898C19.5087 12.7185 18.0183 8.44713 16.5307 4.17479C16.4829 4.0375 16.4169 3.99982 16.274 4C13.2227 4.00385 10.1713 4.00375 7.11986 4.00364C6.5828 4.00362 6.04573 4.0036 5.50866 4.00361L5.30127 4.00361L0 19.716L0.215452 19.716C0.631264 19.716 1.04708 19.7159 1.46289 19.7158C2.99697 19.7153 4.53106 19.7149 6.06512 19.7204C6.24167 19.7211 6.31584 19.6699 6.3727 19.5023C7.26885 16.8622 8.17034 14.2238 9.07455 11.5775ZM33.914 4C35.7783 4 37.5489 4.26803 38.8634 5.01851C40.2032 5.78342 41.0475 7.03904 41.0475 8.926C41.0475 10.1194 40.5583 11.1908 39.6868 11.9351C39.3349 12.2356 39.3611 12.9687 39.7035 13.28C39.7574 13.329 39.8092 13.3801 39.8587 13.4334C40.3694 13.9826 40.6094 14.7223 40.6094 15.6382V17.4035C40.6094 18.0283 40.614 18.5945 40.8783 19.1377C40.9775 19.3416 40.829 19.579 40.6023 19.579H35.2961C35.1816 19.579 35.0765 19.5156 35.023 19.4144C34.8005 18.9935 34.7109 18.3312 34.7109 17.4446V16.2746C34.7109 15.7898 34.6036 15.4616 34.3689 15.2452C34.1275 15.0226 33.6866 14.8578 32.8765 14.8578H29.7671C29.491 14.8578 29.2671 15.0817 29.2671 15.3578V19.079C29.2671 19.3551 29.0432 19.579 28.7671 19.579H23.8685C23.5924 19.579 23.3685 19.3551 23.3685 19.079V4.5C23.3685 4.22386 23.5924 4 23.8685 4H33.914ZM32.8304 10.9175C33.8079 10.9175 34.3605 10.7402 34.6671 10.4935C34.957 10.2602 35.0797 9.92042 35.0797 9.43917C35.0797 9.16287 35.0237 8.95713 34.9342 8.80069C34.8454 8.64532 34.7132 8.52021 34.5309 8.42032C34.1532 8.2134 33.5802 8.12503 32.8304 8.12503H29.7671C29.491 8.12503 29.2671 8.34889 29.2671 8.62503V10.4175C29.2671 10.6937 29.491 10.9175 29.7671 10.9175H32.8304ZM55.0708 4.13937C55.1639 4.04994 55.288 4 55.4171 4H61.6326C62.0938 4 62.3091 4.57119 61.9627 4.8756L55.9164 10.1885C55.7103 10.3697 55.6886 10.6831 55.868 10.8909L62.6548 18.7522C62.9345 19.0762 62.7043 19.579 62.2763 19.579H56.1211C55.9729 19.579 55.8323 19.5132 55.7373 19.3995L51.6631 14.5209C51.4793 14.3007 51.1483 14.2801 50.9385 14.4756L49.3549 15.9515C49.2534 16.0461 49.1958 16.1785 49.1958 16.3173V19.079C49.1958 19.3551 48.9719 19.579 48.6958 19.579H43.7972C43.5211 19.579 43.2972 19.3551 43.2972 19.079V4.5C43.2972 4.22386 43.5211 4 43.7972 4H48.6958C48.9719 4 49.1958 4.22386 49.1958 4.5V8.60801C49.1958 9.0486 49.7243 9.27382 50.0421 8.96863L55.0708 4.13937Z"
-          fill="accent.default"
+          fill="colorPalette.default"
         />
       </g>
       <defs>

diff --git a/website/src/components/marketing/hero.tsx b/website/src/components/marketing/hero.tsx
@@ -29,8 +29,8 @@ export const Hero = () => {
                 </Badge>
               </NextLink>
               <Heading as="h1" fontWeight="bold" textStyle={{ base: '4xl', md: '6xl' }}>
-                Fully <styled.span color="accent.default">customizable</styled.span> and{' '}
-                <styled.span color="accent.default">accessible</styled.span> UI components
+                Fully <styled.span color="colorPalette.default">customizable</styled.span> and{' '}
+                <styled.span color="colorPalette.default">accessible</styled.span> UI components
               </Heading>
             </Stack>
             <Text textStyle={{ base: 'lg', md: 'xl' }} color="fg.muted">

diff --git a/website/src/components/marketing/highlights.tsx b/website/src/components/marketing/highlights.tsx
@@ -56,7 +56,7 @@ export const Highlights = () => {
                 background="bg.default"
                 borderRadius="l2"
                 borderWidth="1px"
-                color="accent.default"
+                color="colorPalette.default"
                 flexShrink={0}
                 height={{ base: '10', md: '12' }}
                 width={{ base: '10', md: '12' }}

diff --git a/website/src/components/marketing/navbar.tsx b/website/src/components/marketing/navbar.tsx
@@ -31,7 +31,7 @@ export const Navbar = () => (
               fontWeight: 'medium',
               color: 'fg.emphasized',
               _hover: {
-                color: 'accent.default',
+                color: 'colorPalette.default',
               },
             })}
           >
@@ -44,7 +44,7 @@ export const Navbar = () => (
               fontWeight: 'medium',
               color: 'fg.emphasized',
               _hover: {
-                color: 'accent.default',
+                color: 'colorPalette.default',
               },
               display: {
                 base: 'none',
@@ -65,12 +65,12 @@ export const Navbar = () => (
               color: 'fg.emphasized',
               whiteSpace: 'nowrap',
               _hover: {
-                color: 'accent.default',
+                color: 'colorPalette.default',
               },
               '& svg': {
                 width: '4',
                 height: '4',
-                color: 'accent.default',
+                color: 'colorPalette.default',
               },
             })}
           >

diff --git a/website/src/components/marketing/showcases.tsx b/website/src/components/marketing/showcases.tsx
@@ -47,12 +47,12 @@ const link = cva({
     transitionTimingFunction: 'default',
     overflow: 'hidden',
     _hover: {
-      borderColor: 'accent.default',
+      borderColor: 'colorPalette.default',
       boxShadow: '0 0 0 1px var(--colors-accent-default)',
     },
     _focusVisible: {
       outline: 'none',
-      borderColor: 'accent.default',
+      borderColor: 'colorPalette.default',
       boxShadow: '0 0 0 1px var(--colors-accent-default)',
     },
   },

diff --git a/website/src/components/marketing/universe.tsx b/website/src/components/marketing/universe.tsx
@@ -19,7 +19,7 @@ export const Universe = () => {
       >
         <Container pt={{ base: '16', md: '40' }}>
           <Heading textAlign="center" textStyle="4xl" maxW="3xl" mx="auto" fontWeight="semibold">
-            Driven by <span className={css({ color: 'accent.default' })}>State Machines</span>
+            Driven by <span className={css({ color: 'colorPalette.default' })}>State Machines</span>
             <br /> to make your life easier.
           </Heading>
         </Container>

diff --git a/website/src/components/navigation/docs/docs-footer.tsx b/website/src/components/navigation/docs/docs-footer.tsx
@@ -66,12 +66,12 @@ const link = cva({
     transitionProperty: 'border-color, box-shadow',
     transitionTimingFunction: 'default',
     _hover: {
-      borderColor: 'accent.default',
+      borderColor: 'colorPalette.default',
       boxShadow: '0 0 0 1px var(--colors-accent-default)',
     },
     _focusVisible: {
       outline: 'none',
-      borderColor: 'accent.default',
+      borderColor: 'colorPalette.default',
       boxShadow: '0 0 0 1px var(--colors-accent-default)',
     },
   },

diff --git a/website/src/components/navigation/docs/docs-sidebar.tsx b/website/src/components/navigation/docs/docs-sidebar.tsx
@@ -52,8 +52,8 @@ export const DocsSidebar = (props: Props) => {
                                 data-status={item.status}
                                 css={{
                                   '&[data-status=new]': {
-                                    bg: 'accent.default',
-                                    color: 'accent.fg',
+                                    bg: 'colorPalette.default',
+                                    color: 'colorPalette.fg',
                                   },
                                 }}
                               >

diff --git a/website/src/components/navigation/examples/examples-footer.tsx b/website/src/components/navigation/examples/examples-footer.tsx
@@ -75,12 +75,12 @@ const link = cva({
     transitionProperty: 'border-color, box-shadow',
     transitionTimingFunction: 'default',
     _hover: {
-      borderColor: 'accent.default',
+      borderColor: 'colorPalette.default',
       boxShadow: '0 0 0 1px var(--colors-accent-default)',
     },
     _focusVisible: {
       outline: 'none',
-      borderColor: 'accent.default',
+      borderColor: 'colorPalette.default',
       boxShadow: '0 0 0 1px var(--colors-accent-default)',
     },
   },

diff --git a/website/src/components/navigation/examples/examples-sidebar.tsx b/website/src/components/navigation/examples/examples-sidebar.tsx
@@ -47,7 +47,7 @@ export const ExamplesSidebar = (props: Props) => {
                             <Flex gap="2" align="center">
                               <Text as="span">{item.title}</Text>
                               {item.accessLevel === 'paid' && (
-                                <Icon width="3.5" height="3.5" color="accent.default">
+                                <Icon width="3.5" height="3.5" color="colorPalette.default">
                                   <SparklesIcon />
                                 </Icon>
                               )}

diff --git a/website/src/components/navigation/mobile-navbar-links.tsx b/website/src/components/navigation/mobile-navbar-links.tsx
@@ -24,13 +24,13 @@ const link = cva({
     '& svg': {
       width: '4',
       height: '4',
-      color: 'accent.default',
+      color: 'colorPalette.default',
     },
     _hover: { color: 'fg.default' },
     _currentPage: {
-      color: 'accent.default',
+      color: 'colorPalette.default',
       _hover: {
-        color: 'accent.default',
+        color: 'colorPalette.default',
       },
     },
   },

diff --git a/website/src/components/navigation/navbar-links.tsx b/website/src/components/navigation/navbar-links.tsx
@@ -24,13 +24,13 @@ const link = cva({
     '& svg': {
       width: '3.5',
       height: '3.5',
-      color: 'accent.default',
+      color: 'colorPalette.default',
     },
     _hover: { color: 'fg.default' },
     _currentPage: {
-      color: 'accent.default',
+      color: 'colorPalette.default',
       _hover: {
-        color: 'accent.default',
+        color: 'colorPalette.default',
       },
     },
   },

diff --git a/website/src/components/navigation/sidebar.recipe.ts b/website/src/components/navigation/sidebar.recipe.ts
@@ -46,9 +46,9 @@ export const recipe = sva({
         color: 'fg.default',
       },
       _currentPage: {
-        color: 'accent.default',
+        color: 'colorPalette.default',
         _hover: {
-          color: 'accent.default',
+          color: 'colorPalette.default',
         },
       },
     },

diff --git a/website/src/components/page-header.tsx b/website/src/components/page-header.tsx
@@ -14,7 +14,7 @@ export const PageHeader = (props: PropsWithChildren<Props>) => {
   return (
     <Stack gap={{ base: '4', md: '6' }} align="center" textAlign="center">
       <Stack gap="3">
-        <Text fontSize={{ base: 'sm', md: 'md' }} fontWeight="medium" color="accent.default">
+        <Text fontSize={{ base: 'sm', md: 'md' }} fontWeight="medium" color="colorPalette.default">
           {subHeading}
         </Text>
         <Heading as="h1" textStyle={{ base: '4xl', md: '5xl' }}>

diff --git a/website/src/components/plus/faqs.tsx b/website/src/components/plus/faqs.tsx
@@ -72,7 +72,11 @@ export const Faqs = () => {
     <Stack gap={{ base: '12', lg: '24' }} direction={{ base: 'column', lg: 'row' }} width="full">
       <Stack gap={{ base: '4', md: '5' }} maxW={{ lg: 'md' }}>
         <Stack gap="3">
-          <Text color="accent.default" textStyle={{ base: 'sm', md: 'md' }} fontWeight="semibold">
+          <Text
+            color="colorPalette.default"
+            textStyle={{ base: 'sm', md: 'md' }}
+            fontWeight="semibold"
+          >
             Support
           </Text>
           <Heading size={{ base: '3xl', md: '4xl' }}>FAQs</Heading>

diff --git a/website/src/components/plus/pricing-card.tsx b/website/src/components/plus/pricing-card.tsx
@@ -46,7 +46,7 @@ export const PricingCard = (props: Props) => {
         <Stack gap="6">
           {license.features.map((feature, id) => (
             <Stack key={id} direction="row">
-              <Icon color="accent.default" size="lg" flexShrink={0}>
+              <Icon color="colorPalette.default" size="lg" flexShrink={0}>
                 <feature.icon />
               </Icon>
               <Text textStyle="sm" fontWeight="medium">

diff --git a/website/src/components/props-table.tsx b/website/src/components/props-table.tsx
@@ -42,7 +42,7 @@ export const PropsTable = (props: Props) => {
           {Object.entries(properties).map(([name, property]) => (
             <Table.Row key={name}>
               <Table.Cell width="36" px="4" py="2" verticalAlign="top">
-                <Code size="sm" color="accent.default">
+                <Code size="sm" color="colorPalette.default">
                   {name}
                 </Code>
               </Table.Cell>

diff --git a/website/src/components/section-header.tsx b/website/src/components/section-header.tsx
@@ -24,7 +24,11 @@ export const SectionHeader = (props: SectionHeaderProps) => {
     <Stack gap={{ base: '6', md: '8' }} {...rootProps}>
       <Stack gap={{ base: '4', md: '5' }}>
         <Stack gap={{ base: '2', md: '3' }}>
-          <Text textStyle={{ base: 'sm', md: 'md' }} fontWeight="medium" color="accent.default">
+          <Text
+            textStyle={{ base: 'sm', md: 'md' }}
+            fontWeight="medium"
+            color="colorPalette.default"
+          >
             {tagline}
           </Text>
           <Heading as="h2" textStyle={{ base: '3xl', md: '4xl' }}>

diff --git a/website/src/components/ui/primitives/tree-view.tsx b/website/src/components/ui/primitives/tree-view.tsx
@@ -64,7 +64,7 @@ export const treeView = sva({
       },
     },
     branchIndicator: {
-      color: 'accent.default',
+      color: 'colorPalette.default',
       transformOrigin: 'center',
       transitionDuration: 'normal',
       transitionProperty: 'transform',
@@ -106,11 +106,11 @@ export const treeView = sva({
         color: 'fg.default',
       },
       _selected: {
-        background: 'accent.a2',
-        color: 'accent.text',
+        background: 'colorPalette.a2',
+        color: 'colorPalette.text',
         _hover: {
-          background: 'accent.a2',
-          color: 'accent.text',
+          background: 'colorPalette.a2',
+          color: 'colorPalette.text',
         },
         _before: {
           content: '""',
@@ -119,7 +119,7 @@ export const treeView = sva({
           top: '0',
           width: '2px',
           height: 'full',
-          bg: 'accent.default',
+          bg: 'colorPalette.default',
           zIndex: '1',
         },
       },