feat(design tokens): Form tokens toevoegen

.changeset/modern-bags-reflect.md

@@ -0,0 +1,14 @@
+---
+"@lux-design-system/design-tokens": minor
+---
+
+In deze commit
+
+- Nieuwe tokens: utrecht common pointer target
+- Nieuwe tokens: utrecht component form field
+- Nieuwe tokens: utrecht component form field description
+- Nieuwe tokens: utrecht component form field error message
+- Nieuwe tokens: utrecht component form label
+- Nieuwe tokens: utrecht component textarea
+- Nieuwe tokens: utrecht component text input
+- Wijziging tokens: utrecht component document background-color toegevoegd

proprietary/design-tokens/src/imported/$metadata.json

@@ -30,12 +30,19 @@
     "component/link",
     "component/paragraph",
     "component/icon-logo",
-    "nl/utrecht-focus",
     "nl/utrecht-alert",
     "nl/utrecht-button",
-    "nl/utrecht-link",
-    "nl/utrecht-heading",
     "nl/utrecht-document",
-    "nl/utrecht-paragraph"
+    "nl/utrecht-focus",
+    "nl/utrecht-form-field",
+    "nl/utrecht-form-field-description",
+    "nl/utrecht-form-field-error-message",
+    "nl/utrecht-form-label",
+    "nl/utrecht-heading",
+    "nl/utrecht-link",
+    "nl/utrecht-paragraph",
+    "nl/utrecht-pointer-target",
+    "nl/utrecht-textarea",
+    "nl/utrecht-text-input"
   ]
 }

proprietary/design-tokens/src/imported/$themes.json

@@ -874,6 +874,14 @@
       "nl/utrecht-button": "enabled",
       "nl/utrecht-alert": "enabled",
       "nl/utrecht-link": "enabled",
+      "nl/utrecht-pointer-target": "enabled",
+      "nl/utrecht-form-field-error-message": "enabled",
+      "nl/utrecht-form-field-description": "enabled",
+      "nl/utrecht-text-input": "enabled",
+      "nl/utrecht-textarea": "enabled",
+      "nl/utrecht-form-field": "enabled",
+      "nl/utrecht-form-label": "enabled",
+      "nl/utrecht-document": "enabled",
       "nl/utrecht-heading": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:2536:6472",
@@ -1056,4 +1064,4 @@
     },
     "group": "product"
   }
-]
+]

proprietary/design-tokens/src/imported/nl/utrecht-document.json

@@ -20,6 +20,10 @@
       "font-size": {
         "value": "{lux.font-size.body.default}",
         "type": "fontSizes"
+      },
+      "background-color": {
+        "value": "{lux.color.background.default}",
+        "type": "color"
       }
     }
   }

proprietary/design-tokens/src/imported/nl/utrecht-form-field-description.json

@@ -0,0 +1,43 @@
+{
+  "utrecht": {
+    "form-field-description": {
+      "color": {
+        "type": "color",
+        "value": "{lux.color.foreground.subdued}"
+      },
+      "font-family": {
+        "value": "{lux.font-family.primary}",
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "value": "{lux.font-size.body.default}",
+        "type": "fontSizes"
+      },
+      "line-height": {
+        "value": "{lux.line-height.body.default}",
+        "type": "lineHeights"
+      },
+      "invalid": {
+        "color": {
+          "value": "{lux.color.foreground.subdued}",
+          "type": "color",
+          "description": "Checkvraag dev: bestaat deze echt in code? "
+        }
+      },
+      "valid": {
+        "color": {
+          "value": "{lux.color.foreground.subdued}",
+          "type": "color",
+          "description": "Checkvraag dev: bestaat deze echt in code? "
+        }
+      }
+    },
+    "invalid": {
+      "font-weight": {
+        "value": "{no-token}",
+        "type": "fontWeights",
+        "description": "Controle vraag aan devs: bestaat deze echt in utrecht code?"
+      }
+    }
+  }
+}

proprietary/design-tokens/src/imported/nl/utrecht-form-field-error-message.json

@@ -0,0 +1,81 @@
+{
+  "utrecht": {
+    "form-field-error-message": {
+      "icon": {
+        "size": {
+          "type": "sizing",
+          "value": "1.5rem"
+        },
+        "color": {
+          "value": "{lux.color.feedback.error.default}",
+          "type": "color"
+        }
+      },
+      "color": {
+        "type": "color",
+        "value": "{lux.color.feedback.error.default}"
+      },
+      "font-family": {
+        "value": "{lux.font-family.primary}",
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "value": "{lux.font-size.body.default}",
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "value": "{lux.font-weight.regular}",
+        "type": "fontWeights"
+      },
+      "background-color": {
+        "value": "{lux.color.none}",
+        "type": "color"
+      },
+      "border-radius": {
+        "value": "{lux.border-radius.default}",
+        "type": "borderRadius",
+        "description": "todo token"
+      },
+      "padding-block-end": {
+        "value": "{lux.space.0}",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "{lux.space.0}",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "{lux.space.0}",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "{lux.space.0}",
+        "type": "spacing"
+      },
+      "column-gap": {
+        "value": "{lux.space.100}",
+        "type": "spacing"
+      },
+      "line-height": {
+        "value": "{lux.line-height.body.default}",
+        "type": "lineHeights"
+      },
+      "border-width": {
+        "value": "{lux.alert.border-width}",
+        "type": "borderWidth"
+      },
+      "border-color": {
+        "value": "{lux.color.none}",
+        "type": "color"
+      }
+    },
+    "alert": {
+      "icon": {
+        "inset-block-start": {
+          "value": "{lux.space.25}",
+          "type": "spacing"
+        }
+      }
+    }
+  }
+}

proprietary/design-tokens/src/imported/nl/utrecht-form-field.json

@@ -0,0 +1,20 @@
+{
+  "utrecht": {
+    "form-field": {
+      "invalid": {
+        "border-inline-start-color": {
+          "value": "{lux.color.none}",
+          "type": "color"
+        },
+        "border-inline-start-width": {
+          "value": "{lux.border-width.none}",
+          "type": "borderWidth"
+        },
+        "padding-inline-start": {
+          "value": "{lux.space.0}",
+          "type": "spacing"
+        }
+      }
+    }
+  }
+}

proprietary/design-tokens/src/imported/nl/utrecht-form-label.json

@@ -0,0 +1,50 @@
+{
+  "utrecht": {
+    "form-label": {
+      "color": {
+        "value": "{lux.color.foreground.default}",
+        "type": "color"
+      },
+      "font-weight": {
+        "value": "{lux.font-weight.bold}",
+        "type": "fontWeights"
+      },
+      "font-size": {
+        "value": "{lux.font-size.body.default}",
+        "type": "fontSizes"
+      },
+      "checkbox": {
+        "font-weight": {
+          "value": "{lux.font-weight.bold}",
+          "type": "fontWeights"
+        },
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "checked": {
+        "font-weight": {
+          "value": "{lux.font-weight.bold}",
+          "type": "fontWeights"
+        }
+      },
+      "disabled": {
+        "color": {
+          "value": "{lux.color.foreground.subdued}",
+          "type": "color"
+        }
+      },
+      "radio": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.bold}",
+          "type": "fontWeights"
+        }
+      }
+    }
+  }
+}

proprietary/design-tokens/src/imported/nl/utrecht-pointer-target.json

@@ -0,0 +1,10 @@
+{
+  "utrecht": {
+    "pointer-target": {
+      "min-size": {
+        "value": "{lux.size.target}",
+        "type": "sizing"
+      }
+    }
+  }
+}