@conduction/theme 1.1.21 → 1.1.23

package/municipalities/leiden-design-tokens/src/brand/leiden/font-size.tokens.json

@@ -1,17 +1,50 @@
 {
   "leiden": {
     "font-size": {
-      "4xs": { "value": "5px" },
-      "3xs": { "value": "8px" },
-      "2xs": { "value": "10px" },
-      "xs": { "value": "12px" },
-      "sm": { "value": "14px" },
-      "md": { "value": "18px" },
-      "lg": { "value": "20px" },
-      "xl": { "value": "24px" },
-      "2xl": { "value": "32px" },
-      "3xl": { "value": "48px" },
-      "4xl": { "value": "58px" }
+      "4xs": {
+        "value": "0.313rem",
+        "comment": "5px"
+      },
+      "3xs": {
+        "value": "0.5rem",
+        "comment": "8px"
+      },
+      "2xs": {
+        "value": "0.625rem",
+        "comment": "10px"
+      },
+      "xs": {
+        "value": "0.75rem",
+        "comment": "12px"
+      },
+      "sm": {
+        "value": "0.875rem",
+        "comment": "14px"
+      },
+      "md": {
+        "value": "1.125rem",
+        "comment": "18px"
+      },
+      "lg": {
+        "value": "1.25rem",
+        "comment": "20px"
+      },
+      "xl": {
+        "value": "1.5rem",
+        "comment": "24px"
+      },
+      "2xl": {
+        "value": "2rem",
+        "comment": "32px"
+      },
+      "3xl": {
+        "value": "2.8125rem",
+        "comment": "45px"
+      },
+      "4xl": {
+        "value": "3.625rem",
+        "comment": "58px"
+      }
     }
   }
 }

package/municipalities/leiden-design-tokens/src/common/utrecht/action.tokens.json

@@ -1,9 +1,12 @@
 {
   "utrecht": {
     "action": {
-      "busy": { "cursor": { "value": "wait" } },
+      "inert": { "cursor": { "value": "default" } },
+      "activate": { "cursor": { "value": "pointer" } },
+      "submit": { "cursor": { "value": "pointer" } },
+      "navigate": { "cursor": { "value": "pointer" } },
       "disabled": { "cursor": { "value": "not-allowed" } },
-      "submit": { "cursor": { "value": "pointer" } }
+      "busy": { "cursor": { "value": "wait" } }
     }
   }
 }

package/municipalities/leiden-design-tokens/src/component/conduction/logo.tokens.json

@@ -2,22 +2,22 @@
   "conduction": {
     "logo": {
       "header": {
-        "inline-size": { "value": "80px" },
-        "block-size": { "value": "37px" },
+        "inline-size": { "value": "119px" },
+        "block-size": { "value": "55px" },
         "background-image": {
           "value": "url('https://gemeente.leiden.nl/typo3conf/ext/leiden_template/Resources/Public/Images/logo_leiden.svg')"
         }
       },
       "footer": {
-        "inline-size": { "value": "120px" },
-        "block-size": { "value": "100px" },
+        "inline-size": { "value": "119px" },
+        "block-size": { "value": "55px" },
         "background-image": {
           "value": "url('https://gemeente.leiden.nl/typo3conf/ext/leiden_template/Resources/Public/Images/logo_leiden.svg')"
         }
       },
       "navbar": {
-        "inline-size": { "value": "80px" },
-        "block-size": { "value": "45px" },
+        "inline-size": { "value": "104px" },
+        "block-size": { "value": "48px" },
         "background-image": {
           "value": "url('https://gemeente.leiden.nl/typo3conf/ext/leiden_template/Resources/Public/Images/logo_leiden.svg')"
         }

package/municipalities/leiden-design-tokens/src/component/conduction/pagination.tokens.json

@@ -16,7 +16,10 @@
         "padding-inline-end": { "value": "{leiden.size.xs}" },
         "padding-block-start": { "value": "{leiden.size.xs}" },
         "padding-block-end": { "value": "{leiden.size.xs}" },
-        "font-size": { "value": "15px" },
+        "font-size": {
+          "value": "0.938rem",
+          "comment": "15px"
+        },
         "font-weight": { "value": "{leiden.typography.font-weight.bold}" },
         "font-family": { "value": "{utrecht.document.font-family}" },
         "border-width": {},
@@ -81,7 +84,7 @@
           "color": { "value": "{leiden.color.lightblue.37}" },
           "background-color": { "value": "{leiden.color.white.100}" },
           "text-decoration": { "value": "underline" },
-          "text-decoration-thickness": { "value": "1px" },
+          "text-decoration-thickness": { "value": "{leiden.size.4xs}" },
           "border-width": {},
           "border-style": {},
           "border-color": {},

package/municipalities/leiden-design-tokens/src/component/utrecht/breadcrumb.tokens.json

@@ -3,7 +3,10 @@
     "breadcrumb-nav": {
       "block-size": {},
       "font-family": { "value": "{utrecht.document.font-family}" },
-      "font-size": { "value": "15px" },
+      "font-size": {
+        "value": "0.938rem",
+        "comment": "15px"
+      },
       "text-transform": {},
       "item": {
         "padding-block-start": {},

package/municipalities/leiden-design-tokens/src/component/utrecht/button.tokens.json

@@ -57,9 +57,9 @@
         "color": { "value": "{leiden.color.white.100}" },
         "font-weight": { "value": "inherit" },
         "active": {
-          "background-color": {},
+          "background-color": { "value": "{leiden.color.primary-hover}" },
           "border-color": {},
-          "color": {}
+          "color": { "value": "{leiden.color.white.100}" }
         },
         "disabled": {
           "background-color": { "value": "{leiden.color.grey.82}" },
@@ -67,7 +67,7 @@
           "color": { "value": "{leiden.color.grey.50}" }
         },
         "hover": {
-          "background-color": { "value": "{leiden.color.primary}" },
+          "background-color": { "value": "{leiden.color.primary-hover}" },
           "border-color": {},
           "color": { "value": "{leiden.color.white.100}" },
           "scale": {}
@@ -116,11 +116,11 @@
         }
       },
       "subtle": {
-        "background-color": {},
+        "background-color": { "value": "{leiden.color.primary}" },
         "border-color": {},
-        "border-width": {},
-        "color": {},
-        "font-weight": {},
+        "border-width": { "value": "{leiden.size.3xs}" },
+        "color": { "value": "{leiden.color.white.100}" },
+        "font-weight": { "value": "inherit" },
         "active": {
           "background-color": {},
           "border-color": {},
@@ -132,9 +132,10 @@
           "color": { "value": "{leiden.color.grey.50}" }
         },
         "hover": {
-          "background-color": {},
+          "background-color": { "value": "{leiden.color.primary}" },
           "border-color": {},
-          "color": {}
+          "color": { "value": "{leiden.color.white.100}" },
+          "scale": {}
         },
         "focus": {
           "background-color": {},

package/municipalities/leiden-design-tokens/src/component/utrecht/calendar.tokens.json

@@ -0,0 +1,80 @@
+{
+  "utrecht": {
+    "calendar": {
+      "width": {},
+      "background-color": {},
+      "table": {
+        "padding-block-start": {},
+        "padding-block-end": {},
+        "weeks-item": {
+          "width": { "value": "44px" },
+          "padding-block-start": { "value": "4px" },
+          "padding-block-end": { "value": "10px" },
+          "line-height": { "value": "24px" }
+        },
+        "days-item-day": {
+          "size": { "value": "44px" },
+          "color": { "value": "{leiden.color.black.0}" },
+          "border-width": { "value": "2px" },
+          "border-color": { "value": "transparent" },
+          "hover": {
+            "background-color": {},
+            "color": { "value": "{leiden.color.primary}" },
+            "border-color": { "value": "{leiden.color.black.0}" }
+          },
+          "focus": {
+            "background-color": {},
+            "color": {},
+            "border-color": { "value": "transparent" }
+          },
+          "active": {
+            "background-color": {},
+            "color": {},
+            "border-color": { "value": "transparent" }
+          },
+          "out-of-the-month": {
+            "background-color": {},
+            "color": { "value": "{leiden.color.grey.82}" },
+            "border-color": { "value": "transparent" }
+          },
+          "is-today": {
+            "background-color": { "value": "{leiden.color.red.95}" },
+            "color": { "value": "{leiden.color.primary}" },
+            "border-color": { "value": "{leiden.color.red.39}" },
+            "font-weight": { "value": "{leiden.typography.font-weight.bold}" }
+          },
+          "emphasis": {
+            "background-color": {},
+            "color": {},
+            "border-color": { "value": "transparent" },
+            "font-weight": {}
+          },
+          "selected": {
+            "background-color": { "value": "{leiden.color.red.39}" },
+            "color": { "value": "{leiden.color.white.100}" },
+            "border-color": {},
+            "font-weight": { "value": "{leiden.typography.font-weight.bold}" }
+          },
+          "disabled": {
+            "background-color": {},
+            "color": {},
+            "border-color": {}
+          }
+        }
+      },
+      "navigation": {
+        "background-color": {},
+        "color": { "value": "{leiden.color.red.39}" },
+        "padding-block-start": { "value": "2px" },
+        "padding-block-end": { "value": "2px" },
+        "label": {
+          "min-inline-size": { "value": "200px" },
+          "color": { "value": "{leiden.color.black.0}" }
+        }
+      },
+      "icon": {
+        "size": { "value": "24px" }
+      }
+    }
+  }
+}

package/municipalities/leiden-design-tokens/src/component/utrecht/checkbox.tokens.json

@@ -0,0 +1,57 @@
+{
+  "utrecht": {
+    "checkbox": {
+      "background-color": {},
+      "border-color": {},
+      "border-radius": { "value": "3px" },
+      "border-width": { "value": "{leiden.size.4xs}" },
+      "color": { "value": "{leiden.color.white.100}" },
+      "size": { "value": "24px" },
+      "icon": {
+        "size": {}
+      },
+      "active": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": {},
+        "color": {}
+      },
+      "hover": {
+        "border-color": { "value": "{leiden.color.grey.31}" },
+        "border-width": { "value": "{leiden.size.4xs}" },
+        "background-color": {},
+        "color": { "value": "{leiden.color.white.100}" }
+      },
+      "focus": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": {},
+        "color": {}
+      },
+      "disabled": {
+        "border-color": { "value": "{leiden.color.grey.82}" },
+        "border-width": { "value": "{leiden.size.4xs}" },
+        "background-color": { "value": "{leiden.color.grey.82}" },
+        "color": { "value": "{leiden.color.grey.82}" }
+      },
+      "checked": {
+        "border-color": { "value": "{leiden.color.primary}" },
+        "border-width": { "value": "{leiden.size.4xs}" },
+        "background-color": { "value": "{leiden.color.primary}" },
+        "color": { "value": "{leiden.color.primary}" }
+      },
+      "indeterminate": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": {},
+        "color": {}
+      },
+      "invalid": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": {},
+        "color": {}
+      }
+    }
+  }
+}

package/municipalities/leiden-design-tokens/src/component/utrecht/extra-tokens/radio-button.tokens.json

@@ -3,6 +3,7 @@
     "radio-button": {
       "min-block-size": { "value": "16px" },
       "min-inline-size": { "value": "16px" },
+      "margin-inline-end": { "value": "16px" },
       "checked-disabled": {
         "border-color": { "value": "{leiden.color.grey.82}" },
         "border-width": { "value": "{leiden.size.4xs}" },

package/municipalities/leiden-design-tokens/src/component/utrecht/extra-tokens/skip-link.tokens.json

@@ -0,0 +1,17 @@
+{
+  "utrecht": {
+    "skip-link": {
+      "font-weight": { "value": "{leiden.typography.font-weight.bold}" },
+      "font-size": { "value": "{leiden.font-size.md}" },
+      "outline-style": {},
+      "outline-color": {},
+      "border-radius": { "value": "5px" },
+      "focus": {
+        "text-decoration": { "value": "{utrecht.skip-link.text-decoration}" }
+      },
+      "inset-block-start": { "value": "{leiden.size.lg}" },
+      "inset-inline-start": { "value": "{leiden.size.sm}" },
+      "box-shadow-width": {}
+    }
+  }
+}

package/municipalities/leiden-design-tokens/src/component/utrecht/focus.tokens.json

@@ -0,0 +1,15 @@
+{
+  "utrecht": {
+    "focus": {
+      "background-color": {},
+      "color": {},
+      "outline-color": { "value": "{leiden.color.white.100}" },
+      "outline-offset": { "value": "3px" },
+      "outline-style": { "value": "dotted" },
+      "outline-width": { "value": "{leiden.size.3xs}" },
+      "inverse": {
+        "outline-color": {}
+      }
+    }
+  }
+}

package/municipalities/leiden-design-tokens/src/component/utrecht/form-input.tokens.json

@@ -7,7 +7,10 @@
       "border-width": { "value": "{leiden.size.4xs}" },
       "color": { "value": "{leiden.color.grey.11}" },
       "font-family": { "value": "{leiden.typography.sans-serif.font-family}" },
-      "font-size": { "value": "15px" },
+      "font-size": {
+        "value": "0.938rem",
+        "comment": "15px"
+      },
       "min-inline-height": {},
       "max-inline-size": {},
       "padding-block-end": { "value": "{leiden.size.xs}" },

package/municipalities/leiden-design-tokens/src/component/utrecht/heading.tokens.json

@@ -12,25 +12,25 @@
     "heading-2": {
       "color": {},
       "font-family": { "value": "{leiden.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{leiden.font-size.2xl}" },
+      "font-size": { "value": "{leiden.font-size.xl}" },
       "font-weight": { "value": "{leiden.typography.font-weight.bold}" },
       "line-height": {},
-      "margin-block-end": { "value": "{leiden.size.2xl}" },
+      "margin-block-end": { "value": "{leiden.size.xl}" },
       "margin-block-start": { "value": "{leiden.size.md}" }
     },
     "heading-3": {
       "color": {},
       "font-family": { "value": "{leiden.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{leiden.font-size.xl}" },
+      "font-size": { "value": "{leiden.font-size.lg}" },
       "font-weight": { "value": "{leiden.typography.font-weight.normal}" },
       "line-height": {},
-      "margin-block-end": { "value": "{leiden.size.xl}" },
+      "margin-block-end": { "value": "{leiden.size.lg}" },
       "margin-block-start": { "value": "{leiden.size.md}" }
     },
     "heading-4": {
       "color": {},
       "font-family": { "value": "{leiden.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{leiden.font-size.lg}" },
+      "font-size": { "value": "{leiden.font-size.md}" },
       "font-weight": { "value": "{leiden.typography.font-weight.normal}" },
       "line-height": {},
       "margin-block-end": { "value": "{leiden.size.lg}" },
@@ -39,7 +39,7 @@
     "heading-5": {
       "color": {},
       "font-family": { "value": "{leiden.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{leiden.font-size.md}" },
+      "font-size": { "value": "{leiden.font-size.sm}" },
       "font-weight": { "value": "{leiden.typography.font-weight.light}" },
       "line-height": {},
       "margin-block-end": { "value": "{leiden.size.lg}" },

package/municipalities/leiden-design-tokens/src/component/utrecht/radio-button.tokens.json

@@ -4,7 +4,7 @@
       "background-color": { "value": "{leiden.color.white.100}" },
       "border-color": { "value": "{leiden.color.grey.46}" },
       "border-width": { "value": "{leiden.size.4xs}" },
-      "size": {},
+      "size": { "value": "16px" },
       "margin-block-start": {},
       "icon": {
         "size": { "value": "5px" }

package/municipalities/leiden-design-tokens/src/component/utrecht/skip-link.tokens.json

@@ -0,0 +1,16 @@
+{
+  "utrecht": {
+    "skip-link": {
+      "background-color": { "value": "{leiden.color.primary}" },
+      "color": { "value": "{leiden.color.white.100}" },
+      "min-block-size": {},
+      "min-inline-size": {},
+      "padding-block-start": { "value": "10px" },
+      "padding-block-end": { "value": "10px" },
+      "padding-inline-start": { "value": "10px" },
+      "padding-inline-end": { "value": "10px" },
+      "text-decoration": { "value": "none" },
+      "z-index": { "value": "100000" }
+    }
+  }
+}

package/municipalities/leiden-design-tokens/src/component/utrecht/spotlight-section.tokens.json

@@ -0,0 +1,24 @@
+{
+  "utrecht": {
+    "spotlight-section": {
+      "background-color": { "value": "{leiden.color.alert-info-background}" },
+      "border-color": {},
+      "border-width": {},
+      "color": { "value": "{leiden.color.alert-info}" },
+      "padding-block-start": { "value": "{leiden.size.lg}" },
+      "padding-block-end": { "value": "{leiden.size.lg}" },
+      "padding-inline-start": { "value": "{leiden.size.lg}" },
+      "padding-inline-end": { "value": "{leiden.size.lg}" },
+      "margin-block-start": { "value": "{leiden.size.lg}" },
+      "margin-block-end": {},
+      "info": {
+        "background-color": { "value": "{leiden.color.alert-info-background}" },
+        "color": { "value": "{leiden.color.alert-info}" }
+      },
+      "warning": {
+        "background-color": { "value": "{leiden.color.alert-warning-background}" },
+        "color": { "value": "{leiden.color.alert-warning}" }
+      }
+    }
+  }
+}

package/municipalities/leiden-design-tokens/src/component/utrecht/textbox.tokens.json

@@ -7,7 +7,10 @@
       "border-width": { "value": "{leiden.size.4xs}" },
       "color": { "value": "{leiden.color.grey.11}" },
       "font-family": { "value": "{leiden.typography.sans-serif.font-family}" },
-      "font-size": { "value": "15px" },
+      "font-size": {
+        "value": "0.938rem",
+        "comment": "15px"
+      },
       "min-inline-height": {},
       "max-inline-size": {},
       "padding-block-end": { "value": "{leiden.size.xs}" },

package/municipalities/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json

@@ -61,6 +61,9 @@
         }
       },
       "grey": {
+        "27": {
+          "value": "#444444"
+        },
         "31": {
           "value": "#4f4f4f"
         },
@@ -73,6 +76,9 @@
         "82": {
           "value": "#d1d1d1"
         },
+        "87": {
+          "value": "#dddddd"
+        },
         "97": {
           "value": "#f7f7f7"
         }
@@ -96,6 +102,10 @@
         "0": {
           "value": "#000000",
           "comment": "Base/Black"
+        },
+        "0-60t": {
+          "value": "#00000099",
+          "comment": "Black with 60% transparency"
         }
       }
     }

package/municipalities/noaberkracht-design-tokens/src/brand/noaberkracht/font-size.tokens.json

@@ -1,18 +1,54 @@
 {
   "noaberkracht": {
     "font-size": {
-      "4xs": { "value": "5px" },
-      "3xs": { "value": "8px" },
-      "2xs": { "value": "10x" },
-      "xs": { "value": "12px" },
-      "sm": { "value": "14px" },
-      "md": { "value": "18px" },
-      "lg": { "value": "24px" },
-      "xl": { "value": "36px" },
-      "2xl": { "value": "48px" },
-      "3xl": { "value": "60px" },
-      "4xl": { "value": "72px" },
-      "5xl": { "value": "84px" }
+      "4xs": {
+        "value": "0.313rem",
+        "comment": "5px"
+      },
+      "3xs": {
+        "value": "0.5rem",
+        "comment": "8px"
+      },
+      "2xs": {
+        "value": "0.625rem",
+        "comment": "10px"
+      },
+      "xs": {
+        "value": "0.75rem",
+        "comment": "12px"
+      },
+      "sm": {
+        "value": "0.875rem",
+        "comment": "14px"
+      },
+      "md": {
+        "value": "1.125rem",
+        "comment": "18px"
+      },
+      "lg": {
+        "value": "1.5rem",
+        "comment": "24px"
+      },
+      "xl": {
+        "value": "2.25rem",
+        "comment": "36px"
+      },
+      "2xl": {
+        "value": "3rem",
+        "comment": "48px"
+      },
+      "3xl": {
+        "value": "3.75rem",
+        "comment": "60px"
+      },
+      "4xl": {
+        "value": "4.5rem",
+        "comment": "72px"
+      },
+      "5xl": {
+        "value": "5.25rem",
+        "comment": "84px"
+      }
     }
   }
 }

package/municipalities/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/skip-link.tokens.json

@@ -0,0 +1,17 @@
+{
+  "utrecht": {
+    "skip-link": {
+      "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" },
+      "font-size": { "value": "{noaberkracht.font-size.md}" },
+      "outline-style": { "value": "none" },
+      "outline-color": {},
+      "border-radius": { "value": "3px" },
+      "focus": {
+        "text-decoration": { "value": "{utrecht.skip-link.text-decoration}" }
+      },
+      "inset-block-start": {},
+      "inset-inline-start": {},
+      "box-shadow-width": {}
+    }
+  }
+}

package/municipalities/noaberkracht-design-tokens/src/component/utrecht/focus.tokens.json

@@ -0,0 +1,15 @@
+{
+  "utrecht": {
+    "focus": {
+      "background-color": {},
+      "color": {},
+      "outline-color": {},
+      "outline-offset": { "value": "2.5px" },
+      "outline-style": {},
+      "outline-width": { "value": "2.5px" },
+      "inverse": {
+        "outline-color": { "value": "{noaberkracht.color.black.0-60t}" }
+      }
+    }
+  }
+}

package/municipalities/noaberkracht-design-tokens/src/component/utrecht/form-input.tokens.json

@@ -7,7 +7,10 @@
       "border-width": { "value": "{noaberkracht.size.4xs}" },
       "color": { "value": "{noaberkracht.color.blue.22}" },
       "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" },
-      "font-size": { "value": "14px" },
+      "font-size": {
+        "value": "0.875rem",
+        "comment": "14px"
+      },
       "min-inline-height": {},
       "max-inline-size": {},
       "padding-block-end": { "value": "{noaberkracht.size.xs}" },