@lux-design-system/design-tokens 2.0.0 → 2.1.0

package/lib/tokens/nl/utrecht-textarea.json

@@ -69,10 +69,6 @@
         "color": {
           "value": "{lux.color.foreground.default}",
           "type": "color"
-        },
-        "border-width": {
-          "value": "{lux.border-width.m}",
-          "type": "borderWidth"
         }
       },
       "disabled": {
@@ -115,10 +111,6 @@
         "color": {
           "value": "{lux.color.foreground.default}",
           "type": "color"
-        },
-        "border-width": {
-          "value": "{lux.border-width.default}",
-          "type": "borderWidth"
         }
       },
       "border-radius": {
@@ -148,6 +140,26 @@
       "font-size": {
         "value": "{lux.font-size.body.default}",
         "type": "fontSizes"
+      },
+      "min-block-size": {
+        "value": "{lux.size.target}",
+        "type": "sizing"
+      }
+    }
+  },
+  "lux": {
+    "textarea": {
+      "focus": {
+        "border-width": {
+          "value": "{lux.border-width.m}",
+          "type": "borderWidth"
+        }
+      },
+      "hover": {
+        "border-width": {
+          "value": "{lux.border-width.m}",
+          "type": "borderWidth"
+        }
       }
     }
   }

package/lib/tokens/product/DigiD.json

@@ -237,6 +237,48 @@
           "value": "1.1875rem"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/lib/tokens/product/Digitoegankelijk.json

@@ -237,6 +237,48 @@
           "value": "{lux.font-size.large-scale.sm}"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/lib/tokens/product/EVA.json

@@ -17,16 +17,7 @@
         "hover": {
           "parent": "product/Eila",
           "type": "color",
-          "value": "{lux.color.robijnrood.500}",
-          "$extensions": {
-            "studio.tokens": {
-              "modify": {
-                "type": "darken",
-                "value": "0.3",
-                "space": "lch"
-              }
-            }
-          },
+          "value": "#8A1641",
           "description": "Hover kleur van het product"
         }
       }
@@ -243,6 +234,48 @@
           "value": "{lux.font-size.large-scale.sm}"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/lib/tokens/product/KOOP.json

@@ -0,0 +1,284 @@
+{
+  "lux": {
+    "color": {
+      "brand": {
+        "default": {
+          "parent": "product/KOOP",
+          "type": "color",
+          "value": "{lux.color.lintblauw.500}",
+          "description": "kleur van het product"
+        },
+        "subdued": {
+          "parent": "product/KOOP",
+          "type": "color",
+          "value": "{lux.color.lintblauw.50}",
+          "description": "Subtiele kleur van het product"
+        },
+        "hover": {
+          "parent": "product/KOOP",
+          "type": "color",
+          "value": "#10345c",
+          "description": "Hover kleur van het product"
+        }
+      }
+    },
+    "border-radius": {
+      "default": {
+        "parent": "product/KOOP",
+        "type": "borderRadius",
+        "value": "4px"
+      }
+    },
+    "focus": {
+      "outline-width": {
+        "parent": "product/KOOP",
+        "type": "borderWidth",
+        "value": "2px"
+      },
+      "outline": {
+        "style": {
+          "type": "other",
+          "value": "solid"
+        }
+      }
+    },
+    "font-family": {
+      "primary": {
+        "type": "fontFamilies",
+        "value": "{ro.font-family.primary}"
+      }
+    },
+    "size": {
+      "target": {
+        "type": "sizing",
+        "value": "3rem",
+        "description": "Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. "
+      }
+    },
+    "line-height": {
+      "body": {
+        "small": {
+          "parent": "viewport (beta)/xl",
+          "type": "lineHeights",
+          "value": "{viewport.line-height.body.small}"
+        },
+        "default": {
+          "parent": "viewport (beta)/xl",
+          "type": "lineHeights",
+          "value": "{viewport.line-height.body.default}"
+        },
+        "large": {
+          "parent": "viewport (beta)/xl",
+          "type": "lineHeights",
+          "value": "{viewport.line-height.body.large}"
+        }
+      },
+      "heading": {
+        "level-1": {
+          "parent": "viewport (beta)/xl",
+          "type": "lineHeights",
+          "value": "{viewport.line-height.heading.level-1}"
+        },
+        "level-2": {
+          "parent": "viewport (beta)/xl",
+          "type": "lineHeights",
+          "value": "{viewport.line-height.heading.level-2}"
+        },
+        "level-3": {
+          "value": "{viewport.line-height.heading.level-3}",
+          "type": "lineHeights"
+        },
+        "level-4": {
+          "value": "{viewport.line-height.heading.level-4}",
+          "type": "lineHeights"
+        },
+        "level-5": {
+          "value": "{viewport.line-height.heading.level-4}",
+          "type": "lineHeights"
+        }
+      }
+    },
+    "font-size": {
+      "body": {
+        "small": {
+          "parent": "viewport (beta)/xl",
+          "type": "fontSizes",
+          "value": "{viewport.font-size.body.small}"
+        },
+        "default": {
+          "parent": "viewport (beta)/xl",
+          "type": "fontSizes",
+          "value": "{viewport.font-size.body.default}"
+        },
+        "large": {
+          "parent": "viewport (beta)/xl",
+          "type": "fontSizes",
+          "value": "{viewport.font-size.body.large}"
+        }
+      },
+      "heading": {
+        "level-1": {
+          "parent": "viewport (beta)/xl",
+          "type": "fontSizes",
+          "value": "{viewport.font-size.heading.level-1}"
+        },
+        "level-2": {
+          "parent": "viewport (beta)/xl",
+          "type": "fontSizes",
+          "value": "{viewport.font-size.heading.level-2}"
+        },
+        "level-3": {
+          "value": "{viewport.font-size.heading.level-3}",
+          "type": "fontSizes"
+        },
+        "level-4": {
+          "value": "{viewport.font-size.heading.level-4}",
+          "type": "fontSizes"
+        },
+        "level-5": {
+          "value": "{viewport.font-size.heading.level-4}",
+          "type": "fontSizes"
+        }
+      }
+    }
+  },
+  "figma": {
+    "focus": {
+      "outline-radius": {
+        "parent": "product/KOOP",
+        "type": "borderRadius",
+        "value": "6px"
+      }
+    },
+    "size": {
+      "icon": {
+        "wrapper-height": {
+          "value": "{figma.viewport.size.icon.wrapper-height}",
+          "type": "sizing"
+        }
+      }
+    },
+    "product": {
+      "value": "KOOP",
+      "type": "text"
+    }
+  },
+  "product": {
+    "button": {
+      "secondary": {
+        "background-color": {
+          "parent": "product/KOOP",
+          "type": "color",
+          "value": "{lux.color.none}",
+          "description": ""
+        },
+        "border-color": {
+          "parent": "product/KOOP",
+          "type": "color",
+          "value": "{lux.color.brand.default}",
+          "description": ""
+        },
+        "color": {
+          "parent": "product/KOOP",
+          "type": "color",
+          "value": "{lux.color.brand.default}",
+          "description": ""
+        },
+        "hover": {
+          "border-color": {
+            "parent": "product/KOOP",
+            "type": "color",
+            "value": "{lux.color.brand.hover}",
+            "description": ""
+          },
+          "color": {
+            "parent": "product/KOOP",
+            "type": "color",
+            "value": "{lux.color.brand.hover}",
+            "description": ""
+          },
+          "background-color": {
+            "parent": "product/KOOP",
+            "type": "color",
+            "value": "{lux.color.brand.subdued}",
+            "description": ""
+          }
+        }
+      },
+      "tertiary": {
+        "color": {
+          "parent": "product/KOOP",
+          "type": "color",
+          "value": "{lux.color.brand.default}",
+          "description": ""
+        },
+        "hover": {
+          "color": {
+            "parent": "product/KOOP",
+            "type": "color",
+            "value": "{lux.color.brand.hover}",
+            "description": ""
+          },
+          "background-color": {
+            "parent": "product/KOOP",
+            "type": "color",
+            "value": "{lux.color.brand.subdued}",
+            "description": ""
+          }
+        }
+      },
+      "font-size": {
+        "type": "fontSizes",
+        "value": "{lux.font-size.large-scale.sm}"
+      },
+      "primary": {
+        "font-size": {
+          "type": "fontSizes",
+          "value": "{lux.font-size.large-scale.sm}"
+        }
+      }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.bold}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
+    }
+  }
+}

package/lib/tokens/product/Logius Blauw.json

@@ -237,6 +237,48 @@
           "value": "{lux.font-size.large-scale.sm}"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/lib/tokens/product/Logius.json

@@ -237,6 +237,48 @@
           "value": "{lux.font-size.large-scale.sm}"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/lib/tokens/product/MijnOverheid.json

@@ -239,6 +239,48 @@
           "value": "{lux.font-size.large-scale.sm}"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/lib/tokens/product/NLdoc-mapping.json

@@ -237,6 +237,48 @@
           "value": "1rem"
         }
       }
+    },
+    "heading": {
+      "1": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "font-weight": {
+          "value": "{lux.font-weight.regular}",
+          "type": "fontWeights"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "5": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      },
+      "6": {
+        "color": {
+          "value": "{lux.color.brand.default}",
+          "type": "color"
+        }
+      }
     }
   }
 }