@utrecht/design-tokens 2.1.0 → 2.2.0

package/dist/index.tokens.json

@@ -423,7 +423,7 @@
         "type": "other"
       },
       "fade-in": {
-        "animation-duration": "0.4s"
+        "animation-duration": "400ms"
       },
       "reduced-transparency": {
         "opacity": "0.98"
@@ -471,7 +471,7 @@
           "nl.nldesignsystem.figma.supports-token": false,
           "nl.nldesignsystem.redirect": "utrecht.badge-counter.min-inline-size"
         },
-        "type": "spacing"
+        "type": "sizing"
       },
       "min-block-size": {
         "$extensions": {
@@ -484,7 +484,7 @@
           ],
           "nl.nldesignsystem.figma.supports-token": true
         },
-        "type": "spacing"
+        "type": "sizing"
       },
       "min-inline-size": {
         "$extensions": {
@@ -494,7 +494,7 @@
           },
           "nl.nldesignsystem.figma.supports-token": true
         },
-        "type": "spacing"
+        "type": "sizing"
       },
       "padding-block": "1ex",
       "padding-inline": "1ex"
@@ -640,6 +640,46 @@
         },
         "type": "color"
       },
+      "border-inline-start-width": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "borderWidth"
+      },
+      "border-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "border-radius": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "borderRadius"
+      },
+      "border-width": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "borderWidth"
+      },
       "color": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -726,7 +766,7 @@
         },
         "type": "spacing"
       },
-      "padding-inline-block-start": {
+      "padding-block-start": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<length>",
@@ -736,7 +776,7 @@
         },
         "type": "spacing"
       },
-      "padding-inline-block-end": {
+      "padding-block-end": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<length>",
@@ -746,6 +786,16 @@
         },
         "type": "spacing"
       },
+      "row-gap": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
       "attribution": {
         "color": {
           "$extensions": {
@@ -753,18 +803,64 @@
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.figma.supports-token": true
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.blockquote.caption.color"
           },
           "type": "color"
         },
-        "font-size": "0.75rem"
+        "font-size": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.blockquote.caption.font-size"
+          },
+          "type": "fontSizes"
+        }
       },
       "content": {
         "color": "hsl(0 100% 40%)",
         "font-size": "1.125rem"
       },
-      "padding-block-start": {},
-      "padding-block-end": {},
+      "caption": {
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "font-size": "0.875rem"
+      },
+      "quote": {
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "font-size": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "fontSizes"
+        }
+      },
       "margin-block-start": "1.6em",
       "margin-block-end": "1.6em"
     },
@@ -963,6 +1059,7 @@
       "border-radius": "0",
       "border-width": "1px",
       "color": "hsl(0 0% 40%)",
+      "column-gap": "0.5ch",
       "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
       "font-size": "1rem",
       "font-weight": {
@@ -1057,7 +1154,6 @@
         "color": "hsl(0 0% 100%)"
       },
       "icon": {
-        "gap": "0.5ch",
         "size": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
@@ -1672,7 +1768,7 @@
           "width": "44px",
           "padding-block-start": "4px",
           "padding-block-end": "10px",
-          "line-height": "24px"
+          "line-height": "1.5rem"
         },
         "days-item-day": {
           "size": "44px",
@@ -2160,8 +2256,8 @@
         },
         "type": "fontFamilies"
       },
-      "font-size": "16px",
-      "line-height": "24px",
+      "font-size": "1rem",
+      "line-height": "1.5",
       "margin-block-start": "20px",
       "margin-block-end": "20px",
       "margin-inline-start": {
@@ -2334,26 +2430,48 @@
       "column-rule-color": "hsl(0 0% 80%)",
       "column-rule-width": "2px",
       "column-width": "350px",
-      "gap": "16px"
+      "gap": "16px",
+      "print": {
+        "column-count": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<number>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "other"
+        },
+        "column-width": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "sizing"
+        }
+      }
     },
     "action": {
+      "activate": {
+        "cursor": "pointer"
+      },
       "busy": {
         "cursor": "wait"
       },
       "disabled": {
         "cursor": "not-allowed"
       },
+      "inert": {
+        "cursor": "default"
+      },
       "navigate": {
         "cursor": "pointer"
       },
       "submit": {
         "cursor": "pointer"
-      },
-      "activate": {
-        "cursor": "pointer"
-      },
-      "inert": {
-        "cursor": "default"
       }
     },
     "feedback": {
@@ -2839,8 +2957,8 @@
       },
       "caption": {
         "color": "#727272",
-        "font-size": "14px",
-        "line-height": "20px"
+        "font-size": "0.875rem",
+        "line-height": "1.5"
       }
     },
     "flex-wrap-fallback": {},
@@ -3181,7 +3299,7 @@
           },
           "nl.nldesignsystem.figma.supports-token": true
         },
-        "type": "fontSizes"
+        "type": "fontWeights"
       },
       "line-height": {
         "$extensions": {
@@ -3334,7 +3452,7 @@
         },
         "font-size": "1rem",
         "font-weight": "700",
-        "line-height": "1.4",
+        "line-height": "1.5",
         "margin-block-end": "12px",
         "margin-block-start": "24px",
         "disabled": {
@@ -3417,7 +3535,7 @@
       }
     },
     "form-toggle": {
-      "accent-color": "hsla(0, 0%, 48%, 1)",
+      "accent-color": "hsla(0 0% 48% / 100%)",
       "background-color": "hsl(0 0% 100%)",
       "border-color": "transparent",
       "border-style": "solid",
@@ -3923,6 +4041,52 @@
       },
       "focus": {
         "color": "hsl(211 60% 40%)",
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "text-decoration": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": [
+                "inherit",
+                "none",
+                "underline"
+              ],
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.link.text-decoration"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.link.focus-visible.text-decoration"
+          },
+          "type": "textDecoration"
+        },
+        "text-decoration-thickness": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.link.text-decoration-thickness"
+            ],
+            "nl.nldesignsystem.figma.supports-token": false,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.link.focus-visible.text-decoration-thickness"
+          },
+          "type": "other"
+        }
+      },
+      "focus-visible": {
         "text-decoration": "none",
         "text-decoration-thickness": {
           "$extensions": {
@@ -4152,9 +4316,67 @@
           "color": "hsl(0 0% 0%)",
           "font-weight": "700"
         },
+        "disabled": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
+            }
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
+            }
+          }
+        },
+        "hover": {
+          "background-color": "hsl(211 60% 90%)",
+          "color": "hsl(0 0% 0%)"
+        },
         "selected": {
           "background-color": "hsl(0 0% 95%)",
-          "color": "hsl(0 0% 0%)"
+          "color": "hsl(0 0% 0%)",
+          "disabled": {
+            "background-color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            },
+            "color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            }
+          },
+          "hover": {
+            "background-color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            },
+            "color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            }
+          }
         },
         "icon": {
           "size": {
@@ -4165,10 +4387,6 @@
               }
             }
           }
-        },
-        "hover": {
-          "color": "hsl(0 0% 0%)",
-          "background-color": "hsl(211 60% 90%)"
         }
       },
       "z-index": {},
@@ -4279,14 +4497,6 @@
       },
       "min-block-size": "32px",
       "min-inline-size": "32px",
-      "margin-block-start": "8px",
-      "margin-block-end": "8px",
-      "margin-inline-start": "0",
-      "margin-inline-end": "0",
-      "padding-block-start": "4px",
-      "padding-block-end": "4px",
-      "padding-inline-start": "4px",
-      "padding-inline-end": "4px",
       "disabled": {
         "background-color": "hsl(0 0% 90%)",
         "border-color": "hsl(0 0% 80%)",
@@ -4305,28 +4515,14 @@
         "margin-inline-start": "8px",
         "margin-inline-end": "8px"
       },
-      "primary-action": {
-        "background-color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "color"
-        },
-        "color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "color"
-        }
-      }
+      "margin-block-end": "8px",
+      "margin-block-start": "8px",
+      "margin-inline-end": "0",
+      "margin-inline-start": "0",
+      "padding-block-end": "4px",
+      "padding-block-start": "4px",
+      "padding-inline-end": "4px",
+      "padding-inline-start": "4px"
     },
     "mark": {
       "background-color": "hsl(48 100% 60%)",
@@ -4393,7 +4589,33 @@
     },
     "number-badge": {
       "background-color": "hsl(0 100% 40%)",
+      "border-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": [
+            "utrecht.badge.border-color"
+          ],
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
       "border-radius": "1rem",
+      "border-width": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": [
+            "utrecht.badge.border-width"
+          ],
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "borderWidth"
+      },
       "color": "hsl(0 0% 100%)",
       "font-family": {
         "$extensions": {
@@ -4581,7 +4803,7 @@
       "padding-inline-start": "2em"
     },
     "pagination": {
-      "font-size": "14px",
+      "font-size": "0.875rem",
       "font-family": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -5454,6 +5676,19 @@
         },
         "type": "fontWeights"
       },
+      "line-height": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": [
+            "utrecht.form-control.line-height"
+          ],
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "lineHeights"
+      },
       "min-block-size": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -5579,6 +5814,53 @@
           "type": "color"
         }
       },
+      "hover": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.background-color",
+              "utrecht.select.background-color",
+              "utrecht.form-control.background-color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "border-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.border-color",
+              "utrecht.select.border-color",
+              "utrecht.form-control.border-color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.color",
+              "utrecht.select.color",
+              "utrecht.form-control.color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        }
+      },
       "focus": {
         "background-color": {
           "$extensions": {
@@ -5741,6 +6023,44 @@
       "focus": {
         "background-color": "hsl(48 100% 80%)",
         "color": "hsl(0 0% 0%)",
+        "text-decoration": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": [
+                "inherit",
+                "none",
+                "underline"
+              ],
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.skip-link.focus-visible.text-decoration"
+          },
+          "type": "textDecoration"
+        }
+      },
+      "focus-visible": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
         "text-decoration": "none"
       }
     },
@@ -6050,7 +6370,7 @@
           },
           "type": "fontFamilies"
         },
-        "font-size": "1.125em",
+        "font-size": "1.125rem",
         "color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
@@ -6199,7 +6519,7 @@
         }
       },
       "cell": {
-        "line-height": "24px",
+        "line-height": "1.5rem",
         "padding-block-end": "0.5em",
         "padding-block-start": "0.5em",
         "padding-inline-end": "0.4em",
@@ -7319,12 +7639,6 @@
         "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif"
       },
       "scale": {
-        "2xs": {
-          "font-size": "0.5rem"
-        },
-        "xs": {
-          "font-size": "0.75rem"
-        },
         "sm": {
           "font-size": "0.875rem"
         },
@@ -7578,7 +7892,7 @@
     "progress-indicator": {
       "background-color": "hsl(0 0% 100%)",
       "mobile": {
-        "box-shadow": "0px 0px 2px 0px rgba(0, 0, 0, 0.2)"
+        "box-shadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)"
       }
     }
   }