@charset "UTF-8"; /* ========================================================================== SchoolPad UI Framework — components -------------------------------------------------------------------------- THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR EVERY REUSABLE CONTROL. Read docs/design-system.md before editing. The short version: 1. A module NEVER writes its own CSS. It uses the classes below. 2. If a class you need is missing, you add it HERE (once), document it in the contract, and every module gets it. You do not add it to your view. 3. css/sp-modern.css is FROZEN. It is the legacy adapter: it restyles old markup that nobody has migrated yet. Do not add new components there and do not add new `body.sp--page` selectors anywhere. Load order (see css/common.css.php): MODERN_UI = 1: style.css -> satoshi.css -> sp-modern.css -> sp-components.css MODERN_UI = 0: style.css -> sp-components.css THIS FILE IS NOT GATED ON MODERN_UI. It must load at both values, or a migrated screen renders as bare browser controls on every client still on 0. It is self-sufficient: it defines its own control/spacing/type tokens and supplies a fallback for every token it borrows from sp-modern.css. Verified collision-free on a rendered legacy page -- 400 elements, 0 computed-style changes. This file loads last, so it wins without needing specificity tricks. There are exactly two `!important` declarations in this file, both in section 13, both only to beat the frozen adapter's own `!important` on native form controls. Delete them when the adapter's form rules go. Add no others. See the live, interactive reference at: /designSystem ========================================================================== */ /* -------------------------------------------------------------------------- 1. Component tokens Global tokens (colour, font, radius, shadow) live in sp-modern.css :root and are referenced here with a fallback, so this file still renders correctly if it is ever loaded on its own. NOTE — a known inconsistency, deliberately preserved: the values below are the ones that actually ship today. Some of them (#0f172a, #cbd5e1, #f8fafc) come from a slate palette used by the sidebar/topbar work, while the global tokens use a slightly different family (#1c2430, #cfd6de, #f7f8fa). They are NOT unified here, because unifying them would visibly change every screen that is already live. Aligning the two palettes is a separate, reviewed task. Until then, use these tokens — never the raw hex. -------------------------------------------------------------------------- */ :root { /* Control geometry — every interactive control is 40px tall so buttons, inputs and selects line up on one row without per-page fixes. */ --sp-control-h: 40px; --sp-control-h-sm: 32px; --sp-control-px: 16px; --sp-control-radius: 4px; --sp-btn-radius: 2rem; /* Ink and lines used by controls */ --sp-control-ink: #0f172a; --sp-control-border: #cbd5e1; --sp-control-border-hover: #94a3b8; --sp-control-bg: #ffffff; --sp-control-bg-hover: #f8fafc; --sp-control-placeholder: #94a3b8; --sp-focus-ring: 0 0 0 3px rgba(60, 113, 220, .14); /* Spacing scale — the only gaps you should use */ --sp-space-1: 4px; --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px; --sp-space-5: 24px; --sp-space-6: 32px; /* Type scale */ --sp-text-xs: 12px; --sp-text-sm: 13px; --sp-text-md: 15px; --sp-text-lg: 18px; --sp-text-xl: 22px; } /* -------------------------------------------------------------------------- 2. Buttons Markup: Cancel Always: base class + exactly one variant. Never a variant on its own. -------------------------------------------------------------------------- */ .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-space-2); box-sizing: border-box; min-height: var(--sp-control-h); padding: 0 var(--sp-control-px); border: 1px solid transparent; border-radius: var(--sp-btn-radius); font-family: var(--sp-font, inherit); font-size: var(--sp-text-md); font-weight: 500; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .sp-btn:focus-visible { outline: none; box-shadow: var(--sp-focus-ring); } /* Native disabled behaviour on