@authme/identity-verification 2.8.57 → 2.8.59

package/assets/styles/_theme.scss

@@ -0,0 +1,144 @@
+:root {
+  /* Font size */
+  --authme-font-small: 12px;
+  --authme-font-mid: 16px;
+  --authme-font-large: 18px;
+
+  /* Loading and item size */
+  --authme-loading-max-width: 200px;
+  --authme-loading-max-height: 75px;
+  --authme-item-height: 56px;
+
+  /** Color theme 變數命名原則 --authme-<figma-color-name>---<description>
+   * 如果命名有問題，請 UI 協助調整
+   */
+
+  // Grayscale
+
+  --authme-white: #ffffff;
+  --authme-gray_100: #fafafa;
+  --authme-gray_200: #f1f1f1;
+  --authme-gray_300: #e8e8e8;
+  --authme-gray_400: #d9d9d9;
+  --authme-gray_500: #a9a9a9;
+  --authme-gray_600: #8a8a8a;
+  --authme-gray_700: #6b6b6b;
+  --authme-gray_800: #545454;
+  --authme-gray_900: #333333;
+  --authme-black: #000000;
+
+  // Primary
+
+  --authme-primary: #00c1b6;
+  --authme-secondary: #25608a;
+
+  // Other
+
+  --authme-scanning_color: #7cfff9;
+  --authme-close_hint_background: var(--authme-gray_800);
+
+  // figma 沒有的顏色，但是需要用到的顏色
+
+  --atuhme-btn-active: #00b1a7; // button_primary_outline hover border 變化的顏色
+  --authme-retry-btn-active: #effffe; // button_primary_outline hover 背景 變化的顏色
+  --atuhme-btn-shadow: rgb(0 193 182 / 25%); // 按鈕的陰影顏色
+
+  /* Compoment theme 變數命名原則 --authme__<figma-component-name>__<figma-locale-id(option)>---<description>
+   * 如果命名有問題，請 UI 協助調整
+   **/
+
+  // 對外展示變數：
+
+  --authme__button_primary: var(--authme-primary); // 1
+  --authme__button_primary---text: var(--authme-white); // 2
+
+  --authme__button_primary_outline: var(--authme-primary); // 3
+  --authme__button_primary_outline---text: var(--authme-primary); // 4
+
+  --authme__dialog_button_primary: var(--authme-primary); // 5
+  --authme__dialog_button_primary---text: var(--authme-white); // 6
+
+  --authme__document-menu_fouce: var(--authme-primary); // 7
+  --authme__document-menu_fouce---fouce-point: var(--authme-secondary); // 8
+
+  --authme__scan_frame: var(--authme-white); // 9
+  --authme__scan_frame_hint_success: var(--authme-scanning_color); // 10
+  --authme__scanning: var(--authme-scanning_color); // 11
+
+  --authme__card_side_hint: var(--authme-white); // 12,Web 目前尚未實作。
+
+  --authme__uploading: var(--authme-primary); // 13
+
+  --authme__upload_success: var(--authme-primary); // 14
+  --authme__upload_success---text: var(
+    --authme-white
+  ); // 15,由於 Web 目前 loading 並沒有背景的彈窗，所以顏色預設改為白色。
+
+  --authme__powered_by_authme: var(--authme-white); // 16
+
+  /**
+   * 以下是尚未整理的 theme ， 會在未來逐步整理，
+   * 待 UI 將所有 Component 整理好會逐步整理完畢 ， 會用註解盡量標注使用的位置。
+   */
+
+  /* Color variables */
+  --authme-header-color: #ffffff;
+  --authme-outer: rgba(0, 0, 0, 0.65);
+  --authme-menu-footer: #b4b7bd;
+
+  --authme-divide: #e1e3e5;
+  --authme-disable: #dadada;
+
+  /* Custom and brand colors */
+  --authme-custom__primary-1: var(
+    --authme-secondary
+  ); // 使用位置： 選擇國家的下拉選單
+
+  /* Button and shadow */
+
+  /* Scanner and camera */
+  --authme-liveness-scanner-pass-color: var(
+    --authme-scanning_color
+  ); // 活體成功的顏色。
+  --authme-scanner-error-color: var(--authme-white); // 目前 Error 保持初始色調
+  --authme-liveness-scanner-error-color: #ff7070; // 活體 error 的顏色。
+
+  --authme-scanner-fraud-scanning: #7cfff9; // 舊防偽的箭頭顏色，目前未使用
+
+  /* Loading and animation */
+
+  --authme-outer-opaque: #ffffff; // Web SDK 初始 loading 的顏色。
+  --authme-outer-opaque-text: #000000; // Web SDK 初始 loading 的顏色。
+
+  // 舊版控制 svg arrow 的方法，目前是直接在 lottie 操作變數使用。
+  --authme-lottie-arrow-color: unset;
+  --authme-lottie-scan-color: unset;
+  --authme-lottie-success-color: unset;
+
+  /* Layers and z-index */
+  --authme-layers-0-z-index: 100;
+  --authme-layers-1-z-index: 101;
+  --authme-layers-2-z-index: 102;
+  --authme-layers-3-z-index: 103;
+  --authme-layers-4-z-index: 104;
+  --authme-layers-5-z-index: 105;
+  --authme-layers-close-z-index: 106;
+  /* Country select */
+  --authme-country-select-dropdown-transition-duration: 0.3s;
+  --authme-country-select-dropdown-animation-duration: 0.5s;
+
+  /* Container
+   * 容器的顏色，暫時不修改，未來需要整理。
+   */
+  --authme-container-border-color: #ebebeb;
+  --authme-container-bg-color: #ffffff;
+  --authme-container-bg-active-color: #f9f9f9;
+
+  /* Picture button */
+  --authme-picture-button: #00c1b6; // showPictureButton = true 的時候的顏色，不確定該功能的 spec
+
+  /* Tutorial arrow */
+  --authme-tutorial-arrow: var(--authme-scanning_color); // 防偽教學的箭頭顏色
+
+  --authme-rotate-arrow: #00c1b6;
+}