@tolle_/tolle-ui 0.0.19-beta → 0.0.22-beta

package/theme.css

@@ -1,208 +1,229 @@
 /* -------------------------------------------------------------------------- */
-/* 1. TAILWIND & CDK CORE IMPORTS                                             */
+/* 1. TAILWIND DIRECTIVES (MUST COME FIRST)                                   */
 /* -------------------------------------------------------------------------- */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 /* -------------------------------------------------------------------------- */
-/* 2. THEME VARIABLES (The Engine) - WITH FULL PALETTE                        */
+/* 2. THEME VARIABLES (CSS CUSTOM PROPERTIES)                                 */
 /* -------------------------------------------------------------------------- */
 :root {
-  /* --- Configuration (Source of Truth) --- */
-  --primary: #2563eb;
+  /* --- Core Colors --- */
+  --background: 255 255 255;
+  --foreground: 10 10 10;
+  --card: 255 255 255;
+  --card-foreground: 10 10 10;
+  --popover: 255 255 255;
+  --popover-foreground: 10 10 10;
+
+  /* --- Primary Colors --- */
+  --primary: 37 99 235;          /* #2563eb in RGB */
+  --primary-foreground: 255 255 255;
+
+  /* --- Semantic Colors --- */
+  --secondary: 244 244 245;      /* #f4f4f5 in RGB */
+  --secondary-foreground: 24 24 27;
+  --muted: 244 244 245;
+  --muted-foreground: 113 113 122;
+  --accent: 244 244 245;
+  --accent-foreground: 24 24 27;
+  --destructive: 239 68 68;      /* #ef4444 in RGB */
+  --destructive-foreground: 250 250 250;
+
+  /* --- UI Elements --- */
+  --border: 228 228 231;         /* #e4e4e7 in RGB */
+  --input: 228 228 231;
+  --ring: 96 165 250;            /* #60a5fa in RGB - lighter blue */
   --radius: 0.5rem;
 
-  /* --- Auto-Generated Full Palette (Defaults) --- */
-  --primary-50: #eff6ff;
-  --primary-100: #dbeafe;
-  --primary-200: #bfdbfe;
-  --primary-300: #93c5fd;
-  --primary-400: #60a5fa;
-  --primary-500: #3b82f6;
-  --primary-600: #2563eb;
-  --primary-700: #1d4ed8;
-  --primary-800: #1e40af;
-  --primary-900: #1e3a8a;
-
-  /* --- Derived Colors (will be overridden by dynamic styles) --- */
-  --primary-foreground: #ffffff;
-  --secondary: color-mix(in srgb, var(--primary-200), transparent 40%);
-  --secondary-foreground: var(--primary-900);
-  --muted: color-mix(in srgb, var(--primary-50), #f3f4f6 50%);
-  --muted-foreground: color-mix(in srgb, var(--primary-400), #4b5563 60%);
-  --accent: color-mix(in srgb, var(--primary-100), transparent 70%);
-  --accent-foreground: var(--primary-700);
-  --ring: color-mix(in srgb, var(--primary-300), transparent 50%);
-
-  /* --- Neutral/Layout Base --- */
-  --background: #ffffff;
-  --foreground: #020817;
-  --border: #dddddd;
-  --input: #e4e4e7;
-  --destructive: #ef4444;
-  --destructive-foreground: #f8fafc;
-  --input-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --popover: #ffffff;
-  --popover-foreground: #020817;
-}
-
-/* --- Dark Mode (Google/Charcoal Palette) --- */
+  /* --- Shadows --- */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+/* --- Dark Mode --- */
 .dark {
-  --primary-50: #1e3a8a;
-  --primary-100: #1e40af;
-  --primary-200: #1d4ed8;
-  --primary-300: #2563eb;
-  --primary-400: #3b82f6;
-  --primary-500: #60a5fa;
-  --primary-600: #93c5fd;
-  --primary-700: #bfdbfe;
-  --primary-800: #dbeafe;
-  --primary-900: #eff6ff;
-
-  --background: #121212;
-  --foreground: #e3e3e3;
-  --secondary: #1f1f1f;
-  --secondary-foreground: #ffffff;
-  --muted: #2a2a2a;
-  --muted-foreground: #9aa0a6;
-  --border: #3c4043;
-  --input: #3c4043;
-  --popover: #1f1f1f;
-  --popover-foreground: #e3e3e3;
-  --accent: rgba(255, 255, 255, 0.04);
-  --accent-foreground: var(--primary-400);
-  --ring: color-mix(in srgb, var(--primary-500), transparent 60%);
-  --input-shadow: 0 0 #0000;
-  --destructive: #dc2626;
-  --destructive-foreground: #f8fafc;
-}
-
-/* [Rest of your existing CSS remains the same - everything below stays] */
+  --background: 9 9 11;          /* #09090b in RGB */
+  --foreground: 250 250 250;
+  --card: 9 9 11;
+  --card-foreground: 250 250 250;
+  --popover: 9 9 11;
+  --popover-foreground: 250 250 250;
+
+  --primary: 59 130 246;         /* #3b82f6 in RGB */
+  --primary-foreground: 250 250 250;
+
+  --secondary: 39 39 42;         /* #27272a in RGB */
+  --secondary-foreground: 250 250 250;
+  --muted: 39 39 42;
+  --muted-foreground: 161 161 170;
+  --accent: 39 39 42;
+  --accent-foreground: 250 250 250;
+
+  --destructive: 127 29 29;      /* #7f1d1d in RGB */
+  --destructive-foreground: 254 242 242;
+
+  --border: 39 39 42;
+  --input: 39 39 42;
+  --ring: 147 197 253;           /* #93c5fd in RGB - even lighter blue */
+
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+}
+
 /* -------------------------------------------------------------------------- */
-/* 3. BASE LAYER (Icons & Typography)                                         */
+/* 3. BASE STYLES                                                             */
 /* -------------------------------------------------------------------------- */
-@layer base {
-  /* Remix Icons Standardization */
-  i[class^="ri-"], i[class*=" ri-"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    line-height: 1;
-    font-size: 1.2rem;
-  }
+/* Note: @layer base styles should be placed AFTER the @tailwind directives */
+/* These will be injected into Tailwind's base layer */
 
-  /* Scale icons for XS/SM containers */
-  .size-xs i[class^="ri-"], .size-xs i[class*=" ri-"],
-  .size-sm i[class^="ri-"], .size-sm i[class*=" ri-"] {
-    font-size: 1rem;
-  }
+/* You can also define base styles without @layer if you're having issues */
+/* Just remove the @layer and use regular CSS */
 
-  .tolle-button-content {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
+/* Base text color inheritance - THIS IS KEY */
+* {
+  border-color: var(--border, #e4e4e7);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: var(--background, #ffffff);
+  color: var(--foreground, #0a0a0a);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+/* Links */
+a {
+  color: var(--primary, #2563eb);
+  text-underline-offset: 4px;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Remix Icons */
+i[class^="ri-"], i[class*=" ri-"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-size: 1.2em;
 }
 
 /* -------------------------------------------------------------------------- */
-/* 4. COMPONENT OVERRIDES                                                     */
+/* 5. UTILITY CLASSES                                                         */
 /* -------------------------------------------------------------------------- */
-@layer components {
-  /* Updated: Target the container div (tolle-input > div) instead of the input tag */
-  tolle-input > div,
-  tolle-select button,
-  tolle-masked-input > div,
-  tolle-date-picker tolle-masked-input > div {
-    box-shadow: var(--input-shadow);
-    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms ease;
+@layer utilities {
+
+  /* Animation utilities */
+  .animate-in {
+    animation: animate-in 0.2s ease-out;
+  }
+
+  .animate-out {
+    animation: animate-out 0.2s ease-in;
   }
 
-  /* When the container is focused-within, we clear the shadow and let the ring handle the focus */
-  tolle-input > div:focus-within,
-  tolle-select button:focus,
-  tolle-masked-input > div:focus-within {
-    box-shadow: 0 0 #0000;
+  @keyframes animate-in {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
-  /* Remove shadow from the native input since the container now handles the elevation */
-  tolle-input input,
-  tolle-masked-input input {
-    box-shadow: none !important;
-    background: transparent;
+  @keyframes animate-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(2px);
+    }
   }
 
-  /* Dark Mode specific component adjustments */
-  .dark tolle-card {
-    background-color: var(--secondary);
-    border-color: var(--border);
+  /* Hide scrollbar */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
   }
 
-  /* Dark mode backgrounds for form components */
-  .dark tolle-input > div,
-  .dark tolle-select button {
-    background-color: transparent;
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
   }
 
-  /* Icon sizing inside buttons and input slots */
-  tolle-button svg,
-  tolle-input [prefix] svg,
-  tolle-input [suffix] svg {
-    @apply w-4 h-4;
+  /* Text utilities */
+  .text-balance {
+    text-wrap: balance;
   }
 
-  .h-8 svg { @apply w-3.5 h-3.5; }
+  /* Glass effect */
+  .glass {
+    backdrop-filter: blur(8px);
+    background-color: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .dark .glass {
+    background-color: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}
 
-  /* Compact Select Items */
-  .size-xs tolle-select-item > div { padding: 4px 8px 4px 32px; font-size: 12px; }
-  .size-sm tolle-select-item > div { padding: 6px 12px 6px 32px; }
+/* Remove default browser focus styles */
+tolle-textarea textarea:focus {
+  outline: none !important;
+}
+
+tolle-select button:focus {
+  outline: none !important;
 }
 
 /* -------------------------------------------------------------------------- */
-/* 5. CDK OVERLAY & MODAL SYSTEM (Structural)                                 */
+/* 6. CDK OVERLAY STYLES                                                      */
 /* -------------------------------------------------------------------------- */
 .cdk-overlay-container {
   position: fixed;
-  z-index: 1000;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
   pointer-events: none;
 }
 
-.cdk-global-overlay-wrapper {
-  display: flex;
-  position: absolute;
-  z-index: 1001;
+.cdk-overlay-backdrop {
+  position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  opacity: 0;
 }
 
 .cdk-overlay-pane {
-  position: absolute;
-  pointer-events: auto;
-  box-sizing: border-box;
-  z-index: 1001;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Backdrop Styles */
-.cdk-overlay-backdrop {
-  position: absolute;
-  top: 0; bottom: 0; left: 0; right: 0;
-  z-index: 1000;
-  pointer-events: auto;
-  -webkit-tap-highlight-color: transparent;
-  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-  opacity: 0;
+  position: fixed;
+  z-index: 50;
 }
 
 .cdk-overlay-backdrop-showing {
@@ -212,24 +233,39 @@
 .tolle-modal-backdrop {
   background-color: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(4px);
-  z-index: 50;
 }
 
-/* Hide scrollbar for modern browsers */
-.scrollbar-hidden::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, and Opera */
+/* Add these to your theme.css file */
+
+/* Override Tailwind's default ring widths for thicker rings */
+.ring-2 {
+  --tw-ring-width: 3px !important;
+}
+
+.ring-4 {
+  --tw-ring-width: 5px !important;
+}
+
+/* Custom ring utilities */
+.ring-thick {
+  --tw-ring-width: 3px !important;
+}
+
+.ring-thicker {
+  --tw-ring-width: 4px !important;
 }
 
-.scrollbar-hidden {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;     /* Firefox */
+/* Input-specific focus styles */
+tolle-input:focus-within {
+  --tw-ring-width: 3px;
 }
 
-@keyframes caret-blink {
-  0%, 70%, 100% { opacity: 1; }
-  20%, 50% { opacity: 0; }
+/* Make sure the ring color uses our CSS variable */
+.ring-ring {
+  --tw-ring-color: var(--ring) !important;
 }
 
-.animate-caret-blink {
-  animation: caret-blink 1.25s ease-out infinite;
+/* Error state ring color */
+.ring-destructive {
+  --tw-ring-color: var(--destructive) !important;
 }