layout.tsx49 lines · main

1	import type { CSSProperties, ReactNode } from 'react';
2
3	/**
4	* Auth product shell — Butter Yellow accent only (#FFFD74).
5	* Tabs live under /dashboard/auth/[projectId] (per project), not on the home grid.
6	*/
7	const AUTH_BUTTER = '#FFFD74';
8
9	const AUTH_SHELL_VARS = {
10	['--auth-accent' as string]: AUTH_BUTTER,
11	['--auth-accent-soft' as string]: `color-mix(in srgb, ${AUTH_BUTTER} 18%, transparent)`,
12	// Full butter yellow — same as buttons / Auth brand (not a muted mix)
13	['--auth-accent-border' as string]: AUTH_BUTTER,
14	} as CSSProperties;
15
16	export default function BrivenAuthLayout({ children }: { children: ReactNode }) {
17	return (
18	<div
19	data-auth-shell="true"
20	className="flex min-h-0 flex-1 flex-col gap-6"
21	style={AUTH_SHELL_VARS}
22	>
23	{/*
24	Every Auth input/select/textarea uses Butter Yellow borders —
25	including focus — so the platform green ring never appears here.
26	*/}
27	<style>{`
28	[data-auth-shell] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
29	[data-auth-shell] select,
30	[data-auth-shell] textarea {
31	border-color: ${AUTH_BUTTER} !important;
32	outline: none !important;
33	box-shadow: none !important;
34	}
35	[data-auth-shell] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
36	[data-auth-shell] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus-visible,
37	[data-auth-shell] select:focus,
38	[data-auth-shell] select:focus-visible,
39	[data-auth-shell] textarea:focus,
40	[data-auth-shell] textarea:focus-visible {
41	border-color: ${AUTH_BUTTER} !important;
42	outline: none !important;
43	box-shadow: 0 0 0 1px ${AUTH_BUTTER} !important;
44	}
45	`}</style>
46	{children}
47	</div>
48	);
49	}