@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/scss/_map.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
- * Generated on Thu, 07 Aug 2025 17:42:45 GMT
4
+ * Generated on Thu, 07 Aug 2025 17:42:09 GMT
5
5
  *
6
6
  * Kong Design Tokens
7
7
  * GitHub: https://github.com/Kong/design-tokens
@@ -33,6 +33,20 @@ $kui-tokens-map: (
33
33
  'kui-color-background-decorative-purple-weakest': #f1f0ff,
34
34
  // Background color for disabled elements (gray.20).
35
35
  'kui-color-background-disabled': #e0e4ea,
36
+ // Background color for info elements (blue.60).
37
+ 'kui-color-background-info': #0044f4,
38
+ // Strong background color for info elements (blue.70).
39
+ 'kui-color-background-info-strong': #0030cc,
40
+ // Stronger background color for info elements (blue.80).
41
+ 'kui-color-background-info-stronger': #002099,
42
+ // Strongest background color for info elements (blue.90).
43
+ 'kui-color-background-info-strongest': #001466,
44
+ // Weak background color for info elements (blue.40).
45
+ 'kui-color-background-info-weak': #5f9aff,
46
+ // Weaker background color for info elements (blue.20).
47
+ 'kui-color-background-info-weaker': #bee2ff,
48
+ // Weakest background color for info elements (blue.10).
49
+ 'kui-color-background-info-weakest': #eefaff,
36
50
  // Inverse background color for containers (blue.100)
37
51
  'kui-color-background-inverse': #000933,
38
52
  // Background color for neutral elements (gray.60).
@@ -65,14 +79,34 @@ $kui-tokens-map: (
65
79
  'kui-color-background-primary-weaker': #bee2ff,
66
80
  // Weakest background color for primary actions or messages (blue.10)
67
81
  'kui-color-background-primary-weakest': #eefaff,
82
+ // Background color for success elements (green.60).
83
+ 'kui-color-background-success': #007d60,
84
+ // Strong background color for success elements (green.70).
85
+ 'kui-color-background-success-strong': #005944,
86
+ // Stronger background color for success elements (green.80).
87
+ 'kui-color-background-success-stronger': #004737,
88
+ // Strongest background color for success elements (green.90).
89
+ 'kui-color-background-success-strongest': #003629,
68
90
  // Weak background color for success elements (green.40).
69
91
  'kui-color-background-success-weak': #00d6a4,
92
+ // Weaker background color for success elements (green.20).
93
+ 'kui-color-background-success-weaker': #b5ffee,
70
94
  // Weakest background color for success elements (green.10).
71
95
  'kui-color-background-success-weakest': #ecfffb,
72
96
  // Transparent background color (transparent).
73
97
  'kui-color-background-transparent': transparent,
98
+ // Background color for warning elements (yellow.60).
99
+ 'kui-color-background-warning': #995c00,
100
+ // Strong background color for warning elements (yellow.70).
101
+ 'kui-color-background-warning-strong': #804400,
102
+ // Stronger background color for warning elements (yellow.80).
103
+ 'kui-color-background-warning-stronger': #662d00,
104
+ // Strongest background color for warning elements (yellow.90).
105
+ 'kui-color-background-warning-strongest': #4d1b00,
74
106
  // Weak background color for warning elements (yellow.40).
75
107
  'kui-color-background-warning-weak': #ffc400,
108
+ // Weaker background color for warning elements (yellow.20).
109
+ 'kui-color-background-warning-weaker': #fff296,
76
110
  // Weakest background color for warning elements (yellow.10).
77
111
  'kui-color-background-warning-weakest': #fffce0,
78
112
  // Default border color for containers (gray.20).
@@ -97,10 +131,20 @@ $kui-tokens-map: (
97
131
  'kui-color-border-disabled': #e0e4ea,
98
132
  // Inverse border color (rgba(white, 0.2)).
99
133
  'kui-color-border-inverse': rgba(255, 255, 255, 0.2),
134
+ // Border color for neutral elements (gray.60)
135
+ 'kui-color-border-neutral': #6c7489,
136
+ // Strong border color for neutral elements (gray.70)
137
+ 'kui-color-border-neutral-strong': #52596e,
138
+ // Stronger border color for neutral elements (gray.80)
139
+ 'kui-color-border-neutral-stronger': #3a3f51,
140
+ // Strongest border color for neutral elements (gray.90)
141
+ 'kui-color-border-neutral-strongest': #232633,
100
142
  // Weak border color for neutral elements (gray.40)
101
143
  'kui-color-border-neutral-weak': #afb7c5,
102
144
  // Weaker border color for neutral elements (gray.20)
103
145
  'kui-color-border-neutral-weaker': #e0e4ea,
146
+ // Weakest border color for neutral elements (gray.10)
147
+ 'kui-color-border-neutral-weakest': #f9fafb,
104
148
  // Border color for primary actions or messages (blue.60).
105
149
  'kui-color-border-primary': #0044f4,
106
150
  // Strong border color for primary actions or messages (blue.70).
@@ -123,6 +167,16 @@ $kui-tokens-map: (
123
167
  'kui-color-text-danger': #d60027,
124
168
  // Strong text color for danger actions or messages (red.70).
125
169
  'kui-color-text-danger-strong': #ad000e,
170
+ // Stronger text color for danger actions or messages (red.80).
171
+ 'kui-color-text-danger-stronger': #850000,
172
+ // Strongest text color for danger actions or messages (red.90).
173
+ 'kui-color-text-danger-strongest': #5c0000,
174
+ // Weak text color for danger actions or messages (red.40).
175
+ 'kui-color-text-danger-weak': #ff3954,
176
+ // Weaker text color for danger actions or messages (red.20).
177
+ 'kui-color-text-danger-weaker': #ffabab,
178
+ // Weakest text color for danger actions or messages (red.10).
179
+ 'kui-color-text-danger-weakest': #ffe5e5,
126
180
  // Text color for decorative purposes (aqua.50).
127
181
  'kui-color-text-decorative-aqua': #00abd2,
128
182
  // Text color for decorative purposes (pink.60).
@@ -133,6 +187,20 @@ $kui-tokens-map: (
133
187
  'kui-color-text-decorative-purple-strong': #5e00f5,
134
188
  // Text color for disabled elements (gray.40).
135
189
  'kui-color-text-disabled': #afb7c5,
190
+ // Text color for info elements (blue.60).
191
+ 'kui-color-text-info': #0044f4,
192
+ // Strong text color for info elements (blue.70).
193
+ 'kui-color-text-info-strong': #0030cc,
194
+ // Stronger text color for info elements (blue.80).
195
+ 'kui-color-text-info-stronger': #002099,
196
+ // Strongest text color for info elements (blue.90).
197
+ 'kui-color-text-info-strongest': #001466,
198
+ // Weak text color for info elements (blue.40).
199
+ 'kui-color-text-info-weak': #5f9aff,
200
+ // Weaker text color for info elements (blue.20).
201
+ 'kui-color-text-info-weaker': #bee2ff,
202
+ // Weakest text color for info elements (blue.10).
203
+ 'kui-color-text-info-weakest': #eefaff,
136
204
  // Inverse text color (white).
137
205
  'kui-color-text-inverse': #ffffff,
138
206
  // Text color for neutral elements (gray.60).
@@ -147,6 +215,8 @@ $kui-tokens-map: (
147
215
  'kui-color-text-neutral-weak': #afb7c5,
148
216
  // Weaker text color for neutral elements (gray.20).
149
217
  'kui-color-text-neutral-weaker': #e0e4ea,
218
+ // Weakest text color for neutral elements (gray.10).
219
+ 'kui-color-text-neutral-weakest': #f9fafb,
150
220
  // Text color for primary actions or messages (blue.60).
151
221
  'kui-color-text-primary': #0044f4,
152
222
  // Strong text color for primary actions or messages (blue.70).
@@ -157,14 +227,38 @@ $kui-tokens-map: (
157
227
  'kui-color-text-primary-strongest': #001466,
158
228
  // Weak text color for primary actions or messages (blue.40).
159
229
  'kui-color-text-primary-weak': #5f9aff,
160
- // Text color for success actions or messages (green.60).
230
+ // Weaker text color for primary actions or messages (blue.20).
231
+ 'kui-color-text-primary-weaker': #bee2ff,
232
+ // Weakest text color for primary actions or messages (blue.10).
233
+ 'kui-color-text-primary-weakest': #eefaff,
234
+ // Text color for success elements (green.60).
161
235
  'kui-color-text-success': #007d60,
162
- // Strong text color for success actions or messages (green.70).
236
+ // Strong text color for success elements (green.70).
163
237
  'kui-color-text-success-strong': #005944,
164
- // Text color for warning actions or messages (yellow.60).
238
+ // Stronger text color for success elements (green.80).
239
+ 'kui-color-text-success-stronger': #004737,
240
+ // Stronger text color for success elements (green.90).
241
+ 'kui-color-text-success-strongest': #003629,
242
+ // Weak text color for success elements (green.40).
243
+ 'kui-color-text-success-weak': #00d6a4,
244
+ // Weaker text color for success elements (green.20).
245
+ 'kui-color-text-success-weaker': #b5ffee,
246
+ // Weakest text color for success elements (green.10).
247
+ 'kui-color-text-success-weakest': #ecfffb,
248
+ // Text color for warning elements (yellow.60).
165
249
  'kui-color-text-warning': #995c00,
166
- // Text color for warning actions or messages (yellow.70).
250
+ // Strong text color for warning elements (yellow.70).
167
251
  'kui-color-text-warning-strong': #804400,
252
+ // Stronger text color for warning elements (yellow.80).
253
+ 'kui-color-text-warning-stronger': #662d00,
254
+ // Strongest text color for warning elements (yellow.90).
255
+ 'kui-color-text-warning-strongest': #4d1b00,
256
+ // Weak text color for warning elements (yellow.40).
257
+ 'kui-color-text-warning-weak': #ffc400,
258
+ // Weaker text color for warning elements (yellow.20).
259
+ 'kui-color-text-warning-weaker': #fff296,
260
+ // Weakest text color for warning elements (yellow.10).
261
+ 'kui-color-text-warning-weakest': #fffce0,
168
262
  // Default transition timing
169
263
  'kui-animation-duration-20': 0.2s,
170
264
  // 0px border radius.
package/dist/tokens/scss/_mixins.scss CHANGED
@@ -31,6 +31,13 @@
31
31
  --kui-color-background-decorative-purple: #6f28ff; /** Background color for decorative purposes (purple.60). */
32
32
  --kui-color-background-decorative-purple-weakest: #f1f0ff; /** Weakest background color for decorative purposes (purple.10). */
33
33
  --kui-color-background-disabled: #e0e4ea; /** Background color for disabled elements (gray.20). */
34
+ --kui-color-background-info: #0044f4; /** Background color for info elements (blue.60). */
35
+ --kui-color-background-info-strong: #0030cc; /** Strong background color for info elements (blue.70). */
36
+ --kui-color-background-info-stronger: #002099; /** Stronger background color for info elements (blue.80). */
37
+ --kui-color-background-info-strongest: #001466; /** Strongest background color for info elements (blue.90). */
38
+ --kui-color-background-info-weak: #5f9aff; /** Weak background color for info elements (blue.40). */
39
+ --kui-color-background-info-weaker: #bee2ff; /** Weaker background color for info elements (blue.20). */
40
+ --kui-color-background-info-weakest: #eefaff; /** Weakest background color for info elements (blue.10). */
34
41
  --kui-color-background-inverse: #000933; /** Inverse background color for containers (blue.100) */
35
42
  --kui-color-background-neutral: #6c7489; /** Background color for neutral elements (gray.60). */
36
43
  --kui-color-background-neutral-strong: #52596e; /** Strong background color for neutral elements (gray.70). */
@@ -47,10 +54,20 @@
47
54
  --kui-color-background-primary-weak: #5f9aff; /** Weak background color for primary actions or messages (blue.40). */
48
55
  --kui-color-background-primary-weaker: #bee2ff; /** Weaker background color for primary actions or messages (blue.20). */
49
56
  --kui-color-background-primary-weakest: #eefaff; /** Weakest background color for primary actions or messages (blue.10) */
57
+ --kui-color-background-success: #007d60; /** Background color for success elements (green.60). */
58
+ --kui-color-background-success-strong: #005944; /** Strong background color for success elements (green.70). */
59
+ --kui-color-background-success-stronger: #004737; /** Stronger background color for success elements (green.80). */
60
+ --kui-color-background-success-strongest: #003629; /** Strongest background color for success elements (green.90). */
50
61
  --kui-color-background-success-weak: #00d6a4; /** Weak background color for success elements (green.40). */
62
+ --kui-color-background-success-weaker: #b5ffee; /** Weaker background color for success elements (green.20). */
51
63
  --kui-color-background-success-weakest: #ecfffb; /** Weakest background color for success elements (green.10). */
52
64
  --kui-color-background-transparent: transparent; /** Transparent background color (transparent). */
65
+ --kui-color-background-warning: #995c00; /** Background color for warning elements (yellow.60). */
66
+ --kui-color-background-warning-strong: #804400; /** Strong background color for warning elements (yellow.70). */
67
+ --kui-color-background-warning-stronger: #662d00; /** Stronger background color for warning elements (yellow.80). */
68
+ --kui-color-background-warning-strongest: #4d1b00; /** Strongest background color for warning elements (yellow.90). */
53
69
  --kui-color-background-warning-weak: #ffc400; /** Weak background color for warning elements (yellow.40). */
70
+ --kui-color-background-warning-weaker: #fff296; /** Weaker background color for warning elements (yellow.20). */
54
71
  --kui-color-background-warning-weakest: #fffce0; /** Weakest background color for warning elements (yellow.10). */
55
72
  --kui-color-border: #e0e4ea; /** Default border color for containers (gray.20). */
56
73
  --kui-color-border-danger: #d60027; /** Border color for danger actions or messages (red.60). */
@@ -63,8 +80,13 @@
63
80
  --kui-color-border-decorative-purple: #6f28ff; /** Border color for decorative purposes (purple.60). */
64
81
  --kui-color-border-disabled: #e0e4ea; /** Border color for disabled elements (gray.20). */
65
82
  --kui-color-border-inverse: rgba(255, 255, 255, 0.2); /** Inverse border color (rgba(white, 0.2)). */
83
+ --kui-color-border-neutral: #6c7489; /** Border color for neutral elements (gray.60) */
84
+ --kui-color-border-neutral-strong: #52596e; /** Strong border color for neutral elements (gray.70) */
85
+ --kui-color-border-neutral-stronger: #3a3f51; /** Stronger border color for neutral elements (gray.80) */
86
+ --kui-color-border-neutral-strongest: #232633; /** Strongest border color for neutral elements (gray.90) */
66
87
  --kui-color-border-neutral-weak: #afb7c5; /** Weak border color for neutral elements (gray.40) */
67
88
  --kui-color-border-neutral-weaker: #e0e4ea; /** Weaker border color for neutral elements (gray.20) */
89
+ --kui-color-border-neutral-weakest: #f9fafb; /** Weakest border color for neutral elements (gray.10) */
68
90
  --kui-color-border-primary: #0044f4; /** Border color for primary actions or messages (blue.60). */
69
91
  --kui-color-border-primary-strong: #0030cc; /** Strong border color for primary actions or messages (blue.70). */
70
92
  --kui-color-border-primary-stronger: #002099; /** Stronger border color for primary actions or messages (blue.80). */
@@ -76,11 +98,23 @@
76
98
  --kui-color-text: #000933; /** Default text color (blue.100). */
77
99
  --kui-color-text-danger: #d60027; /** Text color for danger actions or messages (red.60). */
78
100
  --kui-color-text-danger-strong: #ad000e; /** Strong text color for danger actions or messages (red.70). */
101
+ --kui-color-text-danger-stronger: #850000; /** Stronger text color for danger actions or messages (red.80). */
102
+ --kui-color-text-danger-strongest: #5c0000; /** Strongest text color for danger actions or messages (red.90). */
103
+ --kui-color-text-danger-weak: #ff3954; /** Weak text color for danger actions or messages (red.40). */
104
+ --kui-color-text-danger-weaker: #ffabab; /** Weaker text color for danger actions or messages (red.20). */
105
+ --kui-color-text-danger-weakest: #ffe5e5; /** Weakest text color for danger actions or messages (red.10). */
79
106
  --kui-color-text-decorative-aqua: #00abd2; /** Text color for decorative purposes (aqua.50). */
80
107
  --kui-color-text-decorative-pink: #d60067; /** Text color for decorative purposes (pink.60). */
81
108
  --kui-color-text-decorative-purple: #6f28ff; /** Text color for decorative purposes (purple.60). */
82
109
  --kui-color-text-decorative-purple-strong: #5e00f5; /** Strong text color for decorative purposes (purple.70). */
83
110
  --kui-color-text-disabled: #afb7c5; /** Text color for disabled elements (gray.40). */
111
+ --kui-color-text-info: #0044f4; /** Text color for info elements (blue.60). */
112
+ --kui-color-text-info-strong: #0030cc; /** Strong text color for info elements (blue.70). */
113
+ --kui-color-text-info-stronger: #002099; /** Stronger text color for info elements (blue.80). */
114
+ --kui-color-text-info-strongest: #001466; /** Strongest text color for info elements (blue.90). */
115
+ --kui-color-text-info-weak: #5f9aff; /** Weak text color for info elements (blue.40). */
116
+ --kui-color-text-info-weaker: #bee2ff; /** Weaker text color for info elements (blue.20). */
117
+ --kui-color-text-info-weakest: #eefaff; /** Weakest text color for info elements (blue.10). */
84
118
  --kui-color-text-inverse: #ffffff; /** Inverse text color (white). */
85
119
  --kui-color-text-neutral: #6c7489; /** Text color for neutral elements (gray.60). */
86
120
  --kui-color-text-neutral-strong: #52596e; /** Strong text color for neutral elements (gray.70). */
@@ -88,15 +122,28 @@
88
122
  --kui-color-text-neutral-strongest: #232633; /** Strongest text color for neutral elements (gray.90). */
89
123
  --kui-color-text-neutral-weak: #afb7c5; /** Weak text color for neutral elements (gray.40). */
90
124
  --kui-color-text-neutral-weaker: #e0e4ea; /** Weaker text color for neutral elements (gray.20). */
125
+ --kui-color-text-neutral-weakest: #f9fafb; /** Weakest text color for neutral elements (gray.10). */
91
126
  --kui-color-text-primary: #0044f4; /** Text color for primary actions or messages (blue.60). */
92
127
  --kui-color-text-primary-strong: #0030cc; /** Strong text color for primary actions or messages (blue.70). */
93
128
  --kui-color-text-primary-stronger: #002099; /** Stronger text color for primary actions or messages (blue.80). */
94
129
  --kui-color-text-primary-strongest: #001466; /** Strongest text color for primary actions or messages (blue.90). */
95
130
  --kui-color-text-primary-weak: #5f9aff; /** Weak text color for primary actions or messages (blue.40). */
96
- --kui-color-text-success: #007d60; /** Text color for success actions or messages (green.60). */
97
- --kui-color-text-success-strong: #005944; /** Strong text color for success actions or messages (green.70). */
98
- --kui-color-text-warning: #995c00; /** Text color for warning actions or messages (yellow.60). */
99
- --kui-color-text-warning-strong: #804400; /** Text color for warning actions or messages (yellow.70). */
131
+ --kui-color-text-primary-weaker: #bee2ff; /** Weaker text color for primary actions or messages (blue.20). */
132
+ --kui-color-text-primary-weakest: #eefaff; /** Weakest text color for primary actions or messages (blue.10). */
133
+ --kui-color-text-success: #007d60; /** Text color for success elements (green.60). */
134
+ --kui-color-text-success-strong: #005944; /** Strong text color for success elements (green.70). */
135
+ --kui-color-text-success-stronger: #004737; /** Stronger text color for success elements (green.80). */
136
+ --kui-color-text-success-strongest: #003629; /** Stronger text color for success elements (green.90). */
137
+ --kui-color-text-success-weak: #00d6a4; /** Weak text color for success elements (green.40). */
138
+ --kui-color-text-success-weaker: #b5ffee; /** Weaker text color for success elements (green.20). */
139
+ --kui-color-text-success-weakest: #ecfffb; /** Weakest text color for success elements (green.10). */
140
+ --kui-color-text-warning: #995c00; /** Text color for warning elements (yellow.60). */
141
+ --kui-color-text-warning-strong: #804400; /** Strong text color for warning elements (yellow.70). */
142
+ --kui-color-text-warning-stronger: #662d00; /** Stronger text color for warning elements (yellow.80). */
143
+ --kui-color-text-warning-strongest: #4d1b00; /** Strongest text color for warning elements (yellow.90). */
144
+ --kui-color-text-warning-weak: #ffc400; /** Weak text color for warning elements (yellow.40). */
145
+ --kui-color-text-warning-weaker: #fff296; /** Weaker text color for warning elements (yellow.20). */
146
+ --kui-color-text-warning-weakest: #fffce0; /** Weakest text color for warning elements (yellow.10). */
100
147
  --kui-animation-duration-20: 0.2s; /** Default transition timing */
101
148
  --kui-border-radius-0: 0px; /** 0px border radius. */
102
149
  --kui-border-radius-10: 2px; /** 2px border radius. */
package/dist/tokens/scss/_variables.scss 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 @@ $kui-color-background-decorative-aqua-weakest: #ecfcff !default; // Weakest back
18
18
  $kui-color-background-decorative-purple: #6f28ff !default; // Background color for decorative purposes (purple.60).
19
19
  $kui-color-background-decorative-purple-weakest: #f1f0ff !default; // Weakest background color for decorative purposes (purple.10).
20
20
  $kui-color-background-disabled: #e0e4ea !default; // Background color for disabled elements (gray.20).
21
+ $kui-color-background-info: #0044f4 !default; // Background color for info elements (blue.60).
22
+ $kui-color-background-info-strong: #0030cc !default; // Strong background color for info elements (blue.70).
23
+ $kui-color-background-info-stronger: #002099 !default; // Stronger background color for info elements (blue.80).
24
+ $kui-color-background-info-strongest: #001466 !default; // Strongest background color for info elements (blue.90).
25
+ $kui-color-background-info-weak: #5f9aff !default; // Weak background color for info elements (blue.40).
26
+ $kui-color-background-info-weaker: #bee2ff !default; // Weaker background color for info elements (blue.20).
27
+ $kui-color-background-info-weakest: #eefaff !default; // Weakest background color for info elements (blue.10).
21
28
  $kui-color-background-inverse: #000933 !default; // Inverse background color for containers (blue.100)
22
29
  $kui-color-background-neutral: #6c7489 !default; // Background color for neutral elements (gray.60).
23
30
  $kui-color-background-neutral-strong: #52596e !default; // Strong background color for neutral elements (gray.70).
@@ -34,10 +41,20 @@ $kui-color-background-primary-strongest: #001466 !default; // Strongest backgrou
34
41
  $kui-color-background-primary-weak: #5f9aff !default; // Weak background color for primary actions or messages (blue.40).
35
42
  $kui-color-background-primary-weaker: #bee2ff !default; // Weaker background color for primary actions or messages (blue.20).
36
43
  $kui-color-background-primary-weakest: #eefaff !default; // Weakest background color for primary actions or messages (blue.10)
44
+ $kui-color-background-success: #007d60 !default; // Background color for success elements (green.60).
45
+ $kui-color-background-success-strong: #005944 !default; // Strong background color for success elements (green.70).
46
+ $kui-color-background-success-stronger: #004737 !default; // Stronger background color for success elements (green.80).
47
+ $kui-color-background-success-strongest: #003629 !default; // Strongest background color for success elements (green.90).
37
48
  $kui-color-background-success-weak: #00d6a4 !default; // Weak background color for success elements (green.40).
49
+ $kui-color-background-success-weaker: #b5ffee !default; // Weaker background color for success elements (green.20).
38
50
  $kui-color-background-success-weakest: #ecfffb !default; // Weakest background color for success elements (green.10).
39
51
  $kui-color-background-transparent: transparent !default; // Transparent background color (transparent).
52
+ $kui-color-background-warning: #995c00 !default; // Background color for warning elements (yellow.60).
53
+ $kui-color-background-warning-strong: #804400 !default; // Strong background color for warning elements (yellow.70).
54
+ $kui-color-background-warning-stronger: #662d00 !default; // Stronger background color for warning elements (yellow.80).
55
+ $kui-color-background-warning-strongest: #4d1b00 !default; // Strongest background color for warning elements (yellow.90).
40
56
  $kui-color-background-warning-weak: #ffc400 !default; // Weak background color for warning elements (yellow.40).
57
+ $kui-color-background-warning-weaker: #fff296 !default; // Weaker background color for warning elements (yellow.20).
41
58
  $kui-color-background-warning-weakest: #fffce0 !default; // Weakest background color for warning elements (yellow.10).
42
59
  $kui-color-border: #e0e4ea !default; // Default border color for containers (gray.20).
43
60
  $kui-color-border-danger: #d60027 !default; // Border color for danger actions or messages (red.60).
@@ -50,8 +67,13 @@ $kui-color-border-danger-weakest: #ffe5e5 !default; // Weakest border color for
50
67
  $kui-color-border-decorative-purple: #6f28ff !default; // Border color for decorative purposes (purple.60).
51
68
  $kui-color-border-disabled: #e0e4ea !default; // Border color for disabled elements (gray.20).
52
69
  $kui-color-border-inverse: rgba(255, 255, 255, 0.2) !default; // Inverse border color (rgba(white, 0.2)).
70
+ $kui-color-border-neutral: #6c7489 !default; // Border color for neutral elements (gray.60)
71
+ $kui-color-border-neutral-strong: #52596e !default; // Strong border color for neutral elements (gray.70)
72
+ $kui-color-border-neutral-stronger: #3a3f51 !default; // Stronger border color for neutral elements (gray.80)
73
+ $kui-color-border-neutral-strongest: #232633 !default; // Strongest border color for neutral elements (gray.90)
53
74
  $kui-color-border-neutral-weak: #afb7c5 !default; // Weak border color for neutral elements (gray.40)
54
75
  $kui-color-border-neutral-weaker: #e0e4ea !default; // Weaker border color for neutral elements (gray.20)
76
+ $kui-color-border-neutral-weakest: #f9fafb !default; // Weakest border color for neutral elements (gray.10)
55
77
  $kui-color-border-primary: #0044f4 !default; // Border color for primary actions or messages (blue.60).
56
78
  $kui-color-border-primary-strong: #0030cc !default; // Strong border color for primary actions or messages (blue.70).
57
79
  $kui-color-border-primary-stronger: #002099 !default; // Stronger border color for primary actions or messages (blue.80).
@@ -63,11 +85,23 @@ $kui-color-border-transparent: transparent !default; // Transparent border color
63
85
  $kui-color-text: #000933 !default; // Default text color (blue.100).
64
86
  $kui-color-text-danger: #d60027 !default; // Text color for danger actions or messages (red.60).
65
87
  $kui-color-text-danger-strong: #ad000e !default; // Strong text color for danger actions or messages (red.70).
88
+ $kui-color-text-danger-stronger: #850000 !default; // Stronger text color for danger actions or messages (red.80).
89
+ $kui-color-text-danger-strongest: #5c0000 !default; // Strongest text color for danger actions or messages (red.90).
90
+ $kui-color-text-danger-weak: #ff3954 !default; // Weak text color for danger actions or messages (red.40).
91
+ $kui-color-text-danger-weaker: #ffabab !default; // Weaker text color for danger actions or messages (red.20).
92
+ $kui-color-text-danger-weakest: #ffe5e5 !default; // Weakest text color for danger actions or messages (red.10).
66
93
  $kui-color-text-decorative-aqua: #00abd2 !default; // Text color for decorative purposes (aqua.50).
67
94
  $kui-color-text-decorative-pink: #d60067 !default; // Text color for decorative purposes (pink.60).
68
95
  $kui-color-text-decorative-purple: #6f28ff !default; // Text color for decorative purposes (purple.60).
69
96
  $kui-color-text-decorative-purple-strong: #5e00f5 !default; // Strong text color for decorative purposes (purple.70).
70
97
  $kui-color-text-disabled: #afb7c5 !default; // Text color for disabled elements (gray.40).
98
+ $kui-color-text-info: #0044f4 !default; // Text color for info elements (blue.60).
99
+ $kui-color-text-info-strong: #0030cc !default; // Strong text color for info elements (blue.70).
100
+ $kui-color-text-info-stronger: #002099 !default; // Stronger text color for info elements (blue.80).
101
+ $kui-color-text-info-strongest: #001466 !default; // Strongest text color for info elements (blue.90).
102
+ $kui-color-text-info-weak: #5f9aff !default; // Weak text color for info elements (blue.40).
103
+ $kui-color-text-info-weaker: #bee2ff !default; // Weaker text color for info elements (blue.20).
104
+ $kui-color-text-info-weakest: #eefaff !default; // Weakest text color for info elements (blue.10).
71
105
  $kui-color-text-inverse: #ffffff !default; // Inverse text color (white).
72
106
  $kui-color-text-neutral: #6c7489 !default; // Text color for neutral elements (gray.60).
73
107
  $kui-color-text-neutral-strong: #52596e !default; // Strong text color for neutral elements (gray.70).
@@ -75,15 +109,28 @@ $kui-color-text-neutral-stronger: #3a3f51 !default; // Stronger text color for n
75
109
  $kui-color-text-neutral-strongest: #232633 !default; // Strongest text color for neutral elements (gray.90).
76
110
  $kui-color-text-neutral-weak: #afb7c5 !default; // Weak text color for neutral elements (gray.40).
77
111
  $kui-color-text-neutral-weaker: #e0e4ea !default; // Weaker text color for neutral elements (gray.20).
112
+ $kui-color-text-neutral-weakest: #f9fafb !default; // Weakest text color for neutral elements (gray.10).
78
113
  $kui-color-text-primary: #0044f4 !default; // Text color for primary actions or messages (blue.60).
79
114
  $kui-color-text-primary-strong: #0030cc !default; // Strong text color for primary actions or messages (blue.70).
80
115
  $kui-color-text-primary-stronger: #002099 !default; // Stronger text color for primary actions or messages (blue.80).
81
116
  $kui-color-text-primary-strongest: #001466 !default; // Strongest text color for primary actions or messages (blue.90).
82
117
  $kui-color-text-primary-weak: #5f9aff !default; // Weak text color for primary actions or messages (blue.40).
83
- $kui-color-text-success: #007d60 !default; // Text color for success actions or messages (green.60).
84
- $kui-color-text-success-strong: #005944 !default; // Strong text color for success actions or messages (green.70).
85
- $kui-color-text-warning: #995c00 !default; // Text color for warning actions or messages (yellow.60).
86
- $kui-color-text-warning-strong: #804400 !default; // Text color for warning actions or messages (yellow.70).
118
+ $kui-color-text-primary-weaker: #bee2ff !default; // Weaker text color for primary actions or messages (blue.20).
119
+ $kui-color-text-primary-weakest: #eefaff !default; // Weakest text color for primary actions or messages (blue.10).
120
+ $kui-color-text-success: #007d60 !default; // Text color for success elements (green.60).
121
+ $kui-color-text-success-strong: #005944 !default; // Strong text color for success elements (green.70).
122
+ $kui-color-text-success-stronger: #004737 !default; // Stronger text color for success elements (green.80).
123
+ $kui-color-text-success-strongest: #003629 !default; // Stronger text color for success elements (green.90).
124
+ $kui-color-text-success-weak: #00d6a4 !default; // Weak text color for success elements (green.40).
125
+ $kui-color-text-success-weaker: #b5ffee !default; // Weaker text color for success elements (green.20).
126
+ $kui-color-text-success-weakest: #ecfffb !default; // Weakest text color for success elements (green.10).
127
+ $kui-color-text-warning: #995c00 !default; // Text color for warning elements (yellow.60).
128
+ $kui-color-text-warning-strong: #804400 !default; // Strong text color for warning elements (yellow.70).
129
+ $kui-color-text-warning-stronger: #662d00 !default; // Stronger text color for warning elements (yellow.80).
130
+ $kui-color-text-warning-strongest: #4d1b00 !default; // Strongest text color for warning elements (yellow.90).
131
+ $kui-color-text-warning-weak: #ffc400 !default; // Weak text color for warning elements (yellow.40).
132
+ $kui-color-text-warning-weaker: #fff296 !default; // Weaker text color for warning elements (yellow.20).
133
+ $kui-color-text-warning-weakest: #fffce0 !default; // Weakest text color for warning elements (yellow.10).
87
134
  $kui-animation-duration-20: 0.2s !default; // Default transition timing
88
135
  $kui-border-radius-0: 0px !default; // 0px border radius.
89
136
  $kui-border-radius-10: 2px !default; // 2px border radius.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kong/design-tokens",
3
- "version": "1.17.7-pr.520.0285dd9.0",
3
+ "version": "1.18.0",
4
4
  "description": "Kong UI Design Tokens and style dictionary",
5
5
  "type": "module",
6
6
  "scripts": {