feat: add color sample tokens (#916)

**Pull Request Color Sample**

<img width="550" alt="Screenshot 2025-01-07 at 14 50 51"
src="https://github.com/user-attachments/assets/95061753-1bce-4d1f-9e3a-2f8eed34f04c"
/>

In deze PR heb ik `color-sample` tokens toegevoegd aan de Theme Builder
in het Purmerend-thema.

- [x]  `color-sample-default`
- [x] `color-sample-dark`
- [x] `color-sample-light`

 
Hoe bepaal ik welke tokens ik moet gebruiken voor elke
color-sample-variant? In de
[documentatie](https://nl-design-system.github.io/utrecht/storybook-css/?path=/docs/css-color-sample--docs)
van Utrecht vind je onderaan de pagina een overzicht van alle gebruikte
tokens voor een specifieke component, inclusief de verschillende staten
van die component. Dit maakt het gemakkelijk om de juiste tokens te
identificeren.

Co-authored-by: Marwa <[email protected]>

packages/theme-toolkit/src/component-stories-utrecht.tsx

@@ -2216,7 +2216,30 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
     name: 'Utrecht Color Sample',
     render: () => <ColorSample color="#007DAD" />,
     detectTokens: {
-      anyOf: ['utrecht.color-sample.border-color'],
+      anyOf: [
+        'utrecht.color-sample.background-color',
+        'utrecht.color-sample.border-color',
+        'utrecht.color-sample.border-width',
+        'utrecht.color-sample.border-radius',
+        'utrecht.color-sample.block-size',
+        'utrecht.color-sample.inline-size',
+      ],
+    },
+  },
+  {
+    storyId: 'react-utrecht-color-sample-dark',
+    name: 'Utrecht Color Sample Dark',
+    render: () => <ColorSample color="#007DAD" />,
+    detectTokens: {
+      anyOf: ['utrecht.color-sample.dark.border-color'],
+    },
+  },
+  {
+    storyId: 'react-utrecht-color-sample-light',
+    name: 'Utrecht Color Sample Light',
+    render: () => <ColorSample color="#007DAD" />,
+    detectTokens: {
+      anyOf: ['utrecht.color-sample.light.border-color'],
     },
   },
   // {