@amsterdam/design-system-tokens 3.1.0 → 3.2.0

package/dist/index.d.ts

@@ -5,9 +5,9 @@
 export default tokens;
 
 declare interface DesignToken {
-  value?: any;
-  type?: string;
-  comment?: string;
+  $value?: any;
+  $type?: string;
+  $description?: string;
   name?: string;
   themeable?: boolean;
   attributes?: Record<string, unknown>;
@@ -660,11 +660,16 @@ declare const tokens: {
       };
       term: {
         "font-weight": DesignToken;
+        "margin-block-end": DesignToken;
       };
       description: {
         "font-weight": DesignToken;
+        "margin-block-end": DesignToken;
         "padding-inline-start": DesignToken;
       };
+      section: {
+        "margin-block-end": DesignToken;
+      };
       narrow: {
         "grid-template-columns": DesignToken;
       };
@@ -678,8 +683,10 @@ declare const tokens: {
     dialog: {
       "background-color": DesignToken;
       "border-color": DesignToken;
+      "border-radius": DesignToken;
       "border-style": DesignToken;
       "border-width": DesignToken;
+      "box-shadow": DesignToken;
       gap: DesignToken;
       "inline-size": DesignToken;
       "max-block-size": DesignToken;
@@ -997,6 +1004,9 @@ declare const tokens: {
           };
         };
       };
+      figure: {
+        "margin-block-end": DesignToken;
+      };
     };
     image: {
       "aspect-ratio": DesignToken;
@@ -1228,12 +1238,19 @@ declare const tokens: {
       "mega-menu": {
         "padding-block": DesignToken;
         button: {
+          "background-color": DesignToken;
+          color: DesignToken;
           cursor: DesignToken;
           label: {
             open: {
               "font-weight": DesignToken;
             };
           };
+          "padding-inline": DesignToken;
+          hover: {
+            "background-color": DesignToken;
+            color: DesignToken;
+          };
         };
       };
       menu: {
@@ -1253,6 +1270,7 @@ declare const tokens: {
           };
         };
         link: {
+          color: DesignToken;
           gap: DesignToken;
           "text-decoration-line": DesignToken;
           "text-decoration-thickness": DesignToken;

package/dist/index.json

@@ -145,13 +145,13 @@
         "color": "#767676"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem"
+        "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem #b70000"
         }
       },
       "placeholder": {
@@ -405,7 +405,7 @@
           "color": "#767676"
         },
         "hover": {
-          "box-shadow": "inset 0 0 0 0.0625rem",
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor",
           "color": "#003677"
         }
       },
@@ -599,7 +599,7 @@
         "calender-picker-indicator": {
           "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
         },
-        "box-shadow": "inset 0 0 0 0.0625rem",
+        "box-shadow": "0 0 0 #000000",
         "calendar-picker-indicator": {
           "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
         }
@@ -624,7 +624,7 @@
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "0 0 0 #000000"
         }
       },
       "calendar-picker-indicator": {
@@ -643,11 +643,16 @@
         "color": "#ffffff"
       },
       "term": {
-        "font-weight": "800"
+        "font-weight": "800",
+        "margin-block-end": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)"
       },
       "description": {
         "font-weight": "400",
-        "padding-inline-start": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+        "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+        "padding-inline-start": "0"
+      },
+      "section": {
+        "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
       },
       "narrow": {
         "grid-template-columns": "1fr 4fr"
@@ -662,8 +667,10 @@
     "dialog": {
       "background-color": "#ffffff",
       "border-color": "#ffffff",
+      "border-radius": "initial",
       "border-style": "solid",
       "border-width": "0.125rem",
+      "box-shadow": "initial",
       "gap": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
       "inline-size": "calc(100% - 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem))",
       "max-block-size": "calc(100dvh - 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem))",
@@ -798,7 +805,7 @@
           "cursor": "not-allowed"
         },
         "hover": {
-          "box-shadow": "inset 0 0 0 0.0625rem",
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor",
           "color": "#003677"
         }
       }
@@ -980,6 +987,9 @@
             "opacity": "100%"
           }
         }
+      },
+      "figure": {
+        "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
       }
     },
     "image": {
@@ -1212,11 +1222,18 @@
       "mega-menu": {
         "padding-block": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
         "button": {
+          "background-color": "#004699",
+          "color": "#ffffff",
           "cursor": "pointer",
           "label": {
             "open": {
               "font-weight": "800"
             }
+          },
+          "padding-inline": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+          "hover": {
+            "background-color": "#003677",
+            "color": "#ffffff"
           }
         }
       },
@@ -1237,6 +1254,7 @@
           }
         },
         "link": {
+          "color": "#004699",
           "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
           "text-decoration-line": "none",
           "text-decoration-thickness": "0.125rem",
@@ -1331,13 +1349,13 @@
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem"
+        "box-shadow": "0 0 0 #000000"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "0 0 0 #000000"
         }
       },
       "placeholder": {
@@ -1586,13 +1604,13 @@
         "padding-block": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
         "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.0625rem"
+          "box-shadow": "0 0 0 #000000"
         },
         "invalid": {
           "border-color": "#ec0000",
           "hover": {
             "border-color": "#b70000",
-            "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+            "box-shadow": "0 0 0 #000000"
           }
         },
         "cancel-button": {
@@ -1628,14 +1646,14 @@
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem",
+        "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor",
         "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem #b70000"
         }
       },
       "option": {
@@ -1789,7 +1807,7 @@
     "tabs": {
       "gap": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
       "list": {
-        "box-shadow": "inset 0 calc(0.125rem * -1) #d1d1d1"
+        "box-shadow": "inset 0rem calc(0.125rem * -1) 0rem 0rem #d1d1d1"
       },
       "button": {
         "color": "#004699",
@@ -1802,11 +1820,11 @@
         "padding-block": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
         "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
         "hover": {
-          "box-shadow": "inset 0 calc(0.125rem * -1)",
+          "box-shadow": "inset 0rem calc(0.125rem * -1) 0rem 0rem currentColor",
           "color": "#003677"
         },
         "selected": {
-          "box-shadow": "inset 0 calc(0.25rem * -1)",
+          "box-shadow": "inset 0rem calc(0.25rem * -1) 0rem 0rem currentColor",
           "font-weight": "800"
         },
         "disabled": {
@@ -1834,13 +1852,13 @@
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem"
+        "box-shadow": "0 0 0 #000000"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "0 0 0 #000000"
         }
       },
       "placeholder": {
@@ -1865,13 +1883,13 @@
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem"
+        "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem #b70000"
         }
       },
       "placeholder": {
@@ -1893,7 +1911,7 @@
         "calender-picker-indicator": {
           "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
         },
-        "box-shadow": "inset 0 0 0 0.0625rem",
+        "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor",
         "calendar-picker-indicator": {
           "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
         }
@@ -1918,7 +1936,7 @@
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem #b70000"
         }
       },
       "calendar-picker-indicator": {