Merge pull request #42 from open-formulieren/refactor/3178-tokens-for…

…-backend-styles Set up tokens for layout/container styles
open-formulieren · Nov 10, 2023 · b3de0a9 · b3de0a9
2 parents b8ce485 + 9ce92f2
commit b3de0a9
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 3 deletions.
diff --git a/src/community/utrecht/page-content.tokens.json b/src/community/utrecht/page-content.tokens.json
@@ -0,0 +1,21 @@
+{
+  "utrecht": {
+    "page-content": {
+      "padding-block-end": {"value": "20px"},
+      "padding-block-start": {"value": "20px"}
+    }
+  },
+  "of": {
+    "utrecht-page-content": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "Open Forms' extensions on the utrecht-page-content, for responsive styling."
+        }
+      },
+      "mobile": {
+        "padding-block-end": {"value": "0"},
+        "padding-block-start": {"value": "0"}
+      }
+    }
+  }
+}
diff --git a/src/community/utrecht/page-footer.tokens.json b/src/community/utrecht/page-footer.tokens.json
@@ -0,0 +1,56 @@
+{
+  "utrecht": {
+    "page-footer": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "Default Open Forms footer styling."
+        }
+      },
+
+      "color": {"value": "{of.color.bg}"},
+      "background-color": {"value": "{of.color.primary}"},
+      "background-image": {},
+      "padding-inline-end": {"value": "20px"},
+      "padding-inline-start": {"value": "20px"},
+      "padding-block-end": {"value": "20px"},
+      "padding-block-start": {"value": "20px"}
+    }
+  },
+  "of": {
+    "utrecht-page-footer": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "Open Forms' extensions on the utrecht-page-footer, for responsive styling."
+        }
+      },
+
+      "max-inline-size": {"value": "100%"},
+
+      "mobile": {
+        "padding-block-end": {"value": "10px"},
+        "padding-block-start": {"value": "10px"},
+        "padding-inline-end": {"value": "15px"},
+        "padding-inline-start": {"value": "15px"}
+      },
+      "tablet": {
+        "padding-block-end": {"value": "10px"},
+        "padding-block-start": {"value": "10px"},
+        "padding-inline-end": {"value": "15px"},
+        "padding-inline-start": {"value": "15px"}
+      },
+      "laptop": {
+        "padding-block-end": {"value": "20px"},
+        "padding-block-start": {"value": "20px"},
+        "padding-inline-end": {"value": "20px"},
+        "padding-inline-start": {"value": "20px"}
+      },
+      "desktop": {
+        "padding-block-end": {"value": "20px"},
+        "padding-block-start": {"value": "20px"},
+        "padding-inline-end": {"value": "20px"},
+        "padding-inline-start": {"value": "20px"},
+        "max-inline-size": {"value": "1200px"}
+      }
+    }
+  }
+}
diff --git a/src/community/utrecht/page-header.tokens.json b/src/community/utrecht/page-header.tokens.json
@@ -0,0 +1,53 @@
+{
+  "utrecht": {
+    "page-header": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "Default Open Forms header styling."
+        }
+      },
+
+      "background-color": {"value": "#ffffff"},
+      "color": {"value": "{of.color.fg}"},
+      "padding-inline-end": {"value": "20px"},
+      "padding-inline-start": {"value": "20px"},
+      "padding-block-end": {"value": "20px"},
+      "padding-block-start": {"value": "20px"}
+    }
+  },
+
+  "of": {
+    "utrecht-page-header": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "Open Forms' extensions on the utrecht-page-header, for responsive styling."
+        }
+      },
+
+      "mobile": {
+        "padding-block-end": {"value": "10px"},
+        "padding-block-start": {"value": "10px"},
+        "padding-inline-end": {"value": "15px"},
+        "padding-inline-start": {"value": "10px"}
+      },
+      "tablet": {
+        "padding-block-end": {"value": "20px"},
+        "padding-block-start": {"value": "20px"},
+        "padding-inline-end": {"value": "20px"},
+        "padding-inline-start": {"value": "20px"}
+      },
+      "laptop": {
+        "padding-block-end": {"value": "20px"},
+        "padding-block-start": {"value": "20px"},
+        "padding-inline-end": {"value": "20px"},
+        "padding-inline-start": {"value": "20px"}
+      },
+      "desktop": {
+        "padding-block-end": {"value": "20px"},
+        "padding-block-start": {"value": "20px"},
+        "padding-inline-end": {"value": "20px"},
+        "padding-inline-start": {"value": "20px"}
+      }
+    }
+  }
+}
diff --git a/src/community/utrecht/page.tokens.json b/src/community/utrecht/page.tokens.json
@@ -0,0 +1,21 @@
+{
+  "utrecht": {
+    "page": {
+      "padding-inline-end": {"value": "20px"},
+      "padding-inline-start": {"value": "20px"}
+    }
+  },
+  "of": {
+    "utrecht-page": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "Open Forms' extensions on the utrecht-page, for responsive styling."
+        }
+      },
+      "mobile": {
+        "padding-inline-end": {"value": "0"},
+        "padding-inline-start": {"value": "0"}
+      }
+    }
+  }
+}
diff --git a/src/components/app.tokens.json b/src/components/app.tokens.json
@@ -0,0 +1,23 @@
+{
+  "of": {
+    "app": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "The outer SDK form 'app' wrapper."
+        }
+      },
+
+      "gap": {"value": "0"},
+
+      "mobile": {
+        "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"}
+      }
+    }
+  }
+}
diff --git a/src/components/form.tokens.json b/src/components/form.tokens.json
@@ -0,0 +1,20 @@
+{
+  "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/page-footer/tokens.json b/src/components/page-footer/tokens.json
@@ -1,6 +1,11 @@
 {
   "of": {
     "page-footer": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "DEPRECATED - use utrecht-page-footer tokens instead."
+        }
+      },
       "bg": {"value": "{of.color.primary}"},
       "fg": {"value": "{of.color.bg}"}
     }

diff --git a/src/components/page-header/tokens.json b/src/components/page-header/tokens.json
@@ -1,6 +1,12 @@
 {
   "of": {
     "page-header": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "Color/spacing tokens are DEPRECATED - use utrecht-page-header tokens instead."
+        }
+      },
+
       "bg": {"value": "#ffffff"},
       "mobile": {
         "padding": {"value": "10px 15px 10px 10px"}
@@ -14,12 +20,32 @@
       "desktop": {
         "padding": {"value": "{of.text.desktop.margin}"}
       },
+
       "logo-return-url": {
-        "min-height": {"value": "50px"},
-        "min-width": {"value": "100px"},
+        "$extensions": {
+          "dte.metadata": {
+            "groupDescription": "Open Forms extension for logo in the header."
+          }
+        },
+
+        "min-height": {
+          "value": "50px",
+          "comment": "DEPRECATED - use min-block-size instead."
+        },
+        "min-width": {
+          "value": "100px",
+          "comment": "DEPRECATED - use min-inline-size instead."
+        },
+
+        "min-block-size": {"value": "{of.page-header.logo-return-url.min-height}"},
+        "min-inline-size": {"value": "{of.page-header.logo-return-url.min-width}"},
+
         "mobile": {
           "min-height": {"value": "25px"},
-          "min-width": {"value": "50px"}
+          "min-width": {"value": "50px"},
+
+          "min-block-size": {"value": "{of.page-header.logo-return-url.mobile.min-height}"},
+          "min-inline-size": {"value": "{of.page-header.logo-return-url.mobile.min-width}"}
         }
       }
     }