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

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"
+        }
+      }
     }
   }
 }

package/lib/tokens/viewport/lg.json

@@ -142,6 +142,24 @@
           "type": "fontSizes"
         }
       }
+    },
+    "section": {
+      "padding-block-end": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      }
     }
   }
 }

package/lib/tokens/viewport/md.json

@@ -142,6 +142,24 @@
           "type": "fontSizes"
         }
       }
+    },
+    "section": {
+      "padding-block-end": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      }
     }
   }
 }

package/lib/tokens/viewport/sm.json

@@ -142,6 +142,24 @@
           "type": "fontSizes"
         }
       }
+    },
+    "section": {
+      "padding-block-end": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      }
     }
   }
 }

package/lib/tokens/viewport/xl.json

@@ -148,6 +148,24 @@
           }
         }
       }
+    },
+    "section": {
+      "padding-block-end": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "{lux.space.400}",
+        "type": "spacing"
+      }
     }
   }
 }

package/lib/tokens/viewport/xs.json

@@ -156,6 +156,24 @@
           "type": "fontSizes"
         }
       }
+    },
+    "section": {
+      "padding-block-end": {
+        "value": "{lux.space.300}",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "{lux.space.300}",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "{lux.space.200}",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "{lux.space.200}",
+        "type": "spacing"
+      }
     }
   },
   "utrecht": {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.2.0",
   "author": "Logius",
   "description": "Design Tokens for LUX, the Design System for Logius, based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",