feat(events): filterable Add-to-Calendar toggle classes + ticket-button token fallbacks

docs/integration-api.md

@@ -93,6 +93,7 @@ signatures are stable.
 | Filter | Signature | Purpose |
 |---|---|---|
 | `data_machine_events_ticket_button_classes` | `(array $classes)` | Modify CSS classes on the ticket button. |
+| `data_machine_events_add_to_calendar_button_classes` | `(array $classes, int $post_id)` | Modify the style classes on the Add-to-Calendar toggle. Mirrors the ticket-button filter so consumers can route the toggle through their own button system (e.g. theme `button-*` classes). Base classes `dm-events-action-btn dm-events-add-to-calendar-toggle` are always present; default style class is `ticket-button`. |
 | `data_machine_events_max_occurrence_display` | `(int $max)` | Cap on multi-occurrence display rows. |
 | `data_machine_events_non_ticket_price_patterns` | `(array $patterns)` | Strings that suppress the ticket button. |
 

inc/Blocks/EventDetails/add-to-calendar-button.php

@@ -70,11 +70,37 @@ function data_machine_events_render_add_to_calendar_button( $post_id, $ticket_ur
 		}
 
 		$menu_id = 'dm-atc-menu-' . $post_id;
+
+		/**
+		 * Filters the CSS classes applied to the Add-to-Calendar toggle button.
+		 *
+		 * Mirrors `data_machine_events_ticket_button_classes` so a consuming
+		 * theme/plugin can route the toggle through its own button system (e.g.
+		 * map it onto theme `button-*` classes) instead of relying on the
+		 * default `ticket-button` styling. The base classes
+		 * (`dm-events-action-btn dm-events-add-to-calendar-toggle`) are always
+		 * present; only the trailing style classes are filterable.
+		 *
+		 * @since 0.44.2
+		 *
+		 * @param string[] $classes Style classes for the toggle. Default `['ticket-button']`.
+		 * @param int      $post_id Event post ID.
+		 */
+		$toggle_style_classes = apply_filters(
+			'data_machine_events_add_to_calendar_button_classes',
+			array( 'ticket-button' ),
+			$post_id
+		);
+
+		$toggle_classes = array_merge(
+			array( 'dm-events-action-btn', 'dm-events-add-to-calendar-toggle' ),
+			(array) $toggle_style_classes
+		);
 		?>
 		<div class="dm-events-add-to-calendar" data-dm-add-to-calendar>
 			<button
 				type="button"
-				class="dm-events-action-btn dm-events-add-to-calendar-toggle ticket-button"
+				class="<?php echo esc_attr( implode( ' ', $toggle_classes ) ); ?>"
 				aria-haspopup="true"
 				aria-expanded="false"
 				aria-controls="<?php echo esc_attr( $menu_id ); ?>"

inc/Blocks/EventDetails/src/frontend.css

@@ -46,20 +46,28 @@
     font-size: 0.85rem;
 }
 
-/* Ticket Button */
+/* Ticket Button
+ *
+ * Token-first with fallbacks so the button never renders with an
+ * unresolved background on themes that don't define `--data-machine-*`
+ * (the toggle and ticket button both rely on this). Consumers that map
+ * these buttons onto their own button system (via
+ * `data_machine_events_ticket_button_classes` /
+ * `data_machine_events_add_to_calendar_button_classes`) override this
+ * entirely. */
 .ticket-button {
     display: inline-block;
     padding: 0.75rem 1.5rem;
-    background: var(--data-machine-text-accent);
+    background: var(--data-machine-text-accent, #2271b1);
     color: #fff;
     text-decoration: none;
-    border-radius: var(--data-machine-border-radius);
+    border-radius: var(--data-machine-border-radius, 4px);
     font-weight: 500;
     transition: background-color 0.2s;
 }
 
 .ticket-button:hover {
-    background: var(--data-machine-border-focus);
+    background: var(--data-machine-border-focus, #135e96);
     color: #fff;
 }