@leanspec/ui 0.2.8 → 0.2.9

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/globals.css

@@ -0,0 +1,531 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+
+  /* Override Tailwind's default border color to use theme variable */
+  * {
+    border-color: hsl(var(--border));
+  }
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Smooth transitions */
+* {
+  @apply transition-colors duration-150 ease-in-out;
+}
+
+/* Remove transition from transform for better performance */
+*:where([class*="transform"], [class*="scale"], [class*="translate"]) {
+  @apply transition-all duration-150 ease-in-out;
+}
+
+/* Disable transitions for theme changes to prevent flash */
+html.changing-theme * {
+  transition: none !important;
+}
+
+/* Syntax highlighting - VS Code inspired theme */
+.hljs {
+  background: hsl(220 13% 96%);
+  color: hsl(220 14% 10%);
+  padding: 1.25rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  border: 1px solid hsl(220 13% 91%);
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: hsl(220 10% 40%);
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: hsl(286 60% 50%);
+  font-weight: 600;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: hsl(207 82% 45%);
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: hsl(95 38% 40%);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: hsl(29 54% 45%);
+  font-weight: 600;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: hsl(39 67% 50%);
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: hsl(355 65% 55%);
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: hsl(187 47% 45%);
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: hsl(41 53% 50%);
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: hsl(187 47% 45%);
+}
+
+.hljs-meta {
+  color: hsl(220 14% 40%);
+}
+
+.hljs-deletion {
+  background: hsl(0 100% 90%);
+  color: hsl(0 100% 30%);
+}
+
+.hljs-addition {
+  background: hsl(120 100% 90%);
+  color: hsl(120 100% 25%);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: 700;
+}
+
+/* Syntax highlighting - Dark mode */
+.dark .hljs {
+  background: hsl(220 13% 14%);
+  color: hsl(220 14% 96%);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  border-color: hsl(220 13% 20%);
+}
+
+.dark .hljs-comment,
+.dark .hljs-quote {
+  color: hsl(220 10% 45%);
+}
+
+.dark .hljs-keyword,
+.dark .hljs-selector-tag,
+.dark .hljs-subst {
+  color: hsl(286 60% 72%);
+}
+
+.dark .hljs-number,
+.dark .hljs-literal,
+.dark .hljs-variable,
+.dark .hljs-template-variable,
+.dark .hljs-tag .hljs-attr {
+  color: hsl(207 82% 71%);
+}
+
+.dark .hljs-string,
+.dark .hljs-doctag {
+  color: hsl(95 38% 67%);
+}
+
+.dark .hljs-title,
+.dark .hljs-section,
+.dark .hljs-selector-id {
+  color: hsl(29 54% 66%);
+}
+
+.dark .hljs-type,
+.dark .hljs-class .hljs-title {
+  color: hsl(39 67% 74%);
+}
+
+.dark .hljs-tag,
+.dark .hljs-name,
+.dark .hljs-attribute {
+  color: hsl(355 65% 70%);
+}
+
+.dark .hljs-regexp,
+.dark .hljs-link {
+  color: hsl(187 47% 60%);
+}
+
+.dark .hljs-symbol,
+.dark .hljs-bullet {
+  color: hsl(41 53% 72%);
+}
+
+.dark .hljs-built_in,
+.dark .hljs-builtin-name {
+  color: hsl(187 47% 60%);
+}
+
+.dark .hljs-meta {
+  color: hsl(220 14% 76%);
+}
+
+.dark .hljs-deletion {
+  background: hsl(0 100% 25%);
+  color: hsl(0 100% 90%);
+}
+
+.dark .hljs-addition {
+  background: hsl(120 100% 25%);
+  color: hsl(120 100% 90%);
+}
+
+/* Prose styling for markdown content */
+.prose {
+  max-width: none;
+  color: hsl(222.2 84% 4.9%);
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+/* Mobile-specific prose adjustments */
+@media (max-width: 640px) {
+  .prose {
+    font-size: 0.9375rem;
+    line-height: 1.65;
+  }
+  
+  .prose h1 { font-size: 1.75em; }
+  .prose h2 { font-size: 1.5em; }
+  .prose h3 { font-size: 1.25em; }
+  .prose h4 { font-size: 1.125em; }
+  
+  .prose pre {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    border-radius: 0;
+  }
+  
+  .prose table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin-top: 2em;
+  margin-bottom: 0.75em;
+  color: hsl(222.2 84% 4.9%);
+  scroll-margin-top: 5rem;
+}
+
+.prose h1 { 
+  font-size: 2.25em; 
+  margin-top: 0;
+  border-bottom: 1px solid hsl(214.3 31.8% 91.4%);
+  padding-bottom: 0.3em;
+}
+
+.prose h2 { 
+  font-size: 1.875em;
+  border-bottom: 1px solid hsl(214.3 31.8% 91.4%);
+  padding-bottom: 0.3em;
+}
+
+.prose h3 { font-size: 1.5em; }
+.prose h4 { font-size: 1.25em; }
+.prose h5 { font-size: 1.125em; }
+.prose h6 { font-size: 1em; }
+
+.prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  line-height: 1.75;
+}
+
+.prose a {
+  color: hsl(221 83% 53%);
+  text-decoration: underline;
+  text-decoration-color: hsl(221 83% 53% / 0.3);
+  transition: all 0.2s;
+}
+
+.prose a:hover {
+  text-decoration-color: hsl(221 83% 53%);
+  color: hsl(221 83% 43%);
+}
+
+.prose :not(pre) > code {
+  background: hsl(220 13% 95%);
+  color: hsl(355 65% 45%);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-weight: 600;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  border: 1px solid hsl(220 13% 88%);
+}
+
+.prose pre {
+  margin: 1.75em 0;
+  overflow-x: auto;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  border: 1px solid hsl(220 13% 91%);
+}
+
+.prose pre code {
+  background: transparent !important;
+  border-radius: 0 !important;
+  border: none !important;
+  font-size: 0.875em;
+  line-height: 1.7;
+  color: inherit;
+  font-weight: 400;
+  display: block;
+}
+
+.prose ul, .prose ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  padding-left: 1.625em;
+}
+
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose blockquote {
+  border-left: 4px solid hsl(221 83% 53%);
+  padding-left: 1em;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  margin: 1.5em 0;
+  background: hsl(210 40% 98%);
+  border-radius: 0 0.25rem 0.25rem 0;
+  color: hsl(215.4 16.3% 36.9%);
+}
+
+.prose blockquote p {
+  margin: 0.5em 0;
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5em 0;
+}
+
+.prose th, .prose td {
+  border: 1px solid hsl(214.3 31.8% 91.4%);
+  padding: 0.5em 1em;
+  text-align: left;
+}
+
+.prose th {
+  background: hsl(var(--muted));
+  font-weight: 600;
+  color: hsl(var(--muted-foreground));
+}
+
+.prose hr {
+  border: none;
+  border-top: 1px solid hsl(214.3 31.8% 91.4%);
+  margin: 2em 0;
+}
+
+.prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 1.5em 0;
+}
+
+.prose strong,
+.prose b {
+  font-weight: 600;
+  color: hsl(222.2 84% 4.9%);
+}
+
+/* Dark mode prose styling */
+.dark .prose {
+  color: hsl(210 40% 98%);
+}
+
+.dark .prose strong,
+.dark .prose b {
+  font-weight: 600;
+  color: hsl(210 40% 98%);
+}
+
+.dark .prose h1,
+.dark .prose h2,
+.dark .prose h3,
+.dark .prose h4,
+.dark .prose h5,
+.dark .prose h6 {
+  color: hsl(210 40% 98%);
+}
+
+.dark .prose h1,
+.dark .prose h2 {
+  border-bottom-color: hsl(217.2 32.6% 17.5%);
+}
+
+.dark .prose a {
+  color: hsl(217 91% 70%);
+  text-decoration-color: hsl(217 91% 70% / 0.3);
+}
+
+.dark .prose a:hover {
+  text-decoration-color: hsl(217 91% 70%);
+  color: hsl(217 91% 80%);
+}
+
+.dark .prose :not(pre) > code {
+  background: hsl(220 13% 18%);
+  color: hsl(355 65% 70%);
+  border-color: hsl(220 13% 25%);
+  font-weight: 600;
+}
+
+.dark .prose pre {
+  border-color: hsl(220 13% 20%);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+}
+
+.dark .prose blockquote {
+  border-left-color: hsl(217 91% 70%);
+  background: hsl(217.2 32.6% 12%);
+  color: hsl(215 20% 75%);
+}
+
+.dark .prose th, .dark .prose td {
+  border-color: hsl(217.2 32.6% 17.5%);
+}
+
+.dark .prose th {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+.dark .prose hr {
+  border-top-color: hsl(217.2 32.6% 17.5%);
+}
+
+/* Custom scrollbar styles */
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+  }
+  
+  .scrollbar-thumb-muted-foreground\/20::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.2);
+  }
+  
+  .scrollbar-thumb-muted-foreground\/40::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.4);
+  }
+  
+  .scrollbar-track-transparent::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  
+  .hover\:scrollbar-thumb-muted-foreground\/40:hover::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.4);
+  }
+  
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.2);
+    border-radius: 4px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground) / 0.4);
+  }
+  
+  /* Prevent horizontal scrolling where needed */
+  .overflow-x-hidden {
+    overflow-x: hidden !important;
+  }
+}