CSS consolidation and clean-up

Author: vernonstinebaker

.stylelintrc.json

@@ -0,0 +1,4 @@
+{
+  "ignoreFiles": ["src/main/resources/styles/**/*.css"],
+  "rules": {}
+}

.vscode/settings.json

@@ -5,5 +5,10 @@
         "strings": "off",
         "other": "off"
     },
-    "java.debug.settings.onBuildFailureProceed": true
+    "java.debug.settings.onBuildFailureProceed": true,
+    // Disable built-in CSS validation (not JavaFX aware) to suppress false positives
+    "css.validate": false,
+    // Keep stylelint enabled (it ignores JavaFX styles via .stylelintrc.json)
+    "stylelint.enable": true,
+    "stylelint.validate": ["css"]
 }

THEMING.md

@@ -0,0 +1,69 @@
+# Theming & Style Guide
+
+This project centralizes JavaFX styling to reduce duplication and keep visual behavior consistent.
+
+## Design Tokens (documented)
+
+Because JavaFX CSS lacks native variables, tokens are documented (not enforced) in `global-theme.css`:
+
+```text
+ORANGE_BASE_TOP        #ffb066
+ORANGE_BASE_BOTTOM     #ff8a33
+ORANGE_HOVER_TOP       #ff8a33
+ORANGE_HOVER_BOTTOM    #e56700
+ORANGE_ACTIVE_TOP      #cc5800
+ORANGE_ACTIVE_BOTTOM   #e56700
+LIGHT_BG_TOP           #fcfcfc
+LIGHT_BG_BOTTOM        #e9e9e9
+BORDER_LIGHT           #c9c9c9
+HOVER_BG_TRANSLUCENT   rgba(255,138,51,0.18)
+ARMED_BG_TRANSLUCENT   rgba(255,138,51,0.32)
+FOCUS_RING             rgba(255,138,51,0.6)
+```
+
+Dark & high-contrast themes adapt these token intents.
+
+## File Roles
+
+- `global-theme.css`: Core component + icon button styling (single source of truth for hover/armed states).
+- `semantic-theme.css`: Domain / semantic containers (tree, panels, action bars) & subtle layout gradients.
+- `global-theme-*.css`: Variant overlays (dark, light override set, high contrast). Only put deltas here.
+- `fdd-canvas.css`: Canvas-specific layout/styling; avoids redefining global icon button states.
+
+## Icon / Action Buttons
+
+Use the classes:
+
+- `fdd-icon-button` (button container base)
+- `fdd-action-button` (semantic grouping if needed)
+- `fdd-icon` (icon glyph fill/gradient)
+
+Do NOT add per-screen hover overrides; adjust only in `global-theme.css`.
+
+## Adding New Buttons
+
+1. Create `Button b = new Button();`
+2. Add icon with `FontAwesomeIconView` and style class `fdd-icon`.
+3. `b.getStyleClass().addAll("fdd-action-button", "fdd-icon-button");`
+4. Optional semantic text color override: add a specific class (e.g. `export-button`) and declare only `-fx-text-fill` in a screen stylesheet.
+
+## Theme Extension Steps
+
+1. Document any new color in the token comment block in `global-theme.css`.
+2. Add adjusted values in dark/highcontrast variant files ONLY if different.
+3. Prefer gradients or translucent backgrounds to solid blocks for hover states.
+
+## High Contrast Considerations
+
+- Ensure focus rings remain visible (see `:focused` rule in high contrast file).
+- Keep sufficient contrast ratio (WCAG AA). Use the orange accent (#ff8a33) sparingly for focus / affordances.
+
+## Cleanup Conventions
+
+- When deprecating a style file, remove its load and delete the file rather than leaving empty placeholders.
+- Avoid wildcard `.button` rules; scope via class names to prevent style bleed.
+
+## Future Ideas
+
+- Build a small pre-process step (optional) to validate tokens.
+- Introduce a screenshot regression test harness for critical UI elements.

src/main/java/net/sourceforge/fddtools/ui/fx/FDDActionPanelFX.java

@@ -38,11 +38,7 @@ public FDDActionPanelFX() {
     getStyleClass().add("fdd-action-panel");
         setPrefHeight(36);
         setMaxHeight(36);
-        // Load custom stylesheet for improved look
-        try {
-            String css = getClass().getResource("/styles/action-panel.css").toExternalForm();
-            getStylesheets().add(css);
-        } catch (Exception ignore) { }
+    // Styles now supplied by global-theme.css (action-panel.css deprecated)
         createButtons();
         createContextMenu();
     }

src/main/java/net/sourceforge/fddtools/ui/fx/FDDCanvasFX.java

@@ -23,6 +23,7 @@
 import javafx.scene.input.MouseButton;
 import javafx.scene.input.ZoomEvent;
 import javafx.scene.layout.*;
+import javafx.scene.layout.StackPane;
 import javafx.geometry.Orientation;
 import javafx.scene.paint.Color;
 import javafx.scene.text.Font;
@@ -199,31 +200,39 @@ private ToolBar createActionBar() {
         this.zoomSlider = zoomSlider;
 
         // Create modern zoom buttons with FontAwesome icons and orange theme
-        btnZoomOut = new Button();
-        FontAwesomeIconView zoomOutIcon = new FontAwesomeIconView(FontAwesomeIcon.MINUS);
-        zoomOutIcon.setGlyphSize(14);
-        zoomOutIcon.getStyleClass().addAll("fdd-action-icon", "fdd-icon");
-        btnZoomOut.setGraphic(zoomOutIcon);
+    btnZoomOut = new Button();
+    FontAwesomeIconView zoomOutIcon = new FontAwesomeIconView(FontAwesomeIcon.MINUS);
+    zoomOutIcon.setSmooth(false); // disable text smoothing for crisper small glyph
+    zoomOutIcon.setGlyphSize(16); // Option B: even glyph size for sharper pixel alignment
+    zoomOutIcon.getStyleClass().addAll("fdd-action-icon", "fdd-icon");
+    StackPane zoomOutWrap = new StackPane(zoomOutIcon); // Option A: snap to pixel wrapper
+    zoomOutWrap.setSnapToPixel(true);
+    btnZoomOut.setGraphic(zoomOutWrap);
         btnZoomOut.setMinWidth(32);
         btnZoomOut.setPrefWidth(32);
         btnZoomOut.setMinHeight(28);
         btnZoomOut.setPrefHeight(28);
         btnZoomOut.setOnAction(e -> zoomOut());
         btnZoomOut.setTooltip(new Tooltip("Zoom Out (Ctrl + Mouse Wheel or ⌘−)"));
-        btnZoomOut.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "zoom-button", "zoom-out-button");
-        
-        btnZoomIn = new Button();
-        FontAwesomeIconView zoomInIcon = new FontAwesomeIconView(FontAwesomeIcon.PLUS);
-        zoomInIcon.setGlyphSize(14);
-        zoomInIcon.getStyleClass().addAll("fdd-action-icon", "fdd-icon");
-        btnZoomIn.setGraphic(zoomInIcon);
+    btnZoomOut.getStyleClass().addAll("fdd-action-button", "fdd-icon-button");
+    btnZoomOut.setSnapToPixel(true); // ensure crisp rendering when armed
+        
+    btnZoomIn = new Button();
+    FontAwesomeIconView zoomInIcon = new FontAwesomeIconView(FontAwesomeIcon.PLUS);
+    zoomInIcon.setSmooth(false); // disable smoothing for crisp edges
+    zoomInIcon.setGlyphSize(16); // Option B: even glyph size
+    zoomInIcon.getStyleClass().addAll("fdd-action-icon", "fdd-icon");
+    StackPane zoomInWrap = new StackPane(zoomInIcon); // Option A wrapper
+    zoomInWrap.setSnapToPixel(true);
+    btnZoomIn.setGraphic(zoomInWrap);
         btnZoomIn.setMinWidth(32);
         btnZoomIn.setPrefWidth(32);
         btnZoomIn.setMinHeight(28);
         btnZoomIn.setPrefHeight(28);
         btnZoomIn.setOnAction(e -> zoomIn());
         btnZoomIn.setTooltip(new Tooltip("Zoom In (Ctrl + Mouse Wheel or ⌘+)"));
-        btnZoomIn.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "zoom-button", "zoom-in-button");
+    btnZoomIn.getStyleClass().addAll("fdd-action-button", "fdd-icon-button");
+    btnZoomIn.setSnapToPixel(true); // ensure crisp rendering when armed
 
         // Modern control buttons with better icons/text
         btnReset = new Button("100%");
@@ -233,7 +242,8 @@ private ToolBar createActionBar() {
         btnReset.setPrefHeight(28);
         btnReset.setOnAction(e -> resetZoom());
         btnReset.setTooltip(new Tooltip("Reset to 100% (⌘0)"));
-        btnReset.getStyleClass().addAll("zoom-button", "reset-button");
+        // Make reset visually consistent: treat as icon/button variant with same border/hover
+    btnReset.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "reset-button");
 
         btnFit = new Button();
         FontAwesomeIconView fitIcon = new FontAwesomeIconView(FontAwesomeIcon.ARROWS_ALT);
@@ -246,7 +256,7 @@ private ToolBar createActionBar() {
         btnFit.setPrefHeight(28);
         btnFit.setOnAction(e -> fitToWindow());
         btnFit.setTooltip(new Tooltip("Fit to Window"));
-        btnFit.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "zoom-button", "fit-button");
+    btnFit.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "fit-button");
 
         // Group zoom buttons in a contained group
         HBox zoomButtons = new HBox(2);
@@ -282,7 +292,7 @@ private ToolBar createActionBar() {
         saveButton.setPrefHeight(32);
         saveButton.setOnAction(e -> saveImage());
         saveButton.setTooltip(new Tooltip("Save as Image (⌘S)"));
-        saveButton.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "action-button", "save-button");
+    saveButton.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "save-button");
 
         printButton = new Button();
         FontAwesomeIconView printIcon = new FontAwesomeIconView(FontAwesomeIcon.PRINT);
@@ -296,7 +306,7 @@ private ToolBar createActionBar() {
         printButton.setPrefHeight(32);
         printButton.setOnAction(e -> printImage());
         printButton.setTooltip(new Tooltip("Print (⌘P)"));
-        printButton.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "action-button", "print-button");
+    printButton.getStyleClass().addAll("fdd-action-button", "fdd-icon-button", "print-button");
 
         // Create spacer to push action buttons to the right
         Region spacer = new Region();

src/main/resources/styles/action-panel.css

@@ -1,8 +1 @@
-/* Action panel now leverages global-theme unified classes */
-.fdd-action-panel { background-color:#fcfcfc; -fx-background-color: linear-gradient(to bottom,#fcfcfc,#e9e9e9); border-color:#c9c9c9; -fx-border-color:#c9c9c9; border-width:1px 0 0 0; -fx-border-width:1 0 0 0; padding:4px; -fx-padding:4; }
-.fdd-action-button { background-color:transparent; -fx-background-color: transparent; cursor:pointer; -fx-cursor:hand; padding:4px; -fx-padding:4; -fx-background-radius:6; -fx-border-radius:6; border-radius:6; }
-.fdd-action-button:hover { background-color:rgba(255,138,51,0.10); -fx-background-color: rgba(255,138,51,0.18); }
-.fdd-action-button:armed { background-color:rgba(255,138,51,0.25); -fx-background-color: rgba(255,138,51,0.32); }
-.fdd-action-icon { -fx-fill: linear-gradient(to bottom,#ffb066,#ff8a33); fill: linear-gradient(to bottom,#ffb066,#ff8a33); }
-.fdd-action-button:hover .fdd-action-icon { -fx-fill: linear-gradient(to bottom,#ff8a33,#e56700); fill: linear-gradient(to bottom,#ff8a33,#e56700); }
-.fdd-action-button:armed .fdd-action-icon { -fx-fill: linear-gradient(to bottom,#cc5800,#e56700); fill: linear-gradient(to bottom,#cc5800,#e56700); }
+/* Deprecated: action panel styles migrated into global-theme.css (kept empty for backward imports). */