@emara/ui 1.1.0

package/styles/globals.css

@@ -0,0 +1,685 @@
+/*
+ * Emara UI — globals.css
+ *
+ * Default theme baked in: Slate base + Indigo primary + warm density.
+ * To regenerate with different choices, run:
+ *   npx @emara/cli theme set base <name>
+ *   npx @emara/cli theme set primary <name>
+ *   npx @emara/cli theme set density <warm|dense>
+ *
+ * Spec: docs/emara-ui-design-tokens.md
+ */
+
+/* Google Fonts must come before `@import "tailwindcss"` — Tailwind v4
+   expands its own @import inline, and any @import statement after that
+   expansion violates the "all @imports must precede other rules" rule. */
+@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wght@200..900&family=Noto+Kufi+Arabic:wght@100..900&display=swap");
+@import "tailwindcss";
+
+/*
+ * Source paths for Tailwind v4 content scanning. Only used inside this repo
+ * — the CLI's generate-css.ts emits its own globals.css for consumer projects
+ * without these directives (consumer components live in their own project
+ * tree, which Tailwind auto-scans).
+ */
+@source "../components/**/*.{ts,tsx}";
+
+/* =============================================================================
+ * 1. Semantic color tokens — Slate + Cyan
+ * ============================================================================= */
+
+:root {
+  /* Surfaces */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264);
+
+  /* Actions
+   * Light-mode primary uses the 600 shade (not 500) so that white text on
+   * primary backgrounds clears WCAG AA's 4.5:1 contrast minimum. The
+   * common "X-500" picks fail this check for several hues (cyan, lime,
+   * yellow, sky, teal). 600 is consistently safe.
+   */
+  --primary: oklch(0.511 0.262 276.966); /* indigo-600 */
+  --primary-foreground: oklch(1 0 0);
+
+  --secondary: oklch(0.968 0.007 247); /* slate-100 */
+  --secondary-foreground: oklch(0.208 0.042 265);
+
+  /* Subtle */
+  --muted: oklch(0.968 0.007 247);
+  --muted-foreground: oklch(0.554 0.046 257);
+
+  /* Hover / item highlight */
+  --accent: oklch(0.968 0.007 247);
+  --accent-foreground: oklch(0.208 0.042 265);
+
+  /* States — destructive uses red-600 for the same contrast reason. */
+  --destructive: oklch(0.577 0.245 27); /* red-600 */
+  --destructive-foreground: oklch(1 0 0);
+  --success: oklch(0.6 0.18 145);
+  --warning: oklch(0.75 0.18 80);
+  --info: oklch(0.6 0.18 240);
+
+  /* Lines */
+  --border: oklch(0.929 0.013 256);
+  --input: oklch(0.929 0.013 256);
+  --ring: oklch(0.511 0.262 276.966); /* matches primary */
+}
+
+.dark {
+  /* Surfaces */
+  --background: oklch(0.129 0.042 264);
+  --foreground: oklch(0.984 0.003 247);
+
+  --card: oklch(0.208 0.042 265);
+  --card-foreground: oklch(0.984 0.003 247);
+
+  --popover: oklch(0.208 0.042 265);
+  --popover-foreground: oklch(0.984 0.003 247);
+
+  /* Actions */
+  --primary: oklch(0.673 0.182 276.935); /* indigo-400 (one shade lighter in dark) */
+  --primary-foreground: oklch(0.129 0.042 264);
+
+  --secondary: oklch(0.279 0.041 260);
+  --secondary-foreground: oklch(0.984 0.003 247);
+
+  /* Subtle */
+  --muted: oklch(0.279 0.041 260);
+  --muted-foreground: oklch(0.704 0.04 257);
+
+  /* Hover / item highlight */
+  --accent: oklch(0.279 0.041 260);
+  --accent-foreground: oklch(0.984 0.003 247);
+
+  /* States */
+  --destructive: oklch(0.704 0.191 22);
+  --destructive-foreground: oklch(0.984 0.003 247);
+  --success: oklch(0.72 0.18 145);
+  --warning: oklch(0.82 0.18 80);
+  --info: oklch(0.7 0.18 240);
+
+  /* Lines */
+  --border: oklch(0.279 0.041 260);
+  --input: oklch(0.279 0.041 260);
+  --ring: oklch(0.673 0.182 276.935);
+}
+
+/* =============================================================================
+ * 2. Spacing tokens — warm density
+ * ============================================================================= */
+
+:root {
+  --space-0: 0;
+  --space-px: 1px;
+  --space-0_5: 2px;
+  --space-1: 4px;
+  --space-1_5: 6px;
+  --space-2: 8px;
+  --space-2_5: 10px;
+  --space-3: 12px;
+  --space-3_5: 14px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+}
+
+/* =============================================================================
+ * 3. Typography tokens
+ * ============================================================================= */
+
+:root {
+  --font-sans: "Mona Sans", system-ui, sans-serif;
+  --font-arabic: "Noto Kufi Arabic", "Mona Sans", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Warm sizes — font-size / line-height */
+  --text-2xs: 11px;
+  --text-2xs--line-height: 14px;
+  --text-xs: 12px;
+  --text-xs--line-height: 16px;
+  --text-sm: 14px;
+  --text-sm--line-height: 20px;
+  --text-base: 16px;
+  --text-base--line-height: 24px;
+  --text-lg: 18px;
+  --text-lg--line-height: 28px;
+  --text-xl: 20px;
+  --text-xl--line-height: 28px;
+  --text-2xl: 24px;
+  --text-2xl--line-height: 32px;
+  --text-3xl: 30px;
+  --text-3xl--line-height: 36px;
+  --text-4xl: 36px;
+  --text-4xl--line-height: 40px;
+  --text-5xl: 48px;
+  --text-5xl--line-height: 1;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+}
+
+:lang(ar),
+[dir="rtl"] {
+  font-family: var(--font-arabic);
+}
+
+/* =============================================================================
+ * 4. Icon sizes
+ * ============================================================================= */
+
+:root {
+  --icon-xs: 12px;
+  --icon-sm: 14px;
+  --icon-md: 16px;
+  --icon-lg: 20px;
+  --icon-xl: 24px;
+  --icon-2xl: 32px;
+}
+
+/* =============================================================================
+ * 5. Radius — warm density
+ * ============================================================================= */
+
+:root {
+  --radius-none: 0;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 9999px;
+}
+
+/* =============================================================================
+ * 6. Shadows — warm density
+ * ============================================================================= */
+
+:root {
+  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}
+
+/* =============================================================================
+ * 7. Motion
+ * ============================================================================= */
+
+:root {
+  --duration-instant: 0ms;
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+
+  --ease-linear: linear;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0ms !important;
+    transition-duration: 0ms !important;
+  }
+}
+
+/* =============================================================================
+ * 8. Keyframes (logical directions for RTL safety)
+ * ============================================================================= */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    transform: translateY(-8px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(8px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/*
+ * Slide-in keyframes use a CSS variable that the cascade flips between
+ * directions. Components apply the keyframe and the cascade picks the right
+ * offset for the current `dir`.
+ */
+
+:root {
+  --slide-offset-start: -8px;
+  --slide-offset-end: 8px;
+}
+
+[dir="rtl"] {
+  --slide-offset-start: 8px;
+  --slide-offset-end: -8px;
+}
+
+@keyframes slide-in-from-start {
+  from {
+    transform: translateX(var(--slide-offset-start));
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-from-end {
+  from {
+    transform: translateX(var(--slide-offset-end));
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: -200% 0;
+  }
+  to {
+    background-position: 200% 0;
+  }
+}
+
+/*
+ * Used by Skeleton's `animation: "shimmer"`. Slides a `::before` pseudo
+ * across the element. The cascade flips the direction for RTL via the
+ * --shimmer-translate variable.
+ */
+:root {
+  --shimmer-translate-from: -100%;
+  --shimmer-translate-to: 100%;
+}
+
+[dir="rtl"] {
+  --shimmer-translate-from: 100%;
+  --shimmer-translate-to: -100%;
+}
+
+@keyframes shimmer-slide {
+  from {
+    transform: translateX(var(--shimmer-translate-from));
+  }
+  to {
+    transform: translateX(var(--shimmer-translate-to));
+  }
+}
+
+@keyframes collapse-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--collapsible-content-height);
+  }
+}
+
+@keyframes collapse-up {
+  from {
+    height: var(--collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* =============================================================================
+ * 9. Z-index
+ * ============================================================================= */
+
+:root {
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-fixed: 1200;
+  --z-overlay: 1300;
+  --z-modal: 1400;
+  --z-popover: 1500;
+  --z-tooltip: 1600;
+  --z-toast: 1700;
+
+  /* Component scales — see emara-ui-design-tokens.md §11b */
+
+  /* Drawer (horizontal — width) */
+  --drawer-w-xs: 17.5rem;
+  --drawer-w-sm: 22.5rem;
+  --drawer-w-md: 27.5rem;
+  --drawer-w-lg: 35rem;
+  --drawer-w-xl: 45rem;
+
+  /* Drawer (vertical — height) */
+  --drawer-h-xs: 10rem;
+  --drawer-h-sm: 15rem;
+  --drawer-h-md: 20rem;
+  --drawer-h-lg: 30rem;
+  --drawer-h-xl: 40rem;
+
+  /* Dialog (max-width) */
+  --dialog-max-w-xs: 20rem;
+  --dialog-max-w-sm: 26.25rem;
+  --dialog-max-w-md: 35rem;
+  --dialog-max-w-lg: 45rem;
+  --dialog-max-w-xl: 60rem;
+
+  /* Sidebar (width) */
+  --sidebar-w-sm: 12.5rem;
+  --sidebar-w-md: 15rem;
+  --sidebar-w-lg: 17.5rem;
+  --sidebar-w-collapsed: 4rem;
+
+  /* FieldGroup (horizontal label min-width) */
+  --field-label-min-w: 7rem;
+}
+
+/* =============================================================================
+ * 10. RTL helpers
+ * ============================================================================= */
+
+[dir="rtl"] .rtl-mirror {
+  transform: scaleX(-1);
+}
+
+/* =============================================================================
+ * 10b. Z-layer utilities — `z-sticky`, `z-fixed`, … bind to --z-* tokens.
+ * Components should use these named layers instead of raw `z-{n}` literals
+ * so stacking order stays predictable under composition (e.g. tooltip
+ * inside dropdown inside dialog). Spec: emara-ui-design-tokens.md §9.
+ * ============================================================================= */
+
+@utility z-sticky {
+  z-index: var(--z-sticky);
+}
+@utility z-fixed {
+  z-index: var(--z-fixed);
+}
+@utility z-overlay {
+  z-index: var(--z-overlay);
+}
+@utility z-modal {
+  z-index: var(--z-modal);
+}
+@utility z-popover {
+  z-index: var(--z-popover);
+}
+@utility z-tooltip {
+  z-index: var(--z-tooltip);
+}
+@utility z-toast {
+  z-index: var(--z-toast);
+}
+
+/* =============================================================================
+ * 10c. Motion utilities — bind to --duration-* tokens.
+ * Use `duration-fast | duration-normal | duration-slow` instead of raw
+ * `duration-{ms}` literals so timing scales with the prefers-reduced-motion
+ * override + print mode (both already neutralize the tokens in section 12).
+ * Spec: emara-ui-design-tokens.md §motion.
+ * ============================================================================= */
+
+@utility duration-fast {
+  transition-duration: var(--duration-fast);
+}
+@utility duration-normal {
+  transition-duration: var(--duration-normal);
+}
+@utility duration-slow {
+  transition-duration: var(--duration-slow);
+}
+
+/* =============================================================================
+ * 10d. Component-scale utilities — bind component-specific scales to
+ * Tailwind utilities (`w-drawer-xs` etc.) so component source stays readable.
+ * Spec: emara-ui-design-tokens.md §11b.
+ * ============================================================================= */
+
+@utility w-drawer-xs {
+  width: var(--drawer-w-xs);
+}
+@utility w-drawer-sm {
+  width: var(--drawer-w-sm);
+}
+@utility w-drawer-md {
+  width: var(--drawer-w-md);
+}
+@utility w-drawer-lg {
+  width: var(--drawer-w-lg);
+}
+@utility w-drawer-xl {
+  width: var(--drawer-w-xl);
+}
+
+@utility h-drawer-xs {
+  height: var(--drawer-h-xs);
+}
+@utility h-drawer-sm {
+  height: var(--drawer-h-sm);
+}
+@utility h-drawer-md {
+  height: var(--drawer-h-md);
+}
+@utility h-drawer-lg {
+  height: var(--drawer-h-lg);
+}
+@utility h-drawer-xl {
+  height: var(--drawer-h-xl);
+}
+
+@utility max-w-dialog-xs {
+  max-width: var(--dialog-max-w-xs);
+}
+@utility max-w-dialog-sm {
+  max-width: var(--dialog-max-w-sm);
+}
+@utility max-w-dialog-md {
+  max-width: var(--dialog-max-w-md);
+}
+@utility max-w-dialog-lg {
+  max-width: var(--dialog-max-w-lg);
+}
+@utility max-w-dialog-xl {
+  max-width: var(--dialog-max-w-xl);
+}
+
+@utility w-sidebar-sm {
+  width: var(--sidebar-w-sm);
+}
+@utility w-sidebar-md {
+  width: var(--sidebar-w-md);
+}
+@utility w-sidebar-lg {
+  width: var(--sidebar-w-lg);
+}
+@utility w-sidebar-collapsed {
+  width: var(--sidebar-w-collapsed);
+}
+
+@utility min-w-field-label {
+  min-width: var(--field-label-min-w);
+}
+
+/* =============================================================================
+ * 11. Tailwind v4 theme integration
+ * ============================================================================= */
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+  --radius-full: var(--radius-full);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  /* Extended type-scale step below Tailwind's default `text-xs`. Spec §4.2. */
+  --text-2xs: 11px;
+  --text-2xs--line-height: 14px;
+}
+
+/* =============================================================================
+ * 12. Print
+ * ============================================================================= */
+
+@media print {
+  :root {
+    --background: white;
+    --foreground: black;
+    --card: white;
+    --card-foreground: black;
+    --muted: white;
+    --muted-foreground: #555;
+    --border: #ccc;
+    --shadow-xs: none;
+    --shadow-sm: none;
+    --shadow-md: none;
+    --shadow-lg: none;
+    --shadow-xl: none;
+    --shadow-2xl: none;
+    --duration-fast: 0ms;
+    --duration-normal: 0ms;
+    --duration-slow: 0ms;
+  }
+
+  .no-print {
+    display: none !important;
+  }
+}
+
+@media not print {
+  .print-only {
+    display: none !important;
+  }
+}
+
+@page {
+  margin: 2cm;
+}