User interface customization

/** @public */
export interface ThemeOptions {
  colors: ThemeOptionsColors
  elements: ThemeOptionsElements
}
/** @public */
export interface ThemeOptionsColors {
  dark: ThemeOptionsColorsValue
  light: ThemeOptionsColorsValue
}
/** @public */
export interface ThemeOptionsColorsValue {
  primary: string
  onPrimary: string
  secondary: string
  onSecondary: string
  error: string
  onError: string
  secondaryContainer: string
  onSecondaryContainer: string
  surface: string
  onSurface: string
  surfaceVariant: string
  onSurfaceVariant: string
}
/** @public */
export interface ThemeOptionsElements {
  button: ThemeOptionsElementsButton
  camera: ThemeOptionsElementsCamera
  cameraCorners: ThemeOptionsElementsCameraCorners
  cameraInstructions: ThemeOptionsElementsCameraInstructions
  cameraSelect: ThemeOptionsElementsCameraSelect
  cameraTip: ThemeOptionsElementsCameraTip
  dialog: ThemeOptionsElementsDialog
  poweredBy: ThemeOptionsElementsPoweredBy
  qrcode: ThemeOptionsElementsQrcode
  root: ThemeOptionsElementsRoot
}
/** @public */
export interface ThemeOptionsElementsRoot {
  buttonCameraSelect: ThemeOptionsElementsRootButtonCameraSelect
  buttonCancel: ThemeOptionsElementsRootButtonCancel
  buttonClose: ThemeOptionsElementsRootButtonClose
  buttonFlash: ThemeOptionsElementsRootButtonFlash
  buttonPin: ThemeOptionsElementsRootButtonPin
  buttonsSwitchToMobileChoice: ThemeOptionsElementsRootButtonsSwitchToMobileChoice
  cameraBiometric: ThemeOptionsElementsRootCameraBiometric
  cameraTip: ThemeOptionsElementsRootCameraTip
  headline: ThemeOptionsElementsRootHeadline
  host: ThemeOptionsElementsRootHost
  poweredBy: ThemeOptionsElementsRootPoweredBy
  text: ThemeOptionsElementsRootText
  texts: ThemeOptionsElementsRootTexts
}
/** @public */
export interface ThemeOptionsElementsRootButtonCameraSelect {
  right: string
  top: string
}
/** @public */
export interface ThemeOptionsElementsRootButtonCancel {
  left: string
  top: string
}
/** @public */
export interface ThemeOptionsElementsRootButtonClose {
  left: string
  top: string
}
/** @public */
export interface ThemeOptionsElementsRootButtonFlash {
  right: string
  top: string
}
/** @public */
export interface ThemeOptionsElementsRootButtonPin {
  height: string
  width: string
}
/** @public */
export interface ThemeOptionsElementsRootButtonsSwitchToMobileChoice {
  gap: string
}
/** @public */
export interface ThemeOptionsElementsRootCameraBiometric {
  width: string
}
/** @public */
export interface ThemeOptionsElementsRootCameraTip {
  top: string
}
/** @public */
export interface ThemeOptionsElementsRootHeadline {
  fontSize: string
  fontWeight: string
  marginTop: string
}
/** @public */
export interface ThemeOptionsElementsRootHost {
  borderRadius: string
  gap: string
  padding: string
}
/** @public */
export interface ThemeOptionsElementsRootPoweredBy {
  bottom: string
}
/** @public */
export interface ThemeOptionsElementsRootText {
  fontSize: string
  fontWeight: string
}
/** @public */
export interface ThemeOptionsElementsRootTexts {
  gap: string
}
/** @public */
export interface ThemeOptionsElementsButton {
  host: ThemeOptionsElementsButtonHost
  size: ThemeOptionsElementsButtonSize
  variant: ThemeOptionsElementsButtonVariant
}
/** @public */
export interface ThemeOptionsElementsButtonHost {
  borderRadius: string
  fontSize: string
  fontWeight: string
  padding: string
}
/** @public */
export interface ThemeOptionsElementsButtonSizeSmallHost {
  fontSize: string
  padding: string
}
/** @public */
export interface ThemeOptionsElementsButtonSizeSmall {
  host: ThemeOptionsElementsButtonSizeSmallHost
}
/** @public */
export interface ThemeOptionsElementsButtonSize {
  small: ThemeOptionsElementsButtonSizeSmall
}
/** @public */
export interface ThemeOptionsElementsButtonVariantTextHostHover {
  opacity: string
}
/** @public */
export interface ThemeOptionsElementsButtonVariantTextHost {
  borderBottom: string
  hover: ThemeOptionsElementsButtonVariantTextHostHover
}
/** @public */
export interface ThemeOptionsElementsButtonVariantText {
  host: ThemeOptionsElementsButtonVariantTextHost
}
/** @public */
export interface ThemeOptionsElementsButtonVariant {
  text: ThemeOptionsElementsButtonVariantText
}
/** @public */
export interface ThemeOptionsElementsCamera {
  host: ThemeOptionsElementsCameraHost
}
/** @public */
export interface ThemeOptionsElementsCameraHost {
  after: ThemeOptionsElementsCameraHostAfter
  before: ThemeOptionsElementsCameraHostBefore
}
/** @public */
export interface ThemeOptionsElementsCameraHostAfter {
  background: string
  height: string
}
/** @public */
export interface ThemeOptionsElementsCameraHostBefore {
  background: string
  height: string
}
/** @public */
export interface ThemeOptionsElementsCameraCorners {
  svg: ThemeOptionsElementsCameraCornersSvg
}
/** @public */
export interface ThemeOptionsElementsCameraCornersSvg {
  strokeWidth: string
}
/** @public */
export interface ThemeOptionsElementsCameraInstructions {
  host: ThemeOptionsElementsCameraInstructionsHost
  li: ThemeOptionsElementsCameraInstructionsLi
  liText: ThemeOptionsElementsCameraInstructionsLiText
}
/** @public */
export interface ThemeOptionsElementsCameraInstructionsHost {
  gap: string
}
/** @public */
export interface ThemeOptionsElementsCameraInstructionsLi {
  borderRadius: string
  gap: string
  padding: string
}
/** @public */
export interface ThemeOptionsElementsCameraInstructionsLiText {
  fontSize: string
}
/** @public */
export interface ThemeOptionsElementsCameraSelect {
  labels: ThemeOptionsElementsCameraSelectLabels
  labelsHeadline: ThemeOptionsElementsCameraSelectLabelsHeadline
  labelsText: ThemeOptionsElementsCameraSelectLabelsText
  list: ThemeOptionsElementsCameraSelectList
  option: ThemeOptionsElementsCameraSelectOption
}
/** @public */
export interface ThemeOptionsElementsCameraSelectLabels {
  gap: string
  padding: string
}
/** @public */
export interface ThemeOptionsElementsCameraSelectLabelsHeadline {
  fontSize: string
  fontWeight: string
}
/** @public */
export interface ThemeOptionsElementsCameraSelectLabelsText {
  fontSize: string
  fontWeight: string
}
/** @public */
export interface ThemeOptionsElementsCameraSelectList {
  borderRadius: string
  margin: string
  padding: string
  top: string
}
/** @public */
export interface ThemeOptionsElementsCameraSelectOption {
  borderRadius: string
  marginTop: string
  padding: string
}
/** @public */
export interface ThemeOptionsElementsCameraTip {
  backdropFilter: string
  borderRadius: string
  fontSize: string
  fontWeight: string
  height: string
  padding: string
}
/** @public */
export interface ThemeOptionsElementsDialog {
  host: ThemeOptionsElementsDialogHost
}
/** @public */
export interface ThemeOptionsElementsDialogHost {
  border: string
  borderRadius: string
  boxShadow: string
}
/** @public */
export interface ThemeOptionsElementsFaceScanHost {
  borderRadius?: string
}
/** @public */
export interface ThemeOptionsElementsFaceScanCorners {
  strokeWidth: string
}
/** @public */
export interface ThemeOptionsElementsFaceScanScanLine {
  height: string
  animationDuration?: string
}
/** @public */
export interface ThemeOptionsElementsFaceScanWireframe {
  opacity: string
  animationDuration?: string
}
/** @public */
export interface ThemeOptionsElementsFaceScanTransitions {
  borderFade?: string
  wireframeFade?: string
}
/** @public */
export interface ThemeOptionsElementsPoweredBy {
  host: ThemeOptionsElementsPoweredByHost
  icon: ThemeOptionsElementsPoweredByIcon
  span: ThemeOptionsElementsPoweredBySpan
}
/** @public */
export interface ThemeOptionsElementsPoweredByHost {
  gap: string
  height: string
}
/** @public */
export interface ThemeOptionsElementsPoweredByIcon {
  height: string
  width: string
}
/** @public */
export interface ThemeOptionsElementsPoweredBySpan {
  fontSize: string
  fontWeight: string
  letterSpacing: string
}
/** @public */
export interface ThemeOptionsElementsQrcode {
  host: ThemeOptionsElementsQrcodeHost
}
/** @public */
export interface ThemeOptionsElementsQrcodeHost {
  borderRadius: string
  padding: string
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auth</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 0;
        min-height: 100vh;
        padding: 8px;
      }

      kl-auth {
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <kl-auth
      customer="CUSTOMER_NAME"
      enable-camera-instructions
      key="IMAGE_ENCRYPTION_PUBLIC_KEY"
      lang="en"
      size="375"
      theme="light"
      transaction-data='DATA_FROM_CUSTOMER_SERVER_TO_BE_SIGNED'
      username="USERNAME"
      service-url="KEYLESS_AUTHENTICATION_SERVICE_URL"
    ></kl-auth>
    <script src="./node_modules/@keyless/sdk-web-components/index.js" type="module"></script>
    <script>
      const auth = document.querySelector('kl-auth')

      auth.themeOptions = {
        colors: {
          light: {
            primary: '#000',
            onPrimary: '#fff',
            surface: '#fff',
            onSurface: '#000'
          }
        }
      }
    </script>
  </body>
</html>