fix: update semantic token values in table

[QuintonJason]

Description

Update semantic token values to show the core value instead of the reference.

Before	After

Fixes #(issue)

Type of change

• This change requires a documentation update

How Has This Been Tested?

Visit any of the semantic tokens views and verify the value

• tested manually

Test Configuration:

• Pine versions:
• OS:
• Browsers:
• Screen readers:
• Misc:

Checklist:

If not applicable, leave options unchecked.

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	105f6c2
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/695be6a031b486000814ea7c
😎 Deploy Preview	https://deploy-preview-619--pine-design-system.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.

[QuintonJason]

@coderabbitai review this pr

[coderabbitai]

@QuintonJason: I'll review the changes in this PR for you.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

The DocTokenTable component is modified to support core token reference resolution. A new CoreTokens type alias is introduced along with utility functions for traversing core token paths (lookupCoreValue), converting values to strings (complexValueToString), and resolving token references (resolveReferences). The token loading flow is extended to asynchronously load core.json when the tier is semantic, and the rendering path is updated to resolve references in cssPropertyValue using the loaded core tokens.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: updating semantic token values in a table to display core values instead of references.
Description check	✅ Passed	The description includes context with visual before/after screenshots and manual testing confirmation, but lacks issue reference, test details, and most checklist items are unchecked.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

Fix all issues with AI Agents 🤖

In @libs/doc-components/src/components/docTokenTable/docTokenTable.tsx:
- Around line 112-140: The complexValueToString function destructures box-shadow
properties (x, y, blur, spread, color) without defaults, which can yield
"undefined" in the output; update complexValueToString to provide safe defaults
or filter out missing values when building the string: when handling Array items
and single object branches (the destructuring at the Array.map callback and the
object branch), assign sensible defaults (e.g., '' or '0' for numeric offsets
and '' for color) or construct the output by building an array
[x,y,blur,spread,color].filter(v => v != null && v !== '').join(' ') so missing
properties are omitted rather than rendered as "undefined".

🧹 Nitpick comments (1)

libs/doc-components/src/components/docTokenTable/docTokenTable.tsx (1)

88-110: Consider handling nested token references.

The lookupCoreValue function resolves a single reference but doesn't handle cases where a core token's value itself contains references to other core tokens (e.g., {color.base.100} → {color.grey.100} → #f5f5f5). If your token system uses nested references, consider implementing recursive resolution.

🔎 Example approach for recursive resolution

  const lookupCoreValue = (refPath: string, cores: CoreTokens): any => {
    const parts = refPath.split('.');
    
    let current: any = cores;
    for (const part of parts) {
      if (current && typeof current === 'object' && part in current) {
        current = current[part];
      } else {
        return null;
      }
    }
    
    if (current && typeof current === 'object' && 'value' in current) {
-     return current.value;
+     const value = current.value;
+     // If the value itself contains references, resolve them recursively
+     if (typeof value === 'string' && value.includes('{')) {
+       return resolveReferences(value, cores);
+     }
+     return value;
    }
    
    return null;
  };

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e7170a2 and f111f12.

📒 Files selected for processing (1)

• libs/doc-components/src/components/docTokenTable/docTokenTable.tsx

🔇 Additional comments (5)

libs/doc-components/src/components/docTokenTable/docTokenTable.tsx (5)

14-15: LGTM - Type definition is appropriate for dynamic JSON.

Using Record<string, any> is reasonable for the core tokens structure since it represents dynamically loaded JSON with arbitrary nesting.

---

86-86: LGTM - State addition is consistent.

The coreTokens state follows the same pattern as the existing pineTokens state.

---

142-154: LGTM - Reference resolution logic is sound.

The regex pattern correctly identifies and replaces token references in the format {path.to.value}. Returning the original match when a reference isn't found is a sensible fallback for documentation display.

---

160-165: LGTM - Core token loading is implemented correctly.

The conditional loading of core.json for the semantic tier is appropriate and consistent with the existing token loading pattern on line 159. The existing try-catch block will handle any import failures.

---

246-249: LGTM - Reference resolution correctly achieves the PR objective.

The conditional reference resolution is well-guarded and correctly placed in the rendering pipeline. This change ensures semantic token values display their resolved core values instead of references like {color.grey.100}.