mirror of
https://github.com/trushildhokiya/allininx-2.git
synced 2025-03-15 19:38:39 +00:00
291 lines
12 KiB
JavaScript
291 lines
12 KiB
JavaScript
|
/** @type {import("tailwindcss").Config} */
|
||
|
|
const defaultTheme = require("tailwindcss/defaultTheme");
|
||
|
|
|
||
|
|
module.exports = {
|
||
|
|
content: [
|
||
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||
|
|
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
|
||
|
|
],
|
||
|
|
darkMode: "class",
|
||
|
|
theme: {
|
||
|
|
transparent: "transparent",
|
||
|
|
current: "currentColor",
|
||
|
|
screens: {
|
||
|
|
"xs": "300px",
|
||
|
|
"xmd": "850px",
|
||
|
|
"sm-h": { "raw": "(min-height: 700px)" },
|
||
|
|
"md-h": { "raw": "(min-height: 800px)" },
|
||
|
|
"lg-h": { "raw": "(min-height: 1000px)" },
|
||
|
|
|
||
|
|
...defaultTheme.screens
|
||
|
|
},
|
||
|
|
extend: {
|
||
|
|
animation: {
|
||
|
|
ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
|
||
|
|
},
|
||
|
|
keyframes: {
|
||
|
|
ripple: {
|
||
|
|
"0%, 100%": {
|
||
|
|
transform: "translate(-50%, -50%) scale(1)",
|
||
|
|
},
|
||
|
|
"50%": {
|
||
|
|
transform: "translate(-50%, -50%) scale(0.9)",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
typography: (theme) => ({
|
||
|
|
DEFAULT: {
|
||
|
|
css: {
|
||
|
|
color: theme('colors.gray.900'), // Change color as per your need
|
||
|
|
a: {
|
||
|
|
color: theme('colors.blue.500'), // Change color as per your need
|
||
|
|
'&:hover': {
|
||
|
|
color: theme('colors.blue.600'), // Change color as per your need
|
||
|
|
},
|
||
|
|
},
|
||
|
|
'h1,h2,h3,h4': {
|
||
|
|
color: theme('colors.white'), // This is where you change your heading color
|
||
|
|
},
|
||
|
|
'b,strong': {
|
||
|
|
color: theme('colors.gray.500'), // This is where you change your bold text color
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
backgroundImage: {
|
||
|
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', // Add bg-gradient-radial for radial gradients
|
||
|
|
},
|
||
|
|
boxShadow: {
|
||
|
|
"xs": "0px 0px 0px 0.75px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.05)",
|
||
|
|
// light
|
||
|
|
"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||
|
|
"tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
||
|
|
"tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
||
|
|
// dark
|
||
|
|
"dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||
|
|
"dark-tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
||
|
|
"dark-tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
||
|
|
|
||
|
|
"depth-1": "0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 0 0 0.75px rgba(0, 0, 0, 0.05), 0 0 12px -2px rgba(0, 0, 0, 0.05)",
|
||
|
|
"depth-2": "0 0 0 0.75px rgba(0, 0, 0, 0.05), 0 8px 32px 0 rgba(39, 40, 51, 0.05), 0 4px 16px 0 rgba(39, 40, 51, 0.05)",
|
||
|
|
"depth-3": "0 0 0 0.75px rgba(0, 0, 0, 0.05), 0 8px 32px 0 rgba(39, 40, 51, 0.05), 0 4px 16px 0 rgba(39, 40, 51, 0.05), 0 8px 24px -4px rgba(0, 0, 0, 0.20)"
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
"tremor-small": "0.375rem",
|
||
|
|
"tremor-default": "0.5rem",
|
||
|
|
"tremor-full": "9999px",
|
||
|
|
},
|
||
|
|
fontSize: {
|
||
|
|
"tremor-label": ["0.75rem"],
|
||
|
|
"tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
|
||
|
|
"tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
|
||
|
|
"tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
inter: ["Inter", ...defaultTheme.fontFamily.sans]
|
||
|
|
},
|
||
|
|
|
||
|
|
colors: {
|
||
|
|
slate: {
|
||
|
|
1: "#FBFCFD",
|
||
|
|
2: "#F8F9FA",
|
||
|
|
3: "#F1F3F5",
|
||
|
|
4: "#ECEEF0",
|
||
|
|
5: "#E6E8EB",
|
||
|
|
6: "#DFE3E6",
|
||
|
|
7: "#D7DBDF",
|
||
|
|
8: "#C1C8CD",
|
||
|
|
9: "#889096",
|
||
|
|
10: "#7E868C",
|
||
|
|
11: "#687076",
|
||
|
|
12: "#11181C",
|
||
|
|
},
|
||
|
|
// light mode
|
||
|
|
tremor: {
|
||
|
|
brand: {
|
||
|
|
faint: "#eff6ff", // blue-50
|
||
|
|
muted: "#bfdbfe", // blue-200
|
||
|
|
subtle: "#60a5fa", // blue-400
|
||
|
|
DEFAULT: "#3b82f6", // blue-500
|
||
|
|
emphasis: "#1d4ed8", // blue-700
|
||
|
|
inverted: "#ffffff", // white
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
muted: "#f9fafb", // gray-50
|
||
|
|
subtle: "#f3f4f6", // gray-100
|
||
|
|
DEFAULT: "#ffffff", // white
|
||
|
|
emphasis: "#374151", // gray-700
|
||
|
|
},
|
||
|
|
border: {
|
||
|
|
DEFAULT: "#e5e7eb", // gray-200
|
||
|
|
},
|
||
|
|
ring: {
|
||
|
|
DEFAULT: "#e5e7eb", // gray-200
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
subtle: "#9ca3af", // gray-400
|
||
|
|
DEFAULT: "#6b7280", // gray-500
|
||
|
|
emphasis: "#374151", // gray-700
|
||
|
|
strong: "#111827", // gray-900
|
||
|
|
inverted: "#ffffff", // white
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// dark mode
|
||
|
|
"dark-tremor": {
|
||
|
|
brand: {
|
||
|
|
faint: "#0B1229", // custom
|
||
|
|
muted: "#172554", // blue-950
|
||
|
|
subtle: "#1e40af", // blue-800
|
||
|
|
DEFAULT: "#3b82f6", // blue-500
|
||
|
|
emphasis: "#60a5fa", // blue-400
|
||
|
|
inverted: "#030712", // gray-950
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
muted: "#131A2B", // custom
|
||
|
|
subtle: "#1f2937", // gray-800
|
||
|
|
DEFAULT: "#111827", // gray-900
|
||
|
|
emphasis: "#d1d5db", // gray-300
|
||
|
|
},
|
||
|
|
border: {
|
||
|
|
DEFAULT: "#1f2937", // gray-800
|
||
|
|
},
|
||
|
|
ring: {
|
||
|
|
DEFAULT: "#1f2937", // gray-800
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
subtle: "#4b5563", // gray-600
|
||
|
|
DEFAULT: "#6b7280", // gray-600
|
||
|
|
emphasis: "#e5e7eb", // gray-200
|
||
|
|
strong: "#f9fafb", // gray-50
|
||
|
|
inverted: "#000000", // black
|
||
|
|
},
|
||
|
|
},
|
||
|
|
blue: {
|
||
|
|
base: {
|
||
|
|
dark: "hsl(199, 89%, 48%)",
|
||
|
|
light: "hsl(199, 89%, 48%)",
|
||
|
|
},
|
||
|
|
hover: {
|
||
|
|
dark: "hsl(199, 80%, 30%)",
|
||
|
|
light: "hsl(199, 90%, 40%)",
|
||
|
|
},
|
||
|
|
focusVisible: {
|
||
|
|
dark: "hsl(208, 79%, 51%)",
|
||
|
|
light: "hsl(208, 79%, 55%)",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
amber: {
|
||
|
|
base: {
|
||
|
|
dark: "hsl(39, 100%, 50%)",
|
||
|
|
light: "hsl(45, 100%, 50%)",
|
||
|
|
},
|
||
|
|
hover: {
|
||
|
|
dark: "hsl(39, 100%, 40%)",
|
||
|
|
light: "hsl(45, 100%, 45%)",
|
||
|
|
},
|
||
|
|
focusVisible: {
|
||
|
|
dark: "hsl(39, 85%, 30%)",
|
||
|
|
light: "hsl(45, 85%, 35%)",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
red: {
|
||
|
|
base: {
|
||
|
|
dark: "hsl(3, 100%, 61%)",
|
||
|
|
light: "hsl(3, 100%, 59%)",
|
||
|
|
},
|
||
|
|
hover: {
|
||
|
|
dark: "hsl(3, 100% 45%)",
|
||
|
|
light: "hsl(3, 100%, 40%)",
|
||
|
|
},
|
||
|
|
focusVisible: {
|
||
|
|
dark: "hsl(3, 85%, 40%)",
|
||
|
|
light: "hsl(3, 85%, 35%)",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
green: {
|
||
|
|
base: {
|
||
|
|
dark: "hsl(143, 71%, 45%)",
|
||
|
|
light: "hsl(143, 71%, 40%)",
|
||
|
|
},
|
||
|
|
hover: {
|
||
|
|
dark: "hsl(143, 65%, 40%)",
|
||
|
|
light: "hsl(143, 71%, 33%)",
|
||
|
|
},
|
||
|
|
focusVisible: {
|
||
|
|
dark: "hsl(143, 65%, 35%)",
|
||
|
|
light: "hsl(143, 71%, 30%)",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
shade: {
|
||
|
|
100: {
|
||
|
|
dark: "hsl(0, 0%, 100%)",
|
||
|
|
light: "hsl(0, 0%, 0%)",
|
||
|
|
},
|
||
|
|
200: {
|
||
|
|
dark: "hsl(240, 3%, 69%)",
|
||
|
|
light: "hsl(240, 2%, 30%)",
|
||
|
|
},
|
||
|
|
300: {
|
||
|
|
dark: "hsl(240, 2%, 49%)",
|
||
|
|
light: "hsl(240, 2%, 57%)",
|
||
|
|
},
|
||
|
|
400: {
|
||
|
|
dark: "hsl(240, 1%, 33%)",
|
||
|
|
light: "hsl(240, 3%, 69%)",
|
||
|
|
},
|
||
|
|
500: {
|
||
|
|
dark: "hsl(240, 1%, 27%)",
|
||
|
|
light: "hsl(240, 5%, 79%)",
|
||
|
|
},
|
||
|
|
600: {
|
||
|
|
dark: "hsl(240, 2%, 22%)",
|
||
|
|
light: "hsl(240, 6%, 83%)",
|
||
|
|
},
|
||
|
|
700: {
|
||
|
|
dark: "hsl(240, 3%, 15%)",
|
||
|
|
light: "hsl(240, 11%, 91%)",
|
||
|
|
},
|
||
|
|
800: {
|
||
|
|
dark: "hsl(240, 6%, 10%)",
|
||
|
|
light: "hsl(240, 24%, 96%)",
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
safelist: [
|
||
|
|
{
|
||
|
|
pattern:
|
||
|
|
/^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
||
|
|
variants: ["hover", "ui-selected"],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
pattern:
|
||
|
|
/^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
||
|
|
variants: ["hover", "ui-selected"],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
pattern:
|
||
|
|
/^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
||
|
|
variants: ["hover", "ui-selected"],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
pattern:
|
||
|
|
/^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
pattern:
|
||
|
|
/^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
pattern:
|
||
|
|
/^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
plugins: [
|
||
|
|
require('@tailwindcss/typography'),
|
||
|
|
require('@tailwindcss/forms'),
|
||
|
|
require("tailwindcss-radix"),
|
||
|
|
]
|
||
|
|
};
|