/* ========================================================================== Makamboo Recipes palettes Generated. Each block redefines colour tokens only, so switching a palette never changes spacing, type, radius, shadow or layout. Contract: set data-palette on the html element, for example . With no attribute the :root values in main.css apply, which are the default palette. Every palette is verified against WCAG AA, including the ad slot placeholders, the share controls and interactive states. See README.md. ========================================================================== */ /* -------------------------------------------------------------------------- Default -------------------------------------------------------------------------- */ /* Default */ [data-palette="default"] { --color-brand: #b64f2b; --color-brand-dark: #8f3c1d; --color-brand-soft: #f9ece5; --color-accent: #4f6146; --color-accent-soft: #eceee8; --color-ink: #1f1b18; --color-ink-muted: #5d564f; --color-ink-faint: #756d65; --color-surface: #fff; --color-surface-alt: #f6f2ec; --color-ad-fill: #ebe7e0; --color-line: #cfc7bd; } /* -------------------------------------------------------------------------- Seasons -------------------------------------------------------------------------- */ /* Spring */ [data-palette="spring"] { --color-brand: #497b3e; --color-brand-dark: #355c2c; --color-brand-soft: #e8f2e2; --color-accent: #a34a63; --color-accent-soft: #f7e7ec; --color-ink: #1e2418; --color-ink-muted: #55604e; --color-ink-faint: #697263; --color-surface: #fffdf8; --color-surface-alt: #f2f5ea; --color-ad-fill: #e7ebdd; --color-line: #c6ccbb; } /* Summer */ [data-palette="summer"] { --color-brand: #9a6400; --color-brand-dark: #6f4700; --color-brand-soft: #fdf0d2; --color-accent: #1d6fa5; --color-accent-soft: #e2f0fa; --color-ink: #16202a; --color-ink-muted: #4e5b66; --color-ink-faint: #67737c; --color-surface: #fff; --color-surface-alt: #f2f7fb; --color-ad-fill: #e6eef5; --color-line: #c3cfd9; } /* Autumn */ [data-palette="autumn"] { --color-brand: #b0511f; --color-brand-dark: #7d3813; --color-brand-soft: #f8e8dc; --color-accent: #7d5a10; --color-accent-soft: #f6ecd4; --color-ink: #2a1d14; --color-ink-muted: #61503f; --color-ink-faint: #7c6955; --color-surface: #fffaf5; --color-surface-alt: #f7eee4; --color-ad-fill: #ece1d4; --color-line: #d0c2b1; } /* Winter */ [data-palette="winter"] { --color-brand: #3a5f80; --color-brand-dark: #274460; --color-brand-soft: #e6eef5; --color-accent: #4a6070; --color-accent-soft: #e8edf1; --color-ink: #1b2229; --color-ink-muted: #4f5a64; --color-ink-faint: #656f78; --color-surface: #fdfefe; --color-surface-alt: #eef2f5; --color-ad-fill: #e2e8ed; --color-line: #c1c9cf; } /* -------------------------------------------------------------------------- Regional -------------------------------------------------------------------------- */ /* Caribbean */ [data-palette="caribbean"] { --color-brand: #067a80; --color-brand-dark: #045357; --color-brand-soft: #dcf2f2; --color-accent: #b34430; --color-accent-soft: #fbe6e0; --color-ink: #12262a; --color-ink-muted: #47605f; --color-ink-faint: #5f7473; --color-surface: #fff; --color-surface-alt: #edf7f6; --color-ad-fill: #dff0ee; --color-line: #bad1cf; } /* East Asian */ [data-palette="east-asian"] { --color-brand: #9e2b2b; --color-brand-dark: #6f1c1c; --color-brand-soft: #f7e3e0; --color-accent: #1f6b52; --color-accent-soft: #e0efe8; --color-ink: #1a1618; --color-ink-muted: #55494c; --color-ink-faint: #786a6c; --color-surface: #fffdfb; --color-surface-alt: #f5efe9; --color-ad-fill: #eae2da; --color-line: #cdc3ba; } /* South Asian */ [data-palette="south-asian"] { --color-brand: #9d5e0a; --color-brand-dark: #74440a; --color-brand-soft: #fbeed6; --color-accent: #26643a; --color-accent-soft: #e2efe4; --color-ink: #241a10; --color-ink-muted: #5e4f3c; --color-ink-faint: #7c6b54; --color-surface: #fffcf5; --color-surface-alt: #f8f0de; --color-ad-fill: #ece2cc; --color-line: #cfc3a9; } /* Mediterranean */ [data-palette="mediterranean"] { --color-brand: #ae5439; --color-brand-dark: #7d3826; --color-brand-soft: #f8e7e0; --color-accent: #1f5f80; --color-accent-soft: #e0eef4; --color-ink: #22231b; --color-ink-muted: #575a49; --color-ink-faint: #6d705d; --color-surface: #fffdf7; --color-surface-alt: #f4f2e6; --color-ad-fill: #e8e6d6; --color-line: #cbc6b3; } /* West African */ [data-palette="west-african"] { --color-brand: #33408c; --color-brand-dark: #232c63; --color-brand-soft: #e5e7f5; --color-accent: #a2472a; --color-accent-soft: #f7e5de; --color-ink: #1a1a24; --color-ink-muted: #4e4e5e; --color-ink-faint: #6c6c7b; --color-surface: #fffdf9; --color-surface-alt: #f2f0ea; --color-ad-fill: #e6e3da; --color-line: #c8c4b8; } /* Latin American */ [data-palette="latin-american"] { --color-brand: #b53225; --color-brand-dark: #7f2018; --color-brand-soft: #fae2df; --color-accent: #3f7048; --color-accent-soft: #e6f0e6; --color-ink: #1f1c1c; --color-ink-muted: #57504f; --color-ink-faint: #756c6b; --color-surface: #fffdfa; --color-surface-alt: #fdeef2; --color-ad-fill: #f0dfe4; --color-line: #d3bfc5; } /* Middle Eastern */ [data-palette="middle-eastern"] { --color-brand: #9c3324; --color-brand-dark: #6f2118; --color-brand-soft: #f8e4df; --color-accent: #17615f; --color-accent-soft: #dfeeed; --color-ink: #241d16; --color-ink-muted: #5d5145; --color-ink-faint: #776a5c; --color-surface: #fffcf6; --color-surface-alt: #f5eee0; --color-ad-fill: #eae1cf; --color-line: #cdc2ad; } /* Nordic */ [data-palette="nordic"] { --color-brand: #3d5a73; --color-brand-dark: #2a4054; --color-brand-soft: #e7eef3; --color-accent: #6a5a48; --color-accent-soft: #eeeae3; --color-ink: #1c2126; --color-ink-muted: #515961; --color-ink-faint: #697077; --color-surface: #fdfdfd; --color-surface-alt: #f0f3f5; --color-ad-fill: #e5e9ec; --color-line: #c5cace; } /* Southeast Asian */ [data-palette="southeast-asian"] { --color-brand: #4f7a1f; --color-brand-dark: #375614; --color-brand-soft: #ebf3dd; --color-accent: #b23a20; --color-accent-soft: #f9e4de; --color-ink: #1b2117; --color-ink-muted: #505b48; --color-ink-faint: #68725f; --color-surface: #fffef8; --color-surface-alt: #f1f5e8; --color-ad-fill: #e5ebd8; --color-line: #c4ccb4; } /* French */ [data-palette="french"] { --color-brand: #2f4b8f; --color-brand-dark: #21356b; --color-brand-soft: #e6ebf7; --color-accent: #7d2440; --color-accent-soft: #f4e2e7; --color-ink: #1d1f26; --color-ink-muted: #52555f; --color-ink-faint: #6b6e77; --color-surface: #fffdf6; --color-surface-alt: #f5f1e4; --color-ad-fill: #e9e4d3; --color-line: #cbc5b2; } /* Italian */ [data-palette="italian"] { --color-brand: #b33627; --color-brand-dark: #7f2419; --color-brand-soft: #fae3df; --color-accent: #3a6b39; --color-accent-soft: #e6f0e4; --color-ink: #201d18; --color-ink-muted: #56514a; --color-ink-faint: #746e65; --color-surface: #fffef7; --color-surface-alt: #f5f2e6; --color-ad-fill: #eae5d6; --color-line: #ccc6b3; } /* Japanese */ [data-palette="japanese"] { --color-brand: #2b4a72; --color-brand-dark: #1d3352; --color-brand-soft: #e5ecf4; --color-accent: #4a6b2f; --color-accent-soft: #eaf0e2; --color-ink: #1a1c1f; --color-ink-muted: #4e5359; --color-ink-faint: #686d74; --color-surface: #fdfcf9; --color-surface-alt: #f1efe9; --color-ad-fill: #e6e3db; --color-line: #c8c4bb; } /* -------------------------------------------------------------------------- Holiday -------------------------------------------------------------------------- */ /* Christmas */ [data-palette="christmas"] { --color-brand: #a3242f; --color-brand-dark: #741820; --color-brand-soft: #f8e1e3; --color-accent: #1d5537; --color-accent-soft: #e0ece5; --color-ink: #1a1f1c; --color-ink-muted: #4c554f; --color-ink-faint: #667069; --color-surface: #fffdfb; --color-surface-alt: #f3f0ea; --color-ad-fill: #e9e4d8; --color-line: #ccc5b4; } /* Halloween */ [data-palette="halloween"] { --color-brand: #a84e12; --color-brand-dark: #77360a; --color-brand-soft: #fbe8d8; --color-accent: #5b3a86; --color-accent-soft: #ece4f4; --color-ink: #1c1a1e; --color-ink-muted: #4f4a54; --color-ink-faint: #726c78; --color-surface: #fffdf9; --color-surface-alt: #f4f1ec; --color-ad-fill: #e9e5de; --color-line: #ccc6be; } /* Thanksgiving */ [data-palette="thanksgiving"] { --color-brand: #9c4a22; --color-brand-dark: #6f3316; --color-brand-soft: #f9e7da; --color-accent: #8a6410; --color-accent-soft: #f7edd6; --color-ink: #241c13; --color-ink-muted: #5d503f; --color-ink-faint: #796b57; --color-surface: #fffcf4; --color-surface-alt: #f7f0df; --color-ad-fill: #ebe3cd; --color-line: #cdc4ab; } /* Lunar New Year */ [data-palette="lunar-new-year"] { --color-brand: #a81d2d; --color-brand-dark: #78121f; --color-brand-soft: #f9e0e2; --color-accent: #866812; --color-accent-soft: #f6eed6; --color-ink: #1a1518; --color-ink-muted: #524a4c; --color-ink-faint: #746b6e; --color-surface: #fffdfb; --color-surface-alt: #f6efe6; --color-ad-fill: #ebe2d6; --color-line: #cec3b4; } /* -------------------------------------------------------------------------- Dark -------------------------------------------------------------------------- */ /* Dark */ [data-palette="dark"] { --color-brand: #f2a65a; --color-brand-dark: #f8c489; --color-brand-soft: #3a2a18; --color-accent: #6fd0c0; --color-accent-soft: #17302c; --color-ink: #eceef2; --color-ink-muted: #a8b0bb; --color-ink-faint: #949da8; --color-surface: #14161a; --color-surface-alt: #1c1f24; --color-ad-fill: #23272e; --color-line: #3a4049; }