@incodetech/web 2.2.0 → 2.3.0-rc.1

package/dist/themes/dark.css

@@ -20,6 +20,7 @@
   --primitive-color-gray-900-80: rgba(20, 21, 26, 0.8);
   --primitive-color-gray-1000: #000000;
   --primitive-color-gray-1000-80: rgba(0, 0, 0, 0.8);
+  --primitive-color-gray-1000-20: rgba(0, 0, 0, 0.2);
 
   /* Color / Brand */
 
@@ -739,6 +740,7 @@
   --surface-neutral-900-80-static: var(--primitive-color-gray-900-80);
   --surface-neutral-1000: var(--primitive-color-gray-1000);
   --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);
+  --surface-neutral-1000-20-static: var(--primitive-color-gray-1000-20);
 
   /* Surface / Brand */
 
@@ -869,6 +871,7 @@
   --surface-neutral-900-80-static: var(--primitive-color-gray-0-80);
   --surface-neutral-1000: var(--primitive-color-gray-0);
   --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);
+  --surface-neutral-1000-20-static: var(--primitive-color-gray-1000-20);
 
   /* Surface / Brand */
 
@@ -1196,6 +1199,8 @@
   --incode-curp-confirm-max-w: 340px;
   --age-verification-logo-height: 20px;
   --id-processing-image-blur-radius: 8px;
+  --incode-checkbox-input-size: 28px;
+  --incode-tutorial-animation-container-max-w: 400px;
 
   /* segmented date input */
   --segmented-date-input-height: 56px;
@@ -1203,22 +1208,59 @@
   --segmented-date-input-mm-dd-width: 1.9em;
   --segmented-date-input-yyyy-width: 3.5em;
 
+  /* text area */
+  --text-area-input-min-h: 56px;
+
+  /* input */
+  --date-input-padding-right: 44px;
+
+  /* overlay */
+  --overlay-container-max-w: 468px;
+
+  /* progress bar */
+  --progress-bar-width: 164px;
+
+  /* modal */
+  --modal-dialog-max-w: 468px;
+  --modal-dialog-max-h: min(100vh, 100%);
+
+  /* poa mask */
+  --poa-mask-banner-padding-top: 80px;
+  --poa-mask-emphasis-color: #00b2fd;
+  --poa-mask-banner-text-color: #fff;
+
   /* radio button sizing */
   --radio-button-size: 28px;
   --radio-button-dot-size: 9px;
   --radio-button-label-gap: 10px;
   --radio-button-message-offset: 38px;
 
+  /* button */
+  --button-s-height: 30px;
+
   /* focus outline */
   --focus-outline-width: 2px;
   --focus-outline-offset: 2px;
 
+  /* inline arrow icon */
+  --inline-arrow-icon-size: 0.8em;
+  --inline-arrow-icon-margin-x: 0.2em;
+
   /* home module */
   --home-logo-container-max-width: 180px;
   --home-logo-max-height: 250px;
 
   /* snackbar */
   --snackbar-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+
+  /* dropdown */
+  --dropdown-list-max-h: 320px;
+  --dropdown-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --autocomplete-list-max-h: 200px;
+
+  /* accepted document card */
+  --accepted-document-card-content-max-w: 195px;
+
   /* redirect-to-mobile */
   --redirect-card-max-width: 800px;
   --redirect-card-min-height: 100%;
@@ -1229,6 +1271,16 @@
   --redirect-form-column-max-width: 326px;
   --redirect-phone-input-country-code-width: 130px;
   --redirect-qr-wrapper-border-radius: 21px;
+  --min-height-logo-wrapper: 44px;
+  --width-finished-title: 500px;
+  --width-finished-subtitle: 400px;
+
+  --flow-start-logo-container-max-h: 250px;
+  --flow-start-logo-width: 260px;
+  --flow-start-logo-width-mobile: 200px;
+
+  /* geolocation */
+  --geolocation-permission-step-padding: 5px;
 
   /* electronic signature */
   --electronic-signature-title-max-w: 600px;
@@ -1249,6 +1301,18 @@
   /* id capture */
   --id-capture-notification-animation-height: 130px;
   --id-capture-result-flash-duration: 750ms;
+  --id-capture-frame-border-width: 4px;
+  --id-capture-frame-horizontal-max-width: 640px;
+  --id-capture-frame-vertical-max-width: 274px;
+  --id-capture-verification-option-card-size: 60px;
+  --id-no-attempts-content-max-h: 840px;
+  --id-no-attempts-content-max-w: 800px;
+  --id-capture-hint-svg-size: 800px;
+  --id-capture-notification-content-shadow: 0 2.079px 36.379px 0
+    rgba(0, 0, 0, 0.35);
+  --id-capture-bottom-area-max-w: 384px;
+  --id-capture-frame-vertical-width: clamp(180px, 30vh, 274px);
+  --id-capture-flip-card-subtitle-max-w: 300px;
   --id-capture-result-crossfade-duration: 400ms;
   --id-capture-analyzing-title-fade-duration: 300ms;
   --id-capture-analyzing-title-fade-offset: 4px;
@@ -1257,6 +1321,10 @@
   --camera-frame-capture-result-flash-shadow: 0 0 50px 0
     var(--surface-neutral-0-static);
 
+  /* capture pages (desktop) — repeats multiple times as a fixed
+   black backdrop behind the camera/QR viewfinder on desktop */
+  --capture-page-backdrop-color: #000;
+
   /* digital ID upload */
   --digital-id-preview-w: 156px;
   --digital-id-preview-h: 221px;
@@ -1286,6 +1354,62 @@
   --video-selfie-voice-processing-height: 314px;
   --video-selfie-voice-vignette-shadow: 0 0 0 99999px
     var(--surface-neutral-1000-80-static);
+
+  /* face match */
+  --face-match-tooltip-height: 44px;
+  --face-match-container-min-h: 225px; /* 160px image + 21px gap + 44px tooltip */
+  --face-match-animation-container-min-h: 250px;
+  --face-match-tooltip-arrow-size: 9px;
+  --face-match-photo-gap: 21px; /* the "21px gap" in the min-h comment above */
+  --face-match-photo-size: 160px; /* the "160px image" in the min-h comment above */
+  --face-match-photo-placeholder-bg: #ddd;
+  --face-match-title-line-height: 125%;
+
+  /* face capture */
+  --face-capture-frame-max-w: 335px;
+  --manual-face-capture-max-w: 275px;
+  /* privacy lens capture */
+  --privacy-lens-banner-max-w: 320px;
+  --privacy-lens-banner-color: #4a5568;
+  --privacy-lens-banner-font-size: 0.95rem;
+  --privacy-lens-banner-line-height: 1.4;
+  --privacy-lens-banner-padding: 0 1rem 1rem;
+
+  /* ekyb/c */
+  --ekyb-scrollable-page: 500px;
+
+  /* landscape blocker */
+  --landscape-blocker-padding: 50px;
+  --landscape-blocker-font-weight: 700;
+  --landscape-blocker-viewport-width-fallback: 100vw;
+  --landscape-blocker-viewport-height-fallback: 100vh;
+  --landscape-blocker-icon-height: 90px;
+  --landscape-blocker-icon-margin-bottom: 25px;
+  --landscape-blocker-text-font-size: 22px;
+
+  /* camera frame (see shared/cameraOverlay/cameraFrame.css) */
+  --overlay-opacity: 0.8;
+  --camera-frame-overlay-opacity-active: 1;
+  --camera-frame-overlay-shadow: 0 0 0 9999px
+    rgba(0, 0, 0, var(--overlay-opacity));
+  --camera-frame-overlay-shadow-active: 0 0 0 9999px
+    rgba(0, 0, 0, var(--camera-frame-overlay-opacity-active));
+  --camera-frame-fill-border-color: rgba(255, 255, 255, 0.4);
+
+  /* bottom sheet */
+  --bottom-sheet-handle-height: 5px;
+  --bottom-sheet-handle-width: 36px;
+  --bottom-sheet-handle-radius: 100px;
+
+  /* IDC-04 dark camera-loading experiment (see shared/spinner/spinner.css).
+     Design specced this screen as dark while the rest of the flow stays light,
+     so the themed surface/text tokens cannot be reused here: under the light
+     theme they resolve to light values and the screen loses its dark palette.
+     These pin the dark primitives directly so the screen stays dark regardless
+     of the active theme. */
+  --spinner-always-dark-background: var(--primitive-color-gray-1000);
+  --spinner-always-dark-title: var(--primitive-color-gray-50);
+  --spinner-always-dark-subtitle: var(--primitive-color-gray-300);
 }
 [data-incode-theme='dark'] {
   /* Surface / Neutral */
@@ -1314,6 +1438,7 @@
   --surface-neutral-900-80-static: var(--primitive-color-gray-0-80);
   --surface-neutral-1000: var(--primitive-color-gray-0);
   --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);
+  --surface-neutral-1000-20-static: var(--primitive-color-gray-1000-20);
 
   /* Surface / Brand */
 

package/dist/themes/light.css

@@ -20,6 +20,7 @@
   --primitive-color-gray-900-80: rgba(20, 21, 26, 0.8);
   --primitive-color-gray-1000: #000000;
   --primitive-color-gray-1000-80: rgba(0, 0, 0, 0.8);
+  --primitive-color-gray-1000-20: rgba(0, 0, 0, 0.2);
 
   /* Color / Brand */
 
@@ -739,6 +740,7 @@
   --surface-neutral-900-80-static: var(--primitive-color-gray-900-80);
   --surface-neutral-1000: var(--primitive-color-gray-1000);
   --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);
+  --surface-neutral-1000-20-static: var(--primitive-color-gray-1000-20);
 
   /* Surface / Brand */
 
@@ -869,6 +871,7 @@
   --surface-neutral-900-80-static: var(--primitive-color-gray-0-80);
   --surface-neutral-1000: var(--primitive-color-gray-0);
   --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);
+  --surface-neutral-1000-20-static: var(--primitive-color-gray-1000-20);
 
   /* Surface / Brand */
 
@@ -1196,6 +1199,8 @@
   --incode-curp-confirm-max-w: 340px;
   --age-verification-logo-height: 20px;
   --id-processing-image-blur-radius: 8px;
+  --incode-checkbox-input-size: 28px;
+  --incode-tutorial-animation-container-max-w: 400px;
 
   /* segmented date input */
   --segmented-date-input-height: 56px;
@@ -1203,22 +1208,59 @@
   --segmented-date-input-mm-dd-width: 1.9em;
   --segmented-date-input-yyyy-width: 3.5em;
 
+  /* text area */
+  --text-area-input-min-h: 56px;
+
+  /* input */
+  --date-input-padding-right: 44px;
+
+  /* overlay */
+  --overlay-container-max-w: 468px;
+
+  /* progress bar */
+  --progress-bar-width: 164px;
+
+  /* modal */
+  --modal-dialog-max-w: 468px;
+  --modal-dialog-max-h: min(100vh, 100%);
+
+  /* poa mask */
+  --poa-mask-banner-padding-top: 80px;
+  --poa-mask-emphasis-color: #00b2fd;
+  --poa-mask-banner-text-color: #fff;
+
   /* radio button sizing */
   --radio-button-size: 28px;
   --radio-button-dot-size: 9px;
   --radio-button-label-gap: 10px;
   --radio-button-message-offset: 38px;
 
+  /* button */
+  --button-s-height: 30px;
+
   /* focus outline */
   --focus-outline-width: 2px;
   --focus-outline-offset: 2px;
 
+  /* inline arrow icon */
+  --inline-arrow-icon-size: 0.8em;
+  --inline-arrow-icon-margin-x: 0.2em;
+
   /* home module */
   --home-logo-container-max-width: 180px;
   --home-logo-max-height: 250px;
 
   /* snackbar */
   --snackbar-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+
+  /* dropdown */
+  --dropdown-list-max-h: 320px;
+  --dropdown-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --autocomplete-list-max-h: 200px;
+
+  /* accepted document card */
+  --accepted-document-card-content-max-w: 195px;
+
   /* redirect-to-mobile */
   --redirect-card-max-width: 800px;
   --redirect-card-min-height: 100%;
@@ -1229,6 +1271,16 @@
   --redirect-form-column-max-width: 326px;
   --redirect-phone-input-country-code-width: 130px;
   --redirect-qr-wrapper-border-radius: 21px;
+  --min-height-logo-wrapper: 44px;
+  --width-finished-title: 500px;
+  --width-finished-subtitle: 400px;
+
+  --flow-start-logo-container-max-h: 250px;
+  --flow-start-logo-width: 260px;
+  --flow-start-logo-width-mobile: 200px;
+
+  /* geolocation */
+  --geolocation-permission-step-padding: 5px;
 
   /* electronic signature */
   --electronic-signature-title-max-w: 600px;
@@ -1249,6 +1301,18 @@
   /* id capture */
   --id-capture-notification-animation-height: 130px;
   --id-capture-result-flash-duration: 750ms;
+  --id-capture-frame-border-width: 4px;
+  --id-capture-frame-horizontal-max-width: 640px;
+  --id-capture-frame-vertical-max-width: 274px;
+  --id-capture-verification-option-card-size: 60px;
+  --id-no-attempts-content-max-h: 840px;
+  --id-no-attempts-content-max-w: 800px;
+  --id-capture-hint-svg-size: 800px;
+  --id-capture-notification-content-shadow: 0 2.079px 36.379px 0
+    rgba(0, 0, 0, 0.35);
+  --id-capture-bottom-area-max-w: 384px;
+  --id-capture-frame-vertical-width: clamp(180px, 30vh, 274px);
+  --id-capture-flip-card-subtitle-max-w: 300px;
   --id-capture-result-crossfade-duration: 400ms;
   --id-capture-analyzing-title-fade-duration: 300ms;
   --id-capture-analyzing-title-fade-offset: 4px;
@@ -1257,6 +1321,10 @@
   --camera-frame-capture-result-flash-shadow: 0 0 50px 0
     var(--surface-neutral-0-static);
 
+  /* capture pages (desktop) — repeats multiple times as a fixed
+   black backdrop behind the camera/QR viewfinder on desktop */
+  --capture-page-backdrop-color: #000;
+
   /* digital ID upload */
   --digital-id-preview-w: 156px;
   --digital-id-preview-h: 221px;
@@ -1286,4 +1354,60 @@
   --video-selfie-voice-processing-height: 314px;
   --video-selfie-voice-vignette-shadow: 0 0 0 99999px
     var(--surface-neutral-1000-80-static);
+
+  /* face match */
+  --face-match-tooltip-height: 44px;
+  --face-match-container-min-h: 225px; /* 160px image + 21px gap + 44px tooltip */
+  --face-match-animation-container-min-h: 250px;
+  --face-match-tooltip-arrow-size: 9px;
+  --face-match-photo-gap: 21px; /* the "21px gap" in the min-h comment above */
+  --face-match-photo-size: 160px; /* the "160px image" in the min-h comment above */
+  --face-match-photo-placeholder-bg: #ddd;
+  --face-match-title-line-height: 125%;
+
+  /* face capture */
+  --face-capture-frame-max-w: 335px;
+  --manual-face-capture-max-w: 275px;
+  /* privacy lens capture */
+  --privacy-lens-banner-max-w: 320px;
+  --privacy-lens-banner-color: #4a5568;
+  --privacy-lens-banner-font-size: 0.95rem;
+  --privacy-lens-banner-line-height: 1.4;
+  --privacy-lens-banner-padding: 0 1rem 1rem;
+
+  /* ekyb/c */
+  --ekyb-scrollable-page: 500px;
+
+  /* landscape blocker */
+  --landscape-blocker-padding: 50px;
+  --landscape-blocker-font-weight: 700;
+  --landscape-blocker-viewport-width-fallback: 100vw;
+  --landscape-blocker-viewport-height-fallback: 100vh;
+  --landscape-blocker-icon-height: 90px;
+  --landscape-blocker-icon-margin-bottom: 25px;
+  --landscape-blocker-text-font-size: 22px;
+
+  /* camera frame (see shared/cameraOverlay/cameraFrame.css) */
+  --overlay-opacity: 0.8;
+  --camera-frame-overlay-opacity-active: 1;
+  --camera-frame-overlay-shadow: 0 0 0 9999px
+    rgba(0, 0, 0, var(--overlay-opacity));
+  --camera-frame-overlay-shadow-active: 0 0 0 9999px
+    rgba(0, 0, 0, var(--camera-frame-overlay-opacity-active));
+  --camera-frame-fill-border-color: rgba(255, 255, 255, 0.4);
+
+  /* bottom sheet */
+  --bottom-sheet-handle-height: 5px;
+  --bottom-sheet-handle-width: 36px;
+  --bottom-sheet-handle-radius: 100px;
+
+  /* IDC-04 dark camera-loading experiment (see shared/spinner/spinner.css).
+     Design specced this screen as dark while the rest of the flow stays light,
+     so the themed surface/text tokens cannot be reused here: under the light
+     theme they resolve to light values and the screen loses its dark palette.
+     These pin the dark primitives directly so the screen stays dark regardless
+     of the active theme. */
+  --spinner-always-dark-background: var(--primitive-color-gray-1000);
+  --spinner-always-dark-title: var(--primitive-color-gray-50);
+  --spinner-always-dark-subtitle: var(--primitive-color-gray-300);
 }