const tailwindColors = require("tailwindcss/colors"); const colors = { transparent: "transparent", current: "currentColor", black: tailwindColors.black, white: tailwindColors.white, gray: { 50: "#F9FAFB", 100: "#F3F4F6", 200: "#E5E7EB", 300: "#D1D5DB", 400: "#9CA3AF", 500: "#6B7280", 600: "#4B5563", 700: "#374151", 800: "#1F2937", 900: "#111827", transparent: { 50: "rgba(0, 12, 39, 0.06)", 100: "rgba(0, 12, 39, 0.1)", 200: "rgba(0, 12, 39, 0.18)", }, }, green: { 50: "#E8F3F1", 100: "#D1E7E2", 200: "#A3CFC5", 300: "#76B8AA", 400: "#48A08D", 500: "#1A8871", 600: "#137464", 700: "#0D6159", 800: "#084C4E", 900: "#013C43", }, red: { 50: "#FEF2F2", 100: "#FEE2E2", 200: "#FECACA", 300: "#FCA5A5", 400: "#F87171", 500: "#EF4444", 600: "#DC2626", 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", }, blue: { 50: "#F0F9FF", 100: "#E0F2FE", 200: "#BAE6FD", 300: "#7DD3FC", 400: "#38BDF8", 500: "#0EA5E9", 600: "#0284C7", 700: "#0369A1", 800: "#075985", 900: "#0C4A6E", }, teal: tailwindColors.teal, }; const colorAliases = { primary: { ...colors.green, }, positive: { ...colors.green, }, negative: { ...colors.red, }, warning: { ...colors.amber, }, info: { ...colors.blue, }, background: { header: { DEFAULT: "#427484", }, light: { 1: colors.white, 2: colors.gray[50], 3: colors.gray[100], }, dark: { 1: colors.gray[900], 2: colors.gray[800], 3: colors.gray[700], }, primary: { DEFAULT: colors.green[500], light: colors.green[100], }, negative: { DEFAULT: colors.red[600], light: colors.red[100], }, warning: { DEFAULT: colors.amber[500], light: colors.amber[50], }, positive: { DEFAULT: colors.green[500], light: colors.green[100], }, info: { DEFAULT: colors.blue[600], light: colors.blue[100], }, }, content: { dark: { 1: colors.gray[900], 2: colors.gray[800], 3: colors.gray[600], muted: colors.gray[400], }, light: { 1: colors.white, 2: colors.gray[200], muted: colors.gray[400], }, primary: { DEFAULT: colors.green[500], dark: colors.green[600], inverse: colors.green[300], "inverse-vivid": "#009979", }, negative: { DEFAULT: colors.red[600], dark: colors.red[700], inverse: colors.red[300], }, warning: { DEFAULT: colors.amber[600], dark: colors.amber[700], inverse: colors.amber[300], }, positive: { DEFAULT: colors.green[500], dark: colors.green[600], inverse: colors.green[300], }, info: { DEFAULT: colors.blue[600], dark: colors.blue[700], inverse: colors.blue[300], }, }, }; const screens = { xs: "380px", sm: "576px", md: "768px", lg: "992px", xl: "1200px", "2xl": "1400px", "3xl": "1600px", max: "1800px", "max-sm": { max: "576px" }, "max-md": { max: "768px" }, "max-lg": { max: "992px" }, "max-xl": { max: "1200px" }, "max-2xl": { max: "1400px" }, "max-max": { max: "1800px" }, letterbox: { raw: "(max-height: 760px) and (min-width: 576px)" }, print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px }; const fontSize = { "para-xs": ["12px", "16px"], "para-sm": ["14px", "20px"], "para-md": ["16px", "24px"], "para-lg": ["18px", "27px"], "label-xxs": ["10px", "12px"], "label-xs": ["12px", "14px"], "label-sm": ["14px", "16px"], "label-md": ["16px", "20px"], "label-lg": ["18px", "24px"], "display-1": ["96px", "96px"], "display-2": ["80px", "84px"], "display-3": ["64px", "68px"], "display-4": ["48px", "52px"], "relaxed-display-1": ["96px", "104px"], "relaxed-display-2": ["80px", "88px"], "relaxed-display-3": ["64px", "72px"], "relaxed-display-4": ["48px", "56px"], "heading-1": ["40px", "48px"], "heading-2": ["32px", "40px"], "heading-3": ["28px", "36px"], "heading-4": ["24px", "30px"], "heading-5": ["20px", "24px"], "heading-6": ["16px", "20px"], "subheading-1": ["32px", "40px"], "subheading-2": ["24px", "32px"], "subheading-3": ["20px", "28px"], "subheading-4": ["16px", "24px"], }; module.exports = { colors: { ...colors, ...colorAliases, }, screens, fontSize, fontFamily: { displaySans: "proxima-nova", bodySans: "proxima-nova", displaySerif: "merriweather", }, };