activemail 1.2.3 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a7db4250b0c1551e5d419e5f6c22a6001253c0f8531e616f35ec03ac327ffa6d
-  data.tar.gz: 9e514b570fca4bf16afb4110cb9ee3d10713306626e93f3a3fc435d729b7bef3
+  metadata.gz: c37e5bd4d1c2746462f33f9b221a2734081ec4f89be697f77e22f8402767c879
+  data.tar.gz: 69b5e178c7521b8f741a504af3c4d5524373b68b80cbe44af35a38a168e77389
 SHA512:
-  metadata.gz: 28ace5f87d6884920b5f99072306d693b7fcb61b7ee0c1162b8d498c33a67a5b54f63ef1e61277d92523ebc1433fc281254d959ed88e914c2ccc60157c19ac25
-  data.tar.gz: 67e448df315fae10c0faa563da2e0c7c5da4af21f03e0e801ed8018f44e981dcd9e1a881dd3038dd637a4a30a40ce40973ad178dd181ff4b6358d6d6438b5635
+  metadata.gz: 2611a2f9405fcdb5e41de1f5817b603d3574ccbc5a0607cd45b22ec85f34cf283d3bd8bfdb22786b48e8248b6b941935a126466fb83a5e70c25ce144be41b64b
+  data.tar.gz: 7d398eb0eaa80095458a9eb3811aa906f85d212abb6c784166edceeb3249c91f33d3e011efe55b9f4be3fd6e24aadf0246539f0be5f29dc6e9ca28a297475bd9

data/CHANGELOG.md

@@ -5,6 +5,60 @@ All notable changes to this project are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - Unreleased
+
+Breaking release: see [UPGRADING.md](UPGRADING.md).
+
+### Fixed
+
+- Emails rendered by a real Rails app shipped without the framework CSS: the
+  stylesheet lookup probed `config.assets` (an `OrderedOptions` that answers
+  every `respond_to?` with `nil`) and the `<link>` fallback was stripped by
+  Premailer. Assets are now read from the actual Sprockets environment/manifest
+  or Propshaft load path.
+- Propshaft hosts no longer risk a boot crash on `assets.precompile`.
+- `<raw>` content is no longer transformed when the layout re-rendered the view,
+  and an author's literal `###RAW0###` is left intact.
+- The word "doctype" in content and `&nbsp;`-like characters inside `<style>`
+  are no longer rewritten.
+- Numeric attributes are parsed in strict base 10 (`"010"` was read as 8).
+- `<cta>`, `<info-box>`, `<spacer>` and `<block-grid>` keep `id`, `aria-*`,
+  `data-*` and the author's `style`.
+- Column widths only count sibling columns (a sibling `<p>` skewed them).
+- The secondary button and info-box tokens now reach the stylesheet and dark
+  mode (1.1.0 announced it, but the SCSS ignored them).
+- `.h-line`, `.block-grid.up-N`, `.menu`, `.expander` had no CSS.
+- `render_all` refuses an `output_dir` outside the app and only deletes its own
+  files (it used to `rm_rf` the whole directory).
+- The responsive breakpoint follows `container_width` instead of a fixed 596px.
+- Code annotations are registered for the real `inky-*` extensions.
+
+### Changed
+
+- One transpilation and one inlining pass per email, hooked on
+  `ActionMailer::Base#render_to_body`; text parts, attachments and
+  non-ActiveMail emails are untouched.
+- `activemail_inline_styles(*paths)` embeds host stylesheets too and raises
+  `ActiveMail::StylesheetNotFound` instead of warning.
+- `<button>` and `<cta>` share one bulletproof, token-styled, inlined rendering.
+- SCSS uses the module system (`@use`/`@forward`, `sass:color`, `sass:math`).
+- Transpilation is linear in the document size (200 nested rows: ×3.7,
+  2,000 raw blocks: ×35) and reuses a memoized `Core`.
+- `Quality::Guard` is extensible with `Quality::Rule` and gains
+  `translation_missing`, `single_root`, `text_part_present`, `text_part_plain`.
+- `Quality` gains `locales`, `formats`, `around_each` and `output_filters`.
+- Errors share the `ActiveMail::Error` base class.
+
+### Removed
+
+- `ActiveMail::Inliner::Interceptor` and `config.register_inline_interceptor`.
+- `ActiveMail::CompiledStylesheet` (replaced by `ActiveMail::AssetPipeline`).
+- The `<inky>` tag.
+- `IGNORED_ON_PASSTHROUGH`, `combine_attributes`, `pass_through_attributes`,
+  `bulletproof_button_table` and `BUTTON_PADDING`.
+- `stylesheet_link_tag` from the layouts.
+- The manual `workflow_dispatch` release trigger.
+
 ## [1.2.3] - 2026-10-09
 
 ### Changed
@@ -61,8 +115,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `<button>` and `<cta>` share a `bulletproof_button_table` scaffold; `<cta>`
   drops its hardcoded `4px` radius in favor of the `radius` token.
 - The corner radius is now applied by default on `.button`/`.cta` (the opt-in
-  `.radius` class is gone); `.button.secondary`/`.cta.secondary` mirror the
-  secondary color/border tokens.
+  `.radius` class is gone).
 
 ### Removed
 

data/README.md

@@ -42,7 +42,7 @@ renders consistently from Apple Mail to Outlook (Word engine) to Gmail mobile.
 
 ```ruby
 # Gemfile
-gem 'activemail', '~> 1.0'
+gem 'activemail', '~> 2.0'
 ```
 
 ```bash
@@ -55,7 +55,8 @@ framework stylesheet. It works zero-config; customize only what you want.
 
 Name a mailer view `welcome.html.inky` (or compose with another engine:
 `welcome.html.inky-erb`, `.inky-slim`, `.inky-haml`) and it is transpiled on
-render. CSS is inlined automatically before delivery.
+render. Each email is transpiled and its CSS inlined exactly once, when the
+mailer renders it (view and layout together).
 
 ## Configuration
 
@@ -70,15 +71,12 @@ ActiveMail.configure do |config|
   # CSS inliner: :premailer (default), :roadie, :null, or a custom
   # ActiveMail::Inliner::Base subclass/instance.
   config.inliner = :premailer
-  # Set false if another inliner (e.g. premailer-rails) already runs on mailers;
-  # `config.inliner = :null` also fully short-circuits ActiveMail's interceptor.
-  config.register_inline_interceptor = true
 
   # Design tokens (see below).
   config.tokens.color :primary, '#2a9d8f'
 
   # Custom components (see "Custom components").
-  config.register_component 'cta', ActiveMail::Components::Cta
+  config.register_component 'divider', Divider
 end
 ```
 
@@ -106,7 +104,11 @@ ActiveMail.tokens.color(:primary) # => "#2a9d8f"
 ```
 
 Defaults are neutral (a calm teal `primary`, near-black `text`, white
-`background`, …) and fully overridable. Under Sprockets the SCSS bridge is a
+`background`, …) and fully overridable. Optional tokens fall back to a base
+token: `primary_text`/`secondary_text` → `button_text`, `primary_border`/
+`secondary_border` → none, `info_box_background`/`_border`/`_text` →
+`background`/`border`/`text`. Ruby components and the stylesheet read the same
+resolved values. Under Sprockets the SCSS bridge is a
 preprocessed partial; under Propshaft run `rake activemail:tokens:export` to
 materialize a static `_activemail_tokens.scss`.
 
@@ -118,7 +120,17 @@ hooks (`.button`, `.cta`, `.callout`, `.spacer`, …), utilities, and dark mode.
 
 Override at three levels, cheapest first:
 
-1. **Tokens** (Ruby) — covers most theming.
+1. **Tokens** (Ruby) — covers most theming. Any framework variable can also be
+   configured from your own stylesheet with the Sass module system:
+
+   ```scss
+   // app/assets/stylesheets/emails/emails.scss
+   @use "activemail/activemail" with (
+     $am-button-secondary-color: #264653,
+     $am-breakpoint: 640px
+   );
+   ```
+
 2. **`bin/rails g activemail:styles`** — eject the SCSS partials into your app to
    edit them; your copies shadow the gem's.
 3. **`bin/rails g activemail:views`** — eject the default layout + partials
@@ -132,9 +144,22 @@ Mail/iOS) and Outlook's `[data-ogsc]`, with surfaces derived from your tokens.
 ## CSS inlining
 
 Email clients (Gmail mobile, Orange.fr) strip `<style>`, so critical CSS must be
-inlined. ActiveMail registers an ActionMailer interceptor that runs the configured
-inliner on every outgoing HTML part — your `<style>` enhancement block (media
-queries, dark mode) is preserved.
+inlined. When a mailer renders an inky HTML template, ActiveMail transpiles the
+whole body (view + layout) and runs the configured inliner once. Text parts,
+attachments and non-ActiveMail emails are never touched; your `<style>`
+enhancement block (media queries, dark mode) is preserved.
+
+The layout embeds the compiled stylesheets with `activemail_inline_styles`
+(Sprockets or Propshaft); pass your own on top of the framework's:
+
+```erb
+<%= activemail_inline_styles %>                  <%# framework only %>
+<%= activemail_inline_styles "emails/emails" %>  <%# your stylesheet @use-ing the framework %>
+```
+
+A missing or empty asset raises `ActiveMail::StylesheetNotFound`: an email is
+never sent unstyled. An inliner failure raises `ActiveMail::Inliner::Error`
+(the adapter's exception is kept as `#cause`).
 
 ```ruby
 config.inliner = :premailer   # default, hard dependency
@@ -183,14 +208,24 @@ columns for gutters, and keep the `large` sizes of a row summing to at most
 
 ### `<button>`
 
-Bulletproof button: the padding lives on the `<a>` so the whole control is
-clickable. Variant classes (`primary`, `expand`, …) are preserved.
+Bulletproof button styled inline from the tokens (`Tokens#button_style`): the
+padding lives on the `<a>` so the whole control is clickable, and a variant
+border sits on the cell only. `class="secondary"` selects the secondary variant;
+`expand` makes it full width; without `href` the label renders as a `<span>`.
 
 ```html
-<button href="#">Go</button>
+<button href="#" class="secondary">Go</button>
 ```
 
-`<button class="expand">` adds a centered link and an `.expander` cell.
+```html
+<table class="secondary button"><tbody><tr><td>
+  <table><tbody><tr>
+    <td style="background:#264653;border-radius:4px;">
+      <a href="#" style="display:inline-block;text-decoration:none;padding:12px 24px;background:#264653;color:#ffffff;font-weight:bold;border-radius:4px;">Go</a>
+    </td>
+  </tr></tbody></table>
+</td></tr></tbody></table>
+```
 
 ### `<menu>` / `<item>`
 
@@ -222,17 +257,13 @@ clickable. Variant classes (`primary`, `expand`, …) are preserved.
 ### `<wrapper>`, `<h-line>`, `<center>`
 
 - `<wrapper class="header">` → `<table class="header wrapper" align="center" style="width:100%;">` with a `.wrapper-inner` cell.
-- `<h-line>` → a full-width single-cell table for a horizontal rule.
+- `<h-line>` → a full-width single-cell table drawn as a 1px rule in the `border` color.
 - `<center>` adds `align="center"` and `.float-center` to its element children (and `.float-center` to nested menu items).
 
-### `<inky>`
-
-Renders a bare `<tr>`, useful inside hand-written tables.
-
 ### `<raw>`
 
 Anything between `<raw>` and `</raw>` is passed through untouched (multi-line
-supported). Raw blocks cannot be nested.
+supported), including through the layout. Raw blocks cannot be nested.
 
 ```html
 <raw><% liquid_or_mso_conditional %></raw>
@@ -240,28 +271,28 @@ supported). Raw blocks cannot be nested.
 
 ### Token-driven built-ins: `<cta>` and `<info-box>`
 
-Brand-neutral, token-styled components shipped with the gem but **not registered
-by default** (so they never collide with your tags). Register them to use:
-
-```ruby
-config.register_component 'cta', ActiveMail::Components::Cta
-config.register_component 'info-box', ActiveMail::Components::InfoBox
-```
+Brand-neutral, token-styled components, registered by default.
 
 ```html
 <cta href="https://example.com">Go</cta>
 <cta href="#" class="secondary">Also go</cta>
 ```
 
-`<cta>` renders a bulletproof button using `tokens.color(:primary)` (or
-`:secondary` with `class="secondary"`); it raises if `href` is missing.
+`<cta>` renders exactly like `<button>` with a `cta` class; it raises if `href`
+is missing. `<info-box>` is a callout styled from the `info_box_*` tokens.
+
+Every component keeps the author's `class` and `style` (merged, never
+duplicated) and passes `id`, `aria-*`, `data-*` and other attributes through to
+its root element.
 
 ## Custom components
 
 Register your own tag with a class that inherits from
 `ActiveMail::Components::Base` and implements `#transform(node, inner)`. You get
-the matched Nokogiri node (full DOM access) and the already-transformed inner
-HTML; return the replacement markup string. The generator scaffolds one:
+the matched Nokogiri node (read its attributes) and `inner`, an opaque slot
+standing for the already-transformed children: interpolate it exactly once where
+the children belong, never parse or alter it (dropping or duplicating it raises
+`ActiveMail::Error`). Return the replacement markup string. The generator scaffolds one:
 
 ```bash
 bin/rails g activemail:component Divider
@@ -272,19 +303,21 @@ The generator namespaces the class as `Components::Divider` (under
 A minimal hand-written equivalent:
 
 ```ruby
-class Divider < ActiveMail::Components::Base
-  def transform(node, _inner)
-    klass = combine_classes(node, 'divider')
-    %(<table class="#{klass}" #{TABLE_RESET} style="width:100%;"><tbody><tr><td></td></tr></tbody></table>)
+class Divider < ActiveMail::Components::TableComponent
+  def transform(node, inner)
+    %(<table#{root_attributes(node, classes: 'divider', layout_style: 'width:100%;')} #{TABLE_RESET}><tbody><tr><td>#{inner}</td></tr></tbody></table>)
   end
 end
 
 ActiveMail.configuration.register_component('divider', Divider)
 ```
 
-Helpers available from `Base`: `combine_classes`, `combine_attributes`,
-`pass_through_attributes`, `class?`, `target_attribute`, `escape_attr`,
-`style_attribute`, `column_count`, `container_width`.
+`root_attributes` emits the merged `class`, the merged `style` and every
+pass-through attribute; override `consumed_attributes` to list the attributes
+your component reads itself (they are not passed through). `TableComponent`
+already consumes the `TABLE_RESET` attributes (`role`, `border`, …) of a layout
+table root; inherit from `Base` for any other root element. Other helpers:
+`class?`, `escape_attr`, `column_count`, `container_width`.
 
 Per-instance overrides (including replacing a built-in tag) are also possible:
 
@@ -314,9 +347,15 @@ class MailerTest < ActiveSupport::TestCase
   include ActiveMail::Quality::Minitest
 
   test 'welcome email is sound' do
-    assert_email_quality(rendered_html)
+    assert_email_quality(WelcomeMailer.welcome(user)) # a message, or an HTML string
   end
 end
+
+class EmailPreviewsTest < ActiveSupport::TestCase
+  include ActiveMail::Quality::Minitest
+
+  assert_quality_for_all_previews # one test per preview email and locale
+end
 ```
 
 ```ruby
@@ -326,19 +365,37 @@ require 'activemail/quality/rspec'
 expect(rendered_html).to be_a_valid_email
 ```
 
-The Guard checks byte size (Gmail clips ~102 KB), `role="presentation"` on every
-table, `alt` on every image, and `lang` on full documents — all thresholds
-configurable:
+The Guard checks byte size (Gmail clips ~102 KB), parse errors,
+`role="presentation"` on every table, `alt` on every image, `lang` on full
+documents, a single `<html>`/`<body>`, missing translations, and — given a
+message — a plain text part. Built-in rules can be disabled and your own added:
 
 ```ruby
+signature = ActiveMail::Quality::Rule.html(:single_signature) do |doc, _html|
+  'signature rendered twice' if doc.css('.signature').size > 1
+end
+
 ActiveMail::Quality.configure do |c|
   c.required_previews = %w[welcome_mailer#welcome]
-  c.guard = ActiveMail::Quality::Guard.new(max_bytes: 90_000)
+  c.guard = ActiveMail::Quality::Guard.new(max_bytes: 90_000, disable: %i[img_alt], rules: [signature])
+  c.locales = %i[fr en]                      # or ->(preview) { [...] }; each preview gets params[:locale]
+  c.formats = %i[html text]
+  c.around_each = lambda do |_preview, _email, _locale, &render|
+    ActiveRecord::Base.transaction { render.call; raise ActiveRecord::Rollback } # previews leave no data behind
+  end
+  c.output_filters = [[/\h{8}-\h{4}-\h{4}-\h{4}-\h{12}/, '<uuid>']] # applied to written files only
+  c.output_dir = 'tmp/email_previews'        # relative, inside Rails.root
 end
 ```
 
-`rake activemail:emails:render_all` renders every ActionMailer preview to disk
-for visual diffing and fails on any guard violation among `required_previews`.
+`Rule.html` blocks receive the parsed document and the raw HTML; `Rule.message`
+blocks receive the `Mail::Message`. Return `nil`, a message or an array of
+messages.
+
+`rake activemail:emails:render_all` renders every ActionMailer preview (each
+locale and format) to `output_dir` for visual diffing and fails on any guard
+violation among `required_previews`. It only replaces its own `.html`/`.txt`
+files.
 
 ## Email-client compatibility policy
 
@@ -356,7 +413,8 @@ Targets the real-world client landscape as of 2026:
 ## Programmatic use
 
 ```ruby
-ActiveMail::Core.new.transpile('<container><row><columns>Hi</columns></row></container>')
+ActiveMail.configuration.core.transpile('<container><row><columns>Hi</columns></row></container>')
+ActiveMail::Pipeline.call(source) # transpile + inline
 ActiveMail::Core.new(column_count: 24, container_width: 480).transpile(source)
 ```
 

data/UPGRADING.md

@@ -0,0 +1,112 @@
+# Upgrading to ActiveMail 2.0
+
+## Gemfile
+
+```ruby
+gem 'activemail', '~> 2.0'
+```
+
+## Inlining
+
+The delivery interceptor is gone: each email is transpiled and inlined once,
+when the mailer renders an inky HTML template.
+
+- Remove `config.register_inline_interceptor` from your initializer.
+- If you ran another inliner (premailer-rails) next to ActiveMail with
+  `config.inliner = :null`, drop that inliner and the `:null` setting: ActiveMail
+  now inlines the whole body, layout included.
+- Inliner failures still raise `ActiveMail::Inliner::Error` (now a subclass of
+  `ActiveMail::Error`).
+
+## Layouts
+
+Ejected or hand-written layouts must embed the stylesheets with the helper and
+drop `stylesheet_link_tag` (Premailer strips it, so it never styled anything):
+
+```erb
+<%# before %>
+<%= stylesheet_link_tag "emails/emails" %>
+<%= activemail_inline_styles %>
+
+<%# after %>
+<%= activemail_inline_styles "emails/emails" %>
+```
+
+A missing or empty asset now raises `ActiveMail::StylesheetNotFound` instead of
+logging a warning; inside a view it surfaces as the `#cause` of
+`ActionView::Template::Error`.
+
+## SCSS
+
+The framework uses the Sass module system. Replace `@import` and variables
+declared before it with `@use … with (…)`; a variable declared before the
+`@use` is no longer read.
+
+```scss
+// before
+$am-button-secondary-color: #264653;
+@import "activemail/activemail";
+
+// after
+@use "activemail/activemail" with (
+  $am-button-secondary-color: #264653
+);
+```
+
+- Renamed: `$am-button-color` → `$am-button-primary-color`,
+  `$am-info-box-bg` → `$am-info-box-background`.
+- Prefer Ruby tokens (`secondary_text`, `secondary_border`, `info_box_*`, …):
+  they now reach both the inline styles and the stylesheet, so SCSS overrides of
+  the button/info-box variables are rarely needed.
+- `$am-breakpoint` defaults to the container width (600px) instead of 596px.
+
+## Buttons
+
+`<button>` and `<cta>` share one rendering, styled inline from the tokens.
+
+- CSS targeting the old markup (`<center>`, `.expander` cell inside
+  `.button.expand`) no longer matches; style buttons through tokens.
+- A dark-mode override must use `!important` to beat the inline styles.
+- A `<button>` without `href` renders its label in a `<span>`.
+
+## Components
+
+- The `<inky>` tag is removed.
+- `inner` is an opaque slot: interpolate it exactly once and never parse or
+  alter it.
+- `IGNORED_ON_PASSTHROUGH`, `combine_attributes`, `pass_through_attributes`,
+  `bulletproof_button_table` and `BUTTON_PADDING` are removed. Use
+  `root_attributes(node, classes:, layout_style:)` and override the private
+  `consumed_attributes` to list the attributes your component reads; a
+  component whose root is a `TABLE_RESET` table inherits from
+  `ActiveMail::Components::TableComponent`.
+- A component must output `inner` exactly once (or have no children):
+  otherwise `ActiveMail::Error` is raised instead of silently dropping content.
+  Self-closing `<h-line/>`/`<spacer/>` are not valid HTML4 and swallow their
+  following siblings; write `<h-line></h-line>`.
+- `id`, `aria-*`, `data-*` and other attributes now pass through on every
+  built-in component. On tables carrying `TABLE_RESET`, the component's
+  `role="presentation"` wins over the author's `role`.
+- `ActiveMail::Core.new` only takes keywords (`config:`, `components:`,
+  `column_count:`, `container_width:`). For plain transpilation prefer the
+  memoized `ActiveMail.configuration.core`.
+- Integer settings (`column_count`, `container_width`) raise `TypeError` for a
+  non-Integer and `ArgumentError` for a non-positive value. Numeric attributes
+  are parsed in strict base 10.
+
+## Quality
+
+- `output_dir` must be relative, inside `Rails.root` (symlinks resolved), and
+  neither `.` nor contain `..`. `render_all` marks it with an
+  `.activemail_previews` file and refuses to clean an existing, non-empty
+  directory without that marker: empty your previous output directory once.
+- `PreviewRenderer.render` is removed.
+- `RenderAll.new(root:, config:)` replaces `output_root:`.
+- Rendered files and failures carry the locale when it differs from the
+  default (`welcome.fr.html`, `preview#email [fr]`).
+- `Guard#violations` and `assert_email_quality` accept a `Mail::Message` (HTML
+  plus message rules) or an HTML string. New built-in rules may flag existing
+  emails: `translation_missing`, `translation_missing_text`, `single_root`,
+  `html_part_present`, `text_part_present`, `text_part_plain`. Disable any with
+  `Guard.new(disable: [...])`.
+- Host-specific checks move to `Guard.new(rules: [Quality::Rule.html(...)])`.

data/app/assets/stylesheets/activemail/_components.scss

@@ -1,62 +1,53 @@
-// Background on both cell and link so the whole bulletproof button is filled and
-// clickable. Radius by default — progressive enhancement, clients that don't support it ignore it.
-.button table td,
-.button a {
-  background: $am-button-primary-bg;
-  border-radius: $am-button-radius;
-}
+@use "sass:math";
+@use "settings" as *;
 
-.button a {
-  color: $am-button-color;
-  font-family: $am-font-family;
-  font-weight: bold;
+.expander {
+  padding: 0 !important;
+  visibility: hidden;
+  width: 0;
 }
 
-.button.secondary table td,
-.button.secondary a {
-  background: $am-button-secondary-bg;
-  color: $am-button-secondary-color;
+.info-box td {
+  background-color: $am-info-box-background;
+  border-left: 5px solid $am-info-box-border;
+  border-radius: $am-box-radius;
+  color: $am-info-box-text;
+  padding: $am-spacing-md;
 }
 
-// Border on the cell only — a repeated <a> border would double the line.
-.button.secondary table td {
-  border: 1px solid $am-button-secondary-border;
+.callout-inner {
+  background-color: $am-background;
+  color: $am-text;
+  padding: $am-spacing-md;
 }
 
-.cta table td,
-.cta a {
-  background: $am-button-primary-bg;
-  border-radius: $am-button-radius;
+.h-line,
+.h-line th {
+  font-size: 1px;
+  line-height: 1px;
 }
 
-.cta a {
-  color: $am-button-color;
-  font-family: $am-font-family;
-  font-weight: bold;
+.h-line {
+  border-top: 1px solid $am-border;
 }
 
-.cta.secondary table td,
-.cta.secondary a {
-  background: $am-button-secondary-bg;
-  color: $am-button-secondary-color;
+.menu {
+  width: auto !important;
 }
 
-.cta.secondary table td {
-  border: 1px solid $am-button-secondary-border;
+.menu-item {
+  padding: $am-spacing-sm $am-spacing-md;
 }
 
-.info-box td {
-  background-color: $am-info-box-bg;
-  border-left: 5px solid $am-info-box-border;
-  border-radius: $am-box-radius;
-  color: $am-info-box-text;
-  padding: $am-spacing-md;
+.menu-item a {
+  text-decoration: none;
 }
 
-.callout-inner {
-  background-color: $am-background;
-  color: $am-text;
-  padding: $am-spacing-md;
+@for $n from 1 through $am-column-count {
+  .block-grid.up-#{$n} > tbody > tr > th,
+  .block-grid.up-#{$n} > tbody > tr > td {
+    width: math.div(100%, $n);
+  }
 }
 
 // Height is set inline per instance; this rule is just a styling anchor.

data/app/assets/stylesheets/activemail/_dark.scss

@@ -1,12 +1,7 @@
 // Dark mode: prefers-color-scheme (Apple Mail/iOS) + [data-ogsc] (Outlook
 // Android). Colors derived from tokens — pure black/white crush contrast.
 
-$am-dark-bg: mix($am-color-text, $am-color-background, 96%) !default;
-$am-dark-surface: mix($am-color-text, $am-color-background, 92%) !default;
-$am-dark-panel: mix($am-color-text, $am-color-background, 82%) !default;
-$am-dark-text: mix($am-color-background, $am-color-text, 88%) !default;
-$am-dark-muted: $am-color-muted !default;
-$am-dark-link: $am-color-primary !default;
+@use "settings" as *;
 
 @mixin am-dark-rules {
   .body,
@@ -39,25 +34,33 @@ $am-dark-link: $am-color-primary !default;
 
   .button table td,
   .button a,
+  .button span,
   .cta table td,
-  .cta a {
-    background: $am-color-primary !important;
-    color: $am-color-button-text !important;
+  .cta a,
+  .cta span {
+    background: $am-button-primary-bg !important;
+    color: $am-button-primary-color !important;
   }
 
-  // Restore the secondary fill AND text — the primary rule above forces button-text,
-  // which would be unreadable on an outline (light) secondary fill.
+  // Restore the secondary fill AND text — the primary rule above would be unreadable
+  // on a light secondary fill.
   .button.secondary table td,
   .button.secondary a,
+  .button.secondary span,
   .cta.secondary table td,
-  .cta.secondary a {
-    background: $am-color-secondary !important;
+  .cta.secondary a,
+  .cta.secondary span {
+    background: $am-button-secondary-bg !important;
     color: $am-button-secondary-color !important;
   }
 
   // Panels keep their inline background unless overridden here, which would
   // otherwise leave dark text on a dark background.
-  .callout-inner,
+  .callout-inner {
+    background-color: $am-dark-panel !important;
+    color: $am-dark-text !important;
+  }
+
   .info-box,
   .info-box td {
     background-color: $am-dark-panel !important;
@@ -102,21 +105,29 @@ $am-dark-link: $am-color-primary !default;
 
   [data-ogsc] .button table td,
   [data-ogsc] .button a,
+  [data-ogsc] .button span,
   [data-ogsc] .cta table td,
-  [data-ogsc] .cta a {
-    background: $am-color-primary !important;
-    color: $am-color-button-text !important;
+  [data-ogsc] .cta a,
+  [data-ogsc] .cta span {
+    background: $am-button-primary-bg !important;
+    color: $am-button-primary-color !important;
   }
 
   [data-ogsc] .button.secondary table td,
   [data-ogsc] .button.secondary a,
+  [data-ogsc] .button.secondary span,
   [data-ogsc] .cta.secondary table td,
-  [data-ogsc] .cta.secondary a {
-    background: $am-color-secondary !important;
+  [data-ogsc] .cta.secondary a,
+  [data-ogsc] .cta.secondary span {
+    background: $am-button-secondary-bg !important;
     color: $am-button-secondary-color !important;
   }
 
-  [data-ogsc] .callout-inner,
+  [data-ogsc] .callout-inner {
+    background-color: $am-dark-panel !important;
+    color: $am-dark-text !important;
+  }
+
   [data-ogsc] .info-box,
   [data-ogsc] .info-box td {
     background-color: $am-dark-panel !important;