feat: add coss/style preset for full project setup (#710)

* feat: add coss/style preset for full project setup

* improve the docs

Author: pasqualevitiello

apps/ui/content/docs/(root)/get-started.mdx

@@ -17,23 +17,37 @@ You can add components **automatically with the shadcn CLI** or **manually by co
 
 Each component page provides a command to add it to your project automatically. The CLI will create the necessary files and install any dependencies for you.
 
-### Install all UI Components
+### New Project Setup (Recommended)
 
-You can install all **coss ui** primitives at once with a single command:
+For new projects, use the **coss style** preset to initialize everything in one command:
+
+```bash
+npx shadcn@latest init coss/style
+```
+
+This installs all UI components, the neutral color system, sidebar variables, font variables, and base styles. Components like Dialog and AlertDialog use `font-heading` for titles—the style preset provides sensible fallbacks, and you can customize fonts via `next/font` in your layout.
+
+### Existing Projects
+
+To add components to an existing project:
 
 ```bash
 npx shadcn@latest add @coss/ui
 ```
 
-This will add all UI components to your project in one go, including button, card, avatar, dialog, tabs, and more.
+This adds all UI primitives (button, card, avatar, dialog, tabs, and more). For the full theme including colors, sidebar, and fonts:
+
+```bash
+npx shadcn@latest add @coss/style
+```
 
-**Recommended**: Install with our optimized color tokens for the best visual results:
+Or add only the color tokens:
 
 ```bash
 npx shadcn@latest add @coss/ui @coss/colors-neutral
 ```
 
-This command installs both the UI components and our default neutral-based color system, which provides crisp, contrasted borders and enhanced visual depth. See the [Styling](/ui/docs/styling) guide for more details about our color system.
+See the [Styling](/ui/docs/styling) guide for more details.
 
 ### Manually
 

apps/ui/content/docs/(root)/styling.mdx

@@ -13,33 +13,13 @@ While this color system is optional, it's designed to provide optimal visual res
 
 ## Installation
 
-<CodeTabs>
-
-<TabsList>
-  <TabsTab value="cli">CLI</TabsTab>
-  <TabsTab value="manual">Manual</TabsTab>
-</TabsList>
-
-<TabsPanel value="cli">
-
-```bash
-npx shadcn@latest add @coss/colors-neutral
-```
-
-This command will override your existing color variables. We're currently providing a default configuration based on neutral colors, but we plan to add more color variants in the future to give you more styling options while maintaining the same optimization principles.
-
-</TabsPanel>
-
-<TabsPanel value="manual">
-
-<Steps>
-
-<Step>
-  Copy and paste the following CSS variables into your `globals.css` file:
-</Step>
+See [Get Started](/ui/docs/get-started) for installing with the CLI. If you prefer to add the theme manually, paste the following into your `globals.css`:
 
 ```css title="app/globals.css"
 @theme inline {
+  --font-sans: var(--font-sans);
+  --font-heading: var(--font-heading);
+  --font-mono: var(--font-mono);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-sidebar-ring: var(--sidebar-ring);
@@ -183,25 +163,29 @@ This command will override your existing color variables. We're currently provid
 }
 ```
 
-</Steps>
-
-</TabsPanel>
-
-</CodeTabs>
-
-## Extended Color Variables
+## Font Variables
 
-We've introduced additional color variables beyond the standard shadcn/ui palette to provide more control for specific components like badges and alerts:
+Components like Dialog, AlertDialog, Sheet, and Empty use the `font-heading` class for titles. The coss style preset defines `--font-sans`, `--font-heading`, and `--font-mono` with system font fallbacks. To use custom fonts, define these variables in your layout using `next/font`:
 
-- `--destructive-foreground`: Foreground color for destructive actions
-- `--info`: Information state color
-- `--info-foreground`: Foreground color for information states
-- `--success`: Success state color
-- `--success-foreground`: Foreground color for success states
-- `--warning`: Warning state color
-- `--warning-foreground`: Foreground color for warning states
+```tsx title="app/layout.tsx"
+import { Geist, Geist_Mono } from "next/font/google";
+
+const fontSans = Geist({ variable: "--font-sans", subsets: ["latin"] });
+const fontHeading = Geist({ variable: "--font-heading", subsets: ["latin"], weight: "600" });
+const fontMono = Geist_Mono({ variable: "--font-mono", subsets: ["latin"] });
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}>
+        {children}
+      </body>
+    </html>
+  );
+}
+```
 
-These additional variables ensure consistent styling across components that need to communicate different states or levels of importance.
+Apply the variables to `html` or `body` so they cascade. The `font-sans` class sets the default body font.
 
 ## Base UI Setup
 

apps/ui/public/r/combobox.json

@@ -16,4 +16,4 @@
       "type": "registry:ui"
     }
   ]
-}
+}

apps/ui/public/r/registry.json

@@ -10276,6 +10276,131 @@
       ],
       "type": "registry:block"
     },
+    {
+      "css": {
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          },
+          "code, kbd, samp, pre": {
+            "font-family": "var(--font-mono)"
+          }
+        }
+      },
+      "cssVars": {
+        "dark": {
+          "accent": "--alpha(var(--color-white) / 4%)",
+          "accent-foreground": "var(--color-neutral-100)",
+          "background": "color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white))",
+          "border": "--alpha(var(--color-white) / 6%)",
+          "card": "color-mix(in srgb, var(--background) 98%, var(--color-white))",
+          "card-foreground": "var(--color-neutral-100)",
+          "destructive": "color-mix(in srgb, var(--color-red-500) 90%, var(--color-white))",
+          "destructive-foreground": "var(--color-red-400)",
+          "foreground": "var(--color-neutral-100)",
+          "info": "var(--color-blue-500)",
+          "info-foreground": "var(--color-blue-400)",
+          "input": "--alpha(var(--color-white) / 8%)",
+          "muted": "--alpha(var(--color-white) / 4%)",
+          "muted-foreground": "color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white))",
+          "popover": "color-mix(in srgb, var(--background) 98%, var(--color-white))",
+          "popover-foreground": "var(--color-neutral-100)",
+          "primary": "var(--color-neutral-100)",
+          "primary-foreground": "var(--color-neutral-800)",
+          "ring": "var(--color-neutral-500)",
+          "secondary": "--alpha(var(--color-white) / 4%)",
+          "secondary-foreground": "var(--color-neutral-100)",
+          "success": "var(--color-emerald-500)",
+          "success-foreground": "var(--color-emerald-400)",
+          "warning": "var(--color-amber-500)",
+          "warning-foreground": "var(--color-amber-400)",
+          "chart-1": "var(--color-blue-700)",
+          "chart-2": "var(--color-emerald-500)",
+          "chart-3": "var(--color-amber-500)",
+          "chart-4": "var(--color-purple-500)",
+          "chart-5": "var(--color-rose-500)",
+          "code": "color-mix(in srgb, var(--background) 98%, var(--color-white))",
+          "code-foreground": "var(--foreground)",
+          "code-highlight": "--alpha(var(--color-white) / 4%)",
+          "sidebar": "color-mix(in srgb, var(--color-neutral-950) 97%, var(--color-white))",
+          "sidebar-accent": "--alpha(var(--color-white) / 4%)",
+          "sidebar-accent-foreground": "var(--color-neutral-100)",
+          "sidebar-border": "--alpha(var(--color-white) / 5%)",
+          "sidebar-foreground": "color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar))",
+          "sidebar-primary": "var(--color-neutral-100)",
+          "sidebar-primary-foreground": "var(--color-neutral-800)",
+          "sidebar-ring": "var(--color-neutral-400)"
+        },
+        "light": {
+          "accent": "--alpha(var(--color-black) / 4%)",
+          "accent-foreground": "var(--color-neutral-800)",
+          "background": "var(--color-white)",
+          "border": "--alpha(var(--color-black) / 8%)",
+          "card": "var(--color-white)",
+          "card-foreground": "var(--color-neutral-800)",
+          "destructive": "var(--color-red-500)",
+          "destructive-foreground": "var(--color-red-700)",
+          "foreground": "var(--color-neutral-800)",
+          "info": "var(--color-blue-500)",
+          "info-foreground": "var(--color-blue-700)",
+          "input": "--alpha(var(--color-black) / 10%)",
+          "muted": "--alpha(var(--color-black) / 4%)",
+          "muted-foreground": "color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black))",
+          "popover": "var(--color-white)",
+          "popover-foreground": "var(--color-neutral-800)",
+          "primary": "var(--color-neutral-800)",
+          "primary-foreground": "var(--color-neutral-50)",
+          "ring": "var(--color-neutral-400)",
+          "secondary": "--alpha(var(--color-black) / 4%)",
+          "secondary-foreground": "var(--color-neutral-800)",
+          "success": "var(--color-emerald-500)",
+          "success-foreground": "var(--color-emerald-700)",
+          "warning": "var(--color-amber-500)",
+          "warning-foreground": "var(--color-amber-700)",
+          "chart-1": "var(--color-orange-600)",
+          "chart-2": "var(--color-teal-600)",
+          "chart-3": "var(--color-cyan-900)",
+          "chart-4": "var(--color-amber-400)",
+          "chart-5": "var(--color-amber-500)",
+          "code": "var(--color-white)",
+          "code-foreground": "var(--foreground)",
+          "code-highlight": "--alpha(var(--color-black) / 4%)",
+          "radius": "0.625rem",
+          "sidebar": "var(--color-neutral-50)",
+          "sidebar-accent": "--alpha(var(--color-black) / 4%)",
+          "sidebar-accent-foreground": "var(--color-neutral-800)",
+          "sidebar-border": "--alpha(var(--color-black) / 6%)",
+          "sidebar-foreground": "color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar))",
+          "sidebar-primary": "var(--color-neutral-800)",
+          "sidebar-primary-foreground": "var(--color-neutral-50)",
+          "sidebar-ring": "var(--color-neutral-400)"
+        },
+        "theme": {
+          "font-heading": "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+          "font-mono": "var(--font-mono, ui-monospace, monospace)",
+          "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
+        }
+      },
+      "dependencies": [
+        "@base-ui/react",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "description": "Complete coss theme: colors, sidebar, fonts, and base styles. Use with `npx shadcn init coss/style` for full project setup.",
+      "devDependencies": [
+        "tw-animate-css"
+      ],
+      "extends": "none",
+      "name": "style",
+      "registryDependencies": [
+        "utils",
+        "@coss/ui"
+      ],
+      "type": "registry:style"
+    },
     {
       "cssVars": {
         "dark": {

apps/ui/public/r/select.json

@@ -12,4 +12,4 @@
       "type": "registry:ui"
     }
   ]
-}
+}