@amsterdam/design-system-tokens 0.11.0 → 0.12.0

package/dist/index.json

@@ -119,12 +119,6 @@
       "hover": {
         "color": "#102E62"
       },
-      "on-background-dark": {
-        "color": "#FFFFFF"
-      },
-      "on-background-light": {
-        "color": "#000000"
-      },
       "regular": {
         "text-decoration-line": "underline",
         "hover": {
@@ -137,6 +131,24 @@
         "hover": {
           "text-decoration-line": "underline"
         }
+      },
+      "contrast": {
+        "color": "#000000",
+        "hover": {
+          "color": "#000000"
+        },
+        "visited": {
+          "color": "#000000"
+        }
+      },
+      "inverse": {
+        "color": "#FFFFFF",
+        "hover": {
+          "color": "#FFFFFF"
+        },
+        "visited": {
+          "color": "#FFFFFF"
+        }
       }
     },
     "accordion": {
@@ -162,6 +174,9 @@
         "padding-inline": "0"
       }
     },
+    "action-group": {
+      "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)"
+    },
     "alert": {
       "border-width": "0.25rem",
       "border-style": "solid",
@@ -218,6 +233,9 @@
         "background-color": "#00A03C",
         "color": "#FFFFFF"
       },
+      "forced-colors": {
+        "border-width": "0.125rem"
+      },
       "green": {
         "background-color": "#BED200",
         "color": "#000000"
@@ -357,6 +375,13 @@
         }
       }
     },
+    "breakout": {
+      "row-gap": {
+        "sm": "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)",
+        "md": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)",
+        "lg": "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)"
+      }
+    },
     "button": {
       "cursor": "pointer",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -413,6 +438,10 @@
           "background-color": "transparent",
           "color": "#BEBEBE"
         }
+      },
+      "icon-only": {
+        "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
+        "padding-inline": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)"
       }
     },
     "card": {
@@ -561,36 +590,31 @@
     },
     "description-list": {
       "color": "#000000",
+      "column-gap": "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)",
-      "font-weight": 400,
-      "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "inverse-color": "#FFFFFF",
       "line-height": "1.6",
-      "row": {
-        "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)"
+      "row-gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
+      "term": {
+        "font-weight": 800
       },
       "details": {
-        "font-weight": 800,
+        "font-weight": 400,
         "padding-inline-start": "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)"
       }
     },
     "dialog": {
       "background-color": "#FFFFFF",
       "border": "0",
+      "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "inline-size": "calc(100% - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))",
-      "max-block-size": "calc(100% - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))",
+      "max-block-size": "calc(100dvh - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))",
       "max-inline-size": "48rem",
-      "form": {
-        "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
-        "padding-block": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)",
-        "padding-inline": "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)"
-      },
+      "padding-block": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)",
+      "padding-inline": "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)",
       "header": {
         "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)"
-      },
-      "footer": {
-        "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)"
       }
     },
     "error-message": {
@@ -729,6 +753,9 @@
         }
       }
     },
+    "hint": {
+      "color": "#767676"
+    },
     "icon-button": {
       "color": "#004699",
       "outline-offset": "0.125rem",
@@ -739,7 +766,7 @@
       "disabled": {
         "color": "#BEBEBE"
       },
-      "on-background-light": {
+      "contrast-color": {
         "color": "#000000",
         "hover": {
           "background-color": "rgba(0, 0, 0, 0.125)",
@@ -749,7 +776,7 @@
           "color": "#BEBEBE"
         }
       },
-      "on-background-dark": {
+      "inverse-color": {
         "background-color": "#004699",
         "color": "#FFFFFF",
         "hover": {
@@ -780,6 +807,28 @@
         "line-height": "1.6"
       }
     },
+    "image-slider": {
+      "gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
+      "scroller": {
+        "gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
+        "outline-offset": "0.125rem"
+      },
+      "thumbnails": {
+        "gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
+        "thumbnail": {
+          "background-color": "transparent",
+          "cursor": "pointer",
+          "opacity": "40%",
+          "outline-offset": "0.125rem",
+          "in-view": {
+            "opacity": "100%"
+          },
+          "hover": {
+            "opacity": "100%"
+          }
+        }
+      }
+    },
     "label": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -812,16 +861,16 @@
           "color": "#102E62",
           "text-decoration-line": "underline"
         },
-        "on-background-dark": {
-          "color": "#FFFFFF",
+        "contrast-color": {
+          "color": "#000000",
           "hover": {
-            "color": "#FFFFFF"
+            "color": "#000000"
           }
         },
-        "on-background-light": {
-          "color": "#000000",
+        "inverse-color": {
+          "color": "#FFFFFF",
           "hover": {
-            "color": "#000000"
+            "color": "#FFFFFF"
           }
         }
       }
@@ -860,22 +909,22 @@
           "text-underline-offset": "0.2778em"
         }
       },
-      "on-background-dark": {
-        "color": "#FFFFFF",
+      "contrast-color": {
+        "color": "#000000",
         "hover": {
-          "color": "#FFFFFF"
+          "color": "#000000"
         },
         "visited": {
-          "color": "#FFFFFF"
+          "color": "#000000"
         }
       },
-      "on-background-light": {
-        "color": "#000000",
+      "inverse-color": {
+        "color": "#FFFFFF",
         "hover": {
-          "color": "#000000"
+          "color": "#FFFFFF"
         },
         "visited": {
-          "color": "#000000"
+          "color": "#FFFFFF"
         }
       }
     },
@@ -914,7 +963,7 @@
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)",
       "font-weight": 400,
-      "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
+      "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "inverse-color": "#FFFFFF",
       "line-height": "1.6",
       "list-style-type": "decimal",
@@ -927,7 +976,10 @@
         "padding-inline-start": "0.25rem"
       },
       "ordered-list": {
+        "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "list-style-type": "lower-alpha",
+        "padding-block-end": "0",
+        "padding-block-start": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "item": {
           "margin-inline-start": "1.5rem",
           "padding-inline-start": "0.25rem"
@@ -1000,6 +1052,35 @@
         "line-height": "1.5"
       }
     },
+    "password-input": {
+      "background-color": "#FFFFFF",
+      "box-shadow": "inset 0 0 0 0.0625rem #000000",
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "outline-offset": "0.125rem",
+      "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
+      "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
+      "disabled": {
+        "background-color": "#FFFFFF",
+        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
+        "color": "#BEBEBE"
+      },
+      "hover": {
+        "box-shadow": "inset 0 0 0 0.125rem #000000"
+      },
+      "invalid": {
+        "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
+        "hover": {
+          "box-shadow": "inset 0 0 0 0.125rem #EC0000"
+        }
+      },
+      "placeholder": {
+        "color": "#767676"
+      }
+    },
     "radio": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -1008,38 +1089,47 @@
       "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "line-height": "1.6",
       "outline-offset": "0.125rem",
-      "circle": {
-        "border-color": "#004699",
-        "border-width": "0.125rem",
-        "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\")",
+      "text-decoration-thickness": "0.125rem",
+      "text-underline-offset": "0.3333em",
+      "checked-indicator": {
+        "fill": "#004699",
+        "disabled": {
+          "fill": "#767676"
+        },
+        "disabled-invalid": {
+          "fill": "#767676",
           "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\")"
+            "fill": "#767676"
           }
         },
+        "hover": {
+          "fill": "#102E62"
+        },
+        "invalid": {
+          "fill": "#EC0000",
+          "hover": {
+            "fill": "#EC0000"
+          }
+        }
+      },
+      "circle": {
+        "stroke": "#004699",
         "disabled": {
-          "border-color": "#767676",
-          "border-width": "0.125rem",
-          "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\")"
-            }
+          "stroke": "#767676"
+        },
+        "disabled-invalid": {
+          "stroke": "#767676",
+          "hover": {
+            "stroke": "#767676"
           }
         },
         "hover": {
-          "border-color": "#102E62"
+          "stroke": "#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\")"
-            }
-          },
+          "stroke": "#EC0000",
           "hover": {
-            "border-color": "#EC0000"
+            "stroke": "#EC0000"
           }
         }
       },
@@ -1048,7 +1138,11 @@
       },
       "hover": {
         "color": "#102E62",
-        "text-decoration-thickness": "0.125rem"
+        "text-decoration-line": "underline"
+      },
+      "icon-container": {
+        "block-size": "calc(clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem) * 1.6)",
+        "inline-size": "1.5rem"
       }
     },
     "row": {
@@ -1409,7 +1503,7 @@
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)",
       "font-weight": 400,
-      "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
+      "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "inverse-color": "#FFFFFF",
       "line-height": "1.6",
       "list-style-type": "'\\2022'",
@@ -1418,7 +1512,10 @@
         "padding-inline-start": "0.875rem"
       },
       "unordered-list": {
+        "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "list-style-type": "'\\2013'",
+        "padding-block-end": "0",
+        "padding-block-start": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "item": {
           "margin-inline-start": "0.875rem",
           "padding-inline-start": "0.875rem"