mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-09-22 13:39:35 +00:00
feat: added tailwindcss with prettier tailwind support
This commit is contained in:
=
@@ -3,5 +3,8 @@
|
|||||||
"printWidth": 100,
|
"printWidth": 100,
|
||||||
"trailingComma": "none",
|
"trailingComma": "none",
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
"semi": true
|
"semi": true,
|
||||||
|
"plugins": ["prettier-plugin-tailwindcss"],
|
||||||
|
"tailwindStylesheet": "./src/index.css",
|
||||||
|
"tailwindFunctions": ["clsx", "twMerge"]
|
||||||
}
|
}
|
||||||
|
|||||||
1259
frontend-v2/package-lock.json
generated
1259
frontend-v2/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,17 +12,21 @@
|
|||||||
"type:check": "tsc --project tsconfig.json --noEmit"
|
"type:check": "tsc --project tsconfig.json --noEmit"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fontsource/inter": "^5.1.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"tailwind-merge": "^2.5.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/eslintrc": "^3.2.0",
|
"@eslint/eslintrc": "^3.2.0",
|
||||||
"@eslint/js": "^9.15.0",
|
"@eslint/js": "^9.15.0",
|
||||||
"@kesills/eslint-config-airbnb-typescript": "^20.0.0",
|
"@kesills/eslint-config-airbnb-typescript": "^20.0.0",
|
||||||
"@stylistic/eslint-plugin": "^2.12.1",
|
"@stylistic/eslint-plugin": "^2.12.1",
|
||||||
|
"@tailwindcss/typography": "^0.5.15",
|
||||||
"@types/react": "^18.3.12",
|
"@types/react": "^18.3.12",
|
||||||
"@types/react-dom": "^18.3.1",
|
"@types/react-dom": "^18.3.1",
|
||||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
"eslint": "^8.57.1",
|
"eslint": "^8.57.1",
|
||||||
"eslint-config-airbnb": "^19.0.4",
|
"eslint-config-airbnb": "^19.0.4",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
@@ -33,7 +37,10 @@
|
|||||||
"eslint-plugin-react-refresh": "^0.4.14",
|
"eslint-plugin-react-refresh": "^0.4.14",
|
||||||
"eslint-plugin-simple-import-sort": "^12.1.1",
|
"eslint-plugin-simple-import-sort": "^12.1.1",
|
||||||
"globals": "^15.12.0",
|
"globals": "^15.12.0",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
"prettier": "3.4.2",
|
"prettier": "3.4.2",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.6.9",
|
||||||
|
"tailwindcss": "^3.4.16",
|
||||||
"typescript": "~5.6.2",
|
"typescript": "~5.6.2",
|
||||||
"typescript-eslint": "^8.15.0",
|
"typescript-eslint": "^8.15.0",
|
||||||
"vite": "^6.0.1"
|
"vite": "^6.0.1"
|
||||||
|
|||||||
6
frontend-v2/postcss.config.js
Normal file
6
frontend-v2/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
export const App = () => {
|
export const App = () => {
|
||||||
return <h1>Hello World</h1>;
|
return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,68 +1,193 @@
|
|||||||
|
@import "@fontsource/inter/400.css";
|
||||||
|
@import "@fontsource/inter/500.css";
|
||||||
|
@import "@fontsource/inter/700.css";
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
|
||||||
|
html {
|
||||||
|
@apply overflow-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
--toastify-color-dark: theme(colors.mineshaft.700);
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.Toastify__toast {
|
||||||
font-weight: 500;
|
@apply rounded-md;
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
.Toastify__toast-body {
|
||||||
margin: 0;
|
@apply items-start;
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.Toastify__toast-icon {
|
||||||
font-size: 3.2em;
|
@apply w-4 pt-1;
|
||||||
line-height: 1.1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
.rdp-day,
|
||||||
border-radius: 8px;
|
.rdp-nav_button {
|
||||||
border: 1px solid transparent;
|
@apply rounded-md hover:text-mineshaft-500;
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
.rdp-button:hover:not([disabled]):not(.rdp-day_selected),
|
||||||
:root {
|
.rdp-nav_button:hover {
|
||||||
color: #213547;
|
@apply bg-primary;
|
||||||
background-color: #ffffff;
|
}
|
||||||
|
|
||||||
|
.rdp-day_today {
|
||||||
|
@apply bg-primary/50 text-mineshaft-500 hover:bg-primary-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.flex-0 {
|
||||||
|
flex: 0;
|
||||||
}
|
}
|
||||||
a:hover {
|
.flex-2 {
|
||||||
color: #747bff;
|
flex-grow: 2;
|
||||||
}
|
}
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
.flex-3 {
|
||||||
|
flex-grow: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-table-row {
|
||||||
|
width: 1%;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-inherit {
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-inherit {
|
||||||
|
height: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.secret-table {
|
||||||
|
@apply w-full bg-mineshaft-800 text-left text-bunker-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* padding except for comment column */
|
||||||
|
.secret-table th {
|
||||||
|
@apply py-2 px-4 font-medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret-table td {
|
||||||
|
@apply py-1 px-1 pr-2 text-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret-table th:not(:last-child),
|
||||||
|
.secret-table td:not(:last-child) {
|
||||||
|
@apply border-r border-mineshaft-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret-table tr {
|
||||||
|
@apply border-b border-mineshaft-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb::after,
|
||||||
|
.breadcrumb::before {
|
||||||
|
content: "";
|
||||||
|
height: 60%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
@apply bg-mineshaft-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb:hover::before {
|
||||||
|
@apply bg-mineshaft-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb:hover::after {
|
||||||
|
@apply bg-mineshaft-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb::after {
|
||||||
|
left: 4px;
|
||||||
|
bottom: -2.5px;
|
||||||
|
transform: skew(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb::before {
|
||||||
|
left: 4px;
|
||||||
|
top: -2.5px;
|
||||||
|
transform: skew(30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 0.25rem;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: gray transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .bar {
|
||||||
|
@apply bg-primary-400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tags-conic-bg {
|
||||||
|
background: conic-gradient(
|
||||||
|
rgb(235, 87, 87),
|
||||||
|
rgb(242, 201, 76),
|
||||||
|
rgb(76, 183, 130),
|
||||||
|
rgb(78, 167, 252),
|
||||||
|
rgb(250, 96, 122)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-line::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -16px;
|
||||||
|
top: 1px;
|
||||||
|
bottom: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 50%;
|
||||||
|
background-color: #cbd5e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-line::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -16px;
|
||||||
|
top: 50%;
|
||||||
|
width: 12px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #cbd5e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-tags {
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: all 0.2s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.hide-tags {
|
||||||
|
transform: translateY(-20px);
|
||||||
|
transition: all 0.2s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-hex-input {
|
||||||
|
transform: translateY(-33px);
|
||||||
|
transition: all 0.2s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.hide-hex-input {
|
||||||
|
transform: translateY(20px);
|
||||||
|
transition: all 0.2s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|||||||
576
frontend-v2/tailwind.config.js
Normal file
576
frontend-v2/tailwind.config.js
Normal file
@@ -0,0 +1,576 @@
|
|||||||
|
const colors = require("tailwindcss/colors");
|
||||||
|
const round = (num) =>
|
||||||
|
num
|
||||||
|
.toFixed(7)
|
||||||
|
.replace(/(\.[0-9]+?)0+$/, "$1")
|
||||||
|
.replace(/\.0$/, "");
|
||||||
|
const em = (px, base) => `${round(px / base)}em`;
|
||||||
|
|
||||||
|
const plugin = require("tailwindcss/plugin");
|
||||||
|
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
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: "#fffff5",
|
||||||
|
100: "#fcfce8",
|
||||||
|
200: "#f8faca",
|
||||||
|
300: "#f4f7ab",
|
||||||
|
400: "#ecf26d",
|
||||||
|
500: "#e0ed34",
|
||||||
|
600: "#c2d62b",
|
||||||
|
700: "#97b31d",
|
||||||
|
800: "#708f13",
|
||||||
|
900: "#4d6b0b",
|
||||||
|
DEFAULT: "#e0ed34"
|
||||||
|
},
|
||||||
|
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"
|
||||||
|
},
|
||||||
|
chicago: {
|
||||||
|
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"
|
||||||
|
},
|
||||||
|
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"
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
50: "#fef6f5",
|
||||||
|
100: "#fdedec",
|
||||||
|
200: "#f9d2ce",
|
||||||
|
300: "#f5b7b1",
|
||||||
|
400: "#ee8277",
|
||||||
|
500: "#e74c3c",
|
||||||
|
600: "#d04436",
|
||||||
|
700: "#ad392d",
|
||||||
|
800: "#8b2e24",
|
||||||
|
900: "#71251d",
|
||||||
|
DEFAULT: "#e74c3c"
|
||||||
|
},
|
||||||
|
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"
|
||||||
|
},
|
||||||
|
blue: {
|
||||||
|
50: "#f2f8ff",
|
||||||
|
100: "#e6f1ff",
|
||||||
|
200: "#bfdbff",
|
||||||
|
300: "#99c5ff",
|
||||||
|
400: "#4d9aff",
|
||||||
|
500: "#006eff",
|
||||||
|
600: "#0063e6",
|
||||||
|
700: "#0053bf",
|
||||||
|
800: "#004299",
|
||||||
|
900: "#00367d"
|
||||||
|
},
|
||||||
|
darkblue: {
|
||||||
|
50: "#f2f4f7",
|
||||||
|
100: "#e6e8f0",
|
||||||
|
200: "#bfc6d9",
|
||||||
|
300: "#99a3c3",
|
||||||
|
400: "#4d5f95",
|
||||||
|
500: "#001a68",
|
||||||
|
600: "#00175e",
|
||||||
|
700: "#00144e",
|
||||||
|
800: "#00103e",
|
||||||
|
900: "#000d33"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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)" }
|
||||||
|
},
|
||||||
|
// REQUIRED BY DESIGN COMPONENT
|
||||||
|
// MODAL
|
||||||
|
fadeIn: {
|
||||||
|
"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)" }
|
||||||
|
},
|
||||||
|
bounce: {
|
||||||
|
"0%": { transform: "translateY(-90%)" },
|
||||||
|
"100%": { transform: "translateY(-100%)" }
|
||||||
|
},
|
||||||
|
wiggle: {
|
||||||
|
"0%, 100%": { transform: "rotate(-3deg)" },
|
||||||
|
"50%": { transform: "rotate(3deg)" }
|
||||||
|
},
|
||||||
|
ping: {
|
||||||
|
"75%, 100%": {
|
||||||
|
transform: "scale(2)",
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
popup: {
|
||||||
|
"0%": {
|
||||||
|
transform: "scale(0.2)",
|
||||||
|
opacity: 0
|
||||||
|
// transform: "translateY(120%)",
|
||||||
|
},
|
||||||
|
"100%": {
|
||||||
|
transform: "scale(1)",
|
||||||
|
opacity: 1
|
||||||
|
// transform: "translateY(100%)",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
popright: {
|
||||||
|
"0%": {
|
||||||
|
transform: "translateX(-100%)"
|
||||||
|
},
|
||||||
|
"100%": {
|
||||||
|
transform: "translateX(0%)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
popleft: {
|
||||||
|
"0%": {
|
||||||
|
transform: "translateX(100%)"
|
||||||
|
},
|
||||||
|
"100%": {
|
||||||
|
transform: "translateX(0%)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
popdown: {
|
||||||
|
"0%": {
|
||||||
|
transform: "scale(0.2)",
|
||||||
|
opacity: 0
|
||||||
|
// transform: "translateY(80%)",
|
||||||
|
},
|
||||||
|
"100%": {
|
||||||
|
transform: "scale(1)",
|
||||||
|
opacity: 1
|
||||||
|
// transform: "translateY(100%)",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
drawerRightIn: {
|
||||||
|
"0%": {
|
||||||
|
transform: "translateX(100%)"
|
||||||
|
},
|
||||||
|
"100%": {
|
||||||
|
transform: "translateX(0)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
drawerRightOut: {
|
||||||
|
"0%": {
|
||||||
|
transform: "translateX(0)"
|
||||||
|
},
|
||||||
|
"100%": {
|
||||||
|
transform: "translateX(100%)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
slideDown: {
|
||||||
|
from: { height: 0 },
|
||||||
|
to: { height: "var(--radix-accordion-content-height)" }
|
||||||
|
},
|
||||||
|
slideUp: {
|
||||||
|
from: { height: "var(--radix-accordion-content-height)" },
|
||||||
|
to: { height: 0 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
// 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);",
|
||||||
|
// drawer
|
||||||
|
drawerRightIn: "drawerRightIn 150ms ease-in-out",
|
||||||
|
drawerRightOut: "drawerRightOut 150ms ease-in-out",
|
||||||
|
// 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)",
|
||||||
|
slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)",
|
||||||
|
slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)",
|
||||||
|
// END
|
||||||
|
// TODO:(akhilmhdh) remove all these unused and keep the config file as small as possible
|
||||||
|
// Make the whole color pallelte into simpler
|
||||||
|
bounce: "bounce 1000ms ease-in-out infinite",
|
||||||
|
spin: "spin 1500ms 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"
|
||||||
|
},
|
||||||
|
typography: (theme) => ({
|
||||||
|
DEFAULT: {
|
||||||
|
css: [
|
||||||
|
{
|
||||||
|
color: "var(--tw-prose-body)",
|
||||||
|
maxWidth: "65ch",
|
||||||
|
'[class~="lead"]': {
|
||||||
|
color: "var(--tw-prose-lead)"
|
||||||
|
},
|
||||||
|
a: {
|
||||||
|
color: colors.gray[200],
|
||||||
|
textDecoration: "underline",
|
||||||
|
fontWeight: "500"
|
||||||
|
},
|
||||||
|
strong: {
|
||||||
|
color: colors.gray[200],
|
||||||
|
fontWeight: "600"
|
||||||
|
},
|
||||||
|
"a strong": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
"blockquote strong": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
"thead th strong": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
ol: {
|
||||||
|
listStyleType: "decimal"
|
||||||
|
},
|
||||||
|
'ol[type="A"]': {
|
||||||
|
listStyleType: "upper-alpha"
|
||||||
|
},
|
||||||
|
'ol[type="a"]': {
|
||||||
|
listStyleType: "lower-alpha"
|
||||||
|
},
|
||||||
|
'ol[type="A" s]': {
|
||||||
|
listStyleType: "upper-alpha"
|
||||||
|
},
|
||||||
|
'ol[type="a" s]': {
|
||||||
|
listStyleType: "lower-alpha"
|
||||||
|
},
|
||||||
|
'ol[type="I"]': {
|
||||||
|
listStyleType: "upper-roman"
|
||||||
|
},
|
||||||
|
'ol[type="i"]': {
|
||||||
|
listStyleType: "lower-roman"
|
||||||
|
},
|
||||||
|
'ol[type="I" s]': {
|
||||||
|
listStyleType: "upper-roman"
|
||||||
|
},
|
||||||
|
'ol[type="i" s]': {
|
||||||
|
listStyleType: "lower-roman"
|
||||||
|
},
|
||||||
|
'ol[type="1"]': {
|
||||||
|
listStyleType: "decimal"
|
||||||
|
},
|
||||||
|
ul: {
|
||||||
|
listStyleType: "disc"
|
||||||
|
},
|
||||||
|
"ol > li::marker": {
|
||||||
|
fontWeight: "400",
|
||||||
|
color: "var(--tw-prose-counters)"
|
||||||
|
},
|
||||||
|
"ul > li::marker": {
|
||||||
|
color: "var(--tw-prose-bullets)"
|
||||||
|
},
|
||||||
|
hr: {
|
||||||
|
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"'
|
||||||
|
},
|
||||||
|
"blockquote p:first-of-type::before": {
|
||||||
|
content: "open-quote"
|
||||||
|
},
|
||||||
|
"blockquote p:last-of-type::after": {
|
||||||
|
content: "close-quote"
|
||||||
|
},
|
||||||
|
h1: {
|
||||||
|
color: colors.gray[200],
|
||||||
|
fontWeight: "800"
|
||||||
|
},
|
||||||
|
"h1 strong": {
|
||||||
|
fontWeight: "900",
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
h2: {
|
||||||
|
color: colors.gray[200],
|
||||||
|
fontWeight: "700"
|
||||||
|
},
|
||||||
|
"h2 strong": {
|
||||||
|
fontWeight: "800",
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
h3: {
|
||||||
|
color: colors.gray[300],
|
||||||
|
fontWeight: "600"
|
||||||
|
},
|
||||||
|
"h3 strong": {
|
||||||
|
fontWeight: "700",
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
h4: {
|
||||||
|
color: colors.gray[400],
|
||||||
|
fontWeight: "600"
|
||||||
|
},
|
||||||
|
"h4 strong": {
|
||||||
|
fontWeight: "700",
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
// TODO: Figure out how to not need these, it's a merging issue
|
||||||
|
img: {},
|
||||||
|
"figure > *": {},
|
||||||
|
figcaption: {
|
||||||
|
color: "var(--tw-prose-captions)"
|
||||||
|
},
|
||||||
|
code: {
|
||||||
|
color: "var(--tw-prose-code)",
|
||||||
|
fontWeight: "600"
|
||||||
|
},
|
||||||
|
"code::before": {
|
||||||
|
content: '"`"'
|
||||||
|
},
|
||||||
|
"code::after": {
|
||||||
|
content: '"`"'
|
||||||
|
},
|
||||||
|
"a code": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
"h1 code": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
"h2 code": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
"h3 code": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
"h4 code": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
"blockquote code": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
"thead th code": {
|
||||||
|
color: "inherit"
|
||||||
|
},
|
||||||
|
pre: {
|
||||||
|
color: "var(--tw-prose-pre-code)",
|
||||||
|
backgroundColor: colors.gray[800],
|
||||||
|
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::before": {
|
||||||
|
content: "none"
|
||||||
|
},
|
||||||
|
"pre code::after": {
|
||||||
|
content: "none"
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
width: "100%",
|
||||||
|
tableLayout: "auto",
|
||||||
|
textAlign: "left",
|
||||||
|
marginTop: em(32, 16),
|
||||||
|
marginBottom: em(32, 16)
|
||||||
|
},
|
||||||
|
thead: {
|
||||||
|
borderBottomWidth: "1px",
|
||||||
|
borderBottomColor: "var(--tw-prose-th-borders)"
|
||||||
|
},
|
||||||
|
"thead th": {
|
||||||
|
color: "var(--tw-prose-headings)",
|
||||||
|
fontWeight: "600",
|
||||||
|
verticalAlign: "bottom"
|
||||||
|
},
|
||||||
|
"tbody tr": {
|
||||||
|
borderBottomWidth: "1px",
|
||||||
|
borderBottomColor: "var(--tw-prose-td-borders)"
|
||||||
|
},
|
||||||
|
"tbody tr:last-child": {
|
||||||
|
borderBottomWidth: "0"
|
||||||
|
},
|
||||||
|
"tbody td": {
|
||||||
|
verticalAlign: "baseline"
|
||||||
|
},
|
||||||
|
tfoot: {
|
||||||
|
borderTopWidth: "1px",
|
||||||
|
borderTopColor: "var(--tw-prose-th-borders)"
|
||||||
|
},
|
||||||
|
"tfoot td": {
|
||||||
|
verticalAlign: "top"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
plugin(function ({ addUtilities }) {
|
||||||
|
addUtilities({
|
||||||
|
".no-scrollbar::-webkit-scrollbar": {
|
||||||
|
display: "none"
|
||||||
|
},
|
||||||
|
".no-scrollbar": {
|
||||||
|
"-ms-overflow-style": "none",
|
||||||
|
"scrollbar-width": "none"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
require("@tailwindcss/typography")
|
||||||
|
]
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user