@amsterdam/design-system-tokens 0.7.1 → 0.8.0

package/dist/index.theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 22 Mar 2024 15:51:05 GMT
+ * Generated on Mon, 22 Apr 2024 09:30:48 GMT
  */
 
 .ams-theme {
@@ -11,16 +11,19 @@
   --ams-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
   --ams-unordered-list-list-style-type: '\2022';
   --ams-unordered-list-gap: 0.75rem;
+  --ams-time-input-hover-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='%23102E62'><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>");
+  --ams-time-input-disabled-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='%23BEBEBE'><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>");
+  --ams-time-input-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='%23004699'><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>");
   --ams-text-area-padding-inline: 1rem;
   --ams-text-area-padding-block: 0.5rem;
   --ams-tabs-button-padding-inline: 1rem;
   --ams-tabs-button-padding-block: .5rem;
   --ams-tabs-button-outline-offset: -0.25rem;
-  --ams-tabs-button-border: none;
-  --ams-tabs-button-background-color: transparent;
   --ams-switch-thumb-height: 1.75rem;
   --ams-switch-thumb-width: 1.75rem;
   --ams-switch-width: 3.5rem;
+  --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
+  --ams-select-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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-search-field-input-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>");
   --ams-screen-x-wide-max-width: 132rem;
   --ams-screen-wide-max-width: 100rem;
@@ -31,8 +34,6 @@
   --ams-radio-circle-checked-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");
   --ams-radio-circle-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");
   --ams-page-menu-item-gap: 0.5rem;
-  --ams-page-menu-row-gap: 0.5rem;
-  --ams-page-menu-column-gap: 2.5rem;
   --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
   --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; /* Indent less than the parent to start-align the child’s marker with the parent text. */
   --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
@@ -61,6 +62,9 @@
   --ams-dialog-form-gap: 1.5rem;
   --ams-dialog-max-inline-size: min(87.69vw, 45rem);
   --ams-dialog-border: 0;
+  --ams-date-input-hover-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='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-date-input-disabled-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='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-date-input-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='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-checkbox-checkmark-indeterminate-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");
   --ams-checkbox-checkmark-checked-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");
   --ams-button-tertiary-disabled-background-color: transparent;
@@ -71,21 +75,17 @@
   --ams-avatar-padding-block: 0.25rem;
   --ams-alert-gap: 1rem;
   --ams-alert-border-style: solid;
-  --ams-alert-border-width: 4px;
+  --ams-accordion-panel-padding-inline: 0;
+  --ams-accordion-button-padding-inline: 0;
   --ams-link-appearance-subtle-hover-text-decoration-line: underline;
   --ams-link-appearance-subtle-text-decoration-line: none;
   --ams-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
-  --ams-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
   --ams-link-appearance-regular-text-decoration-line: underline;
   --ams-link-appearance-text-underline-offset: 0.375rem;
-  --ams-link-appearance-text-decoration-thickness: 0.125rem;
   --ams-hyphenation-overflow-wrap: break-word;
   --ams-hyphenation-hyphens: auto;
   --ams-hyphenation-hyphenate-limit-chars: 12 8 4;
   --ams-focus-outline-offset: 2px;
-  --ams-border-width-lg: 3px;
-  --ams-border-width-md: 2px;
-  --ams-border-width-sm: 1px;
   --ams-action-submit-cursor: pointer;
   --ams-action-navigate-cursor: pointer;
   --ams-action-inert-cursor: default;
@@ -145,6 +145,10 @@
   --ams-color-primary-blue: #004699;
   --ams-color-primary-white: #FFFFFF;
   --ams-color-primary-black: #000000;
+  --ams-border-width-xl: 0.25rem;
+  --ams-border-width-lg: 0.1875rem;
+  --ams-border-width-md: 0.125rem;
+  --ams-border-width-sm: 0.0625rem;
   --ams-unordered-list-line-height: var(--ams-text-level-5-line-height);
   --ams-unordered-list-inverse-color: var(--ams-color-primary-white);
   --ams-unordered-list-font-weight: var(--ams-text-font-weight-normal);
@@ -155,7 +159,6 @@
   --ams-top-task-link-label-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
   --ams-top-task-link-label-hover-color: var(--ams-color-dark-blue);
   --ams-top-task-link-label-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-top-task-link-label-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-top-task-link-label-line-height: var(--ams-text-level-4-line-height);
   --ams-top-task-link-label-font-weight: var(--ams-text-font-weight-bold);
@@ -166,38 +169,56 @@
   --ams-top-task-link-description-font-size: var(--ams-text-level-6-font-size);
   --ams-top-task-link-description-font-family: var(--ams-text-font-family);
   --ams-top-task-link-description-color: var(--ams-color-primary-black);
+  --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
+  --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
+  --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
+  --ams-time-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
+  --ams-time-input-disabled-background-color: var(--ams-color-primary-white);
+  --ams-time-input-padding-inline: var(--ams-space-inside-md);
+  --ams-time-input-padding-block: var(--ams-space-inside-xs);
+  --ams-time-input-outline-offset: var(--ams-focus-outline-offset);
+  --ams-time-input-line-height: var(--ams-text-level-5-line-height);
+  --ams-time-input-font-weight: var(--ams-text-font-weight-normal);
+  --ams-time-input-font-size: var(--ams-text-level-5-font-size);
+  --ams-time-input-font-family: var(--ams-text-font-family);
+  --ams-time-input-color: var(--ams-color-primary-black);
+  --ams-time-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
+  --ams-time-input-background-color: var(--ams-color-primary-white);
   --ams-text-input-placeholder-color: var(--ams-color-neutral-grey3);
-  --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-red);
-  --ams-text-input-invalid-box-shadow: inset 0 0 0 1px var(--ams-color-primary-red);
-  --ams-text-input-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
+  --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
+  --ams-text-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
+  --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-text-input-disabled-color: var(--ams-color-neutral-grey2);
-  --ams-text-input-disabled-box-shadow: inset 0 0 0 1px var(--ams-color-neutral-grey2);
+  --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
   --ams-text-input-disabled-background-color: var(--ams-color-primary-white);
   --ams-text-input-padding-inline: var(--ams-space-inside-md);
   --ams-text-input-padding-block: var(--ams-space-inside-xs);
   --ams-text-input-outline-offset: var(--ams-focus-outline-offset);
-  --ams-text-input-line-height: var(--ams-text-level-6-line-height);
+  --ams-text-input-line-height: var(--ams-text-level-5-line-height);
   --ams-text-input-font-weight: var(--ams-text-font-weight-normal);
-  --ams-text-input-font-size: var(--ams-text-level-6-font-size);
+  --ams-text-input-font-size: var(--ams-text-level-5-font-size);
   --ams-text-input-font-family: var(--ams-text-font-family);
   --ams-text-input-color: var(--ams-color-primary-black);
-  --ams-text-input-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
+  --ams-text-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
+  --ams-text-input-background-color: var(--ams-color-primary-white);
   --ams-text-area-placeholder-color: var(--ams-color-neutral-grey3);
-  --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-red);
-  --ams-text-area-invalid-box-shadow: inset 0 0 0 1px var(--ams-color-primary-red);
-  --ams-text-area-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
+  --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
+  --ams-text-area-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
+  --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-text-area-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-text-area-disabled-color: var(--ams-color-neutral-grey2);
-  --ams-text-area-disabled-box-shadow: inset 0 0 0 1px var(--ams-color-neutral-grey2);
+  --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
   --ams-text-area-disabled-background-color: var(--ams-color-primary-white);
   --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
-  --ams-text-area-min-height: calc(var(--ams-text-level-6-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
-  --ams-text-area-line-height: var(--ams-text-level-6-line-height);
+  --ams-text-area-min-height: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
+  --ams-text-area-line-height: var(--ams-text-level-5-line-height);
   --ams-text-area-font-weight: var(--ams-text-font-weight-normal);
-  --ams-text-area-font-size: var(--ams-text-level-6-font-size);
+  --ams-text-area-font-size: var(--ams-text-level-5-font-size);
   --ams-text-area-font-family: var(--ams-text-font-family);
   --ams-text-area-color: var(--ams-color-primary-black);
-  --ams-text-area-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
+  --ams-text-area-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
+  --ams-text-area-background-color: var(--ams-color-primary-white);
   --ams-tabs-button-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-tabs-button-disabled-color: var(--ams-color-neutral-grey2);
   --ams-tabs-button-selected-color: var(--ams-color-primary-white);
@@ -205,20 +226,21 @@
   --ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 var(--ams-color-dark-blue);
   --ams-tabs-button-hover-color: var(--ams-color-dark-blue);
   --ams-tabs-button-line-height: var(--ams-text-level-5-line-height);
-  --ams-tabs-button-font-size: var(--ams-text-level-5-font-size);
   --ams-tabs-button-font-weight: var(--ams-text-font-weight-normal);
+  --ams-tabs-button-font-size: var(--ams-text-level-5-font-size);
   --ams-tabs-button-font-family: var(--ams-text-font-family);
   --ams-tabs-button-cursor: var(--ams-action-activate-cursor);
   --ams-tabs-button-color: var(--ams-color-primary-blue);
-  --ams-tabs-list-border-bottom: .125rem solid var(--ams-color-primary-blue);
+  --ams-tabs-list-border-bottom: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
+  --ams-tabs-list-background-color: var(--ams-color-primary-white);
   --ams-table-header-cell-font-weight: var(--ams-text-font-weight-bold);
   --ams-table-cell-padding-inline: var(--ams-space-inside-md);
   --ams-table-cell-padding-block: var(--ams-space-inside-md);
-  --ams-table-cell-border-bottom: 1px solid var(--ams-color-neutral-grey1);
+  --ams-table-cell-border-bottom: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
   --ams-table-caption-font-weight: var(--ams-text-font-weight-bold);
   --ams-table-line-height: var(--ams-text-level-5-line-height);
-  --ams-table-font-size: var(--ams-text-level-5-font-size);
   --ams-table-font-weight: var(--ams-text-font-weight-normal);
+  --ams-table-font-size: var(--ams-text-level-5-font-size);
   --ams-table-font-family: var(--ams-text-font-family);
   --ams-table-color: var(--ams-color-primary-black);
   --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
@@ -241,42 +263,64 @@
   --ams-skip-link-padding-block: var(--ams-space-inside-xs);
   --ams-skip-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-skip-link-line-height: var(--ams-text-level-6-line-height);
-  --ams-skip-link-font-size: var(--ams-text-level-6-font-size);
   --ams-skip-link-font-weight: var(--ams-text-font-weight-normal);
+  --ams-skip-link-font-size: var(--ams-text-level-6-font-size);
   --ams-skip-link-font-family: var(--ams-text-font-family);
   --ams-skip-link-color: var(--ams-color-primary-white);
   --ams-skip-link-background-color: var(--ams-color-primary-blue);
+  --ams-select-option-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
+  --ams-select-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
+  --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
+  --ams-select-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
+  --ams-select-padding-inline: var(--ams-space-inside-md) calc(2 * var(--ams-space-inside-md) + 1em);
+  --ams-select-padding-block: var(--ams-space-inside-xs);
+  --ams-select-outline-offset: var(--ams-focus-outline-offset);
+  --ams-select-line-height: var(--ams-text-level-5-line-height);
+  --ams-select-font-weight: var(--ams-text-font-weight-normal);
+  --ams-select-font-size: var(--ams-text-level-5-font-size);
+  --ams-select-font-family: var(--ams-text-font-family);
+  --ams-select-color: var(--ams-color-primary-black);
+  --ams-select-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
+  --ams-select-background-position: right var(--ams-space-inside-md) center;
+  --ams-select-background-color: var(--ams-color-primary-white);
   --ams-search-field-input-placeholder-color: var(--ams-color-neutral-grey3);
-  --ams-search-field-input-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
-  --ams-search-field-input-cancel-button-width: var(--ams-text-level-6-font-size);
-  --ams-search-field-input-cancel-button-height: var(--ams-text-level-6-font-size);
+  --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
+  --ams-search-field-input-cancel-button-width: var(--ams-text-level-5-font-size);
+  --ams-search-field-input-cancel-button-height: var(--ams-text-level-5-font-size);
   --ams-search-field-input-cancel-button-color: var(--ams-color-primary-blue);
   --ams-search-field-input-padding-inline: var(--ams-space-inside-md);
   --ams-search-field-input-padding-block: var(--ams-space-inside-xs);
   --ams-search-field-input-outline-offset: var(--ams-focus-outline-offset);
-  --ams-search-field-input-line-height: var(--ams-text-level-6-line-height);
+  --ams-search-field-input-line-height: var(--ams-text-level-5-line-height);
   --ams-search-field-input-font-weight: var(--ams-text-font-weight-normal);
-  --ams-search-field-input-font-size: var(--ams-text-level-6-font-size);
+  --ams-search-field-input-font-size: var(--ams-text-level-5-font-size);
   --ams-search-field-input-font-family: var(--ams-text-font-family);
   --ams-search-field-input-color: var(--ams-color-primary-black);
-  --ams-search-field-input-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
+  --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
+  --ams-search-field-input-background-color: var(--ams-color-primary-white);
   --ams-search-field-button-padding-inline: var(--ams-space-inside-xs);
   --ams-search-field-button-padding-block: var(--ams-space-inside-xs);
   --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
   --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
   --ams-search-field-button-color: var(--ams-color-primary-white);
   --ams-search-field-button-background-color: var(--ams-color-primary-blue);
+  --ams-screen-background-color: var(--ams-color-primary-white);
   --ams-row-gap-xl: var(--ams-space-stack-xl);
   --ams-row-gap-lg: var(--ams-space-stack-lg);
   --ams-row-gap-md: var(--ams-space-stack-md);
   --ams-row-gap-sm: var(--ams-space-stack-sm);
   --ams-row-gap-xs: var(--ams-space-stack-xs);
+  --ams-radio-hover-text-decoration-thickness: var(--ams-border-width-md);
   --ams-radio-hover-color: var(--ams-color-dark-blue);
   --ams-radio-disabled-color: var(--ams-color-neutral-grey3);
   --ams-radio-circle-invalid-hover-border-color: var(--ams-color-primary-red);
   --ams-radio-circle-invalid-border-color: var(--ams-color-primary-red);
   --ams-radio-circle-hover-border-color: var(--ams-color-dark-blue);
+  --ams-radio-circle-disabled-border-width: var(--ams-border-width-md);
   --ams-radio-circle-disabled-border-color: var(--ams-color-neutral-grey3);
+  --ams-radio-circle-border-width: var(--ams-border-width-md);
   --ams-radio-circle-border-color: var(--ams-color-primary-blue);
   --ams-radio-outline-offset: var(--ams-focus-outline-offset);
   --ams-radio-line-height: var(--ams-text-level-5-line-height);
@@ -297,7 +341,6 @@
   --ams-pagination-button-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
   --ams-pagination-button-current-font-weight: var(--ams-text-font-weight-bold);
   --ams-pagination-button-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-pagination-button-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-pagination-button-padding-inline: var(--ams-space-inside-sm);
   --ams-pagination-button-outline-offset: var(--ams-focus-outline-offset);
@@ -307,13 +350,14 @@
   --ams-pagination-font-family: var(--ams-text-font-family);
   --ams-page-menu-item-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
   --ams-page-menu-item-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-page-menu-item-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-page-menu-item-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
   --ams-page-menu-item-line-height: var(--ams-text-level-6-line-height);
   --ams-page-menu-item-font-weight: var(--ams-text-font-weight-normal);
   --ams-page-menu-item-font-size: var(--ams-text-level-6-font-size);
   --ams-page-menu-item-font-family: var(--ams-text-font-family);
+  --ams-page-menu-row-gap: var(--ams-space-grid-xs);
+  --ams-page-menu-column-gap: var(--ams-space-grid-md);
   --ams-page-heading-line-height: var(--ams-text-level-0-font-size);
   --ams-page-heading-inverse-color: var(--ams-color-primary-white);
   --ams-page-heading-font-weight: var(--ams-text-font-weight-bold);
@@ -338,17 +382,13 @@
   --ams-logo-title-color: var(--ams-color-primary-red);
   --ams-logo-emblem-color: var(--ams-color-primary-red);
   --ams-link-standalone-hover-text-underline-offset: var(--ams-link-appearance-regular-hover-text-underline-offset);
-  --ams-link-standalone-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
   --ams-link-standalone-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-link-standalone-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-standalone-text-decoration-line: var(--ams-link-appearance-regular-text-decoration-line);
   --ams-link-standalone-line-height: var(--ams-text-level-5-line-height);
   --ams-link-standalone-font-size: var(--ams-text-level-5-font-size);
   --ams-link-inline-visited-color: var(--ams-color-purple);
   --ams-link-inline-hover-text-underline-offset: var(--ams-link-appearance-regular-hover-text-underline-offset);
-  --ams-link-inline-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
   --ams-link-inline-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-link-inline-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-inline-text-decoration-line: var(--ams-link-appearance-regular-text-decoration-line);
   --ams-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-link-font-weight: var(--ams-text-font-weight-normal);
@@ -361,11 +401,15 @@
   --ams-link-list-link-small-line-height: var(--ams-text-level-6-line-height);
   --ams-link-list-link-small-font-size: var(--ams-text-level-6-font-size);
   --ams-link-list-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-list-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-link-list-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-link-list-link-font-weight: var(--ams-text-font-weight-normal);
   --ams-link-list-link-font-family: var(--ams-text-font-family);
+  --ams-label-line-height: var(--ams-text-level-4-line-height);
+  --ams-label-font-weight: var(--ams-text-font-weight-bold);
+  --ams-label-font-size: var(--ams-text-level-4-font-size);
+  --ams-label-font-family: var(--ams-text-font-family);
+  --ams-label-color: var(--ams-color-primary-black);
   --ams-icon-size-6-line-height: var(--ams-text-level-6-line-height);
   --ams-icon-size-6-font-size: var(--ams-text-level-6-font-size);
   --ams-icon-size-5-line-height: var(--ams-text-level-5-line-height);
@@ -419,11 +463,6 @@
   --ams-gap-md: var(--ams-space-grid-md);
   --ams-gap-sm: var(--ams-space-grid-sm);
   --ams-gap-xs: var(--ams-space-grid-xs);
-  --ams-form-label-line-height: var(--ams-text-level-4-line-height);
-  --ams-form-label-font-weight: var(--ams-text-font-weight-bold);
-  --ams-form-label-font-size: var(--ams-text-level-4-font-size);
-  --ams-form-label-font-family: var(--ams-text-font-family);
-  --ams-form-label-color: var(--ams-color-primary-black);
   --ams-form-field-character-counter-error-color: var(--ams-color-primary-red);
   --ams-form-field-character-counter-line-height: var(--ams-text-level-6-line-height);
   --ams-form-field-character-counter-font-weight: var(--ams-text-font-weight-normal);
@@ -436,11 +475,38 @@
   --ams-fieldset-legend-font-family: var(--ams-text-font-family);
   --ams-fieldset-legend-color: var(--ams-color-primary-black);
   --ams-dialog-background-color: var(--ams-color-primary-white);
+  --ams-description-list-details-padding-inline-start: var(--ams-space-inside-xl);
+  --ams-description-list-details-font-weight: var(--ams-text-font-weight-bold);
+  --ams-description-list-row-gap: var(--ams-space-stack-md);
+  --ams-description-list-line-height: var(--ams-text-level-5-line-height);
+  --ams-description-list-inverse-color: var(--ams-color-primary-white);
+  --ams-description-list-gap: var(--ams-space-stack-md);
+  --ams-description-list-font-weight: var(--ams-text-font-weight-normal);
+  --ams-description-list-font-size: var(--ams-text-level-5-font-size);
+  --ams-description-list-font-family: var(--ams-text-font-family);
+  --ams-description-list-color: var(--ams-color-primary-black);
+  --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
+  --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
+  --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
+  --ams-date-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
+  --ams-date-input-disabled-background-color: var(--ams-color-primary-white);
+  --ams-date-input-padding-inline: var(--ams-space-inside-lg);
+  --ams-date-input-padding-block: var(--ams-space-inside-xs);
+  --ams-date-input-outline-offset: var(--ams-focus-outline-offset);
+  --ams-date-input-line-height: var(--ams-text-level-5-line-height);
+  --ams-date-input-font-weight: var(--ams-text-font-weight-normal);
+  --ams-date-input-font-size: var(--ams-text-level-5-font-size);
+  --ams-date-input-font-family: var(--ams-text-font-family);
+  --ams-date-input-color: var(--ams-color-primary-black);
+  --ams-date-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
+  --ams-date-input-background-color: var(--ams-color-primary-white);
   --ams-column-gap-xl: var(--ams-space-grid-xl);
   --ams-column-gap-lg: var(--ams-space-grid-lg);
   --ams-column-gap-md: var(--ams-space-grid-md);
   --ams-column-gap-sm: var(--ams-space-grid-sm);
   --ams-column-gap-xs: var(--ams-space-grid-xs);
+  --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-md);
   --ams-checkbox-hover-color: var(--ams-color-dark-blue);
   --ams-checkbox-disabled-color: var(--ams-color-neutral-grey3);
   --ams-checkbox-checkmark-indeterminate-hover-background-color: var(--ams-color-dark-blue);
@@ -451,14 +517,17 @@
   --ams-checkbox-checkmark-invalid-checked-hover-background-color: var(--ams-color-primary-red);
   --ams-checkbox-checkmark-invalid-checked-background-color: var(--ams-color-primary-red);
   --ams-checkbox-checkmark-invalid-border-color: var(--ams-color-primary-red);
+  --ams-checkbox-checkmark-hover-border-width: var(--ams-border-width-lg);
   --ams-checkbox-checkmark-hover-border-color: var(--ams-color-dark-blue);
   --ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: var(--ams-color-neutral-grey3);
   --ams-checkbox-checkmark-disabled-indeterminate-background-color: var(--ams-color-neutral-grey3);
   --ams-checkbox-checkmark-disabled-checked-hover-background-color: var(--ams-color-neutral-grey3);
   --ams-checkbox-checkmark-disabled-checked-background-color: var(--ams-color-neutral-grey3);
+  --ams-checkbox-checkmark-disabled-border-width: var(--ams-border-width-md);
   --ams-checkbox-checkmark-disabled-border-color: var(--ams-color-neutral-grey3);
   --ams-checkbox-checkmark-checked-hover-background-color: var(--ams-color-dark-blue);
   --ams-checkbox-checkmark-checked-background-color: var(--ams-color-primary-blue);
+  --ams-checkbox-checkmark-border-width: var(--ams-border-width-md);
   --ams-checkbox-checkmark-border-color: var(--ams-color-primary-blue);
   --ams-checkbox-outline-offset: var(--ams-focus-outline-offset);
   --ams-checkbox-line-height: var(--ams-text-level-5-line-height);
@@ -469,28 +538,28 @@
   --ams-card-outline-offset: var(--ams-focus-outline-offset);
   --ams-card-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
   --ams-card-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-card-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey2);
   --ams-button-tertiary-hover-color: var(--ams-color-dark-blue);
-  --ams-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--ams-color-dark-blue);
+  --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
   --ams-button-tertiary-color: var(--ams-color-primary-blue);
-  --ams-button-secondary-focus-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
+  --ams-button-secondary-focus-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
   --ams-button-secondary-disabled-color: var(--ams-color-neutral-grey2);
-  --ams-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey2);
+  --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
   --ams-button-secondary-disabled-background-color: var(--ams-color-primary-white);
   --ams-button-secondary-hover-color: var(--ams-color-dark-blue);
-  --ams-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--ams-color-dark-blue);
-  --ams-button-secondary-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
+  --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
+  --ams-button-secondary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
   --ams-button-secondary-color: var(--ams-color-primary-blue);
   --ams-button-secondary-background-color: var(--ams-color-primary-white);
-  --ams-button-primary-hover-box-shadow: inset 0 0 0 2px var(--ams-color-dark-blue);
+  --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
   --ams-button-primary-hover-background-color: var(--ams-color-dark-blue);
-  --ams-button-primary-disabled-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey2);
+  --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
   --ams-button-primary-disabled-background-color: var(--ams-color-neutral-grey2);
   --ams-button-primary-color: var(--ams-color-primary-white);
-  --ams-button-primary-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
+  --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
   --ams-button-primary-background-color: var(--ams-color-primary-blue);
+  --ams-button-forced-color-mode-border: var(--ams-border-width-md) solid;
   --ams-button-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-button-outline-offset: var(--ams-focus-outline-offset);
   --ams-button-padding-inline: var(--ams-space-inside-md);
@@ -502,7 +571,6 @@
   --ams-breadcrumb-item-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
   --ams-breadcrumb-item-link-hover-color: var(--ams-color-dark-blue);
   --ams-breadcrumb-item-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-breadcrumb-item-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-breadcrumb-item-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-breadcrumb-item-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-breadcrumb-line-height: var(--ams-text-level-6-line-height);
@@ -573,25 +641,31 @@
   --ams-alert-error-border-color: var(--ams-color-primary-red);
   --ams-alert-padding-inline: var(--ams-space-inside-lg);
   --ams-alert-padding-block: var(--ams-space-inside-md);
-  --ams-accordion-panel-padding-inline: var(--ams-space-inside-md);
-  --ams-accordion-panel-padding-block: var(--ams-space-inside-md);
-  --ams-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey3);
+  --ams-alert-border-width: var(--ams-border-width-xl);
+  --ams-accordion-panel-padding-block: 0 var(--ams-space-inside-md);
+  --ams-accordion-button-hover-color: var(--ams-color-dark-blue);
   --ams-accordion-button-focus-outline-offset: var(--ams-focus-outline-offset);
-  --ams-accordion-button-padding-inline: var(--ams-space-inside-md);
   --ams-accordion-button-padding-block: var(--ams-space-inside-sm);
   --ams-accordion-button-line-height: var(--ams-text-level-5-line-height);
+  --ams-accordion-button-gap: var(--ams-space-inside-md);
   --ams-accordion-button-font-weight: var(--ams-text-font-weight-bold);
   --ams-accordion-button-font-size: var(--ams-text-level-5-font-size);
   --ams-accordion-button-font-family: var(--ams-text-font-family);
   --ams-accordion-button-color: var(--ams-color-primary-blue);
+  --ams-accordion-gap: var(--ams-space-inside-xs);
+  --ams-link-appearance-regular-hover-text-decoration-thickness: var(--ams-border-width-lg);
   --ams-link-appearance-on-background-light-color: var(--ams-color-primary-black);
   --ams-link-appearance-on-background-dark-color: var(--ams-color-primary-white);
   --ams-link-appearance-hover-color: var(--ams-color-dark-blue);
+  --ams-link-appearance-text-decoration-thickness: var(--ams-border-width-md);
   --ams-link-appearance-color: var(--ams-color-primary-blue);
+  --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-top-task-link-label-color: var(--ams-link-appearance-color);
   --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
+  --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-pagination-color: var(--ams-link-appearance-color);
   --ams-page-menu-item-hover-color: var(--ams-link-appearance-hover-color);
+  --ams-page-menu-item-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-page-menu-item-color: var(--ams-link-appearance-color);
   --ams-link-on-background-light-visited-color: var(--ams-link-appearance-on-background-light-color);
   --ams-link-on-background-light-hover-color: var(--ams-link-appearance-on-background-light-color);
@@ -599,6 +673,10 @@
   --ams-link-on-background-dark-visited-color: var(--ams-link-appearance-on-background-dark-color);
   --ams-link-on-background-dark-hover-color: var(--ams-link-appearance-on-background-dark-color);
   --ams-link-on-background-dark-color: var(--ams-link-appearance-on-background-dark-color);
+  --ams-link-standalone-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
+  --ams-link-standalone-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
+  --ams-link-inline-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
+  --ams-link-inline-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-hover-color: var(--ams-link-appearance-hover-color);
   --ams-link-color: var(--ams-link-appearance-color);
   --ams-link-list-link-on-background-light-hover-color: var(--ams-link-appearance-on-background-light-color);
@@ -606,8 +684,11 @@
   --ams-link-list-link-on-background-dark-hover-color: var(--ams-link-appearance-on-background-dark-color);
   --ams-link-list-link-on-background-dark-color: var(--ams-link-appearance-on-background-dark-color);
   --ams-link-list-link-hover-color: var(--ams-link-appearance-hover-color);
+  --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-list-link-color: var(--ams-link-appearance-color);
   --ams-card-link-hover-color: var(--ams-link-appearance-hover-color);
+  --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-card-link-color: var(--ams-link-appearance-color);
+  --ams-breadcrumb-item-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-breadcrumb-item-link-color: var(--ams-link-appearance-color);
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.1",
+  "version": "0.8.0",
   "author": "Community for NL Design System",
   "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/brand/ams/border.tokens.json

@@ -0,0 +1,12 @@
+{
+  "ams": {
+    "border": {
+      "width": {
+        "sm": { "value": "0.0625rem" },
+        "md": { "value": "0.125rem" },
+        "lg": { "value": "0.1875rem" },
+        "xl": { "value": "0.25rem" }
+      }
+    }
+  }
+}

package/src/common/ams/link-appearance.tokens.json

@@ -2,7 +2,7 @@
   "ams": {
     "link-appearance": {
       "color": { "value": "{ams.color.primary-blue}" },
-      "text-decoration-thickness": { "value": "0.125rem" },
+      "text-decoration-thickness": { "value": "{ams.border.width.md}" },
       "text-underline-offset": { "value": "0.375rem" },
       "hover": {
         "color": { "value": "{ams.color.dark-blue}" }
@@ -16,7 +16,7 @@
       "regular": {
         "text-decoration-line": { "value": "underline" },
         "hover": {
-          "text-decoration-thickness": { "value": "0.1875rem" },
+          "text-decoration-thickness": { "value": "{ams.border.width.lg}" },
           "text-underline-offset": { "value": "0.3125rem" }
         }
       },

package/src/components/ams/accordion.tokens.json

@@ -1,24 +1,26 @@
 {
   "ams": {
     "accordion": {
+      "gap": { "value": "{ams.space.inside.xs}" },
       "button": {
         "color": { "value": "{ams.color.primary-blue}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "gap": { "value": "{ams.space.inside.md}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "padding-block": { "value": "{ams.space.inside.sm}" },
-        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "padding-inline": { "value": "0" },
         "focus": {
           "outline-offset": { "value": "{ams.focus.outline-offset}" }
         },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey3}" }
+          "color": { "value": "{ams.color.dark-blue}" }
         }
       },
       "panel": {
-        "padding-block": { "value": "{ams.space.inside.md}" },
-        "padding-inline": { "value": "{ams.space.inside.md}" }
+        "padding-block": { "value": "0 {ams.space.inside.md}" },
+        "padding-inline": { "value": "0" }
       }
     }
   }

package/src/components/ams/alert.tokens.json

@@ -1,7 +1,7 @@
 {
   "ams": {
     "alert": {
-      "border-width": { "value": "4px" },
+      "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
       "gap": { "value": "1rem" },
       "padding-block": { "value": "{ams.space.inside.md}" },

package/src/components/ams/button.tokens.json

@@ -12,41 +12,44 @@
       "disabled": {
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
+      "forced-color-mode": {
+        "border": { "value": "{ams.border.width.md} solid" }
+      },
       "primary": {
         "background-color": { "value": "{ams.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "disabled": {
           "background-color": { "value": "{ams.color.neutral-grey2}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" }
         },
         "hover": {
           "background-color": { "value": "{ams.color.dark-blue}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" }
         }
       },
       "secondary": {
         "background-color": { "value": "{ams.color.primary-white}" },
         "color": { "value": "{ams.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 3px {ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
           "color": { "value": "{ams.color.dark-blue}" }
         },
         "disabled": {
           "background-color": { "value": "{ams.color.primary-white}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" },
           "color": { "value": "{ams.color.neutral-grey2}" }
         },
         "focus": {
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }
         }
       },
       "tertiary": {
         "background-color": { "value": "transparent" },
         "color": { "value": "{ams.color.primary-blue}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" },
           "color": { "value": "{ams.color.dark-blue}" }
         },
         "disabled": {