activeadmin 4.0.0.beta16 → 4.0.0.beta17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a62b629c88387b6ce12da060ec6447ab0dd2d0899c7f7cb4b7b8df1081daa11d
-  data.tar.gz: 2138d2c6d8dabc12f59ef9351ea8f991db845b313d770fc054fdf58768731b2f
+  metadata.gz: b1d53a8406a4e9dbe404b083ed90ee235be6620b0f5cf9d41366f64f2dccec89
+  data.tar.gz: ab337381ccd99bd305a5a0324102418be8a6fc5466f73053bbb3e0107df630b2
 SHA512:
-  metadata.gz: cc3c3ec1e7979f72ae4c93044705d4709a687916a420edbd59a1cf7c3c2b3a857deeeaabb4678787d522c72bf01f893cfbed3468ec6e4043cd8a30fa378afc66
-  data.tar.gz: 46eec404c3a0d4dfdb5e7c7e15b9e2dd74c9351bad00ed4ad1bcf89fd42e13a6f0bd93ec1cd3b98cba2944381f3766a9490a256e24c02d6b421e46eaa53c819a
+  metadata.gz: 29c1dd8f8d79b25e9bda233a6592fd12fdc5a7456482ef819c145ef2c13aff3f9b3220d3d9cb56c397800b558e5e4361e43b3e6e07dd5ebb068a2a0c1a3770c6
+  data.tar.gz: 840e5a7548b7d299c61406573f16e44b51cedb4e79157a2ed85731b16118a759db12466cdaa9a35f315a6dc9fc5343652d79a9f55429bbcd44310dcc32925c42

data/README.md

@@ -55,7 +55,7 @@ We try not to reinvent the wheel, so Active Admin is built with other open sourc
 * [Inherited Resources]
 * [Kaminari]
 * [Ransack]
-* [TailwindCSS](https://tailwindcss.com)
+* [Tailwind CSS](https://tailwindcss.com)
 
 ## Security contact information
 

data/UPGRADING.md

@@ -2,20 +2,19 @@
 
 ## From v3 to v4 (beta)
 
-ActiveAdmin v4 uses TailwindCSS. It has **mobile web, dark mode and RTL support** with a default theme that can be customized through partials and CSS. This release assumes `cssbundling-rails` and `importmap-rails` is installed and configured in the host app. Partials can be modified to include a different asset library, e.g. shakapacker.
-
+ActiveAdmin v4 uses Tailwind CSS v3 (with an upgrade to v4 coming soon). It has **mobile web, dark mode and RTL support** with a default theme that can be customized through partials and CSS. This release assumes `cssbundling-rails` and `importmap-rails` is installed and configured in the host app. Partials can be modified to include a different asset library, e.g. shakapacker.
 **IMPORTANT**: there is **no sortable functionality for has-many forms** in this release so if needed, **do not upgrade**. We are [open to community proposals](https://github.com/activeadmin/activeadmin/discussions/new?category=ideas). The add/remove functionality for has-many forms remains supported.
 
 These instructions assume the `cssbundling-rails` and `importmap-rails` gems are already installed and you have run their install commands in your app. If you haven't done so, please do before continuing.
 
-Update your `Gemfile` with `gem "activeadmin", "4.0.0.beta16"` and then run `gem install activeadmin --pre`.
+Update your `Gemfile` with `gem "activeadmin", "4.0.0.beta17"` and then run `gem install activeadmin --pre`.
 
 Now, run `rails generate active_admin:assets` to replace the old assets with the new files.
 
 Then add the npm package and update the `build:css` script.
 
 ```
-yarn add @activeadmin/activeadmin@4.0.0-beta16
+yarn add @activeadmin/activeadmin@4.0.0-beta17
 npm pkg set scripts.build:css="tailwindcss -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify -c tailwind-active_admin.config.js"
 ```
 
@@ -47,6 +46,13 @@ Note that the templates can and will change across releases. There are additiona
 
 With the setup complete, please review the Breaking Changes section and resolve any that may or may not impact your integration.
 
+**Important template change in 4.0.0.beta16:**
+
+- The `_site_header.html.erb` partial has changed its main container class from `sticky` to `fixed`.
+- The main layout for `active_admin.html.erb` now includes the `pt-16` utility class.
+
+See [PR #8727](https://github.com/activeadmin/activeadmin/pull/8727) for more details.
+
 ### Breaking Changes
 - jQuery and jQuery UI have been removed.
 - The `columns` component has been removed. Use `div`'s with Tailwind classes for modern, responsive layout.
@@ -152,6 +158,7 @@ With the setup complete, please review the Breaking Changes section and resolve
   end
   ```
   </details>
+- Using `row 'name'` in an `attributes_table` block, now prints the header text as is. For a localized lookup of the header with titlized fallback, use `row :name` instead. This matches the `column 'name'` behavior of index tables (`TableFor`).
 
 #### Resource named methods
 

data/app/controllers/active_admin/resource_controller/streaming.rb

@@ -31,7 +31,7 @@ module ActiveAdmin
       end
 
       def csv_filename
-        "#{resource_collection_name.to_s.tr('_', '-')}-#{Time.zone.now.to_date.to_s}.csv"
+        "#{resource_collection_name.to_s.tr('_', '-')}-#{Time.zone.now.to_date}.csv"
       end
 
       def stream_csv

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

@@ -3,17 +3,17 @@
     <% flash_messages.each do |type, message| %>
       <% if type == "error" %>
         <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-red-50 text-red-800 dark:bg-red-800 dark:text-red-300">
-          <svg class="w-5 h-5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/></svg>
+          <svg class="w-5 h-5 shrink-0 text-red-400 dark:text-red-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/></svg>
           <%= message %>
         </div>
       <% elsif type == "alert" %>
         <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-yellow-50 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-300">
-          <svg class="w-5 h-5 shrink-0 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/></svg>
+          <svg class="w-5 h-5 shrink-0 rtl:-scale-x-100 text-yellow-400 dark:text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/></svg>
           <%= message %>
         </div>
       <% elsif type == "notice" %>
-        <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-green-50 text-green-800 dark:bg-green-800 dark:text-green-400">
-          <svg class="w-5 h-5 shrink-0 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/></svg>
+        <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-green-50 text-green-800 dark:bg-green-800 dark:text-green-300">
+          <svg class="w-5 h-5 shrink-0 rtl:-scale-x-100 text-green-400 dark:text-green-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/></svg>
           <%= message %>
         </div>
       <% end %>

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

@@ -18,11 +18,11 @@
     <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 bg-white rounded shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="user-menu-button">
+  <div id="user-menu" class="z-50 hidden min-w-max rounded shadow-lg outline outline-1 outline-black/5 dark:-outline-offset-1 dark:outline-white/10 focus:outline-none 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-white dark:hover:bg-gray-600 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-white dark:hover:bg-gray-600 dark:hover:text-white", data: { method: :delete } %></li>
+        <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>

data/app/views/active_admin/devise/confirmations/new.html.erb

@@ -1,4 +1,4 @@
-<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800/50 dark:border-gray-800">
   <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
     <%= active_admin_application.site_title(self) %> <%= set_page_title t('active_admin.devise.resend_confirmation_instructions.title') %>
   </h2>

data/app/views/active_admin/devise/passwords/edit.html.erb

@@ -1,4 +1,4 @@
-<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800/50 dark:border-gray-800">
   <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
     <%= active_admin_application.site_title(self) %> <%= set_page_title t('active_admin.devise.change_password.title') %>
   </h2>

data/app/views/active_admin/devise/passwords/new.html.erb

@@ -1,4 +1,4 @@
-<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800/50 dark:border-gray-800">
   <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
     <%= active_admin_application.site_title(self) %> <%= set_page_title t('active_admin.devise.reset_password.title') %>
   </h2>

data/app/views/active_admin/devise/registrations/new.html.erb

@@ -1,4 +1,4 @@
-<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800/50 dark:border-gray-800">
   <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
     <%= active_admin_application.site_title(self) %> <%= set_page_title t('active_admin.devise.sign_up.title') %>
   </h2>

data/app/views/active_admin/devise/sessions/new.html.erb

@@ -1,4 +1,4 @@
-<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800/50 dark:border-gray-800">
   <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
     <%= site_title %> <%= set_page_title t('active_admin.devise.login.title') %>
   </h2>

data/app/views/active_admin/devise/unlocks/new.html.erb

@@ -1,4 +1,4 @@
-<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800/50 dark:border-gray-800">
   <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
     <%= site_title %> <%= set_page_title t('active_admin.devise.unlock.title') %>
   </h2>

data/app/views/active_admin/shared/_resource_comments.html.erb

@@ -25,7 +25,7 @@
           <span class="font-semibold">
             <%= comment.author ? auto_link(comment.author) : I18n.t("active_admin.comments.author_missing") %>
           </span>
-          <span class="text-xs text-gray-400">
+          <span class="text-xs text-gray-500 dark:text-gray-400">
             <%= pretty_format comment.created_at %>
           </span>
         </div>

data/config/locales/fr.yml

@@ -59,6 +59,8 @@ fr:
         title: Connexion
       password:
         title: Mot de passe
+      password_confirmation:
+        title: Confirmer le mot de passe
       resend_confirmation_instructions:
         submit: Renvoyer les instructions de confirmation
         title: Renvoyer les instructions de confirmation
@@ -92,6 +94,7 @@ fr:
     index_list:
       table: Tableau
     logout: Déconnexion
+    move: Déplacer
     new_model: Créer %{model}
     next: Suivant
     pagination:
@@ -106,8 +109,11 @@ fr:
       one_page: Affichage de <b>tous les %{n}</b>
       per_page: 'Par page '
       previous: Précédent
+      truncate: "&hellip;"
     powered_by: Propulsé par %{active_admin} %{version}
     previous: Précédent
+    scopes:
+      all: Tout
     search_status:
       no_current_filters: Aucun filtre appliqué
       title: Recherche active
@@ -119,6 +125,10 @@ fr:
       'no': Non
       unset: Inconnu
       'yes': Oui
+    toggle_dark_mode: Bascule de mode sombre
+    toggle_main_navigation_menu: Bascule de menu principal
+    toggle_section: Bascule de section
+    toggle_user_menu: Bascule de menu utilisateur
     view: Voir
   activerecord:
     attributes:

data/lib/active_admin/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module ActiveAdmin
-  VERSION = "4.0.0.beta16"
+  VERSION = "4.0.0.beta17"
 end

data/lib/active_admin/views/components/attributes_table.rb

@@ -61,10 +61,15 @@ module ActiveAdmin
       end
 
       def header_content_for(attr)
-        if @resource_class.respond_to?(:human_attribute_name)
-          @resource_class.human_attribute_name(attr, default: attr.to_s.titleize)
+        if attr.is_a?(Symbol)
+          default = attr.to_s.titleize
+          if @resource_class.respond_to?(:human_attribute_name)
+            @resource_class.human_attribute_name(attr, default: default)
+          else
+            default
+          end
         else
-          attr.to_s.titleize
+          attr.to_s
         end
       end
 

data/plugin.js

@@ -47,15 +47,8 @@ export default plugin(
         'textarea',
         'select',
       ]]: {
-        appearance: 'none',
-        'background-color': '#fff',
-        'border-color': theme('colors.gray.500', colors.gray[500]),
-        'border-width': borderWidth['DEFAULT'],
-        'border-radius': borderRadius.none,
-        'padding-top': spacing[2],
-        'padding-right': spacing[3],
-        'padding-bottom': spacing[2],
-        'padding-left': spacing[3],
+        'appearance': 'none',
+        'padding': `${spacing[2]} ${spacing[3]}`,
         '--tw-shadow': '0 0 #0000',
         '&:focus': {
           outline: '2px solid transparent',
@@ -73,10 +66,6 @@ export default plugin(
           'border-color': theme('colors.blue.600', colors.blue[600]),
         },
       },
-      [['input::placeholder', 'textarea::placeholder']]: {
-        color: theme('colors.gray.500', colors.gray[500]),
-        opacity: '1',
-      },
       ['::-webkit-datetime-edit']: {
         display: 'inline-flex',
       },
@@ -123,27 +112,15 @@ export default plugin(
       },
       [[`[type='checkbox']`, `[type='radio']`]]: {
         appearance: 'none',
-        padding: '0',
-        'print-color-adjust': 'exact',
-        display: 'inline-block',
-        'vertical-align': 'middle',
         'background-origin': 'border-box',
-        'user-select': 'none',
-        'flex-shrink': '0',
-        height: spacing[4],
-        width: spacing[4],
         color: theme('colors.blue.600', colors.blue[600]),
-        'background-color': '#fff',
-        'border-color': theme('colors.gray.500', colors.gray[500]),
-        'border-width': borderWidth['DEFAULT'],
+        display: 'inline-block',
+        'flex-shrink': '0',
+        'print-color-adjust': 'exact',
+        'user-select': 'none',
+        'vertical-align': 'middle',
         '--tw-shadow': '0 0 #0000',
       },
-      [`[type='checkbox']`]: {
-        'border-radius': borderRadius['none'],
-      },
-      [`[type='radio']`]: {
-        'border-radius': '100%',
-      },
       [[`[type='checkbox']:focus`, `[type='radio']:focus`]]: {
         outline: '2px solid transparent',
         'outline-offset': '2px',
@@ -157,171 +134,68 @@ export default plugin(
       },
       [[
         `[type='checkbox']:checked`,
+        `[type='checkbox']:indeterminate`,
         `[type='radio']:checked`,
-        `.dark [type='checkbox']:checked`,
-        `.dark [type='checkbox']:indeterminate`,
-        `.dark [type='radio']:checked`,
       ]]: {
-        'border-color': `transparent`,
         'background-color': `currentColor`,
-        'background-size': `0.65rem 0.65rem`,
         'background-position': `center`,
         'background-repeat': `no-repeat`,
+        'background-size': `100% 100%`,
+        'border-color': `transparent`,
       },
       [`[type='checkbox']:checked`]: {
         'background-image': `url("${svgToTinyDataUri(
-          `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
-            <path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M1 5.917 5.724 10.5 15 1.5"/>
+          `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 8 L7 11 L12 5" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
           </svg>`
         )}")`,
-        'background-repeat': `no-repeat`,
-        'background-size': `0.65rem 0.65rem`,
         'print-color-adjust': `exact`,
       },
       [`[type='radio']:checked`]: {
         'background-image': `url("${svgToTinyDataUri(
           `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
         )}")`,
-        'background-size': `1rem 1rem`,
-      },
-      [`.dark [type='radio']:checked`]: {
-        'background-image': `url("${svgToTinyDataUri(
-          `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
-        )}")`,
-        'background-size': `1rem 1rem`,
       },
       [`[type='checkbox']:indeterminate`]: {
         'background-image': `url("${svgToTinyDataUri(
-          `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M2 8h12"/></svg>`
+          `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 8 L12 8" stroke="white" stroke-linecap="round" stroke-width="2.5" />
+          </svg>`
         )}")`,
-        'background-color': `currentColor`,
-        'border-color': `transparent`,
-        'background-position': `center`,
-        'background-repeat': `no-repeat`,
-        'background-size': `.65rem .65rem`,
         'print-color-adjust': `exact`,
       },
-      [[
-        `[type='checkbox']:indeterminate:hover`,
-        `[type='checkbox']:indeterminate:focus`,
-      ]]: {
-        'border-color': 'transparent',
-        'background-color': 'currentColor',
-      },
       [`[type='file']`]: {
-        background: 'unset',
-        'border-color': 'inherit',
-        'border-width': '0',
-        'border-radius': '0',
-        padding: '0',
-        'font-size': 'unset',
-        'line-height': 'inherit',
-      },
-      [`[type='file']:focus`]: {
-        outline: `1px auto inherit`,
-      },
-      [[`input[type=file]::file-selector-button`]]: {
-        color: 'white',
-        background: theme('colors.gray.800', colors.gray[800]),
-        border: 0,
-        'font-weight': theme('fontWeight.medium'),
-        'font-size': theme('fontSize.sm'),
         cursor: 'pointer',
-        'padding-top': spacing[2.5],
-        'padding-bottom': spacing[2.5],
-        'padding-inline-start': spacing[8],
-        'padding-inline-end': spacing[4],
-        'margin-inline-start': '-1rem',
-        'margin-inline-end': '1rem',
-        '&:hover': {
-          background: theme('colors.gray.700', colors.gray[700]),
-        },
       },
-      [[`.dark input[type=file]::file-selector-button`]]: {
-        color: 'white',
-        background: theme('colors.gray.600', colors.gray[600]),
+      [`[type=file]::file-selector-button`]: {
+        'background-color': theme('colors.gray.100', colors.gray[100]),
+        'border': `${borderWidth['DEFAULT']} solid ${theme('colors.gray.200', colors.gray[200])}`,
+        'border-radius': borderRadius['DEFAULT'],
+        cursor: 'pointer',
+        'padding': `${spacing[2]} ${spacing[3]}`,
         '&:hover': {
-          background: theme('colors.gray.500', colors.gray[500]),
+          'background-color': theme('colors.gray.200', colors.gray[200]),
         },
       },
-      [['.tooltip-arrow', '.tooltip-arrow:before']]: {
-        position: 'absolute',
-        width: '8px',
-        height: '8px',
-        background: 'inherit',
-      },
-      ['.tooltip-arrow']: {
-        visibility: 'hidden',
-      },
-      ['.tooltip-arrow:before']: {
-        content: '""',
-        visibility: 'visible',
-        transform: 'rotate(45deg)',
-      },
-      [`.tooltip[data-popper-placement^='top'] > .tooltip-arrow`]: {
-        bottom: '-4px',
-      },
-      [`.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow`]: {
-        top: '-4px',
-      },
-      [`.tooltip[data-popper-placement^='left'] > .tooltip-arrow`]: {
-        right: '-4px',
-      },
-      [`.tooltip[data-popper-placement^='right'] > .tooltip-arrow`]: {
-        left: '-4px',
-      },
-      ['.tooltip.invisible > .tooltip-arrow:before']: {
-        visibility: 'hidden',
-      },
-      [['[data-popper-arrow]', '[data-popper-arrow]:before']]: {
-        position: 'absolute',
-        width: '8px',
-        height: '8px',
-        background: 'inherit',
-      },
-      ['[data-popper-arrow]']: {
-        visibility: 'hidden',
-      },
-      ['[data-popper-arrow]:before']: {
-        content: '""',
-        visibility: 'visible',
-        transform: 'rotate(45deg)',
-      },
-      [`[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]`]:
-      {
-        bottom: '-5px',
-      },
-      [`[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]`]:
-      {
-        top: '-5px',
-      },
-      [`[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]`]:
-      {
-        right: '-5px',
-      },
-      [`[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]`]:
-      {
-        left: '-5px',
-      },
-      ['[role="tooltip"].invisible > [data-popper-arrow]:before']: {
-        visibility: 'hidden',
+      [`.dark [type=file]::file-selector-button`]: {
+        '@apply bg-white/5 border-white/5 text-white hover:bg-white/10': {}
       },
       '[type=checkbox]': {
-        '@apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600': {}
+        '@apply w-4 h-4 bg-gray-100 border border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/5 dark:border-white/10': {}
       },
       '[type=radio]': {
-        '@apply w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600': {}
+        '@apply w-4 h-4 bg-gray-100 border border-gray-300 rounded-full focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-white/5 dark:border-white/10': {}
       },
       [['[type=datetime-local]', '[type=month]', '[type=week]', '[type=search]', '[type=date]', '[type=email]', '[type=number]', '[type=password]', '[type=tel]', '[type=text]', '[type=time]', '[type=url]', 'select', 'textarea']]: {
-        '@apply bg-gray-50 border border-gray-300 text-gray-900 rounded-md focus:ring-blue-500 focus:border-blue-500 w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500': {}
+        '@apply bg-gray-50 border border-gray-300 text-gray-900 placeholder:text-gray-400 rounded-md focus:ring-blue-500 focus:border-blue-500 w-full dark:bg-white/5 dark:border-white/10 dark:text-white dark:placeholder:text-gray-500 dark:focus:ring-blue-500 dark:focus:border-blue-500': {}
       },
       'a': {
-        '@apply text-blue-600 underline underline-offset-[.2rem]': {}
+        '@apply text-blue-600 dark:text-blue-500 underline underline-offset-[.2rem]': {}
       },
     });
     addComponents({
       '.action-item-button': {
-        '@apply py-2 px-3 text-sm font-medium no-underline text-gray-900 focus:outline-none bg-white rounded-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700': {}
+        '@apply py-2 px-3 text-sm font-medium no-underline text-gray-900 focus:outline-none bg-white rounded-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700': {}
       },
       '.index-data-table-toolbar': {
         '@apply flex flex-col lg:flex-row gap-4 mb-4': {}
@@ -343,7 +217,7 @@ export default plugin(
         '@apply bg-gray-100 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-800': {}
       },
       '.scopes-count': {
-        '@apply inline-flex items-center justify-center rounded-full bg-indigo-200/80 text-indigo-800 dark:bg-indigo-800 dark:text-indigo-200 px-1.5 py-1 text-xs font-normal ms-2 leading-none': {}
+        '@apply inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-800/60 dark:text-indigo-400 px-1.5 py-1 text-xs font-normal ms-2 leading-none': {}
       },
       '.paginated-collection': {
         '@apply border border-gray-200 dark:border-gray-800 rounded-md shadow-sm overflow-hidden': {}
@@ -427,22 +301,22 @@ export default plugin(
         '@apply relative': {}
       },
       '.batch-actions-dropdown-toggle': {
-        '@apply transition-opacity rounded-md inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white disabled:text-gray-400 disabled:border-gray-200/70 dark:disabled:bg-gray-900 dark:disabled:text-gray-700 dark:disabled:border-gray-800 disabled:pointer-events-none': {}
+        '@apply transition-opacity rounded-md inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white disabled:text-gray-400 disabled:border-gray-200/70 dark:disabled:bg-gray-900 dark:disabled:text-gray-700 dark:disabled:border-gray-800 disabled:pointer-events-none': {}
       },
       '.batch-actions-dropdown-arrow': {
         '@apply w-2.5 h-2.5': {}
       },
       '.batch-actions-dropdown-menu': {
-        '@apply z-10 hidden min-w-[7rem] bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 py-1 text-sm text-gray-700 dark:text-gray-200': {}
+        '@apply z-10 hidden min-w-[7rem] bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 py-1 text-sm text-gray-700 dark:text-gray-200': {}
       },
       '.batch-actions-dropdown-menu :where(li > a)': {
-        '@apply block px-2.5 py-2 no-underline text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white': {}
+        '@apply block px-2.5 py-2 no-underline text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white': {}
       },
       '.panel': {
         '@apply mb-6 border border-gray-200 rounded-md shadow-sm dark:border-gray-800': {}
       },
       '.panel-title': {
-        '@apply font-bold bg-gray-100 dark:bg-gray-900 rounded-t-md p-3': {}
+        '@apply font-bold bg-gray-100 dark:bg-gray-950/50 rounded-t-md p-3': {}
       },
       '.panel-body': {
         '@apply py-5 px-3': {}
@@ -454,22 +328,22 @@ export default plugin(
         '@apply w-full text-sm text-gray-800 dark:text-gray-300': {}
       },
       '.attributes-table :where(tbody > tr)': {
-        '@apply border-b dark:border-gray-800 last:border-b-0': {}
+        '@apply border-b dark:border-gray-800 last:border-b-0 align-baseline': {}
       },
       '.attributes-table :where(tbody > tr > th)': {
-        '@apply w-32 sm:w-40 text-start text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-800/60 dark:text-gray-300': {}
+        '@apply w-32 sm:w-40 text-start text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-950/50 dark:text-gray-300': {}
       },
       '.attributes-table :where(tbody > tr > th, tbody > tr > td)': {
         '@apply p-3': {}
       },
       '.attributes-table-empty-value': {
-        '@apply text-gray-400/50 dark:text-gray-700/60 text-xs uppercase font-semibold': {}
+        '@apply text-gray-400/50 dark:text-gray-600/50 text-xs uppercase font-semibold': {}
       },
       '.status-tag': {
-        '@apply bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400 inline-flex items-center rounded-full text-sm font-medium px-2.5 py-0.5 whitespace-nowrap': {}
+        '@apply bg-gray-200 text-gray-600 dark:bg-gray-400/20 dark:text-gray-400 inline-flex items-center rounded-full text-sm font-medium px-2.5 py-0.5 whitespace-nowrap': {}
       },
       '.status-tag:where([data-status=yes])': {
-        '@apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': {}
+        '@apply bg-green-100 text-green-700 dark:bg-green-400/20 dark:text-green-400': {}
       },
       // Forms
       '.formtastic': {
@@ -500,19 +374,19 @@ export default plugin(
         '@apply sr-only': {}
       },
       '.formtastic :where(.inline-hints)': {
-        '@apply text-gray-500 mt-2': {}
+        '@apply text-gray-500 dark:text-gray-400 mt-2': {}
       },
       '.formtastic :where(.errors)': {
-        '@apply p-4 mb-6 rounded-md space-y-2 bg-red-50 text-red-800 dark:bg-red-800 dark:text-red-300': {}
+        '@apply p-4 mb-6 rounded-md space-y-2 bg-red-50 text-red-800 dark:bg-red-500/15 dark:text-red-200': {}
       },
       '.formtastic :where(.errors > li)': {
         '@apply list-disc ms-4': {}
       },
       '.formtastic :where(.inline-errors)': {
-        '@apply font-bold mt-2 text-red-600 dark:text-red-300': {}
+        '@apply font-bold mt-2 text-red-600 dark:text-red-400': {}
       },
-      '.formtastic :where(.error [type=email], .error [type=number], .error [type=password], .error [type=tel], .error [type=text], .error [type=url], .error textarea)': {
-        '@apply border-red-500': {}
+      '.formtastic :where(.error [type=email], .error [type=number], .error [type=password], .error [type=tel], .error [type=text], .error [type=url], .error select, .error textarea)': {
+        '@apply border-red-500/50': {}
       },
       '.formtastic :where(.buttons, .actions)': {
         '@apply mt-3': {}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin
 version: !ruby/object:Gem::Version
-  version: 4.0.0.beta16
+  version: 4.0.0.beta17
 platform: ruby
 authors:
 - Charles Maresh
@@ -403,7 +403,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.7.0
+rubygems_version: 3.7.2
 specification_version: 4
 summary: Active Admin is a Ruby on Rails plugin for generating administration style
   interfaces. It abstracts common business application patterns to make it simple