@xyd-js/atlas 0.1.0-xyd.16 → 0.1.0-xyd.18

package/src/components/ApiRef/ApiRefProperties/ApiRefProperties.styles.tsx

@@ -1,22 +1,18 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
 export const ApiRefPropertiesUlHost = css`
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
-    gap: 16px;
-
-    padding: 0;
-    margin: 0;
 
     list-style: none;
-
     border: none;
 `;
 
 export const ApiRefPropertiesLiHost = css`
     margin: 0;
-    padding: 0;
+    padding: 20px 0px;
+    border-bottom: 1px solid var(--dark32);
 
     &:first-child {
         padding-top: 0;
@@ -24,13 +20,20 @@ export const ApiRefPropertiesLiHost = css`
 
     &:last-child {
         padding-bottom: 0;
+        border-bottom: none;
     }
 `;
 
 export const ApiRefPropertiesDescriptionHost = css`
-    font-size: 14px;
-    line-height: 22px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
     color: var(--XydAtlas-Component-ApiRef-Properties__color-description);
+
+    p {
+        color: var(--XydAtlas-Component-ApiRef-Properties__color-description);
+    }
 `;
 
 export const ApiRefPropertiesDlHost = css`
@@ -41,7 +44,7 @@ export const ApiRefPropertiesDlHost = css`
     flex-wrap: wrap;
     gap: 10px;
 
-    margin: 8px 0;
+    margin: 4px 0;
 
     dd {
         margin-inline-start: 0px;
@@ -51,16 +54,18 @@ export const ApiRefPropertiesDlHost = css`
 export const ApiRefPropertiesPropNameCodeHost = css`
     display: inline-flex;
     padding: 4px 0;
-    font-weight: 600;
-    font-size: 13px;
+    font-weight: var(--xyd-font-weight-semibold);
     color: var(--XydAtlas-Component-ApiRef-Properties__color-propName);
+
+    &[data-parent-choice-type="true"] {
+        font-weight: var(--xyd-font-weight-normal);
+    }
 `;
 
 export const ApiRefPropertiesPropTypeCodeHost = css`
     display: inline-flex;
     padding: 4px 0;
     border-radius: 4px;
-    font-size: 10px;
     color: var(--XydAtlas-Component-ApiRef-Properties__color-propType);
 `;
 
@@ -119,10 +124,8 @@ export const ApiRefPropertiesPropToggleHost = css`
     cursor: pointer;
     color: inherit;
 
-    font-size: 13px;
-
     svg {
-        font-size: 13px;
+        font-size: var(--xyd-font-size-small);
     }
 
     &:hover {
@@ -142,4 +145,58 @@ export const ApiRefPropertiesPropToggleLink = css`
         transition: all ease-in .1s;
         color: var(--XydAtlas-Component-ApiRef-Properties__color--active);
     }
+`;
+
+export const globals = css`
+  :global() {
+    atlas-apiref-propmeta { // TODO: !!! BETTER API !!! - FOR CUSTOM COMPONENTS
+        font-size: var(--xyd-font-size-xsmall);
+        line-height: var(--xyd-line-height-xsmall);
+
+
+        code {
+            display: inline-flex;
+            padding: 4px 0;
+            border-radius: 4px;
+            color: var(--XydAtlas-Component-ApiRef-Properties__color-propType);
+        }
+        &[data-name="required"] {
+            code {
+                color: var(--xyd-text-color--error);
+            }
+        }
+
+        a {
+            color: var(--XydAtlas-Component-ApiRef-Properties__color--active);
+            text-decoration: underline;
+            
+            &:hover {
+                text-decoration: none;
+                color: var(--XydAtlas-Sys-Color-Primary--hover);
+            }
+        }
+    }
+  }
+`;
+
+export const ApiRefPropertiesMetaInfoHost = css`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    [part="examples"] {
+        display: inline;
+
+        span {
+            margin-right: 2px;
+        }
+    }
+
+    [part="examples-list"] {
+        display: inline;
+
+        xyd-badge {
+            margin-right: 2px;
+        }
+    }
 `;