cosscom__coss/apps/ui/registry/registry-styles.ts

import type { Registry } from "shadcn/schema";

const colorsNeutralLight = {
  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)",
} as const;

const colorsNeutralDark = {
  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)",
} as const;

export const styles: Registry["items"] = [
  {
    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: {
        ...colorsNeutralDark,
        "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: {
        ...colorsNeutralLight,
        "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-sans, 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", "@coss/fonts"],
    type: "registry:style",
  },
  {
    cssVars: {
      dark: colorsNeutralDark,
      light: colorsNeutralLight,
    },
    name: "colors-neutral",
    type: "registry:style",
  },
];