@utrecht/design-tokens 3.3.0 → 3.4.0

package/dist/index.mjs

@@ -106,8 +106,8 @@ export const utrechtBreadcrumbNavLinkFocusTextDecoration = "underline";
 export const utrechtBreadcrumbNavLinkHoverColor = "hsl(211 60% 40%)";
 export const utrechtBreadcrumbNavLinkHoverTextDecoration = "underline";
 export const utrechtBreadcrumbNavLinkDisabledColor = "hsl(0 0% 40%)";
-export const utrechtBreadcrumbNavLinkTextDecoration = "none";
 export const utrechtBreadcrumbNavLinkIconSize = "16px";
+export const utrechtBreadcrumbNavLinkTextDecoration = "none";
 export const utrechtBreadcrumbNavSeparatorColor = "hsl(211 60% 35%)";
 export const utrechtBreadcrumbNavSeparatorIconSize = "0.875rem";
 export const utrechtBreadcrumbNavArrowsLinkBackgroundColor = "hsl(0 0% 90%)";
@@ -556,6 +556,7 @@ export const utrechtHeading6LineHeight = "1.5";
 export const utrechtHeadingFontWeight = "700";
 export const utrechtIconSize = "48px";
 export const utrechtIconBaselineInsetBlockStart = "0.125em";
+export const utrechtIconCustomMarginInlineEnd = "8px";
 export const utrechtIndexCharNavMarginBlockStart = "20px";
 export const utrechtIndexCharNavMarginBlockEnd = "16px";
 export const utrechtIndexCharNavGap = "12px";
@@ -672,6 +673,58 @@ export const utrechtTopnavLinkFocusTextDecoration = "none";
 export const utrechtTopnavLinkFocusBackgroundColor = "hsl(48 100% 80%)";
 export const utrechtTopnavLinkFocusOutlineColor = "hsl(0 0% 0%)";
 export const utrechtTopnavLinkHoverBackgroundColor = "hsl(0 0% 0%)";
+export const utrechtNavigationBorderBlockEndColor = "transparent";
+export const utrechtNavigationBorderBlockEndWidth = "0";
+export const utrechtNavigationBorderBlockStartColor = "transparent";
+export const utrechtNavigationBorderBlockStartWidth = "0";
+export const utrechtNavigationDrawerMobileMinInlineSize = "50%";
+export const utrechtNavigationDrawerBackdropBackgroundColor = "rgb(0 0 0 / 30%)";
+export const utrechtNavigationDrawerMinInlineSize = "100%";
+export const utrechtNavigationItemBorderBlockEndColor = "transparent";
+export const utrechtNavigationItemBorderBlockEndWidth = "0";
+export const utrechtNavigationItemBorderBlockStartColor = "transparent";
+export const utrechtNavigationItemBorderBlockStartWidth = "0";
+export const utrechtNavigationItemMobileBorderBlockEndColor = "hsl(0 0% 80%)";
+export const utrechtNavigationItemMobileBorderBlockEndWidth = "1px";
+export const utrechtNavigationItemMobileBorderBlockStartColor = "hsl(0 0% 80%)";
+export const utrechtNavigationItemMobileBorderBlockStartWidth = "1px";
+export const utrechtNavigationLinkActiveColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkActiveFocusColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkBackgroundColor = "hsl(0 0% 15%)";
+export const utrechtNavigationLinkBorderColor = "hsl(0 0% 40%)";
+export const utrechtNavigationLinkBorderInlineEndWidth = "1px";
+export const utrechtNavigationLinkColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkFocusColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkFocusTextDecorationThickness = "3px";
+export const utrechtNavigationLinkFocusBackgroundColor = "hsl(48 100% 80%)";
+export const utrechtNavigationLinkFontWeight = "400";
+export const utrechtNavigationLinkGap = "8px";
+export const utrechtNavigationLinkHoverBackgroundColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkHoverColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkHoverDecorationThickness = "3px";
+export const utrechtNavigationLinkIsCurrentFontWeight = "700";
+export const utrechtNavigationLinkMobileBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkMobileColor = "hsl(211 60% 35%)";
+export const utrechtNavigationLinkMobileHoverBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkMobileHoverColor = "hsl(211 60% 35%)";
+export const utrechtNavigationLinkMobileHoverFontWeight = "700";
+export const utrechtNavigationLinkMobileMinBlockSize = "44px";
+export const utrechtNavigationLinkMobilePaddingBlockEnd = "8px";
+export const utrechtNavigationLinkMobilePaddingBlockStart = "8px";
+export const utrechtNavigationLinkMobilePaddingInlineStart = "16px";
+export const utrechtNavigationLinkMobileTransitionDuration = "300ms";
+export const utrechtNavigationLinkMobileTransitionTimingFunction = "ease-in-out";
+export const utrechtNavigationLinkPaddingBlockEnd = "16px";
+export const utrechtNavigationLinkPaddingBlockStart = "16px";
+export const utrechtNavigationListMobileBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavigationListMobileInlineSize = "100%";
+export const utrechtNavigationListMobilePaddingBlockEnd = "8px";
+export const utrechtNavigationListMobilePaddingInlineEnd = "16px";
+export const utrechtNavigationListMobilePaddingInlineStart = "16px";
+export const utrechtNavigationListSideNavInlineSize = "100%";
+export const utrechtNavigationMarkerColor = "hsl(0 0% 80%)";
+export const utrechtNavigationToggleButtonOffsetEnd = "16px";
+export const utrechtNavigationToggleButtonOffsetStart = "16px";
 export const utrechtNumberBadgeBackgroundColor = "hsl(0 100% 40%)";
 export const utrechtNumberBadgeBorderRadius = "1rem";
 export const utrechtNumberBadgeColor = "hsl(0 0% 100%)"; // Default text color for badge components

package/dist/index.tokens.json

@@ -124,6 +124,80 @@
         }
       }
     },
+    "action-group": {
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
+      "column-gap": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "comment": "'column-gap', for lack of a better existing property.",
+        "type": "spacing"
+      },
+      "margin-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "margin-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "padding-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "spacing"
+      },
+      "row-gap": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "comment": "'row-gap', for lack of a better existing property.",
+        "type": "spacing"
+      }
+    },
     "alert-dialog": {
       "margin-block-start": {
         "$extensions": {
@@ -957,11 +1031,11 @@
         "disabled": {
           "color": "hsl(0 0% 40%)"
         },
-        "background-color": {},
-        "text-decoration": "none",
         "icon": {
           "size": "16px"
-        }
+        },
+        "background-color": {},
+        "text-decoration": "none"
       },
       "separator": {
         "color": "hsl(211 60% 35%)",
@@ -990,7 +1064,9 @@
             "syntax": "<color>",
             "inherits": true
           },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.deprecated": true,
+          "nl.nldesignsystem.redirect": "utrecht.action-group.background-color"
         },
         "type": "color"
       },
@@ -1000,7 +1076,9 @@
             "syntax": "<length>",
             "inherits": true
           },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.deprecated": true,
+          "nl.nldesignsystem.redirect": "utrecht.action-group.column-gap"
         },
         "comment": "'column-gap', for lack of a better existing property.",
         "type": "spacing"
@@ -1011,7 +1089,9 @@
             "syntax": "<length>",
             "inherits": true
           },
-          "nl.nldesignsystem.figma.supports-token": false
+          "nl.nldesignsystem.figma.supports-token": false,
+          "nl.nldesignsystem.deprecated": true,
+          "nl.nldesignsystem.redirect": "utrecht.action-group.margin-block-end"
         },
         "type": "spacing"
       },
@@ -1021,7 +1101,9 @@
             "syntax": "<length>",
             "inherits": true
           },
-          "nl.nldesignsystem.figma.supports-token": false
+          "nl.nldesignsystem.figma.supports-token": false,
+          "nl.nldesignsystem.deprecated": true,
+          "nl.nldesignsystem.redirect": "utrecht.action-group.margin-block-start"
         },
         "type": "spacing"
       },
@@ -1031,7 +1113,9 @@
             "syntax": "<length>",
             "inherits": true
           },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.deprecated": true,
+          "nl.nldesignsystem.redirect": "utrecht.action-group.padding-block-end"
         },
         "type": "spacing"
       },
@@ -1041,7 +1125,9 @@
             "syntax": "<length>",
             "inherits": true
           },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.deprecated": true,
+          "nl.nldesignsystem.redirect": "utrecht.action-group.padding-block-start"
         },
         "type": "spacing"
       },
@@ -1051,7 +1137,9 @@
             "syntax": "<length>",
             "inherits": true
           },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.deprecated": true,
+          "nl.nldesignsystem.redirect": "utrecht.action-group.row-gap"
         },
         "comment": "'row-gap', for lack of a better existing property.",
         "type": "spacing"
@@ -3158,6 +3246,26 @@
         },
         "type": "spacing"
       },
+      "margin-inline-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "margin-inline-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
       "caption": {
         "color": "#727272",
         "font-size": "0.875rem",
@@ -3165,6 +3273,7 @@
       }
     },
     "flex-wrap-fallback": {},
+    "utrecht-flolegal-decision-tree-container": {},
     "focus": {
       "background-color": "hsl(48 100% 60%)",
       "color": {
@@ -4117,6 +4226,9 @@
       },
       "baseline": {
         "inset-block-start": "0.125em"
+      },
+      "custom": {
+        "margin-inline-end": "8px"
       }
     },
     "image": {},
@@ -4820,6 +4932,356 @@
         }
       }
     },
+    "navigation": {
+      "border-block-end-color": "transparent",
+      "border-block-end-width": "0",
+      "border-block-start-color": "transparent",
+      "border-block-start-width": "0",
+      "margin-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "length"
+      },
+      "margin-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "length"
+      },
+      "drawer": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "mobile": {
+          "min-inline-size": "50%"
+        },
+        "backdrop": {
+          "background-color": "rgb(0 0 0 / 30%)"
+        },
+        "min-inline-size": "100%"
+      },
+      "item": {
+        "padding-block-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-block-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "border-block-end-color": "transparent",
+        "border-block-end-width": "0",
+        "border-block-start-color": "transparent",
+        "border-block-start-width": "0",
+        "mobile": {
+          "padding-block-start": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "spacing"
+          },
+          "padding-block-end": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "spacing"
+          },
+          "padding-inline-start": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "spacing"
+          },
+          "padding-inline-end": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "spacing"
+          },
+          "border-block-end-color": "hsl(0 0% 80%)",
+          "border-block-end-width": "1px",
+          "border-block-start-color": "hsl(0 0% 80%)",
+          "border-block-start-width": "1px"
+        }
+      },
+      "link": {
+        "active": {
+          "color": "hsl(0 0% 100%)",
+          "focus": {
+            "color": "hsl(0 0% 0%)"
+          }
+        },
+        "background-color": "hsl(0 0% 15%)",
+        "border-color": "hsl(0 0% 40%)",
+        "border-inline-end-width": "1px",
+        "color": "hsl(0 0% 100%)",
+        "focus": {
+          "color": "hsl(0 0% 0%)",
+          "text-decoration-thickness": "3px",
+          "background-color": "hsl(48 100% 80%)"
+        },
+        "font-weight": "400",
+        "gap": "8px",
+        "hover": {
+          "background-color": "hsl(0 0% 0%)",
+          "color": "hsl(0 0% 100%)",
+          "decoration-thickness": "3px"
+        },
+        "is-current": {
+          "font-weight": "700"
+        },
+        "mobile": {
+          "background-color": "hsl(0 0% 100%)",
+          "color": "hsl(211 60% 35%)",
+          "hover": {
+            "background-color": "hsl(0 0% 100%)",
+            "color": "hsl(211 60% 35%)",
+            "font-weight": "700"
+          },
+          "justify-content": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "*",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "other"
+          },
+          "min-block-size": "44px",
+          "padding-block-end": "8px",
+          "padding-block-start": "8px",
+          "padding-inline-end": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "spacing"
+          },
+          "padding-inline-start": "16px",
+          "transition-duration": "300ms",
+          "transition-timing-function": "ease-in-out"
+        },
+        "padding-block-end": "16px",
+        "padding-block-start": "16px",
+        "padding-inline-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "text-align": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "*",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "other"
+        }
+      },
+      "list": {
+        "display": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "*",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "other"
+        },
+        "inline-size": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "sizing"
+        },
+        "mobile": {
+          "background-color": "hsl(0 0% 100%)",
+          "inline-size": "100%",
+          "padding-block-end": "8px",
+          "padding-block-start": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "spacing"
+          },
+          "padding-inline-end": "16px",
+          "padding-inline-start": "16px"
+        },
+        "padding-block-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "side-nav": {
+          "inline-size": "100%"
+        }
+      },
+      "marker": {
+        "color": "hsl(0 0% 80%)"
+      },
+      "toggle-button": {
+        "margin-block-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "margin-block-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "offset-end": "16px",
+        "offset-start": "16px",
+        "padding-inline-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        }
+      }
+    },
     "number-badge": {
       "background-color": "hsl(0 100% 40%)",
       "border-color": {