gladvn 0.2.14

package/src/styles/gladcn.css

@@ -0,0 +1,116 @@
+/* ==========================================================================
+ * gladvn - Global Styles
+ * ==========================================================================
+ * This file maps CSS variables to Tailwind utility classes.
+ * Import this in your project's main CSS file.
+ *
+ * IMPORTANT: You must define your design tokens (CSS variables) BEFORE
+ * importing this file. Copy tokens.css into your project and customize it.
+ * ========================================================================== */
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-tertiary: var(--tertiary);
+  --color-tertiary-foreground: var(--tertiary-foreground);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  --animate-float: float 6s ease-in-out infinite;
+  --animate-float-fast: float 4s ease-in-out infinite;
+  --animate-float-slow: float 8s ease-in-out infinite;
+  --animate-fade-up: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes fadeUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+@theme inline {
+  --animate-accordion-down: accordion-down 0.2s ease-out forwards;
+  --animate-accordion-up: accordion-up 0.2s ease-out forwards;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--accordion-panel-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--accordion-panel-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,213 @@
+/* ==========================================================================
+ * gladvn - Design Tokens (Default Theme)
+ * ==========================================================================
+ * Copy this file into your project's CSS and customize the values below.
+ * These CSS variables control the entire look & feel of all gladcn components.
+ *
+ * Usage: Copy this content into your project's main CSS BEFORE the
+ *        @import "gladvn/gladcn.css" line.
+ *
+ * Color format: oklch(lightness chroma hue)
+ * Docs: https://oklch.com
+ * ========================================================================== */
+
+/* ── Light Mode ─────────────────────────────────────────────────────────── */
+:root {
+  /* Background & Foreground */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  /* Card */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+
+  /* Popover */
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  /* Primary — Blue, hue 262°, L=0.54 → CR≥4.5:1 AA ✅ (Vibrant) */
+  --primary: oklch(0.54 0.245 262.881);
+  --primary-foreground: oklch(0.985 0 0);
+
+  /* Secondary — dark neutral gray, readable as text/border/bg (CR≈7.4:1)
+   * Consumers can override to any vivid brand color.
+   * Solid: dark bg + white text | Outline/ghost/link: dark gray text */
+  --secondary: oklch(0.45 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+
+  /* Muted */
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.5 0 0);
+  /* CR≈5.5:1 AA */
+
+  /* Accent */
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  /* Destructive — Red, hue 27°, L=0.54 → CR≥4.5:1 AA ✅ (Vibrant) */
+  --destructive: oklch(0.54 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  /* Warning — Amber, hue 70°, L=0.54 → CR≥4.5:1 AA ✅ */
+  --warning: oklch(0.54 0.13 70);
+  --warning-foreground: oklch(0.985 0 0);
+
+  /* Success — Emerald, hue 150°, L=0.53 → CR≥4.5:1 AA ✅ */
+  --success: oklch(0.53 0.154 150);
+  --success-foreground: oklch(0.985 0 0);
+
+  /* Info — Blue, hue 258°, L=0.54 → CR≥4.5:1 AA ✅ */
+  --info: oklch(0.54 0.195 258);
+  --info-foreground: oklch(0.985 0 0);
+
+  /* Tertiary — Violet, hue 293°, L=0.54 → CR≥4.5:1 AA ✅ */
+  --tertiary: oklch(0.54 0.205 293);
+  --tertiary-foreground: oklch(0.985 0 0);
+
+  /* Border, Input, Ring
+   * Note: --input is specifically the BORDER color of inputs, mapped to border-input.
+   * Input backgrounds usually use bg-background or bg-transparent. */
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* Charts */
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+
+  /* Radius */
+  --radius: 0.625rem;
+
+  /* Sidebar */
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+/* ── Light Mode (explicit) ─────────────────────────────────────────────── */
+/* Used by ThemeProvider for partial light mode inside a dark context.
+ * Must mirror :root values exactly so CSS variables cascade correctly. */
+.light {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.54 0.245 262.881);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.45 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.5 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.54 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.54 0.13 70);
+  --warning-foreground: oklch(0.985 0 0);
+  --success: oklch(0.53 0.154 150);
+  --success-foreground: oklch(0.985 0 0);
+  --info: oklch(0.54 0.195 258);
+  --info-foreground: oklch(0.985 0 0);
+  --tertiary: oklch(0.54 0.205 293);
+  --tertiary-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+/* ── Dark Mode ──────────────────────────────────────────────────────────── */
+.dark {
+  /* Background & Foreground */
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  /* Card */
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+
+  /* Popover */
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  /* Primary — same blue hue as light mode, brighter for dark bg */
+  --primary: oklch(0.72 0.18 262.881);
+  --primary-foreground: oklch(0.145 0 0);
+
+  /* Secondary — lighter gray for dark bg, CR≥7:1 AAA ✅ */
+  --secondary: oklch(0.685 0 0);
+  --secondary-foreground: oklch(0.145 0 0);
+
+  /* Muted */
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.759 0 0);
+
+  /* Accent */
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+
+  /* Destructive — Red, L=0.716, CR≥7:1 AAA ✅ → near-black text */
+  --destructive: oklch(0.716 0.191 22.216);
+  --destructive-foreground: oklch(0.145 0 0);
+
+  /* Warning — Lighter amber for dark bg → dark text */
+  --warning: oklch(0.828 0.189 84.429);
+  --warning-foreground: oklch(0.265 0.096 56.72);
+
+  /* Success — L≈0.72, brighter on dark bg → near-black text */
+  --success: oklch(0.723 0.162 150);
+  --success-foreground: oklch(0.145 0 0);
+
+  /* Info — L≈0.71, brighter on dark bg → near-black text */
+  --info: oklch(0.707 0.165 258);
+  --info-foreground: oklch(0.145 0 0);
+
+  /* Tertiary — Violet, L=0.705, CR≥7:1 AAA ✅ → near-black text */
+  --tertiary: oklch(0.705 0.183 293);
+  --tertiary-foreground: oklch(0.145 0 0);
+
+  /* Border, Input, Ring */
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+
+  /* Charts */
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+
+  /* Sidebar */
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.472 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}

package/src/test/setup.ts

@@ -0,0 +1,8 @@
+import "@testing-library/jest-dom";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+// Automatically cleanup after each test
+afterEach(() => {
+  cleanup();
+});

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />