feat(tokens): implement css variable token usage eslint plugin by adamdehaven · Pull Request #3205 · Kong/kongponents

adamdehaven · 2026-05-15T19:02:41Z

Summary

Implement the @kong/design-tokens token-constant-requires-css-var ESLint rule from Kong/design-tokens#656

netlify · 2026-05-15T19:02:47Z

✅ Deploy Preview for kongponents-sandbox ready!

Name	Link
🔨 Latest commit	`89df4ac`
🔍 Latest deploy log	https://app.netlify.com/projects/kongponents-sandbox/deploys/6a0783ccf89b6c0008f1477f
😎 Deploy Preview	https://deploy-preview-3205--kongponents-sandbox.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-05-15T19:03:36Z

✅ Deploy Preview for kongponents ready!

Name	Link
🔨 Latest commit	`89df4ac`
🔍 Latest deploy log	https://app.netlify.com/projects/kongponents/deploys/6a0783cc3197b90009ce1e55
😎 Deploy Preview	https://deploy-preview-3205--kongponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

Copilot

Pull request overview

This PR updates the repo to enforce CSS custom property usage for @kong/design-tokens constants (via the new token-constant-requires-css-var ESLint rule), and applies corresponding code changes across components and sandbox pages to use var(--kui-*, <token fallback>) patterns.

Changes:

Bump @kong/design-tokens to a PR build that includes the new ESLint rule, and enable the plugin in eslint.config.mjs.
Update multiple Vue components to pass design-token values via CSS variables with JS-token fallbacks (e.g. var(--kui-icon-size-30, ${KUI_ICON_SIZE_30})).
Update sandbox examples to match the new token usage requirements.

Reviewed changes

Copilot reviewed 30 out of 31 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/components/KTruncate/KTruncate.vue	Use CSS var fallback for icon size token usage.
src/components/KTreeList/KTreeItem.vue	Use CSS var fallback for icon size token usage.
src/components/KTooltip/KTooltip.vue	Use CSS var fallback for popover offset token usage.
src/components/KToaster/KToaster.vue	Use CSS var fallback for icon size token usage.
src/components/KTableView/KTableView.vue	Use CSS var fallback for multiple icon size token usages.
src/components/KTable/KTable.vue	Use CSS var fallback for icon size token usage.
src/components/KStepper/KStep.vue	Use CSS var fallback for step state icon sizes.
src/components/KSelect/KSelect.vue	Use CSS var fallback for popover offset token usage.
src/components/KPop/KPop.vue	Use CSS var fallback for close icon size token usage.
src/components/KMultiselect/KMultiselect.vue	Use CSS var fallback for offset + icon size token usage.
src/components/KModalFullscreen/KModalFullscreen.vue	Use CSS var fallback for decorative icon color token usage.
src/components/KFilterGroup/InteractivePill.vue	Use CSS var fallback for icon size token usage.
src/components/KFilterGroup/FilterPill.vue	Use CSS var fallback for popover offset token usage.
src/components/KExternalLink/KExternalLink.vue	Use CSS var fallback for external link icon size token usage.
src/components/KEmptyState/KEmptyState.vue	Use CSS var fallback for empty-state icon size token usage.
src/components/KDropdown/KDropdown.vue	Use CSS var fallback for popover offset token usage.
src/components/KDateTimePicker/KDateTimePicker.vue	Use CSS var fallback for offset + icon size token usage.
src/components/KCopy/KCopy.vue	Use CSS var fallback for icon size token usage.
src/components/KCollapse/KCollapse.vue	Use CSS var fallback for icon size token usage.
src/components/KCodeBlock/KCodeBlock.vue	Use CSS var fallback for icon size token usage.
src/components/KCheckbox/KCheckbox.vue	Use CSS var fallback for checkbox icon sizes.
src/components/KAlert/KAlert.vue	Use CSS var fallback for alert icon sizes.
sandbox/pages/SandboxTreeList.vue	Update sandbox icon color token usage to CSS var fallbacks.
sandbox/pages/SandboxPop.vue	Update sandbox offset token usage to CSS var fallbacks (including `kpop-attributes`).
sandbox/pages/SandboxModals.vue	Update sandbox icon color token usage to CSS var fallback.
sandbox/pages/SandboxEmptyState.vue	Update sandbox icon color + size token usage to CSS var fallbacks.
sandbox/pages/SandboxCollapse.vue	Update sandbox icon color + size token usage to CSS var fallbacks.
sandbox/pages/SandboxCard.vue	Update sandbox icon color + size token usage to CSS var fallbacks.
package.json	Bump `@kong/design-tokens` to version containing the new ESLint plugin/rule.
pnpm-lock.yaml	Lockfile updates for the new `@kong/design-tokens` version and transitive changes.
eslint.config.mjs	Enable `@kong/design-tokens` ESLint plugin recommended config for Vue files.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 30 out of 31 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

kongponents-bot · 2026-05-15T20:37:12Z

🔴 PR audit failed. 🔴

🔥 Renovate Security PRs detected.

There are 4 open renovate security PRs older than 3 days.

This PR cannot be merged until all renovate security PRs created more than 3 days ago are resolved.

🔥 PNPM Audit issues detected.

┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ Svelte devalue: DoS via sparse array deserialization   │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ devalue                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ >=5.6.3 <=5.8.0                                        │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=5.8.1                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ .>nuxt>devalue                                         │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-77vg-94rm-hx3p      │
└─────────────────────┴────────────────────────────────────────────────────────┘
1 vulnerabilities found
Severity: 1 high

PR with those issues cannot be merged.

How to resolve:

Check open renovate PRs for updates to the dependencies mentioned in the audit report
try to update dependencies listed in the audit report to the latest versions
use pnpm audit --fix to automatically fix issues

🔥 PR preview packages detected .


PR preview package version found in ./package.json:
    "@kong/design-tokens": "1.22.2-pr.656.8e60707.0",

PR with those dependencies cannot be merged.

🔥 No test coverage detected.

This PR does not include any test coverage changes, but it modifies source code. Please add appropriate tests to cover the changes made in this PR.

If you believe this is a false positive or if there are valid reasons for not including test coverage changes, please request an exemption by adding the test-coverage-exempt label to the PR and ensure it is approved by one of those managers jillztom, nateslo, erichsend, lahabana, hangrao, ryanmoore, elen4, DaniellaFreese, mfollett, ValeryG.

🔥 Old Open Renovate PRs detected.

There are 5 open renovate PRs created more than 30 days ago. PR cannot be merged until those old open renovate PRs are resolved.

kongponents-bot · 2026-05-15T20:44:20Z

Preview package from this PR in consuming application

In consuming application project install preview version of kongponents generated by this PR:

@kong/kongponents@pr-3205

adamdehaven added 2 commits May 15, 2026 14:52

fix(tokens): enforce css properties with eslint plugin

3a89e9a

fix(tokens): run lint:fix for token usage

db0ae63

adamdehaven self-assigned this May 15, 2026

adamdehaven changed the title ~~Chore/eslint css vars~~ feat(tokens): implement css variable token usage eslint plugin May 15, 2026

portikM requested a review from Copilot May 15, 2026 19:17

Copilot started reviewing on behalf of portikM May 15, 2026 19:18 View session

Copilot AI reviewed May 15, 2026

View reviewed changes

Comment thread package.json

adamdehaven requested a review from Copilot May 15, 2026 20:07

Copilot started reviewing on behalf of adamdehaven May 15, 2026 20:07 View session

Copilot AI reviewed May 15, 2026

View reviewed changes

Comment thread package.json Outdated

Comment thread pnpm-lock.yaml Outdated

adamdehaven added 3 commits May 15, 2026 16:14

fix: tokens

2aba41c

fix: tokens

2e442a3

fix: tokens

89df4ac

adamdehaven added the do not merge label May 15, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tokens): implement css variable token usage eslint plugin#3205

feat(tokens): implement css variable token usage eslint plugin#3205
adamdehaven wants to merge 5 commits into
mainfrom
chore/eslint-css-vars

adamdehaven commented May 15, 2026

Uh oh!

netlify Bot commented May 15, 2026 •

edited

Loading

Uh oh!

netlify Bot commented May 15, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

kongponents-bot commented May 15, 2026

Uh oh!

kongponents-bot commented May 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

adamdehaven commented May 15, 2026

Summary

Uh oh!

netlify Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kongponents-sandbox ready!

Uh oh!

netlify Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kongponents ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

kongponents-bot commented May 15, 2026

🔴 PR audit failed. 🔴

🔥 Renovate Security PRs detected.

🔥 PNPM Audit issues detected.

🔥 PR preview packages detected .

🔥 No test coverage detected.

🔥 Old Open Renovate PRs detected.

Uh oh!

kongponents-bot commented May 15, 2026

Preview package from this PR in consuming application

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented May 15, 2026 •

edited

Loading

netlify Bot commented May 15, 2026 •

edited

Loading