fix(Liveness): update camera module background on verifying step to match theme (#5125)

Author: esauerbo

Diff for: .changeset/seven-frogs-complain.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+fix(Liveness): Update camera module background on verifying step to match theme

Diff for: docs/__tests__/__snapshots__/cssvars-table.test.ts.snap

@@ -3380,7 +3380,7 @@ exports[`CSS Variables Table 1`] = `
     },
     {
         "variable": "--amplify-components-liveness-camera-module-background-color",
-        "value": "var(--amplify-colors-black)"
+        "value": "var(--amplify-colors-background-primary)"
     },
     {
         "variable": "--amplify-components-loader-animation-duration",

Diff for: packages/ui/src/theme/__tests__/__snapshots__/defaultTheme.test.ts.snap

@@ -718,7 +718,7 @@ exports[`@aws-amplify/ui defaultTheme should match snapshot 1`] = `
 --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
 --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
 --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
---amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
+--amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary);
 --amplify-components-loader-width: var(--amplify-font-sizes-medium);
 --amplify-components-loader-height: var(--amplify-font-sizes-medium);
 --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);

Diff for: packages/ui/src/theme/__tests__/__snapshots__/overrides.test.ts.snap

@@ -718,7 +718,7 @@ exports[`@aws-amplify/ui overrides should match snapshot 1`] = `
 --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
 --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
 --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
---amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
+--amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary);
 --amplify-components-loader-width: var(--amplify-font-sizes-medium);
 --amplify-components-loader-height: var(--amplify-font-sizes-medium);
 --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);

Diff for: packages/ui/src/theme/__tests__/__snapshots__/themeType.test.ts.snap

@@ -28,6 +28,7 @@ exports[`Amplify UI Theme components should allow empty components 1`] = `
       "image": {},
       "inappmessaging": {},
       "link": {},
+      "liveness": {},
       "loader": {},
       "menu": {},
       "pagination": {},

Diff for: packages/ui/src/theme/__tests__/themeType.test.ts

@@ -30,6 +30,7 @@ describe('Amplify UI Theme', () => {
             image: {},
             inappmessaging: {},
             link: {},
+            liveness: {},
             loader: {},
             menu: {},
             pagination: {},

Diff for: packages/ui/src/theme/tokens/components/liveness.ts

@@ -13,6 +13,6 @@ export type LivenessTokens<OutputType extends OutputVariantKey> = {
 
 export const liveness: Required<LivenessTokens<'default'>> = {
   cameraModule: {
-    backgroundColor: { value: '{colors.black}' },
+    backgroundColor: { value: '{colors.background.primary.value}' },
   },
 };