diff --git a/apps/ui/app/docs/[[...slug]]/page.tsx b/apps/ui/app/docs/[[...slug]]/page.tsx index 625225a87..bb2bba954 100644 --- a/apps/ui/app/docs/[[...slug]]/page.tsx +++ b/apps/ui/app/docs/[[...slug]]/page.tsx @@ -61,10 +61,7 @@ export default async function Page(props: { const links = doc.links; return ( -
+
diff --git a/apps/ui/app/layout.tsx b/apps/ui/app/layout.tsx index df68342c1..4a4be93a9 100644 --- a/apps/ui/app/layout.tsx +++ b/apps/ui/app/layout.tsx @@ -1,8 +1,8 @@ import "./globals.css"; +import { fontHeading, fontSans } from "@coss/ui/fonts"; import { ThemeProvider } from "@coss/ui/shared/theme-provider"; import type { Metadata } from "next"; -import { Cal_Sans as FontHeading, Inter as FontSans } from "next/font/google"; import { SiteHeader } from "@/components/site-header"; import { @@ -10,17 +10,6 @@ import { ToastProvider, } from "@/registry/default/ui/toast"; -const fontSans = FontSans({ - subsets: ["latin"], - variable: "--font-sans", -}); - -const fontHeading = FontHeading({ - subsets: ["latin"], - variable: "--font-heading", - weight: "400", -}); - export const metadata: Metadata = { description: "coss ui is a collection of accessible, and composable React components. Built on top of Base UI and styled with Tailwind CSS,", diff --git a/apps/ui/components/docs-toc.tsx b/apps/ui/components/docs-toc.tsx index 1f6837b72..56d8283d4 100644 --- a/apps/ui/components/docs-toc.tsx +++ b/apps/ui/components/docs-toc.tsx @@ -76,7 +76,7 @@ export function DocsTableOfContents({
{toc.map((item) => ( ) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n setLoading(true);\n await new Promise((r) => setTimeout(r, 800));\n setLoading(false);\n const frameworks = formData.getAll(\"frameworks\") as string[];\n alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n };\n\n return (\n
\n
}\n >\n \n \n \n \n Next.js\n \n \n \n Vite\n \n \n \n Astro\n \n \n \n \n \n );\n}\n", + "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n const [loading, setLoading] = React.useState(false);\n const onSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n setLoading(true);\n await new Promise((r) => setTimeout(r, 800));\n setLoading(false);\n const frameworks = formData.getAll(\"frameworks\") as string[];\n alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n };\n\n return (\n
\n
}\n >\n \n \n \n \n Next.js\n \n \n \n Vite\n \n \n \n Astro\n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/registry/default/particles/p-checkbox-group-5.tsx b/apps/ui/registry/default/particles/p-checkbox-group-5.tsx index 1784c63ad..260303ed6 100644 --- a/apps/ui/registry/default/particles/p-checkbox-group-5.tsx +++ b/apps/ui/registry/default/particles/p-checkbox-group-5.tsx @@ -29,9 +29,7 @@ export default function Particle() { name="frameworks" render={(props) =>
} > - + diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx index 121d1a4df..272bed9db 100644 --- a/apps/www/app/layout.tsx +++ b/apps/www/app/layout.tsx @@ -1,22 +1,11 @@ import "./globals.css"; +import { fontHeading, fontSans } from "@coss/ui/fonts"; import { SiteCta } from "@coss/ui/shared/site-cta"; import { SiteFooter } from "@coss/ui/shared/site-footer"; import { SiteHeader } from "@coss/ui/shared/site-header"; import { ThemeProvider } from "@coss/ui/shared/theme-provider"; import type { Metadata } from "next"; -import { Cal_Sans as FontHeading, Inter as FontSans } from "next/font/google"; - -const fontSans = FontSans({ - subsets: ["latin"], - variable: "--font-sans", -}); - -const fontHeading = FontHeading({ - subsets: ["latin"], - variable: "--font-heading", - weight: "400", -}); export const metadata: Metadata = { description: "coss.com - the everything but AI company", diff --git a/bun.lock b/bun.lock index 4f15dd371..62f657836 100644 --- a/bun.lock +++ b/bun.lock @@ -15,6 +15,7 @@ "name": "origin", "version": "0.1.0", "dependencies": { + "@coss/ui": "workspace:*", "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", diff --git a/packages/ui/package.json b/packages/ui/package.json index 52ac8bfb7..80f53d68d 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -26,6 +26,7 @@ }, "exports": { "./components/*": "./src/components/*.tsx", + "./fonts": "./src/fonts/index.ts", "./globals.css": "./src/styles/globals.css", "./hooks/*": "./src/hooks/*.ts", "./lib/*": "./src/lib/*.ts", diff --git a/packages/ui/src/fonts/CalSans-Regular.woff2 b/packages/ui/src/fonts/CalSans-Regular.woff2 new file mode 100644 index 000000000..6c83a2df3 Binary files /dev/null and b/packages/ui/src/fonts/CalSans-Regular.woff2 differ diff --git a/packages/ui/src/fonts/CalSansUI[MODE,wght].woff2 b/packages/ui/src/fonts/CalSansUI[MODE,wght].woff2 new file mode 100644 index 000000000..d353c5893 Binary files /dev/null and b/packages/ui/src/fonts/CalSansUI[MODE,wght].woff2 differ diff --git a/packages/ui/src/fonts/README.md b/packages/ui/src/fonts/README.md new file mode 100644 index 000000000..6e03ca1bc --- /dev/null +++ b/packages/ui/src/fonts/README.md @@ -0,0 +1,49 @@ +# Shared Fonts + +This directory contains shared font files and configurations used across all apps in the monorepo. + +## Usage + +Import fonts directly from the shared UI package: + +```tsx +import { fontSans, fontHeading } from "@coss/ui/fonts"; + +export default function RootLayout({ children }) { + return ( + + + {children} + + + ); +} +``` + +## Available Fonts + +- `fontSans` - Cal Sans UI variable font (supports multiple weights and modes) +- `fontHeading` - Cal Sans Regular font + +## Adding New Fonts + +1. Place the font file in this directory (`packages/ui/src/fonts/`) +2. Add a new font configuration in `index.ts`: + +```typescript +export const yourNewFont = localFont({ + display: "swap", + src: "./YourFont.woff2", + variable: "--font-your-name", +}); +``` + +3. Use it in any app by importing from `@coss/ui/fonts` + +## Benefits of This Approach + +- Single source of truth for fonts +- No fragile relative paths +- Type-safe imports +- Versioned with the UI package +- Easy to update across all apps diff --git a/packages/ui/src/fonts/index.ts b/packages/ui/src/fonts/index.ts new file mode 100644 index 000000000..06ff61512 --- /dev/null +++ b/packages/ui/src/fonts/index.ts @@ -0,0 +1,13 @@ +import localFont from "next/font/local"; + +export const fontSans = localFont({ + display: "swap", + src: "./CalSansUI[MODE,wght].woff2", + variable: "--font-sans", +}); + +export const fontHeading = localFont({ + display: "swap", + src: "./CalSans-Regular.woff2", + variable: "--font-heading", +}); diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css index 998222d08..cb0635c35 100644 --- a/packages/ui/src/styles/globals.css +++ b/packages/ui/src/styles/globals.css @@ -118,6 +118,18 @@ --code: var(--color-white); --code-foreground: var(--foreground); --code-highlight: --alpha(var(--color-black) / 4%); + --text-xs: 0.8125rem; + --text-xs--line-height: 1rem; + --text-sm: 0.9375rem; + --text-sm--line-height: 1.25rem; + --text-base: 1.0625rem; + --text-base--line-height: 1.5rem; + --text-lg: 1.1875rem; + --text-lg--line-height: 1.75rem; + --font-weight-normal: 350; + --font-weight-medium: 450; + --font-weight-semibold: 550; + --font-weight-bold: 650; } .dark { @@ -177,6 +189,9 @@ } @layer base { + body { + @apply font-normal text-base; + } * { @apply border-border outline-ring/50; }