/* ============================================================================ UI KIT -- shared component vocabulary for concept-stage apps (v1) ---------------------------------------------------------------------------- Every button/form/table a concept app built from labs/_shared/templates/concept-starter/ needs, styled entirely through var(--brand-*) -- the same CSS custom properties brand-engine.js's applyBrand() already sets per app from that app's own assets/app-config.js. Two selectable looks, same class names, same brand colors either way: body[data-theme="traditional"] sharp corners, thin borders, dense spacing, small-caps labels -- the administrative look fa-swp-demo/ fa-legal-demo/app-launcher/admin.html already have today, just named instead of repeated inline on every element. body[data-theme="modern"] rounded corners, soft shadows, generous spacing, larger touch targets. This is NOT labs/_shared/fairway-modern.css -- that file hardcodes its own fixed green palette (--fm-green-*), independent of any app's brand colors, as a whole-identity skin for Public Apps graduation. This file exists so either look stays visually consistent with whatever brand colors THIS app's own app-config.js set, not a fixed green. Component classes this file styles (reuse these names -- no other markup changes should be needed to switch data-theme): .app-header, .app-header-title, .container, .card, .card-title, .btn, .btn-primary, .btn-secondary, .btn-delete, .form-group, .form-group-checkbox, label, input, select, textarea, .tab-nav, .tab-btn (+ .active), .data-table, .status-badge (+ .idea/.concept/.build/.live), .dirty-badge, .status-msg (+ .ok/.error), .empty-state. Usage: link this file, then set data-theme="traditional" or data-theme="modern" on . Load AFTER app-config.js (so --brand-* vars are already set) -- order doesn't actually matter for the CSS variables themselves (custom properties resolve at paint time, not parse time), but keeping the same include order as brand-engine.js's own docs describe avoids surprises if that ever changes. ============================================================================ */ * { box-sizing: border-box; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ---------------------------------------------------------------- header */ .app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--brand-secondary, #d0d0d0); background: var(--brand-background, #fff); } .app-header-title { font-family: var(--brand-font-heading, inherit); color: var(--brand-primary, #222); font-weight: 700; font-size: 1.1rem; margin: 0; } /* ----------------------------------------------------------- form basics */ .form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .form-group-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } label { font-weight: 600; color: var(--brand-primary, #222); } input, select, textarea { font-family: var(--brand-font-body, inherit); border: 1px solid var(--brand-secondary, #ccc); background: #fff; color: #1a1a1a; padding: 7px 10px; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-accent, var(--brand-primary, #222)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent, var(--brand-primary, #222)) 25%, transparent); } /* ------------------------------------------------------------- .status-* */ .status-msg { font-size: 0.85rem; color: #666; } .status-msg.ok { color: var(--brand-success, #2f855a); } .status-msg.error { color: var(--brand-urgent, #c53030); } .status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; } .dirty-badge { display: none; font-size: 0.75rem; font-weight: 700; color: var(--brand-urgent, #c53030); padding: 3px 9px; } .dirty-badge.visible { display: inline-block; } .empty-state { color: #888; font-style: italic; padding: 16px 0; } /* --------------------------------------------------------------- .btn-* */ .btn { font-family: var(--brand-font-body, inherit); font-weight: 700; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .btn-primary { background: var(--brand-primary, #222); color: var(--brand-background, #fff); } .btn-secondary { background: transparent; color: var(--brand-primary, #222); border: 1px solid var(--brand-secondary, #ccc); } .btn-delete { background: var(--brand-urgent, #c53030); color: #fff; } /* -------------------------------------------------------------- .card-* */ .card { background: #fff; border: 1px solid var(--brand-secondary, #ddd); } .card-title { font-family: var(--brand-font-heading, inherit); color: var(--brand-primary, #222); font-weight: 700; } /* ------------------------------------------------------------ admin CRUD */ .tab-nav { display: flex; gap: 4px; flex-wrap: wrap; } .tab-btn { background: transparent; border: 1px solid var(--brand-secondary, #ccc); color: var(--brand-primary, #222); cursor: pointer; font-weight: 600; } .tab-btn.active { background: var(--brand-primary, #222); color: var(--brand-background, #fff); border-color: var(--brand-primary, #222); } .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; color: var(--brand-primary, #222); font-weight: 700; border-bottom: 2px solid var(--brand-secondary, #ccc); } .data-table td { border-bottom: 1px solid var(--brand-secondary, #e5e5e5); vertical-align: top; } /* ============================================================ traditional */ body[data-theme="traditional"] .app-header, body[data-theme="traditional"] .card, body[data-theme="traditional"] input, body[data-theme="traditional"] select, body[data-theme="traditional"] textarea, body[data-theme="traditional"] .btn, body[data-theme="traditional"] .status-badge, body[data-theme="traditional"] .dirty-badge, body[data-theme="traditional"] .tab-btn { border-radius: 2px; } body[data-theme="traditional"] label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; } body[data-theme="traditional"] .card { padding: 14px; } body[data-theme="traditional"] input, body[data-theme="traditional"] select, body[data-theme="traditional"] textarea { font-size: 0.85rem; padding: 6px 8px; } body[data-theme="traditional"] .btn { padding: 6px 12px; font-size: 0.75rem; } body[data-theme="traditional"] .tab-btn { padding: 6px 12px; font-size: 0.75rem; } body[data-theme="traditional"] .data-table th, body[data-theme="traditional"] .data-table td { padding: 6px 8px; font-size: 0.8rem; } /* ================================================================ modern */ body[data-theme="modern"] .app-header, body[data-theme="modern"] .card, body[data-theme="modern"] input, body[data-theme="modern"] select, body[data-theme="modern"] textarea, body[data-theme="modern"] .btn, body[data-theme="modern"] .status-badge, body[data-theme="modern"] .dirty-badge, body[data-theme="modern"] .tab-btn { border-radius: 10px; } body[data-theme="modern"] .card { padding: 22px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } body[data-theme="modern"] input, body[data-theme="modern"] select, body[data-theme="modern"] textarea { font-size: 0.95rem; padding: 10px 14px; } body[data-theme="modern"] .btn { padding: 10px 20px; font-size: 0.9rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } body[data-theme="modern"] .tab-btn { padding: 9px 18px; font-size: 0.85rem; } body[data-theme="modern"] .data-table th, body[data-theme="modern"] .data-table td { padding: 12px 14px; font-size: 0.9rem; } body[data-theme="modern"] .app-header { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); }