fix: use appropriate design tokens for utility classes

src/app/[locale]/components/FormProgress.tsx

@@ -47,12 +47,12 @@ const FormProgress = ({ children }: FormProgressProps) => {
 
         <div className="flex flex-col gap-3 pb-2">
           {children}
-          <div className="overflow-hidden w-full background-gray-200">
+          <div className="overflow-hidden w-full disabled-fill-1">
             <div
               style={{
                 width: `${percentage}%`,
               }}
-              className="h-2 background-primary"
+              className="h-2 primary-fill-1"
             />
           </div>
         </div>

src/app/[locale]/incident/add/components/FeatureListItem.tsx

@@ -86,7 +86,7 @@ export const FeatureListItem = ({
 
   // TODO: iets van een label toevoegen zodat voor een SR duidelijk wordt om welke lantaarnpaal, adres etc het gaat?
   return featureDescription ? (
-    <li className="py-4 border-t bordercolor-gray-200">
+    <li className="py-4 border-t disabled-border-1">
       <FormField
         className="flex flex-row items-center gap-2"
         onFocus={(e) => {

src/app/globals.css

@@ -158,20 +158,16 @@
 }
 
 /* colors */
-.background-gray-200 {
-  background-color: var(--basis-color-gray-200);
+.disabled-fill-1 {
+  background-color: var(--basis-color-disabled-fill-1);
 }
 
-.background-primary {
+.primary-fill-1 {
   background-color: var(--basis-color-primary-fill-1);
 }
 
-.background-white {
-  background-color: var(--basis-color-white);
-}
-
-.bordercolor-gray-200 {
-  border-color: var(--basis-color-gray-200);
+.disabled-border-1 {
+  border-color: var(--basis-color-disabled-fill-1);
 }
 
 /* spinner */

src/components/ui/Divider.tsx

@@ -1,3 +1,3 @@
 export const Divider = () => {
-  return <div className="border-t-2 bordercolor-gray-200"></div>
+  return <div className="border-t-2 disabled-border-1"></div>
 }