Extend future Basis tokens + update W3C DTCG format

README.md

@@ -1,7 +1,7 @@
 # Design Tokens
 
-The Open Inwoner Platform (OIP) project has the goal to follow the [NL Design System](https://github.com/nl-design-system). We organize the design tokens in JSON files and use them within the Open Inwoner
-backend project.
+The Open Inwoner Platform (OIP) project has the goal to follow the [NL Design System](https://github.com/nl-design-system). We
+organize the design tokens in JSON files and use them within the Open Inwoner backend project.
 
 For any component that OIP has that corresponds with a community component, we use the community
 classes. But for any component that OIP has that does not have an NLDS equivalent, we use our own
@@ -15,9 +15,13 @@ and then simply switch themes in OIP.
 
 The design tokens are specified in JSON files, which are picked up and merged using the
 [style-dictionary](https://www.npmjs.com/package/style-dictionary) library. The resulting packages
-include various build targets, such as CSS variables files, SASS vars... to be consumed in downstream projects.
+include various build targets, such as CSS variables files, SASS vars... to be consumed in
+downstream projects.
 
-The draft [Design Token Format](https://design-tokens.github.io/community-group/format/) drives the structure of these design tokens.
+The draft [Design Token Format](https://design-tokens.github.io/community-group/format/) drives the
+structure of these design tokens. We are currently using the updated W3C DTCG format (sets a Dollar
+sign in its specified properties, like `$type`, `$value`, `$description`, `$deprecated`,
+`$extensions`). Token and group names MUST NOT begin with the `$` character.
 
 **Using tokens**
 
@@ -27,7 +31,8 @@ NPM-package in your own project.
 ## Add this package to your project
 
 This package can be added to your project as an NPM node module: after building the node, you will
-only need to work with its rendered CSS. The easiest integration path is adding the NPM package as dependency to your project:
+only need to work with its rendered CSS. The easiest integration path is adding the NPM package as
+dependency to your project:
 
 ```bash
 npm install --save-dev @open-inwoner/design-tokens
@@ -64,9 +69,13 @@ Import the CSS in your own CSS files by using our theme class in your Master HTM
 
 ## Developing and using tokens
 
-In case you do not just wish to consume, but add completely new tokens or adjust their values, we recommend installing the package locally and using npm workspaces or `npm link` for the least-friction experience. You can include the package as a git-submodule and leverage npm workspaces with instructions in the downstream projects.
+In case you do not just wish to consume, but add completely new tokens or adjust their values, we
+recommend installing the package locally and using npm workspaces or `npm link` for the least-
+friction experience. You can include the package as a git-submodule and leverage npm workspaces with
+instructions in the downstream projects.
 
-This allows you to create atomic PRs with design token changes, while being able to develop against the newest changes.
+This allows you to create atomic PRs with design token changes, while being able to develop against
+the newest changes.
 
 Run:
 
@@ -94,7 +103,7 @@ tokens. E.g. if you have two tokens definition files like:
   "oip": {
     "color": {
       "fg": {
-        "value": "#000000"
+        "$value": "#000000"
       }
     }
   }
@@ -107,7 +116,7 @@ tokens. E.g. if you have two tokens definition files like:
     "color": {
       "fg": {
         "muted": {
-          "value": "#000000"
+          "$value": "#000000"
         }
       }
     }
@@ -134,7 +143,7 @@ e.g.:
   "oip": {
     "color": {
       "fg-muted": {
-        "value": "#000000"
+        "$value": "#000000"
       }
     }
   }

bin/check_token_nesting.py

@@ -40,7 +40,7 @@ def get_emitted_var_count(file_path: str) -> int:
 def count_leaf_nodes(data: dict) -> int:
     num_leaf_nodes = 0
     for key, value in data.items():
-        if key in "value":
+        if key in "$value":
             if isinstance(value, (dict, list)):
                 raise TypeError("The 'value' key value must be a scalar")
             num_leaf_nodes += 1