From ca8a4714dbc78705b751ef8ff2b75a4aed3384b4 Mon Sep 17 00:00:00 2001 From: momstrosity Date: Tue, 20 May 2025 13:36:14 +0000 Subject: [PATCH 1/4] Start draft PR From 6d427f305e6a93bff28a3f5655189e88f6d5ff09 Mon Sep 17 00:00:00 2001 From: momstrosity Date: Tue, 20 May 2025 13:36:41 +0000 Subject: [PATCH 2/4] Add comprehensive dark mode color palette to Tailwind configuration --- tailwind.config.cjs | 147 ++++++++++++++++++++++++++++++-------------- 1 file changed, 102 insertions(+), 45 deletions(-) diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 255708f..10cd842 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,47 +1,104 @@ /** @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"], -}; + content: ["./src/views/**/*.pug", "./src/assets/js/*.js"], + darkMode: 'class', // Enable class-based dark mode + 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: { + // Maintain existing light mode 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 palette + dark: { + background: { + primary: "#121212", // Deep dark background + secondary: "#1E1E1E", // Slightly lighter background + tertiary: "#2C2C2C", // Card/section background + }, + text: { + primary: "#E0E0E0", // Primary text color + secondary: "#A0A0A0", // Secondary/muted text + inverse: "#FFFFFF", // Text on dark backgrounds + }, + accent: { + 50: "#E6F3FF", // Lightest accent + 100: "#CCE6FF", // Light accent + 500: "#2E86AB", // Primary accent (from light mode) + 700: "#1E5F7D", // Dark accent + 900: "#0E3B4D", // Darkest accent + }, + border: { + default: "#3A3A3A", // Default border color + hover: "#4A4A4A", // Border on hover + focus: "#5E5E5E", // Border on focus + }, + interactive: { + default: "#2E86AB", // Default interactive color + hover: "#3EA1CC", // Hover state + active: "#1E5F7D", // Active/pressed state + }, + semantic: { + success: { + bg: "#2E7D32", // Success background + text: "#81C784", // Success text + }, + error: { + bg: "#C62828", // Error background + text: "#EF5350", // Error text + }, + warning: { + bg: "#F9A825", // Warning background + text: "#FDD835", // Warning text + }, + info: { + bg: "#1565C0", // Info background + text: "#64B5F6", // Info text + } + } + } + }, + textUnderlineOffset: { + 6: "6px", + }, + textDecorationThickness: { + 3: "3px", + }, + maxWidth: { + "1/3": "33%", + 80: "20rem", + }, + }, + }, + plugins: [require("@tailwindcss/forms")], + safelist: [ + "flash-success", + "flash-error", + "flash-info", + // Add dark mode safelist for safety + "dark:bg-dark-background-primary", + "dark:text-dark-text-primary" + ], +}; \ No newline at end of file From 42fdc9cd99b84a7a7538959bc2e4e2bb53c03e44 Mon Sep 17 00:00:00 2001 From: momstrosity Date: Tue, 20 May 2025 13:36:54 +0000 Subject: [PATCH 3/4] Add tests for dark mode color palette configuration --- tests/tailwind-dark-mode.test.js | 40 ++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 tests/tailwind-dark-mode.test.js diff --git a/tests/tailwind-dark-mode.test.js b/tests/tailwind-dark-mode.test.js new file mode 100644 index 0000000..44d71f9 --- /dev/null +++ b/tests/tailwind-dark-mode.test.js @@ -0,0 +1,40 @@ +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 a comprehensive dark mode color palette', () => { + const darkColors = fullConfig.theme.colors.dark; + + // Test background colors + expect(darkColors.background).toBeDefined(); + expect(darkColors.background.primary).toBe('#121212'); + expect(darkColors.background.secondary).toBe('#1E1E1E'); + expect(darkColors.background.tertiary).toBe('#2C2C2C'); + + // Test text colors + expect(darkColors.text).toBeDefined(); + expect(darkColors.text.primary).toBe('#E0E0E0'); + expect(darkColors.text.secondary).toBe('#A0A0A0'); + expect(darkColors.text.inverse).toBe('#FFFFFF'); + + // Test accent colors + expect(darkColors.accent).toBeDefined(); + expect(darkColors.accent[500]).toBe('#2E86AB'); + expect(darkColors.accent[900]).toBe('#0E3B4D'); + + // Test semantic colors + expect(darkColors.semantic.success).toBeDefined(); + expect(darkColors.semantic.error).toBeDefined(); + expect(darkColors.semantic.warning).toBeDefined(); + expect(darkColors.semantic.info).toBeDefined(); + }); + + it('should maintain light mode twilight palette', () => { + const twilightColors = fullConfig.theme.colors.twilight; + expect(twilightColors[50]).toBe('#f1f8fa'); + expect(twilightColors[900]).toBe('#153f51'); + }); +}); \ No newline at end of file From 9378749e87957146e88a90aef7ebc175d655a040 Mon Sep 17 00:00:00 2001 From: momstrosity Date: Tue, 20 May 2025 13:37:09 +0000 Subject: [PATCH 4/4] Add simple configuration test for dark mode palette --- tests/dark-mode-palette.test.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 tests/dark-mode-palette.test.js diff --git a/tests/dark-mode-palette.test.js b/tests/dark-mode-palette.test.js new file mode 100644 index 0000000..c66c74b --- /dev/null +++ b/tests/dark-mode-palette.test.js @@ -0,0 +1,14 @@ +const tailwindConfig = require('../tailwind.config.cjs'); + +describe('Dark Mode Color Palette', () => { + it('should have dark mode configuration', () => { + expect(tailwindConfig.darkMode).toBe('class'); + expect(tailwindConfig.theme.extend.colors.dark).toBeDefined(); + }); + + it('should have background colors', () => { + const darkBackground = tailwindConfig.theme.extend.colors.dark.background; + expect(darkBackground.primary).toBe('#121212'); + expect(darkBackground.secondary).toBe('#1E1E1E'); + }); +}); \ No newline at end of file