/* CLF DESIGN SYSTEM — shared color tokens + components ====================================================== Enqueued from clf-access-control.php (the one plugin every module already depends on and that's always active), so it's available everywhere without any module needing to declare a dependency on another module's plugin. Color tokens were pulled by sampling the actual pixel colors already live in clf-care-center-admin-v1 (category header colors) and clf-volunteer-report (.clf-vol-stat--* tiles) — this file codifies what was already duplicated across both, rather than inventing a new palette. Each "-dark" variant is the base color at 75% brightness, the same ratio both plugins already used for their pill badges — not a separately chosen color, so a token and its dark variant never drift apart the way clf-vol-stat--gold and Care Center's gold had (#c6aa74 vs #c6aa73) before this file existed. Existing plugins are NOT required to migrate to this file's component classes immediately — their own inline CSS keeps working. New work (like the dashboard widgets) should build on these classes instead of redeclaring the same colors again. */ :root { --clf-terracotta: #d87659; --clf-terracotta-dark: #a25843; --clf-terracotta-darker: #7a4232; --clf-teal: #7fb3b8; --clf-teal-dark: #5f868a; --clf-teal-darker: #476468; --clf-gold: #c6aa73; --clf-gold-dark: #948056; --clf-gold-darker: #6f6040; --clf-orange: #e8a66c; --clf-orange-dark: #ae7c51; --clf-orange-darker: #825d3d; --clf-sage: #8a9a6b; --clf-sage-dark: #687450; --clf-sage-darker: #4e573c; --clf-slate: #3b5e68; --clf-slate-light: #538492; /* lighter than the base tone, not just darker — used where a nested/child element needs to read as one step lighter than its parent instead of the usual darker pill/badge */ --clf-slate-dark: #2c464e; --clf-slate-darker: #21343a; /* Urgency colors — deliberately NOT reusing a module-identity token above (that would mean the same color saying two different things). Every "this is overdue/expired" indicator across every module reads these three variables, so changing the scheme later (if this one doesn't stick) is a one-time edit here, not a hunt through each module's own file. To revert to the original saturated red/amber, set --clf-urgent back to #c0392b, --clf-warn back to #b06a00, and --clf-urgent-tint back to #fdf6f5. */ --clf-urgent: #c02603; --clf-urgent-tint: #f9c1b4; /* same hue as --clf-urgent, pale (88% light) */ --clf-warn: #f1a000; /* richer gold than the original dusty mustard */ --clf-warn-tint: #f6e1b0; /* same hue as --clf-warn, pale (88% light) */ /* The two tints above are deliberately NOT a simple low-opacity blend toward white — urgent and warn are both warm, similarly dark hues (red-orange vs orange-brown, only ~26° apart), and diluting both to 10% white made them nearly indistinguishable (#f3ecea vs #f4f0ea, only 4 RGB units apart). These keep more saturation at a paler lightness instead, which actually tells them apart; the due-date cell rules below also add a solid-color left border, so the distinction never depends on the faint background tint alone. */ /* "Done, no action needed" — a true forest green, not --clf-sage (that's reserved for a future module's identity, same reason urgent/ warn don't reuse a module color). Deliberately NOT the same bright traffic-light green we replaced elsewhere. */ --clf-done: #148339; --clf-done-tint: #bbfbd2; } /* -dark = base at 75% brightness (the pill-badge ratio already live in Care Center/Volunteers). -darker = that same 75% applied again, used where white text sits directly on a solid fill and needs real contrast (card headers) — see the widget/card rules below for why both tiers exist instead of just one. */ /* -------------------------------------------------- STAT TILE (big-number KPI tile, e.g. Volunteers' Overview row) -------------------------------------------------- */ .clf-ds-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .clf-ds-stat { border-radius: 8px; padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .clf-ds-stat-num { font-size: 30px; font-weight: 700; line-height: 1; color: #fff; } .clf-ds-stat-label { font-size: 12px; margin-top: 4px; opacity: 0.9; } /* -------------------------------------------------- PILL TOGGLE (e.g. Volunteers' "Show: Members / Regular Attenders") -------------------------------------------------- */ .clf-ds-toggle { display: inline-block; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid #ccc; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .clf-ds-toggle.on { background: #2271b1; color: #fff; border-color: #2271b1; } .clf-ds-toggle.off { background: #fff; color: #888; } .clf-ds-toggle:hover { text-decoration: none; } .clf-ds-toggle.off:hover { background: #f5f5f5; color: #555; } /* -------------------------------------------------- PILL TAB (e.g. Volunteers' "Not Serving (175) / Serving (252)") -------------------------------------------------- */ .clf-ds-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .clf-ds-tab { padding: 5px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; text-decoration: none; color: #6b7280; background: rgba(0,0,0,0.05); } .clf-ds-tab:hover { background: rgba(0,0,0,0.09); color: #374151; text-decoration: none; } .clf-ds-tab.active { background: #fff; color: #374151; box-shadow: 0 1px 2px rgba(0,0,0,0.12); } /* -------------------------------------------------- INBOX WIDGET (module card: colored capsule header with a count pill, expands via native
/ to a flat list of items) Markup:
▸ Member Care 3
Task title Due Oct 14 ...
-------------------------------------------------- */ .clf-ds-widget { border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; margin-bottom: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .clf-ds-widget-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; user-select: none; } .clf-ds-widget-header::-webkit-details-marker { display: none; } .clf-ds-widget-chevron { display: inline-block; width: 0; height: 0; flex-shrink: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; transition: transform 0.15s; } details[open] > .clf-ds-widget-header .clf-ds-widget-chevron { transform: rotate(90deg); } .clf-ds-widget-title { flex: 1; } .clf-ds-widget-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; } .clf-ds-widget-body { padding: 4px 0; } .clf-ds-widget-empty { padding: 14px 16px; color: #9ca3af; font-size: 13px; font-style: italic; } .clf-ds-widget-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px; text-decoration: none; color: inherit; border-top: 1px solid #f1f2f4; } .clf-ds-widget-row:hover { background: #f8f9fa; text-decoration: none; } .clf-ds-widget-row-title { font-weight: 600; font-size: 13px; color: #1f2937; } .clf-ds-widget-row-meta { font-size: 12px; color: #9ca3af; white-space: nowrap; } .clf-ds-widget-row-meta.overdue { color: var(--clf-urgent); font-weight: 600; } .clf-ds-widget-row-meta.due-soon { color: var(--clf-warn); font-weight: 600; } /* Color modifiers — header background + matching darker count pill */ /* Header uses the -dark tier (not the base token) so white header text gets real contrast; the count pill goes one tier darker still so it reads as a distinct chip against its own header instead of blending into it. See the -dark/-darker comment above :root for the numbers. */ .clf-ds-widget--terracotta { background: var(--clf-terracotta-dark); } .clf-ds-widget--terracotta .clf-ds-widget-count { background: var(--clf-terracotta-darker); } .clf-ds-widget--teal { background: var(--clf-teal-dark); } .clf-ds-widget--teal .clf-ds-widget-count { background: var(--clf-teal-darker); } .clf-ds-widget--gold { background: var(--clf-gold-dark); } .clf-ds-widget--gold .clf-ds-widget-count { background: var(--clf-gold-darker); } .clf-ds-widget--orange { background: var(--clf-orange-dark); } .clf-ds-widget--orange .clf-ds-widget-count { background: var(--clf-orange-darker); } .clf-ds-widget--sage { background: var(--clf-sage-dark); } .clf-ds-widget--sage .clf-ds-widget-count { background: var(--clf-sage-darker); } .clf-ds-widget--slate { background: var(--clf-slate-dark); } .clf-ds-widget--slate .clf-ds-widget-count { background: var(--clf-slate-darker); } /* -------------------------------------------------- RICH WIDGET (opt-in upgrade on top of the base .clf-ds-widget pattern above: a gradient header with an icon + divider + title/subtitle, a translucent count pill, and a colored role-chip per row instead of a plain title line. So far only used by the RACI dashboard widget — any widget can opt in by adding "clf-ds-widget--rich" on the outer
, alongside its existing color modifier on the header. Extra markup on top of the base pattern:
...svg... RACI Your R/A responsibilities 3
R Title Description Due Oct 16
-------------------------------------------------- */ .clf-ds-widget--rich .clf-ds-widget-header { padding: 20px 22px; gap: 14px; } .clf-ds-widget--rich .clf-ds-widget-header.clf-ds-widget--slate { background: linear-gradient(135deg, var(--clf-slate-light), var(--clf-slate-darker)); } .clf-ds-widget--rich .clf-ds-widget-header.clf-ds-widget--teal { background: linear-gradient(135deg, var(--clf-teal), var(--clf-teal-darker)); } .clf-ds-widget--rich .clf-ds-widget-header.clf-ds-widget--gold { background: linear-gradient(135deg, var(--clf-gold), var(--clf-gold-darker)); } .clf-ds-widget-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; } .clf-ds-widget-icon svg { width: 24px; height: 24px; } .clf-ds-widget-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.3); } .clf-ds-widget-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .clf-ds-widget-titles .clf-ds-widget-title { flex: none; font-size: 22px; } .clf-ds-widget-subtitle { font-size: 14px; font-weight: 400; opacity: 0.85; } .clf-ds-widget--rich .clf-ds-widget-count { background: rgba(255,255,255,0.22) !important; font-size: 14px; padding: 5px 15px; height: auto; min-width: 0; } /* justify-content: flex-start (not the base rule's space-between) because .clf-ds-widget-row-text below now claims the leftover space itself via flex-grow — with space-between still active, a SHORT title/description (nothing to truncate) would shrink-wrap and space-between would then float that shrink-wrapped block away from the chip toward the middle of the row, which is exactly what made some rows drift rightward while rows with long, truncated text looked fine (their text block already filled the available width, masking the bug). */ .clf-ds-widget--rich .clf-ds-widget-row { align-items: center; justify-content: flex-start; gap: 16px; padding: 16px 20px; } .clf-ds-widget-row-chip { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; } /* Darker gradient for R (the heavier-weight role), lighter for A — same slate tokens as the header, no new color introduced. */ .clf-ds-widget-row-chip--r { background: linear-gradient(135deg, var(--clf-slate-dark), var(--clf-slate-darker)); } .clf-ds-widget-row-chip--a { background: linear-gradient(135deg, var(--clf-slate-light), var(--clf-slate)); } /* Single-gradient chips for modules with no R/A-style two-state distinction — one consistent tone per module, dark-to-darker like the header. */ .clf-ds-widget-row-chip--teal { background: linear-gradient(135deg, var(--clf-teal-dark), var(--clf-teal-darker)); } .clf-ds-widget-row-chip--gold { background: linear-gradient(135deg, var(--clf-gold-dark), var(--clf-gold-darker)); } .clf-ds-widget-row-text { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1 1 auto; } /* Title and subtitle each truncate to one line instead of wrapping — a long matrix title or description otherwise blows the row up to 2-3 lines, which both looks inconsistent row-to-row and throws off the chip's vertical centering (it's centered correctly either way, it just looks wrong next to a much taller text block). The full text is still available via the title="" attribute and, of course, by opening the row's own link. Tighter line-height than the browser default pulls the two lines closer together, since the default was adding visible air between them even with the gap already at 0. */ .clf-ds-widget--rich .clf-ds-widget-row-title, .clf-ds-widget-row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.3; } .clf-ds-widget--rich .clf-ds-widget-row-title { font-size: 16px; font-weight: 700; } .clf-ds-widget-row-sub { font-size: 14px; font-weight: 400; color: #64748b; } /* Top-aligned to sit level with the title's line instead of centered against the full two-line block. */ .clf-ds-widget--rich .clf-ds-widget-row-meta { font-size: 14px; align-self: flex-start; padding-top: 2px; } .clf-ds-widget--rich .clf-ds-widget-row-meta.overdue, .clf-ds-widget--rich .clf-ds-widget-row-meta.due-soon { font-weight: 600; } /* -------------------------------------------------- BUTTONS (already shared, unprefixed, by informal convention across ~9 plugins — codifying that convention here rather than inventing a new one. Each plugin's own inline