@innovaccer/design-system 4.22.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 +157 -0
- package/README.md +35 -27
- package/css/dist/index.css +1570 -434
- 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 +12 -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 +196 -27
- package/css/src/components/calendar.module.css +61 -20
- 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 +39 -4
- package/css/src/components/chipInput.module.css +19 -17
- package/css/src/components/dropdown.module.css +50 -14
- package/css/src/components/dropdownButton.module.css +5 -3
- package/css/src/components/dropzone.module.css +36 -0
- package/css/src/components/editableChipInput.module.css +48 -1
- package/css/src/components/editableDropdown.module.css +53 -0
- package/css/src/components/editableInput.module.css +31 -0
- package/css/src/components/grid.module.css +33 -13
- package/css/src/components/horizontalNav.module.css +16 -1
- package/css/src/components/input.module.css +0 -1
- package/css/src/components/label.module.css +12 -0
- package/css/src/components/link.module.css +69 -6
- package/css/src/components/linkButton.module.css +82 -10
- package/css/src/components/listbox.module.css +110 -6
- package/css/src/components/metricInput.module.css +89 -35
- package/css/src/components/modal.module.css +16 -0
- package/css/src/components/navigation.module.css +16 -0
- package/css/src/components/segmentedControl.module.css +1 -1
- package/css/src/components/select.module.css +11 -3
- package/css/src/components/selectionCard.module.css +38 -0
- package/css/src/components/sidesheet.module.css +16 -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 +19 -0
- package/css/src/components/tooltip.module.css +1 -0
- package/css/src/components/verticalNav.module.css +13 -5
- package/css/src/core/utilities.css +0 -23
- 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/accessibility/utils/useAccessibilityProps.d.ts +99 -16
- package/dist/core/components/atoms/_chip/index.d.ts +2 -0
- package/dist/core/components/atoms/_text/index.d.ts +2 -1
- package/dist/core/components/atoms/caption/Caption.d.ts +2 -2
- package/dist/core/components/atoms/chip/Chip.d.ts +2 -0
- package/dist/core/components/atoms/divider/Divider.d.ts +1 -0
- package/dist/core/components/atoms/dropdown/DropdownList.d.ts +2 -1
- package/dist/core/components/atoms/dropdown/option/index.d.ts +13 -4
- package/dist/core/components/atoms/helpText/HelpText.d.ts +1 -0
- package/dist/core/components/atoms/icon/Icon.d.ts +2 -3
- package/dist/core/components/atoms/link/Link.d.ts +4 -2
- package/dist/core/components/atoms/linkButton/LinkButton.d.ts +2 -1
- package/dist/core/components/atoms/message/Message.d.ts +1 -0
- package/dist/core/components/atoms/multiSlider/Handle.d.ts +1 -0
- package/dist/core/components/atoms/multiSlider/index.d.ts +2 -0
- package/dist/core/components/atoms/outsideClick/OutsideClick.d.ts +1 -0
- package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts +51 -50
- package/dist/core/components/atoms/progressBar/ProgressBar.d.ts +3 -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/spinner/Spinner.d.ts +1 -0
- package/dist/core/components/atoms/statusHint/StatusHint.d.ts +2 -2
- 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/chipInput/ChipInput.d.ts +1 -1
- package/dist/core/components/molecules/chipInput/utils.d.ts +2 -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/fileUploader/FileUploaderButton.d.ts +2 -0
- package/dist/core/components/molecules/inputMask/InputMask.d.ts +1 -0
- package/dist/core/components/molecules/modal/Modal.d.ts +1 -0
- package/dist/core/components/molecules/popover/Popover.d.ts +1 -0
- package/dist/core/components/molecules/sidesheet/Sidesheet.d.ts +2 -1
- package/dist/core/components/molecules/stepper/Step.d.ts +1 -0
- package/dist/core/components/organisms/calendar/Calendar.d.ts +4 -3
- package/dist/core/components/organisms/calendar/utils.d.ts +6 -5
- package/dist/core/components/organisms/combobox/Combobox.d.ts +2 -0
- package/dist/core/components/organisms/combobox/ComboboxList.d.ts +1 -0
- package/dist/core/components/organisms/combobox/trigger/ComboboxTrigger.d.ts +2 -0
- package/dist/core/components/organisms/combobox/trigger/MultiselectTrigger.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/inlineMessage/InlineMessage.d.ts +3 -2
- package/dist/core/components/organisms/listbox/Listbox.d.ts +9 -1
- package/dist/core/components/organisms/listbox/listboxItem/ListBody.d.ts +1 -1
- package/dist/core/components/organisms/listbox/listboxItem/ListboxItem.d.ts +2 -0
- package/dist/core/components/organisms/listbox/nestedList/NestedList.d.ts +2 -0
- package/dist/core/components/organisms/listbox/reorderList/Draggable.d.ts +12 -0
- package/dist/core/components/organisms/listbox/reorderList/DraggableList.d.ts +2 -2
- package/dist/core/components/organisms/listbox/reorderList/types.d.ts +2 -0
- package/dist/core/components/organisms/listbox/utils.d.ts +3 -0
- package/dist/core/components/organisms/menu/MenuContext.d.ts +1 -0
- package/dist/core/components/organisms/menu/SubMenuContext.d.ts +1 -0
- package/dist/core/components/organisms/select/Select.d.ts +4 -1
- package/dist/core/components/organisms/select/SelectContext.d.ts +3 -1
- package/dist/core/components/organisms/select/SelectOption.d.ts +1 -0
- package/dist/core/components/organisms/select/SelectTrigger.d.ts +4 -0
- package/dist/core/components/organisms/select/utils.d.ts +7 -2
- package/dist/core/components/organisms/textField/TextFieldCommon.d.ts +1 -0
- package/dist/core/components/organisms/verticalNav/VerticalNav.d.ts +2 -0
- package/dist/core/utils/overlayHelper.d.ts +3 -2
- package/dist/esm/index.js +4343 -1784
- package/dist/gzip/index.js +1 -1
- package/dist/gzip/index.js.gz +0 -0
- package/dist/index.js +4139 -1734
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1558 -422
- package/dist/index.umd.js +1 -1
- package/dist/scripts/setupTest.d.ts +1 -0
- package/dist/types/tsconfig.type.tsbuildinfo +399 -243
- package/package.json +8 -13
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 */
|
|
@@ -775,29 +890,6 @@ body {
|
|
|
775
890
|
animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
|
|
776
891
|
}
|
|
777
892
|
|
|
778
|
-
::-webkit-scrollbar {
|
|
779
|
-
width: 16px;
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
::-webkit-scrollbar-thumb {
|
|
783
|
-
background: var(--secondary-dark);
|
|
784
|
-
border-radius: 8px;
|
|
785
|
-
border: 2px solid transparent;
|
|
786
|
-
background-clip: content-box;
|
|
787
|
-
}
|
|
788
|
-
|
|
789
|
-
::-webkit-scrollbar-thumb:hover {
|
|
790
|
-
background: var(--inverse-lightest);
|
|
791
|
-
border: 2px solid transparent;
|
|
792
|
-
background-clip: content-box;
|
|
793
|
-
}
|
|
794
|
-
|
|
795
|
-
::-webkit-scrollbar-thumb:active {
|
|
796
|
-
background: var(--inverse-lighter);
|
|
797
|
-
border: 2px solid transparent;
|
|
798
|
-
background-clip: content-box;
|
|
799
|
-
}
|
|
800
|
-
|
|
801
893
|
.align-baseline {
|
|
802
894
|
vertical-align: baseline !important;
|
|
803
895
|
}
|
|
@@ -2994,6 +3086,10 @@ body {
|
|
|
2994
3086
|
white-space: pre;
|
|
2995
3087
|
}
|
|
2996
3088
|
|
|
3089
|
+
.white-space-pre-wrap {
|
|
3090
|
+
white-space: pre-wrap;
|
|
3091
|
+
}
|
|
3092
|
+
|
|
2997
3093
|
.bottom-0 {
|
|
2998
3094
|
bottom: 0;
|
|
2999
3095
|
}
|
|
@@ -3348,6 +3444,13 @@ body {
|
|
|
3348
3444
|
pointer-events: auto !important;
|
|
3349
3445
|
}
|
|
3350
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
|
+
|
|
3351
3454
|
@keyframes backdrop-open {
|
|
3352
3455
|
from {
|
|
3353
3456
|
opacity: 0;
|
|
@@ -3445,7 +3548,7 @@ body {
|
|
|
3445
3548
|
}
|
|
3446
3549
|
|
|
3447
3550
|
.Badge--accent1 {
|
|
3448
|
-
background: var(--accent1
|
|
3551
|
+
background: var(--accent1);
|
|
3449
3552
|
color: var(--white);
|
|
3450
3553
|
}
|
|
3451
3554
|
|
|
@@ -3461,7 +3564,7 @@ body {
|
|
|
3461
3564
|
|
|
3462
3565
|
.Badge--accent4 {
|
|
3463
3566
|
background: var(--accent4);
|
|
3464
|
-
color: var(--
|
|
3567
|
+
color: var(--white);
|
|
3465
3568
|
}
|
|
3466
3569
|
|
|
3467
3570
|
.Badge--subtle-primary {
|
|
@@ -3486,7 +3589,7 @@ body {
|
|
|
3486
3589
|
|
|
3487
3590
|
.Badge--subtle-warning {
|
|
3488
3591
|
color: var(--warning-darker);
|
|
3489
|
-
background: var(--warning-
|
|
3592
|
+
background: var(--warning-300);
|
|
3490
3593
|
}
|
|
3491
3594
|
|
|
3492
3595
|
.Badge--subtle-accent1 {
|
|
@@ -3647,11 +3750,11 @@ body {
|
|
|
3647
3750
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
3648
3751
|
}
|
|
3649
3752
|
|
|
3650
|
-
.Button
|
|
3753
|
+
.Button--disabled {
|
|
3651
3754
|
cursor: not-allowed;
|
|
3652
3755
|
}
|
|
3653
3756
|
|
|
3654
|
-
.Button:focus {
|
|
3757
|
+
.Button:focus-visible {
|
|
3655
3758
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
3656
3759
|
outline-offset: var(--spacing-05);
|
|
3657
3760
|
}
|
|
@@ -3731,13 +3834,6 @@ body {
|
|
|
3731
3834
|
margin-left: var(--spacing-15);
|
|
3732
3835
|
}
|
|
3733
3836
|
|
|
3734
|
-
.Button--tiny .Button-icon--left {
|
|
3735
|
-
margin-right: var(--spacing-10);
|
|
3736
|
-
}
|
|
3737
|
-
.Button--tiny .Button-icon--right {
|
|
3738
|
-
margin-left: var(--spacing-10);
|
|
3739
|
-
}
|
|
3740
|
-
|
|
3741
3837
|
.Button--basic {
|
|
3742
3838
|
background: var(--secondary-light);
|
|
3743
3839
|
color: var(--inverse);
|
|
@@ -3751,7 +3847,7 @@ body {
|
|
|
3751
3847
|
background: var(--secondary-dark);
|
|
3752
3848
|
}
|
|
3753
3849
|
|
|
3754
|
-
.Button--basic
|
|
3850
|
+
.Button--basic-disabled {
|
|
3755
3851
|
background: var(--secondary-lighter);
|
|
3756
3852
|
color: var(--inverse-lightest);
|
|
3757
3853
|
}
|
|
@@ -3768,10 +3864,14 @@ body {
|
|
|
3768
3864
|
background: var(--primary-darker);
|
|
3769
3865
|
}
|
|
3770
3866
|
|
|
3771
|
-
.Button--primary
|
|
3867
|
+
.Button--primary-disabled {
|
|
3772
3868
|
background: var(--primary-lighter);
|
|
3773
3869
|
}
|
|
3774
3870
|
|
|
3871
|
+
.Button-infoIcon--primary {
|
|
3872
|
+
color: var(--text-link);
|
|
3873
|
+
}
|
|
3874
|
+
|
|
3775
3875
|
.Button--success {
|
|
3776
3876
|
background: var(--primary);
|
|
3777
3877
|
}
|
|
@@ -3784,10 +3884,14 @@ body {
|
|
|
3784
3884
|
background: var(--primary-darker);
|
|
3785
3885
|
}
|
|
3786
3886
|
|
|
3787
|
-
.Button--success
|
|
3887
|
+
.Button--success-disabled {
|
|
3788
3888
|
background: var(--primary-lighter);
|
|
3789
3889
|
}
|
|
3790
3890
|
|
|
3891
|
+
.Button-infoIcon--success {
|
|
3892
|
+
color: var(--text-link);
|
|
3893
|
+
}
|
|
3894
|
+
|
|
3791
3895
|
.Button--alert {
|
|
3792
3896
|
background: var(--alert);
|
|
3793
3897
|
}
|
|
@@ -3800,10 +3904,14 @@ body {
|
|
|
3800
3904
|
background: var(--alert-darker);
|
|
3801
3905
|
}
|
|
3802
3906
|
|
|
3803
|
-
.Button--alert
|
|
3907
|
+
.Button--alert-disabled {
|
|
3804
3908
|
background: var(--alert-lighter);
|
|
3805
3909
|
}
|
|
3806
3910
|
|
|
3911
|
+
.Button-infoIcon--alert {
|
|
3912
|
+
color: var(--alert);
|
|
3913
|
+
}
|
|
3914
|
+
|
|
3807
3915
|
.Button--transparent {
|
|
3808
3916
|
background: transparent;
|
|
3809
3917
|
color: var(--inverse);
|
|
@@ -3817,11 +3925,11 @@ body {
|
|
|
3817
3925
|
background: var(--secondary-dark);
|
|
3818
3926
|
}
|
|
3819
3927
|
|
|
3820
|
-
.Button--transparent:focus:active {
|
|
3928
|
+
.Button--transparent:focus-visible:active {
|
|
3821
3929
|
background: var(--secondary-dark);
|
|
3822
3930
|
}
|
|
3823
3931
|
|
|
3824
|
-
.Button--transparent
|
|
3932
|
+
.Button--transparent-disabled {
|
|
3825
3933
|
background: transparent;
|
|
3826
3934
|
color: var(--inverse-lightest);
|
|
3827
3935
|
}
|
|
@@ -3848,21 +3956,21 @@ body {
|
|
|
3848
3956
|
box-shadow: inset 0 0 0 2px var(--primary-dark);
|
|
3849
3957
|
}
|
|
3850
3958
|
|
|
3851
|
-
.Button--selected:focus {
|
|
3959
|
+
.Button--selected:focus-visible {
|
|
3852
3960
|
background: var(--primary-ultra-light);
|
|
3853
3961
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
3854
3962
|
outline-offset: var(--spacing-05);
|
|
3855
3963
|
box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
|
|
3856
3964
|
}
|
|
3857
3965
|
|
|
3858
|
-
.Button--selected:focus:active {
|
|
3966
|
+
.Button--selected:focus-visible:active {
|
|
3859
3967
|
background: var(--primary-lighter);
|
|
3860
3968
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
3861
3969
|
outline-offset: var(--spacing-05);
|
|
3862
3970
|
box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
|
|
3863
3971
|
}
|
|
3864
3972
|
|
|
3865
|
-
.Button--selected
|
|
3973
|
+
.Button--selected-disabled {
|
|
3866
3974
|
background: var(--primary-ultra-light);
|
|
3867
3975
|
color: var(--primary-lighter);
|
|
3868
3976
|
box-shadow: inset 0 0 0 2px var(--primary-lightest);
|
|
@@ -3878,6 +3986,63 @@ body {
|
|
|
3878
3986
|
text-overflow: ellipsis;
|
|
3879
3987
|
}
|
|
3880
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
|
+
|
|
3881
4046
|
/* outlined button styles */
|
|
3882
4047
|
|
|
3883
4048
|
.Button-outlined--basic {
|
|
@@ -3896,13 +4061,13 @@ body {
|
|
|
3896
4061
|
box-shadow: inset 0 0 0 1px var(--inverse-lightest);
|
|
3897
4062
|
}
|
|
3898
4063
|
|
|
3899
|
-
.Button-outlined--basic:focus {
|
|
4064
|
+
.Button-outlined--basic:focus-visible {
|
|
3900
4065
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
3901
4066
|
outline-offset: var(--spacing-05);
|
|
3902
4067
|
box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
|
|
3903
4068
|
}
|
|
3904
4069
|
|
|
3905
|
-
.Button-outlined--basic
|
|
4070
|
+
.Button-outlined--basic-disabled {
|
|
3906
4071
|
color: var(--inverse-lightest);
|
|
3907
4072
|
background: transparent;
|
|
3908
4073
|
box-shadow: inset 0 0 0 1px var(--secondary);
|
|
@@ -3925,14 +4090,14 @@ body {
|
|
|
3925
4090
|
box-shadow: inset 0 0 0 2px var(--primary-dark);
|
|
3926
4091
|
}
|
|
3927
4092
|
|
|
3928
|
-
.Button-outlined--selected:focus {
|
|
4093
|
+
.Button-outlined--selected:focus-visible {
|
|
3929
4094
|
color: var(--primary-dark);
|
|
3930
4095
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
3931
4096
|
outline-offset: var(--spacing-05);
|
|
3932
4097
|
box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
|
|
3933
4098
|
}
|
|
3934
4099
|
|
|
3935
|
-
.Button-outlined--selected:focus:active {
|
|
4100
|
+
.Button-outlined--selected:focus-visible:active {
|
|
3936
4101
|
background: var(--primary-lighter);
|
|
3937
4102
|
color: var(--primary-darker);
|
|
3938
4103
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
@@ -3940,7 +4105,7 @@ body {
|
|
|
3940
4105
|
box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
|
|
3941
4106
|
}
|
|
3942
4107
|
|
|
3943
|
-
.Button-outlined--selected
|
|
4108
|
+
.Button-outlined--selected-disabled {
|
|
3944
4109
|
background: var(--primary-ultra-light);
|
|
3945
4110
|
color: var(--primary-lighter);
|
|
3946
4111
|
box-shadow: inset 0 0 0 2px var(--primary-lightest);
|
|
@@ -3964,18 +4129,22 @@ body {
|
|
|
3964
4129
|
color: var(--primary-dark);
|
|
3965
4130
|
}
|
|
3966
4131
|
|
|
3967
|
-
.Button-outlined--primary:focus {
|
|
4132
|
+
.Button-outlined--primary:focus-visible {
|
|
3968
4133
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
3969
4134
|
outline-offset: var(--spacing-05);
|
|
3970
4135
|
box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
|
|
3971
4136
|
}
|
|
3972
4137
|
|
|
3973
|
-
.Button-outlined--primary
|
|
4138
|
+
.Button-outlined--primary-disabled {
|
|
3974
4139
|
background: transparent;
|
|
3975
4140
|
color: var(--primary-lighter);
|
|
3976
4141
|
box-shadow: inset 0 0 0 1px var(--primary-lighter);
|
|
3977
4142
|
}
|
|
3978
4143
|
|
|
4144
|
+
.Button-infoIcon-outlined--primary {
|
|
4145
|
+
color: var(--text-link);
|
|
4146
|
+
}
|
|
4147
|
+
|
|
3979
4148
|
.Button-outlined--alert {
|
|
3980
4149
|
background: transparent;
|
|
3981
4150
|
box-shadow: inset 0 0 0 1px var(--alert);
|
|
@@ -3994,18 +4163,121 @@ body {
|
|
|
3994
4163
|
color: var(--alert-dark);
|
|
3995
4164
|
}
|
|
3996
4165
|
|
|
3997
|
-
.Button-outlined--alert:focus {
|
|
4166
|
+
.Button-outlined--alert:focus-visible {
|
|
3998
4167
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
3999
4168
|
outline-offset: var(--spacing-05);
|
|
4000
4169
|
box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
|
|
4001
4170
|
}
|
|
4002
4171
|
|
|
4003
|
-
.Button-outlined--alert
|
|
4172
|
+
.Button-outlined--alert-disabled {
|
|
4004
4173
|
background: transparent;
|
|
4005
4174
|
color: var(--alert-lighter);
|
|
4006
4175
|
box-shadow: inset 0 0 0 1px var(--alert-lighter);
|
|
4007
4176
|
}
|
|
4008
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
|
+
|
|
4009
4281
|
/* calendar */
|
|
4010
4282
|
|
|
4011
4283
|
.Calendar-wrapper {
|
|
@@ -4152,6 +4424,13 @@ body {
|
|
|
4152
4424
|
position: relative;
|
|
4153
4425
|
}
|
|
4154
4426
|
|
|
4427
|
+
.Calendar-monthValueWrapper,
|
|
4428
|
+
.Calendar-yearValueWrapper {
|
|
4429
|
+
display: inline-flex;
|
|
4430
|
+
justify-content: center;
|
|
4431
|
+
position: relative;
|
|
4432
|
+
}
|
|
4433
|
+
|
|
4155
4434
|
.Calendar-valueWrapper--inRange {
|
|
4156
4435
|
background: var(--primary-ultra-light);
|
|
4157
4436
|
}
|
|
@@ -4210,13 +4489,13 @@ body {
|
|
|
4210
4489
|
-webkit-user-select: none;
|
|
4211
4490
|
-moz-user-select: none;
|
|
4212
4491
|
user-select: none;
|
|
4492
|
+
box-sizing: border-box;
|
|
4213
4493
|
border-radius: var(--spacing-10);
|
|
4214
4494
|
border: var(--border-width-2-5) solid transparent;
|
|
4215
4495
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
4216
4496
|
|
|
4217
4497
|
/* Button reset (used on <button> for a11y) */
|
|
4218
4498
|
background: transparent;
|
|
4219
|
-
border: none;
|
|
4220
4499
|
padding: 0;
|
|
4221
4500
|
margin: 0;
|
|
4222
4501
|
font-family: inherit;
|
|
@@ -4317,25 +4596,6 @@ body {
|
|
|
4317
4596
|
width: var(--spacing-80);
|
|
4318
4597
|
}
|
|
4319
4598
|
|
|
4320
|
-
|
|
4321
|
-
.Calendar-valueWrapper--active-dummy .Calendar-value {
|
|
4322
|
-
border: none;
|
|
4323
|
-
}
|
|
4324
|
-
|
|
4325
|
-
.Calendar-valueWrapper--active-dummy .Calendar-value--active {
|
|
4326
|
-
background: var(--primary-lighter);
|
|
4327
|
-
}
|
|
4328
|
-
|
|
4329
|
-
.Calendar-valueWrapper--active-dummy .Calendar-value--active:hover {
|
|
4330
|
-
background: var(--primary-light);
|
|
4331
|
-
color: var(--inverse);
|
|
4332
|
-
}
|
|
4333
|
-
|
|
4334
|
-
.Calendar-valueWrapper--active-dummy .Calendar-value--active:active {
|
|
4335
|
-
background: var(--primary-dark);
|
|
4336
|
-
color: var(--white);
|
|
4337
|
-
}
|
|
4338
|
-
|
|
4339
4599
|
.Calendar-valueWrapper--active-dummy .Calendar-value--startError,
|
|
4340
4600
|
.Calendar-valueWrapper--active-dummy .Calendar-value--endError {
|
|
4341
4601
|
background: var(--alert-lightest);
|
|
@@ -4347,6 +4607,10 @@ body {
|
|
|
4347
4607
|
border-color: transparent;
|
|
4348
4608
|
}
|
|
4349
4609
|
|
|
4610
|
+
.Calendar-valueWrapper--disabled {
|
|
4611
|
+
opacity: var(--opacity-10);
|
|
4612
|
+
}
|
|
4613
|
+
|
|
4350
4614
|
.Calendar-value--disabled {
|
|
4351
4615
|
pointer-events: none;
|
|
4352
4616
|
}
|
|
@@ -4415,6 +4679,55 @@ body {
|
|
|
4415
4679
|
border-color: transparent;
|
|
4416
4680
|
}
|
|
4417
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
|
+
|
|
4418
4731
|
/* badge */
|
|
4419
4732
|
|
|
4420
4733
|
.Card {
|
|
@@ -4470,6 +4783,20 @@ body {
|
|
|
4470
4783
|
border-top: var(--border-width-2-5) solid var(--secondary-light);
|
|
4471
4784
|
}
|
|
4472
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
|
+
|
|
4473
4800
|
.CardSubdued {
|
|
4474
4801
|
background: var(--card-subdued-bg);
|
|
4475
4802
|
padding: var(--spacing-40);
|
|
@@ -4898,8 +5225,7 @@ body {
|
|
|
4898
5225
|
background: var(--secondary);
|
|
4899
5226
|
}
|
|
4900
5227
|
|
|
4901
|
-
.Chip--input:focus-visible
|
|
4902
|
-
.Chip--input:focus {
|
|
5228
|
+
.Chip--input:focus-visible {
|
|
4903
5229
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
4904
5230
|
outline-offset: var(--spacing-05);
|
|
4905
5231
|
}
|
|
@@ -4916,7 +5242,8 @@ body {
|
|
|
4916
5242
|
}
|
|
4917
5243
|
|
|
4918
5244
|
.Chip-icon--right:focus-visible {
|
|
4919
|
-
outline: var(--
|
|
5245
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
5246
|
+
outline-offset: var(--spacing-05);
|
|
4920
5247
|
}
|
|
4921
5248
|
|
|
4922
5249
|
.Chip-icon--right:hover {
|
|
@@ -4936,7 +5263,8 @@ body {
|
|
|
4936
5263
|
}
|
|
4937
5264
|
|
|
4938
5265
|
.Chip-icon--selected:focus-visible {
|
|
4939
|
-
outline: var(--
|
|
5266
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
5267
|
+
outline-offset: var(--spacing-05);
|
|
4940
5268
|
}
|
|
4941
5269
|
|
|
4942
5270
|
.Chip-icon--selected:hover {
|
|
@@ -4958,6 +5286,40 @@ body {
|
|
|
4958
5286
|
padding-right: 0;
|
|
4959
5287
|
}
|
|
4960
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
|
+
|
|
4961
5323
|
.ChipGroup {
|
|
4962
5324
|
display: inline-flex;
|
|
4963
5325
|
}
|
|
@@ -5176,6 +5538,10 @@ body {
|
|
|
5176
5538
|
|
|
5177
5539
|
.Dropdown-input {
|
|
5178
5540
|
min-width: unset !important;
|
|
5541
|
+
background: transparent;
|
|
5542
|
+
border-bottom-left-radius: 0;
|
|
5543
|
+
border-bottom-right-radius: 0;
|
|
5544
|
+
height: 36px;
|
|
5179
5545
|
}
|
|
5180
5546
|
|
|
5181
5547
|
.Dropdown-input,
|
|
@@ -5185,6 +5551,10 @@ body {
|
|
|
5185
5551
|
outline: none !important;
|
|
5186
5552
|
}
|
|
5187
5553
|
|
|
5554
|
+
.Dropdown-input:hover {
|
|
5555
|
+
background-color: var(--secondary-lightest);
|
|
5556
|
+
}
|
|
5557
|
+
|
|
5188
5558
|
.Dropdown-section {
|
|
5189
5559
|
display: flex;
|
|
5190
5560
|
justify-content: space-between;
|
|
@@ -5218,6 +5588,8 @@ body {
|
|
|
5218
5588
|
.Option {
|
|
5219
5589
|
display: flex;
|
|
5220
5590
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
5591
|
+
color: var(--text);
|
|
5592
|
+
cursor: pointer;
|
|
5221
5593
|
}
|
|
5222
5594
|
|
|
5223
5595
|
.Option,
|
|
@@ -5243,25 +5615,28 @@ body {
|
|
|
5243
5615
|
padding-bottom: var(--spacing-15);
|
|
5244
5616
|
}
|
|
5245
5617
|
|
|
5246
|
-
.Option--
|
|
5247
|
-
.Option-checkbox--
|
|
5618
|
+
.Option--interactive:hover,
|
|
5619
|
+
.Option-checkbox--interactive:hover {
|
|
5248
5620
|
background-color: var(--secondary-lightest);
|
|
5249
|
-
cursor: pointer;
|
|
5250
5621
|
}
|
|
5251
5622
|
|
|
5252
|
-
.Option--
|
|
5253
|
-
.Option-checkbox--
|
|
5254
|
-
background-color: var(--secondary-
|
|
5623
|
+
.Option--interactive:hover:active,
|
|
5624
|
+
.Option-checkbox--interactive:hover:active {
|
|
5625
|
+
background-color: var(--secondary-light);
|
|
5255
5626
|
}
|
|
5256
5627
|
|
|
5257
|
-
.Option
|
|
5258
|
-
.Option-
|
|
5259
|
-
|
|
5260
|
-
|
|
5628
|
+
.Option:focus,
|
|
5629
|
+
.Option:focus-visible,
|
|
5630
|
+
.Option-checkbox:focus,
|
|
5631
|
+
.Option-checkbox:focus-visible {
|
|
5632
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
5633
|
+
outline-offset: calc(-1 * var(--border-width-05));
|
|
5261
5634
|
}
|
|
5262
5635
|
|
|
5263
|
-
.
|
|
5264
|
-
|
|
5636
|
+
.OptionWrapper:focus,
|
|
5637
|
+
.OptionWrapper:focus-visible {
|
|
5638
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
5639
|
+
outline-offset: calc(-1 * var(--border-width-05));
|
|
5265
5640
|
}
|
|
5266
5641
|
|
|
5267
5642
|
.Option-loading {
|
|
@@ -5272,11 +5647,17 @@ body {
|
|
|
5272
5647
|
background-color: var(--primary-lightest);
|
|
5273
5648
|
}
|
|
5274
5649
|
|
|
5275
|
-
.Option--selected:
|
|
5650
|
+
.Option--selected:focus,
|
|
5651
|
+
.Option--selected:focus-visible {
|
|
5652
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
5653
|
+
outline-offset: calc(-1 * var(--border-width-05));
|
|
5654
|
+
}
|
|
5655
|
+
|
|
5656
|
+
.Option--selected.Option--interactive:hover {
|
|
5276
5657
|
background-color: var(--primary-lighter);
|
|
5277
5658
|
}
|
|
5278
5659
|
|
|
5279
|
-
.Option--selected:active {
|
|
5660
|
+
.Option--selected.Option--interactive:active {
|
|
5280
5661
|
background-color: var(--primary-lighter);
|
|
5281
5662
|
color: var(--primary-darker);
|
|
5282
5663
|
}
|
|
@@ -5296,6 +5677,16 @@ body {
|
|
|
5296
5677
|
overflow: hidden;
|
|
5297
5678
|
display: flex;
|
|
5298
5679
|
flex-direction: column;
|
|
5680
|
+
flex: 1;
|
|
5681
|
+
min-width: 0;
|
|
5682
|
+
}
|
|
5683
|
+
|
|
5684
|
+
.Option-checkIcon {
|
|
5685
|
+
display: flex;
|
|
5686
|
+
flex-shrink: 0;
|
|
5687
|
+
align-self: center;
|
|
5688
|
+
margin-left: auto;
|
|
5689
|
+
padding-left: var(--spacing-20);
|
|
5299
5690
|
}
|
|
5300
5691
|
|
|
5301
5692
|
.OptionCheckbox .Checkbox-label {
|
|
@@ -5332,6 +5723,13 @@ body {
|
|
|
5332
5723
|
line-height: var(--font-height);
|
|
5333
5724
|
}
|
|
5334
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
|
+
|
|
5335
5733
|
.Grid {
|
|
5336
5734
|
display: flex;
|
|
5337
5735
|
flex-direction: column;
|
|
@@ -5354,6 +5752,7 @@ body {
|
|
|
5354
5752
|
z-index: 5;
|
|
5355
5753
|
overflow-x: hidden;
|
|
5356
5754
|
-ms-overflow-style: none;
|
|
5755
|
+
scrollbar-width: none;
|
|
5357
5756
|
border-right: var(--border-width-7-5) solid var(--secondary);
|
|
5358
5757
|
}
|
|
5359
5758
|
|
|
@@ -5405,6 +5804,8 @@ body {
|
|
|
5405
5804
|
display: flex;
|
|
5406
5805
|
flex: 0 0 auto;
|
|
5407
5806
|
overflow-x: auto;
|
|
5807
|
+
-ms-overflow-style: none;
|
|
5808
|
+
scrollbar-width: none;
|
|
5408
5809
|
border-bottom: var(--border);
|
|
5409
5810
|
}
|
|
5410
5811
|
|
|
@@ -5436,7 +5837,11 @@ body {
|
|
|
5436
5837
|
flex-direction: column;
|
|
5437
5838
|
flex-grow: 1;
|
|
5438
5839
|
overflow-x: auto;
|
|
5439
|
-
overflow-y:
|
|
5840
|
+
overflow-y: auto;
|
|
5841
|
+
}
|
|
5842
|
+
|
|
5843
|
+
.Grid-rowGroup {
|
|
5844
|
+
display: contents;
|
|
5440
5845
|
}
|
|
5441
5846
|
|
|
5442
5847
|
.Grid-rowWrapper {
|
|
@@ -5572,12 +5977,20 @@ body {
|
|
|
5572
5977
|
overflow: hidden;
|
|
5573
5978
|
}
|
|
5574
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
|
+
|
|
5575
5985
|
.Grid-cellResize {
|
|
5576
5986
|
position: absolute;
|
|
5577
5987
|
right: 0;
|
|
5578
5988
|
width: var(--spacing-10);
|
|
5579
5989
|
cursor: ew-resize;
|
|
5580
5990
|
height: 100%;
|
|
5991
|
+
padding-right: var(--spacing-60);
|
|
5992
|
+
margin-right: calc(-1 * var(--spacing-60));
|
|
5993
|
+
box-sizing: content-box;
|
|
5581
5994
|
}
|
|
5582
5995
|
|
|
5583
5996
|
.Grid-cellSortIcon {
|
|
@@ -5594,6 +6007,11 @@ body {
|
|
|
5594
6007
|
background: var(--primary);
|
|
5595
6008
|
}
|
|
5596
6009
|
|
|
6010
|
+
.Grid-cellResize:focus-visible {
|
|
6011
|
+
background: var(--primary);
|
|
6012
|
+
outline: none;
|
|
6013
|
+
}
|
|
6014
|
+
|
|
5597
6015
|
.Grid-reorderHighlighter {
|
|
5598
6016
|
position: absolute;
|
|
5599
6017
|
height: 100%;
|
|
@@ -5813,9 +6231,10 @@ body {
|
|
|
5813
6231
|
background: var(--secondary-lighter);
|
|
5814
6232
|
}
|
|
5815
6233
|
|
|
5816
|
-
.Grid--resource .Grid-row--body:focus {
|
|
6234
|
+
.Grid--resource .Grid-row--body:focus-visible {
|
|
5817
6235
|
box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
|
|
5818
|
-
outline:
|
|
6236
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
6237
|
+
outline-offset: calc(-1 * var(--spacing-05));
|
|
5819
6238
|
}
|
|
5820
6239
|
|
|
5821
6240
|
/* Selected States */
|
|
@@ -5832,8 +6251,9 @@ body {
|
|
|
5832
6251
|
background: var(--primary-lighter) !important;
|
|
5833
6252
|
}
|
|
5834
6253
|
|
|
5835
|
-
.Grid-row--selected:focus {
|
|
5836
|
-
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));
|
|
5837
6257
|
box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
|
|
5838
6258
|
}
|
|
5839
6259
|
|
|
@@ -5854,9 +6274,8 @@ body {
|
|
|
5854
6274
|
background: var(--secondary-lighter);
|
|
5855
6275
|
}
|
|
5856
6276
|
|
|
5857
|
-
.Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
|
|
6277
|
+
.Grid--resource .Grid-row--body:focus-visible .Grid-cellWrapper--pinned {
|
|
5858
6278
|
box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
|
|
5859
|
-
outline: none;
|
|
5860
6279
|
}
|
|
5861
6280
|
|
|
5862
6281
|
/* Pinned Columns Selected State */
|
|
@@ -5873,8 +6292,7 @@ body {
|
|
|
5873
6292
|
background: var(--primary-lighter) !important;
|
|
5874
6293
|
}
|
|
5875
6294
|
|
|
5876
|
-
.Grid-row--selected:focus .Grid-cellWrapper--pinned {
|
|
5877
|
-
outline: none;
|
|
6295
|
+
.Grid-row--selected:focus-visible .Grid-cellWrapper--pinned {
|
|
5878
6296
|
box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
|
|
5879
6297
|
}
|
|
5880
6298
|
|
|
@@ -5885,7 +6303,7 @@ body {
|
|
|
5885
6303
|
|
|
5886
6304
|
.Grid-row--head .Grid-cellGroup--pinned-left {
|
|
5887
6305
|
border-style: inset;
|
|
5888
|
-
border-right: var(--spacing-
|
|
6306
|
+
border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
|
|
5889
6307
|
border-right-width: 4px;
|
|
5890
6308
|
-o-border-image: linear-gradient(
|
|
5891
6309
|
to right,
|
|
@@ -5907,7 +6325,7 @@ body {
|
|
|
5907
6325
|
|
|
5908
6326
|
.Grid-row--head .Grid-cellGroup--pinned-right {
|
|
5909
6327
|
border-style: inset;
|
|
5910
|
-
border-left: var(--spacing-
|
|
6328
|
+
border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
|
|
5911
6329
|
border-left-width: 4px;
|
|
5912
6330
|
-o-border-image: linear-gradient(
|
|
5913
6331
|
to left,
|
|
@@ -5931,7 +6349,7 @@ body {
|
|
|
5931
6349
|
|
|
5932
6350
|
.Grid-cellWrapper--pinned-left {
|
|
5933
6351
|
border-style: inset;
|
|
5934
|
-
border-right: var(--spacing-
|
|
6352
|
+
border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
|
|
5935
6353
|
border-right-width: 4px;
|
|
5936
6354
|
-o-border-image: linear-gradient(
|
|
5937
6355
|
to right,
|
|
@@ -5953,7 +6371,7 @@ body {
|
|
|
5953
6371
|
|
|
5954
6372
|
.Grid-cellWrapper--pinned-right {
|
|
5955
6373
|
border-style: inset;
|
|
5956
|
-
border-left: var(--spacing-
|
|
6374
|
+
border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
|
|
5957
6375
|
border-left-width: 4px;
|
|
5958
6376
|
-o-border-image: linear-gradient(
|
|
5959
6377
|
to left,
|
|
@@ -6334,6 +6752,11 @@ body {
|
|
|
6334
6752
|
}
|
|
6335
6753
|
}
|
|
6336
6754
|
|
|
6755
|
+
.TimePicker-trigger {
|
|
6756
|
+
width: calc(var(--spacing-40) * 20);
|
|
6757
|
+
min-width: calc(var(--spacing-40) * 16);
|
|
6758
|
+
}
|
|
6759
|
+
|
|
6337
6760
|
.DropdownButton {
|
|
6338
6761
|
width: 100%;
|
|
6339
6762
|
justify-content: space-between;
|
|
@@ -6382,7 +6805,7 @@ body {
|
|
|
6382
6805
|
}
|
|
6383
6806
|
|
|
6384
6807
|
.DropdownButton--placeholder {
|
|
6385
|
-
color: var(--text
|
|
6808
|
+
color: var(--text);
|
|
6386
6809
|
}
|
|
6387
6810
|
|
|
6388
6811
|
.DropdownButton:hover {
|
|
@@ -6390,9 +6813,11 @@ body {
|
|
|
6390
6813
|
color: var(--text);
|
|
6391
6814
|
}
|
|
6392
6815
|
|
|
6393
|
-
.DropdownButton:focus {
|
|
6816
|
+
.DropdownButton:focus-visible {
|
|
6394
6817
|
background-color: var(--secondary-light);
|
|
6395
|
-
box-shadow:
|
|
6818
|
+
box-shadow: none;
|
|
6819
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
6820
|
+
outline-offset: var(--spacing-05);
|
|
6396
6821
|
}
|
|
6397
6822
|
|
|
6398
6823
|
.DropdownButton:active,
|
|
@@ -6834,7 +7259,6 @@ body {
|
|
|
6834
7259
|
|
|
6835
7260
|
.Input--error:focus-within {
|
|
6836
7261
|
border-color: var(--alert);
|
|
6837
|
-
box-shadow: var(--shadow-spread) var(--alert-shadow);
|
|
6838
7262
|
}
|
|
6839
7263
|
|
|
6840
7264
|
.Input--error:focus-within .Input-icon--left {
|
|
@@ -6987,25 +7411,21 @@ body {
|
|
|
6987
7411
|
align-items: center;
|
|
6988
7412
|
box-sizing: border-box;
|
|
6989
7413
|
border-radius: var(--border-radius-10);
|
|
6990
|
-
|
|
7414
|
+
box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
|
|
6991
7415
|
background: var(--white);
|
|
6992
|
-
overflow: hidden;
|
|
6993
7416
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
6994
7417
|
}
|
|
6995
7418
|
|
|
6996
7419
|
.MetricInput--regular {
|
|
6997
7420
|
height: var(--spacing-80);
|
|
6998
|
-
padding-left: var(--spacing-30);
|
|
6999
7421
|
}
|
|
7000
7422
|
|
|
7001
7423
|
.MetricInput--large {
|
|
7002
7424
|
height: 40px;
|
|
7003
|
-
padding-left: var(--spacing-40);
|
|
7004
7425
|
}
|
|
7005
7426
|
|
|
7006
7427
|
.MetricInput--small {
|
|
7007
7428
|
height: var(--spacing-60);
|
|
7008
|
-
padding-left: var(--spacing-20);
|
|
7009
7429
|
}
|
|
7010
7430
|
|
|
7011
7431
|
.MetricInput:hover {
|
|
@@ -7015,9 +7435,12 @@ body {
|
|
|
7015
7435
|
|
|
7016
7436
|
.MetricInput:focus-within {
|
|
7017
7437
|
background: var(--white);
|
|
7018
|
-
|
|
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)) {
|
|
7019
7442
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
7020
|
-
outline-offset: var(--spacing-
|
|
7443
|
+
outline-offset: var(--spacing-05);
|
|
7021
7444
|
}
|
|
7022
7445
|
|
|
7023
7446
|
.MetricInput:focus-within .MetricInput-icon {
|
|
@@ -7026,13 +7449,13 @@ body {
|
|
|
7026
7449
|
|
|
7027
7450
|
.MetricInput--disabled {
|
|
7028
7451
|
background: var(--secondary-lightest);
|
|
7029
|
-
|
|
7452
|
+
box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary-light);
|
|
7030
7453
|
pointer-events: none;
|
|
7031
7454
|
}
|
|
7032
7455
|
|
|
7033
7456
|
.MetricInput--readOnly {
|
|
7034
7457
|
background: var(--secondary-lightest);
|
|
7035
|
-
|
|
7458
|
+
box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
|
|
7036
7459
|
pointer-events: none;
|
|
7037
7460
|
}
|
|
7038
7461
|
|
|
@@ -7043,19 +7466,46 @@ body {
|
|
|
7043
7466
|
.MetricInput--error,
|
|
7044
7467
|
.MetricInput--error:hover {
|
|
7045
7468
|
background: var(--white);
|
|
7046
|
-
|
|
7469
|
+
box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
|
|
7047
7470
|
}
|
|
7048
7471
|
|
|
7049
7472
|
.MetricInput--error:focus-within {
|
|
7050
|
-
|
|
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)) {
|
|
7051
7477
|
outline: var(--border-width-05) solid var(--alert);
|
|
7052
|
-
outline-offset: var(--spacing-
|
|
7478
|
+
outline-offset: var(--spacing-05);
|
|
7053
7479
|
}
|
|
7054
7480
|
|
|
7055
7481
|
.MetricInput--error:focus-within .MetricInput-icon {
|
|
7056
7482
|
color: var(--alert);
|
|
7057
7483
|
}
|
|
7058
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
|
+
|
|
7059
7509
|
.MetricInput-input {
|
|
7060
7510
|
display: flex;
|
|
7061
7511
|
width: 100%;
|
|
@@ -7127,23 +7577,14 @@ body {
|
|
|
7127
7577
|
margin: 0;
|
|
7128
7578
|
}
|
|
7129
7579
|
|
|
7130
|
-
|
|
7131
|
-
border-left: var(--border);
|
|
7132
|
-
box-sizing: border-box;
|
|
7133
|
-
border-radius: 0;
|
|
7134
|
-
background: transparent;
|
|
7135
|
-
display: flex;
|
|
7136
|
-
flex-direction: column;
|
|
7137
|
-
height: 100%;
|
|
7138
|
-
flex-shrink: 0;
|
|
7139
|
-
overflow: hidden;
|
|
7140
|
-
}
|
|
7141
|
-
|
|
7580
|
+
/* Arrow buttons (decrement on left, increment on right) */
|
|
7142
7581
|
.MetricInput-arrowButton {
|
|
7143
|
-
|
|
7144
|
-
|
|
7582
|
+
flex-shrink: 0;
|
|
7583
|
+
align-self: stretch;
|
|
7584
|
+
width: var(--spacing-60);
|
|
7145
7585
|
background: var(--secondary-light);
|
|
7146
7586
|
color: var(--inverse);
|
|
7587
|
+
border: none;
|
|
7147
7588
|
cursor: pointer;
|
|
7148
7589
|
display: flex;
|
|
7149
7590
|
align-items: center;
|
|
@@ -7153,7 +7594,16 @@ body {
|
|
|
7153
7594
|
-webkit-user-select: none;
|
|
7154
7595
|
-moz-user-select: none;
|
|
7155
7596
|
user-select: none;
|
|
7156
|
-
|
|
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;
|
|
7157
7607
|
}
|
|
7158
7608
|
|
|
7159
7609
|
.MetricInput-arrowButton:hover {
|
|
@@ -7166,16 +7616,44 @@ body {
|
|
|
7166
7616
|
|
|
7167
7617
|
.MetricInput-arrowButton:focus {
|
|
7168
7618
|
outline: 0;
|
|
7169
|
-
box-shadow: var(--shadow-spread) var(--secondary-shadow);
|
|
7170
7619
|
}
|
|
7171
7620
|
|
|
7172
|
-
.MetricInput-
|
|
7173
|
-
|
|
7174
|
-
|
|
7621
|
+
.MetricInput-arrowButton:focus-visible {
|
|
7622
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
7623
|
+
outline-offset: var(--spacing-05);
|
|
7175
7624
|
}
|
|
7176
7625
|
|
|
7177
|
-
|
|
7178
|
-
|
|
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
|
+
}
|
|
7179
7657
|
}
|
|
7180
7658
|
|
|
7181
7659
|
/* pagination */
|
|
@@ -7271,6 +7749,18 @@ body {
|
|
|
7271
7749
|
color: var(--text-disabled);
|
|
7272
7750
|
}
|
|
7273
7751
|
|
|
7752
|
+
.Label-srOnly {
|
|
7753
|
+
position: absolute;
|
|
7754
|
+
width: var(--spacing-2-5);
|
|
7755
|
+
height: var(--spacing-2-5);
|
|
7756
|
+
padding: 0;
|
|
7757
|
+
margin: calc(-1 * var(--spacing-2-5));
|
|
7758
|
+
overflow: hidden;
|
|
7759
|
+
clip: rect(0, 0, 0, 0);
|
|
7760
|
+
white-space: nowrap;
|
|
7761
|
+
border: 0;
|
|
7762
|
+
}
|
|
7763
|
+
|
|
7274
7764
|
.Label-requiredIndicator {
|
|
7275
7765
|
height: var(--spacing-15);
|
|
7276
7766
|
width: var(--spacing-15);
|
|
@@ -7319,23 +7809,88 @@ body {
|
|
|
7319
7809
|
width: 100%;
|
|
7320
7810
|
}
|
|
7321
7811
|
|
|
7812
|
+
.EditableDropdown:focus-visible {
|
|
7813
|
+
outline: none;
|
|
7814
|
+
}
|
|
7815
|
+
|
|
7322
7816
|
.EditableDropdown-default {
|
|
7323
7817
|
display: flex;
|
|
7324
7818
|
align-items: center;
|
|
7819
|
+
justify-content: space-between;
|
|
7325
7820
|
box-sizing: border-box;
|
|
7326
7821
|
height: var(--spacing-80);
|
|
7327
7822
|
padding-left: var(--spacing-30);
|
|
7823
|
+
padding-right: var(--spacing-20);
|
|
7824
|
+
border-radius: var(--border-radius-10);
|
|
7825
|
+
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
7826
|
+
cursor: pointer;
|
|
7827
|
+
border: var(--border-width-2-5) solid transparent;
|
|
7828
|
+
}
|
|
7829
|
+
|
|
7830
|
+
.EditableDropdown-wrapper {
|
|
7831
|
+
width: 100%;
|
|
7832
|
+
display: flex;
|
|
7833
|
+
flex-direction: row;
|
|
7834
|
+
overflow: hidden;
|
|
7835
|
+
align-items: center;
|
|
7836
|
+
}
|
|
7837
|
+
|
|
7838
|
+
.EditableDropdown-text {
|
|
7839
|
+
text-align: left;
|
|
7840
|
+
white-space: nowrap;
|
|
7841
|
+
overflow: hidden;
|
|
7842
|
+
text-overflow: ellipsis;
|
|
7843
|
+
color: var(--text);
|
|
7844
|
+
font-size: var(--font-size);
|
|
7845
|
+
line-height: var(--font-height);
|
|
7846
|
+
font-weight: var(--font-weight-normal);
|
|
7847
|
+
}
|
|
7848
|
+
|
|
7849
|
+
.EditableDropdown-text--subtle {
|
|
7850
|
+
color: var(--text-subtle);
|
|
7851
|
+
}
|
|
7852
|
+
|
|
7853
|
+
.EditableDropdown-icon {
|
|
7854
|
+
visibility: hidden;
|
|
7855
|
+
}
|
|
7856
|
+
|
|
7857
|
+
.EditableDropdown-default:hover .EditableDropdown-icon,
|
|
7858
|
+
.EditableDropdown:focus-visible .EditableDropdown-icon {
|
|
7859
|
+
visibility: visible;
|
|
7860
|
+
}
|
|
7861
|
+
|
|
7862
|
+
.EditableDropdown-default:hover {
|
|
7863
|
+
background: var(--secondary);
|
|
7864
|
+
}
|
|
7865
|
+
|
|
7866
|
+
.EditableDropdown:focus-visible .EditableDropdown-default {
|
|
7867
|
+
background: var(--secondary-light);
|
|
7868
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
7869
|
+
outline-offset: var(--spacing-05);
|
|
7870
|
+
border-radius: var(--border-radius-10);
|
|
7328
7871
|
}
|
|
7329
7872
|
|
|
7330
7873
|
.Link {
|
|
7331
7874
|
text-decoration: none;
|
|
7332
7875
|
font-weight: var(--font-weight-medium);
|
|
7333
|
-
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);
|
|
7334
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;
|
|
7335
7890
|
border-bottom: var(--border-width-2-5) solid currentColor;
|
|
7336
7891
|
}
|
|
7337
7892
|
|
|
7338
|
-
.Link:focus {
|
|
7893
|
+
.Link:focus-visible {
|
|
7339
7894
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
7340
7895
|
outline-offset: var(--spacing-05);
|
|
7341
7896
|
border-radius: var(--border-radius-10);
|
|
@@ -7361,24 +7916,42 @@ body {
|
|
|
7361
7916
|
border-bottom-color: transparent;
|
|
7362
7917
|
}
|
|
7363
7918
|
|
|
7919
|
+
.Link-text--subtle {
|
|
7920
|
+
border-bottom-color: transparent;
|
|
7921
|
+
}
|
|
7922
|
+
|
|
7364
7923
|
.Link--default:hover {
|
|
7365
|
-
border-bottom: var(--border-width-2-5) solid var(--primary-dark);
|
|
7366
7924
|
color: var(--primary-dark);
|
|
7367
7925
|
}
|
|
7368
7926
|
|
|
7369
7927
|
.Link--subtle:hover {
|
|
7370
|
-
border-bottom: var(--border-width-2-5) solid var(--inverse-light);
|
|
7371
7928
|
color: var(--inverse-light);
|
|
7372
7929
|
}
|
|
7373
7930
|
|
|
7931
|
+
.Link--subtle:hover .Link-text--subtle {
|
|
7932
|
+
border-bottom-color: currentColor;
|
|
7933
|
+
}
|
|
7934
|
+
|
|
7374
7935
|
.Link--default:active {
|
|
7375
7936
|
color: var(--primary-darker);
|
|
7376
|
-
border-bottom: var(--border-width-2-5) solid currentColor;
|
|
7377
7937
|
}
|
|
7378
7938
|
|
|
7379
7939
|
.Link--subtle:active {
|
|
7380
7940
|
color: var(--inverse);
|
|
7381
|
-
|
|
7941
|
+
}
|
|
7942
|
+
|
|
7943
|
+
.Link--subtle:active .Link-text--subtle {
|
|
7944
|
+
border-bottom-color: transparent;
|
|
7945
|
+
}
|
|
7946
|
+
|
|
7947
|
+
.Link--button-reset {
|
|
7948
|
+
background: none;
|
|
7949
|
+
border-top: none;
|
|
7950
|
+
border-left: none;
|
|
7951
|
+
border-right: none;
|
|
7952
|
+
padding: 0;
|
|
7953
|
+
cursor: pointer;
|
|
7954
|
+
font-family: inherit;
|
|
7382
7955
|
}
|
|
7383
7956
|
|
|
7384
7957
|
.Link--default-disabled {
|
|
@@ -7391,6 +7964,39 @@ body {
|
|
|
7391
7964
|
pointer-events: none;
|
|
7392
7965
|
}
|
|
7393
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
|
+
|
|
7394
8000
|
.Message {
|
|
7395
8001
|
display: flex;
|
|
7396
8002
|
flex-direction: row;
|
|
@@ -7408,12 +8014,12 @@ body {
|
|
|
7408
8014
|
|
|
7409
8015
|
.Message--alert {
|
|
7410
8016
|
border-color: var(--alert);
|
|
7411
|
-
background-color: rgba(
|
|
8017
|
+
background-color: rgba(189, 28, 0, 0.04);
|
|
7412
8018
|
}
|
|
7413
8019
|
|
|
7414
8020
|
.Message--success {
|
|
7415
8021
|
border-color: var(--success);
|
|
7416
|
-
background-color: rgba(0,
|
|
8022
|
+
background-color: rgba(0, 128, 0, 0.04);
|
|
7417
8023
|
}
|
|
7418
8024
|
|
|
7419
8025
|
.Message--info {
|
|
@@ -7423,7 +8029,7 @@ body {
|
|
|
7423
8029
|
|
|
7424
8030
|
.Message--warning {
|
|
7425
8031
|
border-color: var(--accent1);
|
|
7426
|
-
background-color: rgba(
|
|
8032
|
+
background-color: rgba(189, 91, 0, 0.04);
|
|
7427
8033
|
}
|
|
7428
8034
|
|
|
7429
8035
|
.Message-icon--regular {
|
|
@@ -8086,6 +8692,27 @@ body {
|
|
|
8086
8692
|
box-shadow: none;
|
|
8087
8693
|
}
|
|
8088
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
|
+
|
|
8089
8716
|
.Tooltip {
|
|
8090
8717
|
max-width: var(--spacing-640);
|
|
8091
8718
|
padding: var(--spacing-10) var(--spacing-20);
|
|
@@ -8103,6 +8730,7 @@ body {
|
|
|
8103
8730
|
}
|
|
8104
8731
|
|
|
8105
8732
|
.Tooltip-text {
|
|
8733
|
+
white-space: pre-wrap;
|
|
8106
8734
|
word-break: break-word;
|
|
8107
8735
|
-webkit-hyphens: auto;
|
|
8108
8736
|
hyphens: auto;
|
|
@@ -8777,6 +9405,45 @@ body {
|
|
|
8777
9405
|
border-color: transparent;
|
|
8778
9406
|
}
|
|
8779
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
|
+
|
|
8780
9447
|
/* Textarea */
|
|
8781
9448
|
|
|
8782
9449
|
.Textarea {
|
|
@@ -8903,6 +9570,8 @@ body {
|
|
|
8903
9570
|
padding-left: var(--spacing-10);
|
|
8904
9571
|
height: var(--spacing-60);
|
|
8905
9572
|
box-sizing: initial;
|
|
9573
|
+
background: transparent;
|
|
9574
|
+
border: none;
|
|
8906
9575
|
}
|
|
8907
9576
|
|
|
8908
9577
|
.Toast-icon--info,
|
|
@@ -8916,6 +9585,13 @@ body {
|
|
|
8916
9585
|
color: var(--warning-darker);
|
|
8917
9586
|
}
|
|
8918
9587
|
|
|
9588
|
+
.Toast-closeButton {
|
|
9589
|
+
background: transparent;
|
|
9590
|
+
border: none;
|
|
9591
|
+
color: inherit;
|
|
9592
|
+
padding: 0;
|
|
9593
|
+
}
|
|
9594
|
+
|
|
8919
9595
|
.Toast-close-icon:focus,
|
|
8920
9596
|
.Toast-close-icon:focus-visible {
|
|
8921
9597
|
outline: none;
|
|
@@ -9036,6 +9712,16 @@ body {
|
|
|
9036
9712
|
color: var(--text-white);
|
|
9037
9713
|
}
|
|
9038
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
|
+
|
|
9039
9725
|
.Popover {
|
|
9040
9726
|
border-radius: var(--border-radius-10);
|
|
9041
9727
|
position: absolute;
|
|
@@ -9068,6 +9754,7 @@ body {
|
|
|
9068
9754
|
|
|
9069
9755
|
.ChipInput {
|
|
9070
9756
|
display: flex;
|
|
9757
|
+
box-sizing: border-box;
|
|
9071
9758
|
border-radius: var(--border-radius-10);
|
|
9072
9759
|
box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
|
|
9073
9760
|
background: var(--white);
|
|
@@ -9077,23 +9764,19 @@ body {
|
|
|
9077
9764
|
|
|
9078
9765
|
.ChipInput--regular {
|
|
9079
9766
|
padding-left: 10px;
|
|
9080
|
-
padding-right:
|
|
9767
|
+
padding-right: var(--spacing-15);
|
|
9081
9768
|
}
|
|
9082
9769
|
|
|
9083
9770
|
.ChipInput--small {
|
|
9771
|
+
align-items: center;
|
|
9772
|
+
min-height: var(--spacing-60);
|
|
9084
9773
|
padding-left: var(--spacing-20);
|
|
9085
|
-
padding-right: var(--spacing-
|
|
9086
|
-
}
|
|
9087
|
-
|
|
9088
|
-
.ChipInput:focus,
|
|
9089
|
-
.ChipInput:focus-visible {
|
|
9090
|
-
outline: var(--border-width-05) solid var(--primary-focus);
|
|
9091
|
-
outline-offset: var(--spacing-05);
|
|
9774
|
+
padding-right: var(--spacing-10);
|
|
9092
9775
|
}
|
|
9093
9776
|
|
|
9094
9777
|
.ChipInput:hover {
|
|
9095
9778
|
background: var(--secondary-lighter);
|
|
9096
|
-
|
|
9779
|
+
box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
|
|
9097
9780
|
}
|
|
9098
9781
|
|
|
9099
9782
|
.ChipInput:focus-within {
|
|
@@ -9102,12 +9785,12 @@ body {
|
|
|
9102
9785
|
|
|
9103
9786
|
.ChipInput--disabled {
|
|
9104
9787
|
background: var(--secondary-lightest);
|
|
9105
|
-
|
|
9788
|
+
box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-light);
|
|
9106
9789
|
pointer-events: none;
|
|
9107
9790
|
}
|
|
9108
9791
|
|
|
9109
9792
|
.ChipInput--withChips {
|
|
9110
|
-
padding-right:
|
|
9793
|
+
padding-right: 0;
|
|
9111
9794
|
}
|
|
9112
9795
|
|
|
9113
9796
|
.ChipInput--error {
|
|
@@ -9121,15 +9804,18 @@ body {
|
|
|
9121
9804
|
flex-wrap: wrap;
|
|
9122
9805
|
}
|
|
9123
9806
|
|
|
9124
|
-
.ChipInput-
|
|
9807
|
+
.ChipInput--small .ChipInput-wrapper {
|
|
9808
|
+
min-height: var(--spacing-60);
|
|
9809
|
+
}
|
|
9810
|
+
|
|
9811
|
+
.ChipInput-border--focusRing {
|
|
9125
9812
|
border-radius: var(--border-radius-10);
|
|
9126
9813
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
9127
9814
|
outline-offset: var(--spacing-05);
|
|
9128
9815
|
}
|
|
9129
9816
|
|
|
9130
|
-
.ChipInput-border--error
|
|
9131
|
-
|
|
9132
|
-
outline-offset: var(--spacing-05);
|
|
9817
|
+
.ChipInput-border--error.ChipInput-border--focusRing {
|
|
9818
|
+
box-shadow: var(--shadow-spread) var(--alert-shadow);
|
|
9133
9819
|
}
|
|
9134
9820
|
|
|
9135
9821
|
.ChipInput-input {
|
|
@@ -9173,8 +9859,9 @@ body {
|
|
|
9173
9859
|
}
|
|
9174
9860
|
|
|
9175
9861
|
.ChipInput-icon--small {
|
|
9862
|
+
flex-shrink: 0;
|
|
9863
|
+
align-self: center;
|
|
9176
9864
|
margin-left: var(--spacing-15);
|
|
9177
|
-
margin-top: var(--spacing-15);
|
|
9178
9865
|
height: var(--spacing-30);
|
|
9179
9866
|
}
|
|
9180
9867
|
|
|
@@ -9194,7 +9881,8 @@ body {
|
|
|
9194
9881
|
|
|
9195
9882
|
.ChipInput-icon:focus,
|
|
9196
9883
|
.ChipInput-icon:focus-visible {
|
|
9197
|
-
outline: var(--
|
|
9884
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
9885
|
+
outline-offset: var(--spacing-05);
|
|
9198
9886
|
}
|
|
9199
9887
|
|
|
9200
9888
|
.VerticalNav {
|
|
@@ -9273,20 +9961,24 @@ body {
|
|
|
9273
9961
|
background: var(--secondary-dark);
|
|
9274
9962
|
}
|
|
9275
9963
|
|
|
9276
|
-
.MenuItem:focus {
|
|
9964
|
+
.MenuItem:focus-visible {
|
|
9277
9965
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
9278
9966
|
outline-offset: var(--spacing-05);
|
|
9279
9967
|
}
|
|
9280
9968
|
|
|
9281
|
-
.MenuItem
|
|
9969
|
+
.MenuItem:focus:not(:focus-visible) {
|
|
9970
|
+
outline: none;
|
|
9971
|
+
}
|
|
9972
|
+
|
|
9973
|
+
.MenuItem--expanded:focus-visible {
|
|
9282
9974
|
clip-path: inset(-6px -6px -6px 0);
|
|
9283
9975
|
}
|
|
9284
9976
|
|
|
9285
|
-
.MenuItem--expandedRounded:focus {
|
|
9977
|
+
.MenuItem--expandedRounded:focus-visible {
|
|
9286
9978
|
clip-path: inset(-6px);
|
|
9287
9979
|
}
|
|
9288
9980
|
|
|
9289
|
-
.MenuItem--disabled:focus {
|
|
9981
|
+
.MenuItem--disabled:focus-visible {
|
|
9290
9982
|
outline: none;
|
|
9291
9983
|
}
|
|
9292
9984
|
|
|
@@ -9329,11 +10021,15 @@ body {
|
|
|
9329
10021
|
color: var(--primary-darker);
|
|
9330
10022
|
}
|
|
9331
10023
|
|
|
9332
|
-
.MenuItem--active:focus {
|
|
10024
|
+
.MenuItem--active:focus-visible {
|
|
9333
10025
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
9334
10026
|
outline-offset: var(--spacing-05);
|
|
9335
10027
|
}
|
|
9336
10028
|
|
|
10029
|
+
.MenuItem--active:focus:not(:focus-visible) {
|
|
10030
|
+
outline: none;
|
|
10031
|
+
}
|
|
10032
|
+
|
|
9337
10033
|
.MenuItem--rounded {
|
|
9338
10034
|
border-radius: var(--border-radius-40);
|
|
9339
10035
|
}
|
|
@@ -9416,7 +10112,7 @@ body {
|
|
|
9416
10112
|
.HorizontalNav-menu--active:focus {
|
|
9417
10113
|
background-color: var(--primary-ultra-light);
|
|
9418
10114
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
9419
|
-
outline-offset: var(--spacing-
|
|
10115
|
+
outline-offset: var(--spacing-10);
|
|
9420
10116
|
}
|
|
9421
10117
|
|
|
9422
10118
|
.HorizontalNav-menu--active:hover {
|
|
@@ -9462,6 +10158,21 @@ body {
|
|
|
9462
10158
|
opacity: var(--opacity-10);
|
|
9463
10159
|
}
|
|
9464
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
|
+
|
|
9465
10176
|
.OverlayHeader {
|
|
9466
10177
|
box-sizing: border-box;
|
|
9467
10178
|
margin-left: var(--spacing-60);
|
|
@@ -9592,6 +10303,22 @@ body {
|
|
|
9592
10303
|
padding-bottom: var(--spacing-40);
|
|
9593
10304
|
}
|
|
9594
10305
|
|
|
10306
|
+
.Modal:focus {
|
|
10307
|
+
outline: none;
|
|
10308
|
+
}
|
|
10309
|
+
|
|
10310
|
+
.Modal-header [tabindex='-1']:focus {
|
|
10311
|
+
outline: none;
|
|
10312
|
+
}
|
|
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
|
+
|
|
9595
10322
|
@keyframes fullscreenModal-open {
|
|
9596
10323
|
from {
|
|
9597
10324
|
opacity: 0;
|
|
@@ -9765,6 +10492,22 @@ body {
|
|
|
9765
10492
|
animation: fadeIn var(--duration--fast-02) var(--standard-expressive-curve);
|
|
9766
10493
|
}
|
|
9767
10494
|
|
|
10495
|
+
.Sidesheet:focus {
|
|
10496
|
+
outline: none;
|
|
10497
|
+
}
|
|
10498
|
+
|
|
10499
|
+
.Sidesheet-header [tabindex='-1']:focus {
|
|
10500
|
+
outline: none;
|
|
10501
|
+
}
|
|
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
|
+
|
|
9768
10511
|
.Collapsible-wrapper {
|
|
9769
10512
|
position: relative;
|
|
9770
10513
|
z-index: 600;
|
|
@@ -9955,6 +10698,10 @@ body {
|
|
|
9955
10698
|
width: 100%;
|
|
9956
10699
|
}
|
|
9957
10700
|
|
|
10701
|
+
.EditableInput:focus-visible {
|
|
10702
|
+
outline: none;
|
|
10703
|
+
}
|
|
10704
|
+
|
|
9958
10705
|
.EditableInput-actions {
|
|
9959
10706
|
position: absolute;
|
|
9960
10707
|
display: flex;
|
|
@@ -9977,6 +10724,21 @@ body {
|
|
|
9977
10724
|
white-space: nowrap;
|
|
9978
10725
|
display: flex;
|
|
9979
10726
|
align-items: center;
|
|
10727
|
+
border-radius: var(--border-radius-10);
|
|
10728
|
+
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
10729
|
+
cursor: pointer;
|
|
10730
|
+
}
|
|
10731
|
+
|
|
10732
|
+
.EditableInput-default:hover {
|
|
10733
|
+
background: var(--secondary-lighter);
|
|
10734
|
+
border-color: var(--secondary-dark);
|
|
10735
|
+
}
|
|
10736
|
+
|
|
10737
|
+
.EditableInput:focus-visible .EditableInput-default {
|
|
10738
|
+
background: var(--white);
|
|
10739
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
10740
|
+
outline-offset: var(--spacing-05);
|
|
10741
|
+
border-color: transparent;
|
|
9980
10742
|
}
|
|
9981
10743
|
|
|
9982
10744
|
.EditableInput-default--regular {
|
|
@@ -10001,20 +10763,46 @@ body {
|
|
|
10001
10763
|
width: 100%;
|
|
10002
10764
|
}
|
|
10003
10765
|
|
|
10766
|
+
.EditableInput-errorIcon--regular {
|
|
10767
|
+
margin-right: var(--spacing-20);
|
|
10768
|
+
margin-top: var(--spacing-10);
|
|
10769
|
+
margin-bottom: var(--spacing-10);
|
|
10770
|
+
}
|
|
10771
|
+
|
|
10772
|
+
.EditableInput-errorIcon--tiny {
|
|
10773
|
+
margin-right: var(--spacing-10);
|
|
10774
|
+
margin-top: var(--spacing-05);
|
|
10775
|
+
margin-bottom: var(--spacing-05);
|
|
10776
|
+
}
|
|
10777
|
+
|
|
10004
10778
|
.EditableChipInput {
|
|
10005
10779
|
position: relative;
|
|
10006
10780
|
width: 100%;
|
|
10007
10781
|
}
|
|
10782
|
+
|
|
10783
|
+
.EditableChipInput:focus-visible {
|
|
10784
|
+
outline: none;
|
|
10785
|
+
}
|
|
10008
10786
|
.EditableChipInput-default {
|
|
10787
|
+
box-sizing: border-box;
|
|
10009
10788
|
display: flex;
|
|
10010
10789
|
align-items: center;
|
|
10011
10790
|
padding-left: var(--spacing-30);
|
|
10012
10791
|
border-left: var(--border-width-2-5) solid transparent;
|
|
10013
10792
|
min-height: var(--spacing-80);
|
|
10014
10793
|
flex-wrap: wrap;
|
|
10794
|
+
border-radius: var(--border-radius-10);
|
|
10795
|
+
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
10796
|
+
cursor: pointer;
|
|
10797
|
+
}
|
|
10798
|
+
|
|
10799
|
+
.EditableChipInput-default--small {
|
|
10800
|
+
min-height: var(--spacing-60);
|
|
10801
|
+
padding-left: var(--spacing-20);
|
|
10015
10802
|
}
|
|
10016
10803
|
|
|
10017
10804
|
.EditableChipInput-defaultWithChips {
|
|
10805
|
+
box-sizing: border-box;
|
|
10018
10806
|
display: flex;
|
|
10019
10807
|
align-items: center;
|
|
10020
10808
|
padding-left: var(--spacing-20);
|
|
@@ -10023,17 +10811,50 @@ body {
|
|
|
10023
10811
|
padding-bottom: var(--spacing-2-5);
|
|
10024
10812
|
max-width: calc(100% - 28px);
|
|
10025
10813
|
flex-wrap: wrap;
|
|
10814
|
+
border-radius: var(--border-radius-10);
|
|
10815
|
+
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
10816
|
+
cursor: pointer;
|
|
10817
|
+
}
|
|
10818
|
+
|
|
10819
|
+
.EditableChipInput-defaultWithChips--small {
|
|
10820
|
+
min-height: var(--spacing-60);
|
|
10821
|
+
padding-top: 0;
|
|
10822
|
+
padding-bottom: 0;
|
|
10026
10823
|
}
|
|
10027
10824
|
|
|
10028
10825
|
.EditableChipInput-defaultWithChips:hover,
|
|
10029
10826
|
.EditableChipInput-default:hover {
|
|
10030
|
-
background-color: var(--secondary-
|
|
10827
|
+
background-color: var(--secondary-lighter);
|
|
10828
|
+
box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
|
|
10829
|
+
}
|
|
10830
|
+
|
|
10831
|
+
.EditableChipInput:focus-visible .EditableChipInput-default,
|
|
10832
|
+
.EditableChipInput:focus-visible .EditableChipInput-defaultWithChips {
|
|
10833
|
+
background: var(--white);
|
|
10834
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
10835
|
+
outline-offset: var(--spacing-05);
|
|
10836
|
+
box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
|
|
10031
10837
|
}
|
|
10032
10838
|
|
|
10033
10839
|
.EditableChipInput-chipInput {
|
|
10034
10840
|
padding-left: var(--spacing-20);
|
|
10035
10841
|
}
|
|
10036
10842
|
|
|
10843
|
+
.EditableChipInput-chip--regular {
|
|
10844
|
+
margin: var(--spacing-05);
|
|
10845
|
+
}
|
|
10846
|
+
|
|
10847
|
+
.EditableChipInput-chip--small {
|
|
10848
|
+
margin-left: var(--spacing-05);
|
|
10849
|
+
margin-right: var(--spacing-05);
|
|
10850
|
+
margin-top: 0;
|
|
10851
|
+
margin-bottom: 0;
|
|
10852
|
+
}
|
|
10853
|
+
|
|
10854
|
+
.EditableChipInput-placeholder--small {
|
|
10855
|
+
padding-top: 0;
|
|
10856
|
+
}
|
|
10857
|
+
|
|
10037
10858
|
.EditableChipInput-actions {
|
|
10038
10859
|
position: absolute;
|
|
10039
10860
|
display: flex;
|
|
@@ -10384,6 +11205,38 @@ body {
|
|
|
10384
11205
|
box-sizing: border-box;
|
|
10385
11206
|
}
|
|
10386
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
|
+
|
|
10387
11240
|
.Dropzone {
|
|
10388
11241
|
display: flex;
|
|
10389
11242
|
align-items: center;
|
|
@@ -10564,6 +11417,30 @@ body {
|
|
|
10564
11417
|
fill: var(--alert);
|
|
10565
11418
|
}
|
|
10566
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
|
+
|
|
10567
11444
|
.FileUploader {
|
|
10568
11445
|
display: flex;
|
|
10569
11446
|
flex-direction: column;
|
|
@@ -10635,8 +11512,9 @@ body {
|
|
|
10635
11512
|
}
|
|
10636
11513
|
|
|
10637
11514
|
.Table-Header-Label--hide {
|
|
10638
|
-
animation:
|
|
11515
|
+
animation: tableHeaderFadeOut var(--duration--fast-02) var(--exit-productive-curve);
|
|
10639
11516
|
animation-fill-mode: forwards;
|
|
11517
|
+
pointer-events: none;
|
|
10640
11518
|
}
|
|
10641
11519
|
|
|
10642
11520
|
.Table-Header-Label--show {
|
|
@@ -10644,6 +11522,36 @@ body {
|
|
|
10644
11522
|
animation-fill-mode: forwards;
|
|
10645
11523
|
}
|
|
10646
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
|
+
|
|
10647
11555
|
/* Navigation */
|
|
10648
11556
|
|
|
10649
11557
|
.Navigation {
|
|
@@ -10762,6 +11670,22 @@ body {
|
|
|
10762
11670
|
border-top: var(--border);
|
|
10763
11671
|
}
|
|
10764
11672
|
|
|
11673
|
+
.Navigation-footerButton {
|
|
11674
|
+
display: flex;
|
|
11675
|
+
align-items: center;
|
|
11676
|
+
justify-content: center;
|
|
11677
|
+
background: none;
|
|
11678
|
+
border: none;
|
|
11679
|
+
padding: 0;
|
|
11680
|
+
cursor: pointer;
|
|
11681
|
+
border-radius: 50%;
|
|
11682
|
+
}
|
|
11683
|
+
|
|
11684
|
+
.Navigation-footerButton:focus-visible {
|
|
11685
|
+
outline: var(--border-width-05) solid var(--primary-focus);
|
|
11686
|
+
outline-offset: var(--spacing-05);
|
|
11687
|
+
}
|
|
11688
|
+
|
|
10765
11689
|
.Navigation--collapsed .Navigation-menuIcon--footer {
|
|
10766
11690
|
transform: rotate(180deg);
|
|
10767
11691
|
}
|
|
@@ -10983,7 +11907,8 @@ body {
|
|
|
10983
11907
|
font-size: var(--font-size-s);
|
|
10984
11908
|
}
|
|
10985
11909
|
|
|
10986
|
-
.LinkButton--default
|
|
11910
|
+
.LinkButton--default,
|
|
11911
|
+
.LinkButton--default-disabled {
|
|
10987
11912
|
color: var(--primary);
|
|
10988
11913
|
}
|
|
10989
11914
|
|
|
@@ -10995,21 +11920,25 @@ body {
|
|
|
10995
11920
|
color: var(--primary-darker);
|
|
10996
11921
|
}
|
|
10997
11922
|
|
|
10998
|
-
.LinkButton--default:focus,
|
|
10999
|
-
.LinkButton--default:focus-visible {
|
|
11923
|
+
.LinkButton--default:focus-visible,
|
|
11924
|
+
.LinkButton--default-disabled:focus-visible {
|
|
11000
11925
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
11001
11926
|
outline-offset: var(--spacing-05);
|
|
11002
11927
|
}
|
|
11003
11928
|
|
|
11004
|
-
.LinkButton--default
|
|
11929
|
+
.LinkButton--default-disabled {
|
|
11005
11930
|
cursor: not-allowed;
|
|
11006
|
-
pointer-events: none;
|
|
11007
11931
|
color: var(--primary-lighter);
|
|
11008
11932
|
}
|
|
11009
11933
|
|
|
11934
|
+
.LinkButton-infoIcon--default {
|
|
11935
|
+
color: var(--text-link);
|
|
11936
|
+
}
|
|
11937
|
+
|
|
11010
11938
|
/* Subtle Appearance */
|
|
11011
11939
|
|
|
11012
|
-
.LinkButton--subtle
|
|
11940
|
+
.LinkButton--subtle,
|
|
11941
|
+
.LinkButton--subtle-disabled {
|
|
11013
11942
|
color: var(--inverse-lighter);
|
|
11014
11943
|
}
|
|
11015
11944
|
|
|
@@ -11021,18 +11950,85 @@ body {
|
|
|
11021
11950
|
color: var(--inverse);
|
|
11022
11951
|
}
|
|
11023
11952
|
|
|
11024
|
-
.LinkButton--subtle:focus,
|
|
11025
|
-
.LinkButton--subtle:focus-visible {
|
|
11953
|
+
.LinkButton--subtle:focus-visible,
|
|
11954
|
+
.LinkButton--subtle-disabled:focus-visible {
|
|
11026
11955
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
11027
11956
|
outline-offset: var(--spacing-05);
|
|
11028
11957
|
}
|
|
11029
11958
|
|
|
11030
|
-
.LinkButton--subtle
|
|
11959
|
+
.LinkButton--subtle-disabled {
|
|
11031
11960
|
cursor: not-allowed;
|
|
11032
|
-
pointer-events: none;
|
|
11033
11961
|
color: var(--inverse-lightest);
|
|
11034
11962
|
}
|
|
11035
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
|
+
|
|
11036
12032
|
.ActionCard {
|
|
11037
12033
|
border-radius: var(--border-radius-10);
|
|
11038
12034
|
width: 100%;
|
|
@@ -11176,6 +12172,44 @@ body {
|
|
|
11176
12172
|
opacity: var(--opacity-10);
|
|
11177
12173
|
}
|
|
11178
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
|
+
|
|
11179
12213
|
.Listbox {
|
|
11180
12214
|
margin: 0;
|
|
11181
12215
|
padding: 0;
|
|
@@ -11227,7 +12261,6 @@ body {
|
|
|
11227
12261
|
background-color: var(--secondary-lightest);
|
|
11228
12262
|
}
|
|
11229
12263
|
|
|
11230
|
-
.Listbox-item--option:focus,
|
|
11231
12264
|
.Listbox-item--option:focus-visible {
|
|
11232
12265
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
11233
12266
|
outline-offset: calc(-1 * var(--border-width-05));
|
|
@@ -11238,14 +12271,30 @@ body {
|
|
|
11238
12271
|
}
|
|
11239
12272
|
|
|
11240
12273
|
.Listbox-item--selected {
|
|
12274
|
+
position: relative;
|
|
11241
12275
|
background: rgba(214, 238, 255, 0.48);
|
|
11242
12276
|
}
|
|
11243
12277
|
|
|
12278
|
+
.Listbox-item--selected::before {
|
|
12279
|
+
content: '';
|
|
12280
|
+
position: absolute;
|
|
12281
|
+
top: var(--spacing-10);
|
|
12282
|
+
left: var(--spacing-10);
|
|
12283
|
+
width: var(--spacing-20);
|
|
12284
|
+
height: var(--spacing-20);
|
|
12285
|
+
background-color: var(--primary);
|
|
12286
|
+
clip-path: polygon(0 0, 100% 0, 0 100%);
|
|
12287
|
+
}
|
|
12288
|
+
|
|
12289
|
+
.Listbox-item--tight.Listbox-item--selected::before {
|
|
12290
|
+
top: var(--spacing-05);
|
|
12291
|
+
left: var(--spacing-05);
|
|
12292
|
+
}
|
|
12293
|
+
|
|
11244
12294
|
.Listbox-item--selected:hover {
|
|
11245
12295
|
background: rgba(139, 202, 254, 0.48);
|
|
11246
12296
|
}
|
|
11247
12297
|
|
|
11248
|
-
.Listbox-item--selected:focus,
|
|
11249
12298
|
.Listbox-item--selected:focus-visible {
|
|
11250
12299
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
11251
12300
|
outline-offset: calc(-1 * var(--border-width-05));
|
|
@@ -11265,7 +12314,6 @@ body {
|
|
|
11265
12314
|
background-color: var(--secondary-lightest);
|
|
11266
12315
|
}
|
|
11267
12316
|
|
|
11268
|
-
.Listbox-item--resource:focus,
|
|
11269
12317
|
.Listbox-item--resource:focus-visible {
|
|
11270
12318
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
11271
12319
|
outline-offset: calc(-1 * var(--border-width-05));
|
|
@@ -11276,12 +12324,28 @@ body {
|
|
|
11276
12324
|
}
|
|
11277
12325
|
|
|
11278
12326
|
.Listbox-item--activated {
|
|
12327
|
+
position: relative;
|
|
11279
12328
|
background: var(--primary-lightest);
|
|
11280
12329
|
}
|
|
11281
12330
|
|
|
12331
|
+
.Listbox-item--activated::before {
|
|
12332
|
+
content: '';
|
|
12333
|
+
position: absolute;
|
|
12334
|
+
top: var(--spacing-10);
|
|
12335
|
+
left: var(--spacing-10);
|
|
12336
|
+
width: var(--spacing-20);
|
|
12337
|
+
height: var(--spacing-20);
|
|
12338
|
+
background-color: var(--primary);
|
|
12339
|
+
clip-path: polygon(0 0, 100% 0, 0 100%);
|
|
12340
|
+
}
|
|
12341
|
+
|
|
12342
|
+
.Listbox-item--tight.Listbox-item--activated::before {
|
|
12343
|
+
top: var(--spacing-05);
|
|
12344
|
+
left: var(--spacing-05);
|
|
12345
|
+
}
|
|
12346
|
+
|
|
11282
12347
|
/* Listbox type - description */
|
|
11283
12348
|
|
|
11284
|
-
.Listbox-item--description:focus,
|
|
11285
12349
|
.Listbox-item--description:focus-visible {
|
|
11286
12350
|
outline: none;
|
|
11287
12351
|
}
|
|
@@ -11295,24 +12359,98 @@ body {
|
|
|
11295
12359
|
|
|
11296
12360
|
/* Listbox type - draggable */
|
|
11297
12361
|
|
|
11298
|
-
.Listbox-item--draggable:
|
|
12362
|
+
.Listbox-item--draggable:hover {
|
|
12363
|
+
background-color: var(--secondary-lightest);
|
|
12364
|
+
}
|
|
12365
|
+
|
|
12366
|
+
.Listbox-item--draggable:focus-visible {
|
|
11299
12367
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
11300
12368
|
outline-offset: calc(-1 * var(--border-width-05));
|
|
11301
12369
|
}
|
|
11302
12370
|
|
|
11303
12371
|
.Listbox-item--drag-icon {
|
|
11304
12372
|
cursor: grab;
|
|
11305
|
-
|
|
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);
|
|
11306
12385
|
}
|
|
11307
12386
|
|
|
11308
12387
|
.Listbox-item--drag-icon:hover {
|
|
12388
|
+
background-color: var(--secondary);
|
|
11309
12389
|
color: var(--inverse);
|
|
11310
12390
|
}
|
|
11311
12391
|
|
|
11312
12392
|
.Listbox-item--drag-icon:active {
|
|
12393
|
+
background-color: var(--secondary-dark);
|
|
11313
12394
|
color: var(--primary);
|
|
11314
12395
|
}
|
|
11315
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);
|
|
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
|
+
}
|
|
12452
|
+
}
|
|
12453
|
+
|
|
11316
12454
|
/* Selection avatar group */
|
|
11317
12455
|
.SelectionAvatarGroup {
|
|
11318
12456
|
box-sizing: border-box;
|
|
@@ -11509,6 +12647,28 @@ body {
|
|
|
11509
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;
|
|
11510
12648
|
}
|
|
11511
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
|
+
|
|
11512
12672
|
.Select-input {
|
|
11513
12673
|
min-width: unset !important;
|
|
11514
12674
|
background: transparent;
|
|
@@ -11560,7 +12720,7 @@ body {
|
|
|
11560
12720
|
color: var(--text);
|
|
11561
12721
|
}
|
|
11562
12722
|
|
|
11563
|
-
.Select-trigger--filled:focus {
|
|
12723
|
+
.Select-trigger--filled:focus-visible {
|
|
11564
12724
|
background-color: var(--secondary-light);
|
|
11565
12725
|
}
|
|
11566
12726
|
|
|
@@ -11665,10 +12825,11 @@ body {
|
|
|
11665
12825
|
cursor: pointer;
|
|
11666
12826
|
border-radius: var(--border-radius-full);
|
|
11667
12827
|
padding: var(--spacing-05);
|
|
12828
|
+
border: none;
|
|
12829
|
+
background: transparent;
|
|
11668
12830
|
}
|
|
11669
12831
|
|
|
11670
|
-
.Select-crossButton:focus-visible
|
|
11671
|
-
.Select-crossButton:focus {
|
|
12832
|
+
.Select-crossButton:focus-visible {
|
|
11672
12833
|
outline: var(--spacing-05) solid var(--primary-focus);
|
|
11673
12834
|
}
|
|
11674
12835
|
|
|
@@ -11711,6 +12872,13 @@ body {
|
|
|
11711
12872
|
border: var(--border-width-2-5) solid var(--alert) !important;
|
|
11712
12873
|
}
|
|
11713
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
|
+
|
|
11714
12882
|
.Menu {
|
|
11715
12883
|
overflow-y: auto !important;
|
|
11716
12884
|
padding-top: var(--spacing-10);
|
|
@@ -11781,7 +12949,7 @@ body {
|
|
|
11781
12949
|
height: var(--spacing-10);
|
|
11782
12950
|
border-radius: var(--border-radius-full);
|
|
11783
12951
|
margin: 0 var(--spacing-20);
|
|
11784
|
-
background: var(--inverse-
|
|
12952
|
+
background: var(--inverse-lighter);
|
|
11785
12953
|
}
|
|
11786
12954
|
|
|
11787
12955
|
.ChatBubble-box--noSuccess {
|
|
@@ -11826,17 +12994,24 @@ body {
|
|
|
11826
12994
|
flex: 0 0 auto;
|
|
11827
12995
|
}
|
|
11828
12996
|
|
|
12997
|
+
.ChatBubble-actionBarWrapper--hidden {
|
|
12998
|
+
width: 0;
|
|
12999
|
+
overflow: hidden;
|
|
13000
|
+
}
|
|
13001
|
+
|
|
11829
13002
|
.ChatInput {
|
|
11830
13003
|
display: flex;
|
|
11831
13004
|
flex-direction: row;
|
|
11832
13005
|
align-items: center;
|
|
11833
|
-
border: var(--border-width-2-5) solid var(--secondary);
|
|
13006
|
+
border: var(--border-width-2-5) solid var(--secondary-dark);
|
|
11834
13007
|
padding: var(--spacing-20);
|
|
11835
13008
|
border-radius: var(--border-radius-10);
|
|
11836
13009
|
background: var(--white);
|
|
11837
13010
|
max-width: 100%;
|
|
11838
13011
|
min-width: var(--spacing-640);
|
|
11839
|
-
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);
|
|
11840
13015
|
max-height: var(--spacing-440);
|
|
11841
13016
|
position: relative;
|
|
11842
13017
|
box-sizing: border-box;
|
|
@@ -11906,7 +13081,8 @@ body {
|
|
|
11906
13081
|
.ChatInput-actions {
|
|
11907
13082
|
display: flex;
|
|
11908
13083
|
flex-shrink: 0;
|
|
11909
|
-
transition:
|
|
13084
|
+
transition: margin var(--duration--slow-01) var(--standard-productive-curve),
|
|
13085
|
+
width var(--duration--slow-01) var(--standard-productive-curve);
|
|
11910
13086
|
margin-left: var(--spacing-20);
|
|
11911
13087
|
align-items: center;
|
|
11912
13088
|
}
|
|
@@ -11918,6 +13094,14 @@ body {
|
|
|
11918
13094
|
margin-left: 0;
|
|
11919
13095
|
}
|
|
11920
13096
|
|
|
13097
|
+
@media (prefers-reduced-motion: reduce) {
|
|
13098
|
+
.ChatInput,
|
|
13099
|
+
.ChatInput-actions,
|
|
13100
|
+
.ChatInput-textarea {
|
|
13101
|
+
transition: none;
|
|
13102
|
+
}
|
|
13103
|
+
}
|
|
13104
|
+
|
|
11921
13105
|
.Meter {
|
|
11922
13106
|
display: flex;
|
|
11923
13107
|
align-items: center;
|
|
@@ -12061,7 +13245,7 @@ body {
|
|
|
12061
13245
|
outline: none;
|
|
12062
13246
|
}
|
|
12063
13247
|
|
|
12064
|
-
.SegmentedControl-segment:focus-visible
|
|
13248
|
+
.SegmentedControl-segment:focus-visible {
|
|
12065
13249
|
outline: var(--border-width-05) solid var(--primary-focus);
|
|
12066
13250
|
outline-offset: var(--spacing-05);
|
|
12067
13251
|
border-radius: var(--border-radius-10);
|
|
@@ -12241,41 +13425,21 @@ body {
|
|
|
12241
13425
|
display: flex;
|
|
12242
13426
|
align-items: center;
|
|
12243
13427
|
color: var(--inverse);
|
|
12244
|
-
background: linear-gradient(
|
|
12245
|
-
277deg,
|
|
12246
|
-
rgba(227, 28, 121, 0.15) 0%,
|
|
12247
|
-
rgba(231, 56, 79, 0.24) 28%,
|
|
12248
|
-
rgba(240, 125, 0, 0.15) 100%
|
|
12249
|
-
);
|
|
13428
|
+
background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
|
|
12250
13429
|
}
|
|
12251
13430
|
|
|
12252
13431
|
.AIButton:hover {
|
|
12253
|
-
background: linear-gradient(
|
|
12254
|
-
277deg,
|
|
12255
|
-
rgba(227, 28, 121, 0.2) 0%,
|
|
12256
|
-
rgba(231, 56, 79, 0.32) 28%,
|
|
12257
|
-
rgba(240, 125, 0, 0.2) 100%
|
|
12258
|
-
);
|
|
13432
|
+
background: linear-gradient(116deg, #fbe1c9 14.17%, #f8c5c6 50.06%, #f9cbdc 85.01%);
|
|
12259
13433
|
}
|
|
12260
13434
|
|
|
12261
13435
|
.AIButton:active {
|
|
12262
|
-
background: linear-gradient(
|
|
12263
|
-
277deg,
|
|
12264
|
-
rgba(227, 28, 121, 0.31) 0%,
|
|
12265
|
-
rgba(231, 56, 79, 0.48) 28%,
|
|
12266
|
-
rgba(240, 125, 0, 0.31) 100%
|
|
12267
|
-
);
|
|
13436
|
+
background: linear-gradient(106deg, #fad1ae 20.06%, #f5aea9 44.48%, #f4a0ad 67.83%, #f6b3ce 86.55%);
|
|
12268
13437
|
}
|
|
12269
13438
|
|
|
12270
13439
|
.AIButton:disabled {
|
|
12271
13440
|
cursor: not-allowed;
|
|
12272
13441
|
opacity: var(--opacity-10);
|
|
12273
|
-
background: linear-gradient(
|
|
12274
|
-
277deg,
|
|
12275
|
-
rgba(227, 28, 121, 0.15) 0%,
|
|
12276
|
-
rgba(231, 56, 79, 0.24) 28%,
|
|
12277
|
-
rgba(240, 125, 0, 0.15) 100%
|
|
12278
|
-
);
|
|
13442
|
+
background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
|
|
12279
13443
|
}
|
|
12280
13444
|
|
|
12281
13445
|
.AIButton:focus {
|
|
@@ -12311,22 +13475,12 @@ body {
|
|
|
12311
13475
|
}
|
|
12312
13476
|
|
|
12313
13477
|
.AIIconButton:hover {
|
|
12314
|
-
background: linear-gradient(
|
|
12315
|
-
315deg,
|
|
12316
|
-
rgba(227, 28, 121, 0.2) 0%,
|
|
12317
|
-
rgba(231, 56, 79, 0.32) 19.79%,
|
|
12318
|
-
rgba(240, 125, 0, 0.32) 100%
|
|
12319
|
-
);
|
|
13478
|
+
background: linear-gradient(143deg, #fad1b2 10.84%, #f8c4c1 51.71%, #f8c8d7 91.5%);
|
|
12320
13479
|
color: var(--secondary) !important;
|
|
12321
13480
|
}
|
|
12322
13481
|
|
|
12323
13482
|
.AIIconButton:active {
|
|
12324
|
-
background: linear-gradient(
|
|
12325
|
-
315deg,
|
|
12326
|
-
rgba(227, 28, 121, 0.31) 0%,
|
|
12327
|
-
rgba(231, 56, 79, 0.48) 19.79%,
|
|
12328
|
-
rgba(240, 125, 0, 0.48) 100%
|
|
12329
|
-
);
|
|
13483
|
+
background: linear-gradient(144deg, #f7ba8c 14.82%, #f6af98 40.53%, #f5a8a0 55.69%, #f5adc5 79.29%);
|
|
12330
13484
|
color: var(--secondary-dark) !important;
|
|
12331
13485
|
}
|
|
12332
13486
|
|
|
@@ -12387,30 +13541,16 @@ body {
|
|
|
12387
13541
|
width: -moz-fit-content;
|
|
12388
13542
|
width: fit-content;
|
|
12389
13543
|
border: 0;
|
|
12390
|
-
|
|
12391
|
-
|
|
12392
|
-
rgba(231, 56, 79, 0.24) 0%,
|
|
12393
|
-
rgba(231, 56, 79, 0.24) 19.79%,
|
|
12394
|
-
rgba(240, 125, 0, 0.24) 100%
|
|
12395
|
-
);
|
|
13544
|
+
position: relative;
|
|
13545
|
+
background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
|
|
12396
13546
|
}
|
|
12397
13547
|
|
|
12398
13548
|
.AIChip:hover {
|
|
12399
|
-
background: linear-gradient(
|
|
12400
|
-
274deg,
|
|
12401
|
-
rgba(231, 56, 79, 0.32) 0%,
|
|
12402
|
-
rgba(231, 56, 79, 0.32) 19.79%,
|
|
12403
|
-
rgba(240, 125, 0, 0.32) 100%
|
|
12404
|
-
);
|
|
13549
|
+
background: linear-gradient(108deg, #fad3b0 15.89%, #f9cdb7 33.52%, #f8c6bf 54.17%, #f7bfc7 70.92%);
|
|
12405
13550
|
}
|
|
12406
13551
|
|
|
12407
13552
|
.AIChip:active {
|
|
12408
|
-
background: linear-gradient(
|
|
12409
|
-
274deg,
|
|
12410
|
-
rgba(231, 56, 79, 0.48) 0%,
|
|
12411
|
-
rgba(231, 56, 79, 0.48) 19.79%,
|
|
12412
|
-
rgba(240, 125, 0, 0.48) 100%
|
|
12413
|
-
);
|
|
13553
|
+
background: linear-gradient(106deg, #f7bd89 20.06%, #f6b196 44.48%, #f4a4a5 67.83%, #f39faa 86.55%);
|
|
12414
13554
|
}
|
|
12415
13555
|
|
|
12416
13556
|
.AIChip:focus,
|
|
@@ -12440,12 +13580,7 @@ body {
|
|
|
12440
13580
|
/* Disabled Chip */
|
|
12441
13581
|
|
|
12442
13582
|
.AIChip--disabled {
|
|
12443
|
-
background: linear-gradient(
|
|
12444
|
-
274deg,
|
|
12445
|
-
rgba(231, 56, 79, 0.24) 0%,
|
|
12446
|
-
rgba(231, 56, 79, 0.24) 19.79%,
|
|
12447
|
-
rgba(240, 125, 0, 0.24) 100%
|
|
12448
|
-
);
|
|
13583
|
+
background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
|
|
12449
13584
|
}
|
|
12450
13585
|
|
|
12451
13586
|
.AIChip-icon--disabled {
|
|
@@ -12460,12 +13595,13 @@ body {
|
|
|
12460
13595
|
|
|
12461
13596
|
.AIChip:disabled {
|
|
12462
13597
|
cursor: not-allowed;
|
|
12463
|
-
background: linear-gradient(
|
|
12464
|
-
|
|
12465
|
-
|
|
12466
|
-
|
|
12467
|
-
|
|
12468
|
-
);
|
|
13598
|
+
background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
|
|
13599
|
+
}
|
|
13600
|
+
|
|
13601
|
+
.AIChip-AIIcon {
|
|
13602
|
+
position: absolute;
|
|
13603
|
+
top: calc(-1 * var(--spacing-05));
|
|
13604
|
+
right: calc(-1 * var(--spacing-05));
|
|
12469
13605
|
}
|
|
12470
13606
|
|
|
12471
13607
|
.AIResponse-container--glow {
|