From 81467e1e69f38b6ef53655e45ecf779fdc5bedb9 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 23 Nov 2023 18:14:15 +0100
Subject: [PATCH] :recycle: [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                | 19 ++++++++-
 src/components/card.tokens.json               | 11 +++++
 src/components/form.tokens.json               | 20 ---------
 src/components/language-selection.tokens.json | 12 +++++-
 src/components/list.tokens.json               | 15 +++++++
 .../progress-indicator.mobile.tokens.json     | 10 -----
 src/components/progress-indicator.tokens.json | 41 +++++++++++++++++--
 7 files changed, 93 insertions(+), 35 deletions(-)
 create mode 100644 src/components/card.tokens.json
 delete mode 100644 src/components/form.tokens.json
 create mode 100644 src/components/list.tokens.json
 delete mode 100644 src/components/progress-indicator.mobile.tokens.json

diff --git a/src/components/app.tokens.json b/src/components/app.tokens.json
index 12ea00c..b5012fa 100644
--- a/src/components/app.tokens.json
+++ b/src/components/app.tokens.json
@@ -6,10 +6,19 @@
           "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",
@@ -17,6 +26,14 @@
         },
         "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})"}
+        }
       }
     }
   }
diff --git a/src/components/card.tokens.json b/src/components/card.tokens.json
new file mode 100644
index 0000000..62566d9
--- /dev/null
+++ b/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"}
+    }
+  }
+}
diff --git a/src/components/form.tokens.json b/src/components/form.tokens.json
deleted file mode 100644
index 4e771ba..0000000
--- a/src/components/form.tokens.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "of": {
-    "form": {
-      "$extensions": {
-        "dte.metadata": {
-          "groupDescription": "Layout configuration for main content."
-        }
-      },
-
-      "grid-column-gap": {"value": "20px"},
-
-      "progress-indicator": {
-        "mobile": {
-          "margin-inline-end": {"value": "calc(-1 * {of.app.mobile.padding-inline-end})"},
-          "margin-inline-start": {"value": "calc(-1 * {of.app.mobile.padding-inline-start})"}
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/language-selection.tokens.json b/src/components/language-selection.tokens.json
index 21deae0..9c2f3dd 100644
--- a/src/components/language-selection.tokens.json
+++ b/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"}
+        }
+      }
     }
   }
 }
diff --git a/src/components/list.tokens.json b/src/components/list.tokens.json
new file mode 100644
index 0000000..52707e2
--- /dev/null
+++ b/src/components/list.tokens.json
@@ -0,0 +1,15 @@
+{
+  "of": {
+    "list": {
+      "gap": {"value": "20px"},
+
+      "compact": {
+        "gap": {"value": "8px"}
+      },
+
+      "extra-compact": {
+        "gap": {"value": "0"}
+      }
+    }
+  }
+}
diff --git a/src/components/progress-indicator.mobile.tokens.json b/src/components/progress-indicator.mobile.tokens.json
deleted file mode 100644
index f792cc2..0000000
--- a/src/components/progress-indicator.mobile.tokens.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "of": {
-    "progress-indicator": {
-      "mobile": {
-        "box-shadow": {"value": "0px 0px 2px 0px rgba(0, 0, 0, 0.2)"},
-        "margin": {"value": "15px"}
-      }
-    }
-  }
-}
diff --git a/src/components/progress-indicator.tokens.json b/src/components/progress-indicator.tokens.json
index 30a5638..c50761a 100644
--- a/src/components/progress-indicator.tokens.json
+++ b/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"}
     }
   }
 }