@dictu/design-tokens 1.6.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "1.6.0",
+  "version": "2.1.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

@@ -8,21 +8,31 @@
     "components/card.tokens",
     "components/container.tokens",
     "components/figure.tokens",
+    "components/form-elements/checkbox.tokens",
+    "components/form-elements/date-input.tokens",
+    "components/form-elements/fieldset.tokens",
+    "components/form-elements/form-field.tokens",
+    "components/form-elements/label.tokens",
+    "components/form-elements/radio-button.tokens",
+    "components/form-elements/select.tokens",
+    "components/form-elements/text-area.tokens",
+    "components/form-elements/text-input.tokens",
     "components/grid.tokens",
     "components/heading.tokens",
     "components/hero.tokens",
     "components/icon.tokens",
     "components/link-list.tokens",
     "components/link.tokens",
-    "components/list.tokens.wip",
+    "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.wip",
+    "components/table.tokens",
     "components/timeline.tokens"
   ]
 }

package/src/$themes.json

@@ -26,7 +26,18 @@
       "components/grid.tokens": "enabled",
       "components/card.tokens": "enabled",
       "components/timeline.tokens": "enabled",
-      "components/table.tokens.wip": "enabled"
+      "components/table.tokens": "enabled",
+      "components/list.tokens": "enabled",
+      "components/searchbar.tokens.wip": "enabled",
+      "components/form-elements/checkbox.tokens": "enabled",
+      "components/form-elements/date-input.tokens": "enabled",
+      "components/form-elements/fieldset.tokens": "enabled",
+      "components/form-elements/form-field.tokens": "enabled",
+      "components/form-elements/label.tokens": "enabled",
+      "components/form-elements/radio-button.tokens": "enabled",
+      "components/form-elements/select.tokens": "enabled",
+      "components/form-elements/text-area.tokens": "enabled",
+      "components/form-elements/text-input.tokens": "enabled"
     },
     "$figmaVariableReferences": {},
     "group": "GovNL"

package/src/common/common.tokens.json

@@ -280,15 +280,19 @@
       "focus": {
         "background-color": {
           "$type": "color",
-          "$value": "{govnl.color.white}"
+          "$value": "{govnl.focus.background-color}"
         },
-        "border-color": {
+        "outline-color": {
           "$type": "color",
-          "$value": "{govnl.color.black}"
+          "$value": "{govnl.focus.outline-color}"
         },
         "color": {
           "$type": "color",
-          "$value": "{govnl.color.black}"
+          "$value": "{govnl.focus.color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.border-color}"
         }
       },
       "invalid": {
@@ -324,6 +328,26 @@
           "$type": "color",
           "$value": "{govnl.color.grijs.600}"
         }
+      },
+      "active": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.color.grijs.100}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.color.grijs.800}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.color.grijs.900}"
+        }
+      },
+      "strong": {
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.typography.font-weight.bold}"
+        }
       }
     },
     "interaction": {

package/src/components/button.tokens.json

@@ -214,24 +214,24 @@
       "icon-only": {
         "background-color": {
           "$type": "color",
-          "$value": "transparent"
+          "$value": "{govnl.interaction.color}"
         },
         "border-color": {
           "$type": "color",
-          "$value": "transparent"
+          "$value": "transparant"
         },
         "color": {
           "$type": "color",
-          "$value": "{govnl.interaction.color}"
+          "$value": "{govnl.color.white}"
         },
         "hover": {
           "color": {
             "$type": "color",
-            "$value": "{govnl.interaction.hover.color}"
+            "$value": "{govnl.color.white}"
           },
           "background-color": {
             "$type": "color",
-            "$value": "{govnl.color.grijs.50}"
+            "$value": "{govnl.interaction.hover.color}"
           },
           "border-color": {
             "$type": "color",
@@ -241,7 +241,7 @@
         "active": {
           "color": {
             "$type": "color",
-            "$value": "{govnl.interaction.active.color}"
+            "$value": "{govnl.color.white}"
           },
           "border-color": {
             "$type": "color",
@@ -249,7 +249,7 @@
           },
           "background-color": {
             "$type": "color",
-            "$value": "{govnl.color.grijs.50}"
+            "$value": "{govnl.interaction.active.color}"
           }
         },
         "disabled": {
@@ -319,7 +319,7 @@
       },
       "line-height": {
         "$type": "lineHeights",
-        "$value": "{govnl.document.line-height}"
+        "$value": "{govnl.typography.line-height.sm}"
       },
       "icon": {
         "size": {
@@ -354,6 +354,66 @@
       "column-gap": {
         "$type": "dimension",
         "$value": "{govnl.gap-content.min} / 2"
+      },
+      "small": {
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.sm}"
+        }
+      }
+    },
+    "button-small": {
+      "icon-only": {
+        "padding-block-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.2xs}"
+        },
+        "padding-block-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.2xs}"
+        },
+        "padding-inline-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.2xs}"
+        },
+        "padding-inline-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.2xs}"
+        }
+      },
+      "icon": {
+        "size": {
+          "$type": "dimension",
+          "$value": "1em"
+        }
+      },
+      "padding-block-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.2xs}"
+      },
+      "padding-block-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.2xs}"
+      },
+      "padding-inline-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-inline-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "min-block-size": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.size.500}"
+      },
+      "min-inline-size": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.size.500}"
+      },
+      "column-gap": {
+        "$type": "dimension",
+        "$value": "{govnl.gap-content.min} / 4"
       }
     }
   }

package/src/components/form-elements/checkbox.tokens.json

@@ -0,0 +1,160 @@
+{
+  "govnl": {
+    "checkbox": {
+      "border-radius": {
+        "$type": "borderRadius",
+        "$value": "{govnl.border.border-radius.sm}"
+      },
+      "size": {
+        "$type": "sizing",
+        "$value": "{govnl.dimension.size.300}"
+      },
+      "unchecked": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.border-color}"
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{govnl.border.border-width.sm}"
+        },
+        "hover": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.hover.background-color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.hover.border-color}"
+          },
+          "border-width": {
+            "$type": "borderWidth",
+            "$value": "{govnl.border.border-width.md}"
+          }
+        },
+        "active": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.active.background-color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.active.border-color}"
+          },
+          "border-width": {
+            "$type": "borderWidth",
+            "$value": "{govnl.border.border-width.md}"
+          }
+        },
+        "focus": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.focus.background-color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.focus.color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.border-color}"
+          }
+        },
+        "focus-visible": {
+          "border-width": {
+            "$type": "borderWidth",
+            "$value": "{govnl.border.border-width.sm}"
+          }
+        }
+      },
+      "checked": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.interaction.color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "transparant"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.color.white}"
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{govnl.border.border-width.sm}"
+        },
+        "hover": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.hover.color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "transparant"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.white}"
+          },
+          "border-width": {
+            "$type": "borderWidth",
+            "$value": "{govnl.border.border-width.sm}"
+          }
+        },
+        "active": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.active.color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "transparant"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.white}"
+          },
+          "border-width": {
+            "$type": "borderWidth",
+            "$value": "{govnl.border.border-width.sm}"
+          }
+        },
+        "focus": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.focus.background-color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.focus.color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.border-color}"
+          }
+        },
+        "focus-visible": {
+          "border-width": {
+            "$type": "borderWidth",
+            "$value": "{govnl.border.border-width.sm}"
+          }
+        }
+      },
+      "icon": {
+        "size": {
+          "$type": "sizing",
+          "$value": "{govnl.icon.size}"
+        }
+      },
+      "column-gap": {
+        "$type": "dimension",
+        "$value": "{govnl.space.2xs}"
+      }
+    }
+  }
+}

package/src/components/form-elements/date-input.tokens.json

@@ -0,0 +1,220 @@
+{
+  "govnl": {
+    "date-input": {
+      "background-color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.background-color}"
+      },
+      "border-color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.border-color}"
+      },
+      "color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.color}"
+      },
+      "border-radius": {
+        "$type": "borderRadius",
+        "$value": "{govnl.border.border-radius.sm}"
+      },
+      "border-width": {
+        "$type": "borderWidth",
+        "$value": "{govnl.border.border-width.sm}"
+      },
+      "min-block-size": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.pointer-target.min-size}"
+      },
+      "padding-block-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-inline-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-block-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-inline-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "column-gap": {
+        "$type": "dimension",
+        "$value": "{govnl.space.3xs}"
+      },
+      "font-family": {
+        "$type": "fontFamilies",
+        "$value": "{govnl.form-control.font-family}"
+      },
+      "font-size": {
+        "$type": "fontSizes",
+        "$value": "{govnl.form-control.font-size}"
+      },
+      "font-weight": {
+        "$type": "fontWeights",
+        "$value": "{govnl.form-control.font-weight}"
+      },
+      "line-height": {
+        "$type": "lineHeights",
+        "$value": "{govnl.form-control.line-height}"
+      },
+      "hover": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.color}"
+        }
+      },
+      "focus": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.color}"
+        },
+        "outline-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.outline-color}"
+        }
+      },
+      "error": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.invalid.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.invalid.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.invalid.color}"
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{govnl.border.border-width.md}"
+        }
+      },
+      "icon": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.color}"
+        },
+        "size": {
+          "$type": "sizing",
+          "$value": "{govnl.icon.size}"
+        }
+      },
+      "active": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.active.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.active.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.active.color}"
+        }
+      }
+    },
+    "text-input": {
+      "background-color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.background-color}"
+      },
+      "border-color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.border-color}"
+      },
+      "color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.color}"
+      },
+      "hover": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.color}"
+        }
+      },
+      "focus-visible": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.color}"
+        },
+        "outline-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.outline-color}"
+        }
+      },
+      "error": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.invalid.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.invalid.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.color}"
+        }
+      },
+      "icon": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.color}"
+        }
+      },
+      "active": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.active.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.active.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.active.color}"
+        }
+      }
+    }
+  }
+}