@czi-sds/mcp 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/data/component-props/Accordion.json +14 -15
  2. package/data/component-props/Alert.json +2 -44
  3. package/data/component-props/Autocomplete.json +14 -32
  4. package/data/component-props/Banner.json +11 -12
  5. package/data/component-props/Button.json +17 -82
  6. package/data/component-props/ButtonDropdown.json +26 -0
  7. package/data/component-props/ButtonIcon.json +4 -60
  8. package/data/component-props/ButtonToggle.json +2 -66
  9. package/data/component-props/Callout.json +11 -65
  10. package/data/component-props/CellBasic.json +28 -56
  11. package/data/component-props/CellComponent.json +4 -32
  12. package/data/component-props/CellHeader.json +13 -49
  13. package/data/component-props/ComplexFilter.json +24 -4
  14. package/data/component-props/ContentCard.json +66 -2
  15. package/data/component-props/Dialog.json +26 -0
  16. package/data/component-props/Dropdown.json +29 -67
  17. package/data/component-props/DropdownMenu.json +16 -56
  18. package/data/component-props/HeatmapChart.json +6 -87
  19. package/data/component-props/Icon.json +3 -8
  20. package/data/component-props/InputCheckbox.json +5 -53
  21. package/data/component-props/InputDropdown.json +11 -33
  22. package/data/component-props/InputRadio.json +5 -53
  23. package/data/component-props/InputSearch.json +6 -70
  24. package/data/component-props/InputSlider.json +21 -35
  25. package/data/component-props/InputText.json +7 -63
  26. package/data/component-props/InputToggle.json +5 -54
  27. package/data/component-props/Link.json +18 -0
  28. package/data/component-props/LoadingIndicator.json +1 -2
  29. package/data/component-props/MenuItem.json +11 -41
  30. package/data/component-props/MenuSelect.json +4 -67
  31. package/data/component-props/NavigationFooter.json +0 -8
  32. package/data/component-props/NavigationHeader.json +14 -65
  33. package/data/component-props/NavigationJumpTo.json +0 -40
  34. package/data/component-props/Notification.json +14 -58
  35. package/data/component-props/Pagination.json +8 -33
  36. package/data/component-props/Panel.json +4 -54
  37. package/data/component-props/SegmentedControl.json +0 -55
  38. package/data/component-props/TableRow.json +10 -38
  39. package/data/component-props/Tabs.json +18 -0
  40. package/data/component-props/Tag.json +10 -56
  41. package/data/component-props/TagFilter.json +0 -47
  42. package/data/component-props/Tooltip.json +12 -61
  43. package/data/component-props/TooltipCondensed.json +18 -0
  44. package/data/component-props/TooltipTable.json +0 -4
  45. package/data/resources/figma-rules.md +101 -0
  46. package/data/resources/sds-component-rules.md +189 -0
  47. package/data/resources/zeroheight-rules.md +180 -0
  48. package/data/zeroheight-cache.json +1 -1
  49. package/data/zeroheight-exports/Accordion.md +167 -125
  50. package/data/zeroheight-exports/Banner.md +71 -48
  51. package/data/zeroheight-exports/Borders.md +72 -73
  52. package/data/zeroheight-exports/Buttons.md +375 -330
  53. package/data/zeroheight-exports/Callout.md +138 -116
  54. package/data/zeroheight-exports/Colors.md +254 -255
  55. package/data/zeroheight-exports/Content-Card.md +36 -37
  56. package/data/zeroheight-exports/Contributing-to-SDS.md +34 -35
  57. package/data/zeroheight-exports/Control-Inputs.md +289 -234
  58. package/data/zeroheight-exports/Corners.md +63 -64
  59. package/data/zeroheight-exports/Cover-page.md +0 -1
  60. package/data/zeroheight-exports/Dialog.md +237 -179
  61. package/data/zeroheight-exports/Downloads.md +10 -11
  62. package/data/zeroheight-exports/Drop-Shadows.md +40 -41
  63. package/data/zeroheight-exports/Dropdown-Input.md +158 -127
  64. package/data/zeroheight-exports/Dropdown-Menu.md +814 -718
  65. package/data/zeroheight-exports/Element-Status-Tracker.md +191 -192
  66. package/data/zeroheight-exports/Field-Inputs.md +149 -130
  67. package/data/zeroheight-exports/Filters.md +114 -94
  68. package/data/zeroheight-exports/Getting-Started.md +112 -249
  69. package/data/zeroheight-exports/Hero.md +43 -37
  70. package/data/zeroheight-exports/Icons.md +205 -206
  71. package/data/zeroheight-exports/Intent.md +6 -7
  72. package/data/zeroheight-exports/Introduction-to-Bases.md +8 -9
  73. package/data/zeroheight-exports/Introduction-to-Cells.md +11 -12
  74. package/data/zeroheight-exports/Introduction-to-DNA.md +8 -9
  75. package/data/zeroheight-exports/Introduction-to-Genes.md +8 -9
  76. package/data/zeroheight-exports/Introduction.md +52 -53
  77. package/data/zeroheight-exports/Link.md +50 -37
  78. package/data/zeroheight-exports/Lists.md +78 -63
  79. package/data/zeroheight-exports/Loading-Indicator.md +7 -8
  80. package/data/zeroheight-exports/Navigation.md +163 -142
  81. package/data/zeroheight-exports/Notification.md +132 -102
  82. package/data/zeroheight-exports/Panel.md +231 -115
  83. package/data/zeroheight-exports/README.md +1 -1
  84. package/data/zeroheight-exports/Responsive-Design.md +35 -32
  85. package/data/zeroheight-exports/Search-Input.md +9 -10
  86. package/data/zeroheight-exports/Search.md +87 -104
  87. package/data/zeroheight-exports/Segmented-Control.md +68 -45
  88. package/data/zeroheight-exports/Spacing.md +210 -211
  89. package/data/zeroheight-exports/Table.md +414 -302
  90. package/data/zeroheight-exports/Tabs.md +126 -98
  91. package/data/zeroheight-exports/Tags.md +148 -118
  92. package/data/zeroheight-exports/Text-Link.md +32 -33
  93. package/data/zeroheight-exports/Theming.md +48 -29
  94. package/data/zeroheight-exports/Tooltips.md +253 -237
  95. package/data/zeroheight-exports/Typography.md +463 -464
  96. package/dist/stdio.js +136 -135
  97. package/package.json +3 -4
  98. package/data/component-props/Chip.json +0 -73
  99. package/data/component-props/List.json +0 -43
  100. package/data/component-props/Menu.json +0 -48
  101. package/data/component-props/Table.json +0 -26
  102. package/data/component-props-storybook/Accordion-storybook.json +0 -45
  103. package/data/component-props-storybook/Alert-storybook.json +0 -30
  104. package/data/component-props-storybook/Autocomplete-storybook.json +0 -67
  105. package/data/component-props-storybook/Banner-storybook.json +0 -78
  106. package/data/component-props-storybook/Button-storybook.json +0 -115
  107. package/data/component-props-storybook/ButtonDropdown-storybook.json +0 -73
  108. package/data/component-props-storybook/ButtonIcon-storybook.json +0 -60
  109. package/data/component-props-storybook/ButtonToggle-storybook.json +0 -68
  110. package/data/component-props-storybook/Callout-storybook.json +0 -90
  111. package/data/component-props-storybook/CellBasic-storybook.json +0 -138
  112. package/data/component-props-storybook/CellComponent-storybook.json +0 -48
  113. package/data/component-props-storybook/CellHeader-storybook.json +0 -71
  114. package/data/component-props-storybook/Chip-storybook.json +0 -26
  115. package/data/component-props-storybook/ComplexFilter-storybook.json +0 -60
  116. package/data/component-props-storybook/ContentCard-storybook.json +0 -175
  117. package/data/component-props-storybook/Dialog-storybook.json +0 -56
  118. package/data/component-props-storybook/Dropdown-storybook.json +0 -93
  119. package/data/component-props-storybook/DropdownMenu-storybook.json +0 -73
  120. package/data/component-props-storybook/HeatmapChart-storybook.json +0 -55
  121. package/data/component-props-storybook/Icon-storybook.json +0 -75
  122. package/data/component-props-storybook/InputCheckbox-storybook.json +0 -57
  123. package/data/component-props-storybook/InputDropdown-storybook.json +0 -80
  124. package/data/component-props-storybook/InputRadio-storybook.json +0 -56
  125. package/data/component-props-storybook/InputSearch-storybook.json +0 -55
  126. package/data/component-props-storybook/InputSlider-storybook.json +0 -55
  127. package/data/component-props-storybook/InputText-storybook.json +0 -59
  128. package/data/component-props-storybook/InputToggle-storybook.json +0 -42
  129. package/data/component-props-storybook/Link-storybook.json +0 -50
  130. package/data/component-props-storybook/List-storybook.json +0 -26
  131. package/data/component-props-storybook/LoadingIndicator-storybook.json +0 -34
  132. package/data/component-props-storybook/Menu-storybook.json +0 -26
  133. package/data/component-props-storybook/MenuItem-storybook.json +0 -74
  134. package/data/component-props-storybook/MenuSelect-storybook.json +0 -38
  135. package/data/component-props-storybook/NavigationFooter-storybook.json +0 -67
  136. package/data/component-props-storybook/NavigationHeader-storybook.json +0 -115
  137. package/data/component-props-storybook/NavigationJumpTo-storybook.json +0 -41
  138. package/data/component-props-storybook/Notification-storybook.json +0 -89
  139. package/data/component-props-storybook/Pagination-storybook.json +0 -50
  140. package/data/component-props-storybook/Panel-storybook.json +0 -52
  141. package/data/component-props-storybook/SegmentedControl-storybook.json +0 -30
  142. package/data/component-props-storybook/Table-storybook.json +0 -26
  143. package/data/component-props-storybook/TableHeader-storybook.json +0 -26
  144. package/data/component-props-storybook/TableRow-storybook.json +0 -62
  145. package/data/component-props-storybook/Tabs-storybook.json +0 -45
  146. package/data/component-props-storybook/Tag-storybook.json +0 -78
  147. package/data/component-props-storybook/TagFilter-storybook.json +0 -30
  148. package/data/component-props-storybook/Tooltip-storybook.json +0 -85
  149. package/data/component-props-storybook/TooltipCondensed-storybook.json +0 -38
  150. package/data/component-props-storybook/TooltipTable-storybook.json +0 -47
@@ -4,8 +4,8 @@ There are instances where users may want to download data that are uploaded to C
4
4
 
5
5
  ## Data Download Types
6
6
 
7
- | Many Science products help users manipulate, visualize, and interpret data they’ve uploaded. Sometimes users want to download data that have been uploaded in order to, for example, perform more complex analyses using the tools they know best. Three types of downloading data are common across our products: immediately downloading individual files, immediately downloading multiple files, and asynchronously downloading multiple files. | | **Jump to type:** Individual, Immediate Multiple, Immediate |
8
- | --- | --- | --- |
7
+ | Many Science products help users manipulate, visualize, and interpret data they’ve uploaded. Sometimes users want to download data that have been uploaded in order to, for example, perform more complex analyses using the tools they know best. Three types of downloading data are common across our products: immediately downloading individual files, immediately downloading multiple files, and asynchronously downloading multiple files. | | **Jump to type:** Individual, Immediate Multiple, Immediate |
8
+ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------- |
9
9
 
10
10
  ---
11
11
 
@@ -23,7 +23,7 @@ The example flow below shows the immediate download of an individual data file.
23
23
 
24
24
  If the files are small enough, users can download multiple files at once by selecting multiple files, then clicking a button to initiate the download. If the user can configure their download (e.g., file type), a dialog may appear. The download will begin within the user’s browser as soon as they confirm their selection.
25
25
 
26
- The example flow below shows the immediate download of multiple data files. Within CZ GEN EPI, this download type is used is used to download data or FASTA files for one or more samples.
26
+ The example flow below shows the immediate download of multiple data files. Within CZ GEN EPI, this download type is used is used to download data or FASTA files for one or more samples.
27
27
 
28
28
  ---
29
29
 
@@ -33,8 +33,8 @@ There are instances where users may want to download data that are uploaded to C
33
33
 
34
34
  ## Data Download Types
35
35
 
36
- | Many Science products help users manipulate, visualize, and interpret data they’ve uploaded. Sometimes users want to download data that have been uploaded in order to, for example, perform more complex analyses using the tools they know best. Three types of downloading data are common across our products: immediately downloading individual files, immediately downloading multiple files, and asynchronously downloading multiple files. | | **Jump to type:** Individual, Immediate Multiple, Immediate Multiple, Asynchronous |
37
- | --- | --- | --- |
36
+ | Many Science products help users manipulate, visualize, and interpret data they’ve uploaded. Sometimes users want to download data that have been uploaded in order to, for example, perform more complex analyses using the tools they know best. Three types of downloading data are common across our products: immediately downloading individual files, immediately downloading multiple files, and asynchronously downloading multiple files. | | **Jump to type:** Individual, Immediate Multiple, Immediate Multiple, Asynchronous |
37
+ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------- |
38
38
 
39
39
  ---
40
40
 
@@ -66,11 +66,11 @@ Once the user confirms their selection, the system will begin generating their d
66
66
 
67
67
  The example flow below shows the asynchronous download of multiple data files.
68
68
 
69
-  
69
+
70
70
 
71
71
  ---
72
72
 
73
-  
73
+
74
74
 
75
75
  ---
76
76
 
@@ -78,8 +78,8 @@ There are instances where users may want to download data that are uploaded to t
78
78
 
79
79
  ## Data Download Types
80
80
 
81
- | Many Science products help users manipulate, visualize, and interpret data they’ve uploaded. Sometimes users want to download data that have been uploaded in order to, for example, perform more complex analyses using the tools they know best. Three types of downloading data are common across our products: immediately downloading individual files, immediately downloading multiple files, and asynchronously downloading multiple files. | | **Jump to type:** Individual, Immediate Multiple, Immediate Multiple, Asynchronous |
82
- | --- | --- | --- |
81
+ | Many Science products help users manipulate, visualize, and interpret data they’ve uploaded. Sometimes users want to download data that have been uploaded in order to, for example, perform more complex analyses using the tools they know best. Three types of downloading data are common across our products: immediately downloading individual files, immediately downloading multiple files, and asynchronously downloading multiple files. | | **Jump to type:** Individual, Immediate Multiple, Immediate Multiple, Asynchronous |
82
+ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------- |
83
83
 
84
84
  ---
85
85
 
@@ -109,7 +109,7 @@ The example flow below uses CZ GE to show the immediate download of multiple dat
109
109
 
110
110
  ## Multiple Files, Asynchronous Download
111
111
 
112
- If the files are too large to download immediately, users can initiate an asynchronous download flow for multiple files. Users can select multiple files at once, then click a button to initiate the download. If the user can configure their download (e.g., file type), a dialog may appear.
112
+ If the files are too large to download immediately, users can initiate an asynchronous download flow for multiple files. Users can select multiple files at once, then click a button to initiate the download. If the user can configure their download (e.g., file type), a dialog may appear.
113
113
 
114
114
  Once the user confirms their selection, the system will begin generating their download in the background and show a confirmation message. Users can download the generated file once it’s completed from a dedicated Downloads page.
115
115
 
@@ -118,4 +118,3 @@ Once the user confirms their selection, the system will begin generating their d
118
118
  The example flow below uses CZ ID to show the asynchronous download of multiple data files.
119
119
 
120
120
  ---
121
-
@@ -4,19 +4,19 @@ Drop shadows provide depth to designs via elevation to help users distinguish be
4
4
 
5
5
  ### Types of Drop Shadows
6
6
 
7
- | **Visual** | | **Shadow Type** | | **Usage** |
8
- | --- | --- | --- | --- | --- |
9
- | | | Large Shadow | | Containers that layer on top of all other page content (bottom 
panels, side panels, modals, etc.) |
10
- | | | Medium Shadow | | Containers that are part of a page's content, but appear on user input, layering over primary content (dropdown menus, tooltips, etc.) |
11
- | | | Small Shadow | | Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms |
7
+ | **Visual** | | **Shadow Type** | | **Usage** |
8
+ | ---------- | --- | --------------- | --- | -------------------------------------------------------------------------------------------------------------------------------------- |
9
+ | | | Large Shadow | | Containers that layer on top of all other page content (bottom 
panels, side panels, modals, etc.) |
10
+ | | | Medium Shadow | | Containers that are part of a page's content, but appear on user input, layering over primary content (dropdown menus, tooltips, etc.) |
11
+ | | | Small Shadow | | Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms |
12
12
 
13
13
  ### Drop Shadow Variables
14
14
 
15
- | **Visual** | | **CSS / SCSS Variables** | | **Value** |
16
- | --- | --- | --- | --- | --- |
17
- | | | `--sds-drop-shadow-l` `$sds-drop-shadow-l` | | `box-shadow:` `0 2px 12px 0 rbga (0,0,0, 0.3);` |
18
- | | | `--sds-drop-shadow-m` `$sds-drop-shadow-m` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.15),` `0 2px 10px 0 rbga (0,0,0, 0.15);` |
19
- | | | `--sds-drop-shadow-s` `$sds-drop-shadow-s` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.25);` |
15
+ | **Visual** | | **CSS / SCSS Variables** | | **Value** |
16
+ | ---------- | --- | ------------------------------------------ | --- | ---------------------------------------------------------------------------------- |
17
+ | | | `--sds-drop-shadow-l` `$sds-drop-shadow-l` | | `box-shadow:` `0 2px 12px 0 rbga (0,0,0, 0.3);` |
18
+ | | | `--sds-drop-shadow-m` `$sds-drop-shadow-m` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.15),` `0 2px 10px 0 rbga (0,0,0, 0.15);` |
19
+ | | | `--sds-drop-shadow-s` `$sds-drop-shadow-s` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.25);` |
20
20
 
21
21
  ---
22
22
 
@@ -24,19 +24,19 @@ Drop shadows provide depth to designs via elevation to help users distinguish be
24
24
 
25
25
  ### Types of Drop Shadows
26
26
 
27
- | **Visual** | | **Shadow Type** | | **Usage** |
28
- | --- | --- | --- | --- | --- |
29
- | | | Large Shadow | | Containers that layer on top of all other page content (such as Dialogs) |
30
- | | | Medium Shadow | | Containers that are part of a page's content, but appear on user input, layering over primary content (such as Dropdown Menus and Tooltips) |
31
- | | | Small Shadow | | Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms |
27
+ | **Visual** | | **Shadow Type** | | **Usage** |
28
+ | ---------- | --- | --------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------- |
29
+ | | | Large Shadow | | Containers that layer on top of all other page content (such as Dialogs) |
30
+ | | | Medium Shadow | | Containers that are part of a page's content, but appear on user input, layering over primary content (such as Dropdown Menus and Tooltips) |
31
+ | | | Small Shadow | | Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms |
32
32
 
33
33
  ### Drop Shadow Variables
34
34
 
35
- | **Visual** | | **Variable** | | **Value** |
36
- | --- | --- | --- | --- | --- |
37
- | | | `shadowL` | | `box-shadow:` `0 2px 12px 0 rbga (0,0,0, 0.3);` |
38
- | | | `shadowM` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.15),` `0 2px 10px 0 rbga (0,0,0, 0.15);` |
39
- | | | `shadowS` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.25);` |
35
+ | **Visual** | | **Variable** | | **Value** |
36
+ | ---------- | --- | ------------ | --- | ---------------------------------------------------------------------------------- |
37
+ | | | `shadowL` | | `box-shadow:` `0 2px 12px 0 rbga (0,0,0, 0.3);` |
38
+ | | | `shadowM` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.15),` `0 2px 10px 0 rbga (0,0,0, 0.15);` |
39
+ | | | `shadowS` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.25);` |
40
40
 
41
41
  ---
42
42
 
@@ -44,19 +44,19 @@ Drop shadows provide depth to designs via elevation to help users distinguish be
44
44
 
45
45
  ### Types of Drop Shadows
46
46
 
47
- | **Visual** | | **Shadow Type** | | **Usage** |
48
- | --- | --- | --- | --- | --- |
49
- | | | Large Shadow | | Containers that layer on top of all other page content (bottom panels, side panels, modals, etc.) |
50
- | | | Medium Shadow | | Containers that are part of a page's content, but appear on user input, layering over primary content (dropdown menus, tooltips, etc.) |
51
- | | | Small Shadow | | Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms |
47
+ | **Visual** | | **Shadow Type** | | **Usage** |
48
+ | ---------- | --- | --------------- | --- | -------------------------------------------------------------------------------------------------------------------------------------- |
49
+ | | | Large Shadow | | Containers that layer on top of all other page content (bottom panels, side panels, modals, etc.) |
50
+ | | | Medium Shadow | | Containers that are part of a page's content, but appear on user input, layering over primary content (dropdown menus, tooltips, etc.) |
51
+ | | | Small Shadow | | Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms |
52
52
 
53
53
  ### Drop Shadow Variables
54
54
 
55
- | **Visual** | | **Variable** | | **Value** |
56
- | --- | --- | --- | --- | --- |
57
- | | | `shadowL` | | `box-shadow:` `0 2px 12px 0 rbga (0,0,0, 0.3);` |
58
- | | | `shadowM` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.15),` `0 2px 10px 0 rbga (0,0,0, 0.15);` |
59
- | | | `shadowS` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.25);` |
55
+ | **Visual** | | **Variable** | | **Value** |
56
+ | ---------- | --- | ------------ | --- | ---------------------------------------------------------------------------------- |
57
+ | | | `shadowL` | | `box-shadow:` `0 2px 12px 0 rbga (0,0,0, 0.3);` |
58
+ | | | `shadowM` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.15),` `0 2px 10px 0 rbga (0,0,0, 0.15);` |
59
+ | | | `shadowS` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.25);` |
60
60
 
61
61
  ---
62
62
 
@@ -64,17 +64,16 @@ Drop shadows provide depth to designs via elevation to help users distinguish be
64
64
 
65
65
  ### Types of Drop Shadows
66
66
 
67
- | **Visual** | | **Shadow Type** | | **Usage** |
68
- | --- | --- | --- | --- | --- |
69
- | | | Large Shadow | | Containers that layer on top of all other page content (bottom panels, side panels, modals, etc.) |
70
- | | | Medium Shadow | | Containers that are part of a page's content, but appear on user input, layering over primary content (dropdown menus, tooltips, etc.) |
71
- | | | Small Shadow | | Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms |
67
+ | **Visual** | | **Shadow Type** | | **Usage** |
68
+ | ---------- | --- | --------------- | --- | -------------------------------------------------------------------------------------------------------------------------------------- |
69
+ | | | Large Shadow | | Containers that layer on top of all other page content (bottom panels, side panels, modals, etc.) |
70
+ | | | Medium Shadow | | Containers that are part of a page's content, but appear on user input, layering over primary content (dropdown menus, tooltips, etc.) |
71
+ | | | Small Shadow | | Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms |
72
72
 
73
73
  ### Drop Shadow Variables
74
74
 
75
- | **Visual** | | **Variable** | | **Value** |
76
- | --- | --- | --- | --- | --- |
77
- | | | `shadowL` | | `box-shadow:` `0 2px 12px 0 rbga (0,0,0, 0.3);` |
78
- | | | `shadowM` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.15),` `0 2px 10px 0 rbga (0,0,0, 0.15);` |
79
- | | | `shadowS` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.25);` |
80
-
75
+ | **Visual** | | **Variable** | | **Value** |
76
+ | ---------- | --- | ------------ | --- | ---------------------------------------------------------------------------------- |
77
+ | | | `shadowL` | | `box-shadow:` `0 2px 12px 0 rbga (0,0,0, 0.3);` |
78
+ | | | `shadowM` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.15),` `0 2px 10px 0 rbga (0,0,0, 0.15);` |
79
+ | | | `shadowS` | | `box-shadow:` `0 2px 4px 0 rbga (0,0,0, 0.25);` |