@kong/design-tokens 2.0.1-pr.670.ff5aeec.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -2,11 +2,6 @@
2
2
 
3
3
  Kong Design Tokens for Konnect, via [Style Dictionary](https://github.com/amzn/style-dictionary).
4
4
 
5
- - [Token Tiers](#token-tiers)
6
- - [Semantic tokens](#semantic-tokens)
7
- - [Component tokens — names only, value-less](#component-tokens--names-only-value-less)
8
- - [Themeable token list](#themeable-token-list)
9
- - [Themes](#themes)
10
5
  - [Tokens](#tokens)
11
6
  - [Token Formats](#token-formats)
12
7
  - [SCSS](#scss)
@@ -17,12 +12,8 @@ Kong Design Tokens for Konnect, via [Style Dictionary](https://github.com/amzn/s
17
12
  - [Installation](#installation)
18
13
  - [Standalone components](#standalone-components)
19
14
  - [Host applications](#host-applications)
20
- - [Kongponents](#kongponents)
21
15
  - [Updating Tokens & Local Development](#updating-tokens--local-development)
22
- - [Directory structure](#directory-structure)
23
16
  - [Token Requirements](#token-requirements)
24
- - [Creating a new theme](#creating-a-new-theme)
25
- - [Theme `$description` authoring rules](#theme-description-authoring-rules)
26
17
  - [Development Sandbox](#development-sandbox)
27
18
  - [Lint and fix](#lint-and-fix)
28
19
  - [Build for production](#build-for-production)
@@ -31,88 +22,10 @@ Kong Design Tokens for Konnect, via [Style Dictionary](https://github.com/amzn/s
31
22
  - [Approvals](#approvals)
32
23
  - [Package Publishing](#package-publishing)
33
24
 
34
- ## Token Tiers
35
-
36
- The `@kong/design-tokens` package uses a two-tier exported token taxonomy.
37
-
38
- | Tier | Source directory | Examples | Exported as |
39
- |------|-----------------|----------|-------------|
40
- | **Semantic** | `tokens/source/**` | `--kui-color-background-primary`, `--kui-space-40`, `--kui-border-radius-30`, `--kui-method-color-background-get` | CSS custom properties, SCSS/LESS variables, JS constants |
41
- | **Component** | `tokens/components/**` | `--kui-button-border-radius-medium`, `--kui-button-color-background-primary`, `--kui-button-shadow-focus` | Included in `KUI_THEMEABLE_TOKENS` — **no CSS value** |
42
-
43
- > **Alias tokens** (`tokens/alias/**`) form a third internal directory. They hold the raw palette values (hex colors, base sizes) that semantic tokens reference. They are **never exported** — they exist only so Style Dictionary can resolve `{color.alias.blue.100}` references at build time.
44
-
45
- ### Semantic tokens
46
-
47
- Everything in `tokens/source/` is a semantic token — it has a concrete value and is exported to all formats (CSS, SCSS, LESS, JS). This includes:
48
-
49
- - **Scale tokens** — `--kui-color-*`, `--kui-space-*`, `--kui-border-radius-*`, `--kui-shadow-*`, `--kui-font-*`, etc. Named after the design dimension they represent.
50
- - **Domain tokens** (`tokens/source/domain/`) — `--kui-method-*`, `--kui-status-*`, `--kui-navigation-*`, `--kui-icon-*`. Named after a cross-cutting UI concept (HTTP methods, status codes, navigation chrome). Valued and exported exactly like scale tokens. **These are not component tokens** even though they're used inside components.
51
-
52
- ### Component tokens — names only, value-less
53
-
54
- Component tokens (`--kui-button-*`, `--kui-card-*`, `--kui-input-*`, `--kui-badge-*`, …) live in `tokens/components/` and are **declared without any CSS value** — they are purely override slots. Every Kongponents component uses them in a `var()` fallback chain:
55
-
56
- ```scss
57
- border-radius: var(--kui-button-border-radius-medium, var(--kui-border-radius-30, $kui-border-radius-30));
58
- // ↑ component token (empty by default) ↑ semantic fallback ↑ SCSS literal
59
- ```
60
-
61
- When a theme writes `--kui-button-border-radius-medium: 999px`, only buttons go pill-shaped. Inputs and other components keep their semantic default. When no theme writes the token, `var()` falls through to the semantic default — **byte-identical to the un-themed render**.
62
-
63
- ### Themeable token list
64
-
65
- The `./themeable-tokens` subpath exports `KUI_THEMEABLE_TOKENS` — a typed `readonly` tuple of every `--kui-*` custom property name that a theme may meaningfully override. It combines both semantic tokens and value-less component tokens.
66
-
67
- ```ts
68
- import { KUI_THEMEABLE_TOKENS } from '@kong/design-tokens/themeable-tokens'
69
-
70
- // Derive a union type of all valid theme keys:
71
- type ThemeToken = typeof KUI_THEMEABLE_TOKENS[number]
72
- ```
73
-
74
- **Breakpoint tokens are intentionally excluded.** `--kui-breakpoint-*` tokens are available as CSS custom properties and SCSS variables, but they cannot be consumed inside CSS `@media` feature queries — that is, `@media (min-width: var(--kui-breakpoint-md))` is invalid CSS. Kongponents uses breakpoints exclusively in `@media` rules, so overriding them via a theme has no effect on responsive behavior. Set breakpoints at the SCSS level instead if your project needs custom breakpoint values.
75
-
76
- ## Themes
77
-
78
- Pre-built theme CSS files activate a complete set of token overrides via a `data-kui-theme` attribute on any element. Load a theme CSS file and then set the attribute on the root element (or any subtree element):
79
-
80
- ```html
81
- <!-- In your HTML template or equivalent -->
82
- <html data-kui-theme="konnect-light">
83
- ```
84
-
85
- ```ts
86
- // Load the theme CSS — webpack/Vite will bundle it
87
- import '@kong/design-tokens/themes/konnect-light.css'
88
-
89
- // Switch the active theme at runtime
90
- document.documentElement.setAttribute('data-kui-theme', 'konnect-dark')
91
- ```
92
-
93
- Available themes: `konnect-light`, `konnect-dark`, `brand-a`, `brand-b`.
94
-
95
- Each theme CSS file uses `@layer kui.theme { [data-kui-theme="name"] { ... } }`. This means customer `:root {}` overrides (which are **unlayered**) beat the theme automatically — no `!important` or special selectors needed.
96
-
97
- To respond to the system dark-mode preference, listen to the `prefers-color-scheme` media query in JS:
98
-
99
- ```ts
100
- const mq = window.matchMedia('(prefers-color-scheme: dark)')
101
- const applyColorScheme = (dark: boolean) =>
102
- document.documentElement.setAttribute('data-kui-theme', dark ? 'konnect-dark' : 'konnect-light')
103
-
104
- applyColorScheme(mq.matches)
105
- mq.addEventListener('change', e => applyColorScheme(e.matches))
106
- ```
107
-
108
- You can also import the theme objects as JavaScript for runtime composition or for use with Kongponents' `applyTheme` / `defineKongponentsTheme`:
109
-
110
- ```ts
111
- import { konnectDay, konnectNight, brandA, brandB } from '@kong/design-tokens/themes'
112
- ```
113
-
114
25
  ## Tokens
115
26
 
27
+ All design tokens **must** be placed inside of the `packages/design-tokens/tokens/` directory in one of two sub-directories.
28
+
116
29
  [View the lists of available tokens here](TOKENS.md), or keep reading for more information.
117
30
 
118
31
  ### Token Formats
@@ -336,55 +249,6 @@ Typically, a host application should only utilize the SCSS and/or JavaScript var
336
249
  </style>
337
250
  ```
338
251
 
339
- #### Kongponents
340
-
341
- [Kongponents](https://kongponents.konghq.com) ships its own `defineKongponentsTheme` helper that validates a theme object against the full typed token surface at authoring time. To use a pre-built design-tokens theme in Kongponents, wrap it with `defineKongponentsTheme`:
342
-
343
- ```ts
344
- // my-app-theme.ts
345
- import { konnectDay } from '@kong/design-tokens/themes'
346
- import { defineKongponentsTheme } from '@kong/kongponents'
347
-
348
- export const myTheme = defineKongponentsTheme({
349
- ...konnectDay, // spread the base theme
350
- '--kui-button-border-radius-medium': '999px', // then override specific tokens
351
- })
352
- ```
353
-
354
- Register the theme at app startup via the Kongponents plugin:
355
-
356
- ```ts
357
- // main.ts
358
- import { createApp } from 'vue'
359
- import Kongponents from '@kong/kongponents'
360
- import { myTheme } from './my-app-theme'
361
- import App from './App.vue'
362
-
363
- createApp(App)
364
- .use(Kongponents, { theme: myTheme })
365
- .mount('#app')
366
- ```
367
-
368
- Or apply a theme to a specific subtree at runtime using `KThemeProvider`:
369
-
370
- ```vue
371
- <template>
372
- <KThemeProvider :theme="myTheme">
373
- <!-- everything here renders with myTheme active -->
374
- </KThemeProvider>
375
- </template>
376
- ```
377
-
378
- For per-tenant runtime composition (e.g. theme values fetched from an API), use `applyTheme` from `@kong/kongponents`:
379
-
380
- ```ts
381
- import { applyTheme } from '@kong/kongponents'
382
- import { konnectDay } from '@kong/design-tokens/themes'
383
-
384
- // Merge the base theme with tenant-specific overrides, then apply to :root
385
- applyTheme({ ...konnectDay, ...tenantOverrides })
386
- ```
387
-
388
252
  #### Server-Side Rendering (SSR)
389
253
 
390
254
  If your host application utilizes SSR, you may need to resolve aliases to the package exports.
@@ -412,26 +276,22 @@ To get started, install the package dependencies from the repo root:
412
276
  pnpm install
413
277
  ```
414
278
 
415
- ### Directory structure
416
-
417
- The package is organized around four top-level source directories:
279
+ ### Token Requirements
418
280
 
419
- | Directory | Purpose |
420
- |-----------|---------|
421
- | `tokens/alias/` | **Internal alias palette** — raw CSS values (hex colors, base sizes) that semantic tokens reference via `{color.alias.*}`. Never exported in any build output; only used so Style Dictionary can resolve references at build time. |
422
- | `tokens/source/` | **Semantic tokens** — scale and domain tokens that are exported to `custom-properties.css`, SCSS, LESS, and JS. Subdirectories: `color/`, `space/`, `shadow/`, `font/`, `border/`, `animation/`, `breakpoint/`, `letter-spacing/`, `line-height/`, plus `domain/` for HTTP-method, status, navigation, and icon token families. |
423
- | `tokens/components/` | **Component tokens** — name-only override slots for Kongponents components (`button/`, `card/`, `input/`, `badge/`, …). All `$value` fields must be `""`. Included in `KUI_THEMEABLE_TOKENS` — no CSS, no SCSS/LESS/JS values emitted. |
424
- | `themes/` | **Named theme override sets** — each `{name}.json` lists the token values that activate for `[data-kui-theme="{name}"]`. Values may be raw hex or `{color.alias.*}` references resolved at build time. |
281
+ - Tokens **must** be defined in the corresponding JSON files within the `packages/design-tokens/tokens/` directory in one of two sub-directories:
425
282
 
426
- ### Token Requirements
283
+ Directory | Description
284
+ ---------|----------
285
+ `/tokens/alias` | The `alias` directory **must** only contain alias values that point directly to a raw CSS value. Any tokens defined within the `alias` directory **will not** be exposed in the package exports. Tokens defined in the `/tokens/alias/` directory can be utilized/referenced within the `/tokens/source/` files; however, these tokens will **NOT** be exported in the build files.
286
+ `/tokens/source` | The `source` directory contains all tokens that **will be** available for consumption from the package exports.
427
287
 
428
288
  - Token keys **must** be lowercase, snake_case, and defined in normal alphabetical order (rules enforced by the eslint config)
429
- - The `category` of each token should be its own directory (e.g. `tokens/source/color/`)
430
- - Each `type` of token should be a file in the `category` directory, named `{type}.json` (e.g. `tokens/source/color/background.json`)
431
- - If there is only a single `type` of token within a `category`, you **should** name the file `index.json` (e.g. `tokens/source/line-height/index.json`)
432
- - Alias tokens (`tokens/alias/`) **must not** be exposed/exported from the package exports
289
+ - The `category` of each token should be its own directory (e.g. `tokens/color/`)
290
+ - Each `type` of token should be a file in the `category` directory, named `{type}.json` (e.g. `tokens/color/background.json`)
291
+ - If there is only a single `type` of token within a `category`, you **should** name the file `index.json` (e.g. `tokens/line-height/index.json`)
292
+ - Component tokens **must** be defined within the `/tokens/source/components/` directory. All tokens for a component should be defined in a single JSON file, `{component-name}.json`, with the name of the component as the top-level property in the file.
293
+ - Token aliases (e.g. color aliases) **must not** be exposed/exported from the package exports
433
294
  - Tokens at the "root" of their structure **must** be defined with a key of `"_"` to allow for nested child tokens.
434
- - Component tokens in `tokens/components/` **must always have `$value: ""`** — they are name-only slots with no CSS value. A non-empty `$value` is a build violation caught by the test suite.
435
295
 
436
296
  <details>
437
297
 
@@ -442,17 +302,17 @@ The package is organized around four top-level source directories:
442
302
  "color": {
443
303
  "text": {
444
304
  "_": {
445
- "$description": "Default text color.",
446
- "$value": "{color.alias.blue.100}"
305
+ "comment": "blue-100",
306
+ "value": "{color.alias.blue.100}"
447
307
  },
448
308
  "neutral": {
449
309
  "_": {
450
- "$description": "Neutral text color.",
451
- "$value": "{color.alias.gray.60}"
310
+ "comment": "gray-100",
311
+ "value": "{color.alias.gray.60}"
452
312
  },
453
313
  "strong": {
454
- "$description": "Strong neutral text color.",
455
- "$value": "{color.alias.gray.70}"
314
+ "comment": "gray-70",
315
+ "value": "{color.alias.gray.70}"
456
316
  }
457
317
  }
458
318
  }
@@ -469,50 +329,6 @@ The package is organized around four top-level source directories:
469
329
 
470
330
  </details>
471
331
 
472
- ### Creating a new theme
473
-
474
- Use the `create-theme` script to scaffold a new theme file from the current `KUI_THEMEABLE_TOKENS` list. The script reads the built `dist/themeable-tokens.mjs` to get the canonical token list, and sources `$description` text from the actual token metadata.
475
-
476
- ```sh
477
- # Scaffold an empty theme (all $value fields are "")
478
- pnpm create-theme my-brand
479
-
480
- # Start from a copy of an existing theme's values
481
- pnpm create-theme my-brand --from konnect-light
482
- ```
483
-
484
- This creates `themes/my-brand.json`. The next build picks it up automatically — no code change is required.
485
-
486
- > **Prerequisites:** Run `pnpm build` at least once before running `create-theme` so `dist/themeable-tokens.mjs` exists.
487
-
488
- ### Theme `$description` authoring rules
489
-
490
- Every token entry in a theme JSON file may carry an optional `$description` field. When present, it must follow these rules:
491
-
492
- - **Match the semantic token's description** — copy the text from the corresponding token in `tokens/source/`. Do not invent a different description for the same concept.
493
- - **Never reference a CSS value** — descriptions must be value-agnostic. The description explains *what* the token controls, not *what value* it currently holds.
494
-
495
- | ❌ Avoid | ✅ Use instead |
496
- |---|---|
497
- | `"2px border radius."` | _(omit — scale tokens are self-documenting by name)_ |
498
- | `"Background color for containers (white)."` | `"Default background color for containers."` |
499
- | `"Border color for danger actions or messages (red.60)."` | `"Border color for danger actions or messages."` |
500
- | `"0px 0px 0px 1px blue.60 inset"` | `"Primary state inset border shadow."` |
501
-
502
- **When to omit `$description` entirely:** pure scale tokens (`--kui-space-*`, `--kui-border-radius-0` through `-50`, `--kui-border-width-*`, `--kui-icon-size-*`, `--kui-line-height-*`, `--kui-letter-spacing-*`) are self-documenting — their token names carry all the meaning. Leave `$description` off these entries.
503
-
504
- **Component tokens may appear in theme files with `$description`.** A theme may set any component token (`--kui-button-*`, `--kui-card-*`, etc.) to provide per-component customization that diverges from the semantic fallback. Use the same description as the component token's source definition in `tokens/components/`.
505
-
506
- ```json
507
- // ✅ Correct — description matches source definition
508
- "kui-button-border-radius-medium": {
509
- "$description": "Medium button border radius.",
510
- "$value": "999px"
511
- }
512
- ```
513
-
514
- **A theme only needs to define tokens it overrides.** Omit any token whose value should remain at its semantic default (from `custom-properties.css`) or at whatever value a base theme already sets. The `[data-kui-theme]` CSS cascade handles the rest — unset tokens fall back through `var()` to the semantic layer automatically.
515
-
516
332
  ### Development Sandbox
517
333
 
518
334
  This package includes a Vue sandbox (see the `sandbox/` directory) to allow you to experiment with consuming tokens.
@@ -529,7 +345,7 @@ Or from within this package directory:
529
345
  pnpm sandbox
530
346
  ```
531
347
 
532
- This command simultaneously starts the Vite dev server and watches both the `tokens/` and `themes/` directories. Changes to either trigger a rebuild and restart the Vite dev server.
348
+ This command will simultaneously start the Vite dev server and initialize a watcher on the `tokens/` directory. If any files in the `tokens/` directory are modified, the sandbox will automatically run the build command to update the tokens and then restart the Vite dev server (simulating hot module reload).
533
349
 
534
350
  Updating any files within the sandbox itself will also trigger hot module reload as expected.
535
351
 
@@ -583,7 +399,7 @@ For example, if I want to add a new `my-feature` folder, I'd update the `exports
583
399
 
584
400
  1. Ensure you are on the `main` branch, then pull down the latest code by running `git checkout main && git pull origin main`
585
401
  2. Checkout a new branch for your changes with `git checkout -b {type}/{jira-ticket}-{description}` — as an example, `git checkout feat/khcp-1234-add-color-tokens`
586
- 3. Add/edit the tokens in the `tokens/` or `themes/` directory as needed, ensuring to adhere to the [Token Requirements](#token-requirements)
402
+ 3. Add/edit the tokens in the `packages/design-tokens/tokens/` directory as needed, ensuring to adhere to the [Token Requirements](#token-requirements)
587
403
  4. Before committing your changes, locally run `pnpm lint` to ensure you do not have any linting errors. If you have errors, you can try running `pnpm lint:fix` to resolve
588
404
  5. Commit your changes, adhering to [Conventional Commits](#committing-changes). To make this easier, you're encouraged to run `pnpm commit` from the repo root to help build your commit message
589
405
  6. Push your branch up to the remote with `git push origin {branch-name}`
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 23 Jun 2026 03:10:54 GMT
3
+ * Generated on Wed, 24 Jun 2026 12:57:36 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 23 Jun 2026 03:10:54 GMT
3
+ * Generated on Wed, 24 Jun 2026 12:57:36 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 23 Jun 2026 03:10:54 GMT
3
+ * Generated on Wed, 24 Jun 2026 12:57:36 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 23 Jun 2026 03:10:54 GMT
3
+ * Generated on Wed, 24 Jun 2026 12:57:36 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 23 Jun 2026 03:10:54 GMT
3
+ * Generated on Wed, 24 Jun 2026 12:57:36 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
- // Generated on Tue, 23 Jun 2026 03:10:54 GMT
3
+ // Generated on Wed, 24 Jun 2026 12:57:36 GMT
4
4
  //
5
5
  // Kong Konnect Design Tokens
6
6
  // GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
- * Generated on Tue, 23 Jun 2026 03:10:54 GMT
4
+ * Generated on Wed, 24 Jun 2026 12:57:36 GMT
5
5
  *
6
6
  * Kong Konnect Design Tokens
7
7
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
- // Generated on Tue, 23 Jun 2026 03:10:54 GMT
3
+ // Generated on Wed, 24 Jun 2026 12:57:36 GMT
4
4
  //
5
5
  // Kong Konnect Design Tokens
6
6
  // GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
package/package.json CHANGED
@@ -1,9 +1,26 @@
1
1
  {
2
2
  "name": "@kong/design-tokens",
3
- "version": "2.0.1-pr.670.ff5aeec.0",
3
+ "version": "2.0.1",
4
4
  "description": "Kong Konnect Design Tokens and style dictionary",
5
5
  "private": false,
6
6
  "type": "module",
7
+ "scripts": {
8
+ "build": "pnpm build:clean && pnpm build:tokens && pnpm copy:tokens-doc",
9
+ "build:tokens": "style-dictionary build --config ./config.mjs",
10
+ "build:clean": "rimraf ./dist",
11
+ "copy:tokens-doc": "shx cp -f './dist/tokens/README.md' './TOKENS.md'",
12
+ "lint": "eslint",
13
+ "lint:fix": "eslint --fix",
14
+ "typecheck": "pnpm typecheck:sandbox",
15
+ "typecheck:sandbox": "vue-tsc --project ./sandbox/tsconfig.json --noEmit",
16
+ "sandbox": "pnpm build && run-p sandbox:open sandbox:watch",
17
+ "sandbox:open": "vite sandbox -c ./sandbox/vite.config.ts",
18
+ "sandbox:watch": "chokidar \"tokens/**/*.json\" -c \"pnpm build\"",
19
+ "sandbox:build": "BUILD_SANDBOX=true vite build -c ./sandbox/vite.config.ts -m production",
20
+ "sandbox:preview": "BUILD_SANDBOX=true vite preview -c ./sandbox/vite.config.ts",
21
+ "watch:tokens": "pnpm build && chokidar \"tokens/**/*.json\" -c \"pnpm build\"",
22
+ "test": "vitest run --config vitest.config.mjs"
23
+ },
7
24
  "publishConfig": {
8
25
  "access": "public"
9
26
  },
@@ -25,37 +42,6 @@
25
42
  "default": "./dist/tokens/js/cjs/index.js"
26
43
  }
27
44
  },
28
- "./themes": {
29
- "import": {
30
- "types": "./dist/themes/index.d.ts",
31
- "default": "./dist/themes/index.mjs"
32
- },
33
- "require": {
34
- "types": "./dist/themes/index.d.ts",
35
- "default": "./dist/themes/index.mjs"
36
- }
37
- },
38
- "./themes/*.css": "./dist/themes/*.css",
39
- "./themes/*": {
40
- "import": {
41
- "types": "./dist/themes/*.d.ts",
42
- "default": "./dist/themes/*.mjs"
43
- },
44
- "require": {
45
- "types": "./dist/themes/*.d.ts",
46
- "default": "./dist/themes/*.mjs"
47
- }
48
- },
49
- "./themeable-tokens": {
50
- "import": {
51
- "types": "./dist/themeable-tokens.d.ts",
52
- "default": "./dist/themeable-tokens.mjs"
53
- },
54
- "require": {
55
- "types": "./dist/themeable-tokens.d.ts",
56
- "default": "./dist/themeable-tokens.cjs"
57
- }
58
- },
59
45
  "./tokens/*": "./dist/tokens/*",
60
46
  "./package.json": "./package.json"
61
47
  },
@@ -70,7 +56,7 @@
70
56
  "url": "https://github.com/Kong/design-tokens/issues"
71
57
  },
72
58
  "devDependencies": {
73
- "style-dictionary": "^5.4.0"
59
+ "style-dictionary": "^5.4.4"
74
60
  },
75
61
  "engines": {
76
62
  "node": ">=20.19.5",
@@ -79,24 +65,5 @@
79
65
  "volta": {
80
66
  "node": "24.13.1"
81
67
  },
82
- "scripts": {
83
- "build": "pnpm build:clean && pnpm build:tokens && pnpm copy:tokens-doc",
84
- "build:tokens": "style-dictionary build --config ./config.mjs",
85
- "build:clean": "rimraf ./dist",
86
- "create-theme": "node scripts/create-theme.mjs",
87
- "fill-themes": "node scripts/fill-themes.mjs",
88
- "copy:tokens-doc": "shx cp -f './dist/tokens/README.md' './TOKENS.md'",
89
- "lint": "eslint",
90
- "lint:fix": "eslint --fix",
91
- "typecheck": "pnpm typecheck:sandbox",
92
- "typecheck:sandbox": "vue-tsc --project ./sandbox/tsconfig.json --noEmit",
93
- "sandbox": "pnpm build && run-p sandbox:open sandbox:watch",
94
- "sandbox:open": "vite sandbox -c ./sandbox/vite.config.ts",
95
- "sandbox:watch": "chokidar \"tokens/**/*.json\" \"themes/**/*.json\" -c \"pnpm build\"",
96
- "sandbox:build": "BUILD_SANDBOX=true vite build -c ./sandbox/vite.config.ts -m production",
97
- "sandbox:preview": "BUILD_SANDBOX=true vite preview -c ./sandbox/vite.config.ts",
98
- "watch:tokens": "pnpm build && chokidar \"tokens/**/*.json\" -c \"pnpm build\"",
99
- "pretest": "pnpm build:tokens",
100
- "test": "vitest run --config vitest.config.mjs"
101
- }
102
- }
68
+ "gitHead": "be11746a643e282cc7319c46e9598340dad36c0a"
69
+ }