@innovaccer/design-system 4.23.0 → 4.24.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 (76) hide show
  1. package/CHANGELOG.md +76 -0
  2. package/README.md +3 -3
  3. package/css/dist/index.css +1226 -325
  4. package/css/dist/index.css.map +1 -1
  5. package/css/src/ai-components/button.module.css +4 -24
  6. package/css/src/ai-components/chip.module.css +5 -30
  7. package/css/src/ai-components/iconButton.module.css +2 -12
  8. package/css/src/components/avatarGroup.module.css +7 -0
  9. package/css/src/components/avatarSelection.module.css +22 -0
  10. package/css/src/components/badge.module.css +3 -3
  11. package/css/src/components/button.module.css +187 -18
  12. package/css/src/components/calendar.module.css +49 -0
  13. package/css/src/components/card.module.css +14 -0
  14. package/css/src/components/chatBubble.module.css +6 -1
  15. package/css/src/components/chatInput.module.css +14 -3
  16. package/css/src/components/chip.module.css +34 -0
  17. package/css/src/components/dropdown.module.css +7 -0
  18. package/css/src/components/dropzone.module.css +36 -0
  19. package/css/src/components/grid.module.css +29 -12
  20. package/css/src/components/horizontalNav.module.css +15 -0
  21. package/css/src/components/link.module.css +59 -6
  22. package/css/src/components/linkButton.module.css +82 -10
  23. package/css/src/components/listbox.module.css +85 -1
  24. package/css/src/components/metricInput.module.css +89 -35
  25. package/css/src/components/modal.module.css +8 -0
  26. package/css/src/components/segmentedControl.module.css +1 -1
  27. package/css/src/components/select.module.css +7 -0
  28. package/css/src/components/selectionCard.module.css +38 -0
  29. package/css/src/components/sidesheet.module.css +8 -0
  30. package/css/src/components/slider.module.css +21 -0
  31. package/css/src/components/switch.module.css +39 -0
  32. package/css/src/components/table.module.css +32 -1
  33. package/css/src/components/tabs.module.css +20 -0
  34. package/css/src/components/timePicker.module.css +4 -0
  35. package/css/src/components/toast.module.css +10 -0
  36. package/css/src/components/tooltip.module.css +1 -0
  37. package/css/src/tokens/index.css +156 -156
  38. package/css/src/utils/utility.css +4 -0
  39. package/css/src/variables/index.css +116 -1
  40. package/dist/brotli/index.js +1 -1
  41. package/dist/brotli/index.js.br +0 -0
  42. package/dist/cjs/index.js +1 -1
  43. package/dist/core/components/atoms/link/Link.d.ts +4 -2
  44. package/dist/core/components/atoms/linkButton/LinkButton.d.ts +1 -0
  45. package/dist/core/components/atoms/message/Message.d.ts +1 -0
  46. package/dist/core/components/atoms/outsideClick/OutsideClick.d.ts +1 -0
  47. package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts +1 -0
  48. package/dist/core/components/atoms/progressBar/ProgressBar.d.ts +2 -0
  49. package/dist/core/components/atoms/progressRing/ProgressRing.d.ts +3 -0
  50. package/dist/core/components/atoms/segmentedControl/SegmentedControl.d.ts +2 -0
  51. package/dist/core/components/atoms/toast/Toast.d.ts +3 -0
  52. package/dist/core/components/molecules/chat/Chat.d.ts +3 -0
  53. package/dist/core/components/molecules/chat/chatBubble/IncomingBubble.d.ts +1 -0
  54. package/dist/core/components/molecules/chat/chatBubble/OutgoingBubble.d.ts +1 -0
  55. package/dist/core/components/molecules/chat/chatInput/ChatInput.d.ts +1 -0
  56. package/dist/core/components/molecules/chat/unreadMessage/UnreadMessage.d.ts +3 -0
  57. package/dist/core/components/molecules/dropzone/Dropzone.d.ts +1 -0
  58. package/dist/core/components/molecules/editableInput/EditableInput.d.ts +4 -0
  59. package/dist/core/components/molecules/inputMask/InputMask.d.ts +1 -0
  60. package/dist/core/components/molecules/popover/Popover.d.ts +1 -0
  61. package/dist/core/components/organisms/grid/Grid.d.ts +1 -0
  62. package/dist/core/components/organisms/grid/GridContext.d.ts +1 -0
  63. package/dist/core/components/organisms/grid/VirtualList.d.ts +1 -0
  64. package/dist/core/components/organisms/listbox/reorderList/Draggable.d.ts +11 -0
  65. package/dist/core/components/organisms/menu/SubMenuContext.d.ts +1 -0
  66. package/dist/core/components/organisms/textField/TextFieldCommon.d.ts +1 -0
  67. package/dist/core/components/organisms/verticalNav/VerticalNav.d.ts +2 -0
  68. package/dist/esm/index.js +1695 -709
  69. package/dist/gzip/index.js +1 -1
  70. package/dist/gzip/index.js.gz +0 -0
  71. package/dist/index.js +1536 -570
  72. package/dist/index.js.map +1 -1
  73. package/dist/index.umd.css +1216 -315
  74. package/dist/index.umd.js +1 -1
  75. package/dist/types/tsconfig.type.tsbuildinfo +152 -114
  76. package/package.json +1 -1
@@ -23,42 +23,42 @@
23
23
  --color-blue-1200-16a: rgba(0, 62, 133, 0.16);
24
24
 
25
25
  /* Red */
26
- --color-red-100: #fff2f0;
27
- --color-red-200: #ffddd6;
28
- --color-red-300: #ffccc2;
29
- --color-red-400: #ffb7a8;
30
- --color-red-500: #fe9e8b;
31
- --color-red-600: #fb866f;
32
- --color-red-700: #f86b4f;
33
- --color-red-800: #f54f2e;
34
- --color-red-900: #f5310a;
35
- --color-red-1000: #d62400;
36
- --color-red-1100: #ad1d00;
37
- --color-red-1200: #851600;
38
- --color-red-1300: #611000;
39
- --color-red-1400: #470c00;
40
- --color-red-1000-4a: rgba(214, 36, 0, 0.04);
41
- --color-red-1000-16a: rgba(214, 36, 0, 0.16);
42
- --color-red-1200-16a: rgba(133, 22, 0, 0.16);
26
+ --color-red-100: #fff7f5;
27
+ --color-red-200: #ffe1db;
28
+ --color-red-300: #ffd4cc;
29
+ --color-red-400: #fec0b4;
30
+ --color-red-500: #fcac9c;
31
+ --color-red-600: #f49480;
32
+ --color-red-700: #ed765e;
33
+ --color-red-800: #e45b3f;
34
+ --color-red-900: #df3011;
35
+ --color-red-1000: #bd1c00;
36
+ --color-red-1100: #9e200a;
37
+ --color-red-1200: #791a06;
38
+ --color-red-1300: #5c1305;
39
+ --color-red-1400: #3f0e03;
40
+ --color-red-1000-4a: rgba(189, 28, 0, 0.04);
41
+ --color-red-1000-16a: rgba(189, 28, 0, 0.16);
42
+ --color-red-1200-16a: rgba(121, 26, 6, 0.16);
43
43
 
44
44
  /* Green */
45
- --color-green-100: #deffdb;
46
- --color-green-200: #c4fcc0;
47
- --color-green-300: #a0f69d;
48
- --color-green-400: #88ee87;
49
- --color-green-500: #6be16d;
50
- --color-green-600: #4fcf55;
51
- --color-green-700: #27b933;
52
- --color-green-800: #07a61a;
53
- --color-green-900: #008f11;
54
- --color-green-1000: #007a0e;
55
- --color-green-1100: #00660c;
56
- --color-green-1200: #00520a;
57
- --color-green-1300: #004208;
58
- --color-green-1400: #002e05;
59
- --color-green-1000-4a: rgba(0, 122, 14, 0.04);
60
- --color-green-1000-16a: rgba(0, 122, 14, 0.16);
61
- --color-green-1200-16a: rgba(0, 82, 10, 0.16);
45
+ --color-green-100: #f1f9f0;
46
+ --color-green-200: #dcf0db;
47
+ --color-green-300: #cbe8c9;
48
+ --color-green-400: #b6dfb3;
49
+ --color-green-500: #9dd49b;
50
+ --color-green-600: #7ec57d;
51
+ --color-green-700: #5eb55e;
52
+ --color-green-800: #3aa63c;
53
+ --color-green-900: #009900;
54
+ --color-green-1000: #008000;
55
+ --color-green-1100: #006b00;
56
+ --color-green-1200: #005200;
57
+ --color-green-1300: #003d04;
58
+ --color-green-1400: #002904;
59
+ --color-green-1000-4a: rgba(0, 128, 0, 0.04);
60
+ --color-green-1000-16a: rgba(0, 128, 0, 0.16);
61
+ --color-green-1200-16a: rgba(0, 82, 0, 0.16);
62
62
 
63
63
  /* Yellow */
64
64
  --color-yellow-100: #fff9e5;
@@ -81,138 +81,138 @@
81
81
  --color-yellow-1100-16a: rgba(173, 130, 0, 0.16);
82
82
 
83
83
  /* Orange */
84
- --color-orange-100: #fff2db;
85
- --color-orange-200: #ffeccc;
86
- --color-orange-300: #ffe0ad;
87
- --color-orange-400: #ffce85;
88
- --color-orange-500: #ffba61;
89
- --color-orange-600: #ffaf4d;
90
- --color-orange-700: #ffa238;
91
- --color-orange-800: #ff931f;
92
- --color-orange-900: #ff8000;
93
- --color-orange-1000: #e56f00;
94
- --color-orange-1100: #cc5f00;
95
- --color-orange-1200: #b24d00;
96
- --color-orange-1300: #7a2f00;
97
- --color-orange-1400: #5c2200;
98
- --color-orange-1000-4a: rgba(229, 111, 0, 0.04);
99
- --color-orange-1000-16a: rgba(229, 111, 0, 0.16);
84
+ --color-orange-100: #ffeed1;
85
+ --color-orange-200: #ffe8c2;
86
+ --color-orange-300: #ffdca3;
87
+ --color-orange-400: #ffca7a;
88
+ --color-orange-500: #ffb657;
89
+ --color-orange-600: #ffa333;
90
+ --color-orange-700: #ff9114;
91
+ --color-orange-800: #eb7900;
92
+ --color-orange-900: #d66c00;
93
+ --color-orange-1000: #bd5b00;
94
+ --color-orange-1100: #a34c00;
95
+ --color-orange-1200: #8a3b00;
96
+ --color-orange-1300: #6b2900;
97
+ --color-orange-1400: #4d1c00;
98
+ --color-orange-1000-4a: rgba(189, 91, 0, 0.04);
99
+ --color-orange-1000-16a: rgba(189, 91, 0, 0.16);
100
100
 
101
101
  /* Violet */
102
- --color-violet-100: #f7f0ff;
103
- --color-violet-200: #ebdbff;
104
- --color-violet-300: #dec7ff;
105
- --color-violet-400: #d3b4fd;
106
- --color-violet-500: #c7a0fd;
107
- --color-violet-600: #b689fb;
108
- --color-violet-700: #a771f9;
109
- --color-violet-800: #9657f4;
110
- --color-violet-900: #823aee;
111
- --color-violet-1000: #6f21e4;
112
- --color-violet-1100: #601ec2;
113
- --color-violet-1200: #531ba7;
114
- --color-violet-1300: #3e0e8b;
115
- --color-violet-1400: #2b0868;
116
- --color-violet-1000-16a: rgba(111, 33, 228, 0.16);
102
+ --color-violet-100: #faf6fe;
103
+ --color-violet-200: #f0e7fd;
104
+ --color-violet-300: #e4d5fb;
105
+ --color-violet-400: #dcc7fa;
106
+ --color-violet-500: #cfb4f8;
107
+ --color-violet-600: #c0a0f3;
108
+ --color-violet-700: #ac87ee;
109
+ --color-violet-800: #9e72e9;
110
+ --color-violet-900: #8854e8;
111
+ --color-violet-1000: #6f47cd;
112
+ --color-violet-1100: #5b3ba5;
113
+ --color-violet-1200: #462d80;
114
+ --color-violet-1300: #322361;
115
+ --color-violet-1400: #211844;
116
+ --color-violet-1000-16a: rgba(111, 71, 205, 0.16);
117
117
 
118
118
  /* Indigo */
119
- --color-indigo-100: #f2f3fd;
120
- --color-indigo-200: #daddfb;
121
- --color-indigo-300: #c8ccf9;
122
- --color-indigo-400: #bbc0f7;
123
- --color-indigo-500: #a8aff5;
124
- --color-indigo-600: #919af2;
125
- --color-indigo-700: #7d86ed;
126
- --color-indigo-800: #6873e8;
127
- --color-indigo-900: #5460e3;
128
- --color-indigo-1000: #3b48de;
129
- --color-indigo-1100: #1f2ed6;
130
- --color-indigo-1200: #1422b8;
131
- --color-indigo-1300: #0d1677;
132
- --color-indigo-1400: #0b1365;
133
- --color-indigo-1000-16a: rgba(59, 72, 222, 0.16);
119
+ --color-indigo-100: #f5f6ff;
120
+ --color-indigo-200: #e5e8ff;
121
+ --color-indigo-300: #d6daff;
122
+ --color-indigo-400: #c7ccff;
123
+ --color-indigo-500: #b3baff;
124
+ --color-indigo-600: #9faafe;
125
+ --color-indigo-700: #8993fa;
126
+ --color-indigo-800: #7380f7;
127
+ --color-indigo-900: #5a67f6;
128
+ --color-indigo-1000: #4256d7;
129
+ --color-indigo-1100: #2f4aac;
130
+ --color-indigo-1200: #223987;
131
+ --color-indigo-1300: #192b66;
132
+ --color-indigo-1400: #101c46;
133
+ --color-indigo-1000-16a: rgba(66, 86, 215, 0.16);
134
134
 
135
135
  /* Lime */
136
- --color-lime-100: #ecffd1;
137
- --color-lime-200: #defcb0;
138
- --color-lime-300: #cbf98b;
139
- --color-lime-400: #b9f466;
140
- --color-lime-500: #a7ef43;
141
- --color-lime-600: #9aeb28;
142
- --color-lime-700: #8ce114;
143
- --color-lime-800: #7ecf0c;
144
- --color-lime-900: #70bc06;
145
- --color-lime-1000: #62a701;
146
- --color-lime-1100: #508901;
147
- --color-lime-1200: #3e6b00;
148
- --color-lime-1300: #294600;
149
- --color-lime-1400: #1b2e00;
150
- --color-lime-900-16a: rgba(112, 188, 6, 0.16);
151
- --color-lime-1000-16a: rgba(98, 167, 1, 0.16);
136
+ --color-lime-100: #f5faed;
137
+ --color-lime-200: #e4efd3;
138
+ --color-lime-300: #d5e6bb;
139
+ --color-lime-400: #c5dc9e;
140
+ --color-lime-500: #b2d07d;
141
+ --color-lime-600: #9dc057;
142
+ --color-lime-700: #87b018;
143
+ --color-lime-800: #779d00;
144
+ --color-lime-900: #688900;
145
+ --color-lime-1000: #577400;
146
+ --color-lime-1100: #476000;
147
+ --color-lime-1200: #364900;
148
+ --color-lime-1300: #283800;
149
+ --color-lime-1400: #1a2700;
150
+ --color-lime-900-16a: rgba(104, 137, 0, 0.16);
151
+ --color-lime-1000-16a: rgba(87, 116, 0, 0.16);
152
152
 
153
153
  /* Cyan */
154
- --color-cyan-100: #dbfaff;
155
- --color-cyan-200: #bdf5ff;
156
- --color-cyan-300: #99eeff;
157
- --color-cyan-400: #8beafd;
158
- --color-cyan-500: #7ee6fb;
159
- --color-cyan-600: #68def8;
160
- --color-cyan-700: #52d6f4;
161
- --color-cyan-800: #31cbf2;
162
- --color-cyan-900: #15c3ef;
163
- --color-cyan-1000: #0fabd2;
164
- --color-cyan-1100: #0589ad;
165
- --color-cyan-1200: #006280;
166
- --color-cyan-1300: #003f52;
167
- --color-cyan-1400: #00232e;
154
+ --color-cyan-100: #eefafc;
155
+ --color-cyan-200: #cff1f7;
156
+ --color-cyan-300: #b6e8f2;
157
+ --color-cyan-400: #96dfee;
158
+ --color-cyan-500: #6ed3e7;
159
+ --color-cyan-600: #33c4e1;
160
+ --color-cyan-700: #00b2d6;
161
+ --color-cyan-800: #009fc7;
162
+ --color-cyan-900: #008cb3;
163
+ --color-cyan-1000: #007599;
164
+ --color-cyan-1100: #006080;
165
+ --color-cyan-1200: #004766;
166
+ --color-cyan-1300: #003952;
167
+ --color-cyan-1400: #002738;
168
168
 
169
169
  /* Sea */
170
- --color-sea-100: #ddfdfa;
171
- --color-sea-200: #c4f8f3;
172
- --color-sea-300: #a5f3ec;
173
- --color-sea-400: #8ceee7;
174
- --color-sea-500: #73e7e0;
175
- --color-sea-600: #5ce0d7;
176
- --color-sea-700: #45d9cf;
177
- --color-sea-800: #23d7cb;
178
- --color-sea-900: #16c0b7;
179
- --color-sea-1000: #0ca79f;
180
- --color-sea-1100: #04867f;
181
- --color-sea-1200: #00615c;
182
- --color-sea-1300: #00423f;
183
- --color-sea-1400: #002927;
170
+ --color-sea-100: #effaf9;
171
+ --color-sea-200: #cff2ef;
172
+ --color-sea-300: #b8eae5;
173
+ --color-sea-400: #98e2dc;
174
+ --color-sea-500: #6fd8d2;
175
+ --color-sea-600: #2fcac0;
176
+ --color-sea-700: #00b8ae;
177
+ --color-sea-800: #00a89d;
178
+ --color-sea-900: #008f88;
179
+ --color-sea-1000: #007a74;
180
+ --color-sea-1100: #00665f;
181
+ --color-sea-1200: #004d47;
182
+ --color-sea-1300: #003d3a;
183
+ --color-sea-1400: #002926;
184
184
 
185
185
  /* Magenta */
186
- --color-magenta-100: #fff0f5;
187
- --color-magenta-200: #ffdbe8;
188
- --color-magenta-300: #ffc2d8;
189
- --color-magenta-400: #ffadcb;
190
- --color-magenta-500: #ff99c0;
191
- --color-magenta-600: #ff85b4;
192
- --color-magenta-700: #fe71a7;
193
- --color-magenta-800: #fc5a98;
194
- --color-magenta-900: #fa428c;
195
- --color-magenta-1000: #f7267a;
196
- --color-magenta-1100: #e40763;
197
- --color-magenta-1200: #b00753;
198
- --color-magenta-1300: #850040;
199
- --color-magenta-1400: #520029;
186
+ --color-magenta-100: #fff5f9;
187
+ --color-magenta-200: #fee1eb;
188
+ --color-magenta-300: #fccfdf;
189
+ --color-magenta-400: #fabdd2;
190
+ --color-magenta-500: #f6a7c4;
191
+ --color-magenta-600: #ef8fb2;
192
+ --color-magenta-700: #e7739e;
193
+ --color-magenta-800: #de5487;
194
+ --color-magenta-900: #d62974;
195
+ --color-magenta-1000: #bb165b;
196
+ --color-magenta-1100: #991a44;
197
+ --color-magenta-1200: #751538;
198
+ --color-magenta-1300: #5a112d;
199
+ --color-magenta-1400: #3d0b20;
200
200
 
201
201
  /* Pink */
202
- --color-pink-100: #fff0fd;
203
- --color-pink-200: #ffe0fb;
204
- --color-pink-300: #ffd1f9;
205
- --color-pink-400: #ffc7f7;
206
- --color-pink-500: #febdf7;
207
- --color-pink-600: #fdaff5;
208
- --color-pink-700: #fca1f6;
209
- --color-pink-800: #f88cf2;
210
- --color-pink-900: #f47cf2;
211
- --color-pink-1000: #ed68ed;
212
- --color-pink-1100: #d016d0;
213
- --color-pink-1200: #ae09ae;
214
- --color-pink-1300: #510151;
215
- --color-pink-1400: #410c40;
202
+ --color-pink-100: #fdf6fc;
203
+ --color-pink-200: #f8e2f5;
204
+ --color-pink-300: #f3d3ef;
205
+ --color-pink-400: #efc2e9;
206
+ --color-pink-500: #e7ace1;
207
+ --color-pink-600: #dd92d5;
208
+ --color-pink-700: #d17acd;
209
+ --color-pink-800: #c55ec1;
210
+ --color-pink-900: #b83db8;
211
+ --color-pink-1000: #9d2d9f;
212
+ --color-pink-1100: #842a82;
213
+ --color-pink-1200: #651f64;
214
+ --color-pink-1300: #4e184d;
215
+ --color-pink-1400: #371036;
216
216
 
217
217
  /* Gray */
218
218
  --color-gray-100: #f7f7f7;
@@ -263,7 +263,7 @@
263
263
  /* Accent 2 (Violet) */
264
264
  --jamun: var(--color-violet-1000);
265
265
  --jamun-dark: var(--color-violet-1200);
266
- --jamun-darker: var(--color-violet-1400);
266
+ --jamun-darker: var(--color-violet-1300);
267
267
  --jamun-light: var(--color-violet-700);
268
268
  --jamun-lighter: var(--color-violet-500);
269
269
  --jamun-lightest: var(--color-violet-200);
@@ -279,7 +279,7 @@
279
279
  /* Accent 3 (Indigo) */
280
280
  --neel: var(--color-indigo-1000);
281
281
  --neel-dark: var(--color-indigo-1200);
282
- --neel-darker: var(--color-indigo-1400);
282
+ --neel-darker: var(--color-indigo-1300);
283
283
  --neel-light: var(--color-indigo-700);
284
284
  --neel-lighter: var(--color-indigo-500);
285
285
  --neel-lightest: var(--color-indigo-200);
@@ -299,8 +299,8 @@
299
299
  --night-lightest: var(--color-gray-700);
300
300
 
301
301
  /* Accent 4 (Lime) */
302
- --nimbu: var(--color-lime-900);
303
- --nimbu-dark: var(--color-lime-1100);
302
+ --nimbu: var(--color-lime-1000);
303
+ --nimbu-dark: var(--color-lime-1200);
304
304
  --nimbu-darker: var(--color-lime-1300);
305
305
  --nimbu-light: var(--color-lime-700);
306
306
  --nimbu-lighter: var(--color-lime-500);
@@ -345,6 +345,10 @@
345
345
  --accent2: var(--jamun);
346
346
  --accent3: var(--neel);
347
347
  --accent4: var(--nimbu);
348
+ --accent5: var(--color-cyan-1000);
349
+ --accent6: var(--color-magenta-1000);
350
+ --accent7: var(--color-sea-1000);
351
+ --accent8: var(--color-pink-1000);
348
352
  --inverse: var(--night);
349
353
 
350
354
  /* dark */
@@ -357,6 +361,10 @@
357
361
  --accent2-dark: var(--jamun-dark);
358
362
  --accent3-dark: var(--neel-dark);
359
363
  --accent4-dark: var(--nimbu-dark);
364
+ --accent5-dark: var(--color-cyan-1200);
365
+ --accent6-dark: var(--color-magenta-1200);
366
+ --accent7-dark: var(--color-sea-1200);
367
+ --accent8-dark: var(--color-pink-1200);
360
368
 
361
369
  /* darker */
362
370
  --primary-darker: var(--jal-darker);
@@ -367,6 +375,10 @@
367
375
  --accent2-darker: var(--jamun-darker);
368
376
  --accent3-darker: var(--neel-darker);
369
377
  --accent4-darker: var(--nimbu-darker);
378
+ --accent5-darker: var(--color-cyan-1300);
379
+ --accent6-darker: var(--color-magenta-1300);
380
+ --accent7-darker: var(--color-sea-1300);
381
+ --accent8-darker: var(--color-pink-1300);
370
382
 
371
383
  /* light */
372
384
  --primary-light: var(--jal-light);
@@ -378,6 +390,10 @@
378
390
  --accent2-light: var(--jamun-light);
379
391
  --accent3-light: var(--neel-light);
380
392
  --accent4-light: var(--nimbu-light);
393
+ --accent5-light: var(--color-cyan-700);
394
+ --accent6-light: var(--color-magenta-700);
395
+ --accent7-light: var(--color-sea-700);
396
+ --accent8-light: var(--color-pink-700);
381
397
  --inverse-light: var(--night-light);
382
398
 
383
399
  /* lighter */
@@ -390,6 +406,10 @@
390
406
  --accent2-lighter: var(--jamun-lighter);
391
407
  --accent3-lighter: var(--neel-lighter);
392
408
  --accent4-lighter: var(--nimbu-lighter);
409
+ --accent5-lighter: var(--color-cyan-500);
410
+ --accent6-lighter: var(--color-magenta-500);
411
+ --accent7-lighter: var(--color-sea-500);
412
+ --accent8-lighter: var(--color-pink-500);
393
413
  --inverse-lighter: var(--night-lighter);
394
414
 
395
415
  /* lightest */
@@ -402,6 +422,10 @@
402
422
  --accent2-lightest: var(--jamun-lightest);
403
423
  --accent3-lightest: var(--neel-lightest);
404
424
  --accent4-lightest: var(--nimbu-lightest);
425
+ --accent5-lightest: var(--color-cyan-200);
426
+ --accent6-lightest: var(--color-magenta-200);
427
+ --accent7-lightest: var(--color-sea-200);
428
+ --accent8-lightest: var(--color-pink-200);
405
429
  --inverse-lightest: var(--night-lightest);
406
430
 
407
431
  /* Focus */
@@ -417,16 +441,103 @@
417
441
  --accent2-ultra-light: var(--color-violet-100);
418
442
  --accent3-ultra-light: var(--color-indigo-100);
419
443
  --accent4-ultra-light: var(--color-lime-100);
444
+ --accent5-ultra-light: var(--color-cyan-100);
445
+ --accent6-ultra-light: var(--color-magenta-100);
446
+ --accent7-ultra-light: var(--color-sea-100);
447
+ --accent8-ultra-light: var(--color-pink-100);
420
448
 
421
- /* Avatar specific color for the time being */
449
+ /* Numeric semantic steps */
422
450
  --primary-300: var(--color-blue-300);
451
+ --primary-400: var(--color-blue-400);
452
+ --primary-600: var(--color-blue-600);
453
+ --primary-800: var(--color-blue-800);
454
+ --primary-900: var(--color-blue-900);
455
+ --primary-1100: var(--color-blue-1100);
456
+ --primary-1400: var(--color-blue-1400);
423
457
  --success-300: var(--color-green-300);
458
+ --success-400: var(--color-green-400);
459
+ --success-600: var(--color-green-600);
460
+ --success-800: var(--color-green-800);
461
+ --success-900: var(--color-green-900);
462
+ --success-1100: var(--color-green-1100);
463
+ --success-1400: var(--color-green-1400);
424
464
  --alert-300: var(--color-red-300);
465
+ --alert-400: var(--color-red-400);
466
+ --alert-600: var(--color-red-600);
467
+ --alert-800: var(--color-red-800);
468
+ --alert-900: var(--color-red-900);
469
+ --alert-1100: var(--color-red-1100);
470
+ --alert-1400: var(--color-red-1400);
425
471
  --warning-300: var(--color-yellow-300);
472
+ --warning-400: var(--color-yellow-400);
473
+ --warning-600: var(--color-yellow-600);
474
+ --warning-800: var(--color-yellow-800);
475
+ --warning-1000: var(--color-yellow-1000);
476
+ --warning-1200: var(--color-yellow-1200);
477
+ --warning-1400: var(--color-yellow-1400);
426
478
  --accent1-300: var(--color-orange-300);
479
+ --accent1-400: var(--color-orange-400);
480
+ --accent1-600: var(--color-orange-600);
481
+ --accent1-800: var(--color-orange-800);
482
+ --accent1-900: var(--color-orange-900);
483
+ --accent1-1100: var(--color-orange-1100);
484
+ --accent1-1400: var(--color-orange-1400);
427
485
  --accent2-300: var(--color-violet-300);
486
+ --accent2-400: var(--color-violet-400);
487
+ --accent2-600: var(--color-violet-600);
488
+ --accent2-800: var(--color-violet-800);
489
+ --accent2-900: var(--color-violet-900);
490
+ --accent2-1100: var(--color-violet-1100);
491
+ --accent2-1400: var(--color-violet-1400);
428
492
  --accent3-300: var(--color-indigo-300);
493
+ --accent3-400: var(--color-indigo-400);
494
+ --accent3-600: var(--color-indigo-600);
495
+ --accent3-800: var(--color-indigo-800);
496
+ --accent3-900: var(--color-indigo-900);
497
+ --accent3-1100: var(--color-indigo-1100);
498
+ --accent3-1400: var(--color-indigo-1400);
429
499
  --accent4-300: var(--color-lime-300);
500
+ --accent4-400: var(--color-lime-400);
501
+ --accent4-600: var(--color-lime-600);
502
+ --accent4-800: var(--color-lime-800);
503
+ --accent4-900: var(--color-lime-900);
504
+ --accent4-1100: var(--color-lime-1100);
505
+ --accent4-1400: var(--color-lime-1400);
506
+ --accent5-300: var(--color-cyan-300);
507
+ --accent5-400: var(--color-cyan-400);
508
+ --accent5-600: var(--color-cyan-600);
509
+ --accent5-800: var(--color-cyan-800);
510
+ --accent5-900: var(--color-cyan-900);
511
+ --accent5-1100: var(--color-cyan-1100);
512
+ --accent5-1400: var(--color-cyan-1400);
513
+ --accent6-300: var(--color-magenta-300);
514
+ --accent6-400: var(--color-magenta-400);
515
+ --accent6-600: var(--color-magenta-600);
516
+ --accent6-800: var(--color-magenta-800);
517
+ --accent6-900: var(--color-magenta-900);
518
+ --accent6-1100: var(--color-magenta-1100);
519
+ --accent6-1400: var(--color-magenta-1400);
520
+ --accent7-300: var(--color-sea-300);
521
+ --accent7-400: var(--color-sea-400);
522
+ --accent7-600: var(--color-sea-600);
523
+ --accent7-800: var(--color-sea-800);
524
+ --accent7-900: var(--color-sea-900);
525
+ --accent7-1100: var(--color-sea-1100);
526
+ --accent7-1400: var(--color-sea-1400);
527
+ --accent8-300: var(--color-pink-300);
528
+ --accent8-400: var(--color-pink-400);
529
+ --accent8-600: var(--color-pink-600);
530
+ --accent8-800: var(--color-pink-800);
531
+ --accent8-900: var(--color-pink-900);
532
+ --accent8-1100: var(--color-pink-1100);
533
+ --accent8-1400: var(--color-pink-1400);
534
+
535
+ /* Neutral semantic steps */
536
+ --secondary-600: var(--color-gray-600);
537
+ --inverse-800: var(--color-gray-800);
538
+ --inverse-1000: var(--color-gray-1000);
539
+ --inverse-1200: var(--color-gray-1200);
540
+ --inverse-1300: var(--color-gray-1300);
430
541
 
431
542
  /* shadow */
432
543
  --primary-shadow: color-mod(var(--primary) a(var(--opacity-4)));
@@ -438,6 +549,10 @@
438
549
  --accent2-shadow: color-mod(var(--accent2) a(var(--opacity-4)));
439
550
  --accent3-shadow: color-mod(var(--accent3) a(var(--opacity-4)));
440
551
  --accent4-shadow: color-mod(var(--accent4) a(var(--opacity-4)));
552
+ --accent5-shadow: color-mod(var(--accent5) a(var(--opacity-4)));
553
+ --accent6-shadow: color-mod(var(--accent6) a(var(--opacity-4)));
554
+ --accent7-shadow: color-mod(var(--accent7) a(var(--opacity-4)));
555
+ --accent8-shadow: color-mod(var(--accent8) a(var(--opacity-4)));
441
556
  --inverse-shadow: color-mod(var(--inverse) a(var(--opacity-4)));
442
557
 
443
558
  /* Text colors */
@@ -2971,6 +3086,10 @@ body {
2971
3086
  white-space: pre;
2972
3087
  }
2973
3088
 
3089
+ .white-space-pre-wrap {
3090
+ white-space: pre-wrap;
3091
+ }
3092
+
2974
3093
  .bottom-0 {
2975
3094
  bottom: 0;
2976
3095
  }
@@ -3325,6 +3444,13 @@ body {
3325
3444
  pointer-events: auto !important;
3326
3445
  }
3327
3446
 
3447
+ @media (forced-colors: active) {
3448
+ .AvatarGroup-input:focus-within {
3449
+ outline: var(--border-width-05) solid Highlight !important;
3450
+ outline-offset: var(--spacing-05);
3451
+ }
3452
+ }
3453
+
3328
3454
  @keyframes backdrop-open {
3329
3455
  from {
3330
3456
  opacity: 0;
@@ -3422,7 +3548,7 @@ body {
3422
3548
  }
3423
3549
 
3424
3550
  .Badge--accent1 {
3425
- background: var(--accent1-dark);
3551
+ background: var(--accent1);
3426
3552
  color: var(--white);
3427
3553
  }
3428
3554
 
@@ -3438,7 +3564,7 @@ body {
3438
3564
 
3439
3565
  .Badge--accent4 {
3440
3566
  background: var(--accent4);
3441
- color: var(--accent4-darker);
3567
+ color: var(--white);
3442
3568
  }
3443
3569
 
3444
3570
  .Badge--subtle-primary {
@@ -3463,7 +3589,7 @@ body {
3463
3589
 
3464
3590
  .Badge--subtle-warning {
3465
3591
  color: var(--warning-darker);
3466
- background: var(--warning-lightest);
3592
+ background: var(--warning-300);
3467
3593
  }
3468
3594
 
3469
3595
  .Badge--subtle-accent1 {
@@ -3624,7 +3750,7 @@ body {
3624
3750
  transition: var(--duration--fast-01) var(--standard-productive-curve);
3625
3751
  }
3626
3752
 
3627
- .Button:disabled {
3753
+ .Button--disabled {
3628
3754
  cursor: not-allowed;
3629
3755
  }
3630
3756
 
@@ -3708,13 +3834,6 @@ body {
3708
3834
  margin-left: var(--spacing-15);
3709
3835
  }
3710
3836
 
3711
- .Button--tiny .Button-icon--left {
3712
- margin-right: var(--spacing-10);
3713
- }
3714
- .Button--tiny .Button-icon--right {
3715
- margin-left: var(--spacing-10);
3716
- }
3717
-
3718
3837
  .Button--basic {
3719
3838
  background: var(--secondary-light);
3720
3839
  color: var(--inverse);
@@ -3728,7 +3847,7 @@ body {
3728
3847
  background: var(--secondary-dark);
3729
3848
  }
3730
3849
 
3731
- .Button--basic:disabled {
3850
+ .Button--basic-disabled {
3732
3851
  background: var(--secondary-lighter);
3733
3852
  color: var(--inverse-lightest);
3734
3853
  }
@@ -3745,10 +3864,14 @@ body {
3745
3864
  background: var(--primary-darker);
3746
3865
  }
3747
3866
 
3748
- .Button--primary:disabled {
3867
+ .Button--primary-disabled {
3749
3868
  background: var(--primary-lighter);
3750
3869
  }
3751
3870
 
3871
+ .Button-infoIcon--primary {
3872
+ color: var(--text-link);
3873
+ }
3874
+
3752
3875
  .Button--success {
3753
3876
  background: var(--primary);
3754
3877
  }
@@ -3761,10 +3884,14 @@ body {
3761
3884
  background: var(--primary-darker);
3762
3885
  }
3763
3886
 
3764
- .Button--success:disabled {
3887
+ .Button--success-disabled {
3765
3888
  background: var(--primary-lighter);
3766
3889
  }
3767
3890
 
3891
+ .Button-infoIcon--success {
3892
+ color: var(--text-link);
3893
+ }
3894
+
3768
3895
  .Button--alert {
3769
3896
  background: var(--alert);
3770
3897
  }
@@ -3777,10 +3904,14 @@ body {
3777
3904
  background: var(--alert-darker);
3778
3905
  }
3779
3906
 
3780
- .Button--alert:disabled {
3907
+ .Button--alert-disabled {
3781
3908
  background: var(--alert-lighter);
3782
3909
  }
3783
3910
 
3911
+ .Button-infoIcon--alert {
3912
+ color: var(--alert);
3913
+ }
3914
+
3784
3915
  .Button--transparent {
3785
3916
  background: transparent;
3786
3917
  color: var(--inverse);
@@ -3798,7 +3929,7 @@ body {
3798
3929
  background: var(--secondary-dark);
3799
3930
  }
3800
3931
 
3801
- .Button--transparent:disabled {
3932
+ .Button--transparent-disabled {
3802
3933
  background: transparent;
3803
3934
  color: var(--inverse-lightest);
3804
3935
  }
@@ -3839,7 +3970,7 @@ body {
3839
3970
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
3840
3971
  }
3841
3972
 
3842
- .Button--selected:disabled {
3973
+ .Button--selected-disabled {
3843
3974
  background: var(--primary-ultra-light);
3844
3975
  color: var(--primary-lighter);
3845
3976
  box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -3855,6 +3986,63 @@ body {
3855
3986
  text-overflow: ellipsis;
3856
3987
  }
3857
3988
 
3989
+ .Button-infoIconWrapper {
3990
+ position: absolute;
3991
+ top: -4px;
3992
+ right: -4px;
3993
+ width: var(--spacing-30);
3994
+ height: var(--spacing-30);
3995
+ box-sizing: border-box;
3996
+ border-radius: var(--border-radius-full);
3997
+ display: flex;
3998
+ align-items: center;
3999
+ justify-content: center;
4000
+ overflow: hidden;
4001
+ border: var(--border-width-2-5) solid var(--secondary-lightest);
4002
+ pointer-events: none;
4003
+ }
4004
+
4005
+ .Button-infoIconWrapper--transparent {
4006
+ border: none;
4007
+ background: transparent;
4008
+ top: var(--spacing-2-5);
4009
+ right: var(--spacing-2-5);
4010
+ }
4011
+
4012
+ .Button-infoIconWrapper--iconOnly-transparent {
4013
+ top: var(--spacing-2-5);
4014
+ right: var(--spacing-2-5);
4015
+ }
4016
+
4017
+ .Button-infoIconWrapper-outlined--basic {
4018
+ background: var(--secondary-lightest);
4019
+ }
4020
+
4021
+ .Button-infoIconWrapper-outlined--primary {
4022
+ background: var(--primary-ultra-light);
4023
+ }
4024
+
4025
+ .Button-infoIconWrapper-outlined--alert {
4026
+ background: var(--alert-ultra-light);
4027
+ }
4028
+
4029
+ .Button-infoIconWrapper--basic {
4030
+ background: var(--secondary-lighter);
4031
+ }
4032
+
4033
+ .Button-infoIconWrapper--primary,
4034
+ .Button-infoIconWrapper--success {
4035
+ background: var(--primary-lightest);
4036
+ }
4037
+
4038
+ .Button-infoIconWrapper--alert {
4039
+ background: var(--alert-lightest);
4040
+ }
4041
+
4042
+ .Button-infoIcon {
4043
+ color: var(--text-subtle);
4044
+ }
4045
+
3858
4046
  /* outlined button styles */
3859
4047
 
3860
4048
  .Button-outlined--basic {
@@ -3879,7 +4067,7 @@ body {
3879
4067
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
3880
4068
  }
3881
4069
 
3882
- .Button-outlined--basic:disabled {
4070
+ .Button-outlined--basic-disabled {
3883
4071
  color: var(--inverse-lightest);
3884
4072
  background: transparent;
3885
4073
  box-shadow: inset 0 0 0 1px var(--secondary);
@@ -3917,7 +4105,7 @@ body {
3917
4105
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
3918
4106
  }
3919
4107
 
3920
- .Button-outlined--selected:disabled {
4108
+ .Button-outlined--selected-disabled {
3921
4109
  background: var(--primary-ultra-light);
3922
4110
  color: var(--primary-lighter);
3923
4111
  box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -3947,12 +4135,16 @@ body {
3947
4135
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
3948
4136
  }
3949
4137
 
3950
- .Button-outlined--primary:disabled {
4138
+ .Button-outlined--primary-disabled {
3951
4139
  background: transparent;
3952
4140
  color: var(--primary-lighter);
3953
4141
  box-shadow: inset 0 0 0 1px var(--primary-lighter);
3954
4142
  }
3955
4143
 
4144
+ .Button-infoIcon-outlined--primary {
4145
+ color: var(--text-link);
4146
+ }
4147
+
3956
4148
  .Button-outlined--alert {
3957
4149
  background: transparent;
3958
4150
  box-shadow: inset 0 0 0 1px var(--alert);
@@ -3977,12 +4169,115 @@ body {
3977
4169
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
3978
4170
  }
3979
4171
 
3980
- .Button-outlined--alert:disabled {
4172
+ .Button-outlined--alert-disabled {
3981
4173
  background: transparent;
3982
4174
  color: var(--alert-lighter);
3983
4175
  box-shadow: inset 0 0 0 1px var(--alert-lighter);
3984
4176
  }
3985
4177
 
4178
+ .Button-infoIcon-outlined--alert {
4179
+ color: var(--alert);
4180
+ }
4181
+
4182
+ .Button-srOnly {
4183
+ position: absolute;
4184
+ width: var(--spacing-2-5);
4185
+ height: var(--spacing-2-5);
4186
+ padding: 0;
4187
+ margin: calc(-1 * var(--spacing-2-5));
4188
+ overflow: hidden;
4189
+ clip: rect(0, 0, 0, 0);
4190
+ white-space: nowrap;
4191
+ border: 0;
4192
+ }
4193
+
4194
+ @media (forced-colors: active) {
4195
+ .Button--basic,
4196
+ .Button--primary,
4197
+ .Button--success,
4198
+ .Button--alert,
4199
+ .Button--transparent {
4200
+ border: var(--border-width-2-5) solid ButtonText;
4201
+ }
4202
+
4203
+ .Button--basic-disabled,
4204
+ .Button--primary-disabled,
4205
+ .Button--success-disabled,
4206
+ .Button--alert-disabled,
4207
+ .Button--transparent-disabled {
4208
+ border: var(--border-width-2-5) solid GrayText;
4209
+ }
4210
+
4211
+ /* Selected state: inset box-shadow acts as the visible border */
4212
+ .Button--selected,
4213
+ .Button--selected:hover,
4214
+ .Button--selected:active,
4215
+ .Button--selected-disabled {
4216
+ border: var(--border-width-05) solid ButtonText;
4217
+ box-shadow: none;
4218
+ }
4219
+
4220
+ .Button--selected:focus-visible,
4221
+ .Button--selected:focus-visible:active {
4222
+ outline: var(--border-width-05) solid Highlight;
4223
+ box-shadow: none;
4224
+ }
4225
+
4226
+ /* Outlined variants: inset box-shadow is the only visible border */
4227
+ .Button-outlined--basic,
4228
+ .Button-outlined--basic:hover,
4229
+ .Button-outlined--basic:active,
4230
+ .Button-outlined--basic-disabled {
4231
+ border: var(--border-width-2-5) solid ButtonText;
4232
+ box-shadow: none;
4233
+ }
4234
+
4235
+ .Button-outlined--basic:focus-visible {
4236
+ outline: var(--border-width-05) solid Highlight;
4237
+ box-shadow: none;
4238
+ }
4239
+
4240
+ .Button-outlined--selected,
4241
+ .Button-outlined--selected:hover,
4242
+ .Button-outlined--selected:active,
4243
+ .Button-outlined--selected-disabled {
4244
+ border: var(--border-width-05) solid ButtonText;
4245
+ box-shadow: none;
4246
+ }
4247
+
4248
+ .Button-outlined--selected:focus-visible,
4249
+ .Button-outlined--selected:focus-visible:active {
4250
+ outline: var(--border-width-05) solid Highlight;
4251
+ box-shadow: none;
4252
+ }
4253
+
4254
+ .Button-outlined--primary,
4255
+ .Button-outlined--primary:hover,
4256
+ .Button-outlined--primary:active,
4257
+ .Button-outlined--primary-disabled {
4258
+ border: var(--border-width-2-5) solid ButtonText;
4259
+ box-shadow: none;
4260
+ }
4261
+
4262
+ .Button-outlined--primary:focus-visible {
4263
+ outline: var(--border-width-05) solid Highlight;
4264
+ box-shadow: none;
4265
+ }
4266
+
4267
+ .Button-outlined--alert,
4268
+ .Button-outlined--alert:hover,
4269
+ .Button-outlined--alert:active,
4270
+ .Button-outlined--alert-disabled {
4271
+ border: var(--border-width-2-5) solid ButtonText;
4272
+ box-shadow: none;
4273
+ }
4274
+
4275
+ .Button-outlined--alert:focus-visible {
4276
+ outline: var(--border-width-05) solid Highlight;
4277
+ box-shadow: none;
4278
+ }
4279
+ }
4280
+
3986
4281
  /* calendar */
3987
4282
 
3988
4283
  .Calendar-wrapper {
@@ -4384,6 +4679,55 @@ body {
4384
4679
  border-color: transparent;
4385
4680
  }
4386
4681
 
4682
+ @media (forced-colors: active) {
4683
+ .Calendar-valueWrapper--start,
4684
+ .Calendar-valueWrapper--end,
4685
+ .Calendar-valueWrapper--hoverDate,
4686
+ .Calendar-valueWrapper--hoverEndDate,
4687
+ .Calendar-valueWrapper--inStartRange,
4688
+ .Calendar-valueWrapper--inEndRange,
4689
+ .Calendar-valueWrapper--inRange,
4690
+ .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
4691
+ background: Highlight;
4692
+ }
4693
+
4694
+ .Calendar-valueWrapper--startError,
4695
+ .Calendar-valueWrapper--endError,
4696
+ .Calendar-valueWrapper--inRangeError {
4697
+ background: Mark;
4698
+ }
4699
+
4700
+ /* Active/selected date cell */
4701
+ .Calendar-value--active,
4702
+ .Calendar-value--active:hover,
4703
+ .Calendar-value--active:active {
4704
+ forced-color-adjust: none;
4705
+ background: Highlight;
4706
+ color: HighlightText;
4707
+ border-color: transparent;
4708
+ }
4709
+
4710
+ /* Today's date marker ring */
4711
+ .Calendar-value--currDateMonthYear {
4712
+ border-color: ButtonText;
4713
+ }
4714
+
4715
+ /* Event dot: use system color so it stays visible */
4716
+ .Calendar-eventsIndicator {
4717
+ background-color: ButtonText;
4718
+ }
4719
+
4720
+ .Calendar-eventsIndicator--active {
4721
+ background-color: HighlightText;
4722
+ }
4723
+
4724
+ /* Disabled dates use opacity — switch to GrayText */
4725
+ .Calendar-valueWrapper--disabled {
4726
+ opacity: 1;
4727
+ color: GrayText;
4728
+ }
4729
+ }
4730
+
4387
4731
  /* badge */
4388
4732
 
4389
4733
  .Card {
@@ -4439,6 +4783,20 @@ body {
4439
4783
  border-top: var(--border-width-2-5) solid var(--secondary-light);
4440
4784
  }
4441
4785
 
4786
+ @media (forced-colors: active) {
4787
+ /* box-shadow is stripped in forced-colors; add a real border so the card boundary is visible */
4788
+ .Card--default,
4789
+ .Card--light,
4790
+ .Card--medium,
4791
+ .Card--dark,
4792
+ .Card--shadow10,
4793
+ .Card--shadow20,
4794
+ .Card--shadow30 {
4795
+ border: var(--border-width-2-5) solid ButtonText;
4796
+ box-shadow: none;
4797
+ }
4798
+ }
4799
+
4442
4800
  .CardSubdued {
4443
4801
  background: var(--card-subdued-bg);
4444
4802
  padding: var(--spacing-40);
@@ -4928,6 +5286,40 @@ body {
4928
5286
  padding-right: 0;
4929
5287
  }
4930
5288
 
5289
+ @media (forced-colors: active) {
5290
+ /* Action chips: border:0 makes them invisible — add a real border */
5291
+ .Chip--action {
5292
+ border: var(--border-width-2-5) solid ButtonText;
5293
+ }
5294
+
5295
+ /* Input chips: border:0 makes them invisible — add a real border */
5296
+ .Chip--input {
5297
+ border: var(--border-width-2-5) solid ButtonText;
5298
+ }
5299
+
5300
+ /* Selected state uses inset box-shadow as a double border on top of the existing border-color */
5301
+ .Chip-selection--selected,
5302
+ .Chip-selection--selected:hover,
5303
+ .Chip-selection--selected:active,
5304
+ .Chip-selection--selectedDisabled {
5305
+ border-color: Highlight;
5306
+ box-shadow: none;
5307
+ }
5308
+
5309
+ .Chip-action--disabled,
5310
+ .Chip-input--disabled {
5311
+ opacity: 1;
5312
+ color: GrayText;
5313
+ border: var(--border-width-2-5) solid GrayText;
5314
+ }
5315
+
5316
+ .Chip-selection--disabled {
5317
+ opacity: 1;
5318
+ color: GrayText;
5319
+ border-color: GrayText;
5320
+ }
5321
+ }
5322
+
4931
5323
  .ChipGroup {
4932
5324
  display: inline-flex;
4933
5325
  }
@@ -5331,6 +5723,13 @@ body {
5331
5723
  line-height: var(--font-height);
5332
5724
  }
5333
5725
 
5726
+ @media (forced-colors: active) {
5727
+ .Dropdown-input:focus-within {
5728
+ outline: var(--border-width-05) solid Highlight !important;
5729
+ outline-offset: var(--spacing-05);
5730
+ }
5731
+ }
5732
+
5334
5733
  .Grid {
5335
5734
  display: flex;
5336
5735
  flex-direction: column;
@@ -5441,6 +5840,10 @@ body {
5441
5840
  overflow-y: auto;
5442
5841
  }
5443
5842
 
5843
+ .Grid-rowGroup {
5844
+ display: contents;
5845
+ }
5846
+
5444
5847
  .Grid-rowWrapper {
5445
5848
  display: inline-flex;
5446
5849
  flex-direction: column;
@@ -5574,12 +5977,20 @@ body {
5574
5977
  overflow: hidden;
5575
5978
  }
5576
5979
 
5980
+ .Grid-cell--head .Grid-cellContent:focus-visible {
5981
+ box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-focus);
5982
+ border-radius: var(--border-radius-10);
5983
+ }
5984
+
5577
5985
  .Grid-cellResize {
5578
5986
  position: absolute;
5579
5987
  right: 0;
5580
5988
  width: var(--spacing-10);
5581
5989
  cursor: ew-resize;
5582
5990
  height: 100%;
5991
+ padding-right: var(--spacing-60);
5992
+ margin-right: calc(-1 * var(--spacing-60));
5993
+ box-sizing: content-box;
5583
5994
  }
5584
5995
 
5585
5996
  .Grid-cellSortIcon {
@@ -5596,6 +6007,11 @@ body {
5596
6007
  background: var(--primary);
5597
6008
  }
5598
6009
 
6010
+ .Grid-cellResize:focus-visible {
6011
+ background: var(--primary);
6012
+ outline: none;
6013
+ }
6014
+
5599
6015
  .Grid-reorderHighlighter {
5600
6016
  position: absolute;
5601
6017
  height: 100%;
@@ -5815,9 +6231,10 @@ body {
5815
6231
  background: var(--secondary-lighter);
5816
6232
  }
5817
6233
 
5818
- .Grid--resource .Grid-row--body:focus {
6234
+ .Grid--resource .Grid-row--body:focus-visible {
5819
6235
  box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
5820
- outline: none;
6236
+ outline: var(--border-width-05) solid var(--primary-focus);
6237
+ outline-offset: calc(-1 * var(--spacing-05));
5821
6238
  }
5822
6239
 
5823
6240
  /* Selected States */
@@ -5834,8 +6251,9 @@ body {
5834
6251
  background: var(--primary-lighter) !important;
5835
6252
  }
5836
6253
 
5837
- .Grid-row--selected:focus {
5838
- outline: none;
6254
+ .Grid-row--selected:focus-visible {
6255
+ outline: var(--border-width-05) solid var(--primary-focus);
6256
+ outline-offset: calc(-1 * var(--spacing-05));
5839
6257
  box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
5840
6258
  }
5841
6259
 
@@ -5856,9 +6274,8 @@ body {
5856
6274
  background: var(--secondary-lighter);
5857
6275
  }
5858
6276
 
5859
- .Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
6277
+ .Grid--resource .Grid-row--body:focus-visible .Grid-cellWrapper--pinned {
5860
6278
  box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
5861
- outline: none;
5862
6279
  }
5863
6280
 
5864
6281
  /* Pinned Columns Selected State */
@@ -5875,8 +6292,7 @@ body {
5875
6292
  background: var(--primary-lighter) !important;
5876
6293
  }
5877
6294
 
5878
- .Grid-row--selected:focus .Grid-cellWrapper--pinned {
5879
- outline: none;
6295
+ .Grid-row--selected:focus-visible .Grid-cellWrapper--pinned {
5880
6296
  box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
5881
6297
  }
5882
6298
 
@@ -5887,7 +6303,7 @@ body {
5887
6303
 
5888
6304
  .Grid-row--head .Grid-cellGroup--pinned-left {
5889
6305
  border-style: inset;
5890
- border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
6306
+ border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
5891
6307
  border-right-width: 4px;
5892
6308
  -o-border-image: linear-gradient(
5893
6309
  to right,
@@ -5909,7 +6325,7 @@ body {
5909
6325
 
5910
6326
  .Grid-row--head .Grid-cellGroup--pinned-right {
5911
6327
  border-style: inset;
5912
- border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
6328
+ border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
5913
6329
  border-left-width: 4px;
5914
6330
  -o-border-image: linear-gradient(
5915
6331
  to left,
@@ -5933,7 +6349,7 @@ body {
5933
6349
 
5934
6350
  .Grid-cellWrapper--pinned-left {
5935
6351
  border-style: inset;
5936
- border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
6352
+ border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
5937
6353
  border-right-width: 4px;
5938
6354
  -o-border-image: linear-gradient(
5939
6355
  to right,
@@ -5955,7 +6371,7 @@ body {
5955
6371
 
5956
6372
  .Grid-cellWrapper--pinned-right {
5957
6373
  border-style: inset;
5958
- border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
6374
+ border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
5959
6375
  border-left-width: 4px;
5960
6376
  -o-border-image: linear-gradient(
5961
6377
  to left,
@@ -6336,6 +6752,11 @@ body {
6336
6752
  }
6337
6753
  }
6338
6754
 
6755
+ .TimePicker-trigger {
6756
+ width: calc(var(--spacing-40) * 20);
6757
+ min-width: calc(var(--spacing-40) * 16);
6758
+ }
6759
+
6339
6760
  .DropdownButton {
6340
6761
  width: 100%;
6341
6762
  justify-content: space-between;
@@ -6990,25 +7411,21 @@ body {
6990
7411
  align-items: center;
6991
7412
  box-sizing: border-box;
6992
7413
  border-radius: var(--border-radius-10);
6993
- border: var(--border);
7414
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
6994
7415
  background: var(--white);
6995
- overflow: hidden;
6996
7416
  transition: var(--duration--fast-01) var(--standard-productive-curve);
6997
7417
  }
6998
7418
 
6999
7419
  .MetricInput--regular {
7000
7420
  height: var(--spacing-80);
7001
- padding-left: var(--spacing-30);
7002
7421
  }
7003
7422
 
7004
7423
  .MetricInput--large {
7005
7424
  height: 40px;
7006
- padding-left: var(--spacing-40);
7007
7425
  }
7008
7426
 
7009
7427
  .MetricInput--small {
7010
7428
  height: var(--spacing-60);
7011
- padding-left: var(--spacing-20);
7012
7429
  }
7013
7430
 
7014
7431
  .MetricInput:hover {
@@ -7018,9 +7435,12 @@ body {
7018
7435
 
7019
7436
  .MetricInput:focus-within {
7020
7437
  background: var(--white);
7021
- border-color: var(--secondary);
7438
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
7439
+ }
7440
+
7441
+ .MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
7022
7442
  outline: var(--border-width-05) solid var(--primary-focus);
7023
- outline-offset: var(--spacing-2-5);
7443
+ outline-offset: var(--spacing-05);
7024
7444
  }
7025
7445
 
7026
7446
  .MetricInput:focus-within .MetricInput-icon {
@@ -7029,13 +7449,13 @@ body {
7029
7449
 
7030
7450
  .MetricInput--disabled {
7031
7451
  background: var(--secondary-lightest);
7032
- border-color: var(--secondary-light);
7452
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary-light);
7033
7453
  pointer-events: none;
7034
7454
  }
7035
7455
 
7036
7456
  .MetricInput--readOnly {
7037
7457
  background: var(--secondary-lightest);
7038
- border-color: var(--secondary);
7458
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
7039
7459
  pointer-events: none;
7040
7460
  }
7041
7461
 
@@ -7046,19 +7466,46 @@ body {
7046
7466
  .MetricInput--error,
7047
7467
  .MetricInput--error:hover {
7048
7468
  background: var(--white);
7049
- border-color: var(--alert);
7469
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
7050
7470
  }
7051
7471
 
7052
7472
  .MetricInput--error:focus-within {
7053
- border-color: var(--secondary);
7473
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
7474
+ }
7475
+
7476
+ .MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
7054
7477
  outline: var(--border-width-05) solid var(--alert);
7055
- outline-offset: var(--spacing-2-5);
7478
+ outline-offset: var(--spacing-05);
7056
7479
  }
7057
7480
 
7058
7481
  .MetricInput--error:focus-within .MetricInput-icon {
7059
7482
  color: var(--alert);
7060
7483
  }
7061
7484
 
7485
+ /* Content wrapper — holds icon, prefix, input, suffix */
7486
+ .MetricInput-content {
7487
+ flex: 1;
7488
+ display: flex;
7489
+ align-items: center;
7490
+ min-width: 0;
7491
+ overflow: hidden;
7492
+ }
7493
+
7494
+ .MetricInput-content--regular {
7495
+ padding: var(--spacing-15) var(--spacing-15);
7496
+ gap: var(--spacing-05);
7497
+ }
7498
+
7499
+ .MetricInput-content--large {
7500
+ padding: var(--spacing-20) var(--spacing-15);
7501
+ gap: var(--spacing-15);
7502
+ }
7503
+
7504
+ .MetricInput-content--small {
7505
+ padding: var(--spacing-10) var(--spacing-15);
7506
+ gap: var(--spacing-05);
7507
+ }
7508
+
7062
7509
  .MetricInput-input {
7063
7510
  display: flex;
7064
7511
  width: 100%;
@@ -7130,23 +7577,14 @@ body {
7130
7577
  margin: 0;
7131
7578
  }
7132
7579
 
7133
- .MetricInput-arrowIcons {
7134
- border-left: var(--border);
7135
- box-sizing: border-box;
7136
- border-radius: 0;
7137
- background: transparent;
7138
- display: flex;
7139
- flex-direction: column;
7140
- height: 100%;
7141
- flex-shrink: 0;
7142
- overflow: hidden;
7143
- }
7144
-
7580
+ /* Arrow buttons (decrement on left, increment on right) */
7145
7581
  .MetricInput-arrowButton {
7146
- height: 50%;
7147
- border: none;
7582
+ flex-shrink: 0;
7583
+ align-self: stretch;
7584
+ width: var(--spacing-60);
7148
7585
  background: var(--secondary-light);
7149
7586
  color: var(--inverse);
7587
+ border: none;
7150
7588
  cursor: pointer;
7151
7589
  display: flex;
7152
7590
  align-items: center;
@@ -7156,7 +7594,16 @@ body {
7156
7594
  -webkit-user-select: none;
7157
7595
  -moz-user-select: none;
7158
7596
  user-select: none;
7159
- overflow: hidden;
7597
+ }
7598
+
7599
+ .MetricInput-arrowButton--left {
7600
+ border-right: var(--border);
7601
+ border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
7602
+ }
7603
+
7604
+ .MetricInput-arrowButton--right {
7605
+ border-left: var(--border);
7606
+ border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
7160
7607
  }
7161
7608
 
7162
7609
  .MetricInput-arrowButton:hover {
@@ -7169,16 +7616,44 @@ body {
7169
7616
 
7170
7617
  .MetricInput-arrowButton:focus {
7171
7618
  outline: 0;
7172
- box-shadow: var(--shadow-spread) var(--secondary-shadow);
7173
7619
  }
7174
7620
 
7175
- .MetricInput-arrowIcons--small,
7176
- .MetricInput-arrowIcons--regular {
7177
- width: 20px;
7621
+ .MetricInput-arrowButton:focus-visible {
7622
+ outline: var(--border-width-05) solid var(--primary-focus);
7623
+ outline-offset: var(--spacing-05);
7178
7624
  }
7179
7625
 
7180
- .MetricInput-arrowIcons--large {
7181
- width: var(--spacing-60);
7626
+ @media (forced-colors: active) {
7627
+ /* box-shadow is stripped — restore a real border for the wrapper boundary */
7628
+ .MetricInput {
7629
+ border: var(--border-width-2-5) solid ButtonText;
7630
+ box-shadow: none;
7631
+ }
7632
+
7633
+ .MetricInput--disabled {
7634
+ border-color: GrayText;
7635
+ }
7636
+
7637
+ /* Wrapper focus rings */
7638
+ .MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
7639
+ outline: var(--border-width-05) solid Highlight;
7640
+ outline-offset: var(--spacing-05);
7641
+ }
7642
+
7643
+ .MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
7644
+ outline: var(--border-width-05) solid Highlight;
7645
+ outline-offset: var(--spacing-05);
7646
+ }
7647
+
7648
+ /* Arrow button states */
7649
+ .MetricInput-arrowButton:disabled {
7650
+ color: GrayText;
7651
+ }
7652
+
7653
+ .MetricInput-arrowButton:focus-visible {
7654
+ outline: var(--border-width-05) solid Highlight;
7655
+ outline-offset: var(--spacing-05);
7656
+ }
7182
7657
  }
7183
7658
 
7184
7659
  /* pagination */
@@ -7398,12 +7873,24 @@ body {
7398
7873
  .Link {
7399
7874
  text-decoration: none;
7400
7875
  font-weight: var(--font-weight-medium);
7401
- transition: var(--duration--fast-01) var(--standard-productive-curve);
7876
+ transition: color var(--duration--fast-01) var(--standard-productive-curve),
7877
+ border-color var(--duration--fast-01) var(--standard-productive-curve);
7402
7878
  box-sizing: border-box;
7879
+ }
7880
+
7881
+ @media (prefers-reduced-motion: reduce) {
7882
+ .Link {
7883
+ transition: none;
7884
+ }
7885
+ }
7886
+
7887
+ .Link-text {
7888
+ display: inline-flex;
7889
+ vertical-align: middle;
7403
7890
  border-bottom: var(--border-width-2-5) solid currentColor;
7404
7891
  }
7405
7892
 
7406
- .Link:focus {
7893
+ .Link:focus-visible {
7407
7894
  outline: var(--border-width-05) solid var(--primary-focus);
7408
7895
  outline-offset: var(--spacing-05);
7409
7896
  border-radius: var(--border-radius-10);
@@ -7429,24 +7916,32 @@ body {
7429
7916
  border-bottom-color: transparent;
7430
7917
  }
7431
7918
 
7919
+ .Link-text--subtle {
7920
+ border-bottom-color: transparent;
7921
+ }
7922
+
7432
7923
  .Link--default:hover {
7433
- border-bottom: var(--border-width-2-5) solid var(--primary-dark);
7434
7924
  color: var(--primary-dark);
7435
7925
  }
7436
7926
 
7437
7927
  .Link--subtle:hover {
7438
- border-bottom: var(--border-width-2-5) solid var(--inverse-light);
7439
7928
  color: var(--inverse-light);
7440
7929
  }
7441
7930
 
7931
+ .Link--subtle:hover .Link-text--subtle {
7932
+ border-bottom-color: currentColor;
7933
+ }
7934
+
7442
7935
  .Link--default:active {
7443
7936
  color: var(--primary-darker);
7444
- border-bottom: var(--border-width-2-5) solid currentColor;
7445
7937
  }
7446
7938
 
7447
7939
  .Link--subtle:active {
7448
7940
  color: var(--inverse);
7449
- border-bottom: var(--border-width-2-5) solid transparent;
7941
+ }
7942
+
7943
+ .Link--subtle:active .Link-text--subtle {
7944
+ border-bottom-color: transparent;
7450
7945
  }
7451
7946
 
7452
7947
  .Link--button-reset {
@@ -7469,6 +7964,39 @@ body {
7469
7964
  pointer-events: none;
7470
7965
  }
7471
7966
 
7967
+ .Link-infoIconWrapper {
7968
+ display: inline-flex;
7969
+ vertical-align: middle;
7970
+ transform: translateY(calc(-1 * var(--spacing-15)));
7971
+ margin-left: var(--spacing-2-5);
7972
+ width: var(--spacing-30);
7973
+ height: var(--spacing-30);
7974
+ box-sizing: border-box;
7975
+ border-radius: var(--border-radius-full);
7976
+ align-items: center;
7977
+ justify-content: center;
7978
+ background: transparent;
7979
+ border: none;
7980
+ }
7981
+
7982
+ .Link-infoIcon {
7983
+ color: var(--text-subtle);
7984
+ pointer-events: none;
7985
+ }
7986
+
7987
+ .Link-infoIcon--default {
7988
+ color: var(--primary);
7989
+ }
7990
+
7991
+ .Link-infoIcon--subtle {
7992
+ color: var(--inverse-light);
7993
+ }
7994
+
7995
+ .Link-tooltip--disabled {
7996
+ pointer-events: auto;
7997
+ cursor: not-allowed;
7998
+ }
7999
+
7472
8000
  .Message {
7473
8001
  display: flex;
7474
8002
  flex-direction: row;
@@ -7486,12 +8014,12 @@ body {
7486
8014
 
7487
8015
  .Message--alert {
7488
8016
  border-color: var(--alert);
7489
- background-color: rgba(214, 36, 0, 0.04);
8017
+ background-color: rgba(189, 28, 0, 0.04);
7490
8018
  }
7491
8019
 
7492
8020
  .Message--success {
7493
8021
  border-color: var(--success);
7494
- background-color: rgba(0, 122, 14, 0.04);
8022
+ background-color: rgba(0, 128, 0, 0.04);
7495
8023
  }
7496
8024
 
7497
8025
  .Message--info {
@@ -7501,7 +8029,7 @@ body {
7501
8029
 
7502
8030
  .Message--warning {
7503
8031
  border-color: var(--accent1);
7504
- background-color: rgba(229, 111, 0, 0.04);
8032
+ background-color: rgba(189, 91, 0, 0.04);
7505
8033
  }
7506
8034
 
7507
8035
  .Message-icon--regular {
@@ -8164,6 +8692,27 @@ body {
8164
8692
  box-shadow: none;
8165
8693
  }
8166
8694
 
8695
+ @media (forced-colors: active) {
8696
+ /* Handle elevation comes from box-shadow only — add a real border so it stays visible */
8697
+ .Slider-handle {
8698
+ border: var(--border-width-05) solid ButtonText;
8699
+ box-shadow: none;
8700
+ }
8701
+
8702
+ /* Restore focus ring on the handle (outline:none is set unconditionally) */
8703
+ .Slider-handle:focus,
8704
+ .Slider-handle:focus-visible {
8705
+ outline: var(--border-width-05) solid Highlight;
8706
+ outline-offset: var(--spacing-05);
8707
+ }
8708
+
8709
+ /* Filled portion of the track */
8710
+ .Slider-progress--inRange {
8711
+ forced-color-adjust: none;
8712
+ background: Highlight;
8713
+ }
8714
+ }
8715
+
8167
8716
  .Tooltip {
8168
8717
  max-width: var(--spacing-640);
8169
8718
  padding: var(--spacing-10) var(--spacing-20);
@@ -8181,6 +8730,7 @@ body {
8181
8730
  }
8182
8731
 
8183
8732
  .Tooltip-text {
8733
+ white-space: pre-wrap;
8184
8734
  word-break: break-word;
8185
8735
  -webkit-hyphens: auto;
8186
8736
  hyphens: auto;
@@ -8855,6 +9405,45 @@ body {
8855
9405
  border-color: transparent;
8856
9406
  }
8857
9407
 
9408
+ @media (forced-colors: active) {
9409
+ .Switch-wrapper {
9410
+ outline: var(--border-width-2-5) solid ButtonText;
9411
+ outline-offset: calc(-1 * var(--border-width-2-5));
9412
+ box-shadow: none;
9413
+ }
9414
+
9415
+ /* Checked (enabled) track: use Highlight to distinguish on-state */
9416
+ .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled) {
9417
+ background-color: Highlight;
9418
+ }
9419
+
9420
+ .Switch-wrapper--checkedDisabled {
9421
+ background-color: ButtonFace;
9422
+ outline-color: GrayText;
9423
+ }
9424
+
9425
+ /* Thumb: box-shadow is removed in forced-colors mode — ensure the existing border is visible */
9426
+ .Switch-wrapper:before {
9427
+ box-shadow: none;
9428
+ border-color: ButtonText;
9429
+ }
9430
+
9431
+ /* In the checked (enabled) state the thumb border is transparent — make it contrast against the track */
9432
+ .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled):before {
9433
+ border-color: HighlightText;
9434
+ }
9435
+
9436
+ /* Checked-disabled thumb: use GrayText so it reads as disabled */
9437
+ .Switch-wrapper--checkedDisabled:before {
9438
+ border-color: GrayText;
9439
+ }
9440
+
9441
+ /* Unchecked-disabled thumb */
9442
+ .Switch-wrapper--disabled:before {
9443
+ border-color: GrayText;
9444
+ }
9445
+ }
9446
+
8858
9447
  /* Textarea */
8859
9448
 
8860
9449
  .Textarea {
@@ -9123,6 +9712,16 @@ body {
9123
9712
  color: var(--text-white);
9124
9713
  }
9125
9714
 
9715
+ @media (forced-colors: active) {
9716
+ /* Close icon focus ring is conveyed via box-shadow only — replace with outline */
9717
+ .Toast-close-icon:focus,
9718
+ .Toast-close-icon:focus-visible {
9719
+ outline: var(--border-width-05) solid Highlight;
9720
+ outline-offset: var(--spacing-05);
9721
+ box-shadow: none;
9722
+ }
9723
+ }
9724
+
9126
9725
  .Popover {
9127
9726
  border-radius: var(--border-radius-10);
9128
9727
  position: absolute;
@@ -9559,6 +10158,21 @@ body {
9559
10158
  opacity: var(--opacity-10);
9560
10159
  }
9561
10160
 
10161
+ @media (forced-colors: active) {
10162
+ /* Active nav item uses box-shadow as its visible ring — replace with a real border */
10163
+ .HorizontalNav-menu--active {
10164
+ border: var(--border-width-2-5) solid Highlight;
10165
+ box-shadow: none;
10166
+ }
10167
+
10168
+ .HorizontalNav-menu--active:active,
10169
+ .HorizontalNav-menu--active:focus-visible:active,
10170
+ .HorizontalNav-menu--active:focus:active {
10171
+ border-color: Highlight;
10172
+ box-shadow: none;
10173
+ }
10174
+ }
10175
+
9562
10176
  .OverlayHeader {
9563
10177
  box-sizing: border-box;
9564
10178
  margin-left: var(--spacing-60);
@@ -9697,6 +10311,14 @@ body {
9697
10311
  outline: none;
9698
10312
  }
9699
10313
 
10314
+ @media (forced-colors: active) {
10315
+ /* box-shadow is the only visual boundary; add a real border so the modal is visible */
10316
+ .Modal {
10317
+ border: var(--border-width-2-5) solid ButtonText;
10318
+ box-shadow: none;
10319
+ }
10320
+ }
10321
+
9700
10322
  @keyframes fullscreenModal-open {
9701
10323
  from {
9702
10324
  opacity: 0;
@@ -9878,6 +10500,14 @@ body {
9878
10500
  outline: none;
9879
10501
  }
9880
10502
 
10503
+ @media (forced-colors: active) {
10504
+ /* box-shadow is the only visual boundary; add a real left border so the panel edge is visible */
10505
+ .Sidesheet {
10506
+ border-left: var(--border-width-2-5) solid ButtonText;
10507
+ box-shadow: none;
10508
+ }
10509
+ }
10510
+
9881
10511
  .Collapsible-wrapper {
9882
10512
  position: relative;
9883
10513
  z-index: 600;
@@ -10575,6 +11205,38 @@ body {
10575
11205
  box-sizing: border-box;
10576
11206
  }
10577
11207
 
11208
+ @media (forced-colors: active) {
11209
+ /* Dismissible tab close icons have outline:none unconditionally — restore focus ring in forced-colors mode */
11210
+ .DismissibleRegularTab-icon--right:focus-visible,
11211
+ .DismissibleSmallTab-icon--right:focus-visible {
11212
+ outline: var(--border-width-05) solid Highlight;
11213
+ }
11214
+
11215
+ .Tab--active::after {
11216
+ background-color: transparent;
11217
+ border-top: var(--spacing-05) solid Highlight;
11218
+ box-sizing: border-box;
11219
+ }
11220
+
11221
+ /* Disabled tab pills use opacity — use GrayText instead */
11222
+ .Tab-pills--disabled {
11223
+ opacity: 1;
11224
+ color: GrayText;
11225
+ }
11226
+ }
11227
+
11228
+ .Dropzone-srOnly {
11229
+ position: absolute;
11230
+ width: var(--spacing-2-5);
11231
+ height: var(--spacing-2-5);
11232
+ padding: 0;
11233
+ margin: calc(-1 * var(--spacing-2-5));
11234
+ overflow: hidden;
11235
+ clip: rect(0, 0, 0, 0);
11236
+ white-space: nowrap;
11237
+ border: 0;
11238
+ }
11239
+
10578
11240
  .Dropzone {
10579
11241
  display: flex;
10580
11242
  align-items: center;
@@ -10755,6 +11417,30 @@ body {
10755
11417
  fill: var(--alert);
10756
11418
  }
10757
11419
 
11420
+ @media (forced-colors: active) {
11421
+ .Dropzone {
11422
+ border: var(--border-width-05) dashed ButtonText;
11423
+ background-image: none;
11424
+ background-color: Canvas;
11425
+ }
11426
+
11427
+ .Dropzone--active {
11428
+ border: var(--border-width-05) dashed Highlight;
11429
+ background-image: none;
11430
+ background-color: Canvas;
11431
+ }
11432
+
11433
+ .Dropzone--error {
11434
+ border: var(--border-width-05) dashed ButtonText;
11435
+ background-image: none;
11436
+ }
11437
+
11438
+ .Dropzone--disabled {
11439
+ border: var(--border-width-05) dashed GrayText;
11440
+ background-image: none;
11441
+ }
11442
+ }
11443
+
10758
11444
  .FileUploader {
10759
11445
  display: flex;
10760
11446
  flex-direction: column;
@@ -10826,8 +11512,9 @@ body {
10826
11512
  }
10827
11513
 
10828
11514
  .Table-Header-Label--hide {
10829
- animation: fadeOut var(--duration--fast-02) var(--exit-productive-curve);
11515
+ animation: tableHeaderFadeOut var(--duration--fast-02) var(--exit-productive-curve);
10830
11516
  animation-fill-mode: forwards;
11517
+ pointer-events: none;
10831
11518
  }
10832
11519
 
10833
11520
  .Table-Header-Label--show {
@@ -10835,6 +11522,36 @@ body {
10835
11522
  animation-fill-mode: forwards;
10836
11523
  }
10837
11524
 
11525
+ @keyframes tableHeaderFadeOut {
11526
+ from {
11527
+ opacity: 1;
11528
+ visibility: visible;
11529
+ }
11530
+ to {
11531
+ opacity: 0;
11532
+ visibility: hidden;
11533
+ }
11534
+ }
11535
+
11536
+ @media (prefers-reduced-motion: reduce) {
11537
+ .Table-Header-Label--hide,
11538
+ .Table-Header-Label--show {
11539
+ animation-duration: 0.001ms;
11540
+ }
11541
+ }
11542
+
11543
+ .Table-srOnly {
11544
+ position: absolute;
11545
+ width: var(--spacing-2-5);
11546
+ height: var(--spacing-2-5);
11547
+ padding: 0;
11548
+ margin: calc(-1 * var(--spacing-2-5));
11549
+ overflow: hidden;
11550
+ clip: rect(0, 0, 0, 0);
11551
+ white-space: nowrap;
11552
+ border: 0;
11553
+ }
11554
+
10838
11555
  /* Navigation */
10839
11556
 
10840
11557
  .Navigation {
@@ -11190,7 +11907,8 @@ body {
11190
11907
  font-size: var(--font-size-s);
11191
11908
  }
11192
11909
 
11193
- .LinkButton--default {
11910
+ .LinkButton--default,
11911
+ .LinkButton--default-disabled {
11194
11912
  color: var(--primary);
11195
11913
  }
11196
11914
 
@@ -11202,21 +11920,25 @@ body {
11202
11920
  color: var(--primary-darker);
11203
11921
  }
11204
11922
 
11205
- .LinkButton--default:focus,
11206
- .LinkButton--default:focus-visible {
11923
+ .LinkButton--default:focus-visible,
11924
+ .LinkButton--default-disabled:focus-visible {
11207
11925
  outline: var(--border-width-05) solid var(--primary-focus);
11208
11926
  outline-offset: var(--spacing-05);
11209
11927
  }
11210
11928
 
11211
- .LinkButton--default:disabled {
11929
+ .LinkButton--default-disabled {
11212
11930
  cursor: not-allowed;
11213
- pointer-events: none;
11214
11931
  color: var(--primary-lighter);
11215
11932
  }
11216
11933
 
11934
+ .LinkButton-infoIcon--default {
11935
+ color: var(--text-link);
11936
+ }
11937
+
11217
11938
  /* Subtle Appearance */
11218
11939
 
11219
- .LinkButton--subtle {
11940
+ .LinkButton--subtle,
11941
+ .LinkButton--subtle-disabled {
11220
11942
  color: var(--inverse-lighter);
11221
11943
  }
11222
11944
 
@@ -11228,18 +11950,85 @@ body {
11228
11950
  color: var(--inverse);
11229
11951
  }
11230
11952
 
11231
- .LinkButton--subtle:focus,
11232
- .LinkButton--subtle:focus-visible {
11953
+ .LinkButton--subtle:focus-visible,
11954
+ .LinkButton--subtle-disabled:focus-visible {
11233
11955
  outline: var(--border-width-05) solid var(--primary-focus);
11234
11956
  outline-offset: var(--spacing-05);
11235
11957
  }
11236
11958
 
11237
- .LinkButton--subtle:disabled {
11959
+ .LinkButton--subtle-disabled {
11238
11960
  cursor: not-allowed;
11239
- pointer-events: none;
11240
11961
  color: var(--inverse-lightest);
11241
11962
  }
11242
11963
 
11964
+ .LinkButton-infoIcon--subtle {
11965
+ color: var(--inverse-light);
11966
+ }
11967
+
11968
+ .LinkButton-infoIconWrapper {
11969
+ position: absolute;
11970
+ top: calc(-1 * var(--spacing-05));
11971
+ right: calc(-1 * var(--spacing-30));
11972
+ width: var(--spacing-30);
11973
+ height: var(--spacing-30);
11974
+ box-sizing: border-box;
11975
+ border-radius: var(--border-radius-full);
11976
+ display: flex;
11977
+ align-items: center;
11978
+ justify-content: center;
11979
+ overflow: hidden;
11980
+ border: none;
11981
+ background: transparent;
11982
+ pointer-events: none;
11983
+ }
11984
+
11985
+ .LinkButton-infoIconWrapper--tiny {
11986
+ top: calc(-1 * var(--spacing-05));
11987
+ right: calc(-1 * var(--spacing-30));
11988
+ }
11989
+
11990
+ .LinkButton-infoIconWrapper--regularIcon {
11991
+ top: 0px;
11992
+ right: calc(-1 * var(--spacing-05));
11993
+ }
11994
+
11995
+ .LinkButton-infoIconWrapper--tinyIcon {
11996
+ top: calc(-1 * var(--spacing-05));
11997
+ right: calc(-1 * var(--spacing-05));
11998
+ }
11999
+
12000
+ .LinkButton-withInfo {
12001
+ padding-right: var(--spacing-20);
12002
+ }
12003
+
12004
+ .LinkButton-infoIconWrapper--withChildren {
12005
+ right: calc(-1 * var(--spacing-30) + var(--spacing-20));
12006
+ }
12007
+
12008
+ .LinkButton-infoIconWrapper--iconOnly {
12009
+ right: calc(-1 * var(--spacing-10) + var(--spacing-20));
12010
+ }
12011
+
12012
+ .LinkButton-infoIconWrapper--tinyIcon {
12013
+ right: calc(-1 * var(--spacing-05) + var(--spacing-20));
12014
+ }
12015
+
12016
+ .LinkButton-infoIcon {
12017
+ color: inherit;
12018
+ }
12019
+
12020
+ .LinkButton-srOnly {
12021
+ position: absolute;
12022
+ width: var(--spacing-2-5);
12023
+ height: var(--spacing-2-5);
12024
+ padding: 0;
12025
+ margin: calc(-1 * var(--spacing-2-5));
12026
+ overflow: hidden;
12027
+ clip: rect(0, 0, 0, 0);
12028
+ white-space: nowrap;
12029
+ border: 0;
12030
+ }
12031
+
11243
12032
  .ActionCard {
11244
12033
  border-radius: var(--border-radius-10);
11245
12034
  width: 100%;
@@ -11383,6 +12172,44 @@ body {
11383
12172
  opacity: var(--opacity-10);
11384
12173
  }
11385
12174
 
12175
+ @media (forced-colors: active) {
12176
+ /* All states use inset box-shadow as the sole border — replace with real borders */
12177
+ .Selection-card--default,
12178
+ .Selection-card--default:hover,
12179
+ .Selection-card--default:active,
12180
+ .Selection-card--default-disabled {
12181
+ border: var(--border-width-2-5) solid ButtonText;
12182
+ box-shadow: none;
12183
+ }
12184
+
12185
+ /* Interactive selected states — use Highlight to signal selection */
12186
+ .Selection-card--selected,
12187
+ .Selection-card--selected:hover,
12188
+ .Selection-card--selected:active {
12189
+ border: var(--border-width-2-5) solid Highlight;
12190
+ box-shadow: none;
12191
+ }
12192
+
12193
+ .Selection-card--selected-disabled {
12194
+ border: var(--border-width-2-5) solid GrayText;
12195
+ box-shadow: none;
12196
+ }
12197
+
12198
+ .Selection-card--default:focus,
12199
+ .Selection-card--default:focus-visible,
12200
+ .Selection-card--selected:focus,
12201
+ .Selection-card--selected:focus-visible {
12202
+ outline: var(--border-width-05) solid Highlight;
12203
+ outline-offset: var(--spacing-05);
12204
+ box-shadow: none;
12205
+ }
12206
+
12207
+ /* Disabled: suppress the focus indicator */
12208
+ .Selection-card--disabled {
12209
+ outline: none;
12210
+ }
12211
+ }
12212
+
11386
12213
  .Listbox {
11387
12214
  margin: 0;
11388
12215
  padding: 0;
@@ -11459,6 +12286,11 @@ body {
11459
12286
  clip-path: polygon(0 0, 100% 0, 0 100%);
11460
12287
  }
11461
12288
 
12289
+ .Listbox-item--tight.Listbox-item--selected::before {
12290
+ top: var(--spacing-05);
12291
+ left: var(--spacing-05);
12292
+ }
12293
+
11462
12294
  .Listbox-item--selected:hover {
11463
12295
  background: rgba(139, 202, 254, 0.48);
11464
12296
  }
@@ -11507,6 +12339,11 @@ body {
11507
12339
  clip-path: polygon(0 0, 100% 0, 0 100%);
11508
12340
  }
11509
12341
 
12342
+ .Listbox-item--tight.Listbox-item--activated::before {
12343
+ top: var(--spacing-05);
12344
+ left: var(--spacing-05);
12345
+ }
12346
+
11510
12347
  /* Listbox type - description */
11511
12348
 
11512
12349
  .Listbox-item--description:focus-visible {
@@ -11522,6 +12359,10 @@ body {
11522
12359
 
11523
12360
  /* Listbox type - draggable */
11524
12361
 
12362
+ .Listbox-item--draggable:hover {
12363
+ background-color: var(--secondary-lightest);
12364
+ }
12365
+
11525
12366
  .Listbox-item--draggable:focus-visible {
11526
12367
  outline: var(--border-width-05) solid var(--primary-focus);
11527
12368
  outline-offset: calc(-1 * var(--border-width-05));
@@ -11529,15 +12370,85 @@ body {
11529
12370
 
11530
12371
  .Listbox-item--drag-icon {
11531
12372
  cursor: grab;
11532
- margin-right: var(--spacing-20);
12373
+ padding: var(--spacing-10);
12374
+ margin-right: calc(var(--spacing-20) - var(--spacing-10));
12375
+ margin-left: calc(-1 * var(--spacing-10));
12376
+ border-radius: var(--border-radius-10);
12377
+ transition: background-color var(--duration--moderate-01) var(--standard-productive-curve),
12378
+ color var(--duration--moderate-01) var(--standard-productive-curve),
12379
+ box-shadow var(--duration--moderate-01) var(--standard-productive-curve);
12380
+ }
12381
+
12382
+ .Listbox-item--drag-icon:focus-visible {
12383
+ outline: var(--border-width-05) solid var(--primary-focus);
12384
+ outline-offset: var(--spacing-05);
11533
12385
  }
11534
12386
 
11535
12387
  .Listbox-item--drag-icon:hover {
12388
+ background-color: var(--secondary);
11536
12389
  color: var(--inverse);
11537
12390
  }
11538
12391
 
11539
12392
  .Listbox-item--drag-icon:active {
12393
+ background-color: var(--secondary-dark);
12394
+ color: var(--primary);
12395
+ }
12396
+
12397
+ /* Drag and reorder interaction states */
12398
+
12399
+ .Listbox-item--sticky-picked,
12400
+ .Listbox-item--drag-picked {
12401
+ background-color: var(--text-white);
12402
+ box-shadow: var(--shadow-l);
12403
+ rotate: 0.5deg;
12404
+ cursor: grabbing;
12405
+ z-index: 1000;
12406
+ position: relative;
12407
+ }
12408
+
12409
+ .Listbox-item--sticky-picked .Listbox-item--selected,
12410
+ .Listbox-item--drag-picked .Listbox-item--selected {
12411
+ background-color: rgba(214, 238, 255, 0.48);
12412
+ }
12413
+
12414
+ .Listbox-item--sticky-picked .Listbox-item--drag-icon {
12415
+ background-color: var(--primary);
12416
+ color: var(--text-white);
12417
+ }
12418
+
12419
+ .Listbox-item--drag-picked .Listbox-item--drag-icon {
12420
+ background-color: var(--primary-ultra-light);
11540
12421
  color: var(--primary);
12422
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
12423
+ }
12424
+
12425
+ .Listbox-aria-live {
12426
+ position: absolute;
12427
+ width: var(--spacing-2-5);
12428
+ height: var(--spacing-2-5);
12429
+ padding: 0;
12430
+ margin: calc(-1 * var(--spacing-2-5));
12431
+ overflow: hidden;
12432
+ clip: rect(0, 0, 0, 0);
12433
+ white-space: nowrap;
12434
+ border: 0;
12435
+ }
12436
+
12437
+ @media (forced-colors: active) {
12438
+ .Listbox-item--description:focus-visible {
12439
+ outline: var(--border-width-05) solid Highlight;
12440
+ outline-offset: calc(-1 * var(--border-width-05));
12441
+ }
12442
+
12443
+ .Listbox-item--disabled {
12444
+ opacity: 1;
12445
+ color: GrayText;
12446
+ }
12447
+
12448
+ .Listbox-item--selected::before,
12449
+ .Listbox-item--activated::before {
12450
+ background-color: Highlight;
12451
+ }
11541
12452
  }
11542
12453
 
11543
12454
  /* Selection avatar group */
@@ -11736,6 +12647,28 @@ body {
11736
12647
  box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
11737
12648
  }
11738
12649
 
12650
+ @media (forced-colors: active) {
12651
+ .SelectionAvatarGroup-item--selected:focus,
12652
+ .SelectionAvatarGroup-item--selected:focus-visible {
12653
+ outline: var(--border-width-05) solid Highlight !important;
12654
+ outline-offset: var(--spacing-2-5);
12655
+ box-shadow: none !important;
12656
+ }
12657
+
12658
+ .SelectionAvatarCount--selected:focus,
12659
+ .SelectionAvatarCount--selected:focus-visible {
12660
+ outline: var(--border-width-05) solid Highlight !important;
12661
+ outline-offset: var(--spacing-2-5);
12662
+ box-shadow: none !important;
12663
+ }
12664
+
12665
+ /* The inner search input uses outline:none !important — restore it in forced-colors mode */
12666
+ .SelectionAvatar-input:focus-within {
12667
+ outline: var(--border-width-05) solid Highlight !important;
12668
+ outline-offset: var(--spacing-05);
12669
+ }
12670
+ }
12671
+
11739
12672
  .Select-input {
11740
12673
  min-width: unset !important;
11741
12674
  background: transparent;
@@ -11939,6 +12872,13 @@ body {
11939
12872
  border: var(--border-width-2-5) solid var(--alert) !important;
11940
12873
  }
11941
12874
 
12875
+ @media (forced-colors: active) {
12876
+ .Select-input:focus-within {
12877
+ outline: var(--border-width-05) solid Highlight !important;
12878
+ outline-offset: var(--spacing-05);
12879
+ }
12880
+ }
12881
+
11942
12882
  .Menu {
11943
12883
  overflow-y: auto !important;
11944
12884
  padding-top: var(--spacing-10);
@@ -12009,7 +12949,7 @@ body {
12009
12949
  height: var(--spacing-10);
12010
12950
  border-radius: var(--border-radius-full);
12011
12951
  margin: 0 var(--spacing-20);
12012
- background: var(--inverse-lightest);
12952
+ background: var(--inverse-lighter);
12013
12953
  }
12014
12954
 
12015
12955
  .ChatBubble-box--noSuccess {
@@ -12054,17 +12994,24 @@ body {
12054
12994
  flex: 0 0 auto;
12055
12995
  }
12056
12996
 
12997
+ .ChatBubble-actionBarWrapper--hidden {
12998
+ width: 0;
12999
+ overflow: hidden;
13000
+ }
13001
+
12057
13002
  .ChatInput {
12058
13003
  display: flex;
12059
13004
  flex-direction: row;
12060
13005
  align-items: center;
12061
- border: var(--border-width-2-5) solid var(--secondary);
13006
+ border: var(--border-width-2-5) solid var(--secondary-dark);
12062
13007
  padding: var(--spacing-20);
12063
13008
  border-radius: var(--border-radius-10);
12064
13009
  background: var(--white);
12065
13010
  max-width: 100%;
12066
13011
  min-width: var(--spacing-640);
12067
- transition: all var(--duration--slow-01) var(--standard-productive-curve);
13012
+ transition: background-color var(--duration--slow-01) var(--standard-productive-curve),
13013
+ border-color var(--duration--slow-01) var(--standard-productive-curve),
13014
+ outline var(--duration--slow-01) var(--standard-productive-curve);
12068
13015
  max-height: var(--spacing-440);
12069
13016
  position: relative;
12070
13017
  box-sizing: border-box;
@@ -12134,7 +13081,8 @@ body {
12134
13081
  .ChatInput-actions {
12135
13082
  display: flex;
12136
13083
  flex-shrink: 0;
12137
- transition: all var(--duration--slow-01) var(--standard-productive-curve);
13084
+ transition: margin var(--duration--slow-01) var(--standard-productive-curve),
13085
+ width var(--duration--slow-01) var(--standard-productive-curve);
12138
13086
  margin-left: var(--spacing-20);
12139
13087
  align-items: center;
12140
13088
  }
@@ -12146,6 +13094,14 @@ body {
12146
13094
  margin-left: 0;
12147
13095
  }
12148
13096
 
13097
+ @media (prefers-reduced-motion: reduce) {
13098
+ .ChatInput,
13099
+ .ChatInput-actions,
13100
+ .ChatInput-textarea {
13101
+ transition: none;
13102
+ }
13103
+ }
13104
+
12149
13105
  .Meter {
12150
13106
  display: flex;
12151
13107
  align-items: center;
@@ -12289,7 +13245,7 @@ body {
12289
13245
  outline: none;
12290
13246
  }
12291
13247
 
12292
- .SegmentedControl-segment:focus-visible:not(.SegmentedControl-segment--selected) {
13248
+ .SegmentedControl-segment:focus-visible {
12293
13249
  outline: var(--border-width-05) solid var(--primary-focus);
12294
13250
  outline-offset: var(--spacing-05);
12295
13251
  border-radius: var(--border-radius-10);
@@ -12469,41 +13425,21 @@ body {
12469
13425
  display: flex;
12470
13426
  align-items: center;
12471
13427
  color: var(--inverse);
12472
- background: linear-gradient(
12473
- 277deg,
12474
- rgba(227, 28, 121, 0.15) 0%,
12475
- rgba(231, 56, 79, 0.24) 28%,
12476
- rgba(240, 125, 0, 0.15) 100%
12477
- );
13428
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12478
13429
  }
12479
13430
 
12480
13431
  .AIButton:hover {
12481
- background: linear-gradient(
12482
- 277deg,
12483
- rgba(227, 28, 121, 0.2) 0%,
12484
- rgba(231, 56, 79, 0.32) 28%,
12485
- rgba(240, 125, 0, 0.2) 100%
12486
- );
13432
+ background: linear-gradient(116deg, #fbe1c9 14.17%, #f8c5c6 50.06%, #f9cbdc 85.01%);
12487
13433
  }
12488
13434
 
12489
13435
  .AIButton:active {
12490
- background: linear-gradient(
12491
- 277deg,
12492
- rgba(227, 28, 121, 0.31) 0%,
12493
- rgba(231, 56, 79, 0.48) 28%,
12494
- rgba(240, 125, 0, 0.31) 100%
12495
- );
13436
+ background: linear-gradient(106deg, #fad1ae 20.06%, #f5aea9 44.48%, #f4a0ad 67.83%, #f6b3ce 86.55%);
12496
13437
  }
12497
13438
 
12498
13439
  .AIButton:disabled {
12499
13440
  cursor: not-allowed;
12500
13441
  opacity: var(--opacity-10);
12501
- background: linear-gradient(
12502
- 277deg,
12503
- rgba(227, 28, 121, 0.15) 0%,
12504
- rgba(231, 56, 79, 0.24) 28%,
12505
- rgba(240, 125, 0, 0.15) 100%
12506
- );
13442
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12507
13443
  }
12508
13444
 
12509
13445
  .AIButton:focus {
@@ -12539,22 +13475,12 @@ body {
12539
13475
  }
12540
13476
 
12541
13477
  .AIIconButton:hover {
12542
- background: linear-gradient(
12543
- 315deg,
12544
- rgba(227, 28, 121, 0.2) 0%,
12545
- rgba(231, 56, 79, 0.32) 19.79%,
12546
- rgba(240, 125, 0, 0.32) 100%
12547
- );
13478
+ background: linear-gradient(143deg, #fad1b2 10.84%, #f8c4c1 51.71%, #f8c8d7 91.5%);
12548
13479
  color: var(--secondary) !important;
12549
13480
  }
12550
13481
 
12551
13482
  .AIIconButton:active {
12552
- background: linear-gradient(
12553
- 315deg,
12554
- rgba(227, 28, 121, 0.31) 0%,
12555
- rgba(231, 56, 79, 0.48) 19.79%,
12556
- rgba(240, 125, 0, 0.48) 100%
12557
- );
13483
+ background: linear-gradient(144deg, #f7ba8c 14.82%, #f6af98 40.53%, #f5a8a0 55.69%, #f5adc5 79.29%);
12558
13484
  color: var(--secondary-dark) !important;
12559
13485
  }
12560
13486
 
@@ -12616,30 +13542,15 @@ body {
12616
13542
  width: fit-content;
12617
13543
  border: 0;
12618
13544
  position: relative;
12619
- background: linear-gradient(
12620
- 274deg,
12621
- rgba(231, 56, 79, 0.24) 0%,
12622
- rgba(231, 56, 79, 0.24) 19.79%,
12623
- rgba(240, 125, 0, 0.24) 100%
12624
- );
13545
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12625
13546
  }
12626
13547
 
12627
13548
  .AIChip:hover {
12628
- background: linear-gradient(
12629
- 274deg,
12630
- rgba(231, 56, 79, 0.32) 0%,
12631
- rgba(231, 56, 79, 0.32) 19.79%,
12632
- rgba(240, 125, 0, 0.32) 100%
12633
- );
13549
+ background: linear-gradient(108deg, #fad3b0 15.89%, #f9cdb7 33.52%, #f8c6bf 54.17%, #f7bfc7 70.92%);
12634
13550
  }
12635
13551
 
12636
13552
  .AIChip:active {
12637
- background: linear-gradient(
12638
- 274deg,
12639
- rgba(231, 56, 79, 0.48) 0%,
12640
- rgba(231, 56, 79, 0.48) 19.79%,
12641
- rgba(240, 125, 0, 0.48) 100%
12642
- );
13553
+ background: linear-gradient(106deg, #f7bd89 20.06%, #f6b196 44.48%, #f4a4a5 67.83%, #f39faa 86.55%);
12643
13554
  }
12644
13555
 
12645
13556
  .AIChip:focus,
@@ -12669,12 +13580,7 @@ body {
12669
13580
  /* Disabled Chip */
12670
13581
 
12671
13582
  .AIChip--disabled {
12672
- background: linear-gradient(
12673
- 274deg,
12674
- rgba(231, 56, 79, 0.24) 0%,
12675
- rgba(231, 56, 79, 0.24) 19.79%,
12676
- rgba(240, 125, 0, 0.24) 100%
12677
- );
13583
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12678
13584
  }
12679
13585
 
12680
13586
  .AIChip-icon--disabled {
@@ -12689,12 +13595,7 @@ body {
12689
13595
 
12690
13596
  .AIChip:disabled {
12691
13597
  cursor: not-allowed;
12692
- background: linear-gradient(
12693
- 274deg,
12694
- rgba(231, 56, 79, 0.24) 0%,
12695
- rgba(231, 56, 79, 0.24) 19.79%,
12696
- rgba(240, 125, 0, 0.24) 100%
12697
- );
13598
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12698
13599
  }
12699
13600
 
12700
13601
  .AIChip-AIIcon {