bruv-ui 0.2.0

package/src/theme.css

@@ -0,0 +1,659 @@
+/*
+ * ═══════════════════════════════════════════════════════════════
+ * Semantic Color Tokens
+ *
+ * Maps raw scale steps (from scales.css) to meaningful names.
+ * All tokens are explicitly scoped to their Tailwind namespace:
+ *   --background-color-*  → generates bg-* only
+ *   --text-color-*        → generates text-* only
+ *   --border-color-*      → generates border-* only
+ *   --ring-color-*        → generates ring-* only
+ *
+ * Raw scales (--color-bruv-mauve-*, --color-bruv-red-*, etc.)
+ * remain in the --color-* namespace for direct use in gradients
+ * and other edge cases at the component level.
+ *
+ * All tokens are prefixed with `bruv-` to avoid collisions
+ * when imported alongside other design systems.
+ * ═══════════════════════════════════════════════════════════════
+ */
+
+:root {
+	/* ── Shadow border tint: black in light, white in dark ── */
+	--bruv-border-tint: 0 0 0;
+	/* ── Button top highlight opacity ── */
+	--bruv-button-highlight-alpha: 0.4;
+}
+
+[data-theme="dark"] {
+	color-scheme: dark;
+	--bruv-border-tint: 1 0 0;
+	--bruv-button-highlight-alpha: 0.12;
+}
+
+@theme {
+	/*
+	 * ═══════════════════════════════════════
+	 * TYPOGRAPHY — Geist (sans) + Hack (mono)
+	 *
+	 * Font families resolve through Tailwind's
+	 * font-bruv-sans / font-bruv-mono utilities.
+	 *
+	 * 4 sizes: sm (12px), base (14px default),
+	 * lg (18px headings), xl (24px page titles).
+	 * 2 weights: font-medium (default), font-semibold.
+	 *
+	 * All tokens prefixed with `bruv-` to avoid
+	 * collisions with Tailwind built-ins.
+	 * ═══════════════════════════════════════
+	 */
+	--font-bruv-sans:
+		"Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--font-bruv-mono:
+		"Hack", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas",
+		"Liberation Mono", "Courier New", monospace;
+
+	/* Size scale — 12 (sm) / 14 (base / body) / 18 (lg) / 24 (xl) */
+	--text-bruv-sm: 0.75rem; /* 12px */
+	--text-bruv-sm--line-height: 1rem; /* 16px */
+	--text-bruv-base: 0.875rem; /* 14px — body default */
+	--text-bruv-base--line-height: 1.25rem; /* 20px */
+	--text-bruv-lg: 1.125rem; /* 18px */
+	--text-bruv-lg--line-height: 1.75rem; /* 28px */
+	--text-bruv-xl: 1.5rem; /* 24px */
+	--text-bruv-xl--line-height: 2rem; /* 32px */
+
+	--radius-bruv: 0.375rem;
+	--radius-bruv-sm: calc(var(--radius-bruv) - 2px);
+	--radius-bruv-md: var(--radius-bruv);
+	--radius-bruv-lg: calc(var(--radius-bruv) + 2px);
+	--radius-bruv-xl: calc(var(--radius-bruv) + 4px);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * BACKGROUNDS — 3 spatial layers
+	 *
+	 * bruv-base-0: page shell / surround (deepest)
+	 * bruv-base-1: main content area
+	 * bruv-base-2: elevated cards, panels, popovers
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-base-0: var(--color-bruv-mauve-4);
+	--background-color-bruv-base-1: var(--color-bruv-mauve-2);
+	--background-color-bruv-base-2: var(--color-bruv-mauve-1);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * INTERACTIVE — Alpha-based hover/highlight
+	 *
+	 * Works on any background layer because it's
+	 * a semi-transparent overlay, not a fixed color.
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-subtle: oklch(var(--bruv-border-tint) / 0.06);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * TEXT — 3 hierarchy levels
+	 * ═══════════════════════════════════════
+	 */
+	--text-color-bruv-primary: var(--color-bruv-mauve-12);
+	--text-color-bruv-secondary: var(--color-bruv-mauve-11);
+	--text-color-bruv-tertiary: var(--color-bruv-mauve-9);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * FILL — matching bg tokens for use with
+	 * SVG fill/stroke and divider backgrounds
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-neutral: var(--color-bruv-mauve-5);
+	--background-color-bruv-tertiary: var(--color-bruv-mauve-9);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * BORDERS — 2 levels
+	 * ═══════════════════════════════════════
+	 */
+	--border-color-bruv-neutral: var(--color-bruv-mauve-5);
+	--border-color-bruv-neutral-strong: var(--color-bruv-mauve-7);
+
+	--ring-color-bruv-neutral: var(--color-bruv-mauve-5);
+	--ring-color-bruv-focus: var(--color-bruv-accent-9);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * ACCENT — Bruv brand periwinkle
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-accent: var(--color-bruv-accent-9);
+	--background-color-bruv-accent-subtle: var(--color-bruv-accent-3);
+	--background-color-bruv-accent-strong: var(--color-bruv-accent-10);
+	--background-color-bruv-accent-on: oklch(0.99 0 0);
+	--text-color-bruv-accent: var(--color-bruv-accent-11);
+	--text-color-bruv-accent-on: oklch(0.99 0 0);
+	--border-color-bruv-accent: var(--color-bruv-accent-8);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * DANGER — Radix red scale
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-danger: var(--color-bruv-red-10);
+	--background-color-bruv-danger-subtle: var(--color-bruv-red-3);
+	--background-color-bruv-danger-strong: var(--color-bruv-red-11);
+	--background-color-bruv-danger-on: oklch(0.99 0 0);
+	--text-color-bruv-danger: var(--color-bruv-red-11);
+	--text-color-bruv-danger-on: oklch(0.99 0 0);
+	--border-color-bruv-danger: var(--color-bruv-red-11);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * WARN — Radix amber scale
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-warn: var(--color-bruv-amber-9);
+	--background-color-bruv-warn-subtle: var(--color-bruv-amber-3);
+	--background-color-bruv-warn-strong: var(--color-bruv-amber-10);
+	--background-color-bruv-warn-on: oklch(0.15 0 0);
+	--text-color-bruv-warn: var(--color-bruv-amber-11);
+	--text-color-bruv-warn-on: oklch(0.15 0 0);
+	--border-color-bruv-warn: var(--color-bruv-amber-8);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * SUCCESS — secondary (mint) scale
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-success: var(--color-bruv-secondary-9);
+	--background-color-bruv-success-subtle: var(--color-bruv-secondary-3);
+	--background-color-bruv-success-strong: var(--color-bruv-secondary-10);
+	--background-color-bruv-success-on: oklch(0.99 0 0);
+	--text-color-bruv-success: var(--color-bruv-secondary-11);
+	--text-color-bruv-success-on: oklch(0.99 0 0);
+	--border-color-bruv-success: var(--color-bruv-secondary-8);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * SHADOWS
+	 * ═══════════════════════════════════════
+	 */
+	--inset-shadow-bruv-border: inset 0 0 0 1px
+		oklch(var(--bruv-border-tint) / 0.06);
+	--inset-shadow-bruv-button: inset 0 1px 0 0
+		oklch(1 0 0 / var(--bruv-button-highlight-alpha));
+	--inset-shadow-bruv-primary:
+		inset 0 1px 0 0 oklch(1 0 0 / 0.15), inset 0 -1px 0 0 oklch(0 0 0 / 0.15);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * INVERSE — Flipped contrast pair
+	 *
+	 * bg-bruv-inverse:   near-black in light, near-white in dark
+	 * text-bruv-inverse: near-white in light, near-black in dark
+	 *
+	 * Pulled slightly from the extremes so the inset-shadow-bruv-primary
+	 * top highlight and bottom shadow are both visible.
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-inverse: oklch(0.28 0.005 305);
+	--text-color-bruv-inverse: var(--color-bruv-mauve-1);
+
+	/*
+	 * ═══════════════════════════════════════
+	 * SPECIAL
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-bruv-overlay: oklch(0 0 0 / 0.4);
+
+	--color-bruv-chart-grid: var(--color-bruv-mauve-5);
+	--color-bruv-chart-axis: var(--color-bruv-mauve-9);
+	--color-bruv-chart-cursor: var(--color-bruv-mauve-7);
+
+	/**
+	 * Easing Functions
+	 */
+	--ease-bruv-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+	--ease-bruv-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	--ease-bruv-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+	--ease-bruv-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+	--ease-bruv-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+	--ease-bruv-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+
+	--ease-bruv-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	--ease-bruv-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+	--ease-bruv-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+	--ease-bruv-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+	--ease-bruv-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+	--ease-bruv-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+	--ease-bruv-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+	--ease-bruv-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+	--ease-bruv-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+	--ease-bruv-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+	--ease-bruv-in-out-expo: cubic-bezier(1, 0, 0, 1);
+	--ease-bruv-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+	/**
+	 * Animations
+	 */
+	--animate-bruv-dot-cycle: bruv-dot-cycle 1.2s steps(1) infinite;
+	--animate-bruv-select-in: bruv-select-in 200ms var(--ease-bruv-out-expo);
+	--animate-bruv-select-out: bruv-select-out 150ms var(--ease-bruv-in-quad);
+	--animate-bruv-shimmer: bruv-shimmer 2s infinite linear;
+	--animate-bruv-shake: bruv-shake 400ms var(--ease-bruv-out-cubic);
+}
+
+/*
+ * ═══════════════════════════════════════════════════════════════
+ * DARK MODE SEMANTIC OVERRIDES
+ * ═══════════════════════════════════════════════════════════════
+ */
+[data-theme="dark"] {
+	/* Backgrounds: lighter = more elevated in dark mode too */
+	--background-color-bruv-base-0: var(--color-bruv-mauve-1);
+	--background-color-bruv-base-1: var(--color-bruv-mauve-2);
+	--background-color-bruv-base-2: var(--color-bruv-mauve-3);
+
+	/* Neutral strong: more visible border in dark mode */
+	--border-color-bruv-neutral-strong: var(--color-bruv-mauve-7);
+
+	/* Accent */
+	--background-color-bruv-accent: var(--color-bruv-accent-9);
+	--background-color-bruv-accent-strong: var(--color-bruv-accent-8);
+	--ring-color-bruv-focus: var(--color-bruv-accent-9);
+
+	/* Danger */
+	--background-color-bruv-danger: var(--color-bruv-red-9);
+	--background-color-bruv-danger-strong: var(--color-bruv-red-8);
+	--border-color-bruv-danger: var(--color-bruv-red-7);
+
+	/* Warning */
+	--background-color-bruv-warn: var(--color-bruv-amber-9);
+	--background-color-bruv-warn-strong: var(--color-bruv-amber-10);
+
+	/* Inverse: pulled back from pure white so highlights/shadows are visible */
+	--background-color-bruv-inverse: oklch(0.9 0.005 305);
+
+	/* Success */
+	--background-color-bruv-success: var(--color-bruv-secondary-9);
+	--background-color-bruv-success-strong: var(--color-bruv-secondary-10);
+
+	--color-bruv-chart-grid: var(--color-bruv-mauve-6);
+	--color-bruv-chart-axis: var(--color-bruv-mauve-11);
+	--color-bruv-chart-cursor: var(--color-bruv-mauve-8);
+}
+
+/*
+ * ═══════════════════════════════════════════════════════════════
+ * KEYFRAMES
+ * ═══════════════════════════════════════════════════════════════
+ */
+@keyframes braille-snake {
+	0% {
+		content: "⣾";
+	}
+	6.25% {
+		content: "⣽";
+	}
+	12.5% {
+		content: "⣻";
+	}
+	18.75% {
+		content: "⢿";
+	}
+	25% {
+		content: "⡿";
+	}
+	31.25% {
+		content: "⣟";
+	}
+	37.5% {
+		content: "⣯";
+	}
+	43.75% {
+		content: "⣷";
+	}
+	50% {
+		content: "⣾";
+	}
+	56.25% {
+		content: "⣽";
+	}
+	62.5% {
+		content: "⣻";
+	}
+	68.75% {
+		content: "⢿";
+	}
+	75% {
+		content: "⡿";
+	}
+	81.25% {
+		content: "⣟";
+	}
+	87.5% {
+		content: "⣯";
+	}
+	93.75% {
+		content: "⣷";
+	}
+	100% {
+		content: "⣾";
+	}
+}
+
+@keyframes bruv-dot-cycle {
+	0% {
+		content: ".";
+	}
+	33% {
+		content: "..";
+	}
+	66% {
+		content: "...";
+	}
+	100% {
+		content: ".";
+	}
+}
+
+@keyframes bruv-select-in {
+	from {
+		opacity: 0;
+		transform: scale(0.7);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes bruv-select-out {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.7);
+	}
+}
+
+@keyframes bruv-shimmer {
+	0% {
+		background-position: 200% 0;
+	}
+	100% {
+		background-position: -200% 0;
+	}
+}
+
+@keyframes slide-in-from-right {
+	from {
+		opacity: 0;
+		transform: translateX(6px);
+	}
+}
+
+@keyframes slide-in-from-left {
+	from {
+		opacity: 0;
+		transform: translateX(-6px);
+	}
+}
+
+@keyframes slide-in-from-bottom {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+}
+
+@keyframes slide-in-from-top {
+	from {
+		opacity: 0;
+		transform: translateY(-6px);
+	}
+}
+
+@keyframes slide-out-to-right {
+	to {
+		opacity: 0;
+		transform: translateX(6px);
+	}
+}
+
+@keyframes slide-out-to-left {
+	to {
+		opacity: 0;
+		transform: translateX(-6px);
+	}
+}
+
+@keyframes slide-out-to-bottom {
+	to {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+}
+
+@keyframes slide-out-to-top {
+	to {
+		opacity: 0;
+		transform: translateY(-6px);
+	}
+}
+
+@keyframes check-pop {
+	from {
+		opacity: 0;
+		transform: scale(0.8);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes bruv-shake {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+	20% {
+		transform: translateX(-6px);
+	}
+	40% {
+		transform: translateX(5px);
+	}
+	60% {
+		transform: translateX(-3px);
+	}
+	80% {
+		transform: translateX(2px);
+	}
+}
+
+@keyframes check-out {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.8);
+	}
+}
+
+/*
+ * ═══════════════════════════════════════════════════════════════
+ * TOAST — Stacking, animation, and swipe styles
+ *
+ * Matches Sonner's DOM structure: <section> (ARIA) > <ol> (fixed
+ * positioned toaster) > <li> (absolute positioned toasts).
+ *
+ * All dynamic values flow through CSS custom properties set by JS:
+ *   ol:  --gap, --front-toast-height, --toast-width
+ *   li:  --index, --toasts-before, --z-index, --offset,
+ *        --initial-height, --swipe-amount
+ * ═══════════════════════════════════════════════════════════════
+ */
+
+/* ── Toast base ── */
+.bruv-toast {
+	z-index: var(--z-index);
+	transition:
+		transform 400ms,
+		opacity 400ms,
+		height 400ms;
+}
+
+/* Content fades in/out for collapsed non-front toasts */
+.bruv-toast > * {
+	transition: opacity 400ms;
+}
+
+/* ── Lift direction ── */
+.bruv-toast[data-y-position="bottom"] {
+	--lift: -1;
+}
+.bruv-toast[data-y-position="top"] {
+	--lift: 1;
+}
+
+/* ── Initial state: off-screen ── */
+.bruv-toast:not([data-mounted="true"]) {
+	opacity: 0;
+}
+.bruv-toast[data-y-position="bottom"]:not([data-mounted="true"]) {
+	transform: translateY(100%);
+}
+.bruv-toast[data-y-position="top"]:not([data-mounted="true"]) {
+	transform: translateY(-100%);
+}
+
+/* ── Mounted: animate in ── */
+.bruv-toast[data-mounted="true"] {
+	opacity: 1;
+}
+
+/* ── Collapsed stack (not expanded) ── */
+.bruv-toast[data-expanded="false"][data-front="true"][data-mounted="true"] {
+	transform: translateY(0);
+}
+.bruv-toast[data-expanded="false"][data-front="false"][data-mounted="true"] {
+	height: var(--front-toast-height);
+	overflow: hidden;
+	transform: translateY(calc(var(--lift) * var(--gap) * var(--toasts-before)))
+		scale(calc(1 - var(--toasts-before) * 0.03));
+}
+.bruv-toast[data-expanded="false"][data-front="false"][data-mounted="true"]
+	> * {
+	opacity: 0;
+}
+
+/* ── Expanded stack (hover) ── */
+.bruv-toast[data-expanded="true"][data-mounted="true"] {
+	height: var(--initial-height);
+	transform: translateY(calc(var(--lift) * var(--offset)));
+}
+.bruv-toast[data-expanded="true"][data-mounted="true"] > * {
+	opacity: 1;
+}
+
+/* ── Gap bridge (prevents mouseout between toasts) ── */
+.bruv-toast[data-expanded="true"]::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	width: 100%;
+	height: calc(var(--gap) + 1px);
+}
+.bruv-toast[data-y-position="bottom"][data-expanded="true"]::after {
+	bottom: 100%;
+}
+.bruv-toast[data-y-position="top"][data-expanded="true"]::after {
+	top: 100%;
+}
+
+/* ── Hidden toasts beyond visible limit ── */
+.bruv-toast[data-visible="false"] {
+	opacity: 0 !important;
+	pointer-events: none !important;
+}
+
+/* ── Removed: exit animation ── */
+.bruv-toast[data-removed="true"][data-front="true"][data-swipe-out="false"] {
+	transform: translateY(calc(var(--lift) * -100%));
+	opacity: 0;
+}
+.bruv-toast[data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"] {
+	transform: translateY(
+		calc(var(--lift) * var(--offset) + var(--lift) * -100%)
+	);
+	opacity: 0;
+}
+.bruv-toast[data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"] {
+	transform: translateY(40%);
+	opacity: 0;
+	transition:
+		transform 500ms,
+		opacity 200ms;
+}
+
+/* ── Swiping (drag in progress) ── */
+.bruv-toast[data-swiping="true"] {
+	transform: translateY(calc(var(--lift) * var(--offset)))
+		translateX(var(--swipe-amount, 0px));
+	transition: none;
+	user-select: none;
+}
+
+/* ── Swipe out ── */
+.bruv-toast[data-swipe-out="true"] {
+	animation: bruv-toast-swipe-out 200ms ease-out forwards;
+}
+
+@keyframes bruv-toast-swipe-out {
+	from {
+		transform: translateY(calc(var(--lift) * var(--offset)))
+			translateX(var(--swipe-amount, 0px));
+		opacity: 1;
+	}
+	to {
+		transform: translateY(calc(var(--lift) * var(--offset)))
+			translateX(
+				calc(var(--swipe-amount, 0px) + 100% * sign(var(--swipe-amount, 1px)))
+			);
+		opacity: 0;
+	}
+}
+
+/* ── Promise toast: icon crossfade on state change ── */
+.bruv-toast[data-promise-state="success"] .bruv-toast-icon > *,
+.bruv-toast[data-promise-state="error"] .bruv-toast-icon > * {
+	animation: bruv-toast-icon-in 300ms ease forwards;
+}
+
+@keyframes bruv-toast-icon-in {
+	from {
+		opacity: 0;
+		transform: scale(0.6);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion) {
+	.bruv-toast,
+	.bruv-toast > *,
+	.bruv-toast .bruv-toast-icon > * {
+		transition: none !important;
+		animation: none !important;
+	}
+}