Skip to content

fix(link): NO-JIRA correct mention link style - #1398

Merged
Francis Rupert (francisrupert) merged 1 commit into
nextfrom
link-mention-style
Aug 18, 2026
Merged

fix(link): NO-JIRA correct mention link style#1398
Francis Rupert (francisrupert) merged 1 commit into
nextfrom
link-mention-style

Conversation

@francisrupert

Copy link
Copy Markdown
Contributor

🛠️ Type Of Change

  • Fix

📖 Description

@mention link style in light was too strong; in dark mode not strong enough

📝 Checklist

For all PRs:

  • I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
  • I have reviewed my changes.
  • I have added all relevant documentation.
  • I have considered the performance impact of my change.

For all CSS changes:

  • I have used design tokens whenever possible.
  • I have considered how this change will behave on different screen sizes.
  • I have visually validated my change in light and dark mode.
  • I have used gap or flexbox properties for layout instead of margin whenever possible.

@francisrupert Francis Rupert (francisrupert) added the no-visual-test Add this tag when the PR does not need visual testing label Aug 18, 2026
@coderabbitai

coderabbitai Bot commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Workspace UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 49a92154-6e30-4ead-afd5-0d95faaa42eb

📥 Commits

Reviewing files that changed from the base of the PR and between 224f472 and cd8ec84.

⛔ Files ignored due to path filters (106)
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/avatar-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/avatar-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/badge-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/badge-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/breadcrumbs-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/breadcrumbs-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/button-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/button-group-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/button-group-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/button-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/card-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/card-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/checkbox-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/checkbox-group-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/checkbox-group-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/checkbox-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/chip-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/chip-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/collapsible-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/collapsible-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/combobox-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/combobox-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/combobox-multi-select-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/combobox-multi-select-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/combobox-with-popover-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/combobox-with-popover-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/datepicker-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/datepicker-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/description-list-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/description-list-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/dropdown-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/dropdown-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/emoji-picker-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/emoji-picker-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/emoji-text-wrapper-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/emoji-text-wrapper-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/empty-state-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/empty-state-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/filter-pill-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/filter-pill-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/hovercard-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/hovercard-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/input-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/input-group-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/input-group-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/input-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/item-layout-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/item-layout-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/keyboard-shortcut-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/keyboard-shortcut-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/lazy-show-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/lazy-show-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/link-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/link-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/list-item-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/list-item-group-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/list-item-group-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/list-item-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/loader-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/loader-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/mode-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/mode-island-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/mode-island-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/mode-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/motion-text-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/motion-text-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/pagination-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/pagination-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/prose-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/prose-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/radio-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/radio-group-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/radio-group-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/radio-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/resizable-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/resizable-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/rich-text-editor-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/rich-text-editor-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/root-layout-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/root-layout-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/scroller-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/scroller-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/segmented-control-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/segmented-control-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/select-menu-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/select-menu-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/split-button-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/split-button-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/stack-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/stack-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tab-group-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tab-group-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/table-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/table-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tabs-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tabs-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/text-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/text-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/text-list-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/text-list-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/toggle-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/toggle-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tooltip-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/tooltip-light.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/validation-messages-dark.png is excluded by !**/*.png and included by **
  • apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/validation-messages-light.png is excluded by !**/*.png and included by **
📒 Files selected for processing (4)
  • apps/dialtone-documentation/docs/components/link.md
  • packages/dialtone-css/lib/build/less/components/link.less
  • packages/dialtone-tokens/tokens/theme/dp/dark.json
  • packages/dialtone-tokens/tokens/theme/dp/default.json
🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

  • dialpad/ios (manual)
  • dialpad/firespotter (manual)
  • dialpad/semantic-release-changelog-json (auto-detected)
  • dialpad/conventional-changelog-angular (auto-detected)

Included review availability: Your plan provides up to 12 included reviews per hour; 11 remain after this review.


Updates @mention link styling for light and dark themes. Adjusts mention background tokens, adds dark-theme link colors, and removes default underlines while preserving hover underlines and backgrounds. Updates documentation labels.

Overall Judgement: ✅ Ready to merge — Changes match the stated objective and are focused.

Walkthrough

The pull request updates mention link color tokens, removes the default underline while preserving hover underlines, and adds @ prefixes to documentation examples.

Changes

Mention link updates

Layer / File(s) Summary
Update mention link color tokens
packages/dialtone-tokens/tokens/theme/dp/default.json, packages/dialtone-tokens/tokens/theme/dp/dark.json
The default and dark themes use updated mention background transformations. The dark theme adds color.link.info and color.link.info-hover.
Update mention link presentation and examples
packages/dialtone-css/lib/build/less/components/link.less, apps/dialtone-documentation/docs/components/link.md
The mention link has no underline by default and uses an underline on hover. Default and inverted examples display @Mention link.

Suggested reviewers: braddialpad, ninarepetto

Merge Risk: ⚪ Minimal · up to cd8ec

This PR adjusts mention-link styling and its light/dark theme tokens, with matching documentation updates. No actionable merge-blocking risk remains after normal checks and review.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch link-mention-style

Comment @coderabbitai help to get the list of available commands.

@github-actions

Copy link
Copy Markdown
Contributor

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1398/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1398/

@francisrupert
Francis Rupert (francisrupert) merged commit 36810ce into next Aug 18, 2026
21 checks passed
@francisrupert
Francis Rupert (francisrupert) deleted the link-mention-style branch August 18, 2026 20:39
Brad Paugh (braddialpad) pushed a commit that referenced this pull request Aug 18, 2026
# [8.81.0-next.14](dialtone-css/v8.81.0-next.13...dialtone-css/v8.81.0-next.14) (2026-08-18)

### Bug Fixes

* **Link:** NO-JIRA correct mention link style ([#1398](#1398)) ([36810ce](36810ce))
Brad Paugh (braddialpad) pushed a commit that referenced this pull request Aug 18, 2026
# [2.0.0-next.7](dialtone-tokens/v2.0.0-next.6...dialtone-tokens/v2.0.0-next.7) (2026-08-18)

### Bug Fixes

* **Input, Selectmenu:** NO-JIRA update focus surface color ([eaad020](eaad020))
* **Link:** NO-JIRA correct mention link style ([#1398](#1398)) ([36810ce](36810ce))
Brad Paugh (braddialpad) pushed a commit that referenced this pull request Aug 18, 2026
# [10.0.0-next.17](dialtone/v10.0.0-next.16...dialtone/v10.0.0-next.17) (2026-08-18)

### Bug Fixes

* **Input, Selectmenu:** NO-JIRA update focus surface color ([eaad020](eaad020))
* **Link:** NO-JIRA correct mention link style ([#1398](#1398)) ([36810ce](36810ce))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

no-visual-test Add this tag when the PR does not need visual testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant