@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4
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/dist/searchHandlers.test.js +8 -2
- package/dist/toolHandler.test.js +9 -9
- package/dist/utils.test.js +6 -2
- package/package.json +32 -30
- package/generated/docs/components-alert-docs.md +0 -702
- package/generated/docs/components-autocomplete-docs.md +0 -1433
- package/generated/docs/components-autocomplete-recipes-docs.md +0 -104
- package/generated/docs/components-badge-docs.md +0 -531
- package/generated/docs/components-button-docs.md +0 -1442
- package/generated/docs/components-buttongroup-docs.md +0 -748
- package/generated/docs/components-card-docs.md +0 -944
- package/generated/docs/components-checkbox-docs.md +0 -694
- package/generated/docs/components-checkboxgroup-docs.md +0 -1087
- package/generated/docs/components-checkboxgroup-recipes-docs.md +0 -119
- package/generated/docs/components-col-docs.md +0 -881
- package/generated/docs/components-container-docs.md +0 -123
- package/generated/docs/components-divider-docs.md +0 -576
- package/generated/docs/components-expander-docs.md +0 -594
- package/generated/docs/components-field-docs.md +0 -2007
- package/generated/docs/components-filter-docs.md +0 -1322
- package/generated/docs/components-hide-docs.md +0 -702
- package/generated/docs/components-icon-docs.md +0 -816
- package/generated/docs/components-image-docs.md +0 -493
- package/generated/docs/components-inline-docs.md +0 -2003
- package/generated/docs/components-input-docs.md +0 -867
- package/generated/docs/components-input-recipes-docs.md +0 -140
- package/generated/docs/components-inputcurrency-docs.md +0 -689
- package/generated/docs/components-inputcurrency-recipes-docs.md +0 -115
- package/generated/docs/components-introduction-docs.md +0 -450
- package/generated/docs/components-label-docs.md +0 -562
- package/generated/docs/components-link-docs.md +0 -586
- package/generated/docs/components-menu-docs.md +0 -1146
- package/generated/docs/components-menu-menuitem-docs.md +0 -739
- package/generated/docs/components-modal-docs.md +0 -1346
- package/generated/docs/components-panel-docs.md +0 -600
- package/generated/docs/components-placeholder-docs.md +0 -446
- package/generated/docs/components-popover-docs.md +0 -1529
- package/generated/docs/components-popover-recipes-docs.md +0 -211
- package/generated/docs/components-progress-docs.md +0 -568
- package/generated/docs/components-provider-docs.md +0 -160
- package/generated/docs/components-radio-docs.md +0 -563
- package/generated/docs/components-radiogroup-docs.md +0 -1153
- package/generated/docs/components-readonly-docs.md +0 -535
- package/generated/docs/components-richselect-docs.md +0 -5836
- package/generated/docs/components-row-docs.md +0 -2354
- package/generated/docs/components-select-docs.md +0 -940
- package/generated/docs/components-skeleton-docs.md +0 -597
- package/generated/docs/components-skeleton-recipes-docs.md +0 -76
- package/generated/docs/components-skiplink-docs.md +0 -587
- package/generated/docs/components-slideout-docs.md +0 -1036
- package/generated/docs/components-slider-docs.md +0 -828
- package/generated/docs/components-spinner-docs.md +0 -450
- package/generated/docs/components-stack-docs.md +0 -923
- package/generated/docs/components-table-ag-grid-docs.md +0 -1444
- package/generated/docs/components-table-docs.md +0 -2327
- package/generated/docs/components-tabset-docs.md +0 -768
- package/generated/docs/components-tabset-tab-docs.md +0 -550
- package/generated/docs/components-tag-docs.md +0 -548
- package/generated/docs/components-text-docs.md +0 -585
- package/generated/docs/components-toaster-docs.md +0 -755
- package/generated/docs/components-toggle-docs.md +0 -614
- package/generated/docs/components-tooltip-docs.md +0 -747
- package/generated/docs/components-validationmessage-docs.md +0 -1161
- package/generated/docs/contact-us-docs.md +0 -27
- package/generated/docs/extensions-editor-docs.md +0 -1181
- package/generated/docs/extensions-editor-recipes-docs.md +0 -89
- package/generated/docs/foundations-accessibility-docs.md +0 -40
- package/generated/docs/foundations-consistency-docs.md +0 -52
- package/generated/docs/foundations-content-docs.md +0 -23
- package/generated/docs/foundations-grid-docs.md +0 -74
- package/generated/docs/foundations-introduction-docs.md +0 -19
- package/generated/docs/foundations-principles-docs.md +0 -70
- package/generated/docs/foundations-responsive-breakpoints-docs.md +0 -193
- package/generated/docs/foundations-tokens-colour-docs.md +0 -564
- package/generated/docs/foundations-tokens-elevation-docs.md +0 -155
- package/generated/docs/foundations-tokens-introduction-docs.md +0 -190
- package/generated/docs/foundations-tokens-radius-docs.md +0 -71
- package/generated/docs/foundations-tokens-spacing-docs.md +0 -89
- package/generated/docs/foundations-tokens-typography-docs.md +0 -322
- package/generated/docs/foundations-user-experience-docs.md +0 -63
- package/generated/docs/foundations-visual-design-docs.md +0 -46
- package/generated/docs/foundations-z-index-stacking-docs.md +0 -31
- package/generated/docs/frequently-asked-questions-docs.md +0 -53
- package/generated/docs/get-started-develop-docs.md +0 -209
- package/generated/docs/get-started-using-storybook-docs.md +0 -68
- package/generated/docs/guidelines.md +0 -2054
- package/generated/docs/introduction-docs.md +0 -87
- package/generated/docs/news-version-6-docs.md +0 -93
- package/generated/docs/patterns-form-docs.md +0 -3902
- package/generated/docs/patterns-form-recipes-docs.md +0 -1370
- package/generated/docs/patterns-introduction-docs.md +0 -24
- package/generated/docs/patterns-loading-docs.md +0 -4043
- package/generated/docs/resources-code-katas-docs.md +0 -29
- package/generated/docs/resources-introduction-docs.md +0 -38
- package/generated/docs/resources-mcp-server-docs.md +0 -27
- package/generated/docs/resources-migration-guides-from-v4-to-v5-docs.md +0 -437
- package/generated/docs/styling-props-colour-docs.md +0 -172
- package/generated/docs/styling-props-elevation-docs.md +0 -88
- package/generated/docs/styling-props-radius-docs.md +0 -86
- package/generated/docs/styling-props-reference-docs.md +0 -160
- package/generated/docs/styling-props-screen-readers-docs.md +0 -71
- package/generated/docs/styling-props-sizing-docs.md +0 -627
- package/generated/docs/styling-props-spacing-docs.md +0 -2282
- package/generated/docs/styling-props-typography-docs.md +0 -121
- package/generated/docs/themes-available-themes-docs.md +0 -66
- package/generated/docs/themes-introduction-docs.md +0 -121
- package/generated/docs/versions-docs.md +0 -17
- /package/{LICENSE.txt → LICENSE} +0 -0
|
@@ -1,564 +0,0 @@
|
|
|
1
|
-
[](#colour)Colour
|
|
2
|
-
=================
|
|
3
|
-
|
|
4
|
-
Colour is an integral aspect of conveying clear concise data. Our colours are optimized across two backgrounds, meeting or exceeding [WCAG 2.1 Level AA Accessibility Guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum).
|
|
5
|
-
|
|
6
|
-
The default theme is designed to meet WCAG contrast guidelines. We can't guarantee this when consumer branding is applied, so colour combinations should be checked to ensure conformance.
|
|
7
|
-
|
|
8
|
-
[](#primary)Primary
|
|
9
|
-
-------------------
|
|
10
|
-
|
|
11
|
-
The primary colour is your "brand" colour, and is used across all interactive elements such as buttons, links, inputs, etc. This colour can define the overall feel and can elicit emotion.
|
|
12
|
-
|
|
13
|
-
### Fill
|
|
14
|
-
|
|
15
|
-
colour.primary.fill #13213F
|
|
16
|
-
|
|
17
|
-
Used for primary buttons and the active state of form controls such as checkboxes and radio buttons. Also used for the border of tags when they have a custom button.
|
|
18
|
-
|
|
19
|
-
#### Allowed foregrounds
|
|
20
|
-
|
|
21
|
-
* colour.primary.onFill (#ECF2FF)
|
|
22
|
-
|
|
23
|
-
14.2 AAA
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
### On Fill
|
|
27
|
-
|
|
28
|
-
colour.primary.onFill #ECF2FF
|
|
29
|
-
|
|
30
|
-
Used as the foreground colour on primary buttons and active form controls.
|
|
31
|
-
|
|
32
|
-
#### Allowed foregrounds
|
|
33
|
-
|
|
34
|
-
* colour.primary.fill (#13213F)
|
|
35
|
-
|
|
36
|
-
14.2 AAA
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
### Fill Hover
|
|
40
|
-
|
|
41
|
-
colour.primary.fillHover #2B3752
|
|
42
|
-
|
|
43
|
-
Used for the hover state of primary buttons as well as hovering over active form controls.
|
|
44
|
-
|
|
45
|
-
#### Allowed foregrounds
|
|
46
|
-
|
|
47
|
-
* colour.primary.onFill (#ECF2FF)
|
|
48
|
-
|
|
49
|
-
10.6 AAA
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
### Surface
|
|
53
|
-
|
|
54
|
-
colour.primary.surface #D9E5FF
|
|
55
|
-
|
|
56
|
-
Used as the background colour for secondary buttons and the focused state of menu and tab items. Also used as the background colour of active buttons.
|
|
57
|
-
|
|
58
|
-
#### Allowed foregrounds
|
|
59
|
-
|
|
60
|
-
* colour.primary.text (#13213F)
|
|
61
|
-
|
|
62
|
-
12.6 AAA
|
|
63
|
-
|
|
64
|
-
* colour.neutral.80 (#393F46)
|
|
65
|
-
|
|
66
|
-
8.4 AAA
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
### Text
|
|
70
|
-
|
|
71
|
-
colour.primary.text #13213F
|
|
72
|
-
|
|
73
|
-
Used for text on primary buttons, active form controls and focused tab and menu items. Also used for the link text colour and tertiary buttons.
|
|
74
|
-
|
|
75
|
-
#### Allowed foregrounds
|
|
76
|
-
|
|
77
|
-
* colour.primary.surface (#D9E5FF)
|
|
78
|
-
|
|
79
|
-
12.6 AAA
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
### Surface Hover
|
|
83
|
-
|
|
84
|
-
colour.primary.surfaceHover #E1EAFF
|
|
85
|
-
|
|
86
|
-
Used for the hover state of secondary buttons, form controls and hovering over focused menu and tab items. Also used when hovering over table rows.
|
|
87
|
-
|
|
88
|
-
#### Allowed foregrounds
|
|
89
|
-
|
|
90
|
-
* colour.primary.text (#13213F)
|
|
91
|
-
|
|
92
|
-
13.2 AAA
|
|
93
|
-
|
|
94
|
-
* colour.neutral.80 (#393F46)
|
|
95
|
-
|
|
96
|
-
8.8 AAA
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
* * *
|
|
100
|
-
|
|
101
|
-
[](#neutral)Neutral
|
|
102
|
-
-------------------
|
|
103
|
-
|
|
104
|
-
Neutral colours apply to most backgrounds, text, and shapes in our experiences. They do not typically have a meaning associated with them, though they can imply things like disabled states. **Note:** There are some colour contrasts that are AA Large and are used for placeholders. If WCAG compliance is necessary for your application, please avoid using placeholders to meet this requirement.
|
|
105
|
-
|
|
106
|
-
### 10
|
|
107
|
-
|
|
108
|
-
colour.neutral.10 #FFF
|
|
109
|
-
|
|
110
|
-
Used as the default background colour for most components. For tooltips, it is used as the foreground colour for the tooltip content.
|
|
111
|
-
|
|
112
|
-
#### Allowed foregrounds
|
|
113
|
-
|
|
114
|
-
* colour.neutral.80 (#393F46)
|
|
115
|
-
|
|
116
|
-
10.6 AAA
|
|
117
|
-
|
|
118
|
-
* colour.neutral.70 (#6D7278)
|
|
119
|
-
|
|
120
|
-
4.9 AA
|
|
121
|
-
|
|
122
|
-
* colour.neutral.60 (#878B92)
|
|
123
|
-
|
|
124
|
-
3.4 AA Large
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
### 20
|
|
128
|
-
|
|
129
|
-
colour.neutral.20 #F9F9F9
|
|
130
|
-
|
|
131
|
-
Used as the alternating background colour for components such as tables. Used as the background colour behind panels and cards for highly interactive screens.
|
|
132
|
-
|
|
133
|
-
#### Allowed foregrounds
|
|
134
|
-
|
|
135
|
-
* colour.neutral.80 (#393F46)
|
|
136
|
-
|
|
137
|
-
10.1 AAA
|
|
138
|
-
|
|
139
|
-
* colour.neutral.70 (#6D7278)
|
|
140
|
-
|
|
141
|
-
4.6 AA
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
### 30
|
|
145
|
-
|
|
146
|
-
colour.neutral.30 #E4E5E7
|
|
147
|
-
|
|
148
|
-
Used as the border colour for dividers, and the default divider colour for components with in-built headers and footers such as cards.
|
|
149
|
-
|
|
150
|
-
### 40
|
|
151
|
-
|
|
152
|
-
colour.neutral.40 #D7D8DA
|
|
153
|
-
|
|
154
|
-
Used for borders in subtle interactive components, such as checkboxes and radios with hidden controls and the progress bar.
|
|
155
|
-
|
|
156
|
-
### 50
|
|
157
|
-
|
|
158
|
-
colour.neutral.50 #AFB2B6
|
|
159
|
-
|
|
160
|
-
Used as the background colour for interactive components such as the slider.
|
|
161
|
-
|
|
162
|
-
### 60
|
|
163
|
-
|
|
164
|
-
colour.neutral.60 #878B92
|
|
165
|
-
|
|
166
|
-
Used for placeholder text in form controls and disabled states.
|
|
167
|
-
|
|
168
|
-
#### Allowed foregrounds
|
|
169
|
-
|
|
170
|
-
* colour.neutral.10 (#FFF)
|
|
171
|
-
|
|
172
|
-
3.4 AA Large
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
### 70
|
|
176
|
-
|
|
177
|
-
colour.neutral.70 #6D7278
|
|
178
|
-
|
|
179
|
-
Used for muted text such as hints and descriptions to allow for content hierarchy.
|
|
180
|
-
|
|
181
|
-
#### Allowed foregrounds
|
|
182
|
-
|
|
183
|
-
* colour.neutral.10 (#FFF)
|
|
184
|
-
|
|
185
|
-
4.9 AA
|
|
186
|
-
|
|
187
|
-
* colour.neutral.20 (#F9F9F9)
|
|
188
|
-
|
|
189
|
-
4.6 AA
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
### 80
|
|
193
|
-
|
|
194
|
-
colour.neutral.80 #393F46
|
|
195
|
-
|
|
196
|
-
Used as the default text colour for most components. For tooltips, it is used as the background colour.
|
|
197
|
-
|
|
198
|
-
#### Allowed foregrounds
|
|
199
|
-
|
|
200
|
-
* colour.neutral.10 (#FFF)
|
|
201
|
-
|
|
202
|
-
10.6 AAA
|
|
203
|
-
|
|
204
|
-
* colour.neutral.20 (#F9F9F9)
|
|
205
|
-
|
|
206
|
-
10.1 AAA
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
* * *
|
|
210
|
-
|
|
211
|
-
[](#accent)Accent
|
|
212
|
-
-----------------
|
|
213
|
-
|
|
214
|
-
The accent colour is a colour used to emphasise key parts of the UI. These act as "secondary" or "supporting" colours to you primary colour.
|
|
215
|
-
|
|
216
|
-
### Brand
|
|
217
|
-
|
|
218
|
-
colour.accent.brand #FF99A8
|
|
219
|
-
|
|
220
|
-
The brand accent is useful for grabbing attention and to support your primary/brand colour. It should be used sparingly to draw attention to key elements.
|
|
221
|
-
|
|
222
|
-
* * *
|
|
223
|
-
|
|
224
|
-
[](#system-colours)System colours
|
|
225
|
-
---------------------------------
|
|
226
|
-
|
|
227
|
-
Along with primary colours, it is helpful to have a selection of system colours to use in components such as pills, alerts and labels. System colours emphasis different semantic states. They are used to provide visual feedback and/or warnings to users as they use your interface.
|
|
228
|
-
|
|
229
|
-
### [](#success-positive)Success (Positive)
|
|
230
|
-
|
|
231
|
-
Communicates that an action has been successful and inform a user that the action is a positive action.
|
|
232
|
-
|
|
233
|
-
### Fill
|
|
234
|
-
|
|
235
|
-
colour.system.success.fill #02794D
|
|
236
|
-
|
|
237
|
-
Used for the background colour of primary success buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts.
|
|
238
|
-
|
|
239
|
-
#### Allowed foregrounds
|
|
240
|
-
|
|
241
|
-
* colour.system.success.onFill (#EFFBF2)
|
|
242
|
-
|
|
243
|
-
5.1 AA
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
### On Fill
|
|
247
|
-
|
|
248
|
-
colour.system.success.onFill #EFFBF2
|
|
249
|
-
|
|
250
|
-
Used for the foreground colour of primary success buttons and badges.
|
|
251
|
-
|
|
252
|
-
#### Allowed foregrounds
|
|
253
|
-
|
|
254
|
-
* colour.system.success.fill (#02794D)
|
|
255
|
-
|
|
256
|
-
5.1 AA
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
### Fill Hover
|
|
260
|
-
|
|
261
|
-
colour.system.success.fillHover #01603D
|
|
262
|
-
|
|
263
|
-
Used for the hover state of primary success buttons.
|
|
264
|
-
|
|
265
|
-
#### Allowed foregrounds
|
|
266
|
-
|
|
267
|
-
* colour.system.success.onFill (#EFFBF2)
|
|
268
|
-
|
|
269
|
-
7.2 AAA
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
### Surface
|
|
273
|
-
|
|
274
|
-
colour.system.success.surface #E6F9EB
|
|
275
|
-
|
|
276
|
-
Used for the background colour of success alerts and toasts, and the background of secondary success buttons.
|
|
277
|
-
|
|
278
|
-
#### Allowed foregrounds
|
|
279
|
-
|
|
280
|
-
* colour.system.success.text (#015537)
|
|
281
|
-
|
|
282
|
-
8.1 AAA
|
|
283
|
-
|
|
284
|
-
* colour.neutral.80 (#393F46)
|
|
285
|
-
|
|
286
|
-
9.7 AAA
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
### Text
|
|
290
|
-
|
|
291
|
-
colour.system.success.text #015537
|
|
292
|
-
|
|
293
|
-
Used for the text colour of success alerts and toasts, and success tertiary buttons.
|
|
294
|
-
|
|
295
|
-
#### Allowed foregrounds
|
|
296
|
-
|
|
297
|
-
* colour.system.success.surface (#E6F9EB)
|
|
298
|
-
|
|
299
|
-
8.1 AAA
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
### Surface Hover
|
|
303
|
-
|
|
304
|
-
colour.system.success.surfaceHover #D5F6DE
|
|
305
|
-
|
|
306
|
-
Used for the hover state of secondary success buttons.
|
|
307
|
-
|
|
308
|
-
#### Allowed foregrounds
|
|
309
|
-
|
|
310
|
-
* colour.system.success.text (#015537)
|
|
311
|
-
|
|
312
|
-
7.7 AAA
|
|
313
|
-
|
|
314
|
-
* colour.neutral.80 (#393F46)
|
|
315
|
-
|
|
316
|
-
9.2 AAA
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
* * *
|
|
320
|
-
|
|
321
|
-
### [](#danger-negative)Danger (Negative)
|
|
322
|
-
|
|
323
|
-
Communicates something went wrong or prevents the user from moving forward with their task, as well as inform a potential action is destructive/negative.
|
|
324
|
-
|
|
325
|
-
### Fill
|
|
326
|
-
|
|
327
|
-
colour.system.danger.fill #C20A0A
|
|
328
|
-
|
|
329
|
-
Used for the background colour of primary danger buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts.
|
|
330
|
-
|
|
331
|
-
#### Allowed foregrounds
|
|
332
|
-
|
|
333
|
-
* colour.system.danger.onFill (#FFF6F5)
|
|
334
|
-
|
|
335
|
-
5.9 AA
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
### On Fill
|
|
339
|
-
|
|
340
|
-
colour.system.danger.onFill #FFF6F5
|
|
341
|
-
|
|
342
|
-
Used for the foreground colour of primary danger buttons and badges.
|
|
343
|
-
|
|
344
|
-
#### Allowed foregrounds
|
|
345
|
-
|
|
346
|
-
* colour.system.danger.fill (#C20A0A)
|
|
347
|
-
|
|
348
|
-
5.9 AA
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
### Fill Hover
|
|
352
|
-
|
|
353
|
-
colour.system.danger.fillHover #A50606
|
|
354
|
-
|
|
355
|
-
Used for the hover state of primary danger buttons.
|
|
356
|
-
|
|
357
|
-
#### Allowed foregrounds
|
|
358
|
-
|
|
359
|
-
* colour.system.danger.onFill (#FFF6F5)
|
|
360
|
-
|
|
361
|
-
7.5 AAA
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
### Surface
|
|
365
|
-
|
|
366
|
-
colour.system.danger.surface #FEE8E7
|
|
367
|
-
|
|
368
|
-
Used for the background colour of danger alerts and toasts, and the background of secondary danger buttons.
|
|
369
|
-
|
|
370
|
-
#### Allowed foregrounds
|
|
371
|
-
|
|
372
|
-
* colour.system.danger.text (#970202)
|
|
373
|
-
|
|
374
|
-
7.7 AAA
|
|
375
|
-
|
|
376
|
-
* colour.neutral.80 (#393F46)
|
|
377
|
-
|
|
378
|
-
9.1 AAA
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
### Text
|
|
382
|
-
|
|
383
|
-
colour.system.danger.text #970202
|
|
384
|
-
|
|
385
|
-
Used for the text colour of danger alerts and toasts, and danger tertiary buttons.
|
|
386
|
-
|
|
387
|
-
#### Allowed foregrounds
|
|
388
|
-
|
|
389
|
-
* colour.system.danger.surface (#FEE8E7)
|
|
390
|
-
|
|
391
|
-
7.7 AAA
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
### Surface Hover
|
|
395
|
-
|
|
396
|
-
colour.system.danger.surfaceHover #FEDEDC
|
|
397
|
-
|
|
398
|
-
Used for the hover state of secondary danger buttons.
|
|
399
|
-
|
|
400
|
-
#### Allowed foregrounds
|
|
401
|
-
|
|
402
|
-
* colour.system.danger.text (#970202)
|
|
403
|
-
|
|
404
|
-
7.2 AAA
|
|
405
|
-
|
|
406
|
-
* colour.neutral.80 (#393F46)
|
|
407
|
-
|
|
408
|
-
8.5 AAA
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
* * *
|
|
412
|
-
|
|
413
|
-
### [](#warning)Warning
|
|
414
|
-
|
|
415
|
-
Communicates attention required but does not prevent the user from moving forward with their task.
|
|
416
|
-
|
|
417
|
-
### Fill
|
|
418
|
-
|
|
419
|
-
colour.system.warning.fill #F6C84C
|
|
420
|
-
|
|
421
|
-
Used for the border of warning alerts and the background of warning badges.
|
|
422
|
-
|
|
423
|
-
#### Allowed foregrounds
|
|
424
|
-
|
|
425
|
-
* colour.system.warning.onFill (#1A1200)
|
|
426
|
-
|
|
427
|
-
11.8 AAA
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
### On Fill
|
|
431
|
-
|
|
432
|
-
colour.system.warning.onFill #1A1200
|
|
433
|
-
|
|
434
|
-
Used for the foreground colour of warning badges.
|
|
435
|
-
|
|
436
|
-
#### Allowed foregrounds
|
|
437
|
-
|
|
438
|
-
* colour.system.warning.fill (#F6C84C)
|
|
439
|
-
|
|
440
|
-
11.8 AAA
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
### Surface
|
|
444
|
-
|
|
445
|
-
colour.system.warning.surface #FEF4CD
|
|
446
|
-
|
|
447
|
-
Used for the background colour of warning alerts.
|
|
448
|
-
|
|
449
|
-
#### Allowed foregrounds
|
|
450
|
-
|
|
451
|
-
* colour.system.warning.text (#1A1200)
|
|
452
|
-
|
|
453
|
-
16.8 AAA
|
|
454
|
-
|
|
455
|
-
* colour.neutral.80 (#393F46)
|
|
456
|
-
|
|
457
|
-
9.6 AAA
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
### Text
|
|
461
|
-
|
|
462
|
-
colour.system.warning.text #1A1200
|
|
463
|
-
|
|
464
|
-
Used for the text colour of warning alerts.
|
|
465
|
-
|
|
466
|
-
#### Allowed foregrounds
|
|
467
|
-
|
|
468
|
-
* colour.system.warning.surface (#FEF4CD)
|
|
469
|
-
|
|
470
|
-
16.8 AAA
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
* * *
|
|
474
|
-
|
|
475
|
-
### [](#information)Information
|
|
476
|
-
|
|
477
|
-
Provides additional helpful context.
|
|
478
|
-
|
|
479
|
-
### Fill
|
|
480
|
-
|
|
481
|
-
colour.system.info.fill #004FBD
|
|
482
|
-
|
|
483
|
-
Used for the border of info alerts and toasts and the background of info badges.
|
|
484
|
-
|
|
485
|
-
#### Allowed foregrounds
|
|
486
|
-
|
|
487
|
-
* colour.system.info.onFill (#F5FAFF)
|
|
488
|
-
|
|
489
|
-
7.0 AAA
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
### On Fill
|
|
493
|
-
|
|
494
|
-
colour.system.info.onFill #F5FAFF
|
|
495
|
-
|
|
496
|
-
Used for the foreground colour of info badges.
|
|
497
|
-
|
|
498
|
-
#### Allowed foregrounds
|
|
499
|
-
|
|
500
|
-
* colour.system.info.fill (#004FBD)
|
|
501
|
-
|
|
502
|
-
7.0 AAA
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
### Surface
|
|
506
|
-
|
|
507
|
-
colour.system.info.surface #E5F3FF
|
|
508
|
-
|
|
509
|
-
Used for the background colour of info alerts and toasts.
|
|
510
|
-
|
|
511
|
-
#### Allowed foregrounds
|
|
512
|
-
|
|
513
|
-
* colour.system.info.text (#123987)
|
|
514
|
-
|
|
515
|
-
9.5 AAA
|
|
516
|
-
|
|
517
|
-
* colour.neutral.80 (#393F46)
|
|
518
|
-
|
|
519
|
-
9.4 AAA
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
### Text
|
|
523
|
-
|
|
524
|
-
colour.system.info.text #123987
|
|
525
|
-
|
|
526
|
-
Used for the text colour of info alerts and toasts.
|
|
527
|
-
|
|
528
|
-
#### Allowed foregrounds
|
|
529
|
-
|
|
530
|
-
* colour.system.info.surface (#E5F3FF)
|
|
531
|
-
|
|
532
|
-
9.5 AAA
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
* * *
|
|
536
|
-
|
|
537
|
-
### [](#backdrop)Backdrop
|
|
538
|
-
|
|
539
|
-
Used to cover the page in order to highlight a specific component, such as a modal.
|
|
540
|
-
|
|
541
|
-
### Fill
|
|
542
|
-
|
|
543
|
-
colour.system.backdrop.fill #393F46CC
|
|
544
|
-
|
|
545
|
-
Used for the background colour of the backdrop.
|
|
546
|
-
|
|
547
|
-
#### Allowed foregrounds
|
|
548
|
-
|
|
549
|
-
* colour.neutral.10 (#FFF)
|
|
550
|
-
|
|
551
|
-
10.6 AAA
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
On this page
|
|
555
|
-
|
|
556
|
-
* [Primary](#primary)
|
|
557
|
-
* [Neutral](#neutral)
|
|
558
|
-
* [Accent](#accent)
|
|
559
|
-
* [System colours](#system-colours)
|
|
560
|
-
* [Success (Positive)](#success-positive)
|
|
561
|
-
* [Danger (Negative)](#danger-negative)
|
|
562
|
-
* [Warning](#warning)
|
|
563
|
-
* [Information](#information)
|
|
564
|
-
* [Backdrop](#backdrop)
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
[](#elevation)Elevation
|
|
2
|
-
=======================
|
|
3
|
-
|
|
4
|
-
Elevation is a design concept that adds depth and hierarchy to user interfaces by using shadows and layers. It helps users understand the relationship between different elements on the page, guiding their attention and interaction.
|
|
5
|
-
|
|
6
|
-
Raised
|
|
7
|
-
------
|
|
8
|
-
|
|
9
|
-
Raised elevations sit slightly higher than default elevations. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
|
|
10
|
-
|
|
11
|
-
elevation.raised
|
|
12
|
-
|
|
13
|
-
Floating
|
|
14
|
-
--------
|
|
15
|
-
|
|
16
|
-
Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
|
|
17
|
-
|
|
18
|
-
elevation.floating
|
|
19
|
-
|
|
20
|
-
Overflow
|
|
21
|
-
--------
|
|
22
|
-
|
|
23
|
-
Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
|
|
24
|
-
|
|
25
|
-
elevation.overflow
|
|
26
|
-
|
|
27
|
-
Focus
|
|
28
|
-
-----
|
|
29
|
-
|
|
30
|
-
Focus is an outline indicating that an element is focused, usually via keyboard interaction. It is user when a user cannot interact with the page using a mouse/touch.
|
|
31
|
-
|
|
32
|
-
elevation.focus
|
|
33
|
-
|
|
34
|
-
Focus Compact
|
|
35
|
-
-------------
|
|
36
|
-
|
|
37
|
-
Focus compact is a variation of the focus elevation to indicate focus on elements that have restricted space making the default focus not aesthetically pleasing (for example, a search input in a dropdown like rich select). Avoid using where possible, as it makes the focus state less obvious.
|
|
38
|
-
|
|
39
|
-
elevation.focusCompact
|
|
40
|
-
|
|
41
|
-
Hide code
|
|
42
|
-
|
|
43
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
44
|
-
|
|
45
|
-
<I\>
|
|
46
|
-
<w
|
|
47
|
-
gutter\="md"
|
|
48
|
-
verticalAlign\="stretch"
|
|
49
|
-
\>
|
|
50
|
-
<n
|
|
51
|
-
span\={{
|
|
52
|
-
base: 6,
|
|
53
|
-
xl: 3
|
|
54
|
-
}}
|
|
55
|
-
\>
|
|
56
|
-
<I
|
|
57
|
-
layerStyle\="elevation.raised"
|
|
58
|
-
stretch
|
|
59
|
-
\>
|
|
60
|
-
<h2\>
|
|
61
|
-
Raised </h2\>
|
|
62
|
-
<p\>
|
|
63
|
-
Raised elevations sit slightly higher than default elevations. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis. </p\>
|
|
64
|
-
<p\>
|
|
65
|
-
<TokenTag\>
|
|
66
|
-
elevation.raised </TokenTag\>
|
|
67
|
-
</p\>
|
|
68
|
-
</I\>
|
|
69
|
-
</n\>
|
|
70
|
-
<n
|
|
71
|
-
span\={{
|
|
72
|
-
base: 6,
|
|
73
|
-
xl: 3
|
|
74
|
-
}}
|
|
75
|
-
\>
|
|
76
|
-
<I
|
|
77
|
-
layerStyle\="elevation.floating"
|
|
78
|
-
stretch
|
|
79
|
-
\>
|
|
80
|
-
<h2\>
|
|
81
|
-
Floating </h2\>
|
|
82
|
-
<p\>
|
|
83
|
-
Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. </p\>
|
|
84
|
-
<p\>
|
|
85
|
-
<TokenTag\>
|
|
86
|
-
elevation.floating </TokenTag\>
|
|
87
|
-
</p\>
|
|
88
|
-
</I\>
|
|
89
|
-
</n\>
|
|
90
|
-
<n
|
|
91
|
-
span\={{
|
|
92
|
-
base: 6,
|
|
93
|
-
xl: 3
|
|
94
|
-
}}
|
|
95
|
-
\>
|
|
96
|
-
<I
|
|
97
|
-
layerStyle\="elevation.overflow"
|
|
98
|
-
stretch
|
|
99
|
-
\>
|
|
100
|
-
<h2\>
|
|
101
|
-
Overflow </h2\>
|
|
102
|
-
<p\>
|
|
103
|
-
Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page. </p\>
|
|
104
|
-
<p\>
|
|
105
|
-
<TokenTag\>
|
|
106
|
-
elevation.overflow </TokenTag\>
|
|
107
|
-
</p\>
|
|
108
|
-
</I\>
|
|
109
|
-
</n\>
|
|
110
|
-
<n
|
|
111
|
-
span\={{
|
|
112
|
-
base: 6,
|
|
113
|
-
xl: 3
|
|
114
|
-
}}
|
|
115
|
-
\>
|
|
116
|
-
<I
|
|
117
|
-
layerStyle\="elevation.focus"
|
|
118
|
-
stretch
|
|
119
|
-
\>
|
|
120
|
-
<h2\>
|
|
121
|
-
Focus </h2\>
|
|
122
|
-
<p\>
|
|
123
|
-
Focus is an outline indicating that an element is focused, usually via keyboard interaction. It is user when a user cannot interact with the page using a mouse/touch. </p\>
|
|
124
|
-
<p\>
|
|
125
|
-
<TokenTag\>
|
|
126
|
-
elevation.focus </TokenTag\>
|
|
127
|
-
</p\>
|
|
128
|
-
</I\>
|
|
129
|
-
</n\>
|
|
130
|
-
<n
|
|
131
|
-
span\={{
|
|
132
|
-
base: 6,
|
|
133
|
-
xl: 3
|
|
134
|
-
}}
|
|
135
|
-
\>
|
|
136
|
-
<I
|
|
137
|
-
layerStyle\="elevation.focusCompact"
|
|
138
|
-
stretch
|
|
139
|
-
\>
|
|
140
|
-
<h2\>
|
|
141
|
-
Focus Compact </h2\>
|
|
142
|
-
<p\>
|
|
143
|
-
Focus compact is a variation of the focus elevation to indicate focus on elements that have restricted space making the default focus not aesthetically pleasing (for example, a search input in a dropdown like rich select). Avoid using where possible, as it makes the focus state less obvious. </p\>
|
|
144
|
-
<p\>
|
|
145
|
-
<TokenTag\>
|
|
146
|
-
elevation.focusCompact </TokenTag\>
|
|
147
|
-
</p\>
|
|
148
|
-
</I\>
|
|
149
|
-
</n\>
|
|
150
|
-
</w\>
|
|
151
|
-
</I\>
|
|
152
|
-
|
|
153
|
-
Copy
|
|
154
|
-
|
|
155
|
-
On this page
|