Add form design tokens rijkshuisstijl (#247)

nl-design-system · Oct 3, 2023 · a6ecfcf · a6ecfcf
1 parent 6b64c06
commit a6ecfcf
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 15 deletions.
diff --git a/proprietary/design-tokens/src/components/utrecht/form-control.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-control.tokens.json
@@ -0,0 +1,31 @@
+{
+  "utrecht": {
+    "form-control": {
+      "background-color": {},
+      "block-size": {},
+      "border-color": {},
+      "border-radius": {},
+      "border-width": {},
+      "color": {},
+      "font-family": {},
+      "font-size": {},
+      "line-height": {},
+      "min-block-size": {},
+      "padding-block-end": {},
+      "padding-block-start": {},
+      "padding-inline-end": {},
+      "padding-inline-start": {},
+      "max-inline-size": { "value": "320px" },
+      "placeholder": {
+        "color": {}
+      },
+      "focus": {
+        "border-color": {}
+      },
+      "disabled": {
+        "background-color": {},
+        "color": {}
+      }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/components/utrecht/form-field-error-message.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-field-error-message.tokens.json
@@ -0,0 +1,17 @@
+{
+  "utrecht": {
+    "form-field-error-message": {
+      "color": { "value": "{basiselementen.color.zwart}" },
+      "background-color": { "value": "{basiselementen.color.rood-tint2}" },
+      "padding-inline-start": { "value": "16px" },
+      "padding-inline-end": { "value": "16px" },
+      "padding-block-start": { "value": "16px" },
+      "padding-block-end": { "value": "16px" },
+      "font-family": {},
+      "font-size": {},
+      "font-weight": {},
+      "margin-block-start": {},
+      "margin-block-end": {}
+    }
+  }
+}
diff --git a/proprietary/digid-design-tokens/token-transformer.mjs b/proprietary/digid-design-tokens/token-transformer.mjs
@@ -2,10 +2,10 @@ import { tokenTransformer } from "../logius-design-tokens/src/token-transformer.
 import { resolve } from "node:path";
 
 tokenTransformer({
-	input: new URL(
-		"../logius-design-tokens/src/figma.tokens.json",
-		import.meta.url,
-	).pathname,
-	output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
-	themes: ["DigiD"],
+  input: new URL(
+    "../logius-design-tokens/src/figma.tokens.json",
+    import.meta.url,
+  ).pathname,
+  output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
+  themes: ["DigiD"],
 });
diff --git a/proprietary/logius-design-tokens/token-transformer.mjs b/proprietary/logius-design-tokens/token-transformer.mjs
@@ -1,7 +1,7 @@
 import { tokenTransformer } from "./src/token-transformer.mjs";
 
 tokenTransformer({
-	input: new URL("./src/figma.tokens.json", import.meta.url).pathname,
-	output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
-	themes: ["Logius"],
+  input: new URL("./src/figma.tokens.json", import.meta.url).pathname,
+  output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
+  themes: ["Logius"],
 });
diff --git a/proprietary/mijnoverheid-design-tokens/token-transformer.mjs b/proprietary/mijnoverheid-design-tokens/token-transformer.mjs
@@ -1,10 +1,10 @@
 import { tokenTransformer } from "../logius-design-tokens/src/token-transformer.mjs";
 
 tokenTransformer({
-	input: new URL(
-		"../logius-design-tokens/src/figma.tokens.json",
-		import.meta.url,
-	).pathname,
-	output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
-	themes: ["MijnOverheid"],
+  input: new URL(
+    "../logius-design-tokens/src/figma.tokens.json",
+    import.meta.url,
+  ).pathname,
+  output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
+  themes: ["MijnOverheid"],
 });