fix(*): apply token-var-usage stylelint rule by portikM · Pull Request #2959 · Kong/public-ui-components

portikM · 2026-03-03T20:17:07Z

Summary

Picking up token-var-usage stylelint rule (Kong/design-tokens#613)

Copilot

Pull request overview

Updates the repo to adopt the @kong/design-tokens/token-var-usage stylelint rule by switching many SCSS token references from Sass variables (e.g. $kui-*) to CSS custom properties (var(--kui-*, $kui-*)), and bumps @kong/design-tokens to a version that contains the new rule.

Changes:

Enable @kong/design-tokens/token-var-usage stylelint rule (warning severity).
Bump @kong/design-tokens from 1.18.2 to 1.18.3-pr.613.e59423d.0 across the monorepo + lockfile.
Refactor many Vue SFC / SCSS styles to use var(--kui-*, $kui-*) for token usage.

Reviewed changes

Copilot reviewed 85 out of 86 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Updates locked `@kong/design-tokens` version and engine requirements for the new tokens package.
package.json	Bumps root devDependency `@kong/design-tokens` and normalizes JSON whitespace.
.stylelintrc.mjs	Enables the `token-var-usage` rule to start enforcing token CSS-var usage.
packages/portal/spec-renderer/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/portal/document-viewer/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-vaults/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-upstreams-targets/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-snis/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-shared/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-routes/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-redis-configurations/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-plugins/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-keys/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-gateway-services/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-data-plane-nodes/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-consumers/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-consumer-groups/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-consumer-credentials/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/entities/entities-certificates/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/split-pane/src/components/SplitToolbar.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/split-pane/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/sandbox-layout/src/components/SandboxNavigation.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/sandbox-layout/src/components/SandboxLayout.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/sandbox-layout/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/page-layout/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/monaco-editor/src/components/ToolbarActionButton.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/monaco-editor/src/components/MonacoEditorToolbar.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/monaco-editor/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/forms/src/components/forms/RLAForm.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/forms/OIDCForm.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldSelectionGroup.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldRadio.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldMetric.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldLabel.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldKeyValuePairs.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldInput.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldCheckbox.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldAutoSuggestLegacy.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldAutoSuggest.vue	Converts token usage to CSS vars with Sass fallback in component styles (and fixes a stray `;;`).
packages/core/forms/src/components/fields/FieldArrayItem.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldArrayCardContainer.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/FieldArray.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/fields/AutoSuggest.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/RedisConfigSelect.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/RedisConfigCard.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/FormRedis.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/FormGroup.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/src/components/FormGenerator.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/forms/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/expressions/src/components/SupportText.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/expressions/src/components/RouterPlaygroundModal.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/expressions/src/components/RouterPlayground.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/expressions/src/components/RequestModal.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/expressions/src/components/RequestImportModal.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/expressions/src/components/RequestCard.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/expressions/src/components/PageHeader.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/expressions/src/components/ExpressionsEditor.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/expressions/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/error-boundary/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/entities-config-editor/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/documentation/src/components/ProductDocumentModal.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/documentation/src/components/DocumentationDisplay.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/documentation/src/components/DocumentationContent.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/documentation/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/core/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/core/app-layout/src/styles/variables/_app-sidebar.scss	Converts token usage to CSS vars with Sass fallback in shared SCSS variables/mixins.
packages/core/app-layout/src/styles/variables/_app-navbar.scss	Converts token usage to CSS vars with Sass fallback in shared SCSS variables.
packages/core/app-layout/src/styles/_base.scss	Converts base layout token usage to CSS vars with Sass fallback.
packages/core/app-layout/src/components/sidebar/SidebarToggle.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/sidebar/SidebarItem.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/sidebar/ItemBadge.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/sidebar/AppSidebar.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/pageInfoSection/AppPageInfoSection.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/pageHeader/AppPageHeader.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/navbar/AppNavbar.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/navbar/AccountDropdown.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/gradientBadge/GradientBadge.vue	Converts token usage to CSS vars with Sass fallback in component styles (incl. `calc()` padding).
packages/core/app-layout/src/components/errors/AppError.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue	Converts token usage to CSS vars with Sass fallback in component styles.
packages/core/app-layout/src/components/AppLayout.vue	Converts token usage to CSS vars with Sass fallback in component styles (incl. nested fallbacks).
packages/core/app-layout/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/analytics/dashboard-renderer/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/analytics/analytics-utilities/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/analytics/analytics-metric-provider/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/analytics/analytics-geo-map/package.json	Bumps `@kong/design-tokens` to the PR build version.
packages/analytics/analytics-chart/package.json	Bumps `@kong/design-tokens` to the PR build 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.

packages/core/expressions/src/components/PageHeader.vue

package.json

Copilot

Pull request overview

Copilot reviewed 211 out of 213 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

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

...s/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePropertiesPanel.vue

packages/analytics/analytics-chart/src/components/ZoomTimerange.vue

kongponents-bot · 2026-03-03T23:44:31Z

🔴 PR audit failed. 🔴

🔥 PNPM Audit issues detected.

┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ Underscore has unlimited recursion in _.flatten and    │
│                     │ _.isEqual, potential for DoS attack                    │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ underscore                                             │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <=1.13.7                                               │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=1.13.8                                               │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__portal__swagger-ui-web-component>@kong/      │
│                     │ swagger-ui-kong-theme-universal>curl-to-har>underscore │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-qpx9-hpmf-5gmw      │
└─────────────────────┴────────────────────────────────────────────────────────┘
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.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/analytics/analytics-metric-provider/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/analytics/analytics-geo-map/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/analytics/analytics-chart/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/analytics/dashboard-renderer/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/analytics/analytics-utilities/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/portal/spec-renderer/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/portal/document-viewer/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-plugins/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-keys/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-vaults/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-gateway-services/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-certificates/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-consumer-credentials/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-redis-configurations/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-data-plane-nodes/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-consumers/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-snis/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-upstreams-targets/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-routes/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-shared/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/entities/entities-consumer-groups/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/documentation/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/app-layout/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/error-boundary/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/entities-config-editor/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/forms/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/expressions/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/page-layout/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/split-pane/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/sandbox-layout/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/core/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",

PR preview package version found in ./packages/core/monaco-editor/package.json:
    "@kong/design-tokens": "1.18.3-pr.613.e59423d.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.

Copilot

Pull request overview

Copilot reviewed 230 out of 232 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

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

.stylelintrc.mjs

portikM added 8 commits March 3, 2026 13:03

chore(deps): bump design-tokens

8a35e0f

fix(app-layout): apply token-var-usage stylelint rule

77419fb

fix(documentation): apply token-var-usage stylelint rule

6c54d2a

fix(expressions): apply token-var-usage stylelint rule

372c98b

fix(forms): apply token-var-usage stylelint rule

451a90f

fix(monaco-editor): apply token-var-usage stylelint rule

4494581

fix(sandbox-layout): apply token-var-usage stylelint rule

f1bc3d1

fix(split-pane): apply token-var-usage stylelint rule

99bfab8

portikM self-assigned this Mar 3, 2026

portikM added the do not merge label Mar 3, 2026

portikM requested a review from Copilot March 3, 2026 20:17

Copilot started reviewing on behalf of portikM March 3, 2026 20:18 View session

fix: minor fix

ef74b7d

Copilot AI reviewed Mar 3, 2026

View reviewed changes

packages/core/expressions/src/components/PageHeader.vue Show resolved Hide resolved

packages/core/expressions/src/components/PageHeader.vue Show resolved Hide resolved

package.json Show resolved Hide resolved

portikM added 16 commits March 3, 2026 16:01

fix(analytics-chart): apply token-var-usage stylelint rule

53391d0

fix(analytics-geo-map): apply token-var-usage stylelint rule

ae5de60

fix(dashboard-renderer): apply token-var-usage stylelint rule

990d646

fix(entities-certificates): apply token-var-usage stylelint rule

a19ac1f

fix(entities-consumer-groups): apply token-var-usage stylelint rule

ffb03c0

fix(entities-consumers): apply token-var-usage stylelint rule

782d879

fix(entities-data-plane-nodes): apply token-var-usage stylelint rule

85aefa3

fix(entities-gateway-services): apply token-var-usage stylelint rule

eb775ba

fix(entities-key-sets): apply token-var-usage stylelint rule

338587f

fix(entities-plugins): apply token-var-usage stylelint rule

de3b099

fix(entities-redis-configurations): apply token-var-usage stylelint rule

dd23678

fix(entities-routes): apply token-var-usage stylelint rule

4915138

fix(entities-shared): apply token-var-usage stylelint rule

7369a02

fix(entities-snis): apply token-var-usage stylelint rule

119f718

fix(entities-upstreams-targets): apply token-var-usage stylelint rule

d626bad

fix(entities-vaults): apply token-var-usage stylelint rule

4faa675

fix: minor fix

18c36b7

portikM requested a review from Copilot March 3, 2026 21:28

Copilot started reviewing on behalf of portikM March 3, 2026 21:28 View session

Copilot AI reviewed Mar 3, 2026

View reviewed changes

...s/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePropertiesPanel.vue Show resolved Hide resolved

packages/analytics/analytics-chart/src/components/ZoomTimerange.vue Outdated Show resolved Hide resolved

portikM added 4 commits March 3, 2026 16:37

fix: minor fix

94c4ce1

fix(document-viewer): apply token-var-usage stylelint rule

ba1927a

fix(spec-renderer): apply token-var-usage stylelint rule

bbd871a

fix: minor fix

222cfc7

portikM requested a review from Copilot March 3, 2026 23:44

Copilot started reviewing on behalf of portikM March 3, 2026 23:44 View session

Copilot AI reviewed Mar 3, 2026

View reviewed changes

.stylelintrc.mjs Show resolved Hide resolved

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(*): apply token-var-usage stylelint rule#2959

fix(*): apply token-var-usage stylelint rule#2959
portikM wants to merge 30 commits intomainfrom
chore/bump-design-tokens-613

portikM commented Mar 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

kongponents-bot commented Mar 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

portikM commented Mar 3, 2026

Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

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 Mar 3, 2026

🔴 PR audit failed. 🔴

🔥 PNPM Audit issues detected.

🔥 PR preview packages detected .

🔥 No test coverage detected.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants