Merge pull request #69 from wpgaurav/claude/improve-toc-block-design-hB14H

Refactor TOC block styling to use theme-aware color-mix

Author: wpgaurav

acf-blocks.php

@@ -3,7 +3,7 @@
  * Plugin Name: ACF Blocks
  * Plugin URI: https://github.com/wpgaurav/acf-blocks-plugin
  * Description: A collection of ACF Pro blocks for the WordPress block editor with automatic field group registration.
- * Version: 2.3.0
+ * Version: 2.3.1
  * Requires at least: 6.0
  * Requires PHP: 7.4
  * Author: Gaurav Tiwari
@@ -19,7 +19,7 @@
 }
 
 // Plugin constants
-define( 'ACF_BLOCKS_VERSION', '2.3.0' );
+define( 'ACF_BLOCKS_VERSION', '2.3.1' );
 define( 'ACF_BLOCKS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'ACF_BLOCKS_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
 define( 'ACF_BLOCKS_PLUGIN_FILE', __FILE__ );

blocks/toc-block/toc-block.css

@@ -356,7 +356,7 @@ class="<?php echo esc_attr( implode( ' ', $block_classes ) ); ?>"
 // Inline CSS for sticky behavior (only when sticky is enabled)
 if ( $sticky && ! defined( 'ACF_TOC_STICKY_CSS_LOADED' ) ) :
     define( 'ACF_TOC_STICKY_CSS_LOADED', true );
-    $sticky_css = ':root{--acf-toc-sticky-offset:calc(var(--header-height,0px) + var(--wp-admin--admin-bar--height,0px) + 20px)}@media(min-width:1400px){.acf-toc--sticky{position:fixed;top:var(--acf-toc-sticky-offset);left:0;max-width:220px;max-height:calc(100vh - var(--acf-toc-sticky-offset) - 20px);overflow-y:auto;scrollbar-width:thin;font-size:0.8125em;line-height:1.4;z-index:100;padding:1rem}.acf-toc--sticky .acf-toc__title{font-size:0.75em;margin-bottom:0.5em;padding-bottom:0.375em}.acf-toc--sticky .acf-toc__item{padding:0}.acf-toc--sticky .acf-toc__link{padding:0.15em 0}.acf-toc--sticky .acf-toc__sublist{padding-left:0.75em;margin-top:0;margin-left:0}.acf-toc--sticky::-webkit-scrollbar{width:3px}.acf-toc--sticky::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.15);border-radius:2px}}';
+    $sticky_css = ':root{--acf-toc-sticky-offset:calc(var(--header-height,0px) + var(--wp-admin--admin-bar--height,0px) + 20px)}@media(min-width:1400px){.acf-toc--sticky{position:fixed;top:var(--acf-toc-sticky-offset);left:0;max-width:220px;max-height:calc(100vh - var(--acf-toc-sticky-offset) - 20px);overflow-y:auto;scrollbar-width:thin;font-size:0.8125em;line-height:1.4;z-index:100;padding:1rem;border-radius:10px}.acf-toc--sticky .acf-toc__title{font-size:0.75em;margin-bottom:0.5em;padding-bottom:0.375em}.acf-toc--sticky .acf-toc__item{padding:0}.acf-toc--sticky .acf-toc__link{padding:0.15em 0.375em;border-radius:4px}.acf-toc--sticky .acf-toc__sublist{padding-left:0.75em;margin-top:0;margin-left:0}.acf-toc--sticky::-webkit-scrollbar{width:3px}.acf-toc--sticky::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,currentColor 15%,transparent);border-radius:2px}}';
     echo '<style>' . acf_blocks_minify_css( $sticky_css ) . '</style>';
     // Set custom offset if provided
     if ( $sticky_offset && $sticky_offset != 20 ) {

blocks/toc-block/toc-block.php

@@ -10,13 +10,18 @@ Create an SEO-optimized table of contents block that auto-generates from page he
 
 ## Design Notes
 
-- Container has `border: 1px solid rgba(0,0,0,0.08)`, `border-radius: 10px`, `padding: 1.25rem 1.5rem`
-- Title is uppercase, `0.8125em`, at `0.5` opacity, separated from list by a thin bottom border
-- Links use `opacity: 0.65`, transitioning to `1` on hover
-- Active link gets `font-weight: 600` and full opacity
-- Font size is `0.875em`
-- Collapsible uses `<details>/<summary>` with SVG chevron via CSS mask
-- Dark mode: border adjusts to `rgba(255,255,255,0.1)`
+- Inherits font-family from the active theme via `font: inherit`
+- All colors derived from `currentColor` via `color-mix()` — automatically adapts to any theme (light or dark, any palette)
+- Container: `background: color-mix(in srgb, currentColor 3%, transparent)`, `border: 1px solid color-mix(in srgb, currentColor 8%, transparent)`, `border-radius: 12px`, `padding: 1rem 1.25rem`
+- Title is uppercase, `0.8125em`, at `0.6` opacity, separated from list by a thin bottom border
+- Links use `opacity: 0.6`, with `border-radius: 6px` and `padding: 0.2em 0.4em`
+- Links on hover get `opacity: 1` and subtle `currentColor`-based background highlight
+- Active link gets `font-weight: 600`, full opacity, and `currentColor`-based background
+- Ordered lists (`ol`) show CSS counters (e.g. "1. ", "2. ") via `::before` pseudo-elements with `tabular-nums`
+- Nested sublists have a left border guide line derived from `currentColor`; nested `ol` sublists get independent counters
+- Font size is `0.875em`, line-height `1.5`
+- Collapsible uses `<details>/<summary>` with SVG chevron via CSS mask; summary has hover background
+- No separate dark mode rules needed — `color-mix(in srgb, currentColor, transparent)` adapts automatically
 - Headings inside ACF blocks (`data-acf-block` wrappers) are excluded from TOC by default
 
 ## Fields