@czi-sds/mcp 0.2.2 → 0.3.0

package/data/zeroheight-exports/Corners.md

@@ -0,0 +1,112 @@
+# Corners
+
+Corners (border radiuses) provide visual, and often functional, distinction and help differentiate between different types of similar elements.
+
+### Types of Corners
+
+| **Example** |   | **Corner Type** |   | **Usage** |
+| --- | --- | --- | --- | --- |
+|  |   | Large Corner |   | Rounded elements (for example: rounded Buttons and rounded Dropdown Inputs) |
+|  |   | Medium Corner |   | Standard, default radius for corners in UI elements ( for example: square Buttons, Dialogs, square Tags, etc.) |
+|  |   | Small Corner |   | Corners on elements that are smaller than 20px × 20px that need a square corner (for example: Checkboxes) |
+|  |   | No Set Corner |   | Corners for elements without any radius (for example: backgrounds on Menu Items and Table Cells) |
+
+### Corner Variables
+
+| **Visual** |   | **Figma Variable** |   | **CSS / SCSS Variables** |   | **Value** |
+| --- | --- | --- | --- | --- | --- | --- |
+|  |   | `cornerL` |   | `--sds-corner-l` `$sds-corner-l` |   | `border-radius: 20px;` |
+|  |   | `cornerM` |   | `--sds-corner-m` `$sds-corner-m` |   | `border-radius: 4px;` |
+|  |   | `cornerS` |   | `--sds-corner-s` `$sds-corner-s` |   | `border-radius: 2px;` |
+|  |   | `cornerNone` |   | `--sds-corner-none` `$sds-corner-none` |   | `border-radius: 0px;` |
+
+---
+
+Corners (border radiuses) provide visual, and often functional, distinction and help differentiate between different types of similar elements.
+
+### Types of Corners
+
+| **Example** |   | **Corner Type** |   | **Usage** |
+| --- | --- | --- | --- | --- |
+|  |   | Large Corner |   | Rounded elements (such as Tags) |
+|  |   | Medium Corner |   | UI elements with slightly rounded corners (such as Dropdown Menus) |
+|  |   | No Set Corner |   | Standard, default radius for corners in UI elements  (Square and Copy Buttons, Checkboxes, Dialogs, Tooltips, etc.) |
+
+### Corner Variables
+
+| **Visual** |   | **Variable** |   | **Value** |
+| --- | --- | --- | --- | --- |
+|  |   | `cornerL` |   | `border-radius: 20px;` |
+|  |   | `cornerM` |   | `border-radius: 4px;` |
+|  |   | `cornerNone` |   | `border-radius: 0px;` |
+
+### Examples
+
+| **Example** |   | **Corner Type** |   | **Usage** |
+| --- | --- | --- | --- | --- |
+|  |   | Large Corner |   | Rounded elements (Tags) |
+|  |   | Medium Corner |   | Elements with slightly rounded corners (Dropdown Menus) |
+|  |   | No Set Corner |   | Standard, default radius for corners in UI elements  (Square and Copy Buttons, Checkboxes, Dialogs, Tooltips, etc.) |
+
+---
+
+Corners (border radiuses) provide visual, and often functional, distinction and help differentiate between different types of similar elements.
+
+### Types of Corners
+
+| **Example** |   | **Corner Type** |   | **Usage** |
+| --- | --- | --- | --- | --- |
+|  |   | Large Corner |   | Rounded elements (buttons and inputs) |
+|  |   | Medium Corner |   | Standard, default radius for corners in UI elements (square buttons, form inputs, modals, tooltips, tags, etc.) |
+|  |   | Small Corner |   | Corners on elements that are smaller than 20px × 20px. |
+|  |   | No Set Corner |   | Corners on backgrounds for hovered dropdown menus and tables. |
+
+### Corner Variables
+
+| **Visual** |   | **Variable** |   | **Value** |
+| --- | --- | --- | --- | --- |
+|  |   | `cornerL` |   | `border-radius: 20px;` |
+|  |   | `cornerM` |   | `border-radius: 4px;` |
+|  |   | `cornerS` |   | `border-radius: 2px;` |
+|  |   | `cornerNone` |   | `border-radius: 0px;` |
+
+### Examples
+
+| **Example** |   | **Corner Type** |   | **Usage** |
+| --- | --- | --- | --- | --- |
+|  |   | Large Corner |   | Rounded elements (buttons and inputs) |
+|  |   | Medium Corner |   | Standard, default radius for corners in UI elements (square buttons, form inputs, modals, tooltips, tags, etc.) |
+|  |   | Small Corner |   | Corners on elements that are smaller than 20px × 20px. |
+|  |   | No Set Corner |   | Corners on backgrounds for hovered dropdown menus and tables. |
+
+---
+
+Corners (border radiuses) provide visual, and often functional, distinction and help differentiate between different types of similar elements.
+
+### Types of Corners
+
+| **Example** |   | **Corner Type** |   | **Usage** |
+| --- | --- | --- | --- | --- |
+|  |   | Large Corner |   | Rounded elements (buttons and inputs) |
+|  |   | Medium Corner |   | Standard, default radius for corners in UI elements (square buttons, form inputs, modals, tooltips, tags, etc.) |
+|  |   | Small Corner |   | Corners on elements that are smaller than 20px × 20px. |
+|  |   | No Set Corner |   | Corners on backgrounds for hovered dropdown menus and tables. |
+
+### Corner Variables
+
+| **Visual** |   | **Variable** |   | **Value** |
+| --- | --- | --- | --- | --- |
+|  |   | `cornerL` |   | `border-radius: 20px;` |
+|  |   | `cornerM` |   | `border-radius: 4px;` |
+|  |   | `cornerS` |   | `border-radius: 2px;` |
+|  |   | `cornerNone` |   | `border-radius: 0px;` |
+
+### Examples
+
+| **Example** |   | **Corner Type** |   | **Usage** |
+| --- | --- | --- | --- | --- |
+|  |   | Large Corner |   | Rounded elements (buttons and inputs) |
+|  |   | Medium Corner |   | Standard, default radius for corners in UI elements (square buttons, form inputs, modals, tooltips, tags, etc.) |
+|  |   | Small Corner |   | Corners on elements that are smaller than 20px × 20px. |
+|  |   | No Set Corner |   | Corners on backgrounds for hovered dropdown menus and tables. |
+

package/data/zeroheight-exports/Cover-page.md

@@ -0,0 +1,4 @@
+# Cover page
+
+The Science Design System supports the products and experiences that comprise CZI's suite of science applications. The system consists of design specs, components, resources, and working code, providing structure and guidance for anyone contributing to CZI's science products.
+