active_admin_prism 0.1.0

data/scss-src/_base.scss

@@ -0,0 +1,281 @@
+// Global resets/typography layered on top of ActiveAdmin's own base.scss.
+// Kept intentionally small — we're reskinning existing markup, not replacing
+// ActiveAdmin's structural CSS.
+
+body {
+  background: $prism-bg-page;
+  color: $prism-text-body;
+  font-family: $prism-font-family;
+}
+
+#active_admin_content {
+  h2,
+  h3 {
+    color: $prism-text-heading;
+    font-weight: 600;
+  }
+}
+
+a {
+  color: $prism-color-primary;
+
+  &:hover {
+    color: $prism-color-primary-dark;
+  }
+}
+
+#title_bar {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  text-shadow: none;
+  padding: 10px 10px 8px;
+
+  h2#page_title {
+    color: $prism-text-heading;
+    font-weight: 700;
+    font-size: 1.6em;
+    letter-spacing: -0.01em;
+  }
+}
+
+#footer {
+  color: $prism-text-muted;
+  font-size: 0.85em;
+  padding: 10px;
+  border-top: 1px solid $prism-border-color;
+
+  a {
+    color: $prism-text-muted;
+    text-decoration: underline;
+
+    &:hover {
+      color: $prism-color-primary;
+    }
+  }
+}
+
+// Flash messages — ActiveAdmin renders these with a heavy full-width
+// gradient bar (padding: 13px 30px 11px, font-size: 1.1em); this reskins
+// them into a compact, inset, color-coded banner. ".flashes" itself gets
+// its grid placement from _sidebar.scss (must be explicit — see comment
+// there on why leaving it to auto-placement broke the layout).
+.flashes {
+  padding: 10px 10px 0;
+}
+
+// "body.active_admin .flash" (not a flat ".flash") on purpose: ActiveAdmin
+// itself styles flashes via "body.logged_in .flash" AND
+// "body.logged_out .flash" (active_admin/components/_flash_messages.scss)
+// — both specificity (0,2,1), strictly higher than a flat ".flash" rule's
+// (0,1,0), so a flat rule here loses on the login page every time and
+// loses on the main app too whenever a property collides (background,
+// color, padding, border are exactly what both of AA's rules set). Both
+// "logged_in" and "logged_out" bodies always carry an "active_admin"
+// class too (hardcoded in layouts/active_admin_logged_out.html.erb, and
+// added by this gem's own body_classes override for the main app layout —
+// see lib/active_admin/views/flash_messages.rb), so "body.active_admin
+// .flash" ties AA's specificity exactly (0,2,1) instead of losing to it —
+// and since prism.css always loads after active_admin.css (see
+// INTEGRATION.md's "Verifying the install"), that tie resolves in our
+// favor via load order on every page, logged in or out.
+body.active_admin .flash {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background: $prism-bg-page;
+  border: 1px solid $prism-border-color;
+  border-left: 3px solid $prism-text-muted;
+  border-radius: $prism-radius-sm;
+  box-shadow: none;
+  text-shadow: none;
+  color: $prism-text-heading;
+  font-size: 0.9em;
+  font-weight: 600;
+  line-height: 1.4;
+  padding: 10px 16px;
+  margin-bottom: 0;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  // 320ms/cubic-bezier here matches Configuration#flash_transition_ms's
+  // default and is overridden inline by prism.js (transition-duration) if a
+  // host configures a different value — see that file's flash-dismiss IIFE.
+  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  // Toggled by prism.js — auto-dismissed after flash_auto_dismiss_seconds,
+  // or on clicking .prism-flash-dismiss — before being removed from the DOM
+  // outright once the transition finishes.
+  &.prism-flash-hide {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+
+  &.flash_notice {
+    background: $prism-color-success-light;
+    border-left-color: $prism-color-success;
+    color: darken($prism-color-success, 20%);
+  }
+
+  &.flash_error,
+  &.flash_alert {
+    background: $prism-color-danger-light;
+    border-left-color: $prism-color-danger;
+    color: darken($prism-color-danger, 10%);
+  }
+}
+
+.prism-flash-message {
+  flex: 1 1 auto;
+}
+
+.prism-flash-dismiss {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin: -2px -4px -2px 0;
+  padding: 0;
+  border: none;
+  border-radius: $prism-radius-sm;
+  background: transparent !important;
+  color: inherit !important;
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity $prism-transition-fast, background $prism-transition-fast;
+
+  &:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.06) !important;
+  }
+}
+
+.prism-flash-dismiss-icon {
+  display: block;
+  margin: 0;
+}
+
+// The delete/batch-action confirmation dialog ActiveAdmin renders via
+// jQuery UI ($.fn.dialog, see active_admin/base.js) — completely separate
+// markup from anything else on the page, so it needs its own reskin.
+.ui-widget-overlay {
+  background: rgba(15, 18, 26, 0.45);
+}
+
+.ui-dialog {
+  background: $prism-bg-card;
+  border: 1px solid $prism-border-color;
+  border-radius: $prism-radius;
+  box-shadow: $prism-shadow-popover;
+  padding: 0;
+  overflow: hidden;
+  // jQuery UI calls `.focus()` on this element when it opens
+  // (_focusTabbable override in active_admin/base.js), which otherwise
+  // triggers the browser's default focus ring around the whole dialog.
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  .ui-dialog-titlebar {
+    background: $prism-bg-card;
+    border: none;
+    border-bottom: 1px solid $prism-border-color;
+    box-shadow: none;
+    text-shadow: none;
+    color: $prism-text-heading;
+    font-weight: 700;
+    padding: 16px 20px;
+
+    span {
+      color: inherit;
+    }
+  }
+
+  // A plain confirm (no batch-action inputs) renders an *empty* <ul> here.
+  // Padding lives on the <li> (not on `form`/`ul`), so that empty case
+  // collapses to zero height instead of leaving an awkward blank gap
+  // between the title and the button pane.
+  form {
+    padding: 0;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+
+    li {
+      padding: 10px 20px;
+      margin: 0;
+    }
+  }
+
+  label {
+    color: $prism-text-body;
+    font-weight: 600;
+  }
+
+  .ui-dialog-buttonpane {
+    background: $prism-bg-page;
+    padding: 12px 20px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+
+    .ui-dialog-buttonset {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  // AA's own modal_dialog.scss targets these same buttons with
+  // "button { @include dark-button } button:last-child { @include
+  // light-button }" — :last-child has one more selector-class of
+  // specificity than a bare "button" rule, so it beats a flat override
+  // regardless of load order. Matching :first-child/:last-child here
+  // (rather than a single flat rule) is what makes OK and Cancel actually
+  // both pick up Prism's shape instead of Cancel keeping AA's pill-shaped
+  // light-button (border-radius: 200px).
+  .ui-dialog-buttonpane button,
+  .ui-dialog-buttonset button {
+    margin: 0;
+
+    &:first-child {
+      @include prism-button-primary;
+    }
+
+    &:last-child {
+      @include prism-button-secondary;
+    }
+  }
+}
+
+.breadcrumb {
+  font-size: 0.85em;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: $prism-text-muted;
+  margin-bottom: 6px;
+
+  a,
+  a:link,
+  a:visited,
+  a:active {
+    color: $prism-text-muted;
+    text-decoration: none;
+
+    &:hover {
+      color: $prism-color-primary;
+      text-decoration: none;
+    }
+  }
+
+  .breadcrumb_sep {
+    color: $prism-border-color-strong;
+  }
+}

data/scss-src/_buttons.scss

@@ -0,0 +1,134 @@
+// Buttons: ActiveAdmin ships two visual weights (dark-button / light-button)
+// applied via deeply-nested, sometimes ID-scoped selectors
+// (e.g. "#title_bar .action_items span.action_item > a"). To reliably win
+// the cascade we mirror those exact selector paths here rather than relying
+// on a flat, lower-specificity override.
+//
+// prism-button-primary / prism-button-secondary are defined in
+// _variables.scss (loaded first) since _base.scss's flash/dialog styling
+// also needs them.
+
+// Generic buttons (form submits, plain `.button` links) — primary style.
+a.button,
+a:link.button,
+a:visited.button,
+input[type="submit"],
+input[type="button"],
+button,
+form input[type="submit"],
+form input[type="button"],
+form button {
+  @include prism-button-primary;
+}
+
+a.button.danger,
+input[type="submit"].danger,
+form input[type="submit"].danger {
+  background: $prism-color-danger;
+  border-color: $prism-color-danger;
+
+  &:hover {
+    background: darken($prism-color-danger, 8%);
+    border-color: darken($prism-color-danger, 8%);
+  }
+}
+
+// The page-level "New Resource" action button(s) in the title bar — same
+// selector path ActiveAdmin uses (it's ID-scoped, so a flatter selector
+// would lose the cascade regardless of load order).
+#title_bar .action_items span.action_item > a,
+#title_bar .action_items span.action_item > .dropdown_menu > a {
+  @include prism-button-primary;
+  padding: 9px 16px;
+  margin: 0;
+}
+
+// Secondary / lower-emphasis buttons: batch actions trigger, pagination,
+// "clear filters", "cancel" form link.
+.dropdown_menu .dropdown_menu_button,
+form.filter_form a.clear_filters_btn,
+fieldset.buttons li.cancel a,
+fieldset.actions li.cancel a,
+.pagination a,
+.pagination span.page.current,
+.pagination_per_page select {
+  @include prism-button-secondary;
+}
+
+.dropdown_menu .dropdown_menu_button {
+  padding-right: 26px !important;
+
+  &::before,
+  &::after {
+    border-color: $prism-text-muted transparent;
+  }
+}
+
+// The wrapper AA renders behind an opened dropdown (Batch Actions) list
+// defaults to a dark-gray gradient card ($primary-color); the list items
+// inside it default to AA's blue-gray "highlight-gradient" on :hover/:active.
+// Neither is touched by the button mixins above, so both need an explicit
+// reset here — this is almost certainly the "black/grey on hover" being
+// reported, not the buttons themselves.
+.dropdown_menu_list_wrapper {
+  border-radius: $prism-radius-sm;
+  box-shadow: $prism-shadow-popover;
+  border: 1px solid $prism-border-color;
+  background: $prism-bg-card;
+  padding: 4px;
+
+  .dropdown_menu_list {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+
+    li {
+      border-bottom: none;
+
+      a {
+        border-radius: $prism-radius-sm;
+        color: $prism-text-body;
+        font-weight: 600;
+        text-align: left;
+        text-shadow: none;
+        padding: 8px 12px;
+
+        &:hover,
+        &:active {
+          background: $prism-color-primary-light;
+          color: $prism-color-primary-dark;
+          text-shadow: none;
+        }
+      }
+
+      &:first-child a,
+      &:last-child a {
+        border-radius: $prism-radius-sm;
+      }
+    }
+  }
+}
+
+.pagination {
+  a,
+  span.page.current {
+    border-radius: $prism-radius-sm;
+    margin-right: 4px;
+    padding: 5px 11px;
+  }
+
+  span.page.current {
+    background: $prism-color-primary-light;
+    border-color: $prism-color-primary-light;
+    color: $prism-color-primary-dark;
+  }
+}
+
+.pagination_information {
+  color: $prism-text-muted;
+
+  b {
+    color: $prism-text-heading;
+  }
+}

data/scss-src/_forms.scss

@@ -0,0 +1,272 @@
+form {
+  fieldset {
+    &.inputs {
+      background: $prism-bg-card;
+      border: 1px solid $prism-border-color;
+      border-radius: $prism-radius;
+      padding: 20px;
+    }
+
+    legend span {
+      color: $prism-text-heading;
+      font-weight: 700;
+      font-size: 1.05em;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+
+    ol > li label {
+      color: $prism-text-body;
+      font-weight: 600;
+      font-size: 0.9em;
+    }
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="number"],
+  input[type="url"],
+  input[type="tel"],
+  input[type="date"],
+  input[type="time"],
+  input[type="search"],
+  select,
+  textarea {
+    border: 1px solid $prism-border-color-strong;
+    border-radius: $prism-radius-sm;
+    color: $prism-text-heading;
+    padding: 9px 12px;
+    box-shadow: none;
+    transition: border-color $prism-transition-fast, box-shadow $prism-transition-fast;
+
+    &:focus {
+      border-color: $prism-color-primary;
+      box-shadow: 0 0 0 3px rgba($prism-color-primary, 0.15);
+    }
+  }
+
+  fieldset > ol > li {
+    &.error {
+      input[type="text"],
+      input[type="password"],
+      input[type="email"],
+      input[type="number"],
+      input[type="url"],
+      input[type="tel"],
+      textarea,
+      select {
+        border-color: $prism-color-danger;
+
+        &:focus {
+          box-shadow: 0 0 0 3px rgba($prism-color-danger, 0.15);
+        }
+      }
+    }
+
+    p.inline-errors {
+      color: $prism-color-danger;
+      font-weight: 600;
+    }
+  }
+
+  ul.errors {
+    background: $prism-color-danger-light;
+    color: $prism-color-danger;
+    border-radius: $prism-radius-sm;
+  }
+
+  // Checkboxes & radios: hide the native control visually but keep it
+  // focusable/clickable (opacity, not display:none) and draw a custom box
+  // with ::before, matching the reference "Checkboxes / Radios" panel.
+  input[type="checkbox"],
+  input[type="radio"] {
+    appearance: none;
+    position: relative;
+    width: 18px;
+    height: 18px;
+    margin: 0 8px 0 0;
+    border: 1px solid $prism-border-color-strong;
+    background: $prism-bg-card;
+    vertical-align: middle;
+    cursor: pointer;
+    flex: 0 0 auto;
+
+    &:checked {
+      background: $prism-color-primary;
+      border-color: $prism-color-primary;
+    }
+
+    &:checked::after {
+      content: "";
+      position: absolute;
+      left: 5px;
+      top: 1px;
+      width: 5px;
+      height: 10px;
+      border: solid $prism-text-inverse;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba($prism-color-primary, 0.2);
+    }
+  }
+
+  input[type="checkbox"] {
+    border-radius: 5px;
+  }
+
+  input[type="radio"] {
+    border-radius: 50%;
+
+    &:checked::after {
+      left: 5px;
+      top: 5px;
+      width: 6px;
+      height: 6px;
+      border: none;
+      border-radius: 50%;
+      background: $prism-text-inverse;
+      transform: none;
+    }
+  }
+
+  fieldset > ol > li.boolean label {
+    display: flex;
+    align-items: center;
+  }
+
+  // Toggle switch (opt-in: f.input :x, as: :prism_toggle)
+  label.prism-toggle {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    input.prism-toggle-input {
+      appearance: none;
+      position: relative;
+      width: 0;
+      height: 0;
+      margin: 0;
+      border: none;
+
+      &:checked ~ .prism-toggle-track {
+        background: $prism-color-primary;
+
+        &::after {
+          transform: translateX(16px);
+        }
+      }
+    }
+  }
+
+  .buttons,
+  .actions {
+    input[type="submit"],
+    input[type="button"],
+    button {
+      margin-right: 10px;
+    }
+  }
+}
+
+// Shared pill+thumb visual for the toggle switch — used both by the form
+// input above (state driven by the sibling checkbox's :checked) and by the
+// read-only prism_toggle_tag(value) helper below (state driven by a plain
+// "on"/"off" class, since there's no real input on index/show pages).
+.prism-toggle-track {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 22px;
+  border-radius: $prism-radius-pill;
+  background: $prism-border-color-strong;
+  transition: background $prism-transition-fast;
+  flex: 0 0 auto;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: $prism-bg-card;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    transition: transform $prism-transition-fast;
+  }
+}
+
+// Read-only toggle tag for index columns / attributes_table rows — see
+// prism_toggle_tag(value) in lib/prism_toggle_tag.rb.
+.prism-toggle-tag {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+
+  &.on .prism-toggle-track {
+    background: $prism-color-primary;
+
+    &::after {
+      transform: translateX(16px);
+    }
+  }
+}
+
+// Filters panel — this lives in ActiveAdmin's own #sidebar/.sidebar_section
+// (the built-in right-hand content sidebar, unrelated to Prism's left nav).
+// Its label style is brought in line with the rest of the theme, and its
+// select/input widths — hard-coded by AA in pixels against its own default
+// $sidebar-width — are made fluid so they can't misalign if that width
+// ever differs from AA's assumption.
+.sidebar_section label {
+  color: $prism-text-muted;
+  font-size: 0.72em;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+.sidebar_section select,
+.sidebar_section input[type="text"],
+.sidebar_section input[type="number"] {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+}
+
+form.filter_form {
+  .filter_form_field {
+    margin-bottom: 14px;
+  }
+
+  .filter_form_field.select_and_search {
+    display: flex;
+    gap: 8px;
+
+    select,
+    input[type="text"] {
+      width: auto;
+      min-width: 0;
+      flex: 1 1 0;
+      margin-left: 0;
+    }
+  }
+
+  .filter_form_field.filter_date_range {
+    display: flex;
+    gap: 8px;
+
+    input[type="text"] {
+      width: auto;
+      min-width: 0;
+      flex: 1 1 0;
+
+      + input {
+        margin-left: 0;
+      }
+    }
+  }
+}

data/scss-src/_icons.scss

@@ -0,0 +1,27 @@
+.prism-icon,
+.prism-nav-icon,
+.prism-chevron,
+.prism-action-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.prism-icon {
+  margin-right: 6px;
+}
+
+// Standard "visually hidden but present for assistive tech" utility —
+// used to keep the localized View/Edit/Delete label available to screen
+// readers once the visible text is replaced by an icon.
+.prism-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}