struct-ui-components
Version:
A collection of reusable, customizable React components built with TypeScript, Tailwind CSS, and Storybook. Designed for modern UI development with flexibility and scalability.
352 lines (351 loc) • 8.66 kB
JavaScript
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
primary: {
DEFAULT: "#2563eb",
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
950: "#172554",
},
secondary: {
DEFAULT: "#64748b",
50: "#f8fafc",
100: "#f1f5f9",
200: "#e2e8f0",
300: "#cbd5e1",
400: "#94a3b8",
500: "#64748b",
600: "#475569",
700: "#334155",
800: "#1e293b",
900: "#0f172a",
950: "#020617",
},
tertiary: {
DEFAULT: "#9ca3af",
50: "#f9fafb",
100: "#f3f4f6",
200: "#e5e7eb",
300: "#d1d5db",
400: "#9ca3af",
500: "#6b7280",
600: "#4b5563",
700: "#374151",
800: "#1f2937",
900: "#111827",
950: "#030712",
},
teal: {
DEFAULT: "#20B2AA",
50: "#E3F7F6",
100: "#C7F0ED",
200: "#8FE1DC",
300: "#57D2CA",
400: "#29C3BA",
500: "#20B2AA",
600: "#198F88",
700: "#126C66",
800: "#0C4844",
900: "#062422",
950: "#031211",
},
success: {
DEFAULT: "#16a34a",
50: "#f0fdf4",
100: "#dcfce7",
200: "#bbf7d0",
300: "#86efac",
400: "#4ade80",
500: "#22c55e",
600: "#16a34a",
700: "#15803d",
800: "#166534",
900: "#14532d",
950: "#052e16",
},
warning: {
DEFAULT: "#f59e0b",
50: "#fffbeb",
100: "#fef3c7",
200: "#fde68a",
300: "#fcd34d",
400: "#fbbf24",
500: "#f59e0b",
600: "#d97706",
700: "#b45309",
800: "#92400e",
900: "#78350f",
950: "#451a03",
},
danger: {
DEFAULT: "#ef4444",
50: "#fef2f2",
100: "#fee2e2",
200: "#fecaca",
300: "#fca5a5",
400: "#f87171",
500: "#ef4444",
600: "#dc2626",
700: "#b91c1c",
800: "#991b1b",
900: "#7f1d1d",
950: "#450a0a",
},
clear: {
DEFAULT: "#f9fafb", // Very light gray
50: "#f9fafb",
100: "#f9fafb",
200: "#f9fafb",
300: "#f9fafb",
400: "#f9fafb",
500: "#f9fafb",
600: "#f9fafb",
700: "#f9fafb",
800: "#f9fafb",
900: "#f9fafb",
950: "#f9fafb",
},
neutral: {
DEFAULT: "#212529",
50: "#F8F9FA",
100: "#E9ECEF",
200: "#DEE2E6",
300: "#CED4DA",
400: "#ADB5BD",
500: "#6C757D",
600: "#495057",
700: "#343A40",
800: "#212529",
900: "#121416",
950: "#09090A",
},
ocean: {
DEFAULT: "#008080",
50: "#E6F5F5",
100: "#CCECEC",
200: "#99D9D9",
300: "#66C6C6",
400: "#33B3B3",
500: "#008080",
600: "#006666",
700: "#004D4D",
800: "#003333",
900: "#001A1A",
950: "#000D0D",
},
dark: {
primary: {
DEFAULT: "#1A91FF",
50: "#0D1B2A",
100: "#14283F",
200: "#1C3558",
300: "#264871",
400: "#335C8A",
500: "#1A91FF",
600: "#47A5FF",
700: "#75BCFF",
800: "#A3D2FF",
900: "#D1E9FF",
950: "#e0e7ff",
},
secondary: {
DEFAULT: "#475569",
50: "#0f172a",
100: "#1e293b",
200: "#334155",
300: "#475569",
400: "#64748b",
500: "#94a3b8",
600: "#cbd5e1",
700: "#e2e8f0",
800: "#f1f5f9",
900: "#f8fafc",
950: "#ffffff",
},
tertiary: {
DEFAULT: "#6b7280",
50: "#030712",
100: "#111827",
200: "#1f2937",
300: "#374151",
400: "#4b5563",
500: "#6b7280",
600: "#9ca3af",
700: "#d1d5db",
800: "#e5e7eb",
900: "#f3f4f6",
950: "#f9fafb",
},
teal: {
DEFAULT: "#26C9C0",
50: "#071C1B",
100: "#0F302E",
200: "#164541",
300: "#1E5B55",
400: "#257068",
500: "#26C9C0",
600: "#45E1D9",
700: "#75E9E2",
800: "#A5F1EC",
900: "#D2F8F6",
950: "#E8FCFB",
},
success: {
DEFAULT: "#33C755",
50: "#0A1F0E",
100: "#14341A",
200: "#1D4926",
300: "#275F32",
400: "#30743E",
500: "#33C755",
600: "#5DD576",
700: "#86E097",
800: "#AFEAB9",
900: "#D7F5DC",
950: "#EBFAED",
},
warning: {
DEFAULT: "#FFD033",
50: "#2A1E00",
100: "#493300",
200: "#684900",
300: "#875F00",
400: "#A67500",
500: "#FFD033",
600: "#FFDA5C",
700: "#FFE485",
800: "#FFEDAD",
900: "#FFF6D6",
950: "#FFFBEB",
},
danger: {
DEFAULT: "#E84C5A",
50: "#24090C",
100: "#3D1015",
200: "#55161E",
300: "#6E1D27",
400: "#872430",
500: "#E84C5A",
600: "#ED717D",
700: "#F196A0",
800: "#F6BBC2",
900: "#FBDDE1",
950: "#FDEEF0",
},
neutral: {
DEFAULT: "#E9ECEF",
50: "#09090A",
100: "#121416",
200: "#1A1D20",
300: "#212529",
400: "#343A40",
500: "#495057",
600: "#6C757D",
700: "#ADB5BD",
800: "#CED4DA",
900: "#DEE2E6",
950: "#F8F9FA",
},
ocean: {
DEFAULT: "#00B3B3",
50: "#001A1A",
100: "#002929",
200: "#003939",
300: "#004D4D",
400: "#006060",
500: "#00B3B3",
600: "#00CCCC",
700: "#33DCDC",
800: "#66E6E6",
900: "#99F0F0",
950: "#CCF8F8",
},
},
info: {
DEFAULT: "#e0f2fe", // Light blue
50: "#f0f9ff",
100: "#e0f2fe",
200: "#bde0fe",
300: "#9acdfe",
400: "#77bdfd",
500: "#54abfc",
600: "#319afb",
700: "#1e88e5",
800: "#1a76c1",
900: "#17649d",
950: "#0c3a5b",
},
},
},
},
plugins: [],
variants: {
extend: {
backgroundColor: ["dark"],
textColor: ["dark"],
borderColor: ["dark"],
divideColor: ["dark"],
},
},
safelist: [
"bg-primary",
"bg-primary-dark",
"bg-primary-light",
"bg-secondary",
"bg-secondary-dark",
"bg-secondary-light",
"bg-tertiary",
"bg-tertiary-dark",
"bg-tertiary-light",
"bg-clear",
"bg-clear-dark",
"bg-clear-light",
"bg-background",
"bg-background-dark",
"bg-background-light",
"bg-text",
"bg-text-dark",
"bg-text-light",
"bg-warning",
"bg-warning-dark",
"bg-warning-light",
"bg-alert",
"bg-alert-dark",
"bg-alert-light",
"text-primary",
"text-primary-dark",
"text-primary-light",
"text-secondary",
"text-secondary-dark",
"text-secondary-light",
"text-tertiary",
"text-tertiary-dark",
"text-tertiary-light",
"text-clear",
"text-clear-dark",
"text-clear-light",
"text-background",
"text-background-dark",
"text-background-light",
"text-text",
"text-text-dark",
"text-text-light",
"text-warning",
"text-warning-dark",
"text-warning-light",
"text-alert",
"text-alert-dark",
"text-alert-light",
],
};