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,
|
||||
"trailingComma": "none",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/inter": "^5.1.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
"react-dom": "^18.3.1",
|
||||
"tailwind-merge": "^2.5.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3.2.0",
|
||||
"@eslint/js": "^9.15.0",
|
||||
"@kesills/eslint-config-airbnb-typescript": "^20.0.0",
|
||||
"@stylistic/eslint-plugin": "^2.12.1",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
@@ -33,7 +37,10 @@
|
||||
"eslint-plugin-react-refresh": "^0.4.14",
|
||||
"eslint-plugin-simple-import-sort": "^12.1.1",
|
||||
"globals": "^15.12.0",
|
||||
"postcss": "^8.4.49",
|
||||
"prettier": "3.4.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.9",
|
||||
"tailwindcss": "^3.4.16",
|
||||
"typescript": "~5.6.2",
|
||||
"typescript-eslint": "^8.15.0",
|
||||
"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 = () => {
|
||||
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 {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
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;
|
||||
--toastify-color-dark: theme(colors.mineshaft.700);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
.Toastify__toast {
|
||||
@apply rounded-md;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
.Toastify__toast-body {
|
||||
@apply items-start;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
.Toastify__toast-icon {
|
||||
@apply w-4 pt-1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
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;
|
||||
.rdp-day,
|
||||
.rdp-nav_button {
|
||||
@apply rounded-md hover:text-mineshaft-500;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
.rdp-button:hover:not([disabled]):not(.rdp-day_selected),
|
||||
.rdp-nav_button:hover {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
.rdp-day_today {
|
||||
@apply bg-primary/50 text-mineshaft-500 hover:bg-primary-600;
|
||||
}
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
.flex-0 {
|
||||
flex: 0;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
.flex-2 {
|
||||
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