Skip to content

Conversation

@kube
Copy link
Collaborator

@kube kube commented Dec 20, 2025

🌟 What is the purpose of this PR?

Modernizes styling by extracting inline styles into css/cva utilities across the editor to improve consistency, reuse, and theming.

  • Converts all components to class-based styles
  • Adds style variants (e.g., isSelected, isDisabled, isReadOnly) and consolidates repeated patterns (spacing, borders, z-index, hover/focus states)
  • Minor UI polish (layout, paddings, shadows); no functional or API changes intended

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

  • do not affect the execution graph

🐾 Next steps

  • Continue refactoring by progressively cleaning styles, and find a common way to organize them.
  • Adapt/Migrate UI to match Figma mockups

❓ How to test this?

Use latest Petrinaut deployment

@github-actions github-actions bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Dec 20, 2025
@kube kube changed the title Extract styles from all component files in Petrinaut H-5768: Extract styles from all component files in Petrinaut Dec 20, 2025
@kube kube marked this pull request as ready for review December 20, 2025 03:04
@cursor
Copy link

cursor bot commented Dec 20, 2025

PR Summary

Modernizes styling by moving inline styles to css/cva utilities and adding state-based variants for consistency and reuse.

  • Refactors UI components (menu, tooltip, segment-group, color-select) to use class-based styles and cva variants
  • Converts major editor surfaces to extracted styles: Left Sidebar sections (nodes-section, types-section, differential-equations-section, hamburger-menu, floating-title), Bottom Panel (bottom-panel, diagnostics-content, parameters-content), Properties Panel (place-properties, transition-properties, type-properties, differential-equation-properties, initial-state-editor, multiple-selection, sortable-arc-item, visualizer-error-boundary, properties-panel)
  • Updates editor-view layout and SDCPN/arc rendering to class-based styling
  • Introduces common variants (e.g., isSelected, isDisabled, isReadOnly) and shared spacing/border/shadow tokens; removes inline style duplication
  • Adds a changeset for @hashintel/petrinaut (patch)

Written by Cursor Bugbot for commit 5a8bb42. This will update automatically on new commits. Configure here.

@graphite-app graphite-app bot requested a review from a team January 2, 2026 19:01
@kube kube changed the base branch from cf/h-5768-integrate-quick-simulation-in-edit-mode to graphite-base/8205 January 2, 2026 19:57
@kube kube force-pushed the cf/h-5883-extract-styles-from-all-components branch from 0a34775 to 0b9c14c Compare January 2, 2026 20:03
@kube kube changed the base branch from graphite-base/8205 to cf/h-5768-integrate-quick-simulation-in-edit-mode January 2, 2026 20:03
@github-actions github-actions bot added the area/infra Relates to version control, CI, CD or IaC (area) label Jan 2, 2026
@graphite-app graphite-app bot requested a review from a team January 2, 2026 23:47
@kube kube changed the base branch from cf/h-5768-integrate-quick-simulation-in-edit-mode to graphite-base/8205 January 6, 2026 14:20
Comment on lines +1 to +5
---
"@hashintel/petrinaut": patch
---

Refactoring: Extract styles from components
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can probably keep this kind of thing out of the changelog unless it has some impact on consumers (e.g. improves performance, changes interface, changes features, changes appearance). i.e. we can delete this file.

Each of these becomes a line in the changelog and each line should matter to someone who isn't us.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I remove it.

@kube kube force-pushed the cf/h-5883-extract-styles-from-all-components branch from 0556bb1 to 5a8bb42 Compare January 6, 2026 18:34
@kube kube force-pushed the graphite-base/8205 branch from ad258da to da0c7b9 Compare January 6, 2026 18:34
@kube kube changed the base branch from graphite-base/8205 to main January 6, 2026 18:34
@kube kube enabled auto-merge January 6, 2026 18:40
@kube kube added this pull request to the merge queue Jan 6, 2026
Merged via the queue into main with commit d56af2b Jan 6, 2026
48 of 63 checks passed
@kube kube deleted the cf/h-5883-extract-styles-from-all-components branch January 6, 2026 18:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

3 participants