From bc52f670a085f44be6e0f2898ded82007d7a5de2 Mon Sep 17 00:00:00 2001
From: Jeffrey Lauwers <jeffreylauwers@gmail.com>
Date: Tue, 27 Aug 2024 09:36:34 +0200
Subject: [PATCH 1/2] feat: add metadata for radio-button

---
 components/radio-button/src/tokens.json | 352 +++++++++++++++---------
 1 file changed, 223 insertions(+), 129 deletions(-)

diff --git a/components/radio-button/src/tokens.json b/components/radio-button/src/tokens.json
index 154a07c0a8f..56f687d2c5f 100644
--- a/components/radio-button/src/tokens.json
+++ b/components/radio-button/src/tokens.json
@@ -6,40 +6,60 @@
           "nl.nldesignsystem.css.property": {
             "syntax": "<color>",
             "inherits": true
-          }
-        }
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
       },
       "border-color": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<color>",
             "inherits": true
-          }
-        }
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
       },
       "border-width": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<length>",
             "inherits": true
-          }
-        }
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "borderWidth"
       },
       "size": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<percentage>",
             "inherits": true
-          }
-        }
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "sizing"
       },
       "margin-block-start": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<length>",
             "inherits": true
-          }
-        }
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "margin-inline-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
       },
       "icon": {
         "size": {
@@ -47,37 +67,45 @@
             "nl.nldesignsystem.css.property": {
               "syntax": "<length>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "sizing"
         }
       },
       "active": {
-        "border-color": {
+        "background-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "border-width": {
+        "border-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
+              "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "background-color": {
+        "border-width": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
+              "syntax": "<length>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "borderWidth"
         },
         "color": {
           "$extensions": {
@@ -85,104 +113,128 @@
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"],
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
         }
       },
       "checked": {
-        "border-color": {
+        "background-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "border-width": {
+        "border-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
+              "syntax": "<color>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "background-color": {
+        "border-width": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
+              "syntax": "<length>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "borderWidth"
         },
         "color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
         "active": {
-          "border-color": {
+          "background-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
                 "syntax": "<color>",
                 "inherits": true
-              }
-            }
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           },
-          "border-width": {
+          "border-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<length>",
+                "syntax": "<color>",
                 "inherits": true
-              }
-            }
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           },
-          "background-color": {
+          "border-width": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<color>",
+                "syntax": "<length>",
                 "inherits": true
-              }
-            }
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "borderWidth"
           },
           "color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
                 "syntax": "<color>",
                 "inherits": true
-              }
-            }
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           }
         },
         "hover": {
-          "border-color": {
+          "background-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
                 "syntax": "<color>",
                 "inherits": true
               },
-              "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"]
-            }
+              "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"],
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           },
-          "border-width": {
+          "border-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<length>",
+                "syntax": "<color>",
                 "inherits": true
               },
-              "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"]
-            }
+              "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"],
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           },
-          "background-color": {
+          "border-width": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<color>",
+                "syntax": "<length>",
                 "inherits": true
               },
-              "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"]
-            }
+              "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"],
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "borderWidth"
           },
           "color": {
             "$extensions": {
@@ -190,37 +242,45 @@
                 "syntax": "<color>",
                 "inherits": true
               },
-              "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"]
-            }
+              "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"],
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           }
         },
         "focus": {
-          "border-color": {
+          "background-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
                 "syntax": "<color>",
                 "inherits": true
               },
-              "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"]
-            }
+              "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"],
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           },
-          "border-width": {
+          "border-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<length>",
+                "syntax": "<color>",
                 "inherits": true
               },
-              "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"]
-            }
+              "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"],
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           },
-          "background-color": {
+          "border-width": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<color>",
+                "syntax": "<length>",
                 "inherits": true
               },
-              "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"]
-            }
+              "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"],
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "borderWidth"
           },
           "color": {
             "$extensions": {
@@ -228,38 +288,46 @@
                 "syntax": "<color>",
                 "inherits": true
               },
-              "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"]
-            }
+              "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"],
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
           }
         }
       },
       "hover": {
-        "border-color": {
+        "background-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "border-width": {
+        "border-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
+              "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "background-color": {
+        "border-width": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
+              "syntax": "<length>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "borderWidth"
         },
         "color": {
           "$extensions": {
@@ -267,37 +335,45 @@
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"],
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
         }
       },
       "focus": {
-        "border-color": {
+        "background-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "border-width": {
+        "border-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
+              "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "background-color": {
+        "border-width": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
+              "syntax": "<length>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "borderWidth"
         },
         "color": {
           "$extensions": {
@@ -305,37 +381,45 @@
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"],
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
         }
       },
       "disabled": {
-        "border-color": {
+        "background-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "border-width": {
+        "border-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
+              "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "background-color": {
+        "border-width": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
+              "syntax": "<length>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.background-color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "borderWidth"
         },
         "color": {
           "$extensions": {
@@ -343,36 +427,44 @@
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"],
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
         }
       },
       "invalid": {
-        "border-color": {
+        "background-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"]
-          }
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "border-width": {
+        "border-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
+              "syntax": "<color>",
               "inherits": true
             },
-            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"]
-          }
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-color"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
         },
-        "background-color": {
+        "border-width": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
+              "syntax": "<length>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.fallback": ["utrecht.radio-button.border-width"],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "borderWidth"
         },
         "color": {
           "$extensions": {
@@ -381,8 +473,10 @@
               "inherits": true
             },
             "nl.nldesignsystem.fallback": ["utrecht.radio-button.color"]
-          }
-        }
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
       }
     }
   }

From f65e72b565d34b467575f6d5757f9452c9ea9be2 Mon Sep 17 00:00:00 2001
From: Jeffrey Lauwers <jeffreylauwers@gmail.com>
Date: Tue, 27 Aug 2024 09:40:40 +0200
Subject: [PATCH 2/2] docs: add changeset

---
 .changeset/stir-lake-route.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/stir-lake-route.md

diff --git a/.changeset/stir-lake-route.md b/.changeset/stir-lake-route.md
new file mode 100644
index 00000000000..371415a6d90
--- /dev/null
+++ b/.changeset/stir-lake-route.md
@@ -0,0 +1,7 @@
+---
+"@utrecht/radio-button-css": minor
+---
+
+- Added metadata for radio-button tokens.
+- Added `margin-inline-end` token that was available in mixin.
+- Reordered some tokens in json for better scanning of tokens.