@amsterdam/design-system-tokens 3.3.0 → 4.0.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.3.0",
+  "version": "4.0.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
-    "style-dictionary": "5.3.3"
+    "style-dictionary": "5.4.0"
   },
   "scripts": {
     "clean": "rimraf dist/",

package/src/brand/ams/aspect-ratio.tokens.json

@@ -2,22 +2,40 @@
   "ams": {
     "aspect-ratio": {
       "9-16": {
-        "$value": "9 / 16"
+        "$value": "9 / 16",
+        "$extensions": {
+          "nl.amsterdam.type": "aspectRatio"
+        }
       },
       "3-4": {
-        "$value": "3 / 4"
+        "$value": "3 / 4",
+        "$extensions": {
+          "nl.amsterdam.type": "aspectRatio"
+        }
       },
       "1-1": {
-        "$value": "1 / 1"
+        "$value": "1 / 1",
+        "$extensions": {
+          "nl.amsterdam.type": "aspectRatio"
+        }
       },
       "4-3": {
-        "$value": "4 / 3"
+        "$value": "4 / 3",
+        "$extensions": {
+          "nl.amsterdam.type": "aspectRatio"
+        }
       },
       "16-9": {
-        "$value": "16 / 9"
+        "$value": "16 / 9",
+        "$extensions": {
+          "nl.amsterdam.type": "aspectRatio"
+        }
       },
       "16-5": {
-        "$value": "16 / 5"
+        "$value": "16 / 5",
+        "$extensions": {
+          "nl.amsterdam.type": "aspectRatio"
+        }
       }
     }
   }

package/src/brand/ams/border.compact.tokens.json

@@ -37,6 +37,26 @@
           "$extensions": {
             "nl.amsterdam.type": "borderWidth"
           }
+        },
+        "negative": {
+          "m": {
+            "$value": {
+              "value": -0.0625,
+              "unit": "rem"
+            },
+            "$extensions": {
+              "nl.amsterdam.type": "borderWidth"
+            }
+          },
+          "xl": {
+            "$value": {
+              "value": -0.1875,
+              "unit": "rem"
+            },
+            "$extensions": {
+              "nl.amsterdam.type": "borderWidth"
+            }
+          }
         }
       }
     }

package/src/brand/ams/border.tokens.json

@@ -7,6 +7,7 @@
             "value": 0.0625,
             "unit": "rem"
           },
+          "$description": "1px equivalent. For subtle borders like hover reinforcement.",
           "$extensions": {
             "nl.amsterdam.type": "borderWidth"
           }
@@ -16,6 +17,7 @@
             "value": 0.125,
             "unit": "rem"
           },
+          "$description": "2px equivalent. The default border width for inputs and containers.",
           "$extensions": {
             "nl.amsterdam.type": "borderWidth"
           }
@@ -25,6 +27,7 @@
             "value": 0.1875,
             "unit": "rem"
           },
+          "$description": "3px equivalent.",
           "$extensions": {
             "nl.amsterdam.type": "borderWidth"
           }
@@ -34,9 +37,31 @@
             "value": 0.25,
             "unit": "rem"
           },
+          "$description": "4px equivalent. For strong emphasis like active tab indicators.",
           "$extensions": {
             "nl.amsterdam.type": "borderWidth"
           }
+        },
+        "negative": {
+          "$description": "Negative values of border widths, used to offset elements inward by the border thickness.",
+          "m": {
+            "$value": {
+              "value": -0.125,
+              "unit": "rem"
+            },
+            "$extensions": {
+              "nl.amsterdam.type": "borderWidth"
+            }
+          },
+          "xl": {
+            "$value": {
+              "value": -0.25,
+              "unit": "rem"
+            },
+            "$extensions": {
+              "nl.amsterdam.type": "borderWidth"
+            }
+          }
         }
       }
     }

package/src/brand/ams/color.compact.tokens.json

@@ -0,0 +1,15 @@
+{
+  "ams": {
+    "color": {
+      "background": {
+        "body": {
+          "$value": "#e8e8e8"
+        },
+        "default": {
+          "$value": "#ffffff"
+        }
+      }
+    }
+  },
+  "$type": "color"
+}

package/src/brand/ams/color.tokens.json

@@ -2,121 +2,109 @@
   "ams": {
     "color": {
       "background": {
-        "$value": "#ffffff",
-        "$type": "color"
+        "body": {
+          "$value": "#ffffff"
+        },
+        "default": {
+          "$value": "#ffffff",
+          "$description": "The default background colour for form controls and smaller surfaces."
+        }
       },
       "feedback": {
         "error": {
-          "$value": "#ec0000",
-          "$type": "color"
+          "$value": "#ec0000"
         },
         "info": {
-          "$value": "#009de6",
-          "$type": "color"
+          "$value": "#009de6"
         },
         "success": {
-          "$value": "#00893c",
-          "$type": "color"
+          "$value": "#00893c"
         },
         "warning": {
-          "$value": "#ff9100",
-          "$type": "color"
+          "$value": "#ff9100"
         }
       },
       "highlight": {
+        "$description": "Accent colours for visual distinction, not for interactive elements.",
         "azure": {
-          "$value": "#009de6",
-          "$type": "color"
+          "$value": "#009de6"
         },
         "green": {
-          "$value": "#00893c",
-          "$type": "color"
+          "$value": "#00893c"
         },
         "lime": {
-          "$value": "#bed200",
-          "$type": "color"
+          "$value": "#bed200"
         },
         "magenta": {
-          "$value": "#e50082",
-          "$type": "color"
+          "$value": "#e50082"
         },
         "orange": {
-          "$value": "#ff9100",
-          "$type": "color"
+          "$value": "#ff9100"
         },
         "purple": {
-          "$value": "#a00078",
-          "$type": "color"
+          "$value": "#a00078"
         },
         "yellow": {
-          "$value": "#ffe600",
-          "$type": "color"
+          "$value": "#ffe600"
         }
       },
       "interactive": {
+        "$description": "Colours for interactive elements like links and buttons.",
         "contrast": {
           "$value": "#202020",
-          "$type": "color"
+          "$description": "For interactive elements on coloured backgrounds where the default blue lacks sufficient contrast."
         },
         "default": {
-          "$value": "#004699",
-          "$type": "color"
+          "$value": "#004699"
         },
         "disabled": {
-          "$value": "#767676",
-          "$type": "color"
+          "$value": "#767676"
         },
         "hover": {
-          "$value": "#003677",
-          "$type": "color"
+          "$value": "#003677"
         },
         "invalid": {
           "default": {
-            "$value": "#ec0000",
-            "$type": "color"
+            "$value": "#ec0000"
           },
           "hover": {
-            "$value": "#b70000",
-            "$type": "color"
+            "$value": "#b70000"
           }
         },
         "inverse": {
           "$value": "#ffffff",
-          "$type": "color"
+          "$description": "For interactive elements on dark backgrounds."
         }
       },
       "progress": {
+        "$description": "Colours for progress indicators like step lists.",
         "current": {
-          "$value": "#00893c",
-          "$type": "color"
+          "$value": "#00893c"
         },
         "completed": {
-          "$value": "#00893c",
-          "$type": "color"
+          "$value": "#00893c"
         },
         "upcoming": {
-          "$value": "#767676",
-          "$type": "color"
+          "$value": "#767676"
         }
       },
       "separator": {
         "$value": "#d1d1d1",
-        "$type": "color"
+        "$description": "For row borders in tables."
       },
       "text": {
         "default": {
-          "$value": "#202020",
-          "$type": "color"
+          "$value": "#202020"
         },
         "inverse": {
-          "$value": "#ffffff",
-          "$type": "color"
+          "$value": "#ffffff"
         },
         "secondary": {
           "$value": "#767676",
-          "$type": "color"
+          "$description": "For supporting text that is less prominent than the default, e.g. metadata."
         }
       }
     }
-  }
+  },
+  "$type": "color"
 }

package/src/brand/ams/cursor.tokens.json

@@ -2,10 +2,17 @@
   "ams": {
     "cursor": {
       "disabled": {
-        "$value": "not-allowed"
+        "$value": "not-allowed",
+        "$extensions": {
+          "nl.amsterdam.type": "cursor"
+        }
       },
       "interactive": {
-        "$value": "pointer"
+        "$value": "pointer",
+        "$description": "All interactive elements in their default state that lack a cursor style.",
+        "$extensions": {
+          "nl.amsterdam.type": "cursor"
+        }
       }
     }
   }

package/src/brand/ams/focus.tokens.json

@@ -7,6 +7,7 @@
           "unit": "rem"
         },
         "$type": "dimension",
+        "$description": "The distance between a focused element and its outline. Provides breathing room so the outline doesn't touch the element.",
         "$extensions": {
           "nl.amsterdam.subtype": "space"
         }

package/src/brand/ams/space.compact.tokens.json

@@ -17,19 +17,31 @@
       },
       "m": {
         "$value": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
-        "$type": "dimension"
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       },
       "l": {
         "$value": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
-        "$type": "dimension"
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       },
       "xl": {
         "$value": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
-        "$type": "dimension"
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       },
       "2xl": {
         "$value": "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)",
-        "$type": "dimension"
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       }
     }
   }

package/src/brand/ams/space.tokens.json

@@ -1,29 +1,54 @@
 {
   "ams": {
     "space": {
+      "$description": "A responsive spacing scale. All values scale fluidly between 320px and 1600px viewports.",
       "xs": {
         "$value": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
-        "$type": "dimension"
+        "$description": "Scales from 4px to 6px.",
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       },
       "s": {
         "$value": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-        "$type": "dimension"
+        "$description": "Scales from 8px to 12px.",
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       },
       "m": {
         "$value": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
-        "$type": "dimension"
+        "$description": "Scales from 16px to 24px.",
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       },
       "l": {
         "$value": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
-        "$type": "dimension"
+        "$description": "Scales from 24px to 36px.",
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       },
       "xl": {
         "$value": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)",
-        "$type": "dimension"
+        "$description": "Scales from 36px to 60px.",
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       },
       "2xl": {
         "$value": "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)",
-        "$type": "dimension"
+        "$description": "Scales from 48px to 90px.",
+        "$extensions": {
+          "nl.amsterdam.type": "dimension",
+          "nl.amsterdam.subtype": "space"
+        }
       }
     }
   }

package/src/brand/ams/typography.compact.tokens.json

@@ -10,10 +10,11 @@
           "$type": "dimension"
         },
         "line-height": {
-          "$value": "1.5",
+          "$value": 1.5,
           "$extensions": {
-            "nl.amsterdam.type": "lineHeight"
-          }
+            "nl.amsterdam.subtype": "lineHeight"
+          },
+          "$type": "number"
         },
         "small": {
           "font-size": {
@@ -24,10 +25,11 @@
             "$type": "dimension"
           },
           "line-height": {
-            "$value": "1.4",
+            "$value": 1.4,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "large": {
@@ -38,10 +40,11 @@
             }
           },
           "line-height": {
-            "$value": "1.4",
+            "$value": 1.4,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "x-large": {
@@ -52,10 +55,11 @@
             }
           },
           "line-height": {
-            "$value": "1.3",
+            "$value": 1.3,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         }
       },
@@ -68,10 +72,11 @@
             }
           },
           "line-height": {
-            "$value": "1.2",
+            "$value": 1.2,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "2": {
@@ -82,10 +87,11 @@
             }
           },
           "line-height": {
-            "$value": "1.3",
+            "$value": 1.3,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "3": {
@@ -96,10 +102,11 @@
             }
           },
           "line-height": {
-            "$value": "1.3",
+            "$value": 1.3,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "4": {
@@ -110,10 +117,11 @@
             }
           },
           "line-height": {
-            "$value": "1.4",
+            "$value": 1.4,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "5": {
@@ -124,10 +132,11 @@
             }
           },
           "line-height": {
-            "$value": "1.4",
+            "$value": 1.4,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         }
       }