@lux-design-system/design-tokens 2.0.0 → 2.2.0

package/lib/tokens/nl/utrecht-link-list.json

@@ -14,12 +14,8 @@
           "value": "{lux.icon.inset-block-start}",
           "type": "spacing"
         }
-      }
-    }
-  },
-  "todo": {
-    "link-list": {
-      "item": {
+      },
+      "link": {
         "column-gap": {
           "value": "{lux.space.100}",
           "type": "spacing"
@@ -28,6 +24,22 @@
           "value": "None",
           "type": "textDecoration"
         }
+      },
+      "font-weight": {
+        "value": "{lux.font-weight.regular}",
+        "type": "fontWeights"
+      }
+    }
+  },
+  "lux": {
+    "link-list": {
+      "link": {
+        "hover": {
+          "text-decoration": {
+            "value": "underline",
+            "type": "textDecoration"
+          }
+        }
       }
     }
   }

package/lib/tokens/nl/utrecht-link.json

@@ -3,11 +3,11 @@
     "link": {
       "color": {
         "type": "color",
-        "value": "{lux.link.color}"
+        "value": "{lux.color.foreground.link}"
       },
       "text-decoration-color": {
         "type": "color",
-        "value": "{lux.link.color}"
+        "value": "{lux.color.foreground.link}"
       },
       "text-decoration-thickness": {
         "type": "other",
@@ -20,79 +20,86 @@
       "active": {
         "color": {
           "type": "color",
-          "value": "{lux.link.active.color}"
+          "value": "{mode.link.active.color}"
         },
         "text-decoration": {
-          "value": "{lux.link.active.text-decoration}",
+          "value": "none",
           "type": "textDecoration"
         }
       },
       "focus": {
         "color": {
           "type": "color",
-          "value": "{lux.link.focus.color}"
+          "value": "{lux.color.foreground.link}"
         },
         "text-decoration-thickness": {
           "type": "other",
           "value": "auto"
         },
         "background-color": {
-          "value": "{lux.link.focus.background-color}",
+          "value": "{lux.color.none}",
           "type": "color"
         },
         "text-decoration": {
-          "value": "{lux.link.focus.text-decoration}",
+          "value": "none",
+          "type": "textDecoration",
+          "description": "Legacy token"
+        }
+      },
+      "focus-visible": {
+        "text-decoration": {
+          "value": "None",
           "type": "textDecoration"
         }
       },
       "hover": {
         "color": {
           "type": "color",
-          "value": "{lux.link.hover.color}"
+          "value": "{mode.link.hover.color}"
         },
         "text-decoration-thickness": {
           "type": "other",
           "value": "auto"
         },
         "text-decoration": {
-          "value": "{lux.link.hover.text-decoration}",
+          "value": "none",
           "type": "textDecoration"
         }
       },
       "font-weight": {
         "type": "fontWeights",
-        "value": "{lux.link.font-weight}"
+        "value": "{lux.font-weight.regular}"
       },
       "visited": {
         "color": {
           "type": "color",
-          "value": "{lux.link.visited.color}"
+          "value": "{mode.link.visited.color}"
         }
       },
       "icon": {
         "size": {
           "type": "sizing",
-          "value": "{lux.link.icon.size}"
+          "value": "{lux.size.icon}"
         }
       },
       "font-family": {
-        "value": "{lux.link.font-family}",
+        "value": "{lux.font-family.primary}",
         "type": "fontFamilies"
       },
       "line-height": {
-        "value": "{lux.link.line-height}",
+        "value": "{lux.line-height.body.default}",
         "type": "lineHeights"
       },
       "font-size": {
-        "value": "{lux.link.font-size}",
+        "value": "{lux.font-size.body.default}",
         "type": "fontSizes"
       },
       "text-decoration": {
-        "value": "{lux.link.text-decoration}",
+        "value": "underline",
         "type": "textDecoration"
       },
       "column-gap": {
-        "value": "{lux.link.column-gap}",
+        "value": "{lux.space.50}",
         "type": "spacing"
       }
     }

package/lib/tokens/nl/utrecht-paragraph.json

@@ -2,23 +2,23 @@
   "utrecht": {
     "paragraph": {
       "color": {
-        "value": "{lux.paragraph.color}",
+        "value": "{lux.color.foreground.default}",
         "type": "color"
       },
       "font-family": {
-        "value": "{lux.paragraph.font-family}",
+        "value": "{lux.font-family.primary}",
         "type": "fontFamilies"
       },
       "font-size": {
-        "value": "{lux.paragraph.default.font-size}",
+        "value": "{lux.font-size.body.default}",
         "type": "fontSizes"
       },
       "font-weight": {
-        "value": "{lux.paragraph.font-weight}",
+        "value": "{lux.font-weight.regular}",
         "type": "fontWeights"
       },
       "line-height": {
-        "value": "{lux.paragraph.default.line-height}",
+        "value": "{lux.line-height.body.default}",
         "type": "lineHeights"
       },
       "margin-block-end": {
@@ -31,37 +31,37 @@
       },
       "lead": {
         "color": {
-          "value": "{lux.paragraph.color}",
+          "value": "{lux.color.foreground.default}",
           "type": "color"
         },
         "font-size": {
-          "value": "{lux.paragraph.lead.font-size}",
+          "value": "{lux.font-size.body.large}",
           "type": "fontSizes"
         },
         "font-weight": {
-          "value": "{lux.paragraph.font-weight}",
+          "value": "{lux.font-weight.regular}",
           "type": "fontWeights"
         },
         "line-height": {
-          "value": "{lux.paragraph.lead.line-height}",
+          "value": "{lux.line-height.body.large}",
           "type": "lineHeights"
         }
       },
       "small": {
         "color": {
-          "value": "{lux.paragraph.color}",
+          "value": "{lux.color.foreground.default}",
           "type": "color"
         },
         "font-size": {
-          "value": "{lux.paragraph.small.font-size}",
+          "value": "{lux.font-size.body.small}",
           "type": "fontSizes"
         },
         "font-weight": {
-          "value": "{lux.paragraph.font-weight}",
+          "value": "{lux.font-weight.regular}",
           "type": "fontWeights"
         },
         "line-height": {
-          "value": "{lux.paragraph.small.line-height}",
+          "value": "{lux.line-height.body.small}",
           "type": "lineHeights"
         }
       }

package/lib/tokens/nl/utrecht-radio-button.json

@@ -29,7 +29,7 @@
       },
       "invalid": {
         "background-color": {
-          "value": "{lux.alert.error.background-color}",
+          "value": "{lux.color.feedback.error.default}",
           "type": "color"
         },
         "border-color": {
@@ -101,15 +101,15 @@
       },
       "focus": {
         "background-color": {
-          "value": "{utrecht.radio-button.background-color}",
+          "value": "{lux.color.background.default}",
           "type": "color"
         },
         "border-color": {
-          "value": "{utrecht.radio-button.border-color}",
+          "value": "{lux.color.foreground.default}",
           "type": "color"
         },
         "color": {
-          "value": "{utrecht.radio-button.focus.border-color}",
+          "value": "{lux.color.foreground.default}",
           "type": "color"
         },
         "border-width": {
@@ -168,15 +168,15 @@
         },
         "focus": {
           "background-color": {
-            "value": "{utrecht.radio-button.checked.background-color}",
+            "value": "{lux.color.background.default}",
             "type": "color"
           },
           "border-color": {
-            "value": "{utrecht.radio-button.checked.border-color}",
+            "value": "{lux.color.foreground.default}",
             "type": "color"
           },
           "color": {
-            "value": "{utrecht.radio-button.checked.color}",
+            "value": "{lux.color.foreground.default}",
             "type": "color"
           },
           "border-width": {

package/lib/tokens/nl/utrecht-select.json

@@ -5,6 +5,10 @@
         "type": "color",
         "value": "{lux.color.background.default}"
       },
+      "background-image": {
+        "type": "other",
+        "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2.459 4.51c.5-.502 1.151-.702 1.651-.151l3.854 3.857 3.904-3.907c.5-.501 1.152-.35 1.652.15.5.501.7 1.152.15 1.653L8.865 10.92c-.5.501-1.301.501-1.802 0L2.31 6.162c-.5-.5-.35-1.152.15-1.653Z' fill='%23282828'/%3E%3C/svg%3E\")"
+      },
       "border-block-end-width": {
         "type": "borderWidth",
         "value": "{utrecht.select.border-width}"
@@ -37,14 +41,18 @@
         "type": "fontWeights",
         "value": "{utrecht.document.font-weight}"
       },
-      "max-inline-size": {
-        "type": "sizing",
-        "value": "400px"
+      "line-height": {
+        "type": "lineHeights",
+        "value": "{lux.line-height.body.default}"
       },
       "min-block-size": {
         "type": "sizing",
         "value": "{lux.size.target}"
       },
+      "max-inline-size": {
+        "type": "sizing",
+        "value": "400px"
+      },
       "padding-block-end": {
         "type": "spacing",
         "value": "{lux.space.100}"
@@ -75,29 +83,43 @@
           "value": "{lux.color.foreground.subdued}"
         }
       },
+      "hover": {
+        "background-color": {
+          "type": "color",
+          "value": "{lux.color.background.default}"
+        },
+        "border-color": {
+          "type": "color",
+          "value": "{lux.color.border.strong}"
+        },
+        "color": {
+          "type": "color",
+          "value": "{lux.color.foreground.default}"
+        }
+      },
       "focus": {
         "background-color": {
           "type": "color",
-          "value": "{utrecht.select.background-color}"
+          "value": "{lux.color.background.default}"
         },
         "border-color": {
           "type": "color",
-          "value": "{utrecht.select.border-color}"
+          "value": "{lux.color.border.strong}"
         },
         "color": {
           "type": "color",
-          "value": "{utrecht.select.color}"
+          "value": "{lux.color.foreground.default}"
         }
       },
       "invalid": {
-        "border-block-end-width": {
-          "type": "borderWidth",
-          "value": "{utrecht.select.invalid.border-width}"
-        },
         "background-color": {
           "type": "color",
           "value": "{lux.color.background.default}"
         },
+        "border-block-end-width": {
+          "type": "borderWidth",
+          "value": "{utrecht.select.invalid.border-width}"
+        },
         "border-color": {
           "type": "color",
           "value": "{lux.color.feedback.error.default}"
@@ -109,12 +131,8 @@
       }
     }
   },
-  "todo": {
+  "lux": {
     "select": {
-      "line-height": {
-        "type": "lineHeights",
-        "value": "{lux.line-height.body.default}"
-      },
       "icon": {
         "size": {
           "type": "sizing",
@@ -128,18 +146,6 @@
         }
       },
       "hover": {
-        "background-color": {
-          "type": "color",
-          "value": "{lux.color.background.default}"
-        },
-        "border-color": {
-          "type": "color",
-          "value": "{lux.color.border.strong}"
-        },
-        "color": {
-          "type": "color",
-          "value": "{lux.color.foreground.default}"
-        },
         "border-width": {
           "type": "borderWidth",
           "value": "{lux.border-width.m}"

package/lib/tokens/nl/utrecht-skip-link.json

@@ -0,0 +1,46 @@
+{
+  "nl": {
+    "skip-link": {
+      "background-color": {
+        "type": "color",
+        "value": "{lux.color.background.default}"
+      },
+      "color": {
+        "type": "color",
+        "value": "{lux.color.foreground.default}"
+      },
+      "font-size": {
+        "type": "fontSizes",
+        "value": "{lux.font-size.body.default}"
+      },
+      "line-height": {
+        "type": "lineHeights",
+        "value": "{lux.line-height.body.default}"
+      },
+      "padding-block": {
+        "type": "spacing",
+        "value": "{lux.space.100}"
+      },
+      "padding-inline": {
+        "type": "spacing",
+        "value": "{lux.space.200}"
+      },
+      "min-block-size": {
+        "type": "sizing",
+        "value": "{lux.size.target}"
+      },
+      "min-inline-size": {
+        "type": "sizing",
+        "value": "{lux.size.target}"
+      },
+      "text-decoration-thickness": {
+        "type": "other",
+        "value": "1px"
+      },
+      "text-underline-offset": {
+        "type": "other",
+        "value": "1px"
+      }
+    }
+  }
+}

package/lib/tokens/nl/utrecht-text-input.json

@@ -59,7 +59,7 @@
           "type": "color"
         },
         "border-color": {
-          "value": "{lux.color.border.strong}",
+          "value": "{lux.color.feedback.error.default}",
           "type": "color"
         },
         "color": {
@@ -86,10 +86,6 @@
         "type": "borderWidth"
       },
       "focus": {
-        "border-width": {
-          "value": "{lux.border-width.m}",
-          "type": "borderWidth"
-        },
         "background-color": {
           "value": "{lux.color.background.default}",
           "type": "color"
@@ -131,15 +127,25 @@
           "type": "color"
         }
       },
-      "hover": {
+      "min-block-size": {
+        "value": "{lux.size.target}",
+        "type": "sizing"
+      }
+    }
+  },
+  "lux": {
+    "textbox": {
+      "focus": {
         "border-width": {
-          "value": "{lux.border-width.default}",
+          "value": "{lux.border-width.m}",
           "type": "borderWidth"
         }
       },
-      "min-block-size": {
-        "value": "{lux.size.target}",
-        "type": "sizing"
+      "hover": {
+        "border-width": {
+          "value": "{lux.border-width.m}",
+          "type": "borderWidth"
+        }
       }
     }
   },

package/lib/tokens/nl/utrecht-textarea.json

@@ -69,10 +69,6 @@
         "color": {
           "value": "{lux.color.foreground.default}",
           "type": "color"
-        },
-        "border-width": {
-          "value": "{lux.border-width.m}",
-          "type": "borderWidth"
         }
       },
       "disabled": {
@@ -115,10 +111,6 @@
         "color": {
           "value": "{lux.color.foreground.default}",
           "type": "color"
-        },
-        "border-width": {
-          "value": "{lux.border-width.default}",
-          "type": "borderWidth"
         }
       },
       "border-radius": {
@@ -148,6 +140,26 @@
       "font-size": {
         "value": "{lux.font-size.body.default}",
         "type": "fontSizes"
+      },
+      "min-block-size": {
+        "value": "{lux.size.target}",
+        "type": "sizing"
+      }
+    }
+  },
+  "lux": {
+    "textarea": {
+      "focus": {
+        "border-width": {
+          "value": "{lux.border-width.m}",
+          "type": "borderWidth"
+        }
+      },
+      "hover": {
+        "border-width": {
+          "value": "{lux.border-width.m}",
+          "type": "borderWidth"
+        }
       }
     }
   }

package/lib/tokens/product/DigiD.json

@@ -237,6 +237,48 @@
           "value": "1.1875rem"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/lib/tokens/product/Digitoegankelijk.json

@@ -237,6 +237,48 @@
           "value": "{lux.font-size.large-scale.sm}"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }