/*! * farmers-palette.css v0.1.0 * 農民曆色彩律動 — Seven-Day Mood Palette (七曜日 × 五行) * * Drop-in stylesheet. Set [data-day="0..6"] (0=Sun, 6=Sat) and optionally * [data-luck="auspicious|inauspicious"] on or . * * Use the CSS variables (--fp-bg, --fp-surface, --fp-primary, --fp-accent, * --fp-text, --fp-muted) anywhere in your stylesheet. * * Example: * * * * * License: MIT */ /* Default (= 日 SUN) — used when no data-day is set */ :root { --fp-bg: #FAF3E7; --fp-surface: #FFFFFF; --fp-primary: #FFE5C2; --fp-accent: #E8B97D; --fp-accent-bright: #F4D29E; --fp-accent-muted: #C5B19D; --fp-text: #5C4632; --fp-muted: #A8917A; --fp-transition: 800ms cubic-bezier(0.4, 0, 0.2, 1); } /* ─── 日 SUN · 太陽 · 暖陽 ─────────────────────────────────── */ [data-day="0"] { --fp-bg: #FAF3E7; --fp-surface: #FFFFFF; --fp-primary: #FFE5C2; --fp-accent: #E8B97D; --fp-accent-bright: #F4D29E; --fp-accent-muted: #C5B19D; --fp-text: #5C4632; --fp-muted: #A8917A; } /* ─── 月 MOON · 太陰 · 月白 ─────────────────────────────────── */ [data-day="1"] { --fp-bg: #F2F1FA; --fp-surface: #FFFFFF; --fp-primary: #E4DFF4; --fp-accent: #A89FCB; --fp-accent-bright: #C5BCDF; --fp-accent-muted: #A8A4B8; --fp-text: #3F3A55; --fp-muted: #8A85A6; } /* ─── 火 MARS · 熒惑 · 朝霞 ─────────────────────────────────── */ [data-day="2"] { --fp-bg: #FBEDE8; --fp-surface: #FFFFFF; --fp-primary: #FBD4C9; --fp-accent: #D88E7B; --fp-accent-bright: #ECAA9A; --fp-accent-muted: #B59B95; --fp-text: #5E3A33; --fp-muted: #A88578; } /* ─── 水 MERCURY · 辰星 · 清流 ──────────────────────────────── */ [data-day="3"] { --fp-bg: #E9F4F2; --fp-surface: #FFFFFF; --fp-primary: #CDE7E3; --fp-accent: #7FB7AE; --fp-accent-bright: #A0D5CB; --fp-accent-muted: #9EAEAC; --fp-text: #2D4F4A; --fp-muted: #7AA29C; } /* ─── 木 JUPITER · 歲星 · 春翠 ──────────────────────────────── */ [data-day="4"] { --fp-bg: #EDF4E5; --fp-surface: #FFFFFF; --fp-primary: #D5E5C5; --fp-accent: #8FAE7B; --fp-accent-bright: #ADC59A; --fp-accent-muted: #A2A899; --fp-text: #3C5238; --fp-muted: #7B927A; } /* ─── 金 VENUS · 太白 · 素絹 ────────────────────────────────── */ [data-day="5"] { --fp-bg: #FAF1E0; --fp-surface: #FFFFFF; --fp-primary: #F0DFBF; --fp-accent: #C9A66B; --fp-accent-bright: #E0C18C; --fp-accent-muted: #B5A88E; --fp-text: #574630; --fp-muted: #A89478; } /* ─── 土 SATURN · 鎮星 · 沃土 ───────────────────────────────── */ [data-day="6"] { --fp-bg: #F5EDE0; --fp-surface: #FFFFFF; --fp-primary: #E5D2B5; --fp-accent: #B08D6A; --fp-accent-bright: #CCAA85; --fp-accent-muted: #A89C8B; --fp-text: #544231; --fp-muted: #9C8268; } /* ─── Modifier A · 黃道/黑道 luck ───────────────────────────── * Applied via [data-luck="auspicious"] (黃道吉日) or * [data-luck="inauspicious"] (黑道凶日). Swaps --fp-accent only. * Pre-baked variants — zero runtime color math. */ [data-luck="auspicious"] { --fp-accent: var(--fp-accent-bright); } [data-luck="inauspicious"] { --fp-accent: var(--fp-accent-muted); } /* ─── Smooth transitions (opt-in via .fp-smooth on the root) ── * Add class="fp-smooth" to or for cross-day fades. */ .fp-smooth, .fp-smooth * { transition: background-color var(--fp-transition), color var(--fp-transition), border-color var(--fp-transition); }