Merge pull request #1 from maykinmedia/feature/1910-add-minimal-setup…

…-for-headings

✨ [#1910] Add first setup for headings

README.md

@@ -16,6 +16,12 @@ structure of these design tokens.
 
 ## Usage
 
+Install the correct modules:
+
+```bash
+npm install
+```
+
 **Using tokens**
 
 If you are only _consuming_ the design tokens, the easiest integration path is adding this
@@ -41,6 +47,14 @@ npm start
 
 to start the watcher which will re-build on changes.
 
+To prettify files:
+
+Run:
+
+```bash
+npm run format
+```
+
 ## Naming pattern
 
 Because of the way style-dictionary works, you have to pay close attention to the structure of the

bin/check_token_nesting.py

@@ -1,9 +1,12 @@
 #!/usr/bin/env python
 #
-# Check the token definitions and the output files for expected number of leaf nodes.
+# checking the correctness of the design tokens by comparing the expected number of
+# leaf nodes in the source JSON files with the number of emitted variables in the
+# generated CSS file. The script itself focuses on the structure of the
+# design tokens and how they are translated into CSS variables.
 #
 # This linter helps preventing nesting mistakes since style-dictionary has some
-# peculiar behavour when nesting tokens and a 'value' key is discovered.
+# peculiar behaviour when nesting tokens and a 'value' key is discovered.
 #
 # Run as ./bin/check_token_nesting.py
 #
@@ -17,74 +20,75 @@
 CONFIG_FILE = ROOT_DIR / "style-dictionary.config.json"
 
 
-def get_emitted_var_count() -> int:
-  test_file = ROOT_DIR / "dist" / "root.css"
-  if not test_file.exists():
-    print(
-      f"Test file {test_file} does not exist, please run 'npm run build' first."
-    )
-    sys.exit(1)
+def get_emitted_var_count(file_path: str) -> int:
+    test_file = ROOT_DIR / "dist" / file_path
+    if not test_file.exists():
+        print(
+            f"Test file {test_file} does not exist, please run 'npm run build' first.")
+        sys.exit(1)
 
-  num_found = 0
-  test_prefix = "--"
-  with open(test_file, "r") as infile:
-    for line in infile:
-      if line.strip().startswith(test_prefix):
-        num_found += 1
+    num_found = 0
+    test_prefix = "--"
+    with open(test_file, "r") as infile:
+        for line in infile:
+            if line.strip().startswith(test_prefix):
+                num_found += 1
 
-  return num_found
+    return num_found
 
 
 def count_leaf_nodes(data: dict) -> int:
-  num_leaf_nodes = 0
-  for key, value in data.items():
-    if key in "value":
-      if isinstance(value, (dict, list)):
-        raise TypeError("The 'value' key value must be a scalar")
-      num_leaf_nodes += 1
-      continue
-
-    if key == "comment":
-      continue
-
-    if key.startswith("$"):
-        continue
-
-    if isinstance(value, dict):
-      num_leaf_nodes += count_leaf_nodes(value)
-    else:
-      raise TypeError("Expected nested object")
+    num_leaf_nodes = 0
+    for key, value in data.items():
+        if key in "value":
+            if isinstance(value, (dict, list)):
+                raise TypeError("The 'value' key value must be a scalar")
+            num_leaf_nodes += 1
+            continue
+
+        if key == "comment":
+            continue
+
+        if key.startswith("$"):
+            continue
 
-  return num_leaf_nodes
+        if isinstance(value, dict):
+            num_leaf_nodes += count_leaf_nodes(value)
+        else:
+            raise TypeError("Expected nested object")
+
+    return num_leaf_nodes
 
 
 def main():
-  os.chdir(ROOT_DIR)
+    os.chdir(ROOT_DIR)
+
+    with open(CONFIG_FILE, "r") as config_file:
+        config = json.load(config_file)
 
-  with open(CONFIG_FILE, "r") as config_file:
-    config = json.load(config_file)
+    NUM_LEAVES = 0
 
-  NUM_LEAVES = 0
+    # check the source files
+    for path_glob in config["source"]:
+        for path in ROOT_DIR.glob(path_glob):
+            with open(path, "r") as source_file:
+                tokens_definition = json.load(source_file)
 
-  # check the source files
-  for path_glob in config["source"]:
-    for path in ROOT_DIR.glob(path_glob):
-      with open(path, "r") as source_file:
-        tokens_definition = json.load(source_file)
+            NUM_LEAVES += count_leaf_nodes(tokens_definition)
 
-      NUM_LEAVES += count_leaf_nodes(tokens_definition)
+    print(f"Found {NUM_LEAVES} leaf nodes in the source JSON files.")
 
-  print(f"Found {NUM_LEAVES} leaf nodes in the source JSON files.")
-  num_emitted = get_emitted_var_count()
-  if NUM_LEAVES != num_emitted:
-    print(
-      f"Found {num_emitted} emitted variables, while {NUM_LEAVES} were expected.",
-      file=sys.stdout
-    )
-    sys.exit(1)
-  else:
-    print("OK.")
+    # Update this part to reflect the new file structure
+    num_emitted = get_emitted_var_count("css/index.css")
+    if NUM_LEAVES != num_emitted:
+        print(
+            f"Found {num_emitted} emitted variables, while {NUM_LEAVES} were expected.",
+            file=sys.stdout
+        )
+        sys.exit(1)
+    else:
+        print("OK.")
 
 
 if __name__ == "__main__":
-  main()
+    main()

src/common/color.tokens.json

@@ -7,7 +7,7 @@
         }
       },
       "primary": {
-        "value": "#01689B",
+        "value": "#0065BD",
         "comment": "The primary color makes up a large part of the theme, it is used in buttons, accents and link color for example.",
         "$extensions": {
           "dte.metadata": {
@@ -18,7 +18,7 @@
       },
       "primary-light": {"value": "#d3e3ec"},
       "secondary": {
-        "value": "#cee0ea",
+        "value": "#006A0F",
         "comment": "The secondary compliments the primary color and serves as the default for a number of more fine-grained tokens.",
         "$extensions": {
           "dte.metadata": {
@@ -27,6 +27,16 @@
           }
         }
       },
+      "accent": {
+        "value": "#E10019",
+        "comment": "The accent color is usually the main identity color for a municipality",
+        "$extensions": {
+          "dte.metadata": {
+            "isCurated": true,
+            "category": "color"
+          }
+        }
+      },
       "info": {
         "value": "#007bc7",
         "comment": "The highlight color for informational states and/or messages.",
@@ -79,7 +89,7 @@
       },
       "fg": {
         "value": "#000000",
-        "comment": "Font/foreground color for the (main) user interface.",
+        "comment": "Black foreground color for the (main) user interface.",
         "$extensions": {
           "dte.metadata": {
             "isCurated": true,

src/common/layout.tokens.json

@@ -1,7 +1,7 @@
 {
   "oi": {
     "layout": {
-      "bg": {"value": "#E6E6E6"}
+      "bg": {"value": "#FFFFFF"}
     }
   }
 }

src/common/typography.tokens.json

@@ -8,12 +8,12 @@
     },
     "text": {
       "margin": {"value": "20px"},
-      "font-size": {"value": "1rem"},
+      "font-size": {"value": "16px"},
       "big": {
-        "font-size": {"value": "1.125rem"}
+        "font-size": {"value": "24px"}
       },
       "small": {
-        "font-size": {"value": "0.875rem"}
+        "font-size": {"value": "14px"}
       },
       "mobile": {
         "margin": {"value": "{oi.text.margin}"}
@@ -31,6 +31,9 @@
     "typography": {
       "sans-serif": {
         "font-family": {"value": "Roboto, sans-serif"}
+      },
+      "heading": {
+        "font-family": {"value": "Roboto Medium, sans-serif"}
       }
     }
   }