From 5e9bddbdfc4bed3ca4d105da3bb8f5bdf5f7750a Mon Sep 17 00:00:00 2001
From: Philippe <philippe.meyralbe@advitam.fr>
Date: Mon, 15 Jun 2026 19:00:57 +0200
Subject: [PATCH 1/5] refacto: token-driven button variants, radius tokens, and
 DRY component rendering

Make the gem expressive enough that downstream forks (DsCta/DsInfoBox) are
unnecessary: customization happens through token configuration, not component
rewrites.

- tokens: generalize storage/emission behind a GROUPS table (adding a group is
  one entry), add a radius group, a button_style(variant) resolver, a bulk
  load(...) helper, and a single to_h snapshot reader
- extract ButtonStyle (value object + .from factory) and ScssSerializer (SRP)
- Cta/Button share a bulletproof_button_table scaffold in Base; Cta is
  token-inline-driven (now supporting outline secondary via tokens) while
  Button stays CSS-driven; drop the hardcoded 4px radius
- InfoBox: box-scoped info_box_* tokens (fall back to page palette) + box radius
- SCSS: radius always applied on .button/.cta (drop opt-in .radius), mirror
  secondary color/border and info-box radius from tokens
- document new tokens + bulk loader in the generator initializer
---
 .rubocop.yml                                  |   4 +
 .../stylesheets/activemail/_components.scss   |  31 ++---
 .../stylesheets/activemail/_settings.scss     |  14 ++-
 lib/activemail/components/base.rb             |  18 +++
 lib/activemail/components/button.rb           |  15 +--
 lib/activemail/components/cta.rb              |  36 ++++--
 lib/activemail/components/info_box.rb         |   9 +-
 lib/activemail/tokens.rb                      | 108 +++++++++++-------
 lib/activemail/tokens/button_style.rb         |  31 +++++
 lib/activemail/tokens/scss_serializer.rb      |  23 ++++
 .../activemail/templates/initializer.rb       |  19 +++
 lib/tasks/activemail.rake                     |   2 +-
 test/components/cta_test.rb                   |  25 ++++
 test/components/info_box_test.rb              |  39 +++++++
 test/scss_framework_test.rb                   |  17 +++
 test/tokens_test.rb                           |  65 ++++++++++-
 16 files changed, 375 insertions(+), 81 deletions(-)
 create mode 100644 lib/activemail/tokens/button_style.rb
 create mode 100644 lib/activemail/tokens/scss_serializer.rb
 create mode 100644 test/components/info_box_test.rb

diff --git a/.rubocop.yml b/.rubocop.yml
index 2bb85c0..26a4c8a 100644
--- a/.rubocop.yml
+++ b/.rubocop.yml
@@ -26,6 +26,10 @@ Metrics/BlockLength:
 
 # Test files: autofix only, relaxed metrics.
 Metrics/ClassLength:
+  # Declarative data literals (token tables) are length, not complexity.
+  CountAsOne:
+    - array
+    - hash
   Exclude:
     - 'test/**/*'
 
diff --git a/app/assets/stylesheets/activemail/_components.scss b/app/assets/stylesheets/activemail/_components.scss
index e5877e9..d605906 100644
--- a/app/assets/stylesheets/activemail/_components.scss
+++ b/app/assets/stylesheets/activemail/_components.scss
@@ -1,12 +1,15 @@
 // Background on both inner cell and link so the whole bulletproof button
-// (table.button > td > table > td > a) is filled and clickable.
-.button table td {
+// (table.button > td > table > td > a) is filled and clickable. Radius is applied
+// by default (progressive enhancement — clients that don't support it just ignore it),
+// keeping CSS-driven <button> consistent with the always-rounded <cta> component.
+.button table td,
+.button a {
   background: $am-button-primary-bg;
+  border-radius: $am-button-radius;
 }
 
 .button a {
   color: $am-button-color;
-  background: $am-button-primary-bg;
   font-family: $am-font-family;
   font-weight: bold;
 }
@@ -14,22 +17,19 @@
 .button.secondary table td,
 .button.secondary a {
   background: $am-button-secondary-bg;
-}
-
-// Progressive enhancement only — some clients strip border-radius.
-.button.radius table td,
-.button.radius a {
-  border-radius: $am-button-radius;
+  color: $am-button-secondary-color;
+  border: 1px solid $am-button-secondary-border;
 }
 
 // CTA mirrors the bulletproof button; colors are also inlined by the component.
-.cta table td {
+.cta table td,
+.cta a {
   background: $am-button-primary-bg;
+  border-radius: $am-button-radius;
 }
 
 .cta a {
   color: $am-button-color;
-  background: $am-button-primary-bg;
   font-family: $am-font-family;
   font-weight: bold;
 }
@@ -37,12 +37,15 @@
 .cta.secondary table td,
 .cta.secondary a {
   background: $am-button-secondary-bg;
+  color: $am-button-secondary-color;
+  border: 1px solid $am-button-secondary-border;
 }
 
 .info-box td {
-  background-color: $am-background;
-  border-left: 5px solid $am-border;
-  color: $am-text;
+  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;
 }
 
diff --git a/app/assets/stylesheets/activemail/_settings.scss b/app/assets/stylesheets/activemail/_settings.scss
index 84de412..f284887 100644
--- a/app/assets/stylesheets/activemail/_settings.scss
+++ b/app/assets/stylesheets/activemail/_settings.scss
@@ -12,11 +12,21 @@ $am-background: $am-color-background !default;
 $am-muted: $am-color-muted !default;
 $am-border: $am-color-border !default;
 
-// Buttons
+// Buttons — mirror the Cta component's token-driven inline styles.
 $am-button-primary-bg: $am-color-primary !default;
 $am-button-secondary-bg: $am-color-secondary !default;
 $am-button-color: $am-color-button-text !default;
-$am-button-radius: 4px !default;
+// Secondary text/border fall back to the filled-button defaults (white text, no
+// outline); override the *-secondary-* tokens for an outline variant.
+$am-button-secondary-color: $am-color-button-text !default;
+$am-button-secondary-border: transparent !default;
+$am-button-radius: $am-radius-button !default;
+
+// Info box — box-scoped, falling back to the page palette.
+$am-info-box-bg: $am-background !default;
+$am-info-box-border: $am-border !default;
+$am-info-box-text: $am-text !default;
+$am-box-radius: $am-radius-box !default;
 
 // Grid — the gem emits no gutters; we provide them via column padding.
 // Width follows config.container_width via the token bridge, so the SCSS grid
diff --git a/lib/activemail/components/base.rb b/lib/activemail/components/base.rb
index b05eb11..a3823fb 100644
--- a/lib/activemail/components/base.rb
+++ b/lib/activemail/components/base.rb
@@ -36,6 +36,9 @@ class Base
       # Layout tables: presentation role (a11y) and zeroed legacy spacing.
       TABLE_RESET = 'role="presentation" border="0" cellpadding="0" cellspacing="0"'
 
+      # Click-target padding shared by <button> and <cta> anchors.
+      BUTTON_PADDING = 'padding:12px 24px;'
+
       sig { params(core: ::ActiveMail::Core).void }
       def initialize(core)
         @core = core
@@ -105,6 +108,21 @@ def target_attribute(node)
         node.attributes['target'] ? %( target="#{escape_attr(node.attributes['target'])}") : ''
       end
 
+      # Shared bulletproof-button scaffold (nested presentation tables + cell).
+      # Both <button> (CSS-driven) and <cta> (inline token styles) build on it, so
+      # the Outlook-safe structure lives in exactly one place.
+      sig do
+        params(outer_classes: String, inner: String, cell_style: String, outer_extra: String).returns(String)
+      end
+      def bulletproof_button_table(outer_classes:, inner:, cell_style: '', outer_extra: '')
+        cell = cell_style.empty? ? '<td>' : %(<td style="#{cell_style}">)
+        [
+          %(<table class="#{outer_classes}" #{TABLE_RESET}><tbody><tr><td>),
+          %(<table #{TABLE_RESET}><tbody><tr>#{cell}#{inner}</td></tr></tbody></table>),
+          %(</td>#{outer_extra}</tr></tbody></table>)
+        ].join
+      end
+
       sig { returns(Integer) }
       def column_count
         core.column_count
diff --git a/lib/activemail/components/button.rb b/lib/activemail/components/button.rb
index 019cd6f..d0c5407 100644
--- a/lib/activemail/components/button.rb
+++ b/lib/activemail/components/button.rb
@@ -14,13 +14,14 @@ def transform(node, inner)
         inner = anchor(node, inner, expand) if node.attr('href')
         inner = "<center>#{inner}</center>" if expand
 
-        classes = combine_classes(node, 'button')
         expander = expand ? '<td class="expander"></td>' : ''
-        [
-          %(<table class="#{classes}" #{TABLE_RESET}><tbody><tr><td>),
-          %(<table #{TABLE_RESET}><tbody><tr><td>#{inner}</td></tr></tbody></table>),
-          %(</td>#{expander}</tr></tbody></table>)
-        ].join
+        # CSS-driven by design: colors come from .button rules, not inline tokens —
+        # a distinct robustness model from <cta>, which inlines its palette.
+        bulletproof_button_table(
+          outer_classes: combine_classes(node, 'button'),
+          inner: inner,
+          outer_extra: expander
+        )
       end
 
       private
@@ -30,7 +31,7 @@ def anchor(node, inner, expand)
         target = target_attribute(node)
         extra = expand ? ' align="center" class="float-center"' : ''
         # Padding on the <a> makes the whole button a clickable target.
-        link_style = 'display:inline-block;text-decoration:none;padding:12px 24px;'
+        link_style = "display:inline-block;text-decoration:none;#{BUTTON_PADDING}"
         attrs = %(#{pass_through_attributes(node)}href="#{escape_attr(node.attr('href'))}"#{target}#{extra})
         %(<a #{attrs}#{style_attribute(node, link_style)}>#{inner}</a>)
       end
diff --git a/lib/activemail/components/cta.rb b/lib/activemail/components/cta.rb
index 789fad0..f3325c6 100644
--- a/lib/activemail/components/cta.rb
+++ b/lib/activemail/components/cta.rb
@@ -6,6 +6,7 @@
 module ActiveMail
   module Components
     # Colors read from tokens at transform time (runtime config), not load-time constants.
+    # Styles are inlined so the button survives clients that strip <style> (Gmail mobile…).
     class Cta < Base
       extend T::Sig
 
@@ -14,22 +15,33 @@ def transform(node, inner)
         # A CTA without a link is an authoring bug — surface it at render time.
         raise ArgumentError, '<cta> requires an href attribute' if node.attr('href').to_s.strip.empty?
 
-        background = ActiveMail.tokens.color!(class?(node, 'secondary') ? :secondary : :primary)
-        classes = combine_classes(node, 'cta')
-        anchor = %(<a href="#{escape_attr(node.attr('href'))}"#{target_attribute(node)} style="#{link_style(background)}">#{inner}</a>)
-        [
-          %(<table class="#{classes}" #{TABLE_RESET}><tbody><tr><td>),
-          %(<table #{TABLE_RESET}><tbody><tr><td style="background:#{background};border-radius:4px;">),
-          "#{anchor}</td></tr></tbody></table></td></tr></tbody></table>"
-        ].join
+        style = ActiveMail.tokens.button_style(class?(node, 'secondary') ? :secondary : :primary)
+        anchor = %(<a href="#{escape_attr(node.attr('href'))}"#{target_attribute(node)} ) +
+                 %(style="#{link_style(style)}">#{inner}</a>)
+        bulletproof_button_table(
+          outer_classes: combine_classes(node, 'cta'),
+          inner: anchor,
+          cell_style: cell_style(style)
+        )
       end
 
       private
 
-      sig { params(background: String).returns(String) }
-      def link_style(background)
-        'display:inline-block;text-decoration:none;padding:12px 24px;' \
-          "background:#{background};color:#{ActiveMail.tokens.color!(:button_text)};font-weight:bold;border-radius:4px;"
+      sig { params(style: ActiveMail::Tokens::ButtonStyle).returns(String) }
+      def cell_style(style)
+        "background:#{style.background};border-radius:#{style.radius};#{border_css(style)}"
+      end
+
+      sig { params(style: ActiveMail::Tokens::ButtonStyle).returns(String) }
+      def link_style(style)
+        "display:inline-block;text-decoration:none;#{BUTTON_PADDING}" \
+          "background:#{style.background};color:#{style.color};font-weight:bold;" \
+          "border-radius:#{style.radius};#{border_css(style)}"
+      end
+
+      sig { params(style: ActiveMail::Tokens::ButtonStyle).returns(String) }
+      def border_css(style)
+        style.border ? "border:1px solid #{style.border};" : ''
       end
     end
   end
diff --git a/lib/activemail/components/info_box.rb b/lib/activemail/components/info_box.rb
index 6ea7728..35a2ce6 100644
--- a/lib/activemail/components/info_box.rb
+++ b/lib/activemail/components/info_box.rb
@@ -21,11 +21,16 @@ def transform(node, inner)
 
       private
 
+      # Box-scoped tokens (fall back to page-level ones) so a host can give the box
+      # a distinct surface without colliding with :background/:border/:text.
       sig { returns(String) }
       def cell_style
         tokens = ActiveMail.tokens
-        "background-color:#{tokens.color!(:background)};border-left:5px solid #{tokens.color!(:border)};" \
-          "color:#{tokens.color!(:text)};padding:#{tokens.spacing!(:md)};"
+        background = tokens.color(:info_box_background) || tokens.color!(:background)
+        border = tokens.color(:info_box_border) || tokens.color!(:border)
+        text = tokens.color(:info_box_text) || tokens.color!(:text)
+        "background-color:#{background};border-left:5px solid #{border};border-radius:#{tokens.radius!(:box)};" \
+          "color:#{text};padding:#{tokens.spacing!(:md)};"
       end
     end
   end
diff --git a/lib/activemail/tokens.rb b/lib/activemail/tokens.rb
index 0181cc8..4d7b178 100644
--- a/lib/activemail/tokens.rb
+++ b/lib/activemail/tokens.rb
@@ -2,9 +2,13 @@
 # frozen_string_literal: true
 
 require 'sorbet-runtime'
+require_relative 'tokens/button_style'
+require_relative 'tokens/scss_serializer'
 
 module ActiveMail
   # Design-tokens registry: the single Ruby source of truth, bridged to SCSS by #to_scss.
+  # Groups (color/font/spacing/radius) share one storage + emission path so adding a
+  # group costs a single GROUPS entry (Open/Closed) — no per-group duplication.
   class Tokens
     extend T::Sig
 
@@ -44,80 +48,116 @@ class Tokens
       TokenMap
     )
 
+    DEFAULT_RADII = T.let(
+      {
+        button: '4px',
+        box: '4px'
+      }.freeze,
+      TokenMap
+    )
+
+    # The group registry: drives initialization and SCSS emission. Add a group here
+    # and it gets storage, accessors-backing, and a $am-<group>-* bridge for free.
+    GROUPS = T.let(
+      {
+        color: DEFAULT_COLORS,
+        font: DEFAULT_FONTS,
+        spacing: DEFAULT_SPACINGS,
+        radius: DEFAULT_RADII
+      }.freeze,
+      T::Hash[Symbol, TokenMap]
+    )
+
     sig { void }
     def initialize
-      @colors = T.let(DEFAULT_COLORS.dup, TokenMap)
-      @fonts = T.let(DEFAULT_FONTS.dup, TokenMap)
-      @spacings = T.let(DEFAULT_SPACINGS.dup, TokenMap)
+      @stores = T.let(GROUPS.transform_values(&:dup), T::Hash[Symbol, TokenMap])
     end
 
     # value given → set, omitted → get. Open registry: any key is accepted (define
-    # custom tokens for custom components); color!/font!/spacing! fail loud on read.
+    # custom tokens for custom components); the bang readers fail loud on read.
     sig { params(name: T.any(String, Symbol), value: T.nilable(String)).returns(T.nilable(String)) }
     def color(name, value = nil)
-      access(@colors, name, value)
+      access(:color, name, value)
     end
 
     sig { params(name: T.any(String, Symbol), value: T.nilable(String)).returns(T.nilable(String)) }
     def font(name, value = nil)
-      access(@fonts, name, value)
+      access(:font, name, value)
     end
 
     sig { params(name: T.any(String, Symbol), value: T.nilable(String)).returns(T.nilable(String)) }
     def spacing(name, value = nil)
-      access(@spacings, name, value)
+      access(:spacing, name, value)
+    end
+
+    sig { params(name: T.any(String, Symbol), value: T.nilable(String)).returns(T.nilable(String)) }
+    def radius(name, value = nil)
+      access(:radius, name, value)
     end
 
     # Strict reads for code that must have the token (e.g. a component's inline
     # color): raise rather than interpolating nil into the CSS.
     sig { params(name: T.any(String, Symbol)).returns(String) }
     def color!(name)
-      fetch!(@colors, :color, name)
+      fetch!(:color, name)
     end
 
     sig { params(name: T.any(String, Symbol)).returns(String) }
     def font!(name)
-      fetch!(@fonts, :font, name)
+      fetch!(:font, name)
     end
 
     sig { params(name: T.any(String, Symbol)).returns(String) }
     def spacing!(name)
-      fetch!(@spacings, :spacing, name)
+      fetch!(:spacing, name)
     end
 
-    # Frozen dup: mutating the returned hash must not bypass the DSL setters.
-    sig { returns(TokenMap) }
-    def colors
-      @colors.dup.freeze
+    sig { params(name: T.any(String, Symbol)).returns(String) }
+    def radius!(name)
+      fetch!(:radius, name)
     end
 
-    sig { returns(TokenMap) }
-    def fonts
-      @fonts.dup.freeze
+    # Frozen snapshot of every group: mutating the result can't bypass the DSL setters.
+    sig { returns(T::Hash[Symbol, TokenMap]) }
+    def to_h
+      @stores.transform_values { |store| store.dup.freeze }.freeze
     end
 
-    sig { returns(TokenMap) }
-    def spacings
-      @spacings.dup.freeze
+    # Bulk-load tokens grouped by family — `tokens.load(color: {...}, radius: {...})`.
+    # Lets a host app configure everything in one block instead of line-by-line.
+    sig { params(groups: TokenMap).void }
+    def load(**groups)
+      groups.each do |group, values|
+        values.each { |name, value| access(group, name, value) }
+      end
+    end
+
+    # Resolves a button variant (:primary/:secondary/…) to inline-ready values.
+    sig { params(variant: T.any(String, Symbol)).returns(ButtonStyle) }
+    def button_style(variant)
+      ButtonStyle.from(self, variant)
     end
 
-    # SCSS bridge: !default lets power-users pre-declare overrides upstream.
-    # Values are emitted verbatim (trusted, app-controlled input) — not escaped.
     sig { returns(String) }
     def to_scss
-      lines = scss_lines('color', @colors) + scss_lines('font', @fonts) + scss_lines('spacing', @spacings)
-      "#{lines.join("\n")}\n"
+      ScssSerializer.call(@stores)
     end
 
     private
 
-    sig { params(store: TokenMap, kind: Symbol, name: T.any(String, Symbol)).returns(String) }
-    def fetch!(store, kind, name)
-      store.fetch(name.to_sym) { raise KeyError, "unknown #{kind} token #{name.inspect}" }
+    sig { params(group: Symbol).returns(TokenMap) }
+    def store_for(group)
+      @stores.fetch(group) { raise KeyError, "unknown token group #{group.inspect}" }
+    end
+
+    sig { params(group: Symbol, name: T.any(String, Symbol)).returns(String) }
+    def fetch!(group, name)
+      store_for(group).fetch(name.to_sym) { raise KeyError, "unknown #{group} token #{name.inspect}" }
     end
 
-    sig { params(store: TokenMap, name: T.any(String, Symbol), value: T.nilable(String)).returns(T.nilable(String)) }
-    def access(store, name, value)
+    sig { params(group: Symbol, name: T.any(String, Symbol), value: T.nilable(String)).returns(T.nilable(String)) }
+    def access(group, name, value)
+      store = store_for(group)
       key = name.to_sym
       return store[key] if value.nil?
       # Emitted verbatim into SCSS by #to_scss — reject blanks that would yield broken CSS.
@@ -125,15 +165,5 @@ def access(store, name, value)
 
       store[key] = value
     end
-
-    sig { params(group: String, store: TokenMap).returns(T::Array[String]) }
-    def scss_lines(group, store)
-      store.map { |name, value| "$am-#{group}-#{scss_name(name)}: #{value} !default;" }
-    end
-
-    sig { params(name: Symbol).returns(String) }
-    def scss_name(name)
-      name.to_s.tr('_', '-')
-    end
   end
 end
diff --git a/lib/activemail/tokens/button_style.rb b/lib/activemail/tokens/button_style.rb
new file mode 100644
index 0000000..3ed2388
--- /dev/null
+++ b/lib/activemail/tokens/button_style.rb
@@ -0,0 +1,31 @@
+# typed: strict
+# frozen_string_literal: true
+
+require 'sorbet-runtime'
+
+module ActiveMail
+  class Tokens
+    # Resolved appearance of a button variant — consumed by the Cta component and
+    # mirrored by the .cta/.button SCSS. `border` nil means "no outline".
+    class ButtonStyle < T::Struct
+      extend T::Sig
+
+      const :background, String
+      const :color, String
+      const :radius, String
+      const :border, T.nilable(String)
+
+      # Resolves a variant (:primary/:secondary/…) from a token registry. color
+      # falls back to :button_text; border is opt-in (a "<variant>_border" token).
+      sig { params(tokens: ActiveMail::Tokens, variant: T.any(String, Symbol)).returns(ButtonStyle) }
+      def self.from(tokens, variant)
+        new(
+          background: tokens.color!(variant),
+          color: tokens.color("#{variant}_text") || tokens.color!(:button_text),
+          radius: tokens.radius!(:button),
+          border: tokens.color("#{variant}_border")
+        )
+      end
+    end
+  end
+end
diff --git a/lib/activemail/tokens/scss_serializer.rb b/lib/activemail/tokens/scss_serializer.rb
new file mode 100644
index 0000000..968e922
--- /dev/null
+++ b/lib/activemail/tokens/scss_serializer.rb
@@ -0,0 +1,23 @@
+# typed: strict
+# frozen_string_literal: true
+
+require 'sorbet-runtime'
+
+module ActiveMail
+  class Tokens
+    # Ruby → SCSS bridge for the token stores. Each token becomes a `$am-<group>-<name>`
+    # !default var (underscores → dashes) so a host app can pre-declare overrides upstream.
+    # Values are emitted verbatim (trusted, app-controlled input) — not escaped.
+    module ScssSerializer
+      extend T::Sig
+
+      sig { params(stores: T::Hash[Symbol, T::Hash[Symbol, String]]).returns(String) }
+      def self.call(stores)
+        lines = stores.flat_map do |group, store|
+          store.map { |name, value| "$am-#{group}-#{name.to_s.tr('_', '-')}: #{value} !default;" }
+        end
+        "#{lines.join("\n")}\n"
+      end
+    end
+  end
+end
diff --git a/lib/generators/activemail/templates/initializer.rb b/lib/generators/activemail/templates/initializer.rb
index c165f0b..d7c3bc2 100644
--- a/lib/generators/activemail/templates/initializer.rb
+++ b/lib/generators/activemail/templates/initializer.rb
@@ -21,10 +21,29 @@
   # config.on_parse_error = :warn
 
   # Design tokens — the single source of truth, bridged to SCSS via $am-*.
+  # Configure values here (literals, including rgba()/transparent) rather than
+  # parsing SCSS back into Ruby: the bridge only flows Ruby → SCSS.
   # config.tokens.color :primary, "#2a9d8f"
   # config.tokens.color :secondary, "#264653"
   # config.tokens.font :heading, "Georgia, serif"
   # config.tokens.spacing :lg, "32px"
+  # config.tokens.radius :button, "6px"   # <cta>/.button corner radius
+  # config.tokens.radius :box, "8px"       # <info-box> corner radius
+  #
+  # Outline secondary button (filled by default): give the secondary variant its
+  # own text + border instead of just a fill.
+  # config.tokens.color :secondary, "#ffffff"
+  # config.tokens.color :secondary_text, "#0f4447"
+  # config.tokens.color :secondary_border, "rgba(15, 68, 71, 0.6)"
+  #
+  # Box-scoped colors (fall back to :background/:border/:text when unset).
+  # config.tokens.color :info_box_background, "#fff7ef"
+  #
+  # Or configure everything in one block:
+  # config.tokens.load(
+  #   color: { primary: "#2a9d8f", secondary_text: "#0f4447" },
+  #   radius: { button: "6px", box: "8px" }
+  # )
 
   # Register components (built-ins like ActiveMail::Components::Cta, or your own
   # Components::* from `rails g activemail:component`).
diff --git a/lib/tasks/activemail.rake b/lib/tasks/activemail.rake
index af71930..0fdc9e4 100644
--- a/lib/tasks/activemail.rake
+++ b/lib/tasks/activemail.rake
@@ -11,7 +11,7 @@ namespace :activemail do
       path = args[:path] || 'app/assets/stylesheets/activemail/_activemail_tokens.scss'
       FileUtils.mkdir_p(File.dirname(path))
       File.write(path, ActiveMail.scss_variables)
-      puts "Wrote #{ActiveMail.tokens.colors.size + ActiveMail.tokens.fonts.size + ActiveMail.tokens.spacings.size} tokens to #{path}"
+      puts "Wrote #{ActiveMail.tokens.to_h.values.sum(&:size)} tokens to #{path}"
     end
   end
 
diff --git a/test/components/cta_test.rb b/test/components/cta_test.rb
index 53272f1..702bd52 100644
--- a/test/components/cta_test.rb
+++ b/test/components/cta_test.rb
@@ -35,6 +35,31 @@ def test_cta_secondary_variant_uses_secondary_token
     assert_includes output, '#00cc33'
   end
 
+  def test_cta_radius_comes_from_token
+    ActiveMail.tokens.radius(:button, '9px')
+    output = render('<cta href="#">Go</cta>')
+
+    assert_includes output, 'border-radius:9px'
+    refute_includes output, 'border-radius:4px'
+  end
+
+  def test_cta_default_secondary_has_no_outline
+    output = render('<cta class="secondary" href="#">Go</cta>')
+
+    refute_includes output, 'border:1px solid'
+  end
+
+  def test_cta_secondary_outline_is_token_driven
+    ActiveMail.tokens.load(
+      color: { secondary: '#ffffff', secondary_text: '#0f4447', secondary_border: 'rgba(15, 68, 71, 0.6)' }
+    )
+    output = render('<cta class="secondary" href="#">Go</cta>')
+
+    assert_includes output, 'background:#ffffff'
+    assert_includes output, 'color:#0f4447'
+    assert_includes output, 'border:1px solid rgba(15, 68, 71, 0.6)'
+  end
+
   def test_cta_secondary_keeps_secondary_class
     output = render('<cta class="secondary" href="#">Go</cta>')
     outer = Nokogiri::HTML.fragment(output).at_css('table')
diff --git a/test/components/info_box_test.rb b/test/components/info_box_test.rb
new file mode 100644
index 0000000..15242e4
--- /dev/null
+++ b/test/components/info_box_test.rb
@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class InfoBoxTest < ActiveMailTest
+  def setup
+    super
+    ActiveMail.configuration.register_component('info-box', ActiveMail::Components::InfoBox)
+  end
+
+  def test_falls_back_to_page_palette
+    ActiveMail.tokens.load(color: { background: '#fafafa', border: '#445566', text: '#111111' })
+    output = render('<info-box>note</info-box>')
+
+    assert_includes output, 'background-color:#fafafa'
+    assert_includes output, 'border-left:5px solid #445566'
+    assert_includes output, 'color:#111111'
+    assert_includes output, 'class="info-box"'
+  end
+
+  def test_box_scoped_tokens_override_page_palette
+    ActiveMail.tokens.load(
+      color: { background: '#ffffff', info_box_background: '#fff7ef', info_box_border: '#2c666e', info_box_text: '#2c666e' }
+    )
+    output = render('<info-box>note</info-box>')
+
+    assert_includes output, 'background-color:#fff7ef'
+    assert_includes output, 'border-left:5px solid #2c666e'
+    assert_includes output, 'color:#2c666e'
+    refute_includes output, 'background-color:#ffffff'
+  end
+
+  def test_border_radius_comes_from_box_token
+    ActiveMail.tokens.radius(:box, '8px')
+    output = render('<info-box>note</info-box>')
+
+    assert_includes output, 'border-radius:8px'
+  end
+end
diff --git a/test/scss_framework_test.rb b/test/scss_framework_test.rb
index 25773b3..b4276cc 100644
--- a/test/scss_framework_test.rb
+++ b/test/scss_framework_test.rb
@@ -31,4 +31,21 @@ def test_dark_mode_ships_the_dual_strategy
   def test_settings_pull_from_the_token_bridge
     assert_includes read('_settings.scss'), 'activemail_tokens'
   end
+
+  def test_button_radius_is_token_driven_and_always_on
+    settings = read('_settings.scss')
+    components = read('_components.scss')
+
+    assert_includes settings, '$am-button-radius: $am-radius-button !default;'
+    # Radius lives on the base rule, not an opt-in .radius selector.
+    assert_match(/\.button table td,\s*\.button a \{[^}]*border-radius: \$am-button-radius;/m, components)
+    refute_match(/\.button\.radius/, components)
+  end
+
+  def test_secondary_and_info_box_mirror_their_tokens
+    components = read('_components.scss')
+
+    assert_match(/\.button\.secondary[^{]*\{[^}]*border: 1px solid \$am-button-secondary-border;/m, components)
+    assert_match(/\.info-box td \{[^}]*border-radius: \$am-box-radius;/m, components)
+  end
 end
diff --git a/test/tokens_test.rb b/test/tokens_test.rb
index e1d5d4e..84e3026 100644
--- a/test/tokens_test.rb
+++ b/test/tokens_test.rb
@@ -48,12 +48,13 @@ def test_getter_returns_nil_for_unknown
     assert_nil ActiveMail::Tokens.new.color(:does_not_exist)
   end
 
-  def test_readers_return_frozen_dup
+  def test_to_h_returns_frozen_snapshot
     tokens = ActiveMail::Tokens.new
 
-    assert_predicate tokens.colors, :frozen?
-    assert_raises(FrozenError) { tokens.colors[:primary] = '#000' }
-    # The internal store is untouched by mutating the returned hash.
+    assert_predicate tokens.to_h, :frozen?
+    assert_predicate tokens.to_h[:color], :frozen?
+    assert_raises(FrozenError) { tokens.to_h[:color][:primary] = '#000' }
+    # The internal store is untouched by mutating the returned snapshot.
     refute_nil tokens.color(:primary)
   end
 
@@ -76,4 +77,60 @@ def test_to_scss_reflects_overrides
   def test_to_scss_underscores_become_dashes
     assert_includes ActiveMail::Tokens.new.to_scss, '$am-color-button-text:'
   end
+
+  def test_radius_group_ships_defaults_and_overrides
+    tokens = ActiveMail::Tokens.new
+
+    refute_empty tokens.radius(:button).to_s
+    tokens.radius(:button, '6px')
+
+    assert_equal '6px', tokens.radius(:button)
+    assert_equal '6px', tokens.radius!(:button)
+    assert_raises(KeyError) { tokens.radius!(:does_not_exist) }
+  end
+
+  def test_to_scss_emits_radius_vars
+    assert_includes ActiveMail::Tokens.new.to_scss, '$am-radius-button:'
+    assert_includes ActiveMail::Tokens.new.to_scss, '$am-radius-box:'
+  end
+
+  def test_load_bulk_configures_grouped_tokens
+    tokens = ActiveMail::Tokens.new
+    tokens.load(color: { primary: '#111111', secondary_text: '#222222' }, radius: { button: '6px' })
+
+    assert_equal '#111111', tokens.color(:primary)
+    assert_equal '#222222', tokens.color(:secondary_text)
+    assert_equal '6px', tokens.radius(:button)
+  end
+
+  def test_load_rejects_unknown_group
+    assert_raises(KeyError) { ActiveMail::Tokens.new.load(nope: { a: 'b' }) }
+  end
+
+  def test_button_style_defaults_to_filled_variant
+    style = ActiveMail::Tokens.new.button_style(:primary)
+
+    assert_equal '#2a9d8f', style.background
+    assert_equal '#ffffff', style.color
+    assert_equal '4px', style.radius
+    assert_nil style.border
+  end
+
+  def test_button_style_secondary_falls_back_to_button_text_without_outline
+    style = ActiveMail::Tokens.new.button_style(:secondary)
+
+    assert_equal '#264653', style.background
+    assert_equal '#ffffff', style.color
+    assert_nil style.border
+  end
+
+  def test_button_style_outline_is_token_driven
+    tokens = ActiveMail::Tokens.new
+    tokens.load(color: { secondary: '#ffffff', secondary_text: '#0f4447', secondary_border: 'rgba(15, 68, 71, 0.6)' })
+    style = tokens.button_style(:secondary)
+
+    assert_equal '#ffffff', style.background
+    assert_equal '#0f4447', style.color
+    assert_equal 'rgba(15, 68, 71, 0.6)', style.border
+  end
 end

From 3e4114aed4381bcd64cf4d5d70f2c2e2d3caf666 Mon Sep 17 00:00:00 2001
From: Philippe <philippe.meyralbe@advitam.fr>
Date: Mon, 15 Jun 2026 19:03:11 +0200
Subject: [PATCH 2/5] chore: bump to 1.1.0 and update changelog

---
 CHANGELOG.md              | 24 ++++++++++++++++++++++++
 lib/activemail/version.rb |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ce11e8..c93d073 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,30 @@ 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).
 
+## [1.1.0] - 2026-06-15
+
+### Added
+
+- `radius` token group (`button`/`box`) and `Tokens#radius`/`#radius!` accessors.
+- `Tokens#button_style(variant)` resolver and the `Tokens::ButtonStyle` value
+  object: button variants (incl. an **outline** secondary) are now token-driven —
+  set `<variant>_text`/`<variant>_border` colors instead of forking the component.
+- Box-scoped `info_box_background`/`info_box_border`/`info_box_text` tokens
+  (falling back to the page palette) plus a box `border-radius`.
+- `Tokens#load(group: {...})` bulk-loader and a single `Tokens#to_h` snapshot.
+
+### Changed
+
+- `<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.
+
+### Removed
+
+- `Tokens#colors`/`#fonts`/`#spacings` readers — use `Tokens#to_h` instead.
+
 ## [1.0.2] - 2026-06-15
 
 ### Fixed
diff --git a/lib/activemail/version.rb b/lib/activemail/version.rb
index 5807bb9..8303bfd 100644
--- a/lib/activemail/version.rb
+++ b/lib/activemail/version.rb
@@ -2,5 +2,5 @@
 # frozen_string_literal: true
 
 module ActiveMail
-  VERSION = '1.0.2'
+  VERSION = '1.1.0'
 end

From c83e13e34813453c0ad5876ec8ecaaa3b840ffc9 Mon Sep 17 00:00:00 2001
From: Philippe <philippe.meyralbe@advitam.fr>
Date: Mon, 15 Jun 2026 19:21:38 +0200
Subject: [PATCH 3/5] refacto: mark Cta/InfoBox#transform overridable and trim
 comments to WHY-only

---
 .../stylesheets/activemail/_components.scss    |  8 ++------
 .../stylesheets/activemail/_settings.scss      | 16 +++++++---------
 lib/activemail/components/base.rb              |  5 +----
 lib/activemail/components/cta.rb               |  2 +-
 lib/activemail/components/info_box.rb          |  2 +-
 lib/activemail/tokens.rb                       | 18 ++++--------------
 lib/activemail/tokens/button_style.rb          |  6 ++----
 lib/activemail/tokens/scss_serializer.rb       |  5 ++---
 .../activemail/templates/initializer.rb        |  4 +---
 9 files changed, 21 insertions(+), 45 deletions(-)

diff --git a/app/assets/stylesheets/activemail/_components.scss b/app/assets/stylesheets/activemail/_components.scss
index d605906..bbb99ed 100644
--- a/app/assets/stylesheets/activemail/_components.scss
+++ b/app/assets/stylesheets/activemail/_components.scss
@@ -1,7 +1,5 @@
-// Background on both inner cell and link so the whole bulletproof button
-// (table.button > td > table > td > a) is filled and clickable. Radius is applied
-// by default (progressive enhancement — clients that don't support it just ignore it),
-// keeping CSS-driven <button> consistent with the always-rounded <cta> component.
+// 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;
@@ -21,7 +19,6 @@
   border: 1px solid $am-button-secondary-border;
 }
 
-// CTA mirrors the bulletproof button; colors are also inlined by the component.
 .cta table td,
 .cta a {
   background: $am-button-primary-bg;
@@ -55,7 +52,6 @@
   padding: $am-spacing-md;
 }
 
-// Spacer hook — height is set inline per instance; this is a styling anchor.
 .spacer {
   width: 100%;
 }
diff --git a/app/assets/stylesheets/activemail/_settings.scss b/app/assets/stylesheets/activemail/_settings.scss
index f284887..3fca531 100644
--- a/app/assets/stylesheets/activemail/_settings.scss
+++ b/app/assets/stylesheets/activemail/_settings.scss
@@ -1,5 +1,4 @@
-// Semantic aliases mapped from the $am-* token vars. All !default so a host
-// app can pre-declare any value before importing the framework.
+// All !default so a host app can pre-declare any value before importing the framework.
 @import "activemail/activemail_tokens";
 
 // Typography
@@ -12,24 +11,23 @@ $am-background: $am-color-background !default;
 $am-muted: $am-color-muted !default;
 $am-border: $am-color-border !default;
 
-// Buttons — mirror the Cta component's token-driven inline styles.
+// Buttons
 $am-button-primary-bg: $am-color-primary !default;
 $am-button-secondary-bg: $am-color-secondary !default;
 $am-button-color: $am-color-button-text !default;
-// Secondary text/border fall back to the filled-button defaults (white text, no
-// outline); override the *-secondary-* tokens for an outline variant.
+// Secondary falls back to filled-button defaults; override *-secondary-* for an outline variant.
 $am-button-secondary-color: $am-color-button-text !default;
 $am-button-secondary-border: transparent !default;
 $am-button-radius: $am-radius-button !default;
 
-// Info box — box-scoped, falling back to the page palette.
+// Info box
 $am-info-box-bg: $am-background !default;
 $am-info-box-border: $am-border !default;
 $am-info-box-text: $am-text !default;
 $am-box-radius: $am-radius-box !default;
 
-// Grid — the gem emits no gutters; we provide them via column padding.
-// Width follows config.container_width via the token bridge, so the SCSS grid
-// stays aligned with the transpiled markup (ghost tables, column max-width).
+// Grid
+// Width follows config.container_width via the token bridge so the SCSS grid stays
+// aligned with the transpiled markup (ghost tables, column max-width).
 $am-container-width: $am-grid-container-width !default;
 $am-gutter: $am-spacing-sm !default;
diff --git a/lib/activemail/components/base.rb b/lib/activemail/components/base.rb
index a3823fb..77e5a0b 100644
--- a/lib/activemail/components/base.rb
+++ b/lib/activemail/components/base.rb
@@ -36,7 +36,6 @@ class Base
       # Layout tables: presentation role (a11y) and zeroed legacy spacing.
       TABLE_RESET = 'role="presentation" border="0" cellpadding="0" cellspacing="0"'
 
-      # Click-target padding shared by <button> and <cta> anchors.
       BUTTON_PADDING = 'padding:12px 24px;'
 
       sig { params(core: ::ActiveMail::Core).void }
@@ -108,9 +107,7 @@ def target_attribute(node)
         node.attributes['target'] ? %( target="#{escape_attr(node.attributes['target'])}") : ''
       end
 
-      # Shared bulletproof-button scaffold (nested presentation tables + cell).
-      # Both <button> (CSS-driven) and <cta> (inline token styles) build on it, so
-      # the Outlook-safe structure lives in exactly one place.
+      # Outlook-safe nested-table structure kept in one place for <button> and <cta>.
       sig do
         params(outer_classes: String, inner: String, cell_style: String, outer_extra: String).returns(String)
       end
diff --git a/lib/activemail/components/cta.rb b/lib/activemail/components/cta.rb
index f3325c6..8eaf759 100644
--- a/lib/activemail/components/cta.rb
+++ b/lib/activemail/components/cta.rb
@@ -10,7 +10,7 @@ module Components
     class Cta < Base
       extend T::Sig
 
-      sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
+      sig { override.overridable.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
         # A CTA without a link is an authoring bug — surface it at render time.
         raise ArgumentError, '<cta> requires an href attribute' if node.attr('href').to_s.strip.empty?
diff --git a/lib/activemail/components/info_box.rb b/lib/activemail/components/info_box.rb
index 35a2ce6..62e47c3 100644
--- a/lib/activemail/components/info_box.rb
+++ b/lib/activemail/components/info_box.rb
@@ -9,7 +9,7 @@ module Components
     class InfoBox < Base
       extend T::Sig
 
-      sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
+      sig { override.overridable.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
         classes = combine_classes(node, 'info-box')
         [
diff --git a/lib/activemail/tokens.rb b/lib/activemail/tokens.rb
index 4d7b178..44a96ea 100644
--- a/lib/activemail/tokens.rb
+++ b/lib/activemail/tokens.rb
@@ -6,9 +6,6 @@
 require_relative 'tokens/scss_serializer'
 
 module ActiveMail
-  # Design-tokens registry: the single Ruby source of truth, bridged to SCSS by #to_scss.
-  # Groups (color/font/spacing/radius) share one storage + emission path so adding a
-  # group costs a single GROUPS entry (Open/Closed) — no per-group duplication.
   class Tokens
     extend T::Sig
 
@@ -56,8 +53,7 @@ class Tokens
       TokenMap
     )
 
-    # The group registry: drives initialization and SCSS emission. Add a group here
-    # and it gets storage, accessors-backing, and a $am-<group>-* bridge for free.
+    # Open/Closed: adding a group here is the only change needed to wire it everywhere.
     GROUPS = T.let(
       {
         color: DEFAULT_COLORS,
@@ -73,8 +69,6 @@ def initialize
       @stores = T.let(GROUPS.transform_values(&:dup), T::Hash[Symbol, TokenMap])
     end
 
-    # value given → set, omitted → get. Open registry: any key is accepted (define
-    # custom tokens for custom components); the bang readers fail loud on read.
     sig { params(name: T.any(String, Symbol), value: T.nilable(String)).returns(T.nilable(String)) }
     def color(name, value = nil)
       access(:color, name, value)
@@ -95,8 +89,7 @@ def radius(name, value = nil)
       access(:radius, name, value)
     end
 
-    # Strict reads for code that must have the token (e.g. a component's inline
-    # color): raise rather than interpolating nil into the CSS.
+    # Raise rather than interpolating nil into the CSS.
     sig { params(name: T.any(String, Symbol)).returns(String) }
     def color!(name)
       fetch!(:color, name)
@@ -117,14 +110,12 @@ def radius!(name)
       fetch!(:radius, name)
     end
 
-    # Frozen snapshot of every group: mutating the result can't bypass the DSL setters.
+    # Frozen snapshot: mutating the result can't bypass the DSL setters.
     sig { returns(T::Hash[Symbol, TokenMap]) }
     def to_h
       @stores.transform_values { |store| store.dup.freeze }.freeze
     end
 
-    # Bulk-load tokens grouped by family — `tokens.load(color: {...}, radius: {...})`.
-    # Lets a host app configure everything in one block instead of line-by-line.
     sig { params(groups: TokenMap).void }
     def load(**groups)
       groups.each do |group, values|
@@ -132,7 +123,6 @@ def load(**groups)
       end
     end
 
-    # Resolves a button variant (:primary/:secondary/…) to inline-ready values.
     sig { params(variant: T.any(String, Symbol)).returns(ButtonStyle) }
     def button_style(variant)
       ButtonStyle.from(self, variant)
@@ -160,7 +150,7 @@ def access(group, name, value)
       store = store_for(group)
       key = name.to_sym
       return store[key] if value.nil?
-      # Emitted verbatim into SCSS by #to_scss — reject blanks that would yield broken CSS.
+      # Emitted verbatim into SCSS — reject blanks that would yield broken CSS.
       raise ArgumentError, "token #{key} value must not be blank" if value.strip.empty?
 
       store[key] = value
diff --git a/lib/activemail/tokens/button_style.rb b/lib/activemail/tokens/button_style.rb
index 3ed2388..94f6b46 100644
--- a/lib/activemail/tokens/button_style.rb
+++ b/lib/activemail/tokens/button_style.rb
@@ -5,8 +5,7 @@
 
 module ActiveMail
   class Tokens
-    # Resolved appearance of a button variant — consumed by the Cta component and
-    # mirrored by the .cta/.button SCSS. `border` nil means "no outline".
+    # `border` nil means "no outline".
     class ButtonStyle < T::Struct
       extend T::Sig
 
@@ -15,8 +14,7 @@ class ButtonStyle < T::Struct
       const :radius, String
       const :border, T.nilable(String)
 
-      # Resolves a variant (:primary/:secondary/…) from a token registry. color
-      # falls back to :button_text; border is opt-in (a "<variant>_border" token).
+      # color falls back to :button_text; border is opt-in (a "<variant>_border" token).
       sig { params(tokens: ActiveMail::Tokens, variant: T.any(String, Symbol)).returns(ButtonStyle) }
       def self.from(tokens, variant)
         new(
diff --git a/lib/activemail/tokens/scss_serializer.rb b/lib/activemail/tokens/scss_serializer.rb
index 968e922..c37f505 100644
--- a/lib/activemail/tokens/scss_serializer.rb
+++ b/lib/activemail/tokens/scss_serializer.rb
@@ -5,9 +5,8 @@
 
 module ActiveMail
   class Tokens
-    # Ruby → SCSS bridge for the token stores. Each token becomes a `$am-<group>-<name>`
-    # !default var (underscores → dashes) so a host app can pre-declare overrides upstream.
-    # Values are emitted verbatim (trusted, app-controlled input) — not escaped.
+    # !default lets a host pre-declare overrides upstream. Values are emitted
+    # verbatim (trusted, app-controlled input) — not escaped.
     module ScssSerializer
       extend T::Sig
 
diff --git a/lib/generators/activemail/templates/initializer.rb b/lib/generators/activemail/templates/initializer.rb
index d7c3bc2..9fc8dd2 100644
--- a/lib/generators/activemail/templates/initializer.rb
+++ b/lib/generators/activemail/templates/initializer.rb
@@ -20,9 +20,7 @@
   # How malformed markup is handled: :warn (default), :ignore, or :raise.
   # config.on_parse_error = :warn
 
-  # Design tokens — the single source of truth, bridged to SCSS via $am-*.
-  # Configure values here (literals, including rgba()/transparent) rather than
-  # parsing SCSS back into Ruby: the bridge only flows Ruby → SCSS.
+  # Design tokens. Configure literals here (the bridge only flows Ruby → SCSS).
   # config.tokens.color :primary, "#2a9d8f"
   # config.tokens.color :secondary, "#264653"
   # config.tokens.font :heading, "Georgia, serif"

From e58a15a0ec4a0649e4f7e27e538a80932694f7b9 Mon Sep 17 00:00:00 2001
From: Philippe <philippe.meyralbe@advitam.fr>
Date: Mon, 15 Jun 2026 19:46:41 +0200
Subject: [PATCH 4/5] refacto: restore two WHY comments and reuse TokenMap in
 ScssSerializer

---
 app/assets/stylesheets/activemail/_components.scss | 1 +
 app/assets/stylesheets/activemail/_settings.scss   | 4 ++--
 lib/activemail/tokens/scss_serializer.rb           | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/activemail/_components.scss b/app/assets/stylesheets/activemail/_components.scss
index bbb99ed..2211f2c 100644
--- a/app/assets/stylesheets/activemail/_components.scss
+++ b/app/assets/stylesheets/activemail/_components.scss
@@ -52,6 +52,7 @@
   padding: $am-spacing-md;
 }
 
+// Height is set inline per instance; this rule is just a styling anchor.
 .spacer {
   width: 100%;
 }
diff --git a/app/assets/stylesheets/activemail/_settings.scss b/app/assets/stylesheets/activemail/_settings.scss
index 3fca531..cc2d2b3 100644
--- a/app/assets/stylesheets/activemail/_settings.scss
+++ b/app/assets/stylesheets/activemail/_settings.scss
@@ -26,8 +26,8 @@ $am-info-box-border: $am-border !default;
 $am-info-box-text: $am-text !default;
 $am-box-radius: $am-radius-box !default;
 
-// Grid
-// Width follows config.container_width via the token bridge so the SCSS grid stays
+// Grid — the gem emits no gutters; we provide them via column padding. Width
+// follows config.container_width via the token bridge so the SCSS grid stays
 // aligned with the transpiled markup (ghost tables, column max-width).
 $am-container-width: $am-grid-container-width !default;
 $am-gutter: $am-spacing-sm !default;
diff --git a/lib/activemail/tokens/scss_serializer.rb b/lib/activemail/tokens/scss_serializer.rb
index c37f505..9517063 100644
--- a/lib/activemail/tokens/scss_serializer.rb
+++ b/lib/activemail/tokens/scss_serializer.rb
@@ -10,7 +10,7 @@ class Tokens
     module ScssSerializer
       extend T::Sig
 
-      sig { params(stores: T::Hash[Symbol, T::Hash[Symbol, String]]).returns(String) }
+      sig { params(stores: T::Hash[Symbol, TokenMap]).returns(String) }
       def self.call(stores)
         lines = stores.flat_map do |group, store|
           store.map { |name, value| "$am-#{group}-#{name.to_s.tr('_', '-')}: #{value} !default;" }

From f3600dfd415bfda115d0b4f52ca2196091d2d477 Mon Sep 17 00:00:00 2001
From: Philippe <philippe.meyralbe@advitam.fr>
Date: Mon, 15 Jun 2026 20:04:36 +0200
Subject: [PATCH 5/5] fix: avoid doubled outline border and unreadable
 dark-mode secondary text

- Cta inlined the secondary border on both the cell and the nested anchor; keep it
  on the cell only (a stacked <a> border doubles the line in many clients)
- dark mode forced button-text on .secondary, unreadable on an outline (light)
  fill; restore the secondary text color in both dark-mode strategies
- mirror the cell-only border in the .button/.cta SCSS
---
 app/assets/stylesheets/activemail/_components.scss | 7 +++++++
 app/assets/stylesheets/activemail/_dark.scss       | 5 ++++-
 lib/activemail/components/cta.rb                   | 3 ++-
 test/components/cta_test.rb                        | 3 +++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/activemail/_components.scss b/app/assets/stylesheets/activemail/_components.scss
index 2211f2c..c515243 100644
--- a/app/assets/stylesheets/activemail/_components.scss
+++ b/app/assets/stylesheets/activemail/_components.scss
@@ -16,6 +16,10 @@
 .button.secondary a {
   background: $am-button-secondary-bg;
   color: $am-button-secondary-color;
+}
+
+// Border on the cell only — a repeated <a> border would double the line.
+.button.secondary table td {
   border: 1px solid $am-button-secondary-border;
 }
 
@@ -35,6 +39,9 @@
 .cta.secondary a {
   background: $am-button-secondary-bg;
   color: $am-button-secondary-color;
+}
+
+.cta.secondary table td {
   border: 1px solid $am-button-secondary-border;
 }
 
diff --git a/app/assets/stylesheets/activemail/_dark.scss b/app/assets/stylesheets/activemail/_dark.scss
index 07d14c0..b5c257b 100644
--- a/app/assets/stylesheets/activemail/_dark.scss
+++ b/app/assets/stylesheets/activemail/_dark.scss
@@ -45,12 +45,14 @@ $am-dark-link: $am-color-primary !default;
     color: $am-color-button-text !important;
   }
 
-  // Keep the secondary variant's color — the primary rule above would erase it.
+  // Restore the secondary fill AND text — the primary rule above forces button-text,
+  // which would be unreadable on an outline (light) secondary fill.
   .button.secondary table td,
   .button.secondary a,
   .cta.secondary table td,
   .cta.secondary a {
     background: $am-color-secondary !important;
+    color: $am-button-secondary-color !important;
   }
 
   // Panels keep their inline background unless overridden here, which would
@@ -111,6 +113,7 @@ $am-dark-link: $am-color-primary !default;
   [data-ogsc] .cta.secondary table td,
   [data-ogsc] .cta.secondary a {
     background: $am-color-secondary !important;
+    color: $am-button-secondary-color !important;
   }
 
   [data-ogsc] .callout-inner,
diff --git a/lib/activemail/components/cta.rb b/lib/activemail/components/cta.rb
index 8eaf759..9f1bf6a 100644
--- a/lib/activemail/components/cta.rb
+++ b/lib/activemail/components/cta.rb
@@ -32,11 +32,12 @@ def cell_style(style)
         "background:#{style.background};border-radius:#{style.radius};#{border_css(style)}"
       end
 
+      # No border here: it lives on the cell only — a repeated <a> border doubles the line.
       sig { params(style: ActiveMail::Tokens::ButtonStyle).returns(String) }
       def link_style(style)
         "display:inline-block;text-decoration:none;#{BUTTON_PADDING}" \
           "background:#{style.background};color:#{style.color};font-weight:bold;" \
-          "border-radius:#{style.radius};#{border_css(style)}"
+          "border-radius:#{style.radius};"
       end
 
       sig { params(style: ActiveMail::Tokens::ButtonStyle).returns(String) }
diff --git a/test/components/cta_test.rb b/test/components/cta_test.rb
index 702bd52..cc7c078 100644
--- a/test/components/cta_test.rb
+++ b/test/components/cta_test.rb
@@ -58,6 +58,9 @@ def test_cta_secondary_outline_is_token_driven
     assert_includes output, 'background:#ffffff'
     assert_includes output, 'color:#0f4447'
     assert_includes output, 'border:1px solid rgba(15, 68, 71, 0.6)'
+    # Border on the cell only — never doubled on the nested anchor.
+    assert_equal 1, output.scan('border:1px solid').size
+    refute_includes Nokogiri::HTML.fragment(output).at_css('a')['style'].to_s, 'border:1px solid'
   end
 
   def test_cta_secondary_keeps_secondary_class