@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.
@@ -42,6 +42,20 @@ $kui-color-background-decorative-purple: #6f28ff;
42
42
  $kui-color-background-decorative-purple-weakest: #f1f0ff;
43
43
  /* Background color for disabled elements (gray.20). */
44
44
  $kui-color-background-disabled: #e0e4ea;
45
+ /* Background color for info elements (blue.60). */
46
+ $kui-color-background-info: #0044f4;
47
+ /* Strong background color for info elements (blue.70). */
48
+ $kui-color-background-info-strong: #0030cc;
49
+ /* Stronger background color for info elements (blue.80). */
50
+ $kui-color-background-info-stronger: #002099;
51
+ /* Strongest background color for info elements (blue.90). */
52
+ $kui-color-background-info-strongest: #001466;
53
+ /* Weak background color for info elements (blue.40). */
54
+ $kui-color-background-info-weak: #5f9aff;
55
+ /* Weaker background color for info elements (blue.20). */
56
+ $kui-color-background-info-weaker: #bee2ff;
57
+ /* Weakest background color for info elements (blue.10). */
58
+ $kui-color-background-info-weakest: #eefaff;
45
59
  /* Inverse background color for containers (blue.100) */
46
60
  $kui-color-background-inverse: #000933;
47
61
  /* Background color for neutral elements (gray.60). */
@@ -74,14 +88,34 @@ $kui-color-background-primary-weak: #5f9aff;
74
88
  $kui-color-background-primary-weaker: #bee2ff;
75
89
  /* Weakest background color for primary actions or messages (blue.10) */
76
90
  $kui-color-background-primary-weakest: #eefaff;
91
+ /* Background color for success elements (green.60). */
92
+ $kui-color-background-success: #007d60;
93
+ /* Strong background color for success elements (green.70). */
94
+ $kui-color-background-success-strong: #005944;
95
+ /* Stronger background color for success elements (green.80). */
96
+ $kui-color-background-success-stronger: #004737;
97
+ /* Strongest background color for success elements (green.90). */
98
+ $kui-color-background-success-strongest: #003629;
77
99
  /* Weak background color for success elements (green.40). */
78
100
  $kui-color-background-success-weak: #00d6a4;
101
+ /* Weaker background color for success elements (green.20). */
102
+ $kui-color-background-success-weaker: #b5ffee;
79
103
  /* Weakest background color for success elements (green.10). */
80
104
  $kui-color-background-success-weakest: #ecfffb;
81
105
  /* Transparent background color (transparent). */
82
106
  $kui-color-background-transparent: transparent;
107
+ /* Background color for warning elements (yellow.60). */
108
+ $kui-color-background-warning: #995c00;
109
+ /* Strong background color for warning elements (yellow.70). */
110
+ $kui-color-background-warning-strong: #804400;
111
+ /* Stronger background color for warning elements (yellow.80). */
112
+ $kui-color-background-warning-stronger: #662d00;
113
+ /* Strongest background color for warning elements (yellow.90). */
114
+ $kui-color-background-warning-strongest: #4d1b00;
83
115
  /* Weak background color for warning elements (yellow.40). */
84
116
  $kui-color-background-warning-weak: #ffc400;
117
+ /* Weaker background color for warning elements (yellow.20). */
118
+ $kui-color-background-warning-weaker: #fff296;
85
119
  /* Weakest background color for warning elements (yellow.10). */
86
120
  $kui-color-background-warning-weakest: #fffce0;
87
121
  /* Default border color for containers (gray.20). */
@@ -106,10 +140,20 @@ $kui-color-border-decorative-purple: #6f28ff;
106
140
  $kui-color-border-disabled: #e0e4ea;
107
141
  /* Inverse border color (rgba(white, 0.2)). */
108
142
  $kui-color-border-inverse: rgba(255, 255, 255, 0.2);
143
+ /* Border color for neutral elements (gray.60) */
144
+ $kui-color-border-neutral: #6c7489;
145
+ /* Strong border color for neutral elements (gray.70) */
146
+ $kui-color-border-neutral-strong: #52596e;
147
+ /* Stronger border color for neutral elements (gray.80) */
148
+ $kui-color-border-neutral-stronger: #3a3f51;
149
+ /* Strongest border color for neutral elements (gray.90) */
150
+ $kui-color-border-neutral-strongest: #232633;
109
151
  /* Weak border color for neutral elements (gray.40) */
110
152
  $kui-color-border-neutral-weak: #afb7c5;
111
153
  /* Weaker border color for neutral elements (gray.20) */
112
154
  $kui-color-border-neutral-weaker: #e0e4ea;
155
+ /* Weakest border color for neutral elements (gray.10) */
156
+ $kui-color-border-neutral-weakest: #f9fafb;
113
157
  /* Border color for primary actions or messages (blue.60). */
114
158
  $kui-color-border-primary: #0044f4;
115
159
  /* Strong border color for primary actions or messages (blue.70). */
@@ -132,6 +176,16 @@ $kui-color-text: #000933;
132
176
  $kui-color-text-danger: #d60027;
133
177
  /* Strong text color for danger actions or messages (red.70). */
134
178
  $kui-color-text-danger-strong: #ad000e;
179
+ /* Stronger text color for danger actions or messages (red.80). */
180
+ $kui-color-text-danger-stronger: #850000;
181
+ /* Strongest text color for danger actions or messages (red.90). */
182
+ $kui-color-text-danger-strongest: #5c0000;
183
+ /* Weak text color for danger actions or messages (red.40). */
184
+ $kui-color-text-danger-weak: #ff3954;
185
+ /* Weaker text color for danger actions or messages (red.20). */
186
+ $kui-color-text-danger-weaker: #ffabab;
187
+ /* Weakest text color for danger actions or messages (red.10). */
188
+ $kui-color-text-danger-weakest: #ffe5e5;
135
189
  /* Text color for decorative purposes (aqua.50). */
136
190
  $kui-color-text-decorative-aqua: #00abd2;
137
191
  /* Text color for decorative purposes (pink.60). */
@@ -142,6 +196,20 @@ $kui-color-text-decorative-purple: #6f28ff;
142
196
  $kui-color-text-decorative-purple-strong: #5e00f5;
143
197
  /* Text color for disabled elements (gray.40). */
144
198
  $kui-color-text-disabled: #afb7c5;
199
+ /* Text color for info elements (blue.60). */
200
+ $kui-color-text-info: #0044f4;
201
+ /* Strong text color for info elements (blue.70). */
202
+ $kui-color-text-info-strong: #0030cc;
203
+ /* Stronger text color for info elements (blue.80). */
204
+ $kui-color-text-info-stronger: #002099;
205
+ /* Strongest text color for info elements (blue.90). */
206
+ $kui-color-text-info-strongest: #001466;
207
+ /* Weak text color for info elements (blue.40). */
208
+ $kui-color-text-info-weak: #5f9aff;
209
+ /* Weaker text color for info elements (blue.20). */
210
+ $kui-color-text-info-weaker: #bee2ff;
211
+ /* Weakest text color for info elements (blue.10). */
212
+ $kui-color-text-info-weakest: #eefaff;
145
213
  /* Inverse text color (white). */
146
214
  $kui-color-text-inverse: #ffffff;
147
215
  /* Text color for neutral elements (gray.60). */
@@ -156,6 +224,8 @@ $kui-color-text-neutral-strongest: #232633;
156
224
  $kui-color-text-neutral-weak: #afb7c5;
157
225
  /* Weaker text color for neutral elements (gray.20). */
158
226
  $kui-color-text-neutral-weaker: #e0e4ea;
227
+ /* Weakest text color for neutral elements (gray.10). */
228
+ $kui-color-text-neutral-weakest: #f9fafb;
159
229
  /* Text color for primary actions or messages (blue.60). */
160
230
  $kui-color-text-primary: #0044f4;
161
231
  /* Strong text color for primary actions or messages (blue.70). */
@@ -166,14 +236,38 @@ $kui-color-text-primary-stronger: #002099;
166
236
  $kui-color-text-primary-strongest: #001466;
167
237
  /* Weak text color for primary actions or messages (blue.40). */
168
238
  $kui-color-text-primary-weak: #5f9aff;
169
- /* Text color for success actions or messages (green.60). */
239
+ /* Weaker text color for primary actions or messages (blue.20). */
240
+ $kui-color-text-primary-weaker: #bee2ff;
241
+ /* Weakest text color for primary actions or messages (blue.10). */
242
+ $kui-color-text-primary-weakest: #eefaff;
243
+ /* Text color for success elements (green.60). */
170
244
  $kui-color-text-success: #007d60;
171
- /* Strong text color for success actions or messages (green.70). */
245
+ /* Strong text color for success elements (green.70). */
172
246
  $kui-color-text-success-strong: #005944;
173
- /* Text color for warning actions or messages (yellow.60). */
247
+ /* Stronger text color for success elements (green.80). */
248
+ $kui-color-text-success-stronger: #004737;
249
+ /* Stronger text color for success elements (green.90). */
250
+ $kui-color-text-success-strongest: #003629;
251
+ /* Weak text color for success elements (green.40). */
252
+ $kui-color-text-success-weak: #00d6a4;
253
+ /* Weaker text color for success elements (green.20). */
254
+ $kui-color-text-success-weaker: #b5ffee;
255
+ /* Weakest text color for success elements (green.10). */
256
+ $kui-color-text-success-weakest: #ecfffb;
257
+ /* Text color for warning elements (yellow.60). */
174
258
  $kui-color-text-warning: #995c00;
175
- /* Text color for warning actions or messages (yellow.70). */
259
+ /* Strong text color for warning elements (yellow.70). */
176
260
  $kui-color-text-warning-strong: #804400;
261
+ /* Stronger text color for warning elements (yellow.80). */
262
+ $kui-color-text-warning-stronger: #662d00;
263
+ /* Strongest text color for warning elements (yellow.90). */
264
+ $kui-color-text-warning-strongest: #4d1b00;
265
+ /* Weak text color for warning elements (yellow.40). */
266
+ $kui-color-text-warning-weak: #ffc400;
267
+ /* Weaker text color for warning elements (yellow.20). */
268
+ $kui-color-text-warning-weaker: #fff296;
269
+ /* Weakest text color for warning elements (yellow.10). */
270
+ $kui-color-text-warning-weakest: #fffce0;
177
271
  /* Default transition timing */
178
272
  $kui-animation-duration-20: 0.2s;
179
273
  /* 0px border radius. */
@@ -604,6 +698,20 @@ $tokens-map: (
604
698
  'kui-color-background-decorative-purple-weakest': #f1f0ff;
605
699
  /* Background color for disabled elements (gray.20). */
606
700
  'kui-color-background-disabled': #e0e4ea;
701
+ /* Background color for info elements (blue.60). */
702
+ 'kui-color-background-info': #0044f4;
703
+ /* Strong background color for info elements (blue.70). */
704
+ 'kui-color-background-info-strong': #0030cc;
705
+ /* Stronger background color for info elements (blue.80). */
706
+ 'kui-color-background-info-stronger': #002099;
707
+ /* Strongest background color for info elements (blue.90). */
708
+ 'kui-color-background-info-strongest': #001466;
709
+ /* Weak background color for info elements (blue.40). */
710
+ 'kui-color-background-info-weak': #5f9aff;
711
+ /* Weaker background color for info elements (blue.20). */
712
+ 'kui-color-background-info-weaker': #bee2ff;
713
+ /* Weakest background color for info elements (blue.10). */
714
+ 'kui-color-background-info-weakest': #eefaff;
607
715
  /* Inverse background color for containers (blue.100) */
608
716
  'kui-color-background-inverse': #000933;
609
717
  /* Background color for neutral elements (gray.60). */
@@ -636,14 +744,34 @@ $tokens-map: (
636
744
  'kui-color-background-primary-weaker': #bee2ff;
637
745
  /* Weakest background color for primary actions or messages (blue.10) */
638
746
  'kui-color-background-primary-weakest': #eefaff;
747
+ /* Background color for success elements (green.60). */
748
+ 'kui-color-background-success': #007d60;
749
+ /* Strong background color for success elements (green.70). */
750
+ 'kui-color-background-success-strong': #005944;
751
+ /* Stronger background color for success elements (green.80). */
752
+ 'kui-color-background-success-stronger': #004737;
753
+ /* Strongest background color for success elements (green.90). */
754
+ 'kui-color-background-success-strongest': #003629;
639
755
  /* Weak background color for success elements (green.40). */
640
756
  'kui-color-background-success-weak': #00d6a4;
757
+ /* Weaker background color for success elements (green.20). */
758
+ 'kui-color-background-success-weaker': #b5ffee;
641
759
  /* Weakest background color for success elements (green.10). */
642
760
  'kui-color-background-success-weakest': #ecfffb;
643
761
  /* Transparent background color (transparent). */
644
762
  'kui-color-background-transparent': transparent;
763
+ /* Background color for warning elements (yellow.60). */
764
+ 'kui-color-background-warning': #995c00;
765
+ /* Strong background color for warning elements (yellow.70). */
766
+ 'kui-color-background-warning-strong': #804400;
767
+ /* Stronger background color for warning elements (yellow.80). */
768
+ 'kui-color-background-warning-stronger': #662d00;
769
+ /* Strongest background color for warning elements (yellow.90). */
770
+ 'kui-color-background-warning-strongest': #4d1b00;
645
771
  /* Weak background color for warning elements (yellow.40). */
646
772
  'kui-color-background-warning-weak': #ffc400;
773
+ /* Weaker background color for warning elements (yellow.20). */
774
+ 'kui-color-background-warning-weaker': #fff296;
647
775
  /* Weakest background color for warning elements (yellow.10). */
648
776
  'kui-color-background-warning-weakest': #fffce0;
649
777
  /* Default border color for containers (gray.20). */
@@ -668,10 +796,20 @@ $tokens-map: (
668
796
  'kui-color-border-disabled': #e0e4ea;
669
797
  /* Inverse border color (rgba(white, 0.2)). */
670
798
  'kui-color-border-inverse': rgba(255, 255, 255, 0.2);
799
+ /* Border color for neutral elements (gray.60) */
800
+ 'kui-color-border-neutral': #6c7489;
801
+ /* Strong border color for neutral elements (gray.70) */
802
+ 'kui-color-border-neutral-strong': #52596e;
803
+ /* Stronger border color for neutral elements (gray.80) */
804
+ 'kui-color-border-neutral-stronger': #3a3f51;
805
+ /* Strongest border color for neutral elements (gray.90) */
806
+ 'kui-color-border-neutral-strongest': #232633;
671
807
  /* Weak border color for neutral elements (gray.40) */
672
808
  'kui-color-border-neutral-weak': #afb7c5;
673
809
  /* Weaker border color for neutral elements (gray.20) */
674
810
  'kui-color-border-neutral-weaker': #e0e4ea;
811
+ /* Weakest border color for neutral elements (gray.10) */
812
+ 'kui-color-border-neutral-weakest': #f9fafb;
675
813
  /* Border color for primary actions or messages (blue.60). */
676
814
  'kui-color-border-primary': #0044f4;
677
815
  /* Strong border color for primary actions or messages (blue.70). */
@@ -694,6 +832,16 @@ $tokens-map: (
694
832
  'kui-color-text-danger': #d60027;
695
833
  /* Strong text color for danger actions or messages (red.70). */
696
834
  'kui-color-text-danger-strong': #ad000e;
835
+ /* Stronger text color for danger actions or messages (red.80). */
836
+ 'kui-color-text-danger-stronger': #850000;
837
+ /* Strongest text color for danger actions or messages (red.90). */
838
+ 'kui-color-text-danger-strongest': #5c0000;
839
+ /* Weak text color for danger actions or messages (red.40). */
840
+ 'kui-color-text-danger-weak': #ff3954;
841
+ /* Weaker text color for danger actions or messages (red.20). */
842
+ 'kui-color-text-danger-weaker': #ffabab;
843
+ /* Weakest text color for danger actions or messages (red.10). */
844
+ 'kui-color-text-danger-weakest': #ffe5e5;
697
845
  /* Text color for decorative purposes (aqua.50). */
698
846
  'kui-color-text-decorative-aqua': #00abd2;
699
847
  /* Text color for decorative purposes (pink.60). */
@@ -704,6 +852,20 @@ $tokens-map: (
704
852
  'kui-color-text-decorative-purple-strong': #5e00f5;
705
853
  /* Text color for disabled elements (gray.40). */
706
854
  'kui-color-text-disabled': #afb7c5;
855
+ /* Text color for info elements (blue.60). */
856
+ 'kui-color-text-info': #0044f4;
857
+ /* Strong text color for info elements (blue.70). */
858
+ 'kui-color-text-info-strong': #0030cc;
859
+ /* Stronger text color for info elements (blue.80). */
860
+ 'kui-color-text-info-stronger': #002099;
861
+ /* Strongest text color for info elements (blue.90). */
862
+ 'kui-color-text-info-strongest': #001466;
863
+ /* Weak text color for info elements (blue.40). */
864
+ 'kui-color-text-info-weak': #5f9aff;
865
+ /* Weaker text color for info elements (blue.20). */
866
+ 'kui-color-text-info-weaker': #bee2ff;
867
+ /* Weakest text color for info elements (blue.10). */
868
+ 'kui-color-text-info-weakest': #eefaff;
707
869
  /* Inverse text color (white). */
708
870
  'kui-color-text-inverse': #ffffff;
709
871
  /* Text color for neutral elements (gray.60). */
@@ -718,6 +880,8 @@ $tokens-map: (
718
880
  'kui-color-text-neutral-weak': #afb7c5;
719
881
  /* Weaker text color for neutral elements (gray.20). */
720
882
  'kui-color-text-neutral-weaker': #e0e4ea;
883
+ /* Weakest text color for neutral elements (gray.10). */
884
+ 'kui-color-text-neutral-weakest': #f9fafb;
721
885
  /* Text color for primary actions or messages (blue.60). */
722
886
  'kui-color-text-primary': #0044f4;
723
887
  /* Strong text color for primary actions or messages (blue.70). */
@@ -728,14 +892,38 @@ $tokens-map: (
728
892
  'kui-color-text-primary-strongest': #001466;
729
893
  /* Weak text color for primary actions or messages (blue.40). */
730
894
  'kui-color-text-primary-weak': #5f9aff;
731
- /* Text color for success actions or messages (green.60). */
895
+ /* Weaker text color for primary actions or messages (blue.20). */
896
+ 'kui-color-text-primary-weaker': #bee2ff;
897
+ /* Weakest text color for primary actions or messages (blue.10). */
898
+ 'kui-color-text-primary-weakest': #eefaff;
899
+ /* Text color for success elements (green.60). */
732
900
  'kui-color-text-success': #007d60;
733
- /* Strong text color for success actions or messages (green.70). */
901
+ /* Strong text color for success elements (green.70). */
734
902
  'kui-color-text-success-strong': #005944;
735
- /* Text color for warning actions or messages (yellow.60). */
903
+ /* Stronger text color for success elements (green.80). */
904
+ 'kui-color-text-success-stronger': #004737;
905
+ /* Stronger text color for success elements (green.90). */
906
+ 'kui-color-text-success-strongest': #003629;
907
+ /* Weak text color for success elements (green.40). */
908
+ 'kui-color-text-success-weak': #00d6a4;
909
+ /* Weaker text color for success elements (green.20). */
910
+ 'kui-color-text-success-weaker': #b5ffee;
911
+ /* Weakest text color for success elements (green.10). */
912
+ 'kui-color-text-success-weakest': #ecfffb;
913
+ /* Text color for warning elements (yellow.60). */
736
914
  'kui-color-text-warning': #995c00;
737
- /* Text color for warning actions or messages (yellow.70). */
915
+ /* Strong text color for warning elements (yellow.70). */
738
916
  'kui-color-text-warning-strong': #804400;
917
+ /* Stronger text color for warning elements (yellow.80). */
918
+ 'kui-color-text-warning-stronger': #662d00;
919
+ /* Strongest text color for warning elements (yellow.90). */
920
+ 'kui-color-text-warning-strongest': #4d1b00;
921
+ /* Weak text color for warning elements (yellow.40). */
922
+ 'kui-color-text-warning-weak': #ffc400;
923
+ /* Weaker text color for warning elements (yellow.20). */
924
+ 'kui-color-text-warning-weaker': #fff296;
925
+ /* Weakest text color for warning elements (yellow.10). */
926
+ 'kui-color-text-warning-weakest': #fffce0;
739
927
  /* Default transition timing */
740
928
  'kui-animation-duration-20': 0.2s;
741
929
  /* 0px border radius. */
@@ -1168,6 +1356,20 @@ $tokens-map: (
1168
1356
  @kui-color-background-decorative-purple-weakest: #f1f0ff;
1169
1357
  /* Background color for disabled elements (gray.20). */
1170
1358
  @kui-color-background-disabled: #e0e4ea;
1359
+ /* Background color for info elements (blue.60). */
1360
+ @kui-color-background-info: #0044f4;
1361
+ /* Strong background color for info elements (blue.70). */
1362
+ @kui-color-background-info-strong: #0030cc;
1363
+ /* Stronger background color for info elements (blue.80). */
1364
+ @kui-color-background-info-stronger: #002099;
1365
+ /* Strongest background color for info elements (blue.90). */
1366
+ @kui-color-background-info-strongest: #001466;
1367
+ /* Weak background color for info elements (blue.40). */
1368
+ @kui-color-background-info-weak: #5f9aff;
1369
+ /* Weaker background color for info elements (blue.20). */
1370
+ @kui-color-background-info-weaker: #bee2ff;
1371
+ /* Weakest background color for info elements (blue.10). */
1372
+ @kui-color-background-info-weakest: #eefaff;
1171
1373
  /* Inverse background color for containers (blue.100) */
1172
1374
  @kui-color-background-inverse: #000933;
1173
1375
  /* Background color for neutral elements (gray.60). */
@@ -1200,14 +1402,34 @@ $tokens-map: (
1200
1402
  @kui-color-background-primary-weaker: #bee2ff;
1201
1403
  /* Weakest background color for primary actions or messages (blue.10) */
1202
1404
  @kui-color-background-primary-weakest: #eefaff;
1405
+ /* Background color for success elements (green.60). */
1406
+ @kui-color-background-success: #007d60;
1407
+ /* Strong background color for success elements (green.70). */
1408
+ @kui-color-background-success-strong: #005944;
1409
+ /* Stronger background color for success elements (green.80). */
1410
+ @kui-color-background-success-stronger: #004737;
1411
+ /* Strongest background color for success elements (green.90). */
1412
+ @kui-color-background-success-strongest: #003629;
1203
1413
  /* Weak background color for success elements (green.40). */
1204
1414
  @kui-color-background-success-weak: #00d6a4;
1415
+ /* Weaker background color for success elements (green.20). */
1416
+ @kui-color-background-success-weaker: #b5ffee;
1205
1417
  /* Weakest background color for success elements (green.10). */
1206
1418
  @kui-color-background-success-weakest: #ecfffb;
1207
1419
  /* Transparent background color (transparent). */
1208
1420
  @kui-color-background-transparent: transparent;
1421
+ /* Background color for warning elements (yellow.60). */
1422
+ @kui-color-background-warning: #995c00;
1423
+ /* Strong background color for warning elements (yellow.70). */
1424
+ @kui-color-background-warning-strong: #804400;
1425
+ /* Stronger background color for warning elements (yellow.80). */
1426
+ @kui-color-background-warning-stronger: #662d00;
1427
+ /* Strongest background color for warning elements (yellow.90). */
1428
+ @kui-color-background-warning-strongest: #4d1b00;
1209
1429
  /* Weak background color for warning elements (yellow.40). */
1210
1430
  @kui-color-background-warning-weak: #ffc400;
1431
+ /* Weaker background color for warning elements (yellow.20). */
1432
+ @kui-color-background-warning-weaker: #fff296;
1211
1433
  /* Weakest background color for warning elements (yellow.10). */
1212
1434
  @kui-color-background-warning-weakest: #fffce0;
1213
1435
  /* Default border color for containers (gray.20). */
@@ -1232,10 +1454,20 @@ $tokens-map: (
1232
1454
  @kui-color-border-disabled: #e0e4ea;
1233
1455
  /* Inverse border color (rgba(white, 0.2)). */
1234
1456
  @kui-color-border-inverse: rgba(255, 255, 255, 0.2);
1457
+ /* Border color for neutral elements (gray.60) */
1458
+ @kui-color-border-neutral: #6c7489;
1459
+ /* Strong border color for neutral elements (gray.70) */
1460
+ @kui-color-border-neutral-strong: #52596e;
1461
+ /* Stronger border color for neutral elements (gray.80) */
1462
+ @kui-color-border-neutral-stronger: #3a3f51;
1463
+ /* Strongest border color for neutral elements (gray.90) */
1464
+ @kui-color-border-neutral-strongest: #232633;
1235
1465
  /* Weak border color for neutral elements (gray.40) */
1236
1466
  @kui-color-border-neutral-weak: #afb7c5;
1237
1467
  /* Weaker border color for neutral elements (gray.20) */
1238
1468
  @kui-color-border-neutral-weaker: #e0e4ea;
1469
+ /* Weakest border color for neutral elements (gray.10) */
1470
+ @kui-color-border-neutral-weakest: #f9fafb;
1239
1471
  /* Border color for primary actions or messages (blue.60). */
1240
1472
  @kui-color-border-primary: #0044f4;
1241
1473
  /* Strong border color for primary actions or messages (blue.70). */
@@ -1258,6 +1490,16 @@ $tokens-map: (
1258
1490
  @kui-color-text-danger: #d60027;
1259
1491
  /* Strong text color for danger actions or messages (red.70). */
1260
1492
  @kui-color-text-danger-strong: #ad000e;
1493
+ /* Stronger text color for danger actions or messages (red.80). */
1494
+ @kui-color-text-danger-stronger: #850000;
1495
+ /* Strongest text color for danger actions or messages (red.90). */
1496
+ @kui-color-text-danger-strongest: #5c0000;
1497
+ /* Weak text color for danger actions or messages (red.40). */
1498
+ @kui-color-text-danger-weak: #ff3954;
1499
+ /* Weaker text color for danger actions or messages (red.20). */
1500
+ @kui-color-text-danger-weaker: #ffabab;
1501
+ /* Weakest text color for danger actions or messages (red.10). */
1502
+ @kui-color-text-danger-weakest: #ffe5e5;
1261
1503
  /* Text color for decorative purposes (aqua.50). */
1262
1504
  @kui-color-text-decorative-aqua: #00abd2;
1263
1505
  /* Text color for decorative purposes (pink.60). */
@@ -1268,6 +1510,20 @@ $tokens-map: (
1268
1510
  @kui-color-text-decorative-purple-strong: #5e00f5;
1269
1511
  /* Text color for disabled elements (gray.40). */
1270
1512
  @kui-color-text-disabled: #afb7c5;
1513
+ /* Text color for info elements (blue.60). */
1514
+ @kui-color-text-info: #0044f4;
1515
+ /* Strong text color for info elements (blue.70). */
1516
+ @kui-color-text-info-strong: #0030cc;
1517
+ /* Stronger text color for info elements (blue.80). */
1518
+ @kui-color-text-info-stronger: #002099;
1519
+ /* Strongest text color for info elements (blue.90). */
1520
+ @kui-color-text-info-strongest: #001466;
1521
+ /* Weak text color for info elements (blue.40). */
1522
+ @kui-color-text-info-weak: #5f9aff;
1523
+ /* Weaker text color for info elements (blue.20). */
1524
+ @kui-color-text-info-weaker: #bee2ff;
1525
+ /* Weakest text color for info elements (blue.10). */
1526
+ @kui-color-text-info-weakest: #eefaff;
1271
1527
  /* Inverse text color (white). */
1272
1528
  @kui-color-text-inverse: #ffffff;
1273
1529
  /* Text color for neutral elements (gray.60). */
@@ -1282,6 +1538,8 @@ $tokens-map: (
1282
1538
  @kui-color-text-neutral-weak: #afb7c5;
1283
1539
  /* Weaker text color for neutral elements (gray.20). */
1284
1540
  @kui-color-text-neutral-weaker: #e0e4ea;
1541
+ /* Weakest text color for neutral elements (gray.10). */
1542
+ @kui-color-text-neutral-weakest: #f9fafb;
1285
1543
  /* Text color for primary actions or messages (blue.60). */
1286
1544
  @kui-color-text-primary: #0044f4;
1287
1545
  /* Strong text color for primary actions or messages (blue.70). */
@@ -1292,14 +1550,38 @@ $tokens-map: (
1292
1550
  @kui-color-text-primary-strongest: #001466;
1293
1551
  /* Weak text color for primary actions or messages (blue.40). */
1294
1552
  @kui-color-text-primary-weak: #5f9aff;
1295
- /* Text color for success actions or messages (green.60). */
1553
+ /* Weaker text color for primary actions or messages (blue.20). */
1554
+ @kui-color-text-primary-weaker: #bee2ff;
1555
+ /* Weakest text color for primary actions or messages (blue.10). */
1556
+ @kui-color-text-primary-weakest: #eefaff;
1557
+ /* Text color for success elements (green.60). */
1296
1558
  @kui-color-text-success: #007d60;
1297
- /* Strong text color for success actions or messages (green.70). */
1559
+ /* Strong text color for success elements (green.70). */
1298
1560
  @kui-color-text-success-strong: #005944;
1299
- /* Text color for warning actions or messages (yellow.60). */
1561
+ /* Stronger text color for success elements (green.80). */
1562
+ @kui-color-text-success-stronger: #004737;
1563
+ /* Stronger text color for success elements (green.90). */
1564
+ @kui-color-text-success-strongest: #003629;
1565
+ /* Weak text color for success elements (green.40). */
1566
+ @kui-color-text-success-weak: #00d6a4;
1567
+ /* Weaker text color for success elements (green.20). */
1568
+ @kui-color-text-success-weaker: #b5ffee;
1569
+ /* Weakest text color for success elements (green.10). */
1570
+ @kui-color-text-success-weakest: #ecfffb;
1571
+ /* Text color for warning elements (yellow.60). */
1300
1572
  @kui-color-text-warning: #995c00;
1301
- /* Text color for warning actions or messages (yellow.70). */
1573
+ /* Strong text color for warning elements (yellow.70). */
1302
1574
  @kui-color-text-warning-strong: #804400;
1575
+ /* Stronger text color for warning elements (yellow.80). */
1576
+ @kui-color-text-warning-stronger: #662d00;
1577
+ /* Strongest text color for warning elements (yellow.90). */
1578
+ @kui-color-text-warning-strongest: #4d1b00;
1579
+ /* Weak text color for warning elements (yellow.40). */
1580
+ @kui-color-text-warning-weak: #ffc400;
1581
+ /* Weaker text color for warning elements (yellow.20). */
1582
+ @kui-color-text-warning-weaker: #fff296;
1583
+ /* Weakest text color for warning elements (yellow.10). */
1584
+ @kui-color-text-warning-weakest: #fffce0;
1303
1585
  /* Default transition timing */
1304
1586
  @kui-animation-duration-20: 0.2s;
1305
1587
  /* 0px border radius. */
@@ -1733,6 +2015,20 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1733
2015
  --kui-color-background-decorative-purple-weakest: #f1f0ff;
1734
2016
  /* Background color for disabled elements (gray.20). */
1735
2017
  --kui-color-background-disabled: #e0e4ea;
2018
+ /* Background color for info elements (blue.60). */
2019
+ --kui-color-background-info: #0044f4;
2020
+ /* Strong background color for info elements (blue.70). */
2021
+ --kui-color-background-info-strong: #0030cc;
2022
+ /* Stronger background color for info elements (blue.80). */
2023
+ --kui-color-background-info-stronger: #002099;
2024
+ /* Strongest background color for info elements (blue.90). */
2025
+ --kui-color-background-info-strongest: #001466;
2026
+ /* Weak background color for info elements (blue.40). */
2027
+ --kui-color-background-info-weak: #5f9aff;
2028
+ /* Weaker background color for info elements (blue.20). */
2029
+ --kui-color-background-info-weaker: #bee2ff;
2030
+ /* Weakest background color for info elements (blue.10). */
2031
+ --kui-color-background-info-weakest: #eefaff;
1736
2032
  /* Inverse background color for containers (blue.100) */
1737
2033
  --kui-color-background-inverse: #000933;
1738
2034
  /* Background color for neutral elements (gray.60). */
@@ -1765,14 +2061,34 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1765
2061
  --kui-color-background-primary-weaker: #bee2ff;
1766
2062
  /* Weakest background color for primary actions or messages (blue.10) */
1767
2063
  --kui-color-background-primary-weakest: #eefaff;
2064
+ /* Background color for success elements (green.60). */
2065
+ --kui-color-background-success: #007d60;
2066
+ /* Strong background color for success elements (green.70). */
2067
+ --kui-color-background-success-strong: #005944;
2068
+ /* Stronger background color for success elements (green.80). */
2069
+ --kui-color-background-success-stronger: #004737;
2070
+ /* Strongest background color for success elements (green.90). */
2071
+ --kui-color-background-success-strongest: #003629;
1768
2072
  /* Weak background color for success elements (green.40). */
1769
2073
  --kui-color-background-success-weak: #00d6a4;
2074
+ /* Weaker background color for success elements (green.20). */
2075
+ --kui-color-background-success-weaker: #b5ffee;
1770
2076
  /* Weakest background color for success elements (green.10). */
1771
2077
  --kui-color-background-success-weakest: #ecfffb;
1772
2078
  /* Transparent background color (transparent). */
1773
2079
  --kui-color-background-transparent: transparent;
2080
+ /* Background color for warning elements (yellow.60). */
2081
+ --kui-color-background-warning: #995c00;
2082
+ /* Strong background color for warning elements (yellow.70). */
2083
+ --kui-color-background-warning-strong: #804400;
2084
+ /* Stronger background color for warning elements (yellow.80). */
2085
+ --kui-color-background-warning-stronger: #662d00;
2086
+ /* Strongest background color for warning elements (yellow.90). */
2087
+ --kui-color-background-warning-strongest: #4d1b00;
1774
2088
  /* Weak background color for warning elements (yellow.40). */
1775
2089
  --kui-color-background-warning-weak: #ffc400;
2090
+ /* Weaker background color for warning elements (yellow.20). */
2091
+ --kui-color-background-warning-weaker: #fff296;
1776
2092
  /* Weakest background color for warning elements (yellow.10). */
1777
2093
  --kui-color-background-warning-weakest: #fffce0;
1778
2094
  /* Default border color for containers (gray.20). */
@@ -1797,10 +2113,20 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1797
2113
  --kui-color-border-disabled: #e0e4ea;
1798
2114
  /* Inverse border color (rgba(white, 0.2)). */
1799
2115
  --kui-color-border-inverse: rgba(255, 255, 255, 0.2);
2116
+ /* Border color for neutral elements (gray.60) */
2117
+ --kui-color-border-neutral: #6c7489;
2118
+ /* Strong border color for neutral elements (gray.70) */
2119
+ --kui-color-border-neutral-strong: #52596e;
2120
+ /* Stronger border color for neutral elements (gray.80) */
2121
+ --kui-color-border-neutral-stronger: #3a3f51;
2122
+ /* Strongest border color for neutral elements (gray.90) */
2123
+ --kui-color-border-neutral-strongest: #232633;
1800
2124
  /* Weak border color for neutral elements (gray.40) */
1801
2125
  --kui-color-border-neutral-weak: #afb7c5;
1802
2126
  /* Weaker border color for neutral elements (gray.20) */
1803
2127
  --kui-color-border-neutral-weaker: #e0e4ea;
2128
+ /* Weakest border color for neutral elements (gray.10) */
2129
+ --kui-color-border-neutral-weakest: #f9fafb;
1804
2130
  /* Border color for primary actions or messages (blue.60). */
1805
2131
  --kui-color-border-primary: #0044f4;
1806
2132
  /* Strong border color for primary actions or messages (blue.70). */
@@ -1823,6 +2149,16 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1823
2149
  --kui-color-text-danger: #d60027;
1824
2150
  /* Strong text color for danger actions or messages (red.70). */
1825
2151
  --kui-color-text-danger-strong: #ad000e;
2152
+ /* Stronger text color for danger actions or messages (red.80). */
2153
+ --kui-color-text-danger-stronger: #850000;
2154
+ /* Strongest text color for danger actions or messages (red.90). */
2155
+ --kui-color-text-danger-strongest: #5c0000;
2156
+ /* Weak text color for danger actions or messages (red.40). */
2157
+ --kui-color-text-danger-weak: #ff3954;
2158
+ /* Weaker text color for danger actions or messages (red.20). */
2159
+ --kui-color-text-danger-weaker: #ffabab;
2160
+ /* Weakest text color for danger actions or messages (red.10). */
2161
+ --kui-color-text-danger-weakest: #ffe5e5;
1826
2162
  /* Text color for decorative purposes (aqua.50). */
1827
2163
  --kui-color-text-decorative-aqua: #00abd2;
1828
2164
  /* Text color for decorative purposes (pink.60). */
@@ -1833,6 +2169,20 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1833
2169
  --kui-color-text-decorative-purple-strong: #5e00f5;
1834
2170
  /* Text color for disabled elements (gray.40). */
1835
2171
  --kui-color-text-disabled: #afb7c5;
2172
+ /* Text color for info elements (blue.60). */
2173
+ --kui-color-text-info: #0044f4;
2174
+ /* Strong text color for info elements (blue.70). */
2175
+ --kui-color-text-info-strong: #0030cc;
2176
+ /* Stronger text color for info elements (blue.80). */
2177
+ --kui-color-text-info-stronger: #002099;
2178
+ /* Strongest text color for info elements (blue.90). */
2179
+ --kui-color-text-info-strongest: #001466;
2180
+ /* Weak text color for info elements (blue.40). */
2181
+ --kui-color-text-info-weak: #5f9aff;
2182
+ /* Weaker text color for info elements (blue.20). */
2183
+ --kui-color-text-info-weaker: #bee2ff;
2184
+ /* Weakest text color for info elements (blue.10). */
2185
+ --kui-color-text-info-weakest: #eefaff;
1836
2186
  /* Inverse text color (white). */
1837
2187
  --kui-color-text-inverse: #ffffff;
1838
2188
  /* Text color for neutral elements (gray.60). */
@@ -1847,6 +2197,8 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1847
2197
  --kui-color-text-neutral-weak: #afb7c5;
1848
2198
  /* Weaker text color for neutral elements (gray.20). */
1849
2199
  --kui-color-text-neutral-weaker: #e0e4ea;
2200
+ /* Weakest text color for neutral elements (gray.10). */
2201
+ --kui-color-text-neutral-weakest: #f9fafb;
1850
2202
  /* Text color for primary actions or messages (blue.60). */
1851
2203
  --kui-color-text-primary: #0044f4;
1852
2204
  /* Strong text color for primary actions or messages (blue.70). */
@@ -1857,14 +2209,38 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1857
2209
  --kui-color-text-primary-strongest: #001466;
1858
2210
  /* Weak text color for primary actions or messages (blue.40). */
1859
2211
  --kui-color-text-primary-weak: #5f9aff;
1860
- /* Text color for success actions or messages (green.60). */
2212
+ /* Weaker text color for primary actions or messages (blue.20). */
2213
+ --kui-color-text-primary-weaker: #bee2ff;
2214
+ /* Weakest text color for primary actions or messages (blue.10). */
2215
+ --kui-color-text-primary-weakest: #eefaff;
2216
+ /* Text color for success elements (green.60). */
1861
2217
  --kui-color-text-success: #007d60;
1862
- /* Strong text color for success actions or messages (green.70). */
2218
+ /* Strong text color for success elements (green.70). */
1863
2219
  --kui-color-text-success-strong: #005944;
1864
- /* Text color for warning actions or messages (yellow.60). */
2220
+ /* Stronger text color for success elements (green.80). */
2221
+ --kui-color-text-success-stronger: #004737;
2222
+ /* Stronger text color for success elements (green.90). */
2223
+ --kui-color-text-success-strongest: #003629;
2224
+ /* Weak text color for success elements (green.40). */
2225
+ --kui-color-text-success-weak: #00d6a4;
2226
+ /* Weaker text color for success elements (green.20). */
2227
+ --kui-color-text-success-weaker: #b5ffee;
2228
+ /* Weakest text color for success elements (green.10). */
2229
+ --kui-color-text-success-weakest: #ecfffb;
2230
+ /* Text color for warning elements (yellow.60). */
1865
2231
  --kui-color-text-warning: #995c00;
1866
- /* Text color for warning actions or messages (yellow.70). */
2232
+ /* Strong text color for warning elements (yellow.70). */
1867
2233
  --kui-color-text-warning-strong: #804400;
2234
+ /* Stronger text color for warning elements (yellow.80). */
2235
+ --kui-color-text-warning-stronger: #662d00;
2236
+ /* Strongest text color for warning elements (yellow.90). */
2237
+ --kui-color-text-warning-strongest: #4d1b00;
2238
+ /* Weak text color for warning elements (yellow.40). */
2239
+ --kui-color-text-warning-weak: #ffc400;
2240
+ /* Weaker text color for warning elements (yellow.20). */
2241
+ --kui-color-text-warning-weaker: #fff296;
2242
+ /* Weakest text color for warning elements (yellow.10). */
2243
+ --kui-color-text-warning-weakest: #fffce0;
1868
2244
  /* Default transition timing */
1869
2245
  --kui-animation-duration-20: 0.2s;
1870
2246
  /* 0px border radius. */
@@ -2296,6 +2672,20 @@ export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE = "#6f28ff";
2296
2672
  export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST = "#f1f0ff";
2297
2673
  /* Background color for disabled elements (gray.20). */
2298
2674
  export const KUI_COLOR_BACKGROUND_DISABLED = "#e0e4ea";
2675
+ /* Background color for info elements (blue.60). */
2676
+ export const KUI_COLOR_BACKGROUND_INFO = "#0044f4";
2677
+ /* Strong background color for info elements (blue.70). */
2678
+ export const KUI_COLOR_BACKGROUND_INFO_STRONG = "#0030cc";
2679
+ /* Stronger background color for info elements (blue.80). */
2680
+ export const KUI_COLOR_BACKGROUND_INFO_STRONGER = "#002099";
2681
+ /* Strongest background color for info elements (blue.90). */
2682
+ export const KUI_COLOR_BACKGROUND_INFO_STRONGEST = "#001466";
2683
+ /* Weak background color for info elements (blue.40). */
2684
+ export const KUI_COLOR_BACKGROUND_INFO_WEAK = "#5f9aff";
2685
+ /* Weaker background color for info elements (blue.20). */
2686
+ export const KUI_COLOR_BACKGROUND_INFO_WEAKER = "#bee2ff";
2687
+ /* Weakest background color for info elements (blue.10). */
2688
+ export const KUI_COLOR_BACKGROUND_INFO_WEAKEST = "#eefaff";
2299
2689
  /* Inverse background color for containers (blue.100) */
2300
2690
  export const KUI_COLOR_BACKGROUND_INVERSE = "#000933";
2301
2691
  /* Background color for neutral elements (gray.60). */
@@ -2328,14 +2718,34 @@ export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK = "#5f9aff";
2328
2718
  export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER = "#bee2ff";
2329
2719
  /* Weakest background color for primary actions or messages (blue.10) */
2330
2720
  export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST = "#eefaff";
2721
+ /* Background color for success elements (green.60). */
2722
+ export const KUI_COLOR_BACKGROUND_SUCCESS = "#007d60";
2723
+ /* Strong background color for success elements (green.70). */
2724
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONG = "#005944";
2725
+ /* Stronger background color for success elements (green.80). */
2726
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONGER = "#004737";
2727
+ /* Strongest background color for success elements (green.90). */
2728
+ export const KUI_COLOR_BACKGROUND_SUCCESS_STRONGEST = "#003629";
2331
2729
  /* Weak background color for success elements (green.40). */
2332
2730
  export const KUI_COLOR_BACKGROUND_SUCCESS_WEAK = "#00d6a4";
2731
+ /* Weaker background color for success elements (green.20). */
2732
+ export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKER = "#b5ffee";
2333
2733
  /* Weakest background color for success elements (green.10). */
2334
2734
  export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST = "#ecfffb";
2335
2735
  /* Transparent background color (transparent). */
2336
2736
  export const KUI_COLOR_BACKGROUND_TRANSPARENT = "transparent";
2737
+ /* Background color for warning elements (yellow.60). */
2738
+ export const KUI_COLOR_BACKGROUND_WARNING = "#995c00";
2739
+ /* Strong background color for warning elements (yellow.70). */
2740
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONG = "#804400";
2741
+ /* Stronger background color for warning elements (yellow.80). */
2742
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONGER = "#662d00";
2743
+ /* Strongest background color for warning elements (yellow.90). */
2744
+ export const KUI_COLOR_BACKGROUND_WARNING_STRONGEST = "#4d1b00";
2337
2745
  /* Weak background color for warning elements (yellow.40). */
2338
2746
  export const KUI_COLOR_BACKGROUND_WARNING_WEAK = "#ffc400";
2747
+ /* Weaker background color for warning elements (yellow.20). */
2748
+ export const KUI_COLOR_BACKGROUND_WARNING_WEAKER = "#fff296";
2339
2749
  /* Weakest background color for warning elements (yellow.10). */
2340
2750
  export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST = "#fffce0";
2341
2751
  /* Default border color for containers (gray.20). */
@@ -2360,10 +2770,20 @@ export const KUI_COLOR_BORDER_DECORATIVE_PURPLE = "#6f28ff";
2360
2770
  export const KUI_COLOR_BORDER_DISABLED = "#e0e4ea";
2361
2771
  /* Inverse border color (rgba(white, 0.2)). */
2362
2772
  export const KUI_COLOR_BORDER_INVERSE = "rgba(255, 255, 255, 0.2)";
2773
+ /* Border color for neutral elements (gray.60) */
2774
+ export const KUI_COLOR_BORDER_NEUTRAL = "#6c7489";
2775
+ /* Strong border color for neutral elements (gray.70) */
2776
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONG = "#52596e";
2777
+ /* Stronger border color for neutral elements (gray.80) */
2778
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONGER = "#3a3f51";
2779
+ /* Strongest border color for neutral elements (gray.90) */
2780
+ export const KUI_COLOR_BORDER_NEUTRAL_STRONGEST = "#232633";
2363
2781
  /* Weak border color for neutral elements (gray.40) */
2364
2782
  export const KUI_COLOR_BORDER_NEUTRAL_WEAK = "#afb7c5";
2365
2783
  /* Weaker border color for neutral elements (gray.20) */
2366
2784
  export const KUI_COLOR_BORDER_NEUTRAL_WEAKER = "#e0e4ea";
2785
+ /* Weakest border color for neutral elements (gray.10) */
2786
+ export const KUI_COLOR_BORDER_NEUTRAL_WEAKEST = "#f9fafb";
2367
2787
  /* Border color for primary actions or messages (blue.60). */
2368
2788
  export const KUI_COLOR_BORDER_PRIMARY = "#0044f4";
2369
2789
  /* Strong border color for primary actions or messages (blue.70). */
@@ -2386,6 +2806,16 @@ export const KUI_COLOR_TEXT = "#000933";
2386
2806
  export const KUI_COLOR_TEXT_DANGER = "#d60027";
2387
2807
  /* Strong text color for danger actions or messages (red.70). */
2388
2808
  export const KUI_COLOR_TEXT_DANGER_STRONG = "#ad000e";
2809
+ /* Stronger text color for danger actions or messages (red.80). */
2810
+ export const KUI_COLOR_TEXT_DANGER_STRONGER = "#850000";
2811
+ /* Strongest text color for danger actions or messages (red.90). */
2812
+ export const KUI_COLOR_TEXT_DANGER_STRONGEST = "#5c0000";
2813
+ /* Weak text color for danger actions or messages (red.40). */
2814
+ export const KUI_COLOR_TEXT_DANGER_WEAK = "#ff3954";
2815
+ /* Weaker text color for danger actions or messages (red.20). */
2816
+ export const KUI_COLOR_TEXT_DANGER_WEAKER = "#ffabab";
2817
+ /* Weakest text color for danger actions or messages (red.10). */
2818
+ export const KUI_COLOR_TEXT_DANGER_WEAKEST = "#ffe5e5";
2389
2819
  /* Text color for decorative purposes (aqua.50). */
2390
2820
  export const KUI_COLOR_TEXT_DECORATIVE_AQUA = "#00abd2";
2391
2821
  /* Text color for decorative purposes (pink.60). */
@@ -2396,6 +2826,20 @@ export const KUI_COLOR_TEXT_DECORATIVE_PURPLE = "#6f28ff";
2396
2826
  export const KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG = "#5e00f5";
2397
2827
  /* Text color for disabled elements (gray.40). */
2398
2828
  export const KUI_COLOR_TEXT_DISABLED = "#afb7c5";
2829
+ /* Text color for info elements (blue.60). */
2830
+ export const KUI_COLOR_TEXT_INFO = "#0044f4";
2831
+ /* Strong text color for info elements (blue.70). */
2832
+ export const KUI_COLOR_TEXT_INFO_STRONG = "#0030cc";
2833
+ /* Stronger text color for info elements (blue.80). */
2834
+ export const KUI_COLOR_TEXT_INFO_STRONGER = "#002099";
2835
+ /* Strongest text color for info elements (blue.90). */
2836
+ export const KUI_COLOR_TEXT_INFO_STRONGEST = "#001466";
2837
+ /* Weak text color for info elements (blue.40). */
2838
+ export const KUI_COLOR_TEXT_INFO_WEAK = "#5f9aff";
2839
+ /* Weaker text color for info elements (blue.20). */
2840
+ export const KUI_COLOR_TEXT_INFO_WEAKER = "#bee2ff";
2841
+ /* Weakest text color for info elements (blue.10). */
2842
+ export const KUI_COLOR_TEXT_INFO_WEAKEST = "#eefaff";
2399
2843
  /* Inverse text color (white). */
2400
2844
  export const KUI_COLOR_TEXT_INVERSE = "#ffffff";
2401
2845
  /* Text color for neutral elements (gray.60). */
@@ -2410,6 +2854,8 @@ export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST = "#232633";
2410
2854
  export const KUI_COLOR_TEXT_NEUTRAL_WEAK = "#afb7c5";
2411
2855
  /* Weaker text color for neutral elements (gray.20). */
2412
2856
  export const KUI_COLOR_TEXT_NEUTRAL_WEAKER = "#e0e4ea";
2857
+ /* Weakest text color for neutral elements (gray.10). */
2858
+ export const KUI_COLOR_TEXT_NEUTRAL_WEAKEST = "#f9fafb";
2413
2859
  /* Text color for primary actions or messages (blue.60). */
2414
2860
  export const KUI_COLOR_TEXT_PRIMARY = "#0044f4";
2415
2861
  /* Strong text color for primary actions or messages (blue.70). */
@@ -2420,14 +2866,38 @@ export const KUI_COLOR_TEXT_PRIMARY_STRONGER = "#002099";
2420
2866
  export const KUI_COLOR_TEXT_PRIMARY_STRONGEST = "#001466";
2421
2867
  /* Weak text color for primary actions or messages (blue.40). */
2422
2868
  export const KUI_COLOR_TEXT_PRIMARY_WEAK = "#5f9aff";
2423
- /* Text color for success actions or messages (green.60). */
2869
+ /* Weaker text color for primary actions or messages (blue.20). */
2870
+ export const KUI_COLOR_TEXT_PRIMARY_WEAKER = "#bee2ff";
2871
+ /* Weakest text color for primary actions or messages (blue.10). */
2872
+ export const KUI_COLOR_TEXT_PRIMARY_WEAKEST = "#eefaff";
2873
+ /* Text color for success elements (green.60). */
2424
2874
  export const KUI_COLOR_TEXT_SUCCESS = "#007d60";
2425
- /* Strong text color for success actions or messages (green.70). */
2875
+ /* Strong text color for success elements (green.70). */
2426
2876
  export const KUI_COLOR_TEXT_SUCCESS_STRONG = "#005944";
2427
- /* Text color for warning actions or messages (yellow.60). */
2877
+ /* Stronger text color for success elements (green.80). */
2878
+ export const KUI_COLOR_TEXT_SUCCESS_STRONGER = "#004737";
2879
+ /* Stronger text color for success elements (green.90). */
2880
+ export const KUI_COLOR_TEXT_SUCCESS_STRONGEST = "#003629";
2881
+ /* Weak text color for success elements (green.40). */
2882
+ export const KUI_COLOR_TEXT_SUCCESS_WEAK = "#00d6a4";
2883
+ /* Weaker text color for success elements (green.20). */
2884
+ export const KUI_COLOR_TEXT_SUCCESS_WEAKER = "#b5ffee";
2885
+ /* Weakest text color for success elements (green.10). */
2886
+ export const KUI_COLOR_TEXT_SUCCESS_WEAKEST = "#ecfffb";
2887
+ /* Text color for warning elements (yellow.60). */
2428
2888
  export const KUI_COLOR_TEXT_WARNING = "#995c00";
2429
- /* Text color for warning actions or messages (yellow.70). */
2889
+ /* Strong text color for warning elements (yellow.70). */
2430
2890
  export const KUI_COLOR_TEXT_WARNING_STRONG = "#804400";
2891
+ /* Stronger text color for warning elements (yellow.80). */
2892
+ export const KUI_COLOR_TEXT_WARNING_STRONGER = "#662d00";
2893
+ /* Strongest text color for warning elements (yellow.90). */
2894
+ export const KUI_COLOR_TEXT_WARNING_STRONGEST = "#4d1b00";
2895
+ /* Weak text color for warning elements (yellow.40). */
2896
+ export const KUI_COLOR_TEXT_WARNING_WEAK = "#ffc400";
2897
+ /* Weaker text color for warning elements (yellow.20). */
2898
+ export const KUI_COLOR_TEXT_WARNING_WEAKER = "#fff296";
2899
+ /* Weakest text color for warning elements (yellow.10). */
2900
+ export const KUI_COLOR_TEXT_WARNING_WEAKEST = "#fffce0";
2431
2901
  /* Default transition timing */
2432
2902
  export const KUI_ANIMATION_DURATION_20 = "0.2s";
2433
2903
  /* 0px border radius. */
@@ -2846,6 +3316,13 @@ export const KUI_SPACE_AUTO = "auto";
2846
3316
  "kui_color_background_decorative_purple": "#6f28ff",
2847
3317
  "kui_color_background_decorative_purple_weakest": "#f1f0ff",
2848
3318
  "kui_color_background_disabled": "#e0e4ea",
3319
+ "kui_color_background_info": "#0044f4",
3320
+ "kui_color_background_info_strong": "#0030cc",
3321
+ "kui_color_background_info_stronger": "#002099",
3322
+ "kui_color_background_info_strongest": "#001466",
3323
+ "kui_color_background_info_weak": "#5f9aff",
3324
+ "kui_color_background_info_weaker": "#bee2ff",
3325
+ "kui_color_background_info_weakest": "#eefaff",
2849
3326
  "kui_color_background_inverse": "#000933",
2850
3327
  "kui_color_background_neutral": "#6c7489",
2851
3328
  "kui_color_background_neutral_strong": "#52596e",
@@ -2862,10 +3339,20 @@ export const KUI_SPACE_AUTO = "auto";
2862
3339
  "kui_color_background_primary_weak": "#5f9aff",
2863
3340
  "kui_color_background_primary_weaker": "#bee2ff",
2864
3341
  "kui_color_background_primary_weakest": "#eefaff",
3342
+ "kui_color_background_success": "#007d60",
3343
+ "kui_color_background_success_strong": "#005944",
3344
+ "kui_color_background_success_stronger": "#004737",
3345
+ "kui_color_background_success_strongest": "#003629",
2865
3346
  "kui_color_background_success_weak": "#00d6a4",
3347
+ "kui_color_background_success_weaker": "#b5ffee",
2866
3348
  "kui_color_background_success_weakest": "#ecfffb",
2867
3349
  "kui_color_background_transparent": "transparent",
3350
+ "kui_color_background_warning": "#995c00",
3351
+ "kui_color_background_warning_strong": "#804400",
3352
+ "kui_color_background_warning_stronger": "#662d00",
3353
+ "kui_color_background_warning_strongest": "#4d1b00",
2868
3354
  "kui_color_background_warning_weak": "#ffc400",
3355
+ "kui_color_background_warning_weaker": "#fff296",
2869
3356
  "kui_color_background_warning_weakest": "#fffce0",
2870
3357
  "kui_color_border": "#e0e4ea",
2871
3358
  "kui_color_border_danger": "#d60027",
@@ -2878,8 +3365,13 @@ export const KUI_SPACE_AUTO = "auto";
2878
3365
  "kui_color_border_decorative_purple": "#6f28ff",
2879
3366
  "kui_color_border_disabled": "#e0e4ea",
2880
3367
  "kui_color_border_inverse": "rgba(255, 255, 255, 0.2)",
3368
+ "kui_color_border_neutral": "#6c7489",
3369
+ "kui_color_border_neutral_strong": "#52596e",
3370
+ "kui_color_border_neutral_stronger": "#3a3f51",
3371
+ "kui_color_border_neutral_strongest": "#232633",
2881
3372
  "kui_color_border_neutral_weak": "#afb7c5",
2882
3373
  "kui_color_border_neutral_weaker": "#e0e4ea",
3374
+ "kui_color_border_neutral_weakest": "#f9fafb",
2883
3375
  "kui_color_border_primary": "#0044f4",
2884
3376
  "kui_color_border_primary_strong": "#0030cc",
2885
3377
  "kui_color_border_primary_stronger": "#002099",
@@ -2891,11 +3383,23 @@ export const KUI_SPACE_AUTO = "auto";
2891
3383
  "kui_color_text": "#000933",
2892
3384
  "kui_color_text_danger": "#d60027",
2893
3385
  "kui_color_text_danger_strong": "#ad000e",
3386
+ "kui_color_text_danger_stronger": "#850000",
3387
+ "kui_color_text_danger_strongest": "#5c0000",
3388
+ "kui_color_text_danger_weak": "#ff3954",
3389
+ "kui_color_text_danger_weaker": "#ffabab",
3390
+ "kui_color_text_danger_weakest": "#ffe5e5",
2894
3391
  "kui_color_text_decorative_aqua": "#00abd2",
2895
3392
  "kui_color_text_decorative_pink": "#d60067",
2896
3393
  "kui_color_text_decorative_purple": "#6f28ff",
2897
3394
  "kui_color_text_decorative_purple_strong": "#5e00f5",
2898
3395
  "kui_color_text_disabled": "#afb7c5",
3396
+ "kui_color_text_info": "#0044f4",
3397
+ "kui_color_text_info_strong": "#0030cc",
3398
+ "kui_color_text_info_stronger": "#002099",
3399
+ "kui_color_text_info_strongest": "#001466",
3400
+ "kui_color_text_info_weak": "#5f9aff",
3401
+ "kui_color_text_info_weaker": "#bee2ff",
3402
+ "kui_color_text_info_weakest": "#eefaff",
2899
3403
  "kui_color_text_inverse": "#ffffff",
2900
3404
  "kui_color_text_neutral": "#6c7489",
2901
3405
  "kui_color_text_neutral_strong": "#52596e",
@@ -2903,15 +3407,28 @@ export const KUI_SPACE_AUTO = "auto";
2903
3407
  "kui_color_text_neutral_strongest": "#232633",
2904
3408
  "kui_color_text_neutral_weak": "#afb7c5",
2905
3409
  "kui_color_text_neutral_weaker": "#e0e4ea",
3410
+ "kui_color_text_neutral_weakest": "#f9fafb",
2906
3411
  "kui_color_text_primary": "#0044f4",
2907
3412
  "kui_color_text_primary_strong": "#0030cc",
2908
3413
  "kui_color_text_primary_stronger": "#002099",
2909
3414
  "kui_color_text_primary_strongest": "#001466",
2910
3415
  "kui_color_text_primary_weak": "#5f9aff",
3416
+ "kui_color_text_primary_weaker": "#bee2ff",
3417
+ "kui_color_text_primary_weakest": "#eefaff",
2911
3418
  "kui_color_text_success": "#007d60",
2912
3419
  "kui_color_text_success_strong": "#005944",
3420
+ "kui_color_text_success_stronger": "#004737",
3421
+ "kui_color_text_success_strongest": "#003629",
3422
+ "kui_color_text_success_weak": "#00d6a4",
3423
+ "kui_color_text_success_weaker": "#b5ffee",
3424
+ "kui_color_text_success_weakest": "#ecfffb",
2913
3425
  "kui_color_text_warning": "#995c00",
2914
3426
  "kui_color_text_warning_strong": "#804400",
3427
+ "kui_color_text_warning_stronger": "#662d00",
3428
+ "kui_color_text_warning_strongest": "#4d1b00",
3429
+ "kui_color_text_warning_weak": "#ffc400",
3430
+ "kui_color_text_warning_weaker": "#fff296",
3431
+ "kui_color_text_warning_weakest": "#fffce0",
2915
3432
  "kui_animation_duration_20": "0.2s",
2916
3433
  "kui_border_radius_0": "0px",
2917
3434
  "kui_border_radius_10": "2px",