0xtrails 0.1.13 → 0.2.0

package/src/widget/index.css

@@ -29,14 +29,14 @@
   --trails-widget-border: 1px solid rgb(229 231 235); /* Default widget border */
 
   /* Primary Colors - These apply to both themes */
-  --trails-primary: rgb(59 130 246); /* blue-500 - Change this to customize */
-  --trails-primary-hover: rgb(37 99 235); /* blue-600 - Change this for hover state */
-  --trails-primary-disabled: rgb(209 213 219); /* gray-300 - Disabled state */
+  --trails-primary: rgb(21 93 252); /* #155DFC - Change this to customize */
+  --trails-primary-hover: rgb(17 75 202); /* Darker shade of #155DFC - Change this for hover state */
+  --trails-primary-disabled: rgb(212 212 216); /* #D4D4D8 - Disabled state */
   --trails-primary-disabled-text: rgb(107 114 128); /* gray-500 - Disabled text */
 
   /* Modal Button Colors - Customizable modal trigger button */
-  --trails-modal-button-bg: var(--trails-primary, rgb(59 130 246)); /* Defaults to primary color */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(37 99 235)); /* Defaults to primary hover */
+  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* Defaults to primary color */
+  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Defaults to primary hover */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow */
 }
@@ -50,6 +50,14 @@
   background-color: var(--trails-bg-secondary);
 }
 
+.trails-bg-secondary-hover:hover {
+  background-color: var(--trails-bg-secondary-hover);
+}
+
+.trails-focus-border-secondary:focus-within {
+  border-color: var(--trails-bg-secondary-focus-border);
+}
+
 .trails-bg-tertiary {
   background-color: var(--trails-bg-tertiary);
 }
@@ -184,10 +192,18 @@
   background-color: var(--trails-dropdown-hover-bg);
 }
 
+.trails-list-item {
+  background-color: var(--trails-list-item-bg);
+}
+
 .trails-list-item:hover {
   background-color: var(--trails-list-hover-bg);
 }
 
+.trails-list-item-selected {
+  background-color: var(--trails-list-item-selected-bg);
+}
+
 /* Token List Utility Classes */
 .trails-list {
   background-color: var(--trails-list-bg);
@@ -207,7 +223,9 @@
 [data-theme="light"] {
   /* Background Colors */
   --trails-bg-primary: rgb(255 255 255); /* white */
-  --trails-bg-secondary: rgb(249 250 251); /* gray-50 */
+  --trails-bg-secondary: rgb(244 244 245); /* #F4F4F5 */
+  --trails-bg-secondary-hover: rgb(228 228 231); /* #E4E4E7 */
+  --trails-bg-secondary-focus-border: rgb(244 244 245); /* #F4F4F5 - same as secondary bg */
   --trails-bg-tertiary: rgb(243 244 246); /* gray-100 */
   --trails-bg-card: rgb(255 255 255); /* white */
   --trails-bg-overlay: rgb(255 255 255); /* white */
@@ -233,7 +251,7 @@
   --trails-input-border: rgb(209 213 219); /* gray-300 */
   --trails-input-text: rgb(17 24 39); /* gray-900 */
   --trails-input-placeholder: rgb(156 163 175); /* gray-400 */
-  --trails-input-focus-border: rgb(59 130 246); /* blue-500 */
+  --trails-input-focus-border: rgb(21 93 252); /* #155DFC */
 
   /* Dropdown Colors */
   --trails-dropdown-bg: rgb(255 255 255); /* white */
@@ -242,18 +260,20 @@
   --trails-dropdown-hover-bg: rgb(249 250 251); /* gray-50 */
   --trails-dropdown-selected-bg: rgb(243 244 246); /* gray-100 */
   --trails-dropdown-selected-text: rgb(17 24 39); /* gray-900 */
-  --trails-dropdown-focus-border: rgb(59 130 246); /* blue-500 - matches input focus border */
+  --trails-dropdown-focus-border: rgb(21 93 252); /* #155DFC - matches input focus border */
 
   /* Modal Button Colors - Light Mode */
-  --trails-modal-button-bg: var(--trails-primary, rgb(59 130 246)); /* blue-500 for light mode */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(37 99 235)); /* blue-600 for light mode */
+  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* #155DFC for light mode */
+  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for light mode */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow for light mode */
 
   /* Token List Colors */
   --trails-list-bg: rgb(255 255 255); /* white background for token list */
   --trails-list-border: rgb(229 231 235); /* gray-200 border */
-  --trails-list-hover-bg: rgb(249 250 251); /* gray-50 hover */
+  --trails-list-hover-bg: rgb(250 250 250); /* #FAFAFA hover */
+  --trails-list-item-bg: transparent; /* transparent background for list items */
+  --trails-list-item-selected-bg: rgb(239 246 255); /* #EFF6FF selected */
 
   /* Widget Border - Customizable widget border */
   --trails-widget-border: none; /* Default widget border */
@@ -291,6 +311,8 @@
   /* Background Colors */
   --trails-bg-primary: rgb(17 24 39); /* gray-900 */
   --trails-bg-secondary: rgb(31 41 55); /* gray-800 */
+  --trails-bg-secondary-hover: rgb(55 65 81); /* gray-700 */
+  --trails-bg-secondary-focus-border: rgb(31 41 55); /* gray-800 - same as secondary bg */
   --trails-bg-tertiary: rgb(55 65 81); /* gray-700 */
   --trails-bg-card: rgb(31 41 55); /* gray-800 */
   --trails-bg-overlay: rgb(17 24 39); /* gray-900 */
@@ -316,7 +338,7 @@
   --trails-input-border: rgb(75 85 99); /* gray-600 */
   --trails-input-text: rgb(255 255 255); /* white */
   --trails-input-placeholder: rgb(107 114 128); /* gray-500 */
-  --trails-input-focus-border: rgb(59 130 246); /* blue-500 */
+  --trails-input-focus-border: rgb(21 93 252); /* #155DFC */
 
   /* Dropdown Colors */
   --trails-dropdown-bg: rgb(31 41 55); /* gray-800 */
@@ -325,11 +347,11 @@
   --trails-dropdown-hover-bg: rgb(55 65 81); /* gray-700 */
   --trails-dropdown-selected-bg: rgb(55 65 81); /* gray-700 */
   --trails-dropdown-selected-text: rgb(255 255 255); /* white */
-  --trails-dropdown-focus-border: rgb(59 130 246); /* blue-500 - matches input focus border */
+  --trails-dropdown-focus-border: rgb(21 93 252); /* #155DFC - matches input focus border */
 
   /* Modal Button Colors - Dark Mode */
-  --trails-modal-button-bg: var(--trails-primary, rgb(37 99 235)); /* blue-600 for dark mode */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(29 78 216)); /* blue-700 for dark mode */
+  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* #155DFC for dark mode */
+  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for dark mode */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1); /* subtle shadow for dark mode */
 
@@ -337,6 +359,8 @@
   --trails-list-bg: rgb(31 41 55); /* gray-800 background for token list */
   --trails-list-border: rgb(55 65 81); /* gray-700 border - good balance */
   --trails-list-hover-bg: rgb(55 65 81); /* gray-700 hover */
+  --trails-list-item-bg: transparent; /* transparent background for list items */
+  --trails-list-item-selected-bg: rgb(30 58 138); /* blue-800 selected for dark mode */
 
   /* Widget Border - Customizable widget border */
   --trails-widget-border: none; /* Default widget border */
@@ -433,27 +457,27 @@
 /* Primary Button Override Classes - These will override Tailwind classes */
 /* Light mode primary button */
 .bg-blue-500 {
-  background-color: var(--trails-primary, rgb(59 130 246));
+  background-color: var(--trails-primary, rgb(21 93 252));
 }
 
 /* Dark mode primary button */
 .dark .bg-blue-500 {
-  background-color: var(--trails-primary, rgb(37 99 235)); /* blue-600 for dark mode */
+  background-color: var(--trails-primary, rgb(21 93 252)); /* #155DFC for dark mode */
 }
 
 /* Light mode hover */
 .hover\:bg-blue-600:hover {
-  background-color: var(--trails-primary-hover, rgb(37 99 235));
+  background-color: var(--trails-primary-hover, rgb(17 75 202));
 }
 
 /* Dark mode hover */
 .dark .hover\:bg-blue-600:hover {
-  background-color: var(--trails-primary-hover, rgb(29 78 216)); /* blue-700 for dark mode */
+  background-color: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for dark mode */
 }
 
 /* Light mode disabled background */
 .disabled\:bg-gray-300:disabled {
-  background-color: var(--trails-primary-disabled, rgb(209 213 219));
+  background-color: var(--trails-primary-disabled, rgb(212 212 216));
 }
 
 /* Dark mode disabled background */
@@ -484,7 +508,7 @@
 }
 
 .trails-btn-primary:disabled {
-  background-color: var(--trails-primary-disabled, rgb(209 213 219));
+  background-color: var(--trails-primary-disabled, rgb(212 212 216));
   color: var(--trails-primary-disabled-text, rgb(107 114 128));
   cursor: not-allowed;
 }