@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 +21 -205
- package/dist/tokens/css/custom-properties.css +1 -1
- package/dist/tokens/js/cjs/index.d.ts +1 -1
- package/dist/tokens/js/cjs/index.js +1 -1
- package/dist/tokens/js/index.d.ts +1 -1
- package/dist/tokens/js/index.mjs +1 -1
- package/dist/tokens/less/variables.less +1 -1
- package/dist/tokens/scss/_map.scss +1 -1
- package/dist/tokens/scss/_variables.scss +1 -1
- package/package.json +21 -54
- package/dist/themeable-tokens.cjs +0 -918
- package/dist/themeable-tokens.d.ts +0 -926
- package/dist/themeable-tokens.mjs +0 -921
- package/dist/themes/brand-a.css +0 -169
- package/dist/themes/brand-a.d.ts +0 -5
- package/dist/themes/brand-a.mjs +0 -167
- package/dist/themes/brand-b.css +0 -161
- package/dist/themes/brand-b.d.ts +0 -5
- package/dist/themes/brand-b.mjs +0 -159
- package/dist/themes/classic.css +0 -340
- package/dist/themes/classic.d.ts +0 -5
- package/dist/themes/classic.mjs +0 -338
- package/dist/themes/index.d.ts +0 -9
- package/dist/themes/index.mjs +0 -9
- package/dist/themes/konnect-day.css +0 -918
- package/dist/themes/konnect-day.d.ts +0 -5
- package/dist/themes/konnect-day.mjs +0 -916
- package/dist/themes/konnect-night.css +0 -918
- package/dist/themes/konnect-night.d.ts +0 -5
- package/dist/themes/konnect-night.mjs +0 -916
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
|
-
###
|
|
416
|
-
|
|
417
|
-
The package is organized around four top-level source directories:
|
|
279
|
+
### Token Requirements
|
|
418
280
|
|
|
419
|
-
|
|
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
|
-
|
|
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/
|
|
430
|
-
- Each `type` of token should be a file in the `category` directory, named `{type}.json` (e.g. `tokens/
|
|
431
|
-
- If there is only a single `type` of token within a `category`, you **should** name the file `index.json` (e.g. `tokens/
|
|
432
|
-
-
|
|
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
|
-
"
|
|
446
|
-
"
|
|
305
|
+
"comment": "blue-100",
|
|
306
|
+
"value": "{color.alias.blue.100}"
|
|
447
307
|
},
|
|
448
308
|
"neutral": {
|
|
449
309
|
"_": {
|
|
450
|
-
"
|
|
451
|
-
"
|
|
310
|
+
"comment": "gray-100",
|
|
311
|
+
"value": "{color.alias.gray.60}"
|
|
452
312
|
},
|
|
453
313
|
"strong": {
|
|
454
|
-
"
|
|
455
|
-
"
|
|
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
|
|
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/`
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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/dist/tokens/js/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
|
-
* Generated on
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
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
|
-
"
|
|
83
|
-
|
|
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
|
+
}
|