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

package/lib/tokens/component/section.json

@@ -6,19 +6,19 @@
         "type": "color"
       },
       "padding-block-end": {
-        "value": "{lux.space.400}",
+        "value": "{viewport.section.padding-block-end}",
         "type": "spacing"
       },
       "padding-block-start": {
-        "value": "{lux.space.400}",
+        "value": "{viewport.section.padding-block-start}",
         "type": "spacing"
       },
       "padding-inline-start": {
-        "value": "{lux.space.400}",
+        "value": "{viewport.section.padding-inline-start}",
         "type": "spacing"
       },
       "padding-inline-end": {
-        "value": "{lux.space.400}",
+        "value": "{viewport.section.padding-inline-end}",
         "type": "spacing"
       },
       "row-gap": {

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

@@ -0,0 +1,188 @@
+{
+  "utrecht": {
+    "accordion": {
+      "margin-block-end": {
+        "value": "0px",
+        "description": "[code-only]",
+        "type": "dimension"
+      },
+      "margin-block-start": {
+        "value": "0px",
+        "description": "[code-only]",
+        "type": "dimension"
+      },
+      "row-gap": {
+        "value": "{lux.space.100}",
+        "type": "dimension"
+      },
+      "button": {
+        "background-color": {
+          "value": "{lux.color.background.subdued}",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "{lux.color.none}",
+          "type": "color"
+        },
+        "border-radius": {
+          "value": "{lux.border-radius.default}",
+          "type": "dimension"
+        },
+        "border-width": {
+          "value": "{lux.border-width.default}",
+          "type": "dimension"
+        },
+        "color": {
+          "value": "{lux.color.foreground.default}",
+          "type": "color"
+        },
+        "gap": {
+          "value": "{lux.space.100}",
+          "type": "dimension"
+        },
+        "padding-block-end": {
+          "value": "{lux.space.150}",
+          "type": "dimension"
+        },
+        "padding-block-start": {
+          "value": "{lux.space.150}",
+          "type": "dimension"
+        },
+        "padding-inline-end": {
+          "value": "{lux.space.200}",
+          "type": "dimension"
+        },
+        "padding-inline-start": {
+          "value": "{lux.space.200}",
+          "type": "dimension"
+        },
+        "icon": {
+          "size": {
+            "value": "{lux.size.icon}",
+            "type": "dimension"
+          }
+        },
+        "active": {
+          "background-color": {
+            "value": "{lux.color.grijs.400}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "{lux.color.none}",
+            "type": "color"
+          },
+          "color": {
+            "value": "{lux.color.foreground.default}",
+            "type": "color"
+          }
+        },
+        "hover": {
+          "background-color": {
+            "value": "{lux.color.background.hover}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "{lux.color.none}",
+            "type": "color"
+          },
+          "color": {
+            "value": "{lux.color.foreground.default}",
+            "type": "color"
+          }
+        },
+        "focus-visible": {
+          "background-color": {
+            "value": "{lux.color.background.subdued}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "{lux.color.none}",
+            "type": "color"
+          },
+          "border-width": {
+            "value": "{lux.border-width.default}",
+            "type": "dimension"
+          },
+          "color": {
+            "value": "{lux.color.foreground.default}",
+            "type": "color"
+          }
+        }
+      },
+      "panel": {
+        "border-color": {
+          "value": "{lux.color.background.default}",
+          "type": "color"
+        },
+        "border-width": {
+          "value": "{lux.border-width.default}",
+          "type": "dimension"
+        },
+        "padding-block-end": {
+          "value": "{lux.space.400}",
+          "type": "dimension"
+        },
+        "padding-block-start": {
+          "value": "{lux.space.200}",
+          "type": "dimension"
+        },
+        "padding-inline-end": {
+          "value": "{lux.space.400}",
+          "type": "dimension"
+        },
+        "padding-inline-start": {
+          "value": "{lux.space.400}",
+          "type": "dimension"
+        }
+      },
+      "section": {
+        "border-color": {
+          "value": "{lux.color.background.subdued}",
+          "type": "color"
+        },
+        "border-width": {
+          "value": "{lux.border-width.default}",
+          "type": "dimension"
+        },
+        "margin-block-end": {
+          "value": "0px",
+          "description": "[code-only]",
+          "type": "dimension"
+        },
+        "margin-block-start": {
+          "value": "0px",
+          "description": "[code-only]",
+          "type": "dimension"
+        },
+        "hover": {
+          "border-color": {
+            "value": "{lux.color.background.hover}",
+            "type": "color"
+          }
+        }
+      }
+    }
+  },
+  "todo": {
+    "accordion": {
+      "button": {
+        "font-family": {
+          "value": "{utrecht.button.font-family}",
+          "type": "fontFamilies"
+        },
+        "font-size": {
+          "value": "{utrecht.button.font-size}",
+          "type": "fontSizes"
+        },
+        "font-weight": {
+          "value": "{utrecht.button.font-weight}",
+          "type": "fontWeights"
+        },
+        "line-height": {
+          "value": "{utrecht.button.line-height}",
+          "type": "lineHeights"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+{
+  "utrecht": {
+    "action": {
+      "activate": {
+        "cursor": {
+          "value": "pointer",
+          "type": "other"
+        }
+      },
+      "busy": {
+        "cursor": {
+          "value": "wait",
+          "type": "other"
+        }
+      },
+      "disabled": {
+        "cursor": {
+          "value": "not-allowed",
+          "type": "other"
+        }
+      },
+      "inert": {
+        "cursor": {
+          "value": "default",
+          "type": "other"
+        }
+      },
+      "navigate": {
+        "cursor": {
+          "value": "pointer",
+          "type": "other"
+        }
+      },
+      "submit": {
+        "cursor": {
+          "value": "pointer",
+          "type": "other"
+        }
+      }
+    }
+  }
+}

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

@@ -7,80 +7,80 @@
       },
       "border-color": {
         "type": "color",
-        "value": "{lux.alert.border-color}"
+        "value": "{lux.color.none}"
       },
       "border-radius": {
         "type": "borderRadius",
-        "value": "{lux.alert.border-radius}"
+        "value": "{lux.border-radius.default}"
       },
       "border-width": {
         "type": "borderWidth",
-        "value": "{lux.alert.border-width}"
+        "value": "{lux.border-width.default}"
       },
       "color": {
         "type": "color",
-        "value": "{lux.alert.color}"
+        "value": "{lux.color.grijs.700}"
       },
       "column-gap": {
         "type": "spacing",
-        "value": "{lux.alert.column-gap}"
+        "value": "{lux.space.100}"
       },
       "padding-block-start": {
         "type": "spacing",
-        "value": "{lux.alert.padding-block-start}"
+        "value": "{lux.space.150}"
       },
       "padding-block-end": {
         "type": "spacing",
-        "value": "{lux.alert.padding-block-end}"
+        "value": "{lux.space.150}"
       },
       "padding-inline-start": {
         "type": "spacing",
-        "value": "{lux.alert.padding-inline-start}"
+        "value": "{lux.space.150}"
       },
       "padding-inline-end": {
         "type": "spacing",
-        "value": "{lux.alert.padding-inline-end}"
+        "value": "{lux.space.150}"
       },
       "warning": {
         "background-color": {
           "type": "color",
-          "value": "{lux.alert.warning.background-color}"
+          "value": "{lux.color.feedback.warning.subdued}"
         },
         "color": {
           "type": "color",
-          "value": "{lux.alert.color}"
+          "value": "{lux.color.grijs.700}"
         },
         "border-color": {
           "type": "color",
-          "value": "{lux.alert.border-color}"
+          "value": "{lux.color.none}"
         }
       },
       "error": {
         "background-color": {
           "type": "color",
-          "value": "{lux.alert.error.background-color}"
+          "value": "{lux.color.feedback.error.subdued}"
         },
         "color": {
           "type": "color",
-          "value": "{lux.alert.color}"
+          "value": "{lux.color.grijs.700}"
         },
         "border-color": {
           "type": "color",
-          "value": "{lux.alert.border-color}"
+          "value": "{lux.color.none}"
         }
       },
       "ok": {
         "background-color": {
           "type": "color",
-          "value": "{lux.alert.success.background-color}"
+          "value": "{lux.color.feedback.success.subdued}"
         },
         "color": {
           "type": "color",
-          "value": "{lux.alert.color}"
+          "value": "{lux.color.grijs.700}"
         },
         "border-color": {
           "type": "color",
-          "value": "{lux.alert.border-color}"
+          "value": "{lux.color.none}"
         }
       },
       "icon": {
@@ -117,7 +117,7 @@
           }
         },
         "size": {
-          "value": "{lux.alert.icon.size}",
+          "value": "1.5rem",
           "type": "sizing"
         }
       },
@@ -130,21 +130,35 @@
       "info": {
         "background-color": {
           "type": "color",
-          "value": "{lux.alert.info.background-color}"
+          "value": "{lux.color.feedback.info.subdued}"
         },
         "color": {
           "type": "color",
-          "value": "{lux.alert.color}"
+          "value": "{lux.color.grijs.700}"
         },
         "border-color": {
           "type": "color",
-          "value": "{lux.alert.border-color}"
+          "value": "{lux.color.none}"
         }
       }
     }
   },
   "lux": {
     "alert": {
+      "color": {
+        "type": "color",
+        "value": "{lux.color.grijs.700}"
+      },
+      "icon": {
+        "inset-block-start": {
+          "value": "{lux.space.25}",
+          "type": "spacing"
+        },
+        "size": {
+          "value": "1.5rem",
+          "type": "sizing"
+        }
+      },
       "heading": {
         "font-family": {
           "value": "{lux.font-family.primary}",