@conduction/theme 1.1.5 → 1.1.7

package/README.md

@@ -6,6 +6,7 @@ Conduction's design tokens theme
 
 - **Version 1.1 (breaking changes from 1.0.x)**
 
+  - 1.1.6 / 1.1.7: Added Zuiddrecht theme.
   - 1.1.5: Added Gouda theme.
   - 1.1.4:
     - Added disabled Button tokens in all themes.

package/municipalities/opencatalogi-design-tokens/package.json

@@ -8,7 +8,7 @@
     "conduction"
   ],
   "license": "SEE LICENSE IN LICENSE.md",
-  "name": "@nl-design-system-unstable/leiden-design-tokens",
+  "name": "@nl-design-system-unstable/opencatalogi-design-tokens",
   "private": false,
   "publishConfig": {
     "access": "public"

package/municipalities/{noordwijk-design-tokens/node_modules/@nl-design-system-unstable/rotterdam-design-tokens → zuiddrecht-design-tokens}/LICENSE.md

@@ -1,17 +1,17 @@
-# Auteursrecht Gemeente Rotterdam
-
-Copyright (c) 2021 Gemeente Rotterdam
-
-## Logo en huisstijl
-
-Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Gemeente Rotterdam.
-
-Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Gemeente Rotterdam gebruiken en je ontwerpt een eigen huisstijl.
-
-## Lettertype
-
-Lettertypes die worden gebruikt voor de huisstijl zijn niet allemaal gratis en open source. Let op dat bij gebruik van die bijgeleverde lettertypes je een (betaalde) licentie regelt. Pas anders de configuratie aan om minder of andere lettertypes te gebruiken.
-
-## Toestemming
-
-Wanneer je het logo of de huisstijl wilt gebruiken kun je voor toestemming contact opnemen met Gemeente Rotterdam.
+# Auteursrecht Gemeente Zuiddrecht
+
+Copyright (c) 2023 Gemeente Zuiddrecht
+
+## Logo en huisstijl
+
+Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Gemeente Zuiddrecht.
+
+Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Gemeente Zuiddrecht gebruiken en je ontwerpt een eigen huisstijl.
+
+## Lettertype
+
+Lettertypes die worden gebruikt voor de huisstijl zijn niet allemaal gratis en open source. Let op dat bij gebruik van die bijgeleverde lettertypes je een (betaalde) licentie regelt. Pas anders de configuratie aan om minder of andere lettertypes te gebruiken.
+
+## Toestemming
+
+Wanneer je het logo of de huisstijl wilt gebruiken kun je voor toestemming contact opnemen met Gemeente Zuiddrecht.

package/municipalities/zuiddrecht-design-tokens/README.md

@@ -0,0 +1,3 @@
+# NL Design System design tokens Gemeente Zuiddrecht
+
+These tokens have been made for the fictional municipality of Zuiddrecht based on the tokens of [Gemeente Utrecht](https://www.utrecht.nl/).

package/municipalities/{noordwijk-design-tokens/node_modules/@nl-design-system-unstable/rotterdam-design-tokens → zuiddrecht-design-tokens}/package.json

@@ -1,38 +1,40 @@
-{
-  "version": "1.0.0-alpha.111",
-  "author": "Community for NL Design System",
-  "description": "NL Design System design tokens for Gemeente Rotterdam",
-  "website": "https://www.rotterdam.nl/",
-  "keywords": [
-    "nl-design-system"
-  ],
-  "license": "SEE LICENSE IN LICENSE.md",
-  "name": "@nl-design-system-unstable/rotterdam-design-tokens",
-  "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git+ssh",
-    "url": "git@github.com:nl-design-system/themes.git"
-  },
-  "scripts": {
-    "clean": "rimraf -rf dist/",
-    "download": "src/font/download.sh",
-    "prebuild": "npm run clean",
-    "watch": "npm-run-all watch:**",
-    "watch:style-dictionary": "chokidar --follow-symlinks --command 'npm run --ignore-scripts build' 'src/**/*.tokens.json'",
-    "build": "npm-run-all build:**",
-    "build:font": "mkdir -p dist/font && cp -R src/font/* dist/font",
-    "build:scss": "sass --no-source-map src/:dist/",
-    "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js"
-  },
-  "devDependencies": {
-    "@nl-design-system-unstable/theme-toolkit": "1.0.0-alpha.0",
-    "chokidar-cli": "3.0.0",
-    "npm-run-all": "4.1.5",
-    "rimraf": "3.0.2",
-    "style-dictionary": "3.8.0"
-  },
-  "gitHead": "156b5fb78d113fbb6fae163568975bae9eb66bce"
-}
+{
+  "version": "1.0.0-alpha.1",
+  "author": "Community for NL Design System",
+  "description": "NL Design System design tokens for Gemeente Zuiddrecht",
+  "website": "https://conduction.nl/",
+  "keywords": [
+    "nl-design-system",
+    "conduction"
+  ],
+  "license": "SEE LICENSE IN LICENSE.md",
+  "name": "@nl-design-system-unstable/zuiddrecht-design-tokens",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/themes.git"
+  },
+  "scripts": {
+    "clean": "rimraf -rf dist/",
+    "prebuild": "npm run clean",
+    "watch": "npm-run-all watch:**",
+    "watch:style-dictionary": "chokidar --follow-symlinks --command 'npm run --ignore-scripts build' 'src/**/*.tokens.json'",
+    "build": "npm-run-all build:**",
+    "build:scss": "sass --no-source-map src/:dist/",
+    "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js"
+  },
+  "devDependencies": {
+    "@nl-design-system-unstable/theme-toolkit": "workspace:*",
+    "chokidar-cli": "3.0.0",
+    "npm-run-all": "4.1.5",
+    "rimraf": "3.0.2",
+    "style-dictionary": "3.8.0"
+  },
+  "bugs": {
+    "url": "https://github.com/ConductionNL/conduction-theme/issues"
+  },
+  "homepage": "https://github.com/ConductionNL/conduction-theme#readme"
+}

package/municipalities/zuiddrecht-design-tokens/src/brand/zuiddrecht/color.tokens.json

@@ -0,0 +1,126 @@
+{
+  "zuiddrecht": {
+    "color": {
+      "primary": {
+        "value": "{zuiddrecht.color.red.40}"
+      },
+      "primary-hover": {
+        "value": "{zuiddrecht.color.red.30}"
+      },
+      "error": { "value": "#dc3545" },
+      "alert-error": { "value": "#721c24" },
+      "alert-error-background": { "value": "#f8d7da" },
+      "warning": { "value": "#ffc107" },
+      "alert-warning": { "value": "#856404" },
+      "alert-warning-background": { "value": "#fff3cd" },
+      "succes": { "value": "#28a745" },
+      "alert-succes": { "value": "#155724" },
+      "alert-succes-background": { "value": "#d4edda" },
+      "info": { "value": "{zuiddrecht.color.primary}" },
+      "alert-info": { "value": "#004085" },
+      "alert-info-background": { "value": "#cce5ff" },
+      "grey": {
+        "10": { "value": "hsl(0 0% 10%)", "comment": "experimenteel / beperkt gebruiken" },
+        "15": { "value": "hsl(0 0% 15%)", "comment": "experimenteel / achtergrond kleur voor darkmode" },
+        "20": { "value": "hsl(0 0% 20%)", "comment": "experimenteel / beperkt gebruiken" },
+        "29": {
+          "value": "#4a4a4a"
+        },
+        "30": { "value": "hsl(0 0% 30%)", "comment": "border grijs #888" },
+        "31": {
+          "value": "#4f4f4f"
+        },
+        "40": { "value": "hsl(0 0% 40%)", "comment": "basis grijs #727272" },
+        "46": {
+          "value": "#767676"
+        },
+        "48": {
+          "value": "#7a7a7a"
+        },
+        "50": {
+          "value": "#808080",
+          "comment": "Base/Grey"
+        },
+        "80": { "value": "hsl(0 0% 80%)", "comment": "grijs variant voor achtergrond content #e5e5e5" },
+        "82": {
+          "value": "#d1d1d1"
+        },
+        "90": { "value": "hsl(0 0% 90%)", "comment": "grijs variant voor achtergrond templates #e6e6e6" },
+        "95": { "value": "hsl(0 0% 95%)", "comment": "grijs variant voor achtergrond accordion #f2f2f2" },
+        "97": {
+          "value": "#f7f7f7"
+        }
+      },
+      "lightgrey": {
+        "96": {
+          "value": "#f5f5f5",
+          "comment": "Base/LightGrey"
+        }
+      },
+      "white": {
+        "98": {
+          "value": "#fafafa"
+        },
+        "100": {
+          "value": "#ffffff",
+          "comment": "Base/White"
+        }
+      },
+      "black": {
+        "0": {
+          "value": "#000000",
+          "comment": "Base/Black"
+        },
+        "30": {
+          "value": "#4d4d4d"
+        }
+      },
+      "blue": {
+        "20": { "value": "hsl(211 60% 20%)", "comment": "basis donkerblauw (OS focus)" },
+        "30": { "value": "hsl(211 60% 30%)", "comment": "Deze kleur gebruiken we niet" },
+        "35": { "value": "hsl(211 60% 35%)", "comment": "basis link en knoppen CTA donkerblauw" },
+        "40": { "value": "hsl(211 60% 40%)", "comment": "blauw variant bij hover/focus #3669a5" },
+        "43": { "value": "#3669a5" },
+        "50": { "value": "hsl(211 60% 50%)", "comment": "experimenteel / beperkt gebruiken" },
+        "60": { "value": "hsl(211 60% 60%)", "comment": "experimenteel / Drak mode link en button kleur" },
+        "80": { "value": "hsl(211 60% 80%)", "comment": "licht blauw voor achtergrond" },
+        "90": { "value": "hsl(211 60% 90%)", "comment": "ijsblauw variant achtergrond, spotlight en uitgelicht" }
+      },
+      "red": {
+        "20": { "value": "hsl(0 100% 20%)", "comment": "donker rood" },
+        "30": { "value": "hsl(0 100% 30%)", "comment": "hover rood" },
+        "40": { "value": "hsl(0 100% 40%)", "comment": "basis rood #cc0000" },
+        "95": { "value": "hsl(0 100% 95%)", "comment": "Achtergrond rode kleur" }
+      },
+      "yellow": {
+        "20": { "value": "hsl(48 100% 20%)", "comment": "donker geel voor darkmode achtergrond" },
+        "40": { "value": "hsl(48 100% 40%)", "comment": "donker geel" },
+        "50": { "value": "hsl(48 100% 50%)", "comment": "basis geel #ffcc00" },
+        "60": { "value": "hsl(48 100% 60%)", "comment": "selecteer geel" },
+        "80": { "value": "hsl(48 100% 80%)", "comment": "spotlight en uitgelicht" }
+      },
+      "green": {
+        "30": { "value": "hsl(90 30% 30%)", "comment": "donker groen voor darkmode achtergrond" },
+        "40": { "value": "hsl(90 30% 38%)", "comment": "donker groen" },
+        "50": { "value": "hsl(90 30% 50%)", "comment": "Standaard groen #80a659 " },
+        "80": { "value": "hsl(90 30% 80%)", "comment": "Licht groen" },
+        "90": { "value": "hsl(90 30% 90%)", "comment": "Achtergrond licht groen" }
+      },
+      "secondary": {
+        "purple": { "value": "#762cd1", "comment": "Paars" },
+        "magenta": { "value": "#f02198", "comment": "Magenta" },
+        "red": { "value": "#cc0000", "comment": "Red" },
+        "orange": { "value": "#ff6e00", "comment": "Oranje" },
+        "yellow": { "value": "#ffcc00", "comment": "Geel" },
+        "lime": { "value": "#99d000", "comment": "Lime" },
+        "green": { "value": "#32ab27", "comment": "Groen" },
+        "cyan": { "value": "#009ed4", "comment": "Cyaan" },
+        "blue": { "value": "#006dff", "comment": "Blauw" },
+        "navy": { "value": "#1c4181", "comment": "Marineblauw" },
+        "brown": { "value": "#ad643b", "comment": "Bruin" },
+        "grey": { "value": "#757575", "comment": "Grijs" }
+      },
+      "invalid": { "value": "#990000" }
+    }
+  }
+}

package/municipalities/zuiddrecht-design-tokens/src/brand/zuiddrecht/icon.tokens.json

@@ -0,0 +1,16 @@
+{
+  "zuiddrecht": {
+    "icon-scale": {
+      "3xs": { "value": "1px" },
+      "2xs": { "value": "4px" },
+      "xs": { "value": "8px" },
+      "sm": { "value": "12px" },
+      "md": { "value": "16px", "comment": "Formaat voor radio button" },
+      "lg": { "value": "24px", "comment": "Voor kalender iconen" },
+      "xl": { "value": "26px", "comment": "Formaat social media iconen" },
+      "2xl": { "value": "30px", "comment": "Formaat voor marker iconen" },
+      "3xl": { "value": "36px", "comment": "Formaat voor toptaks iconen" },
+      "4xl": { "value": "48px" }
+    }
+  }
+}

package/municipalities/zuiddrecht-design-tokens/src/brand/zuiddrecht/size.tokens.json

@@ -0,0 +1,17 @@
+{
+  "zuiddrecht": {
+    "size": {
+      "4xs": { "value": "1px" },
+      "3xs": { "value": "2px" },
+      "2xs": { "value": "4px" },
+      "xs": { "value": "8px" },
+      "sm": { "value": "14px" },
+      "md": { "value": "18px" },
+      "lg": { "value": "24px" },
+      "xl": { "value": "32px" },
+      "2xl": { "value": "48px" },
+      "3xl": { "value": "72px" },
+      "4xl": { "value": "96px" }
+    }
+  }
+}

package/municipalities/zuiddrecht-design-tokens/src/brand/zuiddrecht/typography.tokens.json

@@ -0,0 +1,40 @@
+{
+  "zuiddrecht": {
+    "typography": {
+      "sans-serif": {
+        "font-family": { "value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif" }
+      },
+      "monospace": {
+        "font-family": {
+          "value": "Monospace, \"Lucida Console\""
+        }
+      },
+      "scale": {
+        "2xs": { "font-size": { "value": "0.5rem", "comment": "8px" } },
+        "xs": { "font-size": { "value": "0.75rem", "comment": "12px" } },
+        "sm": { "font-size": { "value": "0.875rem", "comment": "14px" } },
+        "md": { "font-size": { "value": "1rem", "comment": "16px" } },
+        "lg": { "font-size": { "value": "1.125rem", "comment": "18px" } },
+        "xl": { "font-size": { "value": "1.25rem", "comment": "20px" } },
+        "2xl": { "font-size": { "value": "1.375rem", "comment": "22px" } },
+        "3xl": { "font-size": { "value": "1.5rem", "comment": "24px" } },
+        "4xl": { "font-size": { "value": "2rem", "comment": "32px" } }
+      },
+      "weight-scale": {
+        "bold": { "font-weight": { "value": "700" } },
+        "normal": { "font-weight": { "value": "400" } },
+        "light": { "font-weight": { "value": "100" } }
+      },
+      "font-style": {
+        "normal": { "value": "normal" },
+        "inherit": { "value": "inherit" }
+      },
+      "line-height": {
+        "xs": { "value": "1" },
+        "sm": { "value": "1.25" },
+        "md": { "value": "1.5" },
+        "lg": { "value": "2" }
+      }
+    }
+  }
+}

package/municipalities/{noordwijk-design-tokens/node_modules/@nl-design-system-unstable/rotterdam-design-tokens → zuiddrecht-design-tokens}/src/common/utrecht/action.tokens.json

@@ -1,9 +1,9 @@
-{
-  "utrecht": {
-    "action": {
-      "busy": { "cursor": { "value": "wait" } },
-      "disabled": { "cursor": { "value": "not-allowed" } },
-      "submit": { "cursor": { "value": "pointer" } }
-    }
-  }
-}
+{
+  "utrecht": {
+    "action": {
+      "busy": { "cursor": { "value": "wait" } },
+      "disabled": { "cursor": { "value": "not-allowed" } },
+      "submit": { "cursor": { "value": "pointer" } }
+    }
+  }
+}

package/municipalities/zuiddrecht-design-tokens/src/common/utrecht/border.tokens.json

@@ -0,0 +1,19 @@
+{
+  "zuiddrecht": {
+    "border-width": {
+      "sm": { "value": "1px" },
+      "md": { "value": "2px" }
+    },
+    "border-radius": {
+      "sm": { "value": "2px" },
+      "md": { "value": "4px" },
+      "lg": { "value": "8px" },
+      "round": { "value": "999px" },
+      "none": { "value": "0" }
+    },
+    "border-style": {
+      "solid": { "value": "solid" },
+      "dotted": { "value": "dotted" }
+    }
+  }
+}

package/municipalities/{noordwijk-design-tokens/node_modules/@nl-design-system-unstable/rotterdam-design-tokens → zuiddrecht-design-tokens}/src/common/utrecht/space.tokens.json

@@ -2,7 +2,20 @@
   "utrecht": {
     "space": {
       "block": {
-        "3xs": { "value": "0" },
+        "4xs": { "value": "1px" },
+        "3xs": { "value": "2px" },
+        "2xs": { "value": "4px" },
+        "xs": { "value": "8px" },
+        "sm": { "value": "12px" },
+        "md": { "value": "16px" },
+        "lg": { "value": "20px" },
+        "xl": { "value": "24px" },
+        "2xl": { "value": "32px" },
+        "3xl": { "value": "48px" },
+        "4xl": { "value": "64px" }
+      },
+      "inline": {
+        "3xs": { "value": "2px" },
         "2xs": { "value": "4px" },
         "xs": { "value": "8px" },
         "sm": { "value": "12px" },
@@ -11,10 +24,9 @@
         "xl": { "value": "24px" },
         "2xl": { "value": "28px" },
         "3xl": { "value": "32px" },
-        "4xl": { "value": "36px" },
-        "5xl": { "value": "40px" }
+        "4xl": { "value": "48px" }
       },
-      "inline": {
+      "text": {
         "3xs": { "value": "0.125ch" },
         "2xs": { "value": "0.25ch" },
         "xs": { "value": "0.5ch" },
@@ -26,7 +38,8 @@
         "3xl": { "value": "3ch" }
       },
       "row": {
-        "3xs": { "value": "0" },
+        "4xs": { "value": "1px" },
+        "3xs": { "value": "2px" },
         "2xs": { "value": "4px" },
         "xs": { "value": "8px" },
         "sm": { "value": "12px" },
@@ -35,11 +48,12 @@
         "xl": { "value": "24px" },
         "2xl": { "value": "28px" },
         "3xl": { "value": "32px" },
-        "4xl": { "value": "36px" },
-        "5xl": { "value": "40px" }
+        "4xl": { "value": "48px" },
+        "5xl": { "value": "64px" }
       },
       "column": {
-        "3xs": { "value": "0" },
+        "4xs": { "value": "1px" },
+        "3xs": { "value": "2px" },
         "2xs": { "value": "4px" },
         "xs": { "value": "8px" },
         "sm": { "value": "12px" },
@@ -48,8 +62,8 @@
         "xl": { "value": "24px" },
         "2xl": { "value": "28px" },
         "3xl": { "value": "32px" },
-        "4xl": { "value": "36px" },
-        "5xl": { "value": "40px" }
+        "4xl": { "value": "48px" },
+        "5xl": { "value": "64px" }
       }
     }
   }

package/municipalities/zuiddrecht-design-tokens/src/component/conduction/card-header.tokens.json

@@ -0,0 +1,26 @@
+{
+  "conduction": {
+    "card-header": {
+      "background-color": {},
+      "border-bottom-width": {},
+      "border-bottom-style": {},
+      "border-bottom-color": {},
+      "color": { "value": "{utrecht.document.color}" },
+      "hover": {
+        "background-color": {},
+        "border-bottom-width": {},
+        "border-bottom-style": {},
+        "border-bottom-color": {}
+      },
+      "title": {
+        "color": { "value": "{zuiddrecht.color.black.0}" }
+      },
+      "date": {
+        "color": { "value": "{zuiddrecht.color.black.0}" },
+        "font-size": { "value": "{zuiddrecht.typography.scale.sm.font-size}" },
+        "font-weight": { "value": "{zuiddrecht.typography.weight-scale.light.font-weight}" },
+        "margin-block-end": { "value": "{zuiddrecht.size.xs}" }
+      }
+    }
+  }
+}

package/municipalities/zuiddrecht-design-tokens/src/component/conduction/card-wrapper.tokens.json

@@ -0,0 +1,30 @@
+{
+  "conduction": {
+    "card-wrapper": {
+      "background-color": { "value": "{zuiddrecht.color.white.100}" },
+      "border-color": {},
+      "border-style": {},
+      "border-width": {},
+      "border-bottom-color": {},
+      "border-bottom-style": {},
+      "border-bottom-width": {},
+      "border-radius": { "value": "{zuiddrecht.size.md}" },
+      "box-shadow": {},
+      "color": { "value": "{zuiddrecht.color.black.0}" },
+      "hover": {
+        "background-color": {},
+        "color": {},
+        "border-color": {},
+        "border-style": {},
+        "border-width": {},
+        "border-bottom-color": {},
+        "border-bottom-style": {},
+        "border-bottom-width": {}
+      },
+      "padding-inline-end": { "value": "{zuiddrecht.size.md}" },
+      "padding-inline-start": { "value": "{zuiddrecht.size.md}" },
+      "padding-block-end": { "value": "{zuiddrecht.size.md}" },
+      "padding-block-start": { "value": "{zuiddrecht.size.md}" }
+    }
+  }
+}

package/municipalities/zuiddrecht-design-tokens/src/component/conduction/checkbox.tokens.json

@@ -0,0 +1,69 @@
+{
+  "conduction": {
+    "input-checkbox": {
+      "color": { "value": "{zuiddrecht.color.white.100}" },
+      "border-width": { "value": "{zuiddrecht.size.4xs}" },
+      "border-style": { "value": "solid" },
+      "border-color": { "value": "{zuiddrecht.color.grey.46}" },
+      "border-radius": { "value": "3px" },
+      "box-shadow": {},
+      "hover": {
+        "color": { "value": "{zuiddrecht.color.white.100}" },
+        "border-width": { "value": "{zuiddrecht.size.4xs}" },
+        "border-style": { "value": "solid" },
+        "border-color": { "value": "{zuiddrecht.color.grey.31}" },
+        "border-radius": { "value": "3px" },
+        "box-shadow": {}
+      },
+      "checked": {
+        "color": { "value": "{zuiddrecht.color.primary}" },
+        "border-width": { "value": "{zuiddrecht.size.4xs}" },
+        "border-style": { "value": "solid" },
+        "border-color": { "value": "{zuiddrecht.color.primary}" },
+        "border-radius": { "value": "3px" },
+        "box-shadow": {},
+        "checkmark-url": {},
+        "hover": {
+          "color": { "value": "{zuiddrecht.color.primary-hover}" },
+          "border-width": { "value": "{zuiddrecht.size.4xs}" },
+          "border-style": { "value": "solid" },
+          "border-color": { "value": "{zuiddrecht.color.primary-hover}" },
+          "border-radius": { "value": "3px" },
+          "box-shadow": {}
+        }
+      },
+      "disabled": {
+        "color": { "value": "{zuiddrecht.color.grey.82}" },
+        "border-width": { "value": "{zuiddrecht.size.4xs}" },
+        "border-style": { "value": "solid" },
+        "border-color": { "value": "{zuiddrecht.color.grey.82}" },
+        "border-radius": { "value": "3px" },
+        "box-shadow": {},
+        "hover": {
+          "color": { "value": "{zuiddrecht.color.grey.82}" },
+          "border-width": { "value": "{zuiddrecht.size.4xs}" },
+          "border-style": { "value": "solid" },
+          "border-color": { "value": "{zuiddrecht.color.grey.82}" },
+          "border-radius": { "value": "3px" },
+          "box-shadow": {}
+        }
+      },
+      "focus": {
+        "outline-width": { "value": "2px" },
+        "outline-style": { "value": "solid" },
+        "outline-color": { "value": "{zuiddrecht.color.black.0}" },
+        "outline-offset": { "value": "2px" }
+      },
+      "label": {
+        "color": { "value": "{utrecht.document.color}" },
+        "font-size": { "value": "{utrecht.document.font-size}" },
+        "font-weight": {},
+        "font-family": { "value": "{utrecht.document.font-family}" },
+        "container": {
+          "padding": { "value": "3px" },
+          "margin": { "value": "3px" }
+        }
+      }
+    }
+  }
+}

package/municipalities/zuiddrecht-design-tokens/src/component/conduction/download-card.tokens.json

@@ -0,0 +1,28 @@
+{
+  "conduction": {
+    "download-card": {
+      "background-color": {},
+      "title": {
+        "color": { "value": "{utrecht.document.color}" },
+        "font-size": { "value": "{zuiddrecht.typography.scale.md.font-size}" },
+        "font-weight": { "value": "{zuiddrecht.typography.weight-scale.bold.font-weight}" },
+        "font-family": { "value": "{zuiddrecht.typography.sans-serif.font-family}" },
+        "margin-inline-end": { "value": "{zuiddrecht.size.sm}" }
+      },
+      "border-width": { "value": "{zuiddrecht.size.4xs}" },
+      "border-style": { "value": "solid" },
+      "border-color": { "value": "{zuiddrecht.color.grey.82}" },
+      "border-radius": { "value": "{zuiddrecht.size.3xs}" },
+      "icon": {
+        "gap": {
+          "value": "{zuiddrecht.size.xs}"
+        },
+        "color": {}
+      },
+      "padding-inline-end": { "value": "{zuiddrecht.size.md}" },
+      "padding-inline-start": { "value": "{zuiddrecht.size.md}" },
+      "padding-block-end": { "value": "{zuiddrecht.size.md}" },
+      "padding-block-start": { "value": "{zuiddrecht.size.md}" }
+    }
+  }
+}