diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index b5c61c956..df32da8d0 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/500.css';
+@import '@fontsource/inter/700.css';
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 0b9597a46..f2c832acc 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,12 +1,13 @@
-const colors = require("tailwindcss/colors");
+const colors = require('tailwindcss/colors');
const round = (num) =>
num
.toFixed(7)
- .replace(/(\.[0-9]+?)0+$/, "$1")
- .replace(/\.0$/, "");
+ .replace(/(\.[0-9]+?)0+$/, '$1')
+ .replace(/\.0$/, '');
const rem = (px) => `${round(px / 16)}rem`;
const em = (px, base) => `${round(px / base)}em`;
+// TODO(akhilmhdh): Clean up this later
let defaultModifiers = {
sm: {
css: [
@@ -15,71 +16,71 @@ let defaultModifiers = {
lineHeight: round(24 / 14),
p: {
marginTop: em(16, 14),
- marginBottom: em(16, 14),
+ marginBottom: em(16, 14)
},
'[class~="lead"]': {
fontSize: em(18, 14),
lineHeight: round(28 / 18),
marginTop: em(16, 18),
- marginBottom: em(16, 18),
+ marginBottom: em(16, 18)
},
blockquote: {
marginTop: em(24, 18),
marginBottom: em(24, 18),
- paddingLeft: em(20, 18),
+ paddingLeft: em(20, 18)
},
h1: {
fontSize: em(30, 14),
- marginTop: "0",
+ marginTop: '0',
marginBottom: em(24, 30),
- lineHeight: round(36 / 30),
+ lineHeight: round(36 / 30)
},
h2: {
fontSize: em(20, 14),
marginTop: em(32, 20),
marginBottom: em(16, 20),
- lineHeight: round(28 / 20),
+ lineHeight: round(28 / 20)
},
h3: {
fontSize: em(18, 14),
marginTop: em(28, 18),
marginBottom: em(8, 18),
- lineHeight: round(28 / 18),
+ lineHeight: round(28 / 18)
},
h4: {
marginTop: em(20, 14),
marginBottom: em(8, 14),
- lineHeight: round(20 / 14),
+ lineHeight: round(20 / 14)
},
img: {
marginTop: em(24, 14),
- marginBottom: em(24, 14),
+ marginBottom: em(24, 14)
},
video: {
marginTop: em(24, 14),
- marginBottom: em(24, 14),
+ marginBottom: em(24, 14)
},
figure: {
marginTop: em(24, 14),
- marginBottom: em(24, 14),
+ marginBottom: em(24, 14)
},
- "figure > *": {
- marginTop: "0",
- marginBottom: "0",
+ 'figure > *': {
+ marginTop: '0',
+ marginBottom: '0'
},
figcaption: {
fontSize: em(12, 14),
lineHeight: round(16 / 12),
- marginTop: em(8, 12),
+ marginTop: em(8, 12)
},
code: {
- fontSize: em(12, 14),
+ fontSize: em(12, 14)
},
- "h2 code": {
- fontSize: em(18, 20),
+ 'h2 code': {
+ fontSize: em(18, 20)
},
- "h3 code": {
- fontSize: em(16, 18),
+ 'h3 code': {
+ fontSize: em(16, 18)
},
pre: {
fontSize: em(12, 14),
@@ -90,101 +91,101 @@ let defaultModifiers = {
paddingTop: em(8, 12),
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
- paddingLeft: em(12, 12),
+ paddingLeft: em(12, 12)
},
ol: {
marginTop: em(16, 14),
marginBottom: em(16, 14),
- paddingLeft: em(22, 14),
+ paddingLeft: em(22, 14)
},
ul: {
marginTop: em(16, 14),
marginBottom: em(16, 14),
- paddingLeft: em(22, 14),
+ paddingLeft: em(22, 14)
},
li: {
marginTop: em(4, 14),
- marginBottom: em(4, 14),
+ marginBottom: em(4, 14)
},
- "ol > li": {
- paddingLeft: em(6, 14),
+ 'ol > li': {
+ paddingLeft: em(6, 14)
},
- "ul > li": {
- paddingLeft: em(6, 14),
+ 'ul > li': {
+ paddingLeft: em(6, 14)
},
- "> ul > li p": {
+ '> ul > li p': {
marginTop: em(8, 14),
- marginBottom: em(8, 14),
+ marginBottom: em(8, 14)
},
- "> ul > li > *:first-child": {
- marginTop: em(16, 14),
+ '> ul > li > *:first-child': {
+ marginTop: em(16, 14)
},
- "> ul > li > *:last-child": {
- marginBottom: em(16, 14),
+ '> ul > li > *:last-child': {
+ marginBottom: em(16, 14)
},
- "> ol > li > *:first-child": {
- marginTop: em(16, 14),
+ '> ol > li > *:first-child': {
+ marginTop: em(16, 14)
},
- "> ol > li > *:last-child": {
- marginBottom: em(16, 14),
+ '> ol > li > *:last-child': {
+ marginBottom: em(16, 14)
},
- "ul ul, ul ol, ol ul, ol ol": {
+ 'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(8, 14),
- marginBottom: em(8, 14),
+ marginBottom: em(8, 14)
},
hr: {
marginTop: em(40, 14),
- marginBottom: em(40, 14),
+ marginBottom: em(40, 14)
},
- "hr + *": {
- marginTop: "0",
+ 'hr + *': {
+ marginTop: '0'
},
- "h2 + *": {
- marginTop: "0",
+ 'h2 + *': {
+ marginTop: '0'
},
- "h3 + *": {
- marginTop: "0",
+ 'h3 + *': {
+ marginTop: '0'
},
- "h4 + *": {
- marginTop: "0",
+ 'h4 + *': {
+ marginTop: '0'
},
table: {
fontSize: em(12, 14),
- lineHeight: round(18 / 12),
+ lineHeight: round(18 / 12)
},
- "thead th": {
+ 'thead th': {
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
- paddingLeft: em(12, 12),
+ paddingLeft: em(12, 12)
},
- "thead th:first-child": {
- paddingLeft: "0",
+ 'thead th:first-child': {
+ paddingLeft: '0'
},
- "thead th:last-child": {
- paddingRight: "0",
+ 'thead th:last-child': {
+ paddingRight: '0'
},
- "tbody td, tfoot td": {
+ 'tbody td, tfoot td': {
paddingTop: em(8, 12),
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
- paddingLeft: em(12, 12),
+ paddingLeft: em(12, 12)
},
- "tbody td:first-child, tfoot td:first-child": {
- paddingLeft: "0",
- },
- "tbody td:last-child, tfoot td:last-child": {
- paddingRight: "0",
+ 'tbody td:first-child, tfoot td:first-child': {
+ paddingLeft: '0'
},
+ 'tbody td:last-child, tfoot td:last-child': {
+ paddingRight: '0'
+ }
},
{
- "> :first-child": {
- marginTop: "0",
+ '> :first-child': {
+ marginTop: '0'
},
- "> :last-child": {
- marginBottom: "0",
- },
- },
- ],
+ '> :last-child': {
+ marginBottom: '0'
+ }
+ }
+ ]
},
base: {
css: [
@@ -193,71 +194,71 @@ let defaultModifiers = {
lineHeight: round(28 / 16),
p: {
marginTop: em(20, 16),
- marginBottom: em(20, 16),
+ marginBottom: em(20, 16)
},
'[class~="lead"]': {
fontSize: em(20, 16),
lineHeight: round(32 / 20),
marginTop: em(24, 20),
- marginBottom: em(24, 20),
+ marginBottom: em(24, 20)
},
blockquote: {
marginTop: em(32, 20),
marginBottom: em(32, 20),
- paddingLeft: em(20, 20),
+ paddingLeft: em(20, 20)
},
h1: {
fontSize: em(36, 16),
- marginTop: "0",
+ marginTop: '0',
marginBottom: em(32, 36),
- lineHeight: round(40 / 36),
+ lineHeight: round(40 / 36)
},
h2: {
fontSize: em(24, 16),
marginTop: em(48, 24),
marginBottom: em(24, 24),
- lineHeight: round(32 / 24),
+ lineHeight: round(32 / 24)
},
h3: {
fontSize: em(20, 16),
marginTop: em(32, 20),
marginBottom: em(12, 20),
- lineHeight: round(32 / 20),
+ lineHeight: round(32 / 20)
},
h4: {
marginTop: em(24, 16),
marginBottom: em(8, 16),
- lineHeight: round(24 / 16),
+ lineHeight: round(24 / 16)
},
img: {
marginTop: em(32, 16),
- marginBottom: em(32, 16),
+ marginBottom: em(32, 16)
},
video: {
marginTop: em(32, 16),
- marginBottom: em(32, 16),
+ marginBottom: em(32, 16)
},
figure: {
marginTop: em(32, 16),
- marginBottom: em(32, 16),
+ marginBottom: em(32, 16)
},
- "figure > *": {
- marginTop: "0",
- marginBottom: "0",
+ 'figure > *': {
+ marginTop: '0',
+ marginBottom: '0'
},
figcaption: {
fontSize: em(14, 16),
lineHeight: round(20 / 14),
- marginTop: em(12, 14),
+ marginTop: em(12, 14)
},
code: {
- fontSize: em(14, 16),
+ fontSize: em(14, 16)
},
- "h2 code": {
- fontSize: em(21, 24),
+ 'h2 code': {
+ fontSize: em(21, 24)
},
- "h3 code": {
- fontSize: em(18, 20),
+ 'h3 code': {
+ fontSize: em(18, 20)
},
pre: {
fontSize: em(14, 16),
@@ -268,101 +269,101 @@ let defaultModifiers = {
paddingTop: em(12, 14),
paddingRight: em(16, 14),
paddingBottom: em(12, 14),
- paddingLeft: em(16, 14),
+ paddingLeft: em(16, 14)
},
ol: {
marginTop: em(20, 16),
marginBottom: em(20, 16),
- paddingLeft: em(26, 16),
+ paddingLeft: em(26, 16)
},
ul: {
marginTop: em(20, 16),
marginBottom: em(20, 16),
- paddingLeft: em(26, 16),
+ paddingLeft: em(26, 16)
},
li: {
marginTop: em(8, 16),
- marginBottom: em(8, 16),
+ marginBottom: em(8, 16)
},
- "ol > li": {
- paddingLeft: em(6, 16),
+ 'ol > li': {
+ paddingLeft: em(6, 16)
},
- "ul > li": {
- paddingLeft: em(6, 16),
+ 'ul > li': {
+ paddingLeft: em(6, 16)
},
- "> ul > li p": {
+ '> ul > li p': {
marginTop: em(12, 16),
- marginBottom: em(12, 16),
+ marginBottom: em(12, 16)
},
- "> ul > li > *:first-child": {
- marginTop: em(20, 16),
+ '> ul > li > *:first-child': {
+ marginTop: em(20, 16)
},
- "> ul > li > *:last-child": {
- marginBottom: em(20, 16),
+ '> ul > li > *:last-child': {
+ marginBottom: em(20, 16)
},
- "> ol > li > *:first-child": {
- marginTop: em(20, 16),
+ '> ol > li > *:first-child': {
+ marginTop: em(20, 16)
},
- "> ol > li > *:last-child": {
- marginBottom: em(20, 16),
+ '> ol > li > *:last-child': {
+ marginBottom: em(20, 16)
},
- "ul ul, ul ol, ol ul, ol ol": {
+ 'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(12, 16),
- marginBottom: em(12, 16),
+ marginBottom: em(12, 16)
},
hr: {
marginTop: em(48, 16),
- marginBottom: em(48, 16),
+ marginBottom: em(48, 16)
},
- "hr + *": {
- marginTop: "0",
+ 'hr + *': {
+ marginTop: '0'
},
- "h2 + *": {
- marginTop: "0",
+ 'h2 + *': {
+ marginTop: '0'
},
- "h3 + *": {
- marginTop: "0",
+ 'h3 + *': {
+ marginTop: '0'
},
- "h4 + *": {
- marginTop: "0",
+ 'h4 + *': {
+ marginTop: '0'
},
table: {
fontSize: em(14, 16),
- lineHeight: round(24 / 14),
+ lineHeight: round(24 / 14)
},
- "thead th": {
+ 'thead th': {
paddingRight: em(8, 14),
paddingBottom: em(8, 14),
- paddingLeft: em(8, 14),
+ paddingLeft: em(8, 14)
},
- "thead th:first-child": {
- paddingLeft: "0",
+ 'thead th:first-child': {
+ paddingLeft: '0'
},
- "thead th:last-child": {
- paddingRight: "0",
+ 'thead th:last-child': {
+ paddingRight: '0'
},
- "tbody td, tfoot td": {
+ 'tbody td, tfoot td': {
paddingTop: em(8, 14),
paddingRight: em(8, 14),
paddingBottom: em(8, 14),
- paddingLeft: em(8, 14),
+ paddingLeft: em(8, 14)
},
- "tbody td:first-child, tfoot td:first-child": {
- paddingLeft: "0",
- },
- "tbody td:last-child, tfoot td:last-child": {
- paddingRight: "0",
+ 'tbody td:first-child, tfoot td:first-child': {
+ paddingLeft: '0'
},
+ 'tbody td:last-child, tfoot td:last-child': {
+ paddingRight: '0'
+ }
},
{
- "> :first-child": {
- marginTop: "0",
+ '> :first-child': {
+ marginTop: '0'
},
- "> :last-child": {
- marginBottom: "0",
- },
- },
- ],
+ '> :last-child': {
+ marginBottom: '0'
+ }
+ }
+ ]
},
lg: {
css: [
@@ -371,71 +372,71 @@ let defaultModifiers = {
lineHeight: round(32 / 18),
p: {
marginTop: em(24, 18),
- marginBottom: em(24, 18),
+ marginBottom: em(24, 18)
},
'[class~="lead"]': {
fontSize: em(22, 18),
lineHeight: round(32 / 22),
marginTop: em(24, 22),
- marginBottom: em(24, 22),
+ marginBottom: em(24, 22)
},
blockquote: {
marginTop: em(40, 24),
marginBottom: em(40, 24),
- paddingLeft: em(24, 24),
+ paddingLeft: em(24, 24)
},
h1: {
fontSize: em(48, 18),
- marginTop: "0",
+ marginTop: '0',
marginBottom: em(40, 48),
- lineHeight: round(48 / 48),
+ lineHeight: round(48 / 48)
},
h2: {
fontSize: em(30, 18),
marginTop: em(56, 30),
marginBottom: em(32, 30),
- lineHeight: round(40 / 30),
+ lineHeight: round(40 / 30)
},
h3: {
fontSize: em(24, 18),
marginTop: em(40, 24),
marginBottom: em(16, 24),
- lineHeight: round(36 / 24),
+ lineHeight: round(36 / 24)
},
h4: {
marginTop: em(32, 18),
marginBottom: em(8, 18),
- lineHeight: round(28 / 18),
+ lineHeight: round(28 / 18)
},
img: {
marginTop: em(32, 18),
- marginBottom: em(32, 18),
+ marginBottom: em(32, 18)
},
video: {
marginTop: em(32, 18),
- marginBottom: em(32, 18),
+ marginBottom: em(32, 18)
},
figure: {
marginTop: em(32, 18),
- marginBottom: em(32, 18),
+ marginBottom: em(32, 18)
},
- "figure > *": {
- marginTop: "0",
- marginBottom: "0",
+ 'figure > *': {
+ marginTop: '0',
+ marginBottom: '0'
},
figcaption: {
fontSize: em(16, 18),
lineHeight: round(24 / 16),
- marginTop: em(16, 16),
+ marginTop: em(16, 16)
},
code: {
- fontSize: em(16, 18),
+ fontSize: em(16, 18)
},
- "h2 code": {
- fontSize: em(26, 30),
+ 'h2 code': {
+ fontSize: em(26, 30)
},
- "h3 code": {
- fontSize: em(21, 24),
+ 'h3 code': {
+ fontSize: em(21, 24)
},
pre: {
fontSize: em(16, 18),
@@ -446,101 +447,101 @@ let defaultModifiers = {
paddingTop: em(16, 16),
paddingRight: em(24, 16),
paddingBottom: em(16, 16),
- paddingLeft: em(24, 16),
+ paddingLeft: em(24, 16)
},
ol: {
marginTop: em(24, 18),
marginBottom: em(24, 18),
- paddingLeft: em(28, 18),
+ paddingLeft: em(28, 18)
},
ul: {
marginTop: em(24, 18),
marginBottom: em(24, 18),
- paddingLeft: em(28, 18),
+ paddingLeft: em(28, 18)
},
li: {
marginTop: em(12, 18),
- marginBottom: em(12, 18),
+ marginBottom: em(12, 18)
},
- "ol > li": {
- paddingLeft: em(8, 18),
+ 'ol > li': {
+ paddingLeft: em(8, 18)
},
- "ul > li": {
- paddingLeft: em(8, 18),
+ 'ul > li': {
+ paddingLeft: em(8, 18)
},
- "> ul > li p": {
+ '> ul > li p': {
marginTop: em(16, 18),
- marginBottom: em(16, 18),
+ marginBottom: em(16, 18)
},
- "> ul > li > *:first-child": {
- marginTop: em(24, 18),
+ '> ul > li > *:first-child': {
+ marginTop: em(24, 18)
},
- "> ul > li > *:last-child": {
- marginBottom: em(24, 18),
+ '> ul > li > *:last-child': {
+ marginBottom: em(24, 18)
},
- "> ol > li > *:first-child": {
- marginTop: em(24, 18),
+ '> ol > li > *:first-child': {
+ marginTop: em(24, 18)
},
- "> ol > li > *:last-child": {
- marginBottom: em(24, 18),
+ '> ol > li > *:last-child': {
+ marginBottom: em(24, 18)
},
- "ul ul, ul ol, ol ul, ol ol": {
+ 'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(16, 18),
- marginBottom: em(16, 18),
+ marginBottom: em(16, 18)
},
hr: {
marginTop: em(56, 18),
- marginBottom: em(56, 18),
+ marginBottom: em(56, 18)
},
- "hr + *": {
- marginTop: "0",
+ 'hr + *': {
+ marginTop: '0'
},
- "h2 + *": {
- marginTop: "0",
+ 'h2 + *': {
+ marginTop: '0'
},
- "h3 + *": {
- marginTop: "0",
+ 'h3 + *': {
+ marginTop: '0'
},
- "h4 + *": {
- marginTop: "0",
+ 'h4 + *': {
+ marginTop: '0'
},
table: {
fontSize: em(16, 18),
- lineHeight: round(24 / 16),
+ lineHeight: round(24 / 16)
},
- "thead th": {
+ 'thead th': {
paddingRight: em(12, 16),
paddingBottom: em(12, 16),
- paddingLeft: em(12, 16),
+ paddingLeft: em(12, 16)
},
- "thead th:first-child": {
- paddingLeft: "0",
+ 'thead th:first-child': {
+ paddingLeft: '0'
},
- "thead th:last-child": {
- paddingRight: "0",
+ 'thead th:last-child': {
+ paddingRight: '0'
},
- "tbody td, tfoot td": {
+ 'tbody td, tfoot td': {
paddingTop: em(12, 16),
paddingRight: em(12, 16),
paddingBottom: em(12, 16),
- paddingLeft: em(12, 16),
+ paddingLeft: em(12, 16)
},
- "tbody td:first-child, tfoot td:first-child": {
- paddingLeft: "0",
- },
- "tbody td:last-child, tfoot td:last-child": {
- paddingRight: "0",
+ 'tbody td:first-child, tfoot td:first-child': {
+ paddingLeft: '0'
},
+ 'tbody td:last-child, tfoot td:last-child': {
+ paddingRight: '0'
+ }
},
{
- "> :first-child": {
- marginTop: "0",
+ '> :first-child': {
+ marginTop: '0'
},
- "> :last-child": {
- marginBottom: "0",
- },
- },
- ],
+ '> :last-child': {
+ marginBottom: '0'
+ }
+ }
+ ]
},
xl: {
css: [
@@ -549,71 +550,71 @@ let defaultModifiers = {
lineHeight: round(36 / 20),
p: {
marginTop: em(24, 20),
- marginBottom: em(24, 20),
+ marginBottom: em(24, 20)
},
'[class~="lead"]': {
fontSize: em(24, 20),
lineHeight: round(36 / 24),
marginTop: em(24, 24),
- marginBottom: em(24, 24),
+ marginBottom: em(24, 24)
},
blockquote: {
marginTop: em(48, 30),
marginBottom: em(48, 30),
- paddingLeft: em(32, 30),
+ paddingLeft: em(32, 30)
},
h1: {
fontSize: em(56, 20),
- marginTop: "0",
+ marginTop: '0',
marginBottom: em(48, 56),
- lineHeight: round(56 / 56),
+ lineHeight: round(56 / 56)
},
h2: {
fontSize: em(36, 20),
marginTop: em(56, 36),
marginBottom: em(32, 36),
- lineHeight: round(40 / 36),
+ lineHeight: round(40 / 36)
},
h3: {
fontSize: em(30, 20),
marginTop: em(48, 30),
marginBottom: em(20, 30),
- lineHeight: round(40 / 30),
+ lineHeight: round(40 / 30)
},
h4: {
marginTop: em(36, 20),
marginBottom: em(12, 20),
- lineHeight: round(32 / 20),
+ lineHeight: round(32 / 20)
},
img: {
marginTop: em(40, 20),
- marginBottom: em(40, 20),
+ marginBottom: em(40, 20)
},
video: {
marginTop: em(40, 20),
- marginBottom: em(40, 20),
+ marginBottom: em(40, 20)
},
figure: {
marginTop: em(40, 20),
- marginBottom: em(40, 20),
+ marginBottom: em(40, 20)
},
- "figure > *": {
- marginTop: "0",
- marginBottom: "0",
+ 'figure > *': {
+ marginTop: '0',
+ marginBottom: '0'
},
figcaption: {
fontSize: em(18, 20),
lineHeight: round(28 / 18),
- marginTop: em(18, 18),
+ marginTop: em(18, 18)
},
code: {
- fontSize: em(18, 20),
+ fontSize: em(18, 20)
},
- "h2 code": {
- fontSize: em(31, 36),
+ 'h2 code': {
+ fontSize: em(31, 36)
},
- "h3 code": {
- fontSize: em(27, 30),
+ 'h3 code': {
+ fontSize: em(27, 30)
},
pre: {
fontSize: em(18, 20),
@@ -624,174 +625,174 @@ let defaultModifiers = {
paddingTop: em(20, 18),
paddingRight: em(24, 18),
paddingBottom: em(20, 18),
- paddingLeft: em(24, 18),
+ paddingLeft: em(24, 18)
},
ol: {
marginTop: em(24, 20),
marginBottom: em(24, 20),
- paddingLeft: em(32, 20),
+ paddingLeft: em(32, 20)
},
ul: {
marginTop: em(24, 20),
marginBottom: em(24, 20),
- paddingLeft: em(32, 20),
+ paddingLeft: em(32, 20)
},
li: {
marginTop: em(12, 20),
- marginBottom: em(12, 20),
+ marginBottom: em(12, 20)
},
- "ol > li": {
- paddingLeft: em(8, 20),
+ 'ol > li': {
+ paddingLeft: em(8, 20)
},
- "ul > li": {
- paddingLeft: em(8, 20),
+ 'ul > li': {
+ paddingLeft: em(8, 20)
},
- "> ul > li p": {
+ '> ul > li p': {
marginTop: em(16, 20),
- marginBottom: em(16, 20),
+ marginBottom: em(16, 20)
},
- "> ul > li > *:first-child": {
- marginTop: em(24, 20),
+ '> ul > li > *:first-child': {
+ marginTop: em(24, 20)
},
- "> ul > li > *:last-child": {
- marginBottom: em(24, 20),
+ '> ul > li > *:last-child': {
+ marginBottom: em(24, 20)
},
- "> ol > li > *:first-child": {
- marginTop: em(24, 20),
+ '> ol > li > *:first-child': {
+ marginTop: em(24, 20)
},
- "> ol > li > *:last-child": {
- marginBottom: em(24, 20),
+ '> ol > li > *:last-child': {
+ marginBottom: em(24, 20)
},
- "ul ul, ul ol, ol ul, ol ol": {
+ 'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(16, 20),
- marginBottom: em(16, 20),
+ marginBottom: em(16, 20)
},
hr: {
marginTop: em(56, 20),
- marginBottom: em(56, 20),
+ marginBottom: em(56, 20)
},
- "hr + *": {
- marginTop: "0",
+ 'hr + *': {
+ marginTop: '0'
},
- "h2 + *": {
- marginTop: "0",
+ 'h2 + *': {
+ marginTop: '0'
},
- "h3 + *": {
- marginTop: "0",
+ 'h3 + *': {
+ marginTop: '0'
},
- "h4 + *": {
- marginTop: "0",
+ 'h4 + *': {
+ marginTop: '0'
},
table: {
fontSize: em(18, 20),
- lineHeight: round(28 / 18),
+ lineHeight: round(28 / 18)
},
- "thead th": {
+ 'thead th': {
paddingRight: em(12, 18),
paddingBottom: em(16, 18),
- paddingLeft: em(12, 18),
+ paddingLeft: em(12, 18)
},
- "thead th:first-child": {
- paddingLeft: "0",
+ 'thead th:first-child': {
+ paddingLeft: '0'
},
- "thead th:last-child": {
- paddingRight: "0",
+ 'thead th:last-child': {
+ paddingRight: '0'
},
- "tbody td, tfoot td": {
+ 'tbody td, tfoot td': {
paddingTop: em(16, 18),
paddingRight: em(12, 18),
paddingBottom: em(16, 18),
- paddingLeft: em(12, 18),
+ paddingLeft: em(12, 18)
},
- "tbody td:first-child, tfoot td:first-child": {
- paddingLeft: "0",
- },
- "tbody td:last-child, tfoot td:last-child": {
- paddingRight: "0",
+ 'tbody td:first-child, tfoot td:first-child': {
+ paddingLeft: '0'
},
+ 'tbody td:last-child, tfoot td:last-child': {
+ paddingRight: '0'
+ }
},
{
- "> :first-child": {
- marginTop: "0",
+ '> :first-child': {
+ marginTop: '0'
},
- "> :last-child": {
- marginBottom: "0",
- },
- },
- ],
+ '> :last-child': {
+ marginBottom: '0'
+ }
+ }
+ ]
},
- "2xl": {
+ '2xl': {
css: [
{
fontSize: rem(24),
lineHeight: round(40 / 24),
p: {
marginTop: em(32, 24),
- marginBottom: em(32, 24),
+ marginBottom: em(32, 24)
},
'[class~="lead"]': {
fontSize: em(30, 24),
lineHeight: round(44 / 30),
marginTop: em(32, 30),
- marginBottom: em(32, 30),
+ marginBottom: em(32, 30)
},
blockquote: {
marginTop: em(64, 36),
marginBottom: em(64, 36),
- paddingLeft: em(40, 36),
+ paddingLeft: em(40, 36)
},
h1: {
fontSize: em(64, 24),
- marginTop: "0",
+ marginTop: '0',
marginBottom: em(56, 64),
- lineHeight: round(64 / 64),
+ lineHeight: round(64 / 64)
},
h2: {
fontSize: em(48, 24),
marginTop: em(72, 48),
marginBottom: em(40, 48),
- lineHeight: round(52 / 48),
+ lineHeight: round(52 / 48)
},
h3: {
fontSize: em(36, 24),
marginTop: em(56, 36),
marginBottom: em(24, 36),
- lineHeight: round(44 / 36),
+ lineHeight: round(44 / 36)
},
h4: {
marginTop: em(40, 24),
marginBottom: em(16, 24),
- lineHeight: round(36 / 24),
+ lineHeight: round(36 / 24)
},
img: {
marginTop: em(48, 24),
- marginBottom: em(48, 24),
+ marginBottom: em(48, 24)
},
video: {
marginTop: em(48, 24),
- marginBottom: em(48, 24),
+ marginBottom: em(48, 24)
},
figure: {
marginTop: em(48, 24),
- marginBottom: em(48, 24),
+ marginBottom: em(48, 24)
},
- "figure > *": {
- marginTop: "0",
- marginBottom: "0",
+ 'figure > *': {
+ marginTop: '0',
+ marginBottom: '0'
},
figcaption: {
fontSize: em(20, 24),
lineHeight: round(32 / 20),
- marginTop: em(20, 20),
+ marginTop: em(20, 20)
},
code: {
- fontSize: em(20, 24),
+ fontSize: em(20, 24)
},
- "h2 code": {
- fontSize: em(42, 48),
+ 'h2 code': {
+ fontSize: em(42, 48)
},
- "h3 code": {
- fontSize: em(32, 36),
+ 'h3 code': {
+ fontSize: em(32, 36)
},
pre: {
fontSize: em(20, 24),
@@ -802,883 +803,947 @@ let defaultModifiers = {
paddingTop: em(24, 20),
paddingRight: em(32, 20),
paddingBottom: em(24, 20),
- paddingLeft: em(32, 20),
+ paddingLeft: em(32, 20)
},
ol: {
marginTop: em(32, 24),
marginBottom: em(32, 24),
- paddingLeft: em(38, 24),
+ paddingLeft: em(38, 24)
},
ul: {
marginTop: em(32, 24),
marginBottom: em(32, 24),
- paddingLeft: em(38, 24),
+ paddingLeft: em(38, 24)
},
li: {
marginTop: em(12, 24),
- marginBottom: em(12, 24),
+ marginBottom: em(12, 24)
},
- "ol > li": {
- paddingLeft: em(10, 24),
+ 'ol > li': {
+ paddingLeft: em(10, 24)
},
- "ul > li": {
- paddingLeft: em(10, 24),
+ 'ul > li': {
+ paddingLeft: em(10, 24)
},
- "> ul > li p": {
+ '> ul > li p': {
marginTop: em(20, 24),
- marginBottom: em(20, 24),
+ marginBottom: em(20, 24)
},
- "> ul > li > *:first-child": {
- marginTop: em(32, 24),
+ '> ul > li > *:first-child': {
+ marginTop: em(32, 24)
},
- "> ul > li > *:last-child": {
- marginBottom: em(32, 24),
+ '> ul > li > *:last-child': {
+ marginBottom: em(32, 24)
},
- "> ol > li > *:first-child": {
- marginTop: em(32, 24),
+ '> ol > li > *:first-child': {
+ marginTop: em(32, 24)
},
- "> ol > li > *:last-child": {
- marginBottom: em(32, 24),
+ '> ol > li > *:last-child': {
+ marginBottom: em(32, 24)
},
- "ul ul, ul ol, ol ul, ol ol": {
+ 'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(16, 24),
- marginBottom: em(16, 24),
+ marginBottom: em(16, 24)
},
hr: {
marginTop: em(72, 24),
- marginBottom: em(72, 24),
+ marginBottom: em(72, 24)
},
- "hr + *": {
- marginTop: "0",
+ 'hr + *': {
+ marginTop: '0'
},
- "h2 + *": {
- marginTop: "0",
+ 'h2 + *': {
+ marginTop: '0'
},
- "h3 + *": {
- marginTop: "0",
+ 'h3 + *': {
+ marginTop: '0'
},
- "h4 + *": {
- marginTop: "0",
+ 'h4 + *': {
+ marginTop: '0'
},
table: {
fontSize: em(20, 24),
- lineHeight: round(28 / 20),
+ lineHeight: round(28 / 20)
},
- "thead th": {
+ 'thead th': {
paddingRight: em(12, 20),
paddingBottom: em(16, 20),
- paddingLeft: em(12, 20),
+ paddingLeft: em(12, 20)
},
- "thead th:first-child": {
- paddingLeft: "0",
+ 'thead th:first-child': {
+ paddingLeft: '0'
},
- "thead th:last-child": {
- paddingRight: "0",
+ 'thead th:last-child': {
+ paddingRight: '0'
},
- "tbody td, tfoot td": {
+ 'tbody td, tfoot td': {
paddingTop: em(16, 20),
paddingRight: em(12, 20),
paddingBottom: em(16, 20),
- paddingLeft: em(12, 20),
+ paddingLeft: em(12, 20)
},
- "tbody td:first-child, tfoot td:first-child": {
- paddingLeft: "0",
- },
- "tbody td:last-child, tfoot td:last-child": {
- paddingRight: "0",
+ 'tbody td:first-child, tfoot td:first-child': {
+ paddingLeft: '0'
},
+ 'tbody td:last-child, tfoot td:last-child': {
+ paddingRight: '0'
+ }
},
{
- "> :first-child": {
- marginTop: "0",
+ '> :first-child': {
+ marginTop: '0'
},
- "> :last-child": {
- marginBottom: "0",
- },
- },
- ],
+ '> :last-child': {
+ marginBottom: '0'
+ }
+ }
+ ]
},
// Invert (for dark mode)
invert: {
css: {
- "--tw-prose-body": "var(--tw-prose-invert-body)",
- "--tw-prose-headings": "var(--tw-prose-invert-headings)",
- "--tw-prose-lead": "var(--tw-prose-invert-lead)",
- "--tw-prose-links": "var(--tw-prose-invert-links)",
- "--tw-prose-bold": "var(--tw-prose-invert-bold)",
- "--tw-prose-counters": "var(--tw-prose-invert-counters)",
- "--tw-prose-bullets": "var(--tw-prose-invert-bullets)",
- "--tw-prose-hr": "var(--tw-prose-invert-hr)",
- "--tw-prose-quotes": "var(--tw-prose-invert-quotes)",
- "--tw-prose-quote-borders": "var(--tw-prose-invert-quote-borders)",
- "--tw-prose-captions": "var(--tw-prose-invert-captions)",
- "--tw-prose-code": "var(--tw-prose-invert-code)",
- "--tw-prose-pre-code": "var(--tw-prose-invert-pre-code)",
- "--tw-prose-pre-bg": "var(--tw-prose-invert-pre-bg)",
- "--tw-prose-th-borders": "var(--tw-prose-invert-th-borders)",
- "--tw-prose-td-borders": "var(--tw-prose-invert-td-borders)",
- },
+ '--tw-prose-body': 'var(--tw-prose-invert-body)',
+ '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
+ '--tw-prose-lead': 'var(--tw-prose-invert-lead)',
+ '--tw-prose-links': 'var(--tw-prose-invert-links)',
+ '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
+ '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
+ '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
+ '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
+ '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
+ '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
+ '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
+ '--tw-prose-code': 'var(--tw-prose-invert-code)',
+ '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
+ '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
+ '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
+ '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)'
+ }
},
// Gray color themes
slate: {
css: {
- "--tw-prose-body": colors.slate[700],
- "--tw-prose-headings": colors.slate[900],
- "--tw-prose-lead": colors.slate[600],
- "--tw-prose-links": colors.slate[900],
- "--tw-prose-bold": colors.slate[900],
- "--tw-prose-counters": colors.slate[500],
- "--tw-prose-bullets": colors.slate[300],
- "--tw-prose-hr": colors.slate[200],
- "--tw-prose-quotes": colors.slate[900],
- "--tw-prose-quote-borders": colors.slate[200],
- "--tw-prose-captions": colors.slate[500],
- "--tw-prose-code": colors.slate[900],
- "--tw-prose-pre-code": colors.slate[200],
- "--tw-prose-pre-bg": colors.slate[800],
- "--tw-prose-th-borders": colors.slate[300],
- "--tw-prose-td-borders": colors.slate[200],
- "--tw-prose-invert-body": colors.slate[300],
- "--tw-prose-invert-headings": colors.white,
- "--tw-prose-invert-lead": colors.slate[400],
- "--tw-prose-invert-links": colors.white,
- "--tw-prose-invert-bold": colors.white,
- "--tw-prose-invert-counters": colors.slate[400],
- "--tw-prose-invert-bullets": colors.slate[600],
- "--tw-prose-invert-hr": colors.slate[700],
- "--tw-prose-invert-quotes": colors.slate[100],
- "--tw-prose-invert-quote-borders": colors.slate[700],
- "--tw-prose-invert-captions": colors.slate[400],
- "--tw-prose-invert-code": colors.white,
- "--tw-prose-invert-pre-code": colors.slate[300],
- "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
- "--tw-prose-invert-th-borders": colors.slate[600],
- "--tw-prose-invert-td-borders": colors.slate[700],
- },
+ '--tw-prose-body': colors.slate[700],
+ '--tw-prose-headings': colors.slate[900],
+ '--tw-prose-lead': colors.slate[600],
+ '--tw-prose-links': colors.slate[900],
+ '--tw-prose-bold': colors.slate[900],
+ '--tw-prose-counters': colors.slate[500],
+ '--tw-prose-bullets': colors.slate[300],
+ '--tw-prose-hr': colors.slate[200],
+ '--tw-prose-quotes': colors.slate[900],
+ '--tw-prose-quote-borders': colors.slate[200],
+ '--tw-prose-captions': colors.slate[500],
+ '--tw-prose-code': colors.slate[900],
+ '--tw-prose-pre-code': colors.slate[200],
+ '--tw-prose-pre-bg': colors.slate[800],
+ '--tw-prose-th-borders': colors.slate[300],
+ '--tw-prose-td-borders': colors.slate[200],
+ '--tw-prose-invert-body': colors.slate[300],
+ '--tw-prose-invert-headings': colors.white,
+ '--tw-prose-invert-lead': colors.slate[400],
+ '--tw-prose-invert-links': colors.white,
+ '--tw-prose-invert-bold': colors.white,
+ '--tw-prose-invert-counters': colors.slate[400],
+ '--tw-prose-invert-bullets': colors.slate[600],
+ '--tw-prose-invert-hr': colors.slate[700],
+ '--tw-prose-invert-quotes': colors.slate[100],
+ '--tw-prose-invert-quote-borders': colors.slate[700],
+ '--tw-prose-invert-captions': colors.slate[400],
+ '--tw-prose-invert-code': colors.white,
+ '--tw-prose-invert-pre-code': colors.slate[300],
+ '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+ '--tw-prose-invert-th-borders': colors.slate[600],
+ '--tw-prose-invert-td-borders': colors.slate[700]
+ }
},
gray: {
css: {
- "--tw-prose-body": colors.gray[700],
- "--tw-prose-headings": colors.gray[900],
- "--tw-prose-lead": colors.gray[600],
- "--tw-prose-links": colors.gray[900],
- "--tw-prose-bold": colors.gray[900],
- "--tw-prose-counters": colors.gray[500],
- "--tw-prose-bullets": colors.gray[300],
- "--tw-prose-hr": colors.gray[200],
- "--tw-prose-quotes": colors.gray[900],
- "--tw-prose-quote-borders": colors.gray[200],
- "--tw-prose-captions": colors.gray[500],
- "--tw-prose-code": colors.gray[900],
- "--tw-prose-pre-code": colors.gray[200],
- "--tw-prose-pre-bg": colors.gray[800],
- "--tw-prose-th-borders": colors.gray[300],
- "--tw-prose-td-borders": colors.gray[200],
- "--tw-prose-invert-body": colors.gray[300],
- "--tw-prose-invert-headings": colors.white,
- "--tw-prose-invert-lead": colors.gray[400],
- "--tw-prose-invert-links": colors.white,
- "--tw-prose-invert-bold": colors.white,
- "--tw-prose-invert-counters": colors.gray[400],
- "--tw-prose-invert-bullets": colors.gray[600],
- "--tw-prose-invert-hr": colors.gray[700],
- "--tw-prose-invert-quotes": colors.gray[100],
- "--tw-prose-invert-quote-borders": colors.gray[700],
- "--tw-prose-invert-captions": colors.gray[400],
- "--tw-prose-invert-code": colors.white,
- "--tw-prose-invert-pre-code": colors.gray[300],
- "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
- "--tw-prose-invert-th-borders": colors.gray[600],
- "--tw-prose-invert-td-borders": colors.gray[700],
- },
+ '--tw-prose-body': colors.gray[700],
+ '--tw-prose-headings': colors.gray[900],
+ '--tw-prose-lead': colors.gray[600],
+ '--tw-prose-links': colors.gray[900],
+ '--tw-prose-bold': colors.gray[900],
+ '--tw-prose-counters': colors.gray[500],
+ '--tw-prose-bullets': colors.gray[300],
+ '--tw-prose-hr': colors.gray[200],
+ '--tw-prose-quotes': colors.gray[900],
+ '--tw-prose-quote-borders': colors.gray[200],
+ '--tw-prose-captions': colors.gray[500],
+ '--tw-prose-code': colors.gray[900],
+ '--tw-prose-pre-code': colors.gray[200],
+ '--tw-prose-pre-bg': colors.gray[800],
+ '--tw-prose-th-borders': colors.gray[300],
+ '--tw-prose-td-borders': colors.gray[200],
+ '--tw-prose-invert-body': colors.gray[300],
+ '--tw-prose-invert-headings': colors.white,
+ '--tw-prose-invert-lead': colors.gray[400],
+ '--tw-prose-invert-links': colors.white,
+ '--tw-prose-invert-bold': colors.white,
+ '--tw-prose-invert-counters': colors.gray[400],
+ '--tw-prose-invert-bullets': colors.gray[600],
+ '--tw-prose-invert-hr': colors.gray[700],
+ '--tw-prose-invert-quotes': colors.gray[100],
+ '--tw-prose-invert-quote-borders': colors.gray[700],
+ '--tw-prose-invert-captions': colors.gray[400],
+ '--tw-prose-invert-code': colors.white,
+ '--tw-prose-invert-pre-code': colors.gray[300],
+ '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+ '--tw-prose-invert-th-borders': colors.gray[600],
+ '--tw-prose-invert-td-borders': colors.gray[700]
+ }
},
zinc: {
css: {
- "--tw-prose-body": colors.zinc[700],
- "--tw-prose-headings": colors.zinc[900],
- "--tw-prose-lead": colors.zinc[600],
- "--tw-prose-links": colors.zinc[900],
- "--tw-prose-bold": colors.zinc[900],
- "--tw-prose-counters": colors.zinc[500],
- "--tw-prose-bullets": colors.zinc[300],
- "--tw-prose-hr": colors.zinc[200],
- "--tw-prose-quotes": colors.zinc[900],
- "--tw-prose-quote-borders": colors.zinc[200],
- "--tw-prose-captions": colors.zinc[500],
- "--tw-prose-code": colors.zinc[900],
- "--tw-prose-pre-code": colors.zinc[200],
- "--tw-prose-pre-bg": colors.zinc[800],
- "--tw-prose-th-borders": colors.zinc[300],
- "--tw-prose-td-borders": colors.zinc[200],
- "--tw-prose-invert-body": colors.zinc[300],
- "--tw-prose-invert-headings": colors.white,
- "--tw-prose-invert-lead": colors.zinc[400],
- "--tw-prose-invert-links": colors.white,
- "--tw-prose-invert-bold": colors.white,
- "--tw-prose-invert-counters": colors.zinc[400],
- "--tw-prose-invert-bullets": colors.zinc[600],
- "--tw-prose-invert-hr": colors.zinc[700],
- "--tw-prose-invert-quotes": colors.zinc[100],
- "--tw-prose-invert-quote-borders": colors.zinc[700],
- "--tw-prose-invert-captions": colors.zinc[400],
- "--tw-prose-invert-code": colors.white,
- "--tw-prose-invert-pre-code": colors.zinc[300],
- "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
- "--tw-prose-invert-th-borders": colors.zinc[600],
- "--tw-prose-invert-td-borders": colors.zinc[700],
- },
+ '--tw-prose-body': colors.zinc[700],
+ '--tw-prose-headings': colors.zinc[900],
+ '--tw-prose-lead': colors.zinc[600],
+ '--tw-prose-links': colors.zinc[900],
+ '--tw-prose-bold': colors.zinc[900],
+ '--tw-prose-counters': colors.zinc[500],
+ '--tw-prose-bullets': colors.zinc[300],
+ '--tw-prose-hr': colors.zinc[200],
+ '--tw-prose-quotes': colors.zinc[900],
+ '--tw-prose-quote-borders': colors.zinc[200],
+ '--tw-prose-captions': colors.zinc[500],
+ '--tw-prose-code': colors.zinc[900],
+ '--tw-prose-pre-code': colors.zinc[200],
+ '--tw-prose-pre-bg': colors.zinc[800],
+ '--tw-prose-th-borders': colors.zinc[300],
+ '--tw-prose-td-borders': colors.zinc[200],
+ '--tw-prose-invert-body': colors.zinc[300],
+ '--tw-prose-invert-headings': colors.white,
+ '--tw-prose-invert-lead': colors.zinc[400],
+ '--tw-prose-invert-links': colors.white,
+ '--tw-prose-invert-bold': colors.white,
+ '--tw-prose-invert-counters': colors.zinc[400],
+ '--tw-prose-invert-bullets': colors.zinc[600],
+ '--tw-prose-invert-hr': colors.zinc[700],
+ '--tw-prose-invert-quotes': colors.zinc[100],
+ '--tw-prose-invert-quote-borders': colors.zinc[700],
+ '--tw-prose-invert-captions': colors.zinc[400],
+ '--tw-prose-invert-code': colors.white,
+ '--tw-prose-invert-pre-code': colors.zinc[300],
+ '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+ '--tw-prose-invert-th-borders': colors.zinc[600],
+ '--tw-prose-invert-td-borders': colors.zinc[700]
+ }
},
neutral: {
css: {
- "--tw-prose-body": colors.neutral[700],
- "--tw-prose-headings": colors.neutral[900],
- "--tw-prose-lead": colors.neutral[600],
- "--tw-prose-links": colors.neutral[900],
- "--tw-prose-bold": colors.neutral[900],
- "--tw-prose-counters": colors.neutral[500],
- "--tw-prose-bullets": colors.neutral[300],
- "--tw-prose-hr": colors.neutral[200],
- "--tw-prose-quotes": colors.neutral[900],
- "--tw-prose-quote-borders": colors.neutral[200],
- "--tw-prose-captions": colors.neutral[500],
- "--tw-prose-code": colors.neutral[900],
- "--tw-prose-pre-code": colors.neutral[200],
- "--tw-prose-pre-bg": colors.neutral[800],
- "--tw-prose-th-borders": colors.neutral[300],
- "--tw-prose-td-borders": colors.neutral[200],
- "--tw-prose-invert-body": colors.neutral[300],
- "--tw-prose-invert-headings": colors.white,
- "--tw-prose-invert-lead": colors.neutral[400],
- "--tw-prose-invert-links": colors.white,
- "--tw-prose-invert-bold": colors.white,
- "--tw-prose-invert-counters": colors.neutral[400],
- "--tw-prose-invert-bullets": colors.neutral[600],
- "--tw-prose-invert-hr": colors.neutral[700],
- "--tw-prose-invert-quotes": colors.neutral[100],
- "--tw-prose-invert-quote-borders": colors.neutral[700],
- "--tw-prose-invert-captions": colors.neutral[400],
- "--tw-prose-invert-code": colors.white,
- "--tw-prose-invert-pre-code": colors.neutral[300],
- "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
- "--tw-prose-invert-th-borders": colors.neutral[600],
- "--tw-prose-invert-td-borders": colors.neutral[700],
- },
+ '--tw-prose-body': colors.neutral[700],
+ '--tw-prose-headings': colors.neutral[900],
+ '--tw-prose-lead': colors.neutral[600],
+ '--tw-prose-links': colors.neutral[900],
+ '--tw-prose-bold': colors.neutral[900],
+ '--tw-prose-counters': colors.neutral[500],
+ '--tw-prose-bullets': colors.neutral[300],
+ '--tw-prose-hr': colors.neutral[200],
+ '--tw-prose-quotes': colors.neutral[900],
+ '--tw-prose-quote-borders': colors.neutral[200],
+ '--tw-prose-captions': colors.neutral[500],
+ '--tw-prose-code': colors.neutral[900],
+ '--tw-prose-pre-code': colors.neutral[200],
+ '--tw-prose-pre-bg': colors.neutral[800],
+ '--tw-prose-th-borders': colors.neutral[300],
+ '--tw-prose-td-borders': colors.neutral[200],
+ '--tw-prose-invert-body': colors.neutral[300],
+ '--tw-prose-invert-headings': colors.white,
+ '--tw-prose-invert-lead': colors.neutral[400],
+ '--tw-prose-invert-links': colors.white,
+ '--tw-prose-invert-bold': colors.white,
+ '--tw-prose-invert-counters': colors.neutral[400],
+ '--tw-prose-invert-bullets': colors.neutral[600],
+ '--tw-prose-invert-hr': colors.neutral[700],
+ '--tw-prose-invert-quotes': colors.neutral[100],
+ '--tw-prose-invert-quote-borders': colors.neutral[700],
+ '--tw-prose-invert-captions': colors.neutral[400],
+ '--tw-prose-invert-code': colors.white,
+ '--tw-prose-invert-pre-code': colors.neutral[300],
+ '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+ '--tw-prose-invert-th-borders': colors.neutral[600],
+ '--tw-prose-invert-td-borders': colors.neutral[700]
+ }
},
stone: {
css: {
- "--tw-prose-body": colors.stone[700],
- "--tw-prose-headings": colors.stone[900],
- "--tw-prose-lead": colors.stone[600],
- "--tw-prose-links": colors.stone[900],
- "--tw-prose-bold": colors.stone[900],
- "--tw-prose-counters": colors.stone[500],
- "--tw-prose-bullets": colors.stone[300],
- "--tw-prose-hr": colors.stone[200],
- "--tw-prose-quotes": colors.stone[900],
- "--tw-prose-quote-borders": colors.stone[200],
- "--tw-prose-captions": colors.stone[500],
- "--tw-prose-code": colors.stone[900],
- "--tw-prose-pre-code": colors.stone[200],
- "--tw-prose-pre-bg": colors.stone[800],
- "--tw-prose-th-borders": colors.stone[300],
- "--tw-prose-td-borders": colors.stone[200],
- "--tw-prose-invert-body": colors.stone[300],
- "--tw-prose-invert-headings": colors.white,
- "--tw-prose-invert-lead": colors.stone[400],
- "--tw-prose-invert-links": colors.white,
- "--tw-prose-invert-bold": colors.white,
- "--tw-prose-invert-counters": colors.stone[400],
- "--tw-prose-invert-bullets": colors.stone[600],
- "--tw-prose-invert-hr": colors.stone[700],
- "--tw-prose-invert-quotes": colors.stone[100],
- "--tw-prose-invert-quote-borders": colors.stone[700],
- "--tw-prose-invert-captions": colors.stone[400],
- "--tw-prose-invert-code": colors.white,
- "--tw-prose-invert-pre-code": colors.stone[300],
- "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
- "--tw-prose-invert-th-borders": colors.stone[600],
- "--tw-prose-invert-td-borders": colors.stone[700],
- },
+ '--tw-prose-body': colors.stone[700],
+ '--tw-prose-headings': colors.stone[900],
+ '--tw-prose-lead': colors.stone[600],
+ '--tw-prose-links': colors.stone[900],
+ '--tw-prose-bold': colors.stone[900],
+ '--tw-prose-counters': colors.stone[500],
+ '--tw-prose-bullets': colors.stone[300],
+ '--tw-prose-hr': colors.stone[200],
+ '--tw-prose-quotes': colors.stone[900],
+ '--tw-prose-quote-borders': colors.stone[200],
+ '--tw-prose-captions': colors.stone[500],
+ '--tw-prose-code': colors.stone[900],
+ '--tw-prose-pre-code': colors.stone[200],
+ '--tw-prose-pre-bg': colors.stone[800],
+ '--tw-prose-th-borders': colors.stone[300],
+ '--tw-prose-td-borders': colors.stone[200],
+ '--tw-prose-invert-body': colors.stone[300],
+ '--tw-prose-invert-headings': colors.white,
+ '--tw-prose-invert-lead': colors.stone[400],
+ '--tw-prose-invert-links': colors.white,
+ '--tw-prose-invert-bold': colors.white,
+ '--tw-prose-invert-counters': colors.stone[400],
+ '--tw-prose-invert-bullets': colors.stone[600],
+ '--tw-prose-invert-hr': colors.stone[700],
+ '--tw-prose-invert-quotes': colors.stone[100],
+ '--tw-prose-invert-quote-borders': colors.stone[700],
+ '--tw-prose-invert-captions': colors.stone[400],
+ '--tw-prose-invert-code': colors.white,
+ '--tw-prose-invert-pre-code': colors.stone[300],
+ '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+ '--tw-prose-invert-th-borders': colors.stone[600],
+ '--tw-prose-invert-td-borders': colors.stone[700]
+ }
},
// Link-only themes (for backward compatibility)
red: {
css: {
- "--tw-prose-links": colors.red[600],
- "--tw-prose-invert-links": colors.red[500],
- },
+ '--tw-prose-links': colors.red[600],
+ '--tw-prose-invert-links': colors.red[500]
+ }
},
orange: {
css: {
- "--tw-prose-links": colors.orange[600],
- "--tw-prose-invert-links": colors.orange[500],
- },
+ '--tw-prose-links': colors.orange[600],
+ '--tw-prose-invert-links': colors.orange[500]
+ }
},
amber: {
css: {
- "--tw-prose-links": colors.amber[600],
- "--tw-prose-invert-links": colors.amber[500],
- },
+ '--tw-prose-links': colors.amber[600],
+ '--tw-prose-invert-links': colors.amber[500]
+ }
},
yellow: {
css: {
- "--tw-prose-links": colors.yellow[600],
- "--tw-prose-invert-links": colors.yellow[500],
- },
+ '--tw-prose-links': colors.yellow[600],
+ '--tw-prose-invert-links': colors.yellow[500]
+ }
},
lime: {
css: {
- "--tw-prose-links": colors.lime[600],
- "--tw-prose-invert-links": colors.lime[500],
- },
+ '--tw-prose-links': colors.lime[600],
+ '--tw-prose-invert-links': colors.lime[500]
+ }
},
green: {
css: {
- "--tw-prose-links": colors.green[600],
- "--tw-prose-invert-links": colors.green[500],
- },
+ '--tw-prose-links': colors.green[600],
+ '--tw-prose-invert-links': colors.green[500]
+ }
},
emerald: {
css: {
- "--tw-prose-links": colors.emerald[600],
- "--tw-prose-invert-links": colors.emerald[500],
- },
+ '--tw-prose-links': colors.emerald[600],
+ '--tw-prose-invert-links': colors.emerald[500]
+ }
},
teal: {
css: {
- "--tw-prose-links": colors.teal[600],
- "--tw-prose-invert-links": colors.teal[500],
- },
+ '--tw-prose-links': colors.teal[600],
+ '--tw-prose-invert-links': colors.teal[500]
+ }
},
cyan: {
css: {
- "--tw-prose-links": colors.cyan[600],
- "--tw-prose-invert-links": colors.cyan[500],
- },
+ '--tw-prose-links': colors.cyan[600],
+ '--tw-prose-invert-links': colors.cyan[500]
+ }
},
sky: {
css: {
- "--tw-prose-links": colors.sky[600],
- "--tw-prose-invert-links": colors.sky[500],
- },
+ '--tw-prose-links': colors.sky[600],
+ '--tw-prose-invert-links': colors.sky[500]
+ }
},
blue: {
css: {
- "--tw-prose-links": colors.blue[600],
- "--tw-prose-invert-links": colors.blue[500],
- },
+ '--tw-prose-links': colors.blue[600],
+ '--tw-prose-invert-links': colors.blue[500]
+ }
},
indigo: {
css: {
- "--tw-prose-links": colors.indigo[600],
- "--tw-prose-invert-links": colors.indigo[500],
- },
+ '--tw-prose-links': colors.indigo[600],
+ '--tw-prose-invert-links': colors.indigo[500]
+ }
},
violet: {
css: {
- "--tw-prose-links": colors.violet[600],
- "--tw-prose-invert-links": colors.violet[500],
- },
+ '--tw-prose-links': colors.violet[600],
+ '--tw-prose-invert-links': colors.violet[500]
+ }
},
purple: {
css: {
- "--tw-prose-links": colors.purple[600],
- "--tw-prose-invert-links": colors.purple[500],
- },
+ '--tw-prose-links': colors.purple[600],
+ '--tw-prose-invert-links': colors.purple[500]
+ }
},
fuchsia: {
css: {
- "--tw-prose-links": colors.fuchsia[600],
- "--tw-prose-invert-links": colors.fuchsia[500],
- },
+ '--tw-prose-links': colors.fuchsia[600],
+ '--tw-prose-invert-links': colors.fuchsia[500]
+ }
},
pink: {
css: {
- "--tw-prose-links": colors.pink[600],
- "--tw-prose-invert-links": colors.pink[500],
- },
+ '--tw-prose-links': colors.pink[600],
+ '--tw-prose-invert-links': colors.pink[500]
+ }
},
rose: {
css: {
- "--tw-prose-links": colors.rose[600],
- "--tw-prose-invert-links": colors.rose[500],
- },
- },
+ '--tw-prose-links': colors.rose[600],
+ '--tw-prose-invert-links': colors.rose[500]
+ }
+ }
};
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
- darkMode: "class",
- content: [
- "./src/**/*.{js,ts,jsx,tsx}",
- ],
+ darkMode: 'class',
+ content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
+ fontFamily: {
+ inter: ['Inter']
+ },
colors: {
// You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
primary: {
- 50: "#fcfdf7",
- 100: "#f8fcee",
- 200: "#eef6d5",
- 300: "#e3f1bc",
- 400: "#cfe78a",
- 500: "#badc58",
- 600: "#a7c64f",
- 700: "#8ca542",
- 800: "#708435",
- 900: "#5b6c2b",
- DEFAULT: "#badc58",
+ 50: '#fcfdf7',
+ 100: '#f8fcee',
+ 200: '#eef6d5',
+ 300: '#e3f1bc',
+ 400: '#cfe78a',
+ 500: '#badc58',
+ 600: '#a7c64f',
+ 700: '#8ca542',
+ 800: '#708435',
+ 900: '#5b6c2b',
+ DEFAULT: '#badc58'
},
- grey: "#0d1117",
+ grey: '#0d1117',
mineshaft: {
- 50: "#f5f5f5",
- 100: "#ebebeb",
- 200: "#ccccce",
- 300: "#adaeb0",
- 400: "#707174",
- 500: "#323439",
- 600: "#2d2f33",
- 700: "#26272b",
- 800: "#1e1f22",
- 900: "#19191c",
- DEFAULT: "#323439",
+ 50: '#f5f5f5',
+ 100: '#ebebeb',
+ 200: '#ccccce',
+ 300: '#adaeb0',
+ 400: '#707174',
+ 500: '#323439',
+ 600: '#2d2f33',
+ 700: '#26272b',
+ 800: '#1e1f22',
+ 900: '#19191c',
+ DEFAULT: '#323439'
},
chicago: {
- 50: "#f7f7f7",
- 100: "#efefef",
- 200: "#d6d6d7",
- 300: "#bdbebf",
- 400: "#8c8d8e",
- 500: "#5b5c5e",
- 600: "#525355",
- 700: "#444547",
- 800: "#373738",
- 900: "#2d2d2e",
- DEFAULT: "#5b5c5e",
+ 50: '#f7f7f7',
+ 100: '#efefef',
+ 200: '#d6d6d7',
+ 300: '#bdbebf',
+ 400: '#8c8d8e',
+ 500: '#5b5c5e',
+ 600: '#525355',
+ 700: '#444547',
+ 800: '#373738',
+ 900: '#2d2d2e',
+ DEFAULT: '#5b5c5e'
},
bunker: {
- 50: "#f3f4f4",
- 100: "#e8e8e9",
- 200: "#c5c6c8",
- 300: "#a2a4a6",
- 400: "#5d5f64",
- 500: "#171b21",
- 600: "#15181e",
- 700: "#111419",
- 800: "#0e1014",
- 900: "#0b0d10",
- DEFAULT: "#171B21",
+ 50: '#f3f4f4',
+ 100: '#e8e8e9',
+ 200: '#c5c6c8',
+ 300: '#a2a4a6',
+ 400: '#5d5f64',
+ 500: '#171b21',
+ 600: '#15181e',
+ 700: '#111419',
+ 800: '#0e1014',
+ 900: '#0b0d10',
+ DEFAULT: '#171B21'
},
- githubblack: "#020409",
- blue2: "#130f40",
- blue1: "#3498db",
+ githubblack: '#020409',
+ blue2: '#130f40',
+ blue1: '#3498db',
yellow: {
- 50: "#fefcf3",
- 100: "#fef9e7",
- 200: "#fcf0c3",
- 300: "#f9e79f",
- 400: "#f5d657",
- 500: "#f1c40f",
- 600: "#d9b00e",
- 700: "#b5930b",
- 800: "#917609",
- 900: "#766007",
- DEFAULT: "#f1c40f",
+ 50: '#fefcf3',
+ 100: '#fef9e7',
+ 200: '#fcf0c3',
+ 300: '#f9e79f',
+ 400: '#f5d657',
+ 500: '#f1c40f',
+ 600: '#d9b00e',
+ 700: '#b5930b',
+ 800: '#917609',
+ 900: '#766007',
+ DEFAULT: '#f1c40f'
},
red: {
- 50: "#fef6f5",
- 100: "#fdedec",
- 200: "#f9d2ce",
- 300: "#f5b7b1",
- 400: "#ee8277",
- 500: "#e74c3c",
- 600: "#d04436",
- 700: "#ad392d",
- 800: "#8b2e24",
- 900: "#71251d",
- DEFAULT: "#e74c3c",
+ 50: '#fef6f5',
+ 100: '#fdedec',
+ 200: '#f9d2ce',
+ 300: '#f5b7b1',
+ 400: '#ee8277',
+ 500: '#e74c3c',
+ 600: '#d04436',
+ 700: '#ad392d',
+ 800: '#8b2e24',
+ 900: '#71251d',
+ DEFAULT: '#e74c3c'
},
- orange: "#f39c12",
+ orange: '#f39c12',
green: {
- 50: "#f5fcf8",
- 100: "#eafaf1",
- 200: "#cbf2dc",
- 300: "#abebc6",
- 400: "#6ddb9c",
- 500: "#2ecc71",
- 600: "#29b866",
- 700: "#239955",
- 800: "#1c7a44",
- 900: "#176437",
- DEFAULT: "#2ecc71",
- },
- },
+ 50: '#f5fcf8',
+ 100: '#eafaf1',
+ 200: '#cbf2dc',
+ 300: '#abebc6',
+ 400: '#6ddb9c',
+ 500: '#2ecc71',
+ 600: '#29b866',
+ 700: '#239955',
+ 800: '#1c7a44',
+ 900: '#176437',
+ DEFAULT: '#2ecc71'
+ }
+ }
},
keyframes: {
type: {
- "0%": { transform: "translateX(0ch)" },
- "5%, 10%": { transform: "translateX(1ch)" },
- "15%, 20%": { transform: "translateX(2ch)" },
- "25%, 30%": { transform: "translateX(3ch)" },
- "35%, 40%": { transform: "translateX(4ch)" },
- "45%, 50%": { transform: "translateX(5ch)" },
- "55%, 60%": { transform: "translateX(6ch)" },
- "65%, 70%": { transform: "translateX(7ch)" },
- "75%, 80%": { transform: "translateX(8ch)" },
- "85%, 90%": { transform: "translateX(9ch)" },
- "95%, 100%": { transform: "translateX(11ch)" },
+ '0%': { transform: 'translateX(0ch)' },
+ '5%, 10%': { transform: 'translateX(1ch)' },
+ '15%, 20%': { transform: 'translateX(2ch)' },
+ '25%, 30%': { transform: 'translateX(3ch)' },
+ '35%, 40%': { transform: 'translateX(4ch)' },
+ '45%, 50%': { transform: 'translateX(5ch)' },
+ '55%, 60%': { transform: 'translateX(6ch)' },
+ '65%, 70%': { transform: 'translateX(7ch)' },
+ '75%, 80%': { transform: 'translateX(8ch)' },
+ '85%, 90%': { transform: 'translateX(9ch)' },
+ '95%, 100%': { transform: 'translateX(11ch)' }
},
+ // REQUIRED BY DEISGN COMPONENT
+ // MODAL
fadeIn: {
- "0%": { opacity: 0 },
- "100%": { opacity: 1 },
+ '0%': { opacity: 0 },
+ '100%': { opacity: 1 }
},
+ popIn: {
+ from: {
+ opacity: 0,
+ transform: 'translate(-50%, -48%) scale(0.96)'
+ },
+ to: {
+ opacity: 1,
+ transform: 'translate(-50%, -50%) scale(1)'
+ }
+ },
+ // Dropdown
+ slideUpAndFade: {
+ from: {
+ opacity: 0,
+ transform: ' translateY(2px)'
+ },
+ to: {
+ opacity: 1,
+ transform: ' translateY(0)'
+ }
+ },
+ slideRightAndFade: {
+ from: {
+ opacity: 0,
+ transform: ' translateX(-2px)'
+ },
+ to: {
+ opacity: 1,
+ transform: ' translateX(0)'
+ }
+ },
+ slideDownAndFade: {
+ from: {
+ opacity: 0,
+ transform: ' translateY(-2px)'
+ },
+ to: {
+ opacity: 1,
+ transform: ' translateY(0)'
+ }
+ },
+ slideLeftAndFade: {
+ from: {
+ opacity: 0,
+ transform: ' translateX(2px)'
+ },
+ to: {
+ opacity: 1,
+ transform: ' translateX(0)'
+ }
+ },
+ // END
spin: {
- "0%": { transform: "rotate(0deg)" },
- "40%": { transform: "rotate(360deg)" },
- "100%": { transform: "rotate(360deg)" },
+ '0%': { transform: 'rotate(0deg)' },
+ '40%': { transform: 'rotate(360deg)' },
+ '100%': { transform: 'rotate(360deg)' }
},
bounce: {
- "0%": { transform: "translateY(-90%)" },
- "100%": { transform: "translateY(-100%)" },
+ '0%': { transform: 'translateY(-90%)' },
+ '100%': { transform: 'translateY(-100%)' }
},
wiggle: {
- "0%, 100%": { transform: "rotate(-3deg)" },
- "50%": { transform: "rotate(3deg)" },
+ '0%, 100%': { transform: 'rotate(-3deg)' },
+ '50%': { transform: 'rotate(3deg)' }
},
ping: {
- "75%, 100%": {
- transform: "scale(2)",
- opacity: 0,
- },
+ '75%, 100%': {
+ transform: 'scale(2)',
+ opacity: 0
+ }
},
popup: {
- "0%": {
- transform: "scale(0.2)",
- opacity: 0,
+ '0%': {
+ transform: 'scale(0.2)',
+ opacity: 0
// transform: "translateY(120%)",
},
- "100%": {
- transform: "scale(1)",
- opacity: 1,
+ '100%': {
+ transform: 'scale(1)',
+ opacity: 1
// transform: "translateY(100%)",
- },
+ }
},
popright: {
- "0%": {
- transform: "translateX(-100%)",
- },
- "100%": {
- transform: "translateX(0%)",
+ '0%': {
+ transform: 'translateX(-100%)'
},
+ '100%': {
+ transform: 'translateX(0%)'
+ }
},
popleft: {
- "0%": {
- transform: "translateX(100%)",
- },
- "100%": {
- transform: "translateX(0%)",
+ '0%': {
+ transform: 'translateX(100%)'
},
+ '100%': {
+ transform: 'translateX(0%)'
+ }
},
popdown: {
- "0%": {
- transform: "scale(0.2)",
- opacity: 0,
+ '0%': {
+ transform: 'scale(0.2)',
+ opacity: 0
// transform: "translateY(80%)",
},
- "100%": {
- transform: "scale(1)",
- opacity: 1,
+ '100%': {
+ transform: 'scale(1)',
+ opacity: 1
// transform: "translateY(100%)",
- },
- },
+ }
+ }
},
animation: {
- fadeIn: "fadeIn 1000ms ease-in-out",
- bounce: "bounce 1000ms ease-in-out infinite",
- spin: "spin 4000ms ease-in-out infinite",
- cursor: "cursor .6s linear infinite alternate",
- type: "type 2.7s ease-out .8s infinite alternate both",
- "type-reverse": "type 1.8s ease-out 0s infinite alternate-reverse both",
- wiggle: "wiggle 200ms ease-in-out",
- ping: "ping 1000ms ease-in-out infinite",
- popup: "popup 300ms ease-in-out",
- popdown: "popdown 300ms ease-in-out",
- popright: "popright 100ms ease-in-out",
- popleft: "popleft 100ms ease-in-out",
+ // Design Lib
+ // MODAL
+ fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
+ popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);',
+ // Dropdown
+ slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+ slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+ slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+ slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+ // END
+ bounce: 'bounce 1000ms ease-in-out infinite',
+ spin: 'spin 4000ms ease-in-out infinite',
+ cursor: 'cursor .6s linear infinite alternate',
+ type: 'type 2.7s ease-out .8s infinite alternate both',
+ 'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
+ wiggle: 'wiggle 200ms ease-in-out',
+ ping: 'ping 1000ms ease-in-out infinite',
+ popup: 'popup 300ms ease-in-out',
+ popdown: 'popdown 300ms ease-in-out',
+ popright: 'popright 100ms ease-in-out',
+ popleft: 'popleft 100ms ease-in-out'
},
fontSize: {
- xxxs: ".23rem",
- xxs: ".5rem",
- xs: ".75rem",
- sm: ".875rem",
- base: "1rem",
- lg: "1.125rem",
- xl: "1.25rem",
- "2xl": "1.5rem",
- "3xl": "1.875rem",
- "4xl": "2.25rem",
- "5xl": "3rem",
- "6xl": "4rem",
- "7xl": "5rem",
- "8xl": "6rem",
- "9xl": "7rem",
+ xxxs: '.23rem',
+ xxs: '.5rem',
+ xs: '.75rem',
+ sm: '.875rem',
+ base: '1rem',
+ lg: '1.125rem',
+ xl: '1.25rem',
+ '2xl': '1.5rem',
+ '3xl': '1.875rem',
+ '4xl': '2.25rem',
+ '5xl': '3rem',
+ '6xl': '4rem',
+ '7xl': '5rem',
+ '8xl': '6rem',
+ '9xl': '7rem'
},
typography: (theme) => ({
DEFAULT: {
css: [
{
- color: "var(--tw-prose-body)",
- maxWidth: "65ch",
+ color: 'var(--tw-prose-body)',
+ maxWidth: '65ch',
'[class~="lead"]': {
- color: "var(--tw-prose-lead)",
+ color: 'var(--tw-prose-lead)'
},
a: {
color: colors.gray[200],
- textDecoration: "underline",
- fontWeight: "500",
+ textDecoration: 'underline',
+ fontWeight: '500'
},
strong: {
color: colors.gray[200],
- fontWeight: "600",
+ fontWeight: '600'
},
- "a strong": {
- color: "inherit",
+ 'a strong': {
+ color: 'inherit'
},
- "blockquote strong": {
- color: "inherit",
+ 'blockquote strong': {
+ color: 'inherit'
},
- "thead th strong": {
- color: "inherit",
+ 'thead th strong': {
+ color: 'inherit'
},
ol: {
- listStyleType: "decimal",
+ listStyleType: 'decimal'
},
'ol[type="A"]': {
- listStyleType: "upper-alpha",
+ listStyleType: 'upper-alpha'
},
'ol[type="a"]': {
- listStyleType: "lower-alpha",
+ listStyleType: 'lower-alpha'
},
'ol[type="A" s]': {
- listStyleType: "upper-alpha",
+ listStyleType: 'upper-alpha'
},
'ol[type="a" s]': {
- listStyleType: "lower-alpha",
+ listStyleType: 'lower-alpha'
},
'ol[type="I"]': {
- listStyleType: "upper-roman",
+ listStyleType: 'upper-roman'
},
'ol[type="i"]': {
- listStyleType: "lower-roman",
+ listStyleType: 'lower-roman'
},
'ol[type="I" s]': {
- listStyleType: "upper-roman",
+ listStyleType: 'upper-roman'
},
'ol[type="i" s]': {
- listStyleType: "lower-roman",
+ listStyleType: 'lower-roman'
},
'ol[type="1"]': {
- listStyleType: "decimal",
+ listStyleType: 'decimal'
},
ul: {
- listStyleType: "disc",
+ listStyleType: 'disc'
},
- "ol > li::marker": {
- fontWeight: "400",
- color: "var(--tw-prose-counters)",
+ 'ol > li::marker': {
+ fontWeight: '400',
+ color: 'var(--tw-prose-counters)'
},
- "ul > li::marker": {
- color: "var(--tw-prose-bullets)",
+ 'ul > li::marker': {
+ color: 'var(--tw-prose-bullets)'
},
hr: {
- borderColor: "var(--tw-prose-hr)",
- borderTopWidth: 1,
+ borderColor: 'var(--tw-prose-hr)',
+ borderTopWidth: 1
},
blockquote: {
- fontWeight: "500",
- fontStyle: "italic",
- color: "var(--tw-prose-quotes)",
- borderLeftWidth: "0.25rem",
- borderLeftColor: "var(--tw-prose-quote-borders)",
- quotes: '"\\201C""\\201D""\\2018""\\2019"',
+ fontWeight: '500',
+ fontStyle: 'italic',
+ color: 'var(--tw-prose-quotes)',
+ borderLeftWidth: '0.25rem',
+ borderLeftColor: 'var(--tw-prose-quote-borders)',
+ quotes: '"\\201C""\\201D""\\2018""\\2019"'
},
- "blockquote p:first-of-type::before": {
- content: "open-quote",
+ 'blockquote p:first-of-type::before': {
+ content: 'open-quote'
},
- "blockquote p:last-of-type::after": {
- content: "close-quote",
+ 'blockquote p:last-of-type::after': {
+ content: 'close-quote'
},
h1: {
color: colors.gray[200],
- fontWeight: "800",
+ fontWeight: '800'
},
- "h1 strong": {
- fontWeight: "900",
- color: "inherit",
+ 'h1 strong': {
+ fontWeight: '900',
+ color: 'inherit'
},
h2: {
color: colors.gray[200],
- fontWeight: "700",
+ fontWeight: '700'
},
- "h2 strong": {
- fontWeight: "800",
- color: "inherit",
+ 'h2 strong': {
+ fontWeight: '800',
+ color: 'inherit'
},
h3: {
color: colors.gray[300],
- fontWeight: "600",
+ fontWeight: '600'
},
- "h3 strong": {
- fontWeight: "700",
- color: "inherit",
+ 'h3 strong': {
+ fontWeight: '700',
+ color: 'inherit'
},
h4: {
color: colors.gray[400],
- fontWeight: "600",
+ fontWeight: '600'
},
- "h4 strong": {
- fontWeight: "700",
- color: "inherit",
+ 'h4 strong': {
+ fontWeight: '700',
+ color: 'inherit'
},
// TODO: Figure out how to not need these, it's a merging issue
img: {},
- "figure > *": {},
+ 'figure > *': {},
figcaption: {
- color: "var(--tw-prose-captions)",
+ color: 'var(--tw-prose-captions)'
},
code: {
- color: "var(--tw-prose-code)",
- fontWeight: "600",
+ color: 'var(--tw-prose-code)',
+ fontWeight: '600'
},
- "code::before": {
- content: '"`"',
+ 'code::before': {
+ content: '"`"'
},
- "code::after": {
- content: '"`"',
+ 'code::after': {
+ content: '"`"'
},
- "a code": {
- color: "inherit",
+ 'a code': {
+ color: 'inherit'
},
- "h1 code": {
- color: "inherit",
+ 'h1 code': {
+ color: 'inherit'
},
- "h2 code": {
- color: "inherit",
+ 'h2 code': {
+ color: 'inherit'
},
- "h3 code": {
- color: "inherit",
+ 'h3 code': {
+ color: 'inherit'
},
- "h4 code": {
- color: "inherit",
+ 'h4 code': {
+ color: 'inherit'
},
- "blockquote code": {
- color: "inherit",
+ 'blockquote code': {
+ color: 'inherit'
},
- "thead th code": {
- color: "inherit",
+ 'thead th code': {
+ color: 'inherit'
},
pre: {
- color: "var(--tw-prose-pre-code)",
+ color: 'var(--tw-prose-pre-code)',
backgroundColor: colors.gray[800],
- overflowX: "auto",
- fontWeight: "400",
+ overflowX: 'auto',
+ fontWeight: '400'
},
- "pre code": {
- backgroundColor: "transparent",
- borderWidth: "0",
- borderRadius: "0",
- padding: "0",
- fontWeight: "inherit",
- color: "inherit",
- fontSize: "inherit",
- fontFamily: "inherit",
- lineHeight: "inherit",
+ 'pre code': {
+ backgroundColor: 'transparent',
+ borderWidth: '0',
+ borderRadius: '0',
+ padding: '0',
+ fontWeight: 'inherit',
+ color: 'inherit',
+ fontSize: 'inherit',
+ fontFamily: 'inherit',
+ lineHeight: 'inherit'
},
- "pre code::before": {
- content: "none",
+ 'pre code::before': {
+ content: 'none'
},
- "pre code::after": {
- content: "none",
+ 'pre code::after': {
+ content: 'none'
},
table: {
- width: "100%",
- tableLayout: "auto",
- textAlign: "left",
+ width: '100%',
+ tableLayout: 'auto',
+ textAlign: 'left',
marginTop: em(32, 16),
- marginBottom: em(32, 16),
+ marginBottom: em(32, 16)
},
thead: {
- borderBottomWidth: "1px",
- borderBottomColor: "var(--tw-prose-th-borders)",
+ borderBottomWidth: '1px',
+ borderBottomColor: 'var(--tw-prose-th-borders)'
},
- "thead th": {
- color: "var(--tw-prose-headings)",
- fontWeight: "600",
- verticalAlign: "bottom",
+ 'thead th': {
+ color: 'var(--tw-prose-headings)',
+ fontWeight: '600',
+ verticalAlign: 'bottom'
},
- "tbody tr": {
- borderBottomWidth: "1px",
- borderBottomColor: "var(--tw-prose-td-borders)",
+ 'tbody tr': {
+ borderBottomWidth: '1px',
+ borderBottomColor: 'var(--tw-prose-td-borders)'
},
- "tbody tr:last-child": {
- borderBottomWidth: "0",
+ 'tbody tr:last-child': {
+ borderBottomWidth: '0'
},
- "tbody td": {
- verticalAlign: "baseline",
+ 'tbody td': {
+ verticalAlign: 'baseline'
},
tfoot: {
- borderTopWidth: "1px",
- borderTopColor: "var(--tw-prose-th-borders)",
- },
- "tfoot td": {
- verticalAlign: "top",
+ borderTopWidth: '1px',
+ borderTopColor: 'var(--tw-prose-th-borders)'
},
+ 'tfoot td': {
+ verticalAlign: 'top'
+ }
},
defaultModifiers.gray.css,
- ...defaultModifiers.base.css,
- ],
+ ...defaultModifiers.base.css
+ ]
},
- ...defaultModifiers,
- }),
+ ...defaultModifiers
+ })
},
plugins: [
plugin(function ({ addUtilities }) {
addUtilities({
- ".no-scrollbar::-webkit-scrollbar": {
- display: "none",
- },
- ".no-scrollbar": {
- "-ms-overflow-style": "none",
- "scrollbar-width": "none",
+ '.no-scrollbar::-webkit-scrollbar': {
+ display: 'none'
},
+ '.no-scrollbar': {
+ '-ms-overflow-style': 'none',
+ 'scrollbar-width': 'none'
+ }
});
}),
- require("@tailwindcss/typography"),
- ],
+ require('@tailwindcss/typography')
+ ]
};
diff --git a/helm-charts/infisical/Chart.yaml b/helm-charts/infisical/Chart.yaml
index e5656d128..fe65e3b11 100644
--- a/helm-charts/infisical/Chart.yaml
+++ b/helm-charts/infisical/Chart.yaml
@@ -7,10 +7,10 @@ type: application
# This is the chart version. This version number should be incremented each time you make changes
# to the chart and its templates, including the app version.
# Versions are expected to follow Semantic Versioning (https://semver.org/)
-version: 0.1.7
+version: 0.1.13
# This is the version number of the application being deployed. This version number should be
# incremented each time you make changes to the application. Versions are not expected to
# follow Semantic Versioning. They should reflect the version the application is using.
# It is recommended to use it with quotes.
-appVersion: "1.16.0"
+appVersion: "1.17.0"
diff --git a/helm-charts/infisical/templates/_helpers.tpl b/helm-charts/infisical/templates/_helpers.tpl
index 32bc9b02b..d0ceb0641 100644
--- a/helm-charts/infisical/templates/_helpers.tpl
+++ b/helm-charts/infisical/templates/_helpers.tpl
@@ -121,11 +121,8 @@ Create the mongodb connection string.
{{- $user := "root" -}}
{{- $pass := "root" -}}
{{- $connectionString := printf "mongodb://%s:%s@%s:%d/" $user $pass $host $port -}}
-{{- if .Values.mongodbConnection.standardConnectionStringFormat -}}
-{{- $connectionString = .Values.mongodbConnection.standardConnectionStringFormat -}}
-{{- end -}}
-{{- if .Values.mongodbConnection.dnsSeedListConnectionFormat -}}
-{{- $connectionString = .Values.mongodbConnection.dnsSeedListConnectionFormat -}}
+{{- if .Values.mongodbConnection.externalMongoDBConnectionString -}}
+{{- $connectionString = .Values.mongodbConnection.externalMongoDBConnectionString -}}
{{- end -}}
{{- printf "%s" $connectionString -}}
{{- end -}}
diff --git a/helm-charts/infisical/templates/backend-deployment.yaml b/helm-charts/infisical/templates/backend-deployment.yaml
index 7e4b922a2..7a366d390 100644
--- a/helm-charts/infisical/templates/backend-deployment.yaml
+++ b/helm-charts/infisical/templates/backend-deployment.yaml
@@ -2,6 +2,10 @@ apiVersion: apps/v1
kind: Deployment
metadata:
name: {{ include "infisical.backend.fullname" . }}
+ {{- with .Values.backend.deploymentAnnotations }}
+ annotations:
+ {{- toYaml . | nindent 8 }}
+ {{- end }}
labels:
{{- include "infisical.backend.labels" . | nindent 4 }}
spec:
@@ -22,6 +26,12 @@ spec:
- name: {{ template "infisical.name" . }}-{{ .Values.backend.name }}
image: "{{ .Values.backend.image.repository }}:{{ .Values.backend.image.tag | default .Chart.AppVersion }}"
imagePullPolicy: {{ .Values.backend.image.pullPolicy }}
+ readinessProbe:
+ httpGet:
+ path: /api/status
+ port: 4000
+ initialDelaySeconds: 10
+ periodSeconds: 10
ports:
- containerPort: 4000
{{- if .Values.backend.kubeSecretRef }}
@@ -32,6 +42,7 @@ spec:
env:
- name: MONGO_URL
value: {{ include "infisical.mongodb.connectionString" . | quote }}
+ {{- if .Values.backendEnvironmentVariables }}
{{- range $key, $value := .Values.backendEnvironmentVariables }}
{{- if $value | quote | eq "MUST_REPLACE" }}
{{ fail "Environment variables are not set. Please set all environment variables to continue." }}
@@ -39,6 +50,7 @@ spec:
- name: {{ $key }}
value: {{ quote $value }}
{{- end }}
+ {{- end }}
---
apiVersion: v1
diff --git a/helm-charts/infisical/templates/frontend-deployment.yaml b/helm-charts/infisical/templates/frontend-deployment.yaml
index de6490595..d396e5628 100644
--- a/helm-charts/infisical/templates/frontend-deployment.yaml
+++ b/helm-charts/infisical/templates/frontend-deployment.yaml
@@ -2,6 +2,10 @@ apiVersion: apps/v1
kind: Deployment
metadata:
name: {{ include "infisical.frontend.fullname" . }}
+ {{- with .Values.frontend.deploymentAnnotations }}
+ annotations:
+ {{- toYaml . | nindent 8 }}
+ {{- end }}
labels:
{{- include "infisical.frontend.labels" . | nindent 4 }}
spec:
@@ -22,6 +26,12 @@ spec:
- name: {{ template "infisical.name" . }}-{{ .Values.frontend.name }}
image: "{{ .Values.frontend.image.repository }}:{{ .Values.frontend.image.tag | default .Chart.AppVersion }}"
imagePullPolicy: {{ .Values.frontend.image.pullPolicy }}
+ readinessProbe:
+ httpGet:
+ path: /
+ port: 3000
+ initialDelaySeconds: 10
+ periodSeconds: 10
{{- if .Values.frontend.kubeSecretRef }}
envFrom:
- secretRef:
diff --git a/helm-charts/infisical/values.yaml b/helm-charts/infisical/values.yaml
index 7661be064..9ed7ef9dc 100644
--- a/helm-charts/infisical/values.yaml
+++ b/helm-charts/infisical/values.yaml
@@ -8,12 +8,13 @@ nameOverride: ""
frontend:
name: frontend
podAnnotations: {}
- replicaCount: 1
+ deploymentAnnotations: {}
+ replicaCount: 2
image:
repository: infisical/frontend
pullPolicy: IfNotPresent
tag: "latest"
- # kubeSecretRef: some-kube-secret-name
+ # kubeSecretRef: some-kube-secret-name
service:
# type of the frontend service
type: ClusterIP
@@ -24,12 +25,13 @@ frontend:
backend:
name: backend
podAnnotations: {}
- replicaCount: 1
+ deploymentAnnotations: {}
+ replicaCount: 2
image:
repository: infisical/backend
pullPolicy: IfNotPresent
tag: "latest"
- # kubeSecretRef: some-kube-secret-name
+ # kubeSecretRef: some-kube-secret-name
service:
annotations: {}
@@ -44,11 +46,10 @@ mongodb:
annotations: {}
# By default the backend will be connected to a Mongo instance in the cluster.
-# However, it is recommended to add a Mongo Cloud connection string as the DB instance in the cluster does not have persistence yet.
+# However, it is recommended to add a managed document DB connection string because the DB instance in the cluster does not have persistence yet ( data will be deleted on next deploy).
# Learn about connection string type here https://www.mongodb.com/docs/manual/reference/connection-string/
mongodbConnection: {}
-# standardConnectionStringFormat: <>
-# dnsSeedListConnectionFormat: <>
+ # externalMongoDBConnectionString: <>
ingress:
enabled: true
@@ -82,24 +83,6 @@ ingress:
# hosts:
# - k8.infisical.com
-###
-### YOU MUST FILL IN ALL SECRETS BELOW
-###
-backendEnvironmentVariables:
- # Required keys for platform encryption/decryption ops. Replace with nacl sk keys
- ENCRYPTION_KEY: MUST_REPLACE
-
- # JWT
- # Required secrets to sign JWT tokens
- JWT_SIGNUP_SECRET: MUST_REPLACE
- JWT_REFRESH_SECRET: MUST_REPLACE
- JWT_AUTH_SECRET: MUST_REPLACE
-
- # Mail/SMTP
- # Required to send emails
- SMTP_HOST: MUST_REPLACE
- SMTP_NAME: MUST_REPLACE
- SMTP_USERNAME: MUST_REPLACE
- SMTP_PASSWORD: MUST_REPLACE
-
frontendEnvironmentVariables: {}
+
+backendEnvironmentVariables: {}
diff --git a/i18n/README.es.md b/i18n/README.es.md
new file mode 100644
index 000000000..0139bdd65
--- /dev/null
+++ b/i18n/README.es.md
@@ -0,0 +1,346 @@
+
+
+
+
+
+
Herramienta simple de código abierto cifrado de extremo a extremo (E2EE) para gestionar secretos y configuraciones dentro de su equipo e infraestructura.
+
+
+
+
+
+
+

+
+**[Infisical](https://infisical.com)** es una herramienta de código abierto que busca ayudar a equipos a gestionar y sincronizar secretos y configuraciones dentro de su flujo de trabajo e infraestructura. Está diseñada para ser simple y solo tomar minutos para implementar.
+
+- **[Tablero fácil de usar](https://infisical.com/docs/getting-started/dashboard/project)** para gestionar los secretos y configuraciones de su equipo dentro de proyectos
+- **[Infraestructura de lenguaje común (CLI) independiente del lenguaje](https://infisical.com/docs/cli/overview)** que extrae e inyecta secretos y configuraciones a su flujo de trabajo local
+- **[Control total sobre sus datos:](https://infisical.com/docs/self-hosting/overview)** alójelos en cualquier infraestructura
+- **Navega múltiples entornos** por proyecto (ej. Desarrollo, evaluación, producción, etc.)
+- **Mando manual** para secretos y configuraciones
+- **[Integraciones](https://infisical.com/docs/integrations/overview)** con CI/CD e infraestructura de producción
+- **[API de Infisical:](https://infisical.com/docs/api-reference/overview/introduction)** administra secretos a través de solicitudes HTTPS a la plataforma
+- **[Control de versiones ](https://infisical.com/docs/getting-started/dashboard/versioning)** para ver el historial de cambios de cualquier secreto
+- **[Registros de actividad](https://infisical.com/docs/getting-started/dashboard/audit-logs)** para documentar cada acción tomada en el proyecto
+- **[Recuperación de secretos en el momento](https://infisical.com/docs/getting-started/dashboard/pit-recovery)** para retroceder a cualquier instancia de alguno
+- 🔜 **Implementación de 1 clic** para Digital Ocean y Heroku
+- 🔜 **Autenticación/Autorización** para proyectos (controles de lectura/escritura próximamente)
+- 🔜 **Rotación automática de secretos**
+- 🔜 **Autenticación de dos factores**
+- 🔜 **Integraciones con Slack y MS Teams**
+
+Y más.
+
+## 🚀 Para empezar
+
+Para empezar rápidamente visita nuestra [guía de inicio](https://infisical.com/docs/getting-started/introduction).
+
+
+
+
+
+
+
+## 🔥 ¿En qué es bueno?
+
+Infisical hace la gestión de secretos simple y está cifrada de extremo a extremo de manera predeterminada. Tenemos la misión de hacerla más accesible a todos los desarrolladores,
no solo los equipos de seguridad.
+
+Según un [reporte](https://www.ekransystem.com/en/blog/secrets-management), solo el 10% de las organizaciones utilizan soluciones para gestionar secretos a pesar de que todas usan secretos digitales en cierta medida.
+
+Si está interesado en la eficiencia y la seguridad, Infisical es para ti.
+
+Actualmente estamos trabajando duro para hacer Infisical más extenso. ¿Necesitas una integración o quieres una nueva función? Siente libre de [crear un issue](https://github.com/Infisical/infisical/issues) o [contribuir](https://infisical.com/docs/contributing/overview) directamente al repositorio.
+
+## 🌱 Contribuir
+
+Sea de manera pequeña o grande, nos encantan las contribuciones ❤️ Cheque nuestra guía de [cómo empezar](https://infisical.com/docs/contributing/overview).
+
+¿No está seguro de dónde empezar? Usted puede:
+
+- ¡[Agendar una sesión gratis, sin presión con uno de nuestros integrantes](mailto:tony@infisical.com?subject=Pairing%20session&body=I'd%20like%20to%20do%20a%20pairing%20session!)! (inglés)
+- Unesé a nuestro
Slack y preguntenos ahí (inglés)
+
+## 💚 Soporte y comunidad
+
+- [Slack](https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g) (Para discusiones en vivo con la comunidad y el equipo de Infisical)
+- [GitHub Discussions](https://github.com/Infisical/infisical/discussions) (Para ayudar en construir y profundizar conversaciones acerca de funciones)
+- [GitHub Issues](https://github.com/Infisical/infisical-cli/issues) (Para cualquier bug o error que encuentre usando Infisical)
+- [Twitter](https://twitter.com/infisical) (Obtén las noticias rápidamente)
+
+## 🐥 Estatus
+
+- [x] Alpha público: Cualquiera puede registrarse en [infisical.com](https://infisical.com) pero ténganos paciencia, hay problemas y apenas estamos comenzando.
+- [ ] Beta público: Suficientemente estable para la mayoría de los casos de uso no empresariales.
+- [ ] Público: Listo para producción.
+
+Estamos actualmente en Alpha público.
+
+## 🔌 Integraciones
+
+Actualmente estamos sentando bases y construyendo [integraciones](https://infisical.com/docs/integrations/overview) para que los secretos se puedan sincronizar en todas partes. ¡Cualquier ayuda es bienvenida! :)
+
+
+
+ | Plataformas |
+ Marcos |
+
+
+
+
+
+
+
+ |
+
+ ✔️ Docker
+
+ |
+
+
+ ✔️ Docker Compose
+
+ |
+
+
+ ✔️ Heroku
+
+ |
+
+
+ |
+
+ ✔️ Vercel
+
+ |
+
+
+ ✔️ Kubernetes
+
+ |
+
+ 🔜 Fly.io
+ |
+
+
+ |
+ 🔜 AWS
+ |
+
+
+ ✔️ GitHub Actions
+
+ |
+
+ 🔜 Railway
+ |
+
+
+ |
+ 🔜 GCP
+ |
+
+ 🔜 GitLab CI/CD (https://github.com/Infisical/infisical/issues/134)
+ |
+
+ 🔜 CircleCI (https://github.com/Infisical/infisical/issues/91)
+ |
+
+
+ |
+ 🔜 Jenkins
+ |
+
+ 🔜 Digital Ocean
+ |
+
+ 🔜 Azure
+ |
+
+
+ |
+ 🔜 TravisCI
+ |
+
+
+ ✔️ Netlify
+
+ |
+
+ 🔜 Railway
+ |
+
+
+ |
+ 🔜 Bitbucket
+ |
+
+ 🔜 Supabase
+ |
+
+ 🔜 Render (https://github.com/Infisical/infisical/issues/132)
+ |
+
+
+
+
+ |
+
+
+
+
+ |
+
+
+
+## 🏘 Código abierto vs pagado
+
+Este repositorio es enteramente licenciado con MIT, con la excepción del directorio `ee` que contendrá funciones empresariales premium que requerirán una licencia de Infisical en el futuro. Actualmente estamos enfocados en desarrollar primero ofertas no empresariales que deberían adaptarse a la mayoría de los casos de uso.
+
+## 🛡 Seguridad
+
+¿Quiere reportar alguna vulnerabilidad en seguridad? Por favor, no lo publique en Github issues. En su lugar consulte nuestro archivo de [SECURITY.md](./SECURITY.md).
+
+## 🚨 Manténgase al tanto
+
+Infisical se lanzó oficialmente como v.1.0 el 21 de noviembre de 2022. Hay muchas funciones nuevas que llegan con mucha frecuencia. Mire los **lanzamientos** de este repositorio para recibir notificaciones sobre futuras actualizaciones:
+
+
+
+## 🦸 Contribuyentes
+
+[//]: contributor-faces
+
+
+
+
+
+

+
+## 🌎 Traducciones
+
+Infisical está actualmente disponible en inglés, coreano, francés y portugués (Brasil). ¡Ayúdanos a traducir Infisical a tu idioma!
+
+Puedes encontrar toda la información en [este issue](https://github.com/Infisical/infisical/issues/181).
\ No newline at end of file
diff --git a/i18n/README.ko.md b/i18n/README.ko.md
new file mode 100644
index 000000000..c56862b71
--- /dev/null
+++ b/i18n/README.ko.md
@@ -0,0 +1,347 @@
+
+
+
+
+
+
팀 멤버와 인프라 전반에서 시크릿과 설정을 관리할 수 있는 간단한 오픈소스 E2EE 툴.
+
+
+
+
+
+
+

+
+**[Infisical](https://infisical.com)** 은 팀이 개발 워크플로우와 인프라 전반에서 시크릿과 구성을 관리하고 동기화할 수 있도록 도와주는 오픈소스 E2EE 툴입니다. 몇 분 안에 빠르게 시작할 수 있도록 설계되었어요.
+
+- 여러 프로젝트에서 팀의 시크릿과 구성을 관리할 수 있게 해주는 사용자 친화적 **[대시보드](https://infisical.com/docs/getting-started/dashboard/project)**
+- 어떤 언어든지 상관없이 시크릿과 구성을 로컬 워크플로우에 가져와주는 **[CLI](https://infisical.com/docs/cli/overview)**
+- **[직접 호스팅](https://infisical.com/docs/self-hosting/overview)** - 어떤 인프라든지 직접 호스팅할 수 있어요
+- 한 프로젝트에 **여러 환경**을 사용하세요 (예: development, staging, production, etc)
+- 시크릿과 구성에 대한 **개인 오버라이드**
+- CI/CD, 프로덕션 인프라와의 높은 **[연동성](https://infisical.com/docs/integrations/overview)**
+- **[Infisical API](https://infisical.com/docs/api-reference/overview/introduction)** - HTTPS 요청을 통해 시크릿을 관리하세요
+- **[시크릿 버전 기록](https://infisical.com/docs/getting-started/dashboard/versioning)** 을 통해 어떤 시크릿이든 버전 기록을 볼 수 있어요
+- **[활동 로그](https://infisical.com/docs/getting-started/dashboard/audit-logs)** 를 통해 프로젝트의 모든 활동을 볼 수 있어요
+- **[지정 시점으로 시크릿 복구](https://infisical.com/docs/getting-started/dashboard/pit-recovery)** 를 사용해 특정한 시점으로 시크릿을 복구할 수 있어요
+- 🔜 Digital Ocean 및 Heroku로 **원클릭 배포**
+- 🔜 **프로젝트 별 인증** (read/write 컨트롤도 곧 찾아옵니다)
+- 🔜 **자동 시크릿 로테이션**
+- 🔜 **2단계 인증**
+- 🔜 **Slack & MS Teams** 연동
+
+그 외에 더 많은 기능들이 있어요.
+
+## 🚀 시작하기
+
+[빠른 시작 가이드](https://infisical.com/docs/getting-started/introduction)에 방문하세요.
+
+
+
+
+
+
+
+## 🔥 이게 뭔데요? 좋은건가요?
+
+Infisical은 시크릿 관리를 간단하게, 그리고 E2EE를 사용하여 안전하게 해줍니다. 보안 팀뿐만 아니라, **모든 개발자들이 사용할 수 있도록** 하는게 저희의 목표에요.
+
+
+[보고서](https://www.ekransystem.com/en/blog/secrets-management)에 따르면, 오직 10%의 조직이 디지털 시크릿 관리 솔루션을 사용한다고 해요.
+
+효율성과 보안을 따진다면, Infisical을 사용해보세요.
+
+저희는 Infisical을 더 좋게 만들기 위해 노력하고 있어요. 새로운 연동이나 기능이 필요한가요? [이슈](https://github.com/Infisical/infisical/issues)를 만들거나 [직접 기여](https://infisical.com/docs/contributing/overview)할 수 있어요.
+
+## 🌱 기여하기
+
+작든 크든, 우리는 모든 기여를 환영합니다 ❤️ [기여하는 방법](https://infisical.com/docs/contributing/overview)에 대해 자세히 알아보세요.
+
+어디서부터 시작할지 모르겠나요? 그렇다면:
+
+- [Infisical 팀원 한명과 페어링 세션을 해보세요](mailto:tony@infisical.com?subject=Pairing%20session&body=I'd%20like%20to%20do%20a%20pairing%20session!)!
+-
Slack에 참가해서, 아무 질문이나 물어보세요.
+
+## 💚 커뮤니티와 지원
+
+- [Slack](https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g) (커뮤니티 그리고 Infisical 팀원과 소통하는 곳)
+- [GitHub Discussions](https://github.com/Infisical/infisical/discussions) (기능에 대한 깊은 토론을 나누기 위한 곳)
+- [GitHub Issues](https://github.com/Infisical/infisical-cli/issues) (Infisical을 사용하던 중 발생한 오류에 대해 제보하는 곳)
+- [Twitter](https://twitter.com/infisical) (Infisical에 대한 소식을 빠르게 받아보세요)
+
+## 🐥 상태
+
+- [x] 공개 알파: [infisical.com](https://infisical.com)에서 아무나 가입할 수 있지만, 여러가지 결함이 있을 수 있어요.
+- [ ] 공개 베타: 일반적인 사용에는 문제 없음
+- [ ] 공개: 프로덕션에 사용할 준비 완료
+
+Infisical은 현재 공개 알파 상태에요.
+
+## 🔌 연동
+
+저희는 시크릿을 사용할 수 있는 여러가지 [연동](https://infisical.com/docs/integrations/overview)을 개발하고 있어요. 모든 도움은 환영해요! :)
+
+
+
+ | 플랫폼 |
+ 프레임워크 |
+
+
+
+
+
+
+
+ |
+
+ ✔️ Docker
+
+ |
+
+
+ ✔️ Docker Compose
+
+ |
+
+
+ ✔️ Heroku
+
+ |
+
+
+ |
+
+ ✔️ Vercel
+
+ |
+
+
+ ✔️ Kubernetes
+
+ |
+
+ 🔜 Fly.io
+ |
+
+
+ |
+ 🔜 AWS
+ |
+
+
+ ✔️ GitHub Actions
+
+ |
+
+ 🔜 Railway
+ |
+
+
+ |
+ 🔜 GCP
+ |
+
+ 🔜 GitLab CI/CD (https://github.com/Infisical/infisical/issues/134)
+ |
+
+ 🔜 CircleCI (https://github.com/Infisical/infisical/issues/91)
+ |
+
+
+ |
+ 🔜 Jenkins
+ |
+
+ 🔜 Digital Ocean
+ |
+
+ 🔜 Azure
+ |
+
+
+ |
+ 🔜 TravisCI
+ |
+
+
+ ✔️ Netlify
+
+ |
+
+ 🔜 Railway
+ |
+
+
+ |
+ 🔜 Bitbucket
+ |
+
+ 🔜 Supabase
+ |
+
+ 🔜 Render (https://github.com/Infisical/infisical/issues/132)
+ |
+
+
+
+
+ |
+
+
+
+
+ |
+
+
+
+## 🏘 오픈소스 vs 유료 버전
+
+이 저장소는 추후 유료 프리미엄 엔터프라이즈 기능들을 포함할 `ee` 폴더를 제외하고 모두 MIT 라이선스에요.
+
+## 🛡 보안
+
+보안 취약점을 발견했나요? GitHub 이슈에 올리지 마시고, [SECURITY.md](./SECURITY.md) 파일을 참고해주세요.
+
+## 🚨 최신 소식 받기
+
+Infisical은 2022년 11월 21일에 v1.0 버전을 출시했어요. 새로운 기능들이 자주 추가되니, 이 저장소의 **Releases**를 눈여겨봐주세요!
+
+
+
+## 🦸 기여자
+
+[//]: contributor-faces
+
+
+
+
+
+

+
+## 🌎 번역
+
+Infisical은 현재 영어, 한국어, 프랑스어, 포르투갈어 (브라질)로 번역되어 있어요. 당신의 언어로 Infisical을 번역하도록 도와주세요!
+
+[이 이슈](https://github.com/Infisical/infisical/issues/181)에서 번역에 관한 정보를 찾아볼 수 있어요.
diff --git a/i18n/README.tr.md b/i18n/README.tr.md
new file mode 100644
index 000000000..24daa8fc8
--- /dev/null
+++ b/i18n/README.tr.md
@@ -0,0 +1,335 @@
+
+
+
+
+
+
Açık kaynak kodlu, uçtan uca şifrelenmiş(E2EE), ekibiniz ile altyapınız arasında ortam değişkenlerini yönetmeniz ve senkronize etmeniz için basit bir araç.
+
+
+
+
+
+
+

+
+**[Infisical](https://infisical.com)** takımların geliştirme süreçleri ile altapıları arasında ortam değişkenlerini yönetmelerine ve senkronize etmelerine yardımcı olan açık kaynak kodlu, uçtan uca şifrelenmiş(E2EE) bir araçtır.
+Basit olması için tasarlandı, sadece birkaç dakika içerisinde harekete geçin.
+
+- **[Kullanıcı Dostu Gösterge Paneli](https://infisical.com/docs/getting-started/dashboard/project)** projeler arasında takımınızın ortam değişkenlerini yönetmenize yardımcı olur.
+- **[Dillerden Bağımsız CLI](https://infisical.com/docs/cli/overview)** - ortam değişkenlerini çeker ve yerel iş akışınıza enjekte eder.
+- **[Kontrol Sizde](https://infisical.com/docs/self-hosting/overview)** - herhangi bir altyapıda kendiniz hostlayarak verileriniz üzerinde tam kontrol sağlayın.
+- **Çoklu ortamlar arası gezinin** - herbir proje için ortamlarınız arasında geçiş sağlayın(ör. development, staging, production, vb.)
+- **Kişisel yada Paylaşılabilen** alan - ortam değişkenleriniz için.
+- **[Entegrasyonlar](https://infisical.com/docs/integrations/overview)** - CI/CD production altyapısı ile.
+- **[Infisical API](https://infisical.com/docs/api-reference/overview/introduction)** - HTTPS istekleri ile sırları yönetin.
+- **[Sırlar İçin Versiyon Kontrol](https://infisical.com/docs/getting-started/dashboard/versioning)** - herhangi bir sır için değişiklik geçmişini görüntüleyin.
+- **[Aktivite Günlükleri](https://infisical.com/docs/getting-started/dashboard/audit-logs)** - projedeki tüm değişikleri kayıt altına almak için.
+- **[Anında Geri Yükleme](https://infisical.com/docs/getting-started/dashboard/pit-recovery)** - sırlarınızın herhangi bir snapshotına geri yükleme yapmanız için.
+- 🔜 **Tek tıkla Deploy** edin, Digital Ocean ve Heroku'ya.
+- 🔜 **Kimlik Doğrulama/Yetkilendirme** projeleriniz için okuma/yazma kontrolleri (pek yakında)
+- 🔜 **Otomatik Sır Rotasyonu**
+- 🔜 **2 Faktör Kimlik Doğrulama**
+- 🔜 **Erişim Günlükleri**
+- 🔜 **Slack & MS Teams** entegrasyonları
+
+Ve daha fazlası.
+
+## 🚀 Hadi başlayalım
+
+Hızlıca başlamak için [başlangıç rehberimizi](https://infisical.com/docs/getting-started/introduction) ziyaret edin.
+
+
+
+
+
+
+
+## 🔥 Peki bunun nesi havalı?
+
+Infisical sır yönetimini varsayılan olarak uçtan uca şifreleyerek basitleştirir. Infisical'ı
sadece güvenlik takımları için değil tüm geliştiriciler için daha çok erişilebilir hale getirmek üzere görevdeyiz.
+
+2019'daki bir [rapora](https://www.ekransystem.com/en/blog/secrets-management) göre, dijital sırları kullanan kuruluşların sadece %10 kadarı sır yönetim çözümlerini kullanıyor.
+
+Eğer güvenlik ve verimliliğe önem veriyorsanız Infisical tam size göre.
+
+Infisical'ı daha yaygın hale getirmek için sıkı çalışıyoruz. İstediğiniz herhangi bir entegrasyon mu var yada yeni bir özellik mi istiyorsunuz? Lütfen [yeni bir issue oluşturun](https://github.com/Infisical/infisical/issues) yada repositoriye direkt [katkıda bulunun](https://infisical.com/docs/contributing/overview).
+
+## 🌱 Katkılar
+
+Büyük yada küçük farketmeksizin katkılara bayılıyoruz ❤️ Nasıl başlayacağınızı görmek için [başlangıç](https://infisical.com/docs/contributing/overview) rehberimize göz atın.
+
+Nereden başlayacağınızdan emin değil misiniz? O zaman;
+
+- [Ekip arkadaşlarımızdan biriyle ücretsiz, baskı içermeyen bir yönlendirme seansını rezerve edin](mailto:tony@infisical.com?subject=Pairing%20session&body=I'd%20like%20to%20do%20a%20pairing%20session!)!
+- Bizim
Slack'imize katılın, ve bize herhangi bir soru sorun.
+
+## 💚 Topluluk & Destek
+
+- [Slack](https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g) (Toplulukla ve Infisical team ile canlı tartışma için)
+- [GitHub Discussions](https://github.com/Infisical/infisical/discussions) (Özellikler hakkında daha derin tartışmalar oluşturma ve geliştirme konusunda yardım için)
+- [GitHub Issues](https://github.com/Infisical/infisical-cli/issues) (Infisical'ı kullanırken karşılaştığınız herhangi bir bug için)
+- [Twitter](https://twitter.com/infisical) (Haberleri kaçırmayın)
+
+## 🐥 Durum
+
+- [x] Public Alpha: Herkes [infisical.com](https://infisical.com) üzerinden katılabilir (ama üzerimize fazla gelmeyin), bazı karmaşalar söz konusu ve biz daha yeni başlıyoruz.
+- [ ] Public Beta: Kurumsal olmayan çoğu kullanım için yeterince kararlı.
+- [ ] Public: Production-ready.
+
+Şuan Public Alpha'dayız.
+
+## 🔌 Entegrasyonlar
+
+Şu anda sırların herhangi bir yerde senkron olabilmesi için [entegrasyonlar](https://infisical.com/docs/integrations/overview) üzerinde sıkı çalışıyoruz. Her türlü yardımı gözlüyoruz! :)
+
+
+
+ | Platforms |
+ Frameworks |
+
+
+
+
+
+
+
+ |
+
+ ✔️ Docker
+
+ |
+
+
+ ✔️ Docker Compose
+
+ |
+
+
+ ✔️ Heroku
+
+ |
+
+
+ |
+
+ ✔️ Vercel
+
+ |
+
+
+ ✔️ Kubernetes
+
+ |
+
+ 🔜 Fly.io
+ |
+
+
+ |
+ 🔜 AWS
+ |
+
+
+ ✔️ GitHub Actions
+
+ |
+
+ 🔜 Railway
+ |
+
+
+ |
+ 🔜 GCP
+ |
+
+ 🔜 GitLab CI/CD (https://github.com/Infisical/infisical/issues/134)
+ |
+
+ 🔜 CircleCI (https://github.com/Infisical/infisical/issues/91)
+ |
+
+
+ |
+ 🔜 Jenkins
+ |
+
+ 🔜 Digital Ocean
+ |
+
+ 🔜 Azure
+ |
+
+
+ |
+ 🔜 TravisCI
+ |
+
+
+ ✔️ Netlify
+
+ |
+
+ 🔜 Railway
+ |
+
+
+ |
+ 🔜 Bitbucket
+ |
+
+ 🔜 Supabase
+ |
+
+ 🔜 Render (https://github.com/Infisical/infisical/issues/132)
+ |
+
+
+
+
+ |
+
+
+
+
+ |
+
+
+
+## 🏘 Açık kaynak mı yoksa ücretlimi
+
+Bu repository premium kurumsal çözümler içeren, gelecekte Infisical lisansı gerektirecek `ee` dizini hariç tamamen MIT lisansı altındadır. Şu anda öncelikli olarak kurumsal olmayan ancak bir çok kullanım senaryosuna çözüm sunacak teklifler üzerine yoğunlaşıyoruz.
+
+## 🛡 Güvenlik
+
+Bir güvenlik açığını bildirmek mi istiyorsunuz? Lütfen Github'da herhangi bir şekilde paylaşmayın. Bunun yerine, [SECURITY.md](./SECURITY.md) dosyamıza yönlendirin.
+
+## 🚨 Güncel kalın
+
+Infisical 21 Kasım 2022 de v.1.0 resmi olarak olarak yayınlandı. Buna rağmen yeni özellikler hızlı bir şekilde gelmekte. Gelecekteki güncellemeler hakkında bilgilenmek için, bu repositorynin **releases** bölümünü takipte kalın:
+
+
+
+## 🦸 Katkıda bulunanlar
+
+[//]: contributor-faces
+
+
+
+
+
+

+
+## 🌎 Çeviriler
+
+Infisical şu anda İngilizce, Korece ve Türkçe dillerinde mevcut. Infisical' ı dilinize çevirmemize yardım edin!
+
+[Bu issue](https://github.com/Infisical/infisical/issues/181)'dan gerekli tüm bilgilere erişebilirsiniz.