@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.
Files changed (108) hide show
  1. package/dist/searchHandlers.test.js +8 -2
  2. package/dist/toolHandler.test.js +9 -9
  3. package/dist/utils.test.js +6 -2
  4. package/package.json +32 -30
  5. package/generated/docs/components-alert-docs.md +0 -702
  6. package/generated/docs/components-autocomplete-docs.md +0 -1433
  7. package/generated/docs/components-autocomplete-recipes-docs.md +0 -104
  8. package/generated/docs/components-badge-docs.md +0 -531
  9. package/generated/docs/components-button-docs.md +0 -1442
  10. package/generated/docs/components-buttongroup-docs.md +0 -748
  11. package/generated/docs/components-card-docs.md +0 -944
  12. package/generated/docs/components-checkbox-docs.md +0 -694
  13. package/generated/docs/components-checkboxgroup-docs.md +0 -1087
  14. package/generated/docs/components-checkboxgroup-recipes-docs.md +0 -119
  15. package/generated/docs/components-col-docs.md +0 -881
  16. package/generated/docs/components-container-docs.md +0 -123
  17. package/generated/docs/components-divider-docs.md +0 -576
  18. package/generated/docs/components-expander-docs.md +0 -594
  19. package/generated/docs/components-field-docs.md +0 -2007
  20. package/generated/docs/components-filter-docs.md +0 -1322
  21. package/generated/docs/components-hide-docs.md +0 -702
  22. package/generated/docs/components-icon-docs.md +0 -816
  23. package/generated/docs/components-image-docs.md +0 -493
  24. package/generated/docs/components-inline-docs.md +0 -2003
  25. package/generated/docs/components-input-docs.md +0 -867
  26. package/generated/docs/components-input-recipes-docs.md +0 -140
  27. package/generated/docs/components-inputcurrency-docs.md +0 -689
  28. package/generated/docs/components-inputcurrency-recipes-docs.md +0 -115
  29. package/generated/docs/components-introduction-docs.md +0 -450
  30. package/generated/docs/components-label-docs.md +0 -562
  31. package/generated/docs/components-link-docs.md +0 -586
  32. package/generated/docs/components-menu-docs.md +0 -1146
  33. package/generated/docs/components-menu-menuitem-docs.md +0 -739
  34. package/generated/docs/components-modal-docs.md +0 -1346
  35. package/generated/docs/components-panel-docs.md +0 -600
  36. package/generated/docs/components-placeholder-docs.md +0 -446
  37. package/generated/docs/components-popover-docs.md +0 -1529
  38. package/generated/docs/components-popover-recipes-docs.md +0 -211
  39. package/generated/docs/components-progress-docs.md +0 -568
  40. package/generated/docs/components-provider-docs.md +0 -160
  41. package/generated/docs/components-radio-docs.md +0 -563
  42. package/generated/docs/components-radiogroup-docs.md +0 -1153
  43. package/generated/docs/components-readonly-docs.md +0 -535
  44. package/generated/docs/components-richselect-docs.md +0 -5836
  45. package/generated/docs/components-row-docs.md +0 -2354
  46. package/generated/docs/components-select-docs.md +0 -940
  47. package/generated/docs/components-skeleton-docs.md +0 -597
  48. package/generated/docs/components-skeleton-recipes-docs.md +0 -76
  49. package/generated/docs/components-skiplink-docs.md +0 -587
  50. package/generated/docs/components-slideout-docs.md +0 -1036
  51. package/generated/docs/components-slider-docs.md +0 -828
  52. package/generated/docs/components-spinner-docs.md +0 -450
  53. package/generated/docs/components-stack-docs.md +0 -923
  54. package/generated/docs/components-table-ag-grid-docs.md +0 -1444
  55. package/generated/docs/components-table-docs.md +0 -2327
  56. package/generated/docs/components-tabset-docs.md +0 -768
  57. package/generated/docs/components-tabset-tab-docs.md +0 -550
  58. package/generated/docs/components-tag-docs.md +0 -548
  59. package/generated/docs/components-text-docs.md +0 -585
  60. package/generated/docs/components-toaster-docs.md +0 -755
  61. package/generated/docs/components-toggle-docs.md +0 -614
  62. package/generated/docs/components-tooltip-docs.md +0 -747
  63. package/generated/docs/components-validationmessage-docs.md +0 -1161
  64. package/generated/docs/contact-us-docs.md +0 -27
  65. package/generated/docs/extensions-editor-docs.md +0 -1181
  66. package/generated/docs/extensions-editor-recipes-docs.md +0 -89
  67. package/generated/docs/foundations-accessibility-docs.md +0 -40
  68. package/generated/docs/foundations-consistency-docs.md +0 -52
  69. package/generated/docs/foundations-content-docs.md +0 -23
  70. package/generated/docs/foundations-grid-docs.md +0 -74
  71. package/generated/docs/foundations-introduction-docs.md +0 -19
  72. package/generated/docs/foundations-principles-docs.md +0 -70
  73. package/generated/docs/foundations-responsive-breakpoints-docs.md +0 -193
  74. package/generated/docs/foundations-tokens-colour-docs.md +0 -564
  75. package/generated/docs/foundations-tokens-elevation-docs.md +0 -155
  76. package/generated/docs/foundations-tokens-introduction-docs.md +0 -190
  77. package/generated/docs/foundations-tokens-radius-docs.md +0 -71
  78. package/generated/docs/foundations-tokens-spacing-docs.md +0 -89
  79. package/generated/docs/foundations-tokens-typography-docs.md +0 -322
  80. package/generated/docs/foundations-user-experience-docs.md +0 -63
  81. package/generated/docs/foundations-visual-design-docs.md +0 -46
  82. package/generated/docs/foundations-z-index-stacking-docs.md +0 -31
  83. package/generated/docs/frequently-asked-questions-docs.md +0 -53
  84. package/generated/docs/get-started-develop-docs.md +0 -209
  85. package/generated/docs/get-started-using-storybook-docs.md +0 -68
  86. package/generated/docs/guidelines.md +0 -2054
  87. package/generated/docs/introduction-docs.md +0 -87
  88. package/generated/docs/news-version-6-docs.md +0 -93
  89. package/generated/docs/patterns-form-docs.md +0 -3902
  90. package/generated/docs/patterns-form-recipes-docs.md +0 -1370
  91. package/generated/docs/patterns-introduction-docs.md +0 -24
  92. package/generated/docs/patterns-loading-docs.md +0 -4043
  93. package/generated/docs/resources-code-katas-docs.md +0 -29
  94. package/generated/docs/resources-introduction-docs.md +0 -38
  95. package/generated/docs/resources-mcp-server-docs.md +0 -27
  96. package/generated/docs/resources-migration-guides-from-v4-to-v5-docs.md +0 -437
  97. package/generated/docs/styling-props-colour-docs.md +0 -172
  98. package/generated/docs/styling-props-elevation-docs.md +0 -88
  99. package/generated/docs/styling-props-radius-docs.md +0 -86
  100. package/generated/docs/styling-props-reference-docs.md +0 -160
  101. package/generated/docs/styling-props-screen-readers-docs.md +0 -71
  102. package/generated/docs/styling-props-sizing-docs.md +0 -627
  103. package/generated/docs/styling-props-spacing-docs.md +0 -2282
  104. package/generated/docs/styling-props-typography-docs.md +0 -121
  105. package/generated/docs/themes-available-themes-docs.md +0 -66
  106. package/generated/docs/themes-introduction-docs.md +0 -121
  107. package/generated/docs/versions-docs.md +0 -17
  108. /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