feat: primary-colored square outline on active toggle buttons

- Add 'active' expression to each toolbar icon button in widgets.py
- Buttons switch to variant='outlined' + color='primary' when on
- CSS forces icon color to stay black via .tcmap-icon-black and
  .tcmap-editor-icon selectors (only border gets primary color)
- border-radius: 4px gives square outline shape
- Wavelet example toolbar buttons use same pattern

Author: olearypatrick

README.md

@@ -128,15 +128,15 @@ The toolbar has three areas, left to right:
 
 | # | Off | On | Toggle | Description |
 |---|-----|-----|--------|-------------|
-| 1 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/palette-outline.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/palette.svg" width="24"> | Category Filter | Shows/hides category checkboxes (Sequential, Multi-Sequential, Diverging, Cyclic) in the *Settings panel* to control which presets appear in the list. |
-| 2 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/blinds.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/blinds-open.svg" width="24"> | Colorblind Safe | Limits the *Preset list* to colorblind-safe presets only. Filters within the selected categories. |
-| 3 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/invert-colors-off.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/invert-colors.svg" width="24"> | Invert | Reverses the colormap direction (shown in the *Colorbar* and *Preset list*). |
-| 4a | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/stairs.svg" width="24"> | | Scale: Linear | Click to switch to Log scale. In diverging mode, switches to SymLog. |
-| 4b | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/math-log.svg" width="24"> | | Scale: Log | Click to switch to SymLog scale. **Note**: Not available in diverging mode. |
-| 4c | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/sine-wave.svg" width="24"> | | Scale: SymLog | Click to return to Linear scale. |
-| 5 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/triangle-outline.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/triangle.svg" width="24"> | Δ Difference | Enters diverging mode: forces diverging-only presets in *Preset list*, symmetric range around zero, and exposes \|max\| and ε controls in *Settings panel*. |
-| 6 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/pencil.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/arrow-expand-horizontal.svg" width="24"> | Custom Range | Toggles between data-driven range and manual Min/Max inputs exposed in the *Settings panel*. Locked (not shown in *Settings panel*)in diverging mode. |
-| 7 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/gradient-horizontal.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/view-sequential.svg" width="24"> | Discrete | Switches between continuous gradient and discrete color banding. Exposes "Colors per tick interval" (Linear) or "Colors per magnitude" (Log/SymLog) control in *Settings panel*. |
+| 1 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/palette-outline.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/palette.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | Category Filter | Shows/hides category checkboxes (Sequential, Multi-Sequential, Diverging, Cyclic) in the *Settings panel* to control which presets appear in the list. |
+| 2 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/blinds.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/blinds-open.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | Colorblind Safe | Limits the *Preset list* to colorblind-safe presets only. Filters within the selected categories. |
+| 3 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/invert-colors-off.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/invert-colors.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | Invert | Reverses the colormap direction (shown in the *Colorbar* and *Preset list*). |
+| 4a | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/stairs.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | | Scale: Linear | Click to switch to Log scale. In diverging mode, switches to SymLog. |
+| 4b | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/math-log.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | | Scale: Log | Click to switch to SymLog scale. **Note**: Not available in diverging mode. |
+| 4c | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/sine-wave.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | | Scale: SymLog | Click to return to Linear scale. |
+| 5 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/triangle-outline.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/triangle.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | Δ Difference | Enters diverging mode: forces diverging-only presets in *Preset list*, symmetric range around zero, and exposes \|max\| and ε controls in *Settings panel*. |
+| 6 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/pencil.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/arrow-expand-horizontal.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | Custom Range | Toggles between data-driven range and manual Min/Max inputs exposed in the *Settings panel*. Locked (not shown in *Settings panel*)in diverging mode. |
+| 7 | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/gradient-horizontal.svg" width="24"> | <img src="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/view-sequential.svg" width="24" style="border: 2px solid #1867C0; border-radius: 4px; padding: 2px;"> | Discrete | Switches between continuous gradient and discrete color banding. Exposes "Colors per tick interval" (Linear) or "Colors per magnitude" (Log/SymLog) control in *Settings panel*. |
 
 #### Scale Modes
 

docs/images/clicked-delta-linear.png

@@ -235,25 +235,33 @@ def _build_ui(self):
                     icon="mdi-arrow-up-bold",
                     click="show_up = !show_up",
                     density="compact",
-                    variant=("show_up ? 'flat' : 'outlined'",),
+                    variant=("show_up ? 'outlined' : 'text'",),
+                    color=("show_up ? 'primary' : undefined",),
+                    classes="rounded tcmap-icon-black",
                 )
                 v3.VBtn(
                     icon="mdi-arrow-down-bold",
                     click="show_down = !show_down",
                     density="compact",
-                    variant=("show_down ? 'flat' : 'outlined'",),
+                    variant=("show_down ? 'outlined' : 'text'",),
+                    color=("show_down ? 'primary' : undefined",),
+                    classes="rounded tcmap-icon-black",
                 )
                 v3.VBtn(
                     icon="mdi-arrow-left-bold",
                     click="show_left = !show_left",
                     density="compact",
-                    variant=("show_left ? 'flat' : 'outlined'",),
+                    variant=("show_left ? 'outlined' : 'text'",),
+                    color=("show_left ? 'primary' : undefined",),
+                    classes="rounded tcmap-icon-black",
                 )
                 v3.VBtn(
                     icon="mdi-arrow-right-bold",
                     click="show_right = !show_right",
                     density="compact",
-                    variant=("show_right ? 'flat' : 'outlined'",),
+                    variant=("show_right ? 'outlined' : 'text'",),
+                    color=("show_right ? 'primary' : undefined",),
+                    classes="rounded tcmap-icon-black",
                 )
                 v3.VBtn(
                     icon="mdi-crop-free",

docs/images/clicked-delta-symlog.png

@@ -12,6 +12,12 @@
   width: 24px !important;
   height: 24px !important;
   padding: 0;
+  border-radius: 4px !important;
+}
+
+.tcmap-editor-icon.v-btn--variant-outlined .v-icon,
+.tcmap-icon-black.v-btn--variant-outlined .v-icon {
+  color: rgba(0, 0, 0, 0.87) !important;
 }
 
 .tcmap-editor-search {