@utrecht/design-tokens 4.2.0 → 5.0.0

package/dist/index.mjs

@@ -721,14 +721,16 @@ 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 utrechtNavigationLinkFocusColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkFocusBackgroundColor = "hsl(0 0% 0%)";
 export const utrechtNavigationLinkFocusTextDecorationThickness = "3px";
-export const utrechtNavigationLinkFocusBackgroundColor = "hsl(48 100% 80%)";
+export const utrechtNavigationLinkFocusVisibleColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkFocusVisibleBackgroundColor = "hsl(48 100% 80%)";
+export const utrechtNavigationLinkFocusVisibleTextDecorationThickness = "3px";
 export const utrechtNavigationLinkFontWeight = "400";
 export const utrechtNavigationLinkGap = "8px";
 export const utrechtNavigationLinkHoverBackgroundColor = "hsl(0 0% 0%)";
@@ -739,13 +741,16 @@ 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 utrechtNavigationLinkMobileHoverFontWeight = "400";
 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 utrechtNavigationLinkMobileActiveColor = "hsl(211 60% 35%)";
+export const utrechtNavigationLinkMobileFocusBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkMobileFocusColor = "hsl(211 60% 35%)";
 export const utrechtNavigationLinkPaddingBlockEnd = "16px";
 export const utrechtNavigationLinkPaddingBlockStart = "16px";
 export const utrechtNavigationListMobileBackgroundColor = "hsl(0 0% 100%)";
@@ -942,6 +947,37 @@ export const utrechtSpotlightSectionInfoBackgroundColor = "hsl(211 60% 90%)";
 export const utrechtSpotlightSectionWarningBackgroundColor = "hsl(48 100% 80%)";
 export const utrechtSpotlightSectionErrorBackgroundColor = "hsl(0 100% 95%)";
 export const utrechtSpotlightSectionOkBackgroundColor = "hsl(90 30% 90%)";
+export const utrechtStatusBadgeBackgroundColor = "hsl(0 0% 30%)";
+export const utrechtStatusBadgeBorderRadius = "0";
+export const utrechtStatusBadgeBorderWidth = "0px";
+export const utrechtStatusBadgeColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeFontFamily = "\"Noto Sans Variable\", \"Arial\", sans-serif";
+export const utrechtStatusBadgePaddingBlock = "8px";
+export const utrechtStatusBadgePaddingInline = "12px";
+export const utrechtStatusBadgeActiveBackgroundColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeActiveBorderColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeActiveColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeDangerBackgroundColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeDangerBorderColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeDangerColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeErrorBackgroundColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeErrorBorderColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeErrorColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeInactiveBackgroundColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeInactiveBorderColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeInactiveColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeInvalidBackgroundColor = "#990000";
+export const utrechtStatusBadgeInvalidBorderColor = "#990000";
+export const utrechtStatusBadgeInvalidColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeSafeBackgroundColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeSafeBorderColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeSafeColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeValidBackgroundColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeValidBorderColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeValidColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeWarningBackgroundColor = "hsl(48 100% 50%)";
+export const utrechtStatusBadgeWarningBorderColor = "hsl(48 100% 50%)";
+export const utrechtStatusBadgeWarningColor = "hsl(0 0% 0%)";
 export const utrechtSurfaceBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtSurfaceColor = "hsl(0 0% 10%)";
 export const utrechtTableMarginBlockEnd = "0";

package/dist/index.tokens.json

@@ -609,31 +609,6 @@
         "margin-inline": "12px"
       }
     },
-    "badge-status": {
-      "letter-spacing": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "letterSpacing"
-      },
-      "text-transform": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": [
-              "inherit",
-              "uppercase"
-            ],
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "textCase"
-      }
-    },
     "badge": {
       "background-color": "hsl(0 0% 30%)",
       "border-radius": "0",
@@ -5172,19 +5147,21 @@
       },
       "link": {
         "active": {
-          "color": "hsl(0 0% 100%)",
-          "focus": {
-            "color": "hsl(0 0% 0%)"
-          }
+          "color": "hsl(0 0% 100%)"
         },
         "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% 100%)",
+          "background-color": "hsl(0 0% 0%)",
+          "text-decoration-thickness": "3px"
+        },
+        "focus-visible": {
           "color": "hsl(0 0% 0%)",
-          "text-decoration-thickness": "3px",
-          "background-color": "hsl(48 100% 80%)"
+          "background-color": "hsl(48 100% 80%)",
+          "text-decoration-thickness": "3px"
         },
         "font-weight": "400",
         "gap": "8px",
@@ -5202,7 +5179,7 @@
           "hover": {
             "background-color": "hsl(0 0% 100%)",
             "color": "hsl(211 60% 35%)",
-            "font-weight": "700"
+            "font-weight": "400"
           },
           "justify-content": {
             "$extensions": {
@@ -5229,7 +5206,14 @@
           },
           "padding-inline-start": "16px",
           "transition-duration": "300ms",
-          "transition-timing-function": "ease-in-out"
+          "transition-timing-function": "ease-in-out",
+          "active": {
+            "color": "hsl(211 60% 35%)"
+          },
+          "focus": {
+            "background-color": "hsl(0 0% 100%)",
+            "color": "hsl(211 60% 35%)"
+          }
         },
         "padding-block-end": "16px",
         "padding-block-start": "16px",
@@ -7446,6 +7430,84 @@
         }
       }
     },
+    "status-badge": {
+      "letter-spacing": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "letterSpacing"
+      },
+      "text-transform": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": [
+              "inherit",
+              "uppercase"
+            ],
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "textCase"
+      },
+      "background-color": "hsl(0 0% 30%)",
+      "border-color": {},
+      "border-radius": "0",
+      "border-width": "0px",
+      "color": "hsl(0 0% 100%)",
+      "font-family": "\"Noto Sans Variable\", \"Arial\", sans-serif",
+      "font-size": {},
+      "font-weight": {},
+      "line-height": {},
+      "min-block-size": {},
+      "min-inline-size": {},
+      "padding-block": "8px",
+      "padding-inline": "12px",
+      "active": {
+        "background-color": "hsl(90 30% 50%)",
+        "border-color": "hsl(90 30% 50%)",
+        "color": "hsl(0 0% 100%)"
+      },
+      "danger": {
+        "background-color": "hsl(0 100% 40%)",
+        "border-color": "hsl(0 100% 40%)",
+        "color": "hsl(0 0% 100%)"
+      },
+      "error": {
+        "background-color": "hsl(0 100% 40%)",
+        "border-color": "hsl(0 100% 40%)",
+        "color": "hsl(0 0% 100%)"
+      },
+      "inactive": {
+        "background-color": "hsl(0 100% 40%)",
+        "border-color": "hsl(0 100% 40%)",
+        "color": "hsl(0 0% 100%)"
+      },
+      "invalid": {
+        "background-color": "#990000",
+        "border-color": "#990000",
+        "color": "hsl(0 0% 100%)"
+      },
+      "safe": {
+        "background-color": "hsl(90 30% 50%)",
+        "border-color": "hsl(90 30% 50%)",
+        "color": "hsl(0 0% 100%)"
+      },
+      "valid": {
+        "background-color": "hsl(90 30% 50%)",
+        "border-color": "hsl(90 30% 50%)",
+        "color": "hsl(0 0% 100%)"
+      },
+      "warning": {
+        "background-color": "hsl(48 100% 50%)",
+        "border-color": "hsl(48 100% 50%)",
+        "color": "hsl(0 0% 0%)"
+      }
+    },
     "subscript": {},
     "superscript": {},
     "surface": {