@muskanmeet/invoicing-design-system 0.1.0

package/design-system/tokens/tokens.css

@@ -0,0 +1,149 @@
+/**
+ * Token → CSS variable mapping.
+ * Kept hand-written (rather than generated) so the design system folder
+ * can be moved into an npm package without a build step.
+ *
+ * Tier 1 — Primitive palette (NEVER reference directly in components,
+ * always go through the Tier 2 semantic roles below).
+ *
+ *   Primary Navy 900     Sidebar bg, primary text
+ *     Light          #E6E9EB
+ *     Light Hover    #DADEE0
+ *     Light Active   #B2BABF
+ *     Normal         #082032
+ *     Normal Hover   #071D2D
+ *     Normal Active  #061A28
+ *     Dark           #061826
+ *     Dark Hover     #05131E
+ *     Dark Active    #040E16
+ *
+ *   Navy 800           Sidebar hover, active nav    #0A2B3B
+ *   Navy 600           Secondary text/icons/borders #334756
+ *
+ *   Accent Orange 500    Primary CTA, links, active states
+ *     Light          #FEF0E7
+ *     Light Hover    #FDE8DB
+ *     Light Active   #FBD0B5
+ *     Normal         #F16611
+ *     Normal Hover   #D95C0F
+ *     Normal Active  #C1520E
+ *     Dark           #B54D0D
+ *     Dark Hover     #913D0A
+ *     Dark Active    #6C2E08
+ *
+ *   Accent Orange 300   Hover, highlights, badges   #FFA533
+ *   Accent Orange 100   Warning bg, light accent    #FFE0B3
+ *   Cream 50            Page bg, card bg alt        #FFFBF5
+ *   Gray 300            Borders, dividers, inputs   #DDDDDD
+ *   Gray 200            Disabled bg, table stripes  #EEEEEE
+ */
+
+:root {
+  /* Radius */
+  --ds-radius: 0.75rem;
+
+  /* Fonts */
+  --ds-font-sans: "Poppins", system-ui, sans-serif;
+  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Shadows — tinted with navy-900 so elevations sit on the new palette */
+  --ds-shadow-sm: 0 1px 2px 0 rgb(8 32 50 / 0.05);
+  --ds-shadow-md: 0 4px 8px -2px rgb(8 32 50 / 0.08),
+    0 2px 4px -2px rgb(8 32 50 / 0.05);
+  --ds-shadow-lg: 0 12px 24px -8px rgb(8 32 50 / 0.12),
+    0 4px 8px -4px rgb(8 32 50 / 0.06);
+  --ds-shadow-xl: 0 24px 48px -12px rgb(8 32 50 / 0.2);
+
+  /* ----------------------------------------------------------------
+   * Tier 1 primitives (exposed as raw HSL channels for documentation
+   * and dev-tools. Do NOT reference these from component CSS — go via
+   * Tier 2 below.)
+   * ---------------------------------------------------------------- */
+  --ds-navy-900-light:         207 9% 91%;
+  --ds-navy-900-light-hover:   204 8% 87%;
+  --ds-navy-900-light-active:  206 7% 73%;
+  --ds-navy-900:               207 73% 11%;
+  --ds-navy-900-hover:         206 74% 10%;
+  --ds-navy-900-active:        207 75% 9%;
+  --ds-navy-900-dark:          208 74% 8%;
+  --ds-navy-900-dark-hover:    208 75% 7%;
+  --ds-navy-900-dark-active:   208 75% 5%;
+  --ds-navy-800:               205 71% 14%;
+  --ds-navy-600:               208 25% 27%;
+
+  --ds-orange-500-light:        22 89% 95%;
+  --ds-orange-500-light-hover:  23 92% 92%;
+  --ds-orange-500-light-active: 23 92% 85%;
+  --ds-orange-500:              22 88% 51%;
+  --ds-orange-500-hover:        23 88% 45%;
+  --ds-orange-500-active:       24 87% 41%;
+  --ds-orange-500-dark:         24 86% 38%;
+  --ds-orange-500-dark-hover:   24 87% 31%;
+  --ds-orange-500-dark-active:  24 86% 23%;
+  --ds-orange-300:              32 100% 60%;
+  --ds-orange-100:              22 79% 95%;
+
+  --ds-cream-50:                36 100% 98%;
+  --ds-gray-300:                0 0% 87%;
+  --ds-gray-200:                0 0% 93%;
+
+  /* ----------------------------------------------------------------
+   * Tier 2 — Semantic roles (light). Components MUST use these.
+   * ---------------------------------------------------------------- */
+  --ds-background:           var(--ds-cream-50);            /* page bg */
+  --ds-foreground:           var(--ds-navy-900);            /* primary text */
+  --ds-card:                 0 0% 100%;                     /* white */
+  --ds-card-foreground:      var(--ds-navy-900);
+  --ds-popover:              0 0% 100%;
+  --ds-popover-foreground:   var(--ds-navy-900);
+  --ds-primary:              var(--ds-orange-500);          /* CTA */
+  --ds-primary-foreground:   0 0% 100%;
+  --ds-secondary:            var(--ds-navy-900-light);      /* subtle navy chip */
+  --ds-secondary-foreground: var(--ds-navy-900);
+  --ds-muted:                var(--ds-gray-200);            /* disabled / stripes */
+  --ds-muted-foreground:     var(--ds-navy-600);            /* secondary text */
+  --ds-accent:               var(--ds-orange-500-light);    /* light accent fill */
+  --ds-accent-foreground:    var(--ds-orange-500-active);   /* readable on accent */
+  --ds-destructive:          0 84% 60%;
+  --ds-destructive-foreground: 0 0% 100%;
+  --ds-success:              142 71% 45%;
+  --ds-success-foreground:   0 0% 100%;
+  --ds-warning:              var(--ds-orange-300);          /* warning bg */
+  --ds-warning-foreground:   var(--ds-navy-900);
+  --ds-info:                 var(--ds-navy-600);
+  --ds-info-foreground:      0 0% 100%;
+  --ds-border:               var(--ds-gray-300);
+  --ds-input:                var(--ds-gray-300);
+  --ds-ring:                 var(--ds-orange-500);
+  --ds-overlay:              var(--ds-navy-900);            /* used at low alpha */
+}
+
+.dark {
+  /* Tier 1 primitives unchanged — only Tier 2 mapping flips for dark. */
+  --ds-background:           var(--ds-navy-900-dark);
+  --ds-foreground:           var(--ds-gray-200);
+  --ds-card:                 var(--ds-navy-800);
+  --ds-card-foreground:      var(--ds-gray-200);
+  --ds-popover:              var(--ds-navy-800);
+  --ds-popover-foreground:   var(--ds-gray-200);
+  --ds-primary:              22 92% 56%;                    /* brighter orange */
+  --ds-primary-foreground:   var(--ds-navy-900);
+  --ds-secondary:            var(--ds-navy-800);
+  --ds-secondary-foreground: var(--ds-gray-200);
+  --ds-muted:                var(--ds-navy-900-active);
+  --ds-muted-foreground:     var(--ds-navy-900-light-active);
+  --ds-accent:               var(--ds-orange-500-dark);
+  --ds-accent-foreground:    var(--ds-orange-500-light);
+  --ds-destructive:          0 84% 60%;
+  --ds-destructive-foreground: 0 0% 100%;
+  --ds-success:              142 71% 50%;
+  --ds-success-foreground:   var(--ds-navy-900);
+  --ds-warning:              var(--ds-orange-300);
+  --ds-warning-foreground:   var(--ds-navy-900);
+  --ds-info:                 var(--ds-navy-900-light-active);
+  --ds-info-foreground:      var(--ds-navy-900);
+  --ds-border:               var(--ds-navy-600);
+  --ds-input:                var(--ds-navy-600);
+  --ds-ring:                 22 92% 56%;
+  --ds-overlay:              0 0% 0%;
+}

package/design-system/tokens/tokens.ts

@@ -0,0 +1,190 @@
+/**
+ * Design tokens — single source of truth for the design system.
+ *
+ * Values exposed as TypeScript constants AND as CSS variables (see `tokens.css`)
+ * so they can be consumed from Tailwind, plain CSS, or other frameworks once
+ * this folder is extracted into a standalone npm package.
+ *
+ * Tier 1 — Primitive palette (NEVER reference directly in components,
+ * always go through the Tier 2 semantic roles below):
+ *   Primary Navy 900   Sidebar bg, primary text
+ *     #E6E9EB · #DADEE0 · #B2BABF · #082032 · #071D2D · #061A28
+ *     #061826 · #05131E · #040E16
+ *   Navy 800           #0A2B3B  (sidebar hover, active nav)
+ *   Navy 600           #334756  (secondary text, icons, borders)
+ *
+ *   Accent Orange 500  Primary CTA, links, active states
+ *     #FEF0E7 · #FDE8DB · #FBD0B5 · #F16611 · #D95C0F · #C1520E
+ *     #B54D0D · #913D0A · #6C2E08
+ *   Accent Orange 300  #FFA533  (hover, highlights, badges)
+ *   Accent Orange 100  #FFE0B3  (warning bg, light accent fill)
+ *
+ *   Cream 50           #FFFBF5  (page bg, card bg alt)
+ *   Gray 300           #DDDDDD  (borders, dividers, input stroke)
+ *   Gray 200           #EEEEEE  (disabled bg, table stripes)
+ */
+
+export const tokens = {
+  breakpoints: {
+    sm: "480px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+  },
+  radius: {
+    base: "0.75rem",
+  },
+  fontFamily: {
+    sans: "Poppins, system-ui, sans-serif",
+    mono: "JetBrains Mono, ui-monospace, monospace",
+  },
+  /**
+   * Semantic typography scale. Each entry is [fontSize, options].
+   * `lineHeight` and `letterSpacing` are the desktop (≥ lg) values; mobile
+   * sizes are exposed as responsive component classes in `styles.css`
+   * (`.text-display-hero`, `.text-display-lg`, …) which scale down at the
+   * `sm` / `md` breakpoints defined above.
+   */
+  fontSize: {
+    "display-hero":  ["3.3125rem", { lineHeight: "4.5rem",  letterSpacing: "-0.5px", fontWeight: "700" }],
+    "display-lg":    ["2rem",      { lineHeight: "2.75rem", letterSpacing: "-0.3px", fontWeight: "600" }],
+    "heading-xl":    ["1.5rem",    { lineHeight: "2.125rem",                          fontWeight: "600" }],
+    "heading-lg":    ["1.25rem",   { lineHeight: "1.875rem",                          fontWeight: "500" }],
+    "heading-md":    ["1rem",      { lineHeight: "1.5rem",                            fontWeight: "500" }],
+    "body-lg":       ["1rem",      { lineHeight: "1.625rem",                          fontWeight: "400" }],
+    "body-md":       ["0.875rem",  { lineHeight: "1.375rem",                          fontWeight: "400" }],
+    "body-md-em":    ["0.875rem",  { lineHeight: "1.375rem",                          fontWeight: "500" }],
+    "body-sm":       ["0.8125rem", { lineHeight: "1.25rem",                           fontWeight: "400" }],
+    caption:         ["0.75rem",   { lineHeight: "1.125rem",                          fontWeight: "400" }],
+    overline:        ["0.6875rem", { lineHeight: "1rem",     letterSpacing: "0.5px",  fontWeight: "600" }],
+    "metric-lg":     ["1.75rem",   { lineHeight: "2.375rem",                          fontWeight: "600" }],
+  },
+  spacing: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    6: "1.5rem",
+    8: "2rem",
+    12: "3rem",
+    16: "4rem",
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(8 32 50 / 0.05)",
+    md: "0 4px 8px -2px rgb(8 32 50 / 0.08), 0 2px 4px -2px rgb(8 32 50 / 0.05)",
+    lg: "0 12px 24px -8px rgb(8 32 50 / 0.12), 0 4px 8px -4px rgb(8 32 50 / 0.06)",
+    xl: "0 24px 48px -12px rgb(8 32 50 / 0.20)",
+  },
+  zIndex: {
+    base: 0,
+    dropdown: 10,
+    sticky: 20,
+    overlay: 40,
+    modal: 50,
+    toast: 60,
+    tooltip: 70,
+  },
+  /** Tier 1 primitive palette — documentation reference only. */
+  palette: {
+    navy900: {
+      light: "#E6E9EB",
+      lightHover: "#DADEE0",
+      lightActive: "#B2BABF",
+      normal: "#082032",
+      normalHover: "#071D2D",
+      normalActive: "#061A28",
+      dark: "#061826",
+      darkHover: "#05131E",
+      darkActive: "#040E16",
+    },
+    navy800: "#0A2B3B",
+    navy600: "#334756",
+    navy200: "#B2BABF",
+    navy50: "#E6E9EB",
+    orange500: {
+      light: "#FEF0E7",
+      lightHover: "#FDE8DB",
+      lightActive: "#FBD0B5",
+      normal: "#F16611",
+      normalHover: "#D95C0F",
+      normalActive: "#C1520E",
+      dark: "#B54D0D",
+      darkHover: "#913D0A",
+      darkActive: "#6C2E08",
+    },
+    orange700: "#C1520E",
+    orange600: "#D95C0F",
+    orange300: "#FFA533",
+    orange100: "#FEF0E7",
+    orange50: "#FFF7E9",
+    cream50: "#FFFBF5",
+    white: "#FFFFFF",
+    gray50: "#F9FAFB",
+    gray100: "#F4F4F4",
+    gray200: "#EEEEEE",
+    gray300: "#DDDDDD",
+  },
+  /** Tier 2 semantic roles — HSL channels consumed by Tailwind `hsl(var(--...))`. */
+  colors: {
+    light: {
+      background: "36 100% 98%",
+      foreground: "207 73% 11%",
+      card: "0 0% 100%",
+      "card-foreground": "207 73% 11%",
+      popover: "0 0% 100%",
+      "popover-foreground": "207 73% 11%",
+      primary: "22 88% 51%",
+      "primary-foreground": "0 0% 100%",
+      secondary: "207 9% 91%",
+      "secondary-foreground": "207 73% 11%",
+      muted: "0 0% 93%",
+      "muted-foreground": "208 25% 27%",
+      accent: "22 89% 95%",
+      "accent-foreground": "24 87% 41%",
+      destructive: "0 84% 60%",
+      "destructive-foreground": "0 0% 100%",
+      success: "142 71% 45%",
+      "success-foreground": "0 0% 100%",
+      warning: "32 100% 60%",
+      "warning-foreground": "207 73% 11%",
+      info: "208 25% 27%",
+      "info-foreground": "0 0% 100%",
+      border: "0 0% 87%",
+      input: "0 0% 87%",
+      ring: "22 88% 51%",
+      overlay: "207 73% 11%",
+    },
+    dark: {
+      background: "208 74% 8%",
+      foreground: "0 0% 93%",
+      card: "205 71% 14%",
+      "card-foreground": "0 0% 93%",
+      popover: "205 71% 14%",
+      "popover-foreground": "0 0% 93%",
+      primary: "22 92% 56%",
+      "primary-foreground": "207 73% 11%",
+      secondary: "205 71% 14%",
+      "secondary-foreground": "0 0% 93%",
+      muted: "207 75% 9%",
+      "muted-foreground": "206 7% 73%",
+      accent: "24 86% 38%",
+      "accent-foreground": "22 89% 95%",
+      destructive: "0 84% 60%",
+      "destructive-foreground": "0 0% 100%",
+      success: "142 71% 50%",
+      "success-foreground": "207 73% 11%",
+      warning: "32 100% 60%",
+      "warning-foreground": "207 73% 11%",
+      info: "206 7% 73%",
+      "info-foreground": "207 73% 11%",
+      border: "208 25% 27%",
+      input: "208 25% 27%",
+      ring: "22 92% 56%",
+      overlay: "0 0% 0%",
+    },
+  },
+} as const;
+
+export type Tokens = typeof tokens;

package/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@muskanmeet/invoicing-design-system",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev -H 0.0.0.0 -p 5000",
+    "build": "next build",
+    "start": "next start -H 0.0.0.0 -p 5000",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "lucide-react": "^0.439.0",
+    "next": "^14.2.13",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.2",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.6.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.41",
+    "@types/react": "^18.3.29",
+    "@types/react-dom": "^18.3.7",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^14.2.13",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/screens/_shared/app-shell.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+/**
+ * AppShell — sidebar + topbar layout used by the in-app screens.
+ *
+ * Portability note: this component intentionally uses a plain <a> tag instead
+ * of `next/link` so that the screens folder can be lifted into a non-Next
+ * project (e.g. Vite + React) without changes. The Next.js app still benefits
+ * from client-side navigation when the parent route wires its own <Link>.
+ */
+
+import * as React from "react";
+import { cn } from "@ds/lib/cn";
+import { Avatar, AvatarFallback } from "@ds/components/avatar";
+import { Button } from "@ds/components/button";
+import { Badge } from "@ds/components/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@ds/components/dropdown-menu";
+import {
+  Bell,
+  ChevronDown,
+  CreditCard,
+  FileText,
+  LayoutDashboard,
+  LogOut,
+  Search,
+  Settings,
+  Users,
+} from "lucide-react";
+import { Input } from "@ds/components/input";
+
+type NavItem = {
+  label: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  badge?: string;
+};
+
+const nav: NavItem[] = [
+  { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+  { label: "Invoices", href: "/invoices", icon: FileText, badge: "12" },
+  { label: "Clients", href: "#", icon: Users },
+  { label: "Payments", href: "#", icon: CreditCard },
+  { label: "Settings", href: "#", icon: Settings },
+];
+
+export function AppShell({
+  children,
+  activeHref,
+}: {
+  children: React.ReactNode;
+  activeHref: string;
+}) {
+  return (
+    <div className="flex min-h-screen bg-muted/30">
+      <aside className="hidden w-64 shrink-0 border-r bg-background lg:flex lg:flex-col">
+        <div className="flex h-16 items-center gap-2 border-b px-6">
+          <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <FileText className="h-4 w-4" />
+          </div>
+          <div className="font-semibold tracking-tight">Invoicely</div>
+        </div>
+        <nav className="flex-1 space-y-1 px-3 py-4">
+          {nav.map((item) => {
+            const active = item.href === activeHref;
+            const Icon = item.icon;
+            return (
+              <a
+                key={item.label}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                  active
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                <span className="flex-1">{item.label}</span>
+                {item.badge && (
+                  <Badge variant="secondary" className="text-[10px]">
+                    {item.badge}
+                  </Badge>
+                )}
+              </a>
+            );
+          })}
+        </nav>
+        <div className="border-t p-4">
+          <div className="flex items-center gap-3">
+            <Avatar className="h-9 w-9">
+              <AvatarFallback>SA</AvatarFallback>
+            </Avatar>
+            <div className="flex-1 overflow-hidden">
+              <div className="truncate text-sm font-medium">Sara Anders</div>
+              <div className="truncate text-xs text-muted-foreground">
+                sara@acme.com
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="sticky top-0 z-20 flex h-16 items-center gap-3 border-b bg-background/80 px-4 backdrop-blur md:px-6">
+          <div className="relative w-full max-w-md">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input placeholder="Search invoices, clients…" className="pl-9" />
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <Button variant="ghost" size="icon" aria-label="notifications">
+              <Bell />
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="gap-2">
+                  <Avatar className="h-7 w-7">
+                    <AvatarFallback>SA</AvatarFallback>
+                  </Avatar>
+                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuLabel>My account</DropdownMenuLabel>
+                <DropdownMenuItem>Profile</DropdownMenuItem>
+                <DropdownMenuItem>Billing</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive">
+                  <LogOut className="mr-2 h-4 w-4" /> Sign out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </header>
+        <main className="flex-1 px-4 py-8 md:px-8">{children}</main>
+      </div>
+    </div>
+  );
+}