@rijkshuisstijl-community/design-tokens 1.0.0-alpha.9 → 1.0.0-alpha.91

package/style-dictionary.config.json

@@ -19,6 +19,10 @@
       "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
       "buildPath": "dist/",
       "files": [
+        {
+          "destination": "tokens.json",
+          "format": "json"
+        },
         {
           "destination": "index.tokens.json",
           "format": "json/nested"

package/token-transformer.mjs

@@ -0,0 +1,49 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { dirname } from 'node:path';
+
+import { transformTokens } from 'token-transformer';
+
+const init = async ({ input, output }) => {
+  const json = await readFile(input, 'utf-8');
+  const rawTokens = JSON.parse(json);
+
+  const setsToUse = [];
+
+  // The following components didn't work yet because of broken design token references.
+  // You can remove excludes from this list at any time, as long as they don't break the build.
+  const excludes = [
+    'components/avatar',
+    'components/backdrop',
+    'components/drawer',
+    'components/form-field-option-label',
+    'components/modal-dialog',
+    'components/pagination',
+    'components/status-badge',
+    'components/summary-list',
+    'components/task-list',
+    'components/toolbar-button',
+  ];
+
+  const transformerOptions = {
+    // expandTypography: true,
+    // expandShadow: true,
+    // expandComposition: true,
+    // expandBorder: true,
+    // preserveRawValue: false,
+    // throwErrorWhenNotResolved: true,
+    // resolveReferences: true,
+  };
+
+  let resolved = transformTokens(rawTokens, setsToUse, excludes, transformerOptions);
+
+  delete resolved['tokenSetOrder'];
+
+  await mkdir(dirname(output), { recursive: true });
+
+  await writeFile(output, JSON.stringify(resolved, null, 2));
+};
+
+init({
+  input: './figma/figma.tokens.json',
+  output: './src/generated/figma.tokens.json',
+});

package/src/brand/rhc/color.tokens.json

@@ -1,103 +0,0 @@
-{
-  "basiselementen": {
-    "color": {
-      "logoblauw": {
-        "value": "#154273"
-      },
-      "hemelblauw": {
-        "value": "#007bc7"
-      },
-      "hemelblauw-tint1": {
-        "value": "#b2d7ee"
-      },
-      "hemelblauw-tint2": {
-        "value": "#d9ebf7"
-      },
-      "lichtblauw": {
-        "value": "#8fcae7"
-      },
-      "lichtblauw-tint1": {
-        "value": "#ddeff8"
-      },
-      "lichtblauw-tint2": {
-        "value": "#eef7fb"
-      },
-      "donkerblauw": {
-        "value": "#01689b"
-      },
-      "donkerblauw-shade1": {
-        "value": "#01496D",
-        "comment": "30% black (shade) of 'donkerblauw'"
-      },
-      "oranje": {
-        "value": "#e17000"
-      },
-      "oranje-tint1": {
-        "value": "#f6d4b2"
-      },
-      "oranje-tint2": {
-        "value": "#fbead9"
-      },
-      "groen": {
-        "value": "#39870c"
-      },
-      "groen-tint1": {
-        "value": "#c3dbb6"
-      },
-      "groen-tint2": {
-        "value": "#e1eddb"
-      },
-      "donkergroen": {
-        "value": "#275e08"
-      },
-      "donkergeel": {
-        "value": "#ffb612"
-      },
-      "donkergeel-tint1": {
-        "value": "#ffe9b7"
-      },
-      "donkergeel-tint2": {
-        "value": "#fff4dc"
-      },
-      "rood": {
-        "value": "#d51b1e"
-      },
-      "rood-tint1": {
-        "value": "#f2bfbb"
-      },
-      "rood-shade1": {
-        "value": "#4d0a0b"
-      },
-      "rood-tint2": {
-        "value": "#f9dfdd"
-      },
-      "grijs1": {
-        "value": "#f3f3f3"
-      },
-      "grijs2": {
-        "value": "#e6e6e6"
-      },
-      "grijs3": {
-        "value": "#cccccc"
-      },
-      "grijs4": {
-        "value": "#b4b4b4"
-      },
-      "grijs5": {
-        "value": "#999999"
-      },
-      "grijs6": {
-        "value": "#696969"
-      },
-      "grijs7": {
-        "value": "#535353"
-      },
-      "zwart": {
-        "value": "#000000"
-      },
-      "wit": {
-        "value": "#ffffff"
-      }
-    }
-  }
-}

package/src/brand/rhc/font.tokens.json

@@ -1,34 +0,0 @@
-{
-  "basiselementen": {
-    "font": {
-      "sans-serif": {
-        "font-family": {
-          "value": "'RijksoverheidSansWebText'"
-        }
-      },
-      "sans-serif-fallback": {
-        "font-family": {
-          "value": "'Calibri', 'Verdana', 'Arial', sans-serif"
-        }
-      },
-      "serif": {
-        "font-family": {
-          "value": "'RijksoverheidSerifWeb'"
-        }
-      },
-      "serif-fallback": {
-        "font-family": {
-          "value": "'Times New Roman', serif"
-        }
-      }
-    },
-    "font-weight": {
-      "normal": {
-        "value": "400"
-      },
-      "bold": {
-        "value": "700"
-      }
-    }
-  }
-}

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

@@ -1,15 +0,0 @@
-{
-  "basiselementen": {
-    "root": {
-      "font-size": { "value": "100%" }
-    },
-    "document": {
-      "background-color": { "value": "{basiselementen.color.wit}" },
-      "color": { "value": "{basiselementen.color.zwart}" },
-      "font-family": { "value": "{basiselementen.font.sans-serif.font-family}" },
-      "font-size": { "value": "18px" },
-      "font-weight": {},
-      "line-height": { "value": "150%" }
-    }
-  }
-}

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

@@ -1,33 +0,0 @@
-{
-  "utrecht": {
-    "button": {
-      "rvo-xs": {
-        "font-size": { "value": "0.875rem" },
-        "font-weight": { "value": "{basiselementen.font-weight.normal}" },
-        "padding-block-start": { "value": "4px" },
-        "padding-block-end": { "value": "4px" },
-        "padding-inline-start": { "value": "calc(8px + 4px)" },
-        "padding-inline-end": { "value": "calc(8px + 4px)" },
-        "min-block-size": { "value": "auto" }
-      },
-      "rvo-sm": {
-        "font-size": { "value": "1rem" },
-        "padding-block-start": { "value": "4px" },
-        "padding-block-end": { "value": "4px" },
-        "padding-inline-start": { "value": "12px" },
-        "padding-inline-end": { "value": "12px" },
-        "min-block-size": { "value": "30px" }
-      },
-      "rvo-md": {
-        "font-size": { "value": "18px" },
-        "padding-block-start": { "value": "8px" },
-        "padding-block-end": { "value": "8px" },
-        "padding-inline-start": { "value": "16px" },
-        "padding-inline-end": { "value": "16px" }
-      },
-      "rvo-tertiary-action": {
-        "text-decoration": { "value": "none" }
-      }
-    }
-  }
-}

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

@@ -1,32 +0,0 @@
-{
-  "rvo": {
-    "checkbox": {
-      "size": { "value": "24px" },
-      "icon": {
-        "size": { "value": "16px" },
-        "color": { "value": "{basiselementen.color.wit}" }
-      },
-      "background-color": { "value": "{basiselementen.color.wit}" },
-      "border-width": { "value": "1px" },
-      "border-color": { "value": "{basiselementen.color.zwart}" },
-      "focus": {
-        "border-color": {},
-        "border-width": {},
-        "background-color": {}
-      },
-      "checked": {
-        "background-color": { "value": "{basiselementen.color.hemelblauw}" }
-      },
-      "hover": {
-        "background-color": { "value": "{basiselementen.color.donkerblauw}" },
-        "border-color": { "value": "{basiselementen.color.hemelblauw}" }
-      },
-      "disabled": {
-        "border-color": { "value": "{basiselementen.color.grijs3}" },
-        "border-width": {},
-        "background-color": { "value": "{basiselementen.color.wit}" },
-        "color": { "value": "{basiselementen.color.grijs3}" }
-      }
-    }
-  }
-}

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

@@ -1,24 +0,0 @@
-{
-  "rvo": {
-    "custom-radio-button": {
-      "label": {
-        "disabled": {
-          "color": { "value": "{basiselementen.color.grijs3}" }
-        }
-      },
-      "hover": {
-        "border-color": {
-          "value": "{basiselementen.color.hemelblauw}"
-        }
-      },
-      "checked": {
-        "border-color": {
-          "value": "{basiselementen.color.hemelblauw}"
-        },
-        "background": {
-          "value": "radial-gradient(circle, {basiselementen.color.wit} 30%, {basiselementen.color.hemelblauw} 30%)"
-        }
-      }
-    }
-  }
-}

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

@@ -1,24 +0,0 @@
-{
-  "rvo": {
-    "heading": {
-      "1": {
-        "line-height": { "value": "125%" }
-      },
-      "2": {
-        "line-height": {}
-      },
-      "3": {
-        "line-height": {}
-      },
-      "4": {
-        "line-height": {}
-      },
-      "5": {
-        "line-height": {}
-      },
-      "6": {
-        "line-height": {}
-      }
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-{
-  "rvo": {
-    "logo": {
-      "font-family": { "value": "{basiselementen.font.serif.font-family}" },
-      "font-size": { "value": "16px" },
-      "color": { "value": "{basiselementen.color.zwart}" },
-      "emblem": {
-        "background-color": { "value": "#154273" },
-        "color": { "value": "{basiselementen.color.wit}" }
-      }
-    }
-  }
-}

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

@@ -1,15 +0,0 @@
-{
-  "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

@@ -1,66 +0,0 @@
-{
-  "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

@@ -1,120 +0,0 @@
-{
-  "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

@@ -1,53 +0,0 @@
-{
-  "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": {}
-        }
-      }
-    }
-  }
-}