@papernote/ui 1.13.0 → 2.0.0

package/src/styles/index.css

@@ -3,9 +3,12 @@
 /* Component styles */
 @import '../components/Spreadsheet.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "./theme.css";
+
+/* Content sources for class detection */
+@source "../components/**/*.{tsx,ts}";
+@source inline("bg-sky-100 bg-sky-50 bg-sky-100/50 bg-amber-100 bg-amber-50 bg-amber-100/50 bg-emerald-100 bg-emerald-50 bg-emerald-100/50 bg-pink-100 bg-pink-50 bg-pink-100/50");
 
 @layer base {
   body {
@@ -47,7 +50,7 @@
 
   /* Input Styles - Comfortable & Clear */
   .input {
-    @apply block w-full px-4 py-2.5 border border-paper-300 rounded-lg text-sm text-ink-800 placeholder-ink-400 bg-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400 hover:border-paper-400;
+    @apply block w-full px-4 py-2.5 border border-paper-300 rounded-lg text-sm text-ink-800 placeholder:text-ink-400 bg-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400 hover:border-paper-400;
   }
 
   .label {
@@ -84,27 +87,6 @@
     @apply bg-primary-50 text-primary-700 border border-primary-200;
   }
 
-  /* Table Styles - Clean & Minimal */
-  .table {
-    @apply min-w-full divide-y divide-paper-200;
-  }
-
-  .table-header {
-    @apply bg-paper-50;
-  }
-
-  .table-header-cell {
-    @apply px-6 py-3 text-left text-xs font-medium text-ink-500 uppercase tracking-wider;
-  }
-
-  .table-cell {
-    @apply px-6 py-4 whitespace-nowrap text-sm text-ink-700;
-  }
-
-  .table-row {
-    @apply hover:bg-paper-50 transition-colors duration-150;
-  }
-
   /* Navigation Styles - Notebook-like */
   .nav-link {
     @apply flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200;
@@ -140,7 +122,7 @@
   }
 
   input:checked + .slider:before {
-    @apply transform translate-x-5;
+    @apply translate-x-5;
   }
 
   /* Stat Card Styles - Paper-like */
@@ -316,56 +298,33 @@
   }
 }
 
-@layer utilities {
-  .line-clamp-1 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
-  
-  .line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  
-  .line-clamp-3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-
-  .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-  
-  .scrollbar-hide::-webkit-scrollbar {
+/* Custom utilities */
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
     display: none;
   }
+}
 
-  .text-shadow {
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
+@utility text-shadow {
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
 
-  .bg-gradient-primary {
-    background: linear-gradient(135deg, #64748b, #475569);
-  }
+@utility bg-gradient-primary {
+  background: linear-gradient(135deg, #64748b, #475569);
+}
 
-  .bg-gradient-success {
-    background: linear-gradient(135deg, #10b981, #059669);
-  }
+@utility bg-gradient-success {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
 
-  .bg-gradient-warning {
-    background: linear-gradient(135deg, #f59e0b, #d97706);
-  }
+@utility bg-gradient-warning {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+}
 
-  .bg-gradient-accent {
-    background: linear-gradient(135deg, #f59e0b, #d97706);
-  }
+@utility bg-gradient-accent {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
 }
 
 /* Custom scrollbar - Subtle paper aesthetic */
@@ -388,21 +347,7 @@
   background: #a8a29e;
 }
 
-/* Loading animations */
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: .5;
-  }
-}
-
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-/* Table styles - Clean & minimal */
+/* Table styles - Clean & minimal (un-layered for higher specificity) */
 .table {
   @apply min-w-full divide-y divide-paper-200;
 }
@@ -429,35 +374,33 @@
 }
 
 .table-stable {
-  @apply table-fixed;
-  /* Removed min-height to allow content-based sizing for two-row layout */
+  table-layout: fixed !important;
 }
 
-  .table-stable thead {
-    height: auto !important;
-  }
+.table-stable thead {
+  height: auto !important;
+}
 
-  .table-stable thead th {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background-color: #fafaf9;
-    backdrop-filter: blur(8px);
-    /* padding controlled by component density classes (currentDensity.header) */
-    height: 28px !important;
-    min-height: 28px !important;
-    max-height: 28px !important;
-    line-height: 1 !important;
-    vertical-align: middle !important;
-    overflow: hidden !important;
-    box-sizing: border-box !important;
-    font-size: 0.75rem !important;
-    border-bottom: 1px solid #e7e5e4;
-  }
+.table-stable thead th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #fafaf9;
+  backdrop-filter: blur(8px);
+  height: 28px !important;
+  min-height: 28px !important;
+  max-height: 28px !important;
+  line-height: 1 !important;
+  vertical-align: middle !important;
+  overflow: hidden !important;
+  box-sizing: border-box !important;
+  font-size: 0.75rem !important;
+  border-bottom: 1px solid #e7e5e4;
+}
 
 /* Primary rows with normal content */
 .table-stable tbody tr {
-  height: auto; /* Allow content-based sizing for two-row layout */
+  height: auto;
 }
 
 /* Secondary rows should be compact */
@@ -534,59 +477,6 @@
   overflow: hidden;
 }
 
-/* Drawer Slide Animations */
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInTop {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInBottom {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-.animate-slide-in-left {
-  animation: slideInLeft 0.3s ease-out;
-}
-
-.animate-slide-in-right {
-  animation: slideInRight 0.3s ease-out;
-}
-
-.animate-slide-in-top {
-  animation: slideInTop 0.3s ease-out;
-}
-
-.animate-slide-in-bottom {
-  animation: slideInBottom 0.3s ease-out;
-}
-
 /* Touch-friendly sizing for coarse pointer devices (touch screens) */
 @media (pointer: coarse) {
   /* Ensure buttons meet 48px minimum touch target on touch devices */

package/src/styles/theme.css

@@ -0,0 +1,302 @@
+/*
+ * @papernote/ui Design Tokens — Tailwind CSS v4 Theme
+ *
+ * This file is the CSS-first equivalent of tailwind.config.js.
+ * Consumers on Tailwind v4 import this via: @import "@papernote/ui/theme";
+ */
+
+@theme {
+  /* === Colors: Primary (Warm Slate — ink on paper feel) === */
+  --color-primary-50: #f8fafc;
+  --color-primary-100: #f1f5f9;
+  --color-primary-200: #e2e8f0;
+  --color-primary-300: #cbd5e1;
+  --color-primary-400: #94a3b8;
+  --color-primary-500: #64748b;
+  --color-primary-600: #475569;
+  --color-primary-700: #334155;
+  --color-primary-800: #1e293b;
+  --color-primary-900: #0f172a;
+  --color-primary-950: #020617;
+
+  /* === Colors: Accent (Subtle warm tone, Claude-like) === */
+  --color-accent-50: #fafaf8;
+  --color-accent-100: #f5f5f0;
+  --color-accent-200: #e8e7e0;
+  --color-accent-300: #d4d2c8;
+  --color-accent-400: #a8a599;
+  --color-accent-500: #8b8878;
+  --color-accent-600: #6e6d5e;
+  --color-accent-700: #565548;
+  --color-accent-800: #3f3e35;
+  --color-accent-900: #2a2922;
+
+  /* === Colors: Success (Muted emerald green) === */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-400: #4ade80;
+  --color-success-500: #10b981;
+  --color-success-600: #059669;
+  --color-success-700: #047857;
+  --color-success-800: #065f46;
+  --color-success-900: #064e3b;
+
+  /* === Colors: Warning (Soft amber) === */
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+
+  /* === Colors: Error (Muted red) === */
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-400: #f87171;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+  --color-error-800: #991b1b;
+  --color-error-900: #7f1d1d;
+
+  /* === Colors: Paper (Warm off-white backgrounds) === */
+  --color-paper-50: #fafaf9;
+  --color-paper-100: #f5f5f4;
+  --color-paper-200: #e7e5e4;
+  --color-paper-300: #d6d3d1;
+  --color-paper-400: #a8a29e;
+
+  /* === Colors: Ink (Text colors — warm grays) === */
+  --color-ink-50: #fafaf9;
+  --color-ink-100: #f5f5f4;
+  --color-ink-200: #e7e5e4;
+  --color-ink-300: #d6d3d1;
+  --color-ink-400: #a8a29e;
+  --color-ink-500: #78716c;
+  --color-ink-600: #57534e;
+  --color-ink-700: #44403c;
+  --color-ink-800: #292524;
+  --color-ink-900: #1c1917;
+
+  /* === Colors: Neutral (Backwards compatibility) === */
+  --color-neutral-25: #fcfcfd;
+  --color-neutral-50: #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+  --color-neutral-950: #020617;
+
+  /* === Font Families === */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'Fira Code', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /* === Font Sizes (with line-heights) === */
+  --text-2xs: 0.625rem;
+  --text-2xs--line-height: 0.875rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.125rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.375rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.625rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.875rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 2rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2.25rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.5rem;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.75rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 3.25rem;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  /* === Spacing === */
+  --spacing-4_5: 1.125rem;
+  --spacing-5_5: 1.375rem;
+  --spacing-6_5: 1.625rem;
+  --spacing-7_5: 1.875rem;
+  --spacing-8_5: 2.125rem;
+  --spacing-9_5: 2.375rem;
+  --spacing-17: 4.25rem;
+  --spacing-18: 4.5rem;
+  --spacing-19: 4.75rem;
+  --spacing-21: 5.25rem;
+  --spacing-22: 5.5rem;
+  --spacing-23: 5.75rem;
+  --spacing-25: 6.25rem;
+  --spacing-26: 6.5rem;
+  --spacing-27: 6.75rem;
+  --spacing-29: 7.25rem;
+  --spacing-30: 7.5rem;
+  --spacing-31: 7.75rem;
+  --spacing-33: 8.25rem;
+  --spacing-34: 8.5rem;
+  --spacing-35: 8.75rem;
+  --spacing-touch-sm: 2.25rem;
+  --spacing-touch: 2.75rem;
+  --spacing-touch-lg: 3rem;
+
+  /* === Border Radius === */
+  --radius-4xl: 2rem;
+  --radius-5xl: 2.5rem;
+
+  /* === Box Shadow === */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 2px 4px 0 rgb(0 0 0 / 0.06);
+  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.08);
+  --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 20px 25px -5px rgb(0 0 0 / 0.12);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.04);
+  --shadow-paper: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  --shadow-card: 0 2px 4px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.02);
+
+  /* === Backdrop Blur === */
+  --backdrop-blur-xs: 2px;
+
+  /* === Background Images === */
+  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+  --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
+  --background-image-grid-pattern: url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23e2e8f0' fill-opacity='0.4'%3e%3ccircle cx='30' cy='30' r='1.5'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
+  --background-image-paper-texture: url("data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3e%3c/svg%3e");
+  --background-image-subtle-grain: url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3e%3c/svg%3e");
+
+  /* === Animations === */
+  --animate-fade-in: fade-in 0.5s ease-in-out;
+  --animate-fade-in-up: fade-in-up 0.5s ease-out;
+  --animate-slide-in: slide-in 0.3s ease-out;
+  --animate-slide-in-right: slide-in-right 0.3s ease-out;
+  --animate-slide-in-left: slide-in-left 0.3s ease-out;
+  --animate-slide-in-bottom: slide-in-bottom 0.3s ease-out;
+  --animate-slide-in-top: slide-in-top 0.3s ease-out;
+  --animate-slide-out-right: slide-out-right 0.3s ease-in;
+  --animate-slide-out-left: slide-out-left 0.3s ease-in;
+  --animate-slide-out-bottom: slide-out-bottom 0.3s ease-in;
+  --animate-slide-out-top: slide-out-top 0.3s ease-in;
+  --animate-bounce-subtle: bounce-subtle 2s infinite;
+  --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-shimmer: shimmer 2s linear infinite;
+  --animate-float: float 6s ease-in-out infinite;
+  --animate-scale-in: scale-in 0.2s ease-out;
+  --animate-scale-out: scale-out 0.2s ease-in;
+  --animate-row-flash: row-flash 2s ease-out;
+  --animate-success-check: success-check 0.6s ease-out;
+}
+
+/* === Keyframes === */
+
+@keyframes fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes fade-in-up {
+  0% { opacity: 0; transform: translateY(10px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slide-in {
+  0% { transform: translateX(-10px); opacity: 0; }
+  100% { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slide-in-right {
+  0% { transform: translateX(100%); opacity: 0; }
+  100% { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slide-in-left {
+  0% { transform: translateX(-100%); opacity: 0; }
+  100% { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slide-in-bottom {
+  0% { transform: translateY(100%); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slide-in-top {
+  0% { transform: translateY(-100%); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slide-out-right {
+  0% { transform: translateX(0); opacity: 1; }
+  100% { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes slide-out-left {
+  0% { transform: translateX(0); opacity: 1; }
+  100% { transform: translateX(-100%); opacity: 0; }
+}
+
+@keyframes slide-out-bottom {
+  0% { transform: translateY(0); opacity: 1; }
+  100% { transform: translateY(100%); opacity: 0; }
+}
+
+@keyframes slide-out-top {
+  0% { transform: translateY(0); opacity: 1; }
+  100% { transform: translateY(-100%); opacity: 0; }
+}
+
+@keyframes bounce-subtle {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-2px); }
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes scale-in {
+  0% { transform: scale(0.9); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes scale-out {
+  0% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(0.9); opacity: 0; }
+}
+
+@keyframes row-flash {
+  0% { background-color: rgb(187 247 208); }
+  25% { background-color: rgb(187 247 208); }
+  100% { background-color: transparent; }
+}
+
+@keyframes success-check {
+  0% { transform: scale(0); opacity: 0; }
+  50% { transform: scale(1.2); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}