♻️ [open-formulieren/open-forms-sdk#36] Update design tokens

Add new, update existing and remove obsolete design tokens related to the
progress indicator styling. This includes some bigger changes to the app
component as well.

src/components/app.tokens.json

@@ -6,17 +6,34 @@
           "groupDescription": "The outer SDK form 'app' wrapper."
         }
       },
+      "body": {
+        "padding-block-end": {"value": "0"},
+        "padding-block-start": {"value": "0"},
+        "mobile": {
+          "padding-block-end": {"value": "0"},
+          "padding-block-start": {"value": "15px"}
+        }
+      },
 
-      "gap": {"value": "0"},
+      "grid-column-gap": {"value": "20px"},
 
       "mobile": {
+        "grid-row-gap": {"value": "0"},
         "padding-block-end": {"value": "15px"},
         "padding-block-start": {
           "value": "0",
           "comment": "Allow room for the progress indicator"
         },
         "padding-inline-end": {"value": "15px"},
         "padding-inline-start": {"value": "15px"}
+      },
+
+      "progress-indicator": {
+        "mobile": {
+          "inset-block-start": {"value": "0"},
+          "margin-inline-end": {"value": "calc(-1 * {of.app.mobile.padding-inline-end})"},
+          "margin-inline-start": {"value": "calc(-1 * {of.app.mobile.padding-inline-start})"}
+        }
       }
     }
   }

src/components/card.tokens.json

@@ -0,0 +1,11 @@
+{
+  "of": {
+    "card": {
+      "background-color": {"value": "{of.color.bg}"},
+      "padding-block-end": {"value": "40px"},
+      "padding-block-start": {"value": "40px"},
+      "padding-inline-end": {"value": "40px"},
+      "padding-inline-start": {"value": "40px"}
+    }
+  }
+}

src/components/language-selection.tokens.json

@@ -1,7 +1,17 @@
 {
   "of": {
     "language-selection": {
-      "gap": {"value": ".2em"}
+      "gap": {"value": ".2em"},
+
+      "in-app": {
+        "padding-block-end": {"value": "0"},
+        "padding-block-start": {"value": "0"},
+
+        "mobile": {
+          "padding-block-end": {"value": "0"},
+          "padding-block-start": {"value": "15px"}
+        }
+      }
     }
   }
 }

src/components/list.tokens.json

@@ -0,0 +1,15 @@
+{
+  "of": {
+    "list": {
+      "gap": {"value": "20px"},
+
+      "compact": {
+        "gap": {"value": "8px"}
+      },
+
+      "extra-compact": {
+        "gap": {"value": "0"}
+      }
+    }
+  }
+}