ui-humix-lib
Version:
A simple package for implementinghumix design components in react-based or node.js based projects.
99 lines (96 loc) • 2.75 kB
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
// Device breakpoints
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
},
extend: {
colors: {
border: "#8e9393",
input: "#16191b",
ring: "#5ac27d",
background: { DEFAULT: "#fafafa", dark: "#010101" },
foreground: { DEFAULT: "#010101", dark: "#fafafa" },
primary: {
DEFAULT: "#03dbfc",
foreground: "#010101",
},
secondary: {
DEFAULT: "#fce652",
foreground: "#010101",
},
destructive: {
DEFAULT: "#b9474e",
foreground: "#fafafa",
},
muted: {
DEFAULT: "#383838",
foreground: "#727272",
},
accent: {
DEFAULT: "#198DBE",
foreground: "#fafafa",
},
popover: {
DEFAULT: "#fafafa",
foreground: "#010101",
},
card: {
DEFAULT: "#fafafa",
foreground: "#010101",
},
},
borderRadius: {
xl: `calc(var(--radius) + 4px)`,
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: "calc(var(--radius) - 4px)",
box: "0.5rem", // For general UI elements
btn: "0.5rem", // Specifically for buttons
badge: "9999px", // Full rounding for badges
},
fontFamily: {
// Font families aligned with those defined in global.css
mono: ['"Monaspace Neon Var"', "monospace"], // Specific monospace font
sans: ['"Inter Variable"', "sans-serif"], // Primary sans-serif font
},
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" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
transitionDuration: {
// Transition durations as custom properties
btn: "250ms", // Button interaction
input: "200ms", // Input field focus animation
},
borderWidth: {
// Standardizing border widths for UI consistency
DEFAULT: "1px",
tab: "1px", // Specific for tab elements
},
},
},
plugins: [require("tailwindcss-animate")],
};