@catalystsoftware/ui 1.0.0

package/data/tailwind.css

@@ -0,0 +1,431 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+      --background: 223, 84%, 5%;
+  --foreground: 0, 0%, 98%;
+  --card: 223, 84%, 5%;
+  --card-foreground: 0, 0%, 98%;
+  --popover: 223, 84%, 5%;
+  --popover-foreground: 223, 84%, 5%;
+  --primary: 217, 91%, 60%;
+  --primary-foreground:223, 84%, 5%;
+  --secondary: 215 25% 27%;
+  --secondary-foreground: 223, 84%, 5%;
+  --muted: 215 25% 27%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 215 25% 27%;
+  --accent-foreground: 223, 84%, 5%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 223, 84%, 5%;
+  --success: 166 54% 47%;
+  --success-foreground: 223, 84%, 5%;
+  --warning: 40 77% 49%;
+  --warning-foreground: 223, 84%, 5%;
+  --border: 215 25% 27%;
+  --input: 215 25% 27%;
+  --ring: 221 83% 53%;
+  --radius: 0.5rem;
+    --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: 221 39% 11%;
+    --sidebar-foreground: 220 20% 95%;
+    --sidebar-muted-foreground: 220 20% 95%;
+    --sidebar-primary: 217 91% 60%;
+    --sidebar-primary-foreground: 220 20% 98%;
+    --sidebar-accent: 220 30% 20%;
+    --sidebar-accent-foreground: 220 20% 95%;
+    --sidebar-border: 220 20% 25%;
+    --sidebar-ring: 217 91% 60%;
+    --special: 227 21% 8%;
+    --special-muted-background: 240 10% 4%;
+    --special-border: 240 4% 16%;
+    --special-foreground: 240 5% 84%;
+    --special-muted-foreground: 240 4% 46%;
+
+
+    
+     --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: 0 0% 9%;
+    --sidebar-foreground:  0 0% 98%;
+    --sidebar-primary: 0 0% 98%;
+    --sidebar-primary-foreground:0 0% 9%;
+    --sidebar-accent:  0 0% 14.9%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 14.9%;
+    --sidebar-ring:  0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes glimmer {
+  0% {
+    opacity: 0.1;
+  }
+
+  50% {
+    opacity: 0.6;
+  }
+
+  100% {
+    opacity: 0.1;
+  }
+}
+
+/* #dev */
+.no-select {
+  -webkit-user-select: none;
+  /* Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+/Edge */
+  user-select: none;
+  /* Standard */
+}
+/* #enddev */
+/* Allow text selection only when not dragging */
+.carousel-container {
+  user-select: none;
+}
+
+.carousel-container:active {
+  user-select: none;
+}
+
+
+/* Mimic Quill's button states */
+.toolbar-button {
+  transition: #020817 0.2s;
+}
+
+.toolbar-button:active {
+  background-color: hsl(var(--background));
+  /*#020817;*/
+  color: hsl(var(--primary));
+}
+
+/* Quill-like active state for format buttons */
+.format-active {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  /*#ffffff;*/
+}
+
+/* app/styles/markdown.css */
+.markdown-preview {
+  color: hsl(var(--foreground));
+  /* Uses your CSS variable */
+}
+
+/* Specific element styling */
+.markdown-preview h1,
+.markdown-preview h2,
+.markdown-preview h3 {
+  color: hsl(var(--primary));
+  /* Headings use primary color */
+}
+
+.markdown-preview a {
+  color: hsl(var(--primary));
+  /* Links use primary color */
+  text-decoration: underline;
+}
+
+.markdown-preview code {
+  background-color: hsl(var(--muted));
+  color: hsl(var(--primary));
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+}
+
+.markdown-preview pre {
+  background-color: hsl(var(--muted));
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+}
+
+/* Mermaid diagram sizing */
+.mermaid-react {
+  margin: 1rem 0;
+  min-height: 200px;
+  background: hsl(var(--background));
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+/* Math equation styling */
+.katex {
+  font-size: 1.1em;
+  padding: 0.5rem 0;
+}
+
+/* Dark mode support */
+.dark .mermaid-react {
+  background: hsl(var(--background));
+}
+
+/* Focus Mode Styling */
+.dimmed-line {
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
+}
+
+.focused-line {
+  opacity: 1;
+}
+
+/* Typewriter Mode Styling */
+[data-typewriter-mode] {
+  scroll-padding: 50vh;
+  /* Keeps active line centered */
+}
+
+
+.ToolbarPlugin__dialogActions {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.ToolbarPlugin__dialogButtonsList {
+  display: flex;
+  flex-direction: column;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.ToolbarPlugin__dialogButtonsList button {
+  margin-bottom: 20px;
+}
+
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Section styling */
+[data-observe-section] {
+  scroll-margin-top: 100px;
+  /* Account for fixed header */
+}
+
+/* In your global CSS file */
+.recharts-line path,
+.recharts-bar-rectangle {
+  stroke: hsl(var(--primary)) !important;
+  /* For line charts */
+  fill: hsl(var(--primary)) !important;
+  /* For bar charts */
+}
+
+/* For tooltips/legends */
+.recharts-tooltip,
+.recharts-legend-item {
+  color: var(--primary) !important;
+}
+
+.focus-mode-active {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px #007bff;
+}
+
+/* THESE ARE THE EXACT SELECTORS LEXICAL USES NOW */
+.table-cell {
+  width: 100%;
+  border: 1px solid var(--border);
+}
+
+table.EditorTheme__table td,
+table.EditorTheme__table th {
+  border: 1px solid var(--border) !important;
+  padding: 8px;
+  min-width: 75px;
+}
+
+table.EditorTheme__table th {
+  background: var(--muted);
+  font-weight: bold;
+}
+
+/* Add this to your global CSS or component-scoped styles */
+.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: hsl(var(--primary));
+  /* Use your CSS variable */
+  border-bottom: 1px solid hsl(var(--border));
+  padding-bottom: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1.25rem;
+  font-weight: 700;
+  /* More bold than original */
+  font-size: 1.25rem;
+  /* Maintain existing size */
+}
+
+/* Checked state */
+.prose :where(input[type="checkbox"]:checked):not(:where([class~="not-prose"] *)) {
+  background-color: hsl(var(--primary));
+  border-color: hsl(var(--primary));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.75em;
+}
+
+/* Disabled AND checked */
+.prose :where(input[type="checkbox"]:checked:disabled):not(:where([class~="not-prose"] *)) {
+  background-color: hsl(var(--primary));
+  border-color: hsl(var(--border));
+}
+
+/* Table header cells */
+.prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: hsl(var(--primary));
+  /* Using your primary color variable */
+  background-color: hsl(var(--muted)/0.5);
+  /* Semi-transparent muted bg */
+  font-weight: 600;
+  vertical-align: bottom;
+  padding: 0.5714286em;
+  border-bottom: 2px solid hsl(var(--border));
+}
+
+.move-mode-active {
+  transition: all 0.2s ease;
+}
+
+.move-mode-active .item {
+  cursor: grabbing !important;
+}
+
+.move-mode-active .item:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+
+.theme-overlay {
+  z-index: 2147483643 !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  background: rgba(0, 0, 0, 0.6) !important;
+}
+
+.theme-container {
+  z-index: 2147483644 !important;
+}
+
+.theme-buttons {
+  z-index: 2147483646 !important;
+}
+
+.theme-flying-theme {
+  z-index: 2147483647 !important;
+}
+
+.theme-main-button {
+  z-index: 2147483645 !important;
+}
+
+
+ 
+
+
+/* scroll bar */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: hsl(var(--muted));
+  border-radius: 0.25rem;
+
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--primary) / 0.3);
+  border-radius: 0.25rem;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--primary));
+}
+
+/* scroll bar - hidden by default */
+.scrollbar-hide::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+/* scroll bar - shown on hover */
+.scrollbar-show::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.scrollbar-show::-webkit-scrollbar-track {
+  background-color: hsl(var(--muted));
+  border-radius: 0.25rem;
+}
+
+.scrollbar-show::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--primary) / 0.3);
+  border-radius: 0.25rem;
+}
+
+.scrollbar-show::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--primary));
+}