From e59d3194b1e8e3afe9a3c1b6f0e0b7bb892366eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 19 Feb 2022 22:14:16 +0400
Subject: [PATCH] Create stripe card element style

---
 lib/utils/stripe-style.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 lib/utils/stripe-style.js

diff --git a/lib/utils/stripe-style.js b/lib/utils/stripe-style.js
new file mode 100644
index 0000000..5f93188
--- /dev/null
+++ b/lib/utils/stripe-style.js
@@ -0,0 +1,28 @@
+export const appearance = {
+  theme: 'stripe',
+  variables: {
+    colorPrimary: '#4caf50',
+    colorBackground: '#ffffff',
+    colorText: '#30313d',
+    colorDanger: '#df1b41',
+    fontFamily: 'Roboto, Ideal Sans, system-ui, sans-serif',
+    spacingUnit: '2px',
+    borderRadius: '4px',
+  },
+  rules: {
+    '.Tab': {
+      border: '1px solid #E0E6EB',
+      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
+    },
+    '.Tab:hover': {
+      color: 'var(--colorText)',
+    },
+    '.Tab--selected': {
+      borderColor: '#E0E6EB',
+      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
+    },
+    '.Input--invalid': {
+      boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
+    }
+  }
+}