/** * MathuraNow Design System — shared tokens + components * * One versioned stylesheet both the public theme (Phase 3) and wp-admin * plugin screens (Phase 2 — News Writer AI, Social Auto-Publisher, WhatsApp * settings) will draw from, instead of each screen inline-styling itself * from scratch (which is what every admin screen built this year actually * did — .gnd-toggle in News Writer AI, .gmn-toggle in Social Auto-Publisher, * each a separate hand-rolled copy of the same pill switch). This file is * the formalized, single version of those already-proven patterns. * * Namespaced `--mnds-*` / `.mnds-*` deliberately, NOT reusing the theme's * existing `--mn-*` tokens (assets/css/main.css) — this phase is pure * foundation, nothing is wired into the real theme or any real admin * screen yet (see CHANGELOG.md), so nothing here should collide with or * risk the live site's current styling. Phase 2/3 do the actual adoption. * * Colors match the confirmed MathuraNow brand palette from the * design-handoff package (design-handoff/design_handoff_mathuranow/README.md): * Navy #0D1B2A, Brand red #D90429, and the rest of that token table — * updated 2026-08-31 from this file's original placeholder values so the * shared design system and the new design never run two different * palettes in parallel. * * Dark mode: prefers-color-scheme only, no manual toggle (per the explicit * "propose the simpler option" instruction — one less piece of state to * build/maintain/persist). The dark block is still guarded as * :root:not([data-theme="light"]) / :root[data-theme="dark"] so a manual * toggle could be added later without restructuring every token — that * costs nothing today since no toggle UI exists. * * @package MathuraNow * @since 1.0.0 */ /* =================================================== TOKENS — LIGHT (default) =================================================== */ :root { /* Surfaces */ --mnds-bg: #F4F6F8; --mnds-surface: #FFFFFF; --mnds-surface-raised: #FFFFFF; --mnds-surface-sunken: #F8F9FA; --mnds-border: #EEF0F3; --mnds-border-strong: #E7EBEF; /* Text */ --mnds-text: #2A3542; --mnds-text-muted: #5B6774; --mnds-text-faint: #8A949E; --mnds-text-on-accent: #ffffff; /* Accent — MathuraNow's confirmed brand colors (Brand red / Navy from the design-handoff token table), two accents max, used purposefully (primary action vs. secondary/link) */ --mnds-accent: #D90429; --mnds-accent-hover: #B10321; --mnds-accent-bg: #FDEEEF; --mnds-accent-secondary: #0D1B2A; --mnds-accent-secondary-hover: #1E3A5F; /* Status — semantic, deliberately separate from the accent pair above */ --mnds-success: #1B7F5F; --mnds-success-bg: #E8F6F0; --mnds-warning: #8A6A2A; --mnds-warning-bg: #FFF4DF; --mnds-danger: #C1121F; --mnds-danger-bg: #FDEEEF; /* Typography — system stack by default (admin screens shouldn't hard- depend on the theme's self-hosted 'MN Sans' webfont being loaded); Phase 3 can override --mnds-font-body/-head to 'MN Sans' for the public theme specifically without touching this file. */ --mnds-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mnds-font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mnds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --mnds-text-xs: 0.75rem; /* 12px — badges, captions */ --mnds-text-sm: 0.8125rem; /* 13px — meta, secondary labels */ --mnds-text-base: 0.9375rem;/* 15px — body */ --mnds-text-lg: 1.125rem; /* 18px — lead/emphasis */ --mnds-text-h3: 1.25rem; /* 20px */ --mnds-text-h2: 1.625rem; /* 26px */ --mnds-text-h1: 2.125rem; /* 34px */ --mnds-weight-regular: 400; --mnds-weight-medium: 500; --mnds-weight-semibold: 600; --mnds-weight-bold: 700; --mnds-line-tight: 1.25; --mnds-line-normal: 1.5; --mnds-line-relaxed: 1.7; /* Spacing — 4/8px-based scale */ --mnds-space-1: 4px; --mnds-space-2: 8px; --mnds-space-3: 12px; --mnds-space-4: 16px; --mnds-space-5: 24px; --mnds-space-6: 32px; --mnds-space-7: 48px; /* Radius — controls vs. cards, matches the theme's existing 6px base */ --mnds-radius-sm: 6px; --mnds-radius-md: 10px; --mnds-radius-lg: 14px; --mnds-radius-pill: 999px; /* Shadow — minimal, only for genuinely floating elements */ --mnds-shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06); --mnds-shadow-md: 0 4px 16px rgba(20, 20, 20, 0.10); } /* =================================================== TOKENS — DARK Fires automatically on OS-level dark mode. The :not([data-theme="light"]) guard and the later :root[data-theme="dark"] block are unused today (no manual toggle exists) but keep this file forward-compatible if one is ever added, at zero cost now. =================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mnds-bg: #15161a; --mnds-surface: #1e2024; --mnds-surface-raised: #24262b; --mnds-surface-sunken: #191a1e; --mnds-border: #34363c; --mnds-border-strong: #46484f; --mnds-text: #ececea; --mnds-text-muted: #9b9a97; --mnds-text-faint: #6f6e6b; --mnds-text-on-accent: #ffffff; /* Brightened for AA contrast on dark surfaces — same hue family as the light-mode brand colors, not a different palette. */ --mnds-accent: #e05257; --mnds-accent-hover: #ea7276; --mnds-accent-bg: #3a1616; --mnds-accent-secondary: #7c9cc9; --mnds-accent-secondary-hover: #9db4d6; --mnds-success: #5fd087; --mnds-success-bg: #16351f; --mnds-warning: #ffb85c; --mnds-warning-bg: #3a2a10; --mnds-danger: #ff6b6b; --mnds-danger-bg: #3a1616; --mnds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --mnds-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45); } } :root[data-theme="dark"] { --mnds-bg: #15161a; --mnds-surface: #1e2024; --mnds-surface-raised: #24262b; --mnds-surface-sunken: #191a1e; --mnds-border: #34363c; --mnds-border-strong: #46484f; --mnds-text: #ececea; --mnds-text-muted: #9b9a97; --mnds-text-faint: #6f6e6b; --mnds-text-on-accent: #ffffff; --mnds-accent: #e05257; --mnds-accent-hover: #ea7276; --mnds-accent-bg: #3a1616; --mnds-accent-secondary: #7c9cc9; --mnds-accent-secondary-hover: #9db4d6; --mnds-success: #5fd087; --mnds-success-bg: #16351f; --mnds-warning: #ffb85c; --mnds-warning-bg: #3a2a10; --mnds-danger: #ff6b6b; --mnds-danger-bg: #3a1616; --mnds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --mnds-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45); } /* =================================================== BASE =================================================== */ .mnds-scope { color: var(--mnds-text); font-family: var(--mnds-font-body); font-size: var(--mnds-text-base); line-height: var(--mnds-line-normal); } .mnds-scope h1, .mnds-scope h2, .mnds-scope h3 { font-family: var(--mnds-font-head); font-weight: var(--mnds-weight-semibold); line-height: var(--mnds-line-tight); margin: 0 0 var(--mnds-space-3); } .mnds-scope h1 { font-size: var(--mnds-text-h1); } .mnds-scope h2 { font-size: var(--mnds-text-h2); } .mnds-scope h3 { font-size: var(--mnds-text-h3); } .mnds-scope p { margin: 0 0 var(--mnds-space-3); } .mnds-text-muted { color: var(--mnds-text-muted); } .mnds-text-sm { font-size: var(--mnds-text-sm); } .mnds-text-xs { font-size: var(--mnds-text-xs); } /* =================================================== BUTTONS =================================================== */ .mnds-btn { display: inline-flex; align-items: center; gap: var(--mnds-space-2); font-family: var(--mnds-font-body); font-size: var(--mnds-text-sm); font-weight: var(--mnds-weight-semibold); line-height: 1; padding: 0.7em 1.3em; border-radius: var(--mnds-radius-pill); border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, opacity .15s ease; } .mnds-btn:focus-visible { outline: 2px solid var(--mnds-accent-secondary); outline-offset: 2px; } .mnds-btn:disabled { opacity: .55; cursor: default; } .mnds-btn--primary { background: var(--mnds-accent); color: var(--mnds-text-on-accent); } .mnds-btn--primary:hover:not(:disabled) { background: var(--mnds-accent-hover); } .mnds-btn--secondary { background: var(--mnds-surface-sunken); color: var(--mnds-text); border-color: var(--mnds-border); } .mnds-btn--secondary:hover:not(:disabled) { background: var(--mnds-border); } /* =================================================== PILL TOGGLE SWITCH Formalizes the pattern already shipped ad-hoc as .gnd-toggle (News Writer AI) and .gmn-toggle (Social Auto-Publisher) — same structure, now token-driven and shared. =================================================== */ .mnds-toggle { display: inline-flex; align-items: center; gap: var(--mnds-space-2); cursor: pointer; user-select: none; } .mnds-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .mnds-toggle-track { flex: none; width: 36px; height: 20px; background: var(--mnds-border-strong); border-radius: var(--mnds-radius-pill); position: relative; transition: background .15s ease; } .mnds-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--mnds-surface); border-radius: 50%; transition: left .15s ease; box-shadow: var(--mnds-shadow-sm); } .mnds-toggle input:checked + .mnds-toggle-track { background: var(--mnds-accent-secondary); } .mnds-toggle input:checked + .mnds-toggle-track .mnds-toggle-thumb { left: 18px; } .mnds-toggle input:focus-visible + .mnds-toggle-track { outline: 2px solid var(--mnds-accent-secondary); outline-offset: 2px; } .mnds-toggle-label { font-size: var(--mnds-text-sm); } /* =================================================== DASHED DROP-ZONE Formalizes News Writer AI's #gnd-media-dropzone pattern. =================================================== */ .mnds-dropzone { border: 2px dashed var(--mnds-border-strong); border-radius: var(--mnds-radius-md); background: var(--mnds-surface-sunken); padding: var(--mnds-space-5); text-align: center; transition: border-color .12s ease, background .12s ease; } .mnds-dropzone--active { border-color: var(--mnds-accent-secondary); background: var(--mnds-accent-bg); } .mnds-dropzone-hint { color: var(--mnds-text-muted); font-size: var(--mnds-text-sm); margin: var(--mnds-space-2) 0 0; } /* =================================================== CARDS =================================================== */ .mnds-card { background: var(--mnds-surface); border: 1px solid var(--mnds-border); border-radius: var(--mnds-radius-md); padding: var(--mnds-space-5); } .mnds-card--raised { background: var(--mnds-surface-raised); box-shadow: var(--mnds-shadow-md); border-color: transparent; } .mnds-card-title { font-size: var(--mnds-text-h3); font-weight: var(--mnds-weight-semibold); margin: 0 0 var(--mnds-space-2); } /* =================================================== FORM CONTROLS =================================================== */ .mnds-label { display: block; font-size: var(--mnds-text-sm); font-weight: var(--mnds-weight-semibold); color: var(--mnds-text-muted); margin: 0 0 var(--mnds-space-2); } .mnds-input, .mnds-select, .mnds-textarea { width: 100%; box-sizing: border-box; font-family: var(--mnds-font-body); font-size: var(--mnds-text-base); color: var(--mnds-text); background: var(--mnds-surface); border: 1px solid var(--mnds-border); border-radius: var(--mnds-radius-sm); padding: 0.6em 0.8em; } .mnds-input:focus, .mnds-select:focus, .mnds-textarea:focus { outline: none; border-color: var(--mnds-accent-secondary); } .mnds-textarea { resize: vertical; } /* =================================================== BADGES =================================================== */ .mnds-badge { display: inline-block; font-size: var(--mnds-text-xs); font-weight: var(--mnds-weight-bold); text-transform: uppercase; letter-spacing: .03em; padding: 0.2em 0.65em; border-radius: var(--mnds-radius-pill); background: var(--mnds-surface-sunken); color: var(--mnds-text-muted); } .mnds-badge--success { background: var(--mnds-success-bg); color: var(--mnds-success); } .mnds-badge--warning { background: var(--mnds-warning-bg); color: var(--mnds-warning); } .mnds-badge--danger { background: var(--mnds-danger-bg); color: var(--mnds-danger); } .mnds-badge--accent { background: var(--mnds-accent-bg); color: var(--mnds-accent); } /* =================================================== TABLES First real consumer: Braj Health & Blood Bank Directory Pro's inline- editable "Edit Entries" admin screen. Deliberately not wp-admin's own .wp-list-table look — a real card-wrapped, token-driven table so any future plugin's "manage N rows inline" screen (there will be more) reuses this instead of hand-rolling its own like every earlier ad-hoc admin control did before this file existed. =================================================== */ .mnds-table-wrap { background: var(--mnds-surface); border: 1px solid var(--mnds-border); border-radius: var(--mnds-radius-md); overflow: auto; } .mnds-table { width: 100%; border-collapse: collapse; font-size: var(--mnds-text-sm); } .mnds-table th, .mnds-table td { padding: var(--mnds-space-3) var(--mnds-space-4); text-align: left; border-bottom: 1px solid var(--mnds-border); vertical-align: middle; } .mnds-table th { font-size: var(--mnds-text-xs); font-weight: var(--mnds-weight-semibold); text-transform: uppercase; letter-spacing: .03em; color: var(--mnds-text-muted); background: var(--mnds-surface-sunken); position: sticky; top: 0; } .mnds-table tbody tr:last-child td { border-bottom: none; } .mnds-table tbody tr:hover { background: var(--mnds-surface-sunken); } .mnds-table tbody tr[hidden] { display: none; } /* A field an admin has manually corrected — small dot so it stays legible without swallowing the row in a full highlight color. */ .mnds-table-field { position: relative; display: flex; align-items: center; gap: var(--mnds-space-2); } .mnds-table-field--manual .mnds-input, .mnds-table-field--manual .mnds-select { border-color: var(--mnds-warning); } .mnds-table-manual-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mnds-warning); box-shadow: 0 0 0 2px var(--mnds-warning-bg); } /* =================================================== TABS First real consumer: News Writer AI's "how should this image be used" Featured-vs-Source picker (a mode switch, not a navigation tab strip) - built as a reusable component here rather than one-off markup, so the next screen that needs a small labeled choice between 2-3 clear modes reuses this instead of a bare