The following Design Token changes need to be made, these arose from the Design QA of the first batch of web components.

making the token value of color.border.disabled to use the same value as color.background.disabled for the Mastercard theme in both modes.

Update the border radius of the checkbox to 4px in the Mastercard theme (currently set to 2px, this doesn’t really fit with the look and feel of the rest of our components)

Update the border radius of the Modal to 20px in the Mastercard theme (currently set to 10px, this doesn’t really fit with the look and feel of the rest of our components such as Card and Menu)

The feedback from Andy is that our Modal overlay offers too little contrast between the actual modal and the application visuals underneath. I tested in design and I agree. Therefore we need to update 2 tokens:

{color.background.backdrop-mode-dark} to color.black at 60% opacity in Dark mode for the Mastercard theme. While this improves it, the modal could still use a border in order to ensure its can be distinguished form the background

component.modal.border-color should reference color.border.default in both modes for the Mastercard theme.

Author: olearyb

plugins/made-tokens/json/made-unify-tokens.json

@@ -6184,13 +6184,13 @@
             "studio.tokens": {
               "modify": {
                 "type": "alpha",
-                "value": "0.4",
+                "value": "0.6",
                 "space": "lch"
               }
             }
           },
           "$type": "color",
-          "$value": "{color.gray.1800}"
+          "$value": "{color.black}"
         },
         "surface": {
           "default-mode-light": {
@@ -6696,11 +6696,13 @@
         },
         "disabled-mode-light": {
           "$type": "color",
-          "$value": "{color.gray.100}"
+          "$value": "{color.gray.300}",
+          "$description": "Border color for elements in their disabled state"
         },
         "disabled-mode-dark": {
           "$type": "color",
-          "$value": "{color.gray.1600}"
+          "$value": "{color.gray.1400}",
+          "$description": "Border color for elements in their disabled state"
         },
         "input-mode-light": {
           "$type": "color",
@@ -7461,12 +7463,12 @@
         "border-color-mode-light": {
           "$componentLevelToken": "true",
           "$type": "color",
-          "$value": "{color.border.none}"
+          "$value": "{color.border.default-mode-light}"
         },
         "border-color-mode-dark": {
           "$componentLevelToken": "true",
           "$type": "color",
-          "$value": "{color.border.none}"
+          "$value": "{color.border.default-mode-dark}"
         },
         "top-bar": {
           "padding-top": {
@@ -7493,7 +7495,7 @@
         "border-radius": {
           "$componentLevelToken": "true",
           "$type": "borderRadius",
-          "$value": "{border.radius.default}"
+          "$value": "{border.radius.large}"
         },
         "box-shadow": {
           "$componentLevelToken": "true",
@@ -9106,7 +9108,7 @@
         "border-radius": {
           "$componentLevelToken": "true",
           "$type": "borderRadius",
-          "$value": "{border-radius.01}"
+          "$value": "{border-radius.02}"
         },
         "box-shadow": {
           "$componentLevelToken": "true",
@@ -14763,7 +14765,7 @@
         "border-color": {
           "$colorSchemeToken": "true",
           "$type": "color",
-          "$value": "{color.border.none}"
+          "$value": "{component.modal.border-color-mode-light}"
         }
       },
       "card": {
@@ -15967,7 +15969,7 @@
         "border-color": {
           "$colorSchemeToken": "true",
           "$type": "color",
-          "$value": "{color.border.none}"
+          "$value": "{component.modal.border-color-mode-dark}"
         }
       },
       "card": {