mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
369 lines
10 KiB
JavaScript
369 lines
10 KiB
JavaScript
const { fontFamily } = require("tailwindcss/defaultTheme");
|
|
/** @type {import('tailwindcss').Config} */
|
|
const colors = require("tailwindcss/colors"); // Correctly import colors
|
|
|
|
module.exports = {
|
|
darkMode: ["class"],
|
|
content: [
|
|
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
// Path to Tremor module
|
|
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
transparent: 'transparent',
|
|
current: 'currentColor',
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
'2xl': '1400px'
|
|
}
|
|
},
|
|
extend: {
|
|
backgroundImage: {
|
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
|
|
},
|
|
colors: {
|
|
tremor: {
|
|
brand: {
|
|
faint: 'colors.blue[50]',
|
|
muted: 'colors.blue[200]',
|
|
subtle: 'colors.blue[400]',
|
|
DEFAULT: 'colors.blue[500]',
|
|
emphasis: 'colors.blue[700]',
|
|
inverted: 'colors.white'
|
|
},
|
|
background: {
|
|
muted: 'colors.gray[50]',
|
|
subtle: 'colors.gray[100]',
|
|
DEFAULT: 'colors.white',
|
|
emphasis: 'colors.gray[700]'
|
|
},
|
|
border: {
|
|
DEFAULT: 'colors.gray[200]'
|
|
},
|
|
ring: {
|
|
DEFAULT: 'colors.gray[200]'
|
|
},
|
|
content: {
|
|
subtle: 'colors.gray[400]',
|
|
DEFAULT: 'colors.gray[500]',
|
|
emphasis: 'colors.gray[700]',
|
|
strong: 'colors.gray[900]',
|
|
inverted: 'colors.white'
|
|
}
|
|
},
|
|
'dark-tremor': {
|
|
brand: {
|
|
faint: '#0B1229',
|
|
muted: 'colors.blue[950]',
|
|
subtle: 'colors.blue[800]',
|
|
DEFAULT: 'colors.blue[500]',
|
|
emphasis: 'colors.blue[400]',
|
|
inverted: 'colors.blue[950]'
|
|
},
|
|
background: {
|
|
muted: '#131A2B',
|
|
subtle: 'colors.gray[800]',
|
|
DEFAULT: 'colors.gray[900]',
|
|
emphasis: 'colors.gray[300]'
|
|
},
|
|
border: {
|
|
DEFAULT: 'colors.gray[800]'
|
|
},
|
|
ring: {
|
|
DEFAULT: 'colors.gray[800]'
|
|
},
|
|
content: {
|
|
subtle: 'colors.gray[600]',
|
|
DEFAULT: 'colors.gray[500]',
|
|
emphasis: 'colors.gray[200]',
|
|
strong: 'colors.gray[50]',
|
|
inverted: 'colors.gray[950]'
|
|
}
|
|
},
|
|
epc_a: '#117d58',
|
|
epc_b: '#2da55c',
|
|
epc_c: '#8dbd40',
|
|
epc_d: '#f7cd14',
|
|
epc_e: '#f3a96a',
|
|
epc_f: '#ef8026',
|
|
epc_g: '#e41e3b',
|
|
brandblue: '#14163d',
|
|
hoverblue: '#3e4073',
|
|
brandtan: '#d3b488',
|
|
hovertan: '#947750',
|
|
brandgold: '#f1bb06',
|
|
hovergold: '#c79d12',
|
|
brandbrown: '#c4a47c',
|
|
brandmidblue: '#3943b7',
|
|
brandlightblue: '#00a9f4',
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))'
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))'
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))'
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))'
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))'
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))'
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))'
|
|
}
|
|
},
|
|
textColor: {
|
|
brandblue: '#14163d',
|
|
hoverblue: '#3e4073',
|
|
brandtan: '#d3b488',
|
|
hovertan: '#947750',
|
|
brandbrown: '#c4a47c',
|
|
brandmidblue: '#3943b7',
|
|
brandlightblue: '#00a9f4'
|
|
},
|
|
borderRadius: {
|
|
'tremor-small': '0.375rem',
|
|
'tremor-default': '0.5rem',
|
|
'tremor-full': '9999px'
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'var(--font-sans)',
|
|
...fontFamily.sans
|
|
]
|
|
},
|
|
keyframes: {
|
|
'accordion-down': {
|
|
from: {
|
|
height: 0
|
|
},
|
|
to: {
|
|
height: 'var(--radix-accordion-content-height)'
|
|
}
|
|
},
|
|
'accordion-up': {
|
|
from: {
|
|
height: 'var(--radix-accordion-content-height)'
|
|
},
|
|
to: {
|
|
height: 0
|
|
}
|
|
},
|
|
'accordion-down': {
|
|
from: {
|
|
height: '0'
|
|
},
|
|
to: {
|
|
height: 'var(--radix-accordion-content-height)'
|
|
}
|
|
},
|
|
'accordion-up': {
|
|
from: {
|
|
height: 'var(--radix-accordion-content-height)'
|
|
},
|
|
to: {
|
|
height: '0'
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out'
|
|
},
|
|
maxWidth: {
|
|
'8xl': '90rem'
|
|
},
|
|
boxShadow: {
|
|
'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-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)'
|
|
},
|
|
fontSize: {
|
|
'tremor-label': [
|
|
'0.75rem',
|
|
{
|
|
lineHeight: '1rem'
|
|
}
|
|
],
|
|
'tremor-default': [
|
|
'0.875rem',
|
|
{
|
|
lineHeight: '1.25rem'
|
|
}
|
|
],
|
|
'tremor-title': [
|
|
'1.125rem',
|
|
{
|
|
lineHeight: '1.75rem'
|
|
}
|
|
],
|
|
'tremor-metric': [
|
|
'1.875rem',
|
|
{
|
|
lineHeight: '2.25rem'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
variants: {
|
|
extend: {
|
|
visibility: ["group-hover"],
|
|
},
|
|
},
|
|
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))$/,
|
|
},
|
|
// This enables the EPC colours for tremor. They're listed from EPC G -> A
|
|
"bg-[#e41e3b]",
|
|
"border-[#e41e3b]",
|
|
"hover:bg-[#e41e3b]",
|
|
"hover:border-[#e41e3b]",
|
|
"hover:text-[#e41e3b]",
|
|
"fill-[#e41e3b]",
|
|
"ring-[#e41e3b]",
|
|
"stroke-[#e41e3b]",
|
|
"text-[#e41e3b]",
|
|
"ui-selected:bg-[#e41e3b]",
|
|
"ui-selected:border-[#e41e3b]",
|
|
"ui-selected:text-[#e41e3b]",
|
|
"bg-[#ef8026]",
|
|
"border-[#ef8026]",
|
|
"hover:bg-[#ef8026]",
|
|
"hover:border-[#ef8026]",
|
|
"hover:text-[#ef8026]",
|
|
"fill-[#ef8026]",
|
|
"ring-[#ef8026]",
|
|
"stroke-[#ef8026]",
|
|
"text-[#ef8026]",
|
|
"ui-selected:bg-[#ef8026]",
|
|
"ui-selected:border-[#ef8026]",
|
|
"ui-selected:text-[#ef8026]",
|
|
"bg-[#f3a96a]",
|
|
"border-[#f3a96a]",
|
|
"hover:bg-[#f3a96a]",
|
|
"hover:border-[#f3a96a]",
|
|
"hover:text-[#f3a96a]",
|
|
"fill-[#f3a96a]",
|
|
"ring-[#f3a96a]",
|
|
"stroke-[#f3a96a]",
|
|
"text-[#f3a96a]",
|
|
"ui-selected:bg-[#f3a96a]",
|
|
"ui-selected:border-[#f3a96a]",
|
|
"ui-selected:text-[#f3a96a]",
|
|
"bg-[#f7cd14]",
|
|
"border-[#f7cd14]",
|
|
"hover:bg-[#f7cd14]",
|
|
"hover:border-[#f7cd14]",
|
|
"hover:text-[#f7cd14]",
|
|
"fill-[#f7cd14]",
|
|
"ring-[#f7cd14]",
|
|
"stroke-[#f7cd14]",
|
|
"text-[#f7cd14]",
|
|
"ui-selected:bg-[#f7cd14]",
|
|
"ui-selected:border-[#f7cd14]",
|
|
"ui-selected:text-[#f7cd14]",
|
|
"bg-[#8dbd40]",
|
|
"border-[#8dbd40]",
|
|
"hover:bg-[#8dbd40]",
|
|
"hover:border-[#8dbd40]",
|
|
"hover:text-[#8dbd40]",
|
|
"fill-[#8dbd40]",
|
|
"ring-[#8dbd40]",
|
|
"stroke-[#8dbd40]",
|
|
"text-[#8dbd40]",
|
|
"ui-selected:bg-[#8dbd40]",
|
|
"ui-selected:border-[#8dbd40]",
|
|
"ui-selected:text-[#8dbd40]",
|
|
"bg-[#2da55c]",
|
|
"border-[#2da55c]",
|
|
"hover:bg-[#2da55c]",
|
|
"hover:border-[#2da55c]",
|
|
"hover:text-[#2da55c]",
|
|
"fill-[#2da55c]",
|
|
"ring-[#2da55c]",
|
|
"stroke-[#2da55c]",
|
|
"text-[#2da55c]",
|
|
"ui-selected:bg-[#2da55c]",
|
|
"ui-selected:border-[#2da55c]",
|
|
"ui-selected:text-[#2da55c]",
|
|
"bg-[#117d58]",
|
|
"border-[#117d58]",
|
|
"hover:bg-[#117d58]",
|
|
"hover:border-[#117d58]",
|
|
"hover:text-[#117d58]",
|
|
"fill-[#117d58]",
|
|
"ring-[#117d58]",
|
|
"stroke-[#117d58]",
|
|
"text-[#117d58]",
|
|
"ui-selected:bg-[#117d58]",
|
|
"ui-selected:border-[#117d58]",
|
|
"ui-selected:text-[#117d58]",
|
|
],
|
|
plugins: [
|
|
function ({ addVariant }) {
|
|
addVariant("important", ({ container }) => {
|
|
container.walkRules((rule) => {
|
|
rule.selector = `.\\!${rule.selector.slice(1)}`;
|
|
rule.walkDecls((decl) => {
|
|
decl.important = true;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
require("@tailwindcss/forms"),
|
|
],
|
|
};
|