@framed-dev/react 0.2.0 → 0.3.0

package/styles.css

@@ -1,525 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  * {
-    @apply border-wenge-300;
-  }
-
-  /* Force light color scheme to prevent system dark mode from affecting form elements */
-  :root {
-    color-scheme: light;
-  }
-
-  body {
-    @apply bg-white text-mirage;
-  }
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 1%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 1%;
-    --primary: 220 73% 79%;
-    --primary-foreground: 0 0% 1%;
-    --secondary: 230 30% 65%;
-    --secondary-foreground: 0 0% 1%;
-    --muted: 230 30% 95%;
-    --muted-foreground: 230 10% 40%;
-    --accent: 220 73% 79%;
-    --accent-foreground: 0 0% 1%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 20 17% 85%;
-    --input: 20 17% 85%;
-    --ring: 220 73% 79%;
-    --chart-1: 220 73% 79%;
-    --chart-2: 230 30% 65%;
-    --chart-3: 20 17% 40%;
-    --chart-4: 20 25% 31%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem
-  ;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 0 0% 1%;
-    --sidebar-primary: 220 73% 79%;
-    --sidebar-primary-foreground: 0 0% 1%;
-    --sidebar-accent: 220 73% 95%;
-    --sidebar-accent-foreground: 0 0% 1%;
-    --sidebar-border: 20 17% 85%;
-    --sidebar-ring: 220 73% 79%}
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
-  ;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%}
-}
-
-@layer components {
-  .btn {
-    @apply inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
-
-  .btn-primary {
-    @apply bg-powder-blue text-black h-12 px-6 shadow-sm hover:bg-powder-blue-500 hover:scale-[1.02] hover:shadow-md;
-  }
-
-  .btn-secondary {
-    @apply bg-transparent border-2 border-powder-blue text-powder-blue h-12 px-6 hover:bg-powder-blue-50;
-  }
-
-  .btn-text {
-    @apply bg-transparent text-powder-blue px-4 py-2 hover:bg-powder-blue-50;
-  }
-
-  .input {
-    @apply h-12 px-4 border-2 border-wenge-300 rounded-lg text-base bg-white
-           focus:border-powder-blue focus:ring-4 focus:ring-powder-blue-100 focus:outline-none
-           disabled:bg-wenge-100 disabled:cursor-not-allowed disabled:opacity-60;
-  }
-
-  .input-error {
-    @apply border-accent-error focus:ring-red-100;
-  }
-
-  .textarea {
-    @apply px-4 py-3 border-2 border-wenge-300 rounded-lg text-base bg-white resize-y
-           focus:border-powder-blue focus:ring-4 focus:ring-powder-blue-100 focus:outline-none
-           disabled:bg-wenge-100 disabled:cursor-not-allowed disabled:opacity-60;
-  }
-
-  .card {
-    @apply bg-white border border-wenge-300 rounded-xl p-6 shadow-sm;
-  }
-
-  .card-hover {
-    @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
-  }
-
-  .label {
-    @apply block text-sm font-medium text-mirage mb-2;
-  }
-
-  .error-message {
-    @apply text-sm text-accent-error mt-1;
-  }
-
-  .helper-text {
-    @apply text-sm text-mirage-100 mt-1;
-  }
-
-  /* Hide scrollbar but keep functionality */
-  .scrollbar-hide {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
-  }
-
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;  /* Chrome, Safari and Opera */
-  }
-
-  /* @Mention highlighting */
-  .mention {
-    @apply bg-blue-100 text-blue-700 px-1 py-0.5 rounded font-medium;
-  }
-
-  /* Premium Wizard Styles */
-  .wizard-card {
-    @apply relative bg-white rounded-2xl border border-gray-100 shadow-sm;
-    @apply transition-all duration-300;
-  }
-
-  .wizard-card:hover {
-    @apply shadow-lg;
-  }
-
-  .wizard-card--active {
-    @apply shadow-lg shadow-gray-100/50;
-  }
-
-  /* Premium gradient text */
-  .gradient-text {
-    @apply bg-gradient-to-r from-powder-blue-600 via-powder-blue-500 to-cool-gray-500;
-    @apply bg-clip-text text-transparent;
-  }
-
-  /* Smooth scroll behavior */
-  .scroll-smooth {
-    scroll-behavior: smooth;
-  }
-
-  /* Glass morphism effect */
-  .glass {
-    @apply bg-white/80 backdrop-blur-lg;
-  }
-
-  /* Subtle pulse animation for active states */
-  .pulse-soft {
-    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  @keyframes pulse-soft {
-    0%, 100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.8;
-    }
-  }
-
-  /* Floating animation */
-  .float {
-    animation: float 3s ease-in-out infinite;
-  }
-
-  @keyframes float {
-    0%, 100% {
-      transform: translateY(0);
-    }
-    50% {
-      transform: translateY(-5px);
-    }
-  }
-
-  /* Shimmer loading effect */
-  .shimmer {
-    @apply relative overflow-hidden;
-  }
-
-  .shimmer::after {
-    content: '';
-    @apply absolute inset-0;
-    transform: translateX(-100%);
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.4),
-      transparent
-    );
-    animation: shimmer 1.5s infinite;
-  }
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
-  /* Custom focus ring */
-  .focus-ring {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-powder-blue-400 focus-visible:ring-offset-2;
-  }
-
-  /* TipTap Editor Styles */
-  .tiptap {
-    @apply outline-none;
-  }
-
-  .tiptap p {
-    @apply my-3 text-stone-700 leading-relaxed;
-  }
-
-  .tiptap h1 {
-    @apply text-2xl font-semibold text-stone-900 mt-0 mb-4;
-  }
-
-  .tiptap h2 {
-    @apply text-xl font-semibold text-stone-900 mt-6 mb-3;
-  }
-
-  .tiptap h3 {
-    @apply text-lg font-semibold text-stone-900 mt-4 mb-2;
-  }
-
-  .tiptap h4 {
-    @apply text-base font-semibold text-stone-900 mt-4 mb-2;
-  }
-
-  .tiptap ul {
-    @apply list-disc list-inside my-3 space-y-1;
-  }
-
-  .tiptap ol {
-    @apply list-decimal list-inside my-3 space-y-1;
-  }
-
-  .tiptap li {
-    @apply text-stone-700;
-  }
-
-  .tiptap a {
-    @apply text-amber-600 hover:underline;
-  }
-
-  .tiptap strong {
-    @apply font-semibold;
-  }
-
-  .tiptap em {
-    @apply italic;
-  }
-
-  .tiptap blockquote {
-    @apply border-l-4 border-stone-300 pl-4 my-4 italic text-stone-600;
-  }
-
-  .tiptap code {
-    @apply bg-stone-100 px-1.5 py-0.5 rounded text-sm font-mono;
-  }
-
-  .tiptap pre {
-    @apply bg-stone-100 p-4 rounded-lg my-4 overflow-x-auto;
-  }
-
-  .tiptap pre code {
-    @apply bg-transparent p-0;
-  }
-
-  /* TipTap placeholder */
-  .tiptap p.is-editor-empty:first-child::before {
-    @apply text-stone-400 pointer-events-none float-left h-0;
-    content: attr(data-placeholder);
-  }
-
-  /* Track changes styles - inline marks */
-  .tiptap .track-delete {
-    @apply bg-red-100 text-red-700 line-through decoration-red-500/70 decoration-2 px-0.5 rounded-sm;
-    text-decoration-thickness: 2px;
-  }
-
-  .tiptap .track-insert {
-    @apply bg-emerald-100 text-emerald-800 no-underline px-0.5 rounded-sm;
-    border-bottom: 2px solid rgb(16 185 129 / 0.5);
-  }
-
-  /* Hover state for track changes to show accept/reject */
-  .tiptap .track-delete:hover,
-  .tiptap .track-insert:hover {
-    @apply ring-2 ring-offset-1 ring-amber-400 cursor-pointer;
-  }
-
-  /* Selected track change */
-  .tiptap .track-delete::selection,
-  .tiptap .track-insert::selection {
-    @apply bg-amber-200;
-  }
-
-  /* Editable paragraph hover state */
-  .tiptap-editable p:hover {
-    @apply bg-stone-50 -mx-2 px-2 rounded cursor-text transition-colors;
-  }
-
-  /* Currently editing paragraph */
-  .tiptap-editable p:focus,
-  .tiptap-editable p.is-active {
-    @apply bg-amber-50 -mx-2 px-2 rounded outline-none ring-1 ring-amber-300;
-  }
-
-  /* ================================
-   * Phase 5 Command Center Dark Theme
-   * ================================ */
-
-  /* Dark theme container */
-  .command-center {
-    --cc-bg: #0a0a0f;
-    --cc-bg-elevated: #0c0c12;
-    --cc-bg-card: #12121a;
-    --cc-border: rgba(255, 255, 255, 0.05);
-    --cc-border-hover: rgba(255, 255, 255, 0.1);
-    --cc-text: rgba(255, 255, 255, 0.9);
-    --cc-text-muted: rgba(255, 255, 255, 0.5);
-    --cc-text-subtle: rgba(255, 255, 255, 0.3);
-    --cc-accent: #8b5cf6;
-    --cc-accent-hover: #a78bfa;
-  }
-
-  /* Dark scrollbar for Phase 5 */
-  .dark-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  .dark-scrollbar::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 3px;
-  }
-
-  .dark-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-  }
-
-  .dark-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.15);
-  }
-
-  /* Glow effects for important elements */
-  .glow-violet {
-    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
-  }
-
-  .glow-amber {
-    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
-  }
-
-  .glow-emerald {
-    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
-  }
-
-  .glow-rose {
-    box-shadow: 0 0 20px rgba(244, 63, 94, 0.15);
-  }
-
-  /* Gradient borders for cards */
-  .gradient-border {
-    position: relative;
-    background: linear-gradient(var(--cc-bg-card), var(--cc-bg-card)) padding-box,
-                linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1), transparent) border-box;
-    border: 1px solid transparent;
-  }
-
-  /* Kanban column drop target */
-  .kanban-drop-target {
-    @apply transition-all duration-200;
-  }
-
-  .kanban-drop-target.is-over {
-    @apply bg-violet-500/10 border-violet-500/30 scale-[1.01];
-  }
-
-  /* Dragging card styles */
-  .dragging-card {
-    @apply shadow-2xl shadow-violet-500/20 rotate-2 scale-105;
-  }
-
-  /* Priority pulse animation */
-  .priority-pulse-critical {
-    animation: priority-pulse 2s ease-in-out infinite;
-  }
-
-  @keyframes priority-pulse {
-    0%, 100% {
-      box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
-    }
-    50% {
-      box-shadow: 0 0 0 8px rgba(244, 63, 94, 0);
-    }
-  }
-
-  /* Quote status gradient backgrounds */
-  .quote-pending {
-    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
-  }
-
-  .quote-approved {
-    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
-  }
-
-  .quote-rejected {
-    background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(244, 63, 94, 0.05));
-  }
-
-  /* Slide-in drawer animation */
-  .drawer-enter {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
-  .drawer-enter-active {
-    transform: translateX(0);
-    opacity: 1;
-    transition: transform 300ms ease-out, opacity 200ms ease-out;
-  }
-
-  .drawer-exit {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  .drawer-exit-active {
-    transform: translateX(100%);
-    opacity: 0;
-    transition: transform 300ms ease-in, opacity 200ms ease-in;
-  }
-
-  /* Command palette backdrop blur */
-  .command-palette-backdrop {
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-  }
-
-  /* Subtle grid pattern for backgrounds */
-  .grid-pattern {
-    background-image:
-      linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-    background-size: 24px 24px;
-  }
-
-  /* Status column header gradients */
-  .status-header-backlog {
-    background: linear-gradient(90deg, rgba(100, 116, 139, 0.15), transparent);
-  }
-
-  .status-header-scheduled {
-    background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), transparent);
-  }
-
-  .status-header-in_progress {
-    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent);
-  }
-
-  .status-header-review {
-    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), transparent);
-  }
-
-  .status-header-completed {
-    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), transparent);
-  }
-
-  .status-header-wont_fix {
-    background: linear-gradient(90deg, rgba(244, 63, 94, 0.15), transparent);
-  }
-}
-
-
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}