[#3576] Add home-plugin tokens + fix layouts

Author: jiromaykin

src/brand/openinwoner/layout.tokens.json

@@ -2,6 +2,15 @@
   "oip": {
     "layout": {
       "bg": {"value": "#FFFFFF"}
+    },
+    "spacing": {
+      "tiny": {"value": "2px"},
+      "small": {"value": "4px"},
+      "medium": {"value": "8px"},
+      "large": {"value": "16px"},
+      "extraLarge": {"value": "24px"},
+      "giant": {"value": "32px"},
+      "mega": {"value": "80px"}
     }
   }
 }

src/community/utrecht/form-label.tokens.json

@@ -0,0 +1,9 @@
+{
+  "utrecht": {
+    "form-label": {
+      "color": {"value": "{oip.color.fg}"},
+      "font-weight": {"value": "normal"},
+      "font-size": {"value": "16px"}
+    }
+  }
+}

src/community/utrecht/typography.tokens.json

@@ -9,6 +9,10 @@
         "value": "16px",
         "comment": "The body font-size for the theme."
       },
+      "font-weight": {
+        "value": "normal",
+        "comment": "The body font-weight for the theme."
+      },
       "color": {
         "value": "#4b4b4b"
       },

src/components/external-link-plugin.tokens.json

@@ -1,16 +1,17 @@
 {
   "oip": {
     "external-link": {
-      "background-color": {"value": "transparent"},
+      "background-color": {"value": "#ffffff"},
       "color": {"value": "#000000"},
-      "border-color": {"value": "{oip.color.border}"},
+      "border-color": {"value": "transparent"},
       "border-radius": {"value": "3px"},
       "border-style": {"value": "solid"},
       "border-width": {"value": "1px"},
       "box-shadow": {"value": "none"},
       "display": {"value": "flex"},
       "flex-direction": {"value": "row"},
       "font-family": {"value": "{oip.typography.sans-serif.font-family}"},
+      "font-weight": {"value": "bold"},
       "align-items": {"value": "center"},
       "row-gap": {"value": "8px"},
       "column-gap": {"value": "32px"},

src/components/plugin-card.tokens.json

@@ -0,0 +1,52 @@
+{
+  "oip": {
+    "plugin-card": {
+      "background-color": {"value": "#fff"},
+      "color": {"value": "#333"},
+      "max-inline-size": {"value": "100%"},
+      "border-color": {"value": "{oip.color.border}"},
+      "border-style": {"value": "solid"},
+      "border-width": {"value": "1px"},
+      "border-radius": {"value": "3px"},
+      "box-shadow": {"value": "none"},
+      "display": {"value": "flex"},
+      "inline-size": {"value": "100%"},
+      "row-gap": {"value": "24px"},
+      "heading": {
+        "color": {"value": "{oip.color.fg-heading}"},
+        "padding-inline-start": {"value": "16px"},
+        "padding-inline-end": {"value": "16px"}
+      },
+      "link": {
+        "display": {"value": "flex"},
+        "padding": {"value": "0"}
+      },
+      "link-hover": {
+        "text-decoration-thickness": {"value": "1px"},
+        "text-decoration-line": {"value": "underline"},
+        "text-underline-offset": {"value": "auto"}
+      },
+      "content": {
+        "gap": {"value": "24px"},
+        "padding-block-start": {"value": "16px"},
+        "padding-block-end": {"value": "16px"}
+      },
+      "body": {
+        "display": {"value": "flex"},
+        "padding-inline-start": {"value": "16px"},
+        "padding-inline-end": {"value": "16px"}
+      },
+      "list": {
+        "display": {"value": "grid"},
+        "grid-template-columns": {"value": "repeat(1, 1fr)"},
+        "grid-template-columns-desktop": {"value": "repeat(2, 1fr)"},
+        "list-style-type": {"value": "none"},
+        "margin-block-start": {"value": "0"},
+        "margin-block-end": {"value": "0"},
+        "padding-inline-start": {"value": "0"},
+        "grid-row-gap": {"value": "8px"},
+        "grid-column-gap": {"value": "32px"}
+      }
+    }
+  }
+}

src/components/plugin-grid.tokens.json

@@ -0,0 +1,122 @@
+{
+  "oip": {
+    "plugin": {
+      "header": {
+        "margin-block-start": {
+          "value": "0"
+        },
+        "margin-block-end": {
+          "value": "8px"
+        },
+        "margin-inline-start": {
+          "value": "0"
+        },
+        "margin-inline-end": {
+          "value": "0"
+        },
+        "display": {
+          "value": "flex"
+        },
+        "font-family": {
+          "value": "{oip.typography.heading.font-family}"
+        },
+        "align-items": {
+          "value": "center"
+        },
+        "justify-content": {
+          "value": "space-between"
+        },
+        "flex-direction-mobile": {
+          "value": "column"
+        },
+        "align-items-mobile": {
+          "value": "flex-start"
+        },
+        "word-break-mobile": {
+          "value": "normal"
+        },
+        "overflow-wrap-mobile": {
+          "value": "break-word"
+        },
+        "indicator": {
+          "display": {
+            "value": "flex"
+          },
+          "flex-direction": {
+            "value": "row"
+          },
+          "notification-indicator-color": {
+            "value": "{oip.color.red-notification}"
+          },
+          "notification-indicator-font-size": {
+            "value": "12px"
+          },
+          "notification-indicator-vertical-align": {
+            "value": "super"
+          },
+          "display-inline": {
+            "value": "inline-block"
+          },
+          "justify-content": {
+            "value": "flex-start"
+          },
+          "overflow": {
+            "value": "visible"
+          },
+          "position": {
+            "value": "relative"
+          }
+        },
+        "heading": {
+          "color": {
+            "value": "{oip.color.fg-heading}"
+          },
+          "font-family": {
+            "value": "{oip.typography.heading.font-family}"
+          },
+          "margin-block-start": {
+            "value": "0"
+          },
+          "margin-block-end": {
+            "value": "0"
+          },
+          "margin-inline-start": {
+            "value": "0"
+          },
+          "margin-inline-end": {
+            "value": "0"
+          }
+        }
+      },
+      "grid": {
+        "display": {
+          "value": "grid"
+        },
+        "template-columns-mobile": {
+          "value": "repeat(1, 1fr)"
+        },
+        "template-columns-desktop": {
+          "value": "repeat(2, 1fr)"
+        },
+        "list-style-type": {
+          "value": "none"
+        },
+        "margin-block-start": {
+          "value": "0"
+        },
+        "margin-block-end": {
+          "value": "0"
+        },
+        "padding-inline-start": {
+          "value": "0"
+        },
+        "row-gap": {
+          "value": "8px"
+        },
+        "column-gap": {
+          "value": "8px"
+        }
+      }
+    }
+  }
+}