@onvo-ai/react
Version:
The react SDK for Onvo AI dashboard builder
218 lines (213 loc) • 6.19 kB
JavaScript
/** @type {import('tailwindcss').Config} */
import svgToDataUri from "mini-svg-data-uri";
import { scopedPreflightStyles, isolateInsideOfContainer } from 'tailwindcss-scoped-preflight';
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
/* eslint-disable max-len */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: "selector",
prefix: "onvo-",
safelist: [
'onvo-w-0',
'onvo-grid-cols-3',
'onvo-w-auto',
'onvo-relative',
'onvo-block'
// Add other classes or patterns here if needed
],
theme: {
fontFamily: {
sans: [
"Inter",
"ui-sans-serif",
"system-ui",
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
},
fontSize: {
xs: '12px',
sm: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '30px',
'4xl': '36px',
'5xl': '48px',
'6xl': '60px',
'7xl': '72px',
},
spacing: {
px: '1px',
0: '0',
0.5: '2px',
1: '4px',
1.5: '6px',
2: '8px',
2.5: '10px',
3: '12px',
3.5: '14px',
4: '16px',
5: '20px',
6: '24px',
7: '28px',
8: '32px',
9: '36px',
10: '40px',
11: '44px',
12: '48px',
14: '56px',
16: '64px',
20: '80px',
24: '96px',
28: '112px',
32: '128px',
36: '144px',
40: '160px',
44: '176px',
48: '192px',
52: '208px',
56: '224px',
60: '240px',
64: '256px',
72: '288px',
80: '320px',
96: '384px',
},
extend: {
lineHeight: {
3: '12px',
4: '16px',
5: '20px',
6: '24px',
7: '28px',
8: '32px',
9: '36px',
10: '40px',
},
typography: {
sm: {
css: {
fontSize: '0.875em',
},
},
},
containers: {
'xs': '320px',
'sm': '384px',
'md': '448px',
'lg': '512px',
'xl': '576px',
'2xl': '672px',
'3xl': '768px',
'4xl': '896px',
'5xl': '1024px',
'6xl': '1152px',
'7xl': '1280px'
},
keyframes: {
hide: {
from: { opacity: "1" },
to: { opacity: "0" },
},
dialogOpen: {
from: { opacity: "0", transform: "translateY(200px)" },
to: { opacity: "1", transform: "translateY(0)" },
},
slideDownAndFade: {
from: { opacity: "0", transform: "translateY(-6px)" },
to: { opacity: "1", transform: "translateY(0)" },
},
slideLeftAndFade: {
from: { opacity: "0", transform: "translateX(6px)" },
to: { opacity: "1", transform: "translateX(0)" },
},
slideUpAndFade: {
from: { opacity: "0", transform: "translateY(6px)" },
to: { opacity: "1", transform: "translateY(0)" },
},
slideRightAndFade: {
from: { opacity: "0", transform: "translateX(-6px)" },
to: { opacity: "1", transform: "translateX(0)" },
},
accordionOpen: {
from: { height: "0px" },
to: { height: "var(--radix-accordion-content-height)" },
},
accordionClose: {
from: {
height: "var(--radix-accordion-content-height)",
},
to: { height: "0px" },
},
dialogOverlayShow: {
from: { opacity: "0" },
to: { opacity: "1" },
},
dialogContentShow: {
from: {
opacity: "0",
transform: "translate(-50%, -45%) scale(0.95)",
},
to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
},
},
animation: {
dialogOpen: "dialogOpen 150ms cubic-bezier(0.16, 1, 0.3, 1)",
hide: "hide 150ms cubic-bezier(0.16, 1, 0.3, 1)",
slideDownAndFade:
"slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
slideLeftAndFade:
"slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
slideUpAndFade: "slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
slideRightAndFade:
"slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
// Accordion
accordionOpen: "accordionOpen 150ms cubic-bezier(0.87, 0, 0.13, 1)",
accordionClose: "accordionClose 150ms cubic-bezier(0.87, 0, 0.13, 1)",
// Dialog
dialogOverlayShow:
"dialogOverlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
dialogContentShow:
"dialogContentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
},
},
},
plugins: [
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
require("@tailwindcss/forms"),
require("tailwind-scrollbar"),
scopedPreflightStyles({
isolationStrategy: isolateInsideOfContainer('.onvo-root-style'),
}),
function ({ matchUtilities, theme }) {
matchUtilities(
{
"bg-grid": (value) => ({
backgroundImage: `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
)}")`,
}),
"bg-grid-small": (value) => ({
backgroundImage: `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
)}")`,
}),
"bg-dot": (value) => ({
backgroundImage: `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
)}")`,
}),
},
{ values: flattenColorPalette(theme("backgroundColor")), type: "color" }
);
},
],
};