fuji_admin 0.1.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ced4ed49bdd67f0df172275fee1324778c378ae9e0ee99d3977e136ce819596
-  data.tar.gz: feb7791cec556d78eede014b8f9e3e531bfd31512cdb6fce9f60277e28a6dd20
+  metadata.gz: 826553bf7f65cca6b8ae4a32de6da7fd74c698fad3d674f173fd26a4816c9475
+  data.tar.gz: bfab5e1c447b458cebb6e6809c928e210542105ba58231de05b2d67cd65d0935
 SHA512:
-  metadata.gz: d233f8162d6fbd660000f429aaf480756385da78f4e58aa1ed73680c080afec0e117b1f143cfe6099651b03a009dc1af9cba699620ee8efa55255803dee339fd
-  data.tar.gz: 64b65816c0c78554be7afdc1c716133f49a98dc4c42dd37d367063f14f6e335b31ef7565294eb42f14d4e895fc01c0d7a7eda25439f2ab192461c007334ca9ef
+  metadata.gz: f80c521d6cae049d7e6f9c7d5e70026c6a641bb0b92d6be6f100c7791f40484f7a31ebd4169126ba09b21925f82b7ec052768ff4d0075aa5b439aceeca47a999
+  data.tar.gz: b69ca7a0eb6353ff2a336518f01e191b0e6c824113d4fe29b5dab9c0d0f602f5ff6cde664b1f2d755a1f789ddbe36cf1d0fd988959430b8aab2ac55b0c314461

data/README.md

@@ -1,9 +1,30 @@
 # Fuji Admin
 
-A responsive [ActiveAdmin](https://github.com/activeadmin/activeadmin) theme.
+A responsive, modern theme for [ActiveAdmin](https://github.com/activeadmin/activeadmin).
 Clean card-based layout, slide-in filter drawer, float-label inputs,
 row-action dropdowns, and a live palette switcher with 30 built-in palettes.
 
+## Why fuji_admin
+
+Fuji Admin drops onto an existing ActiveAdmin app without touching a single
+line of your `app/admin/` files — every existing resource, filter, form, and
+table immediately looks a decade newer. It replaces AA's piecemeal defaults
+with a cohesive design system — Saira typography, card-based layout, proper
+elevation, and consistent spacing tokens — rather than painting over the
+framework. A runtime palette switcher lets you (or your users) repaint every
+primary surface, button, link, and chip live, with 30 curated palettes
+available and derived tinted surfaces via `color-mix()` so no palette ever
+feels "recolored". Forms get animated floating labels on text inputs and
+textareas, refactored fieldset chrome, and clean button styling without
+any Formtastic changes. Mobile posture is taken seriously: panels flatten
+into sections, index tables switch to compact padding with opt-in
+column-wrapping, and wide tables scroll horizontally instead of collapsing.
+The filter sidebar is rethought as a right-side drawer with active-filter
+chips above the table, reclaiming huge amounts of horizontal space for wide
+index pages. Every design token (color, shadow, radius, space, font) is an
+overridable SCSS variable, so one line in your `active_admin.scss` can rebrand
+the whole app.
+
 ## Features
 
 - **Responsive layout** — fixed header + sidebar nav at `lg+`, auto-injected
@@ -11,12 +32,12 @@ row-action dropdowns, and a live palette switcher with 30 built-in palettes.
 - **Filter drawer** — AA's `#sidebar` is turned into a right-side slide-in
   panel with a "Filters" toggle in the title bar. Includes a chip strip
   above the table showing each active Ransack filter (click × to remove).
-- **Float labels** on text inputs, matching the Verona feel.
+- **Float labels** on text inputs and textareas.
 - **Row-action dropdown** — 2+ row actions collapse into a single `⋯`
   menu per row, rendered above any clipping parents via `position: fixed`.
-- **Palette switcher** — 30 palettes (Coolors-trending), 8 of them curated
-  full themes that repaint surfaces + text + borders. Non-themed palettes
-  auto-derive tinted surfaces from the primary via `color-mix()`.
+- **Palette switcher** — 30 palettes, 8 of them curated full themes that
+  repaint surfaces + text + borders. Non-themed palettes auto-derive tinted
+  surfaces from the primary via `color-mix()`.
 - **Refactored form chrome** — fieldset legends rendered as proper card
   headers, not floating `<legend>` text over borders.
 - **Full component set** — buttons, inputs, selects, Select2, jQuery UI
@@ -29,43 +50,45 @@ row-action dropdowns, and a live palette switcher with 30 built-in palettes.
 - Ruby `>= 3.1.0`
 - ActiveAdmin `>= 3.0`, `< 4.0`
 
-## Installation
+## Install in an existing ActiveAdmin project
 
-In your host app's `Gemfile`:
+1. Add to your `Gemfile`:
 
-```ruby
-gem "fuji_admin", "~> 0.1"
-```
+   ```ruby
+   gem "fuji_admin", "~> 0.1"
+   ```
 
-Then:
+   ```bash
+   bundle install
+   ```
 
-```bash
-bundle install
-```
+2. Import the stylesheet in `app/assets/stylesheets/active_admin.scss`:
 
-### Asset imports
+   ```scss
+   @import "fuji_admin/base";
+   ```
 
-In `app/assets/stylesheets/active_admin.scss`:
+3. Require the JavaScript in `app/assets/javascripts/active_admin.js`:
 
-```scss
-@import "fuji_admin/base";
-```
+   ```javascript
+   //= require fuji_admin/base
+   ```
 
-In `app/assets/javascripts/active_admin.js`:
+4. Restart the Rails server. That's it — your existing resources now render
+   with the fuji theme.
 
-```javascript
-//= require fuji_admin/base
-```
+No changes to your `app/admin/*.rb` files are required. If you were
+previously using a different theme (e.g. `arctic_admin`), remove its gem and
+asset imports to avoid conflicting styles.
 
-## Configuration
+### Optional configuration
 
-Add a Rails initializer — all attributes are optional.
+All attributes are optional.
 
 ```ruby
 # config/initializers/fuji_admin.rb
 FujiAdmin.configure do |config|
-  # Id of the palette to apply before any user selection is stored.
-  # Must match one of the ids in app/assets/javascripts/fuji_admin/palettes.js.
+  # Palette applied before any user selection is stored.
   config.default_palette = "forest-meadow"
 
   # Render the floating palette-picker UI. Defaults to false. Flip on in
@@ -77,43 +100,79 @@ end
 Configuration is surfaced to the browser via `<meta>` tags injected into
 ActiveAdmin's `<head>` — no host-layout changes required.
 
-## Development against a host app
+## Choosing a palette
 
-Clone both repos side-by-side:
+You have three ways to apply a palette. Pick whichever fits your workflow.
 
-```
-~/development/
-  ├── fuji_admin/
-  └── my_admin_app/
-```
+### 1. Live-preview with the palette picker (development)
 
-Bundler's `bundle config local.<gem>` override only works when the host's
-Gemfile references a git source, not a published RubyGem. So for live local
-editing, point the host's Gemfile at the GitHub source temporarily:
+Flip `config.palette_picker = true` in the initializer and reload. A small
+floating trigger appears in the bottom-right corner; opening it shows all 30
+palettes with swatches. Click one and the entire UI repaints instantly — no
+reload. Your selection is persisted to `localStorage` for that browser, so
+you can use it to audition palettes when picking your default.
 
-```ruby
-# Host app Gemfile — during fuji_admin development
-gem "fuji_admin", github: "BarbaricCorgi/fuji_admin"
-```
+### 2. Set a project-wide default
 
-Then tell Bundler to resolve it against your local checkout:
+Once you've chosen a palette, set its `id` in the initializer:
 
-```bash
-bundle config local.fuji_admin ~/development/fuji_admin
+```ruby
+FujiAdmin.configure do |config|
+  config.default_palette = "coastal-sage"
+end
 ```
 
-This is a per-machine setting stored in `~/.bundle/config` — CI / Docker /
-Kamal never see it and fall back to the github source. Edits in
-`~/development/fuji_admin` reflect in the host app immediately.
-
-When you're ready to ship, flip the Gemfile back to
-`gem "fuji_admin", "~> 0.1"`, publish a new version (`gem build && gem push`),
-and run `bundle update fuji_admin` in the host.
+This palette is applied for every user who hasn't picked their own via the
+runtime picker. Leaving `palette_picker = false` in production means the
+default is the *only* palette used, which is usually what you want for a
+consistent brand.
+
+### 3. Bundled palette IDs
+
+Use any of these as `default_palette`:
+
+| ID                | Tone                          |
+| ----------------- | ----------------------------- |
+| `fuji-default`    | Deep indigo (fuji base)       |
+| `navy-amber`      | Teal + amber accents          |
+| `warm-sunset`     | Terracotta + teal             |
+| `forest-meadow`   | Olive & green earth tones     |
+| `dusty-rose`      | Muted pink + maroon           |
+| `ocean-blue`      | Ocean cyans                   |
+| `terracotta`      | Warm terracotta + sage        |
+| `coastal-sage`    | Sage-green neutral *(theme)*  |
+| `royal-purple`    | Deep violet                   |
+| `editorial-navy`  | Slate navy + off-white *(theme)* |
+| `cheerful`        | Primary-bright multi          |
+| `crimson-spice`   | Crimson + saffron             |
+| `mint-ocean`      | Mint → deep-cyan ramp         |
+| `burgundy-gold`   | Burgundy + gold *(theme)*     |
+| `scarlet`         | Monochrome scarlet            |
+| `teal-warmth`     | Teal + warm ochre             |
+| `deep-cyan`       | Deep cyan + sand *(theme)*    |
+| `tropical`        | Tropical aqua + coral *(theme)* |
+| `spice-road`      | Magenta + orange              |
+| `sunset-gradient` | Full spectrum sunset          |
+| `coral-reef`      | Coral + seafoam               |
+| `electric`        | Vivid cyberpunk               |
+| `muted-taupe`     | Grey-purple taupe *(theme)*   |
+| `warm-lilac`      | Lilac ramp                    |
+| `rose-garden`     | Rose + pink                   |
+| `forest-deep`     | Deep forest                   |
+| `pink-sunset`     | Soft pinks                    |
+| `twilight-purple` | Deep indigo-purple            |
+| `olive-gold`      | Olive + mustard *(theme)*     |
+| `sage-terracotta` | Sage + terracotta *(theme)*   |
+| `indigo-glow`     | Vivid indigo + multi          |
+
+Palettes marked *(theme)* are curated full themes with hand-picked surface,
+text, and border colors. Un-marked palettes auto-derive tinted surfaces from
+the primary at runtime.
 
 ## Customising palettes
 
 The 30 bundled palettes live in
-`app/assets/javascripts/fuji_admin/palettes.js`. Each has:
+`app/assets/javascripts/fuji_admin/palettes.js`. Each entry has:
 
 ```javascript
 {
@@ -135,6 +194,55 @@ Palettes without a `theme` block get auto-derived surfaces + text by mixing
 the `primary` with white / black at runtime via `color-mix()`, so every
 palette reads as a coherent mini-theme.
 
+To override the theme's design tokens wholesale (font, radii, spacing,
+shadows, base colors), declare the SCSS variable *before* the fuji_admin
+import:
+
+```scss
+// app/assets/stylesheets/active_admin.scss
+$primary-color: #2bb673;
+$font-family-body: "Inter", sans-serif;
+$border-radius-card: 12px;
+
+@import "fuji_admin/base";
+```
+
+Every variable in `fuji_admin/variables/*` is marked `!default`, so your
+declaration wins.
+
+## Development against a host app
+
+Clone both repos side-by-side:
+
+```
+~/development/
+  ├── fuji_admin/
+  └── my_admin_app/
+```
+
+Bundler's `bundle config local.<gem>` override only works when the host's
+Gemfile references a git source, not a published RubyGem. So for live local
+editing, point the host's Gemfile at the GitHub source temporarily:
+
+```ruby
+# Host app Gemfile — during fuji_admin development
+gem "fuji_admin", github: "BarbaricCorgi/fuji_admin"
+```
+
+Then tell Bundler to resolve it against your local checkout:
+
+```bash
+bundle config local.fuji_admin ~/development/fuji_admin
+```
+
+This is a per-machine setting stored in `~/.bundle/config` — CI / Docker /
+Kamal never see it and fall back to the github source. Edits in
+`~/development/fuji_admin` reflect in the host app immediately.
+
+When you're ready to ship, flip the Gemfile back to
+`gem "fuji_admin", "~> 0.1"`, publish a new version (`gem build && gem push`),
+and run `bundle update fuji_admin` in the host.
+
 ## License
 
 MIT — see [LICENSE.txt](LICENSE.txt).

data/app/assets/stylesheets/fuji_admin/components/_buttons.scss

@@ -68,9 +68,11 @@
 
 // Primary button surface — form submit, action item buttons, batch actions.
 form input[type="submit"],
+form button[type="submit"],
 a.button,
 a:link.button,
 a:visited.button,
+button.button,
 fieldset.actions > ol > li.button_action > button,
 #title_bar #titlebar_right .action_item > a,
 .batch_actions_selector > a,

data/app/assets/stylesheets/fuji_admin/components/_float_labels.scss

@@ -1,7 +1,7 @@
 // Float labels — applied by fuji_admin/floats.js to text-like formtastic
 // wrappers inside `fieldset.inputs`. The label rests inside the input at
 // baseline, then animates up to sit on the top border when the input has
-// focus or a value (matching PrimeReact Verona's float label pattern).
+// focus or a value (standard float-label pattern).
 //
 // Only `.fuji-float` wrappers get this treatment; selects, booleans, radios
 // and date pickers keep their stacked label so their native controls stay
@@ -22,7 +22,7 @@ fieldset.inputs ol > li.fuji-float {
     font-weight: $font-weight-regular;
     line-height: 1.4;
     color: $text-color-muted;
-    background-color: $surface-0; // masks input border when floated
+    background-color: var(--fuji-surface, #{$surface-0}); // masks input border when floated; palette-aware
     pointer-events: none;
     text-transform: none;
     letter-spacing: 0;
@@ -68,10 +68,3 @@ fieldset.inputs ol > li.fuji-float {
   }
 }
 
-// Textarea variant — label docks at the top of the textarea when resting,
-// not centred (textareas are tall so centring would look awkward).
-fieldset.inputs ol > li.text.fuji-float {
-  > label {
-    top: calc(#{$input-padding-y} + 1px);
-  }
-}

data/app/assets/stylesheets/fuji_admin/components/_inputs.scss

@@ -2,8 +2,8 @@
 // and native selects. Select2 and date pickers get their own components.
 //
 // Sizing approach: pad to ~40px total height (10px y / 12px x + 1px borders +
-// ~1.4 line-height on 14px text). Matches Verona's InputText aesthetic so
-// stacked forms breathe and feel touch-friendly.
+// ~1.4 line-height on 14px text) so stacked forms breathe and feel
+// touch-friendly.
 
 $input-padding-y: 10px;
 $input-padding-x: $space-3;

data/app/assets/stylesheets/fuji_admin/components/_palette_switcher.scss

@@ -26,9 +26,11 @@ $fuji-primary: var(--fuji-primary, #{$primary-color});
 
 // Primary buttons — keep text white regardless of palette/theme.
 form input[type="submit"],
+form button[type="submit"],
 a.button,
 a:link.button,
 a:visited.button,
+button.button,
 fieldset.actions > ol > li.button_action > button,
 #title_bar #titlebar_right .action_item > a,
 #title_bar #titlebar_right .dropdown_menu > a.dropdown_menu_button,

data/app/assets/stylesheets/fuji_admin/components/_panel.scss

@@ -25,6 +25,33 @@
   }
 }
 
+// Mobile: flatten panels so they read as plain sections inside the outer
+// #main_content card, reclaiming the horizontal space eaten by nested card
+// chrome. `.sidebar_section.panel` is excluded — it uses a different layout.
+.panel:not(.sidebar_section) {
+  @include media-down(md) {
+    background-color: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    margin-bottom: 0;
+    border-bottom: 1px solid $surface-200;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    > h3 {
+      padding: $space-4 0 $space-2;
+      border-bottom: 0;
+    }
+
+    .panel_contents {
+      padding: 0 0 $space-4;
+    }
+  }
+}
+
 // Inside the sidebar, tighten the defaults slightly.
 #sidebar .sidebar_section.panel {
   box-shadow: none;

data/app/assets/stylesheets/fuji_admin/components/_scopes.scss

@@ -4,7 +4,7 @@
 
 .scopes,
 .table_tools .scopes {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   gap: 0;
   padding: $space-1;
@@ -13,8 +13,13 @@
   list-style: none;
   margin: 0;
 
+  @include media-down(md) {
+    align-self: flex-start;
+  }
+
   > ul {
-    display: inline-flex;
+    display: flex;
+    flex-wrap: wrap;
     list-style: none;
     padding: 0;
     margin: 0;

data/app/assets/stylesheets/fuji_admin/components/_tables.scss

@@ -55,10 +55,14 @@ table.index_table {
     tr {
       transition: background-color 0.15s ease;
 
-      &:hover {
+      &:nth-child(even) {
         background-color: $surface-50;
       }
 
+      &:hover {
+        background-color: $surface-100;
+      }
+
       &.selected {
         background-color: $primary-50;
       }
@@ -128,6 +132,33 @@ table.index_table {
       }
     }
   }
+
+  @include media-down(md) {
+    font-size: $font-size-xs;
+    line-height: $line-height-tight;
+
+    thead th,
+    tbody tr td {
+      padding: 0.3rem 0.3rem;
+      white-space: nowrap;
+    }
+
+    thead th.col-selectable,
+    tbody tr td.col-selectable {
+      width: 36px;
+      min-width: 36px;
+      max-width: 36px;
+      padding: 0 $space-2;
+    }
+
+    thead th.col-wide,
+    tbody tr td.col-wide {
+      min-width: 200px;
+      max-width: 400px;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+  }
 }
 
 // Show-page attributes table — two-column label/value rows.
@@ -213,12 +244,12 @@ table.index_table {
     tr {
       transition: background-color 0.15s ease;
 
-      &:hover {
+      &:nth-child(even) {
         background-color: $surface-50;
       }
 
-      &.odd {
-        background-color: transparent; // we handle alternation via hover
+      &:hover {
+        background-color: $surface-100;
       }
 
       td {

data/app/assets/stylesheets/fuji_admin/layouts/_main_content.scss

@@ -101,14 +101,15 @@ body.new {
   }
 }
 
-// On edit / view / new pages, flatten the card at mobile sizes so the form
-// or attributes table reaches the viewport edges.
+// On edit / view / new pages, flatten the card at mobile sizes: drop the
+// border-radius and shadow but keep horizontal padding so content has a
+// gutter (flat panels below no longer provide their own).
 body.show,
 body.edit,
 body.new {
   @include media-down(md) {
     #main_content {
-      padding: 0;
+      padding: 0 $content-padding-mobile;
       border-radius: 0;
       box-shadow: none;
     }

data/app/assets/stylesheets/fuji_admin/pages/_index.scss

@@ -17,10 +17,6 @@
     border-radius: 0;
   }
 
-  .paginated_collection_contents {
-    overflow-x: auto;
-  }
-
   .pagination_information,
   .pagination {
     padding: $space-3 0;
@@ -31,6 +27,10 @@
   }
 }
 
+.paginated_collection_contents {
+  overflow-x: auto;
+}
+
 // Batch-actions checkbox column width.
 table.index_table tbody td.col-selectable {
   width: 32px;

data/app/assets/stylesheets/fuji_admin/variables/_breakpoints.scss

@@ -1,4 +1,4 @@
-// Breakpoints — match PrimeReact Verona's scale for parity with reference UI.
+// Breakpoints — standard mobile-first responsive scale.
 // Use via mixins/_media.scss.
 
 $bp-sm:   576px;  // phone landscape

data/app/assets/stylesheets/fuji_admin/variables/_colors.scss

@@ -1,6 +1,6 @@
-// Color tokens. Values seeded from Verona (PrimeReact) for a coherent starting
-// palette. Override any of these by redeclaring the variable *before* the
-// fuji_admin import in the host app's active_admin.scss.
+// Color tokens — a coherent neutral + indigo starting palette. Override any
+// of these by redeclaring the variable *before* the fuji_admin import in
+// the host app's active_admin.scss.
 
 // Surfaces — neutral backgrounds & borders
 $surface-0:      #ffffff !default;  // card
@@ -22,7 +22,7 @@ $text-color:           #212121 !default;
 $text-color-secondary: #616161 !default;
 $text-color-muted:     #9e9e9e !default;
 
-// Primary — deep indigo/blue (Verona primary ramp)
+// Primary — deep indigo/blue
 $primary-50:   #f2f5fc !default;
 $primary-100:  #d4daed !default;
 $primary-200:  #b2bce0 !default;

data/app/assets/stylesheets/fuji_admin/variables/_shadows.scss

@@ -1,4 +1,4 @@
-// Box shadow tokens. Soft, layered — inspired by Verona's card aesthetic.
+// Box shadow tokens. Soft, layered for a card-based aesthetic.
 
 $shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
 $shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);

data/lib/fuji_admin/version.rb

@@ -1,3 +1,3 @@
 module FujiAdmin
-  VERSION = "0.1.2"
+  VERSION = "1.0.0"
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: fuji_admin
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 1.0.0
 platform: ruby
 authors:
 - barbariccorgi
-autorequire: 
 bindir: bin
 cert_chain: []
-date: 2026-04-18 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin
@@ -30,8 +29,20 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '4.0'
-description: A responsive ActiveAdmin theme
-email: 
+description: |
+  Fuji Admin is a drop-in theme for ActiveAdmin that upgrades every default
+  surface — tables, forms, filters, panels, pagination, scopes, batch
+  actions — into a cohesive, modern design system without requiring any
+  changes to your app/admin files. Ships with a card-based responsive
+  layout, slide-in filter drawer with active-filter chips, animated
+  floating labels on text inputs and textareas, row-action dropdowns, and
+  a runtime palette switcher with 30 built-in palettes (8 curated full
+  themes) that repaint surfaces, text, borders, and primary accents live.
+  Mobile posture is first-class: panels flatten into sections, index
+  tables get compact padding with opt-in column wrapping, and wide tables
+  scroll horizontally. Every design token (color, shadow, radius, space,
+  font) is an overridable SCSS variable so brands can customize without
+  forking.
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -102,7 +113,6 @@ metadata:
   source_code_uri: https://github.com/BarbaricCorgi/fuji_admin
   changelog_uri: https://github.com/BarbaricCorgi/fuji_admin/releases
   bug_tracker_uri: https://github.com/BarbaricCorgi/fuji_admin/issues
-post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -117,8 +127,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.9
-signing_key: 
+rubygems_version: 4.0.10
 specification_version: 4
-summary: A responsive ActiveAdmin theme
+summary: A modern, responsive ActiveAdmin theme with a live palette switcher
 test_files: []