diff --git a/package.json b/package.json index 05e8ade..63e3aaa 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "main": "src/server.js", "type": "module", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", + "test": "vitest run", + "test:watch": "vitest watch", "start": "node .", "dev": "nodemon . --ignore 'src/assets/js/*.js' --ignore 'cypress/**/*.js' --ignore 'test/**/*.js'", "css": "npx tailwindcss -i ./src/tailwind.css -o ./src/assets/css/index.css --watch", @@ -58,4 +59,4 @@ "tailwindcss": "^3.1.8", "vitest": "^3.0.7" } -} +} \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 255708f..fbd3665 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,47 +1,94 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/views/**/*.pug", "./src/assets/js/*.js"], - theme: { - screens: { - xs: "640px", - sm: "780px", - md: "926px", - lg: "1024px", - xl: "1280px", - "2xl": "1536px", - }, - extend: { - fontFamily: { - logo: ["Orienta", "serif"], - main: ["Poppins", "sans-serif"], - awesome: ['"Font Awesome 6 Free"'], - }, - colors: { - twilight: { - 50: "#f1f8fa", - 100: "#E8F3F7", - 200: "#bfe0ee", - 300: "#9ed0e5", - 400: "#7ec0dd", - 500: "#5eb1d4", - 600: "#3ea1cc", - 700: "#2e86ab", - 800: "#226581", - 900: "#153f51", - }, - }, - textUnderlineOffset: { - 6: "6px", - }, - textDecorationThickness: { - 3: "3px", - }, - maxWidth: { - "1/3": "33%", - 80: "20rem", - }, - }, - }, - plugins: [require("@tailwindcss/forms")], - safelist: ["flash-success", "flash-error", "flash-info"], -}; + // Enable dark mode using class strategy + darkMode: 'class', + content: ["./src/views/**/*.pug", "./src/assets/js/*.js"], + theme: { + screens: { + xs: "640px", + sm: "780px", + md: "926px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", + }, + extend: { + // Existing font configurations + fontFamily: { + logo: ["Orienta", "serif"], + main: ["Poppins", "sans-serif"], + awesome: ['"Font Awesome 6 Free"'], + }, + + // Expanded color palette with dark mode variants + colors: { + // Existing twilight palette + twilight: { + 50: "#f1f8fa", + 100: "#E8F3F7", + 200: "#bfe0ee", + 300: "#9ed0e5", + 400: "#7ec0dd", + 500: "#5eb1d4", + 600: "#3ea1cc", + 700: "#2e86ab", + 800: "#226581", + 900: "#153f51", + }, + + // Dark mode color tokens + 'dark': { + // Background colors + background: { + DEFAULT: '#121212', // Deep dark background + secondary: '#1E1E1E', // Slightly lighter for secondary areas + tertiary: '#2C2C2C', // Even lighter for tertiary elements + }, + + // Text colors with good contrast + text: { + primary: '#E0E0E0', // Light text for readability + secondary: '#A0A0A0', // Subdued text + muted: '#6E6E6E', // Very subtle text + }, + + // Accent colors + accent: { + primary: '#3EA1CC', // Derived from twilight palette + secondary: '#2E86AB', // Complementary accent + highlight: '#50C878', // Bright highlight color + }, + + // Interactive states + interactive: { + hover: '#3EA1CC', + active: '#2E86AB', + focus: '#50C878', + }, + + // Border and divider colors + border: { + DEFAULT: '#3A3A3A', + subtle: '#2A2A2A', + }, + }, + }, + + // Text underline and decoration settings + textUnderlineOffset: { + 6: "6px", + }, + textDecorationThickness: { + 3: "3px", + }, + + // Maximum width configurations + maxWidth: { + "1/3": "33%", + 80: "20rem", + }, + }, + }, + plugins: [require("@tailwindcss/forms")], + safelist: ["flash-success", "flash-error", "flash-info"], +}; \ No newline at end of file diff --git a/tests/tailwind-dark-mode.test.js b/tests/tailwind-dark-mode.test.js new file mode 100644 index 0000000..f20bcb3 --- /dev/null +++ b/tests/tailwind-dark-mode.test.js @@ -0,0 +1,35 @@ +import { describe, it, expect } from 'vitest'; +import resolveConfig from 'tailwindcss/resolveConfig'; +import tailwindConfig from '../tailwind.config.cjs'; + +const fullConfig = resolveConfig(tailwindConfig); + +describe('Tailwind Dark Mode Color Palette', () => { + it('should have dark mode color tokens', () => { + const darkColors = fullConfig.theme.colors.dark; + + // Check background colors + expect(darkColors.background.DEFAULT).toBe('#121212'); + expect(darkColors.background.secondary).toBe('#1E1E1E'); + expect(darkColors.background.tertiary).toBe('#2C2C2C'); + + // Check text colors + expect(darkColors.text.primary).toBe('#E0E0E0'); + expect(darkColors.text.secondary).toBe('#A0A0A0'); + expect(darkColors.text.muted).toBe('#6E6E6E'); + + // Check accent colors + expect(darkColors.accent.primary).toBe('#3EA1CC'); + expect(darkColors.accent.secondary).toBe('#2E86AB'); + expect(darkColors.accent.highlight).toBe('#50C878'); + }); + + it('should have dark mode configuration enabled', () => { + expect(fullConfig.darkMode).toBe('class'); + }); + + it('should maintain existing twilight color palette', () => { + const twilightColors = fullConfig.theme.colors.twilight; + expect(twilightColors[900]).toBe('#153f51'); + }); +}); \ No newline at end of file