Add a nature theme (#667)

.agents/skills/flotilla-views/SKILL.md

@@ -449,7 +449,7 @@ Rich text uses `makeEditor` from `src/app/editor` with `EditorContent`.
   flotilla's own; daisyUI is not installed.
 - Colors are the semantic tokens registered in `base.css`: `bg-surface`, `bg-surface-more`,
   `text-content`, `text-content-muted`, `border-line`, `text-primary`, `text-error`. The clay,
-  flat and navy themes supply the values through `data-fl-theme`.
+  flat, navy and nature themes supply the values through `data-fl-theme`.
 - Seven `class:` directives remain as leftovers; everything else builds classes with `cx`.
 - Container queries go on the `PageContent`, as in `@2xl:grid-cols-2` for the classifieds grid.
 - Icons are `import X from "@assets/icons/<name>.svg?dataurl"` with `<Icon icon={X} size={4} />`,

README.md

@@ -40,7 +40,7 @@ Create an `.env.local` file to override any of the values in `.env`:
 - `VITE_PLATFORM_TERMS` - URL to your terms of service page
 - `VITE_PLATFORM_PRIVACY` - URL to your privacy policy page
 - `VITE_PLATFORM_LOGEE` - A hex pubkey which will receive logs users send from their privacy settings
-- `VITE_THEME` - The visual preset components are styled with: `clay`, `flat`, or `navy`
+- `VITE_THEME` - The visual preset components are styled with: `clay`, `flat`, `navy`, or `nature`
 
 **Platform mode**
 - `VITE_PLATFORM_RELAYS` - A comma-separated list of relay urls that will make flotilla operate in "platform mode". Disables all space browse/add/select functionality and makes the first platform relay the home page.

src/app/theme.ts

@@ -30,7 +30,7 @@ const colors = [
 export const colorFor = (value: string) => colors[hash(value) % colors.length]
 
 // Every theme with token values in lib/components/theme.css
-export const flThemes = ["clay", "flat", "navy"]
+export const flThemes = ["clay", "flat", "navy", "nature"]
 
 export const flTheme = synced({
   key: "flTheme",

src/lib/components/nature.css

@@ -0,0 +1,81 @@
+[data-fl-theme="nature"] {
+  &[data-theme="light"] {
+    --primary: #397725;
+    --primary-soft: #53963f;
+    --primary-bold: #286015;
+    --primary-content: #fbf8ef;
+
+    --secondary: #dfa220;
+    --secondary-soft: #ebb958;
+    --secondary-bold: #be8207;
+    --secondary-content: #33291c;
+
+    --success: #3f8a4d;
+    --success-content: #fbf8ef;
+    --warning: #d98324;
+    --warning-content: #33291c;
+    --error: #c0503f;
+    --error-content: #fffdf7;
+
+    --backdrop: #f4ecda;
+    --surface: #fffdf7;
+    --surface-more: #ebdbc0;
+    --surface-less: #faf3e3;
+
+    --content: #33291c;
+    --content-muted: color-mix(in oklab, var(--content) 68%, var(--surface));
+    --content-subtle: color-mix(in oklab, var(--content) 42%, var(--surface));
+
+    --line: color-mix(in oklab, var(--content) 20%, transparent);
+    --line-more: color-mix(in oklab, var(--content) 35%, transparent);
+    --line-less: color-mix(in oklab, var(--content) 10%, transparent);
+
+    /* blurred and warm, replacing the hard offset shadow base.css defaults to */
+    --shadow-color: 61, 45, 26;
+    --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.1);
+    --shadow: 0 4px 12px rgba(var(--shadow-color), 0.12);
+    --shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.14);
+    --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
+    --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  &[data-theme="dark"],
+  & .primary-nav {
+    --primary: #8ac265;
+    --primary-soft: #74ac4c;
+    --primary-bold: #a1d481;
+    --primary-content: #18140d;
+
+    --secondary: #e8b753;
+    --secondary-soft: #cd9d35;
+    --secondary-bold: #f5cc72;
+    --secondary-content: #18140d;
+
+    --success: #7cc48a;
+    --success-content: #18140d;
+    --warning: #e2a03f;
+    --warning-content: #18140d;
+    --error: #e07a63;
+    --error-content: #18140d;
+
+    --backdrop: #14110b;
+    --surface: #221d14;
+    --surface-more: #14110b;
+    --surface-less: #1b1710;
+
+    --content: #e8dfcb;
+    --content-muted: color-mix(in oklab, var(--content) 70%, var(--surface));
+    --content-subtle: color-mix(in oklab, var(--content) 45%, var(--surface));
+
+    --line: color-mix(in oklab, var(--content) 16%, transparent);
+    --line-more: color-mix(in oklab, var(--content) 30%, transparent);
+    --line-less: color-mix(in oklab, var(--content) 8%, transparent);
+
+    --shadow-color: 0, 0, 0;
+    --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.35);
+    --shadow: 0 4px 12px rgba(var(--shadow-color), 0.4);
+    --shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.5);
+    --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
+    --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
+  }
+}

src/lib/components/theme.css

@@ -3,20 +3,21 @@
 
      tailwindcss  — framework + our @theme token registration (via base.css)
      base.css     — theme-independent structure (base, utilities, integrations)
-     clay.css     — clay theme token values ([data-fl-theme="clay"] + dark)
+     <theme>.css  — one file per theme, its token values under its own
-     flat.css     — flat theme token values ([data-fl-theme="flat"] + dark)
+                    [data-fl-theme] value, light and dark
-     navy.css     — navy theme token values ([data-fl-theme="navy"] + dark)
 
    Every theme is selected the same way, by its own data-fl-theme value — there
    is no default, so VITE_THEME (→ FL_THEME, stamped on <body> + the app root)
    must be set. Themes are mutually exclusive, so import order doesn't matter.
-   Add a theme = add a token file + an @import. ============================== */
+   Add a theme = a token file, an @import, and its name in app/theme.ts's
+   flThemes, which is what offers it in settings. ============================== */
 
 @import "tailwindcss";
 @import "./base.css";
 @import "./clay.css";
 @import "./flat.css";
 @import "./navy.css";
+@import "./nature.css";
 
 /* per-component styles (one file per component class family) */
 @import "./badge.css";