monadical/greyhaven-design-system
14
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

design system token v0.4.1

Browse Source
This commit is contained in:
Juan
2026-04-13 18:06:53 -05:00
parent c1d4d55333
commit c4cc5a78b9
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ui/navbar.tsx
View File

@@ -120,7 +120,7 @@ function NavbarLink({
data-active={active || undefined} data-active={active || undefined}
className={cn( className={cn(
'px-3 py-2 text-foreground transition-opacity hover:opacity-70', 'px-3 py-2 text-foreground transition-opacity hover:opacity-70',
'data-active:opacity-100', 'data-active:text-primary data-active:opacity-100',
className, className,
)} )}
{...props} {...props}

6
lib/catalog.ts
View File

@@ -266,9 +266,9 @@ export const COMPONENT_CATALOG: ComponentSpec[] = [
file: 'components/ui/navbar.tsx', file: 'components/ui/navbar.tsx',
category: 'navigation', category: 'navigation',
exports: ['Navbar', 'NavbarLink', 'navbarVariants'], exports: ['Navbar', 'NavbarLink', 'navbarVariants'],
description: 'Top navigation bar. Fixed top, z-50, h-16. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.', description: 'Top navigation bar. Fixed top, z-50, h-[65px]. Off-white bg (light) / off-black (dark). Font-semibold menu items. Hover: opacity-70 (no bg). Active links: orange (text-primary), full opacity. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.',
props: 'variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode', props: 'variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode. NavbarLink: active?: boolean',
example: '<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/">Home</NavbarLink></Navbar>', example: '<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/" active>Home</NavbarLink><NavbarLink href="/about">About</NavbarLink></Navbar>',
}, },
{ {
name: 'Breadcrumb', name: 'Breadcrumb',

6
skill/SKILL.md
View File

@@ -440,11 +440,11 @@ All components live in `components/ui/`. Import with `@/components/ui/<name>`.
#### Navbar #### Navbar
- **File**: `components/ui/navbar.tsx` - **File**: `components/ui/navbar.tsx`
- **Exports**: `Navbar`, `NavbarLink`, `navbarVariants` - **Exports**: `Navbar`, `NavbarLink`, `navbarVariants`
- **Description**: Top navigation bar. Fixed top, z-50, h-16. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger. - **Description**: Top navigation bar. Fixed top, z-50, h-[65px]. Off-white bg (light) / off-black (dark). Font-semibold menu items. Hover: opacity-70 (no bg). Active links: orange (text-primary), full opacity. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.
- **Props**: `variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode` - **Props**: `variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode. NavbarLink: active?: boolean`
- **Example**: - **Example**:
```tsx ```tsx
<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/">Home</NavbarLink></Navbar> <Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/" active>Home</NavbarLink><NavbarLink href="/about">About</NavbarLink></Navbar>
``` ```
#### Breadcrumb #### Breadcrumb