@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/js/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
@@ -31,6 +31,20 @@ export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE: "#6f28ff";
31
31
  export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST: "#f1f0ff";
32
32
  /** Background color for disabled elements (gray.20). */
33
33
  export const KUI_COLOR_BACKGROUND_DISABLED: "#e0e4ea";
34
+ /** Background color for info elements (blue.60). */
35
+ export const KUI_COLOR_BACKGROUND_INFO: "#0044f4";
36
+ /** Strong background color for info elements (blue.70). */
37
+ export const KUI_COLOR_BACKGROUND_INFO_STRONG: "#0030cc";
38
+ /** Stronger background color for info elements (blue.80). */
39
+ export const KUI_COLOR_BACKGROUND_INFO_STRONGER: "#002099";
40
+ /** Strongest background color for info elements (blue.90). */
41
+ export const KUI_COLOR_BACKGROUND_INFO_STRONGEST: "#001466";
42
+ /** Weak background color for info elements (blue.40). */
43
+ export const KUI_COLOR_BACKGROUND_INFO_WEAK: "#5f9aff";
44
+ /** Weaker background color for info elements (blue.20). */
45
+ export const KUI_COLOR_BACKGROUND_INFO_WEAKER: "#bee2ff";
46
+ /** Weakest background color for info elements (blue.10). */
47
+ export const KUI_COLOR_BACKGROUND_INFO_WEAKEST: "#eefaff";
34
48
  /** Inverse background color for containers (blue.100) */
35
49
  export const KUI_COLOR_BACKGROUND_INVERSE: "#000933";
36
50
  /** Background color for neutral elements (gray.60). */
@@ -63,14 +77,34 @@ export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK: "#5f9aff";
63
77
  export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER: "#bee2ff";
64
78
  /** Weakest background color for primary actions or messages (blue.10) */
65
79
  export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST: "#eefaff";
80
+ /** Background color for success elements (green.60). */
81
+ export const KUI_COLOR_BACKGROUND_SUCCESS: "#007d60";
82
+ /** Strong background color for success elements (green.70). */
83
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONG: "#005944";
84
+ /** Stronger background color for success elements (green.80). */
85
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONGER: "#004737";
86
+ /** Strongest background color for success elements (green.90). */
87
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONGEST: "#003629";
66
88
  /** Weak background color for success elements (green.40). */
67
89
  export const KUI_COLOR_BACKGROUND_SUCCESS_WEAK: "#00d6a4";
90
+ /** Weaker background color for success elements (green.20). */
91
+ export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKER: "#b5ffee";
68
92
  /** Weakest background color for success elements (green.10). */
69
93
  export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST: "#ecfffb";
70
94
  /** Transparent background color (transparent). */
71
95
  export const KUI_COLOR_BACKGROUND_TRANSPARENT: "transparent";
96
+ /** Background color for warning elements (yellow.60). */
97
+ export const KUI_COLOR_BACKGROUND_WARNING: "#995c00";
98
+ /** Strong background color for warning elements (yellow.70). */
99
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONG: "#804400";
100
+ /** Stronger background color for warning elements (yellow.80). */
101
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONGER: "#662d00";
102
+ /** Strongest background color for warning elements (yellow.90). */
103
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONGEST: "#4d1b00";
72
104
  /** Weak background color for warning elements (yellow.40). */
73
105
  export const KUI_COLOR_BACKGROUND_WARNING_WEAK: "#ffc400";
106
+ /** Weaker background color for warning elements (yellow.20). */
107
+ export const KUI_COLOR_BACKGROUND_WARNING_WEAKER: "#fff296";
74
108
  /** Weakest background color for warning elements (yellow.10). */
75
109
  export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST: "#fffce0";
76
110
  /** Default border color for containers (gray.20). */
@@ -95,10 +129,20 @@ export const KUI_COLOR_BORDER_DECORATIVE_PURPLE: "#6f28ff";
95
129
  export const KUI_COLOR_BORDER_DISABLED: "#e0e4ea";
96
130
  /** Inverse border color (rgba(white, 0.2)). */
97
131
  export const KUI_COLOR_BORDER_INVERSE: "rgba(255, 255, 255, 0.2)";
132
+ /** Border color for neutral elements (gray.60) */
133
+ export const KUI_COLOR_BORDER_NEUTRAL: "#6c7489";
134
+ /** Strong border color for neutral elements (gray.70) */
135
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONG: "#52596e";
136
+ /** Stronger border color for neutral elements (gray.80) */
137
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONGER: "#3a3f51";
138
+ /** Strongest border color for neutral elements (gray.90) */
139
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONGEST: "#232633";
98
140
  /** Weak border color for neutral elements (gray.40) */
99
141
  export const KUI_COLOR_BORDER_NEUTRAL_WEAK: "#afb7c5";
100
142
  /** Weaker border color for neutral elements (gray.20) */
101
143
  export const KUI_COLOR_BORDER_NEUTRAL_WEAKER: "#e0e4ea";
144
+ /** Weakest border color for neutral elements (gray.10) */
145
+ export const KUI_COLOR_BORDER_NEUTRAL_WEAKEST: "#f9fafb";
102
146
  /** Border color for primary actions or messages (blue.60). */
103
147
  export const KUI_COLOR_BORDER_PRIMARY: "#0044f4";
104
148
  /** Strong border color for primary actions or messages (blue.70). */
@@ -121,6 +165,16 @@ export const KUI_COLOR_TEXT: "#000933";
121
165
  export const KUI_COLOR_TEXT_DANGER: "#d60027";
122
166
  /** Strong text color for danger actions or messages (red.70). */
123
167
  export const KUI_COLOR_TEXT_DANGER_STRONG: "#ad000e";
168
+ /** Stronger text color for danger actions or messages (red.80). */
169
+ export const KUI_COLOR_TEXT_DANGER_STRONGER: "#850000";
170
+ /** Strongest text color for danger actions or messages (red.90). */
171
+ export const KUI_COLOR_TEXT_DANGER_STRONGEST: "#5c0000";
172
+ /** Weak text color for danger actions or messages (red.40). */
173
+ export const KUI_COLOR_TEXT_DANGER_WEAK: "#ff3954";
174
+ /** Weaker text color for danger actions or messages (red.20). */
175
+ export const KUI_COLOR_TEXT_DANGER_WEAKER: "#ffabab";
176
+ /** Weakest text color for danger actions or messages (red.10). */
177
+ export const KUI_COLOR_TEXT_DANGER_WEAKEST: "#ffe5e5";
124
178
  /** Text color for decorative purposes (aqua.50). */
125
179
  export const KUI_COLOR_TEXT_DECORATIVE_AQUA: "#00abd2";
126
180
  /** Text color for decorative purposes (pink.60). */
@@ -131,6 +185,20 @@ export const KUI_COLOR_TEXT_DECORATIVE_PURPLE: "#6f28ff";
131
185
  export const KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG: "#5e00f5";
132
186
  /** Text color for disabled elements (gray.40). */
133
187
  export const KUI_COLOR_TEXT_DISABLED: "#afb7c5";
188
+ /** Text color for info elements (blue.60). */
189
+ export const KUI_COLOR_TEXT_INFO: "#0044f4";
190
+ /** Strong text color for info elements (blue.70). */
191
+ export const KUI_COLOR_TEXT_INFO_STRONG: "#0030cc";
192
+ /** Stronger text color for info elements (blue.80). */
193
+ export const KUI_COLOR_TEXT_INFO_STRONGER: "#002099";
194
+ /** Strongest text color for info elements (blue.90). */
195
+ export const KUI_COLOR_TEXT_INFO_STRONGEST: "#001466";
196
+ /** Weak text color for info elements (blue.40). */
197
+ export const KUI_COLOR_TEXT_INFO_WEAK: "#5f9aff";
198
+ /** Weaker text color for info elements (blue.20). */
199
+ export const KUI_COLOR_TEXT_INFO_WEAKER: "#bee2ff";
200
+ /** Weakest text color for info elements (blue.10). */
201
+ export const KUI_COLOR_TEXT_INFO_WEAKEST: "#eefaff";
134
202
  /** Inverse text color (white). */
135
203
  export const KUI_COLOR_TEXT_INVERSE: "#ffffff";
136
204
  /** Text color for neutral elements (gray.60). */
@@ -145,6 +213,8 @@ export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST: "#232633";
145
213
  export const KUI_COLOR_TEXT_NEUTRAL_WEAK: "#afb7c5";
146
214
  /** Weaker text color for neutral elements (gray.20). */
147
215
  export const KUI_COLOR_TEXT_NEUTRAL_WEAKER: "#e0e4ea";
216
+ /** Weakest text color for neutral elements (gray.10). */
217
+ export const KUI_COLOR_TEXT_NEUTRAL_WEAKEST: "#f9fafb";
148
218
  /** Text color for primary actions or messages (blue.60). */
149
219
  export const KUI_COLOR_TEXT_PRIMARY: "#0044f4";
150
220
  /** Strong text color for primary actions or messages (blue.70). */
@@ -155,14 +225,38 @@ export const KUI_COLOR_TEXT_PRIMARY_STRONGER: "#002099";
155
225
  export const KUI_COLOR_TEXT_PRIMARY_STRONGEST: "#001466";
156
226
  /** Weak text color for primary actions or messages (blue.40). */
157
227
  export const KUI_COLOR_TEXT_PRIMARY_WEAK: "#5f9aff";
158
- /** Text color for success actions or messages (green.60). */
228
+ /** Weaker text color for primary actions or messages (blue.20). */
229
+ export const KUI_COLOR_TEXT_PRIMARY_WEAKER: "#bee2ff";
230
+ /** Weakest text color for primary actions or messages (blue.10). */
231
+ export const KUI_COLOR_TEXT_PRIMARY_WEAKEST: "#eefaff";
232
+ /** Text color for success elements (green.60). */
159
233
  export const KUI_COLOR_TEXT_SUCCESS: "#007d60";
160
- /** Strong text color for success actions or messages (green.70). */
234
+ /** Strong text color for success elements (green.70). */
161
235
  export const KUI_COLOR_TEXT_SUCCESS_STRONG: "#005944";
162
- /** Text color for warning actions or messages (yellow.60). */
236
+ /** Stronger text color for success elements (green.80). */
237
+ export const KUI_COLOR_TEXT_SUCCESS_STRONGER: "#004737";
238
+ /** Stronger text color for success elements (green.90). */
239
+ export const KUI_COLOR_TEXT_SUCCESS_STRONGEST: "#003629";
240
+ /** Weak text color for success elements (green.40). */
241
+ export const KUI_COLOR_TEXT_SUCCESS_WEAK: "#00d6a4";
242
+ /** Weaker text color for success elements (green.20). */
243
+ export const KUI_COLOR_TEXT_SUCCESS_WEAKER: "#b5ffee";
244
+ /** Weakest text color for success elements (green.10). */
245
+ export const KUI_COLOR_TEXT_SUCCESS_WEAKEST: "#ecfffb";
246
+ /** Text color for warning elements (yellow.60). */
163
247
  export const KUI_COLOR_TEXT_WARNING: "#995c00";
164
- /** Text color for warning actions or messages (yellow.70). */
248
+ /** Strong text color for warning elements (yellow.70). */
165
249
  export const KUI_COLOR_TEXT_WARNING_STRONG: "#804400";
250
+ /** Stronger text color for warning elements (yellow.80). */
251
+ export const KUI_COLOR_TEXT_WARNING_STRONGER: "#662d00";
252
+ /** Strongest text color for warning elements (yellow.90). */
253
+ export const KUI_COLOR_TEXT_WARNING_STRONGEST: "#4d1b00";
254
+ /** Weak text color for warning elements (yellow.40). */
255
+ export const KUI_COLOR_TEXT_WARNING_WEAK: "#ffc400";
256
+ /** Weaker text color for warning elements (yellow.20). */
257
+ export const KUI_COLOR_TEXT_WARNING_WEAKER: "#fff296";
258
+ /** Weakest text color for warning elements (yellow.10). */
259
+ export const KUI_COLOR_TEXT_WARNING_WEAKEST: "#fffce0";
166
260
  /** Default transition timing */
167
261
  export const KUI_ANIMATION_DURATION_20: "0.2s";
168
262
  /** 0px border radius. */
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 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
@@ -19,6 +19,13 @@ export const KUI_COLOR_BACKGROUND_DECORATIVE_AQUA_WEAKEST = "#ecfcff"; // Weakes
19
19
  export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE = "#6f28ff"; // Background color for decorative purposes (purple.60).
20
20
  export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST = "#f1f0ff"; // Weakest background color for decorative purposes (purple.10).
21
21
  export const KUI_COLOR_BACKGROUND_DISABLED = "#e0e4ea"; // Background color for disabled elements (gray.20).
22
+ export const KUI_COLOR_BACKGROUND_INFO = "#0044f4"; // Background color for info elements (blue.60).
23
+ export const KUI_COLOR_BACKGROUND_INFO_STRONG = "#0030cc"; // Strong background color for info elements (blue.70).
24
+ export const KUI_COLOR_BACKGROUND_INFO_STRONGER = "#002099"; // Stronger background color for info elements (blue.80).
25
+ export const KUI_COLOR_BACKGROUND_INFO_STRONGEST = "#001466"; // Strongest background color for info elements (blue.90).
26
+ export const KUI_COLOR_BACKGROUND_INFO_WEAK = "#5f9aff"; // Weak background color for info elements (blue.40).
27
+ export const KUI_COLOR_BACKGROUND_INFO_WEAKER = "#bee2ff"; // Weaker background color for info elements (blue.20).
28
+ export const KUI_COLOR_BACKGROUND_INFO_WEAKEST = "#eefaff"; // Weakest background color for info elements (blue.10).
22
29
  export const KUI_COLOR_BACKGROUND_INVERSE = "#000933"; // Inverse background color for containers (blue.100)
23
30
  export const KUI_COLOR_BACKGROUND_NEUTRAL = "#6c7489"; // Background color for neutral elements (gray.60).
24
31
  export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONG = "#52596e"; // Strong background color for neutral elements (gray.70).
@@ -35,10 +42,20 @@ export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST = "#001466"; // Strongest ba
35
42
  export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK = "#5f9aff"; // Weak background color for primary actions or messages (blue.40).
36
43
  export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER = "#bee2ff"; // Weaker background color for primary actions or messages (blue.20).
37
44
  export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST = "#eefaff"; // Weakest background color for primary actions or messages (blue.10)
45
+ export const KUI_COLOR_BACKGROUND_SUCCESS = "#007d60"; // Background color for success elements (green.60).
46
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONG = "#005944"; // Strong background color for success elements (green.70).
47
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONGER = "#004737"; // Stronger background color for success elements (green.80).
48
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONGEST = "#003629"; // Strongest background color for success elements (green.90).
38
49
  export const KUI_COLOR_BACKGROUND_SUCCESS_WEAK = "#00d6a4"; // Weak background color for success elements (green.40).
50
+ export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKER = "#b5ffee"; // Weaker background color for success elements (green.20).
39
51
  export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST = "#ecfffb"; // Weakest background color for success elements (green.10).
40
52
  export const KUI_COLOR_BACKGROUND_TRANSPARENT = "transparent"; // Transparent background color (transparent).
53
+ export const KUI_COLOR_BACKGROUND_WARNING = "#995c00"; // Background color for warning elements (yellow.60).
54
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONG = "#804400"; // Strong background color for warning elements (yellow.70).
55
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONGER = "#662d00"; // Stronger background color for warning elements (yellow.80).
56
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONGEST = "#4d1b00"; // Strongest background color for warning elements (yellow.90).
41
57
  export const KUI_COLOR_BACKGROUND_WARNING_WEAK = "#ffc400"; // Weak background color for warning elements (yellow.40).
58
+ export const KUI_COLOR_BACKGROUND_WARNING_WEAKER = "#fff296"; // Weaker background color for warning elements (yellow.20).
42
59
  export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST = "#fffce0"; // Weakest background color for warning elements (yellow.10).
43
60
  export const KUI_COLOR_BORDER = "#e0e4ea"; // Default border color for containers (gray.20).
44
61
  export const KUI_COLOR_BORDER_DANGER = "#d60027"; // Border color for danger actions or messages (red.60).
@@ -51,8 +68,13 @@ export const KUI_COLOR_BORDER_DANGER_WEAKEST = "#ffe5e5"; // Weakest border colo
51
68
  export const KUI_COLOR_BORDER_DECORATIVE_PURPLE = "#6f28ff"; // Border color for decorative purposes (purple.60).
52
69
  export const KUI_COLOR_BORDER_DISABLED = "#e0e4ea"; // Border color for disabled elements (gray.20).
53
70
  export const KUI_COLOR_BORDER_INVERSE = "rgba(255, 255, 255, 0.2)"; // Inverse border color (rgba(white, 0.2)).
71
+ export const KUI_COLOR_BORDER_NEUTRAL = "#6c7489"; // Border color for neutral elements (gray.60)
72
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONG = "#52596e"; // Strong border color for neutral elements (gray.70)
73
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONGER = "#3a3f51"; // Stronger border color for neutral elements (gray.80)
74
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONGEST = "#232633"; // Strongest border color for neutral elements (gray.90)
54
75
  export const KUI_COLOR_BORDER_NEUTRAL_WEAK = "#afb7c5"; // Weak border color for neutral elements (gray.40)
55
76
  export const KUI_COLOR_BORDER_NEUTRAL_WEAKER = "#e0e4ea"; // Weaker border color for neutral elements (gray.20)
77
+ export const KUI_COLOR_BORDER_NEUTRAL_WEAKEST = "#f9fafb"; // Weakest border color for neutral elements (gray.10)
56
78
  export const KUI_COLOR_BORDER_PRIMARY = "#0044f4"; // Border color for primary actions or messages (blue.60).
57
79
  export const KUI_COLOR_BORDER_PRIMARY_STRONG = "#0030cc"; // Strong border color for primary actions or messages (blue.70).
58
80
  export const KUI_COLOR_BORDER_PRIMARY_STRONGER = "#002099"; // Stronger border color for primary actions or messages (blue.80).
@@ -64,11 +86,23 @@ export const KUI_COLOR_BORDER_TRANSPARENT = "transparent"; // Transparent border
64
86
  export const KUI_COLOR_TEXT = "#000933"; // Default text color (blue.100).
65
87
  export const KUI_COLOR_TEXT_DANGER = "#d60027"; // Text color for danger actions or messages (red.60).
66
88
  export const KUI_COLOR_TEXT_DANGER_STRONG = "#ad000e"; // Strong text color for danger actions or messages (red.70).
89
+ export const KUI_COLOR_TEXT_DANGER_STRONGER = "#850000"; // Stronger text color for danger actions or messages (red.80).
90
+ export const KUI_COLOR_TEXT_DANGER_STRONGEST = "#5c0000"; // Strongest text color for danger actions or messages (red.90).
91
+ export const KUI_COLOR_TEXT_DANGER_WEAK = "#ff3954"; // Weak text color for danger actions or messages (red.40).
92
+ export const KUI_COLOR_TEXT_DANGER_WEAKER = "#ffabab"; // Weaker text color for danger actions or messages (red.20).
93
+ export const KUI_COLOR_TEXT_DANGER_WEAKEST = "#ffe5e5"; // Weakest text color for danger actions or messages (red.10).
67
94
  export const KUI_COLOR_TEXT_DECORATIVE_AQUA = "#00abd2"; // Text color for decorative purposes (aqua.50).
68
95
  export const KUI_COLOR_TEXT_DECORATIVE_PINK = "#d60067"; // Text color for decorative purposes (pink.60).
69
96
  export const KUI_COLOR_TEXT_DECORATIVE_PURPLE = "#6f28ff"; // Text color for decorative purposes (purple.60).
70
97
  export const KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG = "#5e00f5"; // Strong text color for decorative purposes (purple.70).
71
98
  export const KUI_COLOR_TEXT_DISABLED = "#afb7c5"; // Text color for disabled elements (gray.40).
99
+ export const KUI_COLOR_TEXT_INFO = "#0044f4"; // Text color for info elements (blue.60).
100
+ export const KUI_COLOR_TEXT_INFO_STRONG = "#0030cc"; // Strong text color for info elements (blue.70).
101
+ export const KUI_COLOR_TEXT_INFO_STRONGER = "#002099"; // Stronger text color for info elements (blue.80).
102
+ export const KUI_COLOR_TEXT_INFO_STRONGEST = "#001466"; // Strongest text color for info elements (blue.90).
103
+ export const KUI_COLOR_TEXT_INFO_WEAK = "#5f9aff"; // Weak text color for info elements (blue.40).
104
+ export const KUI_COLOR_TEXT_INFO_WEAKER = "#bee2ff"; // Weaker text color for info elements (blue.20).
105
+ export const KUI_COLOR_TEXT_INFO_WEAKEST = "#eefaff"; // Weakest text color for info elements (blue.10).
72
106
  export const KUI_COLOR_TEXT_INVERSE = "#ffffff"; // Inverse text color (white).
73
107
  export const KUI_COLOR_TEXT_NEUTRAL = "#6c7489"; // Text color for neutral elements (gray.60).
74
108
  export const KUI_COLOR_TEXT_NEUTRAL_STRONG = "#52596e"; // Strong text color for neutral elements (gray.70).
@@ -76,15 +110,28 @@ export const KUI_COLOR_TEXT_NEUTRAL_STRONGER = "#3a3f51"; // Stronger text color
76
110
  export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST = "#232633"; // Strongest text color for neutral elements (gray.90).
77
111
  export const KUI_COLOR_TEXT_NEUTRAL_WEAK = "#afb7c5"; // Weak text color for neutral elements (gray.40).
78
112
  export const KUI_COLOR_TEXT_NEUTRAL_WEAKER = "#e0e4ea"; // Weaker text color for neutral elements (gray.20).
113
+ export const KUI_COLOR_TEXT_NEUTRAL_WEAKEST = "#f9fafb"; // Weakest text color for neutral elements (gray.10).
79
114
  export const KUI_COLOR_TEXT_PRIMARY = "#0044f4"; // Text color for primary actions or messages (blue.60).
80
115
  export const KUI_COLOR_TEXT_PRIMARY_STRONG = "#0030cc"; // Strong text color for primary actions or messages (blue.70).
81
116
  export const KUI_COLOR_TEXT_PRIMARY_STRONGER = "#002099"; // Stronger text color for primary actions or messages (blue.80).
82
117
  export const KUI_COLOR_TEXT_PRIMARY_STRONGEST = "#001466"; // Strongest text color for primary actions or messages (blue.90).
83
118
  export const KUI_COLOR_TEXT_PRIMARY_WEAK = "#5f9aff"; // Weak text color for primary actions or messages (blue.40).
84
- export const KUI_COLOR_TEXT_SUCCESS = "#007d60"; // Text color for success actions or messages (green.60).
85
- export const KUI_COLOR_TEXT_SUCCESS_STRONG = "#005944"; // Strong text color for success actions or messages (green.70).
86
- export const KUI_COLOR_TEXT_WARNING = "#995c00"; // Text color for warning actions or messages (yellow.60).
87
- export const KUI_COLOR_TEXT_WARNING_STRONG = "#804400"; // Text color for warning actions or messages (yellow.70).
119
+ export const KUI_COLOR_TEXT_PRIMARY_WEAKER = "#bee2ff"; // Weaker text color for primary actions or messages (blue.20).
120
+ export const KUI_COLOR_TEXT_PRIMARY_WEAKEST = "#eefaff"; // Weakest text color for primary actions or messages (blue.10).
121
+ export const KUI_COLOR_TEXT_SUCCESS = "#007d60"; // Text color for success elements (green.60).
122
+ export const KUI_COLOR_TEXT_SUCCESS_STRONG = "#005944"; // Strong text color for success elements (green.70).
123
+ export const KUI_COLOR_TEXT_SUCCESS_STRONGER = "#004737"; // Stronger text color for success elements (green.80).
124
+ export const KUI_COLOR_TEXT_SUCCESS_STRONGEST = "#003629"; // Stronger text color for success elements (green.90).
125
+ export const KUI_COLOR_TEXT_SUCCESS_WEAK = "#00d6a4"; // Weak text color for success elements (green.40).
126
+ export const KUI_COLOR_TEXT_SUCCESS_WEAKER = "#b5ffee"; // Weaker text color for success elements (green.20).
127
+ export const KUI_COLOR_TEXT_SUCCESS_WEAKEST = "#ecfffb"; // Weakest text color for success elements (green.10).
128
+ export const KUI_COLOR_TEXT_WARNING = "#995c00"; // Text color for warning elements (yellow.60).
129
+ export const KUI_COLOR_TEXT_WARNING_STRONG = "#804400"; // Strong text color for warning elements (yellow.70).
130
+ export const KUI_COLOR_TEXT_WARNING_STRONGER = "#662d00"; // Stronger text color for warning elements (yellow.80).
131
+ export const KUI_COLOR_TEXT_WARNING_STRONGEST = "#4d1b00"; // Strongest text color for warning elements (yellow.90).
132
+ export const KUI_COLOR_TEXT_WARNING_WEAK = "#ffc400"; // Weak text color for warning elements (yellow.40).
133
+ export const KUI_COLOR_TEXT_WARNING_WEAKER = "#fff296"; // Weaker text color for warning elements (yellow.20).
134
+ export const KUI_COLOR_TEXT_WARNING_WEAKEST = "#fffce0"; // Weakest text color for warning elements (yellow.10).
88
135
  export const KUI_ANIMATION_DURATION_20 = "0.2s"; // Default transition timing
89
136
  export const KUI_BORDER_RADIUS_0 = "0px"; // 0px border radius.
90
137
  export const KUI_BORDER_RADIUS_10 = "2px"; // 2px border radius.
package/dist/tokens/js/tokens.json CHANGED
@@ -11,6 +11,13 @@
11
11
  "kui_color_background_decorative_purple": "#6f28ff",
12
12
  "kui_color_background_decorative_purple_weakest": "#f1f0ff",
13
13
  "kui_color_background_disabled": "#e0e4ea",
14
+ "kui_color_background_info": "#0044f4",
15
+ "kui_color_background_info_strong": "#0030cc",
16
+ "kui_color_background_info_stronger": "#002099",
17
+ "kui_color_background_info_strongest": "#001466",
18
+ "kui_color_background_info_weak": "#5f9aff",
19
+ "kui_color_background_info_weaker": "#bee2ff",
20
+ "kui_color_background_info_weakest": "#eefaff",
14
21
  "kui_color_background_inverse": "#000933",
15
22
  "kui_color_background_neutral": "#6c7489",
16
23
  "kui_color_background_neutral_strong": "#52596e",
@@ -27,10 +34,20 @@
27
34
  "kui_color_background_primary_weak": "#5f9aff",
28
35
  "kui_color_background_primary_weaker": "#bee2ff",
29
36
  "kui_color_background_primary_weakest": "#eefaff",
37
+ "kui_color_background_success": "#007d60",
38
+ "kui_color_background_success_strong": "#005944",
39
+ "kui_color_background_success_stronger": "#004737",
40
+ "kui_color_background_success_strongest": "#003629",
30
41
  "kui_color_background_success_weak": "#00d6a4",
42
+ "kui_color_background_success_weaker": "#b5ffee",
31
43
  "kui_color_background_success_weakest": "#ecfffb",
32
44
  "kui_color_background_transparent": "transparent",
45
+ "kui_color_background_warning": "#995c00",
46
+ "kui_color_background_warning_strong": "#804400",
47
+ "kui_color_background_warning_stronger": "#662d00",
48
+ "kui_color_background_warning_strongest": "#4d1b00",
33
49
  "kui_color_background_warning_weak": "#ffc400",
50
+ "kui_color_background_warning_weaker": "#fff296",
34
51
  "kui_color_background_warning_weakest": "#fffce0",
35
52
  "kui_color_border": "#e0e4ea",
36
53
  "kui_color_border_danger": "#d60027",
@@ -43,8 +60,13 @@
43
60
  "kui_color_border_decorative_purple": "#6f28ff",
44
61
  "kui_color_border_disabled": "#e0e4ea",
45
62
  "kui_color_border_inverse": "rgba(255, 255, 255, 0.2)",
63
+ "kui_color_border_neutral": "#6c7489",
64
+ "kui_color_border_neutral_strong": "#52596e",
65
+ "kui_color_border_neutral_stronger": "#3a3f51",
66
+ "kui_color_border_neutral_strongest": "#232633",
46
67
  "kui_color_border_neutral_weak": "#afb7c5",
47
68
  "kui_color_border_neutral_weaker": "#e0e4ea",
69
+ "kui_color_border_neutral_weakest": "#f9fafb",
48
70
  "kui_color_border_primary": "#0044f4",
49
71
  "kui_color_border_primary_strong": "#0030cc",
50
72
  "kui_color_border_primary_stronger": "#002099",
@@ -56,11 +78,23 @@
56
78
  "kui_color_text": "#000933",
57
79
  "kui_color_text_danger": "#d60027",
58
80
  "kui_color_text_danger_strong": "#ad000e",
81
+ "kui_color_text_danger_stronger": "#850000",
82
+ "kui_color_text_danger_strongest": "#5c0000",
83
+ "kui_color_text_danger_weak": "#ff3954",
84
+ "kui_color_text_danger_weaker": "#ffabab",
85
+ "kui_color_text_danger_weakest": "#ffe5e5",
59
86
  "kui_color_text_decorative_aqua": "#00abd2",
60
87
  "kui_color_text_decorative_pink": "#d60067",
61
88
  "kui_color_text_decorative_purple": "#6f28ff",
62
89
  "kui_color_text_decorative_purple_strong": "#5e00f5",
63
90
  "kui_color_text_disabled": "#afb7c5",
91
+ "kui_color_text_info": "#0044f4",
92
+ "kui_color_text_info_strong": "#0030cc",
93
+ "kui_color_text_info_stronger": "#002099",
94
+ "kui_color_text_info_strongest": "#001466",
95
+ "kui_color_text_info_weak": "#5f9aff",
96
+ "kui_color_text_info_weaker": "#bee2ff",
97
+ "kui_color_text_info_weakest": "#eefaff",
64
98
  "kui_color_text_inverse": "#ffffff",
65
99
  "kui_color_text_neutral": "#6c7489",
66
100
  "kui_color_text_neutral_strong": "#52596e",
@@ -68,15 +102,28 @@
68
102
  "kui_color_text_neutral_strongest": "#232633",
69
103
  "kui_color_text_neutral_weak": "#afb7c5",
70
104
  "kui_color_text_neutral_weaker": "#e0e4ea",
105
+ "kui_color_text_neutral_weakest": "#f9fafb",
71
106
  "kui_color_text_primary": "#0044f4",
72
107
  "kui_color_text_primary_strong": "#0030cc",
73
108
  "kui_color_text_primary_stronger": "#002099",
74
109
  "kui_color_text_primary_strongest": "#001466",
75
110
  "kui_color_text_primary_weak": "#5f9aff",
111
+ "kui_color_text_primary_weaker": "#bee2ff",
112
+ "kui_color_text_primary_weakest": "#eefaff",
76
113
  "kui_color_text_success": "#007d60",
77
114
  "kui_color_text_success_strong": "#005944",
115
+ "kui_color_text_success_stronger": "#004737",
116
+ "kui_color_text_success_strongest": "#003629",
117
+ "kui_color_text_success_weak": "#00d6a4",
118
+ "kui_color_text_success_weaker": "#b5ffee",
119
+ "kui_color_text_success_weakest": "#ecfffb",
78
120
  "kui_color_text_warning": "#995c00",
79
121
  "kui_color_text_warning_strong": "#804400",
122
+ "kui_color_text_warning_stronger": "#662d00",
123
+ "kui_color_text_warning_strongest": "#4d1b00",
124
+ "kui_color_text_warning_weak": "#ffc400",
125
+ "kui_color_text_warning_weaker": "#fff296",
126
+ "kui_color_text_warning_weakest": "#fffce0",
80
127
  "kui_animation_duration_20": "0.2s",
81
128
  "kui_border_radius_0": "0px",
82
129
  "kui_border_radius_10": "2px",
package/dist/tokens/less/variables.less 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
@@ -18,6 +18,13 @@
18
18
  @kui-color-background-decorative-purple: #6f28ff; // Background color for decorative purposes (purple.60).
19
19
  @kui-color-background-decorative-purple-weakest: #f1f0ff; // Weakest background color for decorative purposes (purple.10).
20
20
  @kui-color-background-disabled: #e0e4ea; // Background color for disabled elements (gray.20).
21
+ @kui-color-background-info: #0044f4; // Background color for info elements (blue.60).
22
+ @kui-color-background-info-strong: #0030cc; // Strong background color for info elements (blue.70).
23
+ @kui-color-background-info-stronger: #002099; // Stronger background color for info elements (blue.80).
24
+ @kui-color-background-info-strongest: #001466; // Strongest background color for info elements (blue.90).
25
+ @kui-color-background-info-weak: #5f9aff; // Weak background color for info elements (blue.40).
26
+ @kui-color-background-info-weaker: #bee2ff; // Weaker background color for info elements (blue.20).
27
+ @kui-color-background-info-weakest: #eefaff; // Weakest background color for info elements (blue.10).
21
28
  @kui-color-background-inverse: #000933; // Inverse background color for containers (blue.100)
22
29
  @kui-color-background-neutral: #6c7489; // Background color for neutral elements (gray.60).
23
30
  @kui-color-background-neutral-strong: #52596e; // Strong background color for neutral elements (gray.70).
@@ -34,10 +41,20 @@
34
41
  @kui-color-background-primary-weak: #5f9aff; // Weak background color for primary actions or messages (blue.40).
35
42
  @kui-color-background-primary-weaker: #bee2ff; // Weaker background color for primary actions or messages (blue.20).
36
43
  @kui-color-background-primary-weakest: #eefaff; // Weakest background color for primary actions or messages (blue.10)
44
+ @kui-color-background-success: #007d60; // Background color for success elements (green.60).
45
+ @kui-color-background-success-strong: #005944; // Strong background color for success elements (green.70).
46
+ @kui-color-background-success-stronger: #004737; // Stronger background color for success elements (green.80).
47
+ @kui-color-background-success-strongest: #003629; // Strongest background color for success elements (green.90).
37
48
  @kui-color-background-success-weak: #00d6a4; // Weak background color for success elements (green.40).
49
+ @kui-color-background-success-weaker: #b5ffee; // Weaker background color for success elements (green.20).
38
50
  @kui-color-background-success-weakest: #ecfffb; // Weakest background color for success elements (green.10).
39
51
  @kui-color-background-transparent: transparent; // Transparent background color (transparent).
52
+ @kui-color-background-warning: #995c00; // Background color for warning elements (yellow.60).
53
+ @kui-color-background-warning-strong: #804400; // Strong background color for warning elements (yellow.70).
54
+ @kui-color-background-warning-stronger: #662d00; // Stronger background color for warning elements (yellow.80).
55
+ @kui-color-background-warning-strongest: #4d1b00; // Strongest background color for warning elements (yellow.90).
40
56
  @kui-color-background-warning-weak: #ffc400; // Weak background color for warning elements (yellow.40).
57
+ @kui-color-background-warning-weaker: #fff296; // Weaker background color for warning elements (yellow.20).
41
58
  @kui-color-background-warning-weakest: #fffce0; // Weakest background color for warning elements (yellow.10).
42
59
  @kui-color-border: #e0e4ea; // Default border color for containers (gray.20).
43
60
  @kui-color-border-danger: #d60027; // Border color for danger actions or messages (red.60).
@@ -50,8 +67,13 @@
50
67
  @kui-color-border-decorative-purple: #6f28ff; // Border color for decorative purposes (purple.60).
51
68
  @kui-color-border-disabled: #e0e4ea; // Border color for disabled elements (gray.20).
52
69
  @kui-color-border-inverse: rgba(255, 255, 255, 0.2); // Inverse border color (rgba(white, 0.2)).
70
+ @kui-color-border-neutral: #6c7489; // Border color for neutral elements (gray.60)
71
+ @kui-color-border-neutral-strong: #52596e; // Strong border color for neutral elements (gray.70)
72
+ @kui-color-border-neutral-stronger: #3a3f51; // Stronger border color for neutral elements (gray.80)
73
+ @kui-color-border-neutral-strongest: #232633; // Strongest border color for neutral elements (gray.90)
53
74
  @kui-color-border-neutral-weak: #afb7c5; // Weak border color for neutral elements (gray.40)
54
75
  @kui-color-border-neutral-weaker: #e0e4ea; // Weaker border color for neutral elements (gray.20)
76
+ @kui-color-border-neutral-weakest: #f9fafb; // Weakest border color for neutral elements (gray.10)
55
77
  @kui-color-border-primary: #0044f4; // Border color for primary actions or messages (blue.60).
56
78
  @kui-color-border-primary-strong: #0030cc; // Strong border color for primary actions or messages (blue.70).
57
79
  @kui-color-border-primary-stronger: #002099; // Stronger border color for primary actions or messages (blue.80).
@@ -63,11 +85,23 @@
63
85
  @kui-color-text: #000933; // Default text color (blue.100).
64
86
  @kui-color-text-danger: #d60027; // Text color for danger actions or messages (red.60).
65
87
  @kui-color-text-danger-strong: #ad000e; // Strong text color for danger actions or messages (red.70).
88
+ @kui-color-text-danger-stronger: #850000; // Stronger text color for danger actions or messages (red.80).
89
+ @kui-color-text-danger-strongest: #5c0000; // Strongest text color for danger actions or messages (red.90).
90
+ @kui-color-text-danger-weak: #ff3954; // Weak text color for danger actions or messages (red.40).
91
+ @kui-color-text-danger-weaker: #ffabab; // Weaker text color for danger actions or messages (red.20).
92
+ @kui-color-text-danger-weakest: #ffe5e5; // Weakest text color for danger actions or messages (red.10).
66
93
  @kui-color-text-decorative-aqua: #00abd2; // Text color for decorative purposes (aqua.50).
67
94
  @kui-color-text-decorative-pink: #d60067; // Text color for decorative purposes (pink.60).
68
95
  @kui-color-text-decorative-purple: #6f28ff; // Text color for decorative purposes (purple.60).
69
96
  @kui-color-text-decorative-purple-strong: #5e00f5; // Strong text color for decorative purposes (purple.70).
70
97
  @kui-color-text-disabled: #afb7c5; // Text color for disabled elements (gray.40).
98
+ @kui-color-text-info: #0044f4; // Text color for info elements (blue.60).
99
+ @kui-color-text-info-strong: #0030cc; // Strong text color for info elements (blue.70).
100
+ @kui-color-text-info-stronger: #002099; // Stronger text color for info elements (blue.80).
101
+ @kui-color-text-info-strongest: #001466; // Strongest text color for info elements (blue.90).
102
+ @kui-color-text-info-weak: #5f9aff; // Weak text color for info elements (blue.40).
103
+ @kui-color-text-info-weaker: #bee2ff; // Weaker text color for info elements (blue.20).
104
+ @kui-color-text-info-weakest: #eefaff; // Weakest text color for info elements (blue.10).
71
105
  @kui-color-text-inverse: #ffffff; // Inverse text color (white).
72
106
  @kui-color-text-neutral: #6c7489; // Text color for neutral elements (gray.60).
73
107
  @kui-color-text-neutral-strong: #52596e; // Strong text color for neutral elements (gray.70).
@@ -75,15 +109,28 @@
75
109
  @kui-color-text-neutral-strongest: #232633; // Strongest text color for neutral elements (gray.90).
76
110
  @kui-color-text-neutral-weak: #afb7c5; // Weak text color for neutral elements (gray.40).
77
111
  @kui-color-text-neutral-weaker: #e0e4ea; // Weaker text color for neutral elements (gray.20).
112
+ @kui-color-text-neutral-weakest: #f9fafb; // Weakest text color for neutral elements (gray.10).
78
113
  @kui-color-text-primary: #0044f4; // Text color for primary actions or messages (blue.60).
79
114
  @kui-color-text-primary-strong: #0030cc; // Strong text color for primary actions or messages (blue.70).
80
115
  @kui-color-text-primary-stronger: #002099; // Stronger text color for primary actions or messages (blue.80).
81
116
  @kui-color-text-primary-strongest: #001466; // Strongest text color for primary actions or messages (blue.90).
82
117
  @kui-color-text-primary-weak: #5f9aff; // Weak text color for primary actions or messages (blue.40).
83
- @kui-color-text-success: #007d60; // Text color for success actions or messages (green.60).
84
- @kui-color-text-success-strong: #005944; // Strong text color for success actions or messages (green.70).
85
- @kui-color-text-warning: #995c00; // Text color for warning actions or messages (yellow.60).
86
- @kui-color-text-warning-strong: #804400; // Text color for warning actions or messages (yellow.70).
118
+ @kui-color-text-primary-weaker: #bee2ff; // Weaker text color for primary actions or messages (blue.20).
119
+ @kui-color-text-primary-weakest: #eefaff; // Weakest text color for primary actions or messages (blue.10).
120
+ @kui-color-text-success: #007d60; // Text color for success elements (green.60).
121
+ @kui-color-text-success-strong: #005944; // Strong text color for success elements (green.70).
122
+ @kui-color-text-success-stronger: #004737; // Stronger text color for success elements (green.80).
123
+ @kui-color-text-success-strongest: #003629; // Stronger text color for success elements (green.90).
124
+ @kui-color-text-success-weak: #00d6a4; // Weak text color for success elements (green.40).
125
+ @kui-color-text-success-weaker: #b5ffee; // Weaker text color for success elements (green.20).
126
+ @kui-color-text-success-weakest: #ecfffb; // Weakest text color for success elements (green.10).
127
+ @kui-color-text-warning: #995c00; // Text color for warning elements (yellow.60).
128
+ @kui-color-text-warning-strong: #804400; // Strong text color for warning elements (yellow.70).
129
+ @kui-color-text-warning-stronger: #662d00; // Stronger text color for warning elements (yellow.80).
130
+ @kui-color-text-warning-strongest: #4d1b00; // Strongest text color for warning elements (yellow.90).
131
+ @kui-color-text-warning-weak: #ffc400; // Weak text color for warning elements (yellow.40).
132
+ @kui-color-text-warning-weaker: #fff296; // Weaker text color for warning elements (yellow.20).
133
+ @kui-color-text-warning-weakest: #fffce0; // Weakest text color for warning elements (yellow.10).
87
134
  @kui-animation-duration-20: 0.2s; // Default transition timing
88
135
  @kui-border-radius-0: 0px; // 0px border radius.
89
136
  @kui-border-radius-10: 2px; // 2px border radius.