First Commit. Duplicate bunext-sqlite preset

src/styles/main-tw.css

@@ -0,0 +1,74 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: hsl(212.7, 26.8%, 83.9);
+    }
+
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}

src/styles/main.css

@@ -0,0 +1,283 @@
+@import "@moduletrace/twui/base.css";
+
+@theme inline {
+    /* Typography */
+    --font-sans:
+        "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+    /* Cool neutral scale - remaps `slate-*` so every existing border/text
+       utility across the app inherits the canvas + ink palette */
+    --color-slate-50: #f9fafb;
+    --color-slate-100: #f2f4f7;
+    --color-slate-200: #e4e7ec;
+    --color-slate-300: #d0d5dd;
+    --color-slate-400: #98a2b3;
+    --color-slate-500: #667085;
+    --color-slate-600: #475467;
+    --color-slate-700: #344054;
+    --color-slate-800: #1d2939;
+    --color-slate-900: #101828;
+    --color-slate-950: #0c111d;
+
+    --color-background-light: #ffffff;
+    --color-foreground-light: #101828;
+    --color-background-dark: #0c111d;
+    --color-foreground-dark: #eaecf0;
+
+    /* Ink - primary actions */
+    --color-primary: #101828;
+    --color-primary-hover: #1d2939;
+    --color-primary-outline: #101828;
+    --color-primary-text: #101828;
+    --color-primary-dark: #eaecf0;
+    --color-primary-dark-hover: #d0d5dd;
+    --color-primary-dark-outline: #eaecf0;
+    --color-primary-dark-text: #101828;
+
+    /* Graphite - links, secondary actions */
+    --color-secondary: #344054;
+    --color-secondary-hover: #1d2939;
+    --color-secondary-outline: #475467;
+    --color-secondary-text: #344054;
+    --color-secondary-dark: #d0d5dd;
+    --color-secondary-dark-hover: #eaecf0;
+    --color-secondary-dark-outline: #98a2b3;
+    --color-secondary-dark-text: #101828;
+
+    /* Muted blue-violet - used sparingly for emphasis */
+    --color-accent: #5b5bd6;
+    --color-accent-hover: #4b4bc4;
+    --color-accent-outline: #4b4bc4;
+    --color-accent-text: #5b5bd6;
+    --color-accent-dark: #8b8cf0;
+    --color-accent-dark-hover: #a3a4f5;
+    --color-accent-dark-outline: #8b8cf0;
+    --color-accent-dark-text: #ffffff;
+
+    --color-dark: #0c111d;
+    --color-dark-hover: #161b26;
+    --color-dark-outline: #0c111d;
+    --color-dark-text: #0c111d;
+    --color-dark-dark: #0c111d;
+    --color-dark-dark-hover: #161b26;
+    --color-dark-dark-outline: #0c111d;
+    --color-dark-dark-text: #0c111d;
+
+    /* Canvas - page background */
+    --color-light: #f7f8fa;
+    --color-light-hover: #f2f4f7;
+    --color-light-outline: #e4e7ec;
+    --color-light-text: #f7f8fa;
+    --color-light-dark: #f7f8fa;
+    --color-light-dark-hover: #f2f4f7;
+    --color-light-dark-outline: #e4e7ec;
+    --color-light-dark-text: #f7f8fa;
+
+    --color-gray: #eaecf0;
+    --color-gray-hover: #e4e7ec;
+    --color-gray-dark: #1d2939;
+    --color-gray-dark-hover: #344054;
+
+    --color-link: #101828;
+    --color-link-dark: #eaecf0;
+
+    --radius-default: 6px;
+    --radius-default-sm: 4px;
+    --radius-default-xs: 2px;
+    --radius-default-lg: 10px;
+    --radius-default-xl: 14px;
+}
+
+body {
+    font-family: var(--font-sans);
+    font-feature-settings: "ss01", "cv11";
+    @apply bg-light dark:bg-background-dark antialiased;
+}
+
+::selection {
+    @apply bg-accent/20 text-dark dark:text-white;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.heading {
+    font-family: var(--font-sans);
+    @apply m-0! font-semibold leading-[1.15em] tracking-tight;
+}
+
+/* Display headings: tight, heavy geometric sans */
+h1,
+h2 {
+    @apply font-semibold tracking-[-0.045em] leading-[1.02em] text-balance;
+}
+
+h1 {
+    @apply text-[44px]! md:text-6xl! xl:text-[76px]!;
+}
+
+h2 {
+    @apply text-[34px]! xl:text-5xl! tracking-[-0.04em];
+}
+
+h3 {
+    @apply text-lg! leading-snug;
+}
+
+h4 {
+    @apply text-base! leading-snug;
+}
+
+h5 {
+    @apply text-sm! font-semibold;
+}
+
+h6 {
+    @apply text-xs! font-semibold;
+}
+
+.twui-button-general {
+    @apply font-medium tracking-tight transition-colors;
+}
+
+.twui-button-primary {
+    @apply dark:text-primary-dark-text;
+}
+
+/* `primary-dark-text` is ink for the filled light button; outlined sits on the dark page */
+.twui-button-primary-outlined {
+    @apply dark:text-primary-dark;
+}
+
+.twui-row {
+    @apply gap-4;
+}
+
+a {
+    @apply outline-none border-none text-primary dark:text-primary-dark;
+}
+
+.twui-section {
+    @apply py-24 xl:py-32;
+}
+
+/* Eyebrow label with an accent dot */
+.htag {
+    @apply inline-flex items-center gap-2.5 text-sm font-medium text-slate-500 dark:text-slate-400;
+    @apply before:size-1.5 before:rounded-full before:bg-accent before:content-[''];
+}
+
+.twui-paper,
+.twui-card {
+    @apply border-slate-200 shadow-xs shadow-slate-900/3;
+    @apply dark:border-white/10 dark:shadow-none;
+}
+
+.twui-input-wrapper {
+    @apply bg-white dark:bg-background-dark transition-[outline-color];
+}
+
+.twui-input-label {
+    @apply text-slate-500 dark:text-slate-400;
+}
+
+.twui-breadcrumb-link {
+    @apply text-xs!;
+}
+
+header .twui-header-link {
+    @apply text-slate-600 hover:text-slate-900;
+}
+
+.dark header .twui-header-link {
+    @apply text-white/70 hover:text-white;
+}
+
+header .twui-header-link > * > * {
+    @apply transition-colors;
+}
+
+footer a {
+    @apply text-slate-500 hover:text-slate-900 hover:opacity-100 transition-colors;
+    @apply dark:text-slate-400 dark:hover:text-white;
+}
+
+.header-user-dropdown * {
+    @apply text-dark dark:text-foreground-dark;
+}
+
+.header-user-dropdown a {
+    @apply text-sm;
+}
+
+.twui-anchor {
+    @apply text-secondary dark:text-secondary-dark;
+}
+
+footer .twui-anchor {
+    @apply text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white;
+}
+
+footer .twui-anchor.active {
+    @apply text-slate-900! dark:text-white! font-normal;
+}
+
+.twui-anchor.active {
+    @apply font-semibold opacity-100! text-dark dark:text-white;
+}
+
+/* Admin sidebar navigation */
+[data-admin-nav] .twui-anchor {
+    @apply flex w-full items-center rounded-default px-3 py-2 text-sm text-slate-600 border-0;
+    @apply hover:bg-slate-900/5 hover:text-slate-900 transition-colors;
+    @apply dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white;
+}
+
+[data-admin-nav] .twui-anchor svg {
+    @apply text-slate-400 transition-colors dark:text-slate-500;
+}
+
+[data-admin-nav] .twui-anchor.active {
+    @apply bg-white font-medium text-slate-900 shadow-sm shadow-slate-900/5 ring-1 ring-slate-900/5;
+    @apply dark:bg-white/10 dark:text-white dark:shadow-none dark:ring-white/10;
+}
+
+[data-admin-nav] .twui-anchor.active svg {
+    @apply text-accent;
+}
+
+#admin-main {
+    @apply w-full max-w-[1200px] mx-auto;
+}
+
+#admin-main section {
+    @apply px-5 py-8 xl:px-10 flex flex-col items-start gap-10;
+}
+
+#admin-main h1 {
+    @apply text-3xl! xl:text-4xl! tracking-[-0.035em];
+}
+
+#admin-main h2 {
+    @apply text-2xl! tracking-[-0.03em];
+}
+
+#admin-main h3 {
+    @apply text-lg!;
+}
+
+#admin-main h4 {
+    @apply text-base!;
+}
+
+#admin-main h5 {
+    @apply text-sm!;
+}
+
+#admin-main h6 {
+    @apply text-xs!;
+}