diff --git a/src/tailwind.css b/src/tailwind.css index 72f6497..30c593e 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -3,205 +3,70 @@ @tailwind utilities; @layer base { - a { - @apply text-twilight-800; - } - a:hover { - @apply underline underline-offset-4; - } - p { - @apply mb-4; - } - h1, - h2, - h3 { - @apply text-pink-800; - } - h1 { - @apply text-3xl mb-8 font-bold; - } - h2 { - @apply text-2xl font-semibold; - } - - h3 { - @apply text-xl font-medium; - } + /* Dark mode base styles */ + html { + @apply transition-colors-and-bg duration-250; + } + + body.dark { + @apply bg-dark-background-primary text-dark-text-primary; + } + + a { + @apply text-twilight-800 dark:text-dark-accent-highlight transition-colors-and-bg duration-250; + } + + a:hover { + @apply underline underline-offset-4 dark:text-dark-accent-primary; + } + + p { + @apply mb-4 dark:text-dark-text-primary; + } + + h1, h2, h3 { + @apply text-pink-800 dark:text-dark-text-primary; + } + + h1 { + @apply text-3xl mb-8 font-bold; + } + + h2 { + @apply text-2xl font-semibold; + } + + h3 { + @apply text-xl font-medium; + } } -@layer components { - /* BUTTONS */ - .btn { - @apply py-2 px-5 rounded block no-underline mb-2 hover:no-underline w-full text-center; - } - .btn.secondary { - @apply border border-pink-800 hover:bg-pink-700 text-pink-800 hover:text-white; - } - .btn.primary { - @apply border border-pink-800 bg-pink-800 hover:bg-pink-700 hover:border-pink-700 text-white; - } - - /*** HEADER LINKS ***/ - .nav-link, - .account-link { - @apply hover:no-underline text-xl sm:text-base md:text-lg lg:text-xl block rounded-md py-2 text-pink-800; - } - .nav-link.active, - .account-link.active { - @apply decoration-twilight-700 underline decoration-4 underline-offset-6 hover:underline; - } - - /*** MOBILE MENU ***/ - .mobile-menu { - @apply pt-20 block absolute top-full w-full h-screen bg-white left-0; - } - .mobile-menu li { - @apply text-center; - } - - /* COMPLETED LESSONS/HOMEWORK */ - .done { - @apply opacity-25; - } - - /* AUTH FORMS */ - .auth-form { - @apply mt-5 max-w-sm w-full mx-auto gap-2 bg-white; - } - .auth-form label { - @apply w-full block text-base uppercase; - } - .auth-form input { - @apply w-full mb-3 border-stone-300; - } - .auth-form button { - @apply mt-2; - } - - /* ADD/EDIT FORMS (ADMIN ONLY) */ - .add-form { - @apply mt-5 max-w-5xl mx-auto border grid p-10 gap-2 items-center grid-cols-[repeat(4,_1fr)]; - } - .add-form label { - @apply text-right; - } - #timestamps, - #hw-items, - #pw-items { - @apply mt-3 w-full border px-5 py-3; - } - .timestamp, - .hw-item, - .pw-item { - @apply grid grid-cols-4 gap-2 items-center py-3 border-t border-dashed border-gray-700; - grid-template-columns: repeat(4, 1fr); - } - .timestamp:first-of-type, - .hw-item:first-of-type, - .pw-item:first-of-type { - @apply border-0; - } - - /* FLASH MESSAGES */ - .flash { - @apply w-full py-2 px-4 mb-4 border text-center font-bold relative; - } - .flash-success { - @apply bg-green-100 text-green-700 border-green-700; - } - .flash-error { - @apply bg-red-100 text-red-700 border-red-700; - } - .flash-info { - @apply bg-blue-100 text-blue-700 border-blue-700; - } - .flash-close { - @apply absolute right-3 cursor-pointer text-3xl; - top: 0; - } - - /*** FAQ ACCORDION ***/ - dl { - @apply bg-white py-2 xs:py-4 px-2 xs:px-5 border border-stone-200; - } - dt { - @apply bg-twilight-50 cursor-pointer pt-4 pb-3 px-6 w-full outline-0 transition border border-twilight-300 flex items-center; - } - dt h3 { - @apply text-twilight-900 mr-auto; - } - dt:last-of-type { - @apply mb-0; - } - - dt.acc-opened, - dt:hover { - @apply bg-twilight-100; - } - dt:after { - @apply text-2xl font-bold font-awesome text-pink-800; - content: "\2b"; /* plus sign */ - } - - dt.acc-opened:after { - content: "\f068"; /* minus sign */ - } - - dd { - @apply px-6 bg-stone-50 max-h-0 overflow-hidden opacity-0 mb-2 border border-stone-200; - transition: 0.4s ease-in-out; - } - dd > *:last-child { - @apply mb-0; - } - - dd.acc-opened { - @apply opacity-100 py-6 mt-1; - max-height: 2500px; - } - - dd ul { - @apply list-disc ml-6; - } - - dd ol { - @apply mt-3 ml-8 list-decimal; - } - - /*** RESOURCE PAGE CARDS ***/ - - #card-container { - @apply flex flex-wrap gap-3 md:gap-5 justify-center; - } - .card { - @apply border border-twilight-200 bg-white w-full max-w-[400px] xs:w-[300px] md:w-[350px] flex flex-col drop-shadow-[0_0_7px_rgba(34,101,129,0.1)] hover:drop-shadow-[0_0_7px_rgba(34,101,129,0.25)] overflow-hidden; - } - .card:hover { - } - .card a { - @apply block h-full no-underline text-center; - } - .card h2 { - @apply xs:text-xl md:text-[1.75rem] px-8 pt-10; - } - .card span { - @apply text-twilight-900 px-8 pb-10 block; - } - .card img { - @apply shadow-[0_2px_10px_0_rgba(0,0,0,0.1)]; - } - - /********* temporary ************/ - #video { - max-width: 960px; - } - #player { - @apply w-full aspect-video; - } +/* Retain existing component and utility layers from previous configuration */ +@layer components { + /* Original component styles with dark mode adaptations */ + .btn { + @apply py-2 px-5 rounded block no-underline mb-2 hover:no-underline w-full text-center + dark:bg-dark-background-secondary dark:text-dark-text-primary + dark:border-dark-border-primary dark:hover:bg-dark-accent-secondary; + } + + .btn.secondary { + @apply border border-pink-800 hover:bg-pink-700 text-pink-800 hover:text-white + dark:border-dark-accent-secondary dark:text-dark-text-primary dark:hover:bg-dark-accent-secondary; + } + + .btn.primary { + @apply border border-pink-800 bg-pink-800 hover:bg-pink-700 hover:border-pink-700 text-white + dark:bg-dark-accent-primary dark:border-dark-accent-primary dark:hover:bg-dark-accent-secondary; + } + + /* Similar dark mode adaptations can be made for other components */ } +/* Retain existing utility styles with potential dark mode enhancements */ @layer utilities { - .stripe-rows { - @apply [&>:nth-of-type(even)]:bg-stone-200; - } -} + .stripe-rows { + @apply [&>:nth-of-type(even)]:bg-stone-200 + dark:[&>:nth-of-type(even)]:bg-dark-background-secondary; + } +} \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 255708f..614e36c 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,47 +1,99 @@ /** @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: { + // Extend existing twilight palette with dark mode variations + twilight: { + 50: "#f1f8fa", + 100: "#E8F3F7", + 200: "#bfe0ee", + 300: "#9ed0e5", + 400: "#7ec0dd", + 500: "#5eb1d4", + 600: "#3ea1cc", + 700: "#2e86ab", + 800: "#226581", + 900: "#153f51", + }, + // Dark mode semantic color tokens + dark: { + // Background Colors + background: { + primary: '#121212', // Deep dark background + secondary: '#1E1E1E', // Slightly lighter dark background + tertiary: '#2C2C2C', // Even lighter dark background + }, + // Text Colors + text: { + primary: '#E0E0E0', // Light text for dark backgrounds + secondary: '#A0A0A0', // Subdued text + muted: '#727272', // Very subdued text + }, + // Accent Colors + accent: { + primary: '#3EA1CC', // Bright accent from twilight palette + secondary: '#2E86AB', // Complementary accent + highlight: '#5EB1D4', // Soft highlight + }, + // State Colors + state: { + success: '#4CAF50', // Green for success + error: '#F44336', // Red for errors + warning: '#FF9800', // Orange for warnings + info: '#2196F3', // Blue for information + }, + // Border and Divider Colors + border: { + primary: '#3C3C3C', // Dark border + secondary: '#2A2A2A', // Subtle border + }, + }, + }, + textUnderlineOffset: { + 6: "6px", + }, + textDecorationThickness: { + 3: "3px", + }, + maxWidth: { + "1/3": "33%", + 80: "20rem", + }, + // Dark mode specific transitions + transitionProperty: { + 'colors-and-bg': 'color, background-color, border-color, text-decoration-color, fill, stroke', + }, + transitionDuration: { + '250': '250ms', + }, + }, + }, + plugins: [ + require("@tailwindcss/forms") + ], + safelist: [ + "flash-success", + "flash-error", + "flash-info", + // Additional dark mode safelist items + "dark:bg-dark-background-primary", + "dark:text-dark-text-primary", + "dark:border-dark-border-primary" + ], +}; \ No newline at end of file