@snowcone-app/ui 0.1.42 → 0.2.0

package/src/styles/tailwind.css

@@ -0,0 +1,11 @@
+/**
+ * Tailwind CSS v4 Entry Point
+ *
+ * With @tailwindcss/vite plugin, just import the main CSS file
+ * The plugin will process everything automatically
+ */
+
+@import "tailwindcss";
+
+/* Ensure all component source files are scanned for Tailwind classes */
+@source "../**/*.tsx";

package/src/styles/tokens.css

@@ -0,0 +1,117 @@
+/**
+ * Design Tokens - Core Variables
+ *
+ * This file defines the base design tokens that are shared across all themes.
+ * Specific theme values are defined in themes/light.css and themes/dark.css
+ *
+ * Token Naming Convention:
+ * --{category}-{variant}-{state}
+ *
+ * Categories: color, space, shadow, radius, font, transition
+ */
+
+:root {
+  /* ===== Spacing Scale ===== */
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 8px;
+  --space-lg: 10px;
+  --space-xl: 12px;
+  --space-2xl: 16px;
+  --space-3xl: 20px;
+  --space-4xl: 24px;
+  --space-5xl: 32px;
+  --space-6xl: 48px;
+
+  /* ===== Border Radius ===== */
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius-2xl: 12px;
+  --radius-3xl: 20px;
+  --radius-4xl: 24px;
+  --radius-full: 9999px;
+
+  /* ===== Font Families ===== */
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+  --font-mono: 'Courier New', Monaco, monospace;
+
+  /* ===== Font Sizes ===== */
+  --font-size-xs: 9px;
+  --font-size-sm: 10px;
+  --font-size-md: 11px;
+  --font-size-base: 12px;
+  --font-size-lg: 13px;
+  --font-size-xl: 14px;
+  --font-size-2xl: 15px;
+  --font-size-3xl: 16px;
+
+  /* ===== Font Weights ===== */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* ===== Transitions ===== */
+  --transition-fast: 0.1s ease;
+  --transition-base: 0.15s ease;
+  --transition-slow: 0.2s ease;
+  --transition-cubic: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ===== Z-Index Scale ===== */
+  --z-base: 1;
+  --z-dropdown: 1001;
+  --z-sticky: 1000;
+  --z-overlay: 10001; /* Drawer overlay (above modals at 10000) */
+  --z-drawer: 10002;  /* Drawers must be highest (above modals at 10000) */
+  --z-modal: 10000;
+  --z-tooltip: 2147483647;
+
+  /* ===== Opacity Scale ===== */
+  --opacity-disabled: 0.3;
+  --opacity-muted: 0.5;
+  --opacity-subtle: 0.7;
+
+  /* ===== Shadows =====
+   * Note: Shadow colors use theme-specific rgba values defined in theme files
+   */
+  --shadow-sm: 0 1px 3px 0 var(--shadow-color-sm), 0 1px 2px -1px var(--shadow-color-sm);
+  --shadow-md: 0 4px 6px -1px var(--shadow-color-md), 0 2px 4px -2px var(--shadow-color-md);
+  --shadow-lg: 0 -4px 24px var(--shadow-color-lg);
+  --shadow-tooltip: 0 4px 6px -1px var(--shadow-color-tooltip), 0 2px 4px -2px var(--shadow-color-tooltip);
+  --shadow-hover: 0 8px 16px var(--shadow-color-hover);
+
+  /* ===== Shorthand Aliases for Embed Components ===== */
+  /* These aliases make it easier to use theme colors without the 'color-' prefix */
+  --bg-primary: var(--color-bg-primary);
+  --bg-secondary: var(--color-bg-secondary);
+  --bg-tertiary: var(--color-bg-tertiary);
+  --bg-hover: var(--color-bg-hover);
+  --bg-active: var(--color-bg-active);
+
+  --text-primary: var(--color-text-primary);
+  --text-secondary: var(--color-text-secondary);
+  --text-tertiary: var(--color-text-tertiary);
+  --text-muted: var(--color-text-muted);
+  --text-subtle: var(--color-text-subtle);
+  --text-placeholder: var(--color-text-placeholder);
+
+  --border-primary: var(--color-border-primary);
+  --border-secondary: var(--color-border-secondary);
+  --border-focus: var(--color-border-focus);
+  --border-hover: var(--color-border-hover);
+
+  --accent-primary: var(--color-accent-primary);
+  --accent-hover: var(--color-accent-hover);
+  --accent-light: var(--color-accent-light);
+
+  --error: var(--color-status-error);
+
+  /* ===== HeroUI v3 Compatibility Aliases ===== */
+  /* These provide shorthand access to HeroUI semantic colors */
+  /* Use: var(--primary), var(--danger), var(--success), etc. */
+  /* Note: Actual values defined in globals.css, these are just documentation */
+}

package/src/styles/utilities.css

@@ -0,0 +1,188 @@
+/**
+ * Shared Utility Classes
+ *
+ * This file contains utility classes that ui-react components depend on.
+ * Apps should import this file to ensure components work correctly:
+ *
+ *   @import "@snowcone-app/ui/styles/utilities.css";
+ *
+ * Utilities included:
+ * - .shadow-soft - Soft shadow for form inputs
+ * - .scrollbar-hide - Hide scrollbar completely
+ * - .auto-hide-scrollbar - Show scrollbar on hover
+ * - .custom-scrollbar - Themed scrollbar
+ * - Reduced motion support
+ * - iOS/mobile viewport utilities
+ */
+
+/* =============================================================================
+ * SHADOW UTILITIES
+ * ============================================================================= */
+
+/* Default shadow variable - can be overridden by themes */
+:root {
+  --shadow-soft: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+}
+
+/* Soft shadow for form inputs - visible on transparent surfaces */
+/* Composes with Tailwind's ring system so focus rings work properly */
+.shadow-soft {
+  --tw-shadow: var(--shadow-soft);
+  --tw-shadow-colored: var(--shadow-soft);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+.dark .shadow-soft {
+  --tw-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 2px 4px rgb(0 0 0 / 0.15);
+  --tw-shadow-colored: 0 1px 2px rgb(0 0 0 / 0.2), 0 2px 4px rgb(0 0 0 / 0.15);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+/* =============================================================================
+ * SCROLLBAR UTILITIES
+ * ============================================================================= */
+
+/* Hidden Scrollbar - completely hide scrollbar while maintaining scroll */
+.scrollbar-hide {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, and Opera */
+}
+
+/* Auto-hide Scrollbar - show on hover */
+.auto-hide-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.3s ease;
+}
+
+.auto-hide-scrollbar:hover {
+  scrollbar-color: var(--color-primary, #000) transparent;
+}
+
+.auto-hide-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.auto-hide-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.auto-hide-scrollbar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 9999px;
+  transition: background 0.3s ease;
+}
+
+.auto-hide-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: var(--color-primary, #000);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.auto-hide-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-primary, #000) 80%, black);
+  background-clip: content-box;
+}
+
+/* Custom Scrollbar - themed scrollbar always visible */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-primary, #000);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-primary, #000) 80%, black);
+  background-clip: content-box;
+}
+
+/* =============================================================================
+ * ACCESSIBILITY - REDUCED MOTION
+ * ============================================================================= */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* =============================================================================
+ * IOS / MOBILE UTILITIES
+ * ============================================================================= */
+
+/* Disable overscroll behavior (pull-to-refresh) */
+html,
+body {
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
+
+/* Prevent zoom on mobile form inputs.
+ * iOS Safari auto-zooms when an input with font-size < 16px gets focus.
+ * This sets 16px as the default — any component can override it with a
+ * normal Tailwind class (e.g. text-lg) without needing !important. */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+textarea,
+select {
+  font-size: 16px;
+}
+
+/* Prevent double-tap zoom and improve touch responsiveness */
+* {
+  touch-action: manipulation;
+}
+
+/* Ensure proper viewport height on mobile Safari */
+.min-h-screen-ios {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+html {
+  height: -webkit-fill-available;
+}
+
+/* Support for iOS safe areas and viewport */
+.fullscreen-container {
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* Help Safari recognize scroll containers and minimize address bar */
+.scroll-container {
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+}
+
+/* Force address bar to minimize on scroll (iOS only) */
+@supports (-webkit-touch-callout: none) {
+  body {
+    min-height: calc(100vh + 1px);
+  }
+}