activeadmin-claude-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 4237be44f1157ffc330cfb1b5ffbf1fb7c91c5dd1de12b2541f386fc3004c414
+  data.tar.gz: ea318e397949ed5546083e144418b0ec9178ccd18c164484cd4b53e88eafd024
+SHA512:
+  metadata.gz: 715ee53ff65c0baced0bc9de6f646fa7cc38bb157cce796743d16f474c12aea3457db128ac9f84ca3f6f42e5db36ea4b434e24ae5b01ef559766269580b684fb
+  data.tar.gz: ef0b5886a35e3d89d77cb7c60fccec89e187f31add7045196e85c320a84c77736784b91a59c1b08e0aa2cfe5a92036d4c725df502a27ec73663dacfb6ee198a6

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,26 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We pledge to make participation in our community a harassment-free experience for everyone.
+
+## Our Standards
+
+Examples of positive behavior:
+
+* Demonstrating empathy and kindness
+* Being respectful of differing opinions
+* Accepting constructive feedback gracefully
+
+Examples of unacceptable behavior:
+
+* Harassment, trolling, or personal attacks
+* Publishing others' private information without permission
+
+## Enforcement
+
+Report issues to **fpaladini@gmail.com**.
+
+## Attribution
+
+Adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 2.1.

data/CONTRIBUTING.md

@@ -0,0 +1,56 @@
+# Contributing to Active Admin Claude Theme
+
+Thank you for contributing! This gem targets **Active Admin 4** (Tailwind v4 beta).
+
+## Development setup
+
+```bash
+bundle install
+cd test/dummy
+npm install
+npm run build:css
+ruby bin/rails db:setup db:seed
+ruby bin/rails server
+```
+
+Visit `http://localhost:3000/admin` — login `admin@example.com` / `password`.
+
+## Making changes
+
+- **CSS tokens:** edit `app/assets/stylesheets/activeadmin_claude_theme.css`
+- **View overrides:** `app/views/active_admin/` — preserve Flowbite `data-*` hooks and `.dark-mode-toggle`
+- **Install flow:** `lib/generators/activeadmin_claude_theme/install/install_generator.rb`
+- **AA4 map:** update `docs/aa4-override-map.md` when overriding new partials
+
+After CSS changes, rebuild in dummy:
+
+```bash
+cd test/dummy
+cp ../../app/assets/stylesheets/activeadmin_claude_theme.css app/assets/tailwind/
+npm run build:css
+```
+
+## Tests
+
+```bash
+cd test/dummy && ruby bin/rails db:test:prepare
+cd ../..
+ruby -Itest test/activeadmin_claude_theme_test.rb test/integration/theme_integration_test.rb
+```
+
+## Commit messages
+
+Use [Conventional Commits](https://www.conventionalcommits.org/):
+
+- `feat:` new feature
+- `fix:` bug fix
+- `docs:` documentation
+- `test:` tests
+- `chore:` maintenance
+
+## Pull requests
+
+1. Fork and branch from `main`
+2. Add/update tests when behavior changes
+3. Rebuild dummy CSS if styles changed
+4. Open PR with screenshots for visual changes

data/DESIGN.md

@@ -0,0 +1,64 @@
+---
+version: alpha
+name: activeadmin-claude-theme
+description: >
+  Community Active Admin 4 theme inspired by Claude/Anthropic aesthetics.
+  Warm cream canvas, coral accents, editorial serif headlines, and dark charcoal surfaces.
+  Not affiliated with Anthropic.
+
+colors:
+  primary: "#cc785c"
+  primary-active: "#a9583e"
+  primary-disabled: "#e6dfd8"
+  ink: "#141413"
+  body: "#3d3d3a"
+  body-strong: "#252523"
+  muted: "#6c6a64"
+  muted-soft: "#8e8b82"
+  hairline: "#e6dfd8"
+  hairline-soft: "#ebe6df"
+  canvas: "#faf9f5"
+  surface-soft: "#f5f0e8"
+  surface-card: "#efe9de"
+  surface-cream-strong: "#e8e0d2"
+  surface-dark: "#181715"
+  surface-dark-elevated: "#252320"
+  surface-dark-soft: "#1f1e1b"
+  on-primary: "#ffffff"
+  on-dark: "#faf9f5"
+  on-dark-soft: "#a09d96"
+  accent-teal: "#5db8a6"
+  accent-amber: "#e8a55a"
+  success: "#5db872"
+  warning: "#d4a017"
+  error: "#c64545"
+
+typography:
+  display:
+    fontFamily: "Source Serif 4, Georgia, Times New Roman, serif"
+    note: "Substitute for proprietary Copernicus / Tiempos Headline"
+  body:
+    fontFamily: "Inter, system-ui, sans-serif"
+    note: "Substitute for proprietary StyreneB / Anthropic Sans"
+  mono:
+    fontFamily: "JetBrains Mono, ui-monospace, monospace"
+
+rounded:
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+
+css_variables:
+  prefix: "--claude-"
+  implementation: app/assets/stylesheets/activeadmin_claude_theme.css
+
+implementation_notes:
+  - Remaps Tailwind gray/blue/indigo scales via @theme for AA4 chrome
+  - Uses :root and .dark for semantic --claude-* tokens
+  - Preserves AA4 dark-mode toggle and Flowbite drawer hooks
+  - Fonts loaded from Google Fonts in host active_admin.css entry
+
+source:
+  - https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/claude/DESIGN.md
+  - https://getdesign.md/

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fernando Paladini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Fernando Paladini
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,176 @@
+# Active Admin Claude Theme
+
+[![Gem Version](https://badge.fury.io/rb/activeadmin-claude-theme.svg)](https://badge.fury.io/rb/activeadmin-claude-theme)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![CI](https://github.com/paladini/activeadmin-claude-theme/actions/workflows/ci.yml/badge.svg)](https://github.com/paladini/activeadmin-claude-theme/actions/workflows/ci.yml)
+
+A warm, editorial **Active Admin 4** theme inspired by Claude/Anthropic aesthetics — cream canvas, coral accents, serif headlines, native dark mode, and mobile-ready chrome.
+
+> **Community theme.** Not affiliated with or endorsed by Anthropic.
+
+Requires **Active Admin `4.0.0.beta22+`** (Tailwind CSS v4).
+
+---
+
+## AI & Agent-Readable Summary
+
+- **What is it?** A Rails Engine gem that themes Active Admin 4 via Tailwind v4 `@theme` token remaps, CSS variables, and minimal view overrides.
+- **Stack:** Active Admin 4 beta, Tailwind v4 CLI, cssbundling-rails, importmap-rails, Rails 7.2+ / 8.x.
+- **Design source:** [DESIGN.md](./DESIGN.md) (adapted from [getdesign.md / Claude DESIGN.md](https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/claude/DESIGN.md)).
+- **Install:** Gemfile → `rails g activeadmin_claude_theme:install` → rebuild CSS.
+- **Keywords:** `active admin theme`, `activeadmin 4`, `tailwind admin`, `claude theme`, `rails admin dark mode`.
+
+---
+
+## Features
+
+- Warm Claude-inspired palette (`#faf9f5` canvas, `#cc785c` coral accent)
+- Tailwind v4 `@theme` remaps for AA4's gray/blue/indigo chrome
+- Semantic `--claude-*` CSS variables (light + `.dark`)
+- Branded header + navigation active indicator
+- Preserves AA4 dark-mode toggle, mobile drawer, and Flowbite hooks
+- Install generator for host apps
+
+---
+
+## Screenshots
+
+| Login | Dashboard |
+| --- | --- |
+| ![Login](docs/images/login.png) | ![Dashboard](docs/images/dashboard.png) |
+
+| Admin Users | Dark Mode |
+| --- | --- |
+| ![Admin Users](docs/images/admin_users.png) | ![Dark Mode](docs/images/dashboard_dark.png) |
+
+---
+
+## Installation
+
+### 1. Prerequisites
+
+Your Rails app must already use **Active Admin 4** with Tailwind v4 assets:
+
+```bash
+# Gemfile
+gem "activeadmin", "4.0.0.beta22"
+gem "cssbundling-rails"
+gem "importmap-rails"
+
+bundle install
+rails generate active_admin:install
+rails generate active_admin:assets
+npm install @activeadmin/activeadmin@4.0.0-beta22
+```
+
+See [Active Admin UPGRADING.md](https://github.com/activeadmin/activeadmin/blob/master/UPGRADING.md) for full AA4 setup.
+
+### 2. Add the theme gem
+
+```ruby
+# Gemfile
+gem "activeadmin-claude-theme"
+```
+
+```bash
+bundle install
+rails generate activeadmin_claude_theme:install
+```
+
+### 3. Rebuild CSS
+
+The install generator moves the Tailwind **source** to `app/assets/tailwind/active_admin.css` so Propshaft only serves the compiled file from `app/assets/builds/active_admin.css`.
+
+```bash
+npm run build:css
+# or: bin/rails css:build
+```
+
+Restart the Rails server after rebuilding.
+
+---
+
+## Troubleshooting
+
+### `active_admin.css` not present in the asset pipeline
+
+Active Admin 4 builds CSS with Tailwind CLI. The **source** file must live outside Propshaft's served paths:
+
+```
+app/assets/tailwind/active_admin.css   # Tailwind source (NOT served)
+app/assets/builds/active_admin.css     # compiled output (served as "active_admin")
+```
+
+Run `rails generate activeadmin_claude_theme:install` — it moves the source to `app/assets/tailwind/` and updates your `package.json` build script. Then:
+
+```bash
+npm run build:css
+```
+
+Restart the Rails server.
+
+### Do not use legacy SCSS imports
+
+AA4 does not use `@import "active_admin/base"`. Remove old Sprockets manifest entries such as `active_admin/base.css` or `activeadmin_claude_theme/index.css`.
+
+---
+
+## Customization
+
+Override semantic tokens in your host CSS after the theme import:
+
+```css
+:root {
+  --claude-primary: #d4845f;
+  --claude-canvas: #fff8f0;
+}
+
+.dark {
+  --claude-canvas: #121110;
+}
+```
+
+| Token | Default (light) | Role |
+| --- | --- | --- |
+| `--claude-primary` | `#cc785c` | Accent / CTA |
+| `--claude-canvas` | `#faf9f5` | Page background |
+| `--claude-ink` | `#141413` | Headings |
+| `--claude-body` | `#3d3d3a` | Body text |
+| `--claude-hairline` | `#e6dfd8` | Borders |
+| `--claude-surface-card` | `#efe9de` | Panels |
+
+Full token list: [DESIGN.md](./DESIGN.md)
+
+---
+
+## Development
+
+```bash
+git clone https://github.com/paladini/activeadmin-claude-theme.git
+cd activeadmin-claude-theme
+bundle install
+
+cd test/dummy
+npm install
+npm run build:css
+ruby bin/rails db:setup db:seed
+ruby bin/rails server
+```
+
+Login: `admin@example.com` / `password`
+
+Run tests from gem root:
+
+```bash
+cd test/dummy && ruby bin/rails db:test:prepare
+cd ../..
+ruby -Itest test/activeadmin_claude_theme_test.rb test/integration/theme_integration_test.rb
+```
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+---
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

data/app/assets/stylesheets/activeadmin_claude_theme.css

@@ -0,0 +1,200 @@
+/* Active Admin Claude Theme — Tailwind v4 design tokens + components.
+   Inspired by Claude/Anthropic aesthetics (community theme, not affiliated). */
+
+/* Fonts load from the host entry file to keep @import order valid for Tailwind v4. */
+@theme {
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+
+  --radius-claude-sm: 6px;
+  --radius-claude-md: 8px;
+  --radius-claude-lg: 12px;
+  --radius-claude-xl: 16px;
+}
+
+/* Recolor AA4's neutral chrome (bg-white / gray-* / dark:gray-*) to warm Claude canvas. */
+@theme {
+  --color-white: #ffffff;
+  --color-gray-50: #faf9f5;
+  --color-gray-100: #f5f0e8;
+  --color-gray-200: #e6dfd8;
+  --color-gray-300: #d6c8b6;
+  --color-gray-400: #8e8b82;
+  --color-gray-500: #6c6a64;
+  --color-gray-600: #3d3d3a;
+  --color-gray-700: #2e2a26;
+  --color-gray-800: #252320;
+  --color-gray-900: #1f1e1b;
+  --color-gray-950: #181715;
+}
+
+/* Recolor AA4 accent scale (blue/indigo hardwired in plugin.js) to Claude coral. */
+@theme {
+  --color-blue-50: #fdf5f1;
+  --color-indigo-50: #fdf5f1;
+  --color-blue-100: #f8e8df;
+  --color-indigo-100: #f8e8df;
+  --color-blue-200: #efd3c4;
+  --color-indigo-200: #efd3c4;
+  --color-blue-300: #e0b39c;
+  --color-indigo-300: #e0b39c;
+  --color-blue-400: #d49378;
+  --color-indigo-400: #d49378;
+  --color-blue-500: #cc785c;
+  --color-indigo-500: #cc785c;
+  --color-blue-600: #a9583e;
+  --color-indigo-600: #a9583e;
+  --color-blue-700: #8f4a34;
+  --color-indigo-700: #8f4a34;
+  --color-blue-800: #733c2b;
+  --color-indigo-800: #733c2b;
+  --color-blue-900: #5c3124;
+  --color-indigo-900: #5c3124;
+  --color-blue-950: #3a1e16;
+  --color-indigo-950: #3a1e16;
+}
+
+:root {
+  --claude-primary: #cc785c;
+  --claude-primary-active: #a9583e;
+  --claude-primary-disabled: #e6dfd8;
+  --claude-ink: #141413;
+  --claude-body: #3d3d3a;
+  --claude-body-strong: #252523;
+  --claude-muted: #6c6a64;
+  --claude-muted-soft: #8e8b82;
+  --claude-hairline: #e6dfd8;
+  --claude-hairline-soft: #ebe6df;
+  --claude-canvas: #faf9f5;
+  --claude-surface-soft: #f5f0e8;
+  --claude-surface-card: #efe9de;
+  --claude-surface-cream: #e8e0d2;
+  --claude-on-primary: #ffffff;
+  --claude-success: #5db872;
+  --claude-warning: #d4a017;
+  --claude-error: #c64545;
+  --claude-accent-teal: #5db8a6;
+  --claude-accent-amber: #e8a55a;
+}
+
+.dark {
+  --claude-primary: #cc785c;
+  --claude-primary-active: #a9583e;
+  --claude-primary-disabled: #3d3530;
+  --claude-ink: #faf9f5;
+  --claude-body: #c9c4bc;
+  --claude-body-strong: #f5f0e8;
+  --claude-muted: #a09d96;
+  --claude-muted-soft: #8e8b82;
+  --claude-hairline: #2e2a26;
+  --claude-hairline-soft: #252320;
+  --claude-canvas: #181715;
+  --claude-surface-soft: #1f1e1b;
+  --claude-surface-card: #252320;
+  --claude-surface-cream: #2e2a26;
+  --claude-on-primary: #ffffff;
+  --claude-success: #5db872;
+  --claude-warning: #e8a55a;
+  --claude-error: #f07171;
+  --claude-accent-teal: #5db8a6;
+  --claude-accent-amber: #e8a55a;
+}
+
+@layer base {
+  body {
+    font-family: var(--font-sans);
+    background-color: var(--claude-canvas);
+    color: var(--claude-body);
+  }
+}
+
+@layer components {
+  .claude-brand-mark {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    font-family: var(--font-serif);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--claude-ink);
+  }
+
+  .claude-brand-dot {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 9999px;
+    background: linear-gradient(135deg, var(--claude-primary), var(--claude-primary-active));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--claude-primary) 18%, transparent);
+  }
+
+  .claude-nav-active-indicator {
+    position: relative;
+  }
+
+  .claude-nav-active-indicator.selected::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: -0.5rem;
+    top: 0.35rem;
+    bottom: 0.35rem;
+    width: 3px;
+    border-radius: 9999px;
+    background: linear-gradient(180deg, var(--claude-primary), var(--claude-primary-active));
+  }
+
+  .claude-btn-primary {
+    background: var(--claude-primary);
+    color: var(--claude-on-primary);
+    border-radius: var(--radius-claude-md);
+    font-weight: 500;
+    transition: background-color 150ms ease;
+  }
+
+  .claude-btn-primary:hover {
+    background: var(--claude-primary-active);
+  }
+
+  .claude-tag {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 9999px;
+    padding: 0.125rem 0.625rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .claude-tag-success {
+    background: color-mix(in srgb, var(--claude-success) 16%, transparent);
+    color: var(--claude-success);
+  }
+
+  .claude-tag-warning {
+    background: color-mix(in srgb, var(--claude-warning) 16%, transparent);
+    color: var(--claude-warning);
+  }
+
+  .claude-tag-error {
+    background: color-mix(in srgb, var(--claude-error) 16%, transparent);
+    color: var(--claude-error);
+  }
+
+  .claude-num {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .claude-panel {
+    background: var(--claude-surface-card);
+    border: 1px solid var(--claude-hairline-soft);
+    border-radius: var(--radius-claude-lg);
+  }
+
+  [data-test-site-title] {
+    font-family: var(--font-serif);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--claude-ink);
+  }
+}

data/app/views/active_admin/_main_navigation.html.erb

@@ -0,0 +1,45 @@
+<div id="main-menu" class="fixed top-0 xl:top-16 bottom-0 inset-s-0 z-40 w-72 xl:w-60 p-4 overflow-y-auto transition-transform duration-200 -translate-x-full xl:translate-x-0 bg-white dark:bg-gray-950 xl:border-e xl:border-gray-200 xl:dark:border-white/10" tabindex="-1">
+  <ul role="list" class="flex flex-1 flex-col space-y-1.5">
+    <% current_menu.items(self).each do |item| %>
+      <% children = item.items(self).presence %>
+      <% url = item.url(self) %>
+      <% label = capture do %>
+        <% if url.present? %>
+          <%= link_to item.label(self), url, item.html_options.merge(class: "claude-nav-active-indicator text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center w-full rounded-md p-2 gap-x-2 text-sm no-underline #{(current_menu_item?(item, children: false) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+        <% else %>
+          <%= item.label(self) %>
+        <% end %>
+      <% end %>
+      <li <%= current_menu_item?(item) && "data-open" %> class="group" data-item-id="<%= item.id %>">
+        <% if children %>
+          <% if url.present? && url == "#" %>
+            <button data-menu-button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center w-full rounded-md p-2 gap-x-2 text-sm" aria-label="<%= t('active_admin.toggle_section') %>">
+              <%= item.label(self) %>
+              <svg class="group-data-open:rotate-90 group-data-open:rtl:-rotate-90 ms-auto h-5 w-5 shrink-0 rtl:-scale-x-100" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+              </svg>
+            </button>
+          <% elsif url.present? && url != "#" %>
+            <div data-parent-id="<%= item.id %>" data-menu-button class="flex">
+              <%= label %>
+              <button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center p-2 text-sm" aria-label="<%= t('active_admin.toggle_section') %>">
+                <svg class="group-data-open:rotate-90 group-data-open:rtl:-rotate-90 ms-auto h-5 w-5 shrink-0 rtl:-scale-x-100" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+                </svg>
+              </button>
+            </div>
+          <% end %>
+          <ul role="list" class="mt-1 space-y-1 hidden group-data-open:block ms-1 ps-2 border-s-2 border-gray-100 dark:border-white/5">
+            <% children.each do |j| %>
+              <li data-item-id="<%= j.id %>">
+                <%= link_to j.label(self), j.url(self), j.html_options.merge(class: "claude-nav-active-indicator text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white block rounded-md py-1.5 px-2 text-sm no-underline #{(current_menu_item?(j) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+              </li>
+            <% end %>
+          </ul>
+        <% else %>
+          <%= label %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/views/active_admin/_site_header.html.erb

@@ -0,0 +1,33 @@
+<div class="border-b border-gray-200 dark:border-white/10 dark:bg-gray-950/75 px-4 py-2 flex items-center fixed top-0 z-20 h-16 w-full backdrop-blur-md bg-white/80">
+  <button class="xl:hidden pe-3 inline-flex items-center w-8 h-8 justify-center text-sm text-gray-500 dark:text-gray-400 focus-visible:outline-hidden focus-visible:ring-ring focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0" data-drawer-target="main-menu" data-drawer-show="main-menu" aria-controls="main-menu" aria-label="<%= t('active_admin.toggle_main_navigation_menu') %>">
+    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/></svg>
+  </button>
+
+  <div class="grow flex items-center gap-3 min-w-0">
+    <div class="claude-brand-mark shrink-0 hidden sm:inline-flex">
+      <span class="claude-brand-dot" aria-hidden="true"></span>
+      <span>Claude Admin</span>
+    </div>
+    <h1 data-test-site-title class="text-lg font-semibold truncate">
+      <%= title %>
+    </h1>
+  </div>
+
+  <button type="button" class="dark-mode-toggle flex items-center w-9 h-9 justify-center me-1 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-hidden text-sm" aria-label="<%= t('active_admin.toggle_dark_mode') %>">
+    <svg class="hidden dark:block w-5 h-5 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.509 5.75c0-1.493.394-2.96 1.144-4.25h-.081a8.5 8.5 0 1 0 7.356 12.746A8.5 8.5 0 0 1 8.509 5.75Z"/></svg>
+    <svg class="dark:hidden w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 3V1m0 18v-2M5.05 5.05 3.636 3.636m12.728 12.728L14.95 14.95M3 10H1m18 0h-2M5.05 14.95l-1.414 1.414M16.364 3.636 14.95 5.05M14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>
+  </button>
+
+  <button id="user-menu-button" class="flex items-center w-9 h-9 justify-center text-sm text-gray-500 focus:outline-hidden dark:text-gray-200" data-dropdown-toggle="user-menu" data-dropdown-offset-distance="3" data-dropdown-placement="bottom-end" aria-label="<%= t('active_admin.toggle_user_menu') %>">
+    <svg class="w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/></svg>
+  </button>
+
+  <div id="user-menu" class="z-50 hidden min-w-max rounded shadow-lg outline outline-black/5 dark:-outline-offset-1 dark:outline-white/10 focus:outline-hidden py-1 text-sm bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300" aria-labelledby="user-menu-button">
+    <ul>
+      <% if current_active_admin_user? %>
+        <li><%= auto_link current_active_admin_user, class: "block px-2.5 py-2 no-underline text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white" %></li>
+        <li><%= link_to I18n.t("active_admin.logout"), auto_logout_link_path, class: "block px-2.5 py-2 no-underline text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white", data: { method: :delete } %></li>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/config/routes.rb

@@ -0,0 +1,2 @@
+Rails.application.routes.draw do
+end

data/lib/activeadmin_claude_theme/engine.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ActiveadminClaudeTheme
+  class Engine < ::Rails::Engine
+    isolate_namespace ActiveadminClaudeTheme
+
+    rake_tasks do
+      load root.join("lib/tasks/activeadmin_claude_theme_tasks.rake")
+    end
+
+    initializer "activeadmin_claude_theme.prepend_views" do
+      ActiveSupport.on_load(:action_controller_base) do
+        prepend_view_path ActiveadminClaudeTheme::Engine.root.join("app/views")
+      end
+    end
+  end
+end

data/lib/activeadmin_claude_theme/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module ActiveadminClaudeTheme
+  VERSION = "0.1.0"
+end

data/lib/activeadmin_claude_theme.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+require "activeadmin_claude_theme/version"
+require "activeadmin_claude_theme/engine"
+
+module ActiveadminClaudeTheme
+end

data/lib/generators/activeadmin_claude_theme/install/install_generator.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+require "rails/generators/base"
+
+module ActiveadminClaudeTheme
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      desc "Install the Claude theme into an Active Admin 4 app."
+
+      AA_TW_SRC = "app/assets/tailwind/active_admin.css"
+      AA_TW_SRC_LEGACY = "app/assets/stylesheets/active_admin.css"
+      TW_CONF = "tailwind-active_admin.config.js"
+      PACKAGE_JSON = "package.json"
+      FONTS_IMPORT = <<~CSS
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");
+      CSS
+
+      def vendor_theme_css
+        css = ActiveadminClaudeTheme::Engine.root.join("app/assets/stylesheets/activeadmin_claude_theme.css").read
+        create_file "app/assets/tailwind/activeadmin_claude_theme.css", css
+      end
+
+      def relocate_active_admin_source
+        return if File.exist?(AA_TW_SRC)
+
+        if File.exist?(AA_TW_SRC_LEGACY)
+          create_file AA_TW_SRC, File.read(AA_TW_SRC_LEGACY)
+          remove_file AA_TW_SRC_LEGACY
+          say "Moved Active Admin Tailwind source to #{AA_TW_SRC} (keeps Propshaft from serving uncompiled CSS).", :green
+        else
+          say "Skipped relocate: run `rails g active_admin:assets` first.", :yellow
+        end
+      end
+
+      def import_into_build
+        return unless File.exist?(AA_TW_SRC)
+
+        import_line = %(@import "./activeadmin_claude_theme.css";\n)
+        return if File.read(AA_TW_SRC).include?("activeadmin_claude_theme.css")
+
+        inject_into_file AA_TW_SRC, import_line, after: /@import "tailwindcss";\n/
+
+        return if File.read(AA_TW_SRC).include?("fonts.googleapis.com")
+
+        inject_into_file AA_TW_SRC, FONTS_IMPORT, before: /@import "tailwindcss";\n/
+      end
+
+      def configure_build_script
+        return unless File.exist?(PACKAGE_JSON)
+
+        package = File.read(PACKAGE_JSON)
+        return if package.include?("app/assets/tailwind/active_admin.css")
+
+        gsub_file PACKAGE_JSON,
+                  "./app/assets/stylesheets/active_admin.css",
+                  "./app/assets/tailwind/active_admin.css"
+      end
+
+      def add_view_content_source
+        return unless File.exist?(TW_CONF)
+        return if File.read(TW_CONF).include?("activeadmin-claude-theme")
+
+        snippet = <<~JS
+              `${execSync('bundle show activeadmin-claude-theme', { encoding: 'utf-8' }).trim().split(/\\r?\\n/).pop()}/app/views/**/*.{erb,html,arb,rb}`,
+        JS
+
+        inject_into_file TW_CONF, snippet, after: "content: [\n"
+      end
+
+      def patch_tailwind_config_bundle_gemfile
+        return unless File.exist?(TW_CONF)
+        return if File.read(TW_CONF).include?("BUNDLE_GEMFILE")
+
+        inject_into_file TW_CONF,
+                         "process.env.BUNDLE_GEMFILE ||= require('path').resolve(__dirname, 'Gemfile');\n\n",
+                         before: "const activeAdminPath"
+      rescue StandardError
+        inject_into_file TW_CONF,
+                         "process.env.BUNDLE_GEMFILE ||= require('path').resolve(__dirname, 'Gemfile');\n\n",
+                         after: "import activeAdminPlugin from '@activeadmin/activeadmin/plugin';\n\n"
+      end
+
+      def done
+        say "Claude theme installed.", :green
+        say "Rebuild CSS: npm run build:css", :green
+        say "Restart your Rails server after rebuilding.", :green
+      end
+    end
+  end
+end

data/lib/tasks/activeadmin_claude_theme_tasks.rake

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "fileutils"
+
+namespace :activeadmin_claude_theme do
+  desc "Build Active Admin CSS for the dummy app (Tailwind v4)"
+  task :build_css do
+    dummy = File.expand_path("test/dummy", __dir__)
+    env = ENV.to_h.merge("BUNDLE_GEMFILE" => File.expand_path("Gemfile", __dir__))
+    system(env, "npm", "run", "build:css", chdir: dummy, exception: true)
+  end
+end
+
+task "assets:precompile" => "activeadmin_claude_theme:build_css"

metadata

@@ -0,0 +1,93 @@
+--- !ruby/object:Gem::Specification
+name: activeadmin-claude-theme
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Fernando Paladini
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.2'
+- !ruby/object:Gem::Dependency
+  name: activeadmin
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.0.beta22
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.0.beta22
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
+description: Community theme gem for Active Admin 4 (Tailwind v4) inspired by Claude/Anthropic
+  aesthetics — warm canvas, coral accents, dark mode, and mobile-ready admin chrome.
+email:
+- fpaladini@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CODE_OF_CONDUCT.md
+- CONTRIBUTING.md
+- DESIGN.md
+- LICENSE
+- MIT-LICENSE
+- README.md
+- app/assets/stylesheets/activeadmin_claude_theme.css
+- app/views/active_admin/_main_navigation.html.erb
+- app/views/active_admin/_site_header.html.erb
+- config/routes.rb
+- lib/activeadmin_claude_theme.rb
+- lib/activeadmin_claude_theme/engine.rb
+- lib/activeadmin_claude_theme/version.rb
+- lib/generators/activeadmin_claude_theme/install/install_generator.rb
+- lib/tasks/activeadmin_claude_theme_tasks.rake
+homepage: https://github.com/paladini/activeadmin-claude-theme
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/paladini/activeadmin-claude-theme
+  source_code_uri: https://github.com/paladini/activeadmin-claude-theme
+  rubygems_mfa_required: 'true'
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.16
+specification_version: 4
+summary: A warm, editorial Claude-inspired theme for Active Admin 4.
+test_files: []