@amsterdam/design-system-tokens 3.4.0 → 4.0.1

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,11 +37,13 @@
             "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,

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,126 +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"
-        },
-        "secondary": {
-          "$deprecated": "Use `currentColor` instead. Will be removed in release 4.0.0.",
-          "$value": "#202020",
-          "$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,23 +55,15 @@
             }
           },
           "line-height": {
-            "$value": "1.3",
+            "$value": 1.3,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         }
       },
       "heading": {
-        "0": {
-          "font-size": {
-            "$deprecated": "Use `ams.typography.heading.1.font-size` instead. Will be removed in release 4.0.0.",
-            "$value": "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)",
-            "$extensions": {
-              "nl.amsterdam.type": "fontSize"
-            }
-          }
-        },
         "1": {
           "font-size": {
             "$value": "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)",
@@ -77,10 +72,11 @@
             }
           },
           "line-height": {
-            "$value": "1.2",
+            "$value": 1.2,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "2": {
@@ -91,10 +87,11 @@
             }
           },
           "line-height": {
-            "$value": "1.3",
+            "$value": 1.3,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "3": {
@@ -105,10 +102,11 @@
             }
           },
           "line-height": {
-            "$value": "1.3",
+            "$value": 1.3,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "4": {
@@ -119,10 +117,11 @@
             }
           },
           "line-height": {
-            "$value": "1.4",
+            "$value": 1.4,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         },
         "5": {
@@ -133,19 +132,11 @@
             }
           },
           "line-height": {
-            "$value": "1.4",
+            "$value": 1.4,
             "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
-          }
-        },
-        "6": {
-          "font-size": {
-            "$deprecated": "Use `ams.typography.heading.5.font-size` instead. Will be removed in release 4.0.0.",
-            "$value": "{ams.typography.body-text.small.font-size}",
-            "$extensions": {
-              "nl.amsterdam.type": "fontSize"
-            }
+              "nl.amsterdam.subtype": "lineHeight"
+            },
+            "$type": "number"
           }
         }
       }