@amsterdam/design-system-tokens 0.6.1 → 0.7.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.1",
+  "version": "0.7.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/{amsterdam → ams}/color.tokens.json

@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "color": {
       "primary-black": { "value": "#000000" },
       "primary-white": { "value": "#FFFFFF" },

package/src/brand/{amsterdam → ams}/proportion.tokens.json

@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "proportion": {
       "x-tall": { "value": "9 / 16" },
       "tall": { "value": "4 / 5" },

package/src/brand/{amsterdam → ams}/space.compact.tokens.json

@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "space": {
       "grid": {
         "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },

package/src/brand/{amsterdam → ams}/space.tokens.json

@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "space": {
       "grid": {
         "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },

package/src/brand/{amsterdam/typography.compact.tokens.json → ams/text.compact.tokens.json}

@@ -1,7 +1,7 @@
 {
-  "amsterdam": {
-    "typography": {
-      "text-level": {
+  "ams": {
+    "text": {
+      "level": {
         "0": {
           "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }
         },

package/src/brand/{amsterdam/typography.tokens.json → ams/text.tokens.json}

@@ -1,12 +1,12 @@
 {
-  "amsterdam": {
-    "typography": {
+  "ams": {
+    "text": {
       "font-family": { "value": "'Amsterdam Sans', Arial, sans-serif" },
       "font-weight": {
         "normal": { "value": 400 },
         "bold": { "value": 800 }
       },
-      "text-level": {
+      "level": {
         "0": {
           "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
           "line-height": { "value": "1.15" }

package/src/common/{amsterdam → ams}/action.tokens.json

@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "action": {
       "activate": { "cursor": { "value": "pointer" } },
       "busy": { "cursor": { "value": "wait" } },

package/src/common/{amsterdam → ams}/border.tokens.json

@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "border-width": {
       "sm": { "value": "1px" },
       "md": { "value": "2px" },

package/src/common/{amsterdam → ams}/focus.tokens.json

@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "focus": {
       "outline-offset": { "value": "2px" }
     }

package/src/common/{amsterdam → ams}/hyphenation.tokens.json

@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "hyphenation": {
       "hyphenate-limit-chars": { "value": "12 8 4" },
       "hyphens": { "value": "auto" },

package/src/common/{amsterdam → ams}/link-appearance.tokens.json

@@ -1,17 +1,17 @@
 {
-  "amsterdam": {
+  "ams": {
     "link-appearance": {
-      "color": { "value": "{amsterdam.color.primary-blue}" },
+      "color": { "value": "{ams.color.primary-blue}" },
       "text-decoration-thickness": { "value": "0.125rem" },
       "text-underline-offset": { "value": "0.375rem" },
       "hover": {
-        "color": { "value": "{amsterdam.color.dark-blue}" }
+        "color": { "value": "{ams.color.dark-blue}" }
       },
       "on-background-dark": {
-        "color": { "value": "{amsterdam.color.primary-white}" }
+        "color": { "value": "{ams.color.primary-white}" }
       },
       "on-background-light": {
-        "color": { "value": "{amsterdam.color.primary-black}" }
+        "color": { "value": "{ams.color.primary-black}" }
       },
       "regular": {
         "text-decoration-line": { "value": "underline" },

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

@@ -0,0 +1,25 @@
+{
+  "ams": {
+    "accordion": {
+      "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}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" },
+        "padding-block": { "value": "{ams.space.inside.sm}" },
+        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "focus": {
+          "outline-offset": { "value": "{ams.focus.outline-offset}" }
+        },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey3}" }
+        }
+      },
+      "panel": {
+        "padding-block": { "value": "{ams.space.inside.md}" },
+        "padding-inline": { "value": "{ams.space.inside.md}" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+{
+  "ams": {
+    "alert": {
+      "border-width": { "value": "4px" },
+      "border-style": { "value": "solid" },
+      "gap": { "value": "1rem" },
+      "padding-block": { "value": "{ams.space.inside.md}" },
+      "padding-inline": { "value": "{ams.space.inside.lg}" },
+      "error": {
+        "border-color": { "value": "{ams.color.primary-red}" }
+      },
+      "info": {
+        "border-color": { "value": "{ams.color.primary-blue}" }
+      },
+      "success": {
+        "border-color": { "value": "{ams.color.dark-green}" }
+      },
+      "warning": {
+        "border-color": { "value": "{ams.color.orange}" }
+      },
+      "close": {
+        "fill": { "value": "{ams.color.primary-black}" },
+        "hover": {
+          "fill": { "value": "{ams.color.primary-blue}" }
+        }
+      }
+    }
+  }
+}

package/src/components/ams/aspect-ratio.tokens.json

@@ -0,0 +1,12 @@
+{
+  "ams": {
+    "aspect-ratio": {
+      "x-tall": { "value": "{ams.proportion.x-tall}" },
+      "tall": { "value": "{ams.proportion.tall}" },
+      "square": { "value": "{ams.proportion.square}" },
+      "wide": { "value": "{ams.proportion.wide}" },
+      "x-wide": { "value": "{ams.proportion.x-wide}" },
+      "2x-wide": { "value": "{ams.proportion.2x-wide}" }
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+{
+  "ams": {
+    "badge": {
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "padding-inline": { "value": "{ams.space.inside.xs}" },
+      "blue": {
+        "background-color": { "value": "{ams.color.blue}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "dark-blue": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "dark-green": {
+        "background-color": { "value": "{ams.color.dark-green}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "green": {
+        "background-color": { "value": "{ams.color.green}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "magenta": {
+        "background-color": { "value": "{ams.color.magenta}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "orange": {
+        "background-color": { "value": "{ams.color.orange}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "purple": {
+        "background-color": { "value": "{ams.color.purple}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "yellow": {
+        "background-color": { "value": "{ams.color.yellow}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "ams": {
+    "blockquote": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.3.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "line-height": { "value": "{ams.text.level.3.line-height}" },
+      "inverse-color": { "value": "{ams.color.primary-white}" }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "ams": {
+    "breadcrumb": {
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "separator": {
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
+        }
+      },
+      "item-link": {
+        "color": { "value": "{ams.link-appearance.color}" },
+        "outline-offset": { "value": "{ams.focus.outline-offset}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "hover": {
+          "color": { "value": "{ams.color.dark-blue}" },
+          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+{
+  "ams": {
+    "button": {
+      "cursor": { "value": "{ams.action.activate.cursor}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "gap": { "value": "1rem" },
+      "padding-block": { "value": "{ams.space.inside.xs}" },
+      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "disabled": {
+        "cursor": { "value": "{ams.action.disabled.cursor}" }
+      },
+      "primary": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 2px {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}" }
+        },
+        "hover": {
+          "background-color": { "value": "{ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 2px {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}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 3px {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}" },
+          "color": { "value": "{ams.color.neutral-grey2}" }
+        },
+        "focus": {
+          "box-shadow": { "value": "inset 0 0 0 2px {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}" },
+          "color": { "value": "{ams.color.dark-blue}" }
+        },
+        "disabled": {
+          "background-color": { "value": "transparent" },
+          "color": { "value": "{ams.color.neutral-grey2}" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "ams": {
+    "card": {
+      "link": {
+        "color": { "value": "{ams.link-appearance.color}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "hover": {
+          "color": { "value": "{ams.link-appearance.hover.color}" },
+          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        }
+      },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" }
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+{
+  "ams": {
+    "checkbox": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "checkmark": {
+        "border-color": { "value": "{ams.color.primary-blue}" },
+        "checked": {
+          "background-color": { "value": "{ams.color.primary-blue}" },
+          "background-image": {
+            "value": "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": { "value": "{ams.color.dark-blue}" }
+          }
+        },
+        "disabled": {
+          "border-color": { "value": "{ams.color.neutral-grey3}" },
+          "checked": {
+            "background-color": { "value": "{ams.color.neutral-grey3}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.neutral-grey3}" }
+            }
+          },
+          "indeterminate": {
+            "background-color": { "value": "{ams.color.neutral-grey3}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.neutral-grey3}" }
+            }
+          }
+        },
+        "hover": {
+          "border-color": { "value": "{ams.color.dark-blue}" }
+        },
+        "invalid": {
+          "border-color": { "value": "{ams.color.primary-red}" },
+          "checked": {
+            "background-color": { "value": "{ams.color.primary-red}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.primary-red}" }
+            }
+          },
+          "hover": {
+            "border-color": { "value": "{ams.color.primary-red}" }
+          },
+          "indeterminate": {
+            "background-color": { "value": "{ams.color.primary-red}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.primary-red}" }
+            }
+          }
+        },
+        "indeterminate": {
+          "background-color": { "value": "{ams.color.primary-blue}" },
+          "background-image": {
+            "value": "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": { "value": "{ams.color.dark-blue}" }
+          }
+        }
+      },
+      "disabled": {
+        "color": { "value": "{ams.color.neutral-grey3}" }
+      },
+      "hover": {
+        "color": { "value": "{ams.color.dark-blue}" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+{
+  "ams": {
+    "column": {
+      "gap": {
+        "xs": { "value": "{ams.space.grid.xs}" },
+        "sm": { "value": "{ams.space.grid.sm}" },
+        "md": { "value": "{ams.space.grid.md}" },
+        "lg": { "value": "{ams.space.grid.lg}" },
+        "xl": { "value": "{ams.space.grid.xl}" }
+      }
+    }
+  }
+}

package/src/components/{amsterdam → ams}/dialog.tokens.json

@@ -1,15 +1,15 @@
 {
-  "amsterdam": {
+  "ams": {
     "dialog": {
-      "background-color": { "value": "{amsterdam.color.primary-white}" },
+      "background-color": { "value": "{ams.color.primary-white}" },
       "border": { "value": "0" },
       "max-inline-size": { "value": "min(87.69vw, 45rem)" },
       "title": {
-        "color": { "value": "{amsterdam.color.primary-black}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
+        "color": { "value": "{ams.color.primary-black}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" }
       },
       "form": {
         "gap": { "value": "1.5rem" },

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

@@ -0,0 +1,13 @@
+{
+  "ams": {
+    "fieldset": {
+      "legend": {
+        "color": { "value": "{ams.color.primary-black}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.4.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "line-height": { "value": "{ams.text.level.4.line-height}" }
+      }
+    }
+  }
+}

package/src/components/ams/form-label.tokens.json

@@ -0,0 +1,11 @@
+{
+  "ams": {
+    "form-label": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.4.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "line-height": { "value": "{ams.text.level.4.line-height}" }
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+{
+  "ams": {
+    "gap": {
+      "xs": { "value": "{ams.space.grid.xs}" },
+      "sm": { "value": "{ams.space.grid.sm}" },
+      "md": { "value": "{ams.space.grid.md}" },
+      "lg": { "value": "{ams.space.grid.lg}" },
+      "xl": { "value": "{ams.space.grid.xl}" }
+    }
+  }
+}

package/src/components/ams/grid.compact.tokens.json

@@ -0,0 +1,7 @@
+{
+  "ams": {
+    "grid": {
+      "padding-inline": { "value": "{ams.space.grid.md}" }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+{
+  "ams": {
+    "grid": {
+      "column-count": { "value": "4" },
+      "column-gap": { "value": "{ams.space.grid.md}" },
+      "padding-block": {
+        "sm": { "value": "{ams.space.grid.sm}" },
+        "md": { "value": "{ams.space.grid.md}" },
+        "lg": { "value": "{ams.space.grid.lg}" }
+      },
+      "padding-inline": { "value": "{ams.space.grid.lg}" },
+      "row-gap": {
+        "sm": { "value": "{ams.space.grid.sm}" },
+        "md": { "value": "{ams.space.grid.md}" },
+        "lg": { "value": "{ams.space.grid.lg}" }
+      },
+      "medium": {
+        "column-count": { "value": "8" }
+      },
+      "wide": {
+        "column-count": { "value": "12" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+{
+  "ams": {
+    "header": {
+      "column-gap": {
+        "value": "{ams.space.grid.md}",
+        "comment": "Must have the same value as `ams.grid.column-gap`."
+      },
+      "padding-block": { "value": "{ams.space.inside.md}" },
+      "logo-link": {
+        "outline-offset": { "value": "{ams.focus.outline-offset}" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+{
+  "ams": {
+    "heading": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "inverse-color": { "value": "{ams.color.primary-white}" },
+      "level": {
+        "1": {
+          "font-size": { "value": "{ams.text.level.1.font-size}" },
+          "line-height": { "value": "{ams.text.level.1.line-height}" }
+        },
+        "2": {
+          "font-size": { "value": "{ams.text.level.2.font-size}" },
+          "line-height": { "value": "{ams.text.level.2.line-height}" }
+        },
+        "3": {
+          "font-size": { "value": "{ams.text.level.3.font-size}" },
+          "line-height": { "value": "{ams.text.level.3.line-height}" }
+        },
+        "4": {
+          "font-size": { "value": "{ams.text.level.4.font-size}" },
+          "line-height": { "value": "{ams.text.level.4.line-height}" }
+        },
+        "5": {
+          "font-size": { "value": "{ams.text.level.5.font-size}" },
+          "line-height": { "value": "{ams.text.level.5.line-height}" }
+        },
+        "6": {
+          "font-size": { "value": "{ams.text.level.6.font-size}" },
+          "line-height": { "value": "{ams.text.level.6.line-height}" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+{
+  "ams": {
+    "icon-button": {
+      "color": { "value": "{ams.color.primary-blue}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "hover": {
+        "background-color": { "value": "rgba(0, 70, 153, 0.125)" },
+        "color": { "value": "{ams.color.dark-blue}" }
+      },
+      "disabled": {
+        "color": { "value": "{ams.color.neutral-grey2}" }
+      },
+      "on-background-light": {
+        "color": { "value": "{ams.color.primary-black}" },
+        "hover": {
+          "background-color": { "value": "rgba(0, 0, 0, 0.125)" },
+          "color": { "value": "{ams.color.primary-black}" }
+        },
+        "disabled": {
+          "color": { "value": "{ams.color.neutral-grey2}" }
+        }
+      },
+      "on-background-dark": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.primary-white}" },
+        "hover": {
+          "background-color": { "value": "{ams.color.dark-blue}" },
+          "color": { "value": "{ams.color.primary-white}" }
+        },
+        "disabled": {
+          "color": { "value": "{ams.color.primary-white}" },
+          "background-color": { "value": "{ams.color.neutral-grey2}" }
+        }
+      }
+    }
+  }
+}