@lux-design-system/design-tokens 2.0.0 → 2.1.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-action.json

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

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

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

@@ -11,11 +11,11 @@
       },
       "border-radius": {
         "type": "borderRadius",
-        "value": "{lux.button.border-radius}"
+        "value": "{lux.border-radius.default}"
       },
       "border-width": {
         "type": "borderWidth",
-        "value": "{lux.button.border-width}"
+        "value": "{lux.border-width.default}"
       },
       "color": {
         "type": "color",
@@ -23,77 +23,77 @@
       },
       "font-family": {
         "type": "fontFamilies",
-        "value": "{lux.button.font-family}"
+        "value": "{lux.font-family.primary}"
       },
       "font-size": {
         "type": "fontSizes",
-        "value": "{lux.button.font-size}"
+        "value": "{product.button.font-size}"
       },
       "primary-action": {
         "font-size": {
           "type": "fontSizes",
-          "value": "{lux.button.primary.font-size}"
+          "value": "{product.button.primary.font-size}"
         },
         "background-color": {
           "type": "color",
-          "value": "{lux.button.primary.background-color}"
+          "value": "{lux.color.brand.default}"
         },
         "border-color": {
           "type": "color",
-          "value": "{lux.button.primary.border-color}"
+          "value": "{lux.color.none}"
         },
         "border-width": {
           "type": "borderWidth",
-          "value": "{lux.button.border-width}"
+          "value": "{lux.border-width.default}"
         },
         "color": {
           "type": "color",
-          "value": "{lux.button.primary.color}"
+          "value": "{lux.color.foreground.onEmphasis}"
         },
         "font-weight": {
           "type": "fontWeights",
-          "value": "{lux.button.font-weight}"
+          "value": "{lux.font-weight.bold}"
         },
         "active": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.primary.active.background-color}"
+            "value": "{lux.color.brand.default}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.primary.active.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.primary.active.color}"
+            "value": "{lux.color.foreground.onEmphasis}"
           }
         },
         "disabled": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.primary.disabled.background-color}"
+            "value": "{lux.color.background.subdued}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.primary.disabled.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.primary.disabled.color}"
+            "value": "{lux.color.foreground.subdued}"
           }
         },
         "hover": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.primary.hover.background-color}"
+            "value": "{lux.color.brand.hover}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.primary.hover.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.primary.hover.color}"
+            "value": "{lux.color.foreground.onEmphasis}"
           },
           "scale": {
             "type": "other",
@@ -103,39 +103,39 @@
         "focus": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.primary.background-color}"
+            "value": "{lux.color.brand.default}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.primary.hover.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.primary.color}"
+            "value": "{lux.color.foreground.onEmphasis}"
           }
         },
         "pressed": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.primary.hover.background-color}"
+            "value": "{lux.color.brand.hover}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.primary.hover.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.primary.hover.color}"
+            "value": "{lux.color.foreground.onEmphasis}"
           }
         },
         "line-height": {
-          "value": "{lux.button.line-height}",
+          "value": "{lux.line-height.large-scale.sm}",
           "type": "lineHeights"
         }
       },
       "font-weight": {
         "type": "fontWeights",
-        "value": "{lux.button.font-weight}"
+        "value": "{lux.font-weight.bold}"
       },
       "inline-size": {
         "type": "sizing",
@@ -144,35 +144,35 @@
       },
       "line-height": {
         "type": "lineHeights",
-        "value": "{lux.button.line-height}"
+        "value": "{lux.line-height.large-scale.sm}"
       },
       "min-block-size": {
         "type": "sizing",
-        "value": "{lux.button.min-block-size}"
+        "value": "{lux.size.target}"
       },
       "min-inline-size": {
         "type": "sizing",
-        "value": "{lux.button.min-inline-size}"
+        "value": "{lux.size.target}"
       },
       "column-gap": {
         "type": "spacing",
-        "value": "{lux.button.column-gap}"
+        "value": "{lux.space.100}"
       },
       "padding-block-start": {
         "type": "spacing",
-        "value": "{lux.button.padding-block-start}"
+        "value": "{lux.space.100}"
       },
       "padding-block-end": {
         "type": "spacing",
-        "value": "{lux.button.padding-block-end}"
+        "value": "{lux.space.100}"
       },
       "padding-inline-start": {
         "type": "spacing",
-        "value": "{lux.button.padding-inline-start}"
+        "value": "{lux.space.200}"
       },
       "padding-inline-end": {
         "type": "spacing",
-        "value": "{lux.button.padding-inline-end}"
+        "value": "{lux.space.200}"
       },
       "text-transform": {
         "type": "other",
@@ -199,7 +199,7 @@
         },
         "size": {
           "type": "sizing",
-          "value": "{lux.button.icon.size}"
+          "value": "{lux.size.icon}"
         }
       },
       "disabled": {
@@ -269,64 +269,64 @@
       "secondary-action": {
         "background-color": {
           "type": "color",
-          "value": "{lux.button.secondary.background-color}"
+          "value": "{lux.color.none}"
         },
         "border-color": {
           "type": "color",
-          "value": "{lux.button.secondary.border-color}"
+          "value": "{mode.button.secondary.border-color}"
         },
         "border-width": {
           "type": "borderWidth",
-          "value": "{lux.button.border-width}"
+          "value": "{lux.border-width.default}"
         },
         "color": {
           "type": "color",
-          "value": "{lux.button.secondary.color}"
+          "value": "{mode.button.secondary.color}"
         },
         "font-weight": {
           "type": "fontWeights",
-          "value": "{lux.button.font-weight}"
+          "value": "{lux.font-weight.bold}"
         },
         "active": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.secondary.active.background-color}"
+            "value": "{lux.color.none}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.secondary.active.border-color}"
+            "value": "{mode.button.secondary.border-color}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.secondary.active.color}"
+            "value": "{mode.button.secondary.color}"
           }
         },
         "disabled": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.secondary.disabled.background-color}"
+            "value": "{lux.color.background.subdued}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.secondary.disabled.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.secondary.disabled.color}"
+            "value": "{lux.color.foreground.subdued}"
           }
         },
         "hover": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.secondary.hover.background-color}"
+            "value": "{mode.button.secondary.hover.background-color}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.secondary.hover.border-color}"
+            "value": "{mode.button.secondary.hover.border-color}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.secondary.hover.color}"
+            "value": "{mode.button.secondary.hover.color}"
           },
           "scale": {
             "type": "other",
@@ -336,101 +336,101 @@
         "focus": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.secondary.background-color}"
+            "value": "{lux.color.none}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.secondary.border-color}"
+            "value": "{mode.button.secondary.border-color}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.secondary.color}"
+            "value": "{mode.button.secondary.color}"
           }
         },
         "pressed": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.secondary.hover.background-color}"
+            "value": "{mode.button.secondary.hover.background-color}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.secondary.hover.border-color}"
+            "value": "{mode.button.secondary.hover.border-color}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.secondary.hover.color}"
+            "value": "{mode.button.secondary.hover.color}"
           }
         },
         "line-height": {
-          "value": "{lux.button.line-height}",
+          "value": "{lux.line-height.large-scale.sm}",
           "type": "lineHeights"
         },
         "font-size": {
           "type": "fontSizes",
-          "value": "{lux.button.font-size}"
+          "value": "{product.button.font-size}"
         }
       },
       "subtle": {
         "background-color": {
           "type": "color",
-          "value": "{lux.button.tertiary.background-color}"
+          "value": "{lux.color.none}"
         },
         "border-color": {
           "type": "color",
-          "value": "{lux.button.tertiary.border-color}"
+          "value": "{lux.color.none}"
         },
         "border-width": {
           "type": "borderWidth",
-          "value": "{lux.button.border-width}"
+          "value": "{lux.border-width.default}"
         },
         "color": {
           "type": "color",
-          "value": "{lux.button.tertiary.color}"
+          "value": "{mode.button.tertiary.color}"
         },
         "font-weight": {
           "type": "fontWeights",
-          "value": "{lux.button.font-weight}"
+          "value": "{lux.font-weight.bold}"
         },
         "active": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.active.background-color}"
+            "value": "{lux.color.none}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.active.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.tertiary.active.color}"
+            "value": "{mode.button.tertiary.color}"
           }
         },
         "disabled": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.disabled.background-color}"
+            "value": "{lux.color.background.subdued}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.disabled.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.tertiary.disabled.color}"
+            "value": "{lux.color.foreground.subdued}"
           }
         },
         "hover": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.hover.background-color}"
+            "value": "{mode.button.tertiary.hover.background-color}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.hover.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.tertiary.hover.color}"
+            "value": "{mode.button.tertiary.hover.color}"
           },
           "scale": {
             "type": "other",
@@ -440,38 +440,38 @@
         "focus": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.background-color}"
+            "value": "{lux.color.none}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.tertiary.color}"
+            "value": "{mode.button.tertiary.color}"
           }
         },
         "pressed": {
           "background-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.hover.background-color}"
+            "value": "{mode.button.tertiary.hover.background-color}"
           },
           "border-color": {
             "type": "color",
-            "value": "{lux.button.tertiary.hover.border-color}"
+            "value": "{lux.color.none}"
           },
           "color": {
             "type": "color",
-            "value": "{lux.button.tertiary.hover.color}"
+            "value": "{mode.button.tertiary.hover.color}"
           }
         },
         "line-height": {
-          "value": "{lux.button.line-height}",
+          "value": "{lux.line-height.large-scale.sm}",
           "type": "lineHeights"
         },
         "font-size": {
           "type": "fontSizes",
-          "value": "{lux.button.font-size}"
+          "value": "{product.button.font-size}"
         }
       }
     }