Don't add cursor: pointer to vars when variable highlighting is inactive

[twiss]

In exported documents, variable highlighting is inactive, and clicking on vars doesn't do anything. So, I think we shouldn't set cursor: pointer on them.

This seems to possibly have been a mistake and only intended for variables with a data type hover bubble, but even there, clicking on them doesn't do anything so setting cursor: pointer on them still doesn't particularly make sense, IMHO.

For non-exported documents when highlighting is active, src/styles/var.css.js will still set cursor: pointer, so this shouldn't break that case.

[sidvishnoi]

Thanks for the PR @twiss.
I'm wondering if we should instead support var highlighting on generated docs: #3765.

Just to clear my understanding: With var highlighting on, I think we agree we should continue showing cursor: pointer. But if there's vars outside highlighting, even if they have data-type, I think there's no reason to show pointer?

[twiss]

I think #3765 would be a great addition, yeah, though I think it's in principle orthogonal from this change indeed in the sense that that change should be made in src/core/highlight-vars.js (by removing the removeOnSave, among other things), whereas this file could/should still be changed in the exact same way (although the effect will be less visible, it'll just remove a redundant CSS rule at that point).

[Copilot]

Pull Request Overview

This PR removes the cursor: pointer CSS property from var elements that don't have interactive functionality in exported documents, improving the user experience by avoiding misleading cursor behavior.

• Restricts the positioning CSS rule to only apply to var elements with a data-type attribute
• Removes the cursor: pointer property entirely from the datatype CSS module
• Relies on the existing var.css.js module to handle cursor styling for interactive variable highlighting

[Copilot]

The CSS selector change from var to var[data-type] may create inconsistency if the position: relative property is needed for all var elements, not just those with data-type attributes. Consider whether this positioning change could affect the layout of var elements without data-type attributes.

Suggested change

	var[data-type] {
	var {

[twiss]

This isn't needed, the position: relative is only to help position the position: absolute ::before and ::after pseudoelements below.

[netlify]

✅ Deploy Preview for respec-pr ready!

Name	Link
🔨 Latest commit	27f41d6
🔍 Latest deploy log	https://app.netlify.com/projects/respec-pr/deploys/6892f0b5ddc184000875cf57
😎 Deploy Preview	https://deploy-preview-4870--respec-pr.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.