@rijkshuisstijl-community/design-tokens 1.0.0-alpha.3 → 1.0.0-alpha.8

package/src/components/rvo/select.tokens.json

@@ -0,0 +1,15 @@
+{
+  "rvo": {
+    "select": {
+      "icon": {
+        "background-color": { "value": "{basiselementen.color.hemelblauw}" },
+        "color": { "value": "{basiselementen.color.wit}" }
+      },
+      "outline-offset": { "value": "0" },
+      "padding-block-end": { "value": "9px" },
+      "padding-block-start": { "value": "10px" },
+      "padding-inline-end": { "value": "50px" },
+      "padding-inline-start": { "value": "18px" }
+    }
+  }
+}

package/src/components/utrecht/breadcrumbs.tokens.json

@@ -0,0 +1,66 @@
+{
+  "utrecht": {
+    "breadcrumb": {
+      "block-size": {},
+      "font-family": {},
+      "font-size": {
+        "value": "0.875rem"
+      },
+      "text-transform": {},
+      "divider": {
+        "inline-size": {}
+      },
+      "item": {
+        "gap": {
+          "value": "8px"
+        },
+        "padding-block-start": {
+          "value": "0"
+        },
+        "padding-block-end": {
+          "value": "0"
+        },
+        "padding-inline-end": {
+          "value": "0"
+        },
+        "padding-inline-start": {
+          "value": "0"
+        }
+      },
+      "link": {
+        "background-color": {},
+        "color": {
+          "value": "{basiselementen.color.hemelblauw}"
+        },
+        "focus": {
+          "background-color": {
+            "value": "{basiselementen.color.hemelblauw-tint2}"
+          },
+          "color": {
+            "value": "{basiselementen.color.zwart}"
+          },
+          "text-decoration": {
+            "value": "none"
+          },
+          "text-decoration-thickness": {
+            "value": "1px"
+          }
+        },
+        "hover": {
+          "color": {
+            "value": "{basiselementen.color.donkerblauw}"
+          },
+          "text-decoration": {
+            "value": "underline"
+          },
+          "text-decoration-thickness": {
+            "value": "1px !important"
+          }
+        },
+        "text-decoration": {
+          "value": "none"
+        }
+      }
+    }
+  }
+}

package/src/components/utrecht/button.tokens.json

@@ -0,0 +1,120 @@
+{
+  "utrecht": {
+    "button": {
+      "$comment": "https://www.rijkshuisstijl.nl/basiselementen/basiselementen-online/online-componenten/buttons",
+      "background-color": { "value": "{basiselementen.color.donkerblauw}" },
+      "border-bottom-color": {},
+      "border-bottom-width": {},
+      "border-color": {},
+      "border-radius": {},
+      "border-width": { "value": "0" },
+      "color": { "value": "{basiselementen.color.wit}" },
+      "font-size": { "value": "18px" },
+      "font-weight": {},
+      "inline-size": {},
+      "letter-spacing": {},
+      "line-height": {},
+      "margin-block-end": {},
+      "margin-block-start": {},
+      "margin-inline-end": {},
+      "margin-inline-start": {},
+      "min-block-size": {},
+      "min-inline-size": {},
+      "padding-block-start": { "value": "8px" },
+      "padding-block-end": { "value": "8px" },
+      "padding-inline-start": { "value": "16px" },
+      "padding-inline-end": { "value": "16px" },
+      "text-transform": {},
+      "disabled": {
+        "border-color": { "value": "{basiselementen.color.grijs2}" },
+        "background-color": { "value": "{basiselementen.color.grijs2}" },
+        "color": { "value": "{basiselementen.color.grijs3}" }
+      },
+      "primary-action": {
+        "background-color": {},
+        "border-color": {},
+        "border-width": {},
+        "color": {},
+        "active": {
+          "background-color": { "value": "{basiselementen.color.donkerblauw-shade1}" }
+        },
+        "focus": {
+          "background-color": { "value": "{basiselementen.color.donkerblauw}" }
+        },
+        "hover": {
+          "background-color": { "value": "{basiselementen.color.donkerblauw-shade1}" }
+        },
+        "disabled": {
+          "border-color": { "value": "{basiselementen.color.grijs2}" },
+          "background-color": { "value": "{basiselementen.color.grijs2}" },
+          "color": { "value": "{basiselementen.color.grijs3}" }
+        },
+
+        "warning": {
+          "background-color": { "value": "{basiselementen.color.rood}" },
+          "color": { "value": "{basiselementen.color.wit}" },
+          "active": {
+            "background-color": { "value": "{basiselementen.color.rood}" }
+          },
+          "focus": {
+            "background-color": { "value": "{basiselementen.color.rood}" }
+          },
+          "hover": {
+            "background-color": { "value": "{basiselementen.color.rood-shade1}" }
+          },
+          "disabled": {
+            "border-color": { "value": "{basiselementen.color.grijs2}" },
+            "background-color": { "value": "{basiselementen.color.grijs2}" },
+            "color": { "value": "{basiselementen.color.grijs3}" }
+          }
+        }
+      },
+      "secondary-action": {
+        "background-color": { "value": "{basiselementen.color.wit}" },
+        "border-color": { "value": "{basiselementen.color.donkerblauw}" },
+        "border-width": { "value": "1px" },
+        "color": { "value": "{basiselementen.color.donkerblauw}" },
+        "active": {
+          "background-color": { "value": "{basiselementen.color.donkerblauw-shade1}" },
+          "border-color": { "value": "{basiselementen.color.donkerblauw-shade1}" },
+          "color": { "value": "{basiselementen.color.wit}" }
+        },
+        "focus": {
+          "color": { "value": "{basiselementen.color.donkerblauw}" },
+          "border-color": {},
+          "border-width": {}
+        },
+        "disabled": {
+          "background-color": { "value": "{basiselementen.color.wit}" },
+          "border-color": { "value": "{basiselementen.color.grijs3}" },
+          "color": { "value": "{basiselementen.color.grijs3}" }
+        },
+        "hover": {
+          "color": { "value": "{basiselementen.color.donkerblauw-shade1}" },
+          "background-color": { "value": "{basiselementen.color.wit}" },
+          "border-color": { "value": "{basiselementen.color.donkerblauw-shade1}" }
+        }
+      },
+      "subtle": {
+        "background-color": { "value": "transparent" },
+        "color": { "value": "{basiselementen.color.rood}" },
+        "font-size": { "value": "15px" },
+        "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+        "hover": {
+          "text-decoration": { "value": "underline" }
+        },
+        "disabled": {
+          "border-color": {},
+          "background-color": { "value": "transparent" },
+          "color": { "value": "{basiselementen.color.grijs3}" }
+        },
+        "text-decoration": { "value": "underline" },
+        "warning": {
+          "hover": {
+            "color": { "value": "{basiselementen.color.rood-shade1}" }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/utrecht/custom-radio-button.tokens.json

@@ -0,0 +1,53 @@
+{
+  "utrecht": {
+    "custom-radio-button": {
+      "size": { "value": "24px" },
+      "border-color": { "value": "{basiselementen.color.zwart}" },
+      "color": { "value": "{basiselementen.color.zwart}" },
+      "border-width": { "value": "1px" },
+      "background-color": { "value": "{basiselementen.color.wit}" },
+      "border-radius": { "value": "0" },
+      "padding": {},
+      "icon": {
+        "size": { "value": "18px" }
+      },
+      "active": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": { "value": "{basiselementen.color.hemelblauw}" },
+        "color": {}
+      },
+      "focus": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": {}
+      },
+      "disabled": {
+        "border-color": { "value": "{basiselementen.color.grijs3}" },
+        "border-width": {},
+        "background-color": { "value": "{basiselementen.color.wit}" },
+        "color": {}
+      },
+      "checked": {
+        "border-color": { "value": "{basiselementen.color.hemelblauw}" },
+        "border-width": { "value": "3px" },
+        "background-color": { "value": "{basiselementen.color.hemelblauw}" },
+        "color": { "value": "{basiselementen.color.hemelblauw}" },
+        "active": {
+          "border-color": {},
+          "background-color": { "value": "{basiselementen.color.hemelblauw}" }
+        }
+      },
+      "invalid": {
+        "border-color": { "value": "{basiselementen.color.grijs3}" },
+        "border-width": {},
+        "background-color": {},
+        "color": {},
+        "active": {
+          "border-color": {},
+          "background-color": {}
+        }
+      }
+    }
+  }
+}

package/src/components/utrecht/data-list.tokens.json

@@ -0,0 +1,91 @@
+{
+  "utrecht": {
+    "data-list": {
+      "border-color": {
+        "value": "{basiselementen.color.grijs4}"
+      },
+      "border-width": {
+        "value": "1px"
+      },
+      "margin-block-end": {
+        "value": "0"
+      },
+      "margin-block-start": {
+        "value": "0"
+      },
+      "item-key": {
+        "border-inline-end-color": {
+          "value": "{basiselementen.color.grijs4}"
+        },
+        "border-inline-end-width": {
+          "value": "1px"
+        },
+        "color": {},
+        "font-size": {},
+        "font-weight": {
+          "value": "{basiselementen.font-weight.bold}"
+        },
+        "line-height": {},
+        "padding-block-end": {
+          "value": "9px"
+        },
+        "padding-block-start": {
+          "value": "9px"
+        },
+        "padding-inline-end": {
+          "value": "18px"
+        },
+        "padding-inline-start": {
+          "value": "18px"
+        }
+      },
+      "item-value": {
+        "color": {},
+        "font-size": {},
+        "line-height": {},
+        "padding-block-end": {
+          "value": "9px"
+        },
+        "padding-block-start": {
+          "value": "9px"
+        },
+        "padding-inline-end": {
+          "value": "18px"
+        },
+        "padding-inline-start": {
+          "value": "18px"
+        }
+      },
+      "rows": {
+        "border-bottom-color": {
+          "value": "{basiselementen.color.grijs4}"
+        },
+        "border-bottom-width": {
+          "value": "1px"
+        },
+        "item": {
+          "margin-block-start": {
+            "value": "0"
+          },
+          "padding-inline-start": {
+            "value": "14px"
+          }
+        },
+        "item-value": {
+          "margin-block-start": {
+            "value": "0"
+          }
+        },
+        "column": {
+          "inline-size": {
+            "value": "50%"
+          },
+          "min-inline-size": {
+            "value": "25ch"
+          }
+        },
+        "gap": {}
+      }
+    }
+  }
+}

package/src/components/utrecht/document.tokens.json

@@ -0,0 +1,12 @@
+{
+  "utrecht": {
+    "document": {
+      "background-color": { "value": "{basiselementen.color.wit}" },
+      "color": { "value": "{basiselementen.color.zwart}" },
+      "font-family": { "value": "{basiselementen.font.sans-serif.font-family}" },
+      "font-size": { "value": "{basiselementen.document.font-size}" },
+      "font-weight": {},
+      "line-height": { "value": "{basiselementen.document.line-height}" }
+    }
+  }
+}

package/src/components/utrecht/form-field.tokens.json

@@ -0,0 +1,21 @@
+{
+  "utrecht": {
+    "form-field": {
+      "description": {
+        "margin-block-start": { "value": "0" },
+        "margin-block-end": { "value": "1ex" }
+      },
+      "invalid": {
+        "border-inline-start-color": {},
+        "border-inline-start-width": {},
+        "padding-inline-start": {}
+      },
+      "label": {
+        "margin-block-end": {}
+      },
+      "margin-block-end": { "value": "1ex" },
+      "margin-block-start": { "value": "1ex" },
+      "min-width": { "value": "100%" }
+    }
+  }
+}

package/src/components/utrecht/form-fieldset.tokens.json

@@ -0,0 +1,27 @@
+{
+  "utrecht": {
+    "form-fieldset": {
+      "margin-block-end": { "value": "1ex" },
+      "margin-block-start": { "value": "1ex" },
+      "section": {
+        "background-color": { "value": "{basiselementen.color.wit}" },
+        "color": {}
+      },
+      "padding-block-end": { "value": "36px" },
+      "padding-block-start": { "value": "36px" },
+      "padding-inline-end": { "value": "36px" },
+      "padding-inline-start": { "value": "36px" },
+
+      "legend": {
+        "color": {},
+        "font-family": {},
+        "font-size": {},
+        "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+        "line-height": { "value": "150%" },
+        "margin-block-end": { "value": "1ex" },
+        "margin-block-start": { "value": "0" },
+        "text-transform": {}
+      }
+    }
+  }
+}

package/src/components/utrecht/form-input.tokens.json

@@ -0,0 +1,42 @@
+{
+  "utrecht": {
+    "form-input": {
+      "background-color": { "value": "{basiselementen.color.wit}" },
+      "border-color": { "value": "{basiselementen.color.grijs6}" },
+      "border-radius": { "value": "0" },
+      "border-width": { "value": "1px" },
+      "color": { "value": "{basiselementen.color.zwart}" },
+      "font-family": {},
+      "font-size": { "value": "18px" },
+      "font-style": {},
+      "max-inline-size": {},
+      "padding-block-end": { "value": "8px" },
+      "padding-block-start": { "value": "12px" },
+      "padding-inline-end": { "value": "12px" },
+      "padding-inline-start": { "value": "12px" },
+      "placeholder": {
+        "color": {}
+      },
+      "disabled": {
+        "background-color": { "value": "{basiselementen.color.grijs3} !important" },
+        "border-color": { "value": "{basiselementen.color.grijs7}" },
+        "border-width": { "value": "0" },
+        "color": { "value": "{basiselementen.color.grijs7}" }
+      },
+      "focus": {
+        "background-color": { "value": "{basiselementen.color.wit}" },
+        "border-color": { "value": "{basiselementen.color.grijs6}" },
+        "border-width": {}
+      },
+      "invalid": {
+        "background-color": { "value": "{basiselementen.color.wit}" },
+        "border-color": { "value": "{basiselementen.color.rood}" },
+        "border-width": { "value": "1px" }
+      },
+      "read-only": {
+        "border-color": { "value": "{basiselementen.color.grijs7}" },
+        "color": { "value": "{basiselementen.color.grijs7}" }
+      }
+    }
+  }
+}

package/src/components/utrecht/form-label.tokens.json

@@ -0,0 +1,23 @@
+{
+  "utrecht": {
+    "form-label": {
+      "color": {},
+      "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+      "font-size": { "value": "18px" },
+      "checkbox": {
+        "color": {},
+        "font-weight": {}
+      },
+      "checked": {
+        "font-weight": {}
+      },
+      "disabled": {
+        "color": {}
+      },
+      "radio": {
+        "color": {},
+        "font-weight": {}
+      }
+    }
+  }
+}

package/src/components/utrecht/heading-1.tokens.json

@@ -0,0 +1,13 @@
+{
+  "utrecht": {
+    "heading-1": {
+      "color": {},
+      "font-family": {},
+      "font-size": { "value": "2rem" },
+      "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+      "line-height": { "value": "125%" },
+      "margin-block-end": { "value": "16px" },
+      "margin-block-start": { "value": "16px" }
+    }
+  }
+}

package/src/components/utrecht/heading-2.tokens.json

@@ -0,0 +1,13 @@
+{
+  "utrecht": {
+    "heading-2": {
+      "color": {},
+      "font-family": {},
+      "font-size": { "value": "1.5rem" },
+      "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+      "line-height": { "value": "150%" },
+      "margin-block-end": { "value": "4px" },
+      "margin-block-start": {}
+    }
+  }
+}

package/src/components/utrecht/heading-3.tokens.json

@@ -0,0 +1,13 @@
+{
+  "utrecht": {
+    "heading-3": {
+      "color": {},
+      "font-family": {},
+      "font-size": { "value": "1.25rem" },
+      "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+      "line-height": { "value": "125%" },
+      "margin-block-end": { "value": "4px" },
+      "margin-block-start": {}
+    }
+  }
+}

package/src/components/utrecht/heading-4.tokens.json

@@ -0,0 +1,13 @@
+{
+  "utrecht": {
+    "heading-4": {
+      "color": {},
+      "font-family": {},
+      "font-size": { "value": "1.125rem" },
+      "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+      "line-height": {},
+      "margin-block-end": { "value": "4px" },
+      "margin-block-start": {}
+    }
+  }
+}

package/src/components/utrecht/heading-5.tokens.json

@@ -0,0 +1,13 @@
+{
+  "utrecht": {
+    "heading-5": {
+      "color": {},
+      "font-family": {},
+      "font-size": { "value": "1rem" },
+      "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+      "line-height": {},
+      "margin-block-end": { "value": "4px" },
+      "margin-block-start": {}
+    }
+  }
+}

package/src/components/utrecht/heading-6.tokens.json

@@ -0,0 +1,13 @@
+{
+  "utrecht": {
+    "heading-6": {
+      "color": {},
+      "font-family": {},
+      "font-size": { "value": "0.875rem" },
+      "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+      "line-height": {},
+      "margin-block-end": { "value": "4px" },
+      "margin-block-start": {}
+    }
+  }
+}

package/src/components/utrecht/link.tokens.json

@@ -0,0 +1,44 @@
+{
+  "utrecht": {
+    "link": {
+      "background-color": {},
+      "color": { "value": "{basiselementen.color.hemelblauw}" },
+      "text-decoration": { "value": "underline" },
+      "text-decoration-thickness": { "value": "1px" },
+      "text-underline-offset": { "value": "2px" },
+      "font-weight": { "value": "{basiselementen.font-weight.normal}" },
+      "icon": {
+        "background-color": {}
+      },
+      "hover": {
+        "background-color": {},
+        "color": { "value": "{basiselementen.color.donkerblauw}" },
+        "text-decoration-thickness": { "value": "1px" },
+        "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+        "icon": {
+          "background-color": {}
+        },
+        "text-decoration": { "value": "none" }
+      },
+      "active": {
+        "background-color": {},
+        "color": { "value": "{basiselementen.color.donkerblauw}" },
+        "font-weight": { "value": "{basiselementen.font-weight.bold}" },
+        "icon": {
+          "background-color": {}
+        },
+        "text-decoration-thickness": { "value": "1px" }
+      },
+      "focus": {
+        "background-color": {},
+        "color": {},
+        "font-weight": {},
+        "icon": {
+          "background-color": {}
+        },
+        "outline-offset": { "value": "0" },
+        "text-decoration-thickness": { "value": "1px" }
+      }
+    }
+  }
+}

package/src/components/utrecht/ordered-list.tokens.json

@@ -0,0 +1,19 @@
+{
+  "utrecht": {
+    "ordered-list": {
+      "margin-block-start": {},
+      "margin-block-end": { "value": "0" },
+      "item": {
+        "margin-block-start": { "value": "0.5ex" },
+        "margin-block-end": { "value": "0.5ex" },
+        "padding-inline-start": { "value": "0" }
+      },
+      "marker": {
+        "color": {}
+      },
+      "padding-inline-start": {
+        "value": "0"
+      }
+    }
+  }
+}

package/src/components/utrecht/paragraph.tokens.json

@@ -0,0 +1,23 @@
+{
+  "utrecht": {
+    "paragraph": {
+      "color": {},
+      "font-family": {},
+      "font-size": { "value": "18px" },
+      "font-weight": {},
+      "line-height": { "value": "150%" },
+      "margin-block-start": {},
+      "margin-block-end": { "value": "16px" },
+      "lead": {
+        "color": {},
+        "font-size": { "value": "20px" },
+        "font-weight": {},
+        "line-height": { "value": "150%" }
+      },
+      "small": {
+        "font-size": { "value": "16px" },
+        "line-height": { "value": "150%" }
+      }
+    }
+  }
+}