@uselets/ui 1.0.0 → 1.2.0

package/dist/skills/uselets-ui/SKILL.md

@@ -36,7 +36,6 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
   - `@uselets/ui/<module>`
   - `@uselets/ui/hooks/<hook-module>`
   - `@uselets/ui/utils`
-  - `@uselets/ui/styles.css`
   - `@uselets/ui/themes/max.css`
   - `@uselets/ui/themes/gomax.css`
   - `@uselets/ui/postcss.config`
@@ -47,12 +46,13 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
 - Prefer barrel imports for common app usage and readability.
 - Use module subpaths when you want a single module or when the user asks for the exact import path.
 - Use `@uselets/ui/hooks/<hook-module>` for dedicated hook subpaths, not legacy `@uselets/ui/use-*` paths.
-- Recommend importing one theme stylesheet once in the app entrypoint: `@uselets/ui/themes/max.css` for Max apps or `@uselets/ui/themes/gomax.css` for Gomax apps.
+- Recommend importing Tailwind, one theme stylesheet, and Inter once in the app global CSS. Use `@uselets/ui/themes/max.css` for Max apps or `@uselets/ui/themes/gomax.css` for Gomax apps.
+- Recommend `@source '../node_modules/@uselets/ui/dist';` when Tailwind needs to generate classes used by installed `@uselets/ui` components.
 - Treat `@uselets/ui/themes/gomax.css` as the GoMax Figma-backed palette, exposed through the same public color families as the Max theme.
-- Treat `@uselets/ui/styles.css` as a legacy compatibility alias for the Max theme.
 - Recommend `@fontsource-variable/inter` when matching the package typography setup.
 - Recommend `@uselets/ui/postcss.config` when the app needs the package PostCSS preset for Tailwind v4.
-- For tooltip-heavy apps, wrap the app with `TooltipProvider`.
+- For tooltip-heavy apps, wrap the app with `TooltipProvider`; use `Tooltip label={...}` for common trigger/content usage and `TooltipRoot` only when manual composition is needed.
+- Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
 - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
 - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
 
@@ -68,6 +68,6 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
 
 - "How do I install and configure `@uselets/ui` in my app?"
 - "Which `@uselets/ui` component should I use for this form?"
-- "Show me the correct import for `TooltipProvider` or `Sidebar`."
+- "Show me the correct import for `TooltipProvider`, `Tooltip`, `UnstyledButton`, or `Sidebar`."
 - "Inspect the installed version of `@uselets/ui` and tell me what `button` exports."
 - "Build this screen only with `@uselets/ui` components."

package/dist/skills/uselets-ui/references/component-catalog.md

@@ -62,7 +62,12 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Toaster`, `toast`
 - `tooltip`
   - Import path: `@uselets/ui/tooltip`
-  - Exports: `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`
+  - Exports: `TooltipProvider`, `Tooltip`, `TooltipRoot`, `TooltipTrigger`, `TooltipContent`
+  - Notes: `Tooltip` is the ergonomic wrapper with `label`, direct content positioning props, and `disabled`; use `TooltipRoot` with `TooltipTrigger` and `TooltipContent` for manual composition
+- `unstyled-button`
+  - Import path: `@uselets/ui/unstyled-button`
+  - Exports: `UnstyledButton`
+  - Notes: button primitive with reset styles, pointer cursor, accessible focus ring, default `type="button"`, and `asChild`
 
 ## Typography
 
@@ -103,6 +108,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Progress`
 - `skeleton`
   - Exports: `Skeleton`
+  - Notes: generic loading placeholder; `visible?: boolean` defaults to `true` and can wrap `children` to reserve their size while the skeleton is shown
 - `spinner`
   - Exports: `Spinner`, `spinnerVariants`
 
@@ -144,7 +150,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `NativeSelect`, `NativeSelectOptGroup`, `NativeSelectOption`
 - `combobox`
   - Exports: `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor`
-  - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; the trigger icon defaults to `IconSelector`
+  - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs
 - `dropzone`
   - Exports: `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone`
   - Notes: upload composition with validation, retry handling, status list UI, and optional `shiftOnMaxFiles`

package/dist/skills/uselets-ui/references/package-guide.md

@@ -90,8 +90,6 @@ Use `bun uselets skill --agent codex` or `bun uselets skill --agent claude` to i
   - utility helpers such as `cn` and `randomId`
 - `@uselets/ui/lib/color`
   - shared UI color list and type: `uiColors`, `UIColor`
-- `@uselets/ui/styles.css`
-  - legacy compatibility stylesheet equivalent to the Max theme
 - `@uselets/ui/themes/max.css`
   - Max theme tokens and component styles
 - `@uselets/ui/themes/gomax.css`
@@ -101,14 +99,15 @@ Use `bun uselets skill --agent codex` or `bun uselets skill --agent claude` to i
 
 ## Base setup
 
-Import one package theme once near the app entrypoint:
+Import Tailwind, one package theme, and Inter once in the app global stylesheet:
 
-```tsx
-import '@uselets/ui/themes/max.css'
-import '@fontsource-variable/inter'
+```css
+@import 'tailwindcss';
+@import '@uselets/ui/themes/max.css';
+@import '@fontsource-variable/inter';
 ```
 
-For GoMax apps, import `@uselets/ui/themes/gomax.css` instead. The legacy `@uselets/ui/styles.css` entrypoint remains available as a Max-theme alias.
+For GoMax apps, import `@uselets/ui/themes/gomax.css` instead.
 
 If the app needs Tailwind v4 PostCSS setup, reuse the package preset:
 
@@ -116,10 +115,10 @@ If the app needs Tailwind v4 PostCSS setup, reuse the package preset:
 export { default } from '@uselets/ui/postcss.config'
 ```
 
-Make sure Tailwind itself is imported in the app stylesheet:
+When the app uses installed `@uselets/ui` components, add a Tailwind source directive so component classes from the package are generated:
 
 ```css
-@import 'tailwindcss';
+@source '../node_modules/@uselets/ui/dist';
 ```
 
 ## Typography scale
@@ -145,13 +144,14 @@ The Max theme uses Inter as `font-sans` and overrides Tailwind CSS text size uti
 Use these patterns:
 
 ```tsx
-import { Alert, Button, cn, randomId } from '@uselets/ui'
+import { Alert, Button, UnstyledButton, cn, randomId } from '@uselets/ui'
 import type { UIColor } from '@uselets/ui'
 import { Dialog } from '@uselets/ui/dialog'
 import { useIsMobile } from '@uselets/ui/hooks/use-mobile'
 import { useDisclosure } from '@uselets/ui/hooks/use-disclosure'
 import { useLocalStorage } from '@uselets/ui/hooks/use-local-storage'
 import { Toaster, toast } from '@uselets/ui/sonner'
+import { UnstyledButton as UnstyledButtonSubpath } from '@uselets/ui/unstyled-button'
 ```
 
 Guidance:
@@ -184,6 +184,10 @@ Use these package-level helpers when relevant:
 
 - `TooltipProvider`
   - Wrap the app or feature root when using tooltips broadly.
+- `Tooltip`
+  - Use `label` for common trigger/content usage; pass positioning props such as `side`, `align`, and `sideOffset` directly.
+- `TooltipRoot`
+  - Use with `TooltipTrigger` and `TooltipContent` when manual composition or custom structure is needed.
 - `Toaster`
   - Mount near the app root before calling `toast(...)`.
 - `ThemeProvider`
@@ -192,11 +196,19 @@ Use these package-level helpers when relevant:
 Examples:
 
 ```tsx
-import { TooltipProvider } from '@uselets/ui/tooltip'
+import { Tooltip, TooltipProvider } from '@uselets/ui/tooltip'
 
 export function AppRoot({ children }: { children: React.ReactNode }) {
   return <TooltipProvider delayDuration={200}>{children}</TooltipProvider>
 }
+
+export function SaveButton() {
+  return (
+    <Tooltip label="Save changes" side="bottom">
+      <button type="button">Save</button>
+    </Tooltip>
+  )
+}
 ```
 
 ```tsx

package/dist/skills/uselets-ui/scripts/print-public-api.mjs

@@ -160,7 +160,6 @@ console.log('- barrel: `@uselets/ui`')
 console.log('- component subpaths: `@uselets/ui/*`')
 console.log('- hook subpaths: `@uselets/ui/hooks/*`')
 console.log('- utility helpers: `@uselets/ui/utils`')
-console.log('- styles: `@uselets/ui/styles.css` (legacy Max theme alias)')
 console.log('- Max theme: `@uselets/ui/themes/max.css`')
 console.log('- Gomax theme: `@uselets/ui/themes/gomax.css`')
 console.log('- PostCSS preset: `@uselets/ui/postcss.config`')

package/dist/styles/base.css

@@ -0,0 +1,13 @@
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background font-sans text-base text-foreground antialiased;
+  }
+
+  html {
+    @apply font-sans;
+  }
+}

package/dist/styles/globals.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "./theme.css";
+@import "./max.css";
+@import "./base.css";
+
+@source "../../../../apps/**/*.{ts,tsx}";
+@source "../../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";

package/dist/styles/gomax.css

@@ -0,0 +1,202 @@
+:root {
+  /* palette tokens */
+  --primary-50: oklch(0.967 0.011 269.55); /* #F1F4FC */
+  --primary-100: oklch(0.934 0.021 268.428); /* #E3E9F8 */
+  --primary-200: oklch(0.859 0.043 270.875); /* #C6D0EE */
+  --primary-300: oklch(0.752 0.078 272.162); /* #9DACE1 */
+  --primary-400: oklch(0.647 0.104 271.342); /* #778ACE */
+  --primary-500: oklch(0.534 0.167 269.617); /* #4862CC */
+  --primary-600: oklch(0.423 0.174 269.851); /* #2C3EAB */
+  --primary-700: oklch(0.353 0.143 272.141); /* #252E84 */
+  --primary-800: oklch(0.286 0.111 274.807); /* #1D2060 */
+  --primary-900: oklch(0.23 0.08 278.141); /* #161641 */
+  --primary-950: oklch(0.192 0.053 281.835); /* #11102B */
+
+  --brand-50: oklch(0.974 0.01 9.532); /* #FDF4F5 */
+  --brand-100: oklch(0.931 0.032 29.76); /* #FDE1DC */
+  --brand-200: oklch(0.791 0.122 33.999); /* #FF9D86 */
+  --brand-300: oklch(0.734 0.166 34.994); /* #FF7D5D */
+  --brand-400: oklch(0.708 0.187 34.708); /* #FF6C49 */
+  --brand-500: oklch(0.686 0.205 34.607); /* #FF5C35 */
+  --brand-600: oklch(0.64 0.192 34.625); /* #E9532F */
+  --brand-700: oklch(0.585 0.175 34.659); /* #CE4929 */
+  --brand-800: oklch(0.537 0.163 34.517); /* #B93F22 */
+  --brand-900: oklch(0.471 0.141 34.467); /* #9A341C */
+  --brand-950: oklch(0.401 0.118 34.378); /* #7B2916 */
+
+  --gray-50: oklch(0.981 0.005 247.876); /* #F6F9FC */
+  --gray-100: oklch(0.952 0.01 247.935); /* #EAF0F6 */
+  --gray-200: oklch(0.915 0.016 247.999); /* #DBE4ED */
+  --gray-300: oklch(0.821 0.028 244.747); /* #B6C7D6 */
+  --gray-400: oklch(0.744 0.039 247.107); /* #99AFC4 */
+  --gray-500: oklch(0.646 0.052 249.575); /* #7691AD */
+  --gray-600: oklch(0.532 0.063 251.386); /* #516F90 */
+  --gray-700: oklch(0.454 0.055 249.121); /* #3E5974 */
+  --gray-800: oklch(0.313 0.037 246.164); /* #213343 */
+  --gray-900: oklch(0.266 0.03 245.1); /* #192733 */
+  --gray-950: oklch(0.216 0.021 243.075); /* #111B23 */
+
+  --zinc-50: oklch(0.979 0 0); /* #F8F8F8 */
+  --zinc-100: oklch(0.952 0 0); /* #EFEFEF */
+  --zinc-200: oklch(0.885 0 0); /* #D9D9D9 */
+  --zinc-300: oklch(0.798 0 0); /* #BDBDBD */
+  --zinc-400: oklch(0.68 0 0); /* #989898 */
+  --zinc-500: oklch(0.586 0 0); /* #7C7C7C */
+  --zinc-600: oklch(0.507 0 0); /* #656565 */
+  --zinc-700: oklch(0.394 0 0); /* #464646 */
+  --zinc-800: oklch(0.305 0.002 106.504); /* #2F2F2E */
+  --zinc-900: oklch(0.207 0.004 345.603); /* #191718 */
+  --zinc-950: oklch(0.155 0.003 67.627); /* #0D0C0B */
+
+  --red-50: oklch(0.968 0.013 5.8); /* #FDF1F3 */
+  --red-100: oklch(0.936 0.03 7.525); /* #FDE2E6 */
+  --red-200: oklch(0.862 0.071 9.896); /* #FCBFC7 */
+  --red-300: oklch(0.755 0.145 13.73); /* #FD8694 */
+  --red-400: oklch(0.673 0.211 19.364); /* #FD4D5F */
+  --red-500: oklch(0.615 0.224 22.558); /* #ED2D40 */
+  --red-600: oklch(0.538 0.21 26.258); /* #CC1420 */
+  --red-700: oklch(0.44 0.165 25.779); /* #99151B */
+  --red-800: oklch(0.349 0.122 24.328); /* #6C1317 */
+  --red-900: oklch(0.266 0.084 22.977); /* #460F11 */
+  --red-950: oklch(0.211 0.055 21.251); /* #2D0C0D */
+
+  --yellow-50: oklch(0.988 0.014 88.681); /* #FFFBF1 */
+  --yellow-100: oklch(0.974 0.029 89.569); /* #FEF6E1 */
+  --yellow-200: oklch(0.944 0.059 84.511); /* #FFEAC0 */
+  --yellow-300: oklch(0.885 0.104 78.009); /* #FFD189 */
+  --yellow-400: oklch(0.827 0.142 71.92); /* #FFB652 */
+  --yellow-500: oklch(0.798 0.158 67.669); /* #FFA736 */
+  --yellow-600: oklch(0.709 0.171 55.903); /* #EF7F0A */
+  --yellow-700: oklch(0.564 0.138 53.071); /* #B25A0E */
+  --yellow-800: oklch(0.433 0.1 52.359); /* #7A3E11 */
+  --yellow-900: oklch(0.324 0.069 50.591); /* #4F280F */
+  --yellow-950: oklch(0.249 0.046 47.281); /* #331A0D */
+
+  --green-50: oklch(0.98 0.003 145.55); /* #F7F9F7 */
+  --green-100: oklch(0.957 0.012 145.482); /* #ECF3EC */
+  --green-200: oklch(0.912 0.032 143.849); /* #D6E8D5 */
+  --green-300: oklch(0.838 0.073 143.695); /* #AED7AC */
+  --green-400: oklch(0.767 0.12 142.694); /* #85C780 */
+  --green-500: oklch(0.675 0.165 142.096); /* #52AF4A */
+  --green-600: oklch(0.567 0.13 141.644); /* #45893D */
+  --green-700: oklch(0.467 0.097 140.77); /* #396731 */
+  --green-800: oklch(0.366 0.066 140.101); /* #2B4725 */
+  --green-900: oklch(0.281 0.041 139.471); /* #1E2E1A */
+  --green-950: oklch(0.222 0.026 138.012); /* #151E12 */
+
+  --blue-50: oklch(0.976 0.002 247.839); /* #F6F7F8 */
+  --blue-100: oklch(0.948 0.006 255.476); /* #EBEEF2 */
+  --blue-200: oklch(0.891 0.018 240.018); /* #D1DDE6 */
+  --blue-300: oklch(0.8 0.044 240.87); /* #A5C2D8 */
+  --blue-400: oklch(0.715 0.077 240.176); /* #76AACF */
+  --blue-500: oklch(0.622 0.113 242.424); /* #408EC5 */
+  --blue-600: oklch(0.538 0.097 239.26); /* #2F75A0 */
+  --blue-700: oklch(0.452 0.072 234.642); /* #275C78 */
+  --blue-800: oklch(0.363 0.05 228.7); /* #1E4353 */
+  --blue-900: oklch(0.282 0.032 222.574); /* #162D35 */
+  --blue-950: oklch(0.224 0.021 217.756); /* #101E22 */
+
+  --indigo-50: oklch(0.966 0.012 301.287); /* #F5F2FB */
+  --indigo-100: oklch(0.929 0.028 299.539); /* #EAE4F8 */
+  --indigo-200: oklch(0.851 0.062 297.56); /* #D2C6F2 */
+  --indigo-300: oklch(0.743 0.087 295.69); /* #B0A1DD */
+  --indigo-400: oklch(0.611 0.153 291.363); /* #866FD7 */
+  --indigo-500: oklch(0.559 0.193 287.911); /* #7358DC */
+  --indigo-600: oklch(0.42 0.218 279.213); /* #4026BE */
+  --indigo-700: oklch(0.351 0.17 279.238); /* #30218F */
+  --indigo-800: oklch(0.286 0.122 280.262); /* #231B64 */
+  --indigo-900: oklch(0.229 0.079 281.288); /* #181540 */
+  --indigo-950: oklch(0.19 0.049 282.432); /* #111029 */
+
+  --pink-50: oklch(0.969 0.016 341.389); /* #FDF1F8 */
+  --pink-100: oklch(0.944 0.027 337.065); /* #F9E6F3 */
+  --pink-200: oklch(0.903 0.045 338.704); /* #F4D4E9 */
+  --pink-300: oklch(0.778 0.085 337.731); /* #DBA2CA */
+  --pink-400: oklch(0.68 0.145 338.806); /* #D172B6 */
+  --pink-500: oklch(0.624 0.191 340.354); /* #CE4EAA */
+  --pink-600: oklch(0.532 0.19 339.952); /* #AE2F8E */
+  --pink-700: oklch(0.436 0.148 337.368); /* #81276E */
+  --pink-800: oklch(0.345 0.103 335.104); /* #58204E */
+  --pink-900: oklch(0.266 0.065 332.23); /* #371833 */
+  --pink-950: oklch(0.211 0.036 331.312); /* #221220 */
+
+  /* gradient tokens */
+  --gradient-primary: linear-gradient(
+    87.14044870021029deg,
+    oklch(0.534 0.167 269.617) 0% /* #4862CC */,
+    oklch(0.71 0.167 13.3) 100% /* #F76F83 */
+  );
+
+  /* semantic tokens */
+  --background: var(--gray-50);
+  --foreground: var(--gray-900);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--gray-900);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--gray-900);
+  --primary: var(--primary-500);
+  --primary-foreground: oklch(1 0 0);
+  --brand: var(--brand-500);
+  --brand-foreground: oklch(1 0 0);
+  --secondary: var(--gray-100);
+  --secondary-foreground: var(--gray-900);
+  --muted: var(--gray-100);
+  --muted-foreground: var(--gray-600);
+  --accent: var(--gray-200);
+  --accent-foreground: var(--gray-900);
+  --destructive: var(--red-500);
+  --destructive-foreground: oklch(1 0 0);
+  --border: var(--gray-200);
+  --input: var(--gray-200);
+  --ring: var(--primary-300);
+  --chart-1: var(--primary-500);
+  --chart-2: var(--green-500);
+  --chart-3: var(--blue-500);
+  --chart-4: var(--indigo-500);
+  --chart-5: var(--pink-500);
+  --sidebar: var(--gray-100);
+  --sidebar-foreground: var(--gray-900);
+  --sidebar-primary: var(--primary-500);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: var(--gray-200);
+  --sidebar-accent-foreground: var(--gray-900);
+  --sidebar-border: var(--gray-200);
+  --sidebar-ring: var(--primary-300);
+}
+
+.dark {
+  --background: var(--zinc-950);
+  --foreground: var(--zinc-50);
+  --card: var(--zinc-900);
+  --card-foreground: var(--zinc-50);
+  --popover: var(--zinc-900);
+  --popover-foreground: var(--zinc-50);
+  --primary: var(--primary-400);
+  --primary-foreground: oklch(1 0 0);
+  --brand: var(--brand-400);
+  --brand-foreground: oklch(1 0 0);
+  --secondary: var(--zinc-800);
+  --secondary-foreground: var(--zinc-50);
+  --muted: var(--zinc-800);
+  --muted-foreground: var(--zinc-400);
+  --accent: var(--zinc-700);
+  --accent-foreground: var(--zinc-50);
+  --destructive: var(--red-400);
+  --destructive-foreground: oklch(1 0 0);
+  --border: var(--zinc-700);
+  --input: var(--zinc-600);
+  --ring: var(--primary-400);
+  --chart-1: var(--primary-400);
+  --chart-2: var(--green-400);
+  --chart-3: var(--blue-400);
+  --chart-4: var(--indigo-400);
+  --chart-5: var(--pink-300);
+  --sidebar: var(--zinc-900);
+  --sidebar-foreground: var(--zinc-50);
+  --sidebar-primary: var(--primary-400);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: var(--zinc-700);
+  --sidebar-accent-foreground: var(--zinc-50);
+  --sidebar-border: var(--zinc-700);
+  --sidebar-ring: var(--primary-400);
+}

package/dist/styles/max.css

@@ -0,0 +1,203 @@
+:root {
+  /* palette tokens */
+  --primary-50: oklch(0.969 0.015 17.418); /* #FFF1F1 */
+  --primary-100: oklch(0.932 0.034 17.784); /* #FFE0E0 */
+  --primary-200: oklch(0.857 0.078 17.808); /* #FFBCBD */
+  --primary-300: oklch(0.759 0.144 17.923); /* #FF888E */
+  --primary-400: oklch(0.678 0.201 19.93); /* #FB5562 */
+  --primary-500: oklch(0.644 0.226 23.049); /* #F93846 */
+  --primary-600: oklch(0.576 0.226 25.087); /* #E01429 */
+  --primary-700: oklch(0.507 0.2 24.989); /* #BD0E21 */
+  --primary-800: oklch(0.439 0.169 24.647); /* #9A0F1C */
+  --primary-900: oklch(0.381 0.142 23.935); /* #7D1019 */
+  --primary-950: oklch(0.248 0.092 23.922); /* #430509 */
+
+  --brand-50: oklch(0.973 0.011 39.44); /* #FDF4F1 */
+  --brand-100: oklch(0.93 0.033 38.63); /* #FDE1D8 */
+  --brand-200: oklch(0.864 0.072 39.865); /* #FDC3AF */
+  --brand-300: oklch(0.794 0.121 39); /* #FEA081 */
+  --brand-400: oklch(0.739 0.164 38.91); /* #FF8157 */
+  --brand-500: oklch(0.686 0.205 34.607); /* #FF5C35 */
+  --brand-600: oklch(0.637 0.213 35.811); /* #F0470F */
+  --brand-700: oklch(0.537 0.172 36.579); /* #BC3B10 */
+  --brand-800: oklch(0.423 0.128 37.154); /* #852C0F */
+  --brand-900: oklch(0.309 0.087 38.386); /* #531C09 */
+  --brand-950: oklch(0.216 0.051 40.042); /* #2D1006 */
+
+  --gray-50: oklch(1 0 0); /* #FFFFFF */
+  --gray-100: oklch(0.981 0.005 247.876); /* #F6F9FC */
+  --gray-200: oklch(0.952 0.01 247.935); /* #EAF0F6 */
+  --gray-300: oklch(0.915 0.016 247.999); /* #DBE4ED */
+  --gray-400: oklch(0.821 0.028 244.747); /* #B6C7D6 */
+  --gray-500: oklch(0.744 0.039 247.107); /* #99AFC4 */
+  --gray-600: oklch(0.646 0.052 249.575); /* #7691AD */
+  --gray-700: oklch(0.532 0.063 251.386); /* #516F90 */
+  --gray-800: oklch(0.454 0.055 249.121); /* #3E5974 */
+  --gray-900: oklch(0.313 0.037 246.164); /* #213343 */
+  --gray-950: oklch(0.266 0.03 245.1); /* #192733 */
+
+  --zinc-50: oklch(1 0 0); /* #FFFFFF */
+  --zinc-100: oklch(0.979 0 0); /* #F8F8F8 */
+  --zinc-200: oklch(0.952 0 0); /* #EFEFEF */
+  --zinc-300: oklch(0.885 0 0); /* #D9D9D9 */
+  --zinc-400: oklch(0.798 0 0); /* #BDBDBD */
+  --zinc-500: oklch(0.68 0 0); /* #989898 */
+  --zinc-600: oklch(0.586 0 0); /* #7C7C7C */
+  --zinc-700: oklch(0.507 0 0); /* #656565 */
+  --zinc-800: oklch(0.394 0 0); /* #464646 */
+  --zinc-900: oklch(0.305 0.002 106.504); /* #2F2F2E */
+  --zinc-950: oklch(0.207 0.004 48.535); /* #191716 */
+
+  --red-50: oklch(0.974 0.004 359.996); /* #F9F5F6 */
+  --red-100: oklch(0.928 0.016 12.798); /* #F2E3E4 */
+  --red-200: oklch(0.84 0.05 11.897); /* #E9BEC2 */
+  --red-300: oklch(0.741 0.105 13.147); /* #E58F98 */
+  --red-400: oklch(0.647 0.181 17.734); /* #E75564 */
+  --red-500: oklch(0.585 0.218 23.835); /* #E02535 */
+  --red-600: oklch(0.524 0.189 22.069); /* #BF2434 */
+  --red-700: oklch(0.45 0.161 21.978); /* #9B1C29 */
+  --red-800: oklch(0.368 0.128 20.619); /* #741520 */
+  --red-900: oklch(0.284 0.093 19.546); /* #4E0F16 */
+  --red-950: oklch(0.207 0.058 20.395); /* #2D0A0C */
+
+  --yellow-50: oklch(0.988 0.014 88.681); /* #FFFBF1 */
+  --yellow-100: oklch(0.974 0.029 89.569); /* #FEF6E1 */
+  --yellow-200: oklch(0.944 0.059 84.511); /* #FFEAC0 */
+  --yellow-300: oklch(0.885 0.104 78.009); /* #FFD189 */
+  --yellow-400: oklch(0.827 0.142 71.92); /* #FFB652 */
+  --yellow-500: oklch(0.798 0.158 67.669); /* #FFA736 */
+  --yellow-600: oklch(0.709 0.171 55.903); /* #EF7F0A */
+  --yellow-700: oklch(0.564 0.138 53.071); /* #B25A0E */
+  --yellow-800: oklch(0.433 0.1 52.359); /* #7A3E11 */
+  --yellow-900: oklch(0.324 0.069 50.591); /* #4F280F */
+  --yellow-950: oklch(0.249 0.046 47.281); /* #331A0D */
+
+  --green-50: oklch(0.98 0.003 145.55); /* #F7F9F7 */
+  --green-100: oklch(0.957 0.012 145.482); /* #ECF3EC */
+  --green-200: oklch(0.912 0.032 143.849); /* #D6E8D5 */
+  --green-300: oklch(0.838 0.073 143.695); /* #AED7AC */
+  --green-400: oklch(0.767 0.12 142.694); /* #85C780 */
+  --green-500: oklch(0.675 0.165 142.096); /* #52AF4A */
+  --green-600: oklch(0.567 0.13 141.644); /* #45893D */
+  --green-700: oklch(0.467 0.097 140.77); /* #396731 */
+  --green-800: oklch(0.366 0.066 140.101); /* #2B4725 */
+  --green-900: oklch(0.281 0.041 139.471); /* #1E2E1A */
+  --green-950: oklch(0.222 0.026 138.012); /* #151E12 */
+
+  --blue-50: oklch(0.976 0.002 247.839); /* #F6F7F8 */
+  --blue-100: oklch(0.948 0.006 255.476); /* #EBEEF2 */
+  --blue-200: oklch(0.891 0.018 240.018); /* #D1DDE6 */
+  --blue-300: oklch(0.8 0.044 240.87); /* #A5C2D8 */
+  --blue-400: oklch(0.715 0.077 240.176); /* #76AACF */
+  --blue-500: oklch(0.622 0.113 242.424); /* #408EC5 */
+  --blue-600: oklch(0.538 0.097 239.26); /* #2F75A0 */
+  --blue-700: oklch(0.452 0.072 234.642); /* #275C78 */
+  --blue-800: oklch(0.363 0.05 228.7); /* #1E4353 */
+  --blue-900: oklch(0.282 0.032 222.574); /* #162D35 */
+  --blue-950: oklch(0.224 0.021 217.756); /* #101E22 */
+
+  --indigo-50: oklch(0.969 0.009 286.225); /* #F4F4FB */
+  --indigo-100: oklch(0.924 0.026 283.478); /* #E3E4F7 */
+  --indigo-200: oklch(0.845 0.057 282.903); /* #C6C8F1 */
+  --indigo-300: oklch(0.737 0.105 281.065); /* #9EA2EB */
+  --indigo-400: oklch(0.624 0.155 278.421); /* #747AE2 */
+  --indigo-500: oklch(0.532 0.184 276.037); /* #545AD4 */
+  --indigo-600: oklch(0.46 0.163 275.857); /* #4348B0 */
+  --indigo-700: oklch(0.383 0.14 275.071); /* #31368C */
+  --indigo-800: oklch(0.3 0.109 275.563); /* #212463 */
+  --indigo-900: oklch(0.225 0.073 276.527); /* #14163D */
+  --indigo-950: oklch(0.172 0.043 278.782); /* #0C0D22 */
+
+  --pink-50: oklch(0.893 0.047 335.372);
+  --pink-100: oklch(0.839 0.076 336.368);
+  --pink-200: oklch(0.732 0.133 338.361);
+  --pink-300: oklch(0.624 0.191 340.354);
+  --pink-400: oklch(0.581 0.205 342.54);
+  --pink-500: oklch(0.538 0.22 344.727);
+  --pink-600: oklch(0.478 0.195 344.211);
+  --pink-700: oklch(0.418 0.17 343.696);
+  --pink-800: oklch(0.358 0.144 343.18);
+  --pink-900: oklch(0.298 0.119 342.664);
+  --pink-950: oklch(0.268 0.106 342.406);
+
+  /* gradient tokens */
+  --gradient-primary: linear-gradient(
+    87.14044870021029deg,
+    oklch(0.644 0.226 23.049) 0%,
+    oklch(0.686 0.205 34.607) 50%,
+    oklch(0.71 0.167 13.3) 100%
+  );
+
+  /* semantic tokens */
+  --background: var(--zinc-50);
+  --foreground: var(--zinc-950);
+  --card: var(--zinc-50);
+  --card-foreground: var(--zinc-950);
+  --popover: var(--zinc-50);
+  --popover-foreground: var(--zinc-950);
+  --primary: var(--primary-500);
+  --primary-foreground: var(--zinc-50);
+  --brand: var(--brand-500);
+  --brand-foreground: var(--zinc-50);
+  --secondary: var(--zinc-100);
+  --secondary-foreground: var(--zinc-900);
+  --muted: var(--zinc-100);
+  --muted-foreground: var(--zinc-600);
+  --accent: var(--zinc-200);
+  --accent-foreground: var(--zinc-950);
+  --destructive: var(--red-500);
+  --destructive-foreground: var(--zinc-50);
+  --border: var(--zinc-200);
+  --input: var(--zinc-200);
+  --ring: var(--primary-300);
+  --chart-1: var(--primary-500);
+  --chart-2: var(--green-500);
+  --chart-3: var(--blue-500);
+  --chart-4: var(--indigo-500);
+  --chart-5: var(--pink-500);
+  --sidebar: var(--zinc-100);
+  --sidebar-foreground: var(--zinc-950);
+  --sidebar-primary: var(--primary-500);
+  --sidebar-primary-foreground: var(--zinc-50);
+  --sidebar-accent: var(--zinc-200);
+  --sidebar-accent-foreground: var(--zinc-900);
+  --sidebar-border: var(--zinc-200);
+  --sidebar-ring: var(--primary-300);
+}
+
+.dark {
+  --background: var(--zinc-950);
+  --foreground: var(--zinc-50);
+  --card: var(--zinc-900);
+  --card-foreground: var(--zinc-50);
+  --popover: var(--zinc-900);
+  --popover-foreground: var(--zinc-50);
+  --primary: var(--primary-400);
+  --primary-foreground: var(--zinc-50);
+  --brand: var(--brand-400);
+  --brand-foreground: var(--zinc-50);
+  --secondary: var(--zinc-800);
+  --secondary-foreground: var(--zinc-50);
+  --muted: var(--zinc-800);
+  --muted-foreground: var(--zinc-300);
+  --accent: var(--zinc-800);
+  --accent-foreground: var(--zinc-50);
+  --destructive: var(--red-400);
+  --destructive-foreground: var(--zinc-950);
+  --border: var(--zinc-800);
+  --input: var(--zinc-700);
+  --ring: var(--primary-400);
+  --chart-1: var(--primary-400);
+  --chart-2: var(--green-400);
+  --chart-3: var(--blue-400);
+  --chart-4: var(--indigo-400);
+  --chart-5: var(--pink-300);
+  --sidebar: var(--zinc-900);
+  --sidebar-foreground: var(--zinc-50);
+  --sidebar-primary: var(--primary-400);
+  --sidebar-primary-foreground: var(--zinc-50);
+  --sidebar-accent: var(--zinc-800);
+  --sidebar-accent-foreground: var(--zinc-50);
+  --sidebar-border: var(--zinc-800);
+  --sidebar-ring: var(--primary-400);
+}