@neo4j-ndl/base 1.0.1 → 1.0.3

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 14:32:24 GMT
+ * Generated on Wed, 29 Mar 2023 13:16:36 GMT
  */
 
 module.exports = {
@@ -114,10 +114,12 @@ module.exports = {
   "borderRadius": {
     "none": {
       "value": "0px",
+      "description": "Avoid since we want to usually have a slightly rounded layout style",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "0px"
+        "value": "0px",
+        "description": "Avoid since we want to usually have a slightly rounded layout style"
       },
       "name": "BorderRadiusNone",
       "attributes": {
@@ -131,10 +133,12 @@ module.exports = {
     },
     "sm": {
       "value": "4px",
+      "description": "Most common radius. Used in most smaller components such as buttons, checkboxes, text fields, radio buttons, tags and tooltips",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "4px"
+        "value": "4px",
+        "description": "Most common radius. Used in most smaller components such as buttons, checkboxes, text fields, radio buttons, tags and tooltips"
       },
       "name": "BorderRadiusSm",
       "attributes": {
@@ -148,10 +152,12 @@ module.exports = {
     },
     "md": {
       "value": "6px",
+      "description": "Do not use",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "6px"
+        "value": "6px",
+        "description": "Do not use"
       },
       "name": "BorderRadiusMd",
       "attributes": {
@@ -165,10 +171,12 @@ module.exports = {
     },
     "lg": {
       "value": "8px",
+      "description": "Used for slightly larger components such as context menu and view selector",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "8px"
+        "value": "8px",
+        "description": "Used for slightly larger components such as context menu and view selector"
       },
       "name": "BorderRadiusLg",
       "attributes": {
@@ -182,10 +190,12 @@ module.exports = {
     },
     "xl": {
       "value": "10px",
+      "description": "Do not use",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "10px"
+        "value": "10px",
+        "description": "Do not use"
       },
       "name": "BorderRadiusXl",
       "attributes": {
@@ -199,10 +209,12 @@ module.exports = {
     },
     "1xl": {
       "value": "12px",
+      "description": "Do not use",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "12px"
+        "value": "12px",
+        "description": "Do not use"
       },
       "name": "BorderRadius1xl",
       "attributes": {
@@ -216,10 +228,12 @@ module.exports = {
     },
     "2xl": {
       "value": "14px",
+      "description": "Do not use",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "14px"
+        "value": "14px",
+        "description": "Do not use"
       },
       "name": "BorderRadius2xl",
       "attributes": {
@@ -233,10 +247,12 @@ module.exports = {
     },
     "3xl": {
       "value": "16px",
+      "description": "Used for larger components such as cards, widgets and dialogs",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "16px"
+        "value": "16px",
+        "description": "Used for larger components such as cards, widgets and dialogs"
       },
       "name": "BorderRadius3xl",
       "attributes": {
@@ -250,10 +266,12 @@ module.exports = {
     },
     "4xl": {
       "value": "18px",
+      "description": "Do not use",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "18px"
+        "value": "18px",
+        "description": "Do not use"
       },
       "name": "BorderRadius4xl",
       "attributes": {
@@ -267,10 +285,12 @@ module.exports = {
     },
     "5xl": {
       "value": "20px",
+      "description": "Do not use",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "20px"
+        "value": "20px",
+        "description": "Do not use"
       },
       "name": "BorderRadius5xl",
       "attributes": {
@@ -284,10 +304,12 @@ module.exports = {
     },
     "full": {
       "value": "9999px",
+      "description": "Fully rounded. Use this with caution since Neo4j does not have an overall rounded style. Rounded is used mainly for labels but also in commonly round components such as progress bar, switch and wizard steps",
       "filePath": "src/tokens/borderRadius.json",
       "isSource": true,
       "original": {
-        "value": "9999px"
+        "value": "9999px",
+        "description": "Fully rounded. Use this with caution since Neo4j does not have an overall rounded style. Rounded is used mainly for labels but also in commonly round components such as progress bar, switch and wizard steps"
       },
       "name": "BorderRadiusFull",
       "attributes": {
@@ -304,11 +326,13 @@ module.exports = {
     "xs": {
       "comment": "Extra small screen / phone, only one not included with Tailwind CSS",
       "value": "450px",
+      "description": "Smallest breakpoint, mainly for mobile and also the smallest browser width that is supported",
       "filePath": "src/tokens/breakpoints.json",
       "isSource": true,
       "original": {
         "comment": "Extra small screen / phone, only one not included with Tailwind CSS",
-        "value": "450px"
+        "value": "450px",
+        "description": "Smallest breakpoint, mainly for mobile and also the smallest browser width that is supported"
       },
       "name": "BreakpointsXs",
       "attributes": {
@@ -323,11 +347,13 @@ module.exports = {
     "sm": {
       "comment": "Check here: https://tailwindcss.com/docs/responsive-design",
       "value": "640px",
+      "description": "Mainly used for small tablets",
       "filePath": "src/tokens/breakpoints.json",
       "isSource": true,
       "original": {
         "comment": "Check here: https://tailwindcss.com/docs/responsive-design",
-        "value": "640px"
+        "value": "640px",
+        "description": "Mainly used for small tablets"
       },
       "name": "BreakpointsSm",
       "attributes": {
@@ -341,10 +367,12 @@ module.exports = {
     },
     "md": {
       "value": "768px",
+      "description": "Tablets and usually the smallest laptop size",
       "filePath": "src/tokens/breakpoints.json",
       "isSource": true,
       "original": {
-        "value": "768px"
+        "value": "768px",
+        "description": "Tablets and usually the smallest laptop size"
       },
       "name": "BreakpointsMd",
       "attributes": {
@@ -358,10 +386,12 @@ module.exports = {
     },
     "lg": {
       "value": "1024px",
+      "description": "Smaller laptop size",
       "filePath": "src/tokens/breakpoints.json",
       "isSource": true,
       "original": {
-        "value": "1024px"
+        "value": "1024px",
+        "description": "Smaller laptop size"
       },
       "name": "BreakpointsLg",
       "attributes": {
@@ -375,10 +405,12 @@ module.exports = {
     },
     "xl": {
       "value": "1280px",
+      "description": "Common laptop size",
       "filePath": "src/tokens/breakpoints.json",
       "isSource": true,
       "original": {
-        "value": "1280px"
+        "value": "1280px",
+        "description": "Common laptop size"
       },
       "name": "BreakpointsXl",
       "attributes": {
@@ -392,10 +424,12 @@ module.exports = {
     },
     "2xl": {
       "value": "1536px",
+      "description": "Desktop size",
       "filePath": "src/tokens/breakpoints.json",
       "isSource": true,
       "original": {
-        "value": "1536px"
+        "value": "1536px",
+        "description": "Desktop size"
       },
       "name": "Breakpoints2xl",
       "attributes": {
@@ -491,10 +525,12 @@ module.exports = {
         ]
       },
       "50": {
+        "rgb": "0,111,214",
         "value": "#006FD6",
         "filePath": "src/tokens/colors.json",
         "isSource": true,
         "original": {
+          "rgb": "0,111,214",
           "value": "#006FD6"
         },
         "name": "ColorsPrimary50",
@@ -1405,10 +1441,12 @@ module.exports = {
     "size": {
       "h1": {
         "value": "3rem",
+        "description": "Do not use, mainly for web",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "3rem"
+          "value": "3rem",
+          "description": "Do not use, mainly for web"
         },
         "name": "FontSizeH1",
         "attributes": {
@@ -1424,10 +1462,12 @@ module.exports = {
       },
       "h2": {
         "value": "2.5rem",
+        "description": "Use for page headers",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "2.5rem"
+          "value": "2.5rem",
+          "description": "Use for page headers"
         },
         "name": "FontSizeH2",
         "attributes": {
@@ -1443,10 +1483,12 @@ module.exports = {
       },
       "h3": {
         "value": "1.875rem",
+        "description": "Use cautiously. Used for larger container header such as login screen and dialogs",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "1.875rem"
+          "value": "1.875rem",
+          "description": "Use cautiously. Used for larger container header such as login screen and dialogs"
         },
         "name": "FontSizeH3",
         "attributes": {
@@ -1462,10 +1504,12 @@ module.exports = {
       },
       "h4": {
         "value": "1.5rem",
+        "description": "Use cautiously. Not used in any components",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "1.5rem"
+          "value": "1.5rem",
+          "description": "Use cautiously. Not used in any components"
         },
         "name": "FontSizeH4",
         "attributes": {
@@ -1481,10 +1525,12 @@ module.exports = {
       },
       "h5": {
         "value": "1.25rem",
+        "description": "Used for larger containers such as drag & drop and drawer. Use instead of H3 if you want a more compact layout with less spacing and padding inside the container",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "1.25rem"
+          "value": "1.25rem",
+          "description": "Used for larger containers such as drag & drop and drawer. Use instead of H3 if you want a more compact layout with less spacing and padding inside the container"
         },
         "name": "FontSizeH5",
         "attributes": {
@@ -1500,10 +1546,12 @@ module.exports = {
       },
       "h6": {
         "value": "1rem",
+        "description": "Common smaller header. Used in banner, buttons, context menu, widget and wizard",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "1rem"
+          "value": "1rem",
+          "description": "Common smaller header. Used in banner, buttons, context menu, widget and wizard"
         },
         "name": "FontSizeH6",
         "attributes": {
@@ -1519,10 +1567,12 @@ module.exports = {
       },
       "subheading-large": {
         "value": "1.25rem",
+        "description": "Pair with larger headers. Not used in any components",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "1.25rem"
+          "value": "1.25rem",
+          "description": "Pair with larger headers. Not used in any components"
         },
         "name": "FontSizeSubheadingLarge",
         "attributes": {
@@ -1538,10 +1588,12 @@ module.exports = {
       },
       "subheading-medium": {
         "value": "1rem",
+        "description": "Use with medium sized headers or as a header of its own. Is used as header in smaller components and as a selected state to differentiate from body text. Is used in view selector, tabs and code block",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "1rem"
+          "value": "1rem",
+          "description": "Use with medium sized headers or as a header of its own. Is used as header in smaller components and as a selected state to differentiate from body text. Is used in view selector, tabs and code block"
         },
         "name": "FontSizeSubheadingMedium",
         "attributes": {
@@ -1557,10 +1609,12 @@ module.exports = {
       },
       "subheading-small": {
         "value": "0.875rem",
+        "description": "Use cautiously. Not used in any components",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "0.875rem"
+          "value": "0.875rem",
+          "description": "Use cautiously. Not used in any components"
         },
         "name": "FontSizeSubheadingSmall",
         "attributes": {
@@ -1576,10 +1630,12 @@ module.exports = {
       },
       "body-large": {
         "value": "1rem",
+        "description": "Use cautiously. Mainly used as the base font in web experiences. Can be used when wanting to create a subtle hierarchy such as in tables, dialogs. Is also used in some components where we provide a size “large”",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "1rem"
+          "value": "1rem",
+          "description": "Use cautiously. Mainly used as the base font in web experiences. Can be used when wanting to create a subtle hierarchy such as in tables, dialogs. Is also used in some components where we provide a size “large”"
         },
         "name": "FontSizeBodyLarge",
         "attributes": {
@@ -1595,10 +1651,12 @@ module.exports = {
       },
       "body-medium": {
         "value": "0.875rem",
+        "description": "This is the base font and should be used as much as possible",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "0.875rem"
+          "value": "0.875rem",
+          "description": "This is the base font and should be used as much as possible"
         },
         "name": "FontSizeBodyMedium",
         "attributes": {
@@ -1614,10 +1672,12 @@ module.exports = {
       },
       "body-small": {
         "value": "0.75rem",
+        "description": "Smallest accessible font. Use when having little space or crowded layouts.Examples include charts (widgets) and help texts",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "0.75rem"
+          "value": "0.75rem",
+          "description": "Smallest accessible font. Use when having little space or crowded layouts.Examples include charts (widgets) and help texts"
         },
         "name": "FontSizeBodySmall",
         "attributes": {
@@ -1633,10 +1693,12 @@ module.exports = {
       },
       "code": {
         "value": "0.875rem",
+        "description": "Base font for code. Uses the same font size as the base font for regular text (body/medium)",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "0.875rem"
+          "value": "0.875rem",
+          "description": "Base font for code. Uses the same font size as the base font for regular text (body/medium)"
         },
         "name": "FontSizeCode",
         "attributes": {
@@ -1652,10 +1714,12 @@ module.exports = {
       },
       "label": {
         "value": "0.875rem",
+        "description": "Mainly used for the label component but can also be used when needing a bold label inside a small component or space",
         "filePath": "src/tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "0.875rem"
+          "value": "0.875rem",
+          "description": "Mainly used for the label component but can also be used when needing a bold label inside a small component or space"
         },
         "name": "FontSizeLabel",
         "attributes": {
@@ -1774,10 +1838,12 @@ module.exports = {
         "text": {
           "weakest": {
             "value": "#B2B7BD",
+            "description": "Should be used mainly for disabled text",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.60.value}"
+              "value": "{colors.neutral.60.value}",
+              "description": "Should be used mainly for disabled text"
             },
             "name": "PaletteLightNeutralTextWeakest",
             "attributes": {
@@ -1797,10 +1863,12 @@ module.exports = {
           },
           "weaker": {
             "value": "#717780",
+            "description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.70.value}"
+              "value": "{colors.neutral.70.value}",
+              "description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
             },
             "name": "PaletteLightNeutralTextWeaker",
             "attributes": {
@@ -1820,10 +1888,12 @@ module.exports = {
           },
           "weak": {
             "value": "#535B66",
+            "description": "Used for labels, icon color and descriptions",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.80.value}"
+              "value": "{colors.neutral.80.value}",
+              "description": "Used for labels, icon color and descriptions"
             },
             "name": "PaletteLightNeutralTextWeak",
             "attributes": {
@@ -1843,10 +1913,12 @@ module.exports = {
           },
           "default": {
             "value": "#151E29",
+            "description": "Used for all default text",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.90.value}"
+              "value": "{colors.neutral.90.value}",
+              "description": "Used for all default text"
             },
             "name": "PaletteLightNeutralTextDefault",
             "attributes": {
@@ -1866,10 +1938,12 @@ module.exports = {
           },
           "inverse": {
             "value": "#FFFFFF",
+            "description": "Default text on Neutral-bg-strongest or other dark backgrounds",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.10.value}"
+              "value": "{colors.neutral.10.value}",
+              "description": "Default text on Neutral-bg-strongest or other dark backgrounds"
             },
             "name": "PaletteLightNeutralTextInverse",
             "attributes": {
@@ -1891,10 +1965,12 @@ module.exports = {
         "bg": {
           "weak": {
             "value": "#FFFFFF",
+            "description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.10.value}"
+              "value": "{colors.neutral.10.value}",
+              "description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
             },
             "name": "PaletteLightNeutralBgWeak",
             "attributes": {
@@ -1914,10 +1990,12 @@ module.exports = {
           },
           "default": {
             "value": "#F5F7FA",
+            "description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.20.value}"
+              "value": "{colors.neutral.20.value}",
+              "description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
             },
             "name": "PaletteLightNeutralBgDefault",
             "attributes": {
@@ -1937,10 +2015,12 @@ module.exports = {
           },
           "strong": {
             "value": "#E6E9EE",
+            "description": "Use sparsely, mainly included in some component states",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.40.value}"
+              "value": "{colors.neutral.40.value}",
+              "description": "Use sparsely, mainly included in some component states"
             },
             "name": "PaletteLightNeutralBgStrong",
             "attributes": {
@@ -1960,10 +2040,12 @@ module.exports = {
           },
           "strongest": {
             "value": "#535B66",
+            "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.80.value}"
+              "value": "{colors.neutral.80.value}",
+              "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
             },
             "name": "PaletteLightNeutralBgStrongest",
             "attributes": {
@@ -1985,10 +2067,12 @@ module.exports = {
         "border": {
           "weak": {
             "value": "#EEF1F6",
+            "description": "Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.30.value}"
+              "value": "{colors.neutral.30.value}",
+              "description": "Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background"
             },
             "name": "PaletteLightNeutralBorderWeak",
             "attributes": {
@@ -2008,10 +2092,12 @@ module.exports = {
           },
           "strong": {
             "value": "#C4C8CD",
+            "description": "Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.neutral.50.value}"
+              "value": "{colors.neutral.50.value}",
+              "description": "Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons"
             },
             "name": "PaletteLightNeutralBorderStrong",
             "attributes": {
@@ -2033,11 +2119,13 @@ module.exports = {
         "hover": {
           "alpha": "0.1",
           "value": "rgba(113,119,128,0.1)",
+          "description": "Used for neutral hover states on components",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
             "alpha": "0.1",
-            "value": "rgba({colors.neutral.70.rgb},{palette.light.neutral.hover.alpha})"
+            "value": "rgba({colors.neutral.70.rgb},{palette.light.neutral.hover.alpha})",
+            "description": "Used for neutral hover states on components"
           },
           "name": "PaletteLightNeutralHover",
           "attributes": {
@@ -2056,11 +2144,13 @@ module.exports = {
         "pressed": {
           "alpha": "0.2",
           "value": "rgba(113,119,128,0.2)",
+          "description": "Used for neutral pressed states on components",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
             "alpha": "0.2",
-            "value": "rgba({colors.neutral.70.rgb},{palette.light.neutral.pressed.alpha})"
+            "value": "rgba({colors.neutral.70.rgb},{palette.light.neutral.pressed.alpha})",
+            "description": "Used for neutral pressed states on components"
           },
           "name": "PaletteLightNeutralPressed",
           "attributes": {
@@ -2080,10 +2170,12 @@ module.exports = {
       "primary": {
         "text": {
           "value": "#006FD6",
+          "description": "Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.primary.50.value}"
+            "value": "{colors.primary.50.value}",
+            "description": "Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states"
           },
           "name": "PaletteLightPrimaryText",
           "attributes": {
@@ -2101,10 +2193,12 @@ module.exports = {
         },
         "icon": {
           "value": "#006FD6",
+          "description": "Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.primary.50.value}"
+            "value": "{colors.primary.50.value}",
+            "description": "Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states"
           },
           "name": "PaletteLightPrimaryIcon",
           "attributes": {
@@ -2123,10 +2217,12 @@ module.exports = {
         "bg": {
           "strong": {
             "value": "#006FD6",
+            "description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.primary.50.value}"
+              "value": "{colors.primary.50.value}",
+              "description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
             },
             "name": "PaletteLightPrimaryBgStrong",
             "attributes": {
@@ -2146,10 +2242,12 @@ module.exports = {
           },
           "weak": {
             "value": "#e6f8ff",
+            "description": "Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.primary.10.value}"
+              "value": "{colors.primary.10.value}",
+              "description": "Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs"
             },
             "name": "PaletteLightPrimaryBgWeak",
             "attributes": {
@@ -2171,10 +2269,12 @@ module.exports = {
         "border": {
           "strong": {
             "value": "#006FD6",
+            "description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.primary.50.value}"
+              "value": "{colors.primary.50.value}",
+              "description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
             },
             "name": "PaletteLightPrimaryBorderStrong",
             "attributes": {
@@ -2194,10 +2294,12 @@ module.exports = {
           },
           "weak": {
             "value": "#7ad1ff",
+            "description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.primary.30.value}"
+              "value": "{colors.primary.30.value}",
+              "description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
             },
             "name": "PaletteLightPrimaryBorderWeak",
             "attributes": {
@@ -2218,10 +2320,12 @@ module.exports = {
         },
         "focus": {
           "value": "#018bff",
+          "description": "Used for all focused states",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.primary.40.value}"
+            "value": "{colors.primary.40.value}",
+            "description": "Used for all focused states"
           },
           "name": "PaletteLightPrimaryFocus",
           "attributes": {
@@ -2241,11 +2345,13 @@ module.exports = {
           "weak": {
             "alpha": "0.08",
             "value": "rgba(1,139,255,0.08)",
+            "description": "Used for hover states where the background is either transparent or use Neutral-bg-weak",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
               "alpha": "0.08",
-              "value": "rgba({colors.primary.40.rgb},{palette.light.primary.hover.weak.alpha})"
+              "value": "rgba({colors.primary.40.rgb},{palette.light.primary.hover.weak.alpha})",
+              "description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
             },
             "name": "PaletteLightPrimaryHoverWeak",
             "attributes": {
@@ -2265,10 +2371,12 @@ module.exports = {
           },
           "strong": {
             "value": "#0056b3",
+            "description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.primary.60.value}"
+              "value": "{colors.primary.60.value}",
+              "description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
             },
             "name": "PaletteLightPrimaryHoverStrong",
             "attributes": {
@@ -2291,11 +2399,13 @@ module.exports = {
           "weak": {
             "alpha": "0.12",
             "value": "rgba(1,139,255,0.12)",
+            "description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
               "alpha": "0.12",
-              "value": "rgba({colors.primary.40.rgb},{palette.light.primary.pressed.weak.alpha})"
+              "value": "rgba({colors.primary.40.rgb},{palette.light.primary.pressed.weak.alpha})",
+              "description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
             },
             "name": "PaletteLightPrimaryPressedWeak",
             "attributes": {
@@ -2315,10 +2425,12 @@ module.exports = {
           },
           "strong": {
             "value": "#004092",
+            "description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.primary.70.value}"
+              "value": "{colors.primary.70.value}",
+              "description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
             },
             "name": "PaletteLightPrimaryPressedStrong",
             "attributes": {
@@ -2341,10 +2453,12 @@ module.exports = {
       "danger": {
         "text": {
           "value": "#cc254b",
+          "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.danger.50.value}"
+            "value": "{colors.danger.50.value}",
+            "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
           },
           "name": "PaletteLightDangerText",
           "attributes": {
@@ -2362,10 +2476,12 @@ module.exports = {
         },
         "icon": {
           "value": "#cc254b",
+          "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.danger.50.value}"
+            "value": "{colors.danger.50.value}",
+            "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
           },
           "name": "PaletteLightDangerIcon",
           "attributes": {
@@ -2384,10 +2500,12 @@ module.exports = {
         "bg": {
           "strong": {
             "value": "#cc254b",
+            "description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.danger.50.value}"
+              "value": "{colors.danger.50.value}",
+              "description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
             },
             "name": "PaletteLightDangerBgStrong",
             "attributes": {
@@ -2407,10 +2525,12 @@ module.exports = {
           },
           "weak": {
             "value": "#ffe6e9",
+            "description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.danger.10.value}"
+              "value": "{colors.danger.10.value}",
+              "description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
             },
             "name": "PaletteLightDangerBgWeak",
             "attributes": {
@@ -2432,10 +2552,12 @@ module.exports = {
         "border": {
           "strong": {
             "value": "#cc254b",
+            "description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.danger.50.value}"
+              "value": "{colors.danger.50.value}",
+              "description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
             },
             "name": "PaletteLightDangerBorderStrong",
             "attributes": {
@@ -2455,10 +2577,12 @@ module.exports = {
           },
           "weak": {
             "value": "#ffb8c4",
+            "description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.danger.20.value}"
+              "value": "{colors.danger.20.value}",
+              "description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
             },
             "name": "PaletteLightDangerBorderWeak",
             "attributes": {
@@ -2481,11 +2605,13 @@ module.exports = {
           "weak": {
             "alpha": "0.08",
             "value": "rgba(237,18,82,0.08)",
+            "description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
               "alpha": "0.08",
-              "value": "rgba({colors.danger.40.rgb},{palette.light.danger.hover.weak.alpha})"
+              "value": "rgba({colors.danger.40.rgb},{palette.light.danger.hover.weak.alpha})",
+              "description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
             },
             "name": "PaletteLightDangerHoverWeak",
             "attributes": {
@@ -2505,10 +2631,12 @@ module.exports = {
           },
           "strong": {
             "value": "#a1003b",
+            "description": "Only used for hover states in critical filled buttons",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.danger.60.value}"
+              "value": "{colors.danger.60.value}",
+              "description": "Only used for hover states in critical filled buttons"
             },
             "name": "PaletteLightDangerHoverStrong",
             "attributes": {
@@ -2531,11 +2659,13 @@ module.exports = {
           "weak": {
             "alpha": "0.12",
             "value": "rgba(237,18,82,0.12)",
+            "description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
               "alpha": "0.12",
-              "value": "rgba({colors.danger.40.rgb},{palette.light.danger.pressed.weak.alpha})"
+              "value": "rgba({colors.danger.40.rgb},{palette.light.danger.pressed.weak.alpha})",
+              "description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
             },
             "name": "PaletteLightDangerPressedWeak",
             "attributes": {
@@ -2555,10 +2685,12 @@ module.exports = {
           },
           "strong": {
             "value": "#7a0031",
+            "description": "Only used for pressed states in critical filled buttons",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.danger.70.value}"
+              "value": "{colors.danger.70.value}",
+              "description": "Only used for pressed states in critical filled buttons"
             },
             "name": "PaletteLightDangerPressedStrong",
             "attributes": {
@@ -2581,10 +2713,12 @@ module.exports = {
       "warning": {
         "text": {
           "value": "#966c2e",
+          "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.warning.60.value}"
+            "value": "{colors.warning.60.value}",
+            "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
           },
           "name": "PaletteLightWarningText",
           "attributes": {
@@ -2602,10 +2736,12 @@ module.exports = {
         },
         "icon": {
           "value": "#966c2e",
+          "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.warning.60.value}"
+            "value": "{colors.warning.60.value}",
+            "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
           },
           "name": "PaletteLightWarningIcon",
           "attributes": {
@@ -2624,10 +2760,12 @@ module.exports = {
         "bg": {
           "strong": {
             "value": "#966c2e",
+            "description": "Use sparsely. Only used for filled labels",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.warning.60.value}"
+              "value": "{colors.warning.60.value}",
+              "description": "Use sparsely. Only used for filled labels"
             },
             "name": "PaletteLightWarningBgStrong",
             "attributes": {
@@ -2647,10 +2785,12 @@ module.exports = {
           },
           "weak": {
             "value": "#FFFBDE",
+            "description": "Used as backgrounds for warning components states such as banner and semi-filled labels",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.warning.10.value}"
+              "value": "{colors.warning.10.value}",
+              "description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
             },
             "name": "PaletteLightWarningBgWeak",
             "attributes": {
@@ -2672,10 +2812,12 @@ module.exports = {
         "border": {
           "strong": {
             "value": "#966c2e",
+            "description": "Use sparsely. Only used for outlined labels",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.warning.60.value}"
+              "value": "{colors.warning.60.value}",
+              "description": "Use sparsely. Only used for outlined labels"
             },
             "name": "PaletteLightWarningBorderStrong",
             "attributes": {
@@ -2695,10 +2837,12 @@ module.exports = {
           },
           "weak": {
             "value": "#FFEA8C",
+            "description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.warning.30.value}"
+              "value": "{colors.warning.30.value}",
+              "description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
             },
             "name": "PaletteLightWarningBorderWeak",
             "attributes": {
@@ -2721,10 +2865,12 @@ module.exports = {
       "success": {
         "text": {
           "value": "#327D60",
+          "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.success.50.value}"
+            "value": "{colors.success.50.value}",
+            "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
           },
           "name": "PaletteLightSuccessText",
           "attributes": {
@@ -2742,10 +2888,12 @@ module.exports = {
         },
         "icon": {
           "value": "#327D60",
+          "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors",
           "filePath": "src/tokens/palette.json",
           "isSource": true,
           "original": {
-            "value": "{colors.success.50.value}"
+            "value": "{colors.success.50.value}",
+            "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
           },
           "name": "PaletteLightSuccessIcon",
           "attributes": {
@@ -2764,10 +2912,12 @@ module.exports = {
         "bg": {
           "strong": {
             "value": "#327D60",
+            "description": "Use sparsely. Only used for filled labels",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.success.50.value}"
+              "value": "{colors.success.50.value}",
+              "description": "Use sparsely. Only used for filled labels"
             },
             "name": "PaletteLightSuccessBgStrong",
             "attributes": {
@@ -2787,10 +2937,12 @@ module.exports = {
           },
           "weak": {
             "value": "#E1FAEF",
+            "description": "Used as backgrounds for success components states such as banner and semi-filled labels",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.success.10.value}"
+              "value": "{colors.success.10.value}",
+              "description": "Used as backgrounds for success components states such as banner and semi-filled labels"
             },
             "name": "PaletteLightSuccessBgWeak",
             "attributes": {
@@ -2812,10 +2964,12 @@ module.exports = {
         "border": {
           "strong": {
             "value": "#327D60",
+            "description": "Use sparsely. Only used for outlined labels",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.success.50.value}"
+              "value": "{colors.success.50.value}",
+              "description": "Use sparsely. Only used for outlined labels"
             },
             "name": "PaletteLightSuccessBorderStrong",
             "attributes": {
@@ -2835,10 +2989,12 @@ module.exports = {
           },
           "weak": {
             "value": "#98EDCB",
+            "description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background",
             "filePath": "src/tokens/palette.json",
             "isSource": true,
             "original": {
-              "value": "{colors.success.20.value}"
+              "value": "{colors.success.20.value}",
+              "description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
             },
             "name": "PaletteLightSuccessBorderWeak",
             "attributes": {
@@ -2863,10 +3019,12 @@ module.exports = {
   "boxShadow": {
     "l2": {
       "value": "0px 1px 2px 0px rgba(12, 26, 37, 0.18)",
+      "description": "Used for small components that need sharper shadows to illustrate elevation. Only switch is using level 2",
       "filePath": "src/tokens/shadows.json",
       "isSource": true,
       "original": {
-        "value": "0px 1px 2px 0px rgba(12, 26, 37, 0.18)"
+        "value": "0px 1px 2px 0px rgba(12, 26, 37, 0.18)",
+        "description": "Used for small components that need sharper shadows to illustrate elevation. Only switch is using level 2"
       },
       "name": "BoxShadowL2",
       "attributes": {
@@ -2880,10 +3038,12 @@ module.exports = {
     },
     "l3": {
       "value": "0px 4px 8px 0px rgba(12, 26, 37, 0.04)",
+      "description": "Not used in any components, do not use it since it will most likely be removed",
       "filePath": "src/tokens/shadows.json",
       "isSource": true,
       "original": {
-        "value": "0px 4px 8px 0px rgba(12, 26, 37, 0.04)"
+        "value": "0px 4px 8px 0px rgba(12, 26, 37, 0.04)",
+        "description": "Not used in any components, do not use it since it will most likely be removed"
       },
       "name": "BoxShadowL3",
       "attributes": {
@@ -2897,10 +3057,12 @@ module.exports = {
     },
     "l4": {
       "value": "0px 4px 8px 0px rgba(12, 26, 37, 0.08)",
+      "description": "Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector",
       "filePath": "src/tokens/shadows.json",
       "isSource": true,
       "original": {
-        "value": "0px 4px 8px 0px rgba(12, 26, 37, 0.08)"
+        "value": "0px 4px 8px 0px rgba(12, 26, 37, 0.08)",
+        "description": "Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector"
       },
       "name": "BoxShadowL4",
       "attributes": {
@@ -2914,10 +3076,12 @@ module.exports = {
     },
     "l5": {
       "value": "0px 8px 20px 0px rgba(12, 26, 37, 0.12)",
+      "description": "Use for large containers such as dialogs, login screens and context menus",
       "filePath": "src/tokens/shadows.json",
       "isSource": true,
       "original": {
-        "value": "0px 8px 20px 0px rgba(12, 26, 37, 0.12)"
+        "value": "0px 8px 20px 0px rgba(12, 26, 37, 0.12)",
+        "description": "Use for large containers such as dialogs, login screens and context menus"
       },
       "name": "BoxShadowL5",
       "attributes": {