@reservi/theme 1.1.0

package/src/index.css

@@ -0,0 +1,6 @@
+/**
+ * Punto de entrada del tema de Reservi Calendar.
+ * Uso:  @import "tailwindcss";  @import "@reservi/theme";
+ */
+@import "./theme.css";
+@import "./components.css";

package/src/theme-template.css

@@ -0,0 +1,43 @@
+/**
+ * PLANTILLA DE THEME PERSONALIZADO de Reservi Calendar.
+ *
+ * Copia este archivo, renómbralo (p. ej. "mi-marca.css"), cambia el nombre del
+ * selector data-rsv-theme y ajusta los valores. Luego:
+ *   1) impórtalo:  @import "./mi-marca.css";
+ *   2) actívalo:   <ReserviCalendar theme="mi-marca" />  (o data-rsv-theme="mi-marca")
+ *
+ * Solo necesitas declarar los tokens que quieras cambiar; el resto hereda del
+ * tema base. Todos los tokens disponibles están listados abajo. Ver THEMES.md.
+ */
+[data-rsv-theme="mi-marca"] {
+  /* 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);
+
+  /* Eventos (paleta categórica) */
+  --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);
+
+  /* Geometría / tipografía */
+  --radius-rsv: 0.5rem;
+  --radius-rsv-event: 0.375rem;
+  --spacing-rsv-slot: 2.5rem;
+  --font-rsv-sans: ui-sans-serif, system-ui, sans-serif;
+}

package/src/theme.css

@@ -0,0 +1,70 @@
+/**
+ * Design tokens de Reservi Calendar para TailwindCSS 4 (@theme).
+ * Sobreescribe cualquier token en tu app para retematizar (ver DESIGN.md).
+ */
+@theme {
+  /* 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) {
+  @theme {
+    --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);
+}

package/src/themes/amber.css

@@ -0,0 +1,16 @@
+/** Theme "amber" — claro, acento ámbar cálido. */
+[data-rsv-theme="amber"] {
+  --color-rsv-bg: oklch(0.99 0.01 80);
+  --color-rsv-surface: oklch(0.97 0.02 80);
+  --color-rsv-border: oklch(0.9 0.03 80);
+  --color-rsv-text: oklch(0.28 0.04 70);
+  --color-rsv-muted: oklch(0.55 0.04 70);
+  --color-rsv-primary: oklch(0.7 0.15 75);
+  --color-rsv-primary-fg: oklch(0.2 0.04 70);
+  --color-rsv-today: oklch(0.95 0.06 80);
+  --color-rsv-event-1: oklch(0.72 0.15 75);
+  --color-rsv-event-2: oklch(0.7 0.15 50);
+  --color-rsv-event-3: oklch(0.74 0.14 100);
+  --color-rsv-event-4: oklch(0.68 0.16 30);
+  --color-rsv-event-5: oklch(0.72 0.13 130);
+}

package/src/themes/contrast.css

@@ -0,0 +1,18 @@
+/** Theme "contrast" — alto contraste (accesibilidad). */
+[data-rsv-theme="contrast"] {
+  --color-rsv-bg: oklch(1 0 0);
+  --color-rsv-surface: oklch(1 0 0);
+  --color-rsv-border: oklch(0.4 0 0);
+  --color-rsv-text: oklch(0.12 0 0);
+  --color-rsv-muted: oklch(0.3 0 0);
+  --color-rsv-primary: oklch(0.4 0.25 264);
+  --color-rsv-primary-fg: oklch(1 0 0);
+  --color-rsv-today: oklch(0.9 0.1 264);
+  --color-rsv-nonbusiness: oklch(0.92 0 0);
+  --color-rsv-event-1: oklch(0.4 0.25 264);
+  --color-rsv-event-2: oklch(0.42 0.2 150);
+  --color-rsv-event-3: oklch(0.4 0.2 30);
+  --color-rsv-event-4: oklch(0.38 0.25 10);
+  --color-rsv-event-5: oklch(0.4 0.22 320);
+  --radius-rsv-event: 0.25rem;
+}

package/src/themes/dracula.css

@@ -0,0 +1,17 @@
+/** Theme "dracula" — oscuro, paleta vibrante. */
+[data-rsv-theme="dracula"] {
+  --color-rsv-bg: oklch(0.24 0.03 290);
+  --color-rsv-surface: oklch(0.28 0.03 290);
+  --color-rsv-border: oklch(0.38 0.03 290);
+  --color-rsv-text: oklch(0.95 0.02 300);
+  --color-rsv-muted: oklch(0.65 0.03 290);
+  --color-rsv-primary: oklch(0.75 0.16 330);
+  --color-rsv-primary-fg: oklch(0.2 0.03 290);
+  --color-rsv-today: oklch(0.34 0.06 320);
+  --color-rsv-nonbusiness: oklch(0.26 0.03 290);
+  --color-rsv-event-1: oklch(0.75 0.16 330);
+  --color-rsv-event-2: oklch(0.78 0.16 180);
+  --color-rsv-event-3: oklch(0.85 0.15 110);
+  --color-rsv-event-4: oklch(0.72 0.16 25);
+  --color-rsv-event-5: oklch(0.78 0.15 280);
+}

package/src/themes/forest.css

@@ -0,0 +1,16 @@
+/** Theme "forest" — claro, acento verde bosque. */
+[data-rsv-theme="forest"] {
+  --color-rsv-bg: oklch(0.99 0.01 150);
+  --color-rsv-surface: oklch(0.97 0.02 150);
+  --color-rsv-border: oklch(0.9 0.03 150);
+  --color-rsv-text: oklch(0.25 0.04 150);
+  --color-rsv-muted: oklch(0.5 0.04 150);
+  --color-rsv-primary: oklch(0.55 0.15 150);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.95 0.05 150);
+  --color-rsv-event-1: oklch(0.58 0.15 150);
+  --color-rsv-event-2: oklch(0.6 0.13 180);
+  --color-rsv-event-3: oklch(0.62 0.15 120);
+  --color-rsv-event-4: oklch(0.6 0.14 90);
+  --color-rsv-event-5: oklch(0.55 0.13 200);
+}

package/src/themes/graphite.css

@@ -0,0 +1,17 @@
+/** Theme "graphite" — oscuro neutro (gris). */
+[data-rsv-theme="graphite"] {
+  --color-rsv-bg: oklch(0.2 0 0);
+  --color-rsv-surface: oklch(0.24 0 0);
+  --color-rsv-border: oklch(0.34 0 0);
+  --color-rsv-text: oklch(0.95 0 0);
+  --color-rsv-muted: oklch(0.62 0 0);
+  --color-rsv-primary: oklch(0.7 0.02 250);
+  --color-rsv-primary-fg: oklch(0.18 0 0);
+  --color-rsv-today: oklch(0.3 0.01 250);
+  --color-rsv-nonbusiness: oklch(0.22 0 0);
+  --color-rsv-event-1: oklch(0.65 0.14 264);
+  --color-rsv-event-2: oklch(0.68 0.13 160);
+  --color-rsv-event-3: oklch(0.75 0.13 90);
+  --color-rsv-event-4: oklch(0.65 0.16 25);
+  --color-rsv-event-5: oklch(0.68 0.13 320);
+}

package/src/themes/index.css

@@ -0,0 +1,20 @@
+/**
+ * Todos los themes pre-hechos de Reservi Calendar.
+ * Importa este archivo para tenerlos todos disponibles vía data-rsv-theme:
+ *   @import "@reservi/theme/themes";
+ */
+@import "./midnight.css";
+@import "./ocean.css";
+@import "./sunset.css";
+@import "./forest.css";
+@import "./lavender.css";
+@import "./rose.css";
+@import "./slate.css";
+@import "./amber.css";
+@import "./mint.css";
+@import "./dracula.css";
+@import "./nord.css";
+@import "./graphite.css";
+@import "./solarized-light.css";
+@import "./solarized-dark.css";
+@import "./contrast.css";

package/src/themes/lavender.css

@@ -0,0 +1,16 @@
+/** Theme "lavender" — claro, acento lavanda. */
+[data-rsv-theme="lavender"] {
+  --color-rsv-bg: oklch(0.99 0.01 300);
+  --color-rsv-surface: oklch(0.97 0.02 300);
+  --color-rsv-border: oklch(0.9 0.03 300);
+  --color-rsv-text: oklch(0.27 0.04 300);
+  --color-rsv-muted: oklch(0.55 0.04 300);
+  --color-rsv-primary: oklch(0.58 0.15 300);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.95 0.05 300);
+  --color-rsv-event-1: oklch(0.6 0.15 300);
+  --color-rsv-event-2: oklch(0.62 0.14 270);
+  --color-rsv-event-3: oklch(0.64 0.14 330);
+  --color-rsv-event-4: oklch(0.6 0.14 240);
+  --color-rsv-event-5: oklch(0.66 0.12 350);
+}

package/src/themes/midnight.css

@@ -0,0 +1,20 @@
+/**
+ * Theme "midnight" — oscuro azulado. Se activa con data-rsv-theme="midnight"
+ * en el root (o la opción `theme: "midnight"`).
+ */
+[data-rsv-theme="midnight"] {
+  --color-rsv-bg: oklch(0.16 0.03 264);
+  --color-rsv-surface: oklch(0.2 0.03 264);
+  --color-rsv-border: oklch(0.3 0.03 264);
+  --color-rsv-muted: oklch(0.6 0.02 264);
+  --color-rsv-text: oklch(0.95 0.01 264);
+  --color-rsv-primary: oklch(0.7 0.16 280);
+  --color-rsv-primary-fg: oklch(0.15 0.03 264);
+  --color-rsv-today: oklch(0.28 0.06 280);
+  --color-rsv-nonbusiness: oklch(0.18 0.03 264);
+  --color-rsv-event-1: oklch(0.7 0.15 280);
+  --color-rsv-event-2: oklch(0.72 0.15 190);
+  --color-rsv-event-3: oklch(0.78 0.15 90);
+  --color-rsv-event-4: oklch(0.7 0.17 20);
+  --color-rsv-event-5: oklch(0.72 0.15 330);
+}

package/src/themes/mint.css

@@ -0,0 +1,16 @@
+/** Theme "mint" — claro, acento menta/teal. */
+[data-rsv-theme="mint"] {
+  --color-rsv-bg: oklch(0.99 0.01 170);
+  --color-rsv-surface: oklch(0.97 0.02 170);
+  --color-rsv-border: oklch(0.9 0.03 170);
+  --color-rsv-text: oklch(0.26 0.04 180);
+  --color-rsv-muted: oklch(0.52 0.04 180);
+  --color-rsv-primary: oklch(0.6 0.12 175);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.95 0.05 170);
+  --color-rsv-event-1: oklch(0.62 0.13 175);
+  --color-rsv-event-2: oklch(0.64 0.12 200);
+  --color-rsv-event-3: oklch(0.66 0.13 150);
+  --color-rsv-event-4: oklch(0.62 0.12 220);
+  --color-rsv-event-5: oklch(0.64 0.11 130);
+}

package/src/themes/nord.css

@@ -0,0 +1,17 @@
+/** Theme "nord" — oscuro, azul ártico. */
+[data-rsv-theme="nord"] {
+  --color-rsv-bg: oklch(0.3 0.02 250);
+  --color-rsv-surface: oklch(0.34 0.02 250);
+  --color-rsv-border: oklch(0.42 0.02 250);
+  --color-rsv-text: oklch(0.92 0.01 230);
+  --color-rsv-muted: oklch(0.68 0.02 240);
+  --color-rsv-primary: oklch(0.72 0.08 230);
+  --color-rsv-primary-fg: oklch(0.22 0.02 250);
+  --color-rsv-today: oklch(0.4 0.04 230);
+  --color-rsv-nonbusiness: oklch(0.32 0.02 250);
+  --color-rsv-event-1: oklch(0.72 0.08 230);
+  --color-rsv-event-2: oklch(0.74 0.08 190);
+  --color-rsv-event-3: oklch(0.78 0.1 150);
+  --color-rsv-event-4: oklch(0.7 0.12 25);
+  --color-rsv-event-5: oklch(0.72 0.1 320);
+}

package/src/themes/ocean.css

@@ -0,0 +1,16 @@
+/** Theme "ocean" — claro, acento cian/azul. data-rsv-theme="ocean". */
+[data-rsv-theme="ocean"] {
+  --color-rsv-bg: oklch(0.99 0.01 220);
+  --color-rsv-surface: oklch(0.97 0.02 220);
+  --color-rsv-border: oklch(0.9 0.03 220);
+  --color-rsv-text: oklch(0.25 0.03 240);
+  --color-rsv-muted: oklch(0.55 0.04 230);
+  --color-rsv-primary: oklch(0.6 0.13 220);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.95 0.05 220);
+  --color-rsv-event-1: oklch(0.62 0.14 220);
+  --color-rsv-event-2: oklch(0.66 0.13 190);
+  --color-rsv-event-3: oklch(0.68 0.13 160);
+  --color-rsv-event-4: oklch(0.64 0.15 260);
+  --color-rsv-event-5: oklch(0.66 0.12 300);
+}

package/src/themes/rose.css

@@ -0,0 +1,16 @@
+/** Theme "rose" — claro, acento rosa/rojo. */
+[data-rsv-theme="rose"] {
+  --color-rsv-bg: oklch(0.99 0.01 10);
+  --color-rsv-surface: oklch(0.97 0.02 10);
+  --color-rsv-border: oklch(0.9 0.03 10);
+  --color-rsv-text: oklch(0.27 0.04 10);
+  --color-rsv-muted: oklch(0.55 0.04 10);
+  --color-rsv-primary: oklch(0.6 0.18 10);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.95 0.05 10);
+  --color-rsv-event-1: oklch(0.62 0.18 10);
+  --color-rsv-event-2: oklch(0.64 0.16 350);
+  --color-rsv-event-3: oklch(0.66 0.16 30);
+  --color-rsv-event-4: oklch(0.6 0.17 330);
+  --color-rsv-event-5: oklch(0.64 0.15 50);
+}

package/src/themes/slate.css

@@ -0,0 +1,16 @@
+/** Theme "slate" — claro, neutro azul-gris sobrio. */
+[data-rsv-theme="slate"] {
+  --color-rsv-bg: oklch(0.99 0.005 250);
+  --color-rsv-surface: oklch(0.96 0.008 250);
+  --color-rsv-border: oklch(0.89 0.01 250);
+  --color-rsv-text: oklch(0.3 0.02 250);
+  --color-rsv-muted: oklch(0.55 0.02 250);
+  --color-rsv-primary: oklch(0.5 0.06 250);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.94 0.02 250);
+  --color-rsv-event-1: oklch(0.55 0.08 250);
+  --color-rsv-event-2: oklch(0.58 0.1 210);
+  --color-rsv-event-3: oklch(0.6 0.1 160);
+  --color-rsv-event-4: oklch(0.58 0.12 30);
+  --color-rsv-event-5: oklch(0.56 0.1 300);
+}

package/src/themes/solarized-dark.css

@@ -0,0 +1,17 @@
+/** Theme "solarized-dark" — base oscura teal, acentos solarized. */
+[data-rsv-theme="solarized-dark"] {
+  --color-rsv-bg: oklch(0.27 0.04 200);
+  --color-rsv-surface: oklch(0.31 0.04 200);
+  --color-rsv-border: oklch(0.4 0.04 200);
+  --color-rsv-text: oklch(0.88 0.02 90);
+  --color-rsv-muted: oklch(0.66 0.03 190);
+  --color-rsv-primary: oklch(0.68 0.13 230);
+  --color-rsv-primary-fg: oklch(0.22 0.04 200);
+  --color-rsv-today: oklch(0.36 0.05 210);
+  --color-rsv-nonbusiness: oklch(0.29 0.04 200);
+  --color-rsv-event-1: oklch(0.68 0.13 230);
+  --color-rsv-event-2: oklch(0.72 0.13 180);
+  --color-rsv-event-3: oklch(0.78 0.14 100);
+  --color-rsv-event-4: oklch(0.68 0.16 30);
+  --color-rsv-event-5: oklch(0.66 0.15 330);
+}

package/src/themes/solarized-light.css

@@ -0,0 +1,17 @@
+/** Theme "solarized-light" — beige cálido, acentos solarized. */
+[data-rsv-theme="solarized-light"] {
+  --color-rsv-bg: oklch(0.97 0.02 90);
+  --color-rsv-surface: oklch(0.94 0.025 90);
+  --color-rsv-border: oklch(0.86 0.03 90);
+  --color-rsv-text: oklch(0.42 0.03 200);
+  --color-rsv-muted: oklch(0.58 0.03 200);
+  --color-rsv-primary: oklch(0.6 0.13 230);
+  --color-rsv-primary-fg: oklch(0.97 0.02 90);
+  --color-rsv-today: oklch(0.92 0.04 90);
+  --color-rsv-nonbusiness: oklch(0.93 0.025 90);
+  --color-rsv-event-1: oklch(0.6 0.13 230);
+  --color-rsv-event-2: oklch(0.65 0.13 180);
+  --color-rsv-event-3: oklch(0.7 0.14 100);
+  --color-rsv-event-4: oklch(0.6 0.16 30);
+  --color-rsv-event-5: oklch(0.58 0.15 330);
+}

package/src/themes/sunset.css

@@ -0,0 +1,16 @@
+/** Theme "sunset" — cálido, acento naranja/rosa. data-rsv-theme="sunset". */
+[data-rsv-theme="sunset"] {
+  --color-rsv-bg: oklch(0.99 0.01 60);
+  --color-rsv-surface: oklch(0.97 0.02 50);
+  --color-rsv-border: oklch(0.9 0.03 50);
+  --color-rsv-text: oklch(0.25 0.03 40);
+  --color-rsv-muted: oklch(0.55 0.04 40);
+  --color-rsv-primary: oklch(0.65 0.18 35);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.95 0.05 50);
+  --color-rsv-event-1: oklch(0.68 0.17 35);
+  --color-rsv-event-2: oklch(0.7 0.16 70);
+  --color-rsv-event-3: oklch(0.66 0.17 10);
+  --color-rsv-event-4: oklch(0.64 0.16 340);
+  --color-rsv-event-5: oklch(0.7 0.15 100);
+}