Conversation
✅ Deploy Preview for kongponents-sandbox ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for kongponents ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🔴 PR audit failed. 🔴🔥 PR preview packages detected .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 🔥 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. |
There was a problem hiding this comment.
Pull request overview
Updates the codebase to comply with the @kong/design-tokens/token-var-usage stylelint rule by converting remaining direct Sass token usages to CSS variable usages (with Sass fallbacks), and enables the rule in stylelint.
Changes:
- Enable
@kong/design-tokens/token-var-usagein.stylelintrc.mjs. - Replace remaining
$kui-*usages withvar(--kui-*, $kui-*)across several Vue/SCSS files. - Bump
@kong/design-tokensdependency and updatepnpm-lock.yamlaccordingly.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/mixins/_tables.scss | Converts background/margin token usage to var(--kui-*, $kui-*) to satisfy the new rule. |
| src/styles/mixins/_input-text.scss | Converts font-size token usage to var(--kui-*, $kui-*). |
| src/components/KTreeList/KTreeItem.vue | Converts padding token usage to var(--kui-*, $kui-*). |
| src/components/KTreeList/KTreeDraggable.vue | Converts margin/padding-left token usage to var(--kui-*, $kui-*). |
| src/components/KTableView/ColumnVisibilityMenu.vue | Converts padding shorthand token usage to var(--kui-*, $kui-*). |
| src/components/KSlider/KSlider.vue | Converts padding token usage to var(--kui-*, $kui-*). |
| src/components/KEmptyState/KEmptyState.vue | Converts gap/padding-top token usage to var(--kui-*, $kui-*). |
| .stylelintrc.mjs | Adds the token-var-usage rule configuration. |
| package.json | Updates @kong/design-tokens version. |
| pnpm-lock.yaml | Locks the updated @kong/design-tokens version. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "@evilmartians/lefthook": "^2.0.15", | ||
| "@kong-ui-public/sandbox-layout": "^2.3.26", | ||
| "@kong/design-tokens": "^1.18.2", | ||
| "@kong/design-tokens": "1.18.3-pr.613.6a99f48.0", |
There was a problem hiding this comment.
The devDependency is pinned to a PR-specific pre-release build ("1.18.3-pr.613.6a99f48.0"). This is typically ephemeral and can break fresh installs later if the build is unpublished or superseded; prefer a stable released version/range (e.g., ^1.18.3) or a repo-approved prerelease channel if one exists.
| '@kong/design-tokens': | ||
| specifier: ^1.18.2 | ||
| version: 1.18.2 | ||
| specifier: 1.18.3-pr.613.6a99f48.0 | ||
| version: 1.18.3-pr.613.6a99f48.0 |
There was a problem hiding this comment.
pnpm-lock.yaml is locking @kong/design-tokens to a PR-specific pre-release version. If the intent is to adopt token-var-usage long-term, this should be updated to a stable published version to avoid future install failures when the PR build is no longer available.
| { 'unspecified': 'bottomAlphabetical' }, | ||
| ], | ||
| '@kong/design-tokens/use-proper-token': true, | ||
| '@kong/design-tokens/token-var-usage': [true, { severity: 'warning' }], |
There was a problem hiding this comment.
The new token-var-usage rule is configured with severity "warning". If the goal of this PR is to apply/enforce the rule (per title/summary), consider making it an error (or update the PR description to clarify that this is informational-only for now).
2 participants
Summary
Apply
token-var-usagestylelint rule (Kong/design-tokens#613)