@oppulence/design-system 1.0.2

package/src/components/organisms/sonner.tsx

@@ -0,0 +1,41 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ theme = "system", ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4 text-success" />,
+        info: <InfoIcon className="size-4 text-info" />,
+        warning: <TriangleAlertIcon className="size-4 text-warning" />,
+        error: <OctagonXIcon className="size-4 text-destructive" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+          description: "!text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/components/ui/index.ts

@@ -0,0 +1,3 @@
+export * from "../atoms";
+export * from "../molecules";
+export * from "../organisms";

package/src/index.ts

@@ -0,0 +1,3 @@
+export { cn } from "../lib/utils";
+
+export * from "./components/ui";

package/src/styles/globals.css

@@ -0,0 +1,297 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/plus-jakarta-sans";
+
+/* Include design system components in Tailwind's content scan */
+@source "../components/**/*.tsx";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  :root {
+    /* Modern monochrome light theme - clean whites and refined grays */
+    --background: oklch(0.995 0 0);
+    --foreground: oklch(0.09 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.09 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.09 0 0);
+
+    /* Pure black primary for bold, modern look */
+    --primary: oklch(0.09 0 0);
+    --primary-foreground: oklch(0.99 0 0);
+
+    /* Subtle gray secondary */
+    --secondary: oklch(0.96 0 0);
+    --secondary-foreground: oklch(0.15 0 0);
+
+    /* Refined muted tones */
+    --muted: oklch(0.965 0 0);
+    --muted-foreground: oklch(0.45 0 0);
+
+    /* Subtle accent */
+    --accent: oklch(0.955 0 0);
+    --accent-foreground: oklch(0.12 0 0);
+
+    /* Semantic colors - muted for elegance */
+    --destructive: oklch(0.55 0.2 25);
+    --success: oklch(0.55 0.15 145);
+    --warning: oklch(0.7 0.14 80);
+    --info: oklch(0.55 0.14 250);
+
+    /* Refined borders and inputs */
+    --border: oklch(0.91 0 0);
+    --input: oklch(0.91 0 0);
+    --ring: oklch(0.09 0 0);
+
+    /* Monochrome chart palette - grayscale gradient */
+    --chart-1: oklch(0.15 0 0);
+    --chart-2: oklch(0.35 0 0);
+    --chart-3: oklch(0.5 0 0);
+    --chart-4: oklch(0.65 0 0);
+    --chart-5: oklch(0.8 0 0);
+
+    /* Modern radius - slightly larger for softer feel */
+    --radius: 0.5rem;
+
+    /* Sidebar - clean separation */
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.09 0 0);
+    --sidebar-primary: oklch(0.09 0 0);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-accent: oklch(0.955 0 0);
+    --sidebar-accent-foreground: oklch(0.12 0 0);
+    --sidebar-border: oklch(0.92 0 0);
+    --sidebar-ring: oklch(0.09 0 0);
+  }
+
+  .dark {
+    /* Modern monochrome dark theme - deep blacks and refined grays */
+    --background: oklch(0.09 0 0);
+    --foreground: oklch(0.95 0 0);
+    --card: oklch(0.12 0 0);
+    --card-foreground: oklch(0.95 0 0);
+    --popover: oklch(0.12 0 0);
+    --popover-foreground: oklch(0.95 0 0);
+
+    /* Pure white primary for bold contrast */
+    --primary: oklch(0.99 0 0);
+    --primary-foreground: oklch(0.09 0 0);
+
+    /* Subtle gray secondary */
+    --secondary: oklch(0.18 0 0);
+    --secondary-foreground: oklch(0.92 0 0);
+
+    /* Refined muted tones */
+    --muted: oklch(0.18 0 0);
+    --muted-foreground: oklch(0.6 0 0);
+
+    /* Subtle accent */
+    --accent: oklch(0.2 0 0);
+    --accent-foreground: oklch(0.95 0 0);
+
+    /* Semantic colors - slightly brighter for dark mode */
+    --destructive: oklch(0.65 0.2 25);
+    --success: oklch(0.65 0.15 145);
+    --warning: oklch(0.75 0.14 80);
+    --info: oklch(0.65 0.14 250);
+
+    /* Refined borders and inputs - subtle white tint */
+    --border: oklch(1 0 0 / 12%);
+    --input: oklch(1 0 0 / 12%);
+    --ring: oklch(0.99 0 0);
+
+    /* Monochrome chart palette - inverted grayscale */
+    --chart-1: oklch(0.95 0 0);
+    --chart-2: oklch(0.75 0 0);
+    --chart-3: oklch(0.55 0 0);
+    --chart-4: oklch(0.4 0 0);
+    --chart-5: oklch(0.25 0 0);
+
+    /* Sidebar - subtle separation */
+    --sidebar: oklch(0.11 0 0);
+    --sidebar-foreground: oklch(0.95 0 0);
+    --sidebar-primary: oklch(0.99 0 0);
+    --sidebar-primary-foreground: oklch(0.09 0 0);
+    --sidebar-accent: oklch(0.18 0 0);
+    --sidebar-accent-foreground: oklch(0.95 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.99 0 0);
+  }
+}
+
+@theme inline {
+  --font-sans:
+    "Plus Jakarta Sans Variable", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* Letter spacing tokens */
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    line-height: 1.6;
+  }
+
+  /* Refined focus states for accessibility */
+  :focus-visible {
+    @apply outline-2 outline-offset-2 outline-ring;
+  }
+
+  /* Smooth scrolling */
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      scroll-behavior: smooth;
+    }
+  }
+
+  /* Selection styling */
+  ::selection {
+    @apply bg-foreground/10;
+  }
+
+  /* Typography - refined headings */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-semibold;
+    text-wrap: balance;
+  }
+
+  h1 {
+    @apply text-4xl;
+    letter-spacing: -0.05em;
+  }
+  h2 {
+    @apply text-3xl;
+    letter-spacing: -0.025em;
+  }
+  h3 {
+    @apply text-2xl;
+    letter-spacing: -0.025em;
+  }
+  h4 {
+    @apply text-xl;
+  }
+  h5 {
+    @apply text-lg;
+  }
+  h6 {
+    @apply text-base font-medium;
+  }
+
+  /* Paragraphs */
+  p {
+    text-wrap: pretty;
+  }
+}
+
+/* View Transitions API for smooth page transitions */
+@view-transition {
+  navigation: auto;
+}
+
+::view-transition-old(page-content) {
+  animation: fade-out 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+::view-transition-new(page-content) {
+  animation: fade-in 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Page content animation fallback for non-View Transitions browsers */
+[data-slot="page-layout"] {
+  view-transition-name: page-content;
+  animation: page-enter 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes page-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/tailwind.config.ts

@@ -0,0 +1,77 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: "class",
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  theme: {
+    extend: {
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+        xl: "var(--radius-xl)",
+      },
+      colors: {
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+        },
+        destructive: "var(--destructive)",
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)",
+        },
+        popover: {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)",
+        },
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+        },
+        sidebar: {
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          primary: "var(--sidebar-primary)",
+          "primary-foreground": "var(--sidebar-primary-foreground)",
+          accent: "var(--sidebar-accent)",
+          "accent-foreground": "var(--sidebar-accent-foreground)",
+          border: "var(--sidebar-border)",
+          ring: "var(--sidebar-ring)",
+        },
+      },
+      boxShadow: {
+        // Modern, subtle shadows for depth
+        subtle: "0 1px 2px 0 rgb(0 0 0 / 0.03)",
+        soft: "0 2px 8px -2px rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.03)",
+        elevated:
+          "0 4px 16px -4px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04)",
+        float:
+          "0 8px 32px -8px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.06)",
+      },
+      transitionTimingFunction: {
+        // Modern easing curves
+        smooth: "cubic-bezier(0.4, 0, 0.2, 1)",
+        bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      },
+      transitionDuration: {
+        "150": "150ms",
+        "200": "200ms",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;