Merge pull request #45 from open-formulieren/refactor/app-layout-and-…

…progress-indicator

Update design tokens for app/progress indicator

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"}
+      }
+    }
+  }
+}

src/components/progress-indicator.tokens.json

@@ -1,9 +1,44 @@
 {
   "of": {
     "progress-indicator": {
-      "sticky": {
-        "spacing": {"value": "20px"}
-      }
+      "background-color": {"value": "{of.color.bg}"},
+      "inset-block-start": {"value": "{of.app.grid-column-gap}"},
+      "mobile": {
+        "box-shadow": {"value": "0px 0px 2px 0px rgba(0, 0, 0, 0.2)"},
+        "padding-block-end": {"value": "15px"},
+        "padding-block-start": {"value": "15px"},
+        "padding-inline-end": {"value": "15px"},
+        "padding-inline-start": {"value": "15px"}
+      },
+      "mobile-header": {
+        "color": {"value": "inherit"},
+        "font-family": {"value": "{of.typography.sans-serif.font-family}"},
+        "font-size": {"value": "1.125rem"},
+        "gap": {"value": "0px"},
+        "icon": {
+          "flex-basis": {"value": "30px"}
+        },
+        "line-height": {"value": "1.1333"}
+      },
+      "nav": {
+        "gap": {
+          "comment": "Spacing between title and link list.",
+          "value": "20px"
+        },
+        "mobile": {
+          "list": {
+            "gap": {"value": "15px"}
+          },
+          "padding-block-end": {"value": "15px"},
+          "padding-block-start": {"value": "15px"},
+          "padding-inline-end": {"value": "15px"},
+          "padding-inline-start": {"value": "15px"}
+        }
+      },
+      "padding-block-end": {"value": "40px"},
+      "padding-block-start": {"value": "40px"},
+      "padding-inline-end": {"value": "40px"},
+      "padding-inline-start": {"value": "40px"}
     }
   }
 }