286 lines
12 KiB
JavaScript
286 lines
12 KiB
JavaScript
const plugin = require("tailwindcss/plugin");
|
|
|
|
module.exports = {
|
|
content: ["./index.html", "./src/**/*.{vue,ts,js}"],
|
|
darkMode: "class",
|
|
theme: {
|
|
screens: {
|
|
sm: "576px",
|
|
"sm-max": { max: "576px" },
|
|
md: "768px",
|
|
"md-max": { max: "768px" },
|
|
lg: "992px",
|
|
"lg-max": { max: "992px" },
|
|
xl: "1200px",
|
|
"xl-max": { max: "1200px" },
|
|
"2xl": "1320px",
|
|
"2xl-max": { max: "1320px" },
|
|
},
|
|
colors: ({ colors }) => ({
|
|
inherit: colors.inherit,
|
|
current: colors.current,
|
|
transparent: colors.transparent,
|
|
black: colors.black,
|
|
white: colors.white,
|
|
slate: {
|
|
50: "#f8fafc", 100: "#dee2e6", 200: "#cbd3da", 300: "#a8b8d8",
|
|
400: "#8392ab", 500: "#67748e", 600: "#627594", 700: "#344767",
|
|
800: "#3a416f", 900: "#0f172a",
|
|
},
|
|
gray: {
|
|
50: "#f8f9fa", 100: "#ebeff4", 200: "#e9ecef", 300: "#d2d6da",
|
|
400: "#ced4da", 500: "#adb5bd", 600: "#6c757d", 700: "#495057",
|
|
800: "#252f40", 900: "#141727",
|
|
},
|
|
red: {
|
|
50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5",
|
|
400: "#f87171", 500: "#f53939", 600: "#ea0606", 700: "#b91c1c",
|
|
800: "#991b1b", 900: "#7f1d1d",
|
|
},
|
|
amber: {
|
|
50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d",
|
|
400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309",
|
|
800: "#92400e", 900: "#78350f",
|
|
},
|
|
lime: {
|
|
50: "#f7fee7", 100: "#ecfccb", 200: "#d9f99d", 300: "#bef264",
|
|
400: "#98ec2d", 500: "#82d616", 600: "#65a30d", 700: "#4d7c0f",
|
|
800: "#3f6212", 900: "#365314",
|
|
},
|
|
green: {
|
|
50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac",
|
|
400: "#4ade80", 500: "#22c55e", 600: "#17ad37", 700: "#15803d",
|
|
800: "#166534", 900: "#14532d",
|
|
},
|
|
teal: {
|
|
50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4",
|
|
400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e",
|
|
800: "#115e59", 900: "#134e4a",
|
|
},
|
|
cyan: {
|
|
50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9",
|
|
400: "#21d4fd", 500: "#17c1e8", 600: "#0891b2", 700: "#0e7490",
|
|
800: "#155e75", 900: "#164e63",
|
|
},
|
|
blue: {
|
|
50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd",
|
|
400: "#60a5fa", 500: "#3b82f6", 600: "#2152ff", 700: "#1d4ed8",
|
|
800: "#344e86", 900: "#00007d",
|
|
},
|
|
violet: {
|
|
50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd",
|
|
400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9",
|
|
800: "#5b21b6", 900: "#4c1d95",
|
|
},
|
|
purple: {
|
|
50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe",
|
|
400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7928ca",
|
|
800: "#6b21a8", 900: "#581c87",
|
|
},
|
|
fuchsia: {
|
|
50: "#fdf4ff", 100: "#fae8ff", 200: "#f5d0fe", 300: "#e293d3",
|
|
400: "#e879f9", 500: "#cb0c9f", 600: "#c026d3", 700: "#a21caf",
|
|
800: "#830866", 900: "#701a75",
|
|
},
|
|
pink: {
|
|
50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4",
|
|
400: "#f472b6", 500: "#ff0080", 600: "#db2777", 700: "#be185d",
|
|
800: "#9d174d", 900: "#831843",
|
|
},
|
|
rose: {
|
|
50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af",
|
|
400: "#ff667c", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c",
|
|
800: "#9f1239", 900: "#881337",
|
|
},
|
|
}),
|
|
spacing: {
|
|
px: "1px", 0: "0px", 0.5: "0.125rem", 0.75: "0.1875rem",
|
|
1: "0.25rem", 1.25: "0.3125rem", 1.5: "0.375rem", 1.75: "0.4375rem",
|
|
2: "0.5rem", 2.5: "0.625rem", 2.7: "0.675rem", 3: "0.75rem",
|
|
3.5: "0.875rem", 4: "1rem", 4.5: "1.125rem", 5: "1.25rem",
|
|
5.5: "1.375rem", 6: "1.5rem", 6.5: "1.625rem", 7: "1.75rem",
|
|
7.5: "1.875rem", 8: "2rem", 8.75: "2.1875rem", 9: "2.25rem",
|
|
10: "2.5rem", 11: "2.75rem", 12: "3rem", 14: "3.5rem", 16: "4rem",
|
|
19.5: "4.875rem", 20: "5rem", 24: "6rem", 28: "7rem", 32: "8rem",
|
|
36: "9rem", 40: "10rem", 44: "11rem", 48: "12rem", 52: "13rem",
|
|
56: "14rem", 60: "15rem", 62.5: "15.625rem", 64: "16rem",
|
|
68: "17rem", 68.5: "17.125rem", 72: "18rem", 80: "20rem",
|
|
96: "24rem",
|
|
},
|
|
boxShadow: {
|
|
"soft-xxs": "0 1px 5px 1px #ddd",
|
|
"soft-xs": "0 3px 5px -1px rgba(0,0,0,.09),0 2px 3px -1px rgba(0,0,0,.07)",
|
|
"soft-sm": "0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07)",
|
|
"soft-md": "0 4px 7px -1px rgba(0,0,0,.11),0 2px 4px -1px rgba(0,0,0,.07)",
|
|
"soft-lg": "0 2px 12px 0 rgba(0,0,0,.16)",
|
|
"soft-xl": "0 20px 27px 0 rgba(0,0,0,0.05)",
|
|
"soft-2xl": "0 .3125rem .625rem 0 rgba(0,0,0,.12)",
|
|
"soft-3xl": "0 8px 26px -4px hsla(0,0%,8%,.15),0 8px 9px -5px hsla(0,0%,8%,.06)",
|
|
"soft-primary-outline": "0 0 0 2px #e9aede",
|
|
blur: "inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05)",
|
|
none: "none",
|
|
},
|
|
borderRadius: {
|
|
none: "0px", xs: "0.0625rem", sm: "0.125rem", DEFAULT: "0.25rem",
|
|
md: "0.375rem", lg: "0.5rem", xl: "0.75rem", "2xl": "1rem",
|
|
"3xl": "1.5rem", full: "9999px", circle: "50%",
|
|
},
|
|
fontFamily: {
|
|
sans: ["Open Sans", "sans-serif"],
|
|
body: ["Roboto", "sans-serif"],
|
|
awesome: ["FontAwesome"],
|
|
},
|
|
fontSize: {
|
|
xs: ["0.75rem", { lineHeight: "1rem" }],
|
|
sm: ["0.875rem", { lineHeight: "1.5rem" }],
|
|
base: ["1rem", { lineHeight: "1.5rem" }],
|
|
lg: ["1.125rem", { lineHeight: "1.75rem" }],
|
|
xl: ["1.25rem", { lineHeight: "1.75rem" }],
|
|
"2xl": ["1.5rem", { lineHeight: "2rem" }],
|
|
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
|
|
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
|
|
"5xl": ["3rem", { lineHeight: "1" }],
|
|
},
|
|
fontWeight: {
|
|
light: "300", normal: "400", medium: "500",
|
|
semibold: "600", bold: "700", extrabold: "800",
|
|
},
|
|
lineHeight: {
|
|
none: "1", tight: "1.25", snug: "1.375", normal: "1.5",
|
|
default: "1.6", relaxed: "1.625", loose: "2",
|
|
pro: "1.4", button: "1.3",
|
|
5.6: "1.4rem",
|
|
},
|
|
height: ({ theme }) => ({
|
|
auto: "auto",
|
|
...theme("spacing"),
|
|
"1/2": "50%", "1/3": "33.333333%", "2/3": "66.666667%",
|
|
"1/4": "25%", "3/4": "75%",
|
|
full: "100%",
|
|
sidenav: "calc(100vh - 370px)",
|
|
screen: "100vh",
|
|
min: "min-content", max: "max-content", fit: "fit-content",
|
|
}),
|
|
maxWidth: ({ theme, breakpoints }) => ({
|
|
...theme("spacing"),
|
|
none: "none", xs: "20rem", sm: "24rem", md: "28rem", lg: "32rem",
|
|
xl: "36rem", "2xl": "42rem", "3xl": "48rem", "4xl": "56rem",
|
|
"5xl": "64rem", "6xl": "72rem", "7xl": "80rem",
|
|
full: "100%", min: "min-content", max: "max-content",
|
|
...breakpoints(theme("screens")),
|
|
}),
|
|
width: ({ theme }) => ({
|
|
auto: "auto",
|
|
...theme("spacing"),
|
|
"1/100": "1%",
|
|
"1/2": "50%", "1/3": "33.333333%", "2/3": "66.666667%",
|
|
"1/4": "25%", "2/4": "50%", "3/4": "75%",
|
|
"1/5": "20%", "2/5": "40%", "3/5": "60%", "4/5": "80%",
|
|
"1/6": "16.666667%", "5/6": "83.333333%",
|
|
"1/12": "8.333333%", "2/12": "16.666667%", "3/12": "25%",
|
|
"4/12": "33.333333%", "5/12": "41.666667%", "6/12": "50%",
|
|
"7/12": "58.333333%", "8/12": "66.666667%", "9/12": "75%",
|
|
"10/12": "83.333333%", "11/12": "91.666667%",
|
|
full: "100%", screen: "100vw",
|
|
min: "min-content", max: "max-content", fit: "fit-content",
|
|
}),
|
|
backgroundImage: ({ theme }) => ({
|
|
none: "none",
|
|
"gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
|
|
"gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
|
|
"gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
|
|
"gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
|
|
"gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
|
|
"gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
|
|
"gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
|
|
"gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))",
|
|
"gradient-fuchsia": "linear-gradient(310deg," + theme("colors.purple.700") + "," + theme("colors.pink.500") + ")",
|
|
"gradient-cyan": "linear-gradient(310deg," + theme("colors.blue.600") + "," + theme("colors.cyan.400") + ")",
|
|
"gradient-lime": "linear-gradient(310deg," + theme("colors.green.600") + "," + theme("colors.lime.400") + ")",
|
|
"gradient-slate": "linear-gradient(310deg," + theme("colors.slate.600") + "," + theme("colors.slate.300") + ")",
|
|
"gradient-dark-gray": "linear-gradient(310deg," + theme("colors.gray.900") + "," + theme("colors.slate.800") + ")",
|
|
"gradient-horizontal-dark": "linear-gradient(90deg,transparent,rgba(0,0,0,.4),transparent)",
|
|
"gradient-horizontal-light": "linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)",
|
|
}),
|
|
backgroundSize: {
|
|
auto: "auto", cover: "cover", contain: "contain", 150: "150%",
|
|
},
|
|
backgroundPosition: {
|
|
bottom: "bottom", center: "center", "x-25": "25% 0",
|
|
left: "left", right: "right", top: "top",
|
|
},
|
|
opacity: {
|
|
0: "0", 5: "0.05", 10: "0.1", 20: "0.2", 25: "0.25", 30: "0.3",
|
|
40: "0.4", 50: "0.5", 60: "0.6", 65: "0.65", 70: "0.7", 75: "0.75",
|
|
80: "0.8", 85: "0.85", 90: "0.9", 95: "0.95", 100: "1",
|
|
},
|
|
scale: {
|
|
0: "0", 50: ".5", 75: ".75", 90: ".9", 95: ".95", 100: "1",
|
|
102: "1.02", 105: "1.05", 110: "1.1", 125: "1.25", 150: "1.5",
|
|
},
|
|
transitionTimingFunction: {
|
|
DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
linear: "linear",
|
|
in: "cubic-bezier(0.4, 0, 1, 1)",
|
|
"in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
out: "cubic-bezier(0, 0, 0.2, 1)",
|
|
"soft": "cubic-bezier(0.25, 0.1, 0.25, 1)",
|
|
"soft-in": "cubic-bezier(0.42, 0, 1, 1)",
|
|
"soft-in-out": "cubic-bezier(0.42, 0, 0.58, 1)",
|
|
"soft-out": "cubic-bezier(0, 0, 0.58, 1)",
|
|
"nav-brand": "cubic-bezier(0.4, 0, 1, 1)",
|
|
},
|
|
transitionDuration: {
|
|
DEFAULT: "150ms", 75: "75ms", 100: "100ms", 150: "150ms",
|
|
200: "200ms", 250: "250ms", 300: "300ms", 500: "500ms",
|
|
600: "600ms", 700: "700ms", 1000: "1000ms",
|
|
},
|
|
zIndex: {
|
|
auto: "auto", 0: "0", 10: "10", 20: "20", 30: "30",
|
|
40: "40", 50: "50", 100: "100", 990: "990", sticky: "1020",
|
|
},
|
|
container: {
|
|
center: true,
|
|
padding: "1.5rem",
|
|
},
|
|
extend: {},
|
|
},
|
|
plugins: [
|
|
plugin(function ({ addComponents, addUtilities }) {
|
|
addUtilities({
|
|
".flex-wrap-inherit": { "flex-wrap": "inherit" },
|
|
".transform3d": {
|
|
transform: "perspective(999px) rotateX(0deg) translateZ(0)",
|
|
},
|
|
".transform3d-hover": {
|
|
transform: "perspective(999px) rotateX(7deg) translate3d(0,-4px,5px)",
|
|
},
|
|
});
|
|
addComponents({
|
|
"h1, h2, h3, h4, h5, h6": {
|
|
"margin-bottom": ".5rem",
|
|
color: "#344767",
|
|
},
|
|
"h1, h2, h3": { "font-weight": "700", "letter-spacing": "-0.05rem" },
|
|
"h4, h5, h6": { "font-weight": "600" },
|
|
h1: { "font-size": "3rem", "line-height": "1.25" },
|
|
h2: { "font-size": "2.25rem", "line-height": "1.3" },
|
|
h3: { "font-size": "1.875rem", "line-height": "1.375" },
|
|
h4: { "font-size": "1.5rem", "line-height": "1.375" },
|
|
h5: { "font-size": "1.25rem", "line-height": "1.375" },
|
|
h6: { "font-size": "1rem", "line-height": "1.625" },
|
|
p: { "line-height": "1.625", "font-weight": "400", "margin-bottom": "1rem" },
|
|
label: { display: "inline-block" },
|
|
hr: { margin: "1rem 0", border: "0", opacity: ".25" },
|
|
});
|
|
}),
|
|
plugin(function ({ matchUtilities, theme }) {
|
|
matchUtilities({
|
|
"bg-gradient": (angle) => ({
|
|
"background-image": `linear-gradient(${angle}, var(--tw-gradient-stops))`,
|
|
}),
|
|
});
|
|
}),
|
|
],
|
|
};
|