neon_sakura 0.1.4

data/app/assets/stylesheets/theme-red.css

@@ -0,0 +1,84 @@
+/*
+ * Red Theme - Light and Dark Variants
+ * This file contains color definitions for both red light and red dark themes
+ */
+
+/* Red Light Theme */
+[data-theme-name="red"][data-theme-mode="light"] {
+  --color-text-primary: #374151;
+  --color-text-secondary: #6b7280;
+  --color-text-muted: #9ca3af;
+  --color-background: #FFF;
+  --color-surface: #f9fafb;
+  --color-accent: #dc2626;
+  --color-notification: #10b981;
+  --color-alert: #ef4444;
+  --color-warning: #f59e0b;
+  --color-border: #e5e7eb;
+  --color-white: #fff;
+
+  /* Red to orange gradients for light theme */
+  --gradient-from: #dc2626;
+  --gradient-to: #ea580c;
+  --gradient-from-hover: #b91c1c;
+  --gradient-to-hover: #c2410c;
+
+  /* Text gradient colors - red to orange for headings */
+  --text-gradient-from: #f87171;
+  --text-gradient-to: #fb923c;
+
+  /* Navbar gradient - accent to notification (red to green) */
+  --gradient-navbar-from: var(--color-accent);
+  --gradient-navbar-to: var(--color-notification);
+
+  /* Secondary blue gradient - cyan to blue (theme-independent) */
+  --gradient-secondary-blue-from: #0891b2;
+  --gradient-secondary-blue-to: #2563eb;
+
+  /* Navbar link colors - darker cyan for light mode */
+  --navbar-link-color: #0891b2;
+  --navbar-link-hover: #0e7490;
+
+  /* Button text color - white for good contrast on gradients */
+  --button-text-color: #fff;
+}
+
+/* Red Dark Theme */
+[data-theme-name="red"][data-theme-mode="dark"] {
+  --color-text-primary: #fff;
+  --color-text-secondary: #cbd5e1;
+  --color-text-muted: #94a3b8;
+  --color-background: #111827;
+  --color-surface: #1f2937;
+  --color-accent: #ef4444;
+  --color-notification: #10b981;
+  --color-alert: #ef4444;
+  --color-warning: #f59e0b;
+  --color-border: #374151;
+  --color-white: #fff;
+
+  /* Red to orange gradients for dark theme */
+  --gradient-from: #dc2626;
+  --gradient-to: #f97316;
+  --gradient-from-hover: #b91c1c;
+  --gradient-to-hover: #ea580c;
+
+  /* Text gradient colors - red to orange for headings */
+  --text-gradient-from: #f87171;
+  --text-gradient-to: #fb923c;
+
+  /* Navbar gradient - accent to notification (red to green) */
+  --gradient-navbar-from: var(--color-accent);
+  --gradient-navbar-to: var(--color-notification);
+
+  /* Secondary blue gradient - cyan to blue (theme-independent) */
+  --gradient-secondary-blue-from: #0891b2;
+  --gradient-secondary-blue-to: #2563eb;
+
+  /* Navbar link colors - white for dark mode, cyan on hover */
+  --navbar-link-color: #fff;
+  --navbar-link-hover: #22d3ee;
+
+  /* Button text color - white for good contrast on gradients */
+  --button-text-color: #fff;
+}

data/app/assets/stylesheets/utility-borders.css

@@ -0,0 +1,29 @@
+/*
+ * Border Utilities
+ * This file contains border and border-radius utility classes
+ */
+
+/* Border utilities */
+.border {
+  border-width: 1px;
+}
+
+.border-gray-700 {
+  border-color: var(--color-border);
+}
+
+.border-gray-600 {
+  border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}

data/app/assets/stylesheets/utility-colors.css

@@ -0,0 +1,185 @@
+/*
+ * Color Utilities
+ * This file contains background and text color utility classes
+ */
+
+/* Background colors */
+.bg-gray-900 {
+  background-color: var(--color-background);
+}
+
+.bg-gray-850 {
+  background-color: color-mix(in srgb, var(--color-background) 90%, var(--color-surface) 10%);
+}
+
+.bg-gray-800 {
+  background-color: var(--color-surface);
+}
+
+.bg-gray-800\/30 {
+  background-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
+}
+
+.bg-gray-800\/20 {
+  background-color: color-mix(in srgb, var(--color-surface) 20%, transparent);
+}
+
+.bg-gray-700 {
+  background-color: var(--color-border);
+}
+
+.bg-gray-600 {
+  background-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+}
+
+.bg-cyan-600 {
+  background-color: var(--color-accent);
+}
+
+/* Text colors */
+.text-white {
+  color: var(--color-white);
+}
+
+.text-gray-200 {
+  color: var(--color-text-secondary);
+}
+
+.text-gray-300 {
+  color: color-mix(in srgb, var(--color-text-secondary) 70%, var(--color-text-muted) 30%);
+}
+
+.text-gray-400 {
+  color: var(--color-text-muted);
+}
+
+.text-gray-500 {
+  color: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-border) 30%);
+}
+
+.text-gray-600 {
+  color: color-mix(in srgb, var(--color-text-muted) 50%, var(--color-border) 50%);
+}
+
+.text-cyan-200 {
+  color: color-mix(in srgb, var(--color-accent) 70%, var(--color-text-primary) 30%);
+}
+
+.text-cyan-300 {
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+}
+
+.text-cyan-400 {
+  color: var(--color-accent);
+}
+
+.text-cyan-500 {
+  color: color-mix(in srgb, var(--color-accent) 95%, var(--color-background) 5%);
+}
+
+.text-red-500 {
+  color: var(--color-alert);
+}
+
+/* Theme-aware semantic colors */
+
+/* Background colors */
+.bg-background {
+  background-color: var(--color-background);
+}
+
+.bg-surface {
+  background-color: var(--color-surface);
+}
+
+.bg-accent {
+  background-color: var(--color-accent);
+}
+
+.bg-notification {
+  background-color: var(--color-notification);
+}
+
+.bg-alert {
+  background-color: var(--color-alert);
+}
+
+.bg-warning {
+  background-color: var(--color-warning);
+}
+
+/* Background color utilities with opacity modifiers */
+.bg-notification.bg-opacity-10 {
+  background-color: color-mix(in srgb, var(--color-notification) 10%, transparent);
+}
+
+.bg-alert.bg-opacity-10 {
+  background-color: color-mix(in srgb, var(--color-alert) 10%, transparent);
+}
+
+.bg-warning.bg-opacity-10 {
+  background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
+}
+
+.bg-accent.bg-opacity-10 {
+  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+
+/* Text colors */
+.text-text-primary {
+  color: var(--color-text-primary);
+}
+
+.text-text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.text-text-muted {
+  color: var(--color-text-muted);
+}
+
+.text-accent {
+  color: var(--color-accent);
+}
+
+.text-notification {
+  color: var(--color-notification);
+}
+
+.text-alert {
+  color: var(--color-alert);
+}
+
+.text-warning {
+  color: var(--color-warning);
+}
+
+/* Border colors */
+.border-border {
+  border-color: var(--color-border);
+}
+
+.border-accent {
+  border-color: var(--color-accent);
+}
+
+.border-notification {
+  border-color: var(--color-notification);
+}
+
+.border-alert {
+  border-color: var(--color-alert);
+}
+
+.border-warning {
+  border-color: var(--color-warning);
+}
+
+/* Navbar link colors - cyan for all themes */
+.text-navbar-link {
+  color: var(--navbar-link-color);
+}
+
+.hover\:text-navbar-link:hover {
+  color: var(--navbar-link-hover);
+}

data/app/assets/stylesheets/utility-effects.css

@@ -0,0 +1,123 @@
+/*
+ * Effects Utilities
+ * This file contains shadow, cursor, transition, hover, and focus state utility classes
+ */
+
+/* Shadow utilities */
+.shadow-sm {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.shadow-md {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.shadow-lg {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Cursor utilities */
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/* Transition utilities */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+/* Hover states */
+.hover\:bg-gray-600:hover {
+  background-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+}
+
+.hover\:text-cyan-200:hover {
+  color: color-mix(in srgb, var(--color-accent) 70%, var(--color-text-primary) 30%);
+}
+
+.hover\:text-cyan-300:hover {
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+}
+
+.hover\:from-blue-700:hover {
+  --tw-gradient-from: var(--gradient-from-hover);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.hover\:from-cyan-700:hover {
+  --tw-gradient-from: var(--gradient-from-hover);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.hover\:to-purple-700:hover {
+  --tw-gradient-to: var(--gradient-to-hover);
+}
+
+.hover\:to-blue-700:hover {
+  --tw-gradient-to: var(--gradient-to-hover);
+}
+
+.hover\:scale-105:hover {
+  transform: scale(1.05);
+}
+
+/* Focus states */
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  box-shadow: 0 0 0 2px currentcolor;
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-color: var(--color-accent);
+
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+.focus\:ring-cyan-500:focus {
+  --tw-ring-color: var(--color-accent);
+
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
+.focus\:border-cyan-500:focus {
+  border-color: var(--color-accent);
+}
+
+.focus\:ring-offset-2:focus {
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+.focus\:ring-offset-gray-900:focus {
+  --tw-ring-offset-color: var(--color-background);
+}
+
+/* Placeholder styles */
+.placeholder-gray-500::placeholder {
+  color: var(--color-text-muted);
+}

data/app/assets/stylesheets/utility-gradients.css

@@ -0,0 +1,158 @@
+/*
+ * Gradient Utilities
+ * This file contains gradient utility classes
+ * NOTE: All gradient colors now use CSS variables for theme-aware gradients
+ */
+
+/* Gradient utilities */
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-l {
+  background-image: linear-gradient(to left, var(--tw-gradient-stops));
+}
+
+/* Secondary purple gradient (three-color gradient) */
+.bg-gradient-secondary-purple {
+  background-image: linear-gradient(
+    to left,
+    var(--gradient-secondary-start),
+    var(--gradient-secondary-mid),
+    var(--gradient-secondary-end)
+  );
+}
+
+/* Navbar gradient (accent to notification - theme-aware) */
+.bg-gradient-navbar {
+  background-image: linear-gradient(
+    to right,
+    var(--gradient-navbar-from),
+    var(--gradient-navbar-to)
+  );
+}
+
+/* Secondary blue gradient (cyan to blue - theme-independent) */
+.bg-gradient-secondary-blue {
+  background-image: linear-gradient(
+    to right,
+    var(--gradient-secondary-blue-from),
+    var(--gradient-secondary-blue-to)
+  );
+}
+
+/* From colors - use theme variables for text gradients */
+.from-text-gradient-from {
+  --tw-gradient-from: var(--text-gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-accent {
+  --tw-gradient-from: var(--color-accent);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-blue-400 {
+  --tw-gradient-from: var(--text-gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-blue-600 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+/* Theme-aware gradient - adapts to current theme */
+.from-cyan-500 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-cyan-600 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-green-500 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-red-500 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-indigo-500 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-pink-500 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-purple-500 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+.from-violet-500 {
+  --tw-gradient-from: var(--gradient-from);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+}
+
+/* To colors - use theme variables */
+.to-text-gradient-to {
+  --tw-gradient-to: var(--text-gradient-to);
+}
+
+.to-notification {
+  --tw-gradient-to: var(--color-notification);
+}
+
+.to-purple-500 {
+  --tw-gradient-to: var(--text-gradient-to);
+}
+
+.to-purple-600 {
+  --tw-gradient-to: var(--gradient-to);
+}
+
+.to-blue-500 {
+  --tw-gradient-to: var(--text-gradient-to);
+}
+
+.to-blue-600 {
+  --tw-gradient-to: var(--gradient-to);
+}
+
+.to-emerald-500 {
+  --tw-gradient-to: var(--gradient-to);
+}
+
+.to-orange-500 {
+  --tw-gradient-to: var(--gradient-to);
+}
+
+.to-indigo-500 {
+  --tw-gradient-to: var(--gradient-to);
+}
+
+.to-pink-500 {
+  --tw-gradient-to: var(--gradient-to);
+}
+
+.to-violet-500 {
+  --tw-gradient-to: var(--gradient-to);
+}
+
+.bg-clip-text {
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.text-transparent {
+  color: transparent;
+}

data/app/assets/stylesheets/utility-layout.css

@@ -0,0 +1,132 @@
+/*
+ * Layout Utilities
+ * This file contains layout-related utility classes for display, flexbox, and grid
+ */
+
+/* Layout utilities */
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Display utilities */
+.block {
+  display: block;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Flexbox utilities */
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+/* Grid utilities */
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+/* Position utilities */
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.top-0 {
+  top: 0;
+}
+
+/* Z-index utilities */
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}

data/app/assets/stylesheets/utility-reset.css

@@ -0,0 +1,13 @@
+/*
+ * Reset and Base Styles
+ * This file contains the base body styling and reset
+ */
+
+/* Reset and base styles */
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
+}