@kong/design-tokens 1.17.7-pr.520.0285dd9.0 → 1.18.0

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.
Files changed (14) hide show
  1. package/TOKENS.md +537 -20
  2. package/dist/tokens/README.md +537 -20
  3. package/dist/tokens/css/custom-properties-list.css +98 -4
  4. package/dist/tokens/css/custom-properties.css +52 -5
  5. package/dist/tokens/js/cjs/index.d.ts +52 -1
  6. package/dist/tokens/js/cjs/index.js +48 -1
  7. package/dist/tokens/js/index.d.ts +99 -5
  8. package/dist/tokens/js/index.mjs +52 -5
  9. package/dist/tokens/js/tokens.json +47 -0
  10. package/dist/tokens/less/variables.less +52 -5
  11. package/dist/tokens/scss/_map.scss +99 -5
  12. package/dist/tokens/scss/_mixins.scss +51 -4
  13. package/dist/tokens/scss/_variables.scss +52 -5
  14. package/package.json +1 -1
package/dist/tokens/css/custom-properties-list.css CHANGED
@@ -45,6 +45,20 @@
45
45
  --kui-color-background-decorative-purple-weakest: initial;
46
46
  /* Background color for disabled elements (gray.20). Default value: `#e0e4ea` */
47
47
  --kui-color-background-disabled: initial;
48
+ /* Background color for info elements (blue.60). Default value: `#0044f4` */
49
+ --kui-color-background-info: initial;
50
+ /* Strong background color for info elements (blue.70). Default value: `#0030cc` */
51
+ --kui-color-background-info-strong: initial;
52
+ /* Stronger background color for info elements (blue.80). Default value: `#002099` */
53
+ --kui-color-background-info-stronger: initial;
54
+ /* Strongest background color for info elements (blue.90). Default value: `#001466` */
55
+ --kui-color-background-info-strongest: initial;
56
+ /* Weak background color for info elements (blue.40). Default value: `#5f9aff` */
57
+ --kui-color-background-info-weak: initial;
58
+ /* Weaker background color for info elements (blue.20). Default value: `#bee2ff` */
59
+ --kui-color-background-info-weaker: initial;
60
+ /* Weakest background color for info elements (blue.10). Default value: `#eefaff` */
61
+ --kui-color-background-info-weakest: initial;
48
62
  /* Inverse background color for containers (blue.100). Default value: `#000933` */
49
63
  --kui-color-background-inverse: initial;
50
64
  /* Background color for neutral elements (gray.60). Default value: `#6c7489` */
@@ -77,14 +91,34 @@
77
91
  --kui-color-background-primary-weaker: initial;
78
92
  /* Weakest background color for primary actions or messages (blue.10). Default value: `#eefaff` */
79
93
  --kui-color-background-primary-weakest: initial;
94
+ /* Background color for success elements (green.60). Default value: `#007d60` */
95
+ --kui-color-background-success: initial;
96
+ /* Strong background color for success elements (green.70). Default value: `#005944` */
97
+ --kui-color-background-success-strong: initial;
98
+ /* Stronger background color for success elements (green.80). Default value: `#004737` */
99
+ --kui-color-background-success-stronger: initial;
100
+ /* Strongest background color for success elements (green.90). Default value: `#003629` */
101
+ --kui-color-background-success-strongest: initial;
80
102
  /* Weak background color for success elements (green.40). Default value: `#00d6a4` */
81
103
  --kui-color-background-success-weak: initial;
104
+ /* Weaker background color for success elements (green.20). Default value: `#b5ffee` */
105
+ --kui-color-background-success-weaker: initial;
82
106
  /* Weakest background color for success elements (green.10). Default value: `#ecfffb` */
83
107
  --kui-color-background-success-weakest: initial;
84
108
  /* Transparent background color (transparent). Default value: `transparent` */
85
109
  --kui-color-background-transparent: initial;
110
+ /* Background color for warning elements (yellow.60). Default value: `#995c00` */
111
+ --kui-color-background-warning: initial;
112
+ /* Strong background color for warning elements (yellow.70). Default value: `#804400` */
113
+ --kui-color-background-warning-strong: initial;
114
+ /* Stronger background color for warning elements (yellow.80). Default value: `#662d00` */
115
+ --kui-color-background-warning-stronger: initial;
116
+ /* Strongest background color for warning elements (yellow.90). Default value: `#4d1b00` */
117
+ --kui-color-background-warning-strongest: initial;
86
118
  /* Weak background color for warning elements (yellow.40). Default value: `#ffc400` */
87
119
  --kui-color-background-warning-weak: initial;
120
+ /* Weaker background color for warning elements (yellow.20). Default value: `#fff296` */
121
+ --kui-color-background-warning-weaker: initial;
88
122
  /* Weakest background color for warning elements (yellow.10). Default value: `#fffce0` */
89
123
  --kui-color-background-warning-weakest: initial;
90
124
  /* Default border color for containers (gray.20). Default value: `#e0e4ea` */
@@ -109,10 +143,20 @@
109
143
  --kui-color-border-disabled: initial;
110
144
  /* Inverse border color (rgba(white, 0.2)). Default value: `rgba(255, 255, 255, 0.2)` */
111
145
  --kui-color-border-inverse: initial;
146
+ /* Border color for neutral elements (gray.60). Default value: `#6c7489` */
147
+ --kui-color-border-neutral: initial;
148
+ /* Strong border color for neutral elements (gray.70). Default value: `#52596e` */
149
+ --kui-color-border-neutral-strong: initial;
150
+ /* Stronger border color for neutral elements (gray.80). Default value: `#3a3f51` */
151
+ --kui-color-border-neutral-stronger: initial;
152
+ /* Strongest border color for neutral elements (gray.90). Default value: `#232633` */
153
+ --kui-color-border-neutral-strongest: initial;
112
154
  /* Weak border color for neutral elements (gray.40). Default value: `#afb7c5` */
113
155
  --kui-color-border-neutral-weak: initial;
114
156
  /* Weaker border color for neutral elements (gray.20). Default value: `#e0e4ea` */
115
157
  --kui-color-border-neutral-weaker: initial;
158
+ /* Weakest border color for neutral elements (gray.10). Default value: `#f9fafb` */
159
+ --kui-color-border-neutral-weakest: initial;
116
160
  /* Border color for primary actions or messages (blue.60). Default value: `#0044f4` */
117
161
  --kui-color-border-primary: initial;
118
162
  /* Strong border color for primary actions or messages (blue.70). Default value: `#0030cc` */
@@ -135,6 +179,16 @@
135
179
  --kui-color-text-danger: initial;
136
180
  /* Strong text color for danger actions or messages (red.70). Default value: `#ad000e` */
137
181
  --kui-color-text-danger-strong: initial;
182
+ /* Stronger text color for danger actions or messages (red.80). Default value: `#850000` */
183
+ --kui-color-text-danger-stronger: initial;
184
+ /* Strongest text color for danger actions or messages (red.90). Default value: `#5c0000` */
185
+ --kui-color-text-danger-strongest: initial;
186
+ /* Weak text color for danger actions or messages (red.40). Default value: `#ff3954` */
187
+ --kui-color-text-danger-weak: initial;
188
+ /* Weaker text color for danger actions or messages (red.20). Default value: `#ffabab` */
189
+ --kui-color-text-danger-weaker: initial;
190
+ /* Weakest text color for danger actions or messages (red.10). Default value: `#ffe5e5` */
191
+ --kui-color-text-danger-weakest: initial;
138
192
  /* Text color for decorative purposes (aqua.50). Default value: `#00abd2` */
139
193
  --kui-color-text-decorative-aqua: initial;
140
194
  /* Text color for decorative purposes (pink.60). Default value: `#d60067` */
@@ -145,6 +199,20 @@
145
199
  --kui-color-text-decorative-purple-strong: initial;
146
200
  /* Text color for disabled elements (gray.40). Default value: `#afb7c5` */
147
201
  --kui-color-text-disabled: initial;
202
+ /* Text color for info elements (blue.60). Default value: `#0044f4` */
203
+ --kui-color-text-info: initial;
204
+ /* Strong text color for info elements (blue.70). Default value: `#0030cc` */
205
+ --kui-color-text-info-strong: initial;
206
+ /* Stronger text color for info elements (blue.80). Default value: `#002099` */
207
+ --kui-color-text-info-stronger: initial;
208
+ /* Strongest text color for info elements (blue.90). Default value: `#001466` */
209
+ --kui-color-text-info-strongest: initial;
210
+ /* Weak text color for info elements (blue.40). Default value: `#5f9aff` */
211
+ --kui-color-text-info-weak: initial;
212
+ /* Weaker text color for info elements (blue.20). Default value: `#bee2ff` */
213
+ --kui-color-text-info-weaker: initial;
214
+ /* Weakest text color for info elements (blue.10). Default value: `#eefaff` */
215
+ --kui-color-text-info-weakest: initial;
148
216
  /* Inverse text color (white). Default value: `#ffffff` */
149
217
  --kui-color-text-inverse: initial;
150
218
  /* Text color for neutral elements (gray.60). Default value: `#6c7489` */
@@ -159,6 +227,8 @@
159
227
  --kui-color-text-neutral-weak: initial;
160
228
  /* Weaker text color for neutral elements (gray.20). Default value: `#e0e4ea` */
161
229
  --kui-color-text-neutral-weaker: initial;
230
+ /* Weakest text color for neutral elements (gray.10). Default value: `#f9fafb` */
231
+ --kui-color-text-neutral-weakest: initial;
162
232
  /* Text color for primary actions or messages (blue.60). Default value: `#0044f4` */
163
233
  --kui-color-text-primary: initial;
164
234
  /* Strong text color for primary actions or messages (blue.70). Default value: `#0030cc` */
@@ -169,14 +239,38 @@
169
239
  --kui-color-text-primary-strongest: initial;
170
240
  /* Weak text color for primary actions or messages (blue.40). Default value: `#5f9aff` */
171
241
  --kui-color-text-primary-weak: initial;
172
- /* Text color for success actions or messages (green.60). Default value: `#007d60` */
242
+ /* Weaker text color for primary actions or messages (blue.20). Default value: `#bee2ff` */
243
+ --kui-color-text-primary-weaker: initial;
244
+ /* Weakest text color for primary actions or messages (blue.10). Default value: `#eefaff` */
245
+ --kui-color-text-primary-weakest: initial;
246
+ /* Text color for success elements (green.60). Default value: `#007d60` */
173
247
  --kui-color-text-success: initial;
174
- /* Strong text color for success actions or messages (green.70). Default value: `#005944` */
248
+ /* Strong text color for success elements (green.70). Default value: `#005944` */
175
249
  --kui-color-text-success-strong: initial;
176
- /* Text color for warning actions or messages (yellow.60). Default value: `#995c00` */
250
+ /* Stronger text color for success elements (green.80). Default value: `#004737` */
251
+ --kui-color-text-success-stronger: initial;
252
+ /* Stronger text color for success elements (green.90). Default value: `#003629` */
253
+ --kui-color-text-success-strongest: initial;
254
+ /* Weak text color for success elements (green.40). Default value: `#00d6a4` */
255
+ --kui-color-text-success-weak: initial;
256
+ /* Weaker text color for success elements (green.20). Default value: `#b5ffee` */
257
+ --kui-color-text-success-weaker: initial;
258
+ /* Weakest text color for success elements (green.10). Default value: `#ecfffb` */
259
+ --kui-color-text-success-weakest: initial;
260
+ /* Text color for warning elements (yellow.60). Default value: `#995c00` */
177
261
  --kui-color-text-warning: initial;
178
- /* Text color for warning actions or messages (yellow.70). Default value: `#804400` */
262
+ /* Strong text color for warning elements (yellow.70). Default value: `#804400` */
179
263
  --kui-color-text-warning-strong: initial;
264
+ /* Stronger text color for warning elements (yellow.80). Default value: `#662d00` */
265
+ --kui-color-text-warning-stronger: initial;
266
+ /* Strongest text color for warning elements (yellow.90). Default value: `#4d1b00` */
267
+ --kui-color-text-warning-strongest: initial;
268
+ /* Weak text color for warning elements (yellow.40). Default value: `#ffc400` */
269
+ --kui-color-text-warning-weak: initial;
270
+ /* Weaker text color for warning elements (yellow.20). Default value: `#fff296` */
271
+ --kui-color-text-warning-weaker: initial;
272
+ /* Weakest text color for warning elements (yellow.10). Default value: `#fffce0` */
273
+ --kui-color-text-warning-weakest: initial;
180
274
  /* Default transition timing. Default value: `0.2s` */
181
275
  --kui-animation-duration-20: initial;
182
276
  /* 0px border radius. Default value: `0px` */
package/dist/tokens/css/custom-properties.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Thu, 07 Aug 2025 17:42:45 GMT
3
+ * Generated on Thu, 07 Aug 2025 17:42:09 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -20,6 +20,13 @@
20
20
  --kui-color-background-decorative-purple: #6f28ff; /** Background color for decorative purposes (purple.60). */
21
21
  --kui-color-background-decorative-purple-weakest: #f1f0ff; /** Weakest background color for decorative purposes (purple.10). */
22
22
  --kui-color-background-disabled: #e0e4ea; /** Background color for disabled elements (gray.20). */
23
+ --kui-color-background-info: #0044f4; /** Background color for info elements (blue.60). */
24
+ --kui-color-background-info-strong: #0030cc; /** Strong background color for info elements (blue.70). */
25
+ --kui-color-background-info-stronger: #002099; /** Stronger background color for info elements (blue.80). */
26
+ --kui-color-background-info-strongest: #001466; /** Strongest background color for info elements (blue.90). */
27
+ --kui-color-background-info-weak: #5f9aff; /** Weak background color for info elements (blue.40). */
28
+ --kui-color-background-info-weaker: #bee2ff; /** Weaker background color for info elements (blue.20). */
29
+ --kui-color-background-info-weakest: #eefaff; /** Weakest background color for info elements (blue.10). */
23
30
  --kui-color-background-inverse: #000933; /** Inverse background color for containers (blue.100) */
24
31
  --kui-color-background-neutral: #6c7489; /** Background color for neutral elements (gray.60). */
25
32
  --kui-color-background-neutral-strong: #52596e; /** Strong background color for neutral elements (gray.70). */
@@ -36,10 +43,20 @@
36
43
  --kui-color-background-primary-weak: #5f9aff; /** Weak background color for primary actions or messages (blue.40). */
37
44
  --kui-color-background-primary-weaker: #bee2ff; /** Weaker background color for primary actions or messages (blue.20). */
38
45
  --kui-color-background-primary-weakest: #eefaff; /** Weakest background color for primary actions or messages (blue.10) */
46
+ --kui-color-background-success: #007d60; /** Background color for success elements (green.60). */
47
+ --kui-color-background-success-strong: #005944; /** Strong background color for success elements (green.70). */
48
+ --kui-color-background-success-stronger: #004737; /** Stronger background color for success elements (green.80). */
49
+ --kui-color-background-success-strongest: #003629; /** Strongest background color for success elements (green.90). */
39
50
  --kui-color-background-success-weak: #00d6a4; /** Weak background color for success elements (green.40). */
51
+ --kui-color-background-success-weaker: #b5ffee; /** Weaker background color for success elements (green.20). */
40
52
  --kui-color-background-success-weakest: #ecfffb; /** Weakest background color for success elements (green.10). */
41
53
  --kui-color-background-transparent: transparent; /** Transparent background color (transparent). */
54
+ --kui-color-background-warning: #995c00; /** Background color for warning elements (yellow.60). */
55
+ --kui-color-background-warning-strong: #804400; /** Strong background color for warning elements (yellow.70). */
56
+ --kui-color-background-warning-stronger: #662d00; /** Stronger background color for warning elements (yellow.80). */
57
+ --kui-color-background-warning-strongest: #4d1b00; /** Strongest background color for warning elements (yellow.90). */
42
58
  --kui-color-background-warning-weak: #ffc400; /** Weak background color for warning elements (yellow.40). */
59
+ --kui-color-background-warning-weaker: #fff296; /** Weaker background color for warning elements (yellow.20). */
43
60
  --kui-color-background-warning-weakest: #fffce0; /** Weakest background color for warning elements (yellow.10). */
44
61
  --kui-color-border: #e0e4ea; /** Default border color for containers (gray.20). */
45
62
  --kui-color-border-danger: #d60027; /** Border color for danger actions or messages (red.60). */
@@ -52,8 +69,13 @@
52
69
  --kui-color-border-decorative-purple: #6f28ff; /** Border color for decorative purposes (purple.60). */
53
70
  --kui-color-border-disabled: #e0e4ea; /** Border color for disabled elements (gray.20). */
54
71
  --kui-color-border-inverse: rgba(255, 255, 255, 0.2); /** Inverse border color (rgba(white, 0.2)). */
72
+ --kui-color-border-neutral: #6c7489; /** Border color for neutral elements (gray.60) */
73
+ --kui-color-border-neutral-strong: #52596e; /** Strong border color for neutral elements (gray.70) */
74
+ --kui-color-border-neutral-stronger: #3a3f51; /** Stronger border color for neutral elements (gray.80) */
75
+ --kui-color-border-neutral-strongest: #232633; /** Strongest border color for neutral elements (gray.90) */
55
76
  --kui-color-border-neutral-weak: #afb7c5; /** Weak border color for neutral elements (gray.40) */
56
77
  --kui-color-border-neutral-weaker: #e0e4ea; /** Weaker border color for neutral elements (gray.20) */
78
+ --kui-color-border-neutral-weakest: #f9fafb; /** Weakest border color for neutral elements (gray.10) */
57
79
  --kui-color-border-primary: #0044f4; /** Border color for primary actions or messages (blue.60). */
58
80
  --kui-color-border-primary-strong: #0030cc; /** Strong border color for primary actions or messages (blue.70). */
59
81
  --kui-color-border-primary-stronger: #002099; /** Stronger border color for primary actions or messages (blue.80). */
@@ -65,11 +87,23 @@
65
87
  --kui-color-text: #000933; /** Default text color (blue.100). */
66
88
  --kui-color-text-danger: #d60027; /** Text color for danger actions or messages (red.60). */
67
89
  --kui-color-text-danger-strong: #ad000e; /** Strong text color for danger actions or messages (red.70). */
90
+ --kui-color-text-danger-stronger: #850000; /** Stronger text color for danger actions or messages (red.80). */
91
+ --kui-color-text-danger-strongest: #5c0000; /** Strongest text color for danger actions or messages (red.90). */
92
+ --kui-color-text-danger-weak: #ff3954; /** Weak text color for danger actions or messages (red.40). */
93
+ --kui-color-text-danger-weaker: #ffabab; /** Weaker text color for danger actions or messages (red.20). */
94
+ --kui-color-text-danger-weakest: #ffe5e5; /** Weakest text color for danger actions or messages (red.10). */
68
95
  --kui-color-text-decorative-aqua: #00abd2; /** Text color for decorative purposes (aqua.50). */
69
96
  --kui-color-text-decorative-pink: #d60067; /** Text color for decorative purposes (pink.60). */
70
97
  --kui-color-text-decorative-purple: #6f28ff; /** Text color for decorative purposes (purple.60). */
71
98
  --kui-color-text-decorative-purple-strong: #5e00f5; /** Strong text color for decorative purposes (purple.70). */
72
99
  --kui-color-text-disabled: #afb7c5; /** Text color for disabled elements (gray.40). */
100
+ --kui-color-text-info: #0044f4; /** Text color for info elements (blue.60). */
101
+ --kui-color-text-info-strong: #0030cc; /** Strong text color for info elements (blue.70). */
102
+ --kui-color-text-info-stronger: #002099; /** Stronger text color for info elements (blue.80). */
103
+ --kui-color-text-info-strongest: #001466; /** Strongest text color for info elements (blue.90). */
104
+ --kui-color-text-info-weak: #5f9aff; /** Weak text color for info elements (blue.40). */
105
+ --kui-color-text-info-weaker: #bee2ff; /** Weaker text color for info elements (blue.20). */
106
+ --kui-color-text-info-weakest: #eefaff; /** Weakest text color for info elements (blue.10). */
73
107
  --kui-color-text-inverse: #ffffff; /** Inverse text color (white). */
74
108
  --kui-color-text-neutral: #6c7489; /** Text color for neutral elements (gray.60). */
75
109
  --kui-color-text-neutral-strong: #52596e; /** Strong text color for neutral elements (gray.70). */
@@ -77,15 +111,28 @@
77
111
  --kui-color-text-neutral-strongest: #232633; /** Strongest text color for neutral elements (gray.90). */
78
112
  --kui-color-text-neutral-weak: #afb7c5; /** Weak text color for neutral elements (gray.40). */
79
113
  --kui-color-text-neutral-weaker: #e0e4ea; /** Weaker text color for neutral elements (gray.20). */
114
+ --kui-color-text-neutral-weakest: #f9fafb; /** Weakest text color for neutral elements (gray.10). */
80
115
  --kui-color-text-primary: #0044f4; /** Text color for primary actions or messages (blue.60). */
81
116
  --kui-color-text-primary-strong: #0030cc; /** Strong text color for primary actions or messages (blue.70). */
82
117
  --kui-color-text-primary-stronger: #002099; /** Stronger text color for primary actions or messages (blue.80). */
83
118
  --kui-color-text-primary-strongest: #001466; /** Strongest text color for primary actions or messages (blue.90). */
84
119
  --kui-color-text-primary-weak: #5f9aff; /** Weak text color for primary actions or messages (blue.40). */
85
- --kui-color-text-success: #007d60; /** Text color for success actions or messages (green.60). */
86
- --kui-color-text-success-strong: #005944; /** Strong text color for success actions or messages (green.70). */
87
- --kui-color-text-warning: #995c00; /** Text color for warning actions or messages (yellow.60). */
88
- --kui-color-text-warning-strong: #804400; /** Text color for warning actions or messages (yellow.70). */
120
+ --kui-color-text-primary-weaker: #bee2ff; /** Weaker text color for primary actions or messages (blue.20). */
121
+ --kui-color-text-primary-weakest: #eefaff; /** Weakest text color for primary actions or messages (blue.10). */
122
+ --kui-color-text-success: #007d60; /** Text color for success elements (green.60). */
123
+ --kui-color-text-success-strong: #005944; /** Strong text color for success elements (green.70). */
124
+ --kui-color-text-success-stronger: #004737; /** Stronger text color for success elements (green.80). */
125
+ --kui-color-text-success-strongest: #003629; /** Stronger text color for success elements (green.90). */
126
+ --kui-color-text-success-weak: #00d6a4; /** Weak text color for success elements (green.40). */
127
+ --kui-color-text-success-weaker: #b5ffee; /** Weaker text color for success elements (green.20). */
128
+ --kui-color-text-success-weakest: #ecfffb; /** Weakest text color for success elements (green.10). */
129
+ --kui-color-text-warning: #995c00; /** Text color for warning elements (yellow.60). */
130
+ --kui-color-text-warning-strong: #804400; /** Strong text color for warning elements (yellow.70). */
131
+ --kui-color-text-warning-stronger: #662d00; /** Stronger text color for warning elements (yellow.80). */
132
+ --kui-color-text-warning-strongest: #4d1b00; /** Strongest text color for warning elements (yellow.90). */
133
+ --kui-color-text-warning-weak: #ffc400; /** Weak text color for warning elements (yellow.40). */
134
+ --kui-color-text-warning-weaker: #fff296; /** Weaker text color for warning elements (yellow.20). */
135
+ --kui-color-text-warning-weakest: #fffce0; /** Weakest text color for warning elements (yellow.10). */
89
136
  --kui-animation-duration-20: 0.2s; /** Default transition timing */
90
137
  --kui-border-radius-0: 0px; /** 0px border radius. */
91
138
  --kui-border-radius-10: 2px; /** 2px border radius. */
package/dist/tokens/js/cjs/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Thu, 07 Aug 2025 17:42:45 GMT
3
+ * Generated on Thu, 07 Aug 2025 17:42:09 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -42,6 +42,15 @@ declare const tokens: {
42
42
  };
43
43
  };
44
44
  disabled: DesignToken;
45
+ info: {
46
+ _: DesignToken;
47
+ strong: DesignToken;
48
+ stronger: DesignToken;
49
+ strongest: DesignToken;
50
+ weak: DesignToken;
51
+ weaker: DesignToken;
52
+ weakest: DesignToken;
53
+ };
45
54
  inverse: DesignToken;
46
55
  neutral: {
47
56
  _: DesignToken;
@@ -63,12 +72,22 @@ declare const tokens: {
63
72
  weakest: DesignToken;
64
73
  };
65
74
  success: {
75
+ _: DesignToken;
76
+ strong: DesignToken;
77
+ stronger: DesignToken;
78
+ strongest: DesignToken;
66
79
  weak: DesignToken;
80
+ weaker: DesignToken;
67
81
  weakest: DesignToken;
68
82
  };
69
83
  transparent: DesignToken;
70
84
  warning: {
85
+ _: DesignToken;
86
+ strong: DesignToken;
87
+ stronger: DesignToken;
88
+ strongest: DesignToken;
71
89
  weak: DesignToken;
90
+ weaker: DesignToken;
72
91
  weakest: DesignToken;
73
92
  };
74
93
  };
@@ -89,8 +108,13 @@ declare const tokens: {
89
108
  disabled: DesignToken;
90
109
  inverse: DesignToken;
91
110
  neutral: {
111
+ _: DesignToken;
112
+ strong: DesignToken;
113
+ stronger: DesignToken;
114
+ strongest: DesignToken;
92
115
  weak: DesignToken;
93
116
  weaker: DesignToken;
117
+ weakest: DesignToken;
94
118
  };
95
119
  primary: {
96
120
  _: DesignToken;
@@ -108,6 +132,11 @@ declare const tokens: {
108
132
  danger: {
109
133
  _: DesignToken;
110
134
  strong: DesignToken;
135
+ stronger: DesignToken;
136
+ strongest: DesignToken;
137
+ weak: DesignToken;
138
+ weaker: DesignToken;
139
+ weakest: DesignToken;
111
140
  };
112
141
  decorative: {
113
142
  aqua: DesignToken;
@@ -118,6 +147,15 @@ declare const tokens: {
118
147
  };
119
148
  };
120
149
  disabled: DesignToken;
150
+ info: {
151
+ _: DesignToken;
152
+ strong: DesignToken;
153
+ stronger: DesignToken;
154
+ strongest: DesignToken;
155
+ weak: DesignToken;
156
+ weaker: DesignToken;
157
+ weakest: DesignToken;
158
+ };
121
159
  inverse: DesignToken;
122
160
  neutral: {
123
161
  _: DesignToken;
@@ -126,6 +164,7 @@ declare const tokens: {
126
164
  strongest: DesignToken;
127
165
  weak: DesignToken;
128
166
  weaker: DesignToken;
167
+ weakest: DesignToken;
129
168
  };
130
169
  primary: {
131
170
  _: DesignToken;
@@ -133,14 +172,26 @@ declare const tokens: {
133
172
  stronger: DesignToken;
134
173
  strongest: DesignToken;
135
174
  weak: DesignToken;
175
+ weaker: DesignToken;
176
+ weakest: DesignToken;
136
177
  };
137
178
  success: {
138
179
  _: DesignToken;
139
180
  strong: DesignToken;
181
+ stronger: DesignToken;
182
+ strongest: DesignToken;
183
+ weak: DesignToken;
184
+ weaker: DesignToken;
185
+ weakest: DesignToken;
140
186
  };
141
187
  warning: {
142
188
  _: DesignToken;
143
189
  strong: DesignToken;
190
+ stronger: DesignToken;
191
+ strongest: DesignToken;
192
+ weak: DesignToken;
193
+ weaker: DesignToken;
194
+ weakest: DesignToken;
144
195
  };
145
196
  };
146
197
  };
package/dist/tokens/js/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Thu, 07 Aug 2025 17:42:45 GMT
3
+ * Generated on Thu, 07 Aug 2025 17:42:09 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -20,6 +20,13 @@ module.exports = {
20
20
  KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE: "#6f28ff",
21
21
  KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST: "#f1f0ff",
22
22
  KUI_COLOR_BACKGROUND_DISABLED: "#e0e4ea",
23
+ KUI_COLOR_BACKGROUND_INFO: "#0044f4",
24
+ KUI_COLOR_BACKGROUND_INFO_STRONG: "#0030cc",
25
+ KUI_COLOR_BACKGROUND_INFO_STRONGER: "#002099",
26
+ KUI_COLOR_BACKGROUND_INFO_STRONGEST: "#001466",
27
+ KUI_COLOR_BACKGROUND_INFO_WEAK: "#5f9aff",
28
+ KUI_COLOR_BACKGROUND_INFO_WEAKER: "#bee2ff",
29
+ KUI_COLOR_BACKGROUND_INFO_WEAKEST: "#eefaff",
23
30
  KUI_COLOR_BACKGROUND_INVERSE: "#000933",
24
31
  KUI_COLOR_BACKGROUND_NEUTRAL: "#6c7489",
25
32
  KUI_COLOR_BACKGROUND_NEUTRAL_STRONG: "#52596e",
@@ -36,10 +43,20 @@ module.exports = {
36
43
  KUI_COLOR_BACKGROUND_PRIMARY_WEAK: "#5f9aff",
37
44
  KUI_COLOR_BACKGROUND_PRIMARY_WEAKER: "#bee2ff",
38
45
  KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST: "#eefaff",
46
+ KUI_COLOR_BACKGROUND_SUCCESS: "#007d60",
47
+ KUI_COLOR_BACKGROUND_SUCCESS_STRONG: "#005944",
48
+ KUI_COLOR_BACKGROUND_SUCCESS_STRONGER: "#004737",
49
+ KUI_COLOR_BACKGROUND_SUCCESS_STRONGEST: "#003629",
39
50
  KUI_COLOR_BACKGROUND_SUCCESS_WEAK: "#00d6a4",
51
+ KUI_COLOR_BACKGROUND_SUCCESS_WEAKER: "#b5ffee",
40
52
  KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST: "#ecfffb",
41
53
  KUI_COLOR_BACKGROUND_TRANSPARENT: "transparent",
54
+ KUI_COLOR_BACKGROUND_WARNING: "#995c00",
55
+ KUI_COLOR_BACKGROUND_WARNING_STRONG: "#804400",
56
+ KUI_COLOR_BACKGROUND_WARNING_STRONGER: "#662d00",
57
+ KUI_COLOR_BACKGROUND_WARNING_STRONGEST: "#4d1b00",
42
58
  KUI_COLOR_BACKGROUND_WARNING_WEAK: "#ffc400",
59
+ KUI_COLOR_BACKGROUND_WARNING_WEAKER: "#fff296",
43
60
  KUI_COLOR_BACKGROUND_WARNING_WEAKEST: "#fffce0",
44
61
  KUI_COLOR_BORDER: "#e0e4ea",
45
62
  KUI_COLOR_BORDER_DANGER: "#d60027",
@@ -52,8 +69,13 @@ module.exports = {
52
69
  KUI_COLOR_BORDER_DECORATIVE_PURPLE: "#6f28ff",
53
70
  KUI_COLOR_BORDER_DISABLED: "#e0e4ea",
54
71
  KUI_COLOR_BORDER_INVERSE: "rgba(255, 255, 255, 0.2)",
72
+ KUI_COLOR_BORDER_NEUTRAL: "#6c7489",
73
+ KUI_COLOR_BORDER_NEUTRAL_STRONG: "#52596e",
74
+ KUI_COLOR_BORDER_NEUTRAL_STRONGER: "#3a3f51",
75
+ KUI_COLOR_BORDER_NEUTRAL_STRONGEST: "#232633",
55
76
  KUI_COLOR_BORDER_NEUTRAL_WEAK: "#afb7c5",
56
77
  KUI_COLOR_BORDER_NEUTRAL_WEAKER: "#e0e4ea",
78
+ KUI_COLOR_BORDER_NEUTRAL_WEAKEST: "#f9fafb",
57
79
  KUI_COLOR_BORDER_PRIMARY: "#0044f4",
58
80
  KUI_COLOR_BORDER_PRIMARY_STRONG: "#0030cc",
59
81
  KUI_COLOR_BORDER_PRIMARY_STRONGER: "#002099",
@@ -65,11 +87,23 @@ module.exports = {
65
87
  KUI_COLOR_TEXT: "#000933",
66
88
  KUI_COLOR_TEXT_DANGER: "#d60027",
67
89
  KUI_COLOR_TEXT_DANGER_STRONG: "#ad000e",
90
+ KUI_COLOR_TEXT_DANGER_STRONGER: "#850000",
91
+ KUI_COLOR_TEXT_DANGER_STRONGEST: "#5c0000",
92
+ KUI_COLOR_TEXT_DANGER_WEAK: "#ff3954",
93
+ KUI_COLOR_TEXT_DANGER_WEAKER: "#ffabab",
94
+ KUI_COLOR_TEXT_DANGER_WEAKEST: "#ffe5e5",
68
95
  KUI_COLOR_TEXT_DECORATIVE_AQUA: "#00abd2",
69
96
  KUI_COLOR_TEXT_DECORATIVE_PINK: "#d60067",
70
97
  KUI_COLOR_TEXT_DECORATIVE_PURPLE: "#6f28ff",
71
98
  KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG: "#5e00f5",
72
99
  KUI_COLOR_TEXT_DISABLED: "#afb7c5",
100
+ KUI_COLOR_TEXT_INFO: "#0044f4",
101
+ KUI_COLOR_TEXT_INFO_STRONG: "#0030cc",
102
+ KUI_COLOR_TEXT_INFO_STRONGER: "#002099",
103
+ KUI_COLOR_TEXT_INFO_STRONGEST: "#001466",
104
+ KUI_COLOR_TEXT_INFO_WEAK: "#5f9aff",
105
+ KUI_COLOR_TEXT_INFO_WEAKER: "#bee2ff",
106
+ KUI_COLOR_TEXT_INFO_WEAKEST: "#eefaff",
73
107
  KUI_COLOR_TEXT_INVERSE: "#ffffff",
74
108
  KUI_COLOR_TEXT_NEUTRAL: "#6c7489",
75
109
  KUI_COLOR_TEXT_NEUTRAL_STRONG: "#52596e",
@@ -77,15 +111,28 @@ module.exports = {
77
111
  KUI_COLOR_TEXT_NEUTRAL_STRONGEST: "#232633",
78
112
  KUI_COLOR_TEXT_NEUTRAL_WEAK: "#afb7c5",
79
113
  KUI_COLOR_TEXT_NEUTRAL_WEAKER: "#e0e4ea",
114
+ KUI_COLOR_TEXT_NEUTRAL_WEAKEST: "#f9fafb",
80
115
  KUI_COLOR_TEXT_PRIMARY: "#0044f4",
81
116
  KUI_COLOR_TEXT_PRIMARY_STRONG: "#0030cc",
82
117
  KUI_COLOR_TEXT_PRIMARY_STRONGER: "#002099",
83
118
  KUI_COLOR_TEXT_PRIMARY_STRONGEST: "#001466",
84
119
  KUI_COLOR_TEXT_PRIMARY_WEAK: "#5f9aff",
120
+ KUI_COLOR_TEXT_PRIMARY_WEAKER: "#bee2ff",
121
+ KUI_COLOR_TEXT_PRIMARY_WEAKEST: "#eefaff",
85
122
  KUI_COLOR_TEXT_SUCCESS: "#007d60",
86
123
  KUI_COLOR_TEXT_SUCCESS_STRONG: "#005944",
124
+ KUI_COLOR_TEXT_SUCCESS_STRONGER: "#004737",
125
+ KUI_COLOR_TEXT_SUCCESS_STRONGEST: "#003629",
126
+ KUI_COLOR_TEXT_SUCCESS_WEAK: "#00d6a4",
127
+ KUI_COLOR_TEXT_SUCCESS_WEAKER: "#b5ffee",
128
+ KUI_COLOR_TEXT_SUCCESS_WEAKEST: "#ecfffb",
87
129
  KUI_COLOR_TEXT_WARNING: "#995c00",
88
130
  KUI_COLOR_TEXT_WARNING_STRONG: "#804400",
131
+ KUI_COLOR_TEXT_WARNING_STRONGER: "#662d00",
132
+ KUI_COLOR_TEXT_WARNING_STRONGEST: "#4d1b00",
133
+ KUI_COLOR_TEXT_WARNING_WEAK: "#ffc400",
134
+ KUI_COLOR_TEXT_WARNING_WEAKER: "#fff296",
135
+ KUI_COLOR_TEXT_WARNING_WEAKEST: "#fffce0",
89
136
  KUI_ANIMATION_DURATION_20: "0.2s",
90
137
  KUI_BORDER_RADIUS_0: "0px",
91
138
  KUI_BORDER_RADIUS_10: "2px",