@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (209) hide show
  1. package/dist/base.css +1071 -0
  2. package/dist/browser-ponyfill-B6W6hHVY.js +344 -0
  3. package/dist/email/email.es.js +145 -0
  4. package/dist/email/styles.css +123 -0
  5. package/dist/flow/flow.es.js +555 -0
  6. package/dist/flow/styles.css +1119 -0
  7. package/dist/incodeModule-Dv8Qllrv.js +254 -0
  8. package/dist/index.es.js +6 -0
  9. package/dist/instance-B-q0ZREN.js +2140 -0
  10. package/dist/otpInput-BtoZe0Wz.js +151 -0
  11. package/dist/page-Dh_Zw2ik.js +234 -0
  12. package/dist/phone/phone.es.js +3441 -0
  13. package/dist/phone/styles.css +305 -0
  14. package/dist/selfie/selfie.es.js +893 -0
  15. package/dist/selfie/styles.css +590 -0
  16. package/dist/selfieTutorial-C-u5GufD.js +29 -0
  17. package/dist/setup-wNL83jmW.js +20 -0
  18. package/dist/themes/dark.css +652 -0
  19. package/dist/themes/light.css +543 -0
  20. package/dist/title-BfO5Dlzk.js +25 -0
  21. package/dist/types/base.d.ts +1 -0
  22. package/dist/types/dark.d.ts +1 -0
  23. package/dist/types/email.d.ts +57 -0
  24. package/dist/types/flow.d.ts +69 -0
  25. package/dist/types/index.d.ts +38 -0
  26. package/dist/types/light.d.ts +1 -0
  27. package/dist/types/phone.d.ts +58 -0
  28. package/dist/types/selfie.d.ts +31 -0
  29. package/dist/types/styles.d.ts +1 -0
  30. package/dist/types/themes/dark.d.ts +1 -0
  31. package/dist/types/themes/light.d.ts +1 -0
  32. package/dist/uiConfig-CQ1W9cUD.js +23 -0
  33. package/dist/vendor-preact-CK0WeTOR.js +584 -0
  34. package/package.json +32 -26
  35. package/dev/README.md +0 -163
  36. package/dev/getToken.ts +0 -36
  37. package/dev/headless.html +0 -875
  38. package/dev/index.html +0 -366
  39. package/dev/main-headless.tsx +0 -1332
  40. package/dev/main-orchestrated-flow.tsx +0 -1158
  41. package/dev/main-preact.tsx +0 -323
  42. package/dev/main-simplified.tsx +0 -123
  43. package/dev/main-web-component.tsx +0 -256
  44. package/dev/main.tsx +0 -332
  45. package/dev/manual.html +0 -27
  46. package/dev/orchestrated-flow.html +0 -64
  47. package/dev/simplified.html +0 -64
  48. package/dev/tiktok-logo.svg +0 -7
  49. package/src/defineCustomElement.tsx +0 -30
  50. package/src/email/email.test.tsx +0 -368
  51. package/src/email/email.tsx +0 -255
  52. package/src/email/emailInput.test.tsx +0 -264
  53. package/src/email/emailInput.tsx +0 -85
  54. package/src/email/styles.css +0 -59
  55. package/src/flow/flow.test.tsx +0 -796
  56. package/src/flow/flow.tsx +0 -292
  57. package/src/flow/flowCompleted.css +0 -30
  58. package/src/flow/flowCompleted.test.tsx +0 -331
  59. package/src/flow/flowCompleted.tsx +0 -121
  60. package/src/flow/flowInit.test.ts +0 -264
  61. package/src/flow/flowInit.ts +0 -94
  62. package/src/flow/flowStart.css +0 -58
  63. package/src/flow/flowStart.test.tsx +0 -49
  64. package/src/flow/flowStart.tsx +0 -41
  65. package/src/flow/incode-logo.svg +0 -8
  66. package/src/flow/index.ts +0 -7
  67. package/src/flow/preloadFlow.test.ts +0 -421
  68. package/src/flow/preloadFlow.ts +0 -171
  69. package/src/flow/styles.css +0 -9
  70. package/src/flow/unsupportedModule.css +0 -21
  71. package/src/flow/unsupportedModule.tsx +0 -39
  72. package/src/flow/useFlowInitialization.test.tsx +0 -292
  73. package/src/flow/useFlowInitialization.ts +0 -128
  74. package/src/flow/useModuleLoader.test.tsx +0 -212
  75. package/src/flow/useModuleLoader.ts +0 -92
  76. package/src/hooks/index.ts +0 -1
  77. package/src/hooks/useManager.test.ts +0 -91
  78. package/src/hooks/useManager.ts +0 -40
  79. package/src/i18n/index.ts +0 -3
  80. package/src/i18n/instance.ts +0 -16
  81. package/src/i18n/setup.ts +0 -184
  82. package/src/i18n/useTranslation.ts +0 -42
  83. package/src/index.ts +0 -27
  84. package/src/permissions/assets/android-dots-icon.svg +0 -7
  85. package/src/permissions/assets/android-settings-icon.svg +0 -16
  86. package/src/permissions/assets/android-toggle-icon.svg +0 -20
  87. package/src/permissions/assets/bank-card-icon.svg +0 -14
  88. package/src/permissions/assets/camera-icon.svg +0 -12
  89. package/src/permissions/assets/camera-ios.svg +0 -53
  90. package/src/permissions/assets/check-icon.svg +0 -8
  91. package/src/permissions/assets/chrome-icon.svg +0 -43
  92. package/src/permissions/assets/password-icon.svg +0 -11
  93. package/src/permissions/assets/permissions-img.svg +0 -51
  94. package/src/permissions/assets/safari-icon.svg +0 -37
  95. package/src/permissions/assets/settings-icon.svg +0 -33
  96. package/src/permissions/assets/toggle-icon.svg +0 -19
  97. package/src/permissions/assets/warning-icon.svg +0 -6
  98. package/src/permissions/boldWithArrow.css +0 -9
  99. package/src/permissions/boldWithArrow.tsx +0 -41
  100. package/src/permissions/denied.css +0 -37
  101. package/src/permissions/denied.tsx +0 -29
  102. package/src/permissions/deniedAndroid.tsx +0 -56
  103. package/src/permissions/deniedDesktop.css +0 -9
  104. package/src/permissions/deniedDesktop.tsx +0 -64
  105. package/src/permissions/deniedIOS.tsx +0 -73
  106. package/src/permissions/deniedInstructions.tsx +0 -19
  107. package/src/permissions/iconWrapper.css +0 -9
  108. package/src/permissions/iconWrapper.tsx +0 -15
  109. package/src/permissions/learnMore.css +0 -37
  110. package/src/permissions/learnMore.tsx +0 -85
  111. package/src/permissions/numberedStep.css +0 -13
  112. package/src/permissions/numberedStep.tsx +0 -14
  113. package/src/permissions/permissions.css +0 -13
  114. package/src/permissions/permissions.tsx +0 -68
  115. package/src/phone/phone.tsx +0 -246
  116. package/src/phone/phoneInput.test.tsx +0 -275
  117. package/src/phone/phoneInput.tsx +0 -249
  118. package/src/phone/styles.css +0 -158
  119. package/src/selfie/cameraButton.css +0 -13
  120. package/src/selfie/cameraButton.tsx +0 -35
  121. package/src/selfie/capture.css +0 -57
  122. package/src/selfie/capture.tsx +0 -232
  123. package/src/selfie/errorModal.tsx +0 -218
  124. package/src/selfie/errorModalContent.css +0 -33
  125. package/src/selfie/errorModalContent.tsx +0 -44
  126. package/src/selfie/faceOutline.css +0 -5
  127. package/src/selfie/faceOutline.tsx +0 -22
  128. package/src/selfie/loadingBorder.css +0 -12
  129. package/src/selfie/loadingBorder.tsx +0 -77
  130. package/src/selfie/manualCaptureButton.css +0 -13
  131. package/src/selfie/manualCaptureButton.tsx +0 -35
  132. package/src/selfie/noMoreAttemptsModal.tsx +0 -44
  133. package/src/selfie/notification.css +0 -9
  134. package/src/selfie/notification.tsx +0 -36
  135. package/src/selfie/retryErrorModal.tsx +0 -56
  136. package/src/selfie/selfie.test.tsx +0 -458
  137. package/src/selfie/selfie.tsx +0 -83
  138. package/src/selfie/selfieTutorial.json +0 -2626
  139. package/src/selfie/styles.css +0 -1
  140. package/src/selfie/tutorial.test.tsx +0 -200
  141. package/src/selfie/tutorial.tsx +0 -43
  142. package/src/setup.ts +0 -33
  143. package/src/shared/baseTutorial/baseTutorial.css +0 -21
  144. package/src/shared/baseTutorial/baseTutorial.test.tsx +0 -184
  145. package/src/shared/baseTutorial/baseTutorial.tsx +0 -55
  146. package/src/shared/baseTutorial/replaceBaseTutorial.test.ts +0 -267
  147. package/src/shared/baseTutorial/replaceBaseTutorial.ts +0 -68
  148. package/src/shared/button/button.css +0 -55
  149. package/src/shared/button/button.test.tsx +0 -101
  150. package/src/shared/button/button.tsx +0 -47
  151. package/src/shared/componentRoot/incodeComponent.tsx +0 -12
  152. package/src/shared/countries/countries.test.ts +0 -75
  153. package/src/shared/countries/countries.ts +0 -139
  154. package/src/shared/countries/index.ts +0 -6
  155. package/src/shared/icons/chevronDown.tsx +0 -22
  156. package/src/shared/icons/index.ts +0 -2
  157. package/src/shared/icons/successIcon.css +0 -5
  158. package/src/shared/icons/successIcon.test.tsx +0 -40
  159. package/src/shared/icons/successIcon.tsx +0 -26
  160. package/src/shared/loader/loadingIcon.css +0 -28
  161. package/src/shared/loader/loadingIcon.tsx +0 -67
  162. package/src/shared/lottie/lottie.tsx +0 -108
  163. package/src/shared/otpInput/otpInput.css +0 -85
  164. package/src/shared/otpInput/otpInput.test.tsx +0 -356
  165. package/src/shared/otpInput/otpInput.tsx +0 -241
  166. package/src/shared/page/incode-logo.svg +0 -3
  167. package/src/shared/page/page.css +0 -47
  168. package/src/shared/page/page.test.tsx +0 -97
  169. package/src/shared/page/page.tsx +0 -91
  170. package/src/shared/page/pageUiConfig.test.ts +0 -112
  171. package/src/shared/page/pageUiConfig.ts +0 -64
  172. package/src/shared/page/verifiedByIncode.css +0 -5
  173. package/src/shared/page/verifiedByIncode.tsx +0 -75
  174. package/src/shared/spacer/spacer.css +0 -149
  175. package/src/shared/spacer/spacer.test.tsx +0 -143
  176. package/src/shared/spacer/spacer.tsx +0 -88
  177. package/src/shared/spinner/index.ts +0 -2
  178. package/src/shared/spinner/spinner.css +0 -28
  179. package/src/shared/spinner/spinner.test.tsx +0 -82
  180. package/src/shared/spinner/spinner.tsx +0 -65
  181. package/src/shared/title/title.css +0 -7
  182. package/src/shared/title/title.tsx +0 -12
  183. package/src/shared/uiConfig/uiConfig.ts +0 -36
  184. package/src/shared/webComponent/incodeModule.ts +0 -29
  185. package/src/shared/webComponent/registerIncodeElement.ts +0 -15
  186. package/src/styles/__mocks__/fetchTheme.ts +0 -19
  187. package/src/styles/applyTheme.ts +0 -37
  188. package/src/styles/cn.test.tsx +0 -57
  189. package/src/styles/cn.tsx +0 -21
  190. package/src/styles/core.css +0 -12
  191. package/src/styles/fetchTheme.test.ts +0 -390
  192. package/src/styles/fetchTheme.ts +0 -88
  193. package/src/styles/generatePalette.ts +0 -111
  194. package/src/styles/reset.css +0 -65
  195. package/src/styles/resolveCssVariableToHex.ts +0 -28
  196. package/src/styles/tailwind.css +0 -291
  197. package/src/styles/themeTypes.ts +0 -18
  198. package/src/styles/tokens/colors.css +0 -190
  199. package/src/styles/tokens/components.css +0 -174
  200. package/src/styles/tokens/index.css +0 -4
  201. package/src/styles/tokens/primitives.css +0 -129
  202. package/src/styles/tokens/semantic.css +0 -51
  203. package/src/svg.d.ts +0 -4
  204. package/src/types/assets.d.ts +0 -1
  205. package/src/types/custom-elements.d.ts +0 -104
  206. package/tsconfig.json +0 -22
  207. package/vite.config.ts +0 -260
  208. package/vitest.config.ts +0 -40
  209. package/vitest.setup.ts +0 -16
package/src/styles/tailwind.css DELETED
@@ -1,291 +0,0 @@
1
- @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
2
-
3
- @layer incode-theme, incode-base, incode-components, incode-utilities;
4
- @import "tailwindcss/theme.css" layer(incode-theme);
5
- @import "tailwindcss/utilities.css" layer(incode-utilities);
6
- @import "./reset.css";
7
-
8
- @theme {
9
- --color-surface-neutral-0: var(--surface-neutral-0);
10
- --color-surface-neutral-0-80: var(--surface-neutral-0-80);
11
- --color-surface-neutral-50: var(--surface-neutral-50);
12
- --color-surface-neutral-100: var(--surface-neutral-100);
13
- --color-surface-neutral-200: var(--surface-neutral-200);
14
- --color-surface-neutral-300: var(--surface-neutral-300);
15
- --color-surface-neutral-500: var(--surface-neutral-500);
16
- --color-surface-neutral-700: var(--surface-neutral-700);
17
- --color-surface-neutral-800: var(--surface-neutral-800);
18
- --color-surface-neutral-900: var(--surface-neutral-900);
19
- --color-surface-neutral-900-80: var(--surface-neutral-900-80);
20
- --color-surface-neutral-900-static: var(--surface-neutral-900-static);
21
- --color-surface-neutral-1000: var(--surface-neutral-1000);
22
-
23
- --color-surface-brand-50: var(--surface-brand-50);
24
- --color-surface-brand-400: var(--surface-brand-400-static);
25
- --color-surface-brand-500: var(--surface-brand-500-static);
26
- --color-surface-brand-600: var(--surface-brand-600-static);
27
-
28
- --color-surface-status-negative-50: var(--surface-status-negative-50);
29
- --color-surface-status-negative-600: var(--surface-status-negative-600);
30
- --color-surface-status-warning-50: var(--surface-status-warning-50);
31
- --color-surface-status-warning-500: var(--surface-status-warning-500);
32
- --color-surface-status-positive-50: var(--surface-status-positive-50);
33
- --color-surface-status-positive-600: var(
34
- --surface-status-positive-600-static
35
- );
36
-
37
- --color-icon-neutral-0: var(--icon-neutral-0);
38
- --color-icon-neutral-50: var(--icon-neutral-50-static);
39
- --color-icon-neutral-300: var(--icon-neutral-300);
40
- --color-icon-neutral-500: var(--icon-neutral-500);
41
- --color-icon-neutral-800: var(--icon-neutral-800);
42
- --color-icon-brand-500: var(--icon-brand-500-static);
43
- --color-icon-status-negative: var(--icon-status-negative);
44
- --color-icon-status-warning: var(--icon-status-warning);
45
- --color-icon-status-positive: var(--icon-status-positive-static);
46
-
47
- --color-border-neutral-100: var(--border-neutral-100);
48
- --color-border-neutral-300: var(--border-neutral-300);
49
- --color-border-neutral-500: var(--border-neutral-500);
50
- --color-border-brand-500: var(--border-brand-500-static);
51
- --color-border-brand-600: var(--border-brand-600);
52
- --color-border-status-negative: var(--border-status-negative);
53
- --color-border-status-warning: var(--border-status-warning);
54
- --color-border-status-positive: var(--border-status-positive-static);
55
-
56
- --color-text-body-primary: var(--text-body-primary);
57
- --color-text-body-secondary: var(--text-body-secondary);
58
- --color-text-body-tertiary: var(--text-body-tertiary);
59
- --color-text-body-0: var(--text-body-0-static);
60
- --color-text-link-default: var(--text-link-default);
61
- --color-text-link-hover: var(--text-link-hover-static);
62
- --color-text-link-disabled: var(--text-link-disabled-static);
63
- --color-text-link-visited: var(--text-link-visited);
64
- --color-text-accent-brand: var(--text-accent-brand-static);
65
- --color-text-accent-brand-secondary: var(
66
- --text-accent-brand-secondary-static
67
- );
68
- --color-text-status-negative: var(--text-status-negative);
69
- --color-text-status-warning: var(--text-status-warning);
70
- --color-text-status-positive: var(--text-status-positive-static);
71
-
72
- --spacing: initial;
73
- --spacing-0: var(--spacing-none, 0px);
74
- --spacing-2: var(--spacing-2, 2px);
75
- --spacing-4: var(--spacing-4, 4px);
76
- --spacing-8: var(--spacing-8, 8px);
77
- --spacing-12: var(--spacing-12, 12px);
78
- --spacing-16: var(--spacing-16, 16px);
79
- --spacing-20: var(--spacing-20, 20px);
80
- --spacing-24: var(--spacing-24, 24px);
81
- --spacing-32: var(--spacing-32, 32px);
82
- --spacing-40: var(--spacing-40, 40px);
83
- --spacing-48: var(--spacing-48, 48px);
84
- --spacing-64: var(--spacing-64, 64px);
85
- --spacing-80: var(--spacing-80, 80px);
86
- --spacing-96: var(--spacing-96, 96px);
87
- --spacing-104: var(--spacing-104, 104px);
88
- --spacing-120: var(--spacing-120, 120px);
89
- --spacing-160: var(--spacing-160, 160px);
90
- --spacing-200: var(--spacing-200, 200px);
91
-
92
- --radius-none: var(--border-radius-none);
93
- --radius-x-small: var(--border-radius-x-small);
94
- --radius-small: var(--border-radius-small);
95
- --radius-medium: var(--border-radius-medium);
96
- --radius-large: var(--border-radius-large);
97
- --radius-x-large: var(--border-radius-x-large);
98
- --radius-xx-large: var(--border-radius-xx-large);
99
- --radius-full: var(--border-radius-full);
100
-
101
- --border-width-none: var(--border-none);
102
- --border-width-regular: var(--border-regular);
103
- --border-width-bold: var(--border-bold);
104
-
105
- --tw-border-style: solid;
106
-
107
- --text-12: var(--primitive-typography-size-12);
108
- --text-14: var(--primitive-typography-size-14);
109
- --text-16: var(--primitive-typography-size-16);
110
- --text-18: var(--primitive-typography-size-18);
111
- --text-20: var(--primitive-typography-size-20);
112
- --text-24: var(--primitive-typography-size-24);
113
- --text-32: var(--primitive-typography-size-32);
114
- --text-40: var(--primitive-typography-size-40);
115
- --text-48: var(--primitive-typography-size-48);
116
- --text-80: var(--primitive-typography-size-80);
117
-
118
- --font-weight-thin: var(--primitive-typography-weight-thin);
119
- --font-weight-regular: var(--primitive-typography-weight-regular);
120
- --font-weight-medium: var(--primitive-typography-weight-medium);
121
- --font-weight-semibold: var(--primitive-typography-weight-semibold);
122
- --font-weight-bold: var(--primitive-typography-weight-bold);
123
- --font-weight-extrabold: var(--primitive-typography-weight-extrabold);
124
-
125
- --font-family-rethink-sans: var(--primitive-typography-family-rethink-sans);
126
- --font-family-dm-sans: var(--primitive-typography-family-dm-sans);
127
-
128
- /* Button */
129
- --color-button-primary-surface-default: var(--button-primary-surface-default);
130
- --color-button-primary-surface-hover: var(--button-primary-surface-hover);
131
- --color-button-primary-surface-pressed: var(--button-primary-surface-pressed);
132
- --color-button-primary-surface-disabled: var(
133
- --button-primary-surface-disabled
134
- );
135
- --color-button-primary-text-default: var(--button-primary-text-default);
136
- --color-button-primary-text-disabled: var(--button-primary-text-disabled);
137
- --color-button-primary-border-default: var(--button-primary-border-default);
138
- --color-button-primary-border-hover: var(--button-primary-border-hover);
139
- --color-button-primary-border-pressed: var(--button-primary-border-pressed);
140
- --color-button-primary-border-disabled: var(--button-primary-border-disabled);
141
- --color-button-secondary-surface-default: var(
142
- --button-secondary-surface-default
143
- );
144
- --color-button-secondary-surface-hover: var(--button-secondary-surface-hover);
145
- --color-button-secondary-surface-pressed: var(
146
- --button-secondary-surface-pressed
147
- );
148
- --color-button-secondary-surface-disabled: var(
149
- --button-secondary-surface-disabled
150
- );
151
- --color-button-secondary-text-default: var(--button-secondary-text-default);
152
- --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
153
- --color-button-secondary-border-default: var(
154
- --button-secondary-border-default
155
- );
156
- --color-button-secondary-border-hover: var(--button-secondary-border-hover);
157
- --color-button-secondary-border-pressed: var(
158
- --button-secondary-border-pressed
159
- );
160
- --color-button-secondary-border-disabled: var(
161
- --button-secondary-border-disabled
162
- );
163
- --color-button-tertiary-text-default: var(--button-tertiary-text-default);
164
- --color-button-tertiary-text-disabled: var(--button-tertiary-text-disabled);
165
- --radius-button-primary: var(--button-primary-border-radius);
166
- --radius-button-secondary: var(--button-secondary-border-radius);
167
-
168
- /* Checkbox */
169
- --color-checkbox-surface-default: var(--checkbox-surface-default);
170
- --color-checkbox-surface-selected: var(--checkbox-surface-selected);
171
- --color-checkbox-surface-disabled: var(--checkbox-surface-disabled);
172
- --color-checkbox-border-default: var(--checkbox-border-default);
173
- --color-checkbox-border-selected: var(--checkbox-border-selected);
174
- --color-checkbox-border-disabled: var(--checkbox-border-disabled);
175
- --color-checkbox-border-negative: var(--checkbox-border-negative);
176
- --color-checkbox-icon-default: var(--checkbox-icon-default);
177
- --color-checkbox-text-default: var(--checkbox-text-default);
178
- --color-checkbox-text-disabled: var(--checkbox-text-disabled);
179
- --color-checkbox-text-negative: var(--checkbox-text-negative);
180
- --radius-checkbox: var(--checkbox-border-radius);
181
-
182
- /* Card */
183
- --color-card-surface-primary: var(--card-surface-primary);
184
- --color-card-text-title: var(--card-text-title);
185
- --color-card-text-subtitle: var(--card-text-subtitle);
186
-
187
- /* Countdown */
188
- --color-countdown-surface-default: var(--countdown-surface-default);
189
- --color-countdown-text-default: var(--countdown-text-default);
190
-
191
- /* Input */
192
- --color-input-surface-default: var(--input-surface-default);
193
- --color-input-surface-active: var(--input-surface-active);
194
- --color-input-surface-disabled: var(--input-surface-disabled);
195
- --color-input-surface-negative: var(--input-surface-negative);
196
- --color-input-border-default: var(--input-border-default);
197
- --color-input-border-active: var(--input-border-active);
198
- --color-input-border-disabled: var(--input-border-disabled);
199
- --color-input-border-negative: var(--input-border-negative);
200
- --color-input-icon-default: var(--input-icon-default);
201
- --color-input-icon-positive: var(--input-icon-positive);
202
- --color-input-icon-negative: var(--input-icon-negative);
203
- --color-input-icon-warning: var(--input-icon-warning);
204
- --color-input-text-label-default: var(--input-text-label-default);
205
- --color-input-text-label-disabled: var(--input-text-label-disabled);
206
- --color-input-text-field-default: var(--input-text-field-default);
207
- --color-input-text-field-disabled: var(--input-text-field-disabled);
208
- --color-input-text-field-placeholder: var(--input-text-field-placeholder);
209
- --color-input-text-helper-default: var(--input-text-helper-default);
210
- --color-input-text-helper-disabled: var(--input-text-helper-disabled);
211
- --color-input-text-helper-negative: var(--input-text-helper-negative);
212
-
213
- /* Dropdown */
214
- --color-dropdown-surface-default: var(--dropdown-surface-default);
215
- --color-dropdown-surface-active: var(--dropdown-surface-active);
216
- --color-dropdown-surface-disabled: var(--dropdown-surface-disabled);
217
- --color-dropdown-surface-negative: var(--dropdown-surface-negative);
218
- --color-dropdown-border-default: var(--dropdown-border-default);
219
- --color-dropdown-border-active: var(--dropdown-border-active);
220
- --color-dropdown-border-disabled: var(--dropdown-border-disabled);
221
- --color-dropdown-border-negative: var(--dropdown-border-negative);
222
- --color-dropdown-icon-default: var(--dropdown-icon-default);
223
- --color-dropdown-icon-positive: var(--dropdown-icon-positive);
224
- --color-dropdown-icon-negative: var(--dropdown-icon-negative);
225
- --color-dropdown-icon-warning: var(--dropdown-icon-warning);
226
- --color-dropdown-text-label-default: var(--dropdown-text-label-default);
227
- --color-dropdown-text-label-disabled: var(--dropdown-text-label-disabled);
228
- --color-dropdown-text-input-default: var(--dropdown-text-input-default);
229
- --color-dropdown-text-input-disabled: var(--dropdown-text-input-disabled);
230
- --color-dropdown-text-input-placeholder: var(
231
- --dropdown-text-input-placeholder
232
- );
233
- --color-dropdown-text-helper-default: var(--dropdown-text-helper-default);
234
- --color-dropdown-text-helper-disabled: var(--dropdown-text-helper-disabled);
235
- --color-dropdown-text-helper-negative: var(--dropdown-text-helper-negative);
236
-
237
- /* Link */
238
- --color-link-default: var(--link-default);
239
- --color-link-hover: var(--link-hover);
240
- --color-link-disabled: var(--link-disabled);
241
- --color-link-visited: var(--link-visited);
242
-
243
- /* Spinner */
244
- --color-spinner-surface-primary: var(--spinner-surface-primary);
245
- --color-spinner-surface-secondary: var(--spinner-surface-secondary);
246
- --color-spinner-text-title: var(--spinner-text-title);
247
- --color-spinner-text-subtitle: var(--spinner-text-subtitle);
248
-
249
- /* Snackbar */
250
- --color-snackbar-surface-neutral: var(--snackbar-surface-neutral);
251
- --color-snackbar-surface-positive: var(--snackbar-surface-positive);
252
- --color-snackbar-surface-warning: var(--snackbar-surface-warning);
253
- --color-snackbar-surface-negative: var(--snackbar-surface-negative);
254
- --color-snackbar-border-neutral: var(--snackbar-border-neutral);
255
- --color-snackbar-border-positive: var(--snackbar-border-positive);
256
- --color-snackbar-border-warning: var(--snackbar-border-warning);
257
- --color-snackbar-border-negative: var(--snackbar-border-negative);
258
- --color-snackbar-icon-brand: var(--snackbar-icon-brand);
259
- --color-snackbar-icon-positive: var(--snackbar-icon-positive);
260
- --color-snackbar-icon-negative: var(--snackbar-icon-negative);
261
- --color-snackbar-icon-warning: var(--snackbar-icon-warning);
262
- --color-snackbar-text-default: var(--snackbar-text-default);
263
- --color-snackbar-text-link: var(--snackbar-text-link);
264
- --color-snackbar-text-positive: var(--snackbar-text-positive);
265
- --color-snackbar-text-warning: var(--snackbar-text-warning);
266
- --color-snackbar-text-negative: var(--snackbar-text-negative);
267
-
268
- /* Toggle Switch */
269
- --color-toggle-switch-surface-primary-on: var(
270
- --toggle-switch-surface-primary-on
271
- );
272
- --color-toggle-switch-surface-primary-off: var(
273
- --toggle-switch-surface-primary-off
274
- );
275
- --color-toggle-switch-surface-primary-disabled: var(
276
- --toggle-switch-surface-primary-disabled
277
- );
278
- --color-toggle-switch-surface-secondary-on: var(
279
- --toggle-switch-surface-secondary-on
280
- );
281
- --color-toggle-switch-surface-secondary-off: var(
282
- --toggle-switch-surface-secondary-off
283
- );
284
- --color-toggle-switch-surface-secondary-disabled: var(
285
- --toggle-switch-surface-secondary-disabled
286
- );
287
- --color-toggle-switch-text-default: var(--toggle-switch-text-default);
288
- --color-toggle-switch-text-disabled: var(--toggle-switch-text-disabled);
289
- --color-toggle-switch-text-negative: var(--toggle-switch-text-negative);
290
- --color-toggle-switch-text-link: var(--toggle-switch-text-link);
291
- }
package/src/styles/themeTypes.ts DELETED
@@ -1,18 +0,0 @@
1
- export type AssetsResponse = {
2
- theme: string;
3
- 'logo.png'?: string;
4
- 'logo.svg'?: string;
5
- 'logo.jpg'?: string;
6
- 'logo.jpeg'?: string;
7
- 'logo.webp'?: string;
8
- };
9
-
10
- export type ThemeConfig = {
11
- buttonBorderRadius?: string;
12
- buttonColor?: string;
13
- hideFooterBranding?: boolean;
14
- main: string;
15
- subtitle?: string;
16
- logo?: string;
17
- css?: string;
18
- };
package/src/styles/tokens/colors.css DELETED
@@ -1,190 +0,0 @@
1
- :root,
2
- :host {
3
- /* Surface / Neutral */
4
-
5
- --surface-neutral-0: var(--primitive-color-gray-0);
6
- --surface-neutral-0-80: var(--primitive-color-gray-0-80);
7
- --surface-neutral-50: var(--primitive-color-gray-50);
8
- --surface-neutral-100: var(--primitive-color-gray-100);
9
- --surface-neutral-200: var(--primitive-color-gray-200);
10
- --surface-neutral-300: var(--primitive-color-gray-300);
11
- --surface-neutral-500: var(--primitive-color-gray-500);
12
- --surface-neutral-700: var(--primitive-color-gray-700);
13
- --surface-neutral-800: var(--primitive-color-gray-800);
14
- --surface-neutral-900: var(--primitive-color-gray-900);
15
- --surface-neutral-900-80: var(--primitive-color-gray-900-80);
16
- --surface-neutral-900-static: var(--primitive-color-gray-900);
17
- --surface-neutral-1000: var(--primitive-color-gray-1000);
18
-
19
- /* Surface / Brand */
20
-
21
- --surface-brand-50: var(--primitive-color-brand-50);
22
- --surface-brand-400: var(--primitive-color-brand-400);
23
- --surface-brand-400-static: var(--primitive-color-brand-400);
24
- --surface-brand-500: var(--primitive-color-brand-500);
25
- --surface-brand-500-static: var(--primitive-color-brand-500);
26
- --surface-brand-600: var(--primitive-color-brand-600);
27
- --surface-brand-600-static: var(--primitive-color-brand-600);
28
-
29
- /* Surface / Status */
30
-
31
- --surface-status-negative-50: var(--primitive-color-negative-50);
32
- --surface-status-negative-600: var(--primitive-color-negative-600);
33
-
34
- --surface-status-warning-50: var(--primitive-color-warning-50);
35
- --surface-status-warning-500: var(--primitive-color-warning-500);
36
-
37
- --surface-status-positive-50: var(--primitive-color-positive-50);
38
- --surface-status-positive-600: var(--primitive-color-positive-600);
39
- --surface-status-positive-600-static: var(--primitive-color-positive-600);
40
-
41
- /* Icon / Neutral */
42
-
43
- --icon-neutral-0: var(--primitive-color-gray-0);
44
- --icon-neutral-0-static: var(--primitive-color-gray-0);
45
- --icon-neutral-50: var(--primitive-color-gray-50);
46
- --icon-neutral-50-static: var(--primitive-color-gray-50);
47
- --icon-neutral-300: var(--primitive-color-gray-300);
48
- --icon-neutral-500: var(--primitive-color-gray-500);
49
- --icon-neutral-500-static: var(--primitive-color-gray-500);
50
- --icon-neutral-800: var(--primitive-color-gray-800);
51
- --icon-neutral-800-static: var(--primitive-color-gray-800);
52
-
53
- /* Icon / Brand */
54
-
55
- --icon-brand-500: var(--primitive-color-brand-500);
56
- --icon-brand-500-static: var(--primitive-color-brand-500);
57
-
58
- /* Icon / Status */
59
-
60
- --icon-status-negative: var(--primitive-color-negative-600);
61
- --icon-status-warning: var(--primitive-color-warning-500);
62
- --icon-status-positive: var(--primitive-color-positive-600);
63
- --icon-status-positive-static: var(--primitive-color-positive-600);
64
-
65
- /* Border / Neutral */
66
-
67
- --border-neutral-100: var(--primitive-color-gray-100);
68
- --border-neutral-300: var(--primitive-color-gray-300);
69
- --border-neutral-500: var(--primitive-color-gray-500);
70
-
71
- /* Border / Brand */
72
-
73
- --border-brand-500: var(--primitive-color-brand-500);
74
- --border-brand-500-static: var(--primitive-color-brand-500);
75
- --border-brand-600: var(--primitive-color-brand-600);
76
-
77
- /* Border / Status */
78
-
79
- --border-status-negative: var(--primitive-color-negative-600);
80
- --border-status-warning: var(--primitive-color-warning-500);
81
- --border-status-positive: var(--primitive-color-positive-600);
82
- --border-status-positive-static: var(--primitive-color-positive-600);
83
-
84
- /* Text / Body */
85
-
86
- --text-body-primary: var(--primitive-color-gray-800);
87
- --text-body-secondary: var(--primitive-color-gray-500);
88
- --text-body-tertiary: var(--primitive-color-gray-300);
89
- --text-body-0: var(--primitive-color-gray-0);
90
- --text-body-0-static: var(--primitive-color-gray-0);
91
-
92
- /* Text / Link */
93
-
94
- --text-link-default: var(--primitive-color-brand-500);
95
- --text-link-hover: var(--primitive-color-brand-300);
96
- --text-link-hover-static: var(--primitive-color-brand-300);
97
- --text-link-disabled: var(--primitive-color-gray-500);
98
- --text-link-disabled-static: var(--primitive-color-gray-500);
99
- --text-link-visited: var(--primitive-color-gray-700);
100
-
101
- /* Text / Accent */
102
-
103
- --text-accent-brand: var(--primitive-color-brand-500);
104
- --text-accent-brand-static: var(--primitive-color-brand-500);
105
- --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);
106
- --text-accent-brand-secondary-static: var(
107
- --primitive-color-brand-secondary-500
108
- );
109
-
110
- /* Text / Status */
111
-
112
- --text-status-negative: var(--primitive-color-negative-600);
113
- --text-status-warning: var(--primitive-color-warning-500);
114
- --text-status-positive: var(--primitive-color-positive-600);
115
- --text-status-positive-static: var(--primitive-color-positive-600);
116
- }
117
-
118
- [data-incode-theme="dark"] {
119
- /* Surface / Neutral */
120
-
121
- --surface-neutral-0: var(--primitive-color-gray-1000);
122
- --surface-neutral-0-80: var(--primitive-color-gray-900-80);
123
- --surface-neutral-50: var(--primitive-color-gray-900);
124
- --surface-neutral-100: var(--primitive-color-gray-800);
125
- --surface-neutral-200: var(--primitive-color-gray-700);
126
- --surface-neutral-300: var(--primitive-color-gray-500);
127
- --surface-neutral-500: var(--primitive-color-gray-300);
128
- --surface-neutral-700: var(--primitive-color-gray-200);
129
- --surface-neutral-800: var(--primitive-color-gray-100);
130
- --surface-neutral-900: var(--primitive-color-gray-0);
131
- --surface-neutral-900-80: var(--primitive-color-gray-0-80);
132
- --surface-neutral-1000: var(--primitive-color-gray-0);
133
-
134
- /* Surface / Brand */
135
-
136
- --surface-brand-50: var(--primitive-color-brand-900);
137
-
138
- /* Surface / Status */
139
-
140
- --surface-status-negative-50: var(--primitive-color-negative-950);
141
- --surface-status-negative-600: var(--primitive-color-negative-500);
142
-
143
- --surface-status-warning-50: var(--primitive-color-warning-950);
144
- --surface-status-warning-500: var(--primitive-color-warning-400);
145
-
146
- --surface-status-positive-50: var(--primitive-color-positive-800);
147
-
148
- /* Icon / Neutral */
149
-
150
- --icon-neutral-0: var(--primitive-color-gray-800);
151
- --icon-neutral-300: var(--primitive-color-gray-500);
152
- --icon-neutral-500: var(--primitive-color-gray-300);
153
- --icon-neutral-800: var(--primitive-color-gray-100);
154
-
155
- /* Icon / Status */
156
-
157
- --icon-status-negative: var(--primitive-color-negative-500);
158
- --icon-status-warning: var(--primitive-color-warning-400);
159
-
160
- /* Border / Neutral */
161
-
162
- --border-neutral-100: var(--primitive-color-gray-700);
163
- --border-neutral-300: var(--primitive-color-gray-500);
164
- --border-neutral-500: var(--primitive-color-gray-300);
165
-
166
- /* Border / Brand */
167
-
168
- --border-brand-600: var(--primitive-color-brand-400);
169
-
170
- /* Border / Status */
171
-
172
- --border-status-negative: var(--primitive-color-negative-500);
173
- --border-status-warning: var(--primitive-color-warning-400);
174
-
175
- /* Text / Body */
176
-
177
- --text-body-primary: var(--primitive-color-gray-50);
178
- --text-body-secondary: var(--primitive-color-gray-300);
179
- --text-body-tertiary: var(--primitive-color-gray-500);
180
-
181
- /* Text / Link */
182
-
183
- --text-link-default: var(--primitive-color-brand-400);
184
- --text-link-visited: var(--primitive-color-gray-300);
185
-
186
- /* Text / Status */
187
-
188
- --text-status-negative: var(--primitive-color-negative-500);
189
- --text-status-warning: var(--primitive-color-warning-400);
190
- }
package/src/styles/tokens/components.css DELETED
@@ -1,174 +0,0 @@
1
- :root,
2
- :host {
3
- /* Button / Primary */
4
- --button-primary-surface-default: var(--surface-brand-500-static);
5
- --button-primary-surface-hover: var(--surface-brand-400-static);
6
- --button-primary-surface-pressed: var(--surface-brand-600-static);
7
- --button-primary-surface-disabled: var(--surface-neutral-100);
8
-
9
- --button-primary-text-default: var(--text-body-0-static);
10
- --button-primary-text-disabled: var(--text-body-tertiary);
11
-
12
- --button-primary-border-default: var(--surface-brand-500-static);
13
- --button-primary-border-hover: var(--surface-brand-400-static);
14
- --button-primary-border-pressed: var(--surface-brand-600-static);
15
- --button-primary-border-disabled: var(--surface-neutral-100);
16
- --button-primary-border-radius: var(--border-radius-medium);
17
-
18
- /* Button / Secondary */
19
- --button-secondary-surface-default: var(--surface-neutral-0);
20
- --button-secondary-surface-hover: var(--surface-brand-50);
21
- --button-secondary-surface-pressed: var(--surface-brand-600-static);
22
- --button-secondary-surface-disabled: var(--surface-neutral-200);
23
-
24
- --button-secondary-text-default: var(--text-accent-brand-static);
25
- --button-secondary-text-disabled: var(--text-body-secondary);
26
-
27
- --button-secondary-border-default: var(--surface-brand-500-static);
28
- --button-secondary-border-hover: var(--surface-brand-400-static);
29
- --button-secondary-border-pressed: var(--surface-brand-600-static);
30
- --button-secondary-border-disabled: var(--surface-neutral-100);
31
- --button-secondary-border-radius: var(--border-radius-medium);
32
-
33
- /* Button / Tertiary */
34
- --button-tertiary-text-default: var(--text-accent-brand-static);
35
- --button-tertiary-text-disabled: var(--text-body-secondary);
36
-
37
- /* Checkbox */
38
- --checkbox-surface-default: var(--surface-neutral-50);
39
- --checkbox-surface-selected: var(--surface-brand-500-static);
40
- --checkbox-surface-disabled: var(--surface-neutral-200);
41
-
42
- --checkbox-border-default: var(--border-neutral-100);
43
- --checkbox-border-selected: var(--border-brand-500-static);
44
- --checkbox-border-disabled: var(--border-neutral-300);
45
- --checkbox-border-negative: var(--border-status-negative);
46
- --checkbox-border-radius: var(--border-radius-small);
47
-
48
- --checkbox-icon-default: var(--surface-neutral-0);
49
-
50
- --checkbox-text-default: var(--text-body-primary);
51
- --checkbox-text-disabled: var(--text-body-tertiary);
52
- --checkbox-text-negative: var(--text-status-negative);
53
-
54
- /* Card */
55
- --card-surface-primary: var(--surface-neutral-800);
56
-
57
- --card-text-title: var(--surface-neutral-100);
58
- --card-text-subtitle: var(--text-body-secondary);
59
-
60
- /* Countdown */
61
- --countdown-surface-default: var(--surface-neutral-900-static);
62
-
63
- --countdown-text-default: var(--text-body-0-static);
64
-
65
- /* Input */
66
- --input-surface-default: var(--surface-neutral-50);
67
- --input-surface-active: var(--surface-neutral-50);
68
- --input-surface-disabled: var(--surface-neutral-100);
69
- --input-surface-negative: var(--surface-neutral-50);
70
-
71
- --input-border-default: var(--border-neutral-100);
72
- --input-border-active: var(--border-brand-500-static);
73
- --input-border-disabled: var(--border-neutral-100);
74
- --input-border-negative: var(--border-status-negative);
75
-
76
- --input-icon-default: var(--surface-neutral-300);
77
- --input-icon-positive: var(--surface-status-positive-600-static);
78
- --input-icon-negative: var(--border-status-negative);
79
- --input-icon-warning: var(--surface-status-warning-500);
80
-
81
- --input-text-label-default: var(--text-body-primary);
82
- --input-text-label-disabled: var(--text-body-tertiary);
83
-
84
- --input-text-field-default: var(--text-body-primary);
85
- --input-text-field-disabled: var(--text-body-tertiary);
86
- --input-text-field-placeholder: var(--text-body-tertiary);
87
-
88
- --input-text-helper-default: var(--text-body-secondary);
89
- --input-text-helper-disabled: var(--text-body-tertiary);
90
- --input-text-helper-negative: var(--text-status-negative);
91
-
92
- /* Dropdown */
93
-
94
- --dropdown-surface-default: var(--surface-neutral-50);
95
- --dropdown-surface-active: var(--surface-neutral-50);
96
- --dropdown-surface-disabled: var(--surface-neutral-100);
97
- --dropdown-surface-negative: var(--surface-neutral-50);
98
-
99
- --dropdown-border-default: var(--border-neutral-100);
100
- --dropdown-border-active: var(--border-brand-500-static);
101
- --dropdown-border-disabled: var(--border-neutral-100);
102
- --dropdown-border-negative: var(--border-status-negative);
103
-
104
- --dropdown-icon-default: var(--surface-neutral-300);
105
- --dropdown-icon-positive: var(--surface-status-positive-600-static);
106
- --dropdown-icon-negative: var(--border-status-negative);
107
- --dropdown-icon-warning: var(--surface-status-warning-500);
108
-
109
- --dropdown-text-label-default: var(--text-body-primary);
110
- --dropdown-text-label-disabled: var(--text-body-tertiary);
111
-
112
- --dropdown-text-input-default: var(--text-body-primary);
113
- --dropdown-text-input-disabled: var(--text-body-tertiary);
114
- --dropdown-text-input-placeholder: var(--text-body-tertiary);
115
-
116
- --dropdown-text-helper-default: var(--text-body-secondary);
117
- --dropdown-text-helper-disabled: var(--text-body-tertiary);
118
- --dropdown-text-helper-negative: var(--text-status-negative);
119
-
120
- /* Link */
121
-
122
- --link-default: var(--text-accent-brand-static);
123
- --link-hover: var(--text-body-primary);
124
- --link-disabled: var(--text-body-secondary);
125
- --link-visited: var(--text-accent-brand-static);
126
-
127
- /* Spinner */
128
-
129
- --spinner-surface-primary: var(--surface-brand-500-static);
130
- --spinner-surface-secondary: var(--surface-brand-50);
131
- --spinner-surface-overlay: var(--surface-neutral-0);
132
- --spinner-surface-overlay-opacity: 1;
133
-
134
- --spinner-text-title: var(--text-body-primary);
135
- --spinner-text-subtitle: var(--text-body-secondary);
136
-
137
- /* Snackbar */
138
-
139
- --snackbar-surface-neutral: var(--surface-brand-50);
140
- --snackbar-surface-positive: var(--surface-status-positive-50);
141
- --snackbar-surface-warning: var(--surface-status-warning-50);
142
- --snackbar-surface-negative: var(--surface-status-negative-50);
143
-
144
- --snackbar-border-neutral: var(--border-brand-500-static);
145
- --snackbar-border-positive: var(--border-status-positive-static);
146
- --snackbar-border-warning: var(--border-status-warning);
147
- --snackbar-border-negative: var(--border-status-negative);
148
-
149
- --snackbar-icon-brand: var(--icon-brand-500-static);
150
- --snackbar-icon-positive: var(--icon-status-positive-static);
151
- --snackbar-icon-negative: var(--icon-status-negative);
152
- --snackbar-icon-warning: var(--icon-status-warning);
153
-
154
- --snackbar-text-default: var(--text-body-primary);
155
- --snackbar-text-link: var(--link-default);
156
- --snackbar-text-positive: var(--text-status-positive-static);
157
- --snackbar-text-warning: var(--text-status-warning);
158
- --snackbar-text-negative: var(--text-status-negative);
159
-
160
- /* Toggle-switch */
161
-
162
- --toggle-switch-surface-primary-on: var(--surface-brand-500-static);
163
- --toggle-switch-surface-primary-off: var(--surface-neutral-200);
164
- --toggle-switch-surface-primary-disabled: var(--surface-neutral-200);
165
-
166
- --toggle-switch-surface-secondary-on: var(--surface-neutral-100);
167
- --toggle-switch-surface-secondary-off: var(--surface-neutral-100);
168
- --toggle-switch-surface-secondary-disabled: var(--surface-neutral-200);
169
-
170
- --toggle-switch-text-default: var(--text-body-primary);
171
- --toggle-switch-text-disabled: var(--text-body-tertiary);
172
- --toggle-switch-text-negative: var(--text-status-negative);
173
- --toggle-switch-text-link: var(--text-accent-brand-static);
174
- }
package/src/styles/tokens/index.css DELETED
@@ -1,4 +0,0 @@
1
- @import "./primitives.css";
2
- @import "./semantic.css";
3
- @import "./colors.css";
4
- @import "./components.css";