@rijkshuisstijl-community/design-tokens 6.0.0 → 7.0.0

package/figma/figma.tokens.json

@@ -582,6 +582,12 @@
           "value": "#000",
           "type": "color"
         },
+        "transparent": {
+          "30": {
+            "value": "rgba(0,0,0,0.3)",
+            "type":"color"
+          }
+        },
         "none": {
           "value": "transparent",
           "type": "color"
@@ -975,6 +981,10 @@
             "type": "color"
           }
         },
+        "backdrop":{
+          "value": "{rhc.color.transparent.30}",
+          "type": "color"
+        },
         "border": {
           "default": {
             "parent": "mode/light",
@@ -1667,10 +1677,10 @@
   },
   "components/action-group": {
     "utrecht": {
-      "button-group": {
+      "action-group": {
         "background-color": {
           "type": "color",
-          "value": "transparent"
+          "value": "{rhc.color.none}"
         },
         "column-gap": {
           "type": "dimension",
@@ -1678,11 +1688,11 @@
         },
         "padding-block-end": {
           "type": "dimension",
-          "value": "0px"
+          "value": "{rhc.space.0}"
         },
         "padding-block-start": {
           "type": "dimension",
-          "value": "0px"
+          "value": "{rhc.space.0}"
         },
         "row-gap": {
           "type": "dimension",
@@ -1863,6 +1873,35 @@
       }
     }
   },
+  "components/backdrop": {
+    "utrecht": {
+      "backdrop": {
+        "background-color": {
+          "value": "{rhc.color.backdrop}",
+          "type": "color"
+        },
+        "color": {
+          "value": "{rhc.color.foreground.default}",
+          "type": "color"
+        },
+        "opacity": {
+          "value": "0.8",
+          "type": "opacity"
+        },
+        "fade-in": {
+          "animation-duration": {
+            "value": "400ms"
+          }
+        },
+        "reduced-transparency": {
+          "opacity": {
+            "value": "0.98",
+            "type": "opacity"
+          }
+        }
+      }
+    }
+  },
   "components/blockquote/base": {
     "utrecht": {
       "blockquote": {
@@ -3860,6 +3899,56 @@
       }
     }
   },
+  "components/drawer": {
+    "utrecht": {
+      "drawer": {
+        "max-inline-size": {
+          "value": "256px",
+          "type": "spacing"
+        },
+        "z-index": {
+          "type": "dimension",
+          "value": "1"
+        },
+        "background-color": {
+          "value": "{rhc.color.wit}",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "{rhc.color.border.default}",
+          "type": "color"
+        },
+        "border-width": {
+          "type": "dimension",
+          "value": "{rhc.border-width.none}"
+        },
+        "color": {
+          "value": "{rhc.color.foreground.default}",
+          "type": "color"
+        },
+        "max-block-size": {
+          "value": "240px",
+          "type": "dimension"
+        },
+        "padding-block-start": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        },
+        "padding-block-end": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        }
+      }
+    }
+  },
   "components/fieldset": {
     "utrecht": {
       "form-fieldset": {
@@ -9615,11 +9704,13 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -9710,11 +9801,13 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -9806,11 +9899,13 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -9904,11 +9999,13 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -10000,11 +10097,13 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -10096,11 +10195,13 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -10192,11 +10293,13 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -10288,11 +10391,13 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -10384,12 +10489,14 @@
         "utrecht/rich-text": "enabled",
         "utrecht/document": "enabled",
         "components/article": "enabled",
+        "components/backdrop": "enabled",
         "components/card-as-link": "enabled",
         "components/checkbox-group": "enabled",
         "components/code-input-group": "enabled",
         "components/code-input": "enabled",
         "components/data-summary": "enabled",
         "components/dot-badge": "enabled",
+        "components/drawer": "enabled",
         "components/fieldset": "enabled",
         "components/file-input": "enabled",
         "components/footer": "enabled",
@@ -10488,6 +10595,7 @@
       "components/action-group",
       "components/alert",
       "components/article",
+      "components/backdrop",
       "components/blockquote/base",
       "components/blockquote/deprecated",
       "components/breadcrumb",
@@ -10503,6 +10611,7 @@
       "components/data-badge-button",
       "components/data-summary",
       "components/dot-badge",
+      "components/drawer",
       "components/fieldset",
       "components/figure/base",
       "components/figure/deprecated",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/design-tokens",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "author": "Community for NL Design System",
   "description": "Example design tokens",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,7 +25,7 @@
     "token-transformer": "0.0.33"
   },
   "scripts": {
-    "clean": "rimraf dist/* src/generated/*",
+    "clean": "rimraf dist/ src/generated/",
     "build": "npm-run-all clean build:figma-tokens build:style-dictionary",
     "build:figma-tokens": "node ./token-transformer.mjs",
     "build:style-dictionary": "node build.mjs",

package/src/generated/base.tokens.json

@@ -1814,6 +1814,10 @@
           "type": "color"
         }
       },
+      "backdrop": {
+        "value": "#0000004d",
+        "type": "color"
+      },
       "border": {
         "default": {
           "parent": "mode/light",
@@ -2528,6 +2532,12 @@
         "value": "#000",
         "type": "color"
       },
+      "transparent": {
+        "30": {
+          "value": "#0000004d",
+          "type": "color"
+        }
+      },
       "none": {
         "value": "transparent",
         "type": "color"
@@ -4378,6 +4388,52 @@
         }
       }
     },
+    "drawer": {
+      "max-inline-size": {
+        "value": "256px",
+        "type": "spacing"
+      },
+      "z-index": {
+        "type": "dimension",
+        "value": 1
+      },
+      "background-color": {
+        "value": "#fff",
+        "type": "color"
+      },
+      "border-color": {
+        "value": "#64748B",
+        "type": "color"
+      },
+      "border-width": {
+        "type": "dimension",
+        "value": "0px"
+      },
+      "color": {
+        "value": "#0F172A",
+        "type": "color"
+      },
+      "max-block-size": {
+        "value": "240px",
+        "type": "dimension"
+      },
+      "padding-block-start": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-block-end": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "1rem",
+        "type": "spacing"
+      }
+    },
     "data-badge": {
       "background-color": {
         "value": "#dce3ea",
@@ -5169,26 +5225,6 @@
         "type": "dimension",
         "value": "0rem",
         "description": "[code-only]"
-      },
-      "background-color": {
-        "type": "color",
-        "value": "transparent"
-      },
-      "column-gap": {
-        "type": "dimension",
-        "value": "0.5rem"
-      },
-      "padding-block-end": {
-        "type": "dimension",
-        "value": "0px"
-      },
-      "padding-block-start": {
-        "type": "dimension",
-        "value": "0px"
-      },
-      "row-gap": {
-        "type": "dimension",
-        "value": "0.5rem"
       }
     },
     "breadcrumb-nav": {
@@ -5561,6 +5597,32 @@
         }
       }
     },
+    "backdrop": {
+      "background-color": {
+        "value": "#0000004d",
+        "type": "color"
+      },
+      "color": {
+        "value": "#0F172A",
+        "type": "color"
+      },
+      "opacity": {
+        "value": 0.8,
+        "type": "opacity"
+      },
+      "fade-in": {
+        "animation-duration": {
+          "value": "400ms",
+          "type": "other"
+        }
+      },
+      "reduced-transparency": {
+        "opacity": {
+          "value": 0.98,
+          "type": "opacity"
+        }
+      }
+    },
     "article": {
       "max-inline-size": {
         "value": "75ch",
@@ -5725,6 +5787,28 @@
         }
       }
     },
+    "action-group": {
+      "background-color": {
+        "type": "color",
+        "value": "transparent"
+      },
+      "column-gap": {
+        "type": "dimension",
+        "value": "0.5rem"
+      },
+      "padding-block-end": {
+        "type": "dimension",
+        "value": "0rem"
+      },
+      "padding-block-start": {
+        "type": "dimension",
+        "value": "0rem"
+      },
+      "row-gap": {
+        "type": "dimension",
+        "value": "0.5rem"
+      }
+    },
     "accordion": {
       "margin-block-end": {
         "description": "[code-only]",

package/src/generated/koop/tokens.json

@@ -2304,26 +2304,6 @@
         "type": "dimension",
         "value": "0rem",
         "description": "[code-only]"
-      },
-      "background-color": {
-        "type": "color",
-        "value": "transparent"
-      },
-      "column-gap": {
-        "type": "dimension",
-        "value": "0.5rem"
-      },
-      "padding-block-end": {
-        "type": "dimension",
-        "value": "0px"
-      },
-      "padding-block-start": {
-        "type": "dimension",
-        "value": "0px"
-      },
-      "row-gap": {
-        "type": "dimension",
-        "value": "0.5rem"
       }
     },
     "breadcrumb-nav": {
@@ -2620,6 +2600,28 @@
         }
       }
     },
+    "action-group": {
+      "background-color": {
+        "type": "color",
+        "value": "transparent"
+      },
+      "column-gap": {
+        "type": "dimension",
+        "value": "0.5rem"
+      },
+      "padding-block-end": {
+        "type": "dimension",
+        "value": "0rem"
+      },
+      "padding-block-start": {
+        "type": "dimension",
+        "value": "0rem"
+      },
+      "row-gap": {
+        "type": "dimension",
+        "value": "0.5rem"
+      }
+    },
     "page-footer": {
       "background-color": {
         "value": "#154273",
@@ -3085,6 +3087,78 @@
         }
       }
     },
+    "drawer": {
+      "max-inline-size": {
+        "value": "256px",
+        "type": "spacing"
+      },
+      "z-index": {
+        "type": "dimension",
+        "value": 1
+      },
+      "background-color": {
+        "value": "#fff",
+        "type": "color"
+      },
+      "border-color": {
+        "value": "#64748B",
+        "type": "color"
+      },
+      "border-width": {
+        "type": "dimension",
+        "value": "0px"
+      },
+      "color": {
+        "value": "#0F172A",
+        "type": "color"
+      },
+      "max-block-size": {
+        "value": "240px",
+        "type": "dimension"
+      },
+      "padding-block-start": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-block-end": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "1rem",
+        "type": "spacing"
+      }
+    },
+    "backdrop": {
+      "background-color": {
+        "value": "#0000004d",
+        "type": "color"
+      },
+      "color": {
+        "value": "#0F172A",
+        "type": "color"
+      },
+      "opacity": {
+        "value": 0.8,
+        "type": "opacity"
+      },
+      "fade-in": {
+        "animation-duration": {
+          "value": "400ms",
+          "type": "other"
+        }
+      },
+      "reduced-transparency": {
+        "opacity": {
+          "value": 0.98,
+          "type": "opacity"
+        }
+      }
+    },
     "article": {
       "max-inline-size": {
         "value": "75ch",
@@ -5412,6 +5486,10 @@
           "type": "color"
         }
       },
+      "backdrop": {
+        "value": "#0000004d",
+        "type": "color"
+      },
       "border": {
         "default": {
           "parent": "mode/light",
@@ -6126,6 +6204,12 @@
         "value": "#000",
         "type": "color"
       },
+      "transparent": {
+        "30": {
+          "value": "#0000004d",
+          "type": "color"
+        }
+      },
       "none": {
         "value": "transparent",
         "type": "color"