mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
447 lines
13 KiB
JavaScript
447 lines
13 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))",
|
|
"domna-gradient":
|
|
"linear-gradient(135deg, #14163d 0%, #2d348f 45%, #3943b7 70%, #eff6fc 100%)",
|
|
},
|
|
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",
|
|
midblue: "#2d348f",
|
|
brandtan: "#d3b488",
|
|
hovertan: "#947750",
|
|
brandgold: "#f1bb06",
|
|
hovergold: "#c79d12",
|
|
brandbrown: "#c4a47c",
|
|
brandmidblue: "#3943b7",
|
|
brandlightblue: "#eff6fc",
|
|
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],
|
|
manrope: ["var(--font-manrope)", ...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]",
|
|
|
|
// blue colours for graphs - eff6fc
|
|
"bg-[#eff6fc]",
|
|
"border-[#eff6fc]",
|
|
"hover:bg-[#eff6fc]",
|
|
"hover:border-[#eff6fc]",
|
|
"hover:text-[#eff6fc]",
|
|
"fill-[#eff6fc]",
|
|
"ring-[#eff6fc]",
|
|
"stroke-[#eff6fc]",
|
|
"text-[#eff6fc]",
|
|
"ui-selected:bg-[#eff6fc]",
|
|
"ui-selected:border-[#eff6fc]",
|
|
"ui-selected:text-[#eff6fc]",
|
|
// brandbrown for Tremor charts
|
|
"bg-[#c4a47c]",
|
|
"border-[#c4a47c]",
|
|
"hover:bg-[#c4a47c]",
|
|
"hover:border-[#c4a47c]",
|
|
"hover:text-[#c4a47c]",
|
|
"fill-[#c4a47c]",
|
|
"ring-[#c4a47c]",
|
|
"stroke-[#c4a47c]",
|
|
"text-[#c4a47c]",
|
|
"ui-selected:bg-[#c4a47c]",
|
|
"ui-selected:border-[#c4a47c]",
|
|
"ui-selected:text-[#c4a47c]",
|
|
// lighter blue for Tremor charts
|
|
"bg-[#8b96e9]",
|
|
"border-[#8b96e9]",
|
|
"hover:bg-[#8b96e9]",
|
|
"hover:border-[#8b96e9]",
|
|
"hover:text-[#8b96e9]",
|
|
"fill-[#8b96e9]",
|
|
"ring-[#8b96e9]",
|
|
"stroke-[#8b96e9]",
|
|
"text-[#8b96e9]",
|
|
"ui-selected:bg-[#8b96e9]",
|
|
"ui-selected:border-[#8b96e9]",
|
|
"ui-selected:text-[#8b96e9]",
|
|
// brand blues for Tremor charts
|
|
"bg-[#14163d]",
|
|
"border-[#14163d]",
|
|
"fill-[#14163d]",
|
|
"stroke-[#14163d]",
|
|
"text-[#14163d]",
|
|
"bg-[#2d348f]",
|
|
"border-[#2d348f]",
|
|
"fill-[#2d348f]",
|
|
"stroke-[#2d348f]",
|
|
"text-[#2d348f]",
|
|
"bg-[#3943b7]",
|
|
"border-[#3943b7]",
|
|
"fill-[#3943b7]",
|
|
"stroke-[#3943b7]",
|
|
"text-[#3943b7]",
|
|
"bg-[#5d6be0]",
|
|
"border-[#5d6be0]",
|
|
"fill-[#5d6be0]",
|
|
"stroke-[#5d6be0]",
|
|
"text-[#5d6be0]",
|
|
// pale blue (4th chart series)
|
|
"bg-[#b8bef4]",
|
|
"border-[#b8bef4]",
|
|
"fill-[#b8bef4]",
|
|
"stroke-[#b8bef4]",
|
|
"text-[#b8bef4]",
|
|
"bg-[#1f3abdff]",
|
|
"border-[#1f3abdff]",
|
|
"fill-[#1f3abdff]",
|
|
"stroke-[#1f3abdff]",
|
|
"text-[#1f3abdff]",
|
|
],
|
|
plugins: [
|
|
function ({ addVariant }) {
|
|
addVariant("important", ({ container }) => {
|
|
container.walkRules((rule) => {
|
|
rule.selector = `.\\!${rule.selector.slice(1)}`;
|
|
rule.walkDecls((decl) => {
|
|
decl.important = true;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
require("@tailwindcss/forms"),
|
|
],
|
|
};
|