@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.
- package/CHANGELOG.md +76 -0
- package/README.md +3 -3
- package/css/dist/index.css +1226 -325
- package/css/dist/index.css.map +1 -1
- package/css/src/ai-components/button.module.css +4 -24
- package/css/src/ai-components/chip.module.css +5 -30
- package/css/src/ai-components/iconButton.module.css +2 -12
- package/css/src/components/avatarGroup.module.css +7 -0
- package/css/src/components/avatarSelection.module.css +22 -0
- package/css/src/components/badge.module.css +3 -3
- package/css/src/components/button.module.css +187 -18
- package/css/src/components/calendar.module.css +49 -0
- package/css/src/components/card.module.css +14 -0
- package/css/src/components/chatBubble.module.css +6 -1
- package/css/src/components/chatInput.module.css +14 -3
- package/css/src/components/chip.module.css +34 -0
- package/css/src/components/dropdown.module.css +7 -0
- package/css/src/components/dropzone.module.css +36 -0
- package/css/src/components/grid.module.css +29 -12
- package/css/src/components/horizontalNav.module.css +15 -0
- package/css/src/components/link.module.css +59 -6
- package/css/src/components/linkButton.module.css +82 -10
- package/css/src/components/listbox.module.css +85 -1
- package/css/src/components/metricInput.module.css +89 -35
- package/css/src/components/modal.module.css +8 -0
- package/css/src/components/segmentedControl.module.css +1 -1
- package/css/src/components/select.module.css +7 -0
- package/css/src/components/selectionCard.module.css +38 -0
- package/css/src/components/sidesheet.module.css +8 -0
- package/css/src/components/slider.module.css +21 -0
- package/css/src/components/switch.module.css +39 -0
- package/css/src/components/table.module.css +32 -1
- package/css/src/components/tabs.module.css +20 -0
- package/css/src/components/timePicker.module.css +4 -0
- package/css/src/components/toast.module.css +10 -0
- package/css/src/components/tooltip.module.css +1 -0
- package/css/src/tokens/index.css +156 -156
- package/css/src/utils/utility.css +4 -0
- package/css/src/variables/index.css +116 -1
- package/dist/brotli/index.js +1 -1
- package/dist/brotli/index.js.br +0 -0
- package/dist/cjs/index.js +1 -1
- package/dist/core/components/atoms/link/Link.d.ts +4 -2
- package/dist/core/components/atoms/linkButton/LinkButton.d.ts +1 -0
- package/dist/core/components/atoms/message/Message.d.ts +1 -0
- package/dist/core/components/atoms/outsideClick/OutsideClick.d.ts +1 -0
- package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts +1 -0
- package/dist/core/components/atoms/progressBar/ProgressBar.d.ts +2 -0
- package/dist/core/components/atoms/progressRing/ProgressRing.d.ts +3 -0
- package/dist/core/components/atoms/segmentedControl/SegmentedControl.d.ts +2 -0
- package/dist/core/components/atoms/toast/Toast.d.ts +3 -0
- package/dist/core/components/molecules/chat/Chat.d.ts +3 -0
- package/dist/core/components/molecules/chat/chatBubble/IncomingBubble.d.ts +1 -0
- package/dist/core/components/molecules/chat/chatBubble/OutgoingBubble.d.ts +1 -0
- package/dist/core/components/molecules/chat/chatInput/ChatInput.d.ts +1 -0
- package/dist/core/components/molecules/chat/unreadMessage/UnreadMessage.d.ts +3 -0
- package/dist/core/components/molecules/dropzone/Dropzone.d.ts +1 -0
- package/dist/core/components/molecules/editableInput/EditableInput.d.ts +4 -0
- package/dist/core/components/molecules/inputMask/InputMask.d.ts +1 -0
- package/dist/core/components/molecules/popover/Popover.d.ts +1 -0
- package/dist/core/components/organisms/grid/Grid.d.ts +1 -0
- package/dist/core/components/organisms/grid/GridContext.d.ts +1 -0
- package/dist/core/components/organisms/grid/VirtualList.d.ts +1 -0
- package/dist/core/components/organisms/listbox/reorderList/Draggable.d.ts +11 -0
- package/dist/core/components/organisms/menu/SubMenuContext.d.ts +1 -0
- package/dist/core/components/organisms/textField/TextFieldCommon.d.ts +1 -0
- package/dist/core/components/organisms/verticalNav/VerticalNav.d.ts +2 -0
- package/dist/esm/index.js +1695 -709
- package/dist/gzip/index.js +1 -1
- package/dist/gzip/index.js.gz +0 -0
- package/dist/index.js +1536 -570
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1216 -315
- package/dist/index.umd.js +1 -1
- package/dist/types/tsconfig.type.tsbuildinfo +152 -114
- package/package.json +1 -1
package/dist/index.umd.css
CHANGED
|
@@ -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: #
|
|
27
|
-
--color-red-200: #
|
|
28
|
-
--color-red-300: #
|
|
29
|
-
--color-red-400: #
|
|
30
|
-
--color-red-500: #
|
|
31
|
-
--color-red-600: #
|
|
32
|
-
--color-red-700: #
|
|
33
|
-
--color-red-800: #
|
|
34
|
-
--color-red-900: #
|
|
35
|
-
--color-red-1000: #
|
|
36
|
-
--color-red-1100: #
|
|
37
|
-
--color-red-1200: #
|
|
38
|
-
--color-red-1300: #
|
|
39
|
-
--color-red-1400: #
|
|
40
|
-
--color-red-1000-4a: rgba(
|
|
41
|
-
--color-red-1000-16a: rgba(
|
|
42
|
-
--color-red-1200-16a: rgba(
|
|
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: #
|
|
46
|
-
--color-green-200: #
|
|
47
|
-
--color-green-300: #
|
|
48
|
-
--color-green-400: #
|
|
49
|
-
--color-green-500: #
|
|
50
|
-
--color-green-600: #
|
|
51
|
-
--color-green-700: #
|
|
52
|
-
--color-green-800: #
|
|
53
|
-
--color-green-900: #
|
|
54
|
-
--color-green-1000: #
|
|
55
|
-
--color-green-1100: #
|
|
56
|
-
--color-green-1200: #
|
|
57
|
-
--color-green-1300: #
|
|
58
|
-
--color-green-1400: #
|
|
59
|
-
--color-green-1000-4a: rgba(0,
|
|
60
|
-
--color-green-1000-16a: rgba(0,
|
|
61
|
-
--color-green-1200-16a: rgba(0, 82,
|
|
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: #
|
|
85
|
-
--color-orange-200: #
|
|
86
|
-
--color-orange-300: #
|
|
87
|
-
--color-orange-400: #
|
|
88
|
-
--color-orange-500: #
|
|
89
|
-
--color-orange-600: #
|
|
90
|
-
--color-orange-700: #
|
|
91
|
-
--color-orange-800: #
|
|
92
|
-
--color-orange-900: #
|
|
93
|
-
--color-orange-1000: #
|
|
94
|
-
--color-orange-1100: #
|
|
95
|
-
--color-orange-1200: #
|
|
96
|
-
--color-orange-1300: #
|
|
97
|
-
--color-orange-1400: #
|
|
98
|
-
--color-orange-1000-4a: rgba(
|
|
99
|
-
--color-orange-1000-16a: rgba(
|
|
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: #
|
|
103
|
-
--color-violet-200: #
|
|
104
|
-
--color-violet-300: #
|
|
105
|
-
--color-violet-400: #
|
|
106
|
-
--color-violet-500: #
|
|
107
|
-
--color-violet-600: #
|
|
108
|
-
--color-violet-700: #
|
|
109
|
-
--color-violet-800: #
|
|
110
|
-
--color-violet-900: #
|
|
111
|
-
--color-violet-1000: #
|
|
112
|
-
--color-violet-1100: #
|
|
113
|
-
--color-violet-1200: #
|
|
114
|
-
--color-violet-1300: #
|
|
115
|
-
--color-violet-1400: #
|
|
116
|
-
--color-violet-1000-16a: rgba(111,
|
|
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: #
|
|
120
|
-
--color-indigo-200: #
|
|
121
|
-
--color-indigo-300: #
|
|
122
|
-
--color-indigo-400: #
|
|
123
|
-
--color-indigo-500: #
|
|
124
|
-
--color-indigo-600: #
|
|
125
|
-
--color-indigo-700: #
|
|
126
|
-
--color-indigo-800: #
|
|
127
|
-
--color-indigo-900: #
|
|
128
|
-
--color-indigo-1000: #
|
|
129
|
-
--color-indigo-1100: #
|
|
130
|
-
--color-indigo-1200: #
|
|
131
|
-
--color-indigo-1300: #
|
|
132
|
-
--color-indigo-1400: #
|
|
133
|
-
--color-indigo-1000-16a: rgba(
|
|
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: #
|
|
137
|
-
--color-lime-200: #
|
|
138
|
-
--color-lime-300: #
|
|
139
|
-
--color-lime-400: #
|
|
140
|
-
--color-lime-500: #
|
|
141
|
-
--color-lime-600: #
|
|
142
|
-
--color-lime-700: #
|
|
143
|
-
--color-lime-800: #
|
|
144
|
-
--color-lime-900: #
|
|
145
|
-
--color-lime-1000: #
|
|
146
|
-
--color-lime-1100: #
|
|
147
|
-
--color-lime-1200: #
|
|
148
|
-
--color-lime-1300: #
|
|
149
|
-
--color-lime-1400: #
|
|
150
|
-
--color-lime-900-16a: rgba(
|
|
151
|
-
--color-lime-1000-16a: rgba(
|
|
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: #
|
|
155
|
-
--color-cyan-200: #
|
|
156
|
-
--color-cyan-300: #
|
|
157
|
-
--color-cyan-400: #
|
|
158
|
-
--color-cyan-500: #
|
|
159
|
-
--color-cyan-600: #
|
|
160
|
-
--color-cyan-700: #
|
|
161
|
-
--color-cyan-800: #
|
|
162
|
-
--color-cyan-900: #
|
|
163
|
-
--color-cyan-1000: #
|
|
164
|
-
--color-cyan-1100: #
|
|
165
|
-
--color-cyan-1200: #
|
|
166
|
-
--color-cyan-1300: #
|
|
167
|
-
--color-cyan-1400: #
|
|
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: #
|
|
171
|
-
--color-sea-200: #
|
|
172
|
-
--color-sea-300: #
|
|
173
|
-
--color-sea-400: #
|
|
174
|
-
--color-sea-500: #
|
|
175
|
-
--color-sea-600: #
|
|
176
|
-
--color-sea-700: #
|
|
177
|
-
--color-sea-800: #
|
|
178
|
-
--color-sea-900: #
|
|
179
|
-
--color-sea-1000: #
|
|
180
|
-
--color-sea-1100: #
|
|
181
|
-
--color-sea-1200: #
|
|
182
|
-
--color-sea-1300: #
|
|
183
|
-
--color-sea-1400: #
|
|
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: #
|
|
187
|
-
--color-magenta-200: #
|
|
188
|
-
--color-magenta-300: #
|
|
189
|
-
--color-magenta-400: #
|
|
190
|
-
--color-magenta-500: #
|
|
191
|
-
--color-magenta-600: #
|
|
192
|
-
--color-magenta-700: #
|
|
193
|
-
--color-magenta-800: #
|
|
194
|
-
--color-magenta-900: #
|
|
195
|
-
--color-magenta-1000: #
|
|
196
|
-
--color-magenta-1100: #
|
|
197
|
-
--color-magenta-1200: #
|
|
198
|
-
--color-magenta-1300: #
|
|
199
|
-
--color-magenta-1400: #
|
|
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: #
|
|
203
|
-
--color-pink-200: #
|
|
204
|
-
--color-pink-300: #
|
|
205
|
-
--color-pink-400: #
|
|
206
|
-
--color-pink-500: #
|
|
207
|
-
--color-pink-600: #
|
|
208
|
-
--color-pink-700: #
|
|
209
|
-
--color-pink-800: #
|
|
210
|
-
--color-pink-900: #
|
|
211
|
-
--color-pink-1000: #
|
|
212
|
-
--color-pink-1100: #
|
|
213
|
-
--color-pink-1200: #
|
|
214
|
-
--color-pink-1300: #
|
|
215
|
-
--color-pink-1400: #
|
|
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-
|
|
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-
|
|
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-
|
|
303
|
-
--nimbu-dark: var(--color-lime-
|
|
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
|
-
/*
|
|
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
|
|
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(--
|
|
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-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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:
|
|
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:
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
7147
|
-
|
|
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
|
-
|
|
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-
|
|
7176
|
-
|
|
7177
|
-
|
|
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
|
-
|
|
7181
|
-
|
|
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
|
-
|
|
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(
|
|
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,
|
|
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(
|
|
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:
|
|
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
|
|
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
|
|
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
|
-
|
|
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-
|
|
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:
|
|
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:
|
|
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
|
|
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 {
|