@reservi/theme 2.0.0-beta.0 → 2.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reservi/theme",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "Tema de Reservi Calendar: design tokens (TailwindCSS 4 @theme) y estilos base.",
   "license": "MIT",
   "repository": {
@@ -25,12 +25,15 @@
     "*.css"
   ],
   "files": [
-    "src"
+    "src",
+    "scripts"
   ],
   "main": "./src/index.css",
   "style": "./src/index.css",
   "exports": {
     ".": "./src/index.css",
+    "./plain": "./src/plain.css",
+    "./tokens": "./src/tokens.generated.css",
     "./theme.css": "./src/theme.css",
     "./components.css": "./src/components.css",
     "./template": "./src/theme-template.css",
@@ -49,10 +52,11 @@
     "./themes/graphite": "./src/themes/graphite.css",
     "./themes/solarized-light": "./src/themes/solarized-light.css",
     "./themes/solarized-dark": "./src/themes/solarized-dark.css",
-    "./themes/contrast": "./src/themes/contrast.css"
+    "./themes/contrast": "./src/themes/contrast.css",
+    "./themes/reservi": "./src/themes/reservi.css"
   },
   "scripts": {
-    "build": "node -e \"process.exit(0)\"",
+    "build": "node scripts/build-plain.mjs",
     "lint": "node -e \"process.exit(0)\"",
     "typecheck": "node -e \"process.exit(0)\""
   }

package/scripts/build-plain.mjs

@@ -0,0 +1,49 @@
+/**
+ * Genera la variante "plain CSS" del tema a partir de la fuente de TailwindCSS 4.
+ *
+ * `theme.css` declara los design tokens en un bloque `@theme`, que solo
+ * entiende Tailwind 4. Los estilos de `components.css` no usan utilidades de
+ * Tailwind: leen las variables con `var(--color-rsv-*, fallback)`. Por tanto,
+ * para un consumidor con Tailwind 3 (o sin Tailwind) basta con declarar los
+ * mismos tokens en `:root`.
+ *
+ * Este script hace exactamente esa transformación, de modo que NO haya dos
+ * listas de tokens que mantener sincronizadas a mano.
+ *
+ * Salida: `src/tokens.generated.css`, que importa `plain.css`.
+ */
+import { readFile, writeFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = join(here, "..", "src");
+
+const HEADER = `/**
+ * ARCHIVO GENERADO — no editar a mano.
+ * Fuente: src/theme.css  ·  Generador: scripts/build-plain.mjs
+ *
+ * Misma lista de design tokens que el bloque \`@theme\` de Tailwind 4, pero
+ * declarados en \`:root\` para consumidores con Tailwind 3 o sin Tailwind.
+ */
+`;
+
+const theme = await readFile(join(src, "theme.css"), "utf8");
+
+// Se descarta el comentario de cabecera original (habla de Tailwind 4) antes de
+// comprobar que no queda ningun `@theme`: el comentario lo menciona.
+let out = theme.replace(/^\/\*\*[\s\S]*?\*\/\s*/, "");
+
+// `@theme { … }` → `:root { … }`. El bloque puede venir anidado dentro de un
+// `@media (prefers-color-scheme: dark)`, que se conserva tal cual.
+out = out.replace(/@theme(\s+(?:static|inline|reference|default))?\s*\{/g, ":root {");
+
+if (out.includes("@theme")) {
+  throw new Error("build-plain: queda algun @theme sin transformar en theme.css");
+}
+if (!out.includes(":root {")) {
+  throw new Error("build-plain: no se encontro ningun bloque @theme en theme.css");
+}
+
+await writeFile(join(src, "tokens.generated.css"), HEADER + "\n" + out, "utf8");
+console.log("@reservi/theme: src/tokens.generated.css generado desde src/theme.css");

package/src/components.css

@@ -16,6 +16,25 @@
   flex-direction: column;
 }
 
+/* El area de vista reparte el alto disponible del root (flex column), de modo
+   que el cuerpo de timeGrid pueda scrollear cuando el root tiene alto fijo.
+   Con `height: "auto"` el calendario crece con su contenido. */
+[data-rsv="view"] {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+[data-rsv="root"][data-rsv-autoheight="true"] [data-rsv="view"] {
+  flex: 0 0 auto;
+}
+
+/* Hueco donde el framework anfitrion (React/Vue) pinta un render prop: no debe
+   introducir una caja propia que rompa el layout del evento o de la celda. */
+[data-rsv="host"] {
+  display: contents;
+}
+
 /* Toolbar */
 [data-rsv="toolbar-wrap"] {
   display: flex;
@@ -348,6 +367,12 @@
   outline: 2px solid var(--color-rsv-primary, #4f46e5);
   outline-offset: 1px;
 }
+/* Selección múltiple (bulk ops): ctrl/cmd-click sobre un evento. */
+[data-rsv="event"][data-rsv-selected="true"] {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: 1px;
+  box-shadow: 0 0 0 3px var(--color-rsv-selection, #e8e8ff);
+}
 [data-rsv="day-number"] {
   align-self: flex-end;
   font-size: var(--text-rsv-sm, 0.8125rem);
@@ -373,6 +398,7 @@
   border-radius: var(--radius-rsv-event, 0.375rem);
   background: var(--rsv-event-bg, var(--color-rsv-event-1));
   color: var(--rsv-event-fg, var(--color-rsv-event-fg, #fff));
+  border: 1px solid var(--rsv-event-border, transparent);
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
@@ -475,6 +501,8 @@
 [data-rsv="timegrid"] {
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
   --rsv-tg-axis-width: 3.5rem;
 }
 [data-rsv="tg-header"],
@@ -511,6 +539,11 @@
   display: grid;
   grid-template-columns: var(--rsv-tg-axis-width) repeat(var(--rsv-tg-days, 7), minmax(0, 1fr));
   overflow: auto;
+  /* Imprescindible para que un grid dentro de un flex column pueda encogerse
+     y por tanto scrollear en vez de desbordar al padre. */
+  flex: 1 1 auto;
+  min-height: 0;
+  align-content: start;
 }
 [data-rsv="tg-axis"] {
   display: flex;
@@ -524,13 +557,25 @@
 [data-rsv="tg-slot"][data-major="true"] {
   border-top: 1px solid var(--color-rsv-border, #eee);
 }
+/**
+ * La etiqueta va centrada en su franja, no montada sobre la línea superior.
+ *
+ * Antes se subía con `top: -0.6em` y se le pintaba detrás un rectángulo opaco
+ * de `--color-rsv-bg` para tapar la línea que cruzaba el texto. Ese rectángulo
+ * asumía que el fondo real del eje era exactamente `--color-rsv-bg`, y se veía
+ * como una mancha en cuanto algo lo teñía (día actual, `surface`, franjas no
+ * laborables, o un token sobreescrito por la app).
+ *
+ * Centrada no cruza ningún borde, así que el rectángulo sobra y el problema
+ * desaparece en vez de taparse.
+ */
 [data-rsv="tg-slot-label"] {
   position: absolute;
-  top: -0.6em;
+  top: 50%;
+  transform: translateY(-50%);
   right: 0.35rem;
   font-size: var(--text-rsv-xs, 0.75rem);
   color: var(--color-rsv-muted, #777);
-  background: var(--color-rsv-bg, #fff);
 }
 [data-rsv="tg-col"] {
   position: relative;
@@ -554,7 +599,72 @@
   font-size: var(--text-rsv-xs, 0.75rem);
   overflow: hidden;
   box-sizing: border-box;
-  border: 1px solid color-mix(in oklch, var(--rsv-event-bg) 80%, black);
+  /* `borderColor` del evento si lo hay; si no, un tono del propio fondo. */
+  border: 1px solid var(--rsv-event-border, color-mix(in oklch, var(--rsv-event-bg) 80%, black));
+  align-items: stretch;
+  white-space: normal;
+}
+
+/**
+ * Arrastre de un evento en timeGrid.
+ *
+ * El `cursor: grab` solo existia para daygrid, asi que en las vistas de tiempo
+ * nada indicaba que la tarjeta se pudiera mover. Y durante el gesto no se
+ * pintaba nada: la tarjeta se quedaba quieta y saltaba a su nueva posicion solo
+ * al soltar. `drag-mirror` muestra donde va a caer, y la tarjeta de origen se
+ * atenua para leerse como "levantada".
+ */
+[data-rsv="tg-col"] [data-rsv="event"][data-editable="true"],
+[data-rsv="tg-col"] [data-rsv="event"]:has([data-rsv="resize-handle"]) {
+  cursor: grab;
+  touch-action: none;
+}
+[data-rsv="event"][data-rsv-dragging="true"] {
+  cursor: grabbing;
+  opacity: 0.55;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
+  z-index: 30;
+}
+
+/**
+ * Mes: el destino es una celda de dia entera, no una franja horaria, asi que
+ * en vez de un fantasma se resalta el dia bajo el puntero. La tarjeta de origen
+ * se eleva con la misma regla `[data-rsv-dragging]` que en timeGrid.
+ */
+[data-rsv="day"][data-rsv-drop="true"] {
+  outline: 2px dashed var(--color-rsv-primary, #4f46e5);
+  outline-offset: -2px;
+  background: var(--color-rsv-selection, #e8e8ff);
+}
+[data-rsv="daygrid"] [data-rsv="event"][data-rsv-dragging="true"] {
+  cursor: grabbing;
+  opacity: 0.55;
+}
+
+/* Fantasma que sigue al puntero mientras se arrastra un evento. */
+[data-rsv="drag-mirror"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  z-index: 25;
+  border: 1px dashed var(--color-rsv-primary, #4f46e5);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  background: var(--color-rsv-selection, #e8e8ff);
+  opacity: 0.85;
+}
+
+/* Fantasma del rango que se esta seleccionando (`selectMirror`). */
+[data-rsv="select-mirror"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: var(--color-rsv-selection, #e8e8ff);
+  border: 1px dashed var(--color-rsv-primary, #4f46e5);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  opacity: 0.7;
+  pointer-events: none;
+  z-index: 4;
 }
 [data-rsv="tg-nonbusiness"] {
   position: absolute;
@@ -602,6 +712,10 @@
   flex-direction: column;
 }
 [data-rsv="list-day-header"] {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
   position: sticky;
   top: 0;
   padding: 0.4rem 0.75rem;
@@ -615,6 +729,11 @@
 [data-rsv="list-day"][data-today="true"] [data-rsv="list-day-header"] {
   color: var(--color-rsv-primary, #4f46e5);
 }
+[data-rsv="list-day-side-text"] {
+  font-weight: 400;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  color: var(--color-rsv-muted, #777);
+}
 [data-rsv="list-item"] {
   display: flex;
   align-items: center;
@@ -812,6 +931,55 @@
   cursor: pointer;
 }
 
+/* Vista mensual con recursos como columnas anidadas por día. */
+[data-rsv="resource-daygrid-month"] {
+  display: flex;
+  flex-direction: column;
+}
+[data-rsv="rdgm-week"] {
+  display: grid;
+  grid-template-columns: repeat(var(--rsv-rdgm-cols, 7), minmax(0, 1fr));
+}
+[data-rsv="rdgm-week"] [data-rsv="day"]:last-child {
+  border-right: none;
+}
+[data-rsv="rdgm-columns"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  overflow: hidden;
+}
+[data-rsv="rdgm-col"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  border-inline-start: 2px solid var(--color-rsv-border, #eee);
+  padding-inline-start: 0.2rem;
+}
+[data-rsv="rdgm-col-label"] {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--color-rsv-muted, #777);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+[data-rsv="rdgm-col"] [data-rsv="event"] {
+  background: var(--rsv-event-bg, var(--color-rsv-event-1));
+  color: var(--rsv-event-fg, #fff);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  padding: 0.05rem 0.3rem;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+[data-rsv="rdgm-more"] {
+  font-size: 0.65rem;
+  color: var(--color-rsv-muted, #777);
+  cursor: pointer;
+}
+
 /* Eventos de fondo (display: background) */
 [data-rsv="event"][data-display="background"] {
   opacity: 0.25;

package/src/plain.css

@@ -0,0 +1,12 @@
+/**
+ * Punto de entrada "plain CSS" de Reservi Calendar: sin Tailwind.
+ *
+ * Uso (Tailwind 3, CSS Modules, PostCSS o un <link> suelto):
+ *   @import "@reservi/theme/plain";
+ *
+ * Equivale a `@reservi/theme` pero declara los design tokens en `:root` en
+ * lugar de en un bloque `@theme` de TailwindCSS 4. Los estilos de componentes
+ * son los mismos: leen los tokens con `var(--color-rsv-*, fallback)`.
+ */
+@import "./tokens.generated.css";
+@import "./components.css";

package/src/themes/index.css

@@ -18,3 +18,4 @@
 @import "./solarized-light.css";
 @import "./solarized-dark.css";
 @import "./contrast.css";
+@import "./reservi.css";

package/src/themes/reservi.css

@@ -0,0 +1,44 @@
+/**
+ * Theme "reservi" — claro, paleta de marca de Reservi.
+ *
+ * Los valores son los mismos hex de `tailwind.config.js` de reservi-frontend-v2.
+ * Se usa hex y no `oklch()` como el resto de themes a propósito: son colores de
+ * marca y la conversión introduce desviación; aquí pesa más la fidelidad.
+ *
+ * `--font-rsv-sans` NO se declara aquí: la fuente de la app (Urbanist) llega
+ * como variable de Next, así que la aporta el frontend vía `themeTokens`.
+ */
+[data-rsv-theme="reservi"] {
+  /* Superficies */
+  --color-rsv-bg: #fefefe;
+  --color-rsv-surface: #faf5fc;
+  --color-rsv-border: #efefef;
+  --color-rsv-muted: #5e636b;
+  --color-rsv-text: #1a1a1a;
+
+  /* Marca / acento */
+  --color-rsv-primary: #865e9b;
+  --color-rsv-primary-fg: #fefefe;
+  /* Translúcido a propósito: tiñe la columna del día actual sin tapar las
+     líneas de franja que se pintan debajo. */
+  --color-rsv-today: rgba(155, 135, 245, 0.1);
+
+  /* Eventos — mapeados a los estados de cita (`border-status-*`). */
+  --color-rsv-event-1: #865e9b; /* pendiente  */
+  --color-rsv-event-2: #78b157; /* confirmada */
+  --color-rsv-event-3: #e1d25e; /* no-show    */
+  --color-rsv-event-4: #d85353; /* cancelada  */
+  --color-rsv-event-5: #bbbec2; /* completada */
+  /* Texto oscuro: la paleta de estados va de claro (#e1d25e, #bbbec2) a medio,
+     y un fg blanco sería ilegible sobre los dos claros. */
+  --color-rsv-event-fg: #141517;
+
+  /* Estados */
+  --color-rsv-now: #d85353;
+  --color-rsv-selection: #f6f0fa;
+  --color-rsv-nonbusiness: rgba(250, 250, 255, 0.5);
+
+  /* Geometría */
+  --radius-rsv: 8px;
+  --radius-rsv-event: 4px;
+}

package/src/tokens.generated.css

@@ -0,0 +1,74 @@
+/**
+ * ARCHIVO GENERADO — no editar a mano.
+ * Fuente: src/theme.css  ·  Generador: scripts/build-plain.mjs
+ *
+ * Misma lista de design tokens que el bloque `@theme` de Tailwind 4, pero
+ * declarados en `:root` para consumidores con Tailwind 3 o sin Tailwind.
+ */
+
+:root {
+  /* Superficies */
+  --color-rsv-bg: oklch(1 0 0);
+  --color-rsv-surface: oklch(0.98 0 0);
+  --color-rsv-border: oklch(0.9 0 0);
+  --color-rsv-muted: oklch(0.55 0 0);
+  --color-rsv-text: oklch(0.2 0 0);
+
+  /* Marca / acento */
+  --color-rsv-primary: oklch(0.55 0.2 264);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.97 0.04 264);
+
+  /* Paleta categórica de eventos */
+  --color-rsv-event-1: oklch(0.6 0.18 264);
+  --color-rsv-event-2: oklch(0.65 0.17 150);
+  --color-rsv-event-3: oklch(0.7 0.17 60);
+  --color-rsv-event-4: oklch(0.62 0.2 20);
+  --color-rsv-event-5: oklch(0.6 0.16 320);
+  --color-rsv-event-fg: oklch(0.99 0 0);
+
+  /* Estados */
+  --color-rsv-now: oklch(0.6 0.22 20);
+  --color-rsv-selection: oklch(0.9 0.05 264);
+  --color-rsv-nonbusiness: oklch(0.96 0 0);
+
+  /* Tipografía */
+  --font-rsv-sans: ui-sans-serif, system-ui, sans-serif;
+  --text-rsv-xs: 0.75rem;
+  --text-rsv-sm: 0.8125rem;
+  --text-rsv-base: 0.875rem;
+
+  /* Geometría */
+  --radius-rsv: 0.5rem;
+  --radius-rsv-event: 0.375rem;
+  --spacing-rsv-slot: 2.5rem;
+  --spacing-rsv-gutter: 0.25rem;
+
+  /* Sombras y transición */
+  --shadow-rsv-pop: 0 4px 20px -4px oklch(0 0 0 / 0.2);
+  --ease-rsv: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Modo oscuro automático */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-rsv-bg: oklch(0.18 0.01 264);
+    --color-rsv-surface: oklch(0.22 0.01 264);
+    --color-rsv-border: oklch(0.3 0.01 264);
+    --color-rsv-text: oklch(0.95 0 0);
+    --color-rsv-muted: oklch(0.6 0 0);
+    --color-rsv-today: oklch(0.3 0.05 264);
+    --color-rsv-nonbusiness: oklch(0.2 0.01 264);
+  }
+}
+
+/* Modo oscuro por clase (.dark) para toggle manual */
+.dark {
+  --color-rsv-bg: oklch(0.18 0.01 264);
+  --color-rsv-surface: oklch(0.22 0.01 264);
+  --color-rsv-border: oklch(0.3 0.01 264);
+  --color-rsv-text: oklch(0.95 0 0);
+  --color-rsv-muted: oklch(0.6 0 0);
+  --color-rsv-today: oklch(0.3 0.05 264);
+  --color-rsv-nonbusiness: oklch(0.2 0.01 264);
+}