@dictu/design-tokens 1.5.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "author": "Dienst ICT Uitvoering",
   "description": "Design Tokens for DICTU Design system, based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,11 +23,14 @@
     "watch:style-dictionary": "chokidar --follow-symlinks --initial --command 'npm run build' 'src/**/*.tokens.json'"
   },
   "devDependencies": {
-    "@tokens-studio/sd-transforms": "1.2.3",
+    "@tokens-studio/sd-transforms": "2.0.1",
     "chokidar-cli": "3.0.0",
     "glob": "^11.0.2",
     "npm-run-all": "4.1.5",
     "rimraf": "6.0.1",
-    "style-dictionary": "^4.4.0"
+    "style-dictionary": "^5.1.1"
+  },
+  "overrides": {
+    "expr-eval-fork": "3.0.0"
   }
 }

package/src/$metadata.json

@@ -14,13 +14,16 @@
     "components/icon.tokens",
     "components/link-list.tokens",
     "components/link.tokens",
+    "components/list.tokens",
     "components/logo.tokens",
     "components/navigation-bar.tokens",
     "components/page-footer.tokens",
     "components/page-header.tokens",
     "components/paragraph.tokens",
+    "components/searchbar.tokens.wip",
     "components/section.tokens",
     "components/skip-link.tokens",
+    "components/table.tokens",
     "components/timeline.tokens"
   ]
 }

package/src/$themes.json

@@ -25,7 +25,8 @@
       "components/hero.tokens": "enabled",
       "components/grid.tokens": "enabled",
       "components/card.tokens": "enabled",
-      "components/timeline.tokens": "enabled"
+      "components/timeline.tokens": "enabled",
+      "components/table.tokens": "enabled"
     },
     "$figmaVariableReferences": {},
     "group": "GovNL"

package/src/common/common.tokens.json

@@ -7,7 +7,7 @@
       }
     },
     "brand": {
-      "primary": {
+      "primary-1": {
         "50": {
           "$type": "color",
           "$value": "{govnl.color.lintblauw.50}"
@@ -31,32 +31,32 @@
         "500": {
           "$type": "color",
           "$value": "{govnl.color.lintblauw.500}"
+        }
+      },
+      "primary-2": {
+        "50": {
+          "$type": "color",
+          "$value": "{govnl.color.groen.50}"
         },
-        "active": {
-          "$extensions": {
-            "studio.tokens": {
-              "modify": {
-                "type": "darken",
-                "value": "0.4",
-                "space": "srgb"
-              }
-            }
-          },
+        "100": {
           "$type": "color",
-          "$value": "{govnl.color.lintblauw.500}"
+          "$value": "{govnl.color.groen.100}"
         },
-        "hover": {
-          "$extensions": {
-            "studio.tokens": {
-              "modify": {
-                "type": "darken",
-                "value": "0.2",
-                "space": "srgb"
-              }
-            }
-          },
+        "200": {
           "$type": "color",
-          "$value": "{govnl.color.lintblauw.500}"
+          "$value": "{govnl.color.groen.200}"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "{govnl.color.groen.300}"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "{govnl.color.groen.400}"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "{govnl.color.groen.500}"
         }
       },
       "accent-1": {
@@ -70,6 +70,12 @@
           "$type": "color",
           "$value": "{govnl.color.oranje.500}"
         }
+      },
+      "accent-3": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.color.robijnrood.500}"
+        }
       }
     },
     "document": {
@@ -141,7 +147,7 @@
     "heading": {
       "color": {
         "$type": "color",
-        "$value": "{govnl.color.lintblauw.500}"
+        "$value": "{govnl.brand.primary-1.500}"
       },
       "font-family": {
         "$type": "fontFamilies",
@@ -323,7 +329,7 @@
     "interaction": {
       "color": {
         "$type": "color",
-        "$value": "{govnl.brand.primary.500}"
+        "$value": "{govnl.color.lintblauw.500}"
       },
       "active": {
         "color": {
@@ -337,7 +343,7 @@
             }
           },
           "$type": "color",
-          "$value": "{govnl.brand.primary.500}"
+          "$value": "{govnl.brand.primary-1.500}"
         }
       },
       "hover": {
@@ -352,7 +358,7 @@
             }
           },
           "$type": "color",
-          "$value": "{govnl.brand.primary.500}"
+          "$value": "{govnl.brand.primary-1.500}"
         }
       }
     },

package/src/components/breadcrumb.tokens.json

@@ -32,7 +32,7 @@
         },
         "padding-inline-start": {
           "$type": "dimension",
-          "$value": "0px {govnl.space.xs}"
+          "$value": "{govnl.space.xs}"
         },
         "color": {
           "$type": "color",
@@ -45,7 +45,7 @@
           },
           "text-decoration": {
             "$type": "textDecoration",
-            "$value": "None"
+            "$value": "underline"
           }
         },
         "focus-visible": {
@@ -59,7 +59,7 @@
           },
           "text-decoration": {
             "$type": "textDecoration",
-            "$value": "None"
+            "$value": "underline"
           }
         },
         "hover": {
@@ -69,7 +69,7 @@
           },
           "text-decoration": {
             "$type": "textDecoration",
-            "$value": "None"
+            "$value": "underline"
           }
         },
         "current": {
@@ -83,6 +83,28 @@
           "$value": "underline"
         }
       },
+      "current": {
+        "padding-block-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
+        },
+        "padding-block-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
+        },
+        "padding-inline-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
+        },
+        "padding-inline-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
+        },
+        "text-decoration": {
+          "$type": "textDecoration",
+          "$value": "none"
+        }
+      },
       "separator": {
         "color": {
           "$type": "color",
@@ -93,6 +115,26 @@
           "$value": "{govnl.dimension.size.300}"
         }
       }
+    },
+    "link": {
+      "active": {
+        "text-decoration-thickness": {
+          "$type": "other",
+          "$value": "max(3px, .1875rem, .12em)"
+        }
+      },
+      "hover": {
+        "text-decoration-thickness": {
+          "$type": "other",
+          "$value": "max(3px, .1875rem, .12em)"
+        }
+      },
+      "focus-visible": {
+        "text-decoration-thickness": {
+          "$type": "other",
+          "$value": "max(3px, .1875rem, .12em)"
+        }
+      }
     }
   }
 }

package/src/components/card.tokens.json

@@ -122,7 +122,7 @@
       "accent": {
         "background-color": {
           "$type": "color",
-          "$value": "{govnl.brand.primary.500}"
+          "$value": "{govnl.brand.primary-1.500}"
         },
         "border-color": {
           "$type": "color",
@@ -144,7 +144,7 @@
               }
             },
             "$type": "color",
-            "$value": "{govnl.brand.primary.500}"
+            "$value": "{govnl.brand.primary-1.500}"
           },
           "border-color": {
             "$type": "color",
@@ -167,7 +167,7 @@
               }
             },
             "$type": "color",
-            "$value": "{govnl.brand.primary.500}"
+            "$value": "{govnl.brand.primary-1.500}"
           },
           "border-color": {
             "$type": "color",
@@ -195,7 +195,7 @@
         "heading": {
           "color": {
             "$type": "color",
-            "$value": "{govnl.document.inverse.color}"
+            "$value": "{govnl.color.white}"
           },
           "hover": {
             "color": {

package/src/components/hero.tokens.json

@@ -24,7 +24,7 @@
         },
         "background-color": {
           "$type": "color",
-          "$value": "{govnl.brand.primary.500}"
+          "$value": "{govnl.brand.primary-1.500}"
         },
         "color": {
           "$type": "color",

package/src/components/list.tokens.json

@@ -0,0 +1,32 @@
+{
+  "govnl": {
+    "list": {
+      "list-item": {
+        "gap": {
+          "$type": "dimension",
+          "$value": "{govnl.dimension.size.50}"
+        },
+        "level2": {
+          "indent": {
+            "$type": "spacing",
+            "$value": "{govnl.dimension.size.300}"
+          }
+        },
+        "level3": {
+          "indent": {
+            "$type": "spacing",
+            "$value": "{govnl.dimension.size.600}"
+          }
+        }
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.size.100}"
+      },
+      "prefix": {
+        "$type": "sizing",
+        "$value": "{govnl.dimension.size.300}"
+      }
+    }
+  }
+}

package/src/components/navigation-bar.tokens.json

@@ -28,12 +28,12 @@
       "icon": {
         "color": {
           "$type": "color",
-          "$value": "{govnl.brand.primary.500}"
+          "$value": "{govnl.brand.primary-1.500}"
         },
         "active": {
           "color": {
             "$type": "color",
-            "$value": "{govnl.brand.primary.500}"
+            "$value": "{govnl.brand.primary-1.500}"
           }
         },
         "size": {
@@ -45,7 +45,7 @@
         "active": {
           "background-color": {
             "$type": "color",
-            "$value": "{govnl.brand.primary.500}"
+            "$value": "{govnl.brand.primary-1.500}"
           },
           "color": {
             "$type": "color",
@@ -58,26 +58,26 @@
         },
         "color": {
           "$type": "color",
-          "$value": "{govnl.brand.primary.500}"
+          "$value": "{govnl.brand.primary-1.500}"
         },
         "focus": {
           "background-color": {
             "$type": "color",
-            "$value": "{govnl.brand.primary.50}"
+            "$value": "{govnl.brand.primary-1.50}"
           },
           "color": {
             "$type": "color",
-            "$value": "{govnl.brand.primary.500}"
+            "$value": "{govnl.brand.primary-1.500}"
           }
         },
         "hover": {
           "background-color": {
             "$type": "color",
-            "$value": "{govnl.brand.primary.50}"
+            "$value": "{govnl.brand.primary-1.50}"
           },
           "color": {
             "$type": "color",
-            "$value": "{govnl.brand.primary.500}"
+            "$value": "{govnl.brand.primary-1.500}"
           }
         },
         "padding-block": {
@@ -103,11 +103,11 @@
       },
       "color": {
         "$type": "color",
-        "$value": "{govnl.brand.primary.500}"
+        "$value": "{govnl.brand.primary-1.500}"
       },
       "border-color": {
         "$type": "color",
-        "$value": "{govnl.brand.primary.400}"
+        "$value": "{govnl.brand.primary-1.400}"
       },
       "search": {
         "padding-block": {
@@ -134,7 +134,7 @@
         },
         "color": {
           "$type": "color",
-          "$value": "{govnl.brand.primary.500}"
+          "$value": "{govnl.brand.primary-1.500}"
         },
         "background-color": {
           "$type": "color",

package/src/components/page-footer.tokens.json

@@ -7,7 +7,7 @@
       },
       "color": {
         "$type": "color",
-        "$value": "{govnl.brand.primary.500}"
+        "$value": "{govnl.brand.primary-1.500}"
       },
       "padding-block-start": {
         "$type": "dimension",
@@ -33,7 +33,7 @@
       },
       "border-color": {
         "$type": "color",
-        "$value": "{govnl.brand.primary.200}"
+        "$value": "{govnl.brand.primary-1.200}"
       }
     }
   }

package/src/components/paragraph.tokens.json

@@ -24,11 +24,11 @@
       "lead": {
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{govnl.document.font-size}"
+          "$value": "{govnl.typography.font-size.xl}"
         },
         "font-weight": {
           "$type": "fontWeights",
-          "$value": "{govnl.document.strong.font-weight}"
+          "$value": "{govnl.document.font-weight}"
         },
         "line-height": {
           "$type": "lineHeights",

package/src/components/searchbar.tokens.wip.json

@@ -0,0 +1,66 @@
+{
+  "govnl": {
+    "searchbar": {
+      "input": {
+        "border": {
+          "border-radius": {
+            "$type": "borderRadius",
+            "$value": "{govnl.border.border-radius.sm}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.border-color}"
+          },
+          "border-width": {
+            "$type": "borderWidth",
+            "$value": "{govnl.border.border-width.sm}"
+          }
+        },
+        "padding-block-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
+        },
+        "padding-block-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
+        },
+        "padding-inline-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.sm}"
+        },
+        "padding-inline-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.sm}"
+        },
+        "placeholder": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.placeholder.color}"
+          }
+        }
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.size.50}"
+      }
+    },
+    "input": {
+      "placeholder": {
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.document.font-size}"
+        }
+      }
+    }
+  },
+  "searchbar": {
+    "input": {
+      "placeholder": {
+        "font-family": {
+          "$type": "fontFamilies",
+          "$value": "{govnl.document.font-family}"
+        }
+      }
+    }
+  }
+}

package/src/components/table.tokens.json

@@ -0,0 +1,162 @@
+{
+  "govnl": {
+    "table": {
+      "margin-block-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.sm}"
+      },
+      "margin-block-end": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "caption": {
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.xl}"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.document.font-weight}"
+        },
+        "text-align": {
+          "$type": "other",
+          "$value": "start"
+        },
+        "margin-block-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.sm}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.document.color}"
+        }
+      },
+      "header": {
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.heading.font-weight}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.heading.color}"
+        },
+        "border-block-end-color": {
+          "$type": "color",
+          "$value": "{govnl.line.strong.border-color}"
+        },
+        "border-block-end-width": {
+          "$type": "border",
+          "$value": "{govnl.border.border-width.md}"
+        },
+        "sticky": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.color.white}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          },
+          "border-block-end-color": {
+            "$type": "color",
+            "$value": "{govnl.line.strong.border-color}"
+          },
+          "border-block-end-width": {
+            "$type": "border",
+            "$value": "2px"
+          }
+        },
+        "icon": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.color}"
+          }
+        }
+      },
+      "footer": {
+        "sticky": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.color.white}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          },
+          "border-block-start-color": {
+            "$type": "color",
+            "$value": "{govnl.line.strong.border-color}"
+          },
+          "border-block-start-width": {
+            "$type": "border",
+            "$value": "2px"
+          }
+        }
+      },
+      "cell": {
+        "padding-block-end": {
+          "$type": "dimension",
+          "$value": "0.5em"
+        },
+        "padding-block-start": {
+          "$type": "dimension",
+          "$value": "0.5em"
+        },
+        "padding-inline-end": {
+          "$type": "dimension",
+          "$value": "0.4em"
+        },
+        "padding-inline-start": {
+          "$type": "dimension",
+          "$value": "0.4em"
+        },
+        "selected": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.brand.primary-1.50}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          }
+        },
+        "icon": {
+          "size": {
+            "$type": "sizing",
+            "$value": "1em"
+          }
+        }
+      },
+      "row": {
+        "border-block-end-width": {
+          "$type": "border",
+          "$value": "{govnl.border.border-width.sm}"
+        },
+        "border-block-end-color": {
+          "$type": "color",
+          "$value": "{govnl.line.border-color}"
+        },
+        "alternate-odd": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.color.white}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          }
+        },
+        "alternate-even": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          },
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.color.grijs.100}"
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/timeline.tokens.json

@@ -60,7 +60,7 @@
       "connector": {
         "color": {
           "$type": "color",
-          "$value": "{govnl.brand.primary.500}"
+          "$value": "{govnl.brand.primary-1.500}"
         },
         "padding-inline-start": {
           "$type": "dimension",