feat(colors, link, tokens): DLT-3360 retune blue/gold/purple/black/red palette, add mention semantic tokens, migrate success to positive

[Joshua Hynes (hynes-dialpad)]

Obligatory GIF (super important!)

🛠️ Type Of Change

• Feature
• Refactor

📖 Jira Ticket

DLT-3360

📖 Description

Blue palette retune — adjusted OKLCH values across the blue ramp (tokens/base/dark.json + tokens/base/default.json) to improve visual consistency with the updated brand direction.

success → positive semantic token migration — added deprecated success* aliases in dp/default.json and dp/dark.json that proxy to their positive* counterparts, enabling a non-breaking migration path.

Link mention variant semantic tokens — moved inline OKLCH alpha expressions out of link.less into dedicated semantic tokens (color.link.mention, color.link.mention-background, color.link.mention-background-hover, and inverted variants). Updated link.less to consume the new tokens. Also corrected the dead --link-color → --link-color-default variable name that was silently falling back to primary link color.

Surface token fixes — corrected notice.less important variant background (--dt-color-surface-strong → --dt-color-surface-primary-inverted) and dialtone-syntax.less inline code background (--dt-color-surface-info → --dt-color-surface-info-subtle).

Scratch-color dev page — added docs/scratch-color.md as an unlinked visual test page for rendering all color/surface token variants in light and dark mode.

📦 Cross-Package Impact

Package	Changes	Downstream Impact
dialtone-tokens	Blue palette retune, success* deprecated aliases, new link.mention* semantic tokens	CSS consumers of mention variant tokens get the new semantic values
dialtone-css	link.less consumes new mention tokens, notice.less and syntax.less token corrections	Updated colors in mention links, notice important variant, and inline code
dialtone-documentation	Scratch-color visual test page, MCP server doc update	Dev tooling only — no public-facing doc changes

Dependency flow: tokens → CSS → docs

📄 Documentation Artifacts

Artifact	Status	Notes
Vue source	✅ N/A	No Vue component changes
Tests	✅ N/A	No new components
Storybook stories	✅ N/A	No component changes
Component docs JSON	✅ N/A	No component changes
VuePress docs	✅ Updated	scratch-color.md added (unlinked dev page); MCP server guide updated
MCP server data	✅ Auto	New tokens are discoverable by the MCP server without code changes

💡 Context

The blue palette retune is part of an ongoing brand color alignment (DLT-3360). The mention variant tokens replace inline OKLCH math that was hard to maintain and invisible to Tokens Studio — moving them into semantic tokens makes the intent explicit and gives design tooling visibility into the values.

The success → positive migration provides backward-compatible aliases so existing consumers don't break while the rename propagates.

📝 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.

[coderabbitai]

Retuned blue/gold/purple/black/red OKLCH palettes; added deprecated success→positive aliases for migration; introduced semantic link mention tokens (with inverted variants) and updated link.less; fixed notice/syntax surface token references; added scratch-color visual test page.

Overall Judgement: ✅ Ready to merge — Changes are well-scoped, backward-compatible, and properly propagated across tokens, CSS, and docs.

Walkthrough

Updated color token palettes and theme mappings (migrating many success tokens to positive), added new mention link tokens, adjusted base Oklch palette values for light/dark, updated CSS for links/notices/inline code, added an interactive token documentation page, and relaxed token review guidance in .coderabbit.yaml.

Changes

Token & Theme Updates

Layer / File(s)	Summary
Base Palette Values packages/dialtone-tokens/tokens/base/default.json, packages/dialtone-tokens/tokens/base/dark.json	Replaced many oklch(...) values across black, purple, blue, magenta, gold, and red scales (steps 50–1000); introduced non-zero chroma in some black steps.
Theme Mapping (DP — default & dark) packages/dialtone-tokens/tokens/theme/dp/default.json, packages/dialtone-tokens/tokens/theme/dp/dark.json	Redirected success foreground/surface/border variants to positive equivalents; added color.link.mention* tokens (foreground, hover, background, inverted variants); introduced/updated color.border.positive* tokens; removed redundant success local transforms/extensions; adjusted some action background and link info references.
Token Consumers (implicit) packages/dialtone-css/..., docs pages	Token name changes imply downstream styling updates (see CSS cohort below).

Presentation, Documentation & Review Guidance

Layer / File(s)	Summary
Review Guidance .coderabbit.yaml	Relaxed token review guidance: allow default-to-dark inheritance when values are identical; reserve dark overrides only when values differ; prefer semantic tokens when mappings exist but allow base-palette references for authoritative sources.
Documentation — New Interactive Page apps/dialtone-documentation/docs/scratch-color.md	Added an interactive token preview page with theme/mode/contrast controls and extensive visual token grids and usage guidance.
Docs Example Update apps/dialtone-documentation/docs/guides/mcp-server/index.md	Changed search_tokens example wording to reference positive instead of success.
Inline Syntax Styles apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less	Added inline code styling: padding, --dt-color-foreground-info text, info-subtle background, radius, and adjusted selection behavior.
Link & Notice CSS packages/dialtone-css/lib/build/less/components/link.less, packages/dialtone-css/lib/build/less/components/notice.less	Reworked mention link variants from underline behavior to pill-style backgrounds driven by new color.link.mention* tokens (including inverted variants), increased pill radius and padding; changed notice “important” background to --dt-color-surface-primary-inverted.

Suggested labels

visual-test-ready

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/DLT-3360-retune-color-palettes

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3c95784b01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "Codex (@codex) review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".

[chatgpt-codex-connector]

Point dark surface success-subtle alias to surface token

The color.surface.success-subtle deprecated alias now references color.border.positive-subtle, which changes its meaning from a surface background color to a border color in dark mode. Any consumer still using --dt-color-surface-success-subtle will get the wrong token family and a darker-than-expected background, so this is no longer a non-breaking alias to positive-subtle as intended.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Map dark surface success-strong alias to surface namespace

color.surface.success-strong is wired to color.border.positive-strong instead of the corresponding surface token. This breaks backward compatibility for dark theme consumers of the deprecated surface success token by switching them to a border palette value, which can materially alter notice/banner/toast backgrounds and contrast.

Useful? React with 👍 / 👎.

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/dialtone-css/lib/build/less/components/link.less`:
- Around line 190-219: The new link styles (&--mention and &--inverted-mention)
rely on six CSS custom properties that are missing from most theme palettes; add
the following tokens to every theme's default.json (and dark.json where
appropriate): color.link.mention, color.link.mention-hover,
color.link.mention-background, color.link.mention-background-hover,
color.link.mention-inverted-background, and
color.link.mention-inverted-background-hover, using sensible palette values (you
can copy/adjust the entries present in dp/default.json and dp/dark.json) so the
SCSS variables (--link-color-default, --link-color-default-hover,
--link-background-color, etc. used in &--mention and &--inverted-mention)
resolve at runtime.

In `@packages/dialtone-tokens/tokens/theme/dp/dark.json`:
- Around line 663-667: The alias entries for the color.border.success* tokens
currently point to "{color.surface.positive}" but should reference the border
namespace; update each color.border.success* alias (e.g., the "success" token
and its related border-success variants present in this file) so their "value"
uses "{color.border.positive}" (and corresponding "{color.border.positive.*}"
matches for nested variants) instead of "{color.surface.positive}", preserving
the existing "$deprecated" notes and token types.

In `@packages/dialtone-tokens/tokens/theme/dp/default.json`:
- Around line 310-369: The dp theme added new mention tokens (mention,
mention-hover, mention-background, mention-background-hover,
mention-inverted-background, mention-inverted-background-hover) only in
packages/dialtone-tokens/tokens/theme/dp/default.json; add identical token
entries (with same value/type and $extensions modify blocks) to each of the
other 7 theme default files (tmo/default.json, expressive/default.json,
expressive-small/default.json, etc.) so all 8 themes define these tokens, or
alternatively add a brief note in each missing theme file explaining explicit
inheritance from dp/default.json is intended and acceptable; update the
corresponding token sets for the same token keys to ensure parity across themes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

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

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 43b4e838-d924-4cf8-b8b0-1928e4008d0d

📥 Commits

Reviewing files that changed from the base of the PR and between e6e75ef and 3ce271d.

📒 Files selected for processing (10)

• .coderabbit.yaml
• apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less
• apps/dialtone-documentation/docs/guides/mcp-server/index.md
• apps/dialtone-documentation/docs/scratch-color.md
• packages/dialtone-css/lib/build/less/components/link.less
• packages/dialtone-css/lib/build/less/components/notice.less
• packages/dialtone-tokens/tokens/base/dark.json
• packages/dialtone-tokens/tokens/base/default.json
• packages/dialtone-tokens/tokens/theme/dp/dark.json
• packages/dialtone-tokens/tokens/theme/dp/default.json

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python - <<'PY'
import json
from pathlib import Path

root = Path("packages/dialtone-tokens/tokens/theme")
required = [
    ("color", "link", "mention"),
    ("color", "link", "mention-hover"),
    ("color", "link", "mention-background"),
    ("color", "link", "mention-background-hover"),
    ("color", "link", "mention-inverted-background"),
    ("color", "link", "mention-inverted-background-hover"),
]

def has_path(obj, path):
    cur = obj
    for key in path:
        if not isinstance(cur, dict) or key not in cur:
            return False
        cur = cur[key]
    return True

files = sorted(
    p for p in root.rglob("*.json")
    if p.name in {"default.json", "dark.json"}
)

for f in files:
    data = json.loads(f.read_text())
    missing = [".".join(p) for p in required if not has_path(data, p)]
    status = "OK" if not missing else "MISSING: " + ", ".join(missing)
    print(f"{f}: {status}")
PY

Repository: dialpad/dialtone

Length of output: 26416

---

Add missing mention-link color tokens to all theme files before merging.

The CSS now depends on --dt-color-link-mention* and related vars, but verification shows these tokens are missing from all theme files except dp/default.json (which has 4/6) and dp/dark.json (which has 2/6). All other themes (101-137, aegean, botany, expressive, high-desert, tmo, etc.) lack these tokens entirely. This will cause unresolved CSS custom properties at runtime for every non-Dialpad theme.

Define all six tokens:

• color.link.mention
• color.link.mention-hover
• color.link.mention-background
• color.link.mention-background-hover
• color.link.mention-inverted-background
• color.link.mention-inverted-background-hover

Add them to at minimum all */default.json files; */dark.json may inherit if the palette reference is visually correct in dark mode.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/dialtone-css/lib/build/less/components/link.less` around lines 190 -
219, The new link styles (&--mention and &--inverted-mention) rely on six CSS
custom properties that are missing from most theme palettes; add the following
tokens to every theme's default.json (and dark.json where appropriate):
color.link.mention, color.link.mention-hover, color.link.mention-background,
color.link.mention-background-hover, color.link.mention-inverted-background, and
color.link.mention-inverted-background-hover, using sensible palette values (you
can copy/adjust the entries present in dp/default.json and dp/dark.json) so the
SCSS variables (--link-color-default, --link-color-default-hover,
--link-background-color, etc. used in &--mention and &--inverted-mention)
resolve at runtime.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python - <<'PY'
import json
from pathlib import Path

root = Path("packages/dialtone-tokens/tokens/theme")
required = {
  "mention",
  "mention-hover",
  "mention-background",
  "mention-background-hover",
  "mention-inverted-background",
  "mention-inverted-background-hover",
}

missing_report = []
for f in sorted(root.rglob("default.json")):
    try:
        data = json.loads(f.read_text())
    except Exception as e:
        print(f"ERROR parsing {f}: {e}")
        continue
    link = (((data or {}).get("color") or {}).get("link") or {})
    missing = sorted(required - set(link.keys()))
    if missing:
        missing_report.append((str(f), missing))

if not missing_report:
    print("OK: all theme default.json files define all required color.link.mention* tokens.")
else:
    print("MISSING TOKENS:")
    for path, miss in missing_report:
        print(f"- {path}: {', '.join(miss)}")
PY

Repository: dialpad/dialtone

Length of output: 9688

---

New color.link.mention* tokens missing from 7 of 8 required theme defaults.

These tokens are defined in dp/default.json but missing from tmo/default.json, expressive/default.json, expressive-small/default.json, and 4+ other theme variants. Per coding guidelines, new design tokens must be defined across all 8 themes. Add these tokens to each missing theme default, or document why inheritance from DP theme is intentional and correct.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/dialtone-tokens/tokens/theme/dp/default.json` around lines 310 -
369, The dp theme added new mention tokens (mention, mention-hover,
mention-background, mention-background-hover, mention-inverted-background,
mention-inverted-background-hover) only in
packages/dialtone-tokens/tokens/theme/dp/default.json; add identical token
entries (with same value/type and $extensions modify blocks) to each of the
other 7 theme default files (tmo/default.json, expressive/default.json,
expressive-small/default.json, etc.) so all 8 themes define these tokens, or
alternatively add a brief note in each missing theme file explaining explicit
inheritance from dp/default.json is intended and acceptable; update the
corresponding token sets for the same token keys to ensure parity across themes.

[Joshua Hynes (hynes-dialpad)]

Re: multi-theme mention token coverage (comments 1 & 3)

The non-dp theme files are shell-only overrides — each is 12–28 lines and only sets shell.base.color.* brand variables (accent, surface, foreground). None of them declare any color.link.* tokens at all. The dp theme is the sole source of semantic color tokens; all other themes inherit from it via the build order in $metadata.json.

Adding mention* tokens to those files would break the inheritance model — they'd be duplicating values that are already correctly inherited.

[Belu Montoya (belumontoya)]

just some questions, looks good overall

[Belu Montoya (belumontoya)]

Was the size and radius bump on &--mention meant for &--inverted-mention too? They used to match.

[Belu Montoya (belumontoya)]

Heads up, this shifts dark surface.success-strong from green.500 to green.475. Intentional?

[Belu Montoya (belumontoya)]

Was user-select: all intentional? Means you can't select part of an inline code snippet.

[Francis Rupert (francisrupert)]

Joshua Hynes (@hynes-dialpad) Like I mentioned to you Friday I made some updates, mainly about correcting references, which are easy to do with Tokens Studio plugin - especially for some cascading uses of black through the chain.

Rather than push to your branch, I have my own based on this one. #1252 (still draft atm)

I went a bit further and piggy-backed on this with a new theme feature: option to choose your preferred "black" ramp in addition to this default warm tan-based ramp.

It follows the same layered design tokens approach I refactored to before. It adds a fourth dimension, "material", with no negative performance impact.

Dimensions wind up...

• Mode
• Theme
• Contrast
• Material (new), e.g. values of...
  • Iron (former pure black)
  • Sandstone (your tan-based default)
  • Graphite (subtle blue-gray)
  • Steel (blue tinted)

It's a net new feature, not required, so we can opt-in and stress-test it in Beacon.

It includes some other corrections to this current PR, and my recommendations for a few things.

So we can one of two things:

1. Merge this as is, and then review my following PR.
2. Or review my PR, which targets this PR's branch.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/dialtone-css/lib/build/less/components/link.less`:
- Around line 190-201: The mention chip selectors (&--mention and
&--inverted-mention) currently inherit an underline baseline and only remove it
on hover; to restore the no-underline baseline add the CSS variable assignment
--link-text-decoration: none inside both the &--mention and &--inverted-mention
blocks (and their inverted counterpart), so the chips are not underlined at rest
and remain removing decoration on hover via the existing hover rules that change
--link-text-decoration; update both occurrences (the other block referenced in
the comment) to include --link-text-decoration: none.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

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

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 0dc7a167-886a-4e27-81d5-81c765dfef48

📥 Commits

Reviewing files that changed from the base of the PR and between dadf1c5 and 7ff5fc9.

📒 Files selected for processing (1)

• packages/dialtone-css/lib/build/less/components/link.less

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Restore no-underline baseline for mention chips.

&--mention and &--inverted-mention now inherit the base underline, then remove it on hover. This makes pill mentions underlined at rest and non-underlined on hover. Add --link-text-decoration: none in both variants.

Proposed fix

     &--inverted-mention {
+        --link-text-decoration: none;
         --link-color-default: var(--dt-color-link-primary-inverted);
         --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
         --link-padding: 0 var(--dt-spacing-25);
         --link-background-color: var(--dt-color-link-mention-inverted-background);
@@
     &--mention {
+        --link-text-decoration: none;
         --link-color-default: var(--dt-color-link-mention);
         --link-color-default-hover: var(--dt-color-link-mention-hover);
         --link-padding: var(--dt-spacing-1) var(--dt-spacing-25);
         --link-background-color: var(--dt-color-link-mention-background);

Also applies to: 208-219

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-css/lib/build/less/components/link.less` around lines 190 -
201, The mention chip selectors (&--mention and &--inverted-mention) currently
inherit an underline baseline and only remove it on hover; to restore the
no-underline baseline add the CSS variable assignment --link-text-decoration:
none inside both the &--mention and &--inverted-mention blocks (and their
inverted counterpart), so the chips are not underlined at rest and remain
removing decoration on hover via the existing hover rules that change
--link-text-decoration; update both occurrences (the other block referenced in
the comment) to include --link-text-decoration: none.

[github-actions]

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