@weave-design-system/react 0.1.0

package/src/tokens/weave-theme.css

@@ -0,0 +1,168 @@
+@import "tailwindcss";
+
+@theme {
+  /* ── Colors — Neutrals ── */
+  --color-bg: #FAF7F2;
+  --color-surface: #F0EBE3;
+  --color-border: #D9D2C7;
+  --color-text-primary: #2C2825;
+  --color-text-secondary: #6B635A;
+  --color-white: #FFFFFF;
+
+  /* ── Colors — Primary (Rust) ── */
+  --color-rust: #B85C38;
+  --color-rust-light: #F0D5C5;
+  --color-rust-dark: #8E4429;
+
+  /* ── Colors — Secondary (Forest) ── */
+  --color-forest: #3D6B5E;
+  --color-forest-light: #D4E5DF;
+
+  /* ── Colors — Semantic ── */
+  --color-success: #5E8A6B;
+  --color-success-light: #DDE9E0;
+  --color-warning: #C49A3C;
+  --color-warning-light: #F5EDD4;
+  --color-error: #B84A3C;
+  --color-error-light: #F3D9D5;
+  --color-info: #7A8A9A;
+  --color-info-light: #E0E5EA;
+
+  /* ── Colors — Delight ── */
+  --color-saffron: #D4923A;
+  --color-saffron-light: #F5E3C8;
+
+  /* ── Typography — Font Families ── */
+  --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* ── Typography — Font Sizes ── */
+  --text-display: 2.5rem;
+  --text-h1: 2rem;
+  --text-h2: 1.625rem;
+  --text-h3: 1.375rem;
+  --text-body-lg: 1.125rem;
+  --text-body: 1rem;
+  --text-body-sm: 0.875rem;
+  --text-caption: 0.75rem;
+  --text-code: 0.875rem;
+
+  /* ── Typography — Line Heights ── */
+  --leading-display: 48px;
+  --leading-h1: 40px;
+  --leading-h2: 34px;
+  --leading-h3: 30px;
+  --leading-body-lg: 28px;
+  --leading-body: 24px;
+  --leading-body-sm: 20px;
+  --leading-caption: 16px;
+  --leading-code: 22px;
+
+  /* ── Spacing (4px base grid) ── */
+  --spacing: 4px;
+
+  /* ── Border Radius ── */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+
+  /* ── Elevation / Shadows (warm-tinted) ── */
+  --shadow-1: 0 1px 3px rgba(44, 40, 37, 0.06);
+  --shadow-2: 0 4px 12px rgba(44, 40, 37, 0.08);
+  --shadow-3: 0 8px 24px rgba(44, 40, 37, 0.12);
+  --shadow-4: 0 16px 48px rgba(44, 40, 37, 0.16);
+
+  /* ── Easing ── */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ── Animations ── */
+  --animate-skeleton-pulse: skeleton-pulse 2s ease-in-out infinite;
+  --animate-spin: spin 1s linear infinite;
+  --animate-fade-in: fade-in var(--duration-slow) var(--ease-out);
+  --animate-fade-out: fade-out var(--duration-fast) var(--ease-in);
+  --animate-scale-in: scale-in var(--duration-slow) var(--ease-out);
+  --animate-slide-in-right: slide-in-right var(--duration-normal) var(--ease-out);
+  --animate-slide-in-up: slide-in-up var(--duration-normal) var(--ease-out);
+  --animate-saffron-pulse: saffron-pulse var(--duration-slow) ease-in-out;
+  --animate-accordion-down: accordion-down var(--duration-normal) var(--ease-out);
+  --animate-accordion-up: accordion-up var(--duration-normal) var(--ease-in);
+
+  @keyframes skeleton-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes slide-in-right {
+    from { opacity: 0; transform: translateX(100%); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @keyframes slide-in-up {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes saffron-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 transparent; }
+    50% { box-shadow: 0 0 0 4px var(--color-saffron-light); }
+  }
+
+  @keyframes accordion-down {
+    from { height: 0; opacity: 0; }
+    to { height: var(--accordion-height); opacity: 1; }
+  }
+
+  @keyframes accordion-up {
+    from { height: var(--accordion-height); opacity: 1; }
+    to { height: 0; opacity: 0; }
+  }
+
+  /* ── Breakpoints ── */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}
+
+/* ── Motion Durations (plain :root, not @theme) ── */
+:root {
+  --duration-micro: 100ms;
+  --duration-fast: 200ms;
+  --duration-normal: 350ms;
+  --duration-slow: 500ms;
+}
+
+/* ── Reduced Motion: collapse all durations ── */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-micro: 0ms;
+    --duration-fast: 0ms;
+    --duration-normal: 0ms;
+    --duration-slow: 0ms;
+  }
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { cn } from './cn';