@amsterdam/design-system-tokens 0.5.1 → 0.6.0

package/dist/index.json

@@ -25,6 +25,29 @@
       "x-wide": "16 / 9",
       "2x-wide": "32 / 9"
     },
+    "space": {
+      "grid": {
+        "xs": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)",
+        "sm": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)",
+        "md": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "lg": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
+        "xl": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)"
+      },
+      "inside": {
+        "xs": ".25rem",
+        "sm": ".5rem",
+        "md": "1rem",
+        "lg": "1.5rem",
+        "xl": "2rem"
+      },
+      "stack": {
+        "xs": ".25rem",
+        "sm": ".5rem",
+        "md": "1rem",
+        "lg": "1.5rem",
+        "xl": "2rem"
+      }
+    },
     "typography": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": {
@@ -62,6 +85,26 @@
         }
       }
     },
+    "action": {
+      "activate": {
+        "cursor": "pointer"
+      },
+      "busy": {
+        "cursor": "wait"
+      },
+      "disabled": {
+        "cursor": "not-allowed"
+      },
+      "inert": {
+        "cursor": "default"
+      },
+      "navigate": {
+        "cursor": "pointer"
+      },
+      "submit": {
+        "cursor": "pointer"
+      }
+    },
     "border-width": {
       "sm": "1px",
       "md": "2px",
@@ -102,14 +145,6 @@
         }
       }
     },
-    "spacing": {
-      "inset": {
-        "sm": "0.5rem",
-        "md": "1rem",
-        "lg": "1.5rem",
-        "xl": "2.5rem"
-      }
-    },
     "accordion": {
       "button": {
         "color": "#004699",
@@ -117,22 +152,26 @@
         "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
         "font-weight": 800,
         "line-height": "1.6",
+        "padding-block": ".5rem",
+        "padding-inline": "1rem",
         "focus": {
           "outline-offset": "2px"
         },
         "hover": {
           "box-shadow": "inset 0 0 0 2px #767676"
         }
+      },
+      "panel": {
+        "padding-block": "1rem",
+        "padding-inline": "1rem"
       }
     },
     "alert": {
       "border-width": "4px",
       "border-style": "solid",
       "gap": "1rem",
-      "padding-block-start": "1rem",
-      "padding-block-end": "1rem",
-      "padding-inline-start": "1.5rem",
-      "padding-inline-end": "1.5rem",
+      "padding-block": "1rem",
+      "padding-inline": "1.5rem",
       "error": {
         "border-color": "#EC0000"
       },
@@ -165,7 +204,7 @@
       "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "font-weight": 800,
       "line-height": "1.6",
-      "padding-inline": "0.5rem",
+      "padding-inline": ".25rem",
       "blue": {
         "background-color": "#009DE6",
         "color": "#000000"
@@ -228,23 +267,60 @@
       }
     },
     "button": {
+      "cursor": "pointer",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "line-height": "1.6",
+      "gap": "1rem",
+      "padding-block": ".25rem",
+      "padding-inline": "1rem",
+      "outline-offset": "2px",
+      "busy": {
+        "cursor": "wait"
+      },
+      "disabled": {
+        "cursor": "not-allowed"
+      },
+      "primary": {
+        "background-color": "#004699",
+        "box-shadow": "inset 0 0 0 2px #004699",
+        "color": "#FFFFFF",
+        "disabled": {
+          "background-color": "#BEBEBE",
+          "box-shadow": "inset 0 0 0 2px #BEBEBE"
+        },
+        "hover": {
+          "background-color": "#102E62",
+          "box-shadow": "inset 0 0 0 2px #102E62"
+        }
+      },
       "secondary": {
+        "background-color": "#FFFFFF",
+        "color": "#004699",
         "box-shadow": "inset 0 0 0 2px #004699",
         "hover": {
-          "box-shadow": "inset 0 0 0 3px #102E62"
+          "box-shadow": "inset 0 0 0 3px #102E62",
+          "color": "#102E62"
         },
         "disabled": {
-          "box-shadow": "inset 0 0 0 2px #BEBEBE"
+          "background-color": "#FFFFFF",
+          "box-shadow": "inset 0 0 0 2px #BEBEBE",
+          "color": "#BEBEBE"
         },
         "focus": {
           "box-shadow": "inset 0 0 0 2px #004699"
         }
       },
       "tertiary": {
+        "background-color": "transparent",
+        "color": "#004699",
         "hover": {
-          "box-shadow": "inset 0 0 0 2px #102E62"
+          "box-shadow": "inset 0 0 0 2px #102E62",
+          "color": "#102E62"
+        },
+        "disabled": {
+          "background-color": "transparent",
+          "color": "#BEBEBE"
         }
       }
     },
@@ -272,6 +348,7 @@
         "border-color": "#004699",
         "checked": {
           "background-color": "#004699",
+          "background-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")",
           "hover": {
             "background-color": "#102E62"
           }
@@ -314,6 +391,7 @@
         },
         "indeterminate": {
           "background-color": "#004699",
+          "background-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")",
           "hover": {
             "background-color": "#102E62"
           }
@@ -326,6 +404,15 @@
         "color": "#102E62"
       }
     },
+    "column": {
+      "gap": {
+        "xs": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)",
+        "sm": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)",
+        "md": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "lg": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
+        "xl": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)"
+      }
+    },
     "dialog": {
       "background-color": "#FFFFFF",
       "border": "0",
@@ -337,24 +424,26 @@
         "font-weight": 800,
         "line-height": "1.6"
       },
-      "backdrop": {
-        "background": "#0006"
-      },
       "form": {
         "gap": "1.5rem",
         "padding-block": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
         "padding-inline": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
         "max-block-size": "75vh"
       },
-      "article": {
-        "padding-inline-end": "1.5rem"
-      },
       "header": {
         "gap": "1rem"
       },
       "footer": {
-        "gap": "1rem",
-        "padding-block": "1.5rem 0"
+        "gap": "1rem"
+      }
+    },
+    "fieldset": {
+      "legend": {
+        "color": "#000000",
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
+        "font-weight": 800,
+        "line-height": "1.5"
       }
     },
     "form-label": {
@@ -364,10 +453,27 @@
       "font-weight": 800,
       "line-height": "1.5"
     },
+    "gap": {
+      "xs": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)",
+      "sm": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)",
+      "md": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+      "lg": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
+      "xl": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)"
+    },
     "grid": {
       "column-count": "4",
-      "gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+      "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+      "padding-block": {
+        "sm": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)",
+        "md": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "lg": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"
+      },
       "padding-inline": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
+      "row-gap": {
+        "sm": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)",
+        "md": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "lg": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"
+      },
       "medium": {
         "column-count": "8"
       },
@@ -376,7 +482,11 @@
       }
     },
     "header": {
-      "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"
+      "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+      "padding-block": "1rem",
+      "logo-link": {
+        "outline-offset": "2px"
+      }
     },
     "heading": {
       "color": "#000000",
@@ -565,8 +675,15 @@
         "color": "#000000"
       }
     },
+    "margin": {
+      "xs": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)",
+      "sm": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)",
+      "md": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+      "lg": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
+      "xl": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)"
+    },
     "mark": {
-      "background-color": "var(--amsterdam-color-yellow)"
+      "background-color": "#FFE600"
     },
     "mega-menu": {
       "list-category": {
@@ -582,6 +699,7 @@
       "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "font-weight": 400,
       "gap": "0.75rem",
+      "inverse-color": "#FFFFFF",
       "line-height": "1.6",
       "list-style-type": "decimal",
       "item": {
@@ -632,6 +750,7 @@
       "line-height": "1.6",
       "button": {
         "outline-offset": "2px",
+        "padding-inline": ".5rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
         "text-underline-offset": "0.375rem",
@@ -662,6 +781,62 @@
         "line-height": "1.5"
       }
     },
+    "radio": {
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "outline-offset": "2px",
+      "circle": {
+        "border-color": "#004699",
+        "checked": {
+          "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")",
+          "hover": {
+            "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
+          }
+        },
+        "disabled": {
+          "border-color": "#767676",
+          "checked": {
+            "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")",
+            "hover": {
+              "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
+            }
+          }
+        },
+        "hover": {
+          "border-color": "#102E62"
+        },
+        "invalid": {
+          "border-color": "#EC0000",
+          "checked": {
+            "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")",
+            "hover": {
+              "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
+            }
+          },
+          "hover": {
+            "border-color": "#EC0000"
+          }
+        }
+      },
+      "disabled": {
+        "color": "#767676"
+      },
+      "hover": {
+        "color": "#102E62"
+      }
+    },
+    "row": {
+      "gap": {
+        "xs": ".25rem",
+        "sm": ".5rem",
+        "md": "1rem",
+        "lg": "1.5rem",
+        "xl": "2rem"
+      }
+    },
     "screen": {
       "wide": {
         "max-width": "100rem"
@@ -677,7 +852,9 @@
         "outline-offset": "2px",
         "hover": {
           "background-color": "#102E62"
-        }
+        },
+        "padding-block": ".25rem",
+        "padding-inline": ".25rem"
       },
       "input": {
         "box-shadow": "inset 0 0 0 1px #000000",
@@ -687,6 +864,8 @@
         "font-weight": 400,
         "line-height": "1.6",
         "outline-offset": "2px",
+        "padding-block": ".25rem",
+        "padding-inline": "1rem",
         "cancel-button": {
           "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")",
           "color": "#004699",
@@ -709,6 +888,8 @@
       "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
       "line-height": "1.6",
       "outline-offset": "2px",
+      "padding-block": ".25rem",
+      "padding-inline": "1rem",
       "hover": {
         "background-color": "#102E62"
       }
@@ -769,12 +950,74 @@
         "font-weight": 800
       },
       "cell": {
-        "border-bottom": "1px solid #E8E8E8"
+        "border-bottom": "1px solid #E8E8E8",
+        "padding-block": "1rem",
+        "padding-inline": "1rem"
       },
       "header-cell": {
         "font-weight": 800
       }
     },
+    "tabs": {
+      "list": {
+        "border-bottom": ".125rem solid #004699"
+      },
+      "button": {
+        "background-color": "transparent",
+        "border": "none",
+        "color": "#004699",
+        "cursor": "pointer",
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-weight": 400,
+        "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+        "line-height": "1.6",
+        "outline-offset": "-0.25rem",
+        "padding-block": ".5rem",
+        "padding-inline": "1rem",
+        "hover": {
+          "color": "#102E62",
+          "box-shadow": "inset 0 -0.125rem 0 0 #102E62"
+        },
+        "selected": {
+          "background-color": "#004699",
+          "color": "#FFFFFF"
+        },
+        "disabled": {
+          "color": "#BEBEBE",
+          "cursor": "not-allowed"
+        }
+      }
+    },
+    "text-area": {
+      "box-shadow": "inset 0 0 0 1px #000000",
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "min-height": "calc(1.6 * 1em + 2 * 0.5rem)",
+      "outline-offset": "2px",
+      "padding-block": "0.5rem",
+      "padding-inline": "1rem",
+      "disabled": {
+        "background-color": "#FFFFFF",
+        "box-shadow": "inset 0 0 0 1px #BEBEBE",
+        "color": "#BEBEBE",
+        "cursor": "not-allowed"
+      },
+      "hover": {
+        "box-shadow": "inset 0 0 0 2px #000000"
+      },
+      "invalid": {
+        "box-shadow": "inset 0 0 0 1px #EC0000",
+        "hover": {
+          "box-shadow": "inset 0 0 0 2px #EC0000"
+        }
+      },
+      "placeholder": {
+        "color": "#767676"
+      }
+    },
     "text-input": {
       "box-shadow": "inset 0 0 0 1px #000000",
       "color": "#000000",
@@ -783,6 +1026,8 @@
       "font-weight": 400,
       "line-height": "1.6",
       "outline-offset": "2px",
+      "padding-block": ".25rem",
+      "padding-inline": "1rem",
       "disabled": {
         "background-color": "#FFFFFF",
         "box-shadow": "inset 0 0 0 1px #BEBEBE",
@@ -831,6 +1076,7 @@
       "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "font-weight": 400,
       "gap": "0.75rem",
+      "inverse-color": "#FFFFFF",
       "line-height": "1.6",
       "list-style-type": "'\\2022'",
       "item": {
@@ -845,240 +1091,5 @@
         }
       }
     }
-  },
-  "utrecht": {
-    "action": {
-      "activate": {
-        "cursor": "pointer"
-      },
-      "busy": {
-        "cursor": "wait"
-      },
-      "disabled": {
-        "cursor": "not-allowed"
-      },
-      "inert": {
-        "cursor": "default"
-      },
-      "navigate": {
-        "cursor": "pointer"
-      },
-      "submit": {
-        "cursor": "pointer"
-      }
-    },
-    "focus": {
-      "outline-offset": "2px"
-    },
-    "button": {
-      "background-color": "#004699",
-      "border-color": {},
-      "border-radius": {},
-      "border-width": {},
-      "color": "#FFFFFF",
-      "font-family": "'Amsterdam Sans', Arial, sans-serif",
-      "font-size": {},
-      "line-height": {},
-      "padding-inline-start": "1rem",
-      "padding-inline-end": "1rem",
-      "padding-block-start": "0.5rem",
-      "padding-block-end": "0.5rem",
-      "margin-inline-start": {},
-      "margin-inline-end": {},
-      "margin-block-start": {},
-      "margin-block-end": {},
-      "icon": {
-        "gap": {}
-      },
-      "disabled": {
-        "background-color": "#BEBEBE",
-        "color": "#FFFFFF",
-        "border-color": {}
-      },
-      "hover": {
-        "background-color": {}
-      },
-      "focus": {
-        "scale": {}
-      },
-      "primary-action": {
-        "background-color": "#004699",
-        "border-color": {},
-        "border-width": {},
-        "color": "#FFFFFF",
-        "disabled": {
-          "background-color": "#BEBEBE",
-          "color": {},
-          "border-color": {}
-        },
-        "hover": {
-          "background-color": "#102E62",
-          "border-color": {},
-          "color": {}
-        },
-        "focus": {
-          "background-color": {},
-          "border-color": {},
-          "border-width": {}
-        },
-        "ready": {
-          "background-color": {},
-          "border-color": {},
-          "color": {},
-          "disabled": {
-            "border-color": {}
-          },
-          "hover": {
-            "background-color": {},
-            "border-color": {},
-            "color": {}
-          },
-          "focus": {
-            "background-color": {},
-            "border-color": {}
-          }
-        },
-        "warning": {
-          "background-color": {},
-          "border-color": {},
-          "color": {},
-          "disabled": {
-            "border-color": {}
-          },
-          "hover": {
-            "background-color": {},
-            "border-color": {},
-            "color": {}
-          },
-          "focus": {
-            "background-color": {},
-            "border-color": {}
-          }
-        },
-        "danger": {
-          "background-color": {},
-          "border-color": {},
-          "color": {},
-          "disabled": {
-            "border-color": {}
-          },
-          "hover": {
-            "background-color": {},
-            "border-color": {},
-            "color": {}
-          },
-          "focus": {
-            "background-color": {},
-            "border-color": {}
-          }
-        }
-      },
-      "secondary-action": {
-        "background-color": "#FFFFFF",
-        "color": "#004699",
-        "border-color": {},
-        "border-width": {},
-        "hover": {
-          "background-color": {},
-          "color": "#102E62",
-          "border-color": {}
-        },
-        "disabled": {
-          "background-color": "#FFFFFF",
-          "color": "#BEBEBE",
-          "border-color": {}
-        },
-        "danger": {
-          "background-color": {},
-          "border-color": {},
-          "color": {},
-          "disabled": {
-            "border-color": {}
-          },
-          "hover": {
-            "background-color": {},
-            "border-color": {},
-            "color": {}
-          },
-          "focus": {
-            "background-color": {},
-            "border-color": {}
-          }
-        },
-        "warning": {
-          "background-color": {},
-          "border-color": {},
-          "color": {},
-          "disabled": {
-            "border-color": {}
-          },
-          "hover": {
-            "background-color": {},
-            "border-color": {},
-            "color": {}
-          },
-          "focus": {
-            "background-color": {},
-            "border-color": {}
-          }
-        },
-        "ready": {
-          "background-color": {},
-          "border-color": {},
-          "color": {},
-          "disabled": {
-            "border-color": {}
-          },
-          "hover": {
-            "background-color": {},
-            "border-color": {},
-            "color": {}
-          },
-          "focus": {
-            "background-color": {},
-            "border-color": {}
-          }
-        }
-      },
-      "subtle": {
-        "background-color": "transparent",
-        "border-color": {},
-        "border-width": {},
-        "color": "#004699",
-        "font-weight": {},
-        "hover": {
-          "background-color": {},
-          "color": "#102E62",
-          "border-color": {}
-        },
-        "focus": {
-          "background-color": {},
-          "color": "#102E62",
-          "border-color": {}
-        },
-        "disabled": {
-          "background-color": "transparent",
-          "color": "#BEBEBE"
-        },
-        "danger": {
-          "color": {},
-          "hover": {
-            "color": {}
-          },
-          "focus": {
-            "color": {}
-          }
-        },
-        "ready": {
-          "color": {},
-          "hover": {
-            "color": {}
-          },
-          "focus": {
-            "color": {}
-          }
-        }
-      }
-    }
   }
 }