neon_sakura 0.1.4

data/app/assets/stylesheets/forms.css

@@ -0,0 +1,152 @@
+/*
+ * Form styles
+ * This file contains all form-related styling including inputs, selects, buttons, and checkboxes
+ */
+
+/* Base input and select styling */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="date"],
+input[type="search"],
+textarea,
+select {
+  appearance: none;
+  box-sizing: border-box;
+  font-size: 1rem;
+  line-height: 1.5;
+  background-color: var(--color-surface);
+  color: var(--color-text-primary);
+  border: 2px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+/* Focus state for inputs */
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="number"]:focus,
+input[type="date"]:focus,
+input[type="search"]:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
+}
+
+/* Removed fixed height to allow utility classes (py-*) to control input sizing consistently */
+
+/* Textarea specific */
+textarea {
+  resize: vertical;
+  min-height: 60px;
+  padding: 0.75rem 1rem;
+}
+
+/* Select dropdown arrow */
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+}
+
+/* Reset focus styles */
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+/* Fieldset and legend */
+fieldset {
+  border-width: 1px;
+}
+
+legend {
+  padding: 0 0.5rem;
+}
+
+/* Checkbox styling */
+input[type="checkbox"] {
+  cursor: pointer;
+}
+
+/* Submit button styling */
+input[type="submit"],
+button[type="submit"] {
+  background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--button-text-color);
+}
+
+input[type="submit"]:hover,
+button[type="submit"]:hover {
+  background-image: linear-gradient(to right, var(--gradient-from-hover), var(--gradient-to-hover));
+  transform: scale(1.05);
+}
+
+input[type="submit"]:focus,
+button[type="submit"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+/* Form labels */
+label {
+  cursor: pointer;
+}
+
+/* Advanced search toggle button */
+.advanced-search-toggle {
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  border: none;
+  color: var(--button-text-color);
+}
+
+.advanced-search-toggle:hover {
+  background: linear-gradient(to right, var(--gradient-from-hover), var(--gradient-to-hover));
+}
+
+.advanced-search-toggle:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+/* Action button (for delete/icon-only buttons) */
+button.action-button,
+button.action-button[type="submit"] {
+  background: none !important;
+  background-image: none !important;
+  border: none !important;
+  padding: 0 !important;
+  cursor: pointer;
+  transform: none !important;
+  box-shadow: none !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button.action-button:hover,
+button.action-button[type="submit"]:hover {
+  background: none !important;
+  background-image: none !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+button.action-button:focus,
+button.action-button[type="submit"]:focus {
+  background: none !important;
+  background-image: none !important;
+  box-shadow: none !important;
+  outline: none;
+}

data/app/assets/stylesheets/loading.css

@@ -0,0 +1,145 @@
+/*
+ * Loading Indicators
+ * Spinners, progress bars, and skeleton loaders
+ */
+
+/* Spinners */
+.spinner-basic,
+.spinner-accent,
+.spinner-small,
+.spinner-large {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  animation: spin 1s linear infinite;
+  box-sizing: border-box;
+}
+
+.spinner-basic {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+  border-color: var(--color-border);
+  border-top-color: var(--color-text-primary);
+}
+
+.spinner-accent {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  border-top-color: var(--color-accent);
+}
+
+.spinner-small {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  border-top-color: var(--color-accent);
+}
+
+.spinner-large {
+  width: 48px;
+  height: 48px;
+  border-width: 4px;
+  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  border-top-color: var(--color-accent);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Progress Bars */
+.progress-bar-container {
+  width: 100%;
+  height: 8px;
+  background-color: var(--color-border);
+  border-radius: 9999px;
+  overflow: hidden;
+  position: relative;
+  display: block;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+.progress-bar-indeterminate {
+  height: 100%;
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  border-radius: 9999px;
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+  width: 40%;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+/* Skeleton Loaders */
+.skeleton-text,
+.skeleton-avatar {
+  display: block;
+  background: linear-gradient(
+    90deg,
+    var(--color-surface) 0%,
+    color-mix(in srgb, var(--color-border) 50%, var(--color-surface)) 50%,
+    var(--color-surface) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: 0.25rem;
+}
+
+.skeleton-text {
+  height: 1rem;
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+.skeleton-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Loading overlay */
+.loading-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in srgb, var(--color-background) 80%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.loading-overlay .spinner-accent {
+  width: 64px;
+  height: 64px;
+  border-width: 4px;
+}

data/app/assets/stylesheets/neon_sakura.css

@@ -0,0 +1,40 @@
+/*
+ * This is a manifest file that'll be compiled into application.css by Rails' asset pipeline.
+ *
+ * With Propshaft, each @import creates a separate <link> tag. This manifest
+ * imports all the gem's CSS components in the proper order for consistent theming.
+ *
+ * The gem's styling components are organized as:
+ * - themes/: Color definitions for each theme (purple, green, red)
+ * - utilities/: Reusable utility classes (layout, spacing, typography, etc.)
+ * - components.css: UI components (navigation, cards, badges, buttons, tables, etc.)
+ * - forms.css: Form element styling
+ * - pagy-tailwind.css: Pagination styling with Tailwind CSS
+ *
+ * Include this manifest in your application layout with:
+ *   <%= stylesheet_link_tag "neon_sakura", "data-turbo-track": "reload" %>
+ */
+
+/* Import themes first - defines CSS variables */
+@import "theme-default.css";
+@import "theme-purple.css";
+@import "theme-green.css";
+@import "theme-red.css";
+
+/* Import utilities - uses CSS variables */
+@import "utility-reset.css";
+@import "utility-layout.css";
+@import "utility-sizing.css";
+@import "utility-spacing.css";
+@import "utility-colors.css";
+@import "utility-borders.css";
+@import "utility-typography.css";
+@import "utility-gradients.css";
+@import "utility-effects.css";
+@import "utility-responsive.css";
+@import "loading.css";
+
+/* Import components and forms - uses both themes and utilities */
+@import "components.css";
+@import "forms.css";
+@import "pagy-tailwind.css";

data/app/assets/stylesheets/pagy-tailwind.css

@@ -0,0 +1,120 @@
+/*
+ * Pagy Pagination Styles
+ * Theme-aware pagination styles for Pagy gem (v43+)
+ * Based on Pagy's official CSS structure, adapted for neon_sakura themes
+ * NOTE: Uses plain CSS (no Tailwind build required) for Propshaft compatibility
+ */
+
+/* Main pagination container */
+.pagy {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.75;
+}
+
+/* All links except gaps */
+.pagy a:not([role="separator"]) {
+  display: block;
+  text-decoration: none;
+  background-color: var(--color-surface);
+  color: var(--color-text-primary);
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  transition: all 150ms ease;
+}
+
+/* Hover state for all links */
+.pagy a[href]:hover {
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  color: var(--color-white);
+  border-color: var(--color-accent);
+}
+
+/* All non-links (current page, disabled) */
+.pagy a:not([href]) {
+  cursor: default;
+}
+
+/* Disabled links */
+.pagy a[role="link"]:not([aria-current]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Current page */
+.pagy a[aria-current] {
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  color: var(--color-white);
+  border-color: var(--color-accent);
+  font-weight: 700;
+}
+
+/* Label wrapper for input/select */
+.pagy label {
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-surface);
+  padding: 0.5rem 0.75rem;
+  color: var(--color-text-primary);
+}
+
+/* Input field inside label */
+.pagy label input {
+  all: unset;
+  width: 4rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.pagy label input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
+}
+
+/* Select dropdown inside label */
+.pagy label select {
+  all: unset;
+  width: 4rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.pagy label select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
+}
+
+/* Info text (e.g., "Showing 1-10 of 100") */
+.pagy-info {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  text-align: center;
+  margin: 1rem 0;
+}

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

@@ -0,0 +1,40 @@
+/*
+ * Default Theme Colors (Purple Dark)
+ * This file defines the default :root CSS custom properties for the theme system
+ */
+
+/* CSS Custom Properties - Default Theme (Purple Dark) */
+:root {
+  --color-text-primary: #fff;
+  --color-text-secondary: #cbd5e1;
+  --color-text-muted: #94a3b8;
+  --color-background: #111827;
+  --color-surface: #1f2937;
+  --color-accent: #a855f7;
+  --color-notification: #10b981;
+  --color-alert: #ef4444;
+  --color-warning: #f59e0b;
+  --color-border: #374151;
+  --color-white: #fff;
+
+  /* Gradient colors for buttons and backgrounds */
+  --gradient-from: #2563eb;
+  --gradient-to: #9333ea;
+  --gradient-from-hover: #1d4ed8;
+  --gradient-to-hover: #7e22ce;
+
+  /* Text gradient colors for headings and links */
+  --text-gradient-from: #60a5fa;
+  --text-gradient-to: #a855f7;
+
+  /* Secondary blue gradient - cyan to blue (theme-independent) */
+  --gradient-secondary-blue-from: #0891b2;
+  --gradient-secondary-blue-to: #2563eb;
+
+  /* Navbar link colors - bright cyan for dark mode (default) */
+  --navbar-link-color: #06b6d4;
+  --navbar-link-hover: #22d3ee;
+
+  /* Button text color - white for good contrast on gradients */
+  --button-text-color: #fff;
+}

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

@@ -0,0 +1,84 @@
+/*
+ * Green Theme - Light and Dark Variants
+ * This file contains color definitions for both green light and green dark themes
+ */
+
+/* Green Light Theme */
+[data-theme-name="green"][data-theme-mode="light"] {
+  --color-text-primary: #545E75;
+  --color-text-secondary: #6c757d;
+  --color-text-muted: #8b95a8;
+  --color-background: #FFF;
+  --color-surface: #f8f9fa;
+  --color-accent: #009990;
+  --color-notification: #009990;
+  --color-alert: #DE5959;
+  --color-warning: #f59e0b;
+  --color-border: #dee2e6;
+  --color-white: #fff;
+
+  /* Green to cyan gradients for light theme */
+  --gradient-from: #059669;
+  --gradient-to: #0891b2;
+  --gradient-from-hover: #047857;
+  --gradient-to-hover: #0e7490;
+
+  /* Text gradient colors - green to cyan for headings */
+  --text-gradient-from: #10b981;
+  --text-gradient-to: #06b6d4;
+
+  /* Navbar gradient - accent to notification (green 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;
+}
+
+/* Green Dark Theme */
+[data-theme-name="green"][data-theme-mode="dark"] {
+  --color-text-primary: #e2e8f0;
+  --color-text-secondary: #94a3b8;
+  --color-text-muted: #64748b;
+  --color-background: #0f172a;
+  --color-surface: #1e293b;
+  --color-accent: #10b981;
+  --color-notification: #10b981;
+  --color-alert: #ef4444;
+  --color-warning: #f59e0b;
+  --color-border: #334155;
+  --color-white: #fff;
+
+  /* Green to cyan gradients for dark theme */
+  --gradient-from: #10b981;
+  --gradient-to: #06b6d4;
+  --gradient-from-hover: #059669;
+  --gradient-to-hover: #0891b2;
+
+  /* Text gradient colors - green to cyan for headings */
+  --text-gradient-from: #34d399;
+  --text-gradient-to: #22d3ee;
+
+  /* Navbar gradient - accent to notification (green 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/theme-purple.css

@@ -0,0 +1,94 @@
+/*
+ * Purple Theme - Light and Dark Variants
+ * This file contains color definitions for both purple light and purple dark themes
+ */
+
+/* Purple Light Theme */
+[data-theme-name="purple"][data-theme-mode="light"] {
+  --color-text-primary: #374151;
+  --color-text-secondary: #6b7280;
+  --color-text-muted: #9ca3af;
+  --color-background: #FFF;
+  --color-surface: #f9fafb;
+  --color-accent: #a855f7;
+  --color-notification: #10b981;
+  --color-alert: #ef4444;
+  --color-warning: #f59e0b;
+  --color-border: #e5e7eb;
+  --color-white: #fff;
+
+  /* Purple gradients for light theme - darker for visibility */
+  --gradient-from: #7c3aed;
+  --gradient-to: #9333ea;
+  --gradient-from-hover: #6d28d9;
+  --gradient-to-hover: #7c3aed;
+
+  /* Text gradient colors - purple/blue for headings */
+  --text-gradient-from: #60a5fa;
+  --text-gradient-to: #a855f7;
+
+  /* Secondary gradient - alternative purple gradient (lighter for light theme) */
+  --gradient-secondary-start: #b038dc;
+  --gradient-secondary-mid: #4c3ba5;
+  --gradient-secondary-end: #393e9c;
+
+  /* Navbar gradient - accent to notification (purple 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;
+}
+
+/* Purple Dark Theme */
+[data-theme-name="purple"][data-theme-mode="dark"] {
+  --color-text-primary: #fff;
+  --color-text-secondary: #cbd5e1;
+  --color-text-muted: #94a3b8;
+  --color-background: #111827;
+  --color-surface: #1f2937;
+  --color-accent: #a855f7;
+  --color-notification: #10b981;
+  --color-alert: #ef4444;
+  --color-warning: #f59e0b;
+  --color-border: #374151;
+  --color-white: #fff;
+
+  /* Purple gradients for dark theme */
+  --gradient-from: #2563eb;
+  --gradient-to: #9333ea;
+  --gradient-from-hover: #1d4ed8;
+  --gradient-to-hover: #7e22ce;
+
+  /* Text gradient colors - purple/blue for headings */
+  --text-gradient-from: #60a5fa;
+  --text-gradient-to: #a855f7;
+
+  /* Secondary gradient - alternative purple gradient */
+  --gradient-secondary-start: #b038dc;
+  --gradient-secondary-mid: #4c3ba5;
+  --gradient-secondary-end: #393e9c;
+
+  /* Navbar gradient - accent to notification (purple 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;
+}