@kong/design-tokens 1.22.1 → 1.22.2-pr.656.bf3c7d3.0

package/dist/eslint-plugin/README.md

@@ -0,0 +1,136 @@
+# @kong/design-tokens/eslint-plugin
+
+[ESLint](https://eslint.org/) plugin for enforcing correct usage of KUI design tokens in Vue 3 (and Nuxt 4) templates.
+
+- [Usage](#usage)
+- [Rules](#rules)
+  - [`token-constant-requires-css-var`](#token-constant-requires-css-var)
+
+## Usage
+
+Install `@kong/design-tokens`, `eslint`, and `vue-eslint-parser` (typically provided by `eslint-plugin-vue`) as `devDependencies`.
+
+```sh
+pnpm add -D @kong/design-tokens eslint eslint-plugin-vue
+```
+
+In your `eslint.config.mjs` (ESLint 9 flat config):
+
+```js
+import vue from 'eslint-plugin-vue'
+import designTokens from '@kong/design-tokens/eslint-plugin'
+
+export default [
+  // your existing vue config...
+  ...vue.configs['flat/recommended'],
+
+  // apply the design tokens plugin
+  {
+    files: ['**/*.vue'],
+    plugins: {
+      '@kong/design-tokens': designTokens,
+    },
+    rules: {
+      '@kong/design-tokens/token-constant-requires-css-var': 'error',
+    },
+  },
+]
+```
+
+Or use the shipped `configs.recommended` shorthand:
+
+```js
+import vue from 'eslint-plugin-vue'
+import designTokens from '@kong/design-tokens/eslint-plugin'
+
+export default [
+  ...vue.configs['flat/recommended'],
+  {
+    files: ['**/*.vue'],
+    ...designTokens.configs.recommended,
+  },
+]
+```
+
+Auto-fix with:
+
+```sh
+eslint --fix src/
+```
+
+## Rules
+
+### `token-constant-requires-css-var`
+
+Enforces that KUI design token constants (imported from `@kong/design-tokens`) are wrapped in a CSS custom property fallback whenever they are used in a Vue `<template>` v-bind expression.
+
+The CSS custom property **must come first** so that DOM-level overrides (light/dark mode, theming) take effect. The JS constant serves as the static fallback.
+
+#### :red_circle: Incorrect usage
+
+```vue
+<template>
+  <!-- ❌ bare token constant — DOM overrides cannot work -->
+  <MyComponent :color="KUI_COLOR_TEXT_INVERSE" />
+
+  <!-- ❌ ternary branches -->
+  <MyComponent :color="isDark ? KUI_COLOR_TEXT_INVERSE : KUI_COLOR_TEXT_PRIMARY" />
+
+  <!-- ❌ object shorthand in :style -->
+  <MyComponent :style="{ color: KUI_COLOR_TEXT_INVERSE }" />
+</template>
+
+<script setup>
+import { KUI_COLOR_TEXT_INVERSE, KUI_COLOR_TEXT_PRIMARY } from '@kong/design-tokens'
+</script>
+```
+
+#### :green_circle: Correct usage (auto-fixed)
+
+```vue
+<template>
+  <!-- ✅ CSS custom property first, JS constant as fallback -->
+  <MyComponent :color="`var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />
+
+  <!-- ✅ both ternary branches wrapped -->
+  <MyComponent :color="isDark
+    ? `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`
+    : `var(--kui-color-text-primary, ${KUI_COLOR_TEXT_PRIMARY})`" />
+
+  <!-- ✅ object property value wrapped -->
+  <MyComponent :style="{ color: `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` }" />
+</template>
+
+<script setup>
+import { KUI_COLOR_TEXT_INVERSE, KUI_COLOR_TEXT_PRIMARY } from '@kong/design-tokens'
+</script>
+```
+
+#### Report-only cases (no autofix)
+
+The following cases are flagged but not auto-fixed because rewriting them would change semantics or be unsafe:
+
+- **Template literals**: `:color="\`${KUI_X}\`"` — nesting backtick strings requires manual rewrite.
+- **Binary expressions**: `:color="KUI_X + '!important'"` — string concatenation.
+- **Function arguments**: `:color="darken(KUI_X)"` — the function may not accept a CSS `var()` string.
+- **Script-setup variables**: `` const c = KUI_X; `` then `:color="c"` — fixing the declaration would affect all consumers of the variable. Wrap at the template binding site instead.
+
+#### Token naming
+
+The CSS custom property name is derived from the JS constant by lowercasing and replacing underscores with hyphens:
+
+```
+KUI_COLOR_TEXT_INVERSE  →  --kui-color-text-inverse
+KUI_SPACE_40            →  --kui-space-40
+KUI_FONT_SIZE_30        →  --kui-font-size-30
+```
+
+#### Limitations
+
+- **Namespace imports** (`import * as tokens from '@kong/design-tokens'`) are not tracked.
+- **Re-exports through barrel files** in consumer code — only direct `@kong/design-tokens` imports are detected.
+- **Multi-hop script-setup flow** (`const a = KUI_X; const b = a`) — only one level of indirection is detected.
+- **Render functions / JSX** (`.tsx` SFC blocks) — template-only.
+- **`<style>` blocks** — use [`@kong/design-tokens/stylelint-plugin`](./stylelint-plugin/README.md) instead.
+
+> **Note**: KUI design token JS constants resolve to primitive strings (e.g. `'#1456cb'`). When wrapped in `` `var(--kui-x, ${KUI_X})` ``, the fallback is that primitive string. In production Kong apps the CSS custom properties are always loaded, so the fallback fires only if the stylesheet fails to load.

package/dist/eslint-plugin/index.mjs

@@ -0,0 +1,36 @@
+import tokenConstantRequiresCssVar from './rules/token-constant-requires-css-var/index.mjs'
+
+/**
+ * ESLint plugin that enforces correct usage of Kong design tokens in Vue 3
+ * template `v-bind` expressions. Tokens imported from `@kong/design-tokens`
+ * must be wrapped in a CSS custom property fallback so DOM-level theme
+ * overrides (light/dark mode) take effect.
+ */
+const plugin = {
+  meta: {
+    name: '@kong/design-tokens/eslint-plugin',
+  },
+  rules: {
+    'token-constant-requires-css-var': tokenConstantRequiresCssVar,
+  },
+  // configs is assigned below to allow self-reference inside the object
+  configs: /** @type {any} */ (undefined),
+}
+
+plugin.configs = {
+  /**
+   * Flat-config preset that registers the plugin and enables the rule as an
+   * error. Spread into your `eslint.config.mjs` inside a `files: ['**\/*.vue']`
+   * config entry.
+   */
+  recommended: {
+    plugins: {
+      '@kong/design-tokens': plugin,
+    },
+    rules: {
+      '@kong/design-tokens/token-constant-requires-css-var': 'error',
+    },
+  },
+}
+
+export default plugin

package/dist/eslint-plugin/rules/token-constant-requires-css-var/__tests__/index.test.mjs

@@ -0,0 +1,558 @@
+import { describe, it } from 'vitest'
+import { RuleTester } from 'eslint'
+import vueParser from 'vue-eslint-parser'
+import rule from '../index.mjs'
+
+// Wire up vitest's describe/it so RuleTester integrates with the vitest reporter
+RuleTester.describe = describe
+RuleTester.it = it
+RuleTester.itOnly = it
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: vueParser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+    },
+  },
+})
+
+const RULE_NAME = '@kong/design-tokens/token-constant-requires-css-var'
+
+// ---------------------------------------------------------------------------
+// SFC source helpers
+// ---------------------------------------------------------------------------
+
+/** Builds a minimal `<script setup>` + `<template>` SFC string. */
+function sfc({ script = '', template = '' } = {}) {
+  return [
+    '<script setup>',
+    script.trim(),
+    '</script>',
+    '<template>',
+    template.trim(),
+    '</template>',
+  ].join('\n')
+}
+
+/**
+ * Shorthand for an SFC that imports one token from `@kong/design-tokens`.
+ * @param {string} varName - The exported constant name (e.g. `KUI_COLOR_TEXT_INVERSE`)
+ * @param {string} template - The `<template>` body
+ * @param {string} [alias] - Optional local alias (`import { varName as alias }`)
+ */
+function withImport(varName, template, alias) {
+  const specifier = alias ? `${varName} as ${alias}` : varName
+  return sfc({
+    script: `import { ${specifier} } from '@kong/design-tokens'`,
+    template,
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Valid cases — must produce zero errors
+// ---------------------------------------------------------------------------
+tester.run(RULE_NAME, rule, {
+  valid: [
+    // Already properly wrapped — idempotency check
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="`var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+
+    // Already wrapped inside a ternary branch
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        "<div :color=\"cond ? `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` : 'red'\" />",
+      ),
+    },
+
+    // Identifier not imported from @kong/design-tokens
+    {
+      filename: 'test.vue',
+      code: sfc({
+        script: "const myColor = '#fff'",
+        template: '<div :color="myColor" />',
+      }),
+    },
+
+    // Import from a different package — not tracked
+    {
+      filename: 'test.vue',
+      code: sfc({
+        script: "import { KUI_COLOR_TEXT_INVERSE } from 'other-package'",
+        template: '<div :color="KUI_COLOR_TEXT_INVERSE" />',
+      }),
+    },
+
+    // KUI token in v-if — not a v-bind style value
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div v-if="KUI_COLOR_TEXT_INVERSE" />',
+      ),
+    },
+
+    // KUI token in mustache interpolation — not a v-bind
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div>{{ KUI_COLOR_TEXT_INVERSE }}</div>',
+      ),
+    },
+
+    // Namespace import — not individually tracked
+    {
+      filename: 'test.vue',
+      code: sfc({
+        script: "import * as tokens from '@kong/design-tokens'",
+        template: '<div :color="tokens.KUI_COLOR_TEXT_INVERSE" />',
+      }),
+    },
+
+    // Static (non-binding) attribute — no colon
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div color="someStaticValue" />',
+      ),
+    },
+
+    // v-on directive — not a v-bind, never visited by the rule
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div @click="handler(KUI_COLOR_TEXT_INVERSE)" />',
+      ),
+    },
+
+    // MemberExpression property name — KUI token is the key, not the value reference
+    // `walkExpression` only walks the object side of a MemberExpression, not the property.
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="theme.KUI_COLOR_TEXT_INVERSE" />',
+      ),
+    },
+
+    // Partially wrapped ternary — the already-wrapped branch is idempotent (no re-report)
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="cond ? `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` : `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+  ],
+
+  // ---------------------------------------------------------------------------
+  // Invalid cases — must report errors (with or without autofix)
+  // ---------------------------------------------------------------------------
+  invalid: [
+    // Simple: bare identifier as the whole binding expression
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="KUI_COLOR_TEXT_INVERSE" />',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'KUI_COLOR_TEXT_INVERSE', cssVar: 'kui-color-text-inverse' } }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="`var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+
+    // Import alias: CSS var uses canonical name, fallback uses local alias
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="myColor" />',
+        'myColor',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'myColor', cssVar: 'kui-color-text-inverse' } }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="`var(--kui-color-text-inverse, ${myColor})`" />',
+        'myColor',
+      ),
+    },
+
+    // Ternary: both branches are the same KUI token — two separate fixes
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="cond ? KUI_COLOR_TEXT_INVERSE : KUI_COLOR_TEXT_INVERSE" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }, { messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="cond ? `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` : `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+
+    // Ternary: two DIFFERENT KUI tokens in consequent and alternate — independent CSS vars
+    {
+      filename: 'test.vue',
+      code: sfc({
+        script: "import { KUI_COLOR_TEXT_INVERSE, KUI_COLOR_BACKGROUND_PRIMARY } from '@kong/design-tokens'",
+        template: '<div :color="cond ? KUI_COLOR_TEXT_INVERSE : KUI_COLOR_BACKGROUND_PRIMARY" />',
+      }),
+      errors: [
+        { messageId: 'wrapInVar', data: { local: 'KUI_COLOR_TEXT_INVERSE', cssVar: 'kui-color-text-inverse' } },
+        { messageId: 'wrapInVar', data: { local: 'KUI_COLOR_BACKGROUND_PRIMARY', cssVar: 'kui-color-background-primary' } },
+      ],
+      output: sfc({
+        script: "import { KUI_COLOR_TEXT_INVERSE, KUI_COLOR_BACKGROUND_PRIMARY } from '@kong/design-tokens'",
+        template: '<div :color="cond ? `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` : `var(--kui-color-background-primary, ${KUI_COLOR_BACKGROUND_PRIMARY})`" />',
+      }),
+    },
+
+    // Partially wrapped ternary: only the unwrapped branch is reported and fixed
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="cond ? `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` : KUI_COLOR_TEXT_INVERSE" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="cond ? `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` : `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+
+    // Object: `:style="{ color: KUI_X }"`
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :style="{ color: KUI_COLOR_TEXT_INVERSE }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :style="{ color: `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` }" />',
+      ),
+    },
+
+    // Object with two KUI values — both fixed in a single pass
+    {
+      filename: 'test.vue',
+      code: sfc({
+        script: "import { KUI_COLOR_TEXT_INVERSE, KUI_COLOR_BACKGROUND_PRIMARY } from '@kong/design-tokens'",
+        template: '<div :style="{ color: KUI_COLOR_TEXT_INVERSE, background: KUI_COLOR_BACKGROUND_PRIMARY }" />',
+      }),
+      errors: [{ messageId: 'wrapInVar' }, { messageId: 'wrapInVar' }],
+      output: sfc({
+        script: "import { KUI_COLOR_TEXT_INVERSE, KUI_COLOR_BACKGROUND_PRIMARY } from '@kong/design-tokens'",
+        template: '<div :style="{ color: `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`, background: `var(--kui-color-background-primary, ${KUI_COLOR_BACKGROUND_PRIMARY})` }" />',
+      }),
+    },
+
+    // Array element
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :style="[baseStyle, KUI_COLOR_TEXT_INVERSE]" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :style="[baseStyle, `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`]" />',
+      ),
+    },
+
+    // LogicalExpression (??) — autofix the right-hand operand
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="theme.color ?? KUI_COLOR_TEXT_INVERSE" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="theme.color ?? `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+
+    // LogicalExpression (||) — autofix the right-hand operand
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="theme.color || KUI_COLOR_TEXT_INVERSE" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="theme.color || `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+
+    // Dynamic argument (:[propName])
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :[propName]="KUI_COLOR_TEXT_INVERSE" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :[propName]="`var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+
+    // v-bind without argument (object spread syntax)
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div v-bind="{ color: KUI_COLOR_TEXT_INVERSE }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div v-bind="{ color: `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})` }" />',
+      ),
+    },
+
+    // SequenceExpression — last element gets AUTOFIX context; earlier ones are REPORT_ONLY
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="(sideEffect(), KUI_COLOR_TEXT_INVERSE)" />',
+      ),
+      errors: [{ messageId: 'wrapInVar' }],
+      output: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="(sideEffect(), `var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`)" />',
+      ),
+    },
+
+    // AssignmentExpression — always REPORT_ONLY (wrapping the assigned value changes semantics)
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="(x = KUI_COLOR_TEXT_INVERSE)" />',
+      ),
+      errors: [{ messageId: 'wrapInVarNoFix' }],
+      output: null,
+    },
+
+    // ---------------------------------------------------------------------------
+    // Token family coverage — same autofix transform applies to all KUI_ prefixes
+    // ---------------------------------------------------------------------------
+
+    // KUI_FONT_SIZE — typography scale tokens
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_FONT_SIZE_30',
+        '<div :style="{ fontSize: KUI_FONT_SIZE_30 }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'KUI_FONT_SIZE_30', cssVar: 'kui-font-size-30' } }],
+      output: withImport(
+        'KUI_FONT_SIZE_30',
+        '<div :style="{ fontSize: `var(--kui-font-size-30, ${KUI_FONT_SIZE_30})` }" />',
+      ),
+    },
+
+    // KUI_BORDER_RADIUS — shape tokens
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_BORDER_RADIUS_20',
+        '<div :style="{ borderRadius: KUI_BORDER_RADIUS_20 }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'KUI_BORDER_RADIUS_20', cssVar: 'kui-border-radius-20' } }],
+      output: withImport(
+        'KUI_BORDER_RADIUS_20',
+        '<div :style="{ borderRadius: `var(--kui-border-radius-20, ${KUI_BORDER_RADIUS_20})` }" />',
+      ),
+    },
+
+    // KUI_FONT_WEIGHT — weight scale tokens
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_FONT_WEIGHT_BOLD',
+        '<div :style="{ fontWeight: KUI_FONT_WEIGHT_BOLD }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'KUI_FONT_WEIGHT_BOLD', cssVar: 'kui-font-weight-bold' } }],
+      output: withImport(
+        'KUI_FONT_WEIGHT_BOLD',
+        '<div :style="{ fontWeight: `var(--kui-font-weight-bold, ${KUI_FONT_WEIGHT_BOLD})` }" />',
+      ),
+    },
+
+    // KUI_LINE_HEIGHT — line height tokens
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_LINE_HEIGHT_40',
+        '<div :style="{ lineHeight: KUI_LINE_HEIGHT_40 }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'KUI_LINE_HEIGHT_40', cssVar: 'kui-line-height-40' } }],
+      output: withImport(
+        'KUI_LINE_HEIGHT_40',
+        '<div :style="{ lineHeight: `var(--kui-line-height-40, ${KUI_LINE_HEIGHT_40})` }" />',
+      ),
+    },
+
+    // KUI_Z_INDEX — z-index tokens
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_Z_INDEX_10',
+        '<div :style="{ zIndex: KUI_Z_INDEX_10 }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'KUI_Z_INDEX_10', cssVar: 'kui-z-index-10' } }],
+      output: withImport(
+        'KUI_Z_INDEX_10',
+        '<div :style="{ zIndex: `var(--kui-z-index-10, ${KUI_Z_INDEX_10})` }" />',
+      ),
+    },
+
+    // KUI_SPACE — spacing tokens (also confirms numeric suffix handling)
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_SPACE_40',
+        '<div :style="{ padding: KUI_SPACE_40 }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'KUI_SPACE_40', cssVar: 'kui-space-40' } }],
+      output: withImport(
+        'KUI_SPACE_40',
+        '<div :style="{ padding: `var(--kui-space-40, ${KUI_SPACE_40})` }" />',
+      ),
+    },
+
+    // KUI_BREAKPOINT — breakpoint tokens (word-only suffix, no numbers)
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_BREAKPOINT_PHABLET',
+        '<div :style="{ maxWidth: KUI_BREAKPOINT_PHABLET }" />',
+      ),
+      errors: [{ messageId: 'wrapInVar', data: { local: 'KUI_BREAKPOINT_PHABLET', cssVar: 'kui-breakpoint-phablet' } }],
+      output: withImport(
+        'KUI_BREAKPOINT_PHABLET',
+        '<div :style="{ maxWidth: `var(--kui-breakpoint-phablet, ${KUI_BREAKPOINT_PHABLET})` }" />',
+      ),
+    },
+
+    // ---------------------------------------------------------------------------
+    // REPORT_ONLY — no autofix because rewriting would change expression semantics
+    // ---------------------------------------------------------------------------
+
+    // Inside TemplateLiteral (no autofix: would nest backticks)
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="`${KUI_COLOR_TEXT_INVERSE}`" />',
+      ),
+      errors: [{ messageId: 'wrapInVarNoFix', data: { local: 'KUI_COLOR_TEXT_INVERSE', cssVar: 'kui-color-text-inverse' } }],
+      output: null,
+    },
+
+    // BinaryExpression (no autofix: changes string semantics)
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        "<div :color=\"KUI_COLOR_TEXT_INVERSE + '!important'\" />",
+      ),
+      errors: [{ messageId: 'wrapInVarNoFix', data: { local: 'KUI_COLOR_TEXT_INVERSE', cssVar: 'kui-color-text-inverse' } }],
+      output: null,
+    },
+
+    // CallExpression argument (no autofix: could break color helpers like darken/rgba)
+    {
+      filename: 'test.vue',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="darken(KUI_COLOR_TEXT_INVERSE)" />',
+      ),
+      errors: [{ messageId: 'wrapInVarNoFix', data: { local: 'KUI_COLOR_TEXT_INVERSE', cssVar: 'kui-color-text-inverse' } }],
+      output: null,
+    },
+
+    // Script-setup variable (`const c = KUI_X`) — detected, no autofix
+    {
+      filename: 'test.vue',
+      code: sfc({
+        script: [
+          "import { KUI_COLOR_TEXT_INVERSE } from '@kong/design-tokens'",
+          'const myColor = KUI_COLOR_TEXT_INVERSE',
+        ].join('\n'),
+        template: '<div :color="myColor" />',
+      }),
+      errors: [{ messageId: 'wrapInVarScriptSetup', data: { imported: 'KUI_COLOR_TEXT_INVERSE', local: 'myColor', cssVar: 'kui-color-text-inverse' } }],
+      output: null,
+    },
+  ],
+})
+
+// ---------------------------------------------------------------------------
+// Idempotency: the fixer output must itself be a valid (no-error) input.
+// tester.run() must be called at the top level (not inside it()) because it
+// internally calls describe() which vitest forbids inside test blocks.
+// ---------------------------------------------------------------------------
+tester.run(`${RULE_NAME} (idempotency)`, rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      name: 'does not re-report already-fixed color token',
+      code: withImport(
+        'KUI_COLOR_TEXT_INVERSE',
+        '<div :color="`var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`" />',
+      ),
+    },
+    {
+      filename: 'test.vue',
+      name: 'does not re-report already-fixed font-size token',
+      code: withImport(
+        'KUI_FONT_SIZE_30',
+        '<div :style="{ fontSize: `var(--kui-font-size-30, ${KUI_FONT_SIZE_30})` }" />',
+      ),
+    },
+    {
+      filename: 'test.vue',
+      name: 'does not re-report already-fixed space token inside object',
+      code: sfc({
+        script: "import { KUI_SPACE_40, KUI_BORDER_RADIUS_20 } from '@kong/design-tokens'",
+        template: '<div :style="{ padding: `var(--kui-space-40, ${KUI_SPACE_40})`, borderRadius: `var(--kui-border-radius-20, ${KUI_BORDER_RADIUS_20})` }" />',
+      }),
+    },
+  ],
+  invalid: [],
+})
+
+// ---------------------------------------------------------------------------
+// TypeScript note
+// ---------------------------------------------------------------------------
+// `import type { KUI_X }` (type-only imports with no runtime value) are skipped
+// by the rule via `importKind === 'type'`. Testing that branch requires
+// @typescript-eslint/parser as the script-block parser for vue-eslint-parser,
+// which would add an extra devDependency. That coverage is left to integration
+// tests in the consumer project.

package/dist/eslint-plugin/rules/token-constant-requires-css-var/index.mjs

@@ -0,0 +1,328 @@
+import {
+  KUI_IDENTIFIER_PATTERN,
+  KUI_IMPORT_SOURCE,
+  kuiIdentifierToCssVar,
+} from '../../utilities/index.mjs'
+
+/** Identifier can be safely auto-fixed in this expression position. */
+const AUTOFIX = 'fix'
+
+/** Identifier must be reported but cannot be auto-fixed without changing semantics. */
+const REPORT_ONLY = 'report'
+
+/**
+ * Returns `true` when the TemplateLiteral expression slot at `exprIndex` is
+ * already in the form `` `var(--kui-..., ${IDENTIFIER})` ``, so we can skip
+ * it on subsequent lint passes (idempotency).
+ *
+ * @param {import('estree').TemplateLiteral} templateNode
+ * @param {number} exprIndex - Index of the expression slot to inspect
+ * @returns {boolean}
+ */
+function isAlreadyWrappedSlot(templateNode, exprIndex) {
+  const priorText = templateNode.quasis[exprIndex]?.value?.cooked ?? ''
+  const nextText = templateNode.quasis[exprIndex + 1]?.value?.cooked ?? ''
+  return /var\(--kui-[a-z0-9-]+,\s*$/.test(priorText) && nextText.startsWith(')')
+}
+
+/**
+ * Recursively walks a v-bind expression tree, calling `onIdentifier` for each
+ * `Identifier` node that should be inspected for KUI token usage.
+ *
+ * The `ctx` parameter propagates through the tree and is downgraded from
+ * `AUTOFIX` to `REPORT_ONLY` when entering contexts where replacing an
+ * Identifier with a backtick template literal would be unsafe (e.g. inside an
+ * existing TemplateLiteral, a BinaryExpression, or a CallExpression argument).
+ *
+ * @param {import('estree').Node | null | undefined} node - Current AST node
+ * @param {string} ctx - Either `AUTOFIX` or `REPORT_ONLY`
+ * @param {(id: import('estree').Identifier, ctx: string) => void} onIdentifier
+ */
+function walkExpression(node, ctx, onIdentifier) {
+  if (!node) return
+
+  // TypeScript-specific transparent wrappers (present when @typescript-eslint/parser
+  // is used for the SFC <script> block). These types are not in the estree Node union,
+  // so we widen to `any` before comparing to avoid an TS2367 "no overlap" error.
+  const nodeType = /** @type {string} */ (node.type)
+  if (nodeType === 'TSAsExpression' || nodeType === 'TSNonNullExpression' || nodeType === 'TSTypeAssertion') {
+    walkExpression(/** @type {{ expression: import('estree').Node }} */ (node).expression, ctx, onIdentifier)
+    return
+  }
+
+  switch (node.type) {
+    case 'Identifier':
+      onIdentifier(/** @type {import('estree').Identifier} */ (node), ctx)
+      break
+
+    case 'ConditionalExpression': {
+      const n = /** @type {import('estree').ConditionalExpression} */ (node)
+      // Walk value branches only; the boolean test is not a style value
+      walkExpression(n.consequent, ctx, onIdentifier)
+      walkExpression(n.alternate, ctx, onIdentifier)
+      break
+    }
+
+    case 'LogicalExpression': {
+      const n = /** @type {import('estree').LogicalExpression} */ (node)
+      walkExpression(n.left, ctx, onIdentifier)
+      walkExpression(n.right, ctx, onIdentifier)
+      break
+    }
+
+    case 'ObjectExpression': {
+      const n = /** @type {import('estree').ObjectExpression} */ (node)
+      for (const prop of n.properties) {
+        if (prop.type === 'Property') {
+          walkExpression(prop.value, ctx, onIdentifier)
+        }
+        // SpreadElement is not walked — shape is unknown at static analysis time
+      }
+      break
+    }
+
+    case 'ArrayExpression': {
+      const n = /** @type {import('estree').ArrayExpression} */ (node)
+      for (const el of n.elements) {
+        if (el) walkExpression(el, ctx, onIdentifier)
+      }
+      break
+    }
+
+    case 'TemplateLiteral': {
+      const n = /** @type {import('estree').TemplateLiteral} */ (node)
+      // Replacing an Identifier inside `${}` with another backtick string would
+      // nest backticks — not valid JS. Check idempotency first; otherwise report.
+      n.expressions.forEach((expr, i) => {
+        if (isAlreadyWrappedSlot(n, i)) return
+        walkExpression(expr, REPORT_ONLY, onIdentifier)
+      })
+      break
+    }
+
+    case 'CallExpression': {
+      const n = /** @type {import('estree').CallExpression} */ (node)
+      // Arguments are REPORT_ONLY: the function may expect a raw color value
+      // (e.g. darken(), rgba()) and wrapping in var() would break it.
+      for (const arg of n.arguments) {
+        walkExpression(arg, REPORT_ONLY, onIdentifier)
+      }
+      break
+    }
+
+    case 'BinaryExpression': {
+      const n = /** @type {import('estree').BinaryExpression} */ (node)
+      // String concat or arithmetic — wrapping changes the resulting value type
+      walkExpression(n.left, REPORT_ONLY, onIdentifier)
+      walkExpression(n.right, REPORT_ONLY, onIdentifier)
+      break
+    }
+
+    // Standard optional-chaining wrapper (e.g. `a?.b`)
+    case 'ChainExpression': {
+      const n = /** @type {import('estree').ChainExpression} */ (node)
+      walkExpression(n.expression, ctx, onIdentifier)
+      break
+    }
+
+    case 'AssignmentExpression': {
+      const n = /** @type {import('estree').AssignmentExpression} */ (node)
+      walkExpression(n.right, REPORT_ONLY, onIdentifier)
+      break
+    }
+
+    case 'MemberExpression': {
+      const n = /** @type {import('estree').MemberExpression} */ (node)
+      // Walk the object side only; property names are not value references
+      walkExpression(n.object, REPORT_ONLY, onIdentifier)
+      break
+    }
+
+    case 'SequenceExpression': {
+      const n = /** @type {import('estree').SequenceExpression} */ (node)
+      const last = n.expressions.length - 1
+      n.expressions.forEach((expr, i) => {
+        walkExpression(expr, i === last ? ctx : REPORT_ONLY, onIdentifier)
+      })
+      break
+    }
+
+    default:
+      // Unknown or unhandled node type — stop recursing
+      break
+  }
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+const rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Enforce CSS custom property var() fallback for KUI design tokens in Vue template v-bind expressions',
+      url: 'https://github.com/Kong/design-tokens/blob/main/eslint-plugin/README.md',
+    },
+    fixable: 'code',
+    hasSuggestions: false,
+    schema: [],
+    messages: {
+      wrapInVar:
+        "Kong design token '{{local}}' must be wrapped in a CSS custom property fallback. " +
+        'Use `var(--{{cssVar}}, ${{{local}}})` so DOM-level theme overrides (e.g., light/dark mode) take effect.',
+      wrapInVarNoFix:
+        "Kong design token '{{local}}' must be wrapped in a CSS custom property fallback, " +
+        'but cannot be auto-fixed in this expression context. ' +
+        'Manually change to: `var(--{{cssVar}}, ${{{local}}})` at the binding site ' +
+        'so DOM-level theme overrides (e.g., light/dark mode) take effect.',
+      wrapInVarScriptSetup:
+        "Kong design token '{{imported}}' is stored in variable '{{local}}' which flows into this style binding. " +
+        'Wrap the token at the template binding site: `var(--{{cssVar}}, ${{{local}}})`, or use the import directly ' +
+        'so DOM-level theme overrides (e.g., light/dark mode) take effect.',
+    },
+  },
+
+  create(context) {
+    /**
+     * Maps each tracked local name to the canonical imported name.
+     * e.g. `import { KUI_COLOR_TEXT_INVERSE as myColor }` → `{ 'myColor' → 'KUI_COLOR_TEXT_INVERSE' }`
+     * @type {Map<string, string>}
+     */
+    const trackedImports = new Map()
+
+    /**
+     * Maps script-setup variable names to the import local name they were
+     * initialised from, for one-hop script detection.
+     * e.g. `const c = KUI_X` (where `KUI_X` is in trackedImports) → `{ 'c' → 'KUI_X' }`
+     * @type {Map<string, string>}
+     */
+    const trackedScriptVars = new Map()
+
+    /** @type {{ defineTemplateBodyVisitor?: Function } | undefined} */
+    const parserServices =
+      context.sourceCode?.parserServices ?? /** @type {any} */ (context).parserServices
+
+    if (!parserServices?.defineTemplateBodyVisitor) {
+      // vue-eslint-parser is not configured; no-op for plain JS/TS files.
+      // Warn when linting a .vue file so misconfigured setups are caught early.
+      const filename = context.filename ?? /** @type {any} */ (context).getFilename?.() ?? ''
+      if (filename.endsWith('.vue')) {
+        console.warn(
+          `[@kong/design-tokens] token-constant-requires-css-var: vue-eslint-parser is not active for "${filename}". ` +
+          'Add vue-eslint-parser (or eslint-plugin-vue, which ships it) as the parser in your ESLint config.',
+        )
+      }
+      return {}
+    }
+
+    /**
+     * Reports a KUI token Identifier found inside a v-bind expression.
+     * Issues an autofix when `ctx === AUTOFIX`; reports without fix otherwise.
+     *
+     * @param {import('estree').Identifier} idNode - The token identifier node
+     * @param {string} ctx - Either `AUTOFIX` or `REPORT_ONLY`
+     */
+    function handleIdentifier(idNode, ctx) {
+      const localName = idNode.name
+
+      // Case 1: directly-imported KUI token (e.g. KUI_X or its local alias)
+      const importedName = trackedImports.get(localName)
+      if (importedName) {
+        const cssVar = kuiIdentifierToCssVar(importedName)
+        const cssVarNoPrefix = cssVar.slice(2) // strip leading '--' for the message
+
+        if (ctx === AUTOFIX) {
+          context.report({
+            node: idNode,
+            messageId: 'wrapInVar',
+            data: { local: localName, cssVar: cssVarNoPrefix },
+            fix(fixer) {
+              // Replace the bare Identifier with a template-literal var() fallback
+              return fixer.replaceText(idNode, `\`var(${cssVar}, \${${localName}})\``)
+            },
+          })
+        } else {
+          context.report({
+            node: idNode,
+            messageId: 'wrapInVarNoFix',
+            data: { local: localName, cssVar: cssVarNoPrefix },
+          })
+        }
+        return
+      }
+
+      // Case 2: script-setup variable initialised from a tracked KUI token
+      const sourceImportLocal = trackedScriptVars.get(localName)
+      if (!sourceImportLocal) return
+      const sourceImportedName = trackedImports.get(sourceImportLocal)
+      if (!sourceImportedName) return
+
+      const cssVar = kuiIdentifierToCssVar(sourceImportedName)
+      context.report({
+        node: idNode,
+        messageId: 'wrapInVarScriptSetup',
+        data: {
+          imported: sourceImportedName,
+          local: localName,
+          cssVar: cssVar.slice(2),
+        },
+      })
+    }
+
+    const templateVisitor = {
+      /** Fires for every `:prop="..."` and `v-bind="..."` attribute in the template. */
+      'VAttribute[directive=true][key.name.name="bind"]'(
+        /** @type {any} */ node,
+      ) {
+        const valueContainer = node.value
+        if (!valueContainer?.expression) return
+        walkExpression(valueContainer.expression, AUTOFIX, handleIdentifier)
+      },
+    }
+
+    const scriptVisitor = {
+      /** Collects KUI_ named imports from `@kong/design-tokens`. */
+      ImportDeclaration(/** @type {import('estree').ImportDeclaration} */ node) {
+        if (node.source.value !== KUI_IMPORT_SOURCE) return
+        // Skip `import type { ... }` — type-only imports have no runtime value
+        if (/** @type {any} */ (node).importKind === 'type') return
+
+        for (const specifier of node.specifiers) {
+          if (specifier.type !== 'ImportSpecifier') continue
+          // Skip per-specifier `import { type KUI_X }` (TypeScript syntax)
+          if (/** @type {any} */ (specifier).importKind === 'type') continue
+
+          const imported = /** @type {import('estree').ImportSpecifier} */ (specifier).imported
+          const importedName = /** @type {string} */ (
+            'name' in imported ? imported.name : /** @type {any} */ (imported).value
+          )
+          const localName = specifier.local.name
+
+          if (!KUI_IDENTIFIER_PATTERN.test(importedName)) continue
+
+          trackedImports.set(localName, importedName)
+        }
+      },
+
+      /**
+       * Detects `const c = KUI_X` in `<script setup>` (one-hop variable detection).
+       * Only simple `Identifier = Identifier` initialisers are tracked.
+       */
+      VariableDeclarator(/** @type {import('estree').VariableDeclarator} */ node) {
+        if (node.init?.type !== 'Identifier') return
+        if (node.id?.type !== 'Identifier') return
+
+        const initName = /** @type {import('estree').Identifier} */ (node.init).name
+        if (!trackedImports.has(initName)) return
+
+        trackedScriptVars.set(
+          /** @type {import('estree').Identifier} */ (node.id).name,
+          initName,
+        )
+      },
+    }
+
+    return parserServices.defineTemplateBodyVisitor(templateVisitor, scriptVisitor)
+  },
+}
+
+export default rule

package/dist/eslint-plugin/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": [
+    "./**/*.mjs"
+  ],
+  "exclude": [
+    "node_modules",
+    "../node_modules",
+    "../dist"
+  ]
+}

package/dist/eslint-plugin/utilities/index.mjs

@@ -0,0 +1,18 @@
+/**
+ * Converts a `KUI_` JS constant name to its CSS custom property equivalent.
+ *
+ * @example
+ * kuiIdentifierToCssVar('KUI_COLOR_TEXT_INVERSE') // → '--kui-color-text-inverse'
+ *
+ * @param {string} name - A KUI token constant name (e.g. `KUI_COLOR_TEXT_INVERSE`)
+ * @returns {string} The corresponding CSS custom property name including the `--` prefix
+ */
+export function kuiIdentifierToCssVar(name) {
+  return '--' + name.toLowerCase().replace(/_/g, '-')
+}
+
+/** Matches any valid `@kong/design-tokens` JS export name (e.g. `KUI_COLOR_TEXT_INVERSE`). */
+export const KUI_IDENTIFIER_PATTERN = /^KUI_[A-Z0-9_]+$/
+
+/** The npm package name from which KUI tokens are imported. */
+export const KUI_IMPORT_SOURCE = '@kong/design-tokens'

package/dist/eslint-plugin/vitest.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['eslint-plugin/rules/**/__tests__/**/*.test.mjs'],
+    environment: 'node',
+  },
+})

package/dist/tokens/css/custom-properties.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 19:48:48 GMT
+ * Generated on Fri, 15 May 2026 18:00:44 GMT
  * 
  * Kong Design Tokens
  * GitHub: https://github.com/Kong/design-tokens

package/dist/tokens/js/cjs/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 19:48:48 GMT
+ * Generated on Fri, 15 May 2026 18:00:44 GMT
  *
  * Kong Design Tokens
  * GitHub: https://github.com/Kong/design-tokens

package/dist/tokens/js/cjs/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 19:48:48 GMT
+ * Generated on Fri, 15 May 2026 18:00:44 GMT
  *
  * Kong Design Tokens
  * GitHub: https://github.com/Kong/design-tokens

package/dist/tokens/js/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 19:48:48 GMT
+ * Generated on Fri, 15 May 2026 18:00:44 GMT
  *
  * Kong Design Tokens
  * GitHub: https://github.com/Kong/design-tokens

package/dist/tokens/js/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 19:48:48 GMT
+ * Generated on Fri, 15 May 2026 18:00:44 GMT
  *
  * Kong Design Tokens
  * GitHub: https://github.com/Kong/design-tokens

package/dist/tokens/less/variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Thu, 14 May 2026 19:48:48 GMT
+// Generated on Fri, 15 May 2026 18:00:44 GMT
 // 
 // Kong Design Tokens
 // GitHub: https://github.com/Kong/design-tokens

package/dist/tokens/scss/_map.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 19:48:48 GMT
+ * Generated on Fri, 15 May 2026 18:00:44 GMT
  * 
  * Kong Design Tokens
  * GitHub: https://github.com/Kong/design-tokens

package/dist/tokens/scss/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Thu, 14 May 2026 19:48:48 GMT
+// Generated on Fri, 15 May 2026 18:00:44 GMT
 // 
 // Kong Design Tokens
 // GitHub: https://github.com/Kong/design-tokens

package/package.json

@@ -1,16 +1,21 @@
 {
   "name": "@kong/design-tokens",
-  "version": "1.22.1",
+  "version": "1.22.2-pr.656.bf3c7d3.0",
   "description": "Kong UI Design Tokens and style dictionary",
   "type": "module",
   "scripts": {
-    "build": "pnpm build:clean && style-dictionary build --config ./config.mjs && pnpm copy:tokens-doc && pnpm copy:stylelint-plugin",
+    "build": "pnpm build:clean && pnpm build:tokens && pnpm copy:tokens-doc && pnpm copy:stylelint-plugin && pnpm copy:eslint-plugin",
+    "build:tokens": "style-dictionary build --config ./config.mjs",
     "build:clean": "rimraf ./dist",
     "copy:tokens-doc": "shx cp -f './dist/tokens/README.md' './TOKENS.md'",
     "copy:stylelint-plugin": "shx cp -R './stylelint-plugin' './dist/stylelint-plugin/'",
+    "copy:eslint-plugin": "shx cp -R './eslint-plugin' './dist/eslint-plugin/'",
+    "test:eslint-plugin": "vitest run --config eslint-plugin/vitest.config.mjs",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "typecheck": "vue-tsc --project ./sandbox/tsconfig.json --noEmit",
+    "typecheck": "pnpm typecheck:sandbox && pnpm typecheck:eslint-plugin",
+    "typecheck:sandbox": "vue-tsc --project ./sandbox/tsconfig.json --noEmit",
+    "typecheck:eslint-plugin": "tsc -p eslint-plugin/tsconfig.json --noEmit",
     "sandbox": "pnpm build && run-p sandbox:open sandbox:watch",
     "sandbox:open": "vite sandbox -c ./sandbox/vite.config.ts",
     "sandbox:watch": "chokidar \"tokens/**/*.json\" -c \"pnpm build\"",
@@ -44,8 +49,18 @@
     },
     "./tokens/*": "./dist/tokens/*",
     "./stylelint-plugin": "./dist/stylelint-plugin/index.mjs",
+    "./eslint-plugin": "./dist/eslint-plugin/index.mjs",
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "eslint": "^9.0.0",
+    "vue-eslint-parser": ">=10.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-eslint-parser": {
+      "optional": true
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/Kong/design-tokens.git"
@@ -68,7 +83,8 @@
     "chokidar-cli": "^3.0.0",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^9.39.3",
+    "eslint": "^9.39.4",
+    "eslint-plugin-vue": "^10.9.0",
     "npm-run-all2": "^8.0.4",
     "rimraf": "^6.1.3",
     "sass": "^1.97.3",
@@ -79,10 +95,15 @@
     "vite": "^8.0.0",
     "vite-plugin-restart": "^2.0.0",
     "vite-plugin-vue-devtools": "^8.0.7",
+    "vitest": "^4.1.5",
     "vue": "^3.5.29",
+    "vue-eslint-parser": "^10.4.0",
     "vue-router": "^5.0.3",
     "vue-tsc": "^3.2.7"
   },
+  "overrides": {
+    "semver": "^7.8.0"
+  },
   "release": {
     "branches": [
       "+([0-9])?(.{+([0-9]),x}).x",
@@ -145,6 +166,9 @@
       "@evilmartians/lefthook",
       "esbuild",
       "style-dictionary"
-    ]
+    ],
+    "overrides": {
+      "semver": "^7.6.0"
+    }
   }
 }