@neo4j-ndl/base 1.4.1 → 1.5.0

package/lib/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 29 May 2023 14:39:58 GMT
+ * Generated on Mon, 05 Jun 2023 08:32:39 GMT
  */
 
 :root {
@@ -82,6 +82,7 @@
   --palette-dark-neutral-text-weak: 196, 200, 205 /* #C4C8CD */;
   --palette-dark-neutral-text-default: 245, 247, 250 /* #F5F7FA */;
   --palette-dark-neutral-text-inverse: 21, 30, 41 /* #151E29 */;
+  --palette-dark-neutral-icon: 196, 200, 205 /* #C4C8CD */;
   --palette-dark-neutral-bg-weak: 29, 38, 49; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
   --palette-dark-neutral-bg-default: 21, 30, 41 /* #151E29 */;
   --palette-dark-neutral-bg-strong: 45, 53, 63; /* This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2 */
@@ -128,6 +129,7 @@
   --palette-light-neutral-text-weak: 83, 91, 102 /* #535B66 */;
   --palette-light-neutral-text-default: 21, 30, 41 /* #151E29 */;
   --palette-light-neutral-text-inverse: 255, 255, 255 /* #FFFFFF */;
+  --palette-light-neutral-icon: 83, 91, 102 /* #535B66 */;
   --palette-light-neutral-bg-weak: 255, 255, 255 /* #FFFFFF */;
   --palette-light-neutral-bg-default: 245, 247, 250 /* #F5F7FA */;
   --palette-light-neutral-bg-strong: 230, 233, 238 /* #E6E9EE */;
@@ -206,4 +208,19 @@
   --space-11: 96px;
   --space-12: 128px;
   --space-13: 320px;
+  --z-index-0: 0;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
+  --z-index-60: 60;
+  --z-index-deep: -999999;
+  --z-index-auto: auto;
+  --z-index-alias-overlay: 10;
+  --z-index-alias-banner: 20;
+  --z-index-alias-popover: 30;
+  --z-index-alias-tooltip: 40;
+  --z-index-alias-blanket: 50;
+  --z-index-alias-modal: 60;
 }

package/lib/tokens/js/tokens-raw.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 29 May 2023 14:39:58 GMT
+ * Generated on Mon, 05 Jun 2023 08:32:39 GMT
  */
 
 module.exports = {
@@ -1574,6 +1574,29 @@ module.exports = {
             ]
           }
         },
+        "icon": {
+          "value": "#C4C8CD",
+          "description": "Used as a default neutral icon color",
+          "filePath": "src/tokens/darkPalette.json",
+          "isSource": true,
+          "original": {
+            "value": "{colors.neutral.50.value}",
+            "description": "Used as a default neutral icon color"
+          },
+          "name": "PaletteDarkNeutralIcon",
+          "attributes": {
+            "category": "palette",
+            "type": "dark",
+            "item": "neutral",
+            "subitem": "icon"
+          },
+          "path": [
+            "palette",
+            "dark",
+            "neutral",
+            "icon"
+          ]
+        },
         "bg": {
           "weak": {
             "value": "29, 38, 49",
@@ -2776,6 +2799,29 @@ module.exports = {
             ]
           }
         },
+        "icon": {
+          "value": "#535B66",
+          "description": "Used as a default neutral icon color",
+          "filePath": "src/tokens/lightPalette.json",
+          "isSource": true,
+          "original": {
+            "value": "{colors.neutral.80.value}",
+            "description": "Used as a default neutral icon color"
+          },
+          "name": "PaletteLightNeutralIcon",
+          "attributes": {
+            "category": "palette",
+            "type": "light",
+            "item": "neutral",
+            "subitem": "icon"
+          },
+          "path": [
+            "palette",
+            "light",
+            "neutral",
+            "icon"
+          ]
+        },
         "bg": {
           "weak": {
             "value": "#FFFFFF",
@@ -4542,5 +4588,292 @@ module.exports = {
         "13"
       ]
     }
+  },
+  "zIndex": {
+    "0": {
+      "value": "0",
+      "description": "Useful for creating a new stacking context.",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "0",
+        "description": "Useful for creating a new stacking context."
+      },
+      "name": "ZIndex0",
+      "attributes": {
+        "category": "zIndex",
+        "type": "0"
+      },
+      "path": [
+        "zIndex",
+        "0"
+      ]
+    },
+    "10": {
+      "value": "10",
+      "description": "Used for overlay elements, like button groups on canvas elements. Can be used with an alias token.",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "10",
+        "description": "Used for overlay elements, like button groups on canvas elements. Can be used with an alias token."
+      },
+      "name": "ZIndex10",
+      "attributes": {
+        "category": "zIndex",
+        "type": "10"
+      },
+      "path": [
+        "zIndex",
+        "10"
+      ]
+    },
+    "20": {
+      "value": "20",
+      "description": "Used for banners. Can be used with an alias token.",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "20",
+        "description": "Used for banners. Can be used with an alias token."
+      },
+      "name": "ZIndex20",
+      "attributes": {
+        "category": "zIndex",
+        "type": "20"
+      },
+      "path": [
+        "zIndex",
+        "20"
+      ]
+    },
+    "30": {
+      "value": "30",
+      "description": "Used for popover elements like Dropdown menu. Can be used with an alias token.",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "30",
+        "description": "Used for popover elements like Dropdown menu. Can be used with an alias token."
+      },
+      "name": "ZIndex30",
+      "attributes": {
+        "category": "zIndex",
+        "type": "30"
+      },
+      "path": [
+        "zIndex",
+        "30"
+      ]
+    },
+    "40": {
+      "value": "40",
+      "description": "Used in tooltip components, should be above everything as it will be probably visible on hover effects. There are exceptions for canvas tooltips (like in Bloom).  Can be used with an alias token.",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "40",
+        "description": "Used in tooltip components, should be above everything as it will be probably visible on hover effects. There are exceptions for canvas tooltips (like in Bloom).  Can be used with an alias token."
+      },
+      "name": "ZIndex40",
+      "attributes": {
+        "category": "zIndex",
+        "type": "40"
+      },
+      "path": [
+        "zIndex",
+        "40"
+      ]
+    },
+    "50": {
+      "value": "50",
+      "description": "Used as a blanket layer that covers the underlying UI. For example can be used to detect clicks and close the content on top of it.  Can be used with an alias token.",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "50",
+        "description": "Used as a blanket layer that covers the underlying UI. For example can be used to detect clicks and close the content on top of it.  Can be used with an alias token."
+      },
+      "name": "ZIndex50",
+      "attributes": {
+        "category": "zIndex",
+        "type": "50"
+      },
+      "path": [
+        "zIndex",
+        "50"
+      ]
+    },
+    "60": {
+      "value": "60",
+      "description": "Used for modals, always sitting on top of a blanket, can be a custom element or a Dialog.  Can be used with an alias token.",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "60",
+        "description": "Used for modals, always sitting on top of a blanket, can be a custom element or a Dialog.  Can be used with an alias token."
+      },
+      "name": "ZIndex60",
+      "attributes": {
+        "category": "zIndex",
+        "type": "60"
+      },
+      "path": [
+        "zIndex",
+        "60"
+      ]
+    },
+    "deep": {
+      "value": "-999999",
+      "description": "Deep z-index is used to stack something behind everything else.",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "-999999",
+        "description": "Deep z-index is used to stack something behind everything else."
+      },
+      "name": "ZIndexDeep",
+      "attributes": {
+        "category": "zIndex",
+        "type": "deep"
+      },
+      "path": [
+        "zIndex",
+        "deep"
+      ]
+    },
+    "auto": {
+      "value": "auto",
+      "filePath": "src/tokens/zIndex.json",
+      "isSource": true,
+      "original": {
+        "value": "auto"
+      },
+      "name": "ZIndexAuto",
+      "attributes": {
+        "category": "zIndex",
+        "type": "auto"
+      },
+      "path": [
+        "zIndex",
+        "auto"
+      ]
+    },
+    "alias": {
+      "overlay": {
+        "value": "10",
+        "filePath": "src/tokens/zIndex.json",
+        "isSource": true,
+        "original": {
+          "value": "{zIndex.10.value}"
+        },
+        "name": "ZIndexAliasOverlay",
+        "attributes": {
+          "category": "zIndex",
+          "type": "alias",
+          "item": "overlay"
+        },
+        "path": [
+          "zIndex",
+          "alias",
+          "overlay"
+        ]
+      },
+      "banner": {
+        "value": "20",
+        "filePath": "src/tokens/zIndex.json",
+        "isSource": true,
+        "original": {
+          "value": "{zIndex.20.value}"
+        },
+        "name": "ZIndexAliasBanner",
+        "attributes": {
+          "category": "zIndex",
+          "type": "alias",
+          "item": "banner"
+        },
+        "path": [
+          "zIndex",
+          "alias",
+          "banner"
+        ]
+      },
+      "popover": {
+        "value": "30",
+        "filePath": "src/tokens/zIndex.json",
+        "isSource": true,
+        "original": {
+          "value": "{zIndex.30.value}"
+        },
+        "name": "ZIndexAliasPopover",
+        "attributes": {
+          "category": "zIndex",
+          "type": "alias",
+          "item": "popover"
+        },
+        "path": [
+          "zIndex",
+          "alias",
+          "popover"
+        ]
+      },
+      "tooltip": {
+        "value": "40",
+        "filePath": "src/tokens/zIndex.json",
+        "isSource": true,
+        "original": {
+          "value": "{zIndex.40.value}"
+        },
+        "name": "ZIndexAliasTooltip",
+        "attributes": {
+          "category": "zIndex",
+          "type": "alias",
+          "item": "tooltip"
+        },
+        "path": [
+          "zIndex",
+          "alias",
+          "tooltip"
+        ]
+      },
+      "blanket": {
+        "value": "50",
+        "filePath": "src/tokens/zIndex.json",
+        "isSource": true,
+        "original": {
+          "value": "{zIndex.50.value}"
+        },
+        "name": "ZIndexAliasBlanket",
+        "attributes": {
+          "category": "zIndex",
+          "type": "alias",
+          "item": "blanket"
+        },
+        "path": [
+          "zIndex",
+          "alias",
+          "blanket"
+        ]
+      },
+      "modal": {
+        "value": "60",
+        "filePath": "src/tokens/zIndex.json",
+        "isSource": true,
+        "original": {
+          "value": "{zIndex.60.value}"
+        },
+        "name": "ZIndexAliasModal",
+        "attributes": {
+          "category": "zIndex",
+          "type": "alias",
+          "item": "modal"
+        },
+        "path": [
+          "zIndex",
+          "alias",
+          "modal"
+        ]
+      }
+    }
   }
 };

package/lib/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Mon, 29 May 2023 14:39:58 GMT
+* Generated on Mon, 05 Jun 2023 08:32:39 GMT
 */
 
 export const tokens = {
@@ -117,6 +117,7 @@ export const tokens = {
           "default": "#F5F7FA",
           "inverse": "#151E29"
         },
+        "icon": "#C4C8CD",
         "bg": {
           "weak": "29, 38, 49",
           "default": "#151E29",
@@ -205,6 +206,7 @@ export const tokens = {
           "default": "#151E29",
           "inverse": "#FFFFFF"
         },
+        "icon": "#535B66",
         "bg": {
           "weak": "#FFFFFF",
           "default": "#F5F7FA",
@@ -331,5 +333,24 @@ export const tokens = {
     "11": "96px",
     "12": "128px",
     "13": "320px"
+  },
+  "zIndex": {
+    "0": "0",
+    "10": "10",
+    "20": "20",
+    "30": "30",
+    "40": "40",
+    "50": "50",
+    "60": "60",
+    "deep": "-999999",
+    "auto": "auto",
+    "alias": {
+      "overlay": "10",
+      "banner": "20",
+      "popover": "30",
+      "tooltip": "40",
+      "blanket": "50",
+      "modal": "60"
+    }
   }
 }

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 29 May 2023 14:39:58 GMT
+// Generated on Mon, 05 Jun 2023 08:32:39 GMT
 
 $transitions-values-properties-default: all;
 $transitions-values-duration-default: 100ms;
@@ -80,6 +80,7 @@ $palette-dark-neutral-text-weaker: #B2B7BD;
 $palette-dark-neutral-text-weak: #C4C8CD;
 $palette-dark-neutral-text-default: #F5F7FA;
 $palette-dark-neutral-text-inverse: #151E29;
+$palette-dark-neutral-icon: #C4C8CD;
 $palette-dark-neutral-bg-weak: 29, 38, 49; // This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2
 $palette-dark-neutral-bg-default: #151E29;
 $palette-dark-neutral-bg-strong: 45, 53, 63; // This is a beta version of the dark palette design tokens. Will be officially supported in Needle v2
@@ -126,6 +127,7 @@ $palette-light-neutral-text-weaker: #717780;
 $palette-light-neutral-text-weak: #535B66;
 $palette-light-neutral-text-default: #151E29;
 $palette-light-neutral-text-inverse: #FFFFFF;
+$palette-light-neutral-icon: #535B66;
 $palette-light-neutral-bg-weak: #FFFFFF;
 $palette-light-neutral-bg-default: #F5F7FA;
 $palette-light-neutral-bg-strong: #E6E9EE;
@@ -204,3 +206,18 @@ $space-10: 64px;
 $space-11: 96px;
 $space-12: 128px;
 $space-13: 320px;
+$z-index-0: 0;
+$z-index-10: 10;
+$z-index-20: 20;
+$z-index-30: 30;
+$z-index-40: 40;
+$z-index-50: 50;
+$z-index-60: 60;
+$z-index-deep: -999999;
+$z-index-auto: auto;
+$z-index-alias-overlay: 10;
+$z-index-alias-banner: 20;
+$z-index-alias-popover: 30;
+$z-index-alias-tooltip: 40;
+$z-index-alias-blanket: 50;
+$z-index-alias-modal: 60;

package/lib/types/tokens/js/storybook-design-token.d.ts

@@ -1,6 +1,6 @@
 /**
 * Do not edit directly
-* Generated on Mon, 29 May 2023 14:39:58 GMT
+* Generated on Mon, 05 Jun 2023 08:32:39 GMT
 */
 export const tokens: {
     transitions: {
@@ -49,4 +49,13 @@ export const tokens: {
         path: string[];
         value: string;
     }[];
+    zIndex: ({
+        path: string[];
+        value: string;
+        description: string;
+    } | {
+        path: string[];
+        value: string;
+        description?: undefined;
+    })[];
 };

package/lib/types/tokens/js/tokens-esm.d.ts

@@ -114,6 +114,7 @@ export namespace tokens {
                     export { _default_1 as default };
                     export const inverse: string;
                 }
+                const icon: string;
                 namespace bg {
                     const weak_1: string;
                     export { weak_1 as weak };
@@ -135,7 +136,8 @@ export namespace tokens {
             export namespace primary_1 {
                 const text_1: string;
                 export { text_1 as text };
-                export const icon: string;
+                const icon_1: string;
+                export { icon_1 as icon };
                 export namespace bg_1 {
                     const strong_2: string;
                     export { strong_2 as strong };
@@ -170,8 +172,8 @@ export namespace tokens {
             export namespace danger_1 {
                 const text_2: string;
                 export { text_2 as text };
-                const icon_1: string;
-                export { icon_1 as icon };
+                const icon_2: string;
+                export { icon_2 as icon };
                 export namespace bg_2 {
                     const strong_6: string;
                     export { strong_6 as strong };
@@ -205,8 +207,8 @@ export namespace tokens {
             export namespace warning_1 {
                 const text_3: string;
                 export { text_3 as text };
-                const icon_2: string;
-                export { icon_2 as icon };
+                const icon_3: string;
+                export { icon_3 as icon };
                 export namespace bg_3 {
                     const strong_10: string;
                     export { strong_10 as strong };
@@ -226,8 +228,8 @@ export namespace tokens {
             export namespace success_1 {
                 const text_4: string;
                 export { text_4 as text };
-                const icon_3: string;
-                export { icon_3 as icon };
+                const icon_4: string;
+                export { icon_4 as icon };
                 export namespace bg_4 {
                     const strong_12: string;
                     export { strong_12 as strong };
@@ -260,6 +262,8 @@ export namespace tokens {
                     export { inverse_1 as inverse };
                 }
                 export { text_5 as text };
+                const icon_5: string;
+                export { icon_5 as icon };
                 export namespace bg_5 {
                     const weak_16: string;
                     export { weak_16 as weak };
@@ -287,8 +291,8 @@ export namespace tokens {
             export namespace primary_2 {
                 const text_6: string;
                 export { text_6 as text };
-                const icon_4: string;
-                export { icon_4 as icon };
+                const icon_6: string;
+                export { icon_6 as icon };
                 export namespace bg_6 {
                     const strong_16: string;
                     export { strong_16 as strong };
@@ -324,8 +328,8 @@ export namespace tokens {
             export namespace danger_2 {
                 const text_7: string;
                 export { text_7 as text };
-                const icon_5: string;
-                export { icon_5 as icon };
+                const icon_7: string;
+                export { icon_7 as icon };
                 export namespace bg_7 {
                     const strong_20: string;
                     export { strong_20 as strong };
@@ -359,8 +363,8 @@ export namespace tokens {
             export namespace warning_2 {
                 const text_8: string;
                 export { text_8 as text };
-                const icon_6: string;
-                export { icon_6 as icon };
+                const icon_8: string;
+                export { icon_8 as icon };
                 export namespace bg_8 {
                     const strong_24: string;
                     export { strong_24 as strong };
@@ -380,8 +384,8 @@ export namespace tokens {
             export namespace success_2 {
                 const text_9: string;
                 export { text_9 as text };
-                const icon_7: string;
-                export { icon_7 as icon };
+                const icon_9: string;
+                export { icon_9 as icon };
                 export namespace bg_9 {
                     const strong_26: string;
                     export { strong_26 as strong };
@@ -448,4 +452,23 @@ export namespace tokens {
         "12": string;
         "13": string;
     };
+    const zIndex: {
+        "0": string;
+        "10": string;
+        "20": string;
+        "30": string;
+        "40": string;
+        "50": string;
+        "60": string;
+        deep: string;
+        auto: string;
+        alias: {
+            overlay: string;
+            banner: string;
+            popover: string;
+            tooltip: string;
+            blanket: string;
+            modal: string;
+        };
+    };
 }