@czi-sds/mcp 0.5.2 → 0.5.4

package/data/zeroheight-exports/Text-Link.md

@@ -16,15 +16,31 @@ Click on each state below to enter inspect view and get details on its code attr
 | **bodyM** | **bodyS** | **bodyXs** | **bodyXxs** |
 | --------- | --------- | ---------- | ----------- |
 
+**Link**
+
 ---
 
-### Text Link Spacing
+**Link**
 
-These rules establish how much margin should exist between and around elements.
+---
+
+**Link**
+
+---
+
+**Link**
+
+---
 
+---
 
+### Text Link Spacing
 
+These rules establish how much margin should exist between and around elements.
 
+**Text Link spacing**
+
+---
 
 ## Code
 
@@ -41,8 +57,6 @@ These rules establish how much margin should exist between and around elements.
 
 Storybook
 
-
-
 ---
 
 Text Links are interactive elements that, when clicked, navigate the user away from the page they are currently viewing to another page or screen.
@@ -70,7 +84,17 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
+**Default Visual Example_Default**
+
+---
+
+**Default Visual Example_Hover**
 
+---
+
+**Default visual example_Pressed**
+
+---
 
 ### Dashed Text Link
 
@@ -81,6 +105,18 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
+**Dashed Visual Example_Default**
+
+---
+
+**Dashed Visual Example_Hover**
+
+---
+
+**Dashed Visual Example_Pressed**
+
+---
+
 ### Dashed Text Link Color Examples
 
 See below for visual examples of how the Dashed Text Link should be used in different colors depending on the color of the background it is placed upon.
@@ -88,6 +124,18 @@ See below for visual examples of how the Dashed Text Link should be used in diff
 | **Black Text** | **Gray500 Text** | **White Text** |
 | -------------- | ---------------- | -------------- |
 
+**Dashed Visual Example_Black Text**
+
+---
+
+**Dashed Visual Example_Gray500 text**
+
+---
+
+**Dashed Visual Example_White text**
+
+---
+
 ---
 
 ### Text Link Spacing
@@ -96,7 +144,9 @@ These rules establish how much margin should exist between and around elements.
 
 Note: Default Text Links fall in line with the rest of the text in the paragraph it is part of. Dashed Text Links are spaced lower than a default underline text-decoration.
 
+**Dashed Text Link spacing**
 
+---
 
 ## Code
 
@@ -140,7 +190,17 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
+**Default Visual Example_Default**
+
+---
+
+**Default Visual Example_Hover**
+
+---
 
+**Default visual example_Pressed**
+
+---
 
 ### Dashed Text Link
 
@@ -151,7 +211,17 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
+**Dashed Visual Example_Default**
 
+---
+
+**Dashed Visual Example_Hover**
+
+---
+
+**Dashed Visual Example_Pressed**
+
+---
 
 ### Dashed Text Link Color Examples
 
@@ -160,6 +230,18 @@ See below for visual examples of how the Dashed Text Link should be used in diff
 | **Black Text** | **Gray500 Text** | **White Text** |
 | -------------- | ---------------- | -------------- |
 
+**Dashed Visual Example_Black Text**
+
+---
+
+**Dashed Visual Example_Gray500 text**
+
+---
+
+**Dashed Visual Example_White text**
+
+---
+
 ---
 
 ### Text Link Spacing
@@ -168,6 +250,10 @@ These rules establish how much margin should exist between and around elements.
 
 Note: Default Text Links fall in line with the rest of the text in the paragraph it is part of. Dashed Text Links are spaced lower than a default underline text-decoration.
 
+**Dashed Text Link spacing**
+
+---
+
 ## Code
 
 ## Text Link Component
@@ -180,5 +266,3 @@ Note: Default Text Links fall in line with the rest of the text in the paragraph
 ### Link
 
 Storybook
-
-

package/data/zeroheight-exports/Theming.md

@@ -17,11 +17,27 @@ The color indexes used in SDS primitive color names (e.g., `gray100`, `gray200`,
 | Light Mode | Dark Mode |
 | :--------: | :-------: |
 
+**Color_Dark Mode_Color Indexes_gray100_Light**
+
+---
+
+**Color_Dark Mode_Color Indexes_gray100_Dark**
+
+---
+
 In most cases, each semantic variable will have the same primitive value mapped to it regardless of the mode of that primitive value. For example, the semantic variable `Base.text-primary` has `gray900` mapped to it; in Light Mode `gray900` = `#000000`(black), but in Dark Mode `gray900` = `#ffffff` (white). This means that in both modes primary text is highly visible against the background it is placed on top of, whether a light background in Light Mode or a dark background in Dark Mode.
 
 | Light Mode | Dark Mode |
 | :--------: | :-------: |
 
+**Color_Dark Mode_Color Indexes_text-primary_Light**
+
+---
+
+**Color_Dark Mode_Color Indexes_text-primary_Dark**
+
+---
+
 ### Differences in Light Mode vs Dark Mode
 
 The only instances where the primitive variables mapped to semantic variables differ between modes is `background-primary`, `surface`, and `fill-primary`. Where Light Mode uses `gray50` (white) for all of these, Dark Mode has to use two separate shades of dark gray to adhere to visual accessibility best practices.
@@ -31,6 +47,14 @@ In Dark Mode, `background-primary` is `gray75` (not quite pure black which has p
 | Light Mode | Dark Mode |
 | :--------: | :-------: |
 
+**Color_Dark Mode_Differences_Light**
+
+---
+
+**Color_Dark Mode_Differences_Dark**
+
+---
+
 ### Inverted Style
 
 There are a few components (Header Navigation, Footer Navigation, Tooltip, and Condensed Tooltip) that can be displayed with light or dark backgrounds regardless of which color mode the user's application is set to. Enable this using the prop `hasInvertedStyle` which by default is set to `false`. In Light Mode the component will have a light background and in Dark Mode the component will have a dark background. When set to `true`, the colors will be inverted and in Light Mode the component will have a dark background and in Dark Mode the component will have a light background.
@@ -40,6 +64,14 @@ See the individual component pages for more details and visual examples.
 | Default (Light Mode) | Inverted (Light Mode) |
 | :------------------: | :-------------------: |
 
+**Color_Inverted Style_Default**
+
+---
+
+**Color_Inverted Style_Inverted**
+
+---
+
 ## Code
 
 ## Dark Mode
@@ -145,15 +177,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Theming</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -293,15 +324,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Theming</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>